/*
 * kuscheleck-design – Version 0.5.0
 * -------------------------------------------------------------------------
 * T99: Layout-Regeln fuer die ke-*-Klassen der Paket-4/6/7-Startseite,
 * der Paket-9-Seite 14 und der Paket-10-Seite 12. Die Tokens aus 0.3.0
 * bleiben erhalten; die neuen Regeln folgen darunter. Universelles
 * :focus-visible und prefers-reduced-motion ergaenzen die Barrierefreiheit.
 *
 * Design-Tokens fuer Entwurf 3a „Gefuehrte Anfrage" (T97, Paket 2).
 *
 * Grundlage:
 *   docs/PLAN_T95_REDESIGN.md, Baustein 3 und Baustein 5 Paket 2.
 *   design-src/design_handoff_3a_entpackt/design_handoff_3a/README.md.
 *   docs/PLAN_T95_REDESIGN_NACHBESSERUNG_2.md, Punkt 1 (Panel-Zuschnitt).
 *
 * Was hier steht:
 *   Ausschliesslich Tokens als CSS-Variablen (Farbpalette, Typografie,
 *   Abstaende, Radien, Elementhoehen) plus die einzige heute schon
 *   verbindliche Layoutregel: der 4:5-Zuschnitt fuer `.ke-panel .ke-hero`
 *   mit dokumentiertem Rueckweg auf 1,6:1. Sonst keine Layout-Regeln —
 *   die kommen mit den Paketen 3 und 4.
 *
 * Warum es visuell nichts aendert:
 *   Die Kadence-Ausgabe traegt keine `--ke-*`-Klassen; ohne Verbraucher
 *   greifen die Variablen ins Leere. Erst die `ke-*`-Klassen aus Paket 3
 *   ziehen die Tokens an. Diese Datei ist bewusst rein deklarativ.
 *
 * Bei jeder inhaltlichen Aenderung `ASSETS_VERSION` in kuscheleck-design.php
 * hochzaehlen.
 */

:root {
	/*
	 * Farbpalette 3a
	 * ---------------------------------------------------------------------
	 * Grund und Panels: gedeckte Erdtoene. Leitakzent Salbeigruen.
	 * Alle Farben aus 3a-README §Kopfzeile bis §Fusszeile und
	 * PLAN_T95_REDESIGN.md Baustein 3 §A–§G.
	 */

	/* Flaechen */
	--ke-color-ground:            #f6f2e9;  /* Seitengrund */
	--ke-color-panel:             #eae5d8;  /* rechte Panel-Spalte */
	--ke-color-card:              #fbf8f1;  /* Rechnungs- und Raum-Karten */
	--ke-color-card-alt:          #eef1e7;  /* Bestaetigungsleiste, Monat gewaehlt */
	--ke-color-dark:              #2f4426;  /* Fusszeile, Dunkelblock */
	--ke-color-band:              #3f5a33;  /* Frageband, aktiver Schritt, Leitakzent */

	/* Text */
	--ke-color-text:              #3d382f;  /* Grundtext */
	--ke-color-text-strong:       #14140f;  /* Kalender frei/gewaehlt Zahlen */
	--ke-color-text-muted:        #4f4a41;  /* Absaetze, Betragsuntertexte */
	--ke-color-text-quiet:        #5f5949;  /* Eyebrow, Metatexte */
	--ke-color-text-disabled:     #8b8578;  /* belegte Kalendertage */

	/* Text auf dunklem Grund */
	--ke-color-on-dark:           #e7ebe0;  /* Frageband-Grundtext */
	--ke-color-on-dark-quiet:     #cdd5c4;  /* Frageband-Untertext */
	--ke-color-on-dark-footer:    #c2ccb8;  /* Fusszeile */

	/* Rahmen und Trennlinien */
	--ke-color-border:            #e0dacd;  /* Hauptrahmen, Trennlinien */
	--ke-color-border-warm:       #ddd7c7;  /* Karten-Rahmen */
	--ke-color-border-soft:       #ece7da;  /* Positionsunterkanten */
	--ke-color-border-cool:       #d3dbc9;  /* Bestaetigungsleiste */
	--ke-color-border-band:       #7b8f70;  /* Sekundaerknopf im Frageband */
	--ke-color-border-month:      #d5cfbf;  /* Monat ungewaehlt */
	--ke-color-divider-strong:    #c8c1b1;  /* Zwischenstriche Schrittanzeige */

	/* Schrittanzeige */
	--ke-color-step-inactive-bg:  #e8e3d5;
	--ke-color-step-inactive-fg:  #4f4a41;

	/* Kalender – vier Zustaende */
	--ke-color-cal-free-bg:       #f1f3ea;
	--ke-color-cal-free-fg:       #14140f;
	--ke-color-cal-free-border:   #e0dacd;

	--ke-color-cal-busy-bg:       #eceae2;
	--ke-color-cal-busy-fg:       #8b8578;
	--ke-color-cal-busy-border:   #e0dacd;

	--ke-color-cal-picked-bg:     #3f5a33;
	--ke-color-cal-picked-fg:     #f6f2e9;
	--ke-color-cal-picked-border: #3f5a33;

	--ke-color-cal-range-bg:      #dde5d6;
	--ke-color-cal-range-fg:      #14140f;
	--ke-color-cal-range-border:  #dde5d6;

	/*
	 * Typografie
	 * ---------------------------------------------------------------------
	 * Instrument Serif fuer Ueberschriften und Betragswerte, Work Sans fuer
	 * alles andere. Beide werden in Paket 1 lokal aus
	 * `wp-content/plugins/kuscheleck-design/assets/fonts/` ausgeliefert;
	 * die Fallback-Kette fuellt die Zeit dazwischen und die Zeit ohne JS.
	 */
	--ke-font-serif:              "Instrument Serif", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
	--ke-font-sans:               "Work Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

	--ke-weight-regular:          400;
	--ke-weight-semibold:         600;

	/* Ueberschriftskala (aus 3a-README §Der gefuehrte Weg und §Frageband) */
	--ke-size-h1:                 54px;  /* H1 Startseite */
	--ke-size-sum:                40px;  /* Summenzeile Rechnungskarte */
	--ke-size-h2:                 36px;  /* zwei H2 Eignungsspalten */
	--ke-size-band:               32px;  /* Frageband „Noch eine Frage offen?" */
	--ke-size-phone:              28px;  /* Telefonkarte-Nummer */
	--ke-size-brand:              26px;  /* Wortmarke */

	/* Grundskala (Work Sans) */
	--ke-size-lead:               19px;  /* Fliesstext, Leselayout */
	--ke-size-body:               18px;  /* Standard-Absatz, Menue, Legende, Bestaetigung */
	--ke-size-small:              17px;  /* Bestaetigungsschaltflaeche, Kartenzeilen, Menue-Alternate */
	--ke-size-micro:              16px;  /* Hinweiszeilen, Card-Text, Legende-Untertext */
	--ke-size-price:              15px;  /* Nachtpreis in der Monatswahl, Schrittpille */
	--ke-size-eyebrow:            14px;  /* Uppercase-Eyebrow, Schrittueberschrift */

	/* Zeilenhoehen */
	--ke-lh-tight:                1.06;  /* H1 */
	--ke-lh-heading:              1.1;   /* H2 */
	--ke-lh-body:                 1.6;   /* Card-Text */
	--ke-lh-lead:                 1.65;  /* Absatz-Fliesstext */
	--ke-lh-list:                 1.75;  /* Eignungslisten */

	/* Laufweiten */
	--ke-ls-h1:                   -0.02em;
	--ke-ls-eyebrow:              0.14em;

	/*
	 * Abstaende
	 * ---------------------------------------------------------------------
	 * Verwendete Werte aus 3a-README und Baustein 3.
	 */
	--ke-space-1:                  4px;
	--ke-space-2:                  8px;
	--ke-space-3:                 10px;
	--ke-space-4:                 12px;
	--ke-space-5:                 14px;
	--ke-space-6:                 20px;
	--ke-space-7:                 22px;
	--ke-space-8:                 24px;
	--ke-space-9:                 26px;
	--ke-space-10:                28px;
	--ke-space-11:                30px;
	--ke-space-12:                32px;
	--ke-space-13:                36px;
	--ke-space-14:                38px;
	--ke-space-15:                40px;
	--ke-space-16:                44px;
	--ke-space-17:                48px;

	/*
	 * Radien
	 * ---------------------------------------------------------------------
	 * Durchgehend 3 px. Pillen (Schrittanzeige) 100 px. Kein weiterer Radius.
	 */
	--ke-radius:                  3px;
	--ke-radius-pill:             100px;

	/*
	 * Elementhoehen und -groessen
	 * ---------------------------------------------------------------------
	 * Absolute Groessen aus 3a-README, wo eine Alterszielgruppe die
	 * Mindestflaeche vorgibt (Fingertreffer, Lesbarkeit).
	 */
	--ke-header-h:                76px;  /* klebende Kopfzeile */
	--ke-btn-h:                   56px;  /* alle Handlungs-Schaltflaechen */
	--ke-btn-h-brand:             52px;  /* Kopfzeilen-Telefonknopf, Kalender-Detail */
	--ke-cal-cell:                52px;  /* Kalenderzelle Tag */
	--ke-month-cell:              76px;  /* Monatswahlfeld */
	--ke-panel-w:                400px;  /* rechtes Panel */
	--ke-panel-hero-h:            210px; /* Panel-Foto, alt: 1,6:1 Querformat */

	/*
	 * Sticky-Kopfzeile
	 */
	--ke-sticky-bg:               rgba(246, 242, 233, 0.94);
	--ke-sticky-blur:             blur(12px);
	--ke-sticky-z:                20;
}


/*
 * Panel-Zuschnitt (NB2 Punkt 1)
 * ---------------------------------------------------------------------
 * Aktueller Stand: Hochkant 4:5, Bild 101. Zuschnittsverlust 6,25 % gegen
 * das originale 3:4. Der Rueckweg auf 1,6:1 Querformat bleibt daneben als
 * auskommentierter Alternativblock stehen — er darf jederzeit ohne
 * Redesign-Prozess umgestellt werden, sobald eine passende Querformat-
 * Aufnahme vorliegt (Bildslot `ke-hero` bleibt, nur `src`/`alt` und die
 * Regel aendern sich; `ASSETS_VERSION` dabei hochzaehlen).
 *
 * Aus PLAN_T95_REDESIGN_NACHBESSERUNG_2.md Punkt 1 uebernommen.
 */

.ke-panel .ke-hero {
	aspect-ratio: 4 / 5;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
}

/* Umstellung auf Querformat 336x210 (1,6:1) —
   dazu die Regel oben ersetzen durch:
.ke-panel .ke-hero {
	aspect-ratio: 336 / 210;
	width: 100%;
	max-height: 210px;
	object-fit: cover;
}
*/


/* =======================================================================
 * T99, Paket 4/6/7/9/10 — Layout-Regeln
 * =======================================================================
 *
 * Die Regeln bleiben ohne Wirkung, solange die Seiten kein ke-*-Markup
 * tragen (Aufgaben 11, 3 im T99-Prompt). Sichtprüfung: Frontend visuell
 * unverändert, solange kein Container mit einer ke-*-Klasse existiert.
 * Die Regeln folgen strikt dem 3a-README §Screens 1–7 und PLAN_T95_
 * REDESIGN.md Baustein 3. Kontrast-Korrekturen aus NB1 Punkt 5 (Rahmen
 * `#b3a988` fuer Monatsknopf ungewaehlt, `#a4b39a` fuer Frageband-
 * Sekundaerknopf) sind einprogrammiert.
 */

/*
 * H1 und Absaetze auf allen ke-*-Seiten.
 */
.ke-h1 {
	font-family: var(--ke-font-serif);
	font-weight: var(--ke-weight-regular);
	font-size: var(--ke-size-h1);
	line-height: var(--ke-lh-tight);
	letter-spacing: var(--ke-ls-h1);
	color: var(--ke-color-text);
	max-width: 22ch;
	text-wrap: pretty;
	margin: 0 0 var(--ke-space-8);
}

.ke-lead {
	font-family: var(--ke-font-sans);
	font-weight: var(--ke-weight-regular);
	font-size: var(--ke-size-lead);
	line-height: var(--ke-lh-lead);
	color: var(--ke-color-text-muted);
	max-width: 56ch;
	text-wrap: pretty;
	margin: 0 0 var(--ke-space-11);
}

.ke-abschnitts-titel {
	font-family: var(--ke-font-serif);
	font-weight: var(--ke-weight-regular);
	font-size: var(--ke-size-h2);
	line-height: var(--ke-lh-heading);
	color: var(--ke-color-text);
	margin: 0 0 var(--ke-space-6);
}


/*
 * Paket 4 — Der geführte Weg (Startseite Teil 2)
 * ---------------------------------------------------------------------
 */

.ke-weg {
	background: var(--ke-color-ground);
	color: var(--ke-color-text);
	font-family: var(--ke-font-sans);
	font-size: var(--ke-size-body);
	line-height: var(--ke-lh-body);
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ke-panel-w);
	gap: 0;
	max-width: 1180px;
	margin: 0 auto;
}

.ke-weg-fuehrung {
	padding: var(--ke-space-16) var(--ke-space-15) var(--ke-space-17);
}

.ke-schritte {
	display: flex;
	align-items: center;
	gap: var(--ke-space-3);
	margin-bottom: var(--ke-space-11);
}

.ke-schritte-pille {
	display: inline-flex;
	align-items: center;
	border-radius: var(--ke-radius-pill);
	padding: 9px 16px;
	font-size: var(--ke-size-price);
	font-weight: var(--ke-weight-semibold);
	background: var(--ke-color-step-inactive-bg);
	color: var(--ke-color-step-inactive-fg);
	white-space: nowrap;
}

.ke-schritte-pille--aktiv {
	background: var(--ke-color-band);
	color: var(--ke-color-ground);
}

.ke-schritte-strich {
	flex: 0 0 26px;
	height: 1px;
	background: var(--ke-color-divider-strong);
}

.ke-schritt-eyebrow {
	font-family: var(--ke-font-sans);
	font-size: var(--ke-size-eyebrow);
	font-weight: var(--ke-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ke-ls-eyebrow);
	color: var(--ke-color-text-quiet);
	margin: 0 0 var(--ke-space-6);
}

.ke-kalender .ke-monate,
.ke-kalender .ke-monate {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ke-space-3);
	margin-bottom: var(--ke-space-6);
}

.ke-monate {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ke-space-3);
	margin-bottom: var(--ke-space-6);
}

.ke-monat {
	all: unset;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: var(--ke-month-cell);
	border: 1px solid #b3a988;       /* NB1 Punkt 5 – von #d5cfbf auf 3:1 gehoben */
	background: var(--ke-color-card);
	border-radius: var(--ke-radius);
	transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.ke-monat--aktiv {
	border: 2px solid var(--ke-color-band);
	background: var(--ke-color-card-alt);
}

.ke-monat-name {
	font-size: var(--ke-size-body);
	color: var(--ke-color-text);
	line-height: 1;
}

.ke-monat-preis {
	font-size: var(--ke-size-price);
	color: var(--ke-color-text-muted);
	margin-top: 4px;
	line-height: 1;
}

.ke-wochentage {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--ke-space-2);
	font-size: var(--ke-size-eyebrow);
	color: var(--ke-color-text-quiet);
	text-transform: uppercase;
	letter-spacing: var(--ke-ls-eyebrow);
	margin-bottom: 4px;
	text-align: center;
}

.ke-tage {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: var(--ke-space-2);
	margin-bottom: var(--ke-space-6);
}

.ke-tag {
	all: unset;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--ke-cal-cell);
	font-size: var(--ke-size-small);
	border-radius: var(--ke-radius);
	transition: background-color 120ms ease-out;
}

.ke-tag--leer {
	visibility: hidden;
	cursor: default;
}

.ke-tag--frei {
	background: var(--ke-color-cal-free-bg);
	color: var(--ke-color-cal-free-fg);
	border: 1px solid var(--ke-color-cal-free-border);
}

.ke-tag--belegt {
	background: var(--ke-color-cal-busy-bg);
	color: var(--ke-color-cal-busy-fg);
	border: 1px solid var(--ke-color-cal-busy-border);
	cursor: not-allowed;
	text-decoration: line-through;
}

.ke-tag--gewaehlt {
	background: var(--ke-color-cal-picked-bg);
	color: var(--ke-color-cal-picked-fg);
	border: 2px solid var(--ke-color-cal-picked-border);
	font-weight: var(--ke-weight-semibold);
}

.ke-tag--bereich {
	background: #c3d1b8;               /* NB1 Punkt 5 – Grundwechsel deutlicher */
	color: var(--ke-color-cal-range-fg);
	border: 1px solid #c3d1b8;
}

.ke-legende {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ke-space-7);
	font-size: var(--ke-size-micro);
	color: var(--ke-color-text-muted);
	margin-bottom: var(--ke-space-6);
	align-items: center;
}

.ke-legende-eintrag {
	display: inline-flex;
	align-items: center;
	gap: var(--ke-space-2);
}

.ke-legende-swatch {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: var(--ke-radius);
	border: 1px solid var(--ke-color-cal-free-border);
}

.ke-legende-swatch--frei {
	background: var(--ke-color-cal-free-bg);
}

.ke-legende-swatch--belegt {
	background: var(--ke-color-cal-busy-bg);
}

.ke-legende-regel {
	color: var(--ke-color-text-quiet);
}

.ke-fehler {
	color: #7a2f2f;
	background: #f6ecec;
	border: 1px solid #d9baba;
	border-radius: var(--ke-radius);
	padding: var(--ke-space-4) var(--ke-space-6);
	font-size: var(--ke-size-micro);
	margin-bottom: var(--ke-space-6);
}

.ke-fehler[hidden] {
	display: none;
}

.ke-bestaetigung {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ke-space-8);
	padding: var(--ke-space-7) var(--ke-space-9);
	background: var(--ke-color-card-alt);
	border: 1px solid var(--ke-color-border-cool);
	border-radius: var(--ke-radius);
}

.ke-bestaetigung-label {
	display: block;
	font-size: var(--ke-size-eyebrow);
	font-weight: var(--ke-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ke-ls-eyebrow);
	color: var(--ke-color-text-quiet);
	margin-bottom: 4px;
}

.ke-bestaetigung-daten {
	font-size: var(--ke-size-body);
	color: var(--ke-color-text);
	font-weight: var(--ke-weight-semibold);
}

.ke-weiter {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ke-btn-h);
	padding: 0 var(--ke-space-10);
	background: var(--ke-color-band);
	color: var(--ke-color-ground);
	font-size: var(--ke-size-body);
	font-weight: var(--ke-weight-semibold);
	border-radius: var(--ke-radius);
	white-space: nowrap;
	transition: background-color 120ms ease-out;
}

.ke-weiter:hover {
	background: var(--ke-color-dark);
}


/*
 * Paket 4 — Rechtes Panel (mitlaufende Zusammenfassung)
 * ---------------------------------------------------------------------
 */

.ke-panel {
	background: var(--ke-color-panel);
	border-left: 1px solid var(--ke-color-border);
	padding: var(--ke-space-13) var(--ke-space-12);
}

@media (min-width: 1024px) {
	.ke-panel {
		position: sticky;
		top: 96px;
		align-self: start;
	}
}

.ke-panel-label {
	font-size: var(--ke-size-eyebrow);
	font-weight: var(--ke-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--ke-ls-eyebrow);
	color: var(--ke-color-text-quiet);
	margin: 0 0 var(--ke-space-4);
}

.ke-panel-hero-wrap {
	margin: 0 0 var(--ke-space-6);
}

.ke-rechnung,
.ke-rechenkarte-inner {
	background: var(--ke-color-card);
	border: 1px solid var(--ke-color-border-warm);
	border-radius: var(--ke-radius);
	padding: var(--ke-space-7) var(--ke-space-8);
	margin-bottom: var(--ke-space-6);
}

.ke-rechnung-titel {
	font-family: var(--ke-font-serif);
	font-weight: var(--ke-weight-regular);
	font-size: 24px;
	line-height: var(--ke-lh-heading);
	color: var(--ke-color-text);
	margin: 0 0 var(--ke-space-4);
}

.ke-rechnung-positionen {
	margin: 0;
	padding: 0;
}

.ke-rechnung-zeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ke-space-4);
	padding: 10px 0;
	border-bottom: 1px solid var(--ke-color-border-soft);
	font-size: var(--ke-size-small);
}

.ke-rechnung-zeile dt {
	color: var(--ke-color-text-muted);
	margin: 0;
}

.ke-rechnung-zeile dd {
	font-weight: var(--ke-weight-semibold);
	color: var(--ke-color-text);
	margin: 0;
}

.ke-rechnung-detail {
	display: block;
	font-size: var(--ke-size-micro);
	color: var(--ke-color-text-quiet);
	font-weight: var(--ke-weight-regular);
}

.ke-rechnung-summe {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: var(--ke-space-6) 0 0;
}

.ke-rechnung-summe-label {
	font-size: var(--ke-size-body);
	font-weight: var(--ke-weight-semibold);
	color: var(--ke-color-text);
}

.ke-rechnung-summe-wert {
	font-family: var(--ke-font-serif);
	font-size: var(--ke-size-sum);
	color: var(--ke-color-text);
	line-height: 1;
}

.ke-rechnung-hinweis,
.ke-rechnung-noscript {
	font-size: var(--ke-size-micro);
	color: var(--ke-color-text-muted);
	margin: var(--ke-space-4) 0 0;
}

.ke-beruhigung,
.ke-tel-karte,
.ke-kontakt-karte-inner {
	background: var(--ke-color-card);
	border: 1px solid var(--ke-color-border-warm);
	border-radius: var(--ke-radius);
	padding: var(--ke-space-7) var(--ke-space-8);
	margin-bottom: var(--ke-space-6);
}

.ke-beruhigung-titel,
.ke-tel-karte-titel,
.ke-kontakt-karte-titel {
	font-size: var(--ke-size-small);
	font-weight: var(--ke-weight-semibold);
	color: var(--ke-color-text);
	margin: 0 0 var(--ke-space-2);
}

.ke-beruhigung-text {
	font-size: var(--ke-size-micro);
	color: var(--ke-color-text-muted);
	margin: 0;
}

.ke-tel-karte-nummer,
.ke-kontakt-karte-nummer {
	font-family: var(--ke-font-serif);
	font-size: var(--ke-size-phone);
	margin: var(--ke-space-2) 0 var(--ke-space-2);
}

.ke-tel-karte-nummer a,
.ke-kontakt-karte-nummer a {
	color: var(--ke-color-text);
	text-decoration: none;
}

.ke-tel-karte-zeiten,
.ke-kontakt-karte-zeiten {
	font-size: var(--ke-size-micro);
	color: var(--ke-color-text-muted);
	margin: 0;
}


/*
 * Paket 6 — Räume-Vierspalter, Eignung, Frageband
 * ---------------------------------------------------------------------
 */

.ke-raeume {
	padding: var(--ke-space-16) var(--ke-space-15) 0;
	border-top: 1px solid var(--ke-color-border);
	max-width: 1180px;
	margin: 0 auto;
}

.ke-raeume-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ke-space-5);
}

.ke-raum {
	display: flex;
	flex-direction: column;
}

.ke-raum-bild img {
	width: 100%;
	height: 270px;
	object-fit: cover;
	object-position: center;
	border-radius: var(--ke-radius);
	margin-bottom: var(--ke-space-4);
}

.ke-raum-titel {
	font-family: var(--ke-font-sans);
	font-weight: var(--ke-weight-semibold);
	font-size: var(--ke-size-lead);
	color: var(--ke-color-text);
	margin: 0 0 var(--ke-space-2);
}

.ke-raum-text {
	font-size: var(--ke-size-micro);
	line-height: var(--ke-lh-body);
	color: var(--ke-color-text-muted);
	margin: 0;
}

.ke-eignung {
	padding: var(--ke-space-8) var(--ke-space-15) 0;
	border-top: 1px solid var(--ke-color-border);
	margin-top: var(--ke-space-16);
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}

.ke-eignung-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ke-space-15);
}

.ke-eignung-titel {
	font-family: var(--ke-font-serif);
	font-weight: var(--ke-weight-regular);
	font-size: var(--ke-size-h2);
	line-height: var(--ke-lh-heading);
	color: var(--ke-color-text);
	margin: 0 0 var(--ke-space-6);
}

.ke-eignung-liste {
	padding-left: var(--ke-space-7);
	margin: 0;
	font-size: var(--ke-size-body);
	line-height: var(--ke-lh-list);
	color: var(--ke-color-text);
}

.ke-eignung-liste li {
	margin-bottom: var(--ke-space-2);
}

.ke-frageband {
	margin-top: var(--ke-space-16);
	padding: var(--ke-space-14) var(--ke-space-15);
	background: var(--ke-color-band);
	color: var(--ke-color-on-dark);
}

.ke-frageband-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ke-space-11);
	max-width: 1180px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.ke-frageband-titel {
	font-family: var(--ke-font-serif);
	font-weight: var(--ke-weight-regular);
	font-size: var(--ke-size-band);
	color: var(--ke-color-ground);
	margin: 0 0 var(--ke-space-2);
}

.ke-frageband-untertitel {
	font-size: var(--ke-size-small);
	color: var(--ke-color-on-dark-quiet);
	margin: 0;
}

.ke-frageband-aktionen {
	display: flex;
	gap: var(--ke-space-4);
	flex-wrap: wrap;
}

.ke-frageband-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ke-btn-h);
	padding: 0 var(--ke-space-10);
	font-size: var(--ke-size-body);
	font-weight: var(--ke-weight-semibold);
	border-radius: var(--ke-radius);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 120ms ease-out;
}

.ke-frageband-knopf--hell {
	background: var(--ke-color-ground);
	color: var(--ke-color-dark);
}

.ke-frageband-knopf--hell:hover {
	background: #ede8d9;
}

.ke-frageband-knopf--dunkel {
	background: transparent;
	color: var(--ke-color-on-dark);
	border: 1px solid #a4b39a;         /* NB1 Punkt 5 – von #7b8f70 auf 3:1 gehoben */
}


/*
 * Paket 7 — Sechs häufige Fragen (Startseite)
 * ---------------------------------------------------------------------
 */

.ke-faq {
	padding: var(--ke-space-16) var(--ke-space-15) 0;
	border-top: 1px solid var(--ke-color-border);
	max-width: 960px;
	margin: 0 auto;
}

.ke-faq-titel {
	font-family: var(--ke-font-serif);
	font-weight: var(--ke-weight-regular);
	font-size: var(--ke-size-h2);
	color: var(--ke-color-text);
	margin: 0 0 var(--ke-space-4);
}

.ke-faq-lead {
	font-size: var(--ke-size-body);
	color: var(--ke-color-text-muted);
	margin: 0 0 var(--ke-space-11);
}

.ke-faq-item {
	border-top: 1px solid var(--ke-color-border);
	padding: var(--ke-space-6) 0;
}

.ke-faq-item:last-of-type {
	border-bottom: 1px solid var(--ke-color-border);
}

.ke-faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ke-space-6);
}

.ke-faq-item summary::-webkit-details-marker {
	display: none;
}

.ke-faq-item summary::after {
	content: "+";
	font-size: 24px;
	color: var(--ke-color-text-quiet);
	line-height: 1;
	transition: transform 120ms ease-out;
}

.ke-faq-item[open] summary::after {
	content: "–";
}

.ke-faq-frage {
	font-family: var(--ke-font-sans);
	font-size: var(--ke-size-lead);
	font-weight: var(--ke-weight-semibold);
	color: var(--ke-color-text);
	margin: 0;
}

.ke-faq-item p {
	font-size: var(--ke-size-body);
	line-height: var(--ke-lh-body);
	color: var(--ke-color-text);
	margin: var(--ke-space-4) 0 0;
	max-width: 64ch;
}


/*
 * Paket 9 — ke-rechenkarte (Seite 14 Zweit-Einstieg)
 * ---------------------------------------------------------------------
 * Nutzt dieselben inneren Klassen wie .ke-rechnung; die Wrapper-Klasse
 * .ke-rechenkarte gibt der Seite 14 einen eigenen Abschnittsrahmen.
 */

.ke-rechenkarte {
	padding: var(--ke-space-11) 0;
}

.ke-rechenkarte-inner {
	background: var(--ke-color-card);
	border: 1px solid var(--ke-color-border-warm);
	border-radius: var(--ke-radius);
	padding: var(--ke-space-8) var(--ke-space-8);
}

/* Positionsliste (Preise auf einen Blick) auf Seite 14 */

.ke-positionsliste {
	margin: 0;
}

.ke-positionsliste-zeile {
	display: flex;
	justify-content: space-between;
	gap: var(--ke-space-4);
	padding: var(--ke-space-4) 0;
	border-bottom: 1px solid var(--ke-color-border-soft);
	font-size: var(--ke-size-body);
}

.ke-positionsliste-zeile dt {
	color: var(--ke-color-text-muted);
	margin: 0;
}

.ke-positionsliste-zeile dd {
	color: var(--ke-color-text);
	font-weight: var(--ke-weight-semibold);
	margin: 0;
}

.ke-schritte-liste {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: none;
}

.ke-schritte-liste li {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: var(--ke-space-4);
	padding: var(--ke-space-4) 0;
	border-bottom: 1px solid var(--ke-color-border-soft);
	font-size: var(--ke-size-body);
	line-height: var(--ke-lh-body);
}

.ke-schritte-liste li:last-child {
	border-bottom: none;
}

.ke-schritt-nummer {
	font-family: var(--ke-font-serif);
	font-size: 28px;
	color: var(--ke-color-band);
	line-height: 1;
}

.ke-schritt-text {
	color: var(--ke-color-text-muted);
}

.ke-hinweis {
	font-size: var(--ke-size-micro);
	color: var(--ke-color-text-muted);
	margin: var(--ke-space-6) 0 0;
}


/*
 * Paket 10 — ke-ehrlich (Seite 12 Ehrlichkeitsblock)
 * ---------------------------------------------------------------------
 */

.ke-ehrlich {
	padding: var(--ke-space-11) 0 var(--ke-space-16);
	border-top: 1px solid var(--ke-color-border);
	border-bottom: 1px solid var(--ke-color-border);
	max-width: 1180px;
	margin: 0 auto;
}

.ke-ehrlich-lead {
	font-size: var(--ke-size-lead);
	color: var(--ke-color-text-muted);
	margin: 0 0 var(--ke-space-11);
	max-width: 56ch;
}

.ke-ehrlich-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ke-space-15);
}

.ke-ehrlich-titel {
	font-family: var(--ke-font-sans);
	font-size: var(--ke-size-lead);
	font-weight: var(--ke-weight-semibold);
	color: var(--ke-color-text);
	margin: 0 0 var(--ke-space-4);
	text-transform: none;
}

.ke-ehrlich-liste {
	padding-left: var(--ke-space-7);
	margin: 0;
	font-size: var(--ke-size-body);
	line-height: var(--ke-lh-list);
	color: var(--ke-color-text);
}

.ke-ehrlich-liste li {
	margin-bottom: var(--ke-space-2);
}


/*
 * Paket 10 — Räume-Detail, Garten, Details, Ankommen, „Für wen"
 * ---------------------------------------------------------------------
 */

.ke-raeume-detail,
.ke-garten,
.ke-details,
.ke-ankommen,
.ke-fuer-wen {
	padding: var(--ke-space-16) 0 var(--ke-space-11);
	max-width: 1180px;
	margin: 0 auto;
}

.ke-raum-detail {
	padding: var(--ke-space-11) 0;
	border-top: 1px solid var(--ke-color-border);
}

.ke-raum-detail:first-of-type {
	border-top: none;
}

.ke-raum-detail-titel {
	font-family: var(--ke-font-serif);
	font-weight: var(--ke-weight-regular);
	font-size: 28px;
	color: var(--ke-color-text);
	margin: 0 0 var(--ke-space-4);
}

.ke-raum-detail p {
	font-size: var(--ke-size-body);
	line-height: var(--ke-lh-body);
	color: var(--ke-color-text);
	margin: 0 0 var(--ke-space-6);
	max-width: 64ch;
}

.ke-raum-galerie img,
.ke-garten-galerie img,
.ke-details-galerie img,
.ke-raum-einzelbild img {
	object-fit: cover;
	object-position: center;
	border-radius: var(--ke-radius);
}

.ke-cta-zeile {
	margin: var(--ke-space-11) 0 0;
}

.ke-cta-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ke-btn-h);
	padding: 0 var(--ke-space-10);
	background: var(--ke-color-band);
	color: var(--ke-color-ground);
	font-size: var(--ke-size-body);
	font-weight: var(--ke-weight-semibold);
	border-radius: var(--ke-radius);
	text-decoration: none;
	transition: background-color 120ms ease-out;
}

.ke-cta-knopf:hover {
	background: var(--ke-color-dark);
}


/*
 * Responsive-Verhalten (aus 3a-README §Responsive)
 * ---------------------------------------------------------------------
 */

@media (max-width: 1199px) {
	.ke-weg {
		grid-template-columns: minmax(0, 1fr) 340px;
	}
}

@media (max-width: 1023px) {
	.ke-weg {
		grid-template-columns: 1fr;
	}
	.ke-panel {
		position: static;
		border-left: none;
		border-top: 1px solid var(--ke-color-border);
	}
	.ke-raeume-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ke-eignung-grid,
	.ke-ehrlich-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.ke-weg-fuehrung,
	.ke-raeume,
	.ke-eignung,
	.ke-frageband,
	.ke-faq,
	.ke-ehrlich,
	.ke-raeume-detail,
	.ke-garten,
	.ke-details,
	.ke-ankommen,
	.ke-fuer-wen {
		padding-left: 18px;
		padding-right: 18px;
	}
	.ke-monate {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ke-tage {
		gap: 6px;
	}
	.ke-tag {
		height: 44px;
	}
	.ke-bestaetigung {
		flex-direction: column;
		align-items: stretch;
	}
	.ke-weiter,
	.ke-cta-knopf,
	.ke-frageband-knopf {
		width: 100%;
	}
	.ke-h1 {
		font-size: 36px;
	}
	.ke-abschnitts-titel,
	.ke-eignung-titel,
	.ke-faq-titel {
		font-size: 28px;
	}
	.ke-schritte {
		flex-wrap: wrap;
	}
	.ke-schritte-strich {
		display: none;
	}
	.ke-raeume-grid {
		grid-template-columns: 1fr;
	}
	.ke-frageband-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}


/*
 * Universeller Fokusrahmen (AA)
 * ---------------------------------------------------------------------
 * Auf allen interaktiven Elementen, die eine sichtbare Tastaturbedienung
 * brauchen. Auf einem Grund `#f6f2e9` liefert `#3f5a33` einen
 * Nicht-Text-Kontrast > 3:1.
 */

:where(a, button, summary, [role="button"], [tabindex]):focus-visible,
.ke-tag:focus-visible,
.ke-monat:focus-visible,
.ke-weiter:focus-visible,
.ke-cta-knopf:focus-visible,
.ke-frageband-knopf:focus-visible {
	outline: 3px solid var(--ke-color-band);
	outline-offset: 2px;
	border-radius: var(--ke-radius);
}


/*
 * prefers-reduced-motion
 * ---------------------------------------------------------------------
 * Sofortiges Umschalten, kein Scrollen, keine Übergänge — überall.
 * Aus PLAN_T95_REDESIGN_NACHBESSERUNG.md §7 Punkt 5.
 */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   T109 — Wow-Runde (Plugin 0.9.0, 2026-07-30)
   ============================================================ */

/* ---------- Kontakt-Info-Bar oben --------------------------- */

.ke-info-bar {
	background: #a65332;              /* --fw2-color-clay aus Kadence-Custom-CSS */
	color: #ffffff;                   /* Kontrast auf #a65332 ~5.4:1, WCAG AA */
	font-family: var(--ke-font-sans);
	font-size: 15px;
	line-height: 1.4;
	height: 40px;
}

.ke-info-bar__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 32px;
}

.ke-info-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.12s ease-out;
}

.ke-info-bar__item:where(a):hover,
.ke-info-bar__item:where(a):focus {
	opacity: 0.85;
	color: inherit;
	text-decoration: none;
}

.ke-info-bar__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: inline-block;
}

@media (max-width: 720px) {
	.ke-info-bar {
		height: 36px;
	}
	.ke-info-bar__inner {
		padding: 0 18px;
		gap: 22px;
		justify-content: center;
	}
	.ke-info-bar__item > span {
		display: none;
	}
}

/* ---------- Hero-Vollformat auf Startseite ------------------ */

.ke-hero-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: var(--ke-space-11);
	overflow: hidden;
	position: relative;
}

.ke-hero-full img {
	display: block;
	width: 100%;
	height: min(60vh, 640px);
	object-fit: cover;
	object-position: center;
}

/* ---------- Panorama-Aufmacher Bilder-Seite ----------------- */

.ke-bilder-panorama {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: var(--ke-space-11);
	overflow: hidden;
	position: relative;
}

.ke-bilder-panorama img {
	display: block;
	width: 100%;
	height: min(45vh, 500px);
	object-fit: cover;
	object-position: center 60%;
}

/* ---------- Symmetrie-Karten auf Preise-Seite --------------- */

.ke-preise-symmetrie {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	max-width: 1180px;
	margin: 0 auto;
}

.ke-preise-symmetrie__karte {
	background: #fbf8f1;              /* --ke-color-card, konsistent mit fw2-card */
	padding: 32px;
	border-radius: 3px;
	border: 1px solid #ddd7c7;        /* --ke-color-border-warm */
	box-sizing: border-box;
}

@media (max-width: 720px) {
	.ke-preise-symmetrie {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.ke-preise-symmetrie__karte {
		padding: 24px;
	}
}

/* ---------- Fade-In beim Scroll (reveal.js) ----------------- */

.ke-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ke-reveal--in {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ke-reveal {
		transition: none;
	}
}

/* ============================================================
   T110 — Zentrierung, Split-Hero, CTA, Akzent, Ehrlichkeit
   (Plugin 0.10.0, 2026-07-30)
   ============================================================ */

/* ---------- A) Info-Bar zentrieren -------------------------- */

.ke-info-bar__inner {
	justify-content: center;
}

/* ---------- B) Split-Hero-Layout ---------------------------- */

.ke-hero-split {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 48px;
	align-items: center;
	max-width: 1180px;
	margin: 48px auto 64px;
	padding: 0 24px;
}

.ke-hero-split__text {
	padding: 8px 0;
}

.ke-hero-split__media {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 3px;
	margin: 0;
}

.ke-hero-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ke-hero-split__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 14px 24px;
	background: #244b37;              /* --fw2-color-forest, Marken-Dunkelgruen aus fw2-button--primary */
	color: #ffffff;
	text-decoration: none;
	border-radius: 3px;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	transition: opacity 0.15s ease-out;
}

.ke-hero-split__cta:hover,
.ke-hero-split__cta:focus {
	opacity: 0.9;
	color: #ffffff;
	text-decoration: none;
}

.ke-hero-split__cta-note {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	color: #5f5949;                   /* --ke-color-text-quiet */
}

@media (max-width: 720px) {
	.ke-hero-split {
		grid-template-columns: 1fr;
		gap: 24px;
		margin: 24px auto 40px;
		padding: 0 16px;
	}
	.ke-hero-split__media {
		aspect-ratio: 4 / 3;
		max-height: 320px;
		order: -1;                    /* Bild zuerst auf Mobile */
	}
}

/* ---------- C) Farbakzent im H1 ----------------------------- */

.ke-akzent {
	color: #a65332;                   /* --fw2-color-clay, Terrakotta aus Eyebrow */
}

/* ---------- D) Ehrlichkeits-Icon-Zeile ---------------------- */

.ke-ehrlichkeit {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px 40px;
	max-width: 1180px;
	margin: 0 auto 64px;
	padding: 24px;
	border-top: 1px solid #e0dacd;    /* --ke-color-border */
	border-bottom: 1px solid #e0dacd;
}

.ke-ehrlichkeit__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	color: #3d382f;                   /* --ke-color-text */
}

.ke-ehrlichkeit__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.ke-ehrlichkeit__item--yes .ke-ehrlichkeit__icon {
	color: #244b37;                   /* --fw2-color-forest, Marken-Dunkelgruen */
}

.ke-ehrlichkeit__item--no .ke-ehrlichkeit__icon {
	color: #8b8578;                   /* --ke-color-text-disabled, gedaempftes warmes Braun (kein Rot) */
}

@media (max-width: 720px) {
	.ke-ehrlichkeit {
		gap: 16px 24px;
		padding: 20px 12px;
	}
	.ke-ehrlichkeit__item {
		font-size: 14px;
	}
}

/* ============================================================
   T110-Nachtrag — Mobile-Fix fw2-story-grid--reverse
   (Plugin 0.11.0, 2026-07-30)
   ============================================================

   Kadence-Custom-CSS setzt `.fw2-story-grid--reverse > .fw2-media {
   grid-column: 2 }` und `.fw2-story-grid--reverse > .fw2-story-grid__copy
   { grid-column: 1; grid-row: 1 }` ohne Reset in der Mobile-Media-Query.
   Auf Bildschirmen unter 768px ist das Grid single-column
   (`grid-template-columns: minmax(0, 1fr)`), aber `grid-column: 2`
   verweist auf eine nicht-existente Spalte 2 — der Browser kollabiert
   das Bild dann auf minimale Groesse (sichtbar in den Story-Bloecken
   Garten/Schlafen/Essen auf der Startseite).

   Fix: auf Mobile den grid-column/grid-row-Override zuruecksetzen,
   damit Media und Copy in normaler Dokumentreihenfolge fliessen
   (Bild oben, Text unten wie in den nicht-reverse-Bloecken). */

@media (max-width: 47.99rem) {
	.fw2-story-grid--reverse > .fw2-media,
	.fw2-story-grid--reverse .fw2-media,
	.fw2-story-grid--reverse > .fw2-story-grid__copy,
	.fw2-story-grid--reverse .fw2-story-grid__copy {
		grid-column: auto;
		grid-row: auto;
	}
}

/* 0.11.1 — Test-Roundtrip via kuscheleck/plugin-upload-local (2026-07-30) */


/* ============================================================
   T112 — FAQ Suche & Layout (Plugin 0.12.0, 2026-07-31)
   ============================================================ */

/* ---------- Suchleiste ------------------------------------- */

.ke-faq-such {
	max-width: 640px;
	margin: 0 auto 32px;
	position: relative;
}

.ke-faq-such__input {
	width: 100%;
	padding: 14px 48px 14px 20px;
	font-size: 1rem;
	border: 1.5px solid #d3dbc9;      /* --ke-color-border-cool, sanftes Marken-Gruen */
	border-radius: 8px;
	background: #fbf8f1;              /* --ke-color-card, Cremeweiss */
	color: #3d382f;                   /* --ke-color-text */
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ke-faq-such__input:focus {
	outline: none;
	border-color: #244b37;            /* --fw2-color-forest, Marken-Dunkelgruen */
	box-shadow: 0 0 0 3px rgba(36, 75, 55, 0.15);
}

/* Kleines Lupen-Icon rechts im Feld (SVG steckt im Content-HTML). */
.ke-faq-such__icon {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	opacity: 0.5;
	color: #5f5949;                   /* --ke-color-text-quiet, Icon-Grau */
}

.ke-faq-such__count {
	display: block;
	margin-top: 8px;
	font-size: 0.85rem;
	color: #5f5949;                   /* --ke-color-text-quiet */
	text-align: center;
	min-height: 1.2em;
}

/* ---------- Ausgeblendete Aufklapper (JS-Klasse) ------------ */

.ke-faq-hide {
	display: none !important;
}

/* ---------- Bild-Akzent zwischen den Kategorien ------------- */

.ke-faq-bild {
	max-width: 320px;
	margin: 48px auto;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.ke-faq-bild img {
	display: block;
	width: 100%;
	height: auto;
}


/* ============================================================
   T113 — Story-Grid-Bilder auf Mobile in voller Breite
   (Plugin 0.13.0, 2026-07-31)
   ============================================================
   Diagnose. Kadence-Inline-CSS setzt ohne Media-Query
   `.fw2-story-grid--reverse .fw2-media { grid-column: 2 }`. Auf
   Mobile hat das Grid zwar kein explizites `grid-template-columns`,
   aber weil das Bild in Spalte 2 und die Textspalte in `1/1`
   erzwungen werden, entstehen zwei implizite Spalten (breit fuer
   Text, schmal fuer Bild, 41–63 px = 14–22 % Viewportbreite). Der
   T110-Nachtrag `grid-area: auto` in `@media (max-width: 47.99rem)`
   wurde durch die spezifischere Kadence-Regel uebersteuert.
   Fix. Grid auf Mobile mit `display: block` komplett aufloesen —
   `grid-column: 2` wird dadurch bedeutungslos. Bild und Text
   werden zu Block-Elementen im natuerlichen Fluss und nehmen
   volle Shell-Breite ein.
   ============================================================ */

@media (max-width: 767.98px) {

	/* Grid grundsaetzlich einspaltig — statt implizites
	   Grid-Layout mit erzwungener grid-column: 2 fuer das Bild. */
	.fw2-story-grid,
	.fw2-story-grid.fw2-story-grid--reverse {
		display: block;
	}

	/* Bild-Container darf nicht mehr durch Grid-Zelle
	   beschnitten werden — volle Shell-Breite mit sauberem
	   Abstand nach unten. */
	.fw2-story-grid .fw2-media {
		max-width: 100%;
		width: 100%;
		margin: 0 auto 24px;
	}

	/* Das <img> selbst: 100 % des Container-Widths, Aspect-
	   Ratio aus width/height-Attributen erhalten. */
	.fw2-story-grid .fw2-media img {
		width: 100%;
		height: auto;
		max-width: 100%;
		display: block;
	}

	/* Text-Bereich darunter ohne kuenstlichen Innenabstand,
	   damit er im Shell-Padding korrekt sitzt. */
	.fw2-story-grid .fw2-story-grid__copy {
		padding-inline: 0;
	}
}


/* ============================================================
   T113-Nachtrag 2 — Split-Hero-Container-Breite und Text-Zentrierung
   (Plugin 0.13.2, 2026-07-31)
   ============================================================
   Diagnose. Auf 346 px viewport sind `.ke-hero-split__text` und
   `.ke-hero-split__media` messbar bereits 100 % der Grid-Spalte
   (235 px von 235 px, cs_width=235px, cs_maxWidth=none,
   cs_flexBasis=auto) — der Container ist auch symmetrisch bei
   x=48 zentriert. Der optische „linksbuendig"-Eindruck kommt
   nicht von einer falschen Container-Breite, sondern aus dem
   linksbuendigen `text-align: start` der H1 und des Lead-Texts:
   Wenn die letzten H1-Zeilen kurz ausfallen („viel Raum haben"),
   bleiben rechts optische Weissraum-Fenster. Kombiniert mit dem
   4/3-Bild links darueber wirkt der ganze Block links versammelt.
   Fix. Zwei Ebenen:
   1) Anti-Cascade-Sicherung: `width: 100%; max-width: 100%;
      flex-basis: auto` als Absicherung gegen zukuenftige Kadence-
      Overrides, die die Container einengen koennten. Kein
      messbarer Effekt heute, aber verlaesslicher Zustand.
   2) `text-align: center` fuer den Text-Bereich auf Mobile —
      damit alle H1-Zeilen und der Lead mittig sitzen, kein
      optischer Rechts-Weissraum mehr. Bild ist ohnehin
      Full-Width, wird durch `margin-inline: auto` symmetrisch
      gehalten. Der CTA-Button bleibt eigenstaendig ausgerichtet.
   ============================================================ */

@media (max-width: 767.98px) {

	.ke-hero-split__text,
	.ke-hero-split__media {
		width: 100%;
		max-width: 100%;
		flex-basis: auto;
	}

	/* Text-Zentrierung auf Mobile — H1, Lead, Untertitel. */
	.ke-hero-split__text {
		text-align: center;
	}

	.ke-hero-split__text h1,
	.ke-hero-split__text p {
		text-align: center;
	}

	/* Der Anruf-CTA bleibt zentriert im Textblock. */
	.ke-hero-split__cta {
		margin-left: auto;
		margin-right: auto;
	}

	/* Bild-Container symmetrisch mittig — falls die Grid-Spalte
	   breiter waere als das Bild, wuerde `margin-inline: auto`
	   das Bild horizontal zentrieren. */
	.ke-hero-split__media {
		margin-inline: auto;
	}
}


/* ============================================================
   T114 Teil A — Split-Hero echt zweispaltig ab 721 px
   (Plugin 0.14.0, 2026-07-31)
   ============================================================
   Diagnose. Der `.ke-hero-split` hatte bereits als Basis-Regel
   `display: grid; grid-template-columns: 1.2fr 1fr`. Aber der
   WordPress-Wrapper `.ke-hero-split > .wp-block-group__inner-
   container` (default `display: block`) besetzte allein die
   erste Grid-Spalte; Text und Bild stapelten vertikal darin,
   Spalte 2 blieb leer. Auf Zwischenbreiten 721–1200 px sah der
   Hero deshalb einspaltig-linksbuendig aus.
   Kadence-Referenz. Fuer `.fw2-story-grid` setzt Kadence intern
   `.fw2-story-grid > .wp-block-group__inner-container {
   display: contents }` und macht damit den Wrapper visuell
   durchsichtig — die Grid-Kinder werden direkt zu Grid-Zellen.
   Fix. Dieselbe `display: contents`-Regel fuer den Hero-Wrapper.
   Zusaetzlich ein `@media (min-width: 768px)`-Block als Anti-
   Cascade-Absicherung, der die Grid-Definition, Textausrichtung
   und Bild-Verhalten fuer den Desktop-/Zwischen-Bereich noch
   einmal explizit setzt. Die alten T109/T110-Basis-Regeln bleiben
   stehen; der Mobile-Block (0.13.2, `@media (max-width: 767.98px)`)
   ist unangetastet.
   ============================================================ */

.ke-hero-split > .wp-block-group__inner-container {
	display: contents;
}

@media (min-width: 768px) {

	.ke-hero-split {
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 48px;
		align-items: center;
	}

	.ke-hero-split__text,
	.ke-hero-split__media {
		width: 100%;
		max-width: 100%;
	}

	.ke-hero-split__media img {
		width: 100%;
		height: auto;
		display: block;
	}

	/* Die Mobile-Zentrierung aus 0.13.2 gilt nur unter 768 px —
	   ab hier wieder linksbuendig im zweispaltigen Layout, damit
	   der Text-Bereich seinen natuerlichen Lesefluss behaelt. */
	.ke-hero-split__text,
	.ke-hero-split__text h1,
	.ke-hero-split__text p {
		text-align: start;
		margin-inline: 0;
	}
}