/* =========================================================================
   Gestaltung der Startseite (index.html)
   Tokens → Basis → Kopfzeile → Kapitel-Navigation → Bühne → Kapitel 1
   (Texte, Zettel, Tablet, Dashboard, Plakette, Hinweise) → Neuer
   Webauftritt → Gripszug → DreamTeam → Fotoverkauf → Volleyballturnier →
   Buchhaltung → Ablauf → Preise → Über mich → Erstgespräch → Kontakt → FAQ →
   Fusszeile → Ohne Skript
   ========================================================================= */

/* --- Tokens --------------------------------------------------------------
   Die Farben sind die des Logo-Pakets (LIESMICH.txt): Die Seite ist ein
   Film im Dunkeln und kennt keinen hellen Modus. Die Rechtsseiten behalten
   ihr eigenes Schema mit Umschalter (assets/legal.css). */
:root{
  --bg:#111015;
  --bg-deep:#08070B;
  --ink:#ECEDF2;
  --muted:#9DA4B1;
  --coral:#FE7971;
  --coral-hover:#FF9D96;
  --coral-fg:#22100F;
  --line:rgba(236,237,242,.10);

  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --hand:"Caveat", "Bradley Hand", "Segoe Print", cursive;

  --pad:clamp(1.25rem, 4.5vw, 4rem);
  /* Dieselben zwei Kurven wie auf der Startseite. */
  --ease-out:cubic-bezier(.23, 1, .32, 1);
  --ease-in-out:cubic-bezier(.77, 0, .175, 1);

  /* Kleine Bildschirmhöhe: bleibt stehen, wenn die Adressleiste am Handy
     ein- und ausfährt. Ältere Browser kennen svh nicht – ohne den
     Rückfall wäre jede Rechnung damit ungültig und die Bühne leer. */
  --svh:1svh;
  color-scheme:dark;
}
@supports not (height: 1svh){ :root{ --svh:1vh } }

@font-face{
  font-family:"Caveat";
  src:url("fonts/caveat-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* --- Basis -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
p{margin:0}
img,svg{display:block}
[hidden]{display:none !important}
::selection{background:var(--coral); color:var(--coral-fg)}
:where(a,button):focus-visible{outline:2px solid var(--coral); outline-offset:3px; border-radius:4px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--bg); padding:.75rem 1.15rem; border-radius:0 0 8px 0;
  font-weight:600; text-decoration:none;
}
.skip:focus{left:0}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.35rem; border-radius:999px; border:1px solid transparent;
  background:var(--coral); color:var(--coral-fg);
  font:inherit; font-weight:650; font-size:.95rem; letter-spacing:-.01em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .2s var(--ease-out), background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
@media (hover: hover) and (pointer: fine){
  .btn:hover{transform:translateY(-1px); background:var(--coral-hover); box-shadow:0 12px 30px -12px rgba(254,121,113,.6)}
  .btn--ghost:hover{background:transparent; border-color:var(--ink); box-shadow:none}
}
.btn:active{transform:scale(.97); transition:transform .08s var(--ease-out)}
.btn--ghost{background:transparent; color:var(--ink); border-color:rgba(236,237,242,.24)}

/* Link zur echten App unter den Angaben einer Referenz: eine gläserne
   Pille, die Adresse in Mono und ein Pfeil im Korallenkreis – leise, aber
   eindeutig ein Knopf. */
.app-link{
  display:inline-flex; align-items:center; gap:.65rem; width:max-content;
  margin-top:1.7rem; padding:.42rem .42rem .42rem 1.05rem; border-radius:999px;
  border:1px solid rgba(236,237,242,.2); background:rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--ink); font-size:.9rem; font-weight:680; letter-spacing:-.01em; line-height:1.2;
  text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease, background .2s ease, transform .2s var(--ease-out);
}
.app-link-url{font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.03em; color:var(--muted); transition:color .2s ease}
.app-link-pfeil{
  flex:none; width:1.9rem; height:1.9rem; padding:.42rem; border-radius:50%; background:var(--coral);
  fill:none; stroke:var(--coral-fg); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s var(--ease-out), background .2s ease;
}
@media (hover: hover) and (pointer: fine){
  .app-link:hover{border-color:rgba(236,237,242,.46); background:rgba(255,255,255,.1)}
  .app-link:hover .app-link-url{color:var(--ink)}
  .app-link:hover .app-link-pfeil{transform:translate(2px, -2px); background:var(--coral-hover)}
}
.app-link:active{transform:scale(.97); transition:transform .08s var(--ease-out)}
.app-link:focus-visible{outline-offset:4px; border-radius:999px}
/* Das Skript blendet ihn mit dem Kapitel ein; bis dahin nicht klickbar,
   mit der Tastatur erreicht aber sofort sichtbar */
.js .app-link{opacity:0; pointer-events:none}
.js .app-link:focus-visible{opacity:1 !important; pointer-events:auto}

.kicker{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--coral);
  margin:0 0 1.15rem;
}

/* --- Kopfzeile -----------------------------------------------------------
   Kein Balken, sondern ein Verlauf: Ein deckender Streifen würde das Bild
   oben abschneiden. Signet, Schriftzug und Zeile sind dieselben wie in
   index.html und zeichnen sich beim Laden genauso. */
.bar{
  position:fixed; inset:0 0 auto; z-index:40;
  display:flex; align-items:center; gap:1rem;
  padding:calc(.8rem + env(safe-area-inset-top)) var(--pad) .8rem;
  pointer-events:none;
}
.bar::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(17,16,21,.82), rgba(17,16,21,0));
  transition:opacity .4s ease;
}
.bar > *{pointer-events:auto}
.bar .btn{padding:.62rem 1.1rem; font-size:.9rem}
.brand{
  display:inline-flex; align-items:center; gap:.6rem; margin-right:auto;
  font-weight:700; letter-spacing:-.025em; font-size:1.1rem; line-height:1.65;
  color:var(--ink); text-decoration:none;
}
.brand-mark{width:2.1rem; height:1.5rem; flex:none}
.brand-mark path{stroke-dasharray:1; animation:brand-draw .69s cubic-bezier(.65,0,.15,1) both}
.brand-mark path:nth-child(2){animation-duration:.81s; animation-delay:.35s}
.brand-name{display:block; animation:brand-rise .63s cubic-bezier(.65,0,.15,1) .53s both}
.brand small{
  display:block; font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted); line-height:1.4;
  white-space:nowrap; animation:brand-rise .63s cubic-bezier(.65,0,.15,1) .68s both;
}
@media (max-width: 26rem){ .brand small{display:none} }
@keyframes brand-draw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
@keyframes brand-rise{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}

/* --- Kapitel-Navigation --------------------------------------------------
   Grundform (Handy, Tablet, Maus ohne Platz): ein dezenter Pfeil neben dem
   Signet, sein Ring zeigt, wie weit die Seite gelesen ist. Ein Tippen
   klappt die Kapitel als Glasfläche unter der Kopfzeile auf.
   Am Desktop (weiter unten): eine schmale Leiste am linken Rand – acht
   Striche, der aktuelle länger und so weit gefüllt, wie das Kapitel
   gelesen ist. Beim Darüberfahren öffnet sie sich mit den Titeln. */
.bar .brand{margin-right:0}
.kapitel{display:flex; align-items:center; margin-right:auto}
.kp-knopf{
  position:relative; display:none; place-items:center; flex:none; width:2.3rem; height:2.3rem; margin-left:.3rem; padding:0;
  border:0; border-radius:50%; background:rgba(30,29,37,.5); color:var(--ink); cursor:pointer;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); -webkit-tap-highlight-color:transparent;
  transition:background .2s ease, transform .2s var(--ease-out);
}
.kapitel.is-bereit .kp-knopf{display:grid}
.kp-knopf:active{transform:scale(.92)}
.kp-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.kp-ring circle{fill:none; stroke-width:1.4}
.kp-ring-grund{stroke:rgba(236,237,242,.16)}
.kp-ring-fort{stroke:var(--coral); stroke-dasharray:1; stroke-dashoffset:1; stroke-linecap:round}
.kp-pfeil{position:relative; width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--ease-out)}
.kapitel.is-offen .kp-pfeil{transform:rotate(180deg)}
.kapitel.is-offen .kp-knopf{background:rgba(254,121,113,.16)}
.kp-dunkel{position:fixed; inset:0; z-index:-2; background:rgba(8,8,12,.62); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s}
.kapitel.is-offen .kp-dunkel{opacity:1; visibility:visible; transition:opacity .3s ease}
.kp-griff{display:none}
.kp-panel{
  position:fixed; left:var(--pad); top:var(--kp-top, calc(env(safe-area-inset-top) + 4.2rem)); z-index:1;
  width:min(22rem, calc(100vw - 2 * var(--pad))); padding:.95rem .55rem .55rem; border-radius:1.25rem;
  background:rgba(26,25,32,.9); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.97); transform-origin:1.2rem 0;
  transition:opacity .22s ease, transform .3s var(--ease-out), visibility 0s linear .3s;
}
.kapitel.is-offen .kp-panel{opacity:1; visibility:visible; transform:none; transition:opacity .24s ease, transform .5s var(--ease-out)}
.kp-kopf{margin:0 0 .3rem .85rem; font-family:var(--mono); font-size:.64rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--coral)}
.kp-liste{margin:0; padding:0; list-style:none}
.kp-liste a{display:flex; align-items:center; gap:.8rem; min-height:2.8rem; padding:0 .85rem; border-radius:.8rem; color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background .2s ease}
.kp-liste a:active{background:rgba(255,255,255,.06)}
.kp-strich{position:relative; flex:none; display:block; width:1rem; height:2px; border-radius:2px; overflow:hidden; background:rgba(236,237,242,.28); transition:width .4s var(--ease-out), background .25s ease}
.kp-strich b{position:absolute; inset:0; background:var(--coral); transform-origin:0 50%; transform:scaleX(0)}
.kp-nr{flex:none; font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.08em; color:var(--muted); transition:color .25s ease}
.kp-titel{font-size:.98rem; font-weight:600; letter-spacing:-.012em; white-space:nowrap; transition:color .2s ease}
.kp-liste a.is-jetzt{background:rgba(254,121,113,.09)}
.kp-liste a.is-jetzt .kp-strich{width:1.6rem; background:rgba(254,121,113,.38)}
.kp-liste a.is-jetzt .kp-strich b{transform:scaleX(max(.14, var(--p, 0)))}
.kp-liste a.is-jetzt .kp-nr{color:var(--coral)}
.kp-liste li{opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .3s var(--ease-out)}
.kapitel.is-offen .kp-liste li{opacity:1; transform:none; transition:opacity .3s ease, transform .5s var(--ease-out)}
.kapitel.is-offen .kp-liste li:nth-child(2){transition-delay:.025s}
.kapitel.is-offen .kp-liste li:nth-child(3){transition-delay:.05s}
.kapitel.is-offen .kp-liste li:nth-child(4){transition-delay:.075s}
.kapitel.is-offen .kp-liste li:nth-child(5){transition-delay:.1s}
.kapitel.is-offen .kp-liste li:nth-child(6){transition-delay:.125s}
.kapitel.is-offen .kp-liste li:nth-child(7){transition-delay:.15s}
.kapitel.is-offen .kp-liste li:nth-child(8){transition-delay:.175s}
/* Die Referenzapps unter „Referenzprojekte": eingerückt, ohne Nummer, der
   Strich unter der Nummer des Kapitels */
.kp-unter{margin:-.2rem 0 .3rem; padding:0; list-style:none}
.kp-liste .kp-unter a{min-height:2.3rem; gap:.65rem; padding-left:calc(.85rem + 1rem + .8rem)}
.kp-liste .kp-unter .kp-strich{width:.5rem}
.kp-unter .kp-titel{font-size:.9rem; font-weight:560; color:rgba(236,237,242,.7)}
.kp-liste .kp-unter a.is-jetzt{background:rgba(254,121,113,.06)}
.kp-liste .kp-unter a.is-jetzt .kp-strich{width:.9rem}
.kp-unter a.is-jetzt .kp-titel{color:var(--ink)}
.kapitel.is-offen .kp-liste .kp-unter li:nth-child(n){transition-delay:.06s}
/* Mit den Referenzapps wird die Liste lang: am kleinen Handy scrollt sie */
.kp-panel{max-height:calc(100 * var(--svh) - var(--kp-top, 4.2rem) - 1rem); overflow-y:auto; overscroll-behavior:contain}
/* Ohne Skript gibt es am Handy nichts aufzuklappen */
.kapitel:not(.is-bereit) .kp-panel{display:none}

@media (hover: hover) and (pointer: fine) and (min-width: 60rem){
  .kapitel.is-bereit .kp-knopf, .kp-dunkel{display:none}
  .kapitel:not(.is-bereit) .kp-panel{display:block}
  .kp-panel{
    left:0; top:50%; width:auto; max-height:none; overflow:visible; padding:1rem 1.5rem 1rem 1.15rem; border:0; border-radius:0; background:none; box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    opacity:1; visibility:visible; transform:none; translate:0 -50%; transition:none; pointer-events:none;
  }
  /* Glasfläche als eigene Ebene, damit die Striche geschlossen frei stehen */
  .kp-panel::before{
    content:""; position:absolute; inset:0 0 0 .5rem; z-index:-1; border-radius:1.2rem;
    background:rgba(24,23,30,.74); border:1px solid rgba(255,255,255,.1);
    box-shadow:0 30px 70px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
    -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
    opacity:0; transform:translateX(-12px) scale(.98); transform-origin:0 50%;
    transition:opacity .22s ease .2s, transform .35s var(--ease-out) .2s;
  }
  .kp-griff{display:block; position:absolute; left:0; top:0; bottom:0; width:2.9rem; pointer-events:auto}
  .kp-kopf{margin:0 0 .45rem 2.35rem; opacity:0; transition:opacity .2s ease .2s}
  .kp-liste li{opacity:1; transform:none; transition:none}
  .kp-liste a{min-height:1.9rem; gap:.75rem; padding:0 .5rem 0 0; border-radius:0; background:none; pointer-events:none}
  .kp-liste a.is-jetzt{background:none}
  .kp-strich{width:.85rem; margin-right:.5rem; background:rgba(236,237,242,.3)}
  .kp-liste a.is-jetzt .kp-strich{width:1.7rem; margin-right:-.35rem; background:rgba(254,121,113,.38); box-shadow:0 0 10px rgba(254,121,113,.45)}
  .kp-nr, .kp-titel{opacity:0; transform:translateX(-8px); transition:opacity .16s ease .2s, transform .3s var(--ease-out) .2s, color .2s ease}
  .kp-titel{font-size:.9rem; color:rgba(236,237,242,.78)}
  .kp-liste a.is-jetzt .kp-titel{color:#fff}

  /* offen: kurz verzögert (kein Aufklappen im Vorbeifahren), das Zuklappen
     wartet etwas länger, damit ein kleiner Schlenker nicht schliesst */
  .kapitel:is(:hover, :focus-within):not(.is-zu) .kp-panel{pointer-events:auto}
  .kapitel:is(:hover, :focus-within):not(.is-zu) .kp-liste a{pointer-events:auto}
  .kapitel:is(:hover, :focus-within):not(.is-zu) .kp-panel::before{opacity:1; transform:none; transition-delay:.07s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) .kp-kopf{opacity:1; transition-delay:.1s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) :is(.kp-nr, .kp-titel){opacity:1; transform:none; transition:opacity .3s ease, transform .45s var(--ease-out), color .2s ease}
  .kapitel:is(:hover, :focus-within):not(.is-zu) li:nth-child(1) :is(.kp-nr, .kp-titel){transition-delay:.08s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) li:nth-child(2) :is(.kp-nr, .kp-titel){transition-delay:.1s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) li:nth-child(3) :is(.kp-nr, .kp-titel){transition-delay:.12s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) li:nth-child(4) :is(.kp-nr, .kp-titel){transition-delay:.14s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) li:nth-child(5) :is(.kp-nr, .kp-titel){transition-delay:.16s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) li:nth-child(6) :is(.kp-nr, .kp-titel){transition-delay:.18s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) li:nth-child(7) :is(.kp-nr, .kp-titel){transition-delay:.2s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) li:nth-child(8) :is(.kp-nr, .kp-titel){transition-delay:.22s}
  .kapitel:is(:hover, :focus-within):not(.is-zu) .kp-strich{width:1.2rem; margin-right:.15rem}
  .kapitel:is(:hover, :focus-within):not(.is-zu) a.is-jetzt .kp-strich{width:1.7rem; margin-right:-.35rem}
  .kp-liste a:hover .kp-titel, .kp-liste a:focus-visible .kp-titel{color:#fff}
  .kp-liste a:hover .kp-strich{background:rgba(236,237,242,.75)}
  .kp-liste a.is-jetzt:hover .kp-strich{background:rgba(254,121,113,.45)}
  .kp-liste a:focus-visible{outline-offset:1px}
  /* Die Referenzapps auch geschlossen, als feinere Striche: So springt die
     Leiste beim Öffnen nicht, und man sieht, in welcher App man ist */
  .kp-unter{margin:0 0 .1rem}
  .kp-liste .kp-unter a{min-height:1.3rem; gap:.55rem; padding:0 .5rem 0 0}
  .kp-liste .kp-unter a.is-jetzt{background:none}
  .kp-liste .kp-unter .kp-strich{width:.42rem; height:1.5px; margin-left:.43rem; margin-right:.5rem; background:rgba(236,237,242,.2); transition:width .4s var(--ease-out), margin .4s var(--ease-out), background .25s ease}
  .kp-liste .kp-unter a.is-jetzt .kp-strich{width:.85rem; margin-left:0; background:rgba(254,121,113,.38); box-shadow:0 0 8px rgba(254,121,113,.4)}
  .kp-unter .kp-titel{font-size:.82rem; font-weight:520; color:rgba(236,237,242,.62)}
  .kapitel:is(:hover, :focus-within):not(.is-zu) .kp-liste .kp-unter .kp-strich{width:.42rem; margin-left:2.05rem; margin-right:.15rem}
  .kapitel:is(:hover, :focus-within):not(.is-zu) .kp-liste .kp-unter a.is-jetzt .kp-strich{width:.7rem; margin-left:1.9rem; margin-right:.02rem}
  .kapitel:is(:hover, :focus-within):not(.is-zu) .kp-unter li :is(.kp-nr, .kp-titel){transition-delay:.13s}
  .kp-unter a.is-jetzt .kp-titel{color:#fff}
  .kp-liste .kp-unter a:hover .kp-strich{background:rgba(236,237,242,.6)}
  /* nach dem Klick sofort zu, ohne das verzögerte Zuklappen */
  .kapitel.is-zu :is(.kp-panel::before, .kp-kopf, .kp-nr, .kp-titel){transition-delay:0s; transition-duration:.15s}
}

/* --- Schleier für weite Sprünge ------------------------------------------ */
.kp-schleier{
  position:fixed; inset:0; z-index:39; display:grid; place-items:center; pointer-events:none;
  background:radial-gradient(55% 50% at 50% 50%, rgba(254,121,113,.09), rgba(254,121,113,0) 72%), var(--bg);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease-in-out), visibility 0s linear .45s;
}
.kp-schleier.is-an{opacity:1; visibility:visible; transition:opacity .32s var(--ease-in-out)}
.kp-schleier-inhalt{display:grid; justify-items:center; gap:.75rem; padding:0 var(--pad); text-align:center}
.kp-schleier-nr{font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.24em; color:var(--coral)}
.kp-nb{white-space:nowrap}
.kp-schleier-titel{max-width:20ch; text-wrap:balance; font-size:clamp(2rem, 1.2rem + 2.8vw, 3.6rem); font-weight:760; letter-spacing:-.04em; line-height:1.04; color:var(--ink)}
.kp-schleier-linie{display:block; width:4.5rem; height:2px; margin-top:.35rem; border-radius:2px; background:var(--coral); transform:scaleX(0); transition:transform .3s ease}
.kp-schleier :is(.kp-schleier-nr, .kp-schleier-titel){opacity:0; transform:translateY(14px); transition:opacity .25s ease, transform .4s var(--ease-out)}
.kp-schleier.is-an :is(.kp-schleier-nr, .kp-schleier-titel){opacity:1; transform:none; transition:opacity .35s ease .06s, transform .6s var(--ease-out) .06s}
.kp-schleier.is-an .kp-schleier-titel{transition-delay:.11s}
.kp-schleier.is-an .kp-schleier-linie{transform:scaleX(1); transition:transform .9s var(--ease-out) .12s}
/* Mit Sprungmarke geöffnet (Link mit Code, /#preise): Der Schleier deckt ab
   dem ersten Bild, ohne Titel, bis das Skript die Seite an den Landepunkt
   gestellt hat (is-anflug, Skript „Ankunft"). Dann geht er schneller als
   nach einem Sprung (is-gelandet): Man soll gleich sehen, wofür man
   gekommen ist. Kommt das Skript nicht, geht er nach vier Sekunden von
   selbst. */
.is-anflug .kp-schleier{opacity:1; visibility:visible; transition:none; animation:anflug-aus .45s var(--ease-in-out) 4s forwards}
.is-gelandet .kp-schleier{transition:opacity .35s var(--ease-out), visibility 0s linear .35s}
@keyframes anflug-aus{to{opacity:0; visibility:hidden}}
[tabindex="-1"]:focus{outline:none}

/* --- Bühne ---------------------------------------------------------------
   Jedes Kapitel ist eine Sektion, so hoch wie sein Scrollweg; die Bühne
   darin klebt oben (sticky) und bleibt stehen, während darunter gescrollt
   wird. Das ist CSS, nicht GSAP-Pinning: Der Browser hält die Bühne selbst
   fest, auch am iPhone ohne Ruckeln beim Ein- und Ausfahren der
   Adressleiste. GSAP liest nur ab, wie weit gescrollt ist, und stellt die
   Zeitleiste auf diesen Punkt (siehe Skript, „Zeitleiste").

   --len ist der Scrollweg in vh. Mehr heisst langsamer, nicht länger zu
   sehen: Die Zeitleiste ist immer dieselbe, sie wird nur gestreckt.
   --tempo teilt die Scrollwege aller Kapitel: 2 heisst doppelt so schnell
   wie mit --len allein. So bleiben die Kapitel im gleichen Verhältnis
   zueinander, und das Tempo lässt sich an einer Stelle einstellen, auch
   nur für ein Format (etwa @media (pointer: coarse) fürs Handy).

   Überblendung: Jedes Kapitel ab dem zweiten rückt eine Bildschirmhöhe
   nach oben und liegt damit über dem Ende des vorigen. Sein Hintergrund
   ist am Anfang durchsichtig und blendet in den ersten Prozent seiner
   Zeitleiste ein – das alte Bild gleitet darunter weg und löst sich auf,
   statt dass ein schwarzer Streifen zwischen zwei Kapiteln durchscrollt.
   Bis ein Kapitel oben angekommen ist, bleibt seine Bühne ganz weg (das
   Skript setzt is-da): Sonst schöbe sie sich durchsichtig von unten über
   das Ende des vorigen Kapitels, mit allem, was darauf schon steht.
   Deckkraft statt visibility, damit Vorleseprogramme die Texte der späteren
   Kapitel trotzdem finden; Klicks gehen so lange durch sie hindurch.
   Auch die Sektion selbst nimmt keine Klicks an: Sie liegt eine
   Bildschirmhöhe lang unsichtbar über dem Ende der vorigen und fing dort
   sonst die Klicks auf deren Links ab (App öffnen bei Gripszug). Klickbar
   ist nur die Bühne, sobald sie da ist. */
:root{--tempo:2}
.story{position:relative; height:calc(100 * var(--svh) + var(--len, 400) / var(--tempo) * 1vh)}
#software{--len:959}
.js .story + .story{margin-top:calc(-100 * var(--svh)); pointer-events:none}
.js .story + .story .stage-bg{opacity:0}
.js .story + .story .stage{opacity:0; pointer-events:none}
.js .story + .story .stage.is-da{opacity:1; pointer-events:auto}
.stage{
  position:sticky; top:0; overflow:hidden;
  height:100vh; height:calc(100 * var(--svh));
  perspective:1700px;
  /* Masseinheit für die Zettel: quer an der Höhe gemessen, hoch an der
     Breite – so bleiben sie auf beiden Formaten ungefähr gleich gewichtig. */
  --u:min(1.25vw, 1.9vh);
}
@media (orientation: portrait){ .stage{--u:min(2.55vw, 1.55vh)} }

.stage-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(110% 85% at 68% 42%, #17161D 0%, var(--bg) 52%, var(--bg-deep) 100%);
}
/* Die Stimmung kippt mit der Geschichte: Szene 1 ist kalt, sobald Ordnung
   entsteht, kommt warmes Licht von unten dazu. Nur die Deckkraft dieser
   einen Fläche ändert sich – der Verlauf selbst wird nie neu gerechnet. */
.haze{
  position:absolute; inset:-10%; opacity:0; pointer-events:none; will-change:opacity;
  background:
    radial-gradient(42% 38% at 18% 96%, rgba(254,121,113,.22), transparent 70%),
    radial-gradient(48% 36% at 62% 88%, rgba(254,121,113,.13), transparent 72%);
}
.threads, .threads-glow{position:absolute; inset:0; width:100%; height:100%; z-index:1}
/* Das Leuchten der Fäden wird auf einer Fläche in Viertelgrösse gezeichnet
   und vom Browser weich hochgerechnet. Das kostet einen Sechzehntel der
   Bildpunkte und sieht aus wie ein Weichzeichner, der nichts kostet. */
.threads-glow{image-rendering:auto}

/* --- Texte ---------------------------------------------------------------- */
.scene{position:absolute; z-index:7; pointer-events:none}
.s1{left:var(--pad); top:calc(26 * var(--svh)); width:min(46rem, 50vw)}
.s2{left:var(--pad); right:var(--pad); top:calc(10.5 * var(--svh)); text-align:center}
.s2 .headline, .s2 .sub{margin-inline:auto}
.s2 .headline{max-width:30ch}
.s2 .sub{max-width:44ch}
.s3{left:var(--pad); top:calc(14.5 * var(--svh)); width:min(29rem, 34vw)}
@media (orientation: portrait){
  .s1{top:calc(13 * var(--svh)); right:var(--pad); width:auto}
  .s2{top:calc(10.5 * var(--svh))}
  .s2 .headline{max-width:18ch}
  .s3{top:calc(10.5 * var(--svh)); right:var(--pad); width:auto}
}
/* Der Anfangszustand der Story steht im CSS, nicht im Skript: Was erst
   später kommt, ist hier schon unsichtbar. GSAP setzt beim Neuberechnen
   (Fenstergrösse) seine Werte zurück und fällt dann genau hierauf zurück –
   stünde der Anfang nur im Skript, tauchten Texte und Kacheln kurz auf.
   Die Überschriften von Szene 2 und 3 bleiben verborgen, bis das Skript
   sie in Wörter aufgeteilt hat, sonst blitzten sie beim Laden auf. */
.js .s2 .headline, .js .s3 .headline{visibility:hidden}
.is-ready .s2 .headline, .is-ready .s3 .headline{visibility:inherit}
.js :is(.s2, .s3) :is(.w, .sub){opacity:0}

.display{
  margin:0; font-weight:760; letter-spacing:-.045em; line-height:.98;
  font-size:clamp(2.8rem, 1.2rem + 5.4vw, 6.4rem); text-wrap:balance;
}
.headline{
  margin:0; font-weight:730; letter-spacing:-.035em; line-height:1.03;
  font-size:clamp(2rem, 1.15rem + 3.3vw, 4.4rem); text-wrap:balance;
  max-width:18ch;
}
.hl{color:var(--coral)}
.sub{
  margin-top:1.25rem; max-width:34ch; color:var(--muted);
  font-size:clamp(1.05rem, .98rem + .45vw, 1.35rem); line-height:1.5; text-wrap:pretty;
}
/* Einzelne Wörter, damit sie gestaffelt kommen und gehen können */
.w{display:inline-block}

/* --- Zettel ----------------------------------------------------------------
   Drei Schichten pro Zettel: aussen bewegt ihn die Zeitleiste, in der
   Mitte die Maus (Parallaxe), innen das Schweben. So kommen sich die drei
   Bewegungen nie in die Quere. Grössen in --u, Schrift in cqw: Der Inhalt
   wächst und schrumpft mit dem Zettel, statt umzubrechen. */
.papers{position:absolute; inset:0; z-index:5; pointer-events:none}
/* Die Zettel stehen erst, wenn das Skript sie platziert hat – vorher lägen
   sie beim Laden für ein paar Bilder gestapelt oben links */
.js .papers{visibility:hidden}
.is-ready .papers{visibility:inherit}
.paper{position:absolute; left:0; top:0; container-type:inline-size; will-change:transform}
/* Mittlere und innere Schicht bekommen eine eigene Ebene: Sie bewegen sich
   in jedem Bild, und ohne eigene Ebene müsste der Browser dafür jedes Mal
   den ganzen Zettel samt weichem Schatten neu malen – bei 4K das, was
   Szene 1 ins Stocken brachte. */
.pp, .pf{width:100%; height:100%; will-change:transform}
.face{
  position:relative; width:100%; height:100%; overflow:hidden;
  font-size:10cqw; color:#2A2A33;
  box-shadow:0 22px 34px -16px rgba(0,0,0,.78), 0 4px 10px rgba(0,0,0,.35);
}
/* Licht von oben links, Schatten nach unten: Die Zettel liegen im selben
   Raum wie das Tablet und nicht als helle Flecken davor. */
.face::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,.16) 0%, transparent 38%, rgba(24,10,22,.24) 100%);
}
.hand{font-family:var(--hand); font-weight:600; line-height:1.02}

.paper--sticky{width:calc(var(--u) * 8.6); aspect-ratio:1}
.paper--sticky .face{
  padding:.95em .9em;
  background:linear-gradient(175deg, #FFD0DB, #FFB9CB 70%, #F7A8BD);
  border-radius:.15em .15em .45em .15em;
}
.paper--yellow .face{background:linear-gradient(175deg, #FFEEA0, #FFE171 70%, #F4D059)}
.paper--sticky .hand{font-size:1.72em}
.paper--sticky u{text-decoration-thickness:.07em; text-underline-offset:.14em; text-decoration-color:#C9435D}

.paper--note{width:calc(var(--u) * 10.6); aspect-ratio:.84}
.paper--note .pf{filter:drop-shadow(0 16px 16px rgba(0,0,0,.6))}
.paper--note .face{
  padding:1.2em .8em .8em 1.8em; box-shadow:none;
  background-color:#F6F4EE;
  background-image:repeating-linear-gradient(transparent 0 1.28em, #C5D3EA 1.28em calc(1.28em + 1px));
  background-position:0 1.02em;
  /* Abgerissene Oberkante */
  clip-path:polygon(0 2%, 6% 0, 12% 2.2%, 19% .4%, 26% 2%, 33% 0, 41% 2.4%, 48% .5%, 56% 2%, 63% 0, 71% 2.2%, 79% .4%, 86% 2%, 93% 0, 100% 1.6%, 100% 100%, 0 100%);
}
.paper--note .face::before{content:""; position:absolute; left:1.3em; top:0; bottom:0; width:1px; background:#EFA3A3}
.paper--note .hand{font-size:1.36em; line-height:.94; color:#27408B}
.paper--note .strike{text-decoration:line-through; text-decoration-color:#C0392B; text-decoration-thickness:.08em; color:#4A5A8C}

.paper--card{width:calc(var(--u) * 10.8); aspect-ratio:1.5}
.paper--card .face{
  padding:.75em 1em; border-radius:.2em;
  background-color:#E8F0FD;
  background-image:
    linear-gradient(#E27A7A, #E27A7A),
    repeating-linear-gradient(transparent 0 1.18em, #BBCFEE 1.18em calc(1.18em + 1px));
  background-size:100% 1px, 100% 100%;
  background-position:0 1.75em, 0 1.75em;
  background-repeat:no-repeat;
}
.paper--card .hand{font-size:1.46em; line-height:1.08}

.paper--xls{width:calc(var(--u) * 17.5); aspect-ratio:1.62}
.paper--xls .face{background:#FFFFFF; border-radius:.25em; font-family:var(--font)}
.xls-bar{
  display:flex; align-items:center; gap:.45em;
  height:3em; padding:0 .9em; font-size:.4em; font-weight:600;
  background:#1D6F42; color:#FFFFFF; white-space:nowrap; overflow:hidden;
}
.xls-bar b{
  display:grid; place-items:center; width:1.5em; height:1.5em; border-radius:.2em;
  background:#FFFFFF; color:#1D6F42; font-size:.9em;
}
.xls-grid{display:grid; grid-template-columns:1.7em repeat(4, 1fr); font-size:.36em; color:#333}
.xls-grid span{
  padding:.28em .45em; line-height:1.5; white-space:nowrap; overflow:hidden;
  border-right:1px solid #E1E1E1; border-bottom:1px solid #E1E1E1; position:relative;
}
.xls-grid .h{background:#F3F3F3; color:#777; text-align:center; padding-inline:0}
.xls-grid .err{color:#C00000; background:#FDECEC; font-weight:700}
/* Das grüne Dreieck, mit dem Excel eine verdächtige Zelle markiert */
.xls-grid .warn::before{
  content:""; position:absolute; left:0; top:0;
  border-top:.5em solid #1E8E3E; border-right:.5em solid transparent;
}

.paper--print{width:calc(var(--u) * 11.4); aspect-ratio:.77}
.paper--print .face{padding:1em .9em; background:#F1EFEA}
.print-h{font-family:var(--mono); font-size:.5em; font-weight:700; letter-spacing:.06em; margin:0 0 .9em; color:#333}
.print-l{list-style:none; margin:0; padding:0; font-family:var(--mono); font-size:.44em; line-height:2.05; color:#444}
.print-l li{border-bottom:1px dashed #CFCBC2; position:relative}
.print-l .tick::after{
  content:""; position:absolute; right:.5em; top:.35em; width:.45em; height:.85em;
  border-right:.16em solid #2B4C9A; border-bottom:.16em solid #2B4C9A; transform:rotate(40deg);
}
.print-ring{
  position:absolute; right:-1.2em; bottom:.8em; width:4.4em; height:4.4em; border-radius:50%;
  border:.3em solid rgba(125,82,40,.30);
  box-shadow:inset 0 0 .5em rgba(125,82,40,.18), 0 0 .3em rgba(125,82,40,.14);
}
.print-q{position:absolute; left:.9em; bottom:.55em; font-size:1.25em; color:#C0392B; transform:rotate(-6deg)}

/* --- Tablet ----------------------------------------------------------------
   Die Lage ohne Transformation ist die flache Pose aus Szene 2: mittig,
   frontal, unter der Überschrift. Alle anderen Posen sind Transformationen
   davon. Deshalb kann das Skript die Kacheln im Bildschirm mit offsetLeft
   und offsetTop vermessen, egal wie das Tablet gerade gedreht ist. */
.device{
  --da:1.43;
  --dw:min(54vw, calc(56 * var(--svh) * 1.43));
  --dt:calc(36 * var(--svh));
  position:absolute; z-index:4;
  left:calc(50% - var(--dw) / 2); top:var(--dt);
  width:var(--dw); height:calc(var(--dw) / var(--da));
  transform-style:preserve-3d; will-change:transform;
}
@media (orientation: portrait){
  .device{--da:.74; --dw:min(84vw, calc(51 * var(--svh) * .74)); --dt:calc(38.5 * var(--svh))}
}
.device-tilt{position:relative; width:100%; height:100%; transform-style:preserve-3d}
/* Das Licht, das der Bildschirm auf den Tisch wirft. Ein vorgerechneter
   Verlauf statt filter:blur() – ein Weichzeichner dieser Grösse kostet
   Safari bei jedem Bild spürbar Zeit. */
.device-glow{
  position:absolute; left:-14%; right:-14%; top:35%; bottom:-34%; pointer-events:none;
  background:radial-gradient(50% 42% at 50% 60%, rgba(254,121,113,.32), rgba(254,121,113,.08) 55%, transparent 72%);
}
.device-body{
  position:absolute; inset:0; border-radius:calc(var(--dw) * .047);
  background:linear-gradient(150deg, #36373E 0%, #17171C 20%, #0D0D11 62%, #1D1E23 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 1.5px 0 rgba(255,255,255,.14),
    0 0 0 1px rgba(0,0,0,.7),
    0 60px 90px -40px rgba(0,0,0,.9),
    -24px 30px 70px -34px rgba(254,121,113,.42);
}
.device-cam{
  position:absolute; left:50%; top:calc(var(--dw) * .0092);
  width:calc(var(--dw) * .0062); height:calc(var(--dw) * .0062);
  margin-left:calc(var(--dw) * -.0031); border-radius:50%;
  background:#26262C; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.device-screen{
  position:absolute; inset:calc(var(--dw) * .021);
  border-radius:calc(var(--dw) * .027); overflow:hidden;
  container-type:inline-size;
}
.screen-bg{position:absolute; inset:0; background:#F4F3F0}
.screen-glare{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 30%);
}

/* --- Dashboard -------------------------------------------------------------
   Gebaut in einer festen Bildschirmauflösung: quer 1180 px breit, hoch
   820 px. 1em sind dort 10 px, alles darin ist in em. Die Schriftgrösse
   folgt der Bildschirmbreite (cqw), das Dashboard wird also als Ganzes
   grösser und kleiner wie ein echter Bildschirm und bricht nie um.
   Regel: Behälter setzen keine eigene Schriftgrösse, nur Textblätter –
   sonst multiplizieren sich die em. Die Inhalte sind erfunden: eine
   Schreinerei, deren Zahlen zueinander passen (August × 1,12 = September). */
.app{
  position:absolute; inset:0; font-size:calc(100cqw / 118);
  display:grid; grid-template-columns:19.5em 1fr;
  color:#16181D; line-height:1.3; font-family:var(--font);
}
.app p{margin:0}
.app-side{
  background:#16171C; color:#AEB4BF;
  padding:2.6em 1.7em 2.2em; display:flex; flex-direction:column;
}
.app-logo{display:flex; align-items:center; gap:.9em; padding:0 .6em; margin-bottom:2.6em}
.app-logo svg{width:3em; height:2.2em; flex:none}
.app-logo b{font-size:1.75em; color:#F2F3F6; letter-spacing:-.02em}
.app-nav{display:grid; gap:.35em}
.app-nav span{
  position:relative; display:flex; align-items:center; gap:.85em;
  padding:.85em .95em; border-radius:.75em; font-size:1.34em; color:#AEB4BF;
}
.app-nav .is-on{background:rgba(254,121,113,.14); color:#FF968E}
.ic{flex:none; width:1.05em; height:1.05em; border:.13em solid currentColor; border-radius:.3em; opacity:.85}
.ic--round{border-radius:50%}
.app .app-host{
  position:relative; margin-top:auto; display:flex; align-items:center; gap:.7em;
  padding:0 .8em; font-size:1.12em; color:#8C93A0;
}
.ok{flex:none; width:.62em; height:.62em; border-radius:50%; background:#3DDC97; box-shadow:0 0 0 .3em rgba(61,220,151,.16)}
.app-user{display:flex; align-items:center; gap:.9em; margin-top:1.5em; padding:1.3em .8em 0; border-top:1px solid rgba(255,255,255,.07)}
.app-user b{display:block; font-size:1.2em; color:#E9EBEF}
.app-user small{display:block; font-size:1.02em; color:#8C93A0}
.av{
  flex:none; display:grid; place-items:center; width:3.3em; height:3.3em; border-radius:50%;
  font-style:normal; font-size:1.05em; font-weight:700; background:#2A2C33; color:#E9EBEF;
}
.av-top{display:none}

.app-main{padding:2.6em 2.8em 2.6em; display:grid; grid-template-rows:auto auto 1fr auto; gap:1.9em; min-height:0}
.app-top{display:flex; align-items:center; justify-content:space-between}
.app-h{font-size:2.55em; font-weight:760; letter-spacing:-.03em; line-height:1.1}
.app-date{font-size:1.28em; color:#7A808B; margin-top:.25em}
.app-tools{display:flex; align-items:center; gap:1.2em}
.app-search{
  display:flex; align-items:center; gap:.8em; width:23em; height:4em; padding:0 1.4em;
  border-radius:2em; background:#FFFFFF; box-shadow:0 0 0 1px #E6E3DD; color:#A0A5AE;
}
.app-search span{font-size:1.2em}
.app-bell{position:relative; width:4em; height:4em; border-radius:50%; background:#FFFFFF; box-shadow:0 0 0 1px #E6E3DD}
.app-bell::after{content:""; position:absolute; right:1.05em; top:1em; width:.8em; height:.8em; border-radius:50%; background:#FE7971; box-shadow:0 0 0 .22em #FFFFFF}
.app-tabs{display:none}
.app-tabs span{position:relative; font-size:1.35em; padding:.55em 1.1em; border-radius:2em; color:#6B717C; background:#FFFFFF; box-shadow:0 0 0 1px #E6E3DD}
.app-tabs .is-on{background:#16181D; color:#FFFFFF; box-shadow:none}

.app-kpis{position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:1.8em}
.app-card{
  position:relative; min-width:0; padding:1.8em 2em;
  background:#FFFFFF; border-radius:1.6em;
  box-shadow:0 0 0 1px #ECE9E3, 0 .7em 1.8em -1em rgba(20,22,28,.2);
}
.kpi p{font-size:1.24em; color:#7A808B; white-space:nowrap}
.kpi b{
  display:block; margin:.22em 0 .18em; font-size:3.05em; font-weight:760;
  letter-spacing:-.03em; line-height:1.12; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kpi small{display:block; font-size:1.1em; color:#7A808B; white-space:nowrap}
.kpi small.up{color:#1F9D63}

.app-row{display:grid; grid-template-columns:1.75fr 1fr; gap:1.8em; min-height:0}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.3em}
.card-head p{font-size:1.45em; font-weight:720}
.legend{display:flex; gap:1.4em; font-size:1.08em; color:#7A808B}
.legend span{display:flex; align-items:center; gap:.45em}
.legend i{width:.8em; height:.8em; border-radius:.22em}
.l26{background:#F4675F}
.l25{background:#DDD9D2}
.link-txt{font-size:1.15em; color:#E0564E; font-weight:650}
.chart{display:flex; flex-direction:column}
.plot{flex:1; display:grid; grid-template-columns:auto 1fr; gap:1.2em; min-height:0}
.axis{display:flex; flex-direction:column; justify-content:space-between; padding-bottom:2.3em; text-align:right}
.axis span{font-size:1.02em; color:#A0A5AE; line-height:1; transform:translateY(-.5em)}
.axis span:last-child{transform:translateY(.5em)}
.bars{
  display:grid; grid-template-columns:repeat(9, 1fr); gap:1.1em; min-height:0;
  /* Hilfslinien bei 0, 20k, 40k und 60k: vier Linien, drei gleiche Abstände */
  background:
    linear-gradient(#ECE9E3, #ECE9E3) 0 0 / 100% 1px no-repeat,
    linear-gradient(#ECE9E3, #ECE9E3) 0 calc((100% - 2.3em) / 3) / 100% 1px no-repeat,
    linear-gradient(#ECE9E3, #ECE9E3) 0 calc((100% - 2.3em) / 3 * 2) / 100% 1px no-repeat,
    linear-gradient(#D9D5CE, #D9D5CE) 0 calc(100% - 2.3em) / 100% 1px no-repeat;
}
.m{display:grid; grid-template-rows:1fr 2.3em; min-height:0}
.col{display:flex; align-items:flex-end; gap:.3em; min-height:0}
.col i{flex:1; height:calc(var(--h) * 100%); border-radius:.45em .45em .12em .12em; transform-origin:50% 100%}
.b25{background:#DDD9D2}
.b26{background:linear-gradient(#FF8C84, #EF5D55)}
.m span{align-self:end; text-align:center; font-size:1.02em; color:#A0A5AE; line-height:1}

.donut{display:flex; flex-direction:column; align-items:center; text-align:center}
.donut-h{align-self:stretch; text-align:left; font-size:1.45em; font-weight:720}
.ring{position:relative; width:14.5em; height:14.5em; margin:1.5em 0 1em}
.ring svg{width:100%; height:100%}
.ring circle{fill:none; stroke-width:10}
.track{stroke:#F0EDE7}
.arc{stroke:#FE7971; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:14; transform:rotate(-90deg); transform-origin:50% 50%}
.ring b{position:absolute; inset:0; display:grid; place-items:center; font-size:3em; font-weight:760; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.donut small{font-size:1.15em; color:#7A808B}

.table{padding-bottom:1.2em}
.tr{display:grid; grid-template-columns:1.6fr 1.2fr 1fr .9fr; align-items:center; gap:1em; padding:.8em 0; border-top:1px solid #F0EDE7}
.tr{overflow:hidden}
.tr > span{font-size:1.24em; display:flex; align-items:center; gap:.7em; white-space:nowrap; overflow:hidden}
.tr .av{width:2.4em; height:2.4em; font-size:.82em; background:#EFEDE8; color:#59606B}
.th{border-top:0; padding-top:0}
.th > span{font-size:1em; text-transform:uppercase; letter-spacing:.07em; color:#9AA0AA; font-weight:650}
.st{font-style:normal; padding:.28em .8em; border-radius:1em; font-size:.88em; font-weight:680}
.st-work{background:#FFF1D6; color:#98690A}
.st-offer{background:#E4EEFF; color:#2E5BBA}
.st-new{background:#FFE3E1; color:#C8423A}
.st-done{background:#DDF5E9; color:#1C8A57}
.app .app-host--foot{display:none}
/* Meldung in Szene 3: Die App arbeitet, während man hinschaut. Sie ist nie
   ohne Skript zu sehen, darum ist sie auch im CSS von Anfang an aus. */
.app-toast{
  position:absolute; right:2.8em; top:2.2em; z-index:2; opacity:0;
  display:flex; align-items:center; gap:1.1em; padding:1.1em 1.8em 1.1em 1.1em;
  background:#16181D; color:#FFFFFF; border-radius:1.3em;
  box-shadow:0 1.4em 3em -1em rgba(10,10,14,.5), 0 0 0 1px rgba(255,255,255,.06);
}
.app-toast b{display:block; font-size:1.3em; font-weight:700}
.app-toast small{display:block; font-size:1.1em; color:#AEB4BF; margin-top:.15em}
.chk{position:relative; flex:none; width:3em; height:3em; border-radius:50%; background:#1F9D63}
.chk::after{
  content:""; position:absolute; left:1.1em; top:.72em; width:.7em; height:1.25em;
  border-right:.28em solid #FFFFFF; border-bottom:.28em solid #FFFFFF; transform:rotate(42deg);
}
.js :is(.app [data-slot], .app-chrome, .screen-bg, .device-body, .device-glow, .screen-glare){opacity:0}
.js .col i{transform:scaleY(0)}
.js .arc{stroke-dashoffset:100}

/* Verankerungen der Hinweislinien aus Szene 3: unsichtbare Punkte, deren
   Lage das Skript bei jedem Bild abfragt – auch wenn das Tablet gedreht
   ist. Alle sitzen am linken Rand ihres Bausteins, von oben nach unten in
   der Reihenfolge der Hinweise. So bleiben die Linien kurz und kreuzen
   sich nie. Hoch gibt es keine Linien, nur die vier Punkte als Chips. */
.anchor{position:absolute; width:2px; height:2px; pointer-events:none}
.app-nav .anchor{left:.2em; top:50%}
.app-kpis > .anchor{left:-.1em; top:50%}
.chart > .anchor{left:-.1em; top:48%}
.app-side > .app-host .anchor{left:-.1em; top:50%}

@media (orientation: portrait){
  .app{font-size:calc(100cqw / 82); grid-template-columns:1fr; grid-template-rows:auto 1fr}
  .app-side{flex-direction:row; align-items:center; padding:2.2em 3em}
  .app-logo{margin:0; flex:1}
  .av-top{display:grid; margin-left:auto}
  .app-nav, .app-side > .app-host, .app-user{display:none}
  .app-main{padding:2.4em 3em 2.6em; grid-template-rows:auto auto auto 1fr auto auto; gap:1.8em}
  .app-tools{display:none}
  .app-tabs{position:relative; display:flex; gap:.8em}
  .app-kpis{grid-template-columns:1fr 1fr; gap:1.6em}
  .app-row{grid-template-columns:1fr}
  .donut{display:none}
  .table .tr:nth-child(n+6){display:none}
  .app .app-host--foot{display:flex; margin:0; padding:0}
  .app-toast{top:9.5em; right:3em}
}

/* --- Kapitel 2: Neuer Webauftritt -------------------------------------------
   Im Bildschirm des Tablets liegen über dem Dashboard zwei Websites derselben
   (erfundenen) Schreinerei: die alte von 2009 und die neue. Beide sind wie
   das Dashboard in fester Auflösung gebaut, 1em = 10 px, und wachsen als
   Ganzes mit dem Gerät. Die Verwandlung rechnet das Skript: Paare mit
   gleichem data-m wandern von der alten an die neue Stelle. */
.nav-neu{
  margin-left:auto; min-width:1.7em; height:1.7em; padding:0 .45em; border-radius:.85em;
  background:#FE7971; color:#22100F; font:800 .82em/1.7em var(--font); font-style:normal; text-align:center;
}
.js .nav-neu{opacity:0}
.via{font-style:normal; padding:.25em .7em; border-radius:1em; background:#EAF0FF; color:#3558C9; font-size:.9em; font-weight:680}
.tr-neu{background:linear-gradient(90deg, rgba(254,121,113,.09), rgba(254,121,113,0) 70%)}
.js .tr-neu{max-height:0; padding-block:0; border-top-width:0; opacity:0; overflow:hidden}
.app-toast--web{top:auto; bottom:2.4em}
.chk--web{background:#3558C9}

.web{position:absolute; inset:0; overflow:hidden; font-size:calc(100cqw / 118); line-height:1.3}
@media (orientation: portrait){ .web{font-size:calc(100cqw / 82)} }
.js .web{opacity:0; visibility:hidden}
.web p{margin:0}

/* Die alte Website: feste Breite, graue Ränder, Laufschrift, Zähler */
/* Der Grund darunter ist schon der der neuen Seite: Verwandelt sich die
   Seite, blenden nur das graue Muster und das Papier aus. */
.web-alt{background:#F6F2EC; font-family:"Times New Roman", Times, serif; color:#111}
.wa-grund{position:absolute; inset:0; background:#C5CED8 repeating-linear-gradient(45deg, rgba(255,255,255,.2) 0 .5em, rgba(255,255,255,0) .5em 1em)}
.wa-seite{position:absolute; z-index:0; left:calc(50% - 41em); top:0; width:82em}
.wa-papier{position:absolute; inset:0; z-index:-1; background:#FFFFF6; box-shadow:0 0 0 .1em #7F8B99}
.js .web-alt :is(.wa-kopf, .wa-nav, .wa-lauf, .wa-box-h, .wa-menu, .wa-willkommen, .wa-bild, .wa-text, .wa-mail, .wa-zaehler, .wa-bau, .wa-aktuell, .wa-refs, .wa-fuss){opacity:0}
.wa-kopf{position:relative; height:10.4em; padding:1.7em 2.4em 0; background:linear-gradient(#8C5B33, #5B381C); border-bottom:.3em solid #3A2310; overflow:hidden}
.wa-kopf::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(176deg, rgba(0,0,0,0) 0 1.1em, rgba(0,0,0,.13) 1.1em 1.25em)}
.wa-titel{position:relative; z-index:1; display:block; font:italic 700 4.8em/1 Georgia, "Times New Roman", serif; color:#FFE5A3; text-shadow:.04em .05em 0 #2A160A, .08em .1em .12em rgba(0,0,0,.45)}
.wa-slogan{position:relative; z-index:1; display:block; margin-top:.55em; font:italic 1.75em/1 "Times New Roman", serif; color:#F4E3C6}
.wa-nav{padding:.5em 2.4em; background:linear-gradient(#F6F6F6, #D6D6D6); border-bottom:.1em solid #999; font:1.35em/1.3 Verdana, Geneva, sans-serif; color:#444; white-space:nowrap}
.wa-nav u{color:#0000EE}
.wa-lauf{height:2.6em; overflow:hidden; background:#FFFF99; border-bottom:.1em solid #CCCC33; white-space:nowrap; font:700 1.3em/2em Verdana, Geneva, sans-serif; color:#CC0000}
.wa-lauf span{display:inline-block; padding-left:100%; animation:wa-lauf 16s linear infinite}
@keyframes wa-lauf{to{transform:translateX(-100%)}}
.wa-inhalt{display:grid; grid-template-columns:19em 1fr; gap:2.2em; padding:2em 2.4em 1.4em}
.wa-box-h{padding:.3em .7em; background:#5B381C; color:#FFF; font:700 1.3em/1.4 Verdana, Geneva, sans-serif}
.wa-menu{margin:0 0 1.6em; padding:.7em 1em .7em 2.6em; background:#F2EADC; border:.1em solid #C9B79C; font:1.55em/1.75 "Times New Roman", serif; color:#0000EE; text-decoration:underline; list-style:square}
.wa-zaehler{margin-bottom:1.5em; font:1.25em/1.5 Verdana, Geneva, sans-serif; text-align:center; color:#333}
.wa-zaehler span{display:inline-block; width:1.25em; margin:.25em .06em 0; background:#000; color:#39FF39; font:700 1.15em/1.45 "Courier New", Courier, monospace}
.wa-bau{padding:.55em .4em; text-align:center; font:700 1.15em/1.2 Verdana, Geneva, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#FFF; text-shadow:0 0 .2em #000, 0 0 .2em #000;
  background:repeating-linear-gradient(-45deg, #F2C200 0 .8em, #1A1A1A .8em 1.6em); border:.15em solid #1A1A1A}
.wa-willkommen{margin-bottom:.7em; text-align:center; font:700 2.9em/1.12 "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive; color:#CC0000}
.wa-bild{float:left; width:25em; height:15em; margin:.3em 2em .8em 0; border:.45em ridge #B89E78; background:#6B4C33}
.wa-bild i{display:block; width:100%; height:100%; background-size:100% 100%; image-rendering:pixelated; image-rendering:crisp-edges}
.wa-text{font:1.75em/1.45 "Times New Roman", Times, serif}
.wa-mail{margin-top:.8em; font:1.6em/1.3 "Times New Roman", Times, serif; color:#0000EE}
.wa-aktuell{margin-top:1.6em; padding:.7em .8em; border:.1em dashed #CC0000; background:#FFF3F0; font:1.2em/1.35 Verdana, Geneva, sans-serif; color:#333}
.wa-aktuell b{color:#CC0000}
.wa-refs{clear:both; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2em; padding-top:1.8em}
.wa-refs-h{grid-column:1 / -1; font:700 1.6em/1.2 "Times New Roman", Times, serif; text-decoration:underline}
.wa-refs span{display:block; font:1.3em/1.3 "Times New Roman", Times, serif; color:#0000EE; text-decoration:underline; text-align:center}
.wa-refs i{display:block; height:6.2em; margin-bottom:.35em; border:.3em ridge #B89E78; background-size:100% 100%; image-rendering:pixelated; image-rendering:crisp-edges}
.wa-refs span:nth-of-type(2) i{filter:hue-rotate(-18deg) saturate(.7) brightness(1.15)}
.wa-refs span:nth-of-type(3) i{filter:sepia(.4) brightness(.9); transform:scaleX(-1)}
.wa-fuss{clear:both; padding:1em 2.4em 1.4em; border-top:.1em solid #CCC; font:1.05em/1.4 Arial, Helvetica, sans-serif; color:#777; text-align:center}
@media (orientation: portrait){ .wa-seite{left:0} }

/* Die neue Website */
.web-neu{font-family:var(--font); color:#1E1914}
.wn-grund{position:absolute; inset:0; background:#F6F2EC}
.wn-nav{position:absolute; left:4em; right:4em; top:2.4em; height:5.4em; display:flex; align-items:center; gap:3.2em}
.wn-logo{margin-right:auto; display:flex; align-items:center; gap:.6em; font-size:2em; letter-spacing:-.025em; white-space:nowrap}
.wn-logo i{width:1.45em; height:1.45em; border-radius:.42em; background:linear-gradient(135deg, #D39A63, #8A5A32); box-shadow:inset 0 0 0 .1em rgba(255,255,255,.28)}
.wn-logo b{font-weight:800}
.wn-logo span{font-weight:450; color:#7C6B5A}
.wn-links{display:flex; gap:2.6em; font-size:1.5em; font-weight:560; color:#3A322B; white-space:nowrap}
.wn-knopf{padding:.8em 1.5em; border-radius:2em; background:#1E1914; color:#FFF; font-size:1.4em; font-weight:680; white-space:nowrap}
.wn-burger{display:none}
.wn-hero{position:absolute; left:4em; right:4em; top:10.4em; height:46em}
.wn-bild{position:absolute; inset:0; border-radius:2.8em; overflow:hidden; background:radial-gradient(85% 100% at 78% 38%, #80522E 0%, #3F2817 52%, #1B120B 100%)}
.wn-bild::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(97deg, rgba(255,236,210,.05) 0 .3em, rgba(255,236,210,0) .3em 1.9em)}
.wn-faeden, .wn-faeden-glow{position:absolute; inset:0; width:100%; height:100%}
.wn-text{position:absolute; left:5em; top:7em; width:56em; color:#FFF}
.wn-kicker{margin-bottom:1.5em; font-family:var(--mono); font-size:1.25em; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#F4BD84}
.wn-titel{font-size:7.2em; font-weight:780; letter-spacing:-.045em; line-height:1; white-space:nowrap}
.wn-sub{margin-top:1.1em; max-width:30em; font-size:1.8em; line-height:1.45; color:#EDDFCC}
.wn-ctas{margin-top:2.4em; display:flex; gap:1.2em; white-space:nowrap}
.wn-cta, .wn-cta2{padding:.95em 1.6em; border-radius:2em; font-size:1.55em; font-weight:700}
.wn-cta{position:relative; background:#FE7971; color:#22100F}
.wn-cta2{box-shadow:inset 0 0 0 .1em rgba(255,255,255,.42); color:#FFF; font-weight:600}
.wn-chip{position:absolute; right:3.4em; top:3.4em; padding:.8em 1.2em; border-radius:1.4em; background:rgba(22,14,8,.5); box-shadow:inset 0 0 0 .08em rgba(255,255,255,.18); color:#F4ECE2; font-size:1.4em; white-space:nowrap}
.wn-chip b{color:#FFD58A; margin-right:.3em}
.wn-chip--frei{top:auto; bottom:3.4em; display:flex; align-items:center; gap:.6em}
.wn-chip--frei i{width:.6em; height:.6em; border-radius:50%; background:#3DDC97; box-shadow:0 0 0 .3em rgba(61,220,151,.22); animation:wn-puls 2s ease-in-out infinite}
@keyframes wn-puls{50%{box-shadow:0 0 0 .55em rgba(61,220,151,0)}}
.wn-karten{position:absolute; left:4em; right:4em; top:59.4em; height:17.6em; display:grid; grid-template-columns:repeat(3, 1fr); gap:2em}
.wn-karte{position:relative; border-radius:2em; background:#FFF; padding:2.2em; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:0 .1em 0 #E6DCCD, 0 1.6em 3.2em -1.8em rgba(70,44,20,.45)}
.wn-karte i{position:absolute; left:2.2em; top:2.2em; width:4.6em; height:4.6em; border-radius:1.3em; background:#F3E6D5}
.wn-karte i::after{content:""; position:absolute; inset:1.1em; border-radius:.35em; border:.3em solid #B0733F}
.wn-karte--schrank i::after{border-radius:.2em; inset:1em 1.3em; border-width:.3em .3em .3em .3em; box-shadow:inset .9em 0 0 -.62em #B0733F}
.wn-karte--moebel i::after{inset:1.6em 1em 1em; border-radius:.3em .3em .1em .1em}
.wn-karte b{font-size:2em; font-weight:760; letter-spacing:-.02em}
.wn-karte small{margin-top:.35em; font-size:1.35em; color:#7C6B5A}
.wn-anfrage{position:absolute; right:4em; top:10.4em; width:40em; height:46em; padding:3.4em 3.2em; border-radius:2.6em; background:#FFF; box-shadow:0 0 0 .1em #EADFCF, 0 3em 6em -2.4em rgba(40,24,10,.55); overflow:hidden}
.wn-anfrage-h{margin-bottom:1.2em; font-size:2.7em; font-weight:780; letter-spacing:-.03em}
.wn-feld{margin-bottom:1.8em}
.wn-feld small{display:block; margin-bottom:.55em; font-size:1.3em; font-weight:600; color:#7C6B5A}
.wn-feld p{height:3em; padding:0 .9em; border-radius:.8em; box-shadow:inset 0 0 0 .12em #E3D7C6; font-size:1.6em; line-height:3em; white-space:nowrap; overflow:hidden}
.wn-senden{margin-top:2.6em; height:3.2em; border-radius:1.6em; display:grid; place-items:center; background:#FE7971; color:#22100F; font-size:1.6em; font-weight:760}
.wn-gesendet{position:absolute; inset:0; display:grid; place-items:center; background:#FFF; color:#1C8A57; font-size:2.6em; font-weight:780}
.wn-zeiger{position:absolute; left:0; top:0; z-index:5; width:3.4em; height:3.4em; fill:#FFF; stroke:#15110D; stroke-width:1.5; stroke-linejoin:round; overflow:visible}
.js .web-neu :is(.wn-grund, [data-m], .wn-knopf, .wn-kicker, .wn-chip--frei, .wn-burger, .wn-zeiger, .wn-gesendet){opacity:0}
.js .wn-anfrage{visibility:hidden}
@media (orientation: portrait){
  .wn-nav{left:3.2em; right:3.2em; top:2.2em; height:5em; gap:0}
  .wn-links, .wn-knopf{display:none}
  .wn-burger{display:grid; gap:.5em; width:4.4em; height:4.4em; place-content:center; border-radius:1.2em; background:#EFE7DB}
  .wn-burger i{display:block; width:1.9em; height:.25em; border-radius:.2em; background:#1E1914}
  .wn-hero{left:3.2em; right:3.2em; top:9.6em; height:62em}
  .wn-text{left:4em; right:4em; top:6em; width:auto}
  .wn-titel{font-size:6.6em; white-space:normal}
  .wn-sub{font-size:1.9em}
  .wn-ctas{flex-direction:column; align-items:flex-start}
  .wn-chip{top:auto; bottom:9em; right:auto; left:4em}
  .wn-chip--frei{bottom:4em}
  .wn-karten{left:3.2em; right:3.2em; top:74.4em; height:34em; grid-template-columns:1fr 1fr}
  .wn-karte--moebel{display:none}
  .wn-anfrage{left:3.2em; right:3.2em; top:auto; bottom:3.2em; width:auto; height:48em}
}

/* Das Signet auf Glas, zum Schluss mitten im Bildschirm (wie in den Vorlagen) */
.screen-badge{
  position:absolute; left:50%; top:50%; z-index:3; translate:-50% -50%;
  display:flex; align-items:center; gap:1.7em; padding:2.3em 3.4em 2.3em 2.7em; border-radius:2.6em;
  font-size:calc(100cqw / 118); white-space:nowrap;
  background:rgba(26,25,32,.66); -webkit-backdrop-filter:blur(1.2em) saturate(1.4); backdrop-filter:blur(1.2em) saturate(1.4);
  box-shadow:0 0 0 .1em rgba(255,255,255,.16), inset 0 .1em 0 rgba(255,255,255,.14), 0 3em 6em -2em rgba(0,0,0,.6);
}
@media (orientation: portrait){ .screen-badge{font-size:calc(100cqw / 90)} :root{--gz-bild:0% 50%} }
.js .screen-badge{opacity:0}
.screen-badge svg{width:6.8em; height:auto; flex:none}
.screen-badge b{display:block; font-size:4.6em; font-weight:760; letter-spacing:-.035em; line-height:1; color:#ECEDF2}
.screen-badge small{display:block; margin-top:.7em; font-family:var(--mono); font-size:1.3em; letter-spacing:.17em; text-transform:uppercase; color:#AEB4BF}
/* Zum Schluss das Bild der ersten Referenz, so beschnitten wie im Gerät von
   Gripszug, das ab dem nächsten Kapitel übernimmt (Skript, „uebergabe").
   Ab dort ist dieses Tablet unsichtbar – dasselbe Bild steht an derselben
   Stelle im Kapitel darüber. */
.screen-next{position:absolute; inset:0; z-index:4; width:100%; height:100%; object-fit:cover; object-position:var(--gz-bild, 18% 50%); opacity:0; pointer-events:none}
#software.is-weiter .device{visibility:hidden}

/* Texte links (quer) bzw. oben (hoch), wie in Szene 3 */
.anker{position:absolute; left:0; top:calc((100% - 100 * var(--svh)) * .505); width:1px; height:1px; pointer-events:none}
.anker-alt{position:absolute; left:0; top:0; width:1px; height:1px; pointer-events:none}
.w-kicker{position:absolute; z-index:7; left:var(--pad); top:calc(14.5 * var(--svh) - 2.3rem); margin:0; pointer-events:none}
.s5, .s6, .s7{left:var(--pad); top:calc(14.5 * var(--svh)); width:min(29rem, 34vw)}
.js .w-kicker{opacity:0}
.js :is(.s5, .s6, .s7) .headline{visibility:hidden}
.is-ready :is(.s5, .s6, .s7) .headline{visibility:inherit}
.js :is(.s5, .s6, .s7) :is(.w, .sub){opacity:0}
@media (orientation: portrait){
  /* auf kleinen Handys nicht unter die Kopfzeile */
  .w-kicker{top:max(4.1rem, calc(10.5 * var(--svh) - 1.9rem))}
  .s5, .s6, .s7{top:max(6rem, calc(10.5 * var(--svh))); right:var(--pad); width:auto}
}

/* --- Plakette -------------------------------------------------------------
   Das Logo auf Milchglas, wie in den Vorlagen. Kommt als Material herein
   (Unschärfe und Grösse zusammen), nicht als blosse Blende. */
.badge{
  position:absolute; left:0; top:0; z-index:6; opacity:0;
  display:flex; align-items:center; gap:clamp(.8rem, 1.4vw, 1.3rem);
  padding:clamp(.9rem, 1.6vw, 1.4rem) clamp(1.3rem, 2.3vw, 2.1rem) clamp(.9rem, 1.6vw, 1.4rem) clamp(1rem, 1.8vw, 1.6rem);
  border-radius:clamp(1rem, 1.6vw, 1.5rem);
  background:rgba(24,23,30,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.14);
}
.badge svg{width:clamp(2.6rem, 4.2vw, 4rem); height:auto; flex:none}
.badge path{stroke-dasharray:1}
.badge b{display:block; font-size:clamp(1.5rem, 2.6vw, 2.5rem); font-weight:760; letter-spacing:-.035em; line-height:1; color:var(--ink)}
.badge small{
  display:block; margin-top:.5rem; font-family:var(--mono); font-size:clamp(.52rem, .8vw, .7rem);
  font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
@media (prefers-reduced-transparency: reduce){
  .badge{background:#1A1920; -webkit-backdrop-filter:none; backdrop-filter:none}
  .kp-panel, .kp-panel::before, .kp-knopf{background:#1C1B22; -webkit-backdrop-filter:none; backdrop-filter:none}
  @media (hover: hover) and (pointer: fine) and (min-width: 60rem){ .kp-panel{background:none} }
}

/* --- Hinweise (Szene 3) ---------------------------------------------------- */
.callouts{position:absolute; inset:0; z-index:7; margin:0; padding:0; list-style:none; pointer-events:none}
.callout{
  position:absolute; left:var(--pad); max-width:16rem; opacity:0;
  display:flex; align-items:center; gap:.75rem;
  font-size:clamp(.95rem, .85rem + .3vw, 1.08rem); font-weight:600; line-height:1.3; color:var(--ink);
}
.callout::before{
  content:""; flex:none; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--coral); box-shadow:0 0 0 .3rem rgba(254,121,113,.16);
}
.callout:nth-child(1){top:calc(49 * var(--svh))}
.callout:nth-child(2){top:calc(59 * var(--svh))}
.callout:nth-child(3){top:calc(69 * var(--svh))}
.callout:nth-child(4){top:calc(79 * var(--svh))}
@media (orientation: portrait){
  .callout{
    max-width:none; width:calc(50% - var(--pad) - .35rem); align-items:flex-start;
    padding:.6rem .75rem; border-radius:.85rem; font-size:.86rem;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  }
  .callout::before{margin-top:.4em}
  .callout:nth-child(even){left:calc(50% + .35rem)}
  .callout:nth-child(1), .callout:nth-child(2){top:calc(73.5 * var(--svh))}
  .callout:nth-child(3), .callout:nth-child(4){top:calc(84 * var(--svh))}
}
.links{position:absolute; inset:0; width:100%; height:100%; z-index:7; overflow:visible; pointer-events:none}
@media (orientation: portrait){ .links{display:none} }
.link{fill:none; stroke:rgba(254,121,113,.85); stroke-width:1.4; stroke-dasharray:1; stroke-dashoffset:1; stroke-linejoin:round}
.knot{fill:#ECEDF2; stroke:rgba(254,121,113,.9); stroke-width:3; opacity:0}

/* Schweizer Flagge, in der Schrift gesetzt (Fotoverkauf) */
.flag{position:relative; display:inline-block; width:1em; height:1em; margin-left:.45em; vertical-align:-.14em; border-radius:.18em; background:#E4312B}
.flag::before, .flag::after{content:""; position:absolute; left:50%; top:50%; background:#FFFFFF; transform:translate(-50%, -50%)}
.flag::before{width:.62em; height:.2em}
.flag::after{width:.2em; height:.62em}

/* --- Kapitel Gripszug ---------------------------------------------------------
   Die eigene Illustration der App in einem Gerät im Format 16:9, darauf
   Leuchtringe um die fünf Wagen. Die Bereiche stehen daneben als echter
   Text, jeder mit einem Balken für den Fortschritt. */
#projekte{--len:300}
#projekte .stage{--gz-b:min(54vw, calc(62 * var(--svh) * 1.72))}
#projekte .stage-bg{background:radial-gradient(90% 80% at 68% 48%, #152029 0%, var(--bg) 58%, var(--bg-deep) 100%)}
.gz-sky{
  position:absolute; inset:-10%; opacity:0; pointer-events:none; will-change:opacity;
  background:
    radial-gradient(36% 34% at 68% 48%, rgba(120,190,240,.22), transparent 70%),
    radial-gradient(30% 22% at 66% 80%, rgba(120,200,120,.14), transparent 72%);
}
/* Dasselbe Tablet wie in den Kapiteln davor – gleicher Rahmen, gleiche
   Rundungen, gleiche Kamera –, hier im Format 16:9. Am Anfang des Kapitels
   wächst es aus Lage und Format des Tablets dort heraus: Das Skript bewegt
   --gw (Breite) und --ga (Seitenverhältnis), die Mitte (--gz-b, 69 %/52 %)
   bleibt dabei stehen. */
.gz-device{
  --gw:var(--gz-b); --ga:1.72;
  position:absolute; z-index:4; width:var(--gw); height:calc(var(--gw) / var(--ga));
  left:calc(69% - var(--gw) / 2); top:calc(52 * var(--svh) - var(--gw) / var(--ga) / 2);
  will-change:transform;
}
.js .gz-device{opacity:0}
.gz-body{
  position:absolute; inset:0; border-radius:calc(var(--gw) * .047);
  background:linear-gradient(150deg, #36373E 0%, #17171C 20%, #0D0D11 62%, #1D1E23 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1.5px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.7), 0 60px 90px -40px rgba(0,0,0,.9), 0 30px 90px -30px rgba(90,170,230,.35);
}
.gz-cam{
  position:absolute; left:50%; top:calc(var(--gw) * .0092);
  width:calc(var(--gw) * .0062); height:calc(var(--gw) * .0062);
  margin-left:calc(var(--gw) * -.0031); border-radius:50%;
  background:#26262C; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.gz-screen{position:absolute; inset:calc(var(--gw) * .021); border-radius:calc(var(--gw) * .027); overflow:hidden; background:#A8D8EF}
/* Ausschnitt, solange das Gerät noch schmaler ist als das Bild: so, dass
   „Fünf Bereiche – fünf Wagen." ganz zu lesen ist (gleich wie .screen-next) */
.gz-screen img{display:block; width:100%; height:100%; object-fit:cover; object-position:var(--gz-bild, 18% 50%)}
/* Endbreite des Geräts, für das Skript */
.gz-mass{position:absolute; left:0; top:0; width:var(--gz-b); height:0; visibility:hidden; pointer-events:none}
.gz-ring{
  position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 100%);
  width:12.5%; aspect-ratio:1; margin:-6.25% 0 0 -6.25%; border-radius:50%;
  border:3px solid var(--c); box-shadow:0 0 0 5px rgba(255,255,255,.55), 0 0 36px var(--c);
}
.gz-chip{
  position:absolute; left:calc(var(--x) * 100%); top:calc(var(--y) * 100%); width:calc(var(--w) * 100%); height:6.5%;
  transform:translate(-50%, -50%); border-radius:999px; box-shadow:0 0 0 3px var(--c), 0 0 26px var(--c);
}
.js :is(.gz-ring, .gz-chip){opacity:0}
.gz-copy{position:absolute; z-index:6; left:var(--pad); top:calc(14 * var(--svh)); width:min(29rem, 33vw)}
.gz-copy .headline{max-width:14ch}
.gz-areas{list-style:none; margin:1.7rem 0 0; padding:0; display:grid; gap:.75rem}
.gz-areas li{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.35rem .7rem; font-weight:620; font-size:.98rem}
.gz-areas li::before{content:""; width:.62rem; height:.62rem; border-radius:50%; background:var(--c); box-shadow:0 0 0 .25rem rgba(255,255,255,.08)}
.gz-areas i{grid-column:1 / -1; position:relative; display:block; height:.3rem; border-radius:.2rem; background:rgba(255,255,255,.09); overflow:hidden}
.gz-areas b{position:absolute; left:0; top:0; bottom:0; width:calc(var(--v) * 100%); border-radius:inherit; background:var(--c); transform-origin:0 50%}
.gz-no{list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem}
.gz-no li{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .9rem .5rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-size:.9rem; font-weight:620;
}
.gz-no li::before{
  content:""; width:1.15rem; height:1.15rem; border-radius:50%; flex:none;
  background:#3EA04B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4 8.5 13.2 14.4 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.js .gz-copy :is(.kicker, .sub, .gz-areas li, .gz-no li){opacity:0}
.js .gz-copy .w{opacity:0}
.js .gz-copy .headline{visibility:hidden}
.is-ready .gz-copy .headline{visibility:inherit}
.js .gz-areas b{transform:scaleX(0)}
@media (orientation: portrait){
  /* Das Gerät oben, darunter Bereiche, Versprechen und Link als ein Block,
     mittig im Platz, der unter dem Gerät bleibt. Auf kurzen Bildschirmen
     (Safari mit Leisten) wird das Gerät kleiner. --gz-y ist seine Mitte. */
  #projekte .stage{--gz-b:min(88vw, calc(30 * var(--svh) * 1.72)); --gz-y:calc(25 * var(--svh) + var(--gz-b) / 3.44)}
  .gz-device{left:calc(50% - var(--gw) / 2); top:calc(var(--gz-y) - var(--gw) / var(--ga) / 2)}
  .gz-copy{position:absolute; inset:0; width:auto}
  .js .gz-copy{
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding:calc(25 * var(--svh) + var(--gz-b) / 1.72 + 1rem) var(--pad) calc(3.5 * var(--svh));
  }
  .gz-copy .kicker{position:absolute; left:var(--pad); top:calc(10 * var(--svh)); margin:0}
  .gz-copy .headline{position:absolute; left:var(--pad); right:var(--pad); top:calc(13.5 * var(--svh)); max-width:none; font-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.4rem)}
  .gz-copy .sub{display:none}
  .gz-areas{align-self:stretch; margin:0; grid-template-columns:1fr 1fr; gap:.8rem 1.2rem}
  .gz-areas li{font-size:.86rem}
  .gz-no{margin:1.35rem 0 0; gap:.4rem}
  .gz-no li{font-size:.76rem; padding:.4rem .7rem .4rem .5rem}
  .gz-copy .app-link{margin-top:1.05rem}
}
/* Sehr kurze Bildschirme (etwa iPhone SE in Safari): kleineres Gerät,
   engere Abstände, in der Rangliste vier Zeilen */
@media (orientation: portrait) and (max-height: 600px){
  #projekte .stage{--gz-b:min(88vw, calc(24 * var(--svh) * 1.72))}
  .gz-areas{gap:.55rem 1.2rem}
  .gz-no{margin-top:1rem}
  .gz-copy .app-link{margin-top:.8rem}
}

/* --- Kapitel DreamTeam --------------------------------------------------------
   Nachgebaut nach der Startseite der App, aber mit erfundenen Spielern und
   Klubs: Echte Fotos und Wappen gehören anderen, und die Seite wirbt.
   Die Karten erzeugt das Skript, ebenso ihre Lage im Raum. */
#dreamteam{--len:480}
#dreamteam .stage-bg{background:radial-gradient(120% 90% at 50% 112%, #2A5BD0 0%, #143377 36%, #0A1A3D 66%, #050B1C 100%)}
.dt-field{position:absolute; inset:0; transform-origin:50% 50%; will-change:transform}
.js .dt-field{opacity:0}
/* Die Karten zeichnet das Skript auf .dt-cards; .dt-mass gibt ihm die
   Kartenbreite (mit rem, damit sie mit der Schriftgrösse mitwächst). */
.dt-cards{position:absolute; left:0; top:0; width:100%; height:100%}
.dt-mass{position:absolute; left:0; top:0; width:var(--cw); height:0; visibility:hidden; --cw:13.5rem}
.dt-pitch{position:absolute; left:0; top:0; overflow:visible; pointer-events:none}
/* Dunkler Grund hinter dem Text, solange Karten dahinter vorbeiziehen */
.dt-scrim{
  position:absolute; inset:0; z-index:6; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, rgba(5,11,28,.86) 0%, rgba(5,11,28,.6) 25%, rgba(5,11,28,0) 44%);
}
.js .dt-pitch{opacity:0}
.dt-copy{position:absolute; z-index:7; left:var(--pad); top:calc(14 * var(--svh)); width:min(26rem, 30vw)}
.dt-copy .headline{max-width:12ch}
.dt-steps{list-style:none; margin:1.7rem 0 0; padding:0; display:grid; gap:.85rem}
.dt-steps li{display:flex; align-items:center; gap:.85rem; font-weight:680; font-size:1.05rem; color:rgba(236,237,242,.42); transition:color .35s ease}
.dt-steps li span{
  flex:none; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  font-family:var(--mono); font-size:.8rem; border:1px solid rgba(236,237,242,.28);
  transition:background .35s ease, border-color .35s ease, color .35s ease;
}
.dt-steps li.on{color:#FFFFFF}
.dt-steps li.on span{background:#FE7971; border-color:#FE7971; color:#22100F}
.js .dt-copy :is(.kicker, .dt-steps){opacity:0}
.js .dt-copy .w{opacity:0}
.js .dt-copy .headline{visibility:hidden}
.is-ready .dt-copy .headline{visibility:inherit}
.dt-btn{
  position:absolute; z-index:7; left:0; top:0; padding:.8rem 1.4rem; border-radius:999px;
  background:#3B82F6; color:#FFFFFF; font-weight:750; font-size:.98rem; white-space:nowrap;
  box-shadow:0 16px 36px -12px rgba(59,130,246,.7); opacity:0; will-change:transform, opacity;
}
.dt-rank{
  position:absolute; z-index:7; right:var(--pad); top:calc(19 * var(--svh)); width:min(28rem, 36vw);
  padding:1.3rem 1.2rem 1.1rem; border-radius:1.3rem;
  background:rgba(9,18,42,.82); border:1px solid rgba(160,190,255,.18);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85); will-change:transform, opacity;
}
.js .dt-rank{opacity:0; visibility:hidden}
.dt-rank-h{display:flex; align-items:center; gap:.6rem; margin:0 0 1rem; font-size:1.25rem; font-weight:800; letter-spacing:-.02em}
.dt-rank-h svg{width:1.6rem; height:1.2rem}
.dt-rows{position:relative; height:calc(6 * 3.55rem - .35rem)}
.dt-row{
  position:absolute; left:0; right:0; top:0; height:3.2rem; padding:0 .85rem 0 .6rem; border-radius:.8rem;
  display:grid; grid-template-columns:1.9rem 2.3rem 1fr auto; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.045); will-change:transform;
}
.js .dt-row{opacity:0}
.dt-row.me{background:rgba(254,121,113,.15); box-shadow:inset 0 0 0 1px rgba(254,121,113,.55)}
.dt-no{font-family:var(--mono); font-size:.85rem; font-weight:700; color:#AFC0E0; text-align:center}
.dt-av{display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; font-size:.78rem; font-weight:800; background:#22335E; color:#DCE6FF}
.dt-row.me .dt-av{background:#FE7971; color:#22100F}
.dt-who b{display:block; font-size:.95rem; font-weight:750; line-height:1.2}
.dt-who small{display:block; font-size:.72rem; color:#8FA3CC}
.dt-pts{font-variant-numeric:tabular-nums; font-weight:800; font-size:1rem; white-space:nowrap}
.dt-pts small{font-size:.66rem; font-weight:700; color:#8FA3CC; margin-left:.25rem}
.dt-live{
  position:absolute; right:.8rem; top:-1.4rem; padding:.2rem .55rem; border-radius:999px;
  background:#22C55E; color:#062012; font-size:.7rem; font-weight:800; opacity:0; white-space:nowrap;
}
.dt-crown{position:absolute; left:-.35rem; top:-.95rem; width:1.4rem; opacity:0}
@media (orientation: portrait){
  .dt-mass{--cw:8.6rem}
  .dt-copy{left:var(--pad); right:var(--pad); top:calc(10 * var(--svh)); width:auto}
  .dt-copy .headline{max-width:none; font-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.4rem)}
  .dt-steps{display:flex; flex-wrap:wrap; gap:.4rem .9rem; margin-top:1rem}
  .dt-steps li{font-size:.8rem; gap:.4rem}
  .dt-steps li span{width:1.45rem; height:1.45rem; font-size:.66rem}
  .dt-rank .app-link{margin-top:.8rem}
  .dt-rank .dt-rows > .dt-row:nth-child(6), .dt-rank .dt-slotno:nth-child(6){display:none}
  .dt-scrim{background:linear-gradient(rgba(5,11,28,.9) 0%, rgba(5,11,28,.72) 24%, rgba(5,11,28,0) 40%)}
  /* Unten verankert: So passt die Rangliste auch auf kleine Telefone, und
     das Spielfeld bekommt den Streifen darüber (Skript, „Schlussbild"). */
  .dt-rank{left:var(--pad); right:var(--pad); width:auto; top:auto; bottom:calc(2.5 * var(--svh)); padding:.9rem .9rem .75rem}
  .dt-rank-h{margin-bottom:.8rem; font-size:1.1rem}
  .dt-rows{height:calc(5 * (2.55rem + 5px) - 5px)}
  .dt-row{height:2.55rem; grid-template-columns:1.5rem 2rem 1fr auto; gap:.5rem}
  .dt-av{width:2rem; height:2rem}
  .dt-who b{font-size:.84rem}
}

@media (orientation: portrait) and (max-height: 600px){
  .dt-rows{height:calc(4 * (2.55rem + 5px) - 5px)}
  .dt-rank .dt-rows > .dt-row:nth-child(5), .dt-rank .dt-slotno:nth-child(5){display:none}
}

/* --- Kapitel Fotoverkauf ------------------------------------------------------
   Das Telefon zeigt den Weg der Eltern: E-Mail, Code, nur die eigenen
   Fotos mit Wasserzeichen, Warenkorb, bezahlen, Original laden. Die Bilder
   sind gezeichnet, Namen und Adresse erfunden – wie im Kurzfilm der App. */
#fotos{--len:420}
#fotos .stage-bg{background:radial-gradient(90% 80% at 66% 50%, #2B2119 0%, #17120E 55%, #0B0907 100%)}
.ft-glow{
  position:absolute; inset:-10%; opacity:0; pointer-events:none; will-change:opacity;
  background:radial-gradient(34% 40% at 66% 52%, rgba(255,214,160,.22), transparent 70%);
}
.ft-phone{
  --pw:min(22rem, 26vw, calc(76 * var(--svh) * .49));
  position:absolute; z-index:4; width:var(--pw); height:calc(var(--pw) / .49);
  left:calc(67% - var(--pw) / 2); top:calc(50 * var(--svh) - var(--pw) / .98);
  will-change:transform;
}
.js .ft-phone{opacity:0}
.ft-body{
  position:absolute; inset:0; border-radius:calc(var(--pw) * .15); background:#141418;
  box-shadow:inset 0 0 0 2px #2B2B31, inset 0 0 0 5px #0B0B0D, 0 50px 90px -30px rgba(0,0,0,.9), 0 24px 80px -24px rgba(255,210,160,.28);
}
.ft-screen{
  position:absolute; inset:calc(var(--pw) * .034); border-radius:calc(var(--pw) * .12);
  overflow:hidden; background:#F6EFE3; container-type:inline-size;
}
.ft-app{position:absolute; inset:0; font-size:calc(100cqw / 39); color:#3B2A1A; font-family:var(--font); line-height:1.3}
.ft-app p{margin:0}
.ft-top{position:absolute; left:0; right:0; top:0; height:5.6em; padding:1.9em 1.6em 0; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(#FBF6EE, #F3EADB); box-shadow:0 1px 0 #E6D9C4}
.ft-logo{font-family:var(--hand); font-size:2.3em; font-weight:600; color:#8B5A2B}
.ft-cart{position:relative; width:3.2em; height:3.2em; border-radius:50%; background:#EFE3D0; box-shadow:0 0 0 1px #E2D2B8}
.ft-cart::before{
  content:""; position:absolute; inset:.85em; background:#8B5A2B;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.2a1.5 1.5 0 0 0 1.5 1.1h7.9a1.5 1.5 0 0 0 1.4-1l2.3-6.8H6.2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E") center / 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 10.2a1.5 1.5 0 0 0 1.5 1.1h7.9a1.5 1.5 0 0 0 1.4-1l2.3-6.8H6.2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.ft-cart em{
  position:absolute; right:-.35em; top:-.35em; min-width:1.6em; height:1.6em; padding:0 .35em; border-radius:.8em;
  background:#A0561F; color:#FFFFFF; font:800 .95em/1.6em var(--font); font-style:normal; text-align:center; font-variant-numeric:tabular-nums;
}
.ft-view{position:absolute; left:0; right:0; top:5.6em; bottom:0; padding:1.6em}
.ft-lock{display:flex; flex-direction:column; align-items:center; text-align:center}
.ft-pad{width:4.4em; height:5em; margin-top:.8em}
.ft-pad path{fill:none; stroke:#8B5A2B; stroke-width:3; stroke-linecap:round}
.ft-pad rect{fill:#8B5A2B}
.ft-lock h3{margin:1em 0 .5em; font-family:var(--hand); font-size:2.2em; font-weight:600; line-height:1.05; color:#3B2A1A}
.ft-lock .ft-txt{font-size:1.2em; color:#7A6048; line-height:1.4}
.ft-field{width:100%; margin-top:1.5em; text-align:left}
.ft-field label{display:block; font-size:1.05em; font-weight:700; color:#7A6048; margin-bottom:.4em}
.ft-input{display:flex; align-items:center; height:3.6em; padding:0 1em; border-radius:.7em; background:#FFFFFF; box-shadow:0 0 0 1px #E2D2B8; font-size:1.3em; color:#3B2A1A; white-space:nowrap; overflow:hidden}
.ft-code{letter-spacing:.35em; font-weight:700; font-variant-numeric:tabular-nums}
.ft-caret{display:inline-block; width:2px; height:1.2em; margin-left:.1em; background:#8B5A2B}
.ft-btn{display:grid; place-items:center; width:100%; height:3.9em; margin-top:1.3em; border-radius:.8em; background:#A0561F; color:#FFFFFF; font-weight:750; font-size:1.25em}
.ft-ch{display:flex; align-items:center; gap:.5em; margin-top:1.3em; font-size:1.08em; color:#7A6048}
.ft-ch .flag{margin:0; width:1.15em; height:1.15em; opacity:1}
.ft-gal{display:grid; grid-template-columns:1fr 1fr; gap:1em; align-content:start}
.ft-gal-h{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.2em}
.ft-gal-h b{font-family:var(--hand); font-size:2.2em; font-weight:600}
.ft-gal-h small{font-size:1.05em; color:#7A6048}
.ft-pic{position:relative; margin:0; aspect-ratio:.8; border-radius:.8em; overflow:hidden; box-shadow:0 .6em 1.2em -.8em rgba(60,30,10,.5); will-change:transform, opacity}
.ft-pic svg{display:block; width:100%; height:100%}
.ft-wm{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='70'%3E%3Ctext x='8' y='42' transform='rotate(-24 60 35)' font-family='Arial,sans-serif' font-size='17' font-weight='700' fill='%23ffffff' fill-opacity='.8'%3EVorschau%3C/text%3E%3C/svg%3E") 0 0 / 55% auto repeat;
}
.ft-sel{
  position:absolute; right:.6em; top:.6em; width:2.4em; height:2.4em; border-radius:50%;
  background:#A0561F; box-shadow:0 0 0 .25em #FFFFFF; opacity:0;
}
.ft-sel::after{content:""; position:absolute; left:.86em; top:.5em; width:.52em; height:1em; border-right:.24em solid #FFFFFF; border-bottom:.24em solid #FFFFFF; transform:rotate(42deg)}
.ft-dl{
  position:absolute; left:.6em; right:.6em; bottom:.6em; height:2.5em; border-radius:.6em;
  display:grid; place-items:center; background:rgba(255,255,255,.92); color:#8B5A2B; font-size:.95em; font-weight:800; opacity:0;
}
.ft-sheet{
  position:absolute; left:0; right:0; bottom:0; padding:1.6em 1.6em 2.2em; border-radius:1.8em 1.8em 0 0;
  background:#FFFFFF; box-shadow:0 -1.2em 3em -1em rgba(60,30,10,.35); will-change:transform;
}
.ft-sheet-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:.9em}
.ft-sheet-h b{font-size:1.45em; font-weight:800}
.ft-item{display:flex; justify-content:space-between; font-size:1.15em; padding:.5em 0; border-top:1px solid #F0E6D6; color:#5B4632}
.ft-item:first-of-type{border-top:0}
.ft-total{display:flex; justify-content:space-between; margin-top:.4em; padding-top:.8em; border-top:2px solid #EADBC4; font-weight:800; font-size:1.3em}
.ft-pay{position:relative; display:grid; place-items:center; height:3.8em; margin-top:1.1em; border-radius:.8em; background:#A0561F; color:#FFFFFF; font-weight:800; font-size:1.2em; overflow:hidden}
.ft-paid{position:absolute; inset:0; display:grid; place-items:center; background:#22C55E; color:#062012; opacity:0}
.js .ft-app :is(.ft-gal, .ft-pic, .ft-sel, .ft-dl, .ft-paid, .ft-caret){opacity:0}
.js .ft-sheet{transform:translateY(110%)}
:root:not(.js) .ft-lock{display:none}
:root:not(.js) .ft-sheet{display:none}
.ft-mail{
  position:absolute; z-index:5; left:calc(67% - 16rem); top:calc(30 * var(--svh)); width:32rem; border-radius:1rem;
  background:#FFFFFF; color:#1F2328; box-shadow:0 40px 80px -30px rgba(0,0,0,.85); will-change:transform, opacity;
}
.js .ft-mail{opacity:0}
.ft-mail-bar{display:flex; align-items:center; gap:.7rem; padding:1rem 1.2rem; border-bottom:1px solid #E7E9EE}
.ft-mail-bar i{width:2.2rem; height:2.2rem; border-radius:50%; background:#E6ECF7; flex:none}
.ft-mail-bar b{display:block; font-size:.95rem}
.ft-mail-bar small{display:block; font-size:.78rem; color:#6B717C}
.ft-att{display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; padding:1rem 1.2rem 1.2rem}
.ft-att span{
  display:flex; align-items:center; gap:.45rem; padding:.5rem .55rem; border-radius:.55rem; background:#F1F3F5;
  font-size:.74rem; font-weight:600; color:#3B4048; white-space:nowrap; overflow:hidden; will-change:transform, opacity;
}
.ft-att span::before{content:""; flex:none; width:1.1rem; height:1.3rem; border-radius:.15rem; background:#7C9CC9}
.ft-att .doc::before{background:#2B579A}
.ft-att .pdf::before{background:#D93025}
.js .ft-att span{opacity:0}
.ft-copy{position:absolute; z-index:6; left:var(--pad); top:calc(16 * var(--svh)); width:min(28rem, 34vw)}
.ft-copy .headline{max-width:12ch}
.ft-points{list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1rem}
.ft-points li{
  position:relative; padding-left:2.3rem; font-weight:640; font-size:1.02rem; line-height:1.35; color:rgba(236,237,242,.4);
  transition:color .35s ease;
}
.ft-points li::before{
  content:""; position:absolute; left:0; top:-.05rem; width:1.5rem; height:1.5rem; border-radius:50%;
  border:1px solid rgba(236,237,242,.25); transition:background .35s ease, border-color .35s ease;
}
.ft-points li.on{color:#FFFFFF}
.ft-points li.on::before{border-color:#E8B37A; background:#E8B37A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4 8.5 13.2 14.4 7' fill='none' stroke='%232B2119' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat}
.js .ft-copy :is(.kicker, .ft-points){opacity:0}
.js .ft-copy .w{opacity:0}
.js .ft-copy .headline{visibility:hidden}
.is-ready .ft-copy .headline{visibility:inherit}
@media (orientation: portrait){
  .ft-phone{--pw:min(60vw, calc(48 * var(--svh) * .49)); left:calc(50% - var(--pw) / 2); top:calc(25 * var(--svh))}
  .ft-mail{left:var(--pad); right:var(--pad); width:auto; top:calc(34 * var(--svh))}
  .ft-att{grid-template-columns:1fr 1fr; padding:.8rem}
  .ft-att span{font-size:.66rem}
  .ft-copy{left:var(--pad); right:var(--pad); top:calc(10 * var(--svh)); width:auto}
  .ft-copy .headline{max-width:none; font-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.4rem)}
  /* Hoch stehen alle vier Punkte unter dem Telefon und werden abgehakt wie
     quer. 66 unter dem Textblock sind 76 auf der Bühne. */
  .ft-points{position:absolute; left:0; right:0; top:calc(66 * var(--svh)); margin:0; gap:.5rem}
  .ft-points li{padding-left:1.95rem; font-size:.88rem}
  .ft-points li::before{width:1.3rem; height:1.3rem}
}

/* --- Kapitel Volleyballturnier -----------------------------------------------
   Erst der Aushang in der Halle und die Fragen, die er offenlässt. Daraus
   wird der Spielplan des Tages (seine Spiele erzeugt das Skript), dann
   läuft das Turnier auf dem Handy: Resultat eintippen, die Tabelle rechnet
   nach, das Dashboard zeigt einem Team seine Spiele. Nachgebaut nach der
   App (pvt.alae.app), mit erfundenen Teams und Resultaten. Hoch ist das
   Handy kein Gerät im Bild, sondern eine Karte über die ganze Breite –
   sonst wäre die Tabelle darin nicht zu lesen. */
#volleyball{--len:460}
#volleyball .stage-bg{background:radial-gradient(110% 90% at 64% 38%, #242C74 0%, #151B4A 38%, #0B0F2B 68%, #05060F 100%)}
.vb-glow{
  position:absolute; inset:-10%; opacity:0; pointer-events:none; will-change:opacity;
  background:
    radial-gradient(30% 24% at 64% 10%, rgba(190,205,255,.2), transparent 70%),
    radial-gradient(42% 40% at 68% 58%, rgba(110,130,255,.16), transparent 72%);
}
/* Die Kategorien: Jugend, Plausch, Ambitioniert */
#volleyball [data-k="j"]{--k:#2DD4BF}
#volleyball [data-k="p"]{--k:#A78BFA}
#volleyball [data-k="a"]{--k:#60A5FA}

/* Der Aushang: ausgedruckt, mit Klebeband an der Wand, Resultate von Hand.
   Alles darin in cqw, damit er als Ganzes wächst und schrumpft. */
.vb-aushang{
  --aw:min(34rem, 38vw, calc(66 * var(--svh) * 1.414));
  position:absolute; z-index:4; left:calc(66% - var(--aw) / 2); top:calc(50 * var(--svh) - var(--aw) / 2.828);
  width:var(--aw); aspect-ratio:1.414; container-type:inline-size;
  padding:5cqw 4.5cqw 4cqw; background:#F2F0EA; color:#2A2A33; border-radius:.2rem;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.8), 0 6px 14px rgba(0,0,0,.35); will-change:transform, opacity;
}
.vb-aushang::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(155deg, rgba(255,255,255,.18) 0%, transparent 40%, rgba(20,16,40,.2) 100%);
}
.js .vb-aushang{opacity:0}
.vb-band{position:absolute; left:9cqw; top:-1.6cqw; width:15cqw; height:4.6cqw; background:rgba(255,246,214,.62); box-shadow:0 1px 2px rgba(0,0,0,.18); transform:rotate(-5deg)}
.vb-band--r{left:auto; right:9cqw; transform:rotate(6deg)}
.vb-aushang-h{margin:0 0 2.4cqw; font-family:var(--mono); font-size:2.3cqw; font-weight:700; letter-spacing:.08em}
.vb-aushang-raster{display:grid; grid-template-columns:8.5cqw repeat(3, 1fr); border-top:2px solid #45454F; border-left:1px solid #9A9AA2; font-family:var(--mono); font-size:1.72cqw; line-height:1.3}
.vb-aushang-raster span{min-height:8.4cqw; padding:.9cqw 1cqw; border-right:1px solid #9A9AA2; border-bottom:1px solid #9A9AA2}
.vb-aushang-raster .h{min-height:0; background:#E4E1D8; font-weight:700}
.vb-aushang-raster s{text-decoration-color:#C0392B; text-decoration-thickness:.12em; color:#77777F}
.vb-aushang-raster em{display:block; margin-top:.3cqw; font-family:var(--hand); font-style:normal; font-weight:600; font-size:3.3cqw; line-height:1; color:#27408B}
.vb-aushang-notiz{position:absolute; left:5.5cqw; bottom:3.2cqw; font-family:var(--hand); font-weight:600; font-size:4.6cqw; line-height:1; color:#C0392B; transform:rotate(-3deg)}

/* Die Fragen dazu, wie Nachrichten */
.vb-fragen{position:absolute; inset:0; z-index:6; pointer-events:none}
.vb-frage{
  position:absolute; padding:.7rem 1rem; border-radius:1.1rem 1.1rem 1.1rem .3rem;
  background:#FFFFFF; color:#1A1D2E; font-weight:700; font-size:1rem; line-height:1.2; white-space:nowrap;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.75); will-change:transform, opacity;
}
.vb-frage:nth-child(even){border-radius:1.1rem 1.1rem .3rem 1.1rem}
.js .vb-frage{opacity:0}
.vb-frage:nth-child(1){left:47%; top:calc(19 * var(--svh))}
.vb-frage:nth-child(2){right:var(--pad); top:calc(25 * var(--svh))}
.vb-frage:nth-child(3){left:45%; top:calc(73 * var(--svh))}
.vb-frage:nth-child(4){right:calc(var(--pad) + 2vw); top:calc(79 * var(--svh))}

/* Der Spielplan des Tages: je Startzeit eine Zeile, drei Felder */
.vb-plan{
  --bw:min(36rem, 40vw);
  position:absolute; z-index:3; left:calc(63% - var(--bw) / 2); top:calc(14 * var(--svh)); width:var(--bw); height:calc(72 * var(--svh));
  display:flex; flex-direction:column; padding:1.1rem 1.1rem .9rem; border-radius:1.3rem;
  background:rgba(12,17,48,.84); border:1px solid rgba(160,180,255,.18);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85); will-change:transform, opacity;
}
.js .vb-plan{opacity:0}
/* Titel und Legende stehen links: Rechts liegt später das Handy darüber */
.vb-plan-kopf{margin:0 0 .9rem}
.vb-plan-kopf b{display:block; font-size:1.25rem; font-weight:800; letter-spacing:-.02em; line-height:1.2}
.vb-plan-kopf small{display:block; margin-top:.2rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:#8C95C4}
.vb-legende{display:flex; gap:.9rem; margin:.8rem 0 0; font-size:.7rem; color:#AEB6E0}
.vb-legende i{display:flex; align-items:center; gap:.35rem; font-style:normal}
.vb-legende i::before{content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--k)}
.vb-raster{flex:1; min-height:0; display:grid; grid-template-columns:3rem repeat(3, minmax(0, 1fr)); grid-template-rows:auto; grid-auto-rows:minmax(0, 1fr); gap:.4rem}
.vb-rk{font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8C95C4}
.vb-zeit{align-self:center; font-family:var(--mono); font-size:.72rem; color:#AEB6E0}
.vb-spiel{
  position:relative; display:flex; flex-direction:column; justify-content:center; min-width:0;
  padding:0 .5rem 0 .8rem; border-radius:.55rem; background:rgba(255,255,255,.065);
  font-style:normal; font-size:.72rem; font-weight:650; line-height:1.3; color:#E4E8FB; will-change:transform, opacity;
}
.vb-spiel::before{content:""; position:absolute; left:.32rem; top:22%; bottom:22%; width:3px; border-radius:2px; background:var(--k)}
.vb-spiel b{display:block; overflow:hidden; font-weight:inherit; white-space:nowrap; text-overflow:ellipsis}
.js .vb-spiel{opacity:0}
/* Die Spiele eines Teams: gespielt (Rahmen) und gezählt (gestrichelt) */
.vb-mark{position:absolute; inset:-2px; border-radius:.62rem; border:2px solid #FE7971; background:rgba(254,121,113,.16); opacity:0}
.vb-mark--z{border-style:dashed; border-color:#FBBF24; background:rgba(251,191,36,.1)}
/* Das eingetippte Resultat, als Plakette an der Ecke des Spiels */
.vb-score{
  position:absolute; z-index:1; right:-.45rem; top:-.6rem; padding:0 .4rem; border-radius:.45rem;
  background:#22C55E; color:#062012; font-style:normal; font-weight:800; font-size:.68rem; line-height:1.2rem;
  box-shadow:0 0 0 2px #0B0F2A; opacity:0;
}

/* Das Handy mit der App: dunkelblau wie das Original. Schrift in cqw, der
   Inhalt wächst mit dem Bildschirm, statt umzubrechen. */
.vb-phone{
  --pw:min(21.5rem, 23.5vw, calc(76 * var(--svh) * .49));
  position:absolute; z-index:5; width:var(--pw); height:calc(var(--pw) / .49);
  left:calc(83% - var(--pw) / 2); top:calc(50 * var(--svh) - var(--pw) / .98);
  will-change:transform;
}
.js .vb-phone{opacity:0}
.vb-body{
  position:absolute; inset:0; border-radius:calc(var(--pw) * .15); background:#141418;
  box-shadow:inset 0 0 0 2px #2B2B31, inset 0 0 0 5px #0B0B0D, 0 50px 90px -30px rgba(0,0,0,.9), 0 24px 80px -24px rgba(110,130,255,.35);
}
.vb-screen{
  position:absolute; inset:calc(var(--pw) * .034); border-radius:calc(var(--pw) * .12);
  overflow:hidden; background:#0C1030; container-type:inline-size;
}
.vb-app{position:absolute; inset:0; overflow:hidden; font-size:calc(100cqw / 25); line-height:1.3; color:#E7EAFB; background:linear-gradient(#11173F, #0B0F2A 55%)}
.vb-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:.8em; margin:2.7em 1em 0; padding:1em 1.1em;
  border-radius:1em; background:linear-gradient(120deg, #3444B0, #1E2768 72%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.vb-kopf b{display:block; font-size:1.22em; font-weight:800; letter-spacing:-.02em; line-height:1.15}
.vb-kopf small{display:block; margin-top:.2em; font-size:.82em; color:#B7C0EE}
.vb-ball{flex:none; width:2.7em; height:2.7em}
.vb-tabs{display:flex; gap:.4em; margin:.8em 1em 0; font-size:.86em; font-weight:700}
.vb-tabs span{padding:.55em .75em; border-radius:.7em; background:#181E44; color:#C9CEEF; transition:background .3s ease, color .3s ease}
.vb-tabs .is-on{background:#3444B0; color:#FFFFFF}
.vb-view{position:absolute; left:0; right:0; top:11.4em; bottom:0; padding:0 1em; will-change:transform, opacity}
.js .vb-view--dash{opacity:0}
.js .vb-view--dash :is(.vb-eigene, .vb-zaehlen) .vb-sp{opacity:0}
.vb-kat{display:flex; gap:.35em; margin:.9em 0 0; font-size:.8em; font-weight:700}
.vb-kat span{padding:.4em .65em; border-radius:.6em; background:#161B3E; color:#AEB6E0}
.vb-kat .is-on{background:#26318A; color:#FFFFFF}
.vb-h{margin:1em 0 .45em; font-size:.98em; font-weight:800}
.vb-tab{position:relative; overflow:hidden; border-radius:.7em; font-size:.84em; font-variant-numeric:tabular-nums}
.vb-tr{
  position:relative; display:grid; grid-template-columns:1.5em minmax(0, 1fr) 1.9em 1.7em 2.3em 2.3em 2.9em; align-items:center; gap:.25em;
  height:2.4em; padding:0 .7em; background:#11163A; will-change:transform;
}
.vb-tr:nth-child(odd){background:#141A42}
.vb-tr span:nth-child(2){overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.vb-tr span:nth-child(n+3){text-align:right}
.vb-tr.vb-th{z-index:2; background:#1C2352; font-weight:800; color:#DCE0F7}
/* Die Zeile, die aufsteigt, zieht über die anderen hinweg */
.vb-tr--auf{z-index:1}
.vb-plus{
  position:absolute; right:15.4em; top:.35em; padding:0 .45em; border-radius:.5em;
  background:#22C55E; color:#062012; font-style:normal; font-weight:800; font-size:.86em; line-height:1.5em; opacity:0;
}
.vb-sp{
  position:relative; display:grid; grid-template-columns:2.6em 1.5em minmax(0, 1fr) 3.9em minmax(0, 1fr); align-items:center; gap:.3em;
  height:2.5em; margin-bottom:.3em; padding:0 .6em; border-radius:.6em; background:#11163A; font-size:.84em;
}
.vb-sp span{overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.vb-sp span:nth-child(1){font-variant-numeric:tabular-nums; color:#AEB6E0}
.vb-sp span:nth-child(2){font-size:.9em; color:#8C95C4}
.vb-sp span:nth-child(3){text-align:right}
.vb-sp .vb-res{overflow:visible; text-align:center; font-weight:800; font-variant-numeric:tabular-nums}
.vb-sp .win{color:#6EE7A1}
.vb-sp--offen .vb-res{color:#8C95C4}
.vb-sp--neu{box-shadow:inset 0 0 0 1px rgba(124,140,255,.6); background:#161D4C}
.vb-eingabe b{display:inline-block; min-width:1.6em; height:1.55em; margin:0 .15em; border-radius:.35em; background:#0A0E28; box-shadow:inset 0 0 0 1px #5566E0; line-height:1.55em; vertical-align:middle}
.vb-caret{display:inline-block; width:1.5px; height:1em; margin-left:-.4em; background:#FFFFFF; vertical-align:-.15em}
.vb-ok{
  position:absolute; right:-.35em; top:-.35em; width:1.3em; height:1.3em; border-radius:50%; background:#22C55E;
  box-shadow:0 0 0 .18em #0B0F2A;
}
.vb-ok::after{content:""; position:absolute; left:.44em; top:.24em; width:.3em; height:.6em; border-right:.16em solid #062012; border-bottom:.16em solid #062012; transform:rotate(42deg)}
.js .vb-app :is(.vb-caret, .vb-ok){opacity:0}
.vb-wahl{display:flex; align-items:center; gap:.7em; margin:.9em 0 0; font-size:.9em}
.vb-wahl span{color:#AEB6E0}
.vb-wahl b{flex:1; display:flex; justify-content:space-between; padding:.5em .8em; border-radius:.6em; background:#0A0E28; box-shadow:inset 0 0 0 1px #3A4690; font-weight:700}
.vb-wahl b::after{content:"▾"; color:#8C95C4}
.vb-team{margin:.8em 0 0}
.vb-team b{display:block; font-size:1.12em; font-weight:800}
.vb-team small{display:block; font-size:.82em; color:#AEB6E0}

.vb-copy{position:absolute; z-index:7; left:var(--pad); top:calc(16 * var(--svh)); width:min(28rem, 31vw)}
.vb-copy .headline{max-width:12ch}
.vb-punkte{list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1rem}
.vb-punkte li{
  position:relative; padding-left:2.3rem; font-weight:640; font-size:1.02rem; line-height:1.35; color:rgba(236,237,242,.4);
  transition:color .35s ease;
}
.vb-punkte li::before{
  content:""; position:absolute; left:0; top:-.05rem; width:1.5rem; height:1.5rem; border-radius:50%;
  border:1px solid rgba(236,237,242,.25); transition:background .35s ease, border-color .35s ease;
}
.vb-punkte li.on{color:#FFFFFF}
.vb-punkte li.on::before{border-color:#8B9BFF; background:#8B9BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4 8.5 13.2 14.4 7' fill='none' stroke='%230B0F2A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat}
.js .vb-copy :is(.kicker, .vb-punkte){opacity:0}
.js .vb-copy .w{opacity:0}
.js .vb-copy .headline{visibility:hidden}
.is-ready .vb-copy .headline{visibility:inherit}
@media (orientation: portrait){
  .vb-copy{left:var(--pad); right:var(--pad); top:calc(9 * var(--svh)); width:auto}
  .vb-copy .headline{max-width:none; font-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.4rem)}
  .vb-punkte{margin-top:1rem; gap:.35rem}
  .vb-punkte li{padding-left:1.75rem; font-size:.86rem}
  .vb-punkte li::before{top:.05rem; width:1.15rem; height:1.15rem}
  .vb-copy .app-link{margin-top:1rem}
  .vb-aushang{--aw:calc(100vw - 2 * var(--pad)); left:var(--pad); top:calc(55 * var(--svh))}
  .vb-frage{padding:.55rem .8rem; font-size:.84rem}
  .vb-frage:nth-child(1){left:var(--pad); top:calc(46.5 * var(--svh))}
  .vb-frage:nth-child(2){top:calc(49 * var(--svh))}
  .vb-frage:nth-child(3){left:var(--pad); top:calc(85 * var(--svh))}
  .vb-frage:nth-child(4){right:var(--pad); top:calc(90 * var(--svh))}
  .vb-plan{--bw:calc(100vw - 2 * var(--pad)); left:var(--pad); top:calc(46 * var(--svh)); height:calc(51 * var(--svh)); padding:.8rem .7rem .7rem}
  .vb-plan-kopf{margin-bottom:.6rem}
  .vb-plan-kopf b{font-size:1.05rem}
  .vb-plan-kopf small{font-size:.58rem}
  .vb-legende{gap:.6rem; margin-top:.55rem; font-size:.62rem}
  .vb-raster{grid-template-columns:2.3rem repeat(3, minmax(0, 1fr)); gap:.28rem}
  .vb-zeit{font-size:.6rem}
  .vb-rk{font-size:.56rem}
  .vb-spiel{padding:0 .3rem 0 .6rem; font-size:.58rem; border-radius:.45rem}
  .vb-spiel::before{left:.22rem; width:2px}
  .vb-phone{--pw:calc(100vw - 2 * var(--pad)); left:var(--pad); top:calc(46 * var(--svh)); height:calc(51 * var(--svh))}
  .vb-body{display:none}
  .vb-screen{inset:0; border-radius:1.3rem; box-shadow:0 0 0 1px rgba(160,180,255,.22), 0 40px 90px -30px rgba(0,0,0,.9)}
  .vb-app{font-size:calc(100cqw / 33)}
  .vb-kopf{margin-top:1em}
  .vb-view{top:9.7em}
  .vb-kat{display:none}
  .vb-h{margin-top:.8em}
}

/* --- Kapitel Buchhaltung ---------------------------------------------------------
   Belege und ein Kassenbuch in Excel, dann die App im Fenster: Zwei
   Buchungen werden erfasst, und unter dem Fenster rechnen Erfolgsrechnung
   und Bilanz mit – die Bilanz als Waage, die nach jeder Buchung wieder im
   Gleichgewicht steht. Die App ist hell wie das Original; ohne Firmennamen,
   mit erfundenen Objekten und Beträgen. Fenster und Karten teilen sich die
   Breite --fw. */
#buchhaltung{--len:480; --fw:min(46rem, 52vw)}
#buchhaltung .stage-bg{background:radial-gradient(110% 90% at 64% 40%, #183A2F 0%, #0F2620 40%, #08140F 70%, #040806 100%)}
.bh-glow{
  position:absolute; inset:-10%; opacity:0; pointer-events:none; will-change:opacity;
  background:
    radial-gradient(34% 30% at 66% 28%, rgba(170,240,200,.14), transparent 70%),
    radial-gradient(40% 36% at 68% 82%, rgba(34,197,94,.12), transparent 72%);
}

/* Vorher: das Kassenbuch in Excel, ein Zettel, zwei Belege */
.bh-vorher{position:absolute; inset:0; z-index:5; pointer-events:none}
.bh-xls{
  position:absolute; left:calc(62% - 15rem); top:calc(20 * var(--svh)); width:30rem; overflow:hidden;
  border-radius:.35rem; background:#FFFFFF; color:#333333; box-shadow:0 40px 80px -30px rgba(0,0,0,.85); will-change:transform, opacity;
}
.bh-xls-bar{display:flex; align-items:center; gap:.45rem; height:2rem; padding:0 .8rem; background:#1D6F42; color:#FFFFFF; font-size:.72rem; font-weight:600; white-space:nowrap}
.bh-xls-bar b{display:grid; place-items:center; width:1.1rem; height:1.1rem; border-radius:.15rem; background:#FFFFFF; color:#1D6F42; font-size:.68rem}
.bh-xls-raster{display:grid; grid-template-columns:1.6rem 3.6rem minmax(0, 1fr) 5.4rem 5.4rem; font-size:.72rem}
.bh-xls-raster span{position:relative; overflow:hidden; min-height:1.75rem; padding:.3rem .45rem; border-right:1px solid #E1E1E1; border-bottom:1px solid #E1E1E1; line-height:1.15rem; white-space:nowrap}
.bh-xls-raster .h{padding-inline:0; background:#F3F3F3; color:#777777; text-align:center}
.bh-xls-raster .err{background:#FDECEC; color:#C00000; font-weight:700}
.bh-xls-raster .warn::before{content:""; position:absolute; left:0; top:0; border-top:.45rem solid #1E8E3E; border-right:.45rem solid transparent}
.bh-zettel{
  position:absolute; left:calc(62% - 19.5rem); top:calc(13 * var(--svh)); width:8.6rem; aspect-ratio:1; padding:1rem .9rem;
  border-radius:.15em .15em .45em .15em; background:linear-gradient(175deg, #FFEEA0, #FFE171 70%, #F4D059);
  font-family:var(--hand); font-weight:600; font-size:1.5rem; line-height:1.02; color:#2A2A33;
  box-shadow:0 22px 34px -16px rgba(0,0,0,.78), 0 4px 10px rgba(0,0,0,.35); will-change:transform, opacity;
}
.js .bh-vorher > *{opacity:0}
.bh-beleg{
  position:absolute; z-index:6; width:12.5rem; padding:.95rem 1rem 1.3rem; background:#FBFBF7; color:#26302B;
  font-family:var(--mono); font-size:.72rem; line-height:1.4; box-shadow:0 26px 50px -20px rgba(0,0,0,.8); will-change:transform, opacity;
}
.bh-beleg-kopf{margin:0 0 .55rem; padding-bottom:.45rem; border-bottom:1px dashed #B9BDB5; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.bh-beleg-text small{display:block; color:#6B736E}
.bh-beleg-betrag{margin-top:.7rem; padding-top:.45rem; border-top:1px dashed #B9BDB5; font-size:.85rem; font-weight:800}
/* Die Gutschrift ausgedruckt aus dem E-Banking, der Kassenzettel mit
   abgerissener Unterkante */
.bh-beleg--bank{left:calc(62% + 8rem); top:calc(26 * var(--svh)); border-top:.3rem solid #1F9D55; border-radius:.3rem}
.bh-beleg--bank .bh-beleg-kopf{color:#157A42}
.bh-beleg--kasse{
  left:calc(62% + 3rem); top:calc(55 * var(--svh));
  clip-path:polygon(0 0, 100% 0, 100% 97%, 95% 100%, 90% 97%, 85% 100%, 80% 97%, 75% 100%, 70% 97%, 65% 100%, 60% 97%, 55% 100%, 50% 97%, 45% 100%, 40% 97%, 35% 100%, 30% 97%, 25% 100%, 20% 97%, 15% 100%, 10% 97%, 5% 100%, 0 97%);
}
.js .bh-beleg{opacity:0}

/* Das Fenster mit der App. Schrift in cqw: Der Inhalt wächst mit dem
   Fenster, statt umzubrechen. */
.bh-fenster{
  position:absolute; z-index:4; left:calc(67% - var(--fw) / 2); top:calc(11 * var(--svh)); width:var(--fw); height:calc(53 * var(--svh));
  overflow:hidden; border-radius:.9rem; background:#F4F6F2; color:#1E2A24; container-type:inline-size;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 50px 100px -30px rgba(0,0,0,.9), 0 20px 70px -30px rgba(34,197,94,.3);
  will-change:transform, opacity;
}
.js .bh-fenster{opacity:0}
.bh-leiste, .bh-app{font-size:calc(100cqw / 60)}
.bh-leiste{display:flex; align-items:center; gap:.4em; height:2.3em; margin:0; padding:0 .9em; background:#E3E8E1; color:#6B736E}
.bh-leiste i{flex:none; width:.75em; height:.75em; border-radius:50%; background:#FF5F57}
.bh-leiste i:nth-child(2){background:#FEBC2E}
.bh-leiste i:nth-child(3){background:#28C840}
.bh-leiste span{flex:1; margin-right:2.7em; text-align:center; font-weight:600}
.bh-app{position:absolute; left:0; right:0; top:2.3em; bottom:0; overflow:hidden; padding:.9em 1.3em; line-height:1.3}
.bh-kopf{display:flex; align-items:center; justify-content:space-between}
.bh-kopf b{font-size:1.3em; font-weight:800; letter-spacing:-.01em}
.bh-kopf em{font-style:normal; font-size:.7em; color:#7C8A82}
.bh-abschluss{padding:.4em .85em; border-radius:.5em; background:#FFFFFF; box-shadow:inset 0 0 0 1px #1F9D55; color:#157A42; font-size:.88em; font-weight:700; will-change:transform}
.bh-tabs{display:flex; gap:.3em; margin:.7em 0 0; font-size:.86em; font-weight:650}
.bh-tabs span{padding:.45em .85em; border-radius:.5em .5em 0 0; background:#E3E8E1; color:#56625B}
.bh-tabs .is-on{background:#FFFFFF; color:#1E2A24}
.bh-form{padding:.9em 1em 1em; border-radius:0 .7em .7em .7em; background:#FFFFFF; box-shadow:0 1px 0 #DDE3DB}
.bh-form-h{margin:0 0 .6em; font-size:.98em; font-weight:800}
.bh-felder{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:.55em .7em}
.bh-feld{grid-column:span 2; margin:0}
.bh-feld:first-child{grid-column:span 1}
.bh-feld--text{grid-column:span 3}
.bh-feld small{display:block; margin-bottom:.2em; font-size:.76em; color:#6B736E}
.bh-feld > span{position:relative; display:block; overflow:hidden; height:2.2em; border-radius:.45em; background:#F7F9F6; box-shadow:inset 0 0 0 1px #CFD7CC}
.bh-feld b{position:absolute; left:.7em; top:0; font-weight:500; line-height:2.2em; white-space:nowrap}
.bh-feld--wahl > span::after{content:"▾"; position:absolute; right:.6em; top:0; line-height:2.2em; color:#7C8A82}
.bh-feld--zahl b{left:auto; right:.7em; font-variant-numeric:tabular-nums}
.bh-speichern{display:inline-block; margin:.75em 0 0; padding:.5em 1.1em; border-radius:.5em; background:#1F9D55; color:#FFFFFF; font-size:.9em; font-weight:750; will-change:transform}
.bh-objekte{display:flex; align-items:center; gap:.5em; margin:.75em 0 0; font-size:.84em; color:#56625B}
.bh-objekte i{padding:.2em .6em; border-radius:.4em; background:#E7EFE9; color:#1E2A24; font-style:normal}
.bh-objekte i::before{content:"✓ "; color:#1F9D55; font-weight:800}
.bh-journal{margin-top:.6em; overflow:hidden; border-radius:.6em; background:#FFFFFF; box-shadow:0 0 0 1px #DDE3DB; font-size:.86em}
.bh-jz{
  display:grid; grid-template-columns:6.2em 6.9em minmax(0, 1fr) 3.1em 3.1em 5.4em; gap:.6em; align-items:center;
  height:2.2em; margin:0; padding:0 .9em; overflow:hidden; border-top:1px solid #EEF1EC; white-space:nowrap;
}
.bh-jz span{overflow:hidden; text-overflow:ellipsis}
.bh-jz span:last-child{text-align:right; font-weight:650; font-variant-numeric:tabular-nums}
.bh-jz--kopf{border-top:0; background:#F1F4EF; color:#56625B; font-size:.92em; font-weight:750}
.bh-jz i{padding:.1em .45em; border-radius:.35em; font-size:.9em; font-style:normal}
.bh-jz [data-o="f"]{background:#E0F2E9; color:#146C3A}
.bh-jz [data-o="p"]{background:#E6EEF9; color:#274C8A}
.bh-jz [data-o="s"]{background:#F6ECDD; color:#8A5A1E}
.bh-jz--neu{background:#F2FBF5}
/* Die zwei neuen Buchungen stehen erst im Journal, wenn sie gespeichert sind */
.js .bh-jz--neu{height:0; opacity:0; border-top-width:0}
.bh-meldung{
  position:absolute; right:1.3em; bottom:1.1em; display:flex; align-items:center; gap:.6em; margin:0;
  padding:.7em 1em; border-radius:.6em; background:#1E2A24; color:#FFFFFF; font-size:.9em; font-weight:650;
  box-shadow:0 1em 2em -1em rgba(0,0,0,.5); opacity:0; will-change:transform, opacity;
}
.bh-meldung i{position:relative; flex:none; width:1.3em; height:1.3em; border-radius:50%; background:#22C55E}
.bh-meldung i::after{content:""; position:absolute; left:.44em; top:.24em; width:.3em; height:.6em; border-right:.16em solid #062012; border-bottom:.16em solid #062012; transform:rotate(42deg)}

/* Unter dem Fenster: Erfolgsrechnung und Bilanz */
.bh-karten{
  position:absolute; z-index:5; left:calc(67% - var(--fw) / 2); top:calc(67 * var(--svh)); width:var(--fw);
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.bh-er, .bh-bilanz{
  position:relative; overflow:hidden; padding:.9rem 1.1rem; border-radius:1rem; background:rgba(10,26,20,.88); color:#E8F2EC;
  border:1px solid rgba(160,230,190,.18); box-shadow:0 30px 70px -30px rgba(0,0,0,.85); will-change:transform, opacity;
}
.js .bh-karten > *{opacity:0}
.bh-karte-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.3rem .5rem; margin:0 0 .55rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8FB5A0}
.bh-zeile{display:flex; justify-content:space-between; margin:0; padding:.12rem 0; font-size:.9rem; color:#C9DDD1; font-variant-numeric:tabular-nums}
/* Über dem Gewinn ist Platz für die Veränderung (+ 2'400, − 1'350) */
.bh-gewinn{position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin:1.45rem 0 0; padding-top:.55rem; border-top:1px solid rgba(160,230,190,.2)}
.bh-gewinn > span{font-weight:700}
.bh-gewinn b{font-size:clamp(1.15rem, .8rem + 1vw, 1.55rem); font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap}
.bh-delta{position:absolute; right:0; top:-1.35rem; padding:.05rem .45rem; border-radius:.45rem; font-size:.74rem; font-style:normal; font-weight:800; line-height:1.4; opacity:0}
.bh-delta--plus{background:#22C55E; color:#062012}
.bh-delta--minus{background:#F87171; color:#2A0707}
/* Nach dem Abschluss: eine Marke in der Kopfzeile jeder Karte */
.bh-stempel{padding:.05rem .45rem; border:1.5px solid #4ADE80; border-radius:.4rem; color:#4ADE80; font-size:.62rem; font-style:normal; font-weight:800; letter-spacing:.08em; opacity:0}
.bh-stempel::before{content:"✓ "}
.bh-waage{display:block; overflow:visible; width:auto; height:calc(9 * var(--svh)); margin:0 auto}
.bh-waage path, .bh-waage circle{fill:none; stroke:#8FB5A0; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.bh-waage .bh-fuss{fill:#8FB5A0; stroke:none}
.bh-waage .bh-seil{stroke:#6E9582; stroke-width:1.5}
.bh-waage .bh-pfanne{fill:rgba(74,222,128,.18); stroke:#4ADE80}
.bh-waage .bh-balken path{stroke:#E8F2EC; stroke-width:4}
.bh-waage .bh-balken circle{fill:#0A1A14; stroke:#E8F2EC}
.bh-seiten{display:flex; align-items:center; gap:.4rem; margin:.35rem 0 0; text-align:center}
.bh-seiten span{flex:1; min-width:0}
.bh-seiten small{display:block; font-size:.68rem; color:#8FB5A0}
.bh-seiten b{display:block; font-size:.92rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.bh-seiten em{font-style:normal; font-weight:800; color:#4ADE80}

.bh-copy{position:absolute; z-index:7; left:var(--pad); top:calc(16 * var(--svh)); width:min(28rem, 31vw)}
.bh-copy .headline{max-width:12ch}
.bh-punkte{list-style:none; margin:1.8rem 0 0; padding:0; display:grid; gap:1rem}
.bh-punkte li{
  position:relative; padding-left:2.3rem; font-weight:640; font-size:1.02rem; line-height:1.35; color:rgba(236,237,242,.4);
  transition:color .35s ease;
}
.bh-punkte li::before{
  content:""; position:absolute; left:0; top:-.05rem; width:1.5rem; height:1.5rem; border-radius:50%;
  border:1px solid rgba(236,237,242,.25); transition:background .35s ease, border-color .35s ease;
}
.bh-punkte li.on{color:#FFFFFF}
.bh-punkte li.on::before{border-color:#4ADE80; background:#4ADE80 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4 8.5 13.2 14.4 7' fill='none' stroke='%23062012' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat}
.js .bh-copy :is(.kicker, .bh-punkte){opacity:0}
.js .bh-copy .w{opacity:0}
.js .bh-copy .headline{visibility:hidden}
.is-ready .bh-copy .headline{visibility:inherit}
@media (orientation: portrait){
  #buchhaltung{--fw:calc(100vw - 2 * var(--pad))}
  .bh-copy{left:var(--pad); right:var(--pad); top:calc(9 * var(--svh)); width:auto}
  .bh-copy .headline{max-width:none; font-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.4rem)}
  .bh-punkte{margin-top:1rem; gap:.35rem}
  .bh-punkte li{padding-left:1.75rem; font-size:.86rem}
  .bh-punkte li::before{top:.05rem; width:1.15rem; height:1.15rem}
  .bh-xls{left:var(--pad); right:var(--pad); top:calc(46 * var(--svh)); width:auto}
  .bh-xls-raster{grid-template-columns:1.4rem 3.2rem minmax(0, 1fr) 4.6rem 4.6rem; font-size:.64rem}
  .bh-zettel{left:auto; right:var(--pad); top:calc(36.5 * var(--svh)); width:6.4rem; font-size:1.15rem; padding:.75rem .7rem}
  .bh-beleg{width:10.5rem; font-size:.64rem}
  .bh-beleg--bank{left:var(--pad); top:calc(67 * var(--svh))}
  .bh-beleg--kasse{left:auto; right:var(--pad); top:calc(73 * var(--svh))}
  .bh-fenster{left:var(--pad); top:calc(36 * var(--svh)); height:calc(38 * var(--svh)); border-radius:.8rem}
  .bh-leiste, .bh-app{font-size:calc(100cqw / 37)}
  .bh-app{padding:.7em .9em}
  .bh-tabs span:nth-child(n+3){display:none}
  /* Das Datum hat hier keinen Platz; Objekt und Text teilen sich die Zeile */
  .bh-feld:first-child{display:none}
  .bh-feld--text{grid-column:span 4}
  .bh-objekte{display:none}
  .bh-jz{grid-template-columns:5.4em 6.2em minmax(0, 1fr) 5.2em; gap:.45em; padding:0 .7em}
  .bh-jz span:nth-child(4), .bh-jz span:nth-child(5){display:none}
  .bh-karten{left:var(--pad); top:calc(76.5 * var(--svh)); gap:.55rem}
  .bh-er, .bh-bilanz{padding:.65rem .7rem; border-radius:.8rem}
  .bh-karte-h{margin-bottom:.35rem; font-size:.6rem}
  .bh-zeile{font-size:.72rem; padding:0}
  .bh-gewinn{flex-direction:column; align-items:flex-start; gap:0; margin-top:.35rem; padding-top:.3rem}
  .bh-gewinn > span{font-size:.72rem}
  .bh-gewinn b{font-size:1rem}
  .bh-delta{top:.3rem; font-size:.62rem}
  .bh-stempel{font-size:.52rem; letter-spacing:.05em}
  .bh-waage{height:calc(6.5 * var(--svh))}
  .bh-seiten{margin-top:.2rem; gap:.2rem}
  .bh-seiten small{font-size:.58rem}
  .bh-seiten b{font-size:.72rem}
}

/* --- Kapitel Ablauf -------------------------------------------------------------
   Links die vier Schritte, rechts die Illustration. Der aktive Schritt
   zeigt seinen Text, die anderen nur den Titel (Klasse .on vom Skript). */
#ablauf{--len:400}
#ablauf .stage-bg{background:radial-gradient(100% 90% at 70% 60%, #1A2033 0%, var(--bg) 60%, var(--bg-deep) 100%)}
.ab-bild{position:absolute; z-index:3; left:40vw; right:calc(var(--pad) * .6); top:calc(11 * var(--svh)); bottom:calc(5 * var(--svh))}
.ab-bild{display:grid; place-items:center; container-type:size}
.ab-bild svg{display:block; width:100%; height:100%}
@supports (width: 1cqw){ .ab-bild svg{width:min(100cqw, 125cqh); height:auto; aspect-ratio:1000 / 800} }
/* Die Illustration hat keinen Rahmen: ihre Ränder laufen weich in die Seite */
.bau{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 7%, #000 90%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 7%, #000 90%, transparent);
  mask-composite:intersect;
}
/* Anfangszustand für die Bewegung: nur Himmel, Hügel und Bauplatz */
.js .bau{opacity:0}
.js .bau :is(#b-night, #b-stars, #b-grid, #b-plan, #b-dims, #b-foundation, #b-frame, #b-house, #b-garden, #b-scaffold, #b-crane, #b-people-end, #b-people, #b-bubble-1, #b-bubble-2, #b-bubble-3, #b-offer, #b-tests, #b-care, .licht){opacity:0}
.js .bau :is(#b-plan, #b-dims) :is(path, circle, rect, ellipse, line, polyline){stroke-dasharray:1; stroke-dashoffset:1}
.js .bau :is(#b-check-1, #b-check-2, #b-check-3){stroke-dasharray:1; stroke-dashoffset:1; opacity:0}
/* Ohne Skript: das fertige Haus am Abend */
:root:not(.js) .bau :is(#b-grid, #b-plan, #b-dims, #b-material, #b-frame, #b-scaffold, #b-crane, #b-people, #b-bubble-1, #b-bubble-2, #b-bubble-3, #b-offer, #b-tests){display:none}
.ab-copy{position:absolute; z-index:6; left:var(--pad); top:calc(13 * var(--svh)); width:min(27rem, 34vw)}
.ab-copy .headline{max-width:12ch}
.ab-schritte{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.35rem}
.ab-schritte li{position:relative; display:grid; grid-template-columns:2.4rem 1fr; gap:.9rem; padding:.7rem .2rem; color:rgba(236,237,242,.45); transition:color .4s ease}
.ab-schritte li::before{content:""; position:absolute; left:1.2rem; top:3.1rem; bottom:-.6rem; width:1px; background:rgba(236,237,242,.14)}
.ab-schritte li:last-child::before{display:none}
.ab-nr{
  display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%;
  font-family:var(--mono); font-size:.85rem; font-weight:700; border:1px solid rgba(236,237,242,.25);
  transition:background .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.ab-schritte b{display:block; margin-top:.45rem; font-size:1.08rem; font-weight:700; color:inherit; letter-spacing:-.01em}
.ab-schritte p{margin:.35rem 0 0; font-size:.95rem; line-height:1.5; color:var(--muted); max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease-out), opacity .4s ease}
.ab-schritte small{display:block; margin-top:.35rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:#FE9A93; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease-out), opacity .4s ease}
.ab-schritte li.on{color:var(--ink)}
.ab-schritte li.on .ab-nr{background:var(--coral); border-color:var(--coral); color:var(--coral-fg); box-shadow:0 0 0 .35rem rgba(254,121,113,.16)}
.ab-schritte li.on p{max-height:6rem; opacity:1}
.ab-schritte li.on small{max-height:2.5rem; opacity:1}
.ab-schritte li.fertig{color:rgba(236,237,242,.72)}
.ab-schritte li.fertig .ab-nr{border-color:rgba(254,121,113,.6); color:#FE9A93}
.js .ab-copy :is(.kicker, .ab-schritte){opacity:0}
.js .ab-copy .w{opacity:0}
.js .ab-copy .headline{visibility:hidden}
.is-ready .ab-copy .headline{visibility:inherit}
@media (orientation: portrait){
  .ab-bild{left:0; right:0; top:calc(22 * var(--svh)); bottom:auto; height:calc(30 * var(--svh))}
  .ab-copy{left:var(--pad); right:var(--pad); top:calc(10 * var(--svh)); width:auto}
  .ab-copy .headline{max-width:none; font-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.4rem)}
  /* hoch: alle vier Schritte unter dem Bild, der aktuelle mit seinem Text.
     44 unter dem Textblock sind 54 auf der Bühne. */
  .ab-schritte{position:absolute; left:0; right:0; top:calc(44 * var(--svh)); margin:0; gap:0}
  .ab-schritte li{grid-template-columns:1.9rem 1fr; gap:.75rem; padding:.3rem 0}
  .ab-schritte li::before{left:.95rem; top:2.35rem; bottom:-.3rem}
  .ab-nr{width:1.9rem; height:1.9rem; font-size:.74rem}
  .ab-schritte b{margin-top:.28rem; font-size:.95rem}
  .ab-schritte p{margin-top:.25rem; font-size:.84rem; line-height:1.45}
  .ab-schritte small{margin-top:.25rem; font-size:.64rem}
}

/* --- Kapitel Preise -------------------------------------------------------------- */
#preise{--len:380}
#preise .stage-bg{background:radial-gradient(90% 80% at 72% 45%, #221A24 0%, var(--bg) 58%, var(--bg-deep) 100%)}
.pr-copy{position:absolute; z-index:6; left:var(--pad); top:calc(14 * var(--svh)); width:min(29rem, 34vw)}
.pr-copy .headline{max-width:12ch}
.pr-copy .sub{max-width:36ch}
.js .pr-copy :is(.kicker, .sub){opacity:0}
.js .pr-copy .w{opacity:0}
.js .pr-copy .headline{visibility:hidden}
.is-ready .pr-copy .headline{visibility:inherit}
.pr-art{margin:0 0 .5rem; font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--coral)}
.pr-note{margin:0; font-size:.9rem; line-height:1.45; color:var(--muted)}
.pr-tag{position:absolute; z-index:5; left:calc(50vw + 4rem); top:0; width:min(21rem, 27vw); transform-origin:50% 0}
.pr-schnur{display:block; width:3.6rem; height:calc(15 * var(--svh)); margin:0 auto}
.pr-schnur path{fill:none; stroke:rgba(236,237,242,.35); stroke-width:1.6; stroke-dasharray:1; vector-effect:non-scaling-stroke}
.pr-tag-karte{
  position:relative; margin-top:-.4rem; padding:2.4rem 1.8rem 1.6rem; border-radius:1.2rem 1.2rem 1.6rem 1.6rem;
  background:linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.pr-loch{position:absolute; left:50%; top:.85rem; width:.9rem; height:.9rem; margin-left:-.45rem; border-radius:50%; background:var(--bg); box-shadow:inset 0 1px 2px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.2)}
.pr-ab{margin:0; font-size:1rem; color:var(--muted)}
.pr-betrag{margin:.1rem 0 .7rem; font-size:clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem); font-weight:780; letter-spacing:-.04em; line-height:1.05; color:var(--ink)}
.pr-betrag b{font-weight:inherit; font-variant-numeric:tabular-nums}
.pr-etappen{position:absolute; z-index:5; left:44vw; right:var(--pad); top:calc(60 * var(--svh))}
.pr-etappen-h{margin:0 0 1.6rem; font-size:1.25rem; font-weight:700; letter-spacing:-.015em}
.pr-bahn{position:relative; display:grid; grid-template-columns:repeat(3, 1fr); height:5.2rem; margin-bottom:1.1rem}
.pr-linie{position:absolute; left:1rem; right:1rem; top:.95rem; height:2px; background:rgba(236,237,242,.14); border-radius:2px}
.pr-linie i{position:absolute; inset:0; background:linear-gradient(90deg, #FE7971, #FFB0A8); border-radius:inherit; transform-origin:0 50%; transform:scaleX(0)}
.pr-punkt{position:absolute; left:1rem; top:.95rem; width:.9rem; height:.9rem; margin:-.45rem 0 0 -.45rem; border-radius:50%; background:#FFD2CC; box-shadow:0 0 0 .35rem rgba(254,121,113,.25), 0 0 1.4rem .3rem rgba(254,121,113,.6)}
.pr-halt{position:relative; padding-top:2.3rem; text-align:center}
.pr-halt::before{content:""; position:absolute; left:50%; top:.35rem; width:1.2rem; height:1.2rem; margin-left:-.6rem; border-radius:50%; background:var(--bg); border:2px solid rgba(236,237,242,.3); transition:background .3s ease, border-color .3s ease}
.pr-halt.on::before{background:var(--coral); border-color:var(--coral)}
.pr-halt b{display:block; font-size:.95rem}
.pr-halt small{display:block; margin-top:.2rem; font-size:.78rem; font-weight:650; color:#6FD9A6; opacity:0; transform:translateY(4px); transition:opacity .35s ease, transform .35s var(--ease-out)}
.pr-halt.on small{opacity:1; transform:none}
.js :is(.pr-tag, .pr-etappen, .pr-weg){opacity:0}
.js .pr-schnur path{stroke-dashoffset:1}
.pr-wege{position:absolute; z-index:5; left:44vw; right:var(--pad); top:calc(16 * var(--svh)); display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.pr-weg{
  padding:1.4rem 1.5rem 1.6rem; border-radius:1.4rem;
  background:linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.pr-weg h3{margin:1rem 0 .5rem; font-size:1.2rem; font-weight:720; letter-spacing:-.015em}
.pr-weg p{margin:0; font-size:.93rem; line-height:1.5; color:var(--muted)}
.pr-kiste{display:block; width:100%; height:auto; max-height:calc(26 * var(--svh)); overflow:visible}
.js .pr-deckel{opacity:0}
.pr-orbit{position:relative; height:calc(26 * var(--svh)); min-height:9rem}
.pr-bahnring{position:absolute; left:calc(50% - var(--rx, 42%)); right:calc(50% - var(--rx, 42%)); top:20%; bottom:20%; border-radius:50%; border:1px dashed rgba(236,237,242,.22)}
.pr-mitte{position:absolute; left:50%; top:50%; z-index:2; display:grid; place-items:center; width:4.6rem; height:3.4rem; margin:-1.7rem 0 0 -2.3rem; border-radius:.9rem; background:#1B1C23; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 16px 34px -12px rgba(0,0,0,.8), 0 0 40px -6px rgba(254,121,113,.45)}
.pr-mitte svg{width:2.4rem; height:auto}
.pr-dienst{position:absolute; left:0; top:0; z-index:3; display:flex; align-items:center; gap:.4rem; padding:.42rem .75rem; border-radius:999px; white-space:nowrap; font-size:.8rem; font-weight:650; background:#23242C; color:var(--ink); box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 10px 22px -10px rgba(0,0,0,.8); will-change:transform}
.pr-dienst .flag{margin:0; width:.95em; height:.95em}
@media (orientation: portrait){
  .pr-copy{left:var(--pad); right:var(--pad); top:calc(10 * var(--svh)); width:auto}
  .pr-copy .headline{max-width:none; font-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.4rem)}
  .pr-copy .sub{font-size:.93rem}
  .pr-tag{left:auto; right:var(--pad); width:min(15rem, 62vw); top:calc(38 * var(--svh) - 12 * var(--svh))}
  .pr-schnur{height:calc(7 * var(--svh))}
  .pr-tag-karte{padding:1.75rem 1.2rem 1rem}
  .pr-etappen{left:var(--pad); right:var(--pad); top:calc(69 * var(--svh))}
  .pr-etappen-h{font-size:1.05rem; margin-bottom:1.1rem}
  /* hoch: Bild über dem Text, so hat der Ring die ganze Kartenbreite */
  .pr-wege{left:var(--pad); right:var(--pad); top:calc(29 * var(--svh)); grid-template-columns:1fr; gap:.8rem}
  .pr-weg{padding:.7rem 1.1rem 1rem}
  .pr-weg h3{margin:.35rem 0 .25rem; font-size:1rem}
  .pr-weg p{font-size:.8rem; line-height:1.42}
  .pr-kiste{height:calc(12.5 * var(--svh)); max-height:7rem; width:100%}
  .pr-orbit{height:calc(12.5 * var(--svh)); max-height:7rem; min-height:0}
  .pr-mitte{width:3.6rem; height:2.6rem; margin:-1.3rem 0 0 -1.8rem; border-radius:.7rem}
  .pr-mitte svg{width:1.9rem}
  .pr-dienst{font-size:.66rem; padding:.3rem .55rem}
}

/* --- Kapitel Über mich ---------------------------------------------------------- */
#motivation{--len:380}
#motivation .stage-bg{background:radial-gradient(90% 90% at 64% 50%, #1E1A22 0%, var(--bg) 58%, var(--bg-deep) 100%)}
.um-copy{position:absolute; z-index:6; left:var(--pad); top:calc(14 * var(--svh)); width:min(28rem, 32vw)}
.um-copy .headline{max-width:13ch}
.um-copy .sub{font-size:clamp(.98rem, .92rem + .3vw, 1.15rem)}
.js .um-copy :is(.kicker, .sub){opacity:0}
.js .um-copy .w{opacity:0}
.js .um-copy .headline{visibility:hidden}
.is-ready .um-copy .headline{visibility:inherit}
.um-foto{position:absolute; z-index:4; left:calc(66vw - var(--fd) / 2); top:calc(52 * var(--svh) - var(--fd) / 2); width:var(--fd); height:var(--fd); margin:0; --fd:min(38 * var(--svh), 26vw)}
.um-foto::before{content:""; position:absolute; inset:-14%; border-radius:50%; background:radial-gradient(closest-side, rgba(254,121,113,.3), rgba(254,121,113,0))}
.um-foto img{position:relative; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; border-radius:50%; box-shadow:0 0 0 .35rem rgba(17,16,21,.9), 0 0 0 .45rem rgba(254,121,113,.55), 0 30px 60px -20px rgba(0,0,0,.8)}
.js .um-foto{opacity:0}
.um-karten{position:absolute; inset:0; z-index:5; margin:0; padding:0; list-style:none; pointer-events:none}
.um-karte{
  position:absolute; left:0; top:0; display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem .7rem .75rem; border-radius:1rem;
  background:linear-gradient(160deg, rgba(40,38,48,.92), rgba(24,23,30,.92)); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 48px -22px rgba(0,0,0,.85); white-space:nowrap; will-change:transform, opacity;
}
.um-icon{flex:none; width:2.3rem; height:2.3rem; color:var(--ink)}
/* Die Symbole liegen einmal im Sprite; Regeln greifen am Original, deshalb
   ohne Karten-Vorfahren im Selektor */
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.sprite .akzent{color:var(--coral)}
.ch-umriss{fill:rgba(236,237,242,.045); stroke:rgba(236,237,242,.55); stroke-width:1.1px; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.ch-see{fill:rgba(236,237,242,.14)}
.ch-stadt{fill:rgba(236,237,242,.55)}
.um-pin{fill:var(--coral)}
.um-puls{fill:none; stroke:var(--coral); stroke-width:3; transform-box:fill-box; transform-origin:center; animation:um-puls 2.6s cubic-bezier(.23,1,.32,1) infinite}
@keyframes um-puls{from{transform:scale(1); opacity:.9} to{transform:scale(4.2); opacity:0}}
.um-karte b{display:block; font-size:.95rem; font-weight:700; letter-spacing:-.01em}
.um-karte small{display:block; font-size:.75rem; color:var(--muted)}
/* Wohnort: quer eine grössere Karte mit der Schweiz unter dem Text, hoch
   ersetzt die kleine Karte das Symbol */
.um-karte--ort{flex-wrap:wrap; width:16rem; white-space:normal; padding:.8rem 1rem 1rem .8rem}
.um-karte--ort .um-karte-karte{flex:0 0 100%; width:100%; height:auto; margin-top:.55rem}
.js .um-karte{opacity:0}
@media (orientation: portrait){
  .um-copy{left:var(--pad); right:var(--pad); top:calc(10 * var(--svh)); width:auto}
  .um-copy .headline{max-width:none; font-size:clamp(1.8rem, 1.3rem + 2.6vw, 2.4rem)}
  .um-copy .sub{display:none}
  .um-foto{--fd:min(40vw, 22 * var(--svh)); left:calc(50vw - var(--fd) / 2); top:calc(42 * var(--svh) - var(--fd) / 2)}
  .um-karte{padding:.5rem .7rem .5rem .55rem; gap:.5rem; border-radius:.8rem}
  .um-icon{width:1.7rem; height:1.7rem}
  .um-karte b{font-size:.78rem}
  .um-karte small{font-size:.64rem}
  .um-karte--ort{flex-wrap:nowrap; width:auto; white-space:nowrap; padding:.45rem .7rem .45rem .5rem}
  .um-karte--ort .um-icon{display:none}
  .um-karte--ort .um-karte-karte{order:-1; flex:none; width:3.6rem; margin:0}
}

/* --- Kontakt ------------------------------------------------------------------------ */
.kontakt{position:relative; padding:clamp(5rem, 11vw, 8.5rem) var(--pad) clamp(4rem, 9vw, 7rem); background:radial-gradient(70% 60% at 70% 40%, rgba(254,121,113,.08), transparent 70%), var(--bg)}
.kt-inner{max-width:72rem; margin:0 auto; display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); gap:clamp(2rem, 5vw, 5rem); align-items:start}
.kt-h{margin:0; font-size:clamp(2.2rem, 1.3rem + 3vw, 3.8rem); font-weight:740; letter-spacing:-.04em; line-height:1.04}
.kt-sub{margin:1.1rem 0 0; max-width:30ch; color:var(--muted); font-size:clamp(1.02rem, .96rem + .3vw, 1.2rem); line-height:1.5}
.kt-mail{display:flex; align-items:center; gap:.9rem; margin-top:2rem; padding:1rem 1.2rem; border-radius:1rem; max-width:22rem; text-decoration:none; color:var(--ink); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); transition:border-color .16s ease, background .16s ease}
.kt-mail svg{flex:none; width:1.6rem; height:1.6rem; color:var(--coral)}
.kt-mail b{display:block; font-size:1rem}
.kt-mail small{display:block; font-size:.8rem; color:var(--muted)}
@media (hover: hover) and (pointer: fine){ .kt-mail:hover{border-color:rgba(254,121,113,.5); background:rgba(254,121,113,.06)} }
.kt-form{position:relative; display:grid; gap:1.1rem; padding:clamp(1.4rem, 3vw, 2.4rem); border-radius:1.7rem; background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.02))}
.kt-rahmen{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.kt-rahmen rect{width:calc(100% - 2px); height:calc(100% - 2px); fill:none; stroke:rgba(254,121,113,.6); stroke-width:1.2; stroke-dasharray:1; stroke-dashoffset:0}
.kt-reihe{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
.kt-feld{position:relative; display:grid; gap:.45rem}
.kt-feld label{font-size:.85rem; font-weight:650; color:#C9CDD6}
.kt-feld .opt{font-weight:500; color:var(--muted)}
.kt-feld input, .kt-feld textarea{
  width:100%; padding:.85rem 1rem; border-radius:.8rem; border:1px solid rgba(255,255,255,.14); background:rgba(10,10,14,.55);
  color:var(--ink); font:inherit; font-size:1rem; line-height:1.4; resize:vertical;
  transition:border-color .16s ease, box-shadow .2s ease, background .16s ease;
}
.kt-feld textarea{min-height:8.5rem}
.kt-feld input:focus, .kt-feld textarea:focus{outline:none; border-color:rgba(254,121,113,.8); box-shadow:0 0 0 .3rem rgba(254,121,113,.16); background:rgba(10,10,14,.75)}
.kt-hinweis{margin:0; font-size:.8rem; line-height:1.5; color:var(--muted)}
.kt-hinweis a, .kt-note a{color:#FFB0A8}
.kt-fuss{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem}
.kt-senden{padding:.95rem 1.5rem}
.kt-senden[disabled]{opacity:.6; cursor:progress}
.kt-note{margin:0; font-size:.82rem; color:var(--muted)}
.kt-danke{display:grid; justify-items:start; gap:.7rem; padding:1.4rem .2rem}
.kt-danke svg{width:3.4rem; height:3.4rem}
.kt-danke circle{fill:none; stroke:rgba(111,217,166,.35); stroke-width:3}
.kt-danke path{fill:none; stroke:#6FD9A6; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; animation:kt-haken .7s var(--ease-out) .15s forwards}
@keyframes kt-haken{to{stroke-dashoffset:0}}
.kt-danke b{font-size:1.35rem; letter-spacing:-.02em}
.kt-danke p{margin:0; color:var(--muted)}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.js .kt-rahmen rect{stroke-dashoffset:1}
.js :is(.kt-text > *, .kt-form > :not(.kt-rahmen):not(.visually-hidden):not(.kt-danke)){opacity:0}
@media (max-width: 52rem){
  .kt-inner{grid-template-columns:1fr}
  .kt-reihe{grid-template-columns:1fr}
}

/* --- FAQ ------------------------------------------------------------------------------ */
.faq{position:relative; padding:clamp(4.5rem, 10vw, 8rem) var(--pad) clamp(5rem, 10vw, 8rem); background:linear-gradient(var(--bg), var(--bg-deep))}
.fq-inner{max-width:52rem; margin:0 auto}
.fq-kopf{text-align:center}
.fq-kopf .kicker{justify-content:center}
/* Mit Skript: links der Titel, rechts das Fenster – Verlauf und Fragen
   darin, damit alles zugleich im Bild ist */
@media (min-width: 60rem){
  .faq:has(.fq-chat:not([hidden])) .fq-inner{max-width:72rem; display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(2rem, 5vw, 5rem); align-items:center}
  .faq:has(.fq-chat:not([hidden])) .fq-kopf{text-align:left}
  .faq:has(.fq-chat:not([hidden])) .fq-kopf .kicker{justify-content:flex-start}
  .faq:has(.fq-chat:not([hidden])) .fq-sub{margin-left:0}
  .faq:has(.fq-chat:not([hidden])) .fq-chat{margin-top:0}
}
.fq-h{margin:0; font-size:clamp(2.2rem, 1.3rem + 3vw, 3.8rem); font-weight:740; letter-spacing:-.04em; line-height:1.04}
.fq-sub{margin:1rem auto 0; max-width:36ch; color:var(--muted)}
.fq-liste{margin:2.6rem 0 0; display:grid; gap:1rem}
.fq-eintrag{padding:1.2rem 1.4rem; border-radius:1.1rem; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08)}
.fq-eintrag dt{font-weight:700; font-size:1.05rem}
.fq-eintrag dd{margin:.5rem 0 0; color:var(--muted); line-height:1.55}
.fq-eintrag a, .fq-blase a{color:#FFB0A8}
.fq-chat{margin-top:2.6rem}
.fq-fenster{
  position:relative; display:flex; flex-direction:column; height:min(40rem, 80 * var(--svh)); border-radius:1.6rem; overflow:hidden;
  background:linear-gradient(170deg, rgba(34,33,42,.92), rgba(20,19,26,.94)); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.3);
}
.fq-titel{display:flex; align-items:center; gap:.8rem; padding:1rem 1.3rem; border-bottom:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025)}
.fq-titel img{width:2.6rem; height:2.6rem; border-radius:50%; object-fit:cover; object-position:50% 30%; box-shadow:0 0 0 2px rgba(254,121,113,.5)}
.fq-titel b{display:block; font-size:.98rem}
.fq-titel small{display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--muted)}
.fq-titel small i{width:.5rem; height:.5rem; border-radius:50%; background:#3DDC97; box-shadow:0 0 0 .2rem rgba(61,220,151,.18)}
.fq-verlauf{flex:1; min-height:0; display:flex; flex-direction:column; gap:.7rem; padding:1.3rem 1.3rem 1.5rem; overflow-y:auto; scroll-behavior:smooth; overscroll-behavior:contain}
.fq-blase{max-width:82%; padding:.8rem 1.05rem; border-radius:1.2rem; line-height:1.5; font-size:.97rem; transform-origin:0 100%}
.fq-blase--du{align-self:flex-end; transform-origin:100% 100%; border-bottom-right-radius:.35rem; background:linear-gradient(160deg, #FE7971, #F2645C); color:#22100F; font-weight:620}
.fq-blase--ich{align-self:flex-start; border-bottom-left-radius:.35rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); color:#DADDE4}
.fq-tippt{display:inline-flex; gap:.3rem; padding:.95rem 1rem}
.fq-tippt i{width:.45rem; height:.45rem; border-radius:50%; background:rgba(236,237,242,.55); animation:fq-tippt 1s ease-in-out infinite}
.fq-tippt i:nth-child(2){animation-delay:.15s}
.fq-tippt i:nth-child(3){animation-delay:.3s}
@keyframes fq-tippt{0%, 60%, 100%{transform:translateY(0); opacity:.5} 30%{transform:translateY(-.3rem); opacity:1}}
.fq-fragen{flex:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:.85rem 1rem 1rem; border-top:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02)}
.fq-fragen:empty{display:none}
.fq-frage{
  padding:.65rem 1rem; border-radius:999px; border:1px solid rgba(254,121,113,.35); background:rgba(254,121,113,.07);
  color:var(--ink); font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; text-align:left;
  transition:background .16s ease, border-color .16s ease, transform .16s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){ .fq-frage:hover{background:rgba(254,121,113,.16); border-color:rgba(254,121,113,.7)} }
.fq-frage:active{transform:scale(.97)}
.fq-frage[disabled]{opacity:.35; cursor:default}
.fq-schluss{align-self:center; margin-top:.4rem}
/* schmal: die Fragen untereinander, das Fenster wird dafür höher */
@media (max-width: 40rem){
  .fq-fenster{height:min(48rem, 88 * var(--svh))}
  .fq-fragen{flex-direction:column; align-items:stretch; gap:.4rem; padding:.7rem .8rem .8rem}
  .fq-frage{padding:.55rem .85rem; border-radius:.85rem; font-size:.86rem; line-height:1.35}
}
@media (max-width: 40rem){
  .fq-blase{max-width:90%; font-size:.92rem}
  .fq-verlauf{padding:1rem .9rem 1.2rem}
}

/* --- Fuss ---------------------------------------------------------------------------- */
.fuss{padding:2.6rem var(--pad) calc(2.2rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--bg-deep)}
.fs-inner{max-width:72rem; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem}
.fs-links{margin:0; display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-size:.92rem}
.fs-links a{color:var(--ink); text-decoration:none}
.fs-links a:hover{color:var(--coral)}
.fs-copy{margin:0; width:100%; font-size:.8rem; color:var(--muted)}
.fuss .brand-mark path{animation:none}
.fuss .brand-name, .fuss .brand small{animation:none}

/* --- Kapitel Erstgespräch -------------------------------------------------------
   Die Fäden vom Anfang kommen zurück und zeichnen das Signet. Chaos,
   Ordnung, Marke – die Geschichte endet dort, wo das Gespräch beginnt. */
#gespraech{--len:260}
.gs-threads, .gs-glow{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.gs-lockup{
  position:absolute; z-index:4; left:0; right:0; top:calc(17 * var(--svh));
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.gs-mark{width:clamp(9rem, 19vw, 17rem); height:auto; overflow:visible}
.gs-mark path{fill:none; stroke-width:12.2; stroke-linecap:round; stroke-linejoin:round}
.js .gs-mark{opacity:0}
.gs-w{stroke:#ECEDF2}
.gs-r{stroke:#FE7971}
.gs-word{margin:1.3rem 0 0; font-size:clamp(2.4rem, 1.4rem + 3.4vw, 4.8rem); font-weight:780; letter-spacing:-.045em; line-height:1}
.gs-claim{margin:.7rem 0 0; font-family:var(--mono); font-size:clamp(.66rem, .56rem + .35vw, .95rem); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.js :is(.gs-word, .gs-claim){opacity:0}
.gs-copy{position:absolute; z-index:6; left:var(--pad); right:var(--pad); top:calc(58 * var(--svh)); text-align:center}
.gs-copy .headline{margin-inline:auto; max-width:20ch}
.gs-copy .sub{margin-inline:auto}
.gs-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; margin-top:1.9rem}
.js .gs-copy :is(.sub, .gs-actions){opacity:0}
.js .gs-copy .w{opacity:0}
.js .gs-copy .headline{visibility:hidden}
.is-ready .gs-copy .headline{visibility:inherit}
@media (orientation: portrait){
  .gs-lockup{top:calc(15 * var(--svh))}
  .gs-copy{top:calc(49 * var(--svh))}
  .gs-copy .headline{font-size:clamp(1.9rem, 1.4rem + 2.8vw, 2.6rem)}
}

.cue{
  position:absolute; left:50%; bottom:calc(3.5 * var(--svh)); z-index:8; transform:translateX(-50%);
  display:grid; justify-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.cue i{position:relative; width:1px; height:2.8rem; overflow:hidden; background:linear-gradient(rgba(236,237,242,0), rgba(236,237,242,.45))}
.cue i::after{
  content:""; position:absolute; left:-1px; top:0; width:3px; height:.8rem; border-radius:2px;
  background:var(--coral); animation:cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue{from{transform:translateY(-1rem)} to{transform:translateY(3rem)}}
/* --- Ohne Skript -----------------------------------------------------------
   Fällt das Skript aus oder kommt GSAP nicht an, steht die Geschichte als
   ruhige Seite da: die Texte, das eingeschaltete Tablet, die vier Punkte,
   danach jedes Kapitel mit seinem Endbild. Kein leerer Kasten, kein Text,
   der auf eine Animation wartet. */
:root:not(.js) .story{height:auto}
:root:not(.js) .stage{
  position:relative; height:auto; overflow:hidden; perspective:none;
  display:flex; flex-direction:column; gap:3rem; padding:8rem var(--pad) 5rem;
}
:root:not(.js) :is(.threads, .threads-glow, .papers, .badge, .links, .cue){display:none}
:root:not(.js) .haze{opacity:1}
:root:not(.js) .scene{position:relative; width:auto; left:auto; right:auto; top:auto; text-align:left}
:root:not(.js) .s2 .headline, :root:not(.js) .s2 .sub{margin-inline:0}
:root:not(.js) .s1{order:1}
:root:not(.js) .s2{order:2}
:root:not(.js) .device{order:3; position:relative; left:auto; top:auto; margin-inline:auto}
:root:not(.js) .s3{order:4}
:root:not(.js) .callouts{order:5; position:relative; inset:auto; display:grid; gap:.9rem}
:root:not(.js) .callout{position:relative; left:auto; top:auto; opacity:1; width:auto}

/* Die weiteren Kapitel: oben der Text, darunter das Bild im Endzustand.
   Was nur als Bewegung Sinn ergibt (Leuchtringe, die E-Mail, die
   davonfliegt, Karten und Rangliste, die das Skript zeichnet), fehlt. */
:root:not(.js) :is(.gz-ring, .ft-mail, .dt-field, .dt-rank, .dt-btn, .vb-aushang, .vb-fragen, .vb-plan, .bh-vorher, .bh-beleg, .gs-threads, .gs-glow){display:none}
:root:not(.js) :is(.gz-sky, .ft-glow, .vb-glow, .bh-glow){opacity:1}
:root:not(.js) :is(.gz-copy, .dt-copy, .ft-copy, .vb-copy, .bh-copy, .gs-lockup, .gs-copy){
  order:1; position:relative; inset:auto; left:auto; right:auto; top:auto; width:auto; max-width:42rem;
}
:root:not(.js) :is(.gs-lockup, .gs-copy){max-width:none}
:root:not(.js) .gs-copy{order:2}
:root:not(.js) .gz-copy > *, :root:not(.js) .ft-points, :root:not(.js) .ft-points li{position:relative; left:auto; right:auto; top:auto}
:root:not(.js) .gz-copy .sub{display:block}
:root:not(.js) :is(.gz-areas, .gz-no, .ft-points, .vb-punkte, .bh-punkte){margin-top:1.6rem}
:root:not(.js) :is(.gz-device, .ft-phone, .vb-phone){order:2; position:relative; left:auto; top:auto; margin-inline:auto}
:root:not(.js) :is(.dt-steps li, .ft-points li, .vb-punkte li, .bh-punkte li){opacity:1; color:var(--ink)}
:root:not(.js) .dt-steps li span{background:var(--coral); border-color:var(--coral); color:var(--coral-fg)}
/* Buchhaltung: das Fenster mit beiden Buchungen, darunter Erfolgsrechnung
   und Bilanz */
:root:not(.js) :is(.bh-fenster, .bh-karten){order:2; position:relative; left:auto; top:auto; margin-inline:auto; max-width:100%}
:root:not(.js) .bh-karten{order:3; height:auto; min-height:11rem}
:root:not(.js) .bh-punkte li::before{border-color:#4ADE80; background:#4ADE80 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4 8.5 13.2 14.4 7' fill='none' stroke='%23062012' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat}

/* Volleyballturnier: im Handy das Dashboard eines Teams */
:root:not(.js) .vb-view--plan{display:none}
:root:not(.js) .vb-tabs span:nth-child(3){background:#181E44; color:#C9CEEF}
:root:not(.js) .vb-tabs span:nth-child(4){background:#3444B0; color:#FFFFFF}
:root:not(.js) .vb-punkte li::before{border-color:#8B9BFF; background:#8B9BFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4 8.5 13.2 14.4 7' fill='none' stroke='%230B0F2A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat}
:root:not(.js) .ft-points li::before{border-color:#E8B37A; background:#E8B37A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4 8.5 13.2 14.4 7' fill='none' stroke='%232B2119' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat}

/* Neuer Webauftritt: die drei Titel nach dem Tablet, im Tablet die App */
:root:not(.js) :is(.web, .screen-badge){display:none}
:root:not(.js) :is(.w-kicker, .s5, .s6, .s7){position:relative; inset:auto; left:auto; right:auto; top:auto; width:auto; max-width:42rem}
:root:not(.js) .w-kicker{order:6; margin:1rem 0 -2rem}
:root:not(.js) .s5{order:7}
:root:not(.js) .s6{order:8}
:root:not(.js) .s7{order:9}

/* Ablauf: Text und alle vier Schritte offen, darunter das fertige Haus */
:root:not(.js) :is(.ab-copy, .ab-bild, .pr-copy, .pr-tag, .pr-etappen, .pr-wege, .um-copy, .um-foto, .um-karten){
  position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; width:auto; max-width:48rem;
}
:root:not(.js) .ab-copy{order:1}
:root:not(.js) .ab-bild{order:2; width:100%; height:auto; aspect-ratio:1000 / 800; max-width:52rem; margin-inline:auto}
:root:not(.js) .ab-schritte, :root:not(.js) .ab-schritte li{position:relative; top:auto; opacity:1; color:var(--ink)}
:root:not(.js) .ab-schritte :is(p, small){max-height:none; opacity:1}
:root:not(.js) .ab-nr{border-color:rgba(254,121,113,.6); color:#FE9A93}

/* Preis: Schild, Etappen, dann die zwei Wege; die Dienste als Reihe */
:root:not(.js) .pr-copy--a{order:1}
:root:not(.js) .pr-tag{order:2; width:min(21rem, 100%)}
:root:not(.js) .pr-schnur{display:none}
:root:not(.js) .pr-etappen{order:3; width:100%}
:root:not(.js) .pr-copy--b{order:4; margin-top:2rem}
:root:not(.js) .pr-wege{order:5; width:100%; max-width:60rem}
:root:not(.js) .pr-linie i{transform:none}
:root:not(.js) .pr-punkt, :root:not(.js) :is(.pr-klappe, .pr-tablet, .pr-bahnring){display:none}
:root:not(.js) .pr-halt::before{background:var(--coral); border-color:var(--coral)}
:root:not(.js) .pr-halt small{opacity:1; transform:none}
:root:not(.js) .pr-orbit{height:auto; min-height:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem; padding:1rem 0}
:root:not(.js) .pr-mitte{position:relative; left:auto; top:auto; margin:0 .6rem 0 0}
:root:not(.js) .pr-dienst{position:relative}
@media (max-width: 40rem){ :root:not(.js) .pr-wege{grid-template-columns:1fr} }

/* Über mich: Text, Foto, darunter die Stationen als Karten */
:root:not(.js) .um-copy{order:1}
:root:not(.js) .um-copy .sub{display:block}
:root:not(.js) .um-foto{order:2; margin-inline:auto}
:root:not(.js) .um-karten{order:3; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:.8rem; max-width:60rem; margin-inline:auto}
:root:not(.js) .um-karte{position:relative; opacity:1}

@media (prefers-reduced-motion: reduce){
  .brand-mark path, .brand-name, .brand small{animation:none; stroke-dashoffset:0}
  .cue i::after{animation:none; opacity:0}
  .um-puls{animation:none; opacity:0}
  .kp-pfeil, .kp-panel, .kp-liste li, .kp-schleier :is(.kp-schleier-nr, .kp-schleier-titel), .kp-schleier-linie{transform:none !important}
  .btn:hover{transform:none}
  .btn:active{transform:none; opacity:.75}
}