/* =========================================================================
   MODULDREI: Stylesheet der Blogbeitrags-Vorlage
   =========================================================================
   Wird nur auf Beitraegen mit dieser Vorlage geladen (siehe inc/m3-templates.php).
   Alle Regeln haengen an der Klasse .m3-blog am body-Element, damit nichts
   ausserhalb der Vorlage beeinflusst wird.

   Farben kommen aus der Theme-Palette und nicht als feste Hex-Werte. Aendert
   MODULDREI spaeter eine Hausfarbe im Customizer, zieht der Beitrag automatisch
   mit. Die Hex-Werte dahinter sind nur der Rueckfall, falls eine Variable
   fehlt. Sie stammen aus der Messung der Testumgebung vom 10.08.2026.

   Schriften werden hier nicht geladen. Exo und Roboto bringt das Theme bereits
   mit (gemessen: Ueberschriften Exo, Fliesstext Roboto 18px/1.6). Ein zweites
   Laden derselben Dateien waere unnoetiger Ballast.
   ========================================================================= */

.m3-blog {
	/* Aktionsfarbe, Buttons und Nummern */
	--m3-pink: var(--global-palette1, #d13e6f);
	/* Dunkle Baender und Fliesstext */
	--m3-dunkel: var(--global-palette3, #23394a);
	/* Sekundaertext und Buttons */
	--m3-blau: var(--global-palette4, #497593);
	/* Kernaussage */
	--m3-teal: var(--global-palette6, #8fd3d1);
	/* Helle Flaechen */
	--m3-hell: var(--global-palette8, #dceeef);
	--m3-weiss: var(--global-palette9, #ffffff);

	--m3-schrift-titel: "Exo", "Segoe UI", Arial, sans-serif;
	--m3-schrift-text: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* Eine gemeinsame Breite fuer den ganzen Beitrag: Kopfbereich, Fliesstext
	   und die farbigen Baender liegen auf derselben Achse. 860px Inhalt ergeben
	   rund 80 Zeichen pro Zeile, gut lesbar sind 60 bis 80. Zum Vergleich
	   gemessen: 700px ergaben 65 Zeichen, 1080px rund 100. */
	--m3-raster: 940px;
	--m3-raster-innen: 40px;
}

/* -------------------------------------------------------------------------
   Grundgeruest
   ------------------------------------------------------------------------- */

/* Der Beitrag liegt direkt im Seitengeruest des Themes, ohne dessen
   Inhaltsspalte. Grund: die Standardansicht stellt den Inhalt in eine 921px
   schmale Spalte neben einer Seitenspalte, die farbigen Baender brauchen aber
   die volle Fensterbreite. */
.m3-blog .m3-beitrag {
	font-family: var(--m3-schrift-text);
	font-size: 18px;
	line-height: 1.6;
	color: var(--m3-dunkel);
	background: var(--m3-weiss);
	overflow-x: hidden;
}

.m3-blog .m3-beitrag img {
	max-width: 100%;
	height: auto;
	display: block;
}

.m3-blog .m3-beitrag h1,
.m3-blog .m3-beitrag h2,
.m3-blog .m3-beitrag h3,
.m3-blog .m3-beitrag h4 {
	font-family: var(--m3-schrift-titel);
	margin: 0;
}

.m3-blog .m3-beitrag p {
	margin: 0 0 22px;
}

.m3-blog .m3-beitrag p:last-child {
	margin-bottom: 0;
}

/* Sektions-Geruest: aussen volle Breite (Farbband), innen das feste Raster */
.m3-blog .section {
	width: 100%;
	padding: 64px 0;
}

.m3-blog .section__inner {
	max-width: var(--m3-raster);
	margin: 0 auto;
	padding: 0 var(--m3-raster-innen);
}

.m3-blog .section--hell {
	background: var(--m3-hell);
}

.m3-blog .section--dunkel {
	background: var(--m3-dunkel);
	color: var(--m3-weiss);
}

.m3-blog .section--teal {
	background: var(--m3-teal);
}

/* Kontakt-Band bewusst auf dem dunkleren Blau (palette4). Auf dem hellen Blau
   (palette5) erreicht weisse Schrift nur Kontrast 3.06 und ist schlecht lesbar.
   Dieselbe Korrektur wurde am 24.07.2026 auf der Weiterbildungsseite gemacht. */
.m3-blog .section--blau {
	background: var(--m3-blau);
	color: var(--m3-weiss);
}

.m3-blog .section--lesen {
	padding: 40px 0;
}

/* Folgen zwei Lesemodule aufeinander, wird der Abstand nicht doppelt gezaehlt */
.m3-blog .section--lesen + .section--lesen {
	padding-top: 0;
}

/* Ueberschriften-Stufen, eine Stufe kompakter als auf den Unterseiten */
.m3-blog .h-sektion {
	font-size: 38px;
	line-height: 1.15;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.m3-blog .h-zentriert {
	font-size: 21px;
	font-weight: 700;
	text-align: center;
	margin: 0;
	color: var(--m3-dunkel);
	font-family: var(--m3-schrift-titel);
}

/* Buttons */
.m3-blog .btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--m3-schrift-text);
	font-size: 17px;
	line-height: 1.6;
	padding: 10px 24px;
	border-radius: 3px;
	text-decoration: none;
	background: var(--m3-blau);
	color: var(--m3-weiss);
	border: 0;
	transition: background .2s ease;
}

.m3-blog .btn:hover,
.m3-blog .btn:focus {
	background: var(--m3-dunkel);
	color: var(--m3-weiss);
}

.m3-blog .btn--pink {
	background: var(--m3-pink);
}

.m3-blog .btn--pink:hover,
.m3-blog .btn--pink:focus {
	background: var(--m3-blau);
}

/* -------------------------------------------------------------------------
   Modul 1: Artikelkopf
   ------------------------------------------------------------------------- */

/* Rueckfallfarbe fuer Beitraege ohne Beitragsbild: ohne sie liegt nur die
   Abdunklung ueber der weissen Seite und der Kopf wirkt wie ein grauer
   Verlauf. Mit Bild ist die Farbe nicht sichtbar. */
.m3-blog .hero {
	position: relative;
	width: 100%;
	min-height: 440px;
	background: var(--m3-dunkel);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.m3-blog .hero__bild {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.m3-blog .hero__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Abdunklung ueber dem Bild. Ohne sie erreicht weisse Schrift auf hellen
   Fotos keinen ausreichenden Kontrast. */
.m3-blog .hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(35, 57, 74, .35) 0%, rgba(35, 57, 74, .82) 100%);
	z-index: 1;
}

.m3-blog .hero__inhalt {
	position: relative;
	z-index: 2;
	max-width: var(--m3-raster);
	margin: 0 auto;
	padding: 0 var(--m3-raster-innen) 48px;
	width: 100%;
	color: var(--m3-weiss);
}

.m3-blog .hero__pfad {
	font-size: 15px;
	margin: 0 0 14px;
	color: rgba(255, 255, 255, .85);
}

.m3-blog .hero__pfad a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
}

.m3-blog .hero__pfad a:hover {
	text-decoration: underline;
}

/* Ein Beitrag kann mehreren Kategorien zugeordnet sein, dann stehen alle
   nebeneinander. */
.m3-blog .hero__kategorien {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.m3-blog .hero__kategorie {
	display: inline-block;
	background: var(--m3-pink);
	color: var(--m3-weiss);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 5px 12px;
	border-radius: 3px;
	text-decoration: none;
}

.m3-blog .hero__kategorie:hover,
.m3-blog .hero__kategorie:focus {
	background: var(--m3-blau);
	color: var(--m3-weiss);
}

/* Die Titelgroesse laeuft mit der Fensterbreite mit, damit lange Titel den
   Kopfbereich nicht ueber den halben Bildschirm ziehen. */
.m3-blog .hero__titel {
	font-size: clamp(30px, 3.1vw, 52px);
	line-height: 1.1;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0 0 18px;
	color: var(--m3-weiss);
}

.m3-blog .hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	font-size: 15px;
	color: rgba(255, 255, 255, .9);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Modul 2: Einleitung
   ------------------------------------------------------------------------- */

.m3-blog .lead {
	font-size: 20px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--m3-dunkel);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Modul 3: Textblock
   ------------------------------------------------------------------------- */

.m3-blog .text {
	margin: 0;
}

.m3-blog .text p {
	color: var(--m3-dunkel);
}

/* Zwischenueberschriften und Aufzaehlungen aus dem Editor-Feld */
.m3-blog .text h3 {
	font-size: 26px;
	line-height: 1.3;
	font-weight: 700;
	margin: 8px 0 12px;
}

.m3-blog .text ul,
.m3-blog .text ol {
	margin: 0 0 22px;
	padding-left: 22px;
}

.m3-blog .text li {
	margin-bottom: 8px;
}

.m3-blog .text a {
	color: var(--m3-blau);
}

/* -------------------------------------------------------------------------
   Modul 4: Kernaussage
   ------------------------------------------------------------------------- */

.m3-blog .kernaussage {
	margin: 0;
	text-align: center;
}

.m3-blog .kernaussage__text {
	font-family: var(--m3-schrift-titel);
	font-size: 27px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--m3-dunkel);
	margin: 0 0 12px;
}

.m3-blog .kernaussage__quelle {
	font-size: 16px;
	color: var(--m3-dunkel);
	margin: 0;
}

/* -------------------------------------------------------------------------
   Modul 5: Nummern-Grid
   ------------------------------------------------------------------------- */

.m3-blog .grid-nummern {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px 48px;
	margin-top: 32px;
}

.m3-blog .nummer__zahl {
	font-size: 34px;
	line-height: 1.1;
	font-weight: 900;
	margin: 0 0 6px;
	color: var(--m3-teal);
	font-family: var(--m3-schrift-titel);
}

.m3-blog .nummer__titel {
	font-size: 19px;
	line-height: 1.35;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--m3-weiss);
}

.m3-blog .nummer__text {
	margin: 0;
	font-size: 17px;
	color: rgba(255, 255, 255, .92);
}

.m3-blog .section--dunkel .h-sektion {
	color: var(--m3-weiss);
}

.m3-blog .modul-intro {
	margin: 0 0 4px;
}

/* -------------------------------------------------------------------------
   Modul 6: Schritt-Karten
   ------------------------------------------------------------------------- */

/* Die Spaltenzahl richtet sich nach der Anzahl der Karten, damit nie eine
   Luecke in der Reihe entsteht. Die passende Klasse setzt das Template aus der
   Anzahl der Eintraege. */
.m3-blog .grid-schritte {
	display: grid;
	gap: 20px;
	margin-top: 28px;
}

.m3-blog .grid-schritte--2 {
	grid-template-columns: repeat(2, 1fr);
}

.m3-blog .grid-schritte--3 {
	grid-template-columns: repeat(3, 1fr);
}

.m3-blog .grid-schritte--4 {
	grid-template-columns: repeat(4, 1fr);
}

.m3-blog .schritt {
	background: var(--m3-weiss);
	padding: 22px 20px;
}

.m3-blog .schritt__zahl {
	font-family: var(--m3-schrift-titel);
	font-size: 26px;
	font-weight: 900;
	color: var(--m3-pink);
	line-height: 1;
	margin: 0 0 8px;
}

.m3-blog .schritt__titel {
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.3;
	margin: 0 0 8px;
	color: var(--m3-dunkel);
}

.m3-blog .schritt__text {
	font-size: 16px;
	margin: 0;
	color: var(--m3-dunkel);
}

/* -------------------------------------------------------------------------
   Modul: Quellenangaben
   ------------------------------------------------------------------------- */

/* In der Fliesstext-Schrift und eine Stufe kleiner als der Fliesstext, auf
   Wunsch der Redaktion. Die Liste ist nummeriert, damit im Text auf eine
   Nummer verwiesen werden kann. */
.m3-blog .quellen {
	font-family: var(--m3-schrift-text);
}

.m3-blog .quellen__titel {
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--m3-dunkel);
	margin: 0 0 12px;
}

.m3-blog .quellen__liste {
	margin: 0;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--m3-dunkel);
}

.m3-blog .quellen__liste li {
	margin-bottom: 8px;
}

.m3-blog .quellen__liste li:last-child {
	margin-bottom: 0;
}

/* Lange Adressen sollen die Seite nicht seitlich hinausschieben. */
.m3-blog .quellen__liste a {
	color: var(--m3-blau);
	overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   Modul 7: Autorinnen-Box
   ------------------------------------------------------------------------- */

.m3-blog .autor {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 36px;
	align-items: start;
}

.m3-blog .autor__bild img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 20%;
}

/* Dieselbe Gestaltung wie das Kategorie-Schildchen ueber dem Beitragstitel,
   auf Wunsch von MODULDREI. Gemessen: weisse Schrift auf dem Hausrosa ergibt
   Kontrast 4.54 zu 1, das reicht fuer diese Schriftgroesse. */
.m3-blog .autor__rolle {
	display: inline-block;
	background: var(--m3-pink);
	color: var(--m3-weiss);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 5px 12px;
	border-radius: 3px;
	margin: 0 0 12px;
}

/* Bewusst ohne Versalien: ein Eigenname ist kein Satz und keine Schlagzeile.
   In Grossbuchstaben wirkt er wie eine Ueberschrift und liest sich schlechter. */
.m3-blog .autor__name {
	font-family: var(--m3-schrift-titel);
	font-size: 26px;
	font-weight: 900;
	line-height: 1.15;
	margin: 0 0 4px;
	color: var(--m3-dunkel);
}

.m3-blog .autor__funktion {
	font-size: 16px;
	color: var(--m3-blau);
	margin: 0 0 12px;
}

.m3-blog .autor__text {
	font-size: 17px;
	margin: 0 0 16px;
}

/* -------------------------------------------------------------------------
   Modul 8: Kontakt-Band
   ------------------------------------------------------------------------- */

.m3-blog .cta {
	text-align: center;
	margin: 0;
}

.m3-blog .cta__titel {
	font-size: 28px;
	line-height: 1.25;
	font-weight: 900;
	margin: 0 0 12px;
	color: var(--m3-weiss);
}

.m3-blog .cta__text {
	font-size: 17px;
	margin: 0 0 22px;
	color: var(--m3-weiss);
}

/* -------------------------------------------------------------------------
   Modul 9: Passende Blogbeitraege
   ------------------------------------------------------------------------- */

.m3-blog .grid-beitraege {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-top: 28px;
}

.m3-blog .beitragskarte {
	background: var(--m3-hell);
	display: flex;
	flex-direction: column;
}

.m3-blog .beitragskarte__bild img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.m3-blog .beitragskarte__inhalt {
	padding: 24px 24px 28px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.m3-blog .beitragskarte__kategorie {
	display: inline-block;
	align-self: flex-start;
	background: var(--m3-weiss);
	color: var(--m3-dunkel);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 4px 10px;
	border-radius: 3px;
	margin: 0 0 12px;
}

.m3-blog .beitragskarte__titel {
	font-family: var(--m3-schrift-titel);
	font-size: 22px;
	line-height: 1.25;
	font-weight: 900;
	margin: 0 0 10px;
	color: var(--m3-dunkel);
}

.m3-blog .beitragskarte__titel a {
	color: inherit;
	text-decoration: none;
}

.m3-blog .beitragskarte__titel a:hover,
.m3-blog .beitragskarte__titel a:focus {
	text-decoration: underline;
}

.m3-blog .beitragskarte__meta {
	font-size: 15px;
	color: var(--m3-blau);
	margin: 0 0 20px;
}

.m3-blog .beitragskarte .btn {
	align-self: flex-start;
	margin-top: auto;
}

/* -------------------------------------------------------------------------
   Kleinere Bildschirme
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {

	.m3-blog .hero__titel {
		font-size: 44px;
	}

	.m3-blog .h-sektion {
		font-size: 36px;
	}

	/* Drei oder vier Karten nebeneinander waeren hier zu schmal */
	.m3-blog .grid-schritte--3,
	.m3-blog .grid-schritte--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {

	.m3-blog .m3-beitrag {
		font-size: 17px;
	}

	.m3-blog .section {
		padding: 56px 0 40px;
	}

	.m3-blog {
		--m3-raster-innen: 24px;
	}

	.m3-blog .hero {
		min-height: 420px;
	}

	.m3-blog .hero__titel {
		font-size: 32px;
	}

	.m3-blog .hero__inhalt {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.m3-blog .lead {
		font-size: 19px;
	}

	.m3-blog .h-sektion {
		font-size: 28px;
	}

	.m3-blog .grid-nummern,
	.m3-blog .grid-schritte--2,
	.m3-blog .grid-schritte--3,
	.m3-blog .grid-schritte--4,
	.m3-blog .grid-beitraege {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.m3-blog .autor {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.m3-blog .autor__bild {
		max-width: 240px;
	}

	.m3-blog .kernaussage__text {
		font-size: 24px;
	}

	.m3-blog .beitragskarte__titel {
		font-size: 24px;
	}
}