
/* ############################################################
	ALLGEMEINES
############################################################ */

/* Modultitel */
h2.mdl180-modultitel {
	margin-bottom: 26px;
}
@media screen and (min-width: 1200px) {
	h2.mdl180-modultitel {
		margin-bottom: 60px;
	}
}


/* Modul-Einleitung */
.mdl180-einleitung {
	margin-bottom: 32px;
}
@media screen and (min-width: 1200px) {
	.mdl180-einleitung {
		margin-bottom: 54px;
	}
}


/* Absätze */
.mdl180-einleitung p:last-of-type {
	margin-bottom: 0;
}


/* ############################################################
	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 {
	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: 14px;
	border-radius: 15px;
	background-color: var(--main-color-white);
	cursor: pointer;
}
.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: 18px 46px 18px 15px;
}

	/* Titel (Header) */
	.mdl180-accordion .acc-heading button > .button-title {
		display: inline-block;
		font-weight: 400;
		font-size: 1.125rem; /* 18px */
		line-height: 1.0;
	}
	.mdl180-accordion .acc-heading.open button > .button-title {
		color: var(--main-color-2);
	}

/* Chevron-Icon (Header) */
.mdl180-accordion .acc-heading span.acc-chevron {
	position: absolute;
	top: calc(50% - 5px);
	right: 14px;
	width: 18px;
	height: 10px;
	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: 3px 23px 23px 15px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: var(--main-color-white);
}
@media screen and (min-width: 992px) {
	/* Titel (Header) */
	.mdl180-accordion .acc-heading button > .button-title {
		transition: color 300ms var(--cubic-bezier);
	}
	.mdl180-accordion .acc-heading:hover button > .button-title {
		color: var(--main-color-2);
	}

	/* 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-2);
	}
}
@media screen and (min-width: 1200px) {
	/* Header */
	.mdl180-accordion h3.acc-heading {
		margin-top: 20px;
	}
		/* Button (Header) */
		.mdl180-accordion .acc-heading button {
			flex-direction: row;
			padding: 25px 75px 25px 25px;
		}
			
			/* Titel (Header) */
			.mdl180-accordion .acc-heading button > .button-title {
				font-size: 1.5625rem; /* 25px */
				letter-spacing: 0.5px;
			}

		/* Chevron-Icon (Header) */
		.mdl180-accordion .acc-heading span.acc-chevron {
			top: calc(50% - 7px);
			right: 25px;
			width: 25px;
			height: 14px;
		}
	
	/* Inhalt-Panel */
	.mdl180-accordion .acc-panel {
		padding: 5px 75px 38px 25px;
	}
}
@media screen and (min-width: 1600px) {
	/* Inhalt-Panel */
	.mdl180-accordion .acc-panel {
		padding-right: 100px;
	}
}

