/*
 * Geppert – Design-Politur (ergänzt die theme.json)
 * Bringt die Details aus dem Mockup zurück: Sticky-Navigation, Karten mit
 * Hover, Icon-Kacheln, Akzentlinie. Bewusst schlank gehalten.
 */

/* ---- Kopfbereich (Entwurf C): ruhig, weiß, nicht sticky ----
   Die frühere transparente Sticky-Navigation mit Blur ist bewusst raus,
   sie lag zu nah am Vorbild mediationczernich.at. ---- */
header.wp-block-template-part {
	position: relative;
	background: #fff;
	border-bottom: 1px solid #e7e5df;
}

/* ---- Hero: kurze Akzentlinie ---- */
.hero-rule {
	border: none;
	width: 60px;
	height: 2px;
	margin: 1.6rem 0 0;
	background: var(--wp--preset--color--primary);
	border-radius: 2px;
}

/* ---- Bereichs-Karten ---- */
#bereiche .wp-block-column {
	display: flex;
}
.karte {
	position: relative;
	flex: 1;
	background: #ffffff;
	border: 1px solid #e7e5df;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Ganze Karte klickbar: Klickfläche des Links über die Karte ziehen */
.karte a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
}
.karte:hover,
.karte:focus-within {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 18px 38px -22px rgba(38, 41, 44, 0.34);
}
.karte-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent);
	transition: background 0.2s ease;
}
.karte-icon svg {
	stroke: var(--wp--preset--color--primary);
	transition: stroke 0.2s ease;
}
.karte:hover .karte-icon,
.karte:focus-within .karte-icon {
	background: var(--wp--preset--color--primary);
}
.karte:hover .karte-icon svg,
.karte:focus-within .karte-icon svg {
	stroke: #ffffff;
}
/* Karten-Link ohne Unterstrich, Pfeil rückt beim Hover */
.karte a {
	text-decoration: none;
	font-weight: 600;
}
.karte:hover a {
	text-decoration: underline;
}

/* ---- Navigation: Links ohne Unterstrich, dezent ---- */
.wp-block-navigation a {
	text-decoration: none;
}
.wp-block-navigation a:hover {
	text-decoration: underline;
}

/* ---- Navigation: dezente Links wie im Mockup ---- */
.wp-block-navigation {
	font-size: 0.92rem;
}
.wp-block-navigation a {
	color: var(--wp--preset--color--secondary);
}
.wp-block-navigation a:hover {
	color: var(--wp--preset--color--contrast);
}

/* ---- Feine Trennlinien zwischen den Sektionen (nur auf Inhaltsbreite) ---- */
main > .alignfull + .alignfull,
.wp-block-post-content > .alignfull + .alignfull {
	position: relative;
}
main > .alignfull + .alignfull::before,
.wp-block-post-content > .alignfull + .alignfull::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(70rem, calc(100% - 3rem));
	height: 1px;
	background: #e7e5df;
}
/* Abschnitte mit eigener Fläche brauchen die Trennlinie nicht: dort trennt
   schon der Farbwechsel. Das gilt für den Abschnitt selbst und für den
   direkt danach, sonst stünde die Linie auf seiner Unterkante. */
main > .alignfull.abschnitt-dunkel::before,
main > .alignfull.abschnitt-dunkel + .alignfull::before,
.wp-block-post-content > .alignfull.abschnitt-dunkel::before,
.wp-block-post-content > .alignfull.abschnitt-dunkel + .alignfull::before,
main > .alignfull.sprungleiste::before,
main > .alignfull.sprungleiste + .alignfull::before,
.wp-block-post-content > .alignfull.sprungleiste::before,
.wp-block-post-content > .alignfull.sprungleiste + .alignfull::before,
main > .alignfull.abschnitt-flaeche::before,
main > .alignfull.abschnitt-flaeche + .alignfull::before,
main > .alignfull.kopf-flaeche + .alignfull::before,
main > .alignfull.verwandte::before,
main > .alignfull.verwandte + .alignfull::before,
main > .alignfull.imgband::before,
main > .alignfull.imgband + .alignfull::before,
.wp-block-post-content > .alignfull.abschnitt-flaeche::before,
.wp-block-post-content > .alignfull.abschnitt-flaeche + .alignfull::before,
.wp-block-post-content > .alignfull.kopf-flaeche + .alignfull::before,
.wp-block-post-content > .alignfull.verwandte::before,
.wp-block-post-content > .alignfull.verwandte + .alignfull::before,
.wp-block-post-content > .alignfull.imgband::before,
.wp-block-post-content > .alignfull.imgband + .alignfull::before {
	content: none;
}

/* ---- Hero: linksbündig, gleiche Flucht wie die Karten ---- */
.hero-inner > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.hero-inner :is(h1, p) {
	max-width: 46rem;
}
.hero-inner h1 {
	line-height: 1.12;
	letter-spacing: -0.01em;
}

/* Sektionsinhalt einheitlich linksbündig + gleiche Lesebreite (wie der Hero) */
/* Hero linksbündig */
main .wp-block-group.alignwide.hero-inner > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Fließtext auf Unterseiten: zentrierte Lesespalte (Block mittig, Text darin links) */
main .wp-block-group.alignwide:not(.hero-inner):not(.stimmen-zentriert):not(.sprungleiste__inner) > :where(.wp-block-heading, p, ul, ol, .wp-block-list, .wp-block-details) {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Über mich: Porträt begrenzen ---- */
.ueber-bild {
	max-width: 260px;
}
.ueber-bild img {
	border-radius: 10px;
}

/* ---- Stimme: Bewertungs-Siegel ---- */

/* Quellenzeile im Siegel: dezent, nicht wie ein Fließtext-Link */


/* (Früher stand hier uppercase auf der letzten Zeile im Siegel. Die letzte
   Zeile ist jetzt „ProvenExpert" — ein Markenname, der seine Schreibweise
   behalten soll.) */

/* ---- Stimme: Zitat ohne Balken, wie im Mockup ---- */




/* ---- Stimme: Slider zum Durchblättern ---- */







/* ---- Stimme: ganzes Element mittig, Aufteilung Siegel links + Zitat rechts ---- */
main .wp-block-group.alignwide.stimmen-zentriert > * {
	max-width: 54rem;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---- Claim (Untertitel unter H1 auf Unterseiten) ---- */
.claim {
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--primary);
}

/* ---- Breadcrumb ---- */
.breadcrumb {
	font-size: 0.82rem;
	color: var(--wp--preset--color--secondary);
}
.breadcrumb a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}
.breadcrumb a:hover {
	color: var(--wp--preset--color--contrast);
}

/* ---- Anlässe: Checkliste ---- */
.checkliste {
	list-style: none;
	padding: 0;
	margin: 0;
	columns: 2;
	column-gap: 2.5rem;
}
.checkliste li {
	break-inside: avoid;
	margin: 0 0 0.7rem;
	padding-left: 2rem;
	position: relative;
}
.checkliste li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.35rem;
	height: 1.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-size: 0.7rem;
	font-weight: 700;
}

/* Haltungs-Variante der Checkliste: eine Spalte, weil jeder Punkt aus
   Stichwort und Erklärung besteht und in zwei Spalten zu eng würde.
   Das Häkchen sitzt in Aubergine, damit die Aufzählung sichtbarer ist
   als die reinen Anlassen-Listen auf den anderen Seiten. */
.checkliste--haltung {
	columns: 1;
	max-width: 52rem;
}
.checkliste--haltung li {
	margin: 0 0 1.1rem;
	padding-left: 2.6rem;
}
/* Der Kreis erbt die Fläche der Standard-Checkliste (accent) und wird auf
   getöntem Grund über die Regel weiter unten weiß — so stimmt der Kontrast
   auf beiden Untergründen. */
.checkliste--haltung li::before {
	width: 1.6rem;
	height: 1.6rem;
	top: 0.15em;
	color: var(--wp--preset--color--aubergine);
	font-size: 0.8rem;
}
.checkliste--haltung strong {
	display: block;
	color: var(--wp--preset--color--primary);
	font-size: 1.08rem;
	margin-bottom: 0.15rem;
}

/* Dagmars Claim unter dem Kartentitel: eine Zeile, die den Ton setzt,
   bevor die Beschreibung erklärt. Kleiner und in Aubergine, damit sie
   nicht mit dem Titel konkurriert. */
.karte-claim {
	color: var(--wp--preset--color--aubergine);
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	margin-top: -0.2rem;
}

/* ---- Schlagwortmarken ----
   Für Aufzählungen, die im Fließtext als langer Satz stehen würden. Leichter
   als ein Kachelraster und bewusst ohne Rahmen und Hover: sie führen
   nirgendwohin, sie benennen nur. */
.marken {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
.marken li {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	border-radius: 999px;
	padding: 0.45rem 1rem;
	font-size: 0.92rem;
	line-height: 1.3;
}
.abschnitt-flaeche .marken li,
.abschnitt-dunkel .marken li {
	background: #FFFFFF;
}

/* ---- Faktenzeile ----
   Zwei, drei harte Angaben, die sonst in einem Satz untergehen. Label klein
   darüber, Wert darunter, mit einer feinen Linie abgesetzt. */
.fakten {
	display: grid;
	gap: 1.2rem;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: 1.2rem;
	border-top: 1px solid #e7e5df;
}
.fakten > * {
	margin-block-start: 0;
}
.fakten dt,
.fakten__label {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.72rem;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 0.25rem;
}
.fakten dd,
.fakten__wert {
	margin: 0;
	color: #3f4542;
}
@media (min-width: 700px) {
	.fakten {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
}

/* ---- Kacheln: Inhalte nebeneinander, die nirgendwohin führen ----
   Bewusst anders als `.karte`: dort verspricht Rahmen, Schatten und Hover
   einen Klick. Diese Kacheln liegen als getönte Fläche auf dem Papier,
   ohne Rahmen und ohne Bewegung. Für Aufzählungen, die als Liste zu lang
   und als Fließtext zu unübersichtlich wären. */
.kachel-grid {
	display: grid;
	gap: 1rem;
	/* Alle Kacheln gleich hoch, auch über mehrere Reihen hinweg: sonst
	   richtet sich jede Reihe nach ihrem längsten Text und das Raster
	   bekommt Stufen. */
	grid-auto-rows: 1fr;
}
/* WordPress gibt jedem Element außer dem ersten einen oberen Blockabstand.
   Im Raster schiebt der alle Kacheln ab der zweiten in ihrer Zelle nach
   unten, während die erste oben bleibt — sie fällt aus der Reihe. */
.kachel-grid > * {
	margin-block-start: 0;
}
.kachel {
	background: var(--wp--preset--color--accent);
	border-radius: 8px;
	padding: 1.4rem 1.5rem;
	height: 100%;
}
.kachel strong {
	display: block;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.3rem;
}
.kachel p {
	margin: 0;
	color: #3f4542;
	font-size: 0.98rem;
}
/* Auf getönter Fläche dreht sich das Verhältnis um: dort sind die Kacheln
   weiß, sonst wären sie unsichtbar. */
.abschnitt-flaeche .kachel {
	background: #FFFFFF;
}
@media (min-width: 600px) {
	.kachel-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.2rem;
	}
}
@media (min-width: 900px) {
	.kachel-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	/* Zwei Spalten für Kacheln mit Listen darin: drei wären zu schmal. */
	.kachel-grid--zwei {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* Kachel mit Gruppenüberschrift und Liste, für den Nachweis-Abschnitt.
   Der Titel sieht aus wie in den übrigen Kacheln — dort steht er fett im
   Markenton, nicht als kleines Versal-Label. */
.kachel .qual-gruppe {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 0.98rem;
	text-transform: none;
	letter-spacing: 0;
}
.kachel .qual-liste {
	margin: 0;
	columns: 1;
}

/* ---- Karten-Raster: alle Karten gleich groß (2 Spalten) ---- */
.karten-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--20);
	grid-auto-rows: 1fr;
}
.karten-grid > .karte {
	height: 100%;
	margin: 0;
}
@media (max-width: 781px) {
	.karten-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Ablauf: Schritt-Nummern ----
   Nach dem Trennstrich braucht die Ziffer Luft, sonst klebt sie an der
   Linie des vorherigen Schritts. */
.wp-block-separator + .ablauf-nr {
	margin-top: 1.4rem;
}
.ablauf-nr {
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	margin: 0 0 0.15rem;
}
/* Steht die Nummer in der Überschrift, sitzt sie in derselben Zeile davor.
   Etwas kleiner als der Titel, damit der Name die Zeile trägt. */
h3 > .ablauf-nr {
	margin: 0 0.7rem 0 0;
	font-size: 0.82em;
}

/* ---- FAQ (Aufklapp-Fragen) ---- */
.wp-block-details {
	max-width: 42rem;
	border-bottom: 1px solid #e7e5df;
	padding: 0.9rem 0;
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 1.75rem;
}
.wp-block-details summary::-webkit-details-marker {
	display: none;
}
.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: -0.05em;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}
.wp-block-details[open] summary::after {
	content: "\2013";
}
.wp-block-details p {
	margin-top: 0.6rem;
	max-width: 46rem;
	color: var(--wp--preset--color--secondary);
}

/* ---- Stimmungsbild (breites Foto) ---- */
.imgband img {
	aspect-ratio: 16 / 7;
	object-fit: cover;
	width: 100%;
}
/* Bei Motiven mit Personen schneidet der mittige Ausschnitt die Köpfe an.
   Diese Variante hält den Ausschnitt oben und nimmt unten weg. */
.imgband--oben img {
	object-position: 50% 10%;
}

@media (max-width: 640px) {
	.checkliste {
		columns: 1;
	}
	.imgband img {
		aspect-ratio: 16 / 9;
	}
}

@media (prefers-reduced-motion: reduce) {
	.karte,
	.karte-icon,
	.karte-icon svg {
		transition: none;
	}
}

/* ==========================================================================
   Entwurf C — Kopfzeile, Hero-Band, Qualifikations-Leiste
   Werte übernommen aus fuer-dagmar/zielbild-startseite-dagmar.html (.vb)
   ========================================================================== */

/* ---- Kopfzeile: Logo links, Menü + Telefon rechts, eine Zeile ---- */
.geppert-kopf {
	padding: 18px clamp(22px, 4vw, 54px);
}
.geppert-kopf__innen {
	gap: 24px;
}
.geppert-logo {
	margin: 0;
	flex: none;
}
.geppert-logo img {
	height: clamp(38px, 4.4vw, 52px);
	width: auto;
	display: block;
}
.geppert-kopf__rechts {
	gap: clamp(14px, 2.2vw, 28px);
}
.geppert-menue {
	font-size: 0.9rem;
}
.geppert-menue .wp-block-navigation-item__content {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}
.geppert-menue .wp-block-navigation-item__content:hover,
.geppert-menue .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--aubergine);
}
.geppert-menue .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--aubergine);
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--aubergine);
}

/* Telefonnummer als letztes Element, optisch abgesetzt */
.geppert-tel {
	margin: 0;
	flex: none;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}
.geppert-tel a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--rose);
	padding-bottom: 2px;
}
.geppert-tel a:hover {
	color: var(--wp--preset--color--aubergine);
}

/* ---- Untermenüs ----
   Zweite Ebene klappt als ruhiger Kasten auf. Die dritte Ebene (Family
   Governance, Lehrlingsmediation) fliegt NICHT seitlich aus, sondern steht
   mit feiner Linie im selben Kasten. Wichtig: der Core versteckt geschlossene
   Untermenüs mit width/height 0 und overflow:hidden — das muss für die
   statische dritte Ebene ausdrücklich zurückgesetzt werden, sonst fällt sie
   zusammen. */
.geppert-menue .wp-block-navigation__submenu-container {
	border: 1px solid #e7e5df;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 40px -18px rgba(38, 41, 44, 0.28);
	padding: 0.5rem;
	min-width: 19rem;
	margin-top: 0.65rem;
}
/* Das Menü sitzt rechts, also klappen die Kästen nach innen auf statt nach
   rechts aus dem Layout heraus. Der Core richtet sie sonst links aus
   (left: -1px), was bei rechtsbündigen Menüs versetzt wirkt. */
.geppert-menue > ul > .has-child > .wp-block-navigation__submenu-container {
	left: auto;
	right: -1px;
}
/* Unsichtbare Brücke, damit der Zeiger auf dem Weg nach unten nicht rausfällt */
.geppert-menue .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.65rem;
	height: 0.65rem;
}
.geppert-menue .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	padding: 0.55rem 0.85rem;
	border-radius: 6px;
	line-height: 1.35;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.geppert-menue .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.geppert-menue .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--aubergine);
}

/* Dritte Ebene (Family Governance, Lehrlingsmediation): bewusst KEIN
   verschachteltes Untermenü, sondern ein normaler Eintrag mit Einrückung.
   Als echtes Untermenü würde der Core beim Überfahren des Elternpunkts
   eigene Werte setzen (u. a. min-width: 200px) und der Kasten springt. */
.geppert-menue .wp-block-navigation__submenu-container .geppert-unterpunkt {
	margin: 0 0 0.15rem 0.85rem;
	border-left: 1px solid var(--wp--preset--color--rose);
}
.geppert-menue .wp-block-navigation__submenu-container .geppert-unterpunkt > .wp-block-navigation-item__content {
	font-size: 0.86rem;
	color: var(--wp--preset--color--secondary);
	padding: 0.35rem 0.85rem;
	border-radius: 0 6px 6px 0;
}
/* Die Pfeilchen nur auf der obersten Ebene zeigen */
.geppert-menue .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	display: none;
}
.geppert-menue > ul > .has-child > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
	margin-left: 4px;
	opacity: 0.55;
}

/* ---- Hero-Band: Foto voll breit, Text auf hellem Verlauf ---- */
.geppert-hero {
	min-height: clamp(340px, 46vw, 440px);
}
.geppert-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 76rem;
	margin-inline: auto;
	padding: clamp(30px, 4vw, 52px) clamp(22px, 4vw, 54px);
}
.geppert-hero__text {
	max-width: 36rem;
}
.geppert-eyebrow {
	margin: 0 0 20px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.geppert-claim {
	margin: 0;
	font-size: clamp(1.95rem, 4.4vw, 3rem);
	font-weight: 700;
	line-height: 1.11;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}
.geppert-claim__zwei {
	display: block;
	color: var(--wp--preset--color--aubergine);
}
.geppert-hero__sub {
	margin-top: 20px;
	max-width: 28rem;
	font-size: clamp(1rem, 1.3vw, 1.1rem);
	color: #4a4e4c;
}
/* Button und Zweit-Link untereinander, zueinander zentriert,
   der Block selbst linksbündig (wie .akt im Zielbild) */
.geppert-hero__akt {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: fit-content;
}
.geppert-hero__akt .wp-block-buttons {
	margin: 0;
}
.geppert-hero__akt .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.97rem;
	font-weight: 600;
	padding: 14px 26px;
}
.geppert-hero__zweit {
	margin: 0;
	font-size: 0.92rem;
	font-weight: 600;
}
.geppert-hero__zweit a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--rose);
	padding-bottom: 2px;
}
.geppert-hero__zweit a:hover {
	color: var(--wp--preset--color--aubergine);
}

/* ---- Qualifikations-Leiste ---- */
.geppert-leiste {
	padding: 14px clamp(22px, 4vw, 54px);
}
.geppert-leiste p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px 24px;
	margin: 0;
}
.geppert-leiste span {
	display: flex;
	align-items: center;
	gap: 8px;
}
.geppert-leiste span::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
	flex: none;
}

/* ---- Schmale Schirme: Text unter das Foto, Verlauf von oben ---- */
@media (max-width: 781px) {
	.geppert-kopf__rechts {
		gap: 12px;
	}
	.geppert-tel {
		font-size: 0.85rem;
	}
	/* ---- Hero am Handy: Bild oben, Text darunter ----
	   Kein Verlauf. Am schmalen Schirm ist für Text über Bild zu wenig
	   Platz — jede Aufhellung frisst entweder das Foto oder die Lesbarkeit.
	   Getrennt bleibt Dagmar ganz sichtbar und der Text steht ruhig. */
	.geppert-hero {
		display: flex;
		flex-direction: column;
		min-height: 0 !important;
		padding: 0;
	}
	.geppert-hero .wp-block-cover__background {
		display: none;
	}
	.geppert-hero .wp-block-cover__image-background {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		object-position: 50% 22% !important;
		order: -1;
	}
	.geppert-hero .wp-block-cover__inner-container {
		position: relative;
		width: 100%;
		background: var(--wp--preset--color--base);
		padding-top: clamp(26px, 7vw, 40px);
		padding-bottom: clamp(26px, 7vw, 40px);
	}
	/* Qualifikationen am Handy als fortlaufende Zeile mit Trennpunkten.
	   Verworfen: frei umbrechend nebeneinander (holprig), untereinander
	   (wirkt zäh), festes 2×2-Raster (steht schief, weil „Juristin" ein Wort
	   hat und „Über 20 Jahre im Familienunternehmen" fünf). Als Fließzeile
	   gibt es keine Achse, die schief stehen kann. */
	.geppert-leiste {
		padding-top: 18px;
		padding-bottom: 18px;
	}
	.geppert-leiste p {
		display: block;
		text-align: center;
		font-size: 0.8rem;
		line-height: 1.7;
	}
	.geppert-leiste span {
		display: inline;
	}
	/* Kein Punkt vor jedem Eintrag, sondern ein Trenner dazwischen —
	   so entsteht eine Zeile statt eines Rasters, das schief stehen kann. */
	.geppert-leiste span::before {
		content: none;
	}
	.geppert-leiste span + span::before {
		content: " · ";
		display: inline;
		width: auto;
		height: auto;
		border-radius: 0;
		background: none;
		color: var(--wp--preset--color--rose);
		margin: 0 0.35em;
	}
}

/* Zwischen Hero-Band und Qualifikations-Leiste keine Trennlinie: die beiden
   gehören optisch zusammen (die generische Regel weiter oben zieht sonst eine). */
.geppert-hero + .geppert-leiste::before,
.geppert-leiste + .alignfull::before {
	display: none;
}

/* ---- Stimmen-Block: ruhiger machen ---- */
/* Zitate etwas kleiner als vorher (war Preset „large" = bis 1,375rem) —
   die lange Stimme von Bettina S. war damit eine Textwand. */

/* Alle Stimmen gleich hoch, damit beim Blättern nichts springt.
   Die Zitate sind sehr unterschiedlich lang. */


/* Blätter-Knöpfe kleiner und heller — sie sollen nicht lauter sein als die Stimme */


/* Statt Ornament: die Stimme steht als weiße Karte auf der Salbei-Fläche —
   dasselbe Material wie das Siegel-Kästchen daneben. */

/* Bewusst ohne Ornament über dem Zitat (Anführungszeichen und Kreisring
   wurden beide verworfen) — die weiße Karte trägt den Block allein. */

/* ---- Sehr schmale Schirme: Kopfzeile entlasten ----
   Logo + Menüknopf + Telefonnummer passen unter 600px nicht mehr
   nebeneinander, und die Zeile darf nicht umbrechen. Die Nummer entfällt
   dort im Kopf — sie steht im Hero-Button, im Kontaktblock und im Footer. */
@media (max-width: 600px) {
	.geppert-tel {
		display: none;
	}
	.geppert-logo img {
		height: 34px;
	}
}

/* ==========================================================================
   Footer — weiß, kompakt, dreigeteilt: links wo sie ist, Mitte die Kanäle,
   rechts wie man sie erreicht. Die Seitennavigation ist bewusst raus, sie
   wiederholte nur das Hauptmenü.
   ========================================================================== */

.geppert-fuss {
	background: #ffffff;
	border-top: 1px solid #e7e5df;
}
.geppert-fuss__reihe {
	gap: var(--wp--preset--spacing--30);
}
.geppert-nap,
.geppert-fuss__kontakt {
	margin: 0;
	line-height: 1.6;
}
.geppert-fuss__kontakt {
	text-align: right;
}
.geppert-fuss a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.geppert-fuss a:hover {
	color: var(--wp--preset--color--aubergine);
	text-decoration: underline;
}
.geppert-social .wp-block-social-link {
	transition: transform 0.15s ease, opacity 0.15s ease;
	opacity: 0.85;
}
.geppert-social .wp-block-social-link:hover {
	transform: translateY(-2px);
	opacity: 1;
}
.geppert-fuss__recht {
	color: var(--wp--preset--color--secondary);
	border-top: 1px solid #f0eee9;
	padding-top: 1.4rem;
}
.geppert-fuss__recht a {
	color: var(--wp--preset--color--secondary);
}

/* Am Handy stapeln sich die drei Teile — dann alles mittig, sonst steht
   die Adresse links und die Icons darunter mittig und es wirkt zufällig. */
@media (max-width: 781px) {
	.geppert-fuss__reihe {
		justify-content: center;
		text-align: center;
	}
	.geppert-nap,
	.geppert-fuss__kontakt {
		width: 100%;
		text-align: center;
	}
	.geppert-social {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Kundenstimmen — Slider, aber alles auf einer Mittelachse.
   Vorher hing das Siegel als Kästchen links neben dem Karussell; dadurch
   stand nichts in Flucht. Jetzt: Überschrift, Bewertungszeile, eine Karte
   und die Steuerung mittig untereinander.
   ========================================================================== */

.stimmen-note {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--secondary);
}
.stimmen-note strong {
	color: var(--wp--preset--color--contrast);
}
.stimmen-sterne {
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.12em;
	margin-right: 0.35em;
}
.stimmen-note a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	border-bottom: 1px solid #dcd9d2;
}
.stimmen-note a:hover {
	color: var(--wp--preset--color--aubergine);
	border-bottom-color: var(--wp--preset--color--rose);
}

.stimmen-wrap {
	max-width: 46rem;
	margin: var(--wp--preset--spacing--30) auto 0;
}
.stimmen-track {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	align-items: stretch;
}
.stimmen-track::-webkit-scrollbar {
	display: none;
}
.stimmen-track > * {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	margin: 0 !important;
}

/* Die Karte: gleiche Kanten und Maße wie die Bereichskarten oben.
   Feste Mindesthöhe, damit beim Blättern nichts springt — die Zitate sind
   sehr unterschiedlich lang. Kurze Stimmen stehen mittig in der Karte. */
.stimme-karte {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 15rem;
	background: #ffffff;
	border: 1px solid #e7e5df !important;
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30) !important;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	line-height: 1.65;
	text-align: center;
}
.stimme-karte p {
	margin: 0;
}
.stimme-karte cite {
	display: block;
	margin-top: 1.1rem;
	font-style: normal;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
}

/* Steuerung mittig unter der Karte: Pfeil, Punkte, Pfeil */
.stimmen-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.2rem;
}
.stimmen-btn {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid #dcd9d2;
	background: transparent;
	color: var(--wp--preset--color--primary);
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.stimmen-btn:hover {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	border-color: var(--wp--preset--color--primary);
}
.stimmen-punkte {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.stimmen-punkt {
	width: 7px;
	height: 7px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #cfcbc3;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.stimmen-punkt:hover {
	background: var(--wp--preset--color--rose);
}
.stimmen-punkt.ist-aktiv {
	background: var(--wp--preset--color--primary);
	transform: scale(1.25);
}

@media (max-width: 781px) {
	.stimme-karte {
		min-height: 17rem;
		font-size: 0.97rem;
	}
}

/* ---- Fehlende Texte deutlich markieren ----
   Blöcke, in die Dagmars vorhandene Absätze noch eingesetzt werden müssen.
   Bewusst auffällig: so etwas darf nicht versehentlich live gehen.
   Wenn keine Markierung mehr zu sehen ist, ist die Seite textvollständig. */
.text-fehlt {
	background: #FDF3D8;
	border-left: 3px solid #C9A227;
	padding: 0.9rem 1.1rem;
	border-radius: 0 6px 6px 0;
	font-size: 0.92rem;
	color: #6B5A17;
}

/* Wenn alles auf eine Ansicht passt, verschwindet die Steuerung */
.stimmen-wrap.ohne-steuerung .stimmen-nav {
	display: none;
}

/* ==========================================================================
   Mobiles Menü (Overlay)
   Die Desktop-Dropdowns sind absolut positionierte Kästen mit Schatten und
   fester Breite. Im Overlay muss das alles zurückgenommen werden, sonst
   schweben die Untermenüs als Kästchen im aufgeklappten Menü.
   ========================================================================== */

.geppert-menue .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	left: auto !important;
	right: auto !important;
	width: auto !important;
	min-width: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0.2rem 0 0.6rem !important;
}
/* Die unsichtbare Hover-Brücke ergibt im Overlay keinen Sinn */
.geppert-menue .is-menu-open .has-child > .wp-block-navigation__submenu-container::before {
	content: none;
}

/* Größere Tippflächen und klare Gliederung im Overlay */
.geppert-menue .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid #ececE6;
}
.geppert-menue .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
	border-bottom: none;
}
.geppert-menue .is-menu-open .wp-block-navigation-item__content {
	padding: 0.75rem 0 !important;
	font-size: 1.05rem;
	color: var(--wp--preset--color--contrast);
}
/* Unterpunkte kleiner und eingerückt, dritte Ebene mit feiner Linie */
.geppert-menue .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.95rem;
	padding: 0.5rem 0 0.5rem 1rem !important;
	color: var(--wp--preset--color--secondary);
}
/* Dritte Ebene (Family Governance, Lehrlingsmediation) im Overlay:
   Zugehörigkeit über einen kleinen Strich und kleinere Schrift zeigen,
   nicht über eine zusätzliche senkrechte Linie — die brachte im ohnehin
   langen Overlay ein drittes optisches Niveau hinein. */
.geppert-menue .is-menu-open .geppert-unterpunkt {
	border-left: none;
	margin-left: 0;
}
.geppert-menue .is-menu-open .geppert-unterpunkt .wp-block-navigation-item__content {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	font-size: 0.88rem;
	padding: 0.3rem 0 0.3rem 2rem !important;
	color: var(--wp--preset--color--secondary);
}
.geppert-menue .is-menu-open .geppert-unterpunkt .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	width: 10px;
	height: 1px;
	background: var(--wp--preset--color--rose);
	transform: translateY(-0.3em);
}



/* Telefonnummer als echter, anrufbarer Menüpunkt — nur im Overlay.
   Im Kopf ist sie unter 600px aus Platzgründen ausgeblendet. */
.geppert-menue .nur-mobil {
	display: none;
}
@media (max-width: 600px) {
	.geppert-menue .is-menu-open .nur-mobil {
		display: block;
	}
	.geppert-menue .is-menu-open .nur-mobil .wp-block-navigation-item__content {
		font-weight: 600;
		color: var(--wp--preset--color--primary) !important;
	}
}

/* Leitsatz: ein Satz aus dem Fließtext, groß herausgestellt.
   Bricht lange Textstrecken auf Unterseiten und gibt dem Auge einen Halt. */
.leitsatz {
	max-width: 40rem;
	margin-inline: auto;
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
}
/* Für ganze Sätze statt kurzer Merksätze: mehr Breite, etwas kleiner
   gesetzt. Sonst zerfällt ein langer Satz in sechs oder sieben Zeilen. */
.leitsatz--lang {
	max-width: 52rem;
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	line-height: 1.45;
}

/* Zwischen farbigen Abschnitten keine Trennlinie — der Farbwechsel trennt
   bereits, die zusätzliche Linie wirkt dort wie ein Fehler. */
.has-accent-background-color + .alignfull::before,
.alignfull + .has-accent-background-color::before {
	display: none;
}







/* ==========================================================================
   Personenseite (Über mich)
   Grenzt sich über Rhythmus und Maß ab, nicht über neue Formen: schmalere
   Lesespalte, mehr Zeilenluft, keine Kacheln und keine Icons. Das einzige
   eigene Element ist die Zeitachse — ein Werdegang ist die einzige Stelle
   im Projekt, an der eine Reihenfolge inhaltlich wirklich stimmt.
   ========================================================================== */

/* Porträt: dasselbe Format wie auf der Startseite, kein neues Formvokabular */
.portrait-person {
	margin: 0;
}
.portrait-person img {
	width: 100%;
	border-radius: 10px;
	object-position: 50% 22%;
}

/* Schmalere Lesespalte als auf den Angebotsseiten (dort 42rem) */
.person-text {
	max-width: 40rem;
	margin-inline: auto;
}
.person-text p {
	line-height: 1.75;
}

/* Zeitachse: eine feine Linie, links die Station, rechts ein Satz */
.werdegang {
	max-width: 46rem;
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	border-left: 1px solid var(--wp--preset--color--rose);
}
.werdegang li {
	position: relative;
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 0 1.5rem;
	padding: 0 0 1.9rem 1.9rem;
}
.werdegang li:last-child {
	padding-bottom: 0;
}
/* Punkt auf der Linie */
.werdegang li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	transform: translateX(-5px);
}
.werdegang-marke {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.01em;
}
.werdegang-text {
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 600px) {
	.werdegang li {
		grid-template-columns: 1fr;
		gap: 0.2rem;
		padding-left: 1.4rem;
	}
	.werdegang-marke {
		font-size: 0.85rem;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}
}

/* Der Personenkopf ist freier gebaut als die Seitenköpfe der Angebotsseiten.
   Die Verwandtschaft entsteht über die Fluchtlinie: Kicker, Name und Text
   beginnen an derselben linken Kante und haben dieselben Größen. Bewusst
   OHNE .hero-inner — dessen Zeilenbreite von 46rem schnürt den Zweispalter ein. */
/* Kicker als Randnotiz links neben dem Text statt darüber. Bricht die
   Eintönigkeit gleich gebauter Textabschnitte, ohne ein neues Element
   einzuführen. Am Handy fällt er zurück über den Text. */
/* Bild über die Inhaltsbreite als Atempause in langen Textstrecken */
.bild-breit {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-width: 46rem;
}
.bild-breit img {
	width: 100%;
	border-radius: 10px;
}


/* Der Zeitachsen-Abschnitt braucht mehr Breite als eine Lesespalte:
   links steht die Station, rechts der Satz. Bei 34rem bricht rechts zu früh um. */
.person-text--breit {
	max-width: 46rem;
}

/* Die Positionierungszeile im Kopf schon auf Lesebreite begrenzen — sonst
   springt die Seite vom 70rem breiten Kopf direkt in die schmale Textspalte. */
/* Kleine Zeile über dem Leitsatz: ordnet ein, dass der Satz ein Ausspruch
   ist und keine Überschrift. Zusammen mit den Anführungszeichen reicht das —
   ein Ornament hatten wir schon verworfen. */
.leitsatz-label {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--secondary);
}



/* Persönlicher Einstieg: der Gruß trägt die Seite, danach ein Satz und
   das Foto. Kein Kicker, keine Titel — die stehen weiter unten im
   Nachweis-Abschnitt. */
.person-gruss {
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0.6rem 0 0;
}
.person-einstieg {
	margin-top: 1.4rem;
	font-size: 1.15rem;
	line-height: 1.7;
	color: #4a4e4c;
}
.portrait-person {
	max-width: 300px;
	margin: var(--wp--preset--spacing--30) 0 0;
}
.portrait-person img {
	width: 100%;
	border-radius: 10px;
	object-position: 50% 22%;
}

/* ---- Bereichsfarben aus dem Corporate Design ----
   Laut CD-Manual stehen die beiden Sicheln im Logo für die zwei Zweige:
   Aubergine für Coaching, Altrosa für Mediation, auf gemeinsamer
   Salbei-Basis. Die Akzentlinie im Seitenkopf greift das auf.
   Klickfarbe bleibt überall Aubergine — Altrosa hat auf Weiß nur 2,5:1
   und taugt deshalb für Flächen und Linien, nicht für Text. */
.bereich-coaching .hero-rule {
	background: var(--wp--preset--color--aubergine);
}
.bereich-mediation .hero-rule {
	background: var(--wp--preset--color--rose);
	height: 3px;
}


/* Über-mich-Seite am Handy: das Porträt darf den Schirm nicht füllen,
   sonst steht der Einstiegstext oberhalb der Falz allein. */
@media (max-width: 600px) {
	.portrait-person {
		max-width: 220px;
	}
	.person-gruss {
		font-size: clamp(1.85rem, 8vw, 2.4rem);
	}
}



/* Qualifikationen: viele Einträge, deshalb kompakt. Gruppentitel im Kicker-
   Stil, darunter schlichte Zeilen — keine Häkchen. Häkchen versprechen
   Vorteile; hier geht es um Nachweise, und einundzwanzig davon wirken als
   Häkchenwand wie Aufzählen. */
.qual-gruppe {
	margin: var(--wp--preset--spacing--30) 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.qual-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}
.qual-liste li {
	margin: 0 0 0.35rem;
	padding-left: 0.9rem;
	position: relative;
	break-inside: avoid;
}
.qual-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
}
@media (min-width: 640px) {
	.qual-liste--zwei {
		columns: 2;
		column-gap: 2.2rem;
	}
}

/* Kontakt als Karte: der Abschluss setzt sich damit in jeder Umgebung ab,
   egal ob davor Papier oder eine Farbfläche liegt. Weiß mit Kante, dasselbe
   Material wie die übrigen Karten der Seite. */
.kontakt-karte {
	max-width: 54rem;
	margin-inline: auto;
	background: var(--wp--preset--color--accent);
	border-radius: 12px;
}
.kontakt-karte > :first-child {
	margin-top: 0;
}
.kontakt-karte > :last-child {
	margin-bottom: 0;
}


/* ---- Blog-Übersicht (patterns/blog-uebersicht.php) ----
   Nach Themen gegliedert statt nach Datum, weil hier ein Beitrag im Monat
   erscheint: eine Datumsliste würde vor allem die Lücken zeigen. Jede
   Gruppe trägt eine Bereichsfarbe aus dem Logo-Konzept — Aubergine für
   Coaching und Führung, Altrosa für Mediation, Salbei als Basis. ---- */
/* Der Blog-Kopf ist derselbe wie auf Über mich: schmale Textspalte, große
   Zeile in enger Setzung, keine Kleinschrift-Zeile und keine Linie. Die
   kurze Akzentlinie bleibt damit das Zeichen dafür, dass weiter unten ein
   neues Thema beginnt. Größe und Setzung kommen aus .person-gruss und
   .person-einstieg — hier wird nichts nachgebaut. */
.blog-intro {
	margin-bottom: 0;
}
.blog-liste {
	max-width: 58rem;
	margin-inline: auto;
}

/* ---- Themengruppe ---- */
/* Die Gruppen tragen dieselbe kurze Akzentlinie wie die Seitenköpfe der
   Unterseiten (.hero-rule) — nur in der Farbe des jeweiligen Bereichs.
   Eine durchgehende Farblinie wäre das kräftigste Element der ganzen
   Seite gewesen und hätte sich vom Rest abgesetzt. */
.blog-gruppe__kopf {
	max-width: 44rem;
	margin-bottom: 1.6rem;
}
.blog-gruppe__kopf::before {
	content: "";
	display: block;
	width: 60px;
	height: 2px;
	margin-bottom: 1.1rem;
	border-radius: 2px;
	background: var(--wp--preset--color--primary);
}
.blog-gruppe__kopf h2 {
	margin: 0 0 0.4rem;
}
.blog-gruppe__einleitung {
	margin: 0;
	color: var(--wp--preset--color--secondary);
}
.blog-gruppe--fuehrung .blog-gruppe__kopf::before {
	background: var(--wp--preset--color--aubergine);
}
.blog-gruppe--mediation .blog-gruppe__kopf::before {
	background: var(--wp--preset--color--rose);
	height: 3px;
}

/* ---- Einzelner Beitrag ---- */
.blog-eintrag {
	display: grid;
	gap: 0.9rem 2.5rem;
	padding: 1.9rem 0;
}
/* Die Trennlinie liegt bewusst nur über der Textspalte, nicht über der
   ganzen Breite: sonst wäre die stärkste durchgehende Linie im Inneren
   einer Themengruppe — und damit an der schwächeren Grenze. */
.blog-eintrag__text {
	padding-top: 1.5rem;
	border-top: 1px solid #e7e5df;
}
/* Jeder Eintrag steckt in einem eigenen <li> des Post-Templates, ist dort
   also immer :first-child — die Ausnahme muss deshalb am <li> hängen. */
.wp-block-post-template > li:first-child .blog-eintrag {
	padding-top: 0.4rem;
}
.wp-block-post-template > li:first-child .blog-eintrag__text {
	padding-top: 0;
	border-top: none;
}

.blog-eintrag__spalte {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.blog-eintrag__bild,
.blog-eintrag__bild .wp-block-post-featured-image,
.blog-eintrag__bild a {
	display: block;
	margin: 0;
}
.blog-eintrag__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
}
/* Beiträge ohne Foto bekommen dieselbe Fläche als ruhiges Feld mit dem
   Logo-Zeichen. Damit ist jede Zeile der Liste gleich hoch — und Dagmar
   muss trotzdem für keinen Beitrag ein Foto suchen. */
/* Am Handy stehen die Einträge ohnehin untereinander — dort hält keine
   Spalte eine Höhe, und eine leere Fläche über die volle Breite wäre nur
   Ballast. Die Platzhalterfläche gibt es deshalb erst ab Tablet. */
.blog-eintrag__bild:not(:has(img)) {
	display: none;
}

.blog-eintrag__text > * {
	margin-top: 0;
}
.blog-eintrag__text .wp-block-post-title {
	margin-bottom: 0.6rem;
	line-height: 1.25;
	max-width: 32rem;
}
.blog-eintrag__text .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.blog-eintrag__text .wp-block-post-title a:hover,
.blog-eintrag__text .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--aubergine);
}
.blog-eintrag__text .wp-block-post-excerpt {
	margin-bottom: 1rem;
}
/* Zwei Zeilen für alle: der Titel trägt den Eintrag, der Auszug ordnet
   nur ein. Gleich lange Textblöcke halten den Rhythmus der Liste. */
.blog-eintrag__text .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--secondary);
	max-width: 38rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.blog-eintrag__fuss {
	gap: 0.4rem 1.1rem;
}
.blog-weiterlesen {
	display: inline-block;
	font-size: 0.95rem;
	color: var(--wp--preset--color--aubergine);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.blog-weiterlesen:hover,
.blog-weiterlesen:focus-visible {
	border-bottom-width: 2px;
}
.blog-lesezeit {
	margin: 0;
	color: var(--wp--preset--color--secondary);
}
.blog-lesezeit::before {
	content: "·";
	margin-right: 0.9rem;
}

/* Ab Tablet zwei Spalten. Die Spaltenbreite ist für alle Einträge gleich,
   auch für die ohne Foto — sonst würde die Textkante von Zeile zu Zeile
   springen. Auf dem Handy steht alles gestapelt: Foto, dann Titel. */
@media (max-width: 781px) {
	.blog-eintrag__text {
		padding-top: 0;
		border-top: none;
	}
	.wp-block-post-template > li:not(:first-child) .blog-eintrag {
		border-top: 1px solid #e7e5df;
		padding-top: 1.9rem;
	}
}

@media (min-width: 782px) {
	.blog-eintrag {
		grid-template-columns: 14rem 1fr;
		align-items: start;
		min-height: 11rem;
	}
	.blog-eintrag__bild,
	.blog-eintrag__bild .wp-block-post-featured-image,
	.blog-eintrag__bild a,
	.blog-eintrag__bild img {
		height: 9rem;
	}
	.blog-eintrag__bild img {
		aspect-ratio: auto;
	}
	/* Ohne Foto dieselbe Fläche mit dem Logo-Zeichen: so bleibt jede Zeile
	   gleich hoch und die Textkante steht über die ganze Liste auf einer
	   Linie — ohne dass Dagmar für jeden Beitrag ein Foto braucht. */
	.blog-eintrag__bild:not(:has(img)) {
		display: block;
		background-color: var(--wp--preset--color--accent);
		background-image: url("../images/logo-geppert-zeichen.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 3.4rem auto;
		border-radius: 8px;
		opacity: 0.75;
	}
}



/* ---- Kontakt als Banner (patterns/kontakt-banner.php) ----
   Reines Weiß auf dem warmen Papierton der Seite (#FBFAF7). Der Abschnitt
   hebt sich dadurch ab, ohne eine Farbfläche zu brauchen — dieselbe
   Mechanik wie beim Seitenkopf. Telefonnummer und E-Mail stehen bewusst
   nicht hier: sie sind direkt darunter im Fuß sofort sichtbar. */
.kontakt-banner {
	background: #FFFFFF;
	/* Siehe .verwandte: kein Blockabstand, sonst steht zwischen den Flächen
	   ein Streifen Papier. */
	margin-block-start: 0;
}
/* Ohne eigene Fläche: für Seiten, die kurz davor schon eine setzen —
   dann trägt jene die Zäsur und der Abschluss läuft auf dem Papier mit. */
/* Ohne eigene Fläche: auf Über mich (eigene Klasse) und auf der Startseite,
   wo der Abschluss auf dem Papierton mitlaufen soll. Auf den Angebotsseiten
   bleibt er weiß. */
.kontakt-banner--papier,
body.home .kontakt-banner {
	background: transparent;
}
.kontakt-banner__text {
	max-width: 44rem;
	margin-inline: auto;
}
.kontakt-banner__label {
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.8rem;
}
.kontakt-banner a:not(.wp-element-button) {
	color: var(--wp--preset--color--aubergine);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kontakt-banner a:not(.wp-element-button):hover,
.kontakt-banner a:not(.wp-element-button):focus-visible {
	text-decoration-thickness: 2px;
}


/* ---- Abschnitt auf dunkler Fläche ----
   Für Blöcke, die kein Fließtext sind (Ablauf, Schritte): gibt der Mitte
   einer langen Seite Gewicht. Alle Textfarben müssen hier überschrieben
   werden — das Grau der Nebentexte hätte auf der Fläche fast keinen
   Kontrast mehr. */
.abschnitt-dunkel {
	background: var(--wp--preset--color--flaeche);
	color: #FFFFFF;
}
/* Flächen-Abschnitte schließen kantengenau an ihre Nachbarn an. Der globale
   Blockabstand wäre zwischen zwei verschiedenen Flächen als Streifen Papier
   sichtbar; ihren Abstand tragen die Abschnitte im Innern. */
.abschnitt-dunkel,
.abschnitt-flaeche {
	margin-block-start: 0;
}
/* WordPress setzt die Farbklassen der Blöcke mit !important — die
   Überschreibungen hier müssen deshalb ebenfalls !important tragen,
   sonst bleiben Nebentexte im Grau und sind auf der Fläche unlesbar. */
.abschnitt-dunkel .wp-block-heading,
.abschnitt-dunkel li {
	color: #FFFFFF;
}
.abschnitt-dunkel p,
.abschnitt-dunkel .has-secondary-color,
.abschnitt-dunkel p.has-secondary-color {
	color: rgba(255, 255, 255, 0.88) !important;
}
.abschnitt-dunkel .has-primary-color {
	color: rgba(255, 255, 255, 0.75) !important;
}
/* Der Fließtext auf der dunklen Fläche steht eine Spur kleiner als der
   übrige Text: die Stufen sind Erläuterungen, nicht der Haupttext der Seite.
   Ausgenommen sind Kicker, Nummern und der Leitsatz, die eigene Größen
   tragen. Gilt für ein- und zweispaltige Ablauf-Abschnitte gleichermaßen. */
.abschnitt-dunkel p:not(.ablauf-nr):not(.has-primary-color):not(.leitsatz):not(.text-fehlt) {
	font-size: 0.95rem;
	line-height: 1.65;
}

.abschnitt-dunkel .ablauf-nr {
	color: rgba(255, 255, 255, 0.72) !important;
}
/* Der Werdegang trägt auf der dunklen Fläche eigene Farben: Marke in
   Primary (Kontrast 1,2) und Text in Contrast (2,5) wären dort praktisch
   unlesbar. Beide werden hell, der Text in vollem Weiß (5,9). */
.abschnitt-dunkel .werdegang-marke {
	color: rgba(255, 255, 255, 0.8) !important;
}
.abschnitt-dunkel .werdegang-text {
	color: #FFFFFF !important;
}
/* Der Leitsatz trägt auf der Fläche volles Weiß — er ist der eine Satz,
   auf den es hier ankommt, und darf nicht abgetönt sein. */
/* Auf der dunklen Fläche trägt der Leitsatz die ganze Höhe allein und darf
   deshalb größer sein. Im hellen Band zwischen zwei Textabschnitten wäre
   dieselbe Größe zu laut. */
.abschnitt-dunkel .leitsatz {
	color: #FFFFFF !important;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}
.abschnitt-dunkel .leitsatz-label {
	color: rgba(255, 255, 255, 0.7) !important;
}
/* Der gelbe Platzhalter behält seine Warnfarbe — sonst stünde weißer Text
   auf hellem Gelb und der Hinweis wäre unlesbar. */
.abschnitt-dunkel .text-fehlt,
.abschnitt-dunkel p.text-fehlt {
	color: #6B5A17 !important;
}
.abschnitt-dunkel .wp-block-separator {
	border-color: rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.22);
}
.abschnitt-dunkel a:not(.wp-element-button) {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Abschnitt mit eigener Fläche ----
   Salbei hell hebt den Abschnitt deutlicher ab als Weiß auf Papier und
   liest sich als Fläche, nicht als Kante. Die Häkchen-Kreise der
   Checkliste tragen sonst dieselbe Farbe wie der Grund — hier deshalb
   weiß, damit sie sichtbar bleiben. */
.abschnitt-flaeche {
	background: var(--wp--preset--color--accent);
}
/* Seitenkopf mit eigener Fläche: er setzt sich von der weißen Menüleiste
   und vom Papier des Inhalts ab, die Linie unten trennt wie unter dem Menü.
   Dafür muss der Standardabstand zwischen Kopfzeile und Inhalt weg,
   sonst steht dazwischen ein 20 Pixel breiter Streifen Papier.
   Weiß, damit Kopfzeile und Seitenkopf einen Block bilden. */
.kopf-flaeche {
	background: #FFFFFF;
	border-bottom: 1px solid #e7e5df;
}
.wp-site-blocks > main:has(> .kopf-flaeche:first-child),
.wp-site-blocks > main:has(> .wp-block-post-content > .kopf-flaeche:first-child) {
	margin-block-start: 0;
}

/* Endet eine Seite auf einer getönten Fläche, muss die Fläche bis an den
   Fuß laufen. Sonst steht darunter ein weißer Streifen — der Blockabstand
   zwischen <main> und <footer>, bei manchen Vorlagen zusätzlich der
   Innenabstand von <main> — und darauf die Trennlinie des Fußes. Die Fläche
   sähe aus, als wäre sie zu früh abgeschnitten. Der Farbwechsel trennt hier
   schon, deshalb entfällt auch die Linie.

   Der Fuß steckt in <footer class="wp-block-template-part">, die Klasse
   `.geppert-fuss` liegt erst darin — der Nachbar von <main> ist also das
   <footer>-Element, nicht der Fuß selbst. Dieselbe Mechanik wie oben am
   Seitenkopf, wo `margin-block-start` den Abstand zum Menü schließt. */
.wp-site-blocks > main:has(> .verwandte:not(.verwandte--papier):last-child),
.wp-site-blocks > main:has(> .wp-block-post-content > .verwandte:not(.verwandte--papier):last-child),
.wp-site-blocks > main:has(> .abschnitt-flaeche:last-child),
.wp-site-blocks > main:has(> .wp-block-post-content > .abschnitt-flaeche:last-child) {
	padding-bottom: 0;
}
.wp-site-blocks > main:has(> .verwandte:not(.verwandte--papier):last-child) + footer,
.wp-site-blocks > main:has(> .wp-block-post-content > .verwandte:not(.verwandte--papier):last-child) + footer,
.wp-site-blocks > main:has(> .abschnitt-flaeche:last-child) + footer,
.wp-site-blocks > main:has(> .wp-block-post-content > .abschnitt-flaeche:last-child) + footer {
	margin-block-start: 0;
}
.wp-site-blocks > main:has(> .verwandte:not(.verwandte--papier):last-child) + footer .geppert-fuss,
.wp-site-blocks > main:has(> .wp-block-post-content > .verwandte:not(.verwandte--papier):last-child) + footer .geppert-fuss,
.wp-site-blocks > main:has(> .abschnitt-flaeche:last-child) + footer .geppert-fuss,
.wp-site-blocks > main:has(> .wp-block-post-content > .abschnitt-flaeche:last-child) + footer .geppert-fuss {
	border-top: none;
}
.abschnitt-flaeche .checkliste li::before {
	background: #FFFFFF;
}


/* ---- Sprungleiste unter dem Seitenkopf ----
   Schließt den Kopf ab und sagt, was auf der Seite noch kommt. So wenig
   Bauteil wie möglich: eine Linie, keine Umrandung, kein Label. Die
   Ziffern nehmen die Nummerierung des Ablauf-Abschnitts auf. */
.sprungleiste {
	padding-block: 0;
}
.sprungleiste__inner {
	border-top: 1px solid #e7e5df;
	padding-block: 1.1rem 0;
}
.sprungleiste p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.6rem 2.6rem;
}
.sprungleiste a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
}
.sprung-nr {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary);
	opacity: 0.7;
}
.sprungleiste a:hover,
.sprungleiste a:focus-visible {
	color: var(--wp--preset--color--aubergine);
	border-bottom-color: currentColor;
}
.sprungleiste a:hover .sprung-nr,
.sprungleiste a:focus-visible .sprung-nr {
	color: var(--wp--preset--color--aubergine);
	opacity: 1;
}

/* Sprungziele nicht direkt unter die Kopfzeile schieben */
.wp-block-group[id] {
	scroll-margin-top: 1.5rem;
}




/* ==========================================================================
   Blogartikel (templates/single.html)
   Aufbau: Kopf mit Kategorie, Titel, Datum und Lesezeit · Beitragsbild ·
   Text auf Lesebreite · Autorinnen-Zeile · verwandte Beiträge.
   Das Datum steht hier bewusst, anders als in der Übersicht: bei Rechts-
   und Ratgeberthemen ist die Aktualität eine echte Information.
   ========================================================================== */
.artikel-text {
	max-width: 40rem;
	margin-inline: auto;
}
.artikel-text p,
.artikel-text li {
	line-height: 1.75;
}
.artikel-kategorie {
	margin: 0 0 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.78rem;
}
.artikel-kategorie a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.artikel-titel {
	margin: 0;
	font-size: clamp(1.9rem, 4.2vw, 2.7rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.artikel-meta {
	margin-top: 1.1rem;
	gap: 0.3rem 1rem;
	color: var(--wp--preset--color--secondary);
}
.artikel-meta > * {
	margin: 0;
}
.artikel-lesezeit::before {
	content: "·";
	margin-right: 1rem;
}
.artikel-bild {
	max-width: 58rem;
	margin-inline: auto;
}
.artikel-bild img {
	width: 100%;
	border-radius: 8px;
}
/* Ohne Beitragsbild bleibt ein leerer Kasten stehen — der Abstand darunter
   würde sonst doppelt zählen. */
.artikel-bild-band:not(:has(img)) {
	display: none;
}

/* Zwischenüberschriften im Artikel: klar kleiner als der Titel, mit Luft
   davor. Ein Ratgebertext lebt davon, dass man ihn überfliegen kann. */
.artikel-inhalt h2 {
	margin-top: 2.6rem;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
.artikel-inhalt h3 {
	margin-top: 2rem;
	font-size: 1.15rem;
}

.artikel-autorin {
	margin-top: 3rem;
	padding-top: 1.4rem;
	border-top: 1px solid #e7e5df;
	color: var(--wp--preset--color--secondary);
}
.artikel-autorin a {
	color: var(--wp--preset--color--aubergine);
}

/* ---- Verwandte Beiträge ---- */
.verwandte {
	background: var(--wp--preset--color--accent);
	padding-block: var(--wp--preset--spacing--40);
	/* Kantengenau an den Abschnitt darüber: der globale Blockabstand von
	   1,25rem wäre zwischen zwei verschiedenen Flächen als Streifen Papier
	   sichtbar. Die Abschnitte tragen ihren Abstand ohnehin im Innern. */
	margin-block-start: 0;
}
/* Ohne eigene Fläche: für Seiten, deren Kontakt-Abschluss kurz davor schon
   eine setzt. Der Block läuft dann auf dem Papierton der Seite mit, und die
   weiße Fläche des Abschlusses bleibt der einzige Blickfang am Seitenende. */
.verwandte--papier {
	background: transparent;
}
.verwandte__inner {
	max-width: 58rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}
.verwandte__titel {
	margin: 0 0 1.6rem;
	font-size: 1.15rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.verwandte__liste {
	display: grid;
	gap: 1.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.verwandte__bild {
	display: block;
	height: 8rem;
	margin-bottom: 0.8rem;
	border-radius: 8px;
	overflow: hidden;
	background: #FFFFFF;
}
.verwandte__bild img {
	width: 100%;
	height: 8rem;
	object-fit: cover;
	display: block;
}
.verwandte__bild--leer {
	background: #FFFFFF url("../images/logo-geppert-zeichen.svg") no-repeat center / 2.8rem auto;
	opacity: 0.8;
}
.verwandte__kategorie {
	margin: 0 0 0.3rem;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--secondary);
}
.verwandte__name {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
}
.verwandte__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.verwandte__name a:hover,
.verwandte__name a:focus-visible {
	color: var(--wp--preset--color--aubergine);
}
@media (min-width: 782px) {
	.verwandte__liste {
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;
	}
}


/* ---- Inhaltsverzeichnis im Artikel ----
   Bewusst ohne Kasten: eine schmale Linie links, kleine Schrift, kein
   Hintergrund. Es soll den Einstieg in den Text nicht aufhalten. */
.inhalt {
	margin: 0 0 2.4rem;
	padding-left: 1.1rem;
	border-left: 2px solid var(--wp--preset--color--accent);
}

/* Ab genug Platz steht das Verzeichnis links neben dem Text und läuft beim
   Scrollen mit. Das Raster hat links und rechts dieselbe Spaltenbreite,
   damit die Textspalte an derselben Stelle bleibt wie im Kopf — sonst
   würde der Artikel unter der Überschrift nach rechts wandern. */
@media (min-width: 1280px) {
	.artikel-inhalt .artikel-text {
		max-width: 78rem;
		display: grid;
		grid-template-columns: 16rem 40rem 16rem;
		column-gap: 3rem;
		align-items: start;
	}
	.artikel-inhalt .artikel-text > * {
		grid-column: 2;
	}
	.artikel-inhalt .inhalt {
		grid-column: 1;
		grid-row: 1 / span 99;
		position: sticky;
		top: 2rem;
		margin: 0;
	}
}
.inhalt__label {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--primary);
}
.inhalt__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Jeder Eintrag darf zwei Zeilen lang sein — dann muss der Abstand
   zwischen den Einträgen deutlich größer sein als der Zeilenabstand
   innerhalb eines Eintrags, sonst verschwimmen sie zu einem Block. */
.inhalt__liste li + li {
	margin-top: 0.9rem;
}
.inhalt__liste a {
	display: block;
	line-height: 1.4;
}
.inhalt__liste a {
	font-size: 0.95rem;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.inhalt__liste a:hover,
.inhalt__liste a:focus-visible {
	color: var(--wp--preset--color--aubergine);
	border-bottom-color: currentColor;
}
/* Angesprungene Zwischenüberschrift nicht direkt unter die Kopfzeile */
.artikel-inhalt h2[id] {
	scroll-margin-top: 1.5rem;
}


/* ---- Kontaktseite ----
   Die drei Wege stehen gleichwertig nebeneinander: anrufen, schreiben,
   WhatsApp. Kein Formular, keine Karte — beides bräuchte ein Plugin und
   eine Einwilligung, und die drei Wege reichen. */
/* Der Standardabstand zwischen zwei Blöcken muss im Raster weg: er trifft
   nur die Spalten ab der zweiten und würde sie um 1,25rem nach unten
   schieben — die erste Spalte stünde höher als die anderen. */
.kontakt-wege {
	display: grid;
	gap: 2.4rem;
}
.kontakt-wege > *,
.kontakt-ort > * {
	margin-block-start: 0;
}
.kontakt-weg > * {
	margin-top: 0;
}
.kontakt-weg__label {
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.78rem;
	color: var(--wp--preset--color--primary);
}
.kontakt-weg__wert {
	margin-bottom: 0.5rem;
	font-size: 1.15rem;
	font-weight: 600;
}
.kontakt-weg__wert a {
	color: var(--wp--preset--color--aubergine);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.kontakt-weg__wert a:hover,
.kontakt-weg__wert a:focus-visible {
	border-bottom-width: 2px;
}
.kontakt-weg p:last-child {
	margin-bottom: 0;
	max-width: 22rem;
}
.kontakt-ort {
	display: grid;
	gap: 2.4rem;
}
.kontakt-ort > * > :first-child {
	margin-top: 0;
}
.kontakt-ort p {
	max-width: 30rem;
}
@media (min-width: 782px) {
	.kontakt-wege {
		grid-template-columns: repeat(3, 1fr);
		gap: 3rem;
	}
	.kontakt-ort {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}


/* ---- Personen-Block, kompakte Fassung ----
   Für Unterseiten: dasselbe Muster wie auf den Hauptseiten, nur kleiner.
   Das Porträt soll dort nicht mit dem der übergeordneten Seite
   konkurrieren, der Verweis auf „Über mich" trägt den Block. */
.person-kompakt .ueber-bild {
	max-width: 190px;
}
/* Der ganze Block steht auf der Flucht des Fließtextes, nicht auf der
   breiten Spalte: das Porträt hängt links vor der Lesespalte, der Text
   beginnt dort, wo auch die Überschriften der Seite beginnen. */
.person-kompakt .wp-block-columns {
	max-width: calc(42rem + 190px + var(--wp--preset--spacing--40));
	margin-inline: auto;
}
.person-kompakt .wp-block-column > * {
	max-width: 42rem;
}
/* Größere Fassung für Seiten, auf denen daneben ein großes Motivbild steht:
   ein Übergangsfoto darf nicht größer wirken als das Porträt der Person,
   um die es geht. Hier steht das Porträt außerdem rechts, damit nicht
   zweimal hintereinander Bild links und Text rechts kommt. */
.person-kompakt--gross .ueber-bild {
	max-width: 280px;
}
.person-kompakt--gross .wp-block-columns {
	max-width: calc(42rem + 280px + var(--wp--preset--spacing--40));
}


/* ---- Dreiteilung ohne Karten ----
   Für Inhalte, die nebeneinander stehen, aber nirgendwohin führen. Karten
   sind im Theme klickbar (Rahmen, Hover, Schatten) — dieselbe Optik ohne
   Ziel wäre ein Versprechen, das die Seite nicht einlöst. Hier trennt nur
   eine feine Linie über jeder Spalte. */
.spalten-drei {
	display: grid;
	gap: 2.2rem;
}
.spalten-drei > * {
	margin-block-start: 0;
	padding-top: 1.1rem;
	border-top: 2px solid var(--wp--preset--color--accent);
}
.spalten-drei h3 {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
}
.spalten-drei p {
	margin: 0;
	color: var(--wp--preset--color--secondary);
}
@media (min-width: 782px) {
	.spalten-drei {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem;
	}
}

/* ---- Bild links, Text rechts ----
   Für den Sparring-Abschnitt: die Überschrift steht wie überall sonst oben
   quer, darunter trägt links ein Foto und rechts laufen die Punkte als ein
   Strang. Das Bild füllt die Spalte auf voller Höhe, damit unten kein
   Leerraum neben dem Text steht. */
.bild-text {
	display: grid;
	gap: 1.8rem;
}
.bild-text__bild {
	margin: 0;
}
/* Festes Format statt Höhe vom Text: sonst ändert sich der Ausschnitt,
   sobald jemand einen Satz ergänzt oder streicht. Quadratisch, weil ein
   Hochformat den Block höher macht als die Textspalte daneben. */
.bild-text__bild img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 10px;
}
@media (min-width: 782px) {
	.bild-text {
		grid-template-columns: minmax(260px, 0.55fr) 1fr;
		gap: 3rem;
		align-items: start;
	}
	/* Das Bild sitzt auf halber Höhe des Textes, nicht oben bündig. */
	.bild-text__bild {
		align-self: center;
	}
}
@media (max-width: 781px) {
	.bild-text__bild img {
		aspect-ratio: 16 / 10;
	}
}
.seitlich-liste > * + * {
	margin-top: 1.8rem;
	padding-top: 1.8rem;
	border-top: 1px solid #e7e5df;
}
.seitlich-liste h3 {
	margin: 0 0 0.35rem;
	font-size: 1.1rem;
}
.seitlich-liste p {
	margin: 0;
	color: var(--wp--preset--color--secondary);
}


/* ==========================================================================
   ALTBESTAND — Beiträge aus dem alten Blog (nook)
   ==========================================================================
   Gilt nur für die 14 Beiträge, die schon auf mediations-blog.com standen.
   Alles hier ist Reparatur, kein Design: es stellt her, was das Theme
   ohnehin vorsieht. Wenn die Beiträge einmal überarbeitet sind, kann der
   ganze Abschnitt ersatzlos raus.

   Ausgezählt am 27.08.2026 über alle 14 Beiträge, nicht geschätzt. Der
   Fließtext ist NICHT betroffen: die 231 Absätze und Listenpunkte mit
   „medium" treffen genau unsere Fließtextgröße. Deshalb steht hier auch
   keine Regel dafür — was passt, wird nicht angefasst. ---- */

/* ---- Überschriften mit fester Größenklasse ----
   WordPress hängt an Größen-Presets ein !important. Die 115 Überschriften,
   denen Dagmar im alten Editor eine Größe zugewiesen hat, schlagen damit
   jede Regel des Themes. Praktisch heißt das: 21 Unterüberschriften stehen
   größer da als die Hauptüberschrift darüber, die Gliederung kippt.

   Die Größe kommt deshalb hier zurück — ebenfalls mit !important, anders
   ist gegen ein !important nicht anzukommen. Die Werte sind exakt die aus
   dem Artikel-Abschnitt weiter oben, sie sind bewusst nicht neu erfunden. */
.artikel-inhalt h2[class*="font-size"] {
	font-size: clamp(1.3rem, 2.4vw, 1.6rem) !important;
}
.artikel-inhalt h3[class*="font-size"] {
	font-size: 1.15rem !important;
}
.artikel-inhalt h4[class*="font-size"] {
	font-size: 1.02rem !important;
}

/* ---- Drei Beiträge gliedern nur mit h3 ----
   Die drei ältesten Texte haben nie eine h2 gesetzt, obwohl sie mit 12.000
   und 15.000 Zeichen die längsten sind. Dort ist h3 die Hauptebene und
   bekommt auch deren Größe. Das Inhaltsverzeichnis erkennt denselben Fall
   und liest dann ebenfalls h3 (siehe functions.php). */
.artikel-inhalt .artikel-text:not(:has(h2)) h3 {
	margin-top: 2.6rem;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem) !important;
}

/* Angesprungene Überschrift nicht direkt unter die Kopfzeile — gilt jetzt
   für beide Ebenen, weil das Verzeichnis auch h3 anspringen kann. */
.artikel-inhalt h3[id] {
	scroll-margin-top: 1.5rem;
}

/* ---- Hervorhebungen auf getönter Fläche ----
   56 Stellen tragen „tertiary" — eine Farbe, die nook kennt und wir nicht.
   Ohne diese Regel verschwindet die Fläche ersatzlos: aus einem gesetzten
   Merkkasten wird gewöhnlicher Text. Bewusst ein Alias auf unsere eigene
   Fläche, kein Nachbau von nooks Palette. Die übrigen alten Farbnamen
   bleiben absichtlich wirkungslos. */
.artikel-inhalt .has-tertiary-background-color {
	background-color: var(--wp--preset--color--accent);
}

/* Die Polsterung für Absätze setzt WordPress selbst (.has-background),
   hier fehlt nur die weiche Kante. */
.artikel-inhalt p.has-tertiary-background-color {
	border-radius: 8px;
}

/* Die 18 getönten Spalten bekommen keine Polsterung von WordPress — ohne
   sie klebt der Text an der Kante der Fläche. */
.artikel-inhalt .wp-block-column.has-tertiary-background-color {
	padding: 1.4rem 1.5rem;
	border-radius: 8px;
}


/* ---- Bild neben Text im Artikel ----
   19 dieser Blöcke stehen im Bestand, fast alle mit hochformatigen Fotos
   in einer schmalen Spalte. Ungeschnitten wird die Zeile dadurch sehr
   hoch, und der Text daneben schwimmt in Leerraum. Ein einheitliches
   Format beruhigt die Seite und macht die Blöcke untereinander gleich.
   Gilt für alte wie neue Beiträge, deshalb steht es nicht im Abschnitt
   „Altbestand". Auf schmalen Schirmen stapelt WordPress selbst, dort
   sitzt das Foto dann über dem Text und behält das gleiche Format. */
.artikel-inhalt .wp-block-media-text__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}


/* ---- Merksatz im Artikel (Pullquote) ----
   28 Stück im Bestand. Es sind keine Personenzitate, sondern Kernaussagen
   in ein bis zwei Zeilen — deshalb kein Anführungszeichen-Ornament, keine
   Quellenangabe und keine Zentrierung. Der Standard von WordPress setzt
   riesige Abstände und mittigen Text, beides passt hier nicht.

   Die Fläche ist dieselbe wie bei den Hervorhebungen im Text, die Kante
   links macht den Unterschied: eine Hervorhebung ergänzt, ein Merksatz
   fasst zusammen. */
.artikel-inhalt .wp-block-pullquote {
	margin: 2.6rem 0;
	padding: 1.5rem 1.6rem;
	background: var(--wp--preset--color--accent);
	border-left: 3px solid var(--wp--preset--color--gruen);
	border-radius: 8px;
	text-align: left;
}
.artikel-inhalt .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: none;
}
.artikel-inhalt .wp-block-pullquote p {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.6;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}
/* Eine Quellenangabe ist hier nicht vorgesehen, käme aber ohne Regel in
   Großbuchstaben und mittig daher. */
.artikel-inhalt .wp-block-pullquote cite {
	display: block;
	margin-top: .6rem;
	font-size: .9rem;
	font-style: normal;
	text-transform: none;
	color: var(--wp--preset--color--secondary);
}


/* ---- Newsletter ----
   Dagmars Liste läuft über die Abonnenten-Funktion der Website selbst,
   nicht über ein externes Werkzeug. Der Block schreibt deshalb ohne
   weitere Einrichtung in die vorhandene Liste.

   Nur EIN Platz: unter dem Artikel, weil dort der Moment ist, in dem
   jemand gerade etwas gelesen hat. Im Fuß stand zunächst auch eines,
   es ist am 31.08.2026 wieder raus: Das Abo-Feld bringt seine Maße als
   Inline-Angaben mit (16 Pixel Schrift, 15 Pixel Polsterung, eckige
   Kanten), die sich vom Theme nicht überschreiben lassen. Im Fuß, wo
   alles klein und ruhig ist, fällt das auseinander.

   Ohne Fläche gebaut: direkt darunter folgt „Weiterlesen" auf getöntem
   Grund, und zwei Flächen hintereinander nehmen dem Abschluss die Wirkung. */
.artikel-inhalt .abo {
	margin-top: 2.6rem;
	padding: 1.5rem 1.6rem;
	border: 1px solid #e7e5df;
	border-radius: 8px;
	background: #fff;
}
.abo__titel {
	margin: 0 0 .3rem;
}
.abo__text {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--secondary);
}


/* Das Eingabefeld kommt aus der Abonnenten-Funktion und bringt eigene
   Stile mit. Hier nur so viel, dass es zum Rest passt: gleiche Rundung,
   gleiche Linienfarbe, und auf schmalen Schirmen untereinander statt
   nebeneinander gequetscht. */
.abo .wp-block-jetpack-subscriptions {
	max-width: 32rem;
	margin-inline: auto;
}
.abo input[type="email"] {
	border: 1px solid #d5d2ca;
	border-radius: 6px;
}
.abo button {
	border-radius: 6px;
}
@media (max-width: 520px) {
	.abo .wp-block-jetpack-subscriptions__form-elements {
		display: block;
	}
	.abo .wp-block-jetpack-subscriptions__form-elements > * {
		width: 100%;
		margin: 0 0 .5rem;
	}
}


/* ---- Tipp-Kästen ----
   Zitate mit fetter Titelzeile sind keine Zitate, sondern Kästen mit
   einer Anleitung darin (siehe functions.php). Sie brauchen deshalb das
   Gegenteil der Zitat-Gestaltung: Fließtextgröße statt 22 Pixel, damit
   acht Zeilen und eine Aufzählung lesbar bleiben, und eine Fläche, die
   den Kasten als Einschub markiert.

   Die grüne Kante bleibt — sie ist das gemeinsame Merkmal aller
   Einschübe im Artikel und hält Merksatz und Tipp-Kasten zusammen. */
.artikel-inhalt blockquote.tipp {
	margin: 2.2rem 0;
	padding: 1.3rem 1.4rem;
	background: var(--wp--preset--color--accent);
	border-left: 3px solid var(--wp--preset--color--gruen);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
}
.artikel-inhalt blockquote.tipp p {
	margin: 0 0 .7rem;
}
.artikel-inhalt blockquote.tipp p:last-child {
	margin-bottom: 0;
}

/* Die Titelzeile steht auf einer eigenen Zeile, auch wenn im Text nur ein
   Umbruch nach dem fetten Teil folgt. Sonst klebt die Überschrift an der
   ersten Textzeile und der Kasten liest sich wie ein Fließabsatz. */
.artikel-inhalt blockquote.tipp > p:first-child > strong:first-child {
	display: block;
	margin-bottom: .3rem;
	font-size: 1.05rem;
	color: var(--wp--preset--color--primary);
}

/* Aufzählungen in Tipp-Kästen sind oft mit Gedankenstrichen und Umbrüchen
   gesetzt, nicht als Liste. Wo doch eine Liste steht, braucht sie Einzug. */
.artikel-inhalt blockquote.tipp ul,
.artikel-inhalt blockquote.tipp ol {
	margin: .4rem 0 .7rem;
	padding-left: 1.2rem;
}


/* ---- Inhaltsverzeichnis: Unterpunkte ----
   Das Verzeichnis nimmt h3 nur dazu, wenn es weniger als drei h2 gibt
   (siehe functions.php). Dann sind die Unterpunkte eingerückt, sonst
   sähe eine Gliederung wie 1. / 1.1 / 1.2 / 2. flach aus und der
   Zusammenhang ginge verloren. */
.inhalt__liste .inhalt__unter {
	padding-left: 1.1rem;
}
.inhalt__liste .inhalt__unter a {
	color: var(--wp--preset--color--secondary);
}


/* ---- Buchzitate ----
   Ein Zitat mit ausgefüllter Quellenangabe ist ein echtes Zitat aus einer
   Quelle und darf sich vom Rest abheben. Ein Zitat ohne Quelle ist meist
   ein hervorgehobener Absatz und bleibt schlicht.

   Die Quellenangabe selbst ist das Signal — Dagmar füllt im Zitat-Block
   nur das Feld „Zitatangabe" aus, mehr nicht. Kein eigener Block, keine
   Einstellung, nichts, was man vergessen kann.

   Hier bewusst ein anderes Zeichen als sonst: Statt der Kante links, die
   im Artikel für Hervorhebungen aller Art steht, ein Anführungszeichen.
   Es ist die einzige Stelle im Theme mit einem Ornament, und genau
   deshalb erkennt man ein Buchzitat sofort als solches.

   AUSGENOMMEN sind die Kundenstimmen: Die sind ebenfalls Zitat plus
   Quellenangabe gebaut, aber „Bettina S." ist keine Literaturstelle.
   Sie behalten ihre eigene Kartenform ohne Ornament. */
.wp-block-quote:has(cite):not(.stimme-karte) {
	position: relative;
	border-left: none;
	padding: .1rem 0 0 2.8rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
	color: var(--wp--preset--color--primary);
}

/* Bewusst das SCHLIESSENDE Anführungszeichen als Ornament, obwohl das
   Zitat damit beginnt. Das öffnende „ sitzt im Deutschen auf der
   Grundlinie und rutscht bei dieser Größe auf Höhe der zweiten Textzeile
   — es sah aus, als klebte ein Strich im Absatz. Das schließende sitzt
   oben und ist für dekorative Zitatzeichen ohnehin die Konvention. */
.wp-block-quote:has(cite):not(.stimme-karte)::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: .1rem;
	font-size: 3.2rem;
	line-height: .8;
	color: var(--wp--preset--color--gruen);
	opacity: .5;
}

/* Die Quelle steht klein darunter. Kursiv nur, wo der Werktitel es
   verlangt — die ganze Angabe kursiv zu setzen macht sie schlechter
   lesbar, und Verlag und Seitenzahl gehören ohnehin aufrecht. */
.wp-block-quote:not(.stimme-karte) cite {
	display: block;
	margin-top: .9rem;
	font-size: .85rem;
	font-style: normal;
	color: var(--wp--preset--color--secondary);
}
.wp-block-quote:not(.stimme-karte) cite em {
	font-style: italic;
}

/* Auf schmalen Schirmen rückt das Zeichen näher heran, sonst bleibt für
   den Text zu wenig Breite. */
@media (max-width: 480px) {
	.wp-block-quote:has(cite):not(.stimme-karte) {
		padding-left: 2.2rem;
	}
	.wp-block-quote:has(cite):not(.stimme-karte)::before {
		font-size: 2.6rem;
	}
}