/* ============================================================
   FABRIKAT STARTER-KIT · buehne.css — die Bühne für den Hero einer
   Marken-/Marketingseite. Lädt NACH ui.css, VOR seite.css. Kein JS.
   Wirkt nur mit dem HTML-Vertrag aus README.md (section.buehne …).
   Anpassen nur über die --b-*-Variablen in seite.css (auf .buehne).
   ============================================================ */

.buehne {
  --b-hoehe-min: 640px; --b-hoehe-max: 1000px;
  --b-flaeche: var(--canvas);
  --b-rand: 5vw; --b-textzone: 58vw;          /* Textzone: vw, wie die Größenformel */
  --b-oben: 7.5rem; --b-unten: 9vh;           /* Platz für den Kopf / Abstand unten */
  --b-fokus: 50% 50%; --b-fokus-mobil: 50% 50%;
  --b-verlauf-seite: 0.88; --b-verlauf-seite-ende: 62%;
  --b-verlauf-unten: 0.92; --b-verlauf-unten-ende: 68%;
  --b-verlauf-oben: 0.55; --b-verlauf-oben-hoehe: 9rem;      /* deckend hinter der Navigation (40 %), dann aus */
  --b-seite-oben-abschwaechung: 0.35; --b-unten-rechts-abschwaechung: 0.15;
  --b-licht-maske: none;
  /* Mobil: Bühne = Kopfbild oben, Text unten auf der Fläche; der Text darf um --b-kopfbild-ueberlappung
     in das Bild ragen — dort ist die Fläche deckend, darüber läuft das Bild über --b-kopfbild-auslauf aus */
  --b-mobil-hoehe: max(560px, 100vh);
  --b-kopfbild-hoehe: calc(var(--b-mobil-hoehe) - 20rem);   /* lässt Kicker, 2-zeilige h1, Zeile, Knopf Platz */
  --b-kopfbild-ueberlappung: 4rem; --b-kopfbild-auslauf: 9rem;
  --b-kopfbild-min: 0px; --b-kopfbild-ist: max(var(--b-kopfbild-hoehe), var(--b-kopfbild-min));
  --b-heranfahren: 1.06; --b-heranfahren-dauer: 1.6s;
  --b-split: 46% 54%;
  /* Verlaufsformen (einzeln überschreibbar, wenn ein Look eine andere Kurve braucht) */
  --b-f: var(--b-flaeche);
  --b-seite: linear-gradient(to right,
    color-mix(in oklab, var(--b-f) calc(var(--b-verlauf-seite) * 100%), transparent) 0%,
    color-mix(in oklab, var(--b-f) calc(var(--b-verlauf-seite) * 97.7%), transparent) calc(var(--b-verlauf-seite-ende) * 0.516),
    color-mix(in oklab, var(--b-f) calc(var(--b-verlauf-seite) * 70.5%), transparent) calc(var(--b-verlauf-seite-ende) * 0.774),
    transparent var(--b-verlauf-seite-ende));
  --b-unten-verlauf: linear-gradient(to top,
    color-mix(in oklab, var(--b-f) calc(var(--b-verlauf-unten) * 100%), transparent) 0%,
    color-mix(in oklab, var(--b-f) calc(var(--b-verlauf-unten) * 95.7%), transparent) calc(var(--b-verlauf-unten-ende) * 0.412),
    color-mix(in oklab, var(--b-f) calc(var(--b-verlauf-unten) * 67.4%), transparent) calc(var(--b-verlauf-unten-ende) * 0.706),
    transparent var(--b-verlauf-unten-ende));
  /* Plateau statt linear: die Links stehen im oberen Streifen -- linear 0,30 liess über einem hellen
     Fenster 1,3:1 und über Himmel 3,5:1 (gemessen L1, Kanzlei 2). Liegt reines Weiss hinter der
     Navigation, reicht auch das nicht: dann --b-verlauf-oben bis 0,88 anheben. */
  --b-oben-verlauf: linear-gradient(to bottom,
    color-mix(in oklab, var(--b-f) calc(var(--b-verlauf-oben) * 100%), transparent) 0,
    color-mix(in oklab, var(--b-f) calc(var(--b-verlauf-oben) * 100%), transparent) calc(var(--b-verlauf-oben-hoehe) * 0.4),
    transparent var(--b-verlauf-oben-hoehe));
  --b-seite-maske: linear-gradient(to bottom, rgb(0 0 0 / var(--b-seite-oben-abschwaechung)) 0%, #000 50%);
  --b-unten-maske: linear-gradient(to right, #000 56%, rgb(0 0 0 / var(--b-unten-rechts-abschwaechung)) 68%);

  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  display: flex; align-items: flex-end;
  min-height: clamp(var(--b-hoehe-min), 100vh, var(--b-hoehe-max));
  padding: var(--b-oben) var(--b-rand) var(--b-unten);
  background: var(--b-flaeche); color: var(--ink);
}
@supports (height: 1svh) {
  .buehne { --b-unten: 9svh; --b-mobil-hoehe: max(560px, 100svh);
    min-height: clamp(var(--b-hoehe-min), 100svh, var(--b-hoehe-max)); }
}
/* Boden fürs Kopfbild: 2:1, höchstens 60 % Höhe; nur mit Bild, ab 500 px Höhe (README) */
@media (max-width: 899px) and (min-height: 500px) {
  .buehne:where(:has(> .buehne__bild)) { --b-kopfbild-min: min(50vw, 60vh); }
  @supports (height: 1svh) { .buehne:where(:has(> .buehne__bild)) { --b-kopfbild-min: min(50vw, 60svh); } }
}

/* Bild: eigene Ebene unter allem. Bewegt wird der RAHMEN, nie das <img> (LCP, gemessen P0). */
.buehne__bild { position: absolute; inset: 0; z-index: -4; overflow: hidden; transform-origin: var(--b-fokus); }
.buehne__bild > :is(picture, img) { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehne__bild img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--b-fokus); }
/* Schleier oben für die Navigation: liegt auf dem Bild, volle Breite */
.buehne__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--b-oben-verlauf); }

/* Video-Stück (video_fuer_web): kein eigener Stapel, damit der Pause-Knopf ÜBER den Verläufen liegt */
.buehne__bild:has(.fab-video) { z-index: auto; }
.buehne__bild .fab-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.buehne__bild .fab-video > :is(picture, video) { position: absolute; inset: 0; z-index: -4; }
.buehne__bild:has(.fab-video)::after { z-index: -4; }
.buehne__bild .fab-video > button { z-index: 1; }
.buehne__bild .fab-video > button:focus-visible { outline: 2px solid var(--fokus, currentColor); outline-offset: 3px; }

.buehne::before, .buehne::after { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.buehne::before { background: var(--b-seite); -webkit-mask-image: var(--b-seite-maske); mask-image: var(--b-seite-maske); }
.buehne::after { background: var(--b-unten-verlauf); -webkit-mask-image: var(--b-unten-maske); mask-image: var(--b-unten-maske); }
.buehne__korn { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.buehne__licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: var(--b-licht-maske); mask-image: var(--b-licht-maske); }
.buehne__inhalt { position: relative; width: min(100%, calc(var(--b-textzone) - var(--b-rand))); }

/* Split: Spalte 1 = .buehne__inhalt auf der Fläche, Spalte 2 = Bild randabfallend. Text nie über Bild. */
.buehne[data-aufbau="split"] { display: grid; grid-template-columns: var(--b-split); align-items: stretch; padding: 0; }
.buehne[data-aufbau="split"]::before, .buehne[data-aufbau="split"]::after { display: none; }
.buehne[data-aufbau="split"] .buehne__bild { position: relative; inset: auto; grid-area: 1 / 2; }
.buehne[data-aufbau="split"] .buehne__inhalt { grid-area: 1 / 1; width: auto; background: var(--b-flaeche);
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--b-oben) var(--b-rand) var(--b-unten); }
/* Am Desktop steht die Navigation im Split über der Fläche: kein Schleier aufs Bild (sonst Dunst in Flächenfarbe auf
   einem dunklen Bild, gemessen im Schnellbau 15.10.). Steht sie über dem Bild: --b-verlauf-oben setzen oder einen
   eigenen hellen/dunklen --b-oben-verlauf (L2). :where hält seite.css überschreibbar. */
@media (min-width: 900px) { .buehne:where([data-aufbau="split"]) { --b-verlauf-oben: 0; } }

/* Dosis: auf <html> (ganze Seite) oder nur auf .buehne. :where hält seite.css überschreibbar. */
:where(html[data-dosis="ruhe"]) .buehne, .buehne:where([data-dosis="ruhe"]) { --b-heranfahren: 1.035; --b-heranfahren-dauer: 2.4s; }
:where(html[data-dosis="ruhe"]) .buehne :is(.buehne__korn, .buehne__licht),
.buehne:where([data-dosis="ruhe"]) :is(.buehne__korn, .buehne__licht) { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .buehne__bild { will-change: transform; animation: b-heranfahren var(--b-heranfahren-dauer) cubic-bezier(0.22, 1, 0.36, 1) both; }
  .buehne__bild:has(.fab-video) { will-change: auto; animation: none; }
}
@keyframes b-heranfahren { from { transform: scale(var(--b-heranfahren)); } to { transform: none; } }

/* Statischer Rückbau: <html data-bewegung="aus"> */
[data-bewegung="aus"] .buehne, [data-bewegung="aus"] .buehne *, [data-bewegung="aus"] .buehne::before,
[data-bewegung="aus"] .buehne::after, [data-bewegung="aus"] .buehne *::after { animation: none !important; will-change: auto !important; }

/* Mobil — zeichengleich mit dem <picture> der Pipeline (web_bild.MOBIL_BIS_PX) */
@media (max-width: 899px) {
  .buehne, .buehne[data-aufbau="split"] { --b-rand: 20px; display: flex; flex-direction: column; justify-content: flex-end;
    align-items: stretch; /* sonst hing der Text auf Tablets rechts */
    min-height: var(--b-mobil-hoehe); padding: calc(var(--b-kopfbild-ist) - var(--b-kopfbild-ueberlappung)) 0 0; }
  /* Split: der Text folgt direkt dem Kopfbild -- eine Restfläche fällt unter die Knöpfe, nie zwischen Bild und Kicker */
  .buehne[data-aufbau="split"] { justify-content: flex-start; }
  .buehne__bild, .buehne[data-aufbau="split"] .buehne__bild { position: absolute; inset: 0 0 auto; grid-area: auto;
    height: var(--b-kopfbild-ist); transform-origin: var(--b-fokus-mobil); }
  .buehne__bild img { object-position: var(--b-fokus-mobil); }
  .buehne__bild::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, var(--b-f) 0, var(--b-f) var(--b-kopfbild-ueberlappung),
      transparent calc(var(--b-kopfbild-ueberlappung) + var(--b-kopfbild-auslauf))); }
  /* Video: der Rahmen ist kein eigener Stapel -- mit z-index 1 läge der Auslauf ÜBER dem Text */
  .buehne__bild:has(.fab-video)::before { z-index: -3; }
  .buehne::before, .buehne::after { display: none; }
  .buehne__licht { -webkit-mask-image: none; mask-image: none; }
  .buehne__inhalt, .buehne[data-aufbau="split"] .buehne__inhalt { width: auto; padding: 1.25rem var(--b-rand) 2.75rem; }
}

@media (forced-colors: active) { .buehne__inhalt { background: Canvas; } }

@media print {
  .buehne { --ink: #111; --ink-soft: #333; --canvas: #fff; --b-flaeche: #fff;
    min-height: 0; padding: 1rem 0; background: none; color: #111; }
  .buehne__bild, .buehne__korn, .buehne__licht, .buehne::before, .buehne::after { display: none; }
  .buehne__inhalt { width: 100%; }
}