/*
Theme Name: CASPARION
Description: Individuelles Block-Theme (Full Site Editing) für die Website der CASPARION Unternehmensgruppe, basierend auf dem Corporate Design Guide (Master im privaten Strategie-Repository casparion-strategy/05_design/, abgeleitete Tokens als versionierte Kopie in wordpress/design/design-tokens.json).
Author: CASPARION Unternehmensgruppe
Version: 0.24.0
Requires at least: 6.5
Requires PHP: 7.4
Tested up to: 6.6
License: Proprietary – nicht zur Weitergabe bestimmt
Text Domain: casparion
*/

/* Farbpalette und Schriftfamilien werden zentral in theme.json definiert.
   Diese Datei setzt das exakte Breakpoint-Raster (24/40/88px Seitenrand,
   72/96/120px Abschnittsabstand bei 480/1024px) und alle Bausteine der
   Startseite v2 (Handoff-Paket, 01.09.2026) um – theme.jsons
   Fluid-Typography kann das nicht abbilden, weil der Guide feste
   Stufen statt kontinuierlicher Interpolation verlangt. */

:root {
	--csp-side: 24px;
	--csp-gap: 72px;
	--csp-kicker-gap: 14px;
	--csp-content-gap: 26px;
	--csp-h2: 34px;
	--csp-h3: 22px;
	--csp-kicker: 12px;
	--csp-body: 17px;
	--csp-descriptor: 19px;
	--csp-leitfrage: 26px;
	--csp-leitfrage-hoehe: 1.28;
	--csp-leitfrage-breite: 100%;
	--csp-card-body: 17px;
	--csp-card-row-gap: 40px;
	--csp-card-col-gap: 32px;
	--csp-quote: 17px;
	--csp-tag: 17px;
	--csp-nav-overlay: 30px;
	--csp-button: 15px;
	--csp-footer: 14px;
}

@media (min-width: 480px) {
	:root {
		--csp-side: 40px;
		--csp-gap: 96px;
		--csp-kicker-gap: 16px;
		--csp-content-gap: 40px;
		--csp-kicker: 14px;
	}
}

@media (min-width: 1024px) {
	:root {
		--csp-side: 88px;
		--csp-gap: 120px;
		--csp-kicker-gap: 20px;
		--csp-content-gap: 64px;
		--csp-h2: 62px;
		--csp-h3: 28px;
		--csp-kicker: 15px;
		--csp-body: 20px;
		--csp-descriptor: 24px;
		--csp-leitfrage: 38px;
		--csp-leitfrage-hoehe: 1.24;
		--csp-leitfrage-breite: 24ch;
		--csp-card-body: 18px;
		--csp-card-row-gap: 64px;
		--csp-card-col-gap: 64px;
		--csp-quote: 27px;
		--csp-tag: 24px;
		--csp-button: 16px;
		--csp-footer: 15px;
	}
}

* {
	box-sizing: border-box;
}

/* N10: "Der seitliche Rand ist eine Eigenschaft des Inhalts, nie des
   Abschnitts und nie eines Rahmens darüber" (Abschnitt 3/6 des
   Handoffs). Erzwingt das für jeden mögichen Wrapper zwischen <body>
   und den .casparion-section-Elementen, damit keine WordPress-
   generierte Root-Layout-Regel (z.B. .wp-site-blocks) je Rand oder
   Breite einschränken kann - nur .casparion-section__inner trägt den
   beabsichtigten seitlichen Rand. */
html,
body,
.wp-site-blocks,
main {
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
}

/* overflow-x als Sicherheitsnetz gegen horizontales Überlaufen auf
   main statt body: auf body/html gesetzt, bricht es den sticky
   Header, weil body dadurch selbst zum Scroll-Container für seine
   Kinder wird - position: sticky verankert sich dann relativ zu
   body statt zum Viewport und bleibt beim Scrollen nicht mehr oben. */
main {
	overflow-x: clip;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
}

/* Radius/Schatten global ausgeschlossen (Guide: "Radius 0 – ausnahmslos",
   "Schatten – keine"). theme.json deaktiviert die Editor-UI dafür; diese
   Regel sichert es zusätzlich für Elemente ab, die keine eigene
   Radius-Einstellung im Editor haben. */
img,
button,
input,
.casparion-btn,
.casparion-card {
	border-radius: 0;
	box-shadow: none;
}

/* ---------- Satzspiegel ---------- */

.casparion-section {
	padding: var(--csp-gap) var(--csp-side);
}

/* Sprungmarken-Vorlauf (Abschnitt 4 des Handoffs): Header-Höhe + 24px,
   damit der Kicker des Zielabschnitts nicht hinter dem sticky Header
   verschwindet. Header ist 72px hoch bis 1024px, danach 96px - Vorlauf
   folgt derselben Schwelle: 96px bis 1024px, danach 120px. */
.casparion-section[id] {
	scroll-margin-top: 96px;
}

@media (min-width: 1024px) {
	.casparion-section[id] {
		scroll-margin-top: 120px;
	}
}

.casparion-section--dark {
	background: var(--wp--preset--color--mitternachtsblau);
	color: var(--wp--preset--color--warmes-papier);
}

.casparion-section--light {
	background: var(--wp--preset--color--warmes-papier);
	color: var(--wp--preset--color--mitternachtsblau);
}

/* Ein Abschnitt, dessen Inhalt selbst bis an die Kante reicht,
   traegt seine Polsterung nicht mehr aussen, sondern in seinen
   Teilen. Erster Fall: die Bildspalte des Gruenderabschnitts nach
   Regel A4. */
.casparion-section--randlos {
	padding: 0;
}

.casparion-section__inner {
	max-width: 1440px;
	margin: 0 auto;
}

/* Zwei Teile in einem Farbband. Entstanden mit der Abschnittsfolge fuer
   AI Enablement: Dort liegen je zwei bisher eigenstaendige Abschnitte
   zusammen, weil sie dieselbe Aussage tragen - beide behalten Kicker,
   Ueberschrift und Text, nur die Farbe wechselt nicht mehr zwischen
   ihnen.

   Der Abstand ist genau ein --csp-gap. Zwischen zwei echten Abschnitten
   liegen deren zwei (Unterkante des einen, Oberkante des naechsten),
   hier also die Haelfte: deutlich mehr als Fliesstextabstand, deutlich
   weniger als eine Abschnittsgrenze. Abgeleitet aus dem vorhandenen
   Token, nicht frei gewaehlt - waechst der Satzspiegel, waechst der
   Abstand mit. */
.casparion-section__teil + .casparion-section__teil {
	margin-top: var(--csp-gap);
}

/* ---------- Gruender-Abschnitt mit Portraet (E18, Regel A4) ----------

   Das Portraet ist nicht freigestellt und wird es auch nicht: Der
   Bildgrund liegt bei Helligkeit 230, die Stirn bei 212 - nur 18
   Stufen dazwischen. Jede Kurve, die den Grund auf Mitternachtsblau
   zieht (25), nimmt das Gesicht mit. Nach oben gelingt dasselbe
   Verfahren, weil warmes Papier nur 15 Stufen entfernt liegt; der
   Grund ist deshalb rechnerisch auf #F7F5F0 gezogen und in der
   gelieferten Datei bereits so enthalten.

   Damit bleibt auf dunklem Grund die Flaeche - und sie reicht
   randlos an drei Seiten bis an die Abschnittskante. Eine Flaeche
   ueber die volle Hoehe liest als gewollter Flaechenwechsel;
   dieselbe Flaeche mit Abstand ringsum liest als Rest einer
   misslungenen Freistellung. Deshalb traegt der Abschnitt hier
   keine eigene Polsterung, sondern die Textspalte.

   Es gibt keine Tonung und keine Maske mehr im Stylesheet. Beides
   stand hier am 16.09. als Notloesung, solange die Quelle nur ein
   helles Rechteck hergab; die Tonung sitzt jetzt in der Bilddatei,
   wo sie hingehoert, und die weiche Kante ist auf dunklem Grund
   ausdruecklich unerwuenscht - sie ergibt einen Rauchsaum. */

/* Einspaltig bis 1024px: Portraet unter der Zuschreibung des Zitats,
   linksbuendig zum Text, hoechstens 320px breit. Ab 1024px zwei
   Spalten, Text links, Portraet rechts.

   Die Textspalte bekommt keine Breitenangabe - die Absaetze tragen
   ihre 620px schon selbst, und eine zweite Grenze daneben wuerde
   sich mit ihnen streiten. Die Bildspalte ist auf ihre 480px fest
   gesetzt, damit das Portraet nicht mitwaechst und seine Schaerfe
   behaelt; das entspricht dem einfachen Satz der ausgelieferten
   Datei. */
.casparion-gruender {
	display: grid;
	gap: 0;
	/* "Polsterung wie der Abschnitt" heisst nicht nur --csp-side.
	   Jeder andere Abschnitt deckelt seinen Inhalt zusaetzlich bei
	   1440px und zentriert ihn; ab 1616px Viewport beginnt der Text
	   dort also weiter innen. Gemessen ohne diese Zeile: Bei 1920px
	   stand der Gruendertext 152px links von jedem anderen
	   Abschnittstext - eine sichtbare Fluchtstoerung, die in der
	   Spezifikation nicht gemeint sein kann.

	   Der Versatz sitzt auf dem Raster, nicht auf der Textspalte:
	   So wandert nur die linke Kante nach innen, waehrend die
	   Bildspalte ihre rechte Kante behaelt. Bis 1616px ist der Wert
	   0 und nichts aendert sich. */
	padding-left: max(0px, calc((100% - 1440px) / 2 - var(--csp-side)));
}

/* Bild oben, Text darunter - die Reihenfolge im Quelltext bleibt
   Text zuerst, damit Vorlesewerkzeuge die Ueberschrift vor dem
   Bild antreffen. */
.casparion-gruender__bild {
	order: -1;
}

/* Das Band waechst mit der Breite, statt eine feste Hoehe zu halten.

   Vorher stand hier "height: 280px". Bei "cover" haengt der gezeigte
   Bildanteil dann an der Flaechenbreite, und die Bandfassung gilt bis
   720px Inhalt: Gemessen zeigte das Band bei 390px noch 80 Prozent der
   Bildhoehe, bei 744px nur noch 42 - der Kopf war oben und unten
   angeschnitten, sichtbar blieb Stirn bis Unterlippe. Die Vorgabe war
   an einem einzigen Punkt geprueft, bei 390px, und galt fuer eine
   ganze Spanne.

   7/5 ist nicht frei gewaehlt: Bei 390px Breite ergibt es 279px und
   reproduziert damit genau den geprueften Wert. Der gezeigte Anteil
   bleibt jetzt auf jeder Breite gleich; die Hoehe waechst dafuer - bei
   744px auf 531px. Das ist die Folge davon, den Kopf ganz zu zeigen.

   Der Ausschnitt sitzt auf 0 Prozent, nicht auf 18: Die Kopfoberkante
   liegt im Quellbild bei y=0, jeder Versatz nach unten schneidet Haar.
   Guide 1.7, Kapitel 29. */
.casparion-gruender__bild img {
	display: block;
	width: 100%;
	/* "height: auto" ist nicht Kosmetik, sondern Bedingung. Das Bild
	   traegt im Markup width- und height-Attribute gegen den
	   Layoutsprung; die Hoehe daraus ist eine feste Angabe, und sobald
	   Breite und Hoehe beide feststehen, ignoriert der Browser
	   "aspect-ratio". Beim ersten Versuch stand das Band deshalb auf
	   1224px - der vollen Bildhoehe - statt auf 279. Gemessen, nicht
	   vermutet. */
	height: auto;
	aspect-ratio: 7 / 5;
	object-fit: cover;
	object-position: 50% 0%;
}

/* Die Spaltenfassung ergaebe bei 390px eine 143px schmale
   Bildsaeule im gestauchten Hochformat. Als flaches Band rueckt der
   Ausschnitt mit - 18 statt 22 Prozent - damit die Augen auf der
   oberen Drittellinie bleiben. */
.casparion-gruender__text {
	padding: var(--csp-gap) var(--csp-side);
}

/* Umschaltpunkt: 720px INHALTSBREITE. Die Zahl unten ist daraus
   abgeleitet, nicht selbst gesetzt - bei 720px Inhalt traegt der
   Abschnitt beidseits 40px Rand, macht 800px Viewport. Aendert sich
   --csp-side, ist diese Zahl neu abzuleiten. */
@media (min-width: 800px) {
	.casparion-gruender {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.58fr);
		align-items: stretch;
	}

	.casparion-gruender__bild {
		order: 0;
		/* Keine Polsterung, keine Rundung, kein Rahmen, kein Schatten.
		   Die Bildspalte traegt keinen Abstand zur Abschnittskante -
		   sie ist die Kante. Ein Innenabstand macht aus der Spalte
		   wieder einen Kasten. */
		padding: 0;
	}

	/* In der Spaltenfassung bestimmt die Abschnittshoehe die Bildhoehe.
	   "aspect-ratio" wird dabei ohnehin unwirksam, sobald Breite und
	   Hoehe beide feststehen - hier ausdruecklich zurueckgesetzt,
	   damit die Regel sich selbst erklaert. */
	.casparion-gruender__bild img {
		aspect-ratio: auto;
		height: 100%;
		object-position: 50% 22%;
	}

	.casparion-gruender__text {
		padding-right: clamp(20px, 2.4vw, 40px);
	}
}

/* ---------- Kicker ---------- */

.casparion-kicker {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: var(--csp-kicker);
	line-height: 1.3;
	color: var(--wp--preset--color--gold-dunkel);
	margin: 0;
}

.casparion-kicker--on-dark {
	color: var(--wp--preset--color--gold-65);
}

/* ---------- Headlines ---------- */

/* Die eigene Hero-Stufe mit 104px ist fort. E14 hatte die H1 aller
   Seiten schon am 16.09. auf die H2-Groesse gesetzt; Baustein und Token
   blieben nur stehen, weil der Guide die Stufe noch fuehrte. Mit Guide
   1.6 fuehrt er sie nicht mehr - die Zeile "H1 Hero" ist aus der Skala
   auf S. 36 verschwunden, und "web.typeScale.h1Hero" ist aus den Tokens
   entfernt. Entfallen sind deshalb: der Token --csp-h1 in beiden
   Stufen, die Klasse .casparion-h1 und ihre drei Folgeselektoren.

   Mitgegangen ist "hyphens: manual". Der Wert war die Voreinstellung
   und hat nie etwas geaendert; er stand als Schutz gegen ein "auto",
   das nirgends gesetzt ist. Die gesetzten weichen Trennstriche wirken
   unveraendert weiter - das leistet die Voreinstellung selbst.

   Die beiden Rechtsseiten trugen die Klasse als Einzige noch auf ihrem
   Seitentitel; sie tragen jetzt casparion-h2, also dieselbe Stufe wie
   jede andere Seitenueberschrift. */
.casparion-h2 {
	font-size: var(--csp-h2);
	line-height: var(--csp-h2);
	margin: 0;
}

/* Kicker → Headline (14/16/20px), siehe Abschnitt 6. .casparion-h2
   selbst hat "margin: 0" weiter oben in dieser Datei - diese Regel
   steht bewusst DANACH, um bei gleicher Spezifität (0,1,0) durch die
   spätere Position im Quelltext zu gewinnen. */
.casparion-kicker + .casparion-h2 {
	margin-top: var(--csp-kicker-gap);
}

.casparion-h3 {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: var(--csp-h3);
	line-height: 1.15;
	margin: 0;
}

.casparion-gold {
	color: var(--wp--preset--color--bernsteingold);
}

/* ---------- Fließtext / Lead ---------- */

.casparion-lead {
	font-size: var(--csp-body);
	line-height: 1.55;
	max-width: 560px;
	margin: 0;
}

/* ---------- Zitat-Baustein (9.6) ---------- */

.casparion-quote {
	border-left: 4px solid var(--wp--preset--color--bernsteingold);
	padding-left: 32px;
	max-width: 720px;
	margin: 0;
}

.casparion-quote p {
	font-family: var(--wp--preset--font-family--barlow);
	font-style: italic;
	font-size: var(--csp-quote);
	line-height: 1.5;
	margin: 0;
}

.casparion-quote cite {
	display: block;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 600;
	font-style: normal;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold-dunkel);
	margin-top: 14px;
}

.casparion-section--dark .casparion-quote {
	color: var(--wp--preset--color--warmes-papier);
}

.casparion-section--dark .casparion-quote cite {
	color: var(--wp--preset--color--blau-45);
}

@media (max-width: 479px) {
	.casparion-quote {
		border-left-width: 3px;
		padding-left: 20px;
	}
}

/* Guide 1.4, S. 42: Blau-45 erreicht gegen warmes Papier nur 2,85:1
   und trägt im Web auf hellem Grund keine Schrift mehr. Betroffen
   waren drei Stellen - Card-Tag, Zäsur-Hinweis und Dauerangabe; alle
   drei tragen jetzt Blau-70 (6,24:1), dieselbe Farbe wie Fließtext.
   Auf dunklem Grund bleibt Blau-45 (5,61:1) unverändert: Fußzeile,
   Menü-Overlay, Zitat-Quelle, CTA-Notiz und Sekundärkontur. */

/* ---------- Card-Raster (9.4) ---------- */

.casparion-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 1024px) {
	.casparion-card-grid {
		grid-template-columns: 1fr 1fr;
		gap: 48px 64px;
	}
}

/* Drei statt zwei Spalten fuer ein Drei-Karten-Raster (Startseite,
   Leistungen: Advisory/Management/Ventures) - Korrekturauftrag
   Positionierung, 03.09.2026. Mobile bleibt unveraendert einspaltig,
   da diese Regel nur den Desktop-Breakpoint ueberschreibt. */
@media (min-width: 1024px) {
	.casparion-card-grid--three {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* Kartenraster ohne Media Query (Design-Handoff AI Enablement,
   Abschnitt 5): ergibt drei Spalten ab 1024px, zwei auf Tablet, eine
   auf Mobile - ohne Breakpoint. Bewusst als eigene Variante neben dem
   bestehenden Raster, damit Startseite und Potenzialbild ihr
   abgenommenes Verhalten behalten. Diese Regel steht NACH den
   Media Queries des Grundrasters; bei gleicher Spezifitaet (0,1,0)
   entscheidet die spaetere Position. */
.casparion-card-grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--csp-card-row-gap) var(--csp-card-col-gap);
}

.casparion-card {
	border-top: 3px solid var(--wp--preset--color--bernsteingold);
	padding-top: 20px;
}

/* Kartentext folgt der Zeile "Fliesstext in Karten" der Werte-Tabelle
   (Design-Handoff AI Enablement, Abschnitt 4): 17px mobil, 18px ab
   1024px - nicht die 20px des freien Fliesstexts. Sichtbare Folge auch
   auf der Startseite, wo Karten bisher 20px trugen; die Untergrenze von
   17px bleibt in beiden Faellen gewahrt. */
.casparion-card p {
	font-size: var(--csp-card-body);
	line-height: 1.55;
	color: var(--wp--preset--color--blau-70);
	margin: 12px 0 0;
}

/* Auf dunklem Grund traegt Blau-70 keinen Text: 2,56:1 gegen
   Mitternachtsblau. Kartentext erbt dort warmes Papier (15,96:1). */
.casparion-section--dark .casparion-card p {
	color: var(--wp--preset--color--warmes-papier);
}

.casparion-card__tag {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blau-70);
	margin-top: 14px;
}

/* ---------- Nummerierte Liste (9.5) ---------- */

.casparion-numbered-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 480px) {
	.casparion-numbered-list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.casparion-numbered-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 56px 64px;
	}
}

/* Vorgehensraster der Leistungsseite: minmax(min(380px, 100%), 1fr).
   Das min() ist zwingend - ohne es kann die Spur nicht unter 380px
   schrumpfen und laeuft bei 375px ueber den Rand (Design-Handoff
   Abschnitt 5). Ergibt zwei Spalten auf dem Desktop, weil drei Spuren
   mit 380px plus zwei Rinnen die Inhaltsbreite von 1264px
   ueberschreiten. Steht NACH den Media Queries des Grundrasters; bei
   gleicher Spezifitaet (0,1,0) entscheidet die spaetere Position. */
.casparion-numbered-list--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: var(--csp-card-row-gap) var(--csp-card-col-gap);
}

/* Guide 1.4, S. 42: Gold als Schrift wechselt den Ton mit dem Grund.
   Auf hellem Grund trägt ausschließlich Gold-Dunkel Schrift (4,31:1);
   Gold-35 (das hier vorher stand) erreicht gegen warmes Papier nur
   1,3:1 und ist damit auch für 40px-Ziffern unbrauchbar - die
   Prüfgrenze ab 24px liegt bei 3:1. Auf dunklem Grund trägt
   Gold-65 (8,95:1). Die Klasse bleibt eine einzige und wird mit der
   Startseite geteilt; die Variante hängt am Abschnitt, nicht am
   Baustein, und kann deshalb beim Einsetzen nicht vergessen werden. */
.casparion-numbered-list__digit {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 900;
	font-size: 40px;
	line-height: 1;
	color: var(--wp--preset--color--gold-dunkel);
}

.casparion-section--dark .casparion-numbered-list__digit {
	color: var(--wp--preset--color--gold-65);
}

/* Stand 12.09.2026 von 16px auf var(--csp-card-body) korrigiert. 16px
   unterschritt die Untergrenze aus den Tokens ("Fliesstext nie unter
   17px - Lesbarkeitsgrenze auf Mobile und Voraussetzung fuer 150%
   Zeilenabstand", web.typeScale.untergrenze) und die Pruefliste des
   Design-Handoffs. Betroffen waren die Ziffernlisten auf Startseite
   (Ausloesesituationen) und Potenzialbild (Perspektiven). */
.casparion-numbered-list__item p {
	font-size: var(--csp-card-body);
	line-height: 1.55;
	color: var(--wp--preset--color--blau-70);
	margin: 10px 0 0;
}

.casparion-section--dark .casparion-numbered-list__item p {
	color: var(--wp--preset--color--warmes-papier);
}

/* ---------- Tag-Liste (9.7) ---------- */

.casparion-tag-list {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-size: var(--csp-tag);
	line-height: 2;
	margin: 0;
	overflow-wrap: normal;
	hyphens: none;
}

/* N8: jeder Begriff einzeln umschlossen und intern unteilbar, damit
   Umbruch nur zwischen Begriffen stattfindet - nie innerhalb (auch
   nicht am Bindestrich von "START-UPS"/"POST-MERGER"). */
.casparion-tag-list__term {
	white-space: nowrap;
}

.casparion-tag-list__dot {
	color: var(--wp--preset--color--bernsteingold);
	padding: 0 0.4em;
}

/* ---------- Situationsliste (Potenzialbild) ---------- */

.casparion-situation-list {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Guide 1.4, S. 42: Aufzählungstexte tragen dieselbe Farbe wie
   Fließtext - Blau-70 (6,24:1). Eine eigene, hellere Listenfarbe gibt
   es nicht und darf hier auch nicht wieder entstehen. Der Punkt vor
   dem Eintrag ist Fläche, nicht Schrift, und bleibt Bernsteingold. */
.casparion-situation-list li {
	position: relative;
	padding-left: 24px;
	font-size: var(--csp-body);
	line-height: 1.55;
	color: var(--wp--preset--color--blau-70);
}

.casparion-situation-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--bernsteingold);
}

.casparion-section--dark .casparion-situation-list li {
	color: var(--wp--preset--color--blau-20);
}

/* ---------- Ergebnisliste mit Haarlinien (Leistungsseite, 6.7) ---------- */

/* Gegenstueck zur Aufzaehlung mit Punkten: Die Zeilen werden nicht
   durch einen Bernsteingold-Punkt eroeffnet, sondern durch eine
   Haarlinie getrennt.

   Bis 16.09.2026 stand dieser Baustein ausschliesslich auf dunklem
   Grund und trug deshalb nur die helle Haarlinie. Mit der neuen
   Abschnittsfolge wandert er auf warmes Papier, wo Papierweiss bei
   16 Prozent unsichtbar waere. Grundzustand ist jetzt der helle Grund
   - wie bei jedem anderen Baustein hier - und die dunkle Variante
   haengt am Abschnitt, nicht am Baustein, und kann beim Einsetzen
   nicht vergessen werden.

   Haarlinie auf warmem Papier: Blau-8, derselbe Wert wie unter dem
   Header. Text: Blau-70 (6,24:1), dieselbe Farbe wie jeder andere
   Fliesstext auf hellem Grund - eine eigene, hellere Listenfarbe gibt
   es nicht. Auf dunklem Grund traegt Blau-70 nur 2,56:1, dort bleibt
   es bei warmem Papier (15,96:1). */
.casparion-result-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.casparion-result-list li {
	font-size: var(--csp-body);
	line-height: 1.55;
	padding: 14px 0;
	color: var(--wp--preset--color--blau-70);
	border-bottom: 1px solid var(--wp--preset--color--blau-8);
}

.casparion-section--dark .casparion-result-list li {
	color: var(--wp--preset--color--warmes-papier);
	border-bottom-color: rgba(247, 245, 240, 0.16);
}

/* ---------- Prozessliste mit Zäsur (Potenzialbild, Ablauf) ---------- */

.casparion-process-list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.casparion-process-list__item p {
	font-size: var(--csp-body);
	line-height: 1.55;
	color: var(--wp--preset--color--blau-70);
	margin: 10px 0 0;
}

/* Zäsur zwischen Schritt 01 und 02: ausschließlich über großzügigen
   Weißraum und Hinweistext - ausdrücklich KEINE Trennlinie (Guide
   Kapitel 24, Handoff Nachbesserung Abschnitt 7). */
.casparion-process-zaesur {
	margin: 24px 0;
	padding-left: 0;
}

.casparion-process-zaesur p:last-child {
	font-size: var(--csp-body);
	line-height: 1.55;
	color: var(--wp--preset--color--blau-70);
	margin: 8px 0 0;
	max-width: 560px;
}

/* Stand 16.09.2026 von 16px auf 17px gehoben (Claude Design, E16).
   Dieselbe Untergrenze wurde am 12.09. fuer die Ziffernlisten schon
   einmal durchgesetzt; ein zweites Mal stehenzulassen haette aus der
   Untergrenze eine Empfehlung gemacht. Die Groesse ist hier keine
   Kontrastfrage - bei 16px traege Blau-45 genauso -, sondern eine
   Konsistenzfrage. Fliesstext in Barlow, keine Versalienzeile. */
.casparion-process-duration {
	margin-top: 40px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--wp--preset--color--blau-70);
}

/* ---------- Ablauf auf dunklem Grund (E16) ----------
   Drei Textfarben, geliefert von Claude Design am 16.09.2026, nachdem
   der Abschnitt nach E16 auf Mitternachtsblau gewechselt ist. Blau-70
   erreicht dort gemessene 2,56:1 und traegt keine Schrift.

   Die drei Werte sind nicht derselbe Ton, und das ist der Punkt: Sie
   halten die Rangfolge des Abschnitts. Ziffer und Schritttitel fuehren,
   die Beschreibung folgt in Blau-20 (10,47:1) - dasselbe Verhaeltnis
   wie bei den Stufenbeschreibungen in D2. Der Hinweistext der Zaesur
   traegt als einzige Aussage des Abschnitts Papierweiss (15,96:1); er
   ist auch der einzige Absatz mit eigener Maximalbreite. Die Dauer ist
   eine nachgeordnete Angabe und steht in Blau-45 (5,61:1).

   Keine Trennlinie. Die erste Fassung der Lieferung hatte eine
   festgelegt und als Luecke im Guide ausgegeben; die Luecke gibt es
   nicht, Kapitel 24 verbietet Trennlinien ausnahmslos. Zurueckgenommen,
   und im Theme stand ohnehin nie eine. */
.casparion-section--dark .casparion-process-list__item p {
	color: var(--wp--preset--color--blau-20);
}

.casparion-section--dark .casparion-process-zaesur p:last-child {
	color: var(--wp--preset--color--warmes-papier);
}

.casparion-section--dark .casparion-process-duration {
	color: var(--wp--preset--color--blau-45);
}

/* ---------- FAQ-Akkordeon (Potenzialbild) ---------- */

/* Korrektur 03.09.2026 (Korrekturauftrag): Trennlinien zwischen den
   Akkordeon-Einträgen entfernt - der Guide verbietet Trennlinien
   ausnahmslos. Abstand übernimmt die Gliederung stattdessen (gap
   statt border), die Versalien-Frage und das Plus-Zeichen tragen den
   Rest. */
.casparion-faq {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.casparion-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	cursor: pointer;
	list-style: none;
}

.casparion-faq__question::-webkit-details-marker {
	display: none;
}

/* Die FAQ-Frage ist eine Frage unter der Abschnittsueberschrift - und die
   steht nach Guide 1.8, Kapitel 24, Baustein "Kartenfrage" NIE in Versalien:
   "Sie spricht den Leser auf Augenhoehe an; in Versalien wirkt sie wie ein
   Ruf." Die Werte sind dieselben wie bei .casparion-kartenfrage; die H3
   bleibt, weil sie das anklickbare Element des Aufklappers ist und ihre
   Groesse als Ueberschrift braucht. Damit entfaellt Fassung A der
   Baustein-Spezifikation vom 15.09., wie der Handoff zu 1.8 es verlangt. */
.casparion-faq__question h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.casparion-faq__question::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 600;
	font-size: 24px;
	line-height: 1;
	color: var(--wp--preset--color--gold-dunkel);
}

.casparion-faq__item[open] .casparion-faq__question::after {
	content: "\2212";
}

.casparion-faq__answer {
	padding: 0 0 24px;
	max-width: 720px;
}

.casparion-faq__answer p {
	font-size: var(--csp-body);
	line-height: 1.55;
	color: var(--wp--preset--color--blau-70);
	margin: 0;
}

/* ---------- Buttons (9.8) ---------- */

.casparion-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 14px 34px;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--csp-button);
	border: none;
	cursor: pointer;
	transition: background-color 120ms, color 120ms, border-color 120ms;
}

.casparion-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--bernsteingold);
	outline-offset: 2px;
}

.casparion-btn--primary-on-light {
	background: var(--wp--preset--color--mitternachtsblau);
	color: var(--wp--preset--color--warmes-papier);
}

.casparion-btn--primary-on-light:hover {
	background: var(--wp--preset--color--blau-70);
	color: var(--wp--preset--color--warmes-papier);
}

.casparion-btn--primary-on-dark {
	background: var(--wp--preset--color--warmes-papier);
	color: var(--wp--preset--color--mitternachtsblau);
}

.casparion-btn--primary-on-dark:hover {
	background: var(--wp--preset--color--blau-20);
	color: var(--wp--preset--color--mitternachtsblau);
}

/* Sekundaerknopf auf warmem Papier, neu am 21.09.2026. Der Kontakt-
   abschnitt der Startseite ist mit B3 auf hellen Grund gewechselt und
   traegt zwei Sekundaerknoepfe; bis dahin gab es die Variante nur auf
   dunklem Grund. Die Kontur ist Blau-70, nicht Blau-45: Dieselbe
   Ersetzung, die im Theme schon Card-Tag, Zaesur-Hinweis, Dauerangabe
   und zweite Frage betrifft - Blau-45 erreicht gegen warmes Papier nur
   2,85:1. Die Schrift traegt Mitternachtsblau (15,96:1). */
.casparion-btn--secondary-on-light {
	background: transparent;
	color: var(--wp--preset--color--mitternachtsblau);
	border: 1px solid var(--wp--preset--color--blau-70);
}

.casparion-btn--secondary-on-light:hover {
	background: var(--wp--preset--color--mitternachtsblau);
	color: var(--wp--preset--color--warmes-papier);
}

.casparion-btn--secondary-on-dark {
	background: transparent;
	color: var(--wp--preset--color--warmes-papier);
	border: 1px solid var(--wp--preset--color--blau-45);
}

.casparion-btn--secondary-on-dark:hover {
	background: var(--wp--preset--color--blau-20);
	color: var(--wp--preset--color--mitternachtsblau);
}

.casparion-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 48px;
}

/* .casparion-cta-row__note am 04.09.2026 entfernt: Die Klasse stylte
   ausschliesslich den Zusatz "Antwort in der Regel am selben Tag" neben dem
   Hero-CTA, der als unbelegtes Serviceversprechen gestrichen wurde
   (Korrekturauftrag Hero-Serviceversprechen). Ohne dieses eine Element hatte
   die Regel keine Verwendung mehr. */

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */

/* Fund C des Korrekturauftrags vom 3.9.2026 (PR #5): Impressum und
   Datenschutz liefen bislang ueber das generische page.html-Template
   ohne jede Gestaltung. templates/page-impressum.html und
   page-datenschutz.html binden den Rechtstext jetzt ueber
   wp:post-content mit dieser Klasse ein - der Text selbst (in der
   Datenbank gepflegt, ausschliesslich <h2 class="wp-block-heading">
   und <p class="wp-block-paragraph">, keine Listen bislang) bleibt
   unveraendert, nur die Darstellung wird nachgezogen. Breite
   uebernimmt WordPress' eigene "constrained"-Layout ueber
   theme.json settings.layout.contentSize (620px) - deckt sich mit der
   Fliesstextbreite im Guide, daher keine eigene max-width hier.
   blockGap ist sitewide auf 0 gesetzt (siehe theme.json), darum
   braucht jede Kombination aus Ueberschrift und Absatz hier einen
   eigenen Abstand. */
.casparion-legal-content {
	margin: 0;
}

.casparion-legal-content .wp-block-heading {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: var(--csp-h3);
	line-height: 1.15;
	color: var(--wp--preset--color--mitternachtsblau);
	margin: 0;
}

.casparion-legal-content > * + .wp-block-heading {
	margin-top: 48px;
}

.casparion-legal-content .wp-block-paragraph,
.casparion-legal-content .wp-block-list {
	font-size: var(--csp-body);
	line-height: 1.55;
	color: var(--wp--preset--color--blau-70);
	margin: 0;
}

.casparion-legal-content .wp-block-heading + .wp-block-paragraph,
.casparion-legal-content .wp-block-heading + .wp-block-list {
	margin-top: 16px;
}

.casparion-legal-content .wp-block-paragraph + .wp-block-paragraph,
.casparion-legal-content .wp-block-list + .wp-block-paragraph,
.casparion-legal-content .wp-block-paragraph + .wp-block-list {
	margin-top: 12px;
}

/* Headline → erster Inhalt (26/40/64px), siehe Abschnitt 6/N1. Steht
   bewusst hier, NACH allen Bausteinen mit eigenem "margin: 0"
   (.casparion-lead, .casparion-tag-list, ...) - bei gleicher
   Spezifität (0,1,0) gewinnt sonst deren margin:0, weil es weiter
   OBEN im Quelltext eigentlich später verarbeitet würde. Erst an
   dieser Stelle im Quelltext gewinnt die Abstandsregel zuverlässig.
   Eigene, feste Abstände einzelner Bausteine (Zitat, CTA-Zeile)
   nutzen inline style="margin-top:…" und werden dadurch nicht
   berührt. */
.casparion-h2 + * {
	margin-top: var(--csp-content-gap);
}

/* ---------- Kategorialer Deskriptor (Produktseiten) ---------- */

/* Ein Satz unmittelbar unter der H1, der die Angebotskategorie benennt.
   Handoff Deskriptor vom 12.09.2026. Keine neue Farbe: Der Deskriptor
   erbt die Textfarbe des Abschnitts, auf --dark also warmes Papier wie
   die Leads daneben.

   Eigener Grad zwischen Headline und Fliesstext: Auf Fliesstexthoehe
   laese er als erster Absatz und verschwaende; ein Schritt darueber
   macht ihn zur Unterzeile der H1, ohne eine zweite Ueberschrift zu
   erzeugen. 19px mobil, 24px ab 1024px - dieselben Endwerte wie das
   clamp(19px, 1.6vw, 24px) des Handoffs, nur als feste Stufen, weil
   dieses Theme durchgehend so gebaut ist.

   Diese Regel steht NACH ".casparion-h2 + *", damit ihr margin-top von
   24px gewinnt: Der Deskriptor gehoert zur Ueberschriftengruppe, nicht
   zum Fliesstext, und traegt deshalb nicht den grossen Inhaltsabstand.
   Der erste Lead darunter bekommt ihn dafuer zurueck - sonst klebte er
   am Deskriptor, weil .casparion-lead selbst margin: 0 hat. */
.casparion-descriptor {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 400;
	font-size: var(--csp-descriptor);
	line-height: 1.45;
	max-width: 620px;
	margin-top: 24px;
	margin-bottom: 0;
}

.casparion-descriptor + .casparion-lead {
	margin-top: var(--csp-content-gap);
}

/* ---------- Header ---------- */

/* WordPress wraps jeden wp:template-part-Block automatisch in ein
   eigenes Element (hier <header class="wp-block-template-part"> bzw.
   <footer class="wp-block-template-part"> durch tagName:"header"/
   "footer" in den Templates) - dieser Wrapper enthaelt aber nur den
   Header/Footer selbst und ist daher exakt so hoch wie dieser.
   position: sticky bleibt nur innerhalb der Bounding Box des eigenen
   Containing Block (= direkter Elternknoten) angepinnt; ist der
   Wrapper nicht hoeher als der Header selbst, loest sich der Sticky-
   Effekt schon nach den ersten paar gescrollten Pixeln wieder. display:
   contents nimmt die Box des Wrappers aus dem Layout, sodass
   .casparion-header effektiv das naechste "echte" Element (.wp-site-
   blocks, so hoch wie die gesamte Seite) als Containing Block bekommt.
   Betrifft auch den Footer-Wrapper (gleiche Klasse) - dort unschaedlich,
   da doppeltes <footer>-Landmark ohnehin nur redundant war.
*/
.wp-block-template-part {
	display: contents;
}

.casparion-header {
	background: var(--wp--preset--color--warmes-papier);
	border-bottom: 1px solid var(--wp--preset--color--blau-8);
	position: sticky;
	top: 0;
	z-index: 100;
}

.casparion-header__inner {
	height: 72px;
	padding: 0 var(--csp-side);
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1440px;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.casparion-header__inner {
		height: 96px;
	}
}

/* N2+N9: genau ein <img> für die Marke (siehe header.html - <picture>
   mit einer <source> für <480px statt zwei <img> + CSS-Toggle). Die
   Höhe je Breakpoint gilt für dieses eine Bild unabhängig davon,
   welche der beiden Dateien der Browser gerade rendert. */
.casparion-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.casparion-logo img {
	display: block;
	width: auto;
	height: 28px;
}

@media (min-width: 480px) {
	.casparion-logo img {
		height: 30px;
	}
}

@media (min-width: 1024px) {
	.casparion-logo img {
		height: 36px;
	}
}

.casparion-footer__logo {
	height: 22px;
	width: auto;
	display: block;
}

/* Desktop-Navigation: ab 1024px sichtbar. Die Schwelle ist im
   Design-Handoff AI Enablement als Abweichung C begruendet und
   festgelegt; sie bleibt, auch nachdem aus vier Sprungmarken sechs
   Punkte wurden.
   Zwei Stellschrauben statt der Schwelle, beide aus dem Handoff selbst:
   die Rinne (24px bei 1024px, 40px ab 1280px) und die Schriftgroesse als
   clamp(13px, 1.05vw, 15px) aus der Werte-Tabelle in Abschnitt 4. Die
   15px der Tokens sind der Desktop-Endwert, das clamp beschreibt den
   Weg dorthin - bei 1024px ergibt 1.05vw 10,75px und wird auf die
   Untergrenze 13px gehoben. Nachgemessen: Mit sechs Punkten und festen
   15px stand die Navigation bei 1024px mit null Abstand am Logo. Die
   17-px-Untergrenze gilt fuer Navigation ausdruecklich nicht. */
.casparion-nav {
	display: none;
}

@media (min-width: 1024px) {
	.casparion-nav {
		display: flex;
		align-items: center;
		gap: 24px;
		font-family: var(--wp--preset--font-family--barlow-condensed);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.14em;
		font-size: clamp(13px, 1.05vw, 15px);
	}

	.casparion-nav a {
		color: var(--wp--preset--color--mitternachtsblau);
	}

	.casparion-nav a:hover {
		color: var(--wp--preset--color--gold-dunkel);
	}

	/* Touch-Ziel 44px auch fuer die Ankerpunkte (Pruefliste). Die Hoehe
	   sitzt am Link, die Goldlinie am inneren Span - so liegt sie an der
	   Schrift und nicht am unteren Rand des Touch-Ziels. */
	.casparion-nav a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.casparion-nav a[aria-current="page"] span {
		border-bottom: 2px solid var(--wp--preset--color--bernsteingold);
		padding-bottom: 3px;
	}

	.casparion-nav__cta {
		background: var(--wp--preset--color--mitternachtsblau);
		color: var(--wp--preset--color--warmes-papier) !important;
		padding: 14px 24px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.casparion-nav__cta:hover {
		background: var(--wp--preset--color--blau-70);
	}
}

@media (min-width: 1280px) {
	.casparion-nav {
		gap: 40px;
	}
}

/* ---------- Mobile-Menü (9.2) ---------- */

.casparion-menu-toggle {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

@media (min-width: 1024px) {
	.casparion-menu-toggle {
		display: none;
	}
}

.casparion-menu-toggle__icon {
	position: relative;
	width: 22px;
	height: 16px;
	display: block;
}

.casparion-menu-toggle__icon span {
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--wp--preset--color--mitternachtsblau);
	transition: transform 120ms, opacity 120ms;
}

.casparion-menu-toggle__icon span:nth-child(1) {
	top: 0;
}

.casparion-menu-toggle__icon span:nth-child(2) {
	top: 7px;
}

.casparion-menu-toggle__icon span:nth-child(3) {
	top: 14px;
}

/* Die X-Verwandlung des Hamburgers ist am 12.09.2026 entfallen: Das
   Overlay deckt den Header vollstaendig ab und traegt seinen eigenen
   Schliessen-Knopf. Ein zweites Schliesselement, das unter dem Overlay
   liegt und durchscheint, waere nur eine zweite Wahrheit. */

/* Overlay am 12.09.2026 nach Abschnitt 7 des Design-Handoffs AI
   Enablement umgebaut: eigene Kopfzeile mit negativer Wortmarke (26px)
   und Schliessen-Knopf (44x44), darunter die sechs Punkte. Vorher trug
   es keinen Schliessen-Knopf - geschlossen wurde ueber den Hamburger,
   der als X durchschien. Ein eigener Knopf ist das Fokusziel beim
   Oeffnen und macht die Bedienung ohne Maus erst eindeutig.
   Der Kontaktblock im Overlay ist entfallen: Der Handoff zaehlt die
   Inhalte des Overlays auf und nennt ihn nicht, und dieselben Angaben
   stehen auf jeder Seite in der Fusszeile. */
.casparion-mobile-menu {
	position: fixed;
	inset: 0;
	background: var(--wp--preset--color--mitternachtsblau);
	display: flex;
	flex-direction: column;
	padding: 24px;
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	transition: opacity 120ms;
	/* Muss über .casparion-header (z-index: 100) liegen - das Overlay
	   deckt inset:0 die volle Fläche ab, inklusive des sticky Headers,
	   und muss ihn laut Abschnitt 4 des Handoffs vollständig verdecken. */
	z-index: 110;
}

.casparion-mobile-menu__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40px;
}

.casparion-mobile-menu__kopf img {
	height: 26px;
	width: auto;
	display: block;
}

.casparion-mobile-menu__schliessen {
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--warmes-papier);
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 400;
	font-size: 30px;
	line-height: 1;
}

.casparion-mobile-menu.is-open {
	visibility: visible;
	opacity: 1;
}

@media (min-width: 1024px) {
	.casparion-mobile-menu {
		display: none;
	}
}

.casparion-mobile-menu nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.casparion-mobile-menu nav a {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--csp-nav-overlay);
	line-height: 1.2;
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--warmes-papier);
}

.casparion-mobile-menu__last {
	color: var(--wp--preset--color--bernsteingold) !important;
}

.casparion-mobile-menu nav a[aria-current="page"] span {
	border-bottom: 2px solid var(--wp--preset--color--bernsteingold);
	padding-bottom: 3px;
}

/* .casparion-mobile-menu__contact am 12.09.2026 entfernt: Der
   Kontaktblock im Overlay ist mit dem Umbau nach Abschnitt 7 des
   Design-Handoffs entfallen, die Regeln hatten danach keine
   Verwendung mehr. Mail und Rufnummer stehen auf jeder Seite in der
   Fusszeile. */

body.casparion-menu-open {
	overflow: hidden;
}

/* ---------- Footer (9.9) ---------- */

.casparion-footer {
	background: var(--wp--preset--color--mitternachtsblau);
	color: var(--wp--preset--color--warmes-papier);
	padding: 104px var(--csp-side) 0;
}

/* Am 12.09.2026 entfernt: die Sonderregel fuer den Footer INNERHALB des
   Kontakt-Abschnitts der Startseite. Mit der neuen Dramaturgie ist der
   Footer dort kein dupliziertes Markup mehr, sondern derselbe
   Template-Part wie auf allen anderen Seiten - er traegt deshalb wieder
   seinen eigenen seitlichen Rand. Damit entfaellt auch die Warnung, bei
   Footer-Aenderungen zwei Stellen pflegen zu muessen. Die Farbfuge, die
   N3 vermeiden sollte, entsteht nicht: Der Abschnitt gibt sein
   padding-bottom ab, beide Flaechen sind Mitternachtsblau. */

.casparion-footer__inner {
	max-width: 1440px;
	margin: 0 auto;
	border-top: 1px solid rgba(247, 245, 240, 0.16);
	padding: 40px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}

.casparion-footer__contact p {
	font-size: var(--csp-footer);
	line-height: 1.7;
	color: var(--wp--preset--color--blau-45);
	margin: 0;
}

/* Fusszeilen-Links am 12.09.2026 unterstrichen (Design-Handoff AI
   Enablement, Abschnitt 3 und Pruefliste). Vorher trugen sie Blau-45 -
   dieselbe Farbe wie der Text neben ihnen - und keine Unterstreichung.
   Sie waren damit nicht "nur ueber Farbe" unterschieden, sondern
   ueberhaupt nicht: "Impressum" war optisch nicht von der
   Telefonnummer daneben zu trennen. Verstoss gegen WCAG 1.4.1.
   Die Farbe bleibt Blau-45 (5,61:1 gegen Mitternachtsblau) - die
   Tokens nennen fuer die Fusszeile auf dunklem Grund ausdruecklich
   Blau-45 und stehen in der Rangfolge des Handoffs ueber ihm; die im
   Handoff verlangten Blau-20 gingen von goldenen Links aus, die es
   hier nie gab. Hover auf warmes Papier (15,96:1) nach Handoff. */
.casparion-footer__contact a {
	color: var(--wp--preset--color--blau-45);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.casparion-footer__contact a:hover {
	color: var(--wp--preset--color--warmes-papier);
}

/* ---------- Fliesstext-Link ----------
   Erster Link im Fliesstext ueberhaupt, eingefuehrt mit C6. Global gilt
   "a { text-decoration: none }" - ohne eigene Regel waere der Link von
   seiner Umgebung nicht zu unterscheiden, weder durch Farbe noch durch
   Auszeichnung.

   Farbe wird geerbt, nicht gesetzt. Gold-dunkel liegt auf warmem Papier
   bei gemessenen 4,31:1 und verfehlt damit die 4,5:1 fuer Fliesstext;
   der geerbte Wert Mitternachtsblau liegt bei 15,96:1. Unterschieden
   wird der Link deshalb durch die Unterstreichung - das erfuellt
   WCAG 1.4.1, ohne den Kontrast anzutasten.

   Hover verdickt die Linie, statt die Farbe zu wechseln: Jede hellere
   Farbe der Palette wuerde den Kontrast unter die Schwelle druecken.

   Impressum und Datenschutz haengen mit drin, auf Entscheidung des
   Auftraggebers und analog zur Fusszeile. Sie trugen zuvor Gold-dunkel
   ohne Unterstreichung und wechselten beim Hover auf Bernsteingold -
   gemessene 4,31:1 im Ruhezustand und 2,53:1 beim Hover, beides unter
   der Schwelle, und ohne Unterstreichung war der Link ueberhaupt nur an
   der Farbe zu erkennen. Betroffen waren fuenf Links. */
.casparion-textlink,
.casparion-legal-content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.casparion-textlink:hover,
.casparion-legal-content a:hover {
	text-decoration-thickness: 2px;
}

/* ---------- D1 · Leitfrage ----------
   Fassung B, Barlow kursiv, entschieden am 16.09.2026. Abgeleitet vom
   Zitat-Baustein: linke Goldlinie, Abstand statt Rahmen, kein Kicker
   darueber, die Frage steht allein.

   Die Linie uebernimmt die Masse des Zitats unveraendert - 4px/32px,
   unter 480px 3px/20px. Die Spezifikation nennt dieselben Werte; hier
   steht bewusst dieselbe Regel und keine zweite Wahrheit.

   Groessenstufe bei 1024px statt eines eigenen Haltepunkts: Jeder
   Typo-Token dieses Themes schaltet dort, und D1 nennt nur "Desktop"
   und "Mobil" ohne Breite. Ein eigener Haltepunkt haette D1 als
   einzigen Baustein aus dem Raster genommen.

   Der Baustein sitzt auf <p> und auf <h2>. Auf der Startseite ist die
   Leitfrage ein Absatz, auf /potenzialbild/ und in C2 ist sie die
   Ueberschrift ihres Abschnitts - dieselbe Behandlung, andere Semantik.
   Deshalb werden Familie, Schnitt, Groesse und Versalien hier
   ausdruecklich zurueckgesetzt: theme.json setzt fuer jede Ueberschrift
   Barlow Condensed 700 in Versalien.

   Der ":root"-Vorsatz ist noetig, nicht schmueckend. theme.json schreibt
   ":root :where(h1,...,h6)" - ":where" zaehlt null, ":root" zaehlt eine
   Pseudoklasse, macht zusammen (0,1,0) und damit genau so viel wie eine
   blanke Klasse. Wer dann gewinnt, entscheidet die Reihenfolge im
   Dokument, und die haengt an der Einbindung, nicht an dieser Datei. Ohne
   Vorsatz blieb die Leitfrage auf /potenzialbild/ in Barlow Condensed 700
   Versalien mit Zeilenhoehe 1 - lokal gemessen, bevor es jemand zu sehen
   bekam. Mit Vorsatz sind es (0,2,0) und die Frage ist entschieden. */
:root .casparion-leitfrage {
	border-left: 4px solid var(--wp--preset--color--bernsteingold);
	padding-left: 32px;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 400;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--csp-leitfrage);
	line-height: var(--csp-leitfrage-hoehe);
	max-width: var(--csp-leitfrage-breite);
	margin: 0;
}

/* Zwei Leitfragen nebeneinander: Mindestabstand nach D1. */
.casparion-leitfrage + .casparion-leitfrage {
	margin-top: 32px;
}

/* Leitfrage -> erster Inhalt. Steht NACH ".casparion-h2 + *" weiter
   oben, damit bei gleicher Spezifitaet die spaetere Position gewinnt. */
.casparion-leitfrage + *:not(.casparion-leitfrage) {
	margin-top: var(--csp-content-gap);
}

/* V1 der Sichtpruefung vom 16.09.2026: Die Leitfrage sass ohne Abstand
   unter der H1 und las sich nicht als eigenes Element. Ursache war der
   Baustein selbst - ":root .casparion-leitfrage" traegt "margin: 0" mit
   (0,2,0) und schlaegt damit die allgemeine Abstandsregel
   ".casparion-h2 + *" mit (0,1,0). Jeder andere Baustein unter einer
   Ueberschrift bekam den Abstand, nur dieser nicht.

   Kein neuer Wert: derselbe Token "Headline zu Inhalt", den alle
   uebrigen Bausteine dort tragen (26px / 40px ab 480px / 64px ab
   1024px - die Endwerte des clamp(26px, 4.4vw, 64px) aus dem Guide).
   Genannt ist nur die H2-Klasse: Seit V2 steht jede H1 auf dieser
   Stufe, und seit Guide 1.6 gibt es keine andere mehr. */
:root .casparion-h2 + .casparion-leitfrage {
	margin-top: var(--csp-content-gap);
}

/* Auch hier der ":root"-Vorsatz - sonst verliert die Mobilregel gegen
   den Hauptblock, der ihn tragen muss. Beim ersten Versuch tat sie das:
   375px lieferte die Desktop-Linie 4px/32px statt 3px/20px. */
@media (max-width: 479px) {
	:root .casparion-leitfrage {
		border-left-width: 3px;
		padding-left: 20px;
	}
}

@media (min-width: 1024px) {
	.casparion-leitfrage + .casparion-leitfrage {
		margin-top: 44px;
	}
}

/* ---------- Kartenfrage ----------
   Die Leitfrage innerhalb einer Karte, eingefuehrt mit der Ueberarbeitung
   vom 16.09.2026 (Abschnitte KI und Nachfolge). Sie ist kein D1-Baustein:
   D1 traegt eine Goldlinie und 38px und wuerde eine Karte sprengen. Hier
   genuegt Gewicht und Farbe, um sie vom Kartentext abzuheben.

   Der Selektor nennt die Karte mit, weil ".casparion-card p" mit (0,1,1)
   sonst gewinnt - eine blanke Klasse haette nur (0,1,0). */
.casparion-card .casparion-kartenfrage {
	font-weight: 600;
	color: var(--wp--preset--color--mitternachtsblau);
}

.casparion-section--dark .casparion-card .casparion-kartenfrage {
	color: var(--wp--preset--color--warmes-papier);
}

/* Knopf in der Karte. Bisher trug keine Karte einen - die drei Karten der
   Einstiegszone sind die ersten. D3 verfeinert spaeter, unter anderem mit
   voller Kartenbreite auf dem Telefon; bis dahin steht er als gewoehnlicher
   Knopf mit Abstand zum Kartentext. */
.casparion-card .casparion-btn {
	margin-top: 20px;
}

/* ---------- Zweite Frage der Ausloesesituationen ----------
   Kapitel 13 des Leitfadens macht KI und IT-Basis zu Dimensionen in jedem
   Anlass. Die zweite Frage steht deshalb auf allen sieben Karten, aber der
   ersten nachgeordnet: kursiv und mit Abstand, nicht durch Groesse.

   D5 verlangt dafuer Blau-45. Das geht hier nicht: Beide Abschnitte von
   /situationen/ stehen auf warmem Papier, und Blau-45 erreicht dort
   gemessene 2,85:1 - dieselbe Feststellung, die im Guide-Vermerk weiter
   oben schon drei andere Stellen auf Blau-70 gebracht hat. Blau-70 liegt
   bei 6,24:1 und ist die Farbe, die der Kartentext ohnehin traegt.
   Unterschieden wird die zweite Frage also durch Schnitt und Abstand.

   Auch hier nennt der Selektor den Elternbaustein mit:
   ".casparion-numbered-list__item p" traegt (0,1,1). */
.casparion-numbered-list__item .casparion-zweitfrage {
	font-style: italic;
	margin-top: 14px;
}

/* ---------- D2 · Zusammenarbeit in fuenf Stufen ----------
   Startseite, Abschnitt 4 (#zusammenarbeit). Loest dort das geteilte
   Grundraster der nummerierten Liste ab: Die traegt auf dem Desktop drei
   Spalten, fuenf Stufen ergeben darin 3 plus 2 und lesen sich als
   Gruppierung, die es nicht gibt. Die Treppe hat eine Richtung. Deshalb
   ein eigener Baustein statt einer Variante - .casparion-numbered-list
   bleibt fuer /situationen/ (sieben Anlaesse), /potenzialbild/ (sechs
   Perspektiven) und /ai-enablement/ (sechs Schritte) unveraendert.

   Der Umbruchpunkt ist 900px und nicht 1024px wie sonst im Theme: Fuenf
   Spuren brauchen mehr Breite als drei. Zwischen 900 und 1024px steht der
   Baustein damit als einziger im Desktop-Raster, waehrend der Rest der
   Seite noch mobil laeuft - das ist gewollt, die Alternative waere ein
   Sprung von einer auf fuenf Spalten erst bei 1024px. */
.casparion-stufen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

@media (min-width: 900px) {
	.casparion-stufen {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 24px;
	}
}

.casparion-stufen__ziffer {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 900;
	font-size: 26px;
	line-height: 1;
	color: var(--wp--preset--color--blau-45);
	margin: 0;
}

/* Blau-45 steht hier auf Mitternachtsblau (gemessene 5,61:1) und nicht
   auf warmem Papier, wo dieselbe Farbe nur 2,85:1 erreicht und im Theme
   schon dreimal durch Blau-70 ersetzt werden musste. Der Abschnitt traegt
   den dunklen Grund, den D2 verlangt; faellt er je auf warmes Papier
   zurueck, muss diese Farbe mitwandern. */

.casparion-stufe--hervorgehoben .casparion-stufen__ziffer {
	font-size: 34px;
	color: var(--wp--preset--color--bernsteingold);
}

/* Der Titel steht auf einem <h3>. theme.json liefert dafuer
   ":root :where(h1,...,h6)" mit (0,1,0) - genau die Spezifitaet einer
   blanken Klasse. Der ":root"-Vorsatz hebt den Baustein auf (0,2,0) und
   macht ihn von der Ladereihenfolge unabhaengig. Die Medienabfragen
   tragen denselben Vorsatz, sonst gewaenne die Grundregel gegen sie -
   derselbe Fehler, der am 15.09. bei D1 die Mobilfassung verschluckt
   hat. */
:root .casparion-stufen__titel {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 21px;
	line-height: 1.1;
	margin: 6px 0 0;
	overflow-wrap: break-word;
}

:root .casparion-stufe--hervorgehoben .casparion-stufen__titel {
	font-size: 25px;
}

/* Der Baustein nennt 16px fuer die Beschreibungen. Gebaut ist
   var(--csp-card-body) - 17px bis 1023px, 18px ab 1024px. Die Tokens
   setzen "Fliesstext nie unter 17px" (web.typeScale.untergrenze), und
   genau diese Stelle wurde am 12.09.2026 fuer die Ziffernlisten schon
   einmal von 16px auf denselben Token zurueckgeholt. Die Mobilfassung
   der Referenz steht ohnehin auf 17px, abweichend ist nur der Desktop.
   Das Verhaeltnis, das der Baustein meint - Beschreibung kleiner als
   Fliesstext -, bleibt erhalten: 18px gegen 20px Koerpertext ab 1024px.
   Nachgemessen ohne Ueberlauf bei 900px (145px je Spalte), 1024px
   (150px), 1280px (202px) und 1440px (234px). */
.casparion-stufen__text {
	font-size: var(--csp-card-body);
	line-height: 1.5;
	color: var(--wp--preset--color--blau-20);
	margin: 8px 0 0;
	hyphens: auto;
	overflow-wrap: break-word;
}

.casparion-stufe--hervorgehoben .casparion-stufen__text {
	color: var(--wp--preset--color--warmes-papier);
}

/* Abschlusssatz des Bausteins. Der zweite Teil des Absatzes, der die drei
   Leistungsbereiche nennt, ist Fliesstext des Abschnitts und steht
   deshalb als eigener .casparion-lead darunter.
   17px nennt der Baustein, gebaut ist var(--csp-body) - derselbe Wert
   bis 1023px, 20px ab 1024px, wie jeder andere Fliesstext der Seite. */
.casparion-stufen__abschluss {
	font-size: var(--csp-body);
	line-height: 1.55;
	color: var(--wp--preset--color--blau-20);
	max-width: 62ch;
	margin: 32px 0 0;
}

@media (min-width: 900px) {
	.casparion-stufen__ziffer {
		font-size: 34px;
	}

	.casparion-stufe--hervorgehoben .casparion-stufen__ziffer {
		font-size: 46px;
		margin-top: -12px;
	}

	:root .casparion-stufen__titel {
		font-size: 24px;
		margin-top: 10px;
	}

	:root .casparion-stufe--hervorgehoben .casparion-stufen__titel {
		font-size: 28px;
	}

	.casparion-stufen__text {
		margin-top: 12px;
	}

	.casparion-stufen__abschluss {
		margin-top: 40px;
	}
}

/* ---------- Bogen · Ergaenzungen zu D2 (E19, 21.09.2026) ----------
   Der Bogen nutzt denselben Baustein wie der abgeloeste Leistungsweg:
   fuenf Spuren, dieselbe Treppe, dieselben Groessen. Neu sind drei
   Zeilen je Etappe - Leitfrage, Verweis auf dem Titel und Mandatsform.

   Warum keine neue Klasse fuer das Raster: Der Baustein aendert sein
   Verhalten nicht. Er traegt mehr Text je Spalte, und genau das war die
   Frage des Handoffs ("bitte pruefen, ob D2 das traegt"). Gemessen im
   Geruest bei 900, 1024, 1280, 1440 und 1920px - kein Ueberlauf, keine
   Spalte unter 145px, die Treppe bleibt lesbar. Die Werte stehen im
   CHANGELOG.

   Die Leitfrage traegt warmes Papier (15,96:1) und fuehrt damit vor der
   Beschreibung in Blau-20 (10,47:1) - dasselbe Verhaeltnis wie zwischen
   Kartenfrage und Kartentext. Sie ist kein D1-Baustein: D1 traegt eine
   Goldlinie und 38px und wuerde eine Spur sprengen. */
.casparion-stufen__frage {
	font-size: var(--csp-card-body);
	line-height: 1.45;
	font-weight: 600;
	color: var(--wp--preset--color--warmes-papier);
	margin: 10px 0 0;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Die Mandatsform ist eine nachgeordnete Angabe (E24: "klein unter den
   Etappen"). Sie steht deshalb in Blau-45 (5,61:1 auf Mitternachtsblau,
   dieselbe Farbe wie die Ziffer) und in der schmalen Schrift - wie
   Fusszeile, Zitatquelle und Dauerangabe auf dunklem Grund. Keine
   Versalien: "Beteiligung" und "Management" sind hier Namen von
   Mandatsformen, keine Auszeichnung. */
.casparion-stufen__form {
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--blau-45);
	margin: 12px 0 0;
}

/* Der Verweis sitzt auf dem Titel der Etappe. Keine Unterstreichung im
   Ruhezustand: Fuenf unterstrichene Versalzeilen nebeneinander lesen
   sich als Liste von Knoepfen, nicht als Treppe. Bei Hover und bei
   Tastaturfokus wird der Verweis sichtbar - letzteres ueber die
   Goldkontur, die im Theme jeden Fokus markiert. */
.casparion-stufen__link {
	color: inherit;
	text-decoration: none;
}

/* Ab dem Spaltenraster steht die Mandatsform aller fuenf Etappen auf
   einer Linie. Ohne diese Regel folgt sie dem Text und sitzt in jeder
   Spur anders hoch - gemessen bei 1440px zwischen 713 und 820px, also
   107px Versatz ueber fuenf Spuren. Die Etappen sind gleichrangig; eine
   ausgefranste Reihe behauptet etwas anderes. Gebaut, indem die Spur
   selbst zur Spalte wird und die Angabe den Rest schiebt.

   Nur ab 900px: Einspaltig haben die Spuren keine gemeinsame Hoehe, an
   der sich etwas ausrichten liesse, und "margin-top: auto" wuerde dort
   den Abstand von 12px verschlucken. */
@media (min-width: 900px) {
	.casparion-stufe {
		display: flex;
		flex-direction: column;
	}

	.casparion-stufe .casparion-stufen__form {
		margin-top: auto;
		padding-top: 12px;
	}
}

.casparion-stufen__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.casparion-stufen__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--bernsteingold);
	outline-offset: 3px;
}

/* Der Abschlusssatz traegt seit dem 21.09. einen Verweis auf das
   Potenzialbild. Er erbt Blau-20 vom Absatz; ".casparion-textlink" setzt
   "color: inherit" und unterstreicht. */

/* ---------- Quellenangabe (Einordnung auf /nachfolge/) ----------
   Der Handoff verlangt sie sichtbar, in kleinerer Schrift und ohne
   Verlinkung (Teil D). Sie steht hinter der Aussage, die sie belegt,
   nicht als Fussnote am Abschnittsende - so bleibt zuordenbar, welche
   Zahl woher kommt.

   17px waere hier die Untergrenze fuer Fliesstext; die Quellenangabe ist
   keiner, sondern eine Herkunftsangabe wie die Zitatquelle (13px) oder
   der Card-Tag (12px). Gebaut sind 15px auf einem Absatz, der ab 1024px
   20px traegt - also deutlich kleiner, ohne winzig zu werden.
   Blau-70 auf warmem Papier: 6,24:1.

   Eigene Zeile, nicht im Satz. Die erste Fassung setzte die Angabe
   inline hinter die Aussage; gebaut und angesehen las sich daraus
   "... 55 Jahre oder aelter. KfW Research, Nachfolge-Monitoring
   Mittelstand, Januar 2026 In den Nachfolgeberatungen ..." - die Quelle
   stand mitten im naechsten Satz. Gefunden durch Hinsehen, nicht durch
   Nachdenken. Jetzt traegt jede Aussage ihren eigenen Absatz und ihre
   Angabe darunter; zuordenbar bleibt es dadurch genauso. */
.casparion-quelle {
	display: block;
	font-family: var(--wp--preset--font-family--barlow-condensed);
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--blau-70);
	margin: 8px 0 0;
}

.casparion-section--dark .casparion-quelle {
	color: var(--wp--preset--color--blau-45);
}

/* ---------- V4 · Kreislauf der ungeklaerten Nachfolge ----------
   Startseite, Abschnitt 6 (#nachfolge). Ersetzt seit dem 16.09.2026 die
   Textkette aus D4. Die trug hier seit E15 nur noch ruhend und ist mit
   dem Einbau entfallen - samt ihrer Regeln fuer Kette, Stationen,
   Chevrons, Rueckkehrzeile und Ansatzpunkt.

   Die Grafiken tragen ihre Groessen selbst: "width: 720px" fuer den Ring
   und "width: 320px" fuer die Schleife, beide mit "max-width: 100%".
   Damit stehen sie 1:1 zu ihren Benutzereinheiten, und 17 Einheiten sind
   17 Pixel. Die zweite Fassung der Spezifikation liess sie mit
   "width: 100%" wachsen - gemessen trug der Ring seine 17px erst ab etwa
   1236px Viewport, bei 760px waren es 10,9px.

   Umgeschaltet wird am INHALTSBEREICH, nicht am Viewport. Das ist keine
   Spitzfindigkeit: Der seitliche Rand springt bei 480px und 1024px von
   24 auf 40 auf 88px, eine Viewport-Abfrage bildet den verfuegbaren
   Platz deshalb nicht sauber ab. 720px Inhalt entsprechen unterhalb von
   1024px etwa 800px Viewport - aber die Regel ist der Inhalt, und eine
   Container-Abfrage sagt genau das. Aendert sich --csp-side, wandert der
   Umschaltpunkt von selbst mit.

   Der Container sitzt auf dem Baustein selbst und nicht auf
   ".casparion-section__inner": Dort wuerde die Groessen-Eindaemmung den
   ganzen Abschnitt betreffen, hier nur diese eine Grafik.

   Ohne Unterstuetzung fuer Container-Abfragen bleibt es bei der
   Schleife. Sie traegt auf jeder Breite, nur der Ring braucht Platz -
   der Rueckfall ist also der lesbare Fall, nicht der kaputte. */
.casparion-kreislauf {
	container-type: inline-size;
}

.casparion-kreislauf__grafik--breit {
	display: none;
}

.casparion-kreislauf__grafik--schmal {
	display: block;
}

@container (min-width: 720px) {
	.casparion-kreislauf__grafik--breit {
		display: block;
	}

	.casparion-kreislauf__grafik--schmal {
		display: none;
	}
}