/* Handwerk-Seite: Film und Sektionen. Ausgelagert aus dem alten Inline-Style. */
/* ------------------------------------------------------------------
     Eigener Auftritt nur für diese Landingpage.

     Gleiche Marke, anderer Takt: die Seite bekommt einen zentrierten
     Hero auf einem feinen Rasterhintergrund (Bauplan statt Blob) und
     Abschnittsköpfe, die links stehen und einen amberfarbenen Balken
     tragen, statt wie im Rest der Seite zentriert zu sein.

     Alles ist auf .hw-* begrenzt und liegt bewusst hier statt im
     globalen Stylesheet: so bleibt der Cache-Buster aller anderen
     Seiten unangetastet.
     ------------------------------------------------------------------ */
  .hw-hero {
    position: relative; overflow: hidden;
    padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2.5rem, 5vw, 4rem);
  }
  /* Ab 880px steht der schwebende Header über dem Inhalt (ScrollSmoother
     nimmt den Seiteninhalt aus dem Fluss), der Hero braucht dort mehr Luft. */
  @media (min-width: 880px) {
    .hw-hero { padding-top: clamp(6.5rem, 4rem + 4.5vw, 9rem); }
  }
  /* Millimeterpapier: das Raster liegt im warmen Amber der Marke, nicht im
     kühlen Blau. Blau hätte den Hero in Richtung Tech-Startup gezogen, genau
     die Anti-Referenz aus PRODUCT.md; Amber liest sich als Werkstattpapier
     und nimmt den Balken der Abschnittsköpfe vorweg. */
  .hw-hero::before {
    content: ""; position: absolute; inset: -20% -10% 0; pointer-events: none;
    /* Zellgröße wandert mit der Breite: fix 74px wären auf dem Handy nur
       fünf Spalten und damit eine Tabelle statt einer Textur. */
    --hw-cell: clamp(38px, 9vw, 74px);
    background:
      repeating-linear-gradient(to right,  color-mix(in oklab, var(--color-secondary) 42%, transparent) 0 1px, transparent 1px var(--hw-cell)),
      repeating-linear-gradient(to bottom, color-mix(in oklab, var(--color-secondary) 42%, transparent) 0 1px, transparent 1px var(--hw-cell));
    -webkit-mask-image: radial-gradient(110% 78% at 50% 24%, #000 4%, transparent 68%);
            mask-image: radial-gradient(110% 78% at 50% 24%, #000 4%, transparent 68%);
  }
  :root[data-theme="dark"] .hw-hero::before {
    background:
      repeating-linear-gradient(to right,  color-mix(in oklab, var(--color-secondary) 26%, transparent) 0 1px, transparent 1px var(--hw-cell)),
      repeating-linear-gradient(to bottom, color-mix(in oklab, var(--color-secondary) 26%, transparent) 0 1px, transparent 1px var(--hw-cell));
  }
  .hw-hero > .container { position: relative; z-index: var(--z-base); }
    .hw-hero-inner { max-width: 44rem; margin-inline: auto; text-align: center; }
  .hw-slogan {
    font-size: clamp(1.95rem, 1rem + 4.2vw, 4rem);
    line-height: 1.05; letter-spacing: -0.02em;
    margin: var(--space-sm) 0 0; text-wrap: balance;
  }
  /* Zweiter Satz des Slogans: gehört zur Aussage, nicht zum Fließtext.
     Deshalb Überschrift-Tinte, nur kleiner und leichter. */
  .hw-slogan-b {
    font-family: var(--font-heading); font-weight: 600;
    font-size: clamp(1.15rem, 0.95rem + 1.05vw, 1.7rem);
    line-height: 1.24; color: var(--color-ink);
    margin-top: var(--space-xs); text-wrap: balance;
  }
  .hw-hero .lead { max-width: 38rem; margin-top: var(--space-lg); margin-inline: auto; }
  .hw-hero .hero-actions { justify-content: center; }

  /* Die beiden Slogan-Sätze starten versteckt, sobald JavaScript da ist:
     das Skript unten lässt erst den einen, dann den anderen einlaufen.
     Das Keyframe ist nur die Notbremse, falls es nie läuft. */
  @media (prefers-reduced-motion: no-preference) {
    html.js .hw-hero .hw-beat { opacity: 0; animation: hero-rise 0.7s var(--ease-out-expo) both; }
    html.js .hw-hero .hw-slogan-b { animation-delay: 80ms; }
  }
  /* Zwei zentrierte Knöpfe unterschiedlicher Breite franst auf dem Handy
     aus; gestapelt und gleich breit liest es sich ruhiger. */
  @media (max-width: 560px) {
    .hw-hero .hero-actions { flex-direction: column; align-items: stretch; }
    .hw-hero .hero-actions .btn { justify-content: center; }
  }

  /* Signatur-Eingang des Hauptauftritts: gestaffeltes Aufsteigen. Die drei
     Beats der Story (beide Slogan-Sätze und die Grafik) sind ausgenommen,
     die dirigiert das Skript; zwei animation-Kurzschreibweisen auf einem
     Element würden sich gegenseitig verdrängen. */
  @media (prefers-reduced-motion: no-preference) {
    .hw-hero-inner > *:not(.hw-beat) {
      opacity: 0;
      animation: hero-rise 0.7s var(--ease-out-expo) both;
      animation-delay: calc(var(--enter-i, 0) * 80ms + 60ms);
    }
    .hw-hero-inner > *:nth-child(2) { --enter-i: 1; }
    .hw-hero-inner > *:nth-child(3) { --enter-i: 2; }
    .hw-hero-inner > *:nth-child(4) { --enter-i: 3; }
  }

  /* Abschnittsköpfe stehen links statt zentriert wie im Rest der Seite.
     Das ist der Takt-Unterschied; der Amber-Balken darüber ist auf
     Wunsch raus. */
  .hw-head { max-width: 46rem; }
  .hw-head p { max-width: 52ch; }

  /* Drei statt vier Schritte: das globale Raster geht von vier aus. */
  @media (min-width: 780px) { .hw-steps { grid-template-columns: repeat(3, 1fr); } }

  /* Der Hinweis auf die Modernisierung trägt eine der beiden Kernaussagen
     der Seite und war als graue Fußnote zu leise. Amber-Kasten aus dem
     Stylesheet, jetzt in der rechten Spalte unter der Betreuung: dort
     steht er neben dem Angebot statt darunter, und beide Nebensachen
     bilden eine Spalte. Die Abstände trägt das Raster der Spalte. */
  .hw-note { margin: 0; }

  /* Die beiden Spalten der Anfrage tragen jetzt beide einen Titel. Vorher
     hatte nur die rechte einen, die linke begann direkt mit dem ersten
     Eingabefeld — zwei Spalten nebeneinander, die auf verschiedener Höhe
     anfangen. Der Abstand lag als Inline-Stil an der einen Überschrift;
     als Klasse gilt er für beide und bleibt an einer Stelle pflegbar. */
  .hw-spalten-titel { margin-bottom: var(--space-md); }

  /* Personen als kompakte Zeile: rundes Porträt, Name, Rolle, ein Satz.
     Das große Kartenbild hätte die Platzhalter zur Hauptsache gemacht. */
  .hw-people { display: grid; gap: var(--space-md); }
  @media (min-width: 720px) { .hw-people { grid-template-columns: 1fr 1fr; } }
  .hw-person {
    display: grid; grid-template-columns: auto 1fr;
    gap: var(--space-md); align-items: center;
    padding: var(--space-md);
  }
  .hw-person img {
    display: block; width: 5.25rem; height: 5.25rem;
    border-radius: var(--radius-round); object-fit: cover;
  }
  .hw-person h3 { font-size: var(--fs-500); }
  /* Name und Rolle, sonst nichts. Die Regel für den früheren Fließtext
     darunter ist weg: sie hing an p:last-child und hätte jetzt die Rolle
     erwischt, die damit grau statt blau gewesen wäre. */
  .hw-person .hw-role {
    font-family: var(--font-heading); font-weight: 600;
    font-size: var(--fs-300); color: var(--color-primary-strong);
  }
  .hw-person .hw-role .dot { color: var(--color-text-muted); margin-inline: 0.15em; }

  /* FAQ: Kopf links, Fragen rechts. Die globale .faq zentriert sich selbst
     (max-width 800 + margin auto), das lief gegen den linksbündigen Kopf
     dieser Seite; darum in jeder Breite links am Raster. */
  .hw-faq-grid .faq { margin-inline: 0; }
  @media (min-width: 960px) {
    .hw-faq-grid {
      display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
      gap: var(--space-xl); align-items: start;
    }
    .hw-faq-grid .hw-head { margin-bottom: 0; }
    .hw-faq-grid .faq { max-width: none; }
  }

  /* Anfrage: das Formular trägt mehr Inhalt als die Kontaktspalte. */
  @media (min-width: 900px) { .hw-form-grid { grid-template-columns: 1.15fr 0.85fr; } }

/* ==================================================================
   HERO-FILM
   Der Film IST der Hero. Sobald JavaScript da ist, verschwindet der
   alte Textblock (Überschrift, zweiter Slogan-Satz, Fließtext) und der
   Film übernimmt; die Überschrift bleibt für Screenreader im Dokument.
   Ohne JavaScript gibt es keinen Film, dann steht wieder der alte
   Textblock da. Den Schalter setzt das Kopf-Snippet vor dem ersten
   Zeichnen.
   ================================================================== */
.hw-film { display: none; width: 100%; margin: 0; }
.hw-film .film { border-radius: 0; }
/* Der Film läuft auf allen Breiten (Philipp, 20.09.2026). Auf dem Handy
   im Hochformat 4:5 mit näherer Kamera, damit nichts zum Streifen wird. */
html.js .hw-film { display: block; }
/* Der alte Hero tritt ab, bleibt aber als Textfassung ohne JS bestehen */
html.js .hw-hero { padding-block: 0; }
/* Das Amber-Raster liegt als absolut positioniertes ::before ÜBER dem
   Film und würde als Gitter darauf liegen. Im Film-Hero gehört es weg,
   ohne JavaScript bleibt es als Untergrund des Textheros bestehen. */
html.js .hw-hero::before { content: none; }
html.js .hw-hero > .container { padding: 0; }
html.js .hw-hero .hw-slogan-b,
html.js .hw-hero .lead,
html.js .hw-hero .hero-actions { display: none; }
html.js .hw-hero .hw-slogan {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hw-hero .hero-actions { margin-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  .hw-film { opacity: 0; animation: hero-rise 0.7s var(--ease-out-expo) 120ms both; }
}

#t4a { font-size: 4cqw; }
#t4b { font-size: 4.6cqw; }
#t6a { font-size: 3.4cqw; }
#t6b { font-size: 4.2cqw; }


/* ==================================================================
   HERO-FILM

   Eine durchgehende Welt, durch die eine Kamera fährt. Die Welt ist ein
   Rechteck, damit die Übergänge die Richtung wechseln:

     Feld 1  x  50 / y  50    Suche und Lücke
       ->  nach RECHTS
     Feld 2  x 190 / y  50    die Website
       ->  nach UNTEN
     Feld 3  x 190 / y 190    das Diagramm
       ->  nach LINKS
     Feld 4  x  50 / y 190    das Versprechen

   Die Kamera kann zoomen, schwenken UND kippen (--rot). Gekippt wird
   nur unterwegs, auf den Standpunkten steht sie wieder gerade.

   MASSREGEL gegen angeschnittene Inhalte: ein Motiv der Breite B (cqw)
   verträgt höchstens Zoom 96/B. Tiefer wird nur auf kleine Motive
   gezoomt.
   ================================================================== */
.film {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: var(--radius-lg);
  background: var(--color-bg);
  container-type: inline-size;
  font-family: var(--font-body);
  --e-in:   cubic-bezier(0.16, 1, 0.3, 1);
  --e-out:  cubic-bezier(0.55, 0, 1, 0.45);
  --e-cam:  cubic-bezier(0.65, 0, 0.35, 1);
  --e-pop:  cubic-bezier(0.34, 1.45, 0.64, 1);
}
.film * { box-sizing: border-box; }

.f-cam {
  position: absolute; inset: 0;
  transform: scale(calc(var(--z, 1) * var(--zm, 1))) rotate(var(--rot, 0deg))
             translate(calc((50 - var(--fx, 50)) * 1%), calc((50 - var(--fy, 50)) * 1%));
  transition: transform var(--cam-t, 900ms) var(--e-cam);
  will-change: transform;
}
.f-at {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  transform: translate(-50%, -50%)
             translate(var(--ex, 0cqw), var(--ey, 0cqw)) scale(var(--es, 1));
  transition: transform 420ms var(--e-out), opacity 340ms var(--e-out);
}
.f-off { opacity: 0 !important; transition: opacity 280ms var(--e-out); }

/* Auftritte -------------------------------------------------------- */
.f-pop { opacity: 0; }
.f-pop.is-in { animation: fPop 420ms var(--e-pop) both; }
@keyframes fPop {
  0%   { opacity: 0; transform: translateY(1.4cqw) scale(0.9); }
  62%  { opacity: 1; transform: translateY(0) scale(1.035); }
  100% { opacity: 1; transform: none; }
}
.f-slide { opacity: 0; }
.f-slide.is-in { animation: fSlide 460ms var(--e-pop) both; }
@keyframes fSlide {
  0%   { opacity: 0; transform: translate(var(--fromX, 0cqw), var(--fromY, 2cqw)) scale(0.94); }
  64%  { opacity: 1; transform: translate(0, 0) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
.f-w { display: inline-block; opacity: 0; }
.f-w.is-in { animation: fWord 400ms var(--e-pop) both; }
@keyframes fWord {
  0%   { opacity: 0; transform: translateY(0.34em) scale(0.86); }
  62%  { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: none; }
}

.f-h {
  margin: 0; font-family: var(--font-heading); font-weight: 800;
  letter-spacing: -0.025em; color: var(--color-ink);
  text-align: center; line-height: 1.12; width: 80cqw;
  transition: opacity 280ms var(--e-out);
}
.f-hl { color: var(--color-primary); }

/* ---------- Feld 1: die Suche ------------------------------------- */
.f-bar {
  width: 58cqw; display: flex; align-items: center; gap: 1.3cqw;
  height: 6.6cqw; padding: 0 1.1cqw 0 1.8cqw;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--lift-lo), var(--lift-hi);
  overflow: hidden;
  transition: opacity 280ms var(--e-out);
}
.f-bar .f-ic { width: 2.3cqw; height: 2.3cqw; color: var(--color-text-muted); flex: none; opacity: 0; }
.f-bar .f-ic.is-in { animation: fIcon 440ms var(--e-pop) both; }
@keyframes fIcon {
  0%   { opacity: 0; transform: scale(0.25) rotate(-25deg); }
  62%  { opacity: 1; transform: scale(1.14) rotate(0deg); }
  100% { opacity: 1; transform: scale(1); }
}
.f-typed { flex: 1; font-size: 2.15cqw; color: var(--color-text); white-space: nowrap; overflow: hidden; }
.f-caret {
  display: inline-block; width: 0.17cqw; height: 2.5cqw; opacity: 0;
  background: var(--color-primary); vertical-align: -0.5cqw; margin-left: 0.14cqw;
}
.f-caret.is-blink { animation: fBlink 880ms steps(1, end) infinite; }
@keyframes fBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.f-go-wrap {
  flex: none; opacity: 0; transform: translateX(150%);
  transition: transform 520ms var(--e-in), opacity 240ms linear;
}
.f-go-wrap.is-in { opacity: 1; transform: none; }
.f-go {
  height: 4.4cqw; padding: 0 1.9cqw; display: grid; place-items: center;
  background: var(--primary); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.85cqw;
  border-radius: var(--r-pill);
  box-shadow: var(--key-solid);
  transition: transform 160ms var(--e-pop), box-shadow 160ms var(--e-in);
}
.f-go.is-hit { transform: scale(0.92) translateY(1px); box-shadow: var(--key-solid-down); }

.f-hit {
  position: relative;
  width: 58cqw; display: flex; align-items: center; gap: 1.5cqw;
  height: 7cqw; padding: 0 1.8cqw;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-soft);
  transition: opacity 280ms var(--e-out);
}
.f-av { width: 3.5cqw; height: 3.5cqw; border-radius: 50%; flex: none;
        background: var(--color-tertiary-soft); border: 1.5px solid var(--color-tertiary); }
.f-lines { flex: 1; display: flex; flex-direction: column; gap: 0.85cqw; }
.f-lines i { display: block; height: 1.05cqw; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.f-lines i + i { opacity: 0.55; }

.f-hit--void { background: transparent; box-shadow: none; border: 1.6px dashed var(--color-border-strong); }
.f-hit--void.is-breath { opacity: 1; animation: fBreath 2000ms var(--e-cam) infinite; }
@keyframes fBreath {
  0%, 100% { border-color: var(--color-border-strong); }
  50%      { border-color: var(--color-primary); }
}
/* Die Frage steht IN der gestrichelten Box */
.f-void-text {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 2.6cqw;
  letter-spacing: -0.02em; color: var(--color-ink); white-space: nowrap;
  transition: opacity 260ms var(--e-out);
}
.f-hit--void .f-fill { opacity: 0; }
.f-hit--void .f-fill i { transform: scaleX(0); transform-origin: left center; }
.f-hit--void.is-filled {
  opacity: 1;
  background: var(--surface); box-shadow: var(--rim-hi), var(--rim-lo), var(--ring-blue), var(--shadow-lift);
  border: 1.6px solid var(--color-primary); animation: none;
  transition: background 280ms var(--e-in), border-color 280ms var(--e-in), box-shadow 280ms var(--e-in);
}
.f-hit--void.is-filled .f-fill { opacity: 1; transition: opacity 200ms var(--e-in); }
.f-hit--void.is-filled .f-fill i { transform: scaleX(1); transition: transform 480ms var(--e-in) 120ms; }
.f-hit--void.is-filled .f-fill i + i { transition-delay: 250ms; }
.f-hit--void.is-up { transform: translateY(-11.8cqw); transition: transform 580ms var(--e-in); }
.f-flagring {
  position: absolute; inset: -0.4cqw; border-radius: var(--radius-md);
  border: 1.6px solid var(--color-primary); opacity: 0; pointer-events: none;
}
.f-flagring.is-on { animation: fFlag 1400ms var(--e-cam) 1; }
@keyframes fFlag {
  0%   { opacity: 0; transform: scale(1.045); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.f-mouse {
  position: absolute; left: 0; top: 0; width: 4.2cqw; height: 4.2cqw;
  opacity: 0; z-index: 6; pointer-events: none;
  filter: drop-shadow(0 0.35cqw 0.7cqw rgb(24 35 56 / 0.3));
  transform: translate(calc(var(--mx) * 1cqw), calc(var(--my) * 1cqw)) scale(var(--ms, 1));
  transition: transform 760ms var(--e-cam), opacity 220ms linear;
}
.f-mouse.is-in { opacity: 1; }
.f-mouse svg { width: 100%; height: 100%; display: block; }

/* ---------- Feld 2: die Website ----------------------------------- */
.f-site {
  width: 52cqw; background: var(--surface);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  box-shadow: var(--rim-hi), var(--rim-lo), var(--ring), var(--shadow-lift); overflow: hidden; opacity: 0;
  clip-path: inset(0 0 91% 0);
  transition: clip-path 800ms var(--e-in);
}
.f-site.is-in { animation: fPop 400ms var(--e-pop) both; }
.f-site.is-open { clip-path: inset(0 0 0 0); }
.f-site-top {
  height: 3.6cqw; border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; gap: 0.8cqw; padding: 0 1.5cqw;
}
.f-site-top b { width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: var(--color-border-strong); opacity: 0; }
.f-site-top b.is-in { animation: fDot 320ms var(--e-pop) both; }
@keyframes fDot { 0% { opacity: 0; transform: scale(0.2); } 62% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
.f-site-top s { flex: 1; height: 1.5cqw; border-radius: var(--radius-pill); background: var(--color-surface-alt); margin-left: 0.8cqw; opacity: 0; }
.f-site-top s.is-in { animation: fPop 360ms var(--e-pop) both; }
.f-site-nav { display: flex; align-items: center; gap: 1.2cqw; }
.f-site-nav u { width: 6cqw; height: 1.6cqw; border-radius: var(--radius-xs); background: var(--color-primary); }
.f-site-nav em { margin-left: auto; display: flex; gap: 1cqw; }
.f-site-nav em i { display: block; width: 3.6cqw; height: 0.9cqw; border-radius: var(--radius-pill); background: var(--color-border-strong); }
/* Held-Bereich mit Überschrift, Zeile und dem Marken-Knopf */
.f-hero {
  border-radius: var(--r-md); background: var(--primary-soft); box-shadow: var(--tray);
  padding: 1.6cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 0.9cqw;
}
.f-hero .hl1 { width: 60%; height: 1.9cqw; border-radius: var(--radius-pill); background: var(--color-primary); opacity: 0.85; }
.f-hero .hl2 { width: 44%; height: 1.1cqw; border-radius: var(--radius-pill); background: var(--color-primary); opacity: 0.4; }
.f-cta {
  margin-top: 0.4cqw; height: 3.6cqw; padding: 0 1.8cqw;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--primary); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.75cqw;
  box-shadow: var(--key-solid);
  transition: transform 160ms var(--e-pop), box-shadow 160ms var(--e-in);
}
.f-cta.is-hit { transform: scale(0.92) translateY(1px); box-shadow: var(--key-solid-down); }
.f-site-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
.f-site-imgs > div { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); }
.f-site-feet { display: flex; gap: 1.4cqw; }
.f-site-feet span { flex: 1; display: flex; flex-direction: column; gap: 0.6cqw; }
.f-site-feet i { display: block; height: 0.85cqw; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.f-site-feet i + i { width: 70%; opacity: 0.5; }

/* Fenster-Bühne: Seite und Diagramm liegen übereinander. Der Klick auf
   den Knopf schaltet um wie ein zweiter Tab, die Ansicht bleibt stehen. */
.f-site-stage { position: relative; height: 38cqw; }
.f-site-page, .f-site-sheet {
  position: absolute; inset: 0; padding: 1.8cqw;
  transition: opacity 300ms var(--e-out), transform 300ms var(--e-out);
}
.f-site-page { display: flex; flex-direction: column; gap: 1.4cqw; }
.f-site-sheet { opacity: 0; transform: translateY(2cqw); display: grid; place-items: center; }
.f-site.is-tab2 .f-site-page { opacity: 0; transform: translateY(-2cqw); }
.f-site.is-tab2 .f-site-sheet {
  opacity: 1; transform: none;
  transition: opacity 380ms var(--e-in) 140ms, transform 380ms var(--e-in) 140ms;
}
/* Tabs in der Fensterleiste */
.f-tabs { display: flex; align-items: flex-end; gap: 0.5cqw; margin-left: 0.7cqw; }
.f-tab {
  height: 1.7cqw; width: 5.2cqw; border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--color-surface-alt); border: 1px solid var(--color-border); border-bottom: none;
  transition: background 260ms var(--e-in), border-color 260ms var(--e-in);
}
.f-tab.is-on { background: var(--color-primary); border-color: var(--color-primary); }
.f-tab--new {
  opacity: 0; transform: translateX(-1.4cqw) scale(0.7); transform-origin: left bottom;
  transition: opacity 240ms var(--e-in), transform 340ms var(--e-pop);
}
.f-tab--new.is-in { opacity: 1; transform: none; }

/* Schlusszeilen werden getippt. Die Buchstaben behalten ihren Platz
   (visibility statt display), damit die zentrierte Zeile beim Tippen
   nicht springt; der Cursor wandert stattdessen mit. Buchstaben stecken
   in Wort-Hüllen, sonst darf der Browser mitten im Wort umbrechen. */
.f-wv { display: inline-block; white-space: nowrap; }
.f-c  { visibility: hidden; }
.f-c.is-on { visibility: visible; }
.f-h--type { position: relative; }
.f-endcaret {
  position: absolute; left: 0; top: 0; margin: 0;
  width: 0.09em; height: 1em; opacity: 0;
  background: var(--color-primary);
}
.f-endcaret.is-on { animation: fBlink 880ms steps(1, end) infinite; }

/* ---------- das Diagramm ------------------------------------------ */
.f-chart { width: 100%; position: relative; }
.f-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.f-axis { stroke: var(--color-border-strong); stroke-width: 0.7; stroke-linecap: round; }
.f-axis.is-draw { animation: fDraw 620ms var(--e-in) both; }
.f-curve {
  fill: none; stroke: var(--color-primary); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.f-curve.is-draw { animation: fDraw 2200ms var(--e-cam) both; }
@keyframes fDraw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.f-chip {
  position: absolute; transform: translate(-50%, -50%); opacity: 0;
  padding: 0.7cqw 1.5cqw; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: 600; font-size: 2cqw;
  background: var(--surface); border: 0;
  color: var(--ink); box-shadow: var(--key-white); white-space: nowrap;
}
.f-chip--blue { background: var(--soft-btn-bg); color: var(--soft-btn-ink); box-shadow: var(--key-blue); }
.f-chip.is-in { animation: fChip 420ms var(--e-pop) both; }
@keyframes fChip {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 1.2cqw)) scale(0.8); }
  62%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .film * { animation: none !important; transition: none !important; }
  .film .f-pop, .film .f-w, .film .f-slide, .film .f-chip, .film .f-site, .film .f-chart { opacity: 1; }
}


/* Auf schmalen Geräten ist die Schrift im Film sonst zu klein: alle
   Größen hängen an der Filmbreite, nicht an der Schriftgröße. */
@media (max-width: 719px) {
  .film { aspect-ratio: 1 / 1; }   /* quadratisch statt 16:9: Szenen bleiben groß, nichts wird zum Streifen */
}
@media (max-width: 760px) {
  #t4a { font-size: 5.4cqw; }
  #t4b { font-size: 6cqw; }
  #t6a { font-size: 4.6cqw; }
  #t6b { font-size: 5.6cqw; }
  .f-void-text { font-size: 3.6cqw; }
  .f-typed { font-size: 3cqw; }
  .f-go { font-size: 2.6cqw; height: 5.6cqw; }
  .f-chip { font-size: 1.9cqw; padding: 0.55cqw 1.2cqw; }   /* kleiner als der Rest: die Chips liegen auf der Kurve und sollen sie nicht verdecken */
  .f-cta { font-size: 2.5cqw; height: 5cqw; }
}