/* ############################################################
	ALLGEMEINES
############################################################ */

/* Modultitel */
h2.mdl180-modultitel {
	margin-bottom: 50px;
}
@media screen and (min-width: 1200px) {
	h2.mdl180-modultitel {
		margin-bottom: 100px;
	}
}


/* ############################################################
	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 {
	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;
}


/* Header */
.mdl180-accordion h3.acc-heading {
	margin-top: 35px;
	border-radius: 10px;
	background-color: var(--main-color-white);
	cursor: pointer;
}
.mdl-container.mdl-art-180:not(.bg-color-6) .mdl180-accordion h3.acc-heading {
	background-color: var(--main-color-5);
}
.mdl180-accordion > h3.acc-heading:first-child {
	margin-top: 0;
}
.mdl180-accordion h3.acc-heading.open {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Button (Header) */
.mdl180-accordion .acc-heading button {
	display: flex;
	align-items: baseline;
	flex-direction: column;
	width: 100%;
	padding: 35px 78px 35px 23px;
}

	/* Logo (Header) */
	.mdl180-accordion .acc-heading button .button-image {
		display: inline-block;
		width: 100%;
	}
		.mdl180-accordion .acc-heading button .button-image img {
			height: 35px;
		}

	/* Titel (Header) */
	.mdl180-accordion .acc-heading button > .button-title {
		display: inline-block;
		font-weight: 700;
		font-size: 1.5rem; /* 24px */
		line-height: 1.16;
		letter-spacing: 0.48px;
	}
	.mdl180-accordion .acc-heading button > .button-image + .button-title {
		margin-top: 8px;
		font-style: italic;
		font-size: 1.125rem; /* 18px */
		letter-spacing: 0.36px;
	}

/* Chevron-Icon (Header) */
.mdl180-accordion .acc-heading span.acc-chevron {
	position: absolute;
	top: calc(50% - 9px);
	right: 23px;
	width: 32px;
	height: 18px;
	transition: transform 300ms var(--cubic-bezier);
}
.mdl180-accordion .acc-heading.open span.acc-chevron {
	transform: rotate(180deg);
}
	.mdl180-accordion .acc-heading span.acc-chevron svg {
		fill: var(--main-color-1);
	}

/* Inhalt-Panel */
.mdl180-accordion .acc-panel {
	padding: 0 23px 64px 23px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: var(--main-color-white);
}
.mdl-container.mdl-art-180:not(.bg-color-6) .mdl180-accordion .acc-panel {
	background-color: var(--main-color-5);
}
@media screen and (min-width: 992px) {
	/* Chevron-Icon (Header) */
	.mdl180-accordion .acc-heading span.acc-chevron svg {
		transition: fill 300ms var(--cubic-bezier);
	}
	.mdl180-accordion .acc-heading:hover span.acc-chevron svg {
		fill: var(--main-color-7);
	}
}
@media screen and (min-width: 1200px) {
	/* Header */
	.mdl180-accordion h3.acc-heading {
		margin-top: 60px;
	}
		/* Button (Header) */
		.mdl180-accordion .acc-heading button {
			flex-direction: row;
			padding: 45px 148px 45px 35px;
		}

			/* Logo (Header) */
			.mdl180-accordion .acc-heading button .button-image {
				width: calc((4 * var(--col-width-1)) + (3 * var(--gap)) - 35px);
				margin-right: var(--gap);
			}
				.mdl180-accordion .acc-heading button .button-image img {
					height: 53px;
				}
			
			/* Titel (Header) */
			.mdl180-accordion .acc-heading button > .button-title {
				font-size: 2.1875rem; /* 35px */
				letter-spacing: 0.7px;
			}
			.mdl180-accordion .acc-heading button > .button-image + .button-title {
				margin-top: 0;
				font-size: 1.5625rem; /* 25px */
				letter-spacing: 0.5px;
			}

		/* Chevron-Icon (Header) */
		.mdl180-accordion .acc-heading span.acc-chevron {
			top: calc(50% - 13px);
			right: 50px;
			width: 48px;
			height: 27px;
		}
	
	/* Inhalt-Panel */
	.mdl180-accordion .acc-panel {
		padding: 0 50px 80px 35px;
	}
}


/* 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;
		}
}