/* Wird ausschliesslich auf Einzelansichten des Post Types "artikel" geladen. */

.artikel-seite section.blue {
	background-color: #004784;
	color: #fff;
}

.artikel-seite section.red h1,
.artikel-seite section.red h2,
.artikel-seite section.red h3,
.artikel-seite section.red a:not(.button_1):not(.button_2),
.artikel-seite section.blue h1,
.artikel-seite section.blue h2,
.artikel-seite section.blue h3,
.artikel-seite section.blue h4,
.artikel-seite section.blue h5,
.artikel-seite section.blue h6,
.artikel-seite section.blue a:not(.button_1):not(.button_2) {
	color: #fff;
}

.artikel-seite .artikel-kopf h1 {
	max-width: 920px;
}

.artikel-ueberzeile {
	margin: 0 0 12px;
	color: #008f88;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.artikel-einleitung {
	max-width: 900px;
	font-size: 20px;
	font-weight: 300;
	line-height: 150%;
}

.artikel-kopfbild {
	padding-top: 35px !important;
}

.artikel-kopfbild img,
.artikel-bild figure img,
.artikel-text-bild figure img {
	display: block;
	width: 100%;
	height: auto;
}

.artikel-seite figure {
	margin: 0;
}

.artikel-seite .abgerundet img {
	border-radius: 20px;
}

/* Kantenloser Bildbaustein ausserhalb des begrenzten 12er-Inhaltsrasters. */
.artikel-seite .artikel-bild-viewport {
	display: block;
	width: 100vw;
	max-width: none;
	margin: 0;
	padding: 0;
}

.artikel-bild-viewport picture,
.artikel-bild-viewport img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/* Unabhaengige vertikale Abstaende fuer alle Artikel-Bausteine. */
.artikel-seite .artikel-pt-0 { --artikel-padding-top: 0; }
.artikel-seite .artikel-pt-25 { --artikel-padding-top: 25px; }
.artikel-seite .artikel-pt-50 { --artikel-padding-top: 50px; }
.artikel-seite .artikel-pt-75 { --artikel-padding-top: 75px; }
.artikel-seite .artikel-pt-100 { --artikel-padding-top: 100px; }
.artikel-seite .artikel-pt-125 { --artikel-padding-top: 125px; }
.artikel-seite .artikel-pt-150 { --artikel-padding-top: 150px; }

.artikel-seite .artikel-pb-0 { --artikel-padding-bottom: 0; }
.artikel-seite .artikel-pb-25 { --artikel-padding-bottom: 25px; }
.artikel-seite .artikel-pb-50 { --artikel-padding-bottom: 50px; }
.artikel-seite .artikel-pb-75 { --artikel-padding-bottom: 75px; }
.artikel-seite .artikel-pb-100 { --artikel-padding-bottom: 100px; }
.artikel-seite .artikel-pb-125 { --artikel-padding-bottom: 125px; }
.artikel-seite .artikel-pb-150 { --artikel-padding-bottom: 150px; }

.artikel-seite div#paragraph_content[class*="artikel-pt-"] {
	padding-top: var(--artikel-padding-top);
	padding-bottom: var(--artikel-padding-bottom);
}

.artikel-seite section.artikel-bild-viewport {
	padding-top: var(--artikel-padding-top);
	padding-bottom: var(--artikel-padding-bottom);
}

.artikel-seite figcaption {
	padding-top: 10px;
	font-size: 13px;
	line-height: 140%;
}

.artikel-text-bild #paragraph_content {
	align-items: center;
}

.artikel-icon-text #paragraph_content {
	align-items: center;
}

.artikel-icon-text article#full.artikel-icon-spalte,
.artikel-icon-text article#full.artikel-icon-textspalte {
	grid-row: 1;
}

.artikel-icon-spalte figure {
	margin-right: auto;
	margin-left: auto;
}

.artikel-icon-spalte img {
	display: block;
	width: 100%;
	height: auto;
}

.artikel-icon-groesse-100 { max-width: 100px; }
.artikel-icon-groesse-140 { max-width: 140px; }
.artikel-icon-groesse-200 { max-width: 200px; }
.artikel-icon-groesse-full { max-width: 100%; }

.artikel-icon-text h2 {
	margin-bottom: 4px;
	padding-bottom: 0;
	font-size: 20px;
}

.artikel-icon-textspalte #content_block > :last-child {
	margin-bottom: 0;
}

.artikel-text-bild article#full.artikel-textspalte,
.artikel-text-bild article#full.artikel-bildspalte {
	grid-row: 1;
}

.artikel-zwei-bilder article#full,
.artikel-zwei-karten article#full {
	grid-row: 1;
}

.artikel-zwei-bilder img,
.artikel-zwei-karten img {
	display: block;
	width: 100%;
	height: auto;
}

.artikel-zwei-karten article#full.artikel-karte {
	display: flex;
	flex-direction: column;
}

.artikel-karten-text {
	padding-top: 20px;
}

.artikel-karten-text > :last-child {
	margin-bottom: 0;
}

.artikel-karten-button {
	margin-top: auto;
	padding-top: 18px;
}

.artikel-zitat blockquote {
	margin: 0;
	padding-left: 28px;
	border-left: 5px solid #008f88;
}

.artikel-zitat blockquote p {
	margin-top: 0;
	font-size: 26px;
	font-weight: 600;
	line-height: 140%;
}

.artikel-zitat cite {
	font-size: 14px;
	font-style: normal;
}

.artikel-cta article {
	text-align: center;
}

.artikel-download-link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-weight: 600;
}

.artikel-download-icon {
	display: inline-grid;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #008f88;
	color: #fff;
	font-size: 25px;
	place-items: center;
}

@media only screen and (max-width: 800px) {
	.artikel-einleitung {
		font-size: 18px;
	}

	.artikel-kopfbild {
		padding-top: 20px !important;
	}

	.artikel-text-bild article#full.artikel-textspalte {
		grid-row: auto;
		order: 2;
	}

	.artikel-text-bild article#full.artikel-bildspalte {
		grid-row: auto;
		order: 1;
		padding-bottom: 30px !important;
	}

	.artikel-icon-text article#full.artikel-icon-spalte,
	.artikel-icon-text article#full.artikel-icon-textspalte {
		grid-row: auto;
	}

	.artikel-icon-text article#full.artikel-icon-spalte {
		padding-bottom: 20px !important;
	}

	.artikel-icon-spalte figure {
		margin-left: 0;
	}

	.artikel-zwei-bilder article#full,
	.artikel-zwei-karten article#full {
		grid-row: auto;
	}

	.artikel-zwei-bilder .artikel-bild-links,
	.artikel-zwei-karten .artikel-karte-1 {
		padding-bottom: 30px !important;
	}

	.artikel-zitat blockquote p {
		font-size: 20px;
	}
}