/* ═══════════════════════════════════════════════════════════════════════════
   Gestaltungsvarianten des Basis-Designs „Amara" (template-one):
   Farbdesign · Schriftpaarung · Formensprache · Bildstil.

   WARUM EINE EIGENE DATEI: public/site.html lädt sie — wie Template1/styles.css —
   unbedingt, also auch wenn Strähne oder Myra aktiv sind. Anders als styles.css
   ist hier aber JEDE Regel an ein data-t1-*-Attribut gebunden, das ausschließlich
   der Renderer dieses Designs setzt (public/app/template-one-renderer.jsx, plus
   das Kopf-Script in site.html). Ohne das Attribut greift keine Zeile dieser Datei.
   Damit ist sie für die anderen Designs nachweisbar wirkungslos.

   ZWEITE REGEL: Jede Variable, die hier gesetzt wird, hat ihren Standardwert auf
   dem NACKTEN :root in Template1/styles.css. Eine unaufgelöste var() fällt nicht
   auf den vorherigen Wert zurück, sondern auf den Initialwert der Eigenschaft.
   Weil Strähne die ungescopte Klasse `btn` mitbenutzt, hieße das dort z. B.
   border-radius:0 statt Pillenform.

   Keine Regel in dieser Datei stylt ein Element — sie setzt nur Variablen.
   Ausnahmen sind unten ausdrücklich gekennzeichnet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══ FARBDESIGNS ═══════════════════════════════════════════════════════════
   Die Helligkeitsleiter ist in allen sechs gleich, verschoben sind nur Buntheit
   und Farbwinkel. „elfenbein" ist eine exakte Kopie der :root-Werte — dadurch
   ändert die Standardauswahl das heutige Aussehen um kein Pixel. */

:root[data-t1-scheme='elfenbein'] {
  --bg: oklch(0.972 0.012 78);
  --bg-2: oklch(0.955 0.014 75);
  --surface: oklch(0.99 0.006 78);
  --t1-tile: oklch(0.99 0.006 78);
  --beige: oklch(0.88 0.024 70);
  --beige-2: oklch(0.82 0.030 65);
  --rose: oklch(0.86 0.038 22);
  --rose-2: oklch(0.78 0.050 22);
  --on-rose: oklch(0.22 0.008 60);
  --ink: oklch(0.22 0.008 60);
  --ink-2: oklch(0.38 0.010 60);
  --muted: oklch(0.58 0.010 60);
  --line: oklch(0.88 0.010 70);
  --line-2: oklch(0.82 0.014 70);
  --gold: oklch(0.62 0.060 75);
  --map-grid: oklch(0.7 0.02 70);
  --map-street: oklch(0.65 0.02 70);
}

:root[data-t1-scheme='leinen'] {
  --bg: oklch(0.968 0.014 74);
  --bg-2: oklch(0.948 0.018 70);
  --surface: oklch(0.988 0.008 74);
  --t1-tile: oklch(0.988 0.008 74);
  --beige: oklch(0.875 0.030 66);
  --beige-2: oklch(0.815 0.038 60);
  --rose: oklch(0.845 0.052 46);
  --rose-2: oklch(0.760 0.070 44);
  --on-rose: oklch(0.22 0.010 50);
  --ink: oklch(0.225 0.012 52);
  --ink-2: oklch(0.385 0.014 52);
  --muted: oklch(0.585 0.012 52);
  --line: oklch(0.875 0.014 66);
  --line-2: oklch(0.815 0.018 66);
  --gold: oklch(0.615 0.072 62);
  --map-grid: oklch(0.70 0.024 66);
  --map-street: oklch(0.65 0.026 62);
}

:root[data-t1-scheme='salbei'] {
  --bg: oklch(0.972 0.010 128);
  --bg-2: oklch(0.951 0.014 128);
  --surface: oklch(0.990 0.006 128);
  --t1-tile: oklch(0.990 0.006 128);
  --beige: oklch(0.878 0.024 132);
  --beige-2: oklch(0.818 0.030 132);
  --rose: oklch(0.855 0.038 140);
  --rose-2: oklch(0.755 0.052 142);
  --on-rose: oklch(0.21 0.012 140);
  --ink: oklch(0.215 0.012 140);
  --ink-2: oklch(0.375 0.014 140);
  --muted: oklch(0.575 0.012 140);
  --line: oklch(0.875 0.012 132);
  --line-2: oklch(0.815 0.016 132);
  --gold: oklch(0.605 0.060 128);
  --map-grid: oklch(0.70 0.018 132);
  --map-street: oklch(0.65 0.020 132);
}

:root[data-t1-scheme='rosenholz'] {
  --bg: oklch(0.972 0.012 20);
  --bg-2: oklch(0.950 0.016 18);
  --surface: oklch(0.990 0.007 20);
  --t1-tile: oklch(0.990 0.007 20);
  --beige: oklch(0.878 0.026 16);
  --beige-2: oklch(0.815 0.034 14);
  --rose: oklch(0.845 0.052 12);
  --rose-2: oklch(0.745 0.068 10);
  --on-rose: oklch(0.22 0.012 14);
  --ink: oklch(0.225 0.012 14);
  --ink-2: oklch(0.385 0.014 14);
  --muted: oklch(0.585 0.012 14);
  --line: oklch(0.875 0.014 16);
  --line-2: oklch(0.812 0.018 16);
  --gold: oklch(0.610 0.062 30);
  --map-grid: oklch(0.70 0.020 16);
  --map-street: oklch(0.65 0.022 14);
}

:root[data-t1-scheme='schiefer'] {
  --bg: oklch(0.972 0.006 230);
  --bg-2: oklch(0.950 0.010 230);
  --surface: oklch(0.992 0.004 230);
  --t1-tile: oklch(0.992 0.004 230);
  --beige: oklch(0.878 0.018 232);
  --beige-2: oklch(0.815 0.024 234);
  --rose: oklch(0.850 0.036 232);
  --rose-2: oklch(0.748 0.052 234);
  --on-rose: oklch(0.20 0.014 240);
  --ink: oklch(0.210 0.014 240);
  --ink-2: oklch(0.370 0.016 240);
  --muted: oklch(0.570 0.014 240);
  --line: oklch(0.875 0.010 232);
  --line-2: oklch(0.812 0.014 232);
  --gold: oklch(0.600 0.052 232);
  --map-grid: oklch(0.70 0.014 232);
  --map-street: oklch(0.65 0.016 232);
}

/* Dunkles Farbdesign. --ink ist hier HELL und --bg dunkel; alles, was Tokens benutzt,
   dreht sich damit korrekt mit. Die drei großen dunklen Flächen laufen NICHT über --ink,
   sondern über die --invert-*-Skala (siehe unten) — sonst würden sie hier weiß.
   --rose-2 ist heller als --rose, damit der kursive Akzent in Überschriften
   (.display em) leuchtet, statt im Grund zu versinken. */
:root[data-t1-scheme='nacht'] {
  --bg: oklch(0.190 0.010 62);
  --bg-2: oklch(0.232 0.011 60);
  --surface: oklch(0.262 0.012 60);
  /* Eine Stufe heller als --surface: auf dunklem Grund trägt der Abstand von --bg-2
     zu --surface (0.030) kaum, die Kachel verschwömme wieder mit dem Band. */
  --t1-tile: oklch(0.285 0.013 60);
  --beige: oklch(0.720 0.028 70);
  --beige-2: oklch(0.630 0.034 65);
  --rose: oklch(0.680 0.058 26);
  --rose-2: oklch(0.790 0.062 28);
  --on-rose: oklch(0.170 0.010 30);
  --ink: oklch(0.955 0.008 78);
  --ink-2: oklch(0.800 0.010 72);
  --muted: oklch(0.620 0.010 66);
  --line: oklch(0.340 0.012 60);
  --line-2: oklch(0.430 0.014 60);
  --gold: oklch(0.760 0.070 80);
  --map-grid: oklch(0.40 0.014 60);
  --map-street: oklch(0.46 0.018 60);

  /* Große dunkle Flächen: im hellen Design sind sie dunkler als der Grund, hier müssen
     sie HELLER sein — sonst verschmölzen TopStrip, Stimmen und Footer mit der Seite. */
  --invert-bg: oklch(0.262 0.012 58);
  --invert-surface: oklch(0.310 0.013 58);
  --invert-ink: oklch(0.960 0.008 78);
  --invert-ink-2: oklch(0.860 0.020 70);
  --invert-ink-3: oklch(0.830 0.016 70);
  --invert-ink-4: oklch(0.760 0.018 70);
  --invert-muted: oklch(0.640 0.010 60);
  --invert-muted-2: oklch(0.660 0.010 60);
  --invert-line: oklch(0.470 0.012 60);
  --invert-line-2: oklch(0.400 0.012 60);
  --invert-line-3: oklch(0.345 0.010 60);
  --invert-accent: oklch(0.480 0.045 25);

  /* Platzhalter (kein Foto gepflegt) und Bild-Etiketten */
  --ph-stripe: oklch(0.42 0.012 62 / 0.5);
  --ph-from: oklch(0.310 0.012 62);
  --ph-to: oklch(0.255 0.012 62);
  --ph-ink: oklch(0.760 0.014 70);
  --ph-rose-stripe: oklch(0.46 0.040 26 / 0.5);
  --ph-rose-from: oklch(0.360 0.040 26);
  --ph-rose-to: oklch(0.290 0.044 26);
  --ph-dark-stripe: oklch(0.44 0.012 60 / 0.5);
  --ph-dark-from: oklch(0.330 0.012 60);
  --ph-dark-to: oklch(0.262 0.012 60);
  --ph-dark-fg: oklch(0.820 0.018 70);
  --tag-bg: oklch(0.30 0.012 60 / 0.72);
  --tag-dark-bg: oklch(0.20 0.010 60 / 0.6);
  --tag-dark-fg: oklch(0.930 0.010 70);

  --btn-primary-hover: oklch(0.880 0.010 78);
  --btn-light-hover: oklch(0.310 0.013 60);
  --err: oklch(0.72 0.150 27);
  --scrim: oklch(0.10 0.010 60 / 0.72);
  --shadow-s: 0 1px 2px oklch(0 0 0 / 0.28);
  --shadow-m: 0 12px 40px -18px oklch(0 0 0 / 0.55);
  --shadow-l: 0 30px 80px -30px oklch(0 0 0 / 0.62);
}

/* ══ EIGENE AKZENTFARBE ════════════════════════════════════════════════════
   Feld `accentColor` (ohne Default — leer heißt „Akzent des Farbdesigns"). Der Renderer
   setzt --t1-accent als Inline-Property an <html> und das Attribut data-t1-accent als
   Selektor-Haken; ohne gewählte Farbe fehlt beides und keine Zeile hier greift.

   Übernommen werden Farbton und Buntheit, NICHT die Helligkeit. Amaras --rose ist eine
   helle FÜLLFLÄCHE mit dunkler --on-rose-Schrift darauf, --rose-2 dagegen eine TEXTFARBE
   (.display em, Bewertungssterne, .btn-rose:hover). Ein roh durchgereichtes dunkles
   Bordeaux trüge also dunkle Schrift, ein rohes Pastell wäre als Text unsichtbar — die
   Helligkeitsleiter des Designs bleibt deshalb stehen. Die min()-Kappen halten Neontöne
   auf Amaras zurückgenommenem Niveau.

   Das @supports ist ein echter Merkmalstest auf genau diese Syntax: ohne relative Farben
   greift der ganze Block nicht und der Salon behält den Akzent seines Farbdesigns —
   statt dass var(--rose) „ungültig auf berechnetem Wert" wird und Flächen verschwinden. */
@supports (color: oklch(from red 0.5 min(c, 0.1) h)) {
  :root[data-t1-accent] {
    --rose: oklch(from var(--t1-accent) 0.855 min(c, 0.09) h);
    --rose-2: oklch(from var(--t1-accent) 0.755 min(c, 0.12) h);
    --on-rose: oklch(from var(--t1-accent) 0.200 min(c, 0.02) h);
    /* Die Rosé-Platzhalter (styles.css, .imgph.rose) blieben sonst im alten Farbton stehen. */
    --ph-rose-stripe: oklch(from var(--t1-accent) 0.74 min(c, 0.05) h / 0.45);
    --ph-rose-from: oklch(from var(--t1-accent) 0.90 min(c, 0.04) h);
    --ph-rose-to: oklch(from var(--t1-accent) 0.83 min(c, 0.05) h);
  }

  /* „nacht" dreht die Leiter um: dort ist --rose die dunklere und --rose-2 die hellere
     Stufe. --on-rose bleibt dunkel — --rose liegt auch hier deutlich über 0.6. */
  :root[data-t1-scheme='nacht'][data-t1-accent] {
    --rose: oklch(from var(--t1-accent) 0.680 min(c, 0.10) h);
    --rose-2: oklch(from var(--t1-accent) 0.790 min(c, 0.10) h);
    --ph-rose-stripe: oklch(from var(--t1-accent) 0.46 min(c, 0.05) h / 0.5);
    --ph-rose-from: oklch(from var(--t1-accent) 0.36 min(c, 0.05) h);
    --ph-rose-to: oklch(from var(--t1-accent) 0.29 min(c, 0.05) h);
  }
}

/* AUSNAHME von „nur Variablen": Der Newsletter-Streifen liegt auf --rose und erbt sonst
   --ink/--ink-2 als Schriftfarbe. Im dunklen Design ist --ink hell — helle Schrift auf
   mittelhellem Rosé, Kontrast unter 2:1. Der Streifen erscheint nur bei aktivem
   Kommunikationsmodul und wird deshalb beim Durchklicken leicht übersehen. */
:root[data-t1-scheme] .t1-newsletter,
:root[data-t1-scheme] .t1-newsletter .display,
:root[data-t1-scheme] .t1-newsletter .eyebrow,
:root[data-t1-scheme] .t1-newsletter .kicker {
  color: var(--on-rose);
}

/* ══ SCHRIFTPAARUNG ════════════════════════════════════════════════════════
   Selbst ausgeliefert sind genau vier Familien (public/fonts/fonts.css), und
   server.js setzt font-src 'self' data: — es kommt nichts von fremden Servern.
   Echte Kursive hat davon NUR Cormorant Garamond. Eine Paarung mit Grotesk-Display
   stellt deshalb --display-style auf normal; sonst rechnet der Browser eine schiefe
   Fälschung, die in Überschriften sofort auffällt. */

:root[data-t1-type='editorial'] {
  --display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --ui: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --display-weight: 300;
  --display-track: -0.01em;
  --display-style: italic;
  --eyebrow-family: var(--ui);
}

:root[data-t1-type='klassik'] {
  --display: Georgia, 'Times New Roman', 'Cormorant Garamond', serif;
  --ui: 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --display-weight: 400;
  --display-track: -0.005em;
  --display-style: italic;
  --eyebrow-family: var(--ui);
}

:root[data-t1-type='modern'] {
  --display: 'Manrope', 'Inter', system-ui, sans-serif;
  --ui: 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --display-weight: 500;
  --display-track: -0.025em;
  --display-style: normal; /* Manrope hat keine Kursive — keine synthetische Schräglage */
  --eyebrow-family: var(--ui);
}

:root[data-t1-type='kontrast'] {
  --display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --ui: 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --display-weight: 500;
  --display-track: -0.015em;
  --display-style: italic;
  --eyebrow-family: var(--mono);
}

/* ══ FORMENSPRACHE ═════════════════════════════════════════════════════════
   Nur Zahlen. --radius-pill trägt die Schaltflächen und Etiketten; echte Kreise
   (Burger, Social-Icons, FAQ-Plus, Avatar) benutzen weiterhin fest 50%/999px und
   bleiben in jeder Variante rund — ein 44x44-Kreis mit 0px wäre ein Quadrat mit
   Icon darin und sähe in „kante" schlicht kaputt aus. */

:root[data-t1-shape='kante'] {
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --radius-pill: 4px;
}
:root[data-t1-shape='fein'] {
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 22px;
  --radius-pill: 999px;
}
:root[data-t1-shape='weich'] {
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 30px;
  --radius-pill: 999px;
}
:root[data-t1-shape='rund'] {
  --radius-s: 14px;
  --radius-m: 26px;
  --radius-l: 42px;
  --radius-pill: 999px;
}

/* ══ BILDSTIL ══════════════════════════════════════════════════════════════
   Ein Token, verbraucht in styles.css an .imgph img und .t1-svc-img img — den
   einzigen beiden Stellen, an denen echte Fotos gerendert werden. Die gestreiften
   Platzhalter bleiben unberührt, sie sind kein Foto. */

:root[data-t1-img='natuerlich'] { --img-filter: none; }
:root[data-t1-img='warm'] { --img-filter: saturate(1.06) sepia(0.1) contrast(1.02); }
:root[data-t1-img='gedeckt'] { --img-filter: saturate(0.55) contrast(1.05); }
:root[data-t1-img='monochrom'] { --img-filter: grayscale(1) contrast(1.06); }

/* AUSNAHME von „nur Variablen": Bei Monochrom kommt die Farbe beim Zeigen zurück —
   aber nur auf Geräten mit echtem Zeiger. Auf dem Handy gäbe es kein Hover, und die
   Bilder blieben dauerhaft grau. */
@media (hover: hover) {
  :root[data-t1-img='monochrom'] .imgph:hover img,
  :root[data-t1-img='monochrom'] .t1-svc-img:hover img {
    filter: none;
    transition: filter 0.45s ease;
  }
}

/* ══ HERO-VARIANTEN ════════════════════════════════════════════════════════
   Verankert an der Sektion selbst (data-variant), nicht an <html>: der Aufbau des
   Startbereichs ist sektionslokal, nicht seitenweit.

   Möglich sind diese Regeln erst, seit die Hero-Geometrie in styles.css steht statt
   inline im JSX — Inline-Styles schlagen jede Regel ohne !important.

   Der Mobil-Block in styles.css (@media max-width:880px) arbeitet mit !important und
   gewinnt deshalb weiterhin gegen alles hier. Das ist Absicht: unter 880px stapeln
   alle drei Varianten gleich, und keine erzwingt die Desktop-Anordnung aufs Handy. */

/* ── Zentriert: Titel mittig, die beiden Bilder als Band darunter ───────────
   Ohne DOM-Änderung: dieselben Kinder, nur aus der absoluten Positionierung gelöst. */
.t1-hero-section[data-variant='zentriert'] .t1-hero {
  grid-template-columns: 1fr;
  gap: 48px;
  justify-items: center;
  text-align: center;
}
.t1-hero-section[data-variant='zentriert'] .t1-hero-copy { max-width: 840px; }
.t1-hero-section[data-variant='zentriert'] .t1-hero-title { font-size: clamp(48px, 6vw, 92px); }
.t1-hero-section[data-variant='zentriert'] .t1-hero-lead { max-width: 620px; margin-inline: auto; }
.t1-hero-section[data-variant='zentriert'] .t1-hero-kicker,
.t1-hero-section[data-variant='zentriert'] .t1-hero-cta,
.t1-hero-section[data-variant='zentriert'] .t1-hero-stats { justify-content: center; }
.t1-hero-section[data-variant='zentriert'] .t1-hero-visual {
  position: static;
  width: 100%;
  height: clamp(300px, 38vw, 480px);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
}
/* NICHT position:static — .imgph bringt position:relative mit, und das darin absolut
   positionierte <img> (inset:0) verlöre sonst seinen Bezugsrahmen und füllte den
   Viewport. Nur die Verankerung aus dem Hero-Basislayout zurücknehmen. */
.t1-hero-section[data-variant='zentriert'] .t1-hero-main { position: relative; inset: auto; }
.t1-hero-section[data-variant='zentriert'] .t1-hero-detail {
  position: static;
  width: auto;
  height: auto;
  border: 0;
}
.t1-hero-section[data-variant='zentriert'] .t1-hero-aicard { display: none; }

/* ── Bühne: Titelbild randlos, Text darauf ─────────────────────────────────
   Beide Rasterkinder liegen auf derselben Zelle. Die Textspalte steht im DOM VOR
   der Bühne, deshalb regelt z-index die Reihenfolge — kein DOM-Umbau nötig.
   Ohne gepflegtes Hauptbild schaltet der Adapter vorher auf „split" zurück, sonst
   bestünde die Startseite aus 84vh gestreiftem Platzhalter. */
.t1-hero-section[data-variant='buehne'] { padding: 0; }
.t1-hero-section[data-variant='buehne'] > .container { max-width: none; padding: 0; }
.t1-hero-section[data-variant='buehne'] .t1-hero { grid-template-columns: 1fr; gap: 0; }
.t1-hero-section[data-variant='buehne'] .t1-hero > * { grid-area: 1 / 1; }
/* KEINE feste Höhe: `height: min(84vh, 780px)` gab dem Bild eine Höhe, die nur vom
   Viewport abhängt — der Textblock daneben richtet sich aber nach der BREITE. Auf einem
   flachen Fenster (13-Zoll-Notebook, ~1440×800) war der Text höher als das Bild, und
   weil beide in derselben Rasterzelle liegen, ragten Kicker und Kennzahlen oben und
   unten auf den hellen Seitenhintergrund hinaus. `min-height` + `align-self: stretch`
   macht die Höhe zum Maximum aus beidem: das Bild wächst mit dem Text mit. */
.t1-hero-section[data-variant='buehne'] .t1-hero-visual {
  align-self: stretch;
  /* `height: auto` ist Pflicht: die Basisregel in styles.css setzt 720px, und eine
     definite Höhe schlägt `align-self: stretch`. */
  height: auto;
  min-height: min(84vh, 780px);
  z-index: 0;
}
.t1-hero-section[data-variant='buehne'] .t1-hero-main { border-radius: 0; }
.t1-hero-section[data-variant='buehne'] .t1-hero-detail,
.t1-hero-section[data-variant='buehne'] .t1-hero-aicard { display: none; }
/* Schleier: hält den Text lesbar, auch über hellen Motiven.
   DREI Verläufe, nicht einer: Der seitliche allein trägt nur die Mitte der Textspalte.
   Er ist um 10° gekippt, wird also nach unten hin schwächer — Kicker und Kennzahlen
   sitzen aber genau am oberen und unteren Rand. Über einem gleichmäßig hellen Motiv
   (Studiohintergrund) landeten sie damit bei 3,5:1. Die beiden waagerechten Bänder
   heben genau diese zwei Zonen an, ohne die rechte Bildhälfte zuzudecken. */
.t1-hero-section[data-variant='buehne'] .t1-hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--scrim) 62%, transparent) 0%, transparent 32%),
    linear-gradient(0deg, color-mix(in oklab, var(--scrim) 72%, transparent) 0%, transparent 36%),
    linear-gradient(
      100deg,
      var(--scrim) 0%,
      color-mix(in oklab, var(--scrim) 78%, transparent) 38%,
      color-mix(in oklab, var(--scrim) 36%, transparent) 62%,
      transparent 90%
    );
}
.t1-hero-section[data-variant='buehne'] .t1-hero-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  /* Der senkrechte Abstand ist tragend, nicht Kosmetik: er hält Kicker und Kennzahlen
     von der Bildkante weg, wenn der Textblock die Höhe der Bühne bestimmt. */
  padding: clamp(36px, 5vh, 72px) clamp(24px, 7vw, 110px);
  max-width: 820px;
  color: var(--invert-ink);
}
.t1-hero-section[data-variant='buehne'] .t1-hero-lead { color: var(--invert-ink-2); }
/* Kicker und Kennzahlen-Beschriftung stehen bei 10–11px in Versalien — der gedämpfte
   Ton kostet dort rund ein Drittel Kontrast, den sie über einem Foto nicht haben. */
.t1-hero-section[data-variant='buehne'] .eyebrow,
.t1-hero-section[data-variant='buehne'] .kicker { color: var(--invert-ink); }
.t1-hero-section[data-variant='buehne'] .t1-hero-rule { background: var(--invert-ink); }
.t1-hero-section[data-variant='buehne'] .t1-hero-stats { border-top-color: var(--invert-line); }
.t1-hero-section[data-variant='buehne'] .btn-ghost {
  color: var(--invert-ink);
  border-color: color-mix(in oklab, var(--invert-ink) 45%, transparent);
}

/* ── Bühne auf dem Handy: stapeln statt überlagern ─────────────────────────
   Unter 880px deckelt styles.css das Titelbild auf 60vw (max. 440px). Der Text passt
   dann nicht mehr darauf: er ragte über das Bild hinaus und stand als helle Schrift
   (--invert-ink) halb auf dem hellen Seitenhintergrund — Überschrift angeschnitten,
   Kennzahlen unsichtbar. Mobil legt „buehne" deshalb dieselbe gestapelte Anordnung
   hin wie „split" und „zentriert": Text oben im Raster, Bild darunter.
   Die Regeln stehen bewusst hier und nicht in styles.css — schemes.css lädt danach,
   nur so gewinnen sie gegen den Bühnen-Block weiter oben in dieser Datei. */
@media (max-width: 880px) {
  .t1-hero-section[data-variant='buehne'] { padding: 40px 0 90px; }
  .t1-hero-section[data-variant='buehne'] > .container { padding: 0 22px; }
  .t1-hero-section[data-variant='buehne'] .t1-hero > * { grid-area: auto; }
  /* Die min-height der Bühne muss hier weg: styles.css deckelt das Bild mobil auf 60vw
     (max. 440px), aber eine min-height schlägt jede max-height — sonst wäre das Titelbild
     am Handy plötzlich 84vh hoch. */
  .t1-hero-section[data-variant='buehne'] .t1-hero-visual { min-height: 0; }
  .t1-hero-section[data-variant='buehne'] .t1-hero-copy {
    align-self: auto;
    color: var(--ink);
    max-width: none;
    padding: 0;
  }
  .t1-hero-section[data-variant='buehne'] .t1-hero-lead,
  .t1-hero-section[data-variant='buehne'] .eyebrow,
  .t1-hero-section[data-variant='buehne'] .kicker { color: var(--ink-2); }
  .t1-hero-section[data-variant='buehne'] .t1-hero-rule { background: var(--ink); }
  .t1-hero-section[data-variant='buehne'] .t1-hero-stats { border-top-color: var(--line); }
  .t1-hero-section[data-variant='buehne'] .btn-ghost {
    color: var(--ink);
    border-color: var(--line-2);
  }
  /* Ohne Text auf dem Bild braucht es auch keinen Schleier darüber. */
  .t1-hero-section[data-variant='buehne'] .t1-hero-visual::after { display: none; }
  .t1-hero-section[data-variant='buehne'] .t1-hero-main { border-radius: var(--radius-l); }
}