/* Herztakt trifft Körperintelligenz — Bausteine des Design-Pakets als CSS.
 *
 * Der freigegebene Entwurf setzt seine Gestaltung in React über Inline-Stile.
 * Für die gebaute Seite steht dasselbe hier als Klassen: gleiche Token, gleiche
 * Werte, gleiche Zustände — nur ohne React im Browser. Wo hier eine Zahl steht,
 * stammt sie aus der Baustein-Datei des Pakets, nicht aus dem Gefühl.
 *
 * Reihenfolge: Grundgerüst · Knöpfe · Karten · Abzeichen · Abschnitte ·
 * Kopf/Fuß · Inhaltsbausteine · Formulare · Bewegung · Handy.
 */

/* ── Grundgerüst ─────────────────────────────────────────────────────── */

/* `hidden` muss stärker sein als jedes display aus einer Klasse oder einem
   Inline-Stil. Ohne das stand die Bestätigung der Brief-Anmeldung dauerhaft
   auf der Startseite („Bitte bestätigen Sie die Anmeldung"), obwohl niemand
   etwas abgeschickt hatte — `display:inline-flex` schlägt das Attribut. */
[hidden]{display:none !important}

/* Grundmaß für die Zeichen. Sie kommen ohne width/height aus dem Bau, damit
   das Stilblatt bestimmt, wie groß sie sind — dann fehlt aber überall dort
   eine Größe, wo keine eigene Regel steht, und das Zeichen wird riesig. */
svg{width:18px;height:18px;flex:none}

.page{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section--quiet{background:var(--surface-quiet)}
.section--sunken{background:var(--surface-sunken)}
.section--warm{background:var(--surface-warm)}
.section--aquarell{background:var(--grad-aquarell),var(--ivory-50)}
.stack{display:flex;flex-direction:column}
.shell{min-height:100%;display:flex;flex-direction:column}
main{flex:1}

/* Zwei Spalten, die auf dem Handy von selbst eine werden. Nie feste
   Spaltenzahl — das war der Fehler, der dem Bewerbungsformular 15 Pixel
   Breite beschert hat. */
.duo{display:grid;gap:var(--space-8);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.duo--start{align-items:start}
.duo--tight{gap:var(--space-7)}
.trio{display:grid;gap:var(--space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.quartett{display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}

/* ── Knöpfe ──────────────────────────────────────────────────────────── */
.btn{font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-5);border-radius:var(--radius-pill);
  border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  background-image:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 52%,rgba(35,40,26,.10) 100%);
  transition:background var(--dur-base) var(--ease-soft),color var(--dur-base) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft)}
.btn svg{width:18px;height:18px;flex:none}
.btn--sm{min-height:36px;padding:0 var(--space-4);font-size:var(--text-micro)}
.btn--lg{min-height:54px;padding:0 var(--space-6);font-size:var(--text-body-size)}
.btn--block{width:100%}
/* Knöpfe brechen nicht um — kurze Beschriftungen sollen in einer Zeile
   stehen. Wo die Beschriftung aber aus zwei Teilen zusammenwächst („Zur
   Detailseite: Ausgebrannt statt bereichert"), wird sie breiter als ein
   Telefon: gemessen 392 px auf 375 px, die ganze Seite ließ sich seitwärts
   schieben. Dieser Knopf darf umbrechen. */
.btn{max-width:100%}
.btn--wrap{white-space:normal;text-align:center;height:auto;
  padding-top:10px;padding-bottom:10px;line-height:var(--leading-snug)}

/* „Plastik": der Entwurf gibt Knöpfen eine Lichtkante oben und einen warmen
   Schatten unten. Beim Drücken kehrt sich das um. */
.btn--primary,.btn--leaf,.btn--sun{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(35,40,26,.14),
  0 2px 4px rgba(35,40,26,.14),0 8px 18px -6px rgba(35,40,26,.28)}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--leaf{background:var(--leaf);color:var(--leaf-ink)}
.btn--sun{background:var(--sun);color:var(--sun-ink)}
.btn--outline{background:transparent;color:var(--text-accent);border-color:var(--clay-600);background-image:none}
.btn--quiet{background:var(--surface-quiet);color:var(--olive-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(35,40,26,.10)}
.btn--ghost{background:transparent;color:var(--text-body);background-image:none}
.btn--ghost-dark{background:transparent;color:var(--ivory-50);background-image:none}

.btn--primary:hover{background:var(--accent-hover)}
.btn--leaf:hover{background:var(--leaf-hover)}
.btn--sun:hover{background:var(--amber-400)}
.btn--outline:hover{background:var(--clay-200);color:var(--clay-800)}
.btn--quiet:hover{background:var(--sage-200)}
.btn--ghost:hover{background:var(--surface-sunken)}
.btn--ghost-dark:hover{background:rgba(253,251,246,.14)}
.btn:hover:not([disabled]){transform:translateY(-3px)}
.btn--primary:hover,.btn--leaf:hover,.btn--sun:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
  inset 0 -1px 0 rgba(35,40,26,.16),0 4px 8px rgba(35,40,26,.16),0 16px 28px -10px rgba(35,40,26,.34)}
.btn:active:not([disabled]){transform:translateY(1px) scale(var(--press-scale));
  box-shadow:inset 0 2px 5px rgba(35,40,26,.30),inset 0 -1px 0 rgba(255,255,255,.18)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;box-shadow:none;transform:none}

.iconbtn{width:44px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;
  background:var(--surface-quiet);color:var(--olive-900);
  transition:background var(--dur-base) var(--ease-soft)}
.iconbtn svg{width:20px;height:20px}
.iconbtn:hover{background:var(--sage-200)}
.iconbtn--onDark{background:rgba(253,251,246,.14);color:var(--text-on-dark)}
.iconbtn--onDark:hover{background:rgba(253,251,246,.26)}

/* ── Karten ──────────────────────────────────────────────────────────── */
.card{display:block;border-radius:var(--radius-lg);padding:var(--space-6);text-decoration:none;
  color:var(--text-body);background:var(--surface-card);border:1px solid var(--border-hairline);
  box-shadow:0 8px 22px -12px rgba(35,40,26,.26),0 2px 5px rgba(35,40,26,.08);
  transition:transform var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft)}
.card--roomy{padding:var(--space-7)}
.card--quiet{background:var(--surface-quiet);border-color:transparent}
.card--warm{background:var(--surface-warm);border-color:transparent}
.card--sunken{background:var(--surface-sunken);border-color:transparent}
.card--dark{background:var(--surface-dark);color:var(--text-on-dark);border-color:transparent;
  box-shadow:0 14px 34px -16px rgba(35,40,26,.55),0 2px 6px rgba(35,40,26,.18)}
.card--dark h2,.card--dark h3{color:var(--text-on-dark)}
.card--float{transform:translateY(-2px);box-shadow:0 10px 28px -14px rgba(35,40,26,.30),0 2px 6px rgba(35,40,26,.08)}
.card--float:hover{transform:translateY(-4px);
  box-shadow:0 18px 40px -16px rgba(35,40,26,.36),0 4px 10px rgba(35,40,26,.10)}
.card--offen{border:1.5px dashed var(--border-strong);box-shadow:none}
.card--voll{height:100%}

/* ── Abzeichen ───────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px var(--space-4);
  border-radius:var(--radius-pill);font-family:var(--font-body);font-size:var(--text-micro);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);line-height:1.3}
.badge svg{width:14px;height:14px;flex:none}
.badge--sage{background:var(--sage-100);color:var(--olive-900)}
.badge--sun{background:var(--amber-100);color:var(--ink-900)}
.badge--clay{background:var(--clay-200);color:var(--clay-800)}
.badge--outline{background:transparent;color:var(--text-muted);box-shadow:inset 0 0 0 1px var(--border-hairline)}

/* ── Abschnittsköpfe ─────────────────────────────────────────────────── */
.sec-head{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start;
  margin-bottom:var(--space-7)}
.sec-head h1,.sec-head h2{font-size:var(--text-h2);line-height:var(--leading-snug);margin:0;max-width:22ch}
.sec-head p{font-size:var(--text-lead);color:var(--text-body);margin:0;max-width:var(--measure-narrow)}

/* ── Kopfzeile ───────────────────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:20;background:rgba(250,246,236,.86);
  backdrop-filter:var(--blur-veil);-webkit-backdrop-filter:var(--blur-veil);
  border-bottom:1px solid var(--border-hairline)}
.kopf__innen{max-width:var(--page-max);margin:0 auto;padding:var(--space-3) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
/* `min-width:0` ist hier keine Feinheit, sondern das Ganze: ohne das kann ein
   Flex-Element nicht unter seinen Inhalt schrumpfen. Der englische Zusatz
   („meets body intelligence") ist länger als der deutsche und steht auf
   `nowrap` — er schob den Kopf 40 px über den Rand hinaus, auf ALLEN vierzehn
   englischen Seiten. Gemessen am 24.09.2026. */
.marke{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;min-width:0}
.marke img{width:54px;height:54px;flex:0 0 auto;object-fit:contain}
.marke__wort{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.marke__name{font-family:var(--font-display);font-size:1.4375rem;font-weight:var(--weight-semibold)}
.marke__name b{color:var(--clay-700);font-weight:inherit}
.marke__name i{color:var(--olive-700);font-style:normal}
.marke__zusatz{font-family:var(--font-body);font-size:var(--text-small);color:var(--text-leaf);
  letter-spacing:var(--tracking-wide);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Auf schmalen Geräten lieber zwei Zeilen als ein abgeschnittener Satz. */
@media (max-width:559px){.marke__zusatz{white-space:normal}}
/* Gilt für BEIDE Menüs — das große oben und das aufgeklappte am Handy.
   Stand hier nur `.kopf nav a`, sahen die Punkte im Handy-Menü aus wie
   gewöhnliche Textlinks: unterstrichen und kupferrot, weil sie nicht in einem
   `nav` stehen und damit auf die Grundregel für Links zurückfielen. */
.kopf nav a,.menue a{font-family:var(--font-body);font-size:var(--text-small);color:var(--text-body);
  text-decoration:none;padding:10px var(--space-3);border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;min-height:var(--tap-min);white-space:nowrap}
.kopf nav a[aria-current="page"],.menue a[aria-current="page"]{font-weight:var(--weight-semibold);
  color:var(--text-strong);background:var(--surface-quiet)}
.menue a:hover{background:var(--surface-sunken);color:var(--text-strong)}
/* Der Knopf im Menü bleibt ein Knopf — die Regel oben darf ihn nicht greifen. */
.menue a.btn{color:var(--accent-ink);padding:0 var(--space-5)}
.kopf__rechts{display:flex;align-items:center;gap:var(--space-3)}
.sprache{min-height:36px;padding:0 var(--space-3);border-radius:var(--radius-pill);cursor:pointer;
  border:1px solid var(--border-strong);background:transparent;color:var(--text-body);
  font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-wide);
  text-decoration:none;display:inline-flex;align-items:center}
.nav-gross{display:none;gap:var(--space-1);align-items:center}
.menue{border-top:1px solid var(--border-hairline);padding:var(--space-4) var(--gutter) var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-2);background:var(--surface-page)}
.menue[hidden]{display:none}

/* ── Fußzeile ────────────────────────────────────────────────────────── */
.fuss{background:var(--surface-dark);color:var(--text-on-dark)}
/* Am Handy eine Spalte, erst ab 720 px die vier nebeneinander.
   Der Entwurf hatte hier `minmax(…260px…) repeat(auto-fit,minmax(…150px…))`.
   Auf einem 375-px-Telefon geht das nicht auf: 260 + dreimal 150 passen nicht
   in 335 px, die Fußzeile wurde 462 px breit und schob die GANZE Seite 87 px
   zur Seite. Gemessen am 24.09.2026 — dieselbe Krankheit wie beim
   Bewerbungsformular. */
.fuss__innen{max-width:var(--page-max);margin:0 auto;padding:var(--space-8) var(--gutter) var(--space-5);
  display:grid;gap:var(--space-5) var(--space-6);grid-template-columns:1fr}
@media (min-width:720px){
  .fuss__innen{grid-template-columns:minmax(220px,1.2fr) repeat(3,minmax(120px,1fr))}
}
.fuss__wort{font-family:var(--font-display);font-size:1.375rem;color:var(--amber-400)}
.fuss__zusatz{font-size:var(--text-small);color:var(--sage-200);margin-bottom:var(--space-3)}
.fuss__draht{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-small)}
.fuss__draht a{color:var(--ivory-50);text-decoration:none;display:inline-flex;gap:var(--space-2);
  align-items:center;min-height:28px}
.fuss__draht svg{width:16px;height:16px;color:var(--amber-400);flex:none}
.fuss__spalte b{display:block;font-family:var(--font-body);font-size:var(--text-micro);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--sage-200);
  font-weight:var(--weight-semibold);margin-bottom:var(--space-3)}
.fuss__spalte ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
.fuss__spalte a{color:var(--ivory-50);font-size:var(--text-small);text-decoration:none;
  display:inline-flex;min-height:28px;align-items:center}
.fuss__zeile{max-width:var(--page-max);margin:0 auto;padding:var(--space-5) var(--gutter);
  border-top:1px solid rgba(227,234,210,.22);font-size:var(--text-micro);color:var(--sage-200)}
.fuss__zeile p{max-width:none;margin:0}

/* ── Feste Kontaktleiste am Handy ────────────────────────────────────── */
.leiste{position:sticky;bottom:0;z-index:30;
  padding:var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background:rgba(250,246,236,.92);backdrop-filter:var(--blur-veil);
  -webkit-backdrop-filter:var(--blur-veil);border-top:1px solid var(--border-hairline);
  display:flex;gap:var(--space-3)}
.leiste a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--tap-min);font-family:var(--font-body);font-size:var(--text-small);
  font-weight:var(--weight-semibold);text-decoration:none;border-radius:var(--radius-pill)}
.leiste svg{width:18px;height:18px}
.leiste__ruf{background:var(--accent);color:var(--accent-ink)}
.leiste__wa{background:var(--leaf);color:var(--leaf-ink)}
.leiste__mail{background:var(--surface-quiet);color:var(--olive-900)}

/* ── Zitat ───────────────────────────────────────────────────────────── */
.zitat{margin:0;border-radius:var(--radius-lg);padding:var(--space-7);text-align:center;
  background:var(--surface-quiet);color:var(--olive-900);border-left:3px solid var(--olive-600)}
.zitat--warm{background:var(--surface-warm);color:var(--ink-900);border-left-color:var(--clay-600)}
.zitat blockquote{margin:0 auto;font-family:var(--font-display);font-size:var(--text-h3);
  font-style:italic;line-height:1.4;color:inherit;max-width:68ch;text-wrap:balance}
.zitat--gross blockquote{font-size:var(--text-h2)}
.zitat figcaption{margin-top:var(--space-4);font-family:var(--font-body);font-size:var(--text-micro);
  letter-spacing:var(--tracking-wide);opacity:.85;color:inherit}

/* ── Aufklapper ──────────────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;gap:var(--space-3)}
.faq__satz{background:var(--sage-100);border:1px solid var(--sage-200);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:0 8px 22px -12px rgba(35,40,26,.26),0 2px 5px rgba(35,40,26,.08);
  transition:box-shadow var(--dur-base) var(--ease-soft)}
.faq__satz[data-offen="1"]{background:var(--sage-200);
  box-shadow:0 18px 40px -18px rgba(35,40,26,.34),0 3px 8px rgba(35,40,26,.10)}
.faq__frage{width:100%;min-height:var(--tap-min);display:flex;gap:var(--space-4);align-items:center;
  justify-content:space-between;text-align:left;padding:var(--space-4) var(--space-5);
  background:transparent;border:none;cursor:pointer;font-family:var(--font-display);
  font-size:var(--text-h3);font-weight:var(--weight-medium);color:var(--text-strong);line-height:1.3}
.faq--klein .faq__frage{font-size:20px}
.faq__frage svg{width:20px;height:20px;flex:0 0 auto;color:var(--olive-900);
  transition:transform var(--dur-base) var(--ease-soft)}
.faq__satz[data-offen="1"] .faq__frage svg{transform:rotate(45deg)}
.faq__deckel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-soft)}
.faq__satz[data-offen="1"] .faq__deckel{grid-template-rows:1fr}
.faq__deckel>div{overflow:hidden}
.faq__text{padding:0 var(--space-5) var(--space-5);color:var(--ink-900);max-width:var(--measure-prose)}
.faq__zeichen{font-family:var(--font-display);font-size:1.45em;vertical-align:-.08em;color:var(--clay-700)}

/* ── Galerie ─────────────────────────────────────────────────────────── */
/* Höchstens DREI nebeneinander — bei sechs Bildern also zwei volle Reihen
   (Bernadette, 25.09.2026). Vorher füllte `auto-fit` die Breite und machte
   daraus 4 + 2, was oben gedrängt und unten leer aussah.
   Die Spaltenzahl steht hier fest, aber jede Stufe in einer eigenen
   Medienabfrage — feste Spalten OHNE Medienabfrage sind die Falle, die die
   Handy-Prüfung des Hauses sucht. */
.galerie{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-4);
  grid-template-columns:1fr}
@media (min-width:560px){.galerie{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.galerie{grid-template-columns:repeat(3,1fr)}}
.galerie li{min-width:0}
.galerie button{display:block;width:100%;padding:0;border:none;background:none;cursor:zoom-in;
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.galerie p{font-size:var(--text-micro);color:var(--text-muted);margin:var(--space-2) 0 0}
.lupe{position:fixed;inset:0;z-index:60;background:rgba(35,40,26,.92);display:grid;place-items:center;
  padding:var(--gutter)}
.lupe[hidden]{display:none}
.lupe figure{margin:0;max-width:min(1000px,92vw)}
.lupe img{width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius-md)}
.lupe figcaption{color:var(--ivory-50);font-size:var(--text-small);margin-top:var(--space-4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.lupe__knoepfe{display:flex;gap:var(--space-2)}

/* Ein einzelnes Hochformat-Foto mittig im Seitenfluss. Schmal gehalten —
   ein Porträt über die volle Spaltenbreite wäre auf dem Schreibtisch
   erschlagend hoch. */
.portraet-breit{max-width:420px;margin:0 auto}

/* ── Eine echte Rückmeldung ──────────────────────────────────────────── */
.stimme{margin:0;background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-xs)}
.stimme blockquote{margin:0;font-family:var(--font-display);font-style:italic;
  font-size:var(--text-lead);line-height:1.5;color:var(--text-strong);max-width:none}
/* Lange Rückmeldungen: der Entwurf rechnet mit zwei, drei Sätzen. Ein ganzer
   Absatz in großer Kursivschrift liest sich mühsam — dann eine Stufe kleiner. */
.stimme--lang blockquote{font-size:var(--text-body-size);line-height:var(--leading-body)}
.stimme figcaption{margin-top:var(--space-4);font-size:var(--text-micro);color:var(--text-muted)}

/* ── Platzhalter für Stimmen, die es noch nicht gibt ─────────────────── */
.stimme-leer{border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);
  padding:var(--space-6);color:var(--text-muted);font-size:var(--text-small);background:var(--ivory-50)}
.stimme-leer svg{width:20px;height:20px;color:var(--sand-400)}
.stimme-leer p{margin:var(--space-3) 0 0}

/* ── Brief ───────────────────────────────────────────────────────────── */
.brief{background:var(--surface-warm);border-radius:var(--radius-lg);padding:var(--space-7)}
.brief h3{font-size:var(--text-h3);margin:0 0 var(--space-2);color:var(--ink-900)}
.brief p{font-size:var(--text-small);color:var(--ink-700);max-width:42ch}
.brief__zeile{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-4)}
.brief__fertig{display:inline-flex;gap:var(--space-2);align-items:center;color:var(--clay-800);
  font-weight:var(--weight-semibold);font-size:var(--text-small)}
.brief__fertig svg{color:var(--clay-800)}

/* Der Haken nach der Buchung — der einzige große Kreis auf der Seite. */
.danke-zeichen{display:grid;place-items:center;width:52px;height:52px;
  border-radius:var(--radius-pill);background:var(--surface-quiet)}
.danke-zeichen svg{width:26px;height:26px;color:var(--olive-700)}

/* ── Zeiten ──────────────────────────────────────────────────────────── */
.zeiten{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:var(--text-small)}
.zeiten tr{border-bottom:1px solid var(--border-hairline)}
.zeiten th{text-align:left;padding:var(--space-3) 0;font-weight:var(--weight-semibold);color:var(--text-strong)}
.zeiten td{text-align:right;padding:var(--space-3) 0;color:var(--text-body);font-variant-numeric:tabular-nums}
.zeiten td.leer{color:var(--text-muted)}

/* ── Formulare ───────────────────────────────────────────────────────── */
.feld{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5)}
.feld>label{font-family:var(--font-body);font-size:var(--text-small);
  font-weight:var(--weight-semibold);color:var(--text-strong)}
.feld>label span{color:var(--text-accent)}
.feld__hinweis{font-size:var(--text-micro);color:var(--text-muted)}
.inp,.sel,.txt{width:100%;min-height:var(--tap-min);padding:12px var(--space-4);
  font-family:var(--font-body);font-size:var(--text-body-size);color:var(--text-strong);
  background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-sm);outline:none;
  transition:border-color var(--dur-base) var(--ease-soft),box-shadow var(--dur-base) var(--ease-soft)}
.inp:focus,.sel:focus,.txt:focus{border-color:var(--olive-600);box-shadow:0 0 0 3px rgba(88,104,40,.14)}
.txt{line-height:var(--leading-body);resize:vertical}
.sel{appearance:none;padding-right:44px}
.mit-zeichen{position:relative;display:block}
.mit-zeichen>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  color:var(--text-muted);pointer-events:none}
.mit-zeichen .inp{padding-left:44px}
.mit-zeichen--rechts>svg{left:auto;right:14px}
.haken{display:flex;gap:var(--space-3);align-items:flex-start;min-height:var(--tap-min);cursor:pointer;
  font-size:var(--text-small);color:var(--text-body);line-height:var(--leading-body)}
/* 24 px, nicht 22 wie im Entwurf: WCAG 2.2 AA verlangt 24×24 als kleinste
   Zielgröße, und die ist hier gebucht. Der Unterschied ist unsichtbar, die
   Prüfung besteht sie damit ohne Diskussion. */
.haken input{width:24px;height:24px;margin-top:2px;accent-color:var(--olive-700);flex:0 0 auto;
  outline-color:var(--focus-ring);border-radius:var(--radius-xs)}

/* Der Sprunglink ganz oben ist versteckt — aber sobald jemand mit der
   Tastatur dorthin kommt, MUSS er sichtbar werden. Sonst springt der Fokus
   an eine Stelle, die niemand sieht. */
.visually-hidden:focus,.visually-hidden:focus-visible{position:fixed;top:var(--space-3);
  left:var(--space-3);z-index:100;width:auto;height:auto;clip-path:none;overflow:visible;
  background:var(--accent);color:var(--accent-ink);padding:12px var(--space-5);
  border-radius:var(--radius-pill);font-size:var(--text-small);
  font-weight:var(--weight-semibold);text-decoration:none;box-shadow:var(--shadow-lg)}
.paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0 var(--space-5)}
.trio-feld{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:0 var(--space-5)}

/* ── Buchung ─────────────────────────────────────────────────────────── */
.chip{min-height:var(--tap-min);padding:0 var(--space-5);border-radius:var(--radius-pill);cursor:pointer;
  border:1px solid var(--border-hairline);background:var(--surface-card);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-semibold);
  transition:background var(--dur-base) var(--ease-soft),border-color var(--dur-base) var(--ease-soft)}
.chip[aria-pressed="true"]{border-color:transparent;background:var(--leaf);color:var(--leaf-ink)}
/* Nur in den Buchungs-Kacheln steht im `span` das Datum — dort gehört die
   Zahlenschrift hin. Die Bereichs-Kacheln tragen im `span` ihren Namen und
   müssen davon ausgenommen bleiben. */
.chip:not(.chip--weiter) span{font-family:var(--font-mono);font-weight:var(--weight-regular);opacity:.8}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ── Die vier Bereiche auf der Coaching-Seite ─────────────────────────────
   Sie sehen aus wie ein Umschalter, führen aber auf eigene Seiten. Damit man
   das erkennt, drei Dinge: die Handlungsfarbe des Hauses, ein Pfeil, und ein
   leises Anstupsen alle paar Sekunden — versetzt, damit es als Welle von
   links nach rechts läuft und nicht als Zappeln.
   Voll gefüllt wie der Knopf „Zur Detailseite" darunter — so gewünscht
   (Bernadette, 25.09.2026). Ich hatte sie zuerst nur getönt, damit sie dem
   einen Knopf „Termin anfragen" nicht den Rang ablaufen; ihre Entscheidung. */
.chips--weiter{margin-bottom:var(--space-7)}
.chip--weiter{display:inline-flex;align-items:center;gap:var(--space-3);
  text-decoration:none;border-color:transparent;
  background:var(--accent);color:var(--accent-ink);
  background-image:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 52%,rgba(35,40,26,.10) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(35,40,26,.14),
    0 2px 4px rgba(35,40,26,.14),0 8px 18px -6px rgba(35,40,26,.28);
  transition:background var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft)}
.chip--weiter svg{width:17px;height:17px;flex:none;
  animation:chip-stups 5s var(--ease-soft) infinite;animation-delay:var(--takt,0ms);
  transition:transform var(--dur-base) var(--ease-soft)}
.chip--weiter:hover,.chip--weiter:focus-visible{background:var(--accent-hover);
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(35,40,26,.16),
    0 4px 8px rgba(35,40,26,.16),0 16px 28px -10px rgba(35,40,26,.34)}
.chip--weiter:hover svg,.chip--weiter:focus-visible svg{animation:none;transform:translateX(4px)}
.chip--weiter:active{transform:translateY(0)}

/* Nur ein kurzer Stups, dann lange Ruhe — 5 Sekunden Takt, davon 12 % Bewegung. */
@keyframes chip-stups{
  0%,88%,100%{transform:translateX(0)}
  92%{transform:translateX(4px)}
  96%{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .chip--weiter svg{animation:none}
}
/* Drei Schritte nebeneinander — aber nicht auf einem schmalen Telefon.
   Feste Spaltenzahl ohne Medienabfrage ist eine der vier Fallen, die die
   Handy-Prüfung des Hauses sucht. */
.stufen{list-style:none;margin:0 0 var(--space-7);padding:0;display:grid;
  grid-template-columns:1fr;gap:var(--space-3)}
@media (min-width:560px){.stufen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stufen li{display:flex;flex-direction:column;gap:var(--space-2)}
.stufen i{height:4px;border-radius:var(--radius-pill);background:var(--border-hairline);
  transition:background var(--dur-slow) var(--ease-soft);display:block}
.stufen li[data-an] i{background:var(--clay-700)}
.stufen b{display:flex;align-items:center;gap:var(--space-2);font-weight:inherit}
.stufen b em{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-muted);font-style:normal}
.stufen li[data-an] b em{color:var(--clay-700)}
.stufen b span{font-size:var(--text-micro);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-muted)}
.stufen li[aria-current="step"] b span{color:var(--text-strong);font-weight:var(--weight-semibold)}
.wahl{text-align:left;padding:var(--space-4);border-radius:var(--radius-md);cursor:pointer;
  border:1.5px solid var(--border-hairline);background:var(--surface-card);
  transition:border-color var(--dur-base) var(--ease-soft),background var(--dur-base) var(--ease-soft)}
.wahl[aria-pressed="true"]{border-color:var(--clay-700);background:var(--surface-quiet)}
.wahl b{display:block;font-family:var(--font-display);font-size:var(--text-h3);
  font-weight:var(--weight-medium);color:var(--text-strong)}
.wahl span{display:block;margin-top:4px;font-size:var(--text-micro);color:var(--text-muted)}
.wahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--space-3)}
.merk{background:var(--surface-quiet);border-radius:var(--radius-md);padding:var(--space-4);
  margin-bottom:var(--space-6)}
.merk p{margin:var(--space-2) 0 0;font-size:var(--text-small);color:var(--text-body)}
.merk button{margin-top:var(--space-3);background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-micro);color:var(--text-accent);text-decoration:underline}
.knopfzeile{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-7);
  flex-wrap:wrap}
.knopfzeile--rechts{justify-content:flex-end}

/* ── Listen mit Punkt und mit Nummer ─────────────────────────────────── */
.punkte{margin:var(--space-3) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.punkte li{display:flex;gap:var(--space-3);align-items:flex-start;color:var(--text-body)}
.punkte li::before{content:"";flex:none;width:.55rem;height:.55rem;margin-top:.5em;
  border-radius:var(--radius-pill);background:var(--leaf)}
.schritte{margin:var(--space-3) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.schritte li{display:flex;gap:var(--space-3);align-items:flex-start;color:var(--ink-900);font-size:var(--text-small)}
.schritte em{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-pill);
  background:var(--clay-700);color:#fff;font-family:var(--font-mono);font-size:.75rem;font-style:normal}
.fragenliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.fragenliste li{display:flex;gap:var(--space-4);align-items:flex-start}
.fragenliste em{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border-radius:var(--radius-pill);background:var(--clay-700);color:#fff;font-family:var(--font-mono);
  font-size:.8125rem;margin-top:2px;font-style:normal}
.fragenliste span{font-family:var(--font-display);font-size:var(--text-h3);font-style:italic;
  color:var(--ink-900);line-height:1.35}

/* Der Weg durch die vier Angebote — Kreis, Linie, Text. */
.weg{list-style:none;margin:0;padding:0;display:grid;gap:0}
.weg li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-5)}
.weg__spur{display:grid;grid-template-rows:auto 1fr;justify-items:center;row-gap:var(--space-2)}
.weg__kreis{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);background:var(--surface-card)}
.weg__kreis svg{width:22px;height:22px;color:var(--olive-700)}
.weg__linie{width:1px;min-height:var(--space-5);background:var(--border-hairline)}
.weg li:last-child .weg__linie{min-height:0;background:transparent}
.weg__text{padding-bottom:var(--space-6);text-decoration:none;display:block;color:inherit}
.weg li:last-child .weg__text{padding-bottom:0}
.weg h3{margin:0 0 var(--space-2);display:flex;align-items:baseline;gap:var(--space-3)}
.weg h3 em{font-family:var(--font-mono);font-size:var(--text-small);color:var(--olive-700);font-style:normal}
.weg p{margin:0;font-size:var(--text-small);color:var(--text-muted)}

/* ── Farbobjekte ─────────────────────────────────────────────────────── */
.farbobjekt{display:block;position:absolute;pointer-events:none}
.farbobjekt--blob{border-radius:var(--radius-blob)}
.farbobjekt--petal{border-radius:70% 30% 70% 30%/30% 70% 30% 70%}
.farbobjekt--soft{border-radius:var(--radius-xl)}
.farbobjekt--sunrise{background:var(--grad-sunrise)}
.farbobjekt--leaf{background:var(--grad-leaf)}
.farbobjekt--sage{background:var(--sage-200)}

/* ── Kopfbild der Startseite ─────────────────────────────────────────── */
.buehne{position:relative;overflow:hidden;min-height:min(86vh,760px);
  background:linear-gradient(180deg,var(--ivory-50) 0%,var(--ivory-100) 34%,#eef0e0 58%,#dfe6c8 100%)}
/* Eigene Klasse statt `.buehne>img` — sonst greift die Regel auch auf die
   Silhouette und zieht sie formatfüllend über den ganzen Kopfbereich. */
.buehne__grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.buehne__schleier{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(253,251,246,.92) 0%,rgba(253,251,246,.72) 38%,
    rgba(253,251,246,.34) 66%,rgba(253,251,246,.12) 100%)}
.buehne__licht{position:absolute;left:50%;top:-14%;transform:translateX(-50%);
  width:min(78vw,900px);height:min(78vw,900px);pointer-events:none;
  background:radial-gradient(circle,rgba(253,251,246,.9) 0%,rgba(253,251,246,.6) 46%,rgba(253,251,246,0) 72%)}
/* Friederike ganz schwach im Kopf der Startseite: sie greift nach dem Logo,
   so wie sie im Foto nach dem Ballon greift (Bernadette, 25.09.2026).
   Es ist SIE, aus dem Ballonfoto freigestellt — keine gezeichnete Figur.
   (Der erste Versuch war eine erzeugte Silhouette. Die sah aus wie irgendwer,
   nur nicht wie sie. Zu Recht zurückgewiesen.)

   DER TRICK MIT DEM BALLON: Ihre Fingerspitze liegt im Foto VOR dem Ballon —
   wer den Ballon wegschneidet, schneidet den Finger mit. Also wird er nicht
   entfernt, sondern versteckt: Die Ballonmitte liegt bei 5,8 % der Bildbreite
   und 5,8 % der Höhe, und genau dorthin kommt das Logo zu liegen. Der Ballon
   verschwindet dahinter, der Griff bleibt.

   Unten blendet sie aus, statt an der Balustrade abgeschnitten zu enden. */
.buehne__schatten{position:absolute;pointer-events:none;user-select:none;
  left:50%;top:14%;height:min(74%,620px);width:auto;opacity:.26;
  transform:translateX(-5.8%);
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,0) 94%);
  mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,0) 94%)}
/* Am Handy bleibt sie sichtbar (Bernadette, 25.09.2026) — aber kleiner und
   blasser: dort läuft der Text über die ganze Breite, und die Figur wird
   schnell ein Fleck statt ein Hauch. Sie ragt rechts über den Rand hinaus,
   `.buehne` schneidet ab; die Seite lässt sich dadurch NICHT seitwärts
   schieben (nachgemessen). Der Griff zum Logo bleibt, weil der Ballon
   weiterhin bei 5,8 % der Bildbreite sitzt. */
@media (max-width:719px){
  .buehne__schatten{height:min(46%,420px);opacity:.10;top:16%}
}

.buehne__innen{position:relative;max-width:var(--page-max);margin:0 auto;
  padding:clamp(40px,6vw,72px) var(--gutter) clamp(72px,12vw,160px);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.buehne__zeichen{display:block;width:clamp(104px,13vw,168px);aspect-ratio:1;object-fit:contain;
  margin:0 auto var(--space-4);position:relative}
.buehne h1{font-size:var(--text-hero);line-height:var(--leading-tight);margin:var(--space-5) auto var(--space-4);
  max-width:20ch}
.buehne h1 span{display:block;color:var(--text-accent)}
/* Der Absatz stand über dem unruhigsten Teil des Fotos — Palmwedel, Sand,
   Licht — und war schwer zu lesen. Jetzt schmaler gezogen (42 statt 52
   Zeichen, also drei satte Zeilen statt vier dünner) und auf einen
   angedeuteten Balken gesetzt: heller Schleier mit Weichzeichner, kein
   Rahmen, keine Kante. Man sieht ihn kaum, er trägt nur den Text
   (Bernadette, 25.09.2026). */
.buehne__lead{margin:0 auto;max-width:42ch;
  /* Kleiner als der übrige Lead-Text: hier trägt schon die große Überschrift.
     Am Handy 16 px (Untergrenze für Fließtext), am Schreibtisch knapp 19 —
     vorher waren es 18 bis 22 (Bernadette, 25.09.2026: „vor allem fürs Handy
     kleiner"). */
  font-size:clamp(1rem,1.25vw,1.1875rem);
  line-height:1.5;color:var(--ink-900);
  padding:var(--space-4) var(--space-6);
  border-radius:var(--radius-lg);
  background:rgba(253,251,246,.58);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* Wo der Weichzeichner fehlt (ältere Browser), wird der Schleier etwas
   dichter — sonst stünde der Text wieder frei auf dem Bild. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .buehne__lead{background:rgba(253,251,246,.82)}
}
.buehne__knoepfe{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-7);justify-content:center}

/* Zitat über einem Bild, volle Breite. */
.bildzitat{position:relative;min-height:clamp(320px,42vw,520px);display:grid;place-items:center;
  background-size:cover;background-position:50% 60%}
.bildzitat p{font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.5rem);line-height:1.3;color:#fff;margin:0 0 var(--space-5);max-width:none}
.bildzitat__innen{max-width:26ch;padding:var(--section-y) var(--gutter);text-align:center}
.bildzitat b{font-family:var(--font-body);font-size:var(--text-micro);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:#fff;opacity:.92;font-weight:400}

/* ── Die Begrüßung ───────────────────────────────────────────────────────
   Sonnenaufgang über den Pyramiden, Logo, ein Satz. Vier Sekunden, dann
   blendet sie aus. Ein Klick, eine Taste oder ein Wisch überspringt sie.
   Werte aus `Intro.jsx` des Design-Pakets übernommen.
   Sie wird vom Skript gebaut, nie vom HTML — siehe bau.js. */
.intro{position:fixed;inset:0;z-index:100;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,#F3D9A8 0%,#E8B96F 55%,#D9A85C 100%);
  opacity:1;
  /* Weicher Start UND weiches Ende: --ease-soft ist ein ease-out und
     faellt beim Verschwinden sofort stark ab (25.09.2026). */
  transition:opacity 1700ms cubic-bezier(.37,0,.63,1),transform 2100ms cubic-bezier(.37,0,.63,1)}
.intro[data-geht]{opacity:0;transform:scale(1.04);pointer-events:none}
.intro__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 55%;transform:scale(1.01);transition:transform 6000ms linear}
.intro[data-geht] .intro__bild{transform:scale(1.06)}
.intro__schleier{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(253,247,236,.34) 0%,rgba(253,246,233,.30) 50%,rgba(247,238,221,.44) 100%)}
.intro__licht{position:absolute;inset:0;
  background:radial-gradient(64% 54% at 50% 46%,rgba(255,253,247,.90) 0%,rgba(255,253,247,.66) 46%,rgba(255,252,244,0) 78%)}
.intro__innen{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-5);
  padding:var(--gutter);text-align:center}
.intro__zeichen{width:min(46vw,300px);aspect-ratio:1;object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(74,52,20,.22));
  animation:intro-auf 1100ms var(--ease-soft) both}
.intro__spruch{margin:0;font-family:var(--font-display);font-style:italic;
  font-size:clamp(1.375rem,3.6vw,2.375rem);line-height:1.25;color:#141C0C;max-width:22ch;
  text-shadow:0 1px 2px rgba(255,255,255,.9),0 0 14px rgba(255,255,255,.85),0 0 34px rgba(255,255,255,.7);
  animation:intro-auf 1100ms var(--ease-soft) 320ms both}
/* Der Knopf ist unsichtbar, aber vorhanden: mit der Tastatur erreichbar und
   für Screenreader benannt. Ein Vollbild, aus dem man nur durch Warten
   herauskommt, wäre eine Falle. */
.intro__weiter{position:absolute;left:var(--space-4);bottom:var(--space-4);
  min-height:var(--tap-min);padding:0 var(--space-5);border:none;cursor:pointer;
  border-radius:var(--radius-pill);background:rgba(255,253,247,.5);
  color:var(--ink-900);font-family:var(--font-body);font-size:var(--text-micro);
  letter-spacing:var(--tracking-wide);opacity:0;transition:opacity var(--dur-base) var(--ease-soft)}
.intro:hover .intro__weiter,.intro__weiter:focus-visible{opacity:1}
@keyframes intro-auf{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .intro,.intro__bild{transition-duration:1ms}
  .intro__zeichen,.intro__spruch{animation:none}
}

/* ── Cookie-Hinweis ──────────────────────────────────────────────────── */
.keks{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);z-index:50;
  max-width:520px;background:var(--surface-card);border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-6)}
.keks[hidden]{display:none}
.keks p{font-size:var(--text-small);color:var(--text-body);margin:0 0 var(--space-5)}
.keks div{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* ── Einblenden beim Scrollen ────────────────────────────────────────── */
.zeig{opacity:0;transform:translateY(var(--reveal-shift));
  transition:opacity var(--dur-reveal) var(--ease-soft),transform var(--dur-reveal) var(--ease-soft)}
.zeig[data-da]{opacity:1;transform:none}
/* Ohne JavaScript bleibt nichts unsichtbar — sonst wäre die Seite leer. */
.kein-js .zeig{opacity:1;transform:none}

/* ── Bilder ──────────────────────────────────────────────────────────── */
.bildrahmen{display:block;overflow:hidden;position:relative}
.bildrahmen img{transition:transform 900ms var(--ease-soft),filter 600ms var(--ease-soft)}
.bildrahmen:hover img,.bildrahmen:focus-within img{transform:scale(1.06);filter:saturate(1.06)}
figure{margin:0}
figcaption{margin-top:var(--space-3);font-size:var(--text-micro);color:var(--ink-700)}

/* ── Nur groß / nur klein ────────────────────────────────────────────── */
@media (min-width:880px){
  .nav-gross{display:inline-flex}
  .nav-klein{display:none}
  .leiste{display:none}
}
@media (max-width:879px){
  .nav-gross{display:none}
}
@media (prefers-reduced-motion:reduce){
  .zeig{opacity:1;transform:none;transition:none}
  .btn:hover:not([disabled]){transform:none}
}

/* Portraet zwischen den Textabschnitten (Bernadette, 30.09.2026):
   gross, mittig, mit weich auslaufendem Rand - das Bild bringt das
   Ausblenden selbst mit, deshalb hier kein Rahmen und kein Schatten. */
.section--portraet{padding-block:var(--space-6) 0}
.portraet__bild{display:block;margin:0 auto;width:min(86%,420px);height:auto}
@media (max-width:559px){.portraet__bild{width:min(92%,320px)}}

/* Portraet mittig zwischen den beiden Knoepfen im Kopf der Startseite
   (Bernadette, 30.09.2026). Das Bild bringt seinen weichen Rand selbst mit. */

@media (max-width:559px){}
/* Nachtrag 30.09.2026: Mit dem Portraet zwischen den Knoepfen streckten sich
   die Knoepfe auf Bildhoehe und wurden zu Kreisen. */
.buehne__knoepfe{align-items:center}

/* Portraet am unteren Rand der Buehne (Bernadette, 30.09.2026):
   sie sitzt unten, schliesst buendig mit dem Rand ab und laeuft nach oben
   und zu den Seiten weich aus. */

.buehne__innen{position:relative;z-index:2}
@media (max-width:559px){}

/* Portraet rechts unten in der Buehne (Bernadette, 30.09.2026):
   Sie sitzt am unteren Rand und nach rechts versetzt - so laeuft keine
   Textkachel ueber ihr Gesicht. Der weiche Rand bringt das Bild selbst mit. */
.buehne__portraet{position:absolute;right:2%;bottom:0;
  width:clamp(280px,40vw,560px);height:auto;pointer-events:none;user-select:none;z-index:1}
.buehne__innen{position:relative;z-index:2}
/* Schmale Geraete: Text laeuft ueber die ganze Breite, deshalb sitzt sie
   dort kleiner und weiter aussen. */
@media (max-width:899px){.buehne__portraet{right:-6%;width:min(70vw,420px)}}
@media (max-width:559px){.buehne__portraet{right:-14%;width:min(76vw,330px)}}

/* ── Startbereich kompakter (Bernadette, 30.09.2026) ──────────────────────
   Die beiden Knöpfe und die Textkachel sollen klein bleiben, damit das
   Porträt rechts frei steht und am Handy nichts über ihr Gesicht läuft. */
.buehne__knoepfe .btn{font-size:.8125rem;min-height:38px;padding:0 var(--space-4);
  letter-spacing:.01em}
.buehne__knoepfe .btn svg{width:15px;height:15px}
.buehne__knoepfe{gap:var(--space-2);margin-top:var(--space-5)}

/* Textkachel: schmaler, kleinere und engere Schrift */
.buehne__lead{max-width:34ch;font-size:.9375rem;line-height:1.45;
  letter-spacing:-.005em;padding:14px 18px}

@media (max-width:899px){
  .buehne__lead{max-width:30ch;font-size:.875rem}
}
/* Am Handy: Kachel und Knöpfe bleiben links, das Porträt sitzt rechts
   daneben - so überschneidet nichts ihr Gesicht. */
@media (max-width:559px){
  .buehne__lead{max-width:26ch;font-size:.8125rem;line-height:1.4;margin-inline:0;
    padding:12px 14px}
  .buehne__knoepfe{justify-content:flex-start;margin-top:var(--space-4)}
  .buehne__knoepfe .btn{font-size:.75rem;min-height:34px;padding:0 14px}
  .buehne__innen{max-width:64%}
  .buehne__portraet{right:-10%;bottom:0;width:min(52vw,260px)}
}

/* ── Deckkraft und Knopf-Anordnung (Bernadette, 30.09.2026) ──────────────
   Die Deckkraft steckt nicht mehr im Bild, sondern hier - so lässt sie
   sich fürs Handy getrennt einstellen. */
.buehne__portraet{opacity:.60}
@media (max-width:559px){
  .buehne__portraet{opacity:.75}
  /* Knöpfe links und rechts oberhalb der Textkachel */
  .buehne__knoepfe{order:-1;justify-content:space-between;width:100%;
    margin-top:var(--space-4);margin-bottom:var(--space-3);flex-wrap:nowrap}
  .buehne__innen{display:flex;flex-direction:column;max-width:70%}
  .buehne__lead{order:0;margin-top:0}
}

/* Nachtrag: Die Elemente liegen in einem .zeig-Umschlag, nicht direkt in
   .buehne__innen - deshalb muss der Umschlag der Flex-Container sein. */
@media (max-width:559px){
  .buehne__innen > .zeig{display:flex;flex-direction:column}
  .buehne__innen > .zeig > .buehne__knoepfe{order:-1;justify-content:space-between;
    width:100%;flex-wrap:nowrap;margin-top:var(--space-4);margin-bottom:var(--space-3)}
  .buehne__innen > .zeig > .buehne__lead{order:0;margin-top:0}
}

/* Mehr Luft zwischen der fünften Frage und dem Absatz darunter
   (Bernadette, 30.09.2026). */
.fragenliste{margin-bottom:var(--space-6)}
.fragenliste + p{margin-top:var(--space-5)}

/* ── Startbereich linksbündig (Bernadette, 30.09.2026) ───────────────────
   Überschrift, Textkachel und Knöpfe schließen links miteinander ab;
   das Porträt rückt nach und wird kleiner. */
.buehne__innen{text-align:left}
.buehne .abzeichen,.buehne__zeichen{margin-left:0;margin-right:auto}
.buehne h1{margin-left:0;margin-right:0;text-align:left;max-width:16ch}
.buehne__lead{margin-left:0;margin-right:auto;text-align:left}
.buehne__knoepfe{justify-content:flex-start}
.buehne__portraet{right:auto;left:52%;width:clamp(220px,30vw,400px)}

@media (max-width:899px){
  .buehne__portraet{left:auto;right:-4%;width:min(56vw,340px)}
}
@media (max-width:559px){
  .buehne h1{max-width:none}
  .buehne__portraet{left:auto;right:-10%;width:min(50vw,240px)}
}

/* ── Startbereich, Stand 30.09.2026 nachmittags (Bernadette) ─────────────
   Das Porträt wieder groß und rechts unten wie in der Fassung davor.
   Texte bleiben linksbündig, die Knöpfe stehen wieder UNTER der Kachel -
   auch am Handy (die Umstellung nach oben wird zurückgenommen). */
.buehne__portraet{left:auto;right:2%;width:clamp(280px,40vw,560px)}

@media (max-width:899px){
  .buehne__portraet{left:auto;right:-6%;width:min(70vw,420px)}
}
@media (max-width:559px){
  .buehne__portraet{left:auto;right:-14%;width:min(76vw,330px)}
  /* Knöpfe zurück an ihren Platz unter der Textkachel */
  .buehne__innen > .zeig{display:block}
  .buehne__innen > .zeig > .buehne__knoepfe{order:0;justify-content:flex-start;
    width:auto;flex-wrap:wrap;margin-top:var(--space-4);margin-bottom:0}
  .buehne__innen > .zeig > .buehne__lead{order:0}
}

/* ── Kompaktere Seite (Bernadette, 30.09.2026) ───────────────────────────
   Zeilenabstände und Abschnittsabstände zurückgenommen. Die Werte bleiben
   über der Lesbarkeitsgrenze: Fließtext 1.5 statt 1.65, Überschriften 1.15
   statt 1.25. Darunter wird Text auf dem Handy unangenehm zu lesen. */
:root{
  --leading-body:1.5;
  --leading-loose:1.6;
  --leading-snug:1.18;
  --leading-tight:1.04;
}
p,li{line-height:1.5}
h1,h2,h3{line-height:1.15}

/* Abschnitte und Absätze enger */
.section{padding-block:var(--space-7)}
p{margin-bottom:var(--space-3)}
.sec-head{margin-bottom:var(--space-5)}

@media (max-width:559px){
  .section{padding-block:var(--space-6)}
}


/* ── Handy-Ansicht des Startbereichs (Bernadette, 30.09.2026) ───────────
   Am Handy nahm das Logo fast die halbe Höhe ein und die Überschrift brach
   in vier Zeilen. Jetzt beginnt die Seite gleich mit dem Satz – in zwei
   Zeilen –, das Abzeichen rückt darunter, und die Textkachel bleibt so
   schmal, dass sie Friederikes Gesicht frei lässt. */
@media (max-width:559px){
  /* Logo weg – die Wortmarke steht ohnehin oben in der Kopfzeile. */
  .buehne__zeichen{display:none}

  /* Reihenfolge: erst der Satz, dann das Abzeichen. */
  .buehne__innen > .zeig{display:flex;flex-direction:column;align-items:flex-start}

  /* Zwei Zeilen: jede Zeile bleibt zusammen, die Schriftgröße richtet sich
     nach der Gerätebreite. */
  .buehne__innen{max-width:none}
  .buehne h1{white-space:nowrap;font-size:clamp(1.3rem,6.8vw,2.1rem);
    line-height:1.14;max-width:none}
  .buehne h1 span{display:block}

  /* Die Kachel bleibt links und schmal – rechts daneben beginnt ihr Gesicht. */
  .buehne__lead{max-width:min(26ch,56vw)}
}


/* ── Startbereich ohne Logo und Abzeichen (Bernadette, 30.09.2026) ──────
   Beides ist aus der Bühne genommen. Damit oben keine Lücke bleibt, rückt
   der Text nach oben; die Bühne wird kürzer, dadurch steigt auch das
   Porträt mit, das am unteren Rand verankert ist. */
.buehne{min-height:min(74vh,660px)}
.buehne__innen{padding-top:clamp(20px,3vw,40px)}
.buehne h1{margin-top:0}
@media (max-width:559px){
  .buehne{min-height:min(70vh,560px)}
  .buehne__innen{padding-top:var(--space-4)}
}


/* ── "Coaching für Frauen" ganz oben (Bernadette, 30.09.2026) ──────────
   "Termin anfragen" ist aus der Bühne genommen – der Knopf steht weiter
   oben in der Kopfzeile. Der verbliebene Knopf sitzt über der Überschrift,
   damit am Handy kein Balken über Friederikes Gesicht läuft. */
.buehne__knoepfe--oben{margin-top:0;margin-bottom:var(--space-4)}


/* ── Handy-Feinschliff (Bernadette, 30.09.2026) ───────────────────
   Die Farben des Porträts sind am Handy auf 70 % zurückgenommen – das
   Violett des Tüchleins drängte sich sonst vor die Schrift. Außerdem
   stehen Überschrift, Kachel und Knopf wieder bündig links. */
@media (max-width:559px){
  .buehne__portraet{filter:saturate(.7)}
  .buehne__innen{align-items:flex-start}
  .buehne__innen > .zeig{width:100%;align-items:flex-start}
}


/* ── Startbereich bündig links, auf jedem Gerät (Bernadette, 30.09.2026) ─
   Die Regel stand bisher nur im Handy-Block. Auf Geräten dazwischen
   (große Handys, Tablets) rutschte der Text wieder in die Mitte. */
.buehne__innen{align-items:flex-start;text-align:left}
.buehne__innen > .zeig{width:100%;display:flex;flex-direction:column;
  align-items:flex-start}
.buehne__knoepfe{justify-content:flex-start}


/* ── Überschrift im Startbild kleiner (Bernadette, 30.09.2026) ─────────
   72 Pixel liefen bis in Friederikes Gesicht. Jetzt gut ein Fünftel
   kleiner. Am Handy gilt weiter der eigene Wert aus dem Handy-Block. */
.buehne h1{font-size:clamp(1.75rem,4.5vw,3.6rem)}


/* ── Portraet passt immer in die Buehne (Bernadette, 01.10.2026) ──────
   Das neue Foto ist hochformatiger. Mit fester Breite war es bei niedrigen
   Fenstern hoeher als die Buehne und der Kopf wurde oben abgeschnitten.
   Hoechstbreite und Hoechsthoehe zusammen: das Bild nimmt den kleineren
   Wert und bleibt im Verhaeltnis. */
.buehne__portraet{width:auto;height:auto;
  max-width:clamp(280px,40vw,560px);max-height:100%}
@media (max-width:899px){
  .buehne__portraet{width:auto;max-width:min(70vw,420px)}
}
@media (max-width:559px){
  .buehne__portraet{width:auto;max-width:min(76vw,330px)}
}


/* ── Portraet naeher am Text, Farben eingestellt (Bernadette, 01.10.2026) ─
   Sie rueckt vom rechten Rand weg zur Schrift hin. Die Saettigung steht am
   Handy auf 70 Prozent (wie am 30.09. vereinbart) und am Rechner auf 60 -
   dort darf sie etwas kraeftiger sein, weil das Bild groesser wirkt. */
.buehne__portraet{right:10%;filter:saturate(.7)}

@media (max-width:899px){
  .buehne__portraet{right:2%}
}
@media (max-width:559px){
  .buehne__portraet{right:-14%;filter:saturate(.7)}
}


/* ── Handy: die Dame ganz im Bild (Bernadette, 01.10.2026) ──────────
   Das neue Foto ist naeher an ihr dran. Mit dem bisherigen Versatz lag ein
   Teil ihres Kopfes ausserhalb des Bildschirms. Sie rueckt herein und wird
   dafuer etwas kleiner - sonst liefe die Textkachel ueber ihr Gesicht. */
@media (max-width:559px){
  .buehne__portraet{right:-2%;max-width:min(68vw,300px)}
}


/* ── Die Dame wird deckend (Bernadette, 01.10.2026) ──────────────
   Bei 60 Prozent schien der Strand durch ihr Gesicht - Palmwedel und
   Horizont liefen quer durch. Sie steht jetzt deckend vor dem Bild; der
   weiche Rand der Freistellung sorgt weiter dafuer, dass sie nicht
   aufgeklebt wirkt. Saettigung unveraendert: Rechner 60, Handy 70. */
.buehne__portraet{opacity:1}
@media (max-width:559px){
  .buehne__portraet{opacity:1}
}


/* ── Text und Person naeher zusammen (Bernadette, 01.10.2026) ────────
   Auf breiten Bildschirmen klaffte in der Mitte eine leere Flaeche. Die
   Schrift rueckt vom linken Rand weg, die Dame vom rechten - beide zur
   Mitte hin. Am Handy bleibt alles wie bisher, dort ist kein Platz uebrig. */
@media (min-width:900px){
  .buehne__innen{padding-left:clamp(var(--gutter),7vw,120px)}
  .buehne__portraet{right:17%}
}


/* ── Der Hintergrund wird wieder klar (Bernadette, 01.10.2026) ───────
   Ueber dem Startbild lagen zwei weisse Schichten. Der runde Lichtfleck
   in der Mitte gehoerte zum Logo, das seit gestern weg ist - er faellt
   mit weg. Der Verlauf von oben bleibt, aber nur so stark, dass die
   Ueberschrift lesbar bleibt; der Strand darunter bleibt gestochen. */
.buehne__licht{display:none}
.buehne__schleier{
  background:linear-gradient(180deg,
    rgba(253,251,246,.45) 0%,
    rgba(253,251,246,.34) 30%,
    rgba(253,251,246,.10) 60%,
    rgba(253,251,246,0) 100%)}

/* Die Dame bleibt bei 70 Prozent Saettigung - sie soll sich wie eine
   Silhouette ins Bild legen, waehrend der Strand klar bleibt. */
.buehne__portraet{filter:saturate(.7)}

/* ── Die Dame als Silhouette (Bernadette, 01.10.2026) ─────────────────────
   Stark entsaettigt: sie liest sich als ruhige Gestalt im Bild, waehrend
   der Strand hinter ihr farbig und klar bleibt. Der Wert steht hier an
   einer Stelle und laesst sich in einem Zug nachstellen. */
.buehne__portraet{filter:saturate(.7)}
@media (max-width:559px){
  .buehne__portraet{filter:saturate(.7)}
}

/* ── Nur noch die Umrisse (Bernadette, 01.10.2026) ────────────────────────
   Der Strand soll vorne stehen, von ihr nur die Gestalt zu sehen sein.
   Deshalb wird sie wieder durchscheinend - diesmal aber weit genug, dass
   es als Absicht liest und nicht als Doppelbelichtung wie bei 60 Prozent.
   Saettigung bleibt bei 30 Prozent. */
.buehne__portraet{opacity:.7}
@media (max-width:559px){
  .buehne__portraet{opacity:.7}
}


/* ── Die vier Bereichsknoepfe in eine Reihe (Bernadette, 01.10.2026) ──
   Seit der zweite Knopf "Paargespraeche national & binational" heisst, ist
   er so breit, dass der vierte umbricht. Auf breiten Bildschirmen stehen
   sie jetzt nebeneinander: kleinere Schrift, weniger Innenabstand, kein
   Umbruch. Schmale Geraete behalten den Umbruch - dort ist kein Platz, und
   abgeschnittene Beschriftungen waeren schlimmer als zwei Reihen. */
@media (min-width:1024px){
  .chips--weiter{flex-wrap:nowrap;gap:var(--space-2);align-items:stretch}
  .chips--weiter .chip--weiter{flex:0 1 auto;min-width:0;
    padding:0 var(--space-3);gap:var(--space-2);
    font-size:.8125rem;letter-spacing:-.005em;text-align:left}
  .chips--weiter .chip--weiter svg{width:15px;height:15px}
}

/* ══ KALENDER (Cal.com) ══════════════════════════════════════════════════
   Wiederhergestellt am 01.10.2026 aus der Abendsicherung vom 30.09.
   Stand vorher inline in termin.html und ging beim Neubau verloren.
   Die Regeln greifen nur, wo #ht-kalender steht — auf allen anderen
   Seiten kosten sie nichts.

   Die Hoehe steht auf ALLEN DREI EBENEN ausdruecklich: Kasten, Cal-Rahmen
   und iframe. Wer sie nur oben setzt, verliert sie: Cal.coms Rahmen traegt
   'height:inherit' und der iframe 'height:100%' — beide erben dann eine
   Hoehe, die es nicht gibt, und fallen auf 300 px zusammen.
   640 px decken den hoechsten Schritt ab. 960 px, weil Cal.coms
   Buchungsbildschirm nicht breiter wird — alles darueber waere Leerraum. */
#ht-kalender{height:640px;max-width:960px;margin:0 auto}
/* ⚠ `cal-inline` ist ein Flex-Element und zentriert senkrecht. Bei fester
   Rahmenhoehe entsteht dadurch OBEN Leerraum — genau die Luecke unter der
   Stufenleiste, ueber die sich niemand erklaeren konnte. Oben ausrichten:
   was uebrig bleibt, sammelt sich unten. (Konstantin, 30.09.2026) */
#ht-kalender cal-inline{align-items:flex-start}
/* Sobald der Kalender laeuft, tritt UNSERE Karte zurueck: Cal.com bringt
   eine eigene mit, und zwei Karten ineinander sind eine zu viel.
   (Konstantin, 30.09.2026) */
#buchung[data-kalender-offen="ja"]{
  background:transparent!important;border-color:transparent!important;
  box-shadow:none!important;
  padding-left:0;padding-right:0;padding-bottom:0}
/* Die Stufenleiste gehoert uns und bleibt — sie ist der einzige Ort, an dem
   die Besucherin sieht, wo sie steht. */
#buchung[data-kalender-offen="ja"] .stufen{margin-bottom:var(--space-4,18px)}
#ht-kalender .cal-element-embed-light,
#ht-kalender cal-inline{height:640px;min-height:640px;width:100%}
#ht-kalender iframe{width:100%;display:block;height:640px;border:0}
@media (max-width:900px){
  /* Am Handy zaehlt jede Zeile: dort ist der Bildschirm der Rahmen. */
  #ht-kalender,
  #ht-kalender .cal-element-embed-light,
  #ht-kalender cal-inline,
  #ht-kalender iframe{height:600px;min-height:600px}
}

/* ══ ANFRAGEFORMULAR ═════════════════════════════════════════════════════
   Wiederhergestellt am 01.10.2026 aus der Abendsicherung vom 30.09.
   Stand vorher inline in kontakt.html und ging beim Neubau verloren. */
#anfrage label{display:block;margin-top:var(--space-3)}
#anfrage input,#anfrage textarea{width:100%;font-family:inherit;
  font-size:16px;padding:.7rem .85rem;
  border:1px solid var(--border-hairline);border-radius:10px;
  background:var(--surface-page);color:var(--text-body);min-height:44px}
#anfrage textarea{min-height:120px;resize:vertical}
#anfrage input:focus-visible,#anfrage textarea:focus-visible{
  outline:2px solid var(--text-accent);outline-offset:1px}
#anfrage .haken input{width:auto;min-height:0}

/* ══ FUSSNAVIGATION DER RECHTSTEXTE ══════════════════════════════════════
   01.10.2026, Konstantin: „von AGB zu Datenschutz oder Impressum".
   Steht unter dem Text, nicht in der Fußzeile der Seite. */
.rechtsnav{display:flex;flex-wrap:wrap;gap:var(--space-3);
  margin-top:var(--space-6);padding-top:var(--space-5);
  border-top:1px solid var(--border-hairline)}
.rechtsnav a{display:inline-flex;align-items:center;gap:var(--space-2);
  min-height:var(--tap-min);padding:0 var(--space-4);
  border:1px solid var(--border-hairline);border-radius:var(--radius-pill);
  color:var(--text-body);text-decoration:none;font-size:var(--text-small)}
.rechtsnav a:hover{border-color:var(--text-accent);color:var(--text-accent)}
.rechtsnav a[aria-current="page"]{background:var(--surface-sunken);
  color:var(--text-muted);border-style:dashed;pointer-events:none}
.rechtsnav svg{width:16px;height:16px;flex:none}


/* ── Unterzeile unter der Seitenüberschrift (Bernadette, 02.10.2026) ──
   Sie steht zwischen Überschrift und Einleitung und soll etwas mehr
   Gewicht haben als der Fließtext, aber weniger als die Überschrift. */
.lead--unter{font-weight:var(--weight-semibold);color:var(--text-body);
  margin-bottom:var(--space-3)}


/* ══ Startbereich neu, 02.10.2026 (Bernadette fuer die Kundin) ══════
   Person klein in der Mitte, links und rechts je ein Knopf, der
   Hintergrund blendet zu den Seiten aus. Vorbild: Fundora.

   Dieser Block steht bewusst am Ende und setzt die frueheren Regeln
   ausser Kraft - das Portraet haengt nicht mehr am rechten Rand. */

/* Hintergrund seitlich ausblenden. Eine Maske statt eines aufgelegten
   Streifens: Sie blendet das Foto in die Seitenfarbe aus, egal welche
   das gerade ist. */
.buehne__grund{
  -webkit-mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 84%, rgba(0,0,0,0) 100%)}

/* Alles mittig */
.buehne__innen{align-items:center;text-align:center;max-width:var(--page-max);
  padding-left:var(--gutter);padding-right:var(--gutter);
  padding-bottom:0;justify-content:center}
.buehne__innen > .zeig{width:100%;align-items:center;display:flex;
  flex-direction:column}
.buehne h1{text-align:center;max-width:18ch;margin-left:auto;margin-right:auto;
  white-space:normal}
.buehne h1 span{display:block}
.buehne__lead{margin-left:auto;margin-right:auto;text-align:center;
  max-width:46ch;background:none;box-shadow:none;padding:0}

/* Die Reihe: Knopf, Person, Knopf */
.buehne__reihe{display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(12px,3vw,40px);width:100%;margin-top:var(--space-6)}
.buehne__seite{flex:0 0 auto;padding-bottom:clamp(16px,6vh,56px)}

/* Die Person: klein, in der Reihe stehend, nicht mehr verankert */
.buehne__portraet{position:static;left:auto;right:auto;bottom:auto;
  flex:0 0 auto;width:clamp(150px,20vw,260px);max-width:none;max-height:none;
  height:auto;display:block;filter:saturate(.7);opacity:1}

/* Buehne darf wieder kuerzer werden - das Portraet traegt die Hoehe nicht
   mehr allein. */
.buehne{min-height:min(78vh,680px)}
.buehne__innen{padding-top:clamp(28px,6vw,64px)}

/* Am Handy nebeneinander zu eng: Person oben, Knoepfe darunter. */
@media (max-width:719px){
  .buehne__reihe{flex-wrap:wrap;gap:var(--space-3)}
  .buehne__portraet{order:-1;width:min(58vw,230px);filter:saturate(.7)}
  .buehne__seite{padding-bottom:0;flex:1 1 auto}
  .buehne__seite .btn{width:100%;justify-content:center}
  .buehne__grund{
    -webkit-mask-image:linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,1) 9%, rgba(0,0,0,1) 91%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,1) 9%, rgba(0,0,0,1) 91%, rgba(0,0,0,0) 100%)}
}


/* ── Weicher Schein um die Dame (Bernadette, 02.10.2026) ───────────
   Zwei weisse Schlagschatten uebereinander: einer eng und hell direkt an
   der Silhouette, einer weit und schwach darum herum. Dadurch loest sich
   die Kante auf, statt wie ausgeschnitten dazustehen.
   Der Schlagschatten folgt der Form des freigestellten Bildes - auch den
   Haarspitzen. Ein Kreis dahinter koennte das nicht.
   Die Saettigung steht mit in der Zeile: `filter` gilt immer ganz. */
.buehne__portraet{
  filter:saturate(.7)
         drop-shadow(0 0 16px rgba(255,255,255,.85))
         drop-shadow(0 0 46px rgba(255,255,255,.55))}

@media (max-width:719px){
  /* Am Handy ist sie kleiner - der Schein darf nicht mitwachsen, sonst
     wird sie zu einem hellen Fleck. */
  .buehne__portraet{
    filter:saturate(.7)
           drop-shadow(0 0 11px rgba(255,255,255,.85))
           drop-shadow(0 0 30px rgba(255,255,255,.55))}
}


/* ── Milderer Schein am Handy (Bernadette, 02.10.2026) ─
   Der Schein am Handy wird schwaecher:
   auf dem kleinen Bild wirkte er sonst wie Nebel statt wie Licht.
   Die Saettigung muss in jeder filter-Zeile mitstehen - `filter` gilt
   immer ganz, es gibt keine Teilaenderung. */
@media (max-width:719px){
  .buehne__portraet{filter:saturate(.7)
           drop-shadow(0 0 8px rgba(255,255,255,.55))
           drop-shadow(0 0 22px rgba(255,255,255,.32))}
}


/* ── Handy: Person naeher an den Knopf (Bernadette, 02.10.2026) ─────
   Zwischen Bildunterkante und gruenem Knopf lagen 12 Punkte. Der weisse
   Schein endet dort als heller Streifen - dadurch wirkte die Luecke
   groesser, als sie war. Die Person rueckt 20 Punkte tiefer; der Schein
   laeuft leicht hinter den Knopf und verbindet beide. */
@media (max-width:719px){
  .buehne__portraet{margin-bottom:-8px}
  .buehne__reihe{gap:var(--space-2)}
}


/* ══ Handy: Person zurueck an den Rand (Bernadette, 05.10.2026) ═════
   Am Rechner bleibt alles wie es ist - dieser Block greift nur bis 719
   Punkte Breite.

   Die Person muss dafuer AUS der Knopfreihe heraus und wieder frei
   verankert werden: In der Reihe koennte sie nicht ueber den Bildrand
   hinausragen, und genau das macht den Eindruck aus.

   Textblock auf die linke Haelfte begrenzt und wieder linksbuendig -
   mittiger Text neben einer Figur am Rand liest sich schief. */
@media (max-width:719px){

  /* Person: frei am rechten Rand, etwas groesser als vorher */
  .buehne__portraet{
    position:absolute;right:-12%;bottom:0;left:auto;
    width:min(78vw,350px);max-width:none;max-height:none;height:auto;
    margin:0;order:0;z-index:1;pointer-events:none;
    filter:saturate(.6)
           drop-shadow(0 0 10px rgba(255,255,255,.5))
           drop-shadow(0 0 26px rgba(255,255,255,.3))}

  /* Text und Knoepfe liegen darueber und bleiben links */
  .buehne__innen{position:relative;z-index:2;align-items:flex-start;
    text-align:left}
  .buehne__innen > .zeig{align-items:flex-start;width:100%}
  .buehne h1{text-align:left;margin-left:0;margin-right:0;max-width:13ch}
  .buehne__lead{text-align:left;margin-left:0;margin-right:0;
    max-width:min(30ch,60%)}

  /* Die beiden Knoepfe untereinander in der linken Haelfte */
  .buehne__reihe{flex-direction:column;align-items:stretch;
    width:min(62%,240px);margin:var(--space-5) auto 0 0;
    gap:var(--space-2);flex-wrap:nowrap}
  .buehne__seite{width:100%;flex:0 0 auto;padding-bottom:0}
  .buehne__seite .btn{width:100%;justify-content:center}
}


/* ══ Nachbesserung Handy-Rand (Bernadette, 05.10.2026) ═══════════
   1. Bezugspunkt: `.buehne__innen` und `.buehne__reihe` duerfen NICHT
      positioniert sein, sonst haengt die Person an ihnen statt an der
      Buehne und steht zu hoch. Text und Knoepfe kommen deshalb einzeln
      nach vorn.
   2. Abstand: Knoepfe schmaler, Person weiter nach rechts - sonst lagen
      die Knoepfe auf ihrem Gesicht. */
@media (max-width:719px){
  .buehne__innen{position:static}
  .buehne__reihe{position:static;width:min(54%,210px)}

  .buehne__innen > .zeig > h1,
  .buehne__innen > .zeig > .buehne__lead{position:relative;z-index:2}
  .buehne__seite{position:relative;z-index:2}

  .buehne__portraet{right:-16%;z-index:1}
}


/* ══ Handy: Knopftext bleibt im Knopf (Bernadette, 05.10.2026) ══════
   Im Testfenster passte der Text auf einen Punkt genau - auf dem echten
   Handy lief er hinaus. Android skaliert die Systemschrift, wenn der
   Nutzer das so eingestellt hat; ein Knopf, der nur knapp passt, platzt
   dort. Mehr Breite, kleinere Schrift, weniger Innenabstand - zusammen
   rund 50 Punkte Reserve.
   Dazu: Saettigung am Handy auf 45 Prozent. */
@media (max-width:719px){
  .buehne__reihe{width:min(66%,250px)}
  .buehne__seite .btn{font-size:.9375rem;padding:0 16px;gap:var(--space-2);
    white-space:nowrap}
  .buehne__seite .btn svg{width:16px;height:16px;flex:none}

  .buehne__portraet{
    filter:saturate(.45)
           drop-shadow(0 0 10px rgba(255,255,255,.5))
           drop-shadow(0 0 26px rgba(255,255,255,.3))}
}


/* ══ Handy: mehr Abstand zum Kopf (Bernadette, 05.10.2026) ════════
   Knoepfe schmaler UND Schrift kleiner - beides zusammen, sonst platzt
   der Text auf einem Handy mit grosser Systemschrift wieder heraus.
   Die Person wird eine Spur kleiner und rueckt weiter nach rechts.
   Saettigung 35 Prozent. */
@media (max-width:719px){
  .buehne__reihe{width:min(56%,205px);gap:10px}
  .buehne__seite .btn{font-size:.8125rem;padding:0 13px;min-height:42px;
    letter-spacing:0}
  .buehne__seite .btn svg{width:15px;height:15px}

  .buehne__portraet{width:min(70vw,310px);right:-17%;
    filter:saturate(.35)
           drop-shadow(0 0 10px rgba(255,255,255,.5))
           drop-shadow(0 0 26px rgba(255,255,255,.3))}
}


/* ══ Am Rechner wie am Handy (Bernadette, 05.10.2026) ════════════
   Dieselbe Anordnung auf allen Geraeten: Person gross am rechten Rand,
   Text und beide Knoepfe links. Die frueheren Regeln fuer die mittige
   Fassung werden damit ausser Kraft gesetzt.

   Wichtig fuer den naechsten, der hier arbeitet: Das Portraet darf
   keinen positionierten Elternblock haben, sonst haengt es am Textblock
   statt an der Buehne und steht zu hoch. Deshalb bleiben
   `.buehne__innen` und `.buehne__reihe` ohne Positionierung; Text und
   Knoepfe kommen einzeln nach vorn. */
@media (min-width:720px){
  .buehne__innen{position:static;align-items:flex-start;text-align:left}
  .buehne__innen > .zeig{align-items:flex-start;width:100%}
  .buehne__reihe{position:static;flex-direction:column;align-items:stretch;
    width:min(46%,300px);margin:var(--space-6) auto 0 0;gap:var(--space-3);
    flex-wrap:nowrap}

  .buehne h1{text-align:left;margin-left:0;margin-right:0;max-width:15ch}
  .buehne__lead{text-align:left;margin-left:0;margin-right:0;
    max-width:min(38ch,52%)}

  .buehne__seite{width:100%;flex:0 0 auto;padding-bottom:0;
    position:relative;z-index:2}
  .buehne__seite .btn{width:100%;justify-content:center;font-size:.9375rem}

  .buehne__innen > .zeig > h1,
  .buehne__innen > .zeig > .buehne__lead{position:relative;z-index:2}

  .buehne__portraet{position:absolute;right:-6%;bottom:0;left:auto;
    width:min(52vw,620px);max-width:none;max-height:100%;height:auto;
    margin:0;z-index:1;pointer-events:none;
    filter:saturate(.35)
           drop-shadow(0 0 14px rgba(255,255,255,.5))
           drop-shadow(0 0 38px rgba(255,255,255,.3))}
}


/* ══ Dame unverzerrt und kleiner (Bernadette, 05.10.2026) ═════════
   Eine FESTE Breite zusammen mit einer Hoechsthoehe staucht das Bild:
   greift die Hoehe, haelt der Browser die Breite fest. Deshalb nur
   HOECHSTwerte - dann nimmt das Bild den kleineren und bleibt im
   Verhaeltnis.
   Ausserdem kleiner: hoechstens 460 statt 620 Punkte. */
@media (min-width:720px){
  .buehne__portraet{width:auto;height:auto;
    max-width:min(40vw,460px);max-height:100%}
}
@media (max-width:719px){
  .buehne__portraet{width:auto;height:auto;
    max-width:min(70vw,310px);max-height:none}
}


/* ══ Text und Dame zur Mitte (Bernadette, 05.10.2026) ═══════════════════
   Beide klebten am Rand - der Text am linken Seitenrand, die Dame ragte
   rechts sogar hinaus. Der Text rueckt ein, sie steht ganz im Bild und
   mit Abstand zum rechten Rand. Nur am Rechner: am Handy ist die
   Flaeche zu schmal, um Rand zu verschenken. */
@media (min-width:720px){
  .buehne__innen{padding-left:clamp(var(--gutter),9vw,150px)}
  /* 12 statt 5 Prozent: rund 100 Punkte mehr Abstand zum rechten Rand
     (Bernadette, 05.10.2026). */
  .buehne__portraet{right:12%}
}



/* ══ Bildzitat: Zeilenmass am richtigen Text (Bernadette, 05.10.2026) ══
   `max-width:26ch` hing am Kasten, der eine kleine Schrift traegt - der
   Zitattext darin ist gut doppelt so gross. `ch` rechnet aber immer mit
   der Schrift des eigenen Elements. Gemeint waren 26 Zeichen Zitat,
   gewirkt haben rund zwoelf: am Handy ein Wort je Zeile, am Rechner ein
   248 Punkte schmales Band ueber neun Zeilen.

   Das Mass haengt jetzt am Absatz, wo die Zitatschrift gilt. Damit
   stimmt es auch dann noch, wenn die Schriftgroesse spaeter geaendert
   wird. Die Zentrierung war nie das Problem - sie stand immer auf
   `center` und bleibt es. */
.bildzitat__innen{max-width:none}
.bildzitat__innen > p{max-width:26ch;margin-left:auto;margin-right:auto}


/* ══ Rufnummern nicht entzweibrechen (05.10.2026) ═══════════════════════
   Die Fussspalte ist 240 Punkte breit; "Aegypten, vor Ort: +20 100 936
   69 71" passt nicht in eine Zeile. Ohne diese Regel bricht der Browser
   mitten in der Nummer um. Mit ihr bricht er zwischen Beschriftung und
   Nummer - die Nummer bleibt als Ganzes lesbar. */
.nichttrennen{white-space:nowrap}