/* Startseite · story-website (Owner: wdf-section-builder, Auftrag P7-home-20) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15), nur Tokens.
   Mobil zuerst: Grundregeln = Telefon-Fassung der Beispiel-Website (Entwurfsmaß 390 px), ab 768 px Browser-Fassung (1280 px), ab 1024 px zwei Spalten.
   Dieses CSS ist die statische Fassung (:root:not(.film)); der gepinnte Film (P8) setzt mit .film auf dieselben Ebenen auf.
   Aus base.css kommen: .eyebrow/.mono (kicker), .geraet/.chrome/.vp + .geraet--wechsel (Telefon < 768 px, Browser darüber),
   .pe-liste/.pe-karte/.pe-icon/.pe-meta/.pe-zeile/.pe-fertig/.pe-daten (mitteilungskarte), .badge, .ci, .nw.
   Hier nur Kopf, Raster, Beispiel-Website (.bw…, auf .st1 begrenzt) und die Zustands-Ebenen der Mitteilungskarten.
   Zwei Laufweiten stehen als Token-Verweis mit Prototyp-Wert als Rückfall, bis tokens.css sie führt (Anfrage P7-home-20):
   --tracking-example-welcome (-.015em), --tracking-example-button (.02em). */

/* ---------- Raster und Kopf ---------- */
.st1 { position: relative; }
.st1-in { padding: var(--space-section) 0; }
.st1-col { position: relative; display: grid; gap: var(--space-32); }
.st1-kopf { position: relative; display: grid; gap: var(--space-12); }
/* Kicker 01–06 und die sieben Überschriften liegen gestapelt (eine Zelle); der Film blendet sie nacheinander ein */
.st1-kicker { position: relative; display: grid; min-height: var(--space-16); }
.st1-kicker .eyebrow { grid-area: 1 / 1; }
.st1-h { position: relative; display: grid; }
.st1-h h2 {
  grid-area: 1 / 1; max-width: 24ch;
  font-size: var(--font-size-h2); line-height: var(--leading-h2-story); letter-spacing: var(--tracking-h2); text-wrap: balance;
}
.st1-h h2 .ci { color: var(--color-accent); }
.st1-h h2 .leis { color: var(--color-text-secondary); }
.st1-h .claim-unter {
  display: block; max-width: 52ch; margin-top: var(--space-12);
  font: var(--font-weight-regular) var(--font-size-lead) / var(--leading-text) var(--font-text); letter-spacing: 0; color: var(--color-text-secondary);
}

/* Statisch: erster Kicker, Frage und Claim sichtbar; die übrigen Zeilen nur für Screenreader */
:root:not(.film) .st1-kicker .eyebrow ~ .eyebrow,
:root:not(.film) .st1-h h2:not([data-statisch]) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
:root:not(.film) .st1-kicker .eyebrow { grid-area: auto; }
:root:not(.film) .st1-h { gap: var(--space-16); }
:root:not(.film) .st1-h h2 { grid-area: auto; }
:root:not(.film) .st1-h h2[data-statisch="3"] { max-width: 40ch; font-size: var(--font-size-h3); color: var(--color-text-secondary); }
:root:not(.film) .st1-h h2[data-statisch="3"] .ci { color: var(--color-accent-soft); }

/* Vorher/Nachher (mobil untereinander, ab 1024 px nebeneinander); Posteingang und fertige Anfrage reihen sich statisch darunter ein */
.st1-paar { display: grid; gap: var(--space-32); }
.st1-geraet { display: grid; gap: var(--space-12); min-width: 0; }
.st1-geraet > .mono { color: var(--color-text-tertiary); }
.st1-geraet > .mono b { color: var(--color-text); font-weight: var(--font-weight-medium); }
/* Licht-Scan (Lichtkante, Variante a): Ebene über der Website, nur im Film sichtbar */
.scan { display: none; }

/* ---------- Posteingang des Betriebs (Beispieldaten) ---------- */
.pe-eingang { display: grid; gap: var(--space-12); align-content: start; }
.pe-titel { color: var(--color-text-tertiary); }
.pe-titel .film-t { display: none; }
.pe-hinweis { color: var(--color-text-tertiary); font-size: var(--font-size-caption-sm); }
/* Zustand „vorab geklärt“ (Film): CI-Haken über dem Icon, neue Meta-Zeile, Titel durchgestrichen; ruht unsichtbar */
.pe-ok {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--radius-round);
  background: var(--color-accent); color: var(--color-white); opacity: 0;
}
.pe-meta .pe-geklaert { color: var(--color-accent-on-light); font-weight: var(--font-weight-medium); opacity: 0; }
.pe-strich {
  position: absolute; left: calc(-1 * var(--space-2)); right: calc(-1 * var(--space-2)); top: 52%; height: var(--space-2);
  border-radius: var(--radius-hairline); background: var(--color-accent); transform: scaleX(0); transform-origin: left;
}
:root:not(.film) .pe-schleier { display: none; }
:root:not(.film) .pe { display: contents; }
:root:not(.film) .pe-fertig-box { display: grid; gap: var(--space-12); align-content: start; }
:root:not(.film) .pe-karte .pe-strich { display: none; }

/* ---------- Fiktive Beispiel-Website „Wärme & Haus“ (8-pt-Raster) ----------
   --u = 8 px im Entwurfsmaß der Beispiel-Website und wächst mit der Hülle (cqi): Telefon 390 px = 48,75 × 8, Browser 1280 px = 160 × 8.
   Auf .st1 begrenzt, damit sich Hero (.kreativ .bw…) und Story 1 nicht beeinflussen. */
.st1 .bw {
  --u: calc(100cqi / 48.75); position: absolute; inset: 0; overflow: hidden;
  font-family: var(--font-text); font-size: calc(var(--u) * 2); line-height: var(--leading-text); color: var(--example-light);
}
.st1 .bw-foto { position: absolute; inset: 0; overflow: hidden; background: var(--color-device-photo-ground); }
.st1 .bw-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; }
.st1 .bw-schleier { position: absolute; inset: 0; pointer-events: none; }
.st1 .bw--vorher .bw-schleier { background: var(--example-veil-before); }
.st1 .bw--nachher .bw-schleier { background: var(--example-veil-after-phone); }
.st1 .bw-nav {
  position: absolute; z-index: var(--z-label); left: 0; right: 0; top: 0; height: calc(var(--u) * 7);
  display: flex; align-items: center; gap: calc(var(--u) * 4); padding: 0 calc(var(--u) * 3);
}
.st1 .bw-logo { display: flex; align-items: center; gap: var(--u); font: var(--font-weight-display) calc(var(--u) * 2) / var(--leading-none) var(--font-display); letter-spacing: var(--tracking-h3); white-space: nowrap; }
.st1 .bw-logo i { flex: none; width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: var(--radius-round); background: var(--example-orb); }
.st1 .bw-links { display: none; gap: calc(var(--u) * 4); margin-left: auto; font-size: calc(var(--u) * 1.75); color: var(--example-light-a86); white-space: nowrap; }
.st1 .bw-navbtn {
  display: none; align-items: center; height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 2.5); border-radius: var(--radius-pill);
  background: var(--example-light); color: var(--example-ink); font-size: calc(var(--u) * 1.75); font-weight: var(--font-weight-display); white-space: nowrap;
}
.st1 .bw-burger {
  display: block; width: calc(var(--u) * 3); height: calc(var(--u) * 2); margin-left: auto;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 100% var(--stroke-bold) no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% var(--stroke-bold) no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 100% var(--stroke-bold) no-repeat;
}
.st1 .bw-h .inl { display: inline-block; }

/* Vorher: Begrüßung mittig über dem Foto, schlichtes Kontaktformular unten */
.st1 .bw--vorher .bw-held {
  position: absolute; z-index: var(--z-raised); left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 7); bottom: calc(var(--u) * 30);
  display: grid; align-content: center; justify-items: center; text-align: center;
}
.st1 .bw--vorher .bw-h {
  max-width: calc(var(--u) * 90); text-wrap: balance;
  font: var(--font-weight-medium) calc(var(--u) * 4) / calc(var(--u) * 4.5) var(--font-display); letter-spacing: var(--tracking-example-welcome, -.015em);
}
.st1 .bw--vorher .bw-sub { max-width: calc(var(--u) * 64); margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 1.75); line-height: calc(var(--u) * 2.5); color: var(--example-light-a86); text-wrap: balance; }
.st1 .bw-mehr {
  display: inline-flex; align-items: center; height: calc(var(--u) * 5); margin-top: calc(var(--u) * 3); padding: 0 calc(var(--u) * 3);
  border-radius: calc(var(--u) * .5); box-shadow: inset 0 0 0 1px var(--example-light-a70); font-size: calc(var(--u) * 1.75); letter-spacing: var(--tracking-example-button, .02em);
}
.st1 .bw-form {
  position: absolute; z-index: var(--z-raised); left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: calc(var(--u) * 3);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--u); padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 1.5);
  background: var(--example-paper-a95); color: var(--example-ink); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) calc(var(--u) * -2) var(--example-shadow);
}
.st1 .bw-feld {
  position: relative; display: flex; align-items: center; height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 1.5); overflow: hidden;
  border-radius: calc(var(--u) * .5); box-shadow: inset 0 0 0 1px var(--example-ink-a20);
  font-size: calc(var(--u) * 1.75); color: var(--example-placeholder); white-space: nowrap;
}
/* Eingaben ruhen unsichtbar über dem Platzhalter (statisch: leeres Formular; der Film tippt sie ein) */
.st1 .bw-feld .wert {
  position: absolute; left: calc(var(--u) * 1.5); right: calc(var(--u) * 1.5); top: 50%; transform: translateY(-50%);
  color: var(--example-ink); opacity: 0; overflow: hidden; text-overflow: ellipsis;
}
.st1 .bw-feld.gross { grid-column: 1 / -1; height: calc(var(--u) * 8); align-items: flex-start; padding-top: calc(var(--u) * 1.5); white-space: normal; }
.st1 .bw-feld.gross .wert { top: calc(var(--u) * 1.5); transform: none; white-space: normal; }
.st1 .bw-absenden {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 3);
  border-radius: calc(var(--u) * .5); background: var(--example-button-muted); color: var(--color-white);
  font-size: calc(var(--u) * 1.75); font-weight: var(--font-weight-medium); white-space: nowrap;
}
/* Danke-Meldung nach dem Absenden (Film), deckt das Formular */
.st1 .bw-danke {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--u); padding: 0 calc(var(--u) * 2);
  border-radius: inherit; background: var(--example-paper); color: var(--example-ink-secondary);
  font-size: calc(var(--u) * 1.75); line-height: calc(var(--u) * 2.5); text-align: center; opacity: 0;
}
.st1 .bw-danke svg { width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); color: var(--example-success); }

/* Nachher: klare Headline oben, Assistent unten; statischer Endzustand = Preisspanne */
.st1 .bw--nachher .bw-held { position: absolute; z-index: var(--z-raised); left: calc(var(--u) * 3); right: calc(var(--u) * 3); top: calc(var(--u) * 9); display: grid; justify-items: start; }
.st1 .bw-kick { font: var(--font-weight-medium) calc(var(--u) * 1.5) / calc(var(--u) * 2) var(--font-mono); letter-spacing: var(--tracking-mono-loose); text-transform: uppercase; color: var(--example-light-a82); }
.st1 .bw--nachher .bw-h { margin-top: calc(var(--u) * 1.5); font: var(--font-weight-display) calc(var(--u) * 4.5) / calc(var(--u) * 4.5) var(--font-display); letter-spacing: var(--tracking-h2); }
.st1 .bw--nachher .bw-sub { max-width: calc(var(--u) * 36); margin-top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 1.75); line-height: calc(var(--u) * 2.5); color: var(--example-light-a90); }
.st1 .bw-assist { position: absolute; z-index: var(--z-raised); left: calc(var(--u) * 3); right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); }
.st1 .bw-karte, .st1 .bw-ergebnis {
  display: grid; align-content: start; padding: calc(var(--u) * 3); border-radius: calc(var(--u) * 1.5);
  background: var(--example-paper); color: var(--example-ink); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) calc(var(--u) * -2) var(--example-shadow);
}
.st1 .bw-karte { position: relative; }
/* Ergebnis liegt deckungsgleich über dem Fragen-Stapel */
.st1 .bw-ergebnis { position: absolute; inset: 0; }
.st1 .bw-fort { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * .5); }
.st1 .bw-fort i { position: relative; height: calc(var(--u) * .5); border-radius: var(--radius-pill); background: var(--example-ink-a12); overflow: hidden; }
.st1 .bw-fort i b { position: absolute; inset: 0; background: var(--example-accent); transform-origin: left; }
/* Fragen 1–4 liegen gestapelt in einer Zelle; der Film blättert sie um */
.st1 .bw-stapel { position: relative; display: grid; }
.st1 .bw-stapel > * { grid-area: 1 / 1; }
.st1 .bw-q-label { margin-top: calc(var(--u) * 2); }
.st1 .bw-q-frage { margin-top: var(--u); }
.st1 .bw-q-wert { margin-top: calc(var(--u) * 2); }
.st1 .bw-label { font: var(--font-weight-medium) calc(var(--u) * 1.5) / calc(var(--u) * 2) var(--font-mono); letter-spacing: var(--tracking-mono-loose); text-transform: uppercase; color: var(--example-ink-secondary); }
.st1 .bw-frage { align-self: start; min-height: calc(var(--u) * 6); font: var(--font-weight-display) calc(var(--u) * 2.25) / calc(var(--u) * 3) var(--font-display); letter-spacing: var(--tracking-h3); }
.st1 .bw-eingabe {
  display: flex; align-items: center; justify-content: space-between; gap: var(--u); height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 2);
  border-radius: calc(var(--u) * .75); box-shadow: inset 0 0 0 var(--stroke-bold) var(--example-ink);
  font: var(--font-weight-medium) calc(var(--u) * 2) / var(--leading-none) var(--font-mono); color: var(--example-ink);
}
.st1 .bw-eingabe svg { width: calc(var(--u) * 2.5); height: calc(var(--u) * 2.5); color: var(--example-accent); }
.st1 .bw-weiter {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--u); height: calc(var(--u) * 5); margin-top: calc(var(--u) * 2); padding: 0 calc(var(--u) * 2.5);
  border-radius: var(--radius-pill); background: var(--example-ink); color: var(--example-light); font-size: calc(var(--u) * 1.75); font-weight: var(--font-weight-display);
}
.st1 .bw-weiter svg { width: calc(var(--u) * 2); height: calc(var(--u) * 2); }
.st1 .bw-ergebnis .bw-weiter { background: var(--example-accent); }
.st1 .bw-preis { margin-top: var(--u); font: var(--font-weight-display) calc(var(--u) * 5) / calc(var(--u) * 6) var(--font-display); letter-spacing: var(--tracking-h2); font-variant-numeric: tabular-nums; }
.st1 .bw-reihe {
  display: flex; justify-content: space-between; gap: calc(var(--u) * 2); margin-top: var(--u); padding-top: var(--u); border-top: 1px solid var(--example-line);
  font-size: calc(var(--u) * 1.75); line-height: calc(var(--u) * 2.5); color: var(--example-ink-secondary);
}
/* Werte in Textschrift wie im freigegebenen Stand (dort greift die Mono-Angabe nicht, weil „font: … / inherit …“ ungültig ist) */
.st1 .bw-reihe b { color: var(--example-ink); font-weight: var(--font-weight-regular); font-variant-numeric: tabular-nums; }

/* ---------- ab 768 px: Browser-Hülle 16 : 10, Desktop-Fassung der Beispiel-Website (Entwurfsmaß 1280 px) ---------- */
@media (min-width: 768px) {
  .st1 .bw { --u: calc(100cqi / 160); }
  .st1 .bw-foto img { object-position: 50% 58%; }
  .st1 .bw--nachher .bw-schleier { background: var(--example-veil-after); }
  .st1 .bw-nav { height: calc(var(--u) * 9); padding: 0 calc(var(--u) * 8); }
  .st1 .bw-logo { font-size: calc(var(--u) * 2.25); }
  .st1 .bw-links { display: flex; }
  .st1 .bw-navbtn { display: inline-flex; }
  .st1 .bw-burger { display: none; }

  .st1 .bw--vorher .bw-held { left: calc(var(--u) * 8); right: calc(var(--u) * 8); top: calc(var(--u) * 9); bottom: calc(var(--u) * 16); }
  .st1 .bw--vorher .bw-h { font-size: calc(var(--u) * 6); line-height: calc(var(--u) * 7); }
  .st1 .bw--vorher .bw-sub { font-size: calc(var(--u) * 2.25); line-height: calc(var(--u) * 3); }
  .st1 .bw-form {
    left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 6);
    grid-template-columns: minmax(0, 20fr) minmax(0, 24fr) minmax(0, 44fr) auto; border-radius: var(--u);
  }
  .st1 .bw-feld { height: calc(var(--u) * 6); padding: 0 calc(var(--u) * 2); }
  .st1 .bw-feld .wert { left: calc(var(--u) * 2); right: calc(var(--u) * 2); }
  .st1 .bw-feld.gross { grid-column: auto; height: calc(var(--u) * 6); align-items: center; padding-top: 0; white-space: nowrap; }
  .st1 .bw-feld.gross .wert { top: 50%; transform: translateY(-50%); white-space: nowrap; }
  .st1 .bw-absenden { grid-column: auto; height: calc(var(--u) * 6); }
  .st1 .bw-danke { flex-direction: row; line-height: var(--leading-text); }

  .st1 .bw--nachher .bw-held { left: calc(var(--u) * 8); right: auto; top: calc(var(--u) * 15); width: calc(var(--u) * 64); }
  .st1 .bw--nachher .bw-h { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 8); line-height: calc(var(--u) * 8); }
  .st1 .bw--nachher .bw-sub { max-width: calc(var(--u) * 52); margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 2.25); line-height: calc(var(--u) * 3); }
  .st1 .bw-assist { right: auto; bottom: calc(var(--u) * 6); width: calc(var(--u) * 56); left: calc(var(--u) * 8); }
  .st1 .bw-frage { font-size: calc(var(--u) * 2.5); }
}

/* ---------- ab 1024 px: Vorher/Nachher nebeneinander, Posteingang | fertige Anfrage darunter ---------- */
@media (min-width: 1024px) {
  .st1-paar { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* motion */
/* ---------- Film-Fassung (P8-020, Owner wdf-motion-designer): gepinnte Szene, nur unter html.film ----------
   1:1 aus wdf/directions/B/hero.html (Stand P4-B15, Zeilen 344–444), Werte als Tokens. Die statische Fassung oben bleibt unverändert.
   --kopf-st1 setzt motion/020-story-website.js nach Messung (längste Überschrift); der Wert hier ist der Rückfall. */
.film .st1 {
  --unten: var(--space-14);
  --kopf-st1: calc(var(--space-16) + var(--space-14) + 2.3 * var(--font-size-story));
  --frei: calc(100svh - var(--kopf-h) - var(--space-14) - var(--unten) - var(--kopf-st1) - 2 * var(--space-14));
  /* P9 Lauf 4 (K-MOT-03): statt ScrollTrigger-Pin steht die Bühne per sticky; der Abschnitt ist um den Scrollweg höher.
     Gleiche Lage wie vorher (oben Kopfzeile + space-14, unten --unten), kein Layout-Shift beim Ein- und Austritt. */
  height: calc((1 + var(--pin-story-vh)) * 100svh); overflow: clip;
  padding: calc(var(--kopf-h) + var(--space-14)) 0 var(--unten);
}
.film .st1-in { position: sticky; top: calc(var(--kopf-h) + var(--space-14)); height: calc(100svh - var(--kopf-h) - var(--space-14) - var(--unten)); padding: 0; }
.film .st1 .wrap { height: 100%; }
.film .st1-col {
  height: 100%; width: min(100%, calc(var(--frei) * 1.6)); margin: 0 auto; gap: var(--space-14);
  grid-template-rows: var(--kopf-st1) auto; align-content: center;
}
.film .st1-kopf { gap: var(--space-10); align-content: start; }
.film .st1-kicker .eyebrow { opacity: 0; }
.film .st1-kicker .eyebrow:first-of-type { opacity: 1; }
.film .st1-h { align-items: start; }
.film .st1-h h2 { max-width: 32ch; font-size: var(--font-size-story); line-height: var(--leading-story); opacity: 0; }
.film .st1-h h2:first-child { opacity: 1; }
.film .st1-h .claim-unter { display: none; }
.film .st1-paar { display: block; position: relative; min-height: 0; container-type: inline-size; }
.film .st1-geraet { display: block; }
.film .st1-geraet--vorher { position: relative; }
.film .st1-geraet--nachher { position: absolute; inset: 0; }
.film .st1-geraet > .mono { display: none; }
.film .st1-geraet--nachher .chrome { visibility: hidden; }
.film .st1-geraet--nachher .geraet { background: transparent; box-shadow: none; }
.film .st1-geraet--nachher .bw-schleier,
.film .st1-geraet--nachher .bw-nav > :not(.bw-logo),
.film .st1-geraet--nachher .bw-held,
.film .st1-geraet--nachher .bw-assist { opacity: 0; }
.film .st1-geraet--nachher .bw-logo { visibility: hidden; }
.film .st1-geraet .geraet { width: 100%; }

/* Licht-Scan (Variante a „Lichtkante“, weiche Fassung P4-B8b): Lichtmitte = Grenze neue/alte Website; bewegt wird nur das <i> */
.film .scan { display: block; position: absolute; z-index: var(--z-device-scan); left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.film .scan i {
  position: absolute; left: calc(-1 * var(--scan-overhang)); right: calc(-1 * var(--scan-overhang)); top: calc(-1 * var(--scan-halo)); height: calc(2 * var(--scan-halo)); opacity: 0;
  -webkit-mask-image: var(--scan-mask); mask-image: var(--scan-mask);
}
.film .scan i::before, .film .scan i::after { content: ""; position: absolute; left: 0; right: 0; }
.film .scan i::before { inset: 0; background: var(--scan-halo-fill); }
.film .scan i::after { top: calc(50% - var(--scan-core) / 2); height: var(--scan-core); background: var(--scan-core-fill); }

/* Posteingang liegt AUF der Website: Ebene über beiden Geräten, deckt genau deren Fenster */
.film .pe {
  position: absolute; z-index: var(--z-device-overlay); left: 0; right: 0; bottom: 0; top: calc(100cqi / 64 * 2.3);
  border-radius: 0 0 var(--radius-device) var(--radius-device); overflow: hidden; pointer-events: none;
}
.film .pe-schleier { position: absolute; inset: 0; background: var(--color-scrim); opacity: 0; }
.film .pe-eingang { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); padding: var(--space-24); }
.film .pe-eingang > * { width: min(var(--size-notice), 46cqi); }
.film .pe-titel { color: var(--color-text-on-scrim); }
.film .pe-titel .film-t { display: inline; }
.film .pe-titel .statisch-t, .film .pe-hinweis { display: none; }
.film .pe-liste { display: flex; flex-direction: column; gap: var(--space-10); }
.film .pe-karte { opacity: 0; }
.film .pe-fertig-box { position: absolute; left: 0; top: 0; width: min(var(--size-notice), 46cqi); }
.film .pe-fertig-box > .mono { display: none; }
.film .pe-fertig { opacity: 0; }
/* knappe Höhe (JS setzt .eng/.enger): ohne Plakette bzw. ohne „· vollständig“ */
.film .pe.eng .pe-fertig .badge, .film .pe.enger .pe-fertig .voll { display: none; }

/* Film mobil: Telefon 9 : 16 so groß, wie die freie Höhe erlaubt; Karten dürfen wie schwebende Mitteilungen über den Rand ragen */
@media (max-width: 767.98px) {
  .film .st1-col { width: 100%; }
  .film .st1-h h2 { font-size: var(--font-size-story-phone); }
  .film .st1-paar { width: min(100%, calc(var(--frei) * .5625)); margin: 0 auto; }
  .film .pe { top: calc(100cqi / 21 * 1.9); border-radius: 0 0 9cqi 9cqi; overflow: visible; }
  .film .pe-schleier { border-radius: inherit; background: var(--gradient-scrim-phone); }
  .film .pe-eingang { padding: var(--space-16) var(--space-10) var(--space-12); }
  .film .pe-eingang > *, .film .pe-fertig-box { flex: none; width: max(calc(100cqi - 2 * var(--space-10)), min(300px, calc(100vw - 2 * var(--rand)))); }
  .film .pe .lang { display: none; }
  .film .pe-karte, .film .pe-fertig { grid-template-columns: calc(2 * var(--space-16)) minmax(0, 1fr); column-gap: var(--space-10); padding: var(--space-10) var(--space-12) var(--space-10) var(--space-10); }
  .film .pe-karte .pe-icon, .film .pe-fertig .pe-icon { width: calc(2 * var(--space-16)); height: calc(2 * var(--space-16)); }
  .film .pe-icon svg { width: var(--space-16); height: var(--space-16); }
}
/* unter 1024 px: Platz für die mobile Aktionsleiste (Button + Innenabstand) */
@media (max-width: 1023.98px) {
  .film .st1 { --unten: calc(var(--size-button) + 2 * var(--space-12) + env(safe-area-inset-bottom)); }
}