/* =====================================================================
   Hero-System Demos A: die Bühne der Startseite.
   Massstab: Referenzanalyse Gasser (8 Punkte), siehe docs/demo/_HERO-PROMPT-A.md (im Repo, nicht auf dem Server).
   Grundsätze:
   - Ohne JavaScript vollständig sichtbar. Kein Skript greift diesen Hero
     (eigene Klassen, keine data-Attribute der Bewegungsmotoren).
   - Bewegung nur per CSS, nur transform, nur ohne reduced-motion. Text und
     Bild sind vom ersten Frame an deckend sichtbar (kein opacity 0).
   - Feste Mindesthöhe, Bild absolut: kein Layout-Sprung, wenn Bild oder
     Schrift nachladen.
   ===================================================================== */
.buehne,
.buehnenlauf {
  --hz-dunkel: oklch(0.17 0.04 18);
  --hz-akzent: oklch(0.84 0.11 82);
  --hz-leise: oklch(0.93 0.006 250);
  --hz-kurve: cubic-bezier(0.2, 0.7, 0.1, 1);
}
.buehne {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(29rem, 60svh, 40rem);
  overflow: hidden;
  background: var(--hz-dunkel);
  color: #fff;
}
.buehne-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  margin: 0;
}
.buehne-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
/* Kontrastfeld: mobil senkrecht, unten dicht, wo der Text steht. */
.buehne::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--hz-dunkel) 55%, transparent) 0%,
    color-mix(in oklch, var(--hz-dunkel) 80%, transparent) 20%,
    color-mix(in oklch, var(--hz-dunkel) 90%, transparent) 42%,
    color-mix(in oklch, var(--hz-dunkel) 95%, transparent) 100%);
}
.buehne-satz {
  padding-block: 4.5rem 2rem;
}
.buehne-marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--grotesk);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--hz-leise);
}
.buehne-marke::before {
  content: '';
  flex: 0 0 1.75rem;
  height: 1px;
  background: var(--hz-akzent);
}
.buehne h1 {
  max-width: 11ch;
  margin: 1rem 0 0;
  font-size: clamp(2.4rem, 1rem + 5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 28px rgb(0 0 0 / 0.25);
}
.buehne h1 .akzent {
  color: var(--hz-akzent);
}
.buehne-lauf {
  max-width: 34rem;
  margin: 1.2rem 0 0;
  font-size: clamp(1.02rem, 0.96rem + 0.32vw, 1.2rem);
  line-height: 1.55;
  color: var(--hz-leise);
}
.buehne-tun {
  margin-top: 1.6rem;
}
.buehne-tun .knopf {
  min-height: 3.25rem;
  padding-inline: 1.7rem;
  font-size: 1.02rem;
}
.buehne-beleg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.6rem;
  margin: 1.7rem 0 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid rgb(255 255 255 / 0.24);
  font-family: var(--grotesk);
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--hz-leise);
}
.buehne-beleg li {
  margin: 0;
}
.buehne-beleg span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hz-akzent);
}
.buehne-beleg b {
  font-weight: 600;
  color: #fff;
}
/* Demo-Schild: der Betrieb ist erfunden, das soll man im Hero sehen. */
.buehne-demo {
  position: absolute;
  top: 0.9rem;
  right: var(--rand, 1.25rem);
  z-index: 1;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 0.4);
  background: rgb(0 0 0 / 0.6);
  font-family: var(--grotesk);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #fff;
}

@media (max-width: 26rem) {
  .buehne-beleg {
    gap: 0.5rem 1.1rem;
  }
  .buehne-beleg li:nth-child(3) {
    display: none;
  }
}

/* Breit: Text links unten, Kontrastfeld waagrecht, Bild bekommt die rechte Seite. */
@media (min-width: 62rem) {
  .buehne {
    min-height: clamp(34rem, 78svh, 56rem);
  }
  .buehne-bild img {
    object-position: 50% 55%;
  }
  .buehne::before {
    background:
      linear-gradient(90deg,
        color-mix(in oklch, var(--hz-dunkel) 92%, transparent) 0%,
        color-mix(in oklch, var(--hz-dunkel) 88%, transparent) 40%,
        color-mix(in oklch, var(--hz-dunkel) 70%, transparent) 60%,
        color-mix(in oklch, var(--hz-dunkel) 15%, transparent) 85%,
        color-mix(in oklch, var(--hz-dunkel) 4%, transparent) 100%),
      linear-gradient(0deg,
        color-mix(in oklch, var(--hz-dunkel) 55%, transparent) 0%,
        transparent 38%);
  }
  .buehne-satz {
    padding-block: 3.5rem clamp(3.5rem, 6vw, 5.25rem);
  }
  .buehne-lauf {
    max-width: 36rem;
  }
  .buehne-demo {
    top: 1.3rem;
  }
}

/* Bewegung: eine Kurve, 1 bis 1.6 s, Versatz 28 px, Staffel 0.08 s.
   Nur transform, damit nie etwas unsichtbar ist und das LCP nicht wartet. */
@media (prefers-reduced-motion: no-preference) {
  .buehne-bild img {
    animation: hz-bild 1.6s var(--hz-kurve) both;
  }
  .buehne-satz > * {
    animation: hz-auf 1s var(--hz-kurve) both;
  }
  .buehne-satz > :nth-child(2) { animation-delay: 0.08s; }
  .buehne-satz > :nth-child(3) { animation-delay: 0.16s; }
  .buehne-satz > :nth-child(4) { animation-delay: 0.24s; }
  .buehne-satz > :nth-child(5) { animation-delay: 0.32s; }
}
/* ---- Bühnenlauf: gepinnter Abschnitt in drei Szenen -----------------
   Ohne JavaScript, bei reduced-motion und mobil: eine ruhige Liste, alles
   sichtbar. szenen.js setzt data-lauf-an nur am Desktop und pinnt dann. */
.buehnenlauf {
  background: var(--hz-dunkel);
  color: #fff;
}
.buehnenlauf h2 {
  max-width: 18ch;
  margin-top: 1rem;
  color: #fff;
}
.lauf-rahmen {
  position: relative;
}
.lauf-leinwand,
.lauf-fortschritt {
  display: none;
}
.lauf-szenen {
  display: grid;
  gap: 2rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.lauf-szene {
  max-width: 34rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgb(255 255 255 / 0.24);
}
.lauf-nr {
  font-family: var(--grotesk);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hz-akzent);
}
.lauf-szene h3 {
  margin-top: 0.7rem;
  font-family: var(--anzeige, var(--serif));
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem);
  font-weight: 500;
  line-height: 1.02;
  color: #fff;
}
.lauf-szene p {
  max-width: 32rem;
  margin-top: 0.9rem;
  color: var(--hz-leise);
}
.buehnenlauf[data-lauf-an] {
  padding-block: 0;
}
.buehnenlauf[data-lauf-an] .lauf-rahmen {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100svh;
  padding-block: clamp(6.5rem, 15vh, 9rem) 2.5rem;
}
.buehnenlauf[data-lauf-an] .lauf-szenen {
  grid-template-areas: 'szene';
  align-content: center;
  margin: 0;
}
.buehnenlauf[data-lauf-an] .lauf-szene {
  grid-area: szene;
}
.buehnenlauf[data-lauf-an] .lauf-leinwand {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: 100%;
  opacity: 0.75;
  pointer-events: none;
}
.buehnenlauf[data-lauf-an] .lauf-fortschritt {
  display: block;
  height: 2px;
  background: rgb(255 255 255 / 0.2);
}
.buehnenlauf[data-lauf-an] .lauf-fortschritt i {
  display: block;
  height: 100%;
  background: var(--hz-akzent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Branchen-Leinwand im Hero (technik.js zeichnet sie, nur mit JavaScript). */
.buehne .tk-feld {
  z-index: -1;
  opacity: 0.45;
}

/* Scrollytelling: szenen.js legt in jede Section eine schmale Leinwand. */
:root {
  --szene-farbe: oklch(0.8 0.11 82);
}
[data-szene-an] {
  position: relative;
  isolation: isolate;
}
.szene-leinwand {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  /* nur im Seitenrand neben dem Inhaltsblock, nie unter dem Text */
  width: clamp(2.5rem, calc((100% - 78rem) / 2 + 0.5rem), 14rem);
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}
.szene-leinwand[data-seite="links"] {
  right: auto;
  left: 0;
}
@media (max-width: 45.99rem) {
  .szene-leinwand {
    width: 2.5rem;
    opacity: 0.3;
  }
}

@keyframes hz-bild {
  from { transform: scale(1.06); }
  to { transform: none; }
}
@keyframes hz-auf {
  from { transform: translateY(28px); }
  to { transform: none; }
}