/* ============================================================
   maniacSeller — Film
   Erzähl-Animation für Website und Videofassungen.

   Grundgedanke der Bewegung
   -------------------------
   Es gibt KEINE Folien, die sich überblenden. Alle Szenen stehen
   nebeneinander in einer durchgehenden Welt, und eine Kamera fährt
   hindurch. Eine Szene verschwindet nicht, sie verlässt das Bild.
   Während der Fahrt sind zwei Szenen gleichzeitig zu sehen.

   Dazu kommen drei Dinge, die den Eindruck „Folie“ zerstören:
   Tiefenebenen, die sich unterschiedlich schnell bewegen (Parallaxe),
   eine Kamera, die auch im Stand langsam weiterdriftet, und Elemente,
   die über den Bildrand hinauslaufen dürfen.

   Farben
   ------
   Der Film arbeitet mit eigenen Marken --f-*, die standardmäßig auf
   die Tokens --ms-* zeigen. --ms-* wird nirgends neu definiert. Die
   Kinofassung (.film--kino) setzt nur die --f-* um.

   Maße
   ----
   Die Welt rechnet in festen Einheiten (1600 × 900 je Bildausschnitt).
   --u ist ein Hundertstel der Bildhöhe; jede Größe ist ein Vielfaches
   davon. Dadurch sieht dieselbe Datei bei 1080, 1920 und in einer
   Spalte der Website gleich aus.

   Zeit
   ----
   Keine CSS-Keyframes. film.js setzt --p (Fortschritt der Szene) und
   die Kamerawerte; CSS rechnet daraus. So ist jedes Einzelbild
   anspringbar — Voraussetzung für die Videoaufnahme.
   ============================================================ */

.film {
  container-type: size;
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--film-radius, 14px);
  font-family: var(--ms-font-body);

  --f-grund:   var(--ms-bg);
  --f-flaeche: var(--ms-surface);
  --f-kachel:  var(--ms-surface-2);
  --f-linie:   var(--ms-border);
  --f-text:    var(--ms-text);
  --f-leise:   var(--ms-text-muted);
  --f-fein:    var(--ms-text-faint);
  --f-akzent:  var(--ms-accent);
  --f-schein:  var(--ms-accent-visual);
  --f-gruen:   var(--ms-brand-green);
  --f-gut:     var(--ms-success-ink);
  --f-schatten: var(--ms-shadow-card);

  background: var(--f-grund);
  color: var(--f-text);
}

/* Kinofassung: feste dunkle Bühne, unabhängig vom Thema der Seite.
   Für die Videos und überall dort, wo der Film für sich steht. */
.film--kino {
  --f-grund:   #091521;
  --f-flaeche: #122230;
  --f-kachel:  #182B3B;
  --f-linie:   #24394C;
  --f-text:    #F2F7FB;
  --f-leise:   #9DB2C4;
  --f-fein:    #6F8699;
  --f-akzent:  #4FA8FF;
  --f-schein:  #248DFF;
  --f-gruen:   #35C759;
  --f-gut:     #35C759;
  --f-schatten: 0 calc(var(--u) * .4) calc(var(--u) * 2.4) rgba(0, 0, 0, .45);
}

.film--breit   { aspect-ratio: 16 / 9; --gw: 178; }
.film--quadrat { aspect-ratio: 1 / 1;  --gw: 100; }
.film--hoch    { aspect-ratio: 9 / 16; --gw:  56; }

.film--video { --film-radius: 0; }

/* ---------- Licht auf der Bühne ----------
   Zwei weiche Scheine driften langsam. Sie geben dem Bild Tiefe und
   sorgen dafür, dass auch eine ruhige Szene nie völlig still steht. */

.film__licht {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: .9;
}

/* Die Scheine sind reine Verläufe, ohne filter: blur(). Ein Weichzeichner
   über eine so große Fläche kostet pro Einzelbild spürbar Rechenzeit —
   beim Rendern der Videos summiert sich das auf Stunden. Der Verlauf
   selbst ist weich genug. */
.film__licht::before,
.film__licht::after {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.film__licht::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--f-schein) 34%, transparent) 0%, transparent 62%);
  left: calc(14% + var(--licht-x, 0) * 1%);
  top:  calc(18% + var(--licht-y, 0) * 1%);
}

.film__licht::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--f-gruen) 17%, transparent) 0%, transparent 62%);
  right: calc(10% - var(--licht-x, 0) * 1.4%);
  bottom: calc(8% - var(--licht-y, 0) * 1.2%);
}

.film:not(.film--kino) .film__licht { opacity: .34; }

/* Randabdunklung: hält den Blick in der Bildmitte. */
.film__rand {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 72% at 50% 46%,
              transparent 42%, color-mix(in srgb, var(--f-grund) 78%, transparent) 100%);
}

.film:not(.film--kino) .film__rand { opacity: .5; }

/* ---------- Welt und Kamera ---------- */

.film__buehne {
  position: absolute;
  inset: 0;
  --u0: min(calc(100cqw / var(--gw)), 1cqh);
  --u: var(--u0);
  --e-px: calc(var(--u0) / 9);     /* Weltpunkt in Bildschirmgröße */
}

/* Die Kamera: film.js setzt --kx, --ky (Weltpunkte) und --ks. */
.film__welt {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform:
    scale(var(--ks, 1))
    translate(calc(var(--kx, 0) * var(--e-px) * -1), calc(var(--ky, 0) * var(--e-px) * -1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* ---------- Szene ----------
   Jede Szene steht an ihrem eigenen Ort in der Welt. --ox/--oy sind
   Weltpunkte, --dx ist der Abstand zur Kamera (für die Parallaxe). */

.szene {
  position: absolute;
  left: calc(var(--ox) * var(--e-px));
  top:  calc(var(--oy) * var(--e-px));
  width:  calc(1600 * var(--e-px));
  height: calc(900 * var(--e-px));
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 6) calc(var(--u) * 7);
  --p: 0;
  --dx: 0;
  --zoom: 1;
  --u: calc(var(--u0) * var(--zoom));
  visibility: hidden;
}

/* Kopfzeile: die Aussage der Szene, oben über ihrem Inhalt. Sie gehört
   zur Szene und fährt mit ihr — dadurch bleibt die Gruppe aus Aussage
   und Inhalt als Ganzes mittig. Barlow Semi Condensed in Light. */
.f-kopfzeile {
  display: grid;
  justify-items: center;
  margin-bottom: calc(var(--u) * 2.4);
}

.f-kopfzeile > * { grid-area: 1 / 1; }

.f-kopfzeile b,
.f-kopfzeile i {
  display: block;
  text-align: center;
}

.f-kopfzeile b {
  font-family: var(--ms-font-head);
  font-weight: 300;
  font-size: calc(var(--u) * 5.6);
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--f-text);
  max-width: calc(var(--u) * 132);
  text-wrap: balance;
}

.f-kopfzeile i {
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--u) * 2.7);
  color: var(--f-leise);
  margin-top: calc(var(--u) * .8);
}

/* Zwei Aussagen nacheinander in derselben Szene: beide liegen
   übereinander, film.js blendet zwischen ihnen um. */
.f-kopfzeile__satz {
  --t: 1;
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * var(--u) * 1.2));
}

.film--hoch .f-kopfzeile b {
  font-size: calc(var(--u) * 4.8);
  max-width: calc(var(--u) * 50);
}

.szene.ist-nah { visibility: visible; }

.szene[data-szene="versand"]   { --zoom: 1.12; }
.szene[data-szene="sofort"]     { --zoom: 1.1; }
.szene[data-szene="bisher"]     { --zoom: 1.1; }
.szene[data-szene="sagen"]      { --zoom: 1.14; }
.szene[data-szene="abschluss"] { --zoom: 1.2; }

/* Die Wolkenszene ist die höchste: Kopfzeile, Illustration und die
   beiden Richtungsschilder. Enger gesetzt, damit auch beim stärksten
   Kamerazoom nichts angeschnitten wird.

   Drei Zeilen mit gleich großem Frei­raum oben und unten: dadurch steht
   die Illustration genau in der Bildmitte, statt von der zweizeiligen
   Kopfzeile nach unten gedrückt zu werden. */
.szene[data-szene="wolke"] {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  gap: 0;
  padding: calc(var(--u) * 4) calc(var(--u) * 8);
}

.szene[data-szene="wolke"] .f-kopfzeile {
  align-self: end;
  margin-bottom: calc(var(--u) * 2.4);
}

.szene[data-szene="wolke"] .f-fluss {
  align-self: start;
  margin-top: calc(var(--u) * 2.4);
}

/* Tiefenebenen: je weiter vorn, desto stärker die Gegenbewegung zur
   Kamera. Das erzeugt Raum, ohne dass etwas gedreht werden muss. */
.schicht--fern { translate: calc(var(--dx) * var(--e-px) * .06) 0; }
.schicht--mitt { translate: calc(var(--dx) * var(--e-px) * -.05) 0; }
.schicht--nah  { translate: calc(var(--dx) * var(--e-px) * -.13) 0; }

/* ---------- Auftritte ----------
   --von / --bis = Fenster im Szenenfortschritt (0..1).
   --e folgt einer Ease-out-Kurve: schnell herein, weich aus.
   Elemente treten auf und BLEIBEN. Sie verschwinden nicht, sie
   fahren mit der Kamera aus dem Bild.                            */

.an {
  --von: 0;
  --bis: .28;
  --q: clamp(0, calc((var(--p) - var(--von)) / (var(--bis) - var(--von))), 1);
  --e: calc(1 - (1 - var(--q)) * (1 - var(--q)) * (1 - var(--q)));
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * var(--u) * 3.2));
}

.an--links  { transform: translateX(calc((1 - var(--e)) * var(--u) * -9)); }
.an--rechts { transform: translateX(calc((1 - var(--e)) * var(--u) *  9)); }
.an--hoch   { transform: translateY(calc((1 - var(--e)) * var(--u) *  7)); }
.an--zoom   { transform: scale(calc(.9 + var(--e) * .1)); }

/* Auftritt mit leichtem Überschwingen — wirkt lebendiger als eine
   reine Verlangsamung. Nur für einzelne, wichtige Elemente. */
.an--schwung {
  --o: calc(1 + (1 - var(--e)) * (1 - var(--e)) * -.08 + (1 - var(--e)) * .08);
  transform: translateY(calc((1 - var(--e)) * var(--u) * 4)) scale(var(--o));
}

/* Textenthüllung hinter einer Blende, zusätzlich leicht unscharf. */
.an--blende {
  opacity: 1;
  clip-path: inset(0 calc((1 - var(--e)) * 100%) 0 0);
  filter: blur(calc((1 - var(--e)) * var(--u) * .5));
  transform: none;
}

/* ---------- Typografie ---------- */

/* Der Pfeil zwischen zwei Karten. Die frühere blaue Themenzeile über
   jeder Szene gibt es nicht mehr — ihren Platz hat die Kopfzeile. */
.f-pfeil {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 4.4);
  color: var(--f-akzent);
  line-height: 1;
}

.f-titel {
  font-family: var(--ms-font-head);
  font-weight: 700;
  font-size: calc(var(--u) * 8.2);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-align: center;
  max-width: calc(var(--u) * 128);
  text-wrap: balance;
  color: var(--f-text);
}

.f-unter {
  font-size: calc(var(--u) * 3.3);
  line-height: 1.35;
  color: var(--f-leise);
  text-align: center;
  max-width: calc(var(--u) * 96);
  text-wrap: pretty;
}

.f-klein {
  font-size: calc(var(--u) * 2.5);
  color: var(--f-fein);
  text-align: center;
}

.film--hoch .f-titel { font-size: calc(var(--u) * 6.4); max-width: calc(var(--u) * 50); }
.film--hoch .f-unter { font-size: calc(var(--u) * 2.9); max-width: calc(var(--u) * 48); }

/* ---------- Karten, Kacheln, Zeilen ---------- */

.f-karte {
  background: color-mix(in srgb, var(--f-flaeche) 92%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * 1.5);
  box-shadow: var(--f-schatten);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 2.8);
}

/* Die hervorgehobene Karte bekommt einen dünnen Lichtrand — das Mittel,
   mit dem der Blick im Bild geführt wird. */
.f-karte--licht {
  border-color: color-mix(in srgb, var(--f-schein) 60%, var(--f-linie));
  box-shadow: var(--f-schatten),
              0 0 calc(var(--u) * 4) color-mix(in srgb, var(--f-schein) 28%, transparent);
}

.f-marke {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 2.9);
  color: var(--f-text);
  background: color-mix(in srgb, var(--f-flaeche) 90%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * 1);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.8);
  white-space: nowrap;
  box-shadow: var(--f-schatten);
}

.f-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.6);
  justify-content: center;
  align-items: center;
}

.f-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 2.9);
  padding: calc(var(--u) * 1) 0;
  border-bottom: 1px solid var(--f-linie);
  color: var(--f-text);
}

.f-zeile:last-child { border-bottom: 0; }
.f-zeile__wert { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.f-zeile__name { color: var(--f-leise); }
.f-zeile--heraus .f-zeile__wert { color: var(--f-gut); }

.f-kopf {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 2.4);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--f-fein);
  margin-bottom: calc(var(--u) * 1.2);
}

/* ---------- Große Zahlen ----------
   Dürfen über den Bildrand hinauslaufen. Das ist der Unterschied
   zwischen einer Folie und einer Einstellung.                    */

.f-zahl {
  font-family: var(--ms-font-head);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: .86;
  letter-spacing: -.03em;
  color: var(--f-text);
}

.f-zahl--riesig { font-size: calc(var(--u) * 42); }
.f-zahl--gross  { font-size: calc(var(--u) * 24); }
.f-zahl--blau   { color: var(--f-akzent); }
.f-zahl--gruen  { color: var(--f-gruen); }

.f-uhr {
  font-family: var(--ms-font-head);
  font-weight: 700;
  font-size: calc(var(--u) * 13);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--f-text);
}

/* ---------- Szene: ohne Anbindung ----------
   Eine Zeile je Bestellung: links der Beleg, rechts die Handarbeit und
   ihre Dauer. Die blockierte Bestellung hebt sich rot ab und kostet
   länger — darin liegt das Argument der Szene.                      */

.f-handarbeit {
  display: grid;
  gap: calc(var(--u) * 1.1);
  width: calc(var(--u) * 132);
}

.f-handarbeit__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 1.3) calc(var(--u) * 2);
  background: color-mix(in srgb, var(--f-flaeche) 88%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * 1.1);
}

.f-handarbeit__beleg {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.4);
  min-width: 0;
}

.f-handarbeit__nr {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 2.7);
  color: var(--f-text);
  font-variant-numeric: tabular-nums;
}

.f-handarbeit__wer {
  font-size: calc(var(--u) * 2.5);
  color: var(--f-leise);
}

.f-handarbeit__arbeit {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  text-align: right;
  justify-content: flex-end;
}

.f-handarbeit__was {
  font-size: calc(var(--u) * 2.4);
  color: var(--f-leise);
}

.f-handarbeit__was b { color: var(--f-text); font-weight: 600; }

.f-handarbeit__zeit {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 2.6);
  color: var(--f-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Die blockierte Bestellung. */
.f-handarbeit__zeile.ist-blockiert {
  border-color: color-mix(in srgb, #FF6B5E 55%, var(--f-linie));
  background: color-mix(in srgb, #FF6B5E 9%, var(--f-flaeche));
}

.ist-blockiert .f-handarbeit__was b,
.ist-blockiert .f-handarbeit__zeit { color: #FF8A7E; }

.f-handarbeit__grund {
  font-size: calc(var(--u) * 2.1);
  color: #FF8A7E;
  border: 1px solid color-mix(in srgb, #FF6B5E 45%, transparent);
  border-radius: calc(var(--u) * .6);
  padding: calc(var(--u) * .2) calc(var(--u) * .9);
  white-space: nowrap;
}

.f-handarbeit__summe {
  font-family: var(--ms-font-head);
  font-size: calc(var(--u) * 3.4);
  font-weight: 300;
  color: var(--f-leise);
}

.f-handarbeit__summe b {
  font-weight: 600;
  color: var(--f-text);
}

.film--hoch .f-handarbeit,
.film--quadrat .f-handarbeit { width: calc(var(--u) * 50); }

.film--hoch .f-handarbeit__zeile,
.film--quadrat .f-handarbeit__zeile {
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--u) * .6);
}

.film--hoch .f-handarbeit__arbeit,
.film--quadrat .f-handarbeit__arbeit { justify-content: flex-start; text-align: left; }

/* ---------- Szene: die Wolke ---------- */

/* Die Illustration bleibt in jeder Einstellung vollständig im Bild.
   Ihre Breite ist so gewählt, dass auch der stärkste Kamerazoom der
   Szene sie nicht anschneidet. */
/* Das maniacSeller-Zeichen liegt in der Illustration nicht in deren
   Mitte, sondern bei (677|484) von (1478|1064) — also 62 Punkte links
   und 48 Punkte über dem Mittelpunkt der Zeichenfläche. Die Verschiebung
   rückt das Zeichen in die Bildmitte; weil sie als transform läuft,
   bleibt das Kästchen für das Layout, wo es ist. */
.f-wolke {
  position: relative;
  width: calc(var(--u) * 90);
  aspect-ratio: 1478 / 1064;
  margin: 0;
  transform: translate(4.2%, 4.5%);
}

.f-wolke__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.f-wolke__bild--dunkel { display: none; }

.f-wolke__anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Beschriftungen der beiden Richtungen. Sie stehen UNTER der
   Illustration, nicht darüber: über ihr verdeckten sie Shopware und
   Sage. Ihr Platz ist von Anfang an reserviert, damit beim Auftritt
   nichts springt. */
.f-fluss {
  display: flex;
  gap: calc(var(--u) * 2);
  justify-content: center;
  min-height: calc(var(--u) * 6);
}

.f-fluss span {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 2.7);
  color: var(--f-text);
  background: color-mix(in srgb, var(--f-flaeche) 88%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * .8);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.6);
  white-space: nowrap;
}

.film--hoch .f-fluss { flex-direction: column; align-items: center; }

/* ---------- Szene: Preisfindung ----------
   Dieselbe Darstellung wie der Abschnitt „Preisfindung“ auf der
   Startseite: links der Artikel mit seinen Sage-Regeln, rechts drei
   Kunden, dazwischen die Flusslinie. Im Rundlauf leuchten zu jedem
   Kunden die Regeln auf, aus denen sein Preis entsteht.             */

.f-preisbild {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 14) minmax(0, 1.1fr);
  width: calc(var(--u) * 146);
}

.film--hoch .f-preisbild,
.film--quadrat .f-preisbild {
  grid-template-columns: minmax(0, 1fr);
  width: calc(var(--u) * 50);
  gap: calc(var(--u) * 2);
}

.f-preisbild__titel {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 3.4);
  margin: calc(var(--u) * .4) 0 calc(var(--u) * 1.4);
  color: var(--f-text);
}

.f-regeln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--u) * .3);
}

.f-regeln li {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * .8) calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * .7);
  font-size: calc(var(--u) * 2.6);
  color: var(--f-leise);
}

.f-regeln b {
  color: var(--f-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Regel, aus der der gerade gezeigte Kundenpreis entsteht. */
.f-regeln li.ist-quelle {
  background: color-mix(in srgb, var(--f-schein) 20%, transparent);
  color: var(--f-akzent);
}

.f-regeln li.ist-quelle b { color: var(--f-akzent); }

.f-fluss-linie {
  position: relative;
  height: 2px;
  background: var(--f-linie);
}

.f-fluss-linie::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 1);
  transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid var(--f-linie);
  border-right: 2px solid var(--f-linie);
}

/* Die wandernden Punkte. Ihre Lage setzt film.js aus dem Fortschritt —
   eine CSS-Animation wäre beim Einzelbildrendern nicht anspringbar. */
.f-fluss-linie i {
  position: absolute;
  top: 50%;
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 1.1);
  margin-top: calc(var(--u) * -.55);
  border-radius: 50%;
  background: var(--f-schein);
  opacity: 0;
}

.film--hoch .f-fluss-linie,
.film--quadrat .f-fluss-linie { display: none; }

.f-kunden {
  display: grid;
  gap: calc(var(--u) * 1.4);
}

.f-kunde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--u) * .2) calc(var(--u) * 2);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8);
  background: color-mix(in srgb, var(--f-flaeche) 92%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * 1.2);
}

.f-kunde.ist-hervor {
  border-color: var(--f-schein);
  box-shadow: 0 0 calc(var(--u) * 3.4) color-mix(in srgb, var(--f-schein) 26%, transparent);
}

.f-kunde__wer {
  font-weight: 600;
  font-size: calc(var(--u) * 2.7);
  color: var(--f-text);
}

.f-kunde__preis {
  grid-row: span 2;
  align-self: center;
  text-align: right;
  font-family: var(--ms-font-head);
  font-size: calc(var(--u) * 4.6);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--f-text);
}

.f-kunde__preis small {
  display: block;
  font-family: var(--ms-font-body);
  font-size: calc(var(--u) * 2);
  font-weight: 500;
  color: var(--f-leise);
}

.f-kunde__wie {
  font-size: calc(var(--u) * 2.1);
  color: var(--f-leise);
}

/* ---------- Szene: virtuelle Mitarbeiter ---------- */

.f-vma {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 2.4);
  width: calc(var(--u) * 150);
}

.film--hoch .f-vma,
.film--quadrat .f-vma { grid-template-columns: repeat(2, 1fr); }

.f-vma__karte {
  background: color-mix(in srgb, var(--f-flaeche) 92%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * 1.5);
  box-shadow: var(--f-schatten);
  padding: calc(var(--u) * 2.3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  align-items: flex-start;
  text-align: left;
}

.f-vma__zeichen {
  width: calc(var(--u) * 6.6);
  height: calc(var(--u) * 6.6);
  border-radius: calc(var(--u) * 1);
  background: color-mix(in srgb, var(--f-schein) 18%, transparent);
  color: var(--f-akzent);
  display: grid;
  place-items: center;
}

.f-vma__zeichen svg { width: 62%; height: 62%; }

.f-vma__name {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 3.1);
  color: var(--f-text);
}

.f-vma__text {
  font-size: calc(var(--u) * 2.4);
  line-height: 1.3;
  color: var(--f-leise);
}

/* ---------- Szene: die neue Oberfläche ----------
   Vier Aufnahmen fliegen nacheinander von rechts herein. Sie stehen
   schräg im Raum (echte Perspektive, kein gezeichneter Schrägeffekt)
   und tragen einen Lichtsaum, der sie vom dunklen Grund abhebt.
   Lage und Drehung setzt film.js aus dem Fortschritt.               */

.f-schirme {
  position: relative;
  width: calc(var(--u) * 126);
  aspect-ratio: var(--ar, 1800 / 938);
  perspective: calc(var(--u) * 170);
}

/* Mittig im Kasten, damit Aufnahmen unterschiedlicher Höhe
   nebeneinander ruhig wirken. */
.f-schirm {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  --x: 0;
  --o: 0;
  --ry: 14deg;
  opacity: var(--o);
  transform: translateX(calc(var(--x) * var(--u))) rotateY(var(--ry)) rotateX(2.5deg);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Höhe aus dem Seitenverhältnis: Rahmen und Lichtsaum liegen dadurch am
   Bild selbst an, nicht an einem Kasten mit Luft darin. */
.f-schirm img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--u) * 1.2);
  border: 1px solid var(--f-linie);
  box-shadow:
    0 0 calc(var(--u) * 9) color-mix(in srgb, var(--f-schein) 20%, transparent),
    0 calc(var(--u) * 2.4) calc(var(--u) * 6) rgba(0, 0, 0, .55);
}

/* Im Hochformat ist seitlich kein Platz für die Schräge. */
.film--hoch .f-schirme { width: calc(var(--u) * 50); }
.film--hoch .f-schirm  { --ry: 0deg !important; }

/* ---------- Szene: Marken ---------- */

.f-trust {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: calc(var(--u) * 2) calc(var(--u) * 7);
  justify-content: center;
}

.film--hoch .f-trust,
.film--quadrat .f-trust { grid-template-columns: repeat(2, auto); }

.f-trust__wert {
  font-family: var(--ms-font-head);
  font-weight: 700;
  font-size: calc(var(--u) * 6);
  line-height: 1.1;
  color: var(--f-text);
  text-align: center;
}

.f-trust__text {
  font-size: calc(var(--u) * 2.3);
  color: var(--f-leise);
  text-align: center;
  max-width: calc(var(--u) * 28);
  margin: 0 auto;
}

.f-sterne { color: #F0B429; letter-spacing: .06em; }

/* ---------- Szene: Abschluss ---------- */

.f-adresse {
  font-family: var(--ms-font-head);
  font-weight: 700;
  font-size: calc(var(--u) * 6.4);
  letter-spacing: -.01em;
  color: var(--f-text);
}

.f-knopf {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 3.1);
  color: #FFFFFF;
  background: var(--ms-action);
  border-radius: calc(var(--u) * .9);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  box-shadow: 0 0 calc(var(--u) * 5) color-mix(in srgb, var(--ms-action) 35%, transparent);
}

/* ---------- Verlinkung zur Terminbuchung ----------
   Der Knopf der Schlussszene ist nur die letzten Sekunden zu sehen.
   Dieser Link liegt dauerhaft in der Ecke, bleibt aber zurückhaltend,
   damit er den Film nicht überlagert. In den Videofassungen wird er
   gar nicht erst angelegt.                                          */

.film__termin {
  position: absolute;
  right: calc(var(--u0) * 3);
  bottom: calc(var(--u0) * 3);
  z-index: 2;
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u0) * 2.6);
  line-height: 1;
  color: var(--f-text);
  text-decoration: none;
  background: color-mix(in srgb, var(--f-flaeche) 82%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u0) * .8);
  padding: calc(var(--u0) * 1.2) calc(var(--u0) * 2);
  opacity: .72;
  transition: opacity .2s ease, border-color .2s ease, background-color .2s ease;
}

.film__termin:hover,
.film__termin:focus-visible {
  opacity: 1;
  border-color: var(--f-schein);
  background: color-mix(in srgb, var(--f-flaeche) 96%, transparent);
}

.film__termin:focus-visible {
  outline: 2px solid var(--ms-focus);
  outline-offset: 2px;
}

/* Der Knopf der Schlussszene ist auf der Website ein Link. */
a.f-knopf {
  text-decoration: none;
  display: inline-block;
}

/* ---------- Bedienung ----------
   Anhalten, Szene vor und zurück, ein Punkt je Szene. Liegt unten links,
   der Terminlink unten rechts. Zurückgenommen, damit die Leiste den Film
   nicht überlagert, beim Überfahren und bei Tastaturfokus deutlich.
   In den Videofassungen wird sie gar nicht erst angelegt.            */

.film__steuerung {
  position: absolute;
  left: calc(var(--u0) * 3);
  bottom: calc(var(--u0) * 3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: calc(var(--u0) * .8);
  padding: calc(var(--u0) * .8);
  border-radius: calc(var(--u0) * .9);
  background: color-mix(in srgb, var(--f-flaeche) 78%, transparent);
  border: 1px solid var(--f-linie);
  opacity: .62;
  transition: opacity .2s ease;
}

.film:hover .film__steuerung,
.film__steuerung:focus-within { opacity: 1; }

.film__knopf {
  appearance: none;
  display: grid;
  place-items: center;
  width: calc(var(--u0) * 4.2);
  height: calc(var(--u0) * 4.2);
  padding: 0;
  border: 0;
  border-radius: calc(var(--u0) * .6);
  background: transparent;
  color: var(--f-text);
  cursor: pointer;
}

.film__knopf svg { width: 62%; height: 62%; fill: currentColor; }

.film__knopf:hover { background: color-mix(in srgb, var(--ms-brand-green) 26%, transparent); }

.film__knopf:focus-visible {
  outline: 2px solid var(--ms-focus);
  outline-offset: 1px;
}

/* Ein Punkt je Szene: zeigt, wo man ist, und springt dorthin. */
.film__punkte {
  display: flex;
  align-items: center;
  gap: calc(var(--u0) * .5);
  margin-left: calc(var(--u0) * .8);
  padding-left: calc(var(--u0) * 1.2);
  border-left: 1px solid var(--f-linie);
}

/* Angerundete Kästchen, keine Kreise — die gibt es im Designsystem
   nirgends. Die laufende Szene ist breiter und grün. */
.film__punkt {
  appearance: none;
  width: calc(var(--u0) * 2.2);
  height: calc(var(--u0) * 1.5);
  padding: 0;
  border: 0;
  border-radius: calc(var(--u0) * .4);
  background: color-mix(in srgb, var(--f-text) 32%, transparent);
  cursor: pointer;
  transition: background-color .2s ease, width .2s ease;
}

.film__punkt:hover { background: color-mix(in srgb, var(--f-text) 60%, transparent); }

.film__punkt[aria-current="true"] {
  background: var(--ms-brand-green);
  width: calc(var(--u0) * 4);
}

.film__punkt:focus-visible {
  outline: 2px solid var(--ms-focus);
  outline-offset: 2px;
}

/* Im Hochformat ist unten kein Platz für Leiste und Terminlink
   nebeneinander — die Leiste rückt über den Link, und die vierzehn
   Kapitelmarken entfallen; dort bleiben die drei Knöpfe. */
.film--hoch .film__steuerung {
  left: 50%;
  translate: -50% 0;
  bottom: calc(var(--u0) * 9);
}

.film--hoch .film__punkte { display: none; }

@media (prefers-reduced-motion: reduce) {
  .film__punkt { transition: none; }
}


/* ---------- Dunkelmodus der Illustration ---------- */

.film--kino .f-wolke__bild--hell   { display: none; }
.film--kino .f-wolke__bild--dunkel { display: block; }

[data-theme="dark"] .film:not(.film--kino) .f-wolke__bild--hell   { display: none; }
[data-theme="dark"] .film:not(.film--kino) .f-wolke__bild--dunkel { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .film:not(.film--kino) .f-wolke__bild--hell   { display: none; }
  :root:not([data-theme="light"]) .film:not(.film--kino) .f-wolke__bild--dunkel { display: block; }
}

/* ---------- Reduzierte Bewegung ----------
   film.js hält die Zeitachse an und stellt eine ruhige Einstellung.
   Der Lichtschein steht dann ebenfalls still.                     */

@media (prefers-reduced-motion: reduce) {
  .film__welt { transition: none !important; }
}


/* ============================================================
   Stück „Mobile Erfassung"
   Nur die Bausteine, die es im ersten Film nicht gibt. Alles
   andere (Kopfzeile, Auftritte, Schirme, Marken, Handarbeit)
   ist dasselbe — ein Film, zwei Stücke.
   ============================================================ */

/* Baustelle als ruhiger Umriß, ganz hinten im Bild. */
.f-umriss {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 8);
  opacity: .085;
  pointer-events: none;
}

.f-umriss svg {
  display: block;
  width: 100%;
  height: calc(var(--u) * 20);
  fill: none;
  stroke: var(--f-text);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Das Versprechen: zwei Uhrzeiten, drei Minuten auseinander. */
.f-sofort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 6);
}

.f-sofort__punkt {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 1.4);
}

.f-sofort__was {
  font-size: calc(var(--u) * 2.7);
  line-height: 1.3;
  color: var(--f-leise);
  text-align: center;
  min-height: calc(var(--u) * 7.4);
  max-width: calc(var(--u) * 44);
  text-wrap: balance;
}

.f-sofort__nr {
  font-family: var(--ms-font-head);
  font-weight: 600;
  color: var(--f-gruen);
  white-space: nowrap;
}

.f-sofort .f-pfeil { font-size: calc(var(--u) * 6); }

.f-marke--gut {
  color: var(--f-text);
  border-color: color-mix(in srgb, var(--f-gruen) 55%, var(--f-linie));
  background: color-mix(in srgb, var(--f-gruen) 12%, var(--f-flaeche));
}

/* Das Bisherige: links der Zettel, rechts was er abends kostet.
   Der Zettel ist das einzige helle Stück im dunklen Bild. */
.f-bisher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
}

.f-bisher { gap: calc(var(--u) * 4); }
.f-bisher .f-handarbeit { width: calc(var(--u) * 94); }

.f-zettel {
  display: grid;
  gap: calc(var(--u) * 1.3);
  width: calc(var(--u) * 36);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3);
  background: #F2EDDF;
  color: #2A2A28;
  border-radius: calc(var(--u) * .7);
  rotate: -2.4deg;
  box-shadow: 0 calc(var(--u) * 2.6) calc(var(--u) * 7) rgba(0, 0, 0, .55);
}

.f-zettel__zeile {
  font-size: calc(var(--u) * 2.8);
  font-style: italic;
  line-height: 1.25;
  padding-bottom: calc(var(--u) * .7);
  border-bottom: 1px solid rgba(42, 42, 40, .2);
}

.f-zettel__zeile:last-child { border-bottom: 0; }

.f-zettel { flex: none; }

.film--hoch .f-sofort,
.film--hoch .f-bisher { flex-direction: column; gap: calc(var(--u) * 3.5); }
.film--hoch .f-zettel { width: calc(var(--u) * 46); }
.film--hoch .f-bisher .f-handarbeit { width: calc(var(--u) * 50); }

/* ---------- Ausschnitt ----------
   Die Kamera fährt in eine Aufnahme hinein: --z ist der Maßstab,
   --fx/--fy der Bildpunkt, der in der Mitte stehen soll. Gerechnet
   wird aus --p, damit jedes Einzelbild anspringbar bleibt. Liegen
   zwei Bilder darin, blendet film.js das obere auf. */

.f-lupe {
  position: relative;
  overflow: hidden;
  margin: 0;
  width: calc(var(--u) * var(--lb, 100));
  aspect-ratio: var(--lar, 1800 / 1125);
  border-radius: calc(var(--u) * 1.2);
  border: 1px solid var(--f-linie);
  box-shadow:
    0 0 calc(var(--u) * 9) color-mix(in srgb, var(--f-schein) 20%, transparent),
    0 calc(var(--u) * 2.4) calc(var(--u) * 6) rgba(0, 0, 0, .55);

  --zvon: 0;
  --zbis: 1;
  --z0: 1;
  --z1: 2;
  --fx0: .5;
  --fy0: .5;
  --fx1: .5;
  --fy1: .5;

  --zq: clamp(0, calc((var(--p) - var(--zvon)) / (var(--zbis) - var(--zvon))), 1);
  --ze: calc(1 - (1 - var(--zq)) * (1 - var(--zq)) * (1 - var(--zq)));
  --z:  calc(var(--z0)  + (var(--z1)  - var(--z0))  * var(--ze));
  --fx: calc(var(--fx0) + (var(--fx1) - var(--fx0)) * var(--ze));
  --fy: calc(var(--fy0) + (var(--fy1) - var(--fy0)) * var(--ze));
}

.f-lupe img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--z) * 100%);
  height: auto;
  opacity: var(--io, 1);
  transform: translate(calc(var(--fx) * -100%), calc(var(--fy) * -100%));
}

.film--hoch .f-lupe { width: calc(var(--u) * 50); }

/* ---------- Zeiger: eine Stelle in der Aufnahme hervorheben ----------
   Für Anleitungen. Der Zeiger liegt über der Aufnahme und trägt
   dieselbe Geometrie wie das Bild — gleiche Breite, gleicher
   Brennpunkt —, deshalb macht er die Zoomfahrt genau mit, ohne daß
   film.js pro Bild etwas nachrechnen müßte.

   Die Kinder liegen in Bildkoordinaten: --x/--y ist die linke obere
   Ecke, --b/--h sind Breite und Höhe, jeweils als Anteil 0..1 der
   ganzen Aufnahme. Die Strichstärke steht in Bildschirmgröße und
   wächst beim Hineinfahren deshalb nicht mit. */
.f-zeiger {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--z) * 100%);
  aspect-ratio: var(--lar, 1800 / 1125);
  transform: translate(calc(var(--fx) * -100%), calc(var(--fy) * -100%));
  pointer-events: none;
}

.f-zeiger__rahmen {
  position: absolute;
  left:   calc(var(--x) * 100%);
  top:    calc(var(--y) * 100%);
  width:  calc(var(--b) * 100%);
  height: calc(var(--h) * 100%);

  --mvon: .45;
  --mbis: .62;
  --mq: clamp(0, calc((var(--p) - var(--mvon)) / (var(--mbis) - var(--mvon))), 1);
  --me: calc(1 - (1 - var(--mq)) * (1 - var(--mq)) * (1 - var(--mq)));

  /* Bernstein, nicht das Blau des Films: die Oberfläche in den
     Aufnahmen ist selbst blau, ein blauer Rahmen ginge darin unter. */
  border: 2px solid #FFB020;
  border-radius: calc(var(--u) * .7);
  box-shadow:
    0 0 calc(var(--u) * 2.4) rgba(255, 176, 32, .55),
    0 0 0 calc(var(--u) * .5) rgba(255, 176, 32, .18);
  opacity: var(--me);
  /* Legt sich beim Auftauchen aus einer Spur Übergröße auf die Stelle. */
  scale: calc(1 + (1 - var(--me)) * .05);
}

/* Rot für eine Stelle, die den Weiter-Knopf blockiert. */
.f-zeiger__rahmen--halt {
  border-color: #E5484D;
  box-shadow:
    0 0 calc(var(--u) * 2.4) rgba(229, 72, 77, .55),
    0 0 0 calc(var(--u) * .5) rgba(229, 72, 77, .16);
}

/* Hinweis unter dem Film — gehört zur Seite, nicht zum Film.
   Auf dunklem Band braucht der Link das helle Blau, das normale
   Linkblau ist dort zu dunkel. */
.film-mehr {
  margin: var(--ms-6) 0 0;
  text-align: center;
  font-family: var(--ms-font-head);
  font-size: 1.05rem;
}

.band--navy .film-mehr a { color: var(--ms-brand-blue); }

/* ============================================================
   Stück „Bestelleingang"
   ============================================================ */

/* Der Weg: links das Blatt Papier, rechts der Beleg in Sage. */
.f-weg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
}

.f-blatt {
  flex: none;
  margin: 0;
  width: calc(var(--u) * 46);
  rotate: -2deg;
}

.f-weg .f-pfeil { font-size: calc(var(--u) * 6); }

.f-blatt img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--u) * .4);
  box-shadow: 0 calc(var(--u) * 2.4) calc(var(--u) * 7) rgba(0, 0, 0, .6);
}

.f-weg__ziel {
  display: grid;
  justify-items: start;
  gap: calc(var(--u) * 1.8);
  max-width: calc(var(--u) * 60);
}

.f-weg__ziel .f-marke {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  font-size: calc(var(--u) * 3);
}

.f-weg__ziel .f-marke svg {
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  color: var(--f-gruen);
  flex: none;
}

.f-weg__wer {
  font-size: calc(var(--u) * 2.5);
  line-height: 1.35;
  color: var(--f-leise);
}

.film--hoch .f-weg { flex-direction: column; gap: calc(var(--u) * 3); }
.film--hoch .f-blatt { width: calc(var(--u) * 28); }

.szene[data-szene="versprechen"] { --zoom: 1.08; }
.szene[data-szene="selbst"]     { --zoom: 1.12; }
.szene[data-szene="anrufe"]     { --zoom: 1.12; }
.szene[data-szene="preise"]     { --zoom: 1.12; }
.szene[data-szene="ruhe"]       { --zoom: 1.3; }

/* Die Taste, die den Rohertrag zeigt. Gedrückt leuchtet sie. */
.f-taste {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 2.5);
  color: var(--f-leise);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * .9);
  padding: calc(var(--u) * .9) calc(var(--u) * 2);
  background: color-mix(in srgb, var(--f-flaeche) 88%, transparent);
}

.f-taste.ist-gedrueckt {
  color: var(--f-text);
  border-color: color-mix(in srgb, var(--f-gruen) 60%, var(--f-linie));
  background: color-mix(in srgb, var(--f-gruen) 14%, var(--f-flaeche));
  box-shadow: 0 0 calc(var(--u) * 5) color-mix(in srgb, var(--f-gruen) 45%, transparent);
}

/* ---------- Sprechen statt tippen ----------
   Gezeichnet, nicht abfotografiert: der Satz muss Wort für Wort
   entstehen, sonst wirkt er getippt.                            */

.f-sprechen {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 3);
  width: calc(var(--u) * 124);
}

.f-sprechen__rahmen {
  display: grid;
  gap: calc(var(--u) * 2.2);
  width: 100%;
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3);
  background: color-mix(in srgb, var(--f-flaeche) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--f-akzent) 50%, var(--f-linie));
  border-radius: calc(var(--u) * 1.4);
  box-shadow: 0 0 calc(var(--u) * 5) color-mix(in srgb, var(--f-akzent) 16%, transparent);
}

.f-sprechen__zeile {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.4);
  min-height: calc(var(--u) * 11);
}

.f-mikro {
  --puls: 0;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--u) * 7.4);
  height: calc(var(--u) * 7.4);
  border-radius: calc(var(--u) * 1);
  color: var(--f-gruen);
  background: color-mix(in srgb, var(--f-gruen) calc(var(--puls) * 20%), transparent);
  box-shadow: 0 0 calc(var(--u) * var(--puls) * 3.5)
              color-mix(in srgb, var(--f-gruen) 40%, transparent);
}

.f-mikro svg { width: 58%; height: 58%; }

.f-sprechen__satz {
  flex: 1 1 auto;
  font-size: calc(var(--u) * 3.6);
  line-height: 1.3;
  color: var(--f-text);
  text-align: left;
}

.f-sprechen__wort { opacity: var(--w, 0); }

/* Der Knopf aus der Maske. Grau, solange noch gesprochen wird —
   grün, sobald der Satz steht. */
.f-uebernehmen {
  flex: none;
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 2.7);
  color: var(--f-fein);
  background: color-mix(in srgb, var(--f-flaeche) 70%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * .9);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2.2);
}

.f-uebernehmen.ist-bereit {
  color: #fff;
  background: var(--ms-action);
  border-color: var(--ms-action);
  box-shadow: 0 0 calc(var(--u) * 3.5) color-mix(in srgb, var(--f-gruen) 35%, transparent);
}

.f-sprechen__felder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  min-height: calc(var(--u) * 7);
  padding-top: calc(var(--u) * 2.2);
  border-top: 1px solid var(--f-linie);
}

.f-sprechen__was {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 2.3);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--f-fein);
  margin-right: calc(var(--u) * .6);
}

/* Die Felder rasten ein: kurz zu groß, dann sitzen sie. */
.f-rast {
  --w: 0;
  font-size: calc(var(--u) * 3);
  opacity: var(--w);
  transform: scale(calc(1.06 - var(--w) * .06));
}

.film--hoch .f-sprechen { width: calc(var(--u) * 50); }
.film--hoch .f-sprechen__satz { font-size: calc(var(--u) * 2.9); }

/* ---------- Ein Browser, jedes Gerät ---------- */

.f-geraete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 5);
}

.f-geraet { margin: 0; }

.f-geraet img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--u) * 1);
  border: 1px solid var(--f-linie);
  box-shadow:
    0 0 calc(var(--u) * 7) color-mix(in srgb, var(--f-schein) 18%, transparent),
    0 calc(var(--u) * 2) calc(var(--u) * 5) rgba(0, 0, 0, .5);
}

.f-geraet--tablet { width: calc(var(--u) * 38); }
.f-geraet--tisch  { width: calc(var(--u) * 88); }

.film--hoch .f-geraete,
.film--quadrat .f-geraete { gap: calc(var(--u) * 3); }

.film--hoch .f-geraet--tablet { width: calc(var(--u) * 20); }
.film--hoch .f-geraet--tisch  { width: calc(var(--u) * 32); }

.f-haken {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 1.2) calc(var(--u) * 3.6);
}

.f-haken__punkt {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * .9);
  font-size: calc(var(--u) * 2.5);
  color: var(--f-leise);
}

.f-haken__punkt svg {
  width: calc(var(--u) * 2.6);
  height: calc(var(--u) * 2.6);
  color: var(--f-gruen);
  flex: none;
}

/* Die Schlusszeile des Stücks ist ein Satz, kein Domainname —
   deshalb etwas kleiner als die Adresse im ersten Film. */
.szene[data-szene="schluss"] .f-adresse { font-size: calc(var(--u) * 6.4); }
.film--hoch .szene[data-szene="schluss"] .f-adresse { font-size: calc(var(--u) * 4.6); }


/* ============================================================
   Stück „Self-Service-Portal"
   ============================================================ */

/* Helle Aufnahmen auf dunkler Bühne: ein Rand, der sie als Fenster
   liest, und ein tiefer Schatten, der sie abhebt. Die Farben des
   Shops selbst bleiben unangetastet. */
.f-lupe--hell {
  border-color: color-mix(in srgb, #fff 28%, transparent);
  box-shadow:
    0 0 calc(var(--u) * 11) color-mix(in srgb, var(--f-schein) 26%, transparent),
    0 calc(var(--u) * 2.6) calc(var(--u) * 7) rgba(0, 0, 0, .65);
}

/* Die Fragen, die der Innendienst sonst beantwortet. */
.f-blase {
  display: grid;
  gap: calc(var(--u) * 1.4);
  width: calc(var(--u) * 54);
  padding: calc(var(--u) * 2.8) calc(var(--u) * 3.2);
  background: color-mix(in srgb, var(--f-flaeche) 92%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * 1.4);
  flex: none;
}

.f-blase__zeile {
  font-size: calc(var(--u) * 2.9);
  line-height: 1.3;
  color: var(--f-leise);
}

.film--hoch .f-blase { width: calc(var(--u) * 46); }

/* Der Weg des Angebots: drei Stationen mit Pfeilen dazwischen. */
.f-stationen {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: calc(var(--u) * 3);
}

.f-stationen .f-pfeil {
  align-self: center;
  font-size: calc(var(--u) * 6);
}

.f-station {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: calc(var(--u) * 1.2);
  width: calc(var(--u) * 40);
  padding: calc(var(--u) * 3.2) calc(var(--u) * 2.4);
  background: color-mix(in srgb, var(--f-flaeche) 90%, transparent);
  border: 1px solid var(--f-linie);
  border-radius: calc(var(--u) * 1.4);
  text-align: center;
}

.f-station__nr {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  border-radius: calc(var(--u) * .9);
  background: color-mix(in srgb, var(--f-gruen) 16%, transparent);
  color: var(--f-gruen);
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 2.8);
}

.f-station__name {
  font-family: var(--ms-font-head);
  font-weight: 600;
  font-size: calc(var(--u) * 3.8);
  color: var(--f-text);
}

.f-station__was {
  font-size: calc(var(--u) * 2.4);
  line-height: 1.3;
  color: var(--f-leise);
}

.film--hoch .f-stationen { flex-direction: column; gap: calc(var(--u) * 1.6); }
.film--hoch .f-stationen .f-pfeil { rotate: 90deg; font-size: calc(var(--u) * 4); }
.film--hoch .f-station { width: calc(var(--u) * 44); padding: calc(var(--u) * 2) calc(var(--u) * 2); }

/* Vier Zusagen untereinander statt nebeneinander — sie sind zu lang
   für eine Zeile. */
.f-haken--spalten {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 2.8);
  max-width: calc(var(--u) * 124);
  margin-inline: auto;
}

.f-haken--spalten .f-haken__punkt {
  align-items: baseline;
  font-size: calc(var(--u) * 3.3);
  line-height: 1.35;
  color: var(--f-text);
}

.f-haken--spalten .f-haken__punkt b { font-family: var(--ms-font-head); }

.film--hoch .f-haken--spalten { max-width: calc(var(--u) * 50); }
.film--hoch .f-haken--spalten .f-haken__punkt { font-size: calc(var(--u) * 2.5); }