/* ════ Bühne — Szenen-Scrolling der Startseite (Richtung A „Schwarzes Wasser“) ════
   Aufbau: .buehne ist so hoch wie die Zeitachse (in vh, von buehne.js gesetzt),
   .buehne__sticky bleibt als Vollbild stehen. Darin liegen Video (S0), WebGL-Canvas
   (Standbilder + Brücken), Abdunklung, die Texte der sechs Stationen und die Bedienung. */

/* position:sticky klebt nur, wenn kein Vorfahre scrollt: overflow-x:hidden auf html/body
   (styles.css) macht body zum Scroll-Container. clip schneidet genauso ab, ohne das. */
html, body { overflow-x: clip; }

.buehne {
  position: relative;
  height: calc(var(--buehne-len, 1700) * 1vh);
  height: calc(var(--buehne-len, 1700) * 1svh);
  background: #080808;
}
.buehne__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: #080808;
}
.buehne__video, .buehne__canvas, .buehne__fb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* Je Clip-Station ein Video; sichtbar ist nur das der aktuellen Station (is-aktiv, von buehne.js gesetzt) */
.buehne__video { object-fit: cover; object-position: 50% 50%; background: #080808; visibility: hidden; }
.buehne__video.is-aktiv { visibility: visible; }
.buehne__canvas { opacity: 0; }
.buehne.is-canvas .buehne__canvas, .buehne.is-uebergabe .buehne__canvas { opacity: 1; }   /* Übergabe: Standbild liegt noch über dem schon sichtbaren Video */
.buehne.is-canvas .buehne__video, .buehne.is-canvas .buehne__video.is-aktiv { visibility: hidden; }

/* Ersatz ohne WebGL: zwei Bildebenen, die überblenden */
.buehne__fb { object-fit: cover; opacity: 0; display: none; }
.buehne.no-gl .buehne__fb { display: block; }
.buehne.no-gl .buehne__canvas { display: none; }

/* Abdunklung für Lesbarkeit: oben (Navigation), links (Text), unten */
.buehne__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,8,8,.58) 0%, rgba(8,8,8,0) 20%),
    linear-gradient(90deg, rgba(8,8,8,.66) 0%, rgba(8,8,8,.28) 36%, rgba(8,8,8,0) 60%),
    linear-gradient(0deg, rgba(8,8,8,.72) 0%, rgba(8,8,8,0) 32%);
}
/* weicher Übergang in den Seiteninhalt nach der Bühne */
.buehne::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(180deg, rgba(8,8,8,0), #080808);
  pointer-events: none;
}

/* ── Texte der Stationen ─────────────────────────────── */
/* 840 px, damit die längste feste Titelzeile („Ein Ansprechpartner.“, 8,15 em bei 96 px = 782 px) in eine Zeile passt;
   der Fließtext bleibt über .buehne__text bei 52ch */
.buehne__station {
  position: absolute;
  left: clamp(24px, 5vw, 200px);
  bottom: clamp(84px, 15vh, 170px);
  max-width: min(840px, 84vw);
  opacity: var(--o, 0);
  transform: translate3d(0, calc((1 - var(--o, 0)) * 26px), 0);
  /* --o ist 0 oder 1 (buehne.js, Text folgt dem Film); die Überblendung läuft über eine feste Zeit, nie halb stehen bleibend */
  transition: opacity var(--o-dauer, .9s) cubic-bezier(.33, 0, .2, 1), transform var(--o-dauer, .9s) cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
.buehne__station.is-live { pointer-events: auto; }
.buehne__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; letter-spacing: .42em; text-transform: uppercase; font-weight: 400;
  color: rgba(255,255,255,.72);
}
.buehne__eyebrow::before { content: ''; width: 34px; height: 1px; background: #0aa686; flex: none; }
/* Firmenlogos einfarbig weiß: die farbigen Fassungen sind auf den dunklen Szenen teils kaum lesbar */
.buehne__logo { height: clamp(40px, 6.4vh, 68px); width: auto; margin-top: 24px; filter: brightness(0) invert(1); opacity: .96; }
.buehne__title {
  margin-top: 18px;
  font-weight: 300; font-size: clamp(40px, 5.2vw, 88px); line-height: 1; letter-spacing: -0.015em;
  text-wrap: balance;
}
.buehne__title em { font-style: normal; font-weight: 500; color: #0aa686; }
.buehne__station--auftakt .buehne__title { font-size: clamp(42px, 5.6vw, 96px); }
.buehne__text {
  margin-top: 20px; max-width: 52ch;
  color: rgba(255,255,255,.74); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6;
}
.buehne__cta { margin-top: 28px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.buehne__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px dashed rgba(255,255,255,.28); border-radius: 99px;
  font-size: 13px; color: rgba(255,255,255,.7);
}
.buehne__chip b { font-weight: 500; color: #fff; }

/* ── Stationspunkte rechts ───────────────────────────── */
.buehne__dots {
  position: absolute; right: clamp(16px, 2.2vw, 40px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
}
.buehne__dots button {
  position: relative; width: 10px; height: 10px; border-radius: 99px;
  background: rgba(255,255,255,.34);
  transition: height .35s ease, background-color .35s ease;
}
.buehne__dots button::before { content: ''; position: absolute; inset: -8px; }   /* größere Trefferfläche */
.buehne__dots button.is-active { height: 28px; background: #0aa686; }
.buehne__dots button span {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.9); opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.buehne__dots button:hover span, .buehne__dots button:focus-visible span { opacity: 1; }

/* ── Scroll-Hinweis, KI-Etikett ──────────────────────── */
.buehne__hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.7);
  transition: opacity .4s ease;
}
.buehne__hint::after {
  content: ''; width: 1px; height: 34px;
  background: linear-gradient(180deg, #0aa686, rgba(10,166,134,0));
  animation: buehneHint 1.8s ease-in-out infinite;
}
.buehne.is-gescrollt .buehne__hint { opacity: 0; }
@keyframes buehneHint { 0% { transform: scaleY(.2); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(.2); transform-origin: bottom; } }
.buehne__ki {
  position: absolute; right: clamp(16px, 2.2vw, 40px); bottom: 22px;
  font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.62);
}

/* ── Weiter-Knopf (erscheint mit dem Stationstext, buehne.js gleitet zur nächsten Station) ──
   Ein leiser Textknopf unter den Aktionen, nach der Lichtkanten-Regel: Pfeil nach unten, Name der nächsten Station,
   darunter eine Haarlinie, über die sich beim Erscheinen von links die Lichtlinie zieht; danach läuft in Abständen ein
   heller Glanzpunkt über sie. Kein Schein um den Knopf. */
.buehne__weiter {
  position: relative; margin-top: 28px;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 2px 13px 0;
  color: rgba(255,255,255,.86); font-size: 15px; font-weight: 500; line-height: 1; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: color .3s ease;
}
.buehne__cta + .buehne__weiter { margin-top: 18px; }
.buehne__weiter svg { width: 18px; height: 18px; flex: none; color: #16d0ab; transform: rotate(90deg); }
.buehne__weiter::before, .buehne__weiter::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
}
.buehne__weiter::before { background: rgba(255,255,255,.14); }
.buehne__weiter::after {
  background: linear-gradient(90deg, #05806a, #16d0ab 55%, rgba(10,166,134,.5) 82%, rgba(10,166,134,0));
  transform: scaleX(0); transform-origin: left center;
}
.buehne__weiter-glanz {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
  background: radial-gradient(closest-side, #e8fff9, rgba(22,208,171,.55) 45%, rgba(22,208,171,0)) no-repeat;
  background-size: 34px 3px; background-position: -40px 0; opacity: 0;
}
.buehne__station.is-live .buehne__weiter::after { animation: weiterLinie .9s cubic-bezier(.65,0,.35,1) .35s forwards; }
.buehne__station.is-live .buehne__weiter-glanz { animation: weiterGlanz 3.6s ease-in-out 1.5s infinite; }
.buehne__station.is-live .buehne__weiter svg { animation: weiterNicken 2.4s ease-in-out 1.4s infinite; }
@keyframes weiterLinie { to { transform: scaleX(1); } }
@keyframes weiterGlanz { 0% { background-position: -40px 0; opacity: 1; } 34% { background-position: calc(100% + 40px) 0; opacity: 1; } 35%, 100% { background-position: calc(100% + 40px) 0; opacity: 0; } }
@keyframes weiterNicken { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 3px; } }
.buehne__weiter:hover { color: #fff; }
.buehne__weiter:hover .buehne__weiter-glanz { animation-duration: 1.8s; }
.buehne__weiter:focus-visible { outline: 2px solid #16d0ab; outline-offset: 4px; border-radius: 2px; }

/* ── Qualitäts-Abzeichen unten links (buehne.js baut es), Auswahl klappt nach oben auf ──
   Kapsel wie die Stationspunkte; die Auswahl ist eine Tafel (scharf, Haarlinie, Lichtkante oben). */
.buehne__qualitaet { position: absolute; z-index: 5; left: clamp(24px, 5vw, 200px); bottom: 18px; }
.buehne__qknopf {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 11px; border-radius: 99px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(8,8,8,.5); color: rgba(255,255,255,.74);
  font-size: 11px; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
  transition: border-color .3s ease, color .3s ease;
}
.buehne__qknopf:hover, .buehne__qualitaet.ist-offen .buehne__qknopf { border-color: rgba(22,208,171,.55); color: #fff; }
.buehne__qknopf:focus-visible { outline: 2px solid #16d0ab; outline-offset: 3px; }
.buehne__qpunkt { width: 6px; height: 6px; border-radius: 99px; background: #16d0ab; flex: none; }
.buehne__qknopf.ist-reduziert .buehne__qpunkt { background: transparent; box-shadow: inset 0 0 0 1px #16d0ab; }
.buehne__qpfeil { width: 12px; height: 12px; flex: none; margin-left: -2px; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.buehne__qualitaet.ist-offen .buehne__qpfeil { transform: rotate(180deg); }
.buehne__qwahl {
  position: absolute; left: 0; bottom: calc(100% + 10px);
  width: min(320px, calc(100vw - 40px));
  padding: 18px 18px 8px; border-radius: 2px;
  background: #0a0c0c; border: 1px solid rgba(255,255,255,.12);
  animation: qwahlAuf .35s cubic-bezier(.16,1,.3,1);
}
.buehne__qwahl::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px;
  background: linear-gradient(90deg, #16d0ab, rgba(10,166,134,.55) 38%, rgba(10,166,134,0) 88%);
}
.buehne__qwahl[hidden] { display: none; }
@keyframes qwahlAuf { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.buehne__qtitel { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.buehne__qgrund { margin: 8px 0 14px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.72); }
.buehne__qgrund strong { font-weight: 500; color: #fff; }
.buehne__qliste { display: grid; border-top: 1px solid rgba(255,255,255,.08); }
.buehne__qliste button {
  position: relative; display: grid; gap: 3px; width: 100%; text-align: left;
  padding: 12px 0 12px 22px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15px; color: rgba(255,255,255,.86);
  transition: color .25s ease;
}
.buehne__qliste button:last-child { border-bottom: 0; }
.buehne__qliste button span { font-size: 13px; color: rgba(255,255,255,.55); }
.buehne__qliste button::before {
  content: ''; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.buehne__qliste button[aria-pressed="true"]::before { background: #0aa686; box-shadow: inset 0 0 0 1px #16d0ab; }
.buehne__qliste button:hover { color: #fff; }
.buehne__qliste button:focus-visible { outline: 2px solid #16d0ab; outline-offset: 2px; border-radius: 2px; }

/* ── Hinweis bei automatischer Umstellung (oben mittig unter der Navigation, verschwindet nach 6,5 s) ── */
.buehne__hinweis {
  position: absolute; z-index: 6; left: 50%; top: 104px; margin: 0;
  width: max-content; max-width: min(480px, calc(100vw - 40px));
  padding: 12px 18px; border-radius: 2px;
  background: rgba(10,12,12,.92); border: 1px solid rgba(255,255,255,.12);
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.86); text-align: center; text-wrap: balance;
  opacity: 0; transform: translate3d(-50%, -8px, 0); pointer-events: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.buehne__hinweis.ist-da { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ── Notbremse oder gesperrtes Autoplay: Knopf „Filme abspielen“ (nur sichtbar mit .ist-gebremst / .ist-gesperrt) ──
   Ghost-Knopf ohne Weichzeichner (er erscheint gerade auf Geräten, denen das Video schon zu viel ist). */
.buehne__filme {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: none; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(8,8,8,.6); color: #fff;
  font-size: 14px; font-weight: 500; line-height: 1;
  transition: background-color .25s ease, border-color .25s ease;
}
.buehne__filme svg { width: 12px; height: 12px; color: #16d0ab; flex: none; }
.buehne__filme:hover { background: #05806a; border-color: #05806a; }
.buehne__filme:hover svg { color: #fff; }
.buehne__filme:focus-visible { outline: 2px solid #16d0ab; outline-offset: 3px; }
.buehne.ist-gebremst .buehne__filme, .buehne.ist-gesperrt .buehne__filme { display: inline-flex; }
.buehne.ist-gebremst .buehne__hint, .buehne.ist-gesperrt .buehne__hint { display: none; }

/* ── Leichter Modus (schwache Geräte, buehne.js setzt .ist-leicht): kein Weichzeichner hinter den Knöpfen ── */
.buehne.ist-leicht .btn--ghost-light { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8,8,8,.55); }

/* ── Ladelinie an einer Station: Clip noch nicht ganz geladen, das erste Bild steht ──
   erscheint erst nach 0,5 s (kurze Wartezeiten bleiben unsichtbar) */
.buehne__sticky::after {
  content: ''; position: absolute; left: 50%; bottom: 74px; width: 140px; height: 1px; margin-left: -70px;
  background: linear-gradient(90deg, rgba(10,166,134,0), #16d0ab 50%, rgba(10,166,134,0)) no-repeat;
  background-size: 40% 100%;
  opacity: 0; transition: opacity .4s ease 0s; pointer-events: none;
}
.buehne.is-laedt .buehne__sticky::after { opacity: 1; transition-delay: .5s; animation: buehneLaedt 1.4s ease-in-out infinite; }
@keyframes buehneLaedt { 0% { background-position: -60% 0; } 100% { background-position: 160% 0; } }

/* ── Vorlader: Logo, Lichtlinie als Fortschritt, Prozent, Qualitätszeile (buehne.js baut ihn bei jedem Aufruf) ── */
html.is-vorladen { overflow: hidden; }
.vorlader {
  position: fixed; inset: 0; z-index: 10001;
  display: grid; place-items: center;
  background: #080808;
  transition: opacity 1.2s cubic-bezier(.16,1,.3,1), visibility 1.2s;
}
.vorlader.is-weg { opacity: 0; visibility: hidden; }
.vorlader__innen { display: grid; justify-items: center; gap: 34px; animation: vorladerAuf 1.2s cubic-bezier(.16,1,.3,1) both; }
@keyframes vorladerAuf { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.vorlader.is-weg .vorlader__innen { transform: scale(.98); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.vorlader__logo { width: clamp(110px, 16vw, 168px); height: auto; display: block; }
.vorlader__linie { --breite: min(260px, 62vw); position: relative; width: var(--breite); height: 1px; background: rgba(255,255,255,.1); }
.vorlader__linie::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,128,106,.5), #0aa686 70%, #16d0ab);
  transform: scaleX(var(--p, 0)); transform-origin: left center;
}
.vorlader__linie::after {
  content: ''; position: absolute; top: 50%; left: 0;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 99px;
  background: #e8fff9; box-shadow: 0 0 6px 1px #16d0ab, 0 0 24px 6px rgba(10,166,134,.45);
  transform: translateX(calc(var(--p, 0) * var(--breite)));
}
.vorlader__zahl {
  margin: 0; display: flex; gap: 14px;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.vorlader__prozent { min-width: 5ch; text-align: right; letter-spacing: .1em; color: rgba(255,255,255,.8); font-variant-numeric: tabular-nums; }
.vorlader__info {
  margin: -14px 0 0; max-width: 32ch; min-height: 1.5em; text-align: center;
  font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.55); text-wrap: balance;
}
.vorlader__info strong { font-weight: 500; color: rgba(255,255,255,.85); }

/* ── Navigation über der Bühne: durchsichtig statt dunkler Balken ── */
body.buehne-on .nav.is-fixed {
  background: linear-gradient(180deg, rgba(8,8,8,.8), rgba(8,8,8,0)) no-repeat;   /* no-repeat: sonst kachelt der Verlauf in die 1px-Randlinie */
  backdrop-filter: none; border-bottom-color: transparent;
}
body.buehne-on .fx-aurora { opacity: 0; transition: opacity .6s ease; }

/* ── Schmal (Handy hochkant) ─────────────────────────── */
@media (max-width: 720px) {
  .buehne__station { left: 20px; right: 20px; bottom: 96px; max-width: none; }
  /* Hinweisfenster offen (consent.js setzt --cc-hoehe): Text rückt darüber und gleitet nach dem Schließen zurück */
  .buehne__station { transition: opacity var(--o-dauer, .9s) cubic-bezier(.33, 0, .2, 1), transform var(--o-dauer, .9s) cubic-bezier(.16, 1, .3, 1), bottom .6s cubic-bezier(.16, 1, .3, 1); }
  html.show--consent .buehne__station { bottom: max(96px, calc(var(--cc-hoehe, 0px) + 18px)); }
  .buehne__title { font-size: clamp(34px, 9.4vw, 52px); }
  .buehne__station--auftakt .buehne__title { font-size: clamp(34px, 9.8vw, 54px); }
  .buehne__text { font-size: 15px; }
  .buehne__logo { height: 40px; margin-top: 18px; }
  .buehne__scrim {
    background:
      linear-gradient(180deg, rgba(8,8,8,.6) 0%, rgba(8,8,8,0) 18%),
      linear-gradient(0deg, rgba(8,8,8,.9) 0%, rgba(8,8,8,.55) 34%, rgba(8,8,8,0) 62%);
  }
  .buehne__dots { right: 12px; gap: 12px; }
  .buehne__dots button span { display: none; }
  .buehne__hint { bottom: 18px; }
  .buehne__ki { right: 12px; bottom: 12px; }
  .buehne__qualitaet { left: 20px; bottom: 10px; }
  .buehne__hinweis { top: 78px; }
  .buehne__filme { left: auto; right: 12px; bottom: 42px; transform: none; padding: 11px 16px; }   /* über dem KI-Etikett, frei vom Stationstext */
  .buehne__weiter { margin-top: 22px; font-size: 14.5px; }
  .buehne__cta + .buehne__weiter { margin-top: 14px; }
}