/* AdenFace · nur die Startseite, Richtung "Im Programm". Alles Gemeinsame steht in basis.css.

   Zwei Fassungen desselben HTML:
   1. Gestapelt (Grundfall, Handy, Tablet, ohne Skript): jedes Kapitel ist Film oben,
      Text darunter. Kopf klebt oben, die Programmleiste unten.
   2. Bühne (ab 75rem Breite und 36rem Höhe, nur mit Skript): die Filme liegen fest
      hinter dem Text, immer nur der aktive ist sichtbar (buehne.js setzt data-aktiv).
      Wichtig für jede spätere Bewegung: .kapitel, main und body dürfen weder transform
      noch filter noch will-change bekommen, sonst hängen die festen Filme am Abschnitt
      statt am Fenster. Bewegen darf man .kapitel__text und die .film-Ebenen selbst. */

.startseite {
  --kopf-h: 4rem;
  --leiste-h: 4rem;
  --ok: #3ddc84;
  --etikett: 0.6875rem;
  padding-bottom: var(--leiste-h);
}
html:has(.startseite) { scroll-padding: calc(var(--kopf-hoehe) + 1rem) 0 5rem; }

/* ------------------------------------------------------------------ Kleinteile */
.etikett, .tafel__kopf, .leiste__klar, .leiste__status,
.symbol--text, .dauer__titel, .dauer__marken, .bedarf__titel, .kasse__einmalig, .gestenliste dt,
.bereiche__liste, .rechnertafel dt, .rechnertafel__quelle {
  font-family: var(--schrift-etikett); font-weight: 400; text-transform: uppercase;
}
.etikett { margin-bottom: 1.125rem; font-size: 0.75rem; line-height: 1.6; letter-spacing: 0.18em; color: var(--leise); }
.etikett::before { content: ""; display: inline-block; width: 1rem; height: 1px; margin-right: 0.75rem; vertical-align: 0.3em; background: var(--akzent); }
.etikett b { font-weight: 400; color: var(--akzent); }

.tafel { background: rgb(14 18 24 / 0.88); border: 1px solid var(--rand); padding: 1.25rem 1.375rem; }
.tafel__kopf {
  display: flex; align-items: center; gap: 0.625rem; margin: 0 0 1rem;
  font-size: var(--etikett); line-height: 1.4; letter-spacing: 0.18em; color: var(--akzent);
}
.tafel__kopf::before { content: ""; width: 0.875rem; height: 1px; background: currentColor; }
.tafel__fuss { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.55; color: var(--leise); }

.held__titel, .kapitel__titel, .kasse__titel { letter-spacing: -0.035em; text-wrap: balance; }
.held__titel em, .kapitel__titel em { font-style: normal; color: var(--akzent); }
.held__titel { font-size: clamp(2.5rem, 1.1rem + 5.4vw, 5rem); line-height: 0.98; letter-spacing: -0.04em; }
.kapitel__titel { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 1.04; }
.kapitel__titel--szene { font-size: clamp(1.625rem, 1.1rem + 2vw, 2.5rem); }
.kapitel__lauf { margin-top: 1.125rem; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.kapitel__lauf--klein { font-size: 0.9375rem; color: var(--leise); }
.kapitel__verweis { margin-top: 1.25rem; }

/* Gespräch: die Frage in Blau, Evies Antwort als Untertitel, wie im Programm. */
.gespraech { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 1.5rem 0; }
.frage, .untertitel {
  max-width: 100%; padding: 0.625rem 0.875rem; border-radius: var(--radius);
  background: rgb(16 20 27 / 0.92); border: 1px solid var(--rand); font-size: 0.9375rem; line-height: 1.45;
}
.frage { color: var(--akzent); border-color: #2b3a4a; }
.untertitel { color: var(--text); }
.knopfreihe { margin-top: 1.5rem; }
.held__klein { margin-top: 1rem; font-size: 0.875rem; color: var(--leise); }

/* ------------------------------------------------------------------ Kopf
   Grund und Linie gehen über die volle Breite, der Inhalt steht in den Kanten von .inhalt
   (basis.css). --kante ist genau der Abstand, den .inhalt links und rechts lässt:
   max(Seitenrand, halber Überschuss über --breite). Kopf und Leiste nutzen sie beide. */
.startseite { --kante: max(var(--seitenrand), (100% - var(--breite)) / 2); }
.startkopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.75rem 1.5rem;
  height: var(--kopf-h); padding-inline: var(--kante);
  background: rgb(11 14 19 / 0.9); border-bottom: 1px solid rgb(38 45 56 / 0.7);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.startkopf__marke {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem;
  font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none;
}
.startkopf__marke::before { content: ""; width: 1.5rem; height: 1.5rem; flex: none; background: url("/img/logo-zeichen.png") center / contain no-repeat; background-image: image-set(url("/img/logo-zeichen.webp") type("image/webp"), url("/img/logo-zeichen.png") type("image/png")); }
.startkopf__menueknopf {
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0 0.875rem;
  border: 1px solid var(--rand-hell); border-radius: var(--radius); background: transparent; font-size: 0.9375rem; cursor: pointer;
  margin-left: auto; white-space: nowrap;
}
.startkopf__menueknopf::before { content: ""; width: 1rem; height: 0.5625rem; border-block: 1.5px solid currentColor; }
@supports not selector(:popover-open) { .startkopf__menueknopf { display: none; } .startkopf { flex-wrap: wrap; height: auto; } }

.startmenue { margin: 0; padding: 0; border: 0; background: none; color: inherit; }
.startmenue ol, .startmenue ul { list-style: none; margin: 0; padding: 0; }
.startmenue:popover-open {
  position: fixed; inset: var(--kopf-h) 0 auto 0; width: auto; max-height: calc(100vh - var(--kopf-h)); overflow: auto;
  padding: 0.5rem var(--kante) 1.5rem; background: var(--grund-2); border-bottom: 1px solid var(--rand);
  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.6);
}
.startmenue:popover-open a:not(.knopf) {
  display: flex; align-items: center; min-height: 3rem; border-bottom: 1px solid var(--rand);
  color: var(--text-2); text-decoration: none; font-size: 1.0625rem;
}
.startmenue:popover-open .knopf { width: 100%; margin-top: 1.25rem; min-height: 3rem; }
/* Impressum und Datenschutzerklärung nur im Menü, leiser und nebeneinander unter dem Knopf. */
.startmenue__recht { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 0.75rem; }
.startmenue:popover-open .startmenue__recht a { min-height: 2.75rem; border-bottom: 0; font-size: 0.9375rem; color: var(--leise); }
/* Das Ziel, in dessen Kapitel man gerade liest (start.js setzt aria-current). Nur die Farbe,
   kein Strich und keine Nummer: den Kapitelstand trägt die Leiste. */
.startmenue .startmenue__ziele a[aria-current] { color: var(--akzent); }
.startmenue::backdrop { inset: var(--kopf-h) 0 0 0; background: rgb(5 7 10 / 0.6); }

/* ------------------------------------------------------------------ Programmleiste */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.5rem 1rem;
  height: var(--leiste-h); padding: 0 var(--kante) env(safe-area-inset-bottom);
  background: #090c10; border-top: 1px solid var(--rand);
}
.leiste__status { display: flex; align-items: center; gap: 0.625rem; min-width: 0; margin: 0; font-size: var(--etikett); letter-spacing: 0.14em; color: #b9c2ce; white-space: nowrap; }
.leiste__punkt { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.leiste__trenner { width: 3px; height: 3px; background: var(--leise); }
.leiste__weg, .leiste__symbole, .leiste__klar, [data-leiste-zustand], .leiste__trenner { display: none; }
.leiste__weg { position: relative; width: 10rem; height: 1px; background: #2d3540; }
/* In der Leiste, nicht im Kopf: es ist ein Zustand wie im Programm. */
.leiste__klar { margin: 0 0 0 auto; font-size: var(--etikett); letter-spacing: 0.14em; color: var(--leise); white-space: nowrap; }
.leiste__weg i { position: absolute; inset: 0; background: var(--akzent); transform-origin: left; transform: scaleX(var(--weg, 0.06)); transition: transform 400ms var(--kurve); }
.leiste__film, .symbol {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: none;
  min-width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid #333c49; border-radius: 4px;
  background: rgb(12 15 20 / 0.7); color: #cfd6df; cursor: pointer; text-decoration: none;
}
.leiste__film { margin-left: auto; }
.leiste__film::before { content: ""; width: 0.625rem; height: 0.75rem; border-inline: 3px solid currentColor; box-sizing: border-box; }
.leiste__film[data-zeigt="abspielen"]::before { border: 0; border-left: 0.625rem solid currentColor; border-block: 0.375rem solid transparent; height: 0; }
.leiste__filmtext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.leiste__film:hover, .symbol:hover { border-color: var(--leise); color: var(--text); }
.leiste__film[hidden] + .leiste__symbole, .leiste__film[hidden] ~ .leiste__kaufen { margin-left: auto; }
.symbol svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.symbol[data-an] { border-color: var(--akzent); color: var(--akzent); }
.symbol--text { padding: 0 0.875rem; font-size: var(--etikett); letter-spacing: 0.16em; }
.leiste__kaufen { flex: none; }

/* ------------------------------------------------------------------ Kapitel, gestapelt */
.kapitel { position: relative; padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem); }
.kapitel--szene { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.kapitel .inhalt { position: relative; margin-top: -3rem; }
.kapitel--held .inhalt { margin-top: -4rem; }
.kapitel__text { position: relative; z-index: 5; max-width: 36rem; }

.film { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 72vh; overflow: hidden; background: #070a10; }
.film--hoch { aspect-ratio: 9 / 16; max-height: calc(100vh - var(--kopf-h) - var(--leiste-h)); }
.film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--film-pos, 50% 35%); }
.film--hoch { --verlauf: 10%; }
.film--hoch + .inhalt { margin-top: 1.5rem; }   /* unten im Hochkant-Film liegt die Tafel: kein Text darüber */
.film--hoch img, .film--hoch video { object-position: 50% 0; }
.film__bild img:not([src]) { visibility: hidden; }
.film__video { opacity: 0; }
.film[data-zustand="laeuft"] .film__video, .film[data-zustand="angehalten"] .film__video, .film[data-zustand="gespult"] .film__video { opacity: 1; }
.film__folge { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; }
.film__folge[data-bereit] { opacity: 1; }
.film::after { content: ""; position: absolute; inset: auto 0 0; height: var(--verlauf, 42%); z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(11 14 19 / 0), rgb(11 14 19 / 0.8) 50%, var(--grund) 88%); }
/* In der Ecke statt mittig: mittig liegt der Knopf in mehreren Kapiteln auf der Tafel, dem
   Gesicht oder dem Untertitel. Oben rechts in der Filmfläche ist in jedem Kapitel frei. */
.film__start {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0 1.25rem 0 1rem;
  border: 1px solid var(--rand-hell); border-radius: 999px; background: rgb(11 14 19 / 0.85); color: var(--text);
  font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.film__start::before { content: ""; border-left: 0.75rem solid var(--akzent); border-block: 0.4375rem solid transparent; }
.film__start:hover { border-color: var(--akzent); }
@media (min-width: 40rem) {
  .film, .film--hoch { aspect-ratio: 16 / 9; max-height: none; }
  .film--hoch + .inhalt { margin-top: -3rem; }
  .film--hoch img, .film--hoch video { object-position: var(--film-pos, 50% 35%); }
}
/* Spulen auf dem Handy: der Hochkant-Film bleibt stehen, solange man spult (spulen.js), danach
   schiebt sich der Text als Blatt darüber. Auf dem Tablet spult der Film im Vorbeiziehen, der
   Regler steht direkt darunter. Nur mit Bewegung, sonst wie jedes Kapitel. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 39.99rem) {
  #aussehen > .film { position: sticky; top: var(--kopf-h); }
  #aussehen > .inhalt { margin-top: 75vh; padding-top: 2.5rem; background: linear-gradient(180deg, rgb(11 14 19 / 0), var(--grund) 2.5rem); }
}
/* Ohne Skript: der Film aus dem noscript mit eigenen Bedienelementen, sonst nichts. */
@media (scripting: none) {
  .film { aspect-ratio: auto; max-height: none; }
  .film__bild, .film__video, .film__start, .film::after { display: none; }
  .film .film__roh { position: static; width: 100%; height: auto; }
  .kapitel .inhalt { margin-top: 1.5rem; }
}

/* ------------------------------------------------------------------ Instrumente */
.bereiche { margin-top: 1.75rem; }
.bereiche__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.25rem 1rem; list-style: none; margin: 0; padding: 0; font-size: var(--etikett); letter-spacing: 0.14em; color: var(--text-2); }
.bereiche__liste li { display: flex; align-items: center; min-height: 2rem; padding-left: 0.75rem; border-left: 1px solid var(--rand); }
.bereiche__liste li[data-an] { color: var(--akzent); border-left-color: var(--akzent); }
/* Regler: was der Film gerade ändert. Farbfeld und Knopf auf dem Farbton-Streifen wie im Programm.
   spulen.js setzt Name, Farbe und die Lage des Knopfs (transform). */
.regler { margin-top: 1.125rem; padding-top: 1rem; border-top: 1px solid var(--rand); transition: opacity var(--dauer); }
.regler[data-ruht] { opacity: 0.45; }
.regler__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; color: var(--text); }
.regler__farbe { width: 1.5rem; height: 1rem; border: 1px solid var(--rand-hell); border-radius: 2px; background: #fbfeff; }
.regler__bahn { position: relative; display: block; height: 0.5rem; margin: 0.75rem 0 0; border-radius: 1px;
  background: linear-gradient(90deg, #f00, #ff0 16.7%, #0f0 33.3%, #0ff 50%, #00f 66.7%, #f0f 83.3%, #f00); }
.regler__knopf { position: absolute; top: -0.25rem; left: -0.25rem; width: 0.5rem; height: 1rem; border: 1.5px solid #fff; border-radius: 2px; background: rgb(11 14 19 / 0.4); box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6); transition: opacity var(--dauer); }
.regler[data-grau] .regler__knopf { opacity: 0.35; }
.regler__fuss { margin-top: 0.75rem; font-family: var(--schrift-etikett); font-size: var(--etikett); letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); }
@media (prefers-reduced-motion: reduce) { .regler__fuss { display: none; } }
@media (scripting: none) { .regler { display: none; } }

.rechnertafel { margin-top: 1.25rem; }
.rechnertafel__quelle { margin-left: auto; color: var(--leise); letter-spacing: 0.12em; }
.rechnertafel__werte { display: grid; gap: 0.875rem; margin: 0; }
.wert { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; }
.rechnertafel dt { font-size: var(--etikett); letter-spacing: 0.14em; color: var(--leise); }
.rechnertafel dd { margin: 0; font-size: 0.9375rem; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechnertafel dd b { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.wert__balken { flex: 1 0 100%; position: relative; height: 2px; background: #2a323d; }
.wert__balken i { position: absolute; inset: 0; background: var(--akzent); transform-origin: left; transform: scaleX(var(--anteil, 0)); transition: transform 600ms var(--kurve); }
.wert__balken--prozessor i { --anteil: 0.113; }
.wert__balken--speicher i { --anteil: 0.282; }
.wert__balken--grafik i { --anteil: 0.23; }
.rechnertafel__programme { display: grid; gap: 0.375rem; margin: 1.125rem 0 0; padding: 0.875rem 0 0; border-top: 1px solid var(--rand); list-style: none; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.rechnertafel__programme li { display: grid; grid-template-columns: 1fr 3.25rem 3.75rem; gap: 0.75rem; color: var(--leise); }
.rechnertafel__programme span:first-child { color: var(--text-2); overflow-wrap: anywhere; }
.rechnertafel__programme span:not(:first-child) { text-align: right; }

.dauer { margin-top: 1.75rem; }
.dauer__titel { font-size: var(--etikett); letter-spacing: 0.16em; color: var(--leise); }
.dauer__bahn { display: flex; align-items: center; margin-top: 0.75rem; }
.dauer__punkt { flex: none; width: 9px; height: 9px; border: 1.5px solid var(--akzent); border-radius: 50%; }
.dauer__punkt--voll { background: var(--akzent); }
.dauer__strecke { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--akzent) 0 6px, transparent 6px 11px); }
.dauer__marken { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.625rem; font-size: var(--etikett); letter-spacing: 0.12em; color: var(--leise); }
.dauer__marken b { font-weight: 400; color: var(--text); }

.schritte { display: grid; gap: 1rem 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; counter-reset: schritt; }
.schritte li { counter-increment: schritt; padding-top: 0.75rem; border-top: 1px solid var(--rand); }
.schritte h3 { display: flex; gap: 0.625rem; font-size: 1rem; line-height: 1.35; }
.schritte h3::before { content: "0" counter(schritt); font-family: var(--schrift-etikett); font-weight: 400; font-size: var(--etikett); letter-spacing: 0.1em; line-height: 2; color: var(--akzent); }
.schritte p { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.5; color: var(--leise); }
@media (min-width: 30rem) { .schritte { grid-template-columns: 1fr 1fr; } }

.gestenliste { display: grid; gap: 0.625rem; margin: 1.75rem 0 0; }
.gestenliste div { display: grid; grid-template-columns: 8.5rem 1fr; align-items: baseline; gap: 1rem; }
.gestenliste dt { font-size: var(--etikett); letter-spacing: 0.14em; color: var(--akzent); }
.gestenliste dd { margin: 0; color: var(--text); }

.wohin { margin-top: 1.75rem; }
.wohin__liste { margin: 0; }
.wohin__liste div { display: grid; gap: 0.125rem 1rem; padding: 0.625rem 0; border-top: 1px solid var(--rand); }
.wohin__liste dt { color: var(--text); font-size: 0.9375rem; }
.wohin__liste dd { margin: 0; color: var(--leise); font-size: 0.9375rem; }
@media (min-width: 30rem) { .wohin__liste div { grid-template-columns: 11rem 1fr; } }

.kasse { padding: clamp(1.5rem, 1rem + 2vw, 2rem); background: rgb(14 18 24 / 0.94); }
.kasse__titel { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.08; }
.kasse__preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 1.25rem; font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.kasse__einmalig { font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--leise); }
.kasse__text { margin-top: 1rem; color: var(--text-2); }
.bedarf { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rand); }
.bedarf__titel { margin-bottom: 0.5rem; font-size: var(--etikett); letter-spacing: 0.16em; color: var(--akzent); }
.bedarf__liste { margin: 0; }
.bedarf__liste div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; padding: 0.5rem 0; border-bottom: 1px solid rgb(38 45 56 / 0.6); }
.bedarf__liste dt { font-size: 0.875rem; color: var(--leise); }
.bedarf__liste dd { margin: 0; font-size: 0.9375rem; color: var(--text); }
.kasse__klein { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.55; color: var(--leise); }
.kasse__knopf { width: 100%; min-height: 3.25rem; margin-top: 1.5rem; }
.kasse__abschied { display: inline-block; margin-top: 1.5rem; }

/* ------------------------------------------------------------------ Fußzeile über den Filmen */
.startseite .fuss { position: relative; z-index: 6; }

/* ------------------------------------------------------------------ Breiter */
@media (min-width: 30rem) {
  [data-leiste-zustand], .leiste__trenner { display: inline; }
  .leiste__trenner { display: inline-block; }
}
@media (min-width: 75rem) {
  .startseite { --kopf-h: 4.25rem; --leiste-h: 4.5rem; }
  .startkopf__menueknopf, .leiste__kaufen { display: none; }
  /* Die Navigation füllt den Platz zwischen Marke und Kaufen. Die Ziele stehen mit margin auto
     in der Mitte, und weil vor ihnen die Lücke des Kopfes und hinter ihnen die gleich große
     Lücke der Navigation liegt, sind beide Abstände gleich. */
  .startmenue, .startmenue[popover] {
    display: flex; align-items: center; gap: 1.5rem; flex: 1 1 auto; min-width: 0;
    position: static; inset: auto; width: auto; height: auto; margin: 0; overflow: visible; background: none; padding: 0;
  }
  .startmenue .startmenue__ziele { display: flex; align-items: center; gap: 2rem; margin-inline: auto; }   /* .startmenue davor: sonst gewinnt .startmenue ul { margin: 0 } */
  .startmenue__recht { display: none; }
  .startmenue__ziele a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-2); text-decoration: none; font-size: 0.9375rem; white-space: nowrap; }
  .startmenue__ziele a:hover { color: var(--text); }
  .startmenue .startmenue__ziele a[aria-current] { color: var(--akzent); }
  .startmenue__kaufen { flex: none; }
  .leiste { gap: 1.25rem; }
  .leiste__weg, .leiste__symbole { display: flex; }
  .leiste__klar { display: block; }
  .leiste__film, .leiste__film[hidden] + .leiste__symbole { margin-left: 0; }
  .leiste__symbole { gap: 0.625rem; }
  .leiste__film { padding: 0 0.875rem; }
  .leiste__filmtext { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font-family: var(--schrift-etikett); font-size: var(--etikett); letter-spacing: 0.16em; text-transform: uppercase; }
}

/* ------------------------------------------------------------------ Bühne */
@media (min-width: 75rem) and (min-height: 36rem) and (scripting: enabled) {
  /* Abstand der Inhaltskante vom Fensterrand. Nicht --rand nennen: das ist in basis.css die Rahmenfarbe. */
  .startseite { --buehne-kante: max(var(--seitenrand), (100vw - var(--breite)) / 2); }
  .startkopf { position: fixed; inset: 0 0 auto; }
  .kapitel {
    --textbreite: 27rem; --maske: 9rem;
    --bis-text: calc(var(--buehne-kante) + var(--textbreite) - 3rem);
    display: flex; align-items: center; min-height: 100vh; padding: calc(var(--kopf-h) + 3rem) 0 calc(var(--leiste-h) + 3rem);
    pointer-events: none;
  }
  .kapitel--held { --textbreite: 34rem; }
  .kapitel--kaufen { --textbreite: 31rem; }
  #aussehen { --textbreite: 24rem; }
  /* Spulen auf der Bühne: das Kapitel ist länger, der Text bleibt stehen, der Film läuft am Scrollweg. */
  @media (prefers-reduced-motion: no-preference) {
    #aussehen { min-height: 230vh; align-items: flex-start; }
    #aussehen > .film { position: fixed; top: var(--kopf-h); }
    #aussehen > .inhalt { position: sticky; top: calc(var(--kopf-h) + 2.5rem); margin-top: 0; padding-top: 0; background: none; }
  }
  #rechner { --maske: 4rem; }
  .kapitel--szene { min-height: 88vh; }
  .kapitel .inhalt, .kapitel--held .inhalt { margin-top: 0; }
  .kapitel__text { width: var(--textbreite); max-width: none; pointer-events: auto; }
  [data-seite="rechts"] .kapitel__text { margin-left: auto; }

  .film, .film--hoch {
    position: fixed; top: var(--kopf-h); bottom: 0; left: var(--bis-text); right: 0; z-index: 0;
    width: auto; aspect-ratio: auto; max-height: none; visibility: hidden; background: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--maske)); mask-image: linear-gradient(90deg, transparent, #000 var(--maske));
  }
  [data-seite="rechts"] > .film { left: 0; right: var(--bis-text); -webkit-mask-image: linear-gradient(270deg, transparent, #000 var(--maske)); mask-image: linear-gradient(270deg, transparent, #000 var(--maske)); }
  /* Nur der aktive Film ist zu sehen. Die vorige Ebene (data-vorher) liegt bereit, bleibt aber
     verborgen, weil sie je nach Textseite woanders sitzt. Ein Wisch blendet sie selbst ein. */
  .film[data-vorher] { z-index: 1; }
  .film[data-aktiv] { visibility: visible; z-index: 2; }
  .film::after { display: none; }
  .film img, .film video, .film--hoch img, .film--hoch video { object-position: var(--film-pos, 50% 45%); }
  /* Filme mit der echten Programmleiste: unten bündig, die Leiste liegt unter der Leiste der Seite. */
  [data-film="gespraech"] { --film-pos: 58% 100%; }   /* Fragenblase rechts ganz im Bild */
  [data-film="aussehen"] { --film-pos: 100% 100%; }
  /* Rechner: Text rechts, Film von links her. Die Tafel im Film (x 180 bis 590 von 1920) bleibt ganz im Bild. */
  [data-film="rechner"] { --film-pos: 22% 100%; }
  .film__start { pointer-events: auto; }
  .film:not([data-aktiv]) .film__start { display: none; }
}