/* ############################################################
	180 - AKKORDEON
############################################################ */

/* Resets */
.mdl180-accordion .acc-heading button {
	border: none;
	background: none;
	text-align: inherit;
	font-weight: inherit;
	line-height: normal;
	color: inherit;
	cursor: pointer;
}
.mdl180-accordion h3.acc-heading {
	margin-bottom: 0;
	font-size: 100%;
	line-height: normal;
	letter-spacing: normal;
}
.mdl180-accordion .acc-heading span.acc-chevron, .mdl180-accordion .acc-heading .button-image {
	font-size: 0;
	line-height: 0;
	letter-spacing: normal;
}
.mdl180-accordion .acc-panel > p:last-of-type {
	margin-bottom: 0;
}


/* Akkordeon-Box */
.mdl180-accordion {
	border-bottom: 1px solid var(--main-color-1);
}

/* Header */
.mdl180-accordion .acc-heading {
	cursor: pointer;
	display: flex;
	flex-direction: row;
	padding: 6px 0;
/*	padding: 6px 10px;*/
	border-top: 1px solid var(--main-color-1);
}
	/* Button (Header) */
	.mdl180-accordion .acc-heading button {
		width: 100%;
	}
		/* Titel (Header) */
		.mdl180-accordion .acc-heading button > .button-title {
			display: inline-block;
			margin-right: 10px;
			font-weight: 600;
			font-size: 1.25rem; /* 20px */
			line-height: 1.15;
			letter-spacing: -0.2px;
		}

		/* Chevron-Icon (Header) */
		.mdl180-accordion .acc-heading span.acc-chevron {
			width: 13px;
			height: 13px;
			margin-top: 5px;
			margin-left: auto;
			background-image: url("../../kunstschule/Images/Elemente/Arrow_RightDown_13x13_Black.svg");
			background-repeat: no-repeat;
			background-position: 0 0;
			background-size: 100% 100%;
		}
		.mdl180-accordion .acc-heading.open span.acc-chevron {
			background-image: url("../../kunstschule/Images/Elemente/Icon_X_13x13_Black.svg");
		}

/* Content */
.mdl180-accordion .acc-panel {
	padding: 0 0 60px;
/*	padding: 0 10px 60px;*/
}
@media (min-width: 1024px) {
	/* Header */
	.mdl180-accordion .acc-heading {
		padding: 10px 0;
/*		padding: 10px 18px;*/
	}
		/* Titel (Header) */
		.mdl180-accordion .acc-heading button > .button-title {
			margin-right: 18px;
			font-size: 1.625rem; /* 26px */
			line-height: 1.15;
			letter-spacing: -0.26px;
		}
	
		/* Chevron-Icon (Header) */
		.mdl180-accordion .acc-heading span.acc-chevron {
			width: 19px;
			height: 19px;
			margin-top: 6px;
			background-image: url("../../kunstschule/Images/Elemente/Arrow_RightDown_19x19_Black.svg");
			transition: background-image 300ms var(--cubic-bezier);
		}
		.mdl180-accordion .acc-heading:hover span.acc-chevron {
			background-image: url("../../kunstschule/Images/Elemente/Arrow_RightDown_19x19_Signalorange.svg");
		}
		.mdl180-accordion .acc-heading.open span.acc-chevron {
			background-image: url("../../kunstschule/Images/Elemente/Icon_X_19x19_Black.svg");
		}
		.mdl180-accordion .acc-heading.open:hover span.acc-chevron {
			background-image: url("../../kunstschule/Images/Elemente/Icon_X_19x19_Signalorange.svg");
		}

	/* Content */
	.mdl180-accordion .acc-panel {
		padding: 0 0 60px;
/*		padding: 0 18px 60px;*/
	}
}


/* Vorlagen/Raster */
.table-template-1 {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	width: 100%;
}
.table-template-1 .col-2 {
	margin-top: 40px;
}
	.table-template-1 .col-1 p:last-child, .table-template-1 .col-2 p:last-child, .table-template-1 .col-2 .table-fade:last-child {
		margin-bottom: 0;
	}
@media screen and (min-width: 1200px) {
	.table-template-1 .col-2 {
		margin-top: 60px;
	}
}
@media screen and (min-width: 1600px) {
	.table-template-1 {
		flex-direction: row;
	}
		.table-template-1 .col-1 {
			width: calc((3 * var(--col-width-1)) + (3 * var(--gap)) - 35px); /* 35px = Rand (links) */
		}
		.table-template-1 .col-2 {
			width: calc((8 * var(--col-width-1)) + (7 * var(--gap)) - 50px); /* 50px = Rand (rechts) */
			margin-top: 0;
			margin-left: calc((1 * var(--col-width-1)) + (1 * var(--gap)));
		}
}


/* Liste */
.mdl180-accordion .acc-panel ul li {
	margin-left: 15px !important;
}
.mdl180-accordion .acc-panel ul li:before {
	margin-left: -15px !important;
}
@media screen and (min-width: 1200px) {
	.mdl180-accordion .acc-panel ul li {
		margin-left: 18px !important;
	}
	.mdl180-accordion .acc-panel ul li:before {
		margin-left: -18px !important;
	}
}


/* Tabellen */
/* Reset */
.mdl180-accordion .acc-panel table.table-1 th {
	font-weight: 400;
	text-align: inherit;
}

/* Scrollbare Tabellen (Mobile) */
.mdl-container.mdl-art-180:not(.bg-color-6) .table-fade {
	--fade-bg: 213,237,250;
}


/* Tabellen-Box */
.mdl180-accordion .acc-panel .table-fade {
	margin-bottom: 40px;
}
@media screen and (min-width: 1200px) {
	.mdl180-accordion .acc-panel .table-fade {
		margin-bottom: 60px;
	}
}


/* Gestaltung */
.mdl180-accordion .acc-panel table.table-1 {
	border-collapse: collapse;
	width: 100%;
	min-width: 630px; /* Für scrollbare Tabelle benötigt. */
	font-style: italic;
}
	
	/* Zeilenüberschrift */
	.mdl180-accordion .acc-panel table.table-1 thead tr {
		border-bottom-width: 2px;
	}
		.mdl180-accordion .acc-panel table.table-1 thead th {
			padding: 0 23px 8px 0;
			vertical-align: top;
			font-weight: 700;
		}
	
	/* Normale Zeilen */
	.mdl180-accordion .acc-panel table.table-1 tr {
		border-bottom: 1px solid var(--main-color-2);
	}
		.mdl180-accordion .acc-panel table.table-1 tbody th,
		.mdl180-accordion .acc-panel table.table-1 tbody td {
			display: table-cell;
			vertical-align: top;
			text-align: left;
			width: 225px;
			padding: 14px 23px 15px 0;
		}
		.mdl180-accordion .acc-panel table.table-1 th:nth-child(1) { /* Zellen in erste Spalte sind Zeilen-Überschriften (th) */
			width: auto;
			padding-right: 23px;
		}
		.mdl180-accordion .acc-panel table.table-1 th:last-child,
		.mdl180-accordion .acc-panel table.table-1 td:last-child {
			padding-right: 0;
		}
@media screen and (max-width: 767.98px) {
	.mdl180-accordion .acc-panel table.table-1 th, .mdl180-accordion .acc-panel table.table-1 td {
		white-space: nowrap; /* Für scrollbare Tabelle benötigt. */
	}
}
@media screen and (min-width: 768px) {
	.mdl180-accordion .acc-panel table.table-1 {
		table-layout: fixed; /* Fixed = Sind alle Spalten gleich Breit */
		min-width: auto;
	}
		.mdl180-accordion .acc-panel table.table-1 tbody th,
		.mdl180-accordion .acc-panel table.table-1 tbody td {
			width: auto;
		}
		.mdl180-accordion .acc-panel table.table-1 th:nth-child(1) {
			width: calc((4 * var(--col-width-1)) + (4 * var(--gap)) - 23px); /* 23px = Rand (links) */
		}
}
@media screen and (min-width: 1200px) {
	.mdl180-accordion .acc-panel table.table-1 thead th {
		padding-bottom: 10px;
		padding: 0 35px 10px 0;
	}
	.mdl180-accordion .acc-panel table.table-1 tbody th,
	.mdl180-accordion .acc-panel table.table-1 tbody td {
		width: auto;
		padding: 17px 35px 19px 0;
	}
	.mdl180-accordion .acc-panel table.table-1 th:nth-child(1) {
		width: calc((4 * var(--col-width-1)) + (4 * var(--gap)) - 35px); /* 35px = Rand (links) */
		padding-right: 35px;
	}
}
@media screen and (min-width: 1600px) {
	.mdl180-accordion .acc-panel table.table-1 {
		table-layout: inherit; /* Fixed = Sind alle Spalten gleich Breit */
	}
		.mdl180-accordion .acc-panel table.table-1 tbody th,
		.mdl180-accordion .acc-panel table.table-1 tbody td {
			width: 200px;
		}
		.mdl180-accordion .acc-panel table.table-1 th:nth-child(1) {
			width: auto;
		}
}