/* ── Schriften, lokal eingebettet (kein externer Abruf) ── */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/f2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/f3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/f4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/f5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   WERKSTATTDESK · Variante 1 — „Die Software, die mitdenkt."
   Konzept: Die Werkstatt bei Nacht. Petrol-Dunkel, warmes
   Natriumdampf-Amber, eine KI die weiterarbeitet, wenn der
   Betrieb schläft. Bewusst dunkle Ein-Themen-Welt.
   Seit Runde 9 (22.08.2026) mit Tag-Fassung (body.tag, unten);
   seit 28.09.2026 ist der TAG die erste Begegnung (Owner-Test,
   s. „TAG ALS STANDARD" in site-bauen.py). Die :root-Token
   bleiben die Nacht — body.tag schaltet sie um.
   ============================================================ */
:root{
  --nacht:#0A141F;          /* Grund: Petrol-Nacht */
  --nacht-tief:#060D15;
  --panel:#101F2F;
  --panel-hell:#152838;
  --linie:rgba(241,237,227,.10);
  --linie-stark:rgba(241,237,227,.18);
  --text:#F1EDE3;           /* warmes Hallenweiß */
  --dim:#93A3B2;            /* Stahl gedimmt */
  --amber:#F5A623;          /* Natriumdampflicht */
  --amber-tief:#C77E0A;
  --gruen:#3FCF8E;          /* erledigt */
  --rot:#E5605E;            /* überfällig */
  --radius:14px;
  --disp:"Bricolage Grotesque",Georgia,serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--nacht);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:var(--amber);color:var(--nacht)}
h1,h2,h3{font-family:var(--disp);line-height:1.08;text-wrap:balance;font-weight:800;letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
.amber{color:var(--amber)}

/* --- Atmosphäre: Hallenlicht + Körnung ------------------------------ */
.atmo{position:fixed;inset:0;pointer-events:none;z-index:0}
.atmo::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(245,166,35,.16), transparent 62%),
    radial-gradient(700px 520px at 6% 108%, rgba(63,140,207,.10), transparent 60%);}
.atmo::after{content:"";position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");}

/* --- Navigation ----------------------------------------------------- */
header{position:sticky;top:0;z-index:50;background:rgba(6,13,21,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--linie)}
.nav{display:flex;align-items:center;gap:22px;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Archivo Black","Arial Black",sans-serif;font-weight:400;font-size:19px;letter-spacing:0;text-transform:none;color:inherit}
.logo{--logo-desk:#F0B23E}
.logo .logo-mark{width:36px;height:20px;display:grid;place-items:center;flex:none}
.logo .logo-mark svg{width:100%;height:100%}
.logo .logo-wort b{color:var(--logo-desk,#C98A04);font-weight:inherit}
.nav-links{display:flex;gap:6px;margin-left:auto}
.nav-links a{padding:9px 13px;border-radius:9px;text-decoration:none;color:var(--dim);font-size:15.5px;font-weight:500;transition:.18s}
.nav-links a:hover{color:var(--text);background:rgba(241,237,227,.06)}
.nav-links .nur-mobil{display:none}
.nav-links a.aktiv{color:var(--amber)}
.nav-cta{white-space:nowrap;background:var(--amber);color:#1A1204;font-weight:600;font-size:15.5px;padding:11px 20px;border-radius:10px;text-decoration:none;box-shadow:0 0 26px rgba(245,166,35,.30);transition:.18s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 38px rgba(245,166,35,.45)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--linie-stark);color:var(--text);border-radius:9px;padding:8px 12px;font-size:18px;cursor:pointer}
.login-link{padding:10px 18px;border:1px solid var(--linie-stark);border-radius:10px;text-decoration:none;color:var(--text);font-size:15px;font-weight:600;transition:.18s}
.login-link:hover{border-color:var(--amber);color:var(--amber)}
.thema-knopf{width:40px;height:40px;border-radius:10px;border:1px solid var(--linie-stark);background:transparent;color:var(--dim);cursor:pointer;display:grid;place-items:center;transition:.18s}
.thema-knopf:hover{border-color:var(--amber);color:var(--amber)}
.thema-knopf .sonne{display:block}.thema-knopf .mond{display:none}
body.tag .thema-knopf .sonne{display:none}body.tag .thema-knopf .mond{display:block}

/* ── Tag-Design (Day-Look): Token-Umschaltung + gezielte Flächen ── */
/* Seit 28.09.2026 ist der Tag die ERSTE Begegnung (s. „TAG ALS STANDARD" in site-bauen.py).
   Deshalb Kontrast-Durchsicht aller 20 Seiten (Tag, Desktop + Handy, gemessen auf den
   echten Pixelgründen) nach dem Rezept der App (NACHTPIGMENTE, Owner 31.08.2026):
   FLÄCHEN tragen das Nachtpigment mit dunkler Tinte, nur SCHRIFT wird im Nacht-Farbton
   abgedunkelt, bis sie ≥ 4,5:1 auf jedem Tag-Grund erreicht (#F4F1EA · #E9E4D8 ·
   #FFFFFF · #F8F6F0). Jede Regel hier gilt NUR unter body.tag — die Nacht rendert
   unverändert. Wächter: src/website-thema.test.ts.
     --amber  #B4720A → #8E5A07 (37°, als Schrift 5,15 / 4,58 / 5,81 / 5,37; vorher 3,09–3,92)
     --gruen  neu #177244 (150°; nachts #3FCF8E stand auch bei Tag: 1,45–1,99) */
body.tag{
  --nacht:#F4F1EA;--nacht-tief:#E9E4D8;--panel:#FFFFFF;--panel-hell:#F8F6F0;
  --linie:rgba(23,30,40,.13);--linie-stark:rgba(23,30,40,.26);
  --text:#1B2430;--dim:#5A6574;--amber:#8E5A07;--amber-tief:#8E5A07;--gruen:#177244;
}
body.tag .atmo::before{background:radial-gradient(900px 480px at 78% -8%,rgba(197,125,16,.12),transparent 62%),radial-gradient(700px 520px at 6% 108%,rgba(63,140,207,.08),transparent 60%)}
body.tag g[fill="#93A3B2"] text[fill="#F1EDE3"]{fill:#1B2430}
body.tag svg g[fill="#93A3B2"]{fill:#5A6574}
body.tag header{background:rgba(244,241,234,.96)}
body.tag .jrow{background:rgba(23,30,40,.045);border-color:var(--linie)}
body.tag .jkopf{background:rgba(23,30,40,.04)}
body.tag .fkat, body.tag .chip{background:rgba(23,30,40,.035)}
body.tag .nav-links a:hover{background:rgba(23,30,40,.06)}
body.tag .btn-ghost{background:rgba(23,30,40,.03)}
/* Schatten: kurz und eng statt des weiten Nacht-Hofs — der fiel als Grauzone auf
   Trust-Band, Untertitel-Leiste und Nachbarkarten und drückte dort die Schrift. */
body.tag .jpanel, body.tag .rechner, body.tag .k-rahmen{box-shadow:0 16px 32px -16px rgba(23,30,40,.30)}
@media (min-width:981px){body.tag .preise .preis.top{box-shadow:0 20px 44px -16px rgba(23,30,40,.22)}}
/* FLÄCHEN im Nachtpigment, dunkle Tinte (9,15:1) — wie nachts. Weiss auf #B4720A war 3,92. */
body.tag ::selection{background:#F5A623;color:#1A1204}
body.tag .nav-cta, body.tag .btn-amber, body.tag .nav-links a.mobil-cta, body.tag .nav-links a.mobil-cta:hover, body.tag .preis .beliebt, body.tag .gruender-banner:not(.archiv) .stern, body.tag .angebot.gruender i, body.tag .gf-cta, body.tag .p-schritte i{background:#F5A623;color:#1A1204}
body.tag .p-rabatt.fest, body.tag .jkopf .dot{--gruen:#3FCF8E}
/* Die Produktfilme zeigen die App bei Nacht — innen gilt das Nachtgold. */
body.tag .k-rahmen{--amber:#F5A623}
/* Ruhende Amber-Flächen (Zitat-Avatar, Preis-Band, Rabatt) — wer sie zurückholt, bekommt die Nachtfläche. */
body.tag .zitat .avatar, body.tag .pz-band, body.tag .p-rabatt{--amber:#F5A623}
/* SCHRIFT: zwei Stellen liegen auf abgedunkeltem Grund (Verlauf/Tönung) — eine Stufe tiefer. */
body.tag .re-rechts .fa b, body.tag .fkat h3{color:#7A4D06}
/* GROSSE Schrift (≥ 24px) braucht 3:1 — dort bleibt das hellere Tag-Gold, sonst würde
   „mitdenkt." braun: Hero 3,45 auf dem Seitengrund, Rechner-Zahl 3,19 auf seinem Verlauf. */
body.tag .hero h1 em, body.tag .re-rechts .gross{color:#B4720A}
body.tag .re-note, body.tag .quellen{color:var(--dim)}
body.tag .formular label .opt{opacity:1}
body.tag .art-chip.digital{color:#36628E}
body.tag .art-chip.kunden{color:#A92F4E}
body.tag .art-chip.praxis{color:#525D6B}
/* Marke: „desk" und das D in Marken-Gold auf hellem Grund (#F0B23E ist das Gold für DUNKLEN Grund). */
body.tag .logo{--logo-desk:#C98A04}
/* Links nicht nur am Farbton erkennbar (WCAG 1.4.1). */
body.tag .form-fuss a, body.tag .form-ok a, body.tag .demo-start .klein a, body.tag .art-cta a, body.tag .paket-hinweis a{border-bottom:1px solid currentColor}
/* Ränder und Hover, die bei Tag verschwanden oder sich umkehrten. */
body.tag .art-karte:hover, body.tag .p-karte:hover{border-color:var(--amber)}
body.tag .art-kasten{border-color:rgba(180,114,10,.7)}
body.tag .art-haupt{border-color:rgba(180,114,10,.7);border-left-color:#B4720A}
body.tag .art-cta{border-left-color:#B4720A}
body.tag .k-segs span{background:rgba(23,30,40,.18)}
body.tag .k-segs span i{background:var(--amber-tief)}
body.tag .formular input, body.tag .formular select, body.tag .formular textarea{background:var(--panel);border-color:rgba(23,30,40,.5)}
body.tag .formular input:focus, body.tag .formular select:focus, body.tag .formular textarea:focus{border-color:transparent}

/* --- Seiten-Router --------------------------------------------------- */
main{position:relative;z-index:1}
[data-page]{display:none}
/* „backwards" statt „both" (05.10.2026): „both" ließ nach der Einblendung die Einheitsmatrix als
   transform stehen — und jedes transform macht den Seitencontainer zum Bezugsrahmen für
   position:fixed. Die (inzwischen entfernte) feste Handy-Leiste klebte dadurch am Seitenende statt
   am Bildschirmrand. Bleibt so, damit kein künftiges festes Element dieselbe Falle trifft.
   Endzustand identisch (opacity:1, kein transform). */
[data-page].an{display:block;animation:seite .45s ease backwards}
@keyframes seite{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- Hero ------------------------------------------------------------ */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:84px 0 72px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(245,166,35,.35);border-radius:999px;padding:7px 14px;margin-bottom:26px}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:puls 2.2s infinite}
@keyframes puls{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.5)}55%{box-shadow:0 0 0 7px rgba(245,166,35,0)}}
.hero h1,.hero h2{font-size:clamp(42px,5.6vw,68px)}
.hero h1 em{font-style:normal;color:var(--amber);position:relative;white-space:nowrap}
.hero .sub{margin-top:24px;font-size:19px;color:var(--dim);max-width:52ch}
.hero .sub b{color:var(--text);font-weight:600}
.cta-zeile{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:16.5px;padding:15px 26px;border-radius:12px;text-decoration:none;transition:.18s;border:0;cursor:pointer;font-family:var(--body)}
.btn-amber{background:var(--amber);color:#1A1204;box-shadow:0 0 30px rgba(245,166,35,.28)}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(245,166,35,.5)}
.btn-ghost{border:1px solid var(--linie-stark);color:var(--text);background:rgba(241,237,227,.03)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.hero-note{margin-top:12px;font-size:14px;color:var(--dim)}
.angebot-zeile{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.angebot{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:var(--dim);border:1px solid var(--linie);border-radius:10px;padding:8px 13px;width:fit-content;max-width:100%}
.angebot b{color:var(--text);font-weight:600}
.angebot i{font-style:normal;color:var(--gruen);flex:none}
.angebot.gruender{border-color:rgba(245,166,35,.45)}
.angebot.gruender i{color:var(--amber)}

/* --- Jessica-Panel (Hero rechts) ------------------------------------- */
.jpanel{background:linear-gradient(180deg,var(--panel),var(--nacht-tief));border:1px solid var(--linie-stark);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.jkopf{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--linie);background:rgba(241,237,227,.03)}
.jkopf .dot{width:10px;height:10px;border-radius:50%;background:var(--gruen);box-shadow:0 0 10px var(--gruen)}
.jkopf b{font-size:14.5px}
.jkopf span{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.jfeed{padding:16px 18px 6px;display:flex;flex-direction:column;gap:10px}
.jrow{display:flex;gap:11px;align-items:flex-start;background:rgba(241,237,227,.035);border:1px solid var(--linie);border-radius:11px;padding:11px 13px;opacity:0;animation:jauf .5s ease forwards}
.jrow .zeit{font-family:var(--mono);font-size:11px;color:var(--dim);padding-top:3px;flex:none}
.jrow p{font-size:13.8px;line-height:1.45;color:var(--text)}
.jrow p b{color:var(--amber);font-weight:600}
.jrow .ok{margin-left:auto;flex:none;color:var(--gruen);font-family:var(--mono);font-size:12px;padding-top:2px}
.jrow:nth-child(1){animation-delay:.3s}.jrow:nth-child(2){animation-delay:.9s}
.jrow:nth-child(3){animation-delay:1.5s}.jrow:nth-child(4){animation-delay:2.1s}
@keyframes jauf{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.jchat{border-top:1px solid var(--linie);padding:14px 18px 18px}
.jfrage{font-family:var(--mono);font-size:13px;color:var(--dim);margin-bottom:10px;opacity:0;animation:jauf .5s ease 2.8s forwards}
.jfrage b{color:var(--text);font-weight:500}
.jantwort{background:rgba(245,166,35,.09);border:1px solid rgba(245,166,35,.3);border-radius:11px;padding:12px 14px;font-size:13.8px;line-height:1.5;opacity:0;animation:jauf .5s ease 3.5s forwards}
.jantwort .cursor{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.jfragen{margin-top:13px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;opacity:0;animation:jauf .5s ease 4.6s forwards}
.jf-titel{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);width:100%}
.jfragen button{background:rgba(241,237,227,.05);border:1px solid var(--linie-stark);color:var(--text);font-family:var(--body);font-size:12.8px;border-radius:999px;padding:7px 13px;cursor:pointer;transition:.15s;text-align:left}
.jfragen button:hover{border-color:var(--amber);color:var(--amber)}
.jfragen button:disabled{opacity:.45;cursor:default}
#jdemo{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.tippt{display:inline-flex;gap:4px;padding:3px 2px}
.tippt i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:tippt 1s infinite}
.tippt i:nth-child(2){animation-delay:.15s}.tippt i:nth-child(3){animation-delay:.3s}
@keyframes tippt{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* Scroll-Reveal (Klasse wird per JS vergeben — ohne JS bleibt alles sichtbar) */
.anim-auf{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;transition-delay:calc(var(--anim-nr,0) * 90ms)}
.anim-auf.sichtbar{opacity:1;transform:none}

/* --- Abschnitte ------------------------------------------------------ */
section{padding:88px 0}
.sek-kopf{max-width:720px;margin-bottom:52px}
.sek-kopf .tag{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:16px;display:block}
.sek-kopf h1,.sek-kopf h2{font-size:clamp(30px,3.8vw,44px)}
.sek-kopf p{margin-top:16px;color:var(--dim);font-size:18px}
/* Kein einzelnes Wort allein in der letzten Zeile (Prüflauf 12.10.2026). Die Startseite ist eingefroren
   und bleibt außen vor. */
[data-page]:not([data-page="start"]) .sek-kopf p{text-wrap:pretty}
/* Paket-Hinweis unter einem Abschnittskopf (Funktionen, 28.09.2026): kleiner als der
   Vorspann, der Verweis in Amber wie in den FAQ. */
.sek-kopf p.paket-hinweis{font-size:15.5px}
.paket-hinweis a{color:var(--amber);text-decoration:none;white-space:nowrap}

/* Szenario-Karten */
.szenarien{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.szene{background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);padding:28px 26px;position:relative;overflow:hidden;transition:.25s}
.szene:hover{border-color:rgba(245,166,35,.45);transform:translateY(-4px)}
.szene .nr{font-family:var(--mono);font-size:12px;color:var(--amber);letter-spacing:.12em}
.szene h3{font-size:21.5px;margin:14px 0 12px}
.szene p{font-size:15.5px;color:var(--dim)}
.szene p b{color:var(--text);font-weight:600}
.szene .ablauf{margin-top:18px;padding-top:16px;border-top:1px dashed var(--linie-stark);display:flex;flex-direction:column;gap:8px}
.szene .schritt{display:flex;gap:10px;font-size:13.5px;font-family:var(--mono);color:var(--dim)}
.szene .schritt i{color:var(--gruen);font-style:normal;flex:none}

/* ============ KINO — der Produktfilm. Feste 960er-Bühne, uniform skaliert, ============
   ============ Cursor-Regie, Kamerafahrten, Szenenschnitte.                  ============ */
.kino-halter{max-width:960px;margin:0 auto;position:relative}
.film-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim);text-align:center;margin:12px 0 0}
.kino{width:960px;transform-origin:top left;position:relative}
.k-schein{position:absolute;inset:-50px -70px auto;height:420px;background:radial-gradient(55% 60% at 50% 42%,rgba(245,166,35,.13),transparent 70%);filter:blur(8px);pointer-events:none}
.k-rahmen{position:relative;width:960px;height:520px;background:#0B1622;border:1px solid rgba(126,166,205,.22);border-radius:18px;box-shadow:0 46px 120px rgba(0,0,0,.62),0 0 0 1px rgba(245,166,35,.05);overflow:hidden}
.k-blende{position:absolute;inset:0;background:#05090E;opacity:0;pointer-events:none;transition:opacity .45s ease;z-index:60}
.kino.blende .k-blende{opacity:1}

/* Fenster-Chrome */
.k-top{height:46px;display:flex;align-items:center;gap:9px;padding:0 16px;background:#0A121C;border-bottom:1px solid rgba(126,166,205,.14)}
.k-dots{display:flex;gap:7px}
.k-dots i{width:11px;height:11px;border-radius:50%;background:#26384C}
.k-dots i:nth-child(1){background:#E5605E}.k-dots i:nth-child(2){background:#F5C24B}.k-dots i:nth-child(3){background:#3FCF8E}
.k-adr{margin-left:8px;background:#101E2E;border:1px solid rgba(126,166,205,.18);border-radius:8px;font-family:var(--mono);font-size:11.5px;color:#8FA5BA;padding:5px 14px;display:flex;align-items:center;gap:7px}
.k-adr::before{content:"";width:9px;height:9px;border-radius:50%;background:#3FCF8E;box-shadow:0 0 8px #3FCF8E}
.k-top .platz{flex:1}
.k-suche{width:190px;height:28px;border-radius:8px;background:#101E2E;border:1px solid rgba(126,166,205,.18);display:flex;align-items:center;gap:7px;padding:0 10px;color:#5F7386;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-suche>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.k-glocke{position:relative;width:28px;height:28px;border-radius:8px;background:#101E2E;border:1px solid rgba(126,166,205,.18);display:grid;place-items:center;color:#8FA5BA}
.k-glocke b{position:absolute;top:-5px;right:-5px;background:var(--amber);color:#1A1204;font-size:8.5px;font-weight:700;border-radius:99px;padding:1px 5px}
.k-avatar{width:28px;height:28px;border-radius:50%;background:conic-gradient(from 210deg,#F5A623,#8a5a10 60%,#F5A623);color:#1A1204;font-family:var(--disp);font-weight:800;font-size:11px;display:grid;place-items:center}

/* App-Körper (Kamera-Bühne) */
.k-app{position:absolute;left:0;right:0;top:46px;bottom:0;display:grid;grid-template-columns:186px 1fr;transform-origin:0 0;will-change:transform}
.k-side{background:linear-gradient(180deg,#182734,#21313d);padding:8px 8px 8px;display:flex;flex-direction:column;gap:1px;border-right:1px solid rgba(255,255,255,.08)}
.k-kopf{display:flex;align-items:center;gap:8px;padding:4px 6px 8px}
.k-kopf .wd{width:30px;height:17px;flex:none}
.k-kopf .wdg{color:#F0B23E}
.k-kopf b{font-size:10.5px;color:#fff;line-height:1.25;font-weight:700}
.k-lbl{padding:6px 8px 3px;font-size:8.5px;letter-spacing:.14em;color:#8b98a8;text-transform:uppercase;font-weight:600}
.k-nav{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.78);font-size:11.5px;padding:4px 8px;border-radius:7px;font-weight:500;line-height:1.25}
.k-nav svg{flex:none;opacity:.9}
.k-nav.an{background-image:linear-gradient(90deg,#0f766e,#12968c);color:#fff;box-shadow:0 7px 17px rgba(7,157,163,.25)}
.k-nav.an svg{opacity:1}
.k-nav .kb{margin-left:auto;background:#fff;color:#0f766e;font-size:8.5px;font-weight:700;border-radius:99px;min-width:15px;text-align:center;padding:1px 4px;line-height:1.4}
.k-fuss{margin-top:auto;padding:7px 8px 2px;border-top:1px solid rgba(255,255,255,.10);font-size:8.5px;color:#8b98a8}

.k-main{position:relative;background:#F2F5F8;overflow:hidden}
.k-screen{position:absolute;inset:0;padding:18px 20px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.k-screen.an{opacity:1;transform:none}

/* --- Screen 1: Board --- */
.k-kopfz{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.k-kopfz h5{font-size:17px;color:#16283C;font-family:var(--disp);font-weight:800;margin:0}
.k-kopfz .tagchip{font-family:var(--mono);font-size:10px;color:#61748A;background:#fff;border:1px solid #E3E9EF;border-radius:6px;padding:3px 9px;letter-spacing:.06em}
.k-kopfz .kneu{margin-left:auto;background:#16283C;color:#fff;font-size:12px;font-weight:600;border-radius:8px;padding:7px 13px;display:flex;gap:7px;align-items:center}
.k-cols{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.k-col{background:#E9EEF3;border:1px solid #DEE6ED;border-radius:12px;padding:10px;min-height:340px}
.k-col h6{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#61748A;margin:2px 4px 10px;font-weight:500}
.k-col h6 i{width:9px;height:9px;border-radius:50%;flex:none}
.k-col h6 b{margin-left:auto;background:#fff;border-radius:6px;font-size:9.5px;padding:1px 7px;color:#61748A}
.k-col.blitzt{animation:kblitz .9s ease}
@keyframes kblitz{0%{box-shadow:0 0 0 0 rgba(24,154,88,.0)}30%{box-shadow:0 0 0 4px rgba(24,154,88,.35)}100%{box-shadow:0 0 0 0 rgba(24,154,88,0)}}
.k-slot{height:180px;margin-bottom:10px;border-radius:10px}
.k-slot.frei{border:1.5px dashed #CDD8E2}
.k-geist{background:#fff;border:1px solid #E3E9EF;border-radius:10px;padding:10px 12px;margin-bottom:10px;box-shadow:0 2px 6px rgba(22,40,60,.05)}
.k-geist p{margin:0;font-size:11.5px;color:#61748A;line-height:1.5}
.k-platte{display:inline-flex;align-items:center;font-family:var(--disp);font-weight:700;font-size:11.5px;color:#16283C;border:1.4px solid #16283C;border-radius:4px;overflow:hidden;background:#fff;margin-bottom:6px}
.k-platte i{background:#1D4ED8;width:8px;align-self:stretch}
.k-platte b{padding:1px 8px}
/* die gespielte Karte */
.k-karte{position:absolute;width:218px;background:#fff;border:1.5px solid #F5A623;border-radius:12px;padding:12px 14px;box-shadow:0 10px 26px rgba(22,40,60,.16);opacity:0;transform:scale(.7);z-index:5}
.k-karte.da{opacity:1;transform:scale(1);transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.5,.4,1)}
.k-karte.faehrt{transition:left 1s cubic-bezier(.45,.08,.18,1),top 1s cubic-bezier(.45,.08,.18,1),transform .3s ease,border-color .4s,opacity .3s}
.k-karte.greift{transform:scale(1.05) rotate(2.2deg);box-shadow:0 22px 44px rgba(22,40,60,.3);z-index:9}
.k-karte.plumpst{animation:kplumps .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes kplumps{0%{transform:scale(1.04)}100%{transform:scale(1)}}
.k-karte.blau{border-color:#1D4ED8}
.k-karte.gruen{border-color:#189A58}
.k-karte p{margin:0 0 8px;font-size:12px;color:#42576C;line-height:1.45}
.k-aufg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.k-aufg li{display:flex;gap:8px;align-items:center;font-size:11.5px;color:#61748A}
.k-aufg li i{width:13px;height:13px;border:1.4px solid #C3D0DC;border-radius:4px;flex:none;display:grid;place-items:center;font-style:normal;font-size:9px;color:#fff;transition:.35s}
.k-aufg li.ok i{background:#189A58;border-color:#189A58}
.k-aufg li.ok{color:#16283C;text-decoration:line-through;text-decoration-color:#B9C7D4}
.k-fchip{display:inline-flex;gap:6px;align-items:center;margin-top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.05em;background:#E7F4EC;color:#177244;border-radius:5px;padding:3px 8px;opacity:0;transform:translateY(4px);transition:.4s}
.k-fchip.an{opacity:1;transform:none}


/* Eincheck-Toast */
.k-fortschritt{width:56px;height:4px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;flex:none}
.k-fortschritt i{display:block;height:100%;width:0;background:var(--amber);transition:width 1.9s linear}
.k-toast.laedt .k-fortschritt i{width:100%}
.k-toast{position:absolute;top:60px;right:18px;z-index:20;display:flex;gap:11px;align-items:center;background:rgba(16,35,59,.97);color:#EAF2FA;border:1px solid rgba(126,166,205,.3);border-radius:12px;padding:11px 13px;box-shadow:0 18px 44px rgba(5,12,20,.45);backdrop-filter:blur(4px);transform:translateY(-160%);opacity:0;transition:transform .6s cubic-bezier(.2,1.2,.3,1),opacity .4s}
.k-toast.an{transform:none;opacity:1}
.k-toast.flieg{transform:translate(-330px,120px) scale(.15);opacity:0;transition:transform .55s cubic-bezier(.5,0,.8,.4),opacity .5s}
.k-toast .tico{width:34px;height:34px;border-radius:9px;background:rgba(245,166,35,.18);display:grid;place-items:center;color:var(--amber);flex:none}
.k-toast p{margin:0;font-size:11.5px;line-height:1.45;max-width:210px}
.k-toast p b{color:#FFD892}
.k-toast button{background:var(--amber);color:#1A1204;border:0;font-family:var(--body);font-weight:700;font-size:11.5px;border-radius:8px;padding:8px 13px;cursor:pointer;transition:.2s}
.k-toast button.k-hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(245,166,35,.4)}

/* Schein-Scan-Modal */
.k-dunkel{position:absolute;inset:0;background:rgba(10,20,32,.45);opacity:0;pointer-events:none;transition:.4s;z-index:24}
.k-dunkel.an{opacity:1}
.k-modal{position:absolute;left:50%;top:50%;width:520px;transform:translate(-50%,-46%) scale(.92);opacity:0;z-index:25;background:#fff;border-radius:16px;box-shadow:0 40px 90px rgba(5,12,20,.5);padding:18px 20px;transition:.5s cubic-bezier(.2,1.1,.3,1)}
.k-modal.an{opacity:1;transform:translate(-50%,-50%) scale(1)}
.k-modal .mkopf{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.k-modal .mkopf b{font-size:13.5px;color:#16283C}
.k-modal .mkopf span{margin-left:auto;font-family:var(--mono);font-size:9px;color:#8FA0B1;letter-spacing:.08em}
.k-mgrid{display:grid;grid-template-columns:200px 1fr;gap:16px}
.k-schein-doc{position:relative;height:214px;background:linear-gradient(160deg,#E9EDDF,#DEE5D2);border:1px solid #C9D2BC;border-radius:8px;transform:rotate(-2.4deg);overflow:hidden;box-shadow:0 8px 20px rgba(22,40,60,.14)}
.k-schein-doc::before{content:"ZULASSUNGSBESCHEINIGUNG TEIL I";position:absolute;top:10px;left:12px;right:12px;font-family:var(--mono);font-size:6.8px;letter-spacing:.08em;color:#5A6B50}
.k-schein-doc .zeile{position:absolute;left:12px;height:5px;border-radius:3px;background:#B9C4A8}
.k-schein-doc .feldbox{position:absolute;border:1px solid #A8B694;border-radius:3px;background:rgba(255,255,255,.5)}
.k-strahl{position:absolute;left:0;right:0;top:-22%;height:20%;background:linear-gradient(180deg,transparent,rgba(245,166,35,.55),transparent);opacity:0}
.k-modal.scannt .k-strahl{opacity:1;animation:kstrahl 1.5s ease-in-out 2}
@keyframes kstrahl{0%{top:-22%}50%{top:100%}100%{top:-22%}}
.k-felder{display:flex;flex-direction:column;gap:9px}
.k-feld{background:#F5F8FA;border:1px solid #E3E9EF;border-radius:9px;padding:7px 11px;position:relative}
.k-feld label{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:#8FA0B1;margin-bottom:2px}
.k-feld .wert{font-family:var(--mono);font-size:12.5px;color:#16283C;min-height:16px}
.k-feld .wert.tippt::after{content:"";display:inline-block;width:7px;height:12px;background:var(--amber);vertical-align:-2px;margin-left:2px;animation:blink .8s steps(1) infinite}
.k-feld .haken{position:absolute;right:9px;top:50%;transform:translateY(-50%) scale(0);width:17px;height:17px;border-radius:50%;background:#189A58;color:#fff;font-size:10px;display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.k-feld.ok .haken{transform:translateY(-50%) scale(1)}
.k-mfuss{display:flex;align-items:center;gap:8px;margin-top:14px}
.k-mfuss span{font-size:10.5px;color:#8FA0B1}
.k-autobadge{margin-left:auto;background:#E7F4EC;color:#177244;font-size:11px;font-weight:700;border-radius:8px;padding:7px 12px;opacity:0;transform:translateY(6px);transition:.35s cubic-bezier(.2,1.3,.4,1)}
.k-autobadge.an{opacity:1;transform:none}

/* Telefon */
.k-phone{position:absolute;right:26px;bottom:-16px;width:212px;z-index:22;background:#0C1420;border:1.5px solid #27394D;border-radius:26px 26px 0 0;padding:12px 10px 18px;transform:translateY(115%);transition:transform .7s cubic-bezier(.25,1.1,.3,1);box-shadow:0 30px 70px rgba(5,12,20,.55)}
.k-phone.an{transform:translateY(0)}
.k-phone .kerbe{width:64px;height:6px;border-radius:99px;background:#27394D;margin:0 auto 9px}
.k-pscreen{background:#F2F5F8;border-radius:12px 12px 0 0;padding:10px 9px 16px;min-height:150px}
.k-pstatus{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8px;color:#8FA0B1;margin-bottom:8px;padding:0 3px}
.k-pabs{font-family:var(--mono);font-size:8.5px;color:#61748A;text-align:center;margin-bottom:8px;letter-spacing:.06em}
.k-tipps{display:inline-flex;gap:4px;background:#fff;border:1px solid #E3E9EF;border-radius:11px 11px 11px 3px;padding:9px 11px;opacity:0;transition:.3s}
.k-tipps.an{opacity:1}
.k-tipps i{width:6px;height:6px;border-radius:50%;background:#9DB3C9;animation:tippt 1s infinite}
.k-tipps i:nth-child(2){animation-delay:.15s}.k-tipps i:nth-child(3){animation-delay:.3s}
.k-sms{background:#fff;border:1px solid #E3E9EF;border-radius:11px 11px 11px 3px;padding:9px 11px;font-size:10.8px;line-height:1.5;color:#16283C;box-shadow:0 6px 16px rgba(22,40,60,.10);opacity:0;transform:translateY(8px) scale(.96);transition:.4s cubic-bezier(.2,1.3,.4,1)}
.k-sms.an{opacity:1;transform:none}
.k-sms b{color:#177244}

/* --- Screen 2: Rechnung --- */
.k-re{max-width:560px;margin:6px auto 0;background:#fff;border:1px solid #E3E9EF;border-radius:14px;box-shadow:0 24px 60px rgba(22,40,60,.14);padding:22px 26px 56px;position:relative;overflow:hidden}
.k-re .glanz{position:absolute;top:0;bottom:0;width:90px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);left:-140px;transform:skewX(-14deg)}
.k-re.glaenzt .glanz{animation:kglanz 1s ease .2s forwards}
@keyframes kglanz{to{left:120%}}
.k-rkopf{display:flex;align-items:flex-start;gap:12px;border-bottom:2px solid #16283C;padding-bottom:12px;margin-bottom:6px}
.k-rkopf .firmenlogo{width:34px;height:34px;border-radius:9px;background:#16283C;color:var(--amber);display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:15px}
.k-rkopf .wer b{display:block;font-size:13px;color:#16283C}
.k-rkopf .wer span{font-size:10px;color:#8FA0B1}
.k-rkopf .rnr{margin-left:auto;text-align:right}
.k-rkopf .rnr b{display:block;font-family:var(--disp);font-size:14px;color:#16283C;letter-spacing:.02em}
.k-rkopf .rnr span{font-family:var(--mono);font-size:9px;color:#189A58}
.k-rtab .kopfzeile,.k-rzeile{display:grid;grid-template-columns:1fr 70px 90px;gap:10px;padding:8px 2px;font-size:11.5px;border-bottom:1px solid #EFF3F6;align-items:baseline}
.k-rtab .kopfzeile{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:#8FA0B1;border-bottom:1px solid #DEE6ED}
.k-rzeile{color:#42576C;opacity:0;transform:translateX(18px);filter:blur(2px);transition:opacity .45s ease,transform .45s ease,filter .45s ease}
.k-rzeile b{font-family:var(--mono);font-weight:500;color:#16283C;text-align:right}
.k-rzeile span:nth-child(2){font-family:var(--mono);color:#8FA0B1;text-align:right;font-size:10.5px}
.k-rzeile.an{opacity:1;transform:none;filter:none}
.k-rsum{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;margin-top:4px;border-top:2px solid #16283C}
.k-rsum span{font-size:12px;font-weight:700;color:#16283C}
.k-rsum b{font-family:var(--mono);font-size:21px;color:#16283C}
.k-stempel{position:absolute;right:200px;top:158px;transform:rotate(-9deg) scale(2.2);opacity:0;border:2.5px solid #B3403A;color:#B3403A;font-family:var(--mono);font-size:10px;letter-spacing:.18em;padding:6px 13px;border-radius:7px;transition:.3s cubic-bezier(.4,1.4,.6,1)}
.k-stempel.an{opacity:.92;transform:rotate(-9deg) scale(1)}
.k-bezahlt{position:absolute;left:26px;bottom:18px;display:flex;gap:8px;align-items:center;background:#E7F4EC;border:1px solid #BFE3CD;color:#177244;font-size:11px;font-weight:700;border-radius:99px;padding:6px 13px;opacity:0;transform:translateY(10px);transition:.45s cubic-bezier(.2,1.3,.4,1)}
.k-bezahlt.an{opacity:1;transform:none}
.k-bezahlt i{width:16px;height:16px;border-radius:50%;background:#189A58;color:#fff;display:grid;place-items:center;font-size:9px;font-style:normal}

@keyframes kdrift{0%,100%{transform:translateX(-18px) scale(1)}50%{transform:translateX(26px) scale(1.05)}}
.k-schein{animation:kdrift 16s ease-in-out infinite}

/* Cursor + Ripple */
.k-zeiger{position:absolute;left:0;top:0;z-index:40;pointer-events:none;filter:drop-shadow(0 4px 10px rgba(5,12,20,.45));opacity:0;transition:transform .8s cubic-bezier(.35,.7,.25,1),opacity .3s}
.k-zeiger.sichtbar{opacity:1}
.k-zeiger.drueckt svg{transform:scale(.82)}
.k-zeiger svg{display:block;transition:transform .12s ease;transform-origin:4px 4px}
.k-ripple{position:absolute;left:0;top:0;z-index:39;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2.5px solid rgba(245,166,35,.85);opacity:0;pointer-events:none}
.k-ripple.an{animation:kripple .55s ease-out}
@keyframes kripple{0%{opacity:.9;transform:scale(.25)}100%{opacity:0;transform:scale(1.5)}}

/* Play-Knopf (erscheint nur im Standbild-Modus) */
.k-play{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:55;display:flex;gap:12px;align-items:center;background:rgba(10,20,32,.92);color:#F1EDE3;border:1px solid rgba(245,166,35,.55);border-radius:999px;padding:14px 26px 14px 16px;font-family:var(--body);font-weight:600;font-size:15.5px;cursor:pointer;box-shadow:0 20px 60px rgba(0,0,0,.55);transition:.2s}
.k-play:hover{border-color:var(--amber);transform:translate(-50%,-52%)}
.k-play i{font-style:normal;width:40px;height:40px;border-radius:50%;background:var(--amber);color:#1A1204;display:grid;place-items:center;font-size:15px;padding-left:3px}

/* Untertitel-Leiste */
.k-leiste{display:flex;align-items:center;gap:14px;padding:15px 6px 0}
.k-zeit{flex:none;font-family:var(--mono);font-size:12px;color:var(--amber);border:1px solid rgba(245,166,35,.4);border-radius:6px;padding:4px 10px;min-width:52px;text-align:center}
.k-text{font-size:14.5px;color:var(--text);line-height:1.45;opacity:1;transition:opacity .3s;min-height:42px;display:flex;align-items:center}
.k-text.wechselt{opacity:0}
.k-segs{margin-left:auto;display:flex;gap:6px;flex:none}
.k-segs span{width:38px;height:4px;border-radius:99px;background:rgba(241,237,227,.14);overflow:hidden;display:block}
.k-segs span i{display:block;height:100%;width:0;background:var(--amber);transition-property:width;transition-timing-function:linear}
.k-segs span.voll i{width:100%}
.k-segs span.sofort i{transition-duration:0s !important}

@media (max-width:1020px){.k-text{font-size:12.5px;min-height:37px}}
/* Untertitel der drei Filme: steht seit dem Prüflauf 12.10.2026 direkt UNTER .kino-halter statt in der
   skalierten 960er-Bühne. Drinnen wurde er am Handy mit auf 37 % verkleinert (12 px → 4,4 px, unlesbar).
   Die Skripte finden Zeit/Text/Segmente über ihre ids (k-/m-/f3-zeit, -text, -segs), nicht über die Lage. */
.kino-halter + .k-leiste{max-width:960px;margin:0 auto}
@media (max-width:640px){
  .kino-halter + .k-leiste{gap:10px;padding-top:12px}
  .kino-halter + .k-leiste .k-segs{display:none}
  .kino-halter + .k-leiste .k-zeit{padding:3px 7px;min-width:0;font-size:11px}
}

/* ============ KINO 2 — Der Posteingang sortiert sich selbst ============
   Gleiche Bühne wie Kino 1, aber ohne Cursor: das goldene Licht ist
   Jessica. Mails treffen ein, werden gelesen und sortiert, Rechnungen als Entwurf angelegt. */
.m-main{position:relative;background:#F2F5F8;overflow:hidden;padding:16px 18px}
.m-kopfz{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.m-kopfz h5{font-size:17px;color:#16283C;font-family:var(--disp);font-weight:800;margin:0}
.m-kopfz .tagchip{font-family:var(--mono);font-size:10px;color:#61748A;background:#fff;border:1px solid #E3E9EF;border-radius:6px;padding:3px 9px;letter-spacing:.06em}
.m-jpill{margin-left:auto;display:flex;gap:8px;align-items:center;background:#10233B;color:#FFD892;font-size:11.5px;font-weight:600;border-radius:999px;padding:6px 13px}
.m-jpill i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:puls 1.6s infinite}
.m-liste{position:relative;max-width:560px}
.m-mail{position:relative;display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:center;background:#fff;border:1px solid #E3E9EF;border-radius:10px;padding:9px 12px;margin-bottom:8px;max-height:72px;opacity:0;transform:translateY(-16px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,1.1,.3,1),box-shadow .3s,max-height .45s ease,padding .45s ease,margin .45s ease,border-width .45s ease}
.m-mail.da{opacity:1;transform:none}
.m-mail.liest{box-shadow:0 0 0 2px rgba(245,166,35,.55),0 10px 24px rgba(245,166,35,.16);z-index:3}
.m-mail.weg{opacity:0;transform:translateX(46px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;border-width:0;overflow:hidden}
.m-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:11.5px;color:#fff}
.m-wer b{font-size:12px;color:#16283C;display:block;line-height:1.3}
.m-wer span{font-size:11px;color:#61748A;display:flex;align-items:center;gap:5px}
.m-wer svg{flex:none;color:#8FA0B1}
.m-meta{text-align:right;min-width:76px}
.m-zeit{font-family:var(--mono);font-size:9px;color:#8FA0B1;display:block;margin-bottom:2px}
.m-chip{display:inline-block;font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;border-radius:4px;padding:2px 7px;opacity:0;transform:scale(.55);transition:.32s cubic-bezier(.2,1.5,.4,1)}
.m-chip.an{opacity:1;transform:none}
.m-chip.re{background:#EDF2FE;color:#1D4ED8}
.m-chip.term{background:#FBF1DC;color:#9A6B10}
.m-chip.kunde{background:#E8F2F1;color:#0F6B62}
.m-chip.werb{background:#EEF1F4;color:#8FA0B1}
.m-chip.ok{background:#E7F4EC;color:#177244}
.m-chip + .m-chip{margin-left:4px}
.m-rest{background:transparent;border:1.5px dashed #CDD8E2;border-radius:10px;padding:9px 12px;font-size:11px;color:#8FA0B1;text-align:center;opacity:0;transition:.4s}
.m-rest.an{opacity:1}
/* Jessica-Orb */
.m-orb{position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFDF9E,var(--amber));box-shadow:0 0 16px 5px rgba(245,166,35,.5);z-index:30;opacity:0;transition:transform .55s cubic-bezier(.35,.7,.25,1),opacity .3s;pointer-events:none}
.m-orb.sichtbar{opacity:1}
.m-orb::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px solid rgba(245,166,35,.5);animation:morb 1.5s ease-out infinite}
@keyframes morb{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
/* Analyse-Panel (Eingangsrechnung) */
.m-panel{position:absolute;top:12px;right:14px;bottom:12px;width:47%;background:#fff;border:1px solid #E3E9EF;border-radius:14px;box-shadow:-20px 0 46px rgba(18,38,63,.16);padding:14px 16px;transform:translateX(115%);transition:transform .55s cubic-bezier(.25,1.05,.3,1);z-index:20;display:flex;flex-direction:column}
.m-panel.an{transform:none}
.m-panel .pkopf{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.m-panel .pkopf b{font-size:12.5px;color:#16283C}
.m-panel .pkopf span{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:#8FA0B1;letter-spacing:.08em}
.m-doc{position:relative;height:74px;background:#FBFBF8;border:1px solid #E3E9EF;border-radius:8px;margin-bottom:10px;overflow:hidden}
.m-doc::before{content:"RECHNUNG · PDF-ANHANG";position:absolute;top:7px;left:10px;font-family:var(--mono);font-size:6.5px;letter-spacing:.1em;color:#8FA0B1}
.m-doc i{position:absolute;left:10px;height:4px;border-radius:2px;background:#DDE4EA}
.m-doc .k-strahl{opacity:0}
.m-panel.scannt .m-doc .k-strahl{opacity:1;animation:kstrahl 1.4s ease-in-out 2}
.m-felder{display:flex;flex-direction:column;gap:7px}
.m-feld{background:#F5F8FA;border:1px solid #E3E9EF;border-radius:8px;padding:6px 10px;position:relative}
.m-feld label{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.11em;color:#8FA0B1;margin-bottom:1px}
.m-feld .wert{font-family:var(--mono);font-size:11.5px;color:#16283C;min-height:14px}
.m-feld .wert.tippt::after{content:"";display:inline-block;width:6px;height:11px;background:var(--amber);vertical-align:-1px;margin-left:2px;animation:blink .8s steps(1) infinite}
.m-feld .haken{position:absolute;right:8px;top:50%;transform:translateY(-50%) scale(0);width:15px;height:15px;border-radius:50%;background:#189A58;color:#fff;font-size:9px;display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.m-feld.ok .haken{transform:translateY(-50%) scale(1)}
.m-verbucht{margin-top:auto;display:flex;flex-direction:column;gap:4px;background:#E7F4EC;border:1px solid #BFE3CD;border-radius:10px;padding:9px 12px;opacity:0;transform:translateY(10px);transition:.4s cubic-bezier(.2,1.3,.4,1)}
.m-verbucht.an{opacity:1;transform:none}
.m-verbucht b{font-size:11.5px;color:#177244}
.m-verbucht span{font-size:10px;color:#4E8465}
/* Antwort-Entwurf */
.m-entwurf{position:absolute;left:16px;right:38%;bottom:14px;background:#fff;border:1px solid #E3E9EF;border-left:3px solid var(--amber);border-radius:10px;box-shadow:0 18px 40px rgba(18,38,63,.16);padding:10px 14px;transform:translateY(130%);opacity:0;transition:.5s cubic-bezier(.25,1.05,.3,1);z-index:21}
.m-entwurf.an{transform:none;opacity:1}
.m-entwurf label{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:#9A6B10;background:#FBF1DC;border-radius:3px;padding:1px 6px}
.m-entwurf p{margin:6px 0 0;font-size:11.5px;color:#16283C;line-height:1.5;min-height:32px}
.m-entwurf p.tippt::after{content:"";display:inline-block;width:6px;height:11px;background:var(--amber);vertical-align:-1px;margin-left:2px;animation:blink .8s steps(1) infinite}
/* Bilanz-Karte */
.m-bilanz{position:absolute;left:50%;top:46%;transform:translate(-50%,-40%) scale(.86);opacity:0;z-index:25;background:#10233B;color:#EAF2FA;border:1px solid rgba(245,166,35,.4);border-radius:16px;padding:22px 30px;text-align:center;box-shadow:0 40px 90px rgba(5,12,20,.5);transition:.5s cubic-bezier(.2,1.2,.3,1)}
.m-bilanz.an{opacity:1;transform:translate(-50%,-50%) scale(1)}
.m-bilanz .von{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#8FA5BA}
.m-bilanz b{display:block;font-family:var(--disp);font-size:19px;margin:8px 0 4px;color:#fff}
.m-bilanz b em{font-style:normal;color:var(--amber)}
.m-bilanz span{font-size:12px;color:#B9CFDF}
@media (max-width:760px){.m-panel{width:78%}.m-entwurf{right:10%}}

/* ============ KINO 3 — Freigabe anfordern (Leck 01, geschlossen) ============ */
.f3-main{position:relative;background:#F2F5F8;overflow:hidden;padding:16px 18px}
.f3-kopfz{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.f3-kopfz h5{font-family:var(--disp);font-weight:800;font-size:16px;color:#16283C;margin:0}
.f3-status{font-family:var(--mono);font-size:9px;letter-spacing:.08em;background:#EDF2FE;color:#1D4ED8;border-radius:5px;padding:3px 9px}
.f3-kunde{font-size:11px;color:#61748A}
.f3-doku{max-width:520px;background:#fff;border:1px solid #E3E9EF;border-radius:12px;padding:14px 16px;box-shadow:0 12px 32px rgba(22,40,60,.09)}
.f3-doku h6{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#8FA0B1;margin:0 0 6px;font-weight:500}
.f3-pos{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:9px 2px;border-bottom:1px solid #EFF3F6;font-size:11.5px;color:#42576C;align-items:center}
.f3-pos b{font-family:var(--mono);color:#16283C;font-weight:500;text-align:right}
.f3-pos .sub{grid-column:1/-1;display:flex;gap:8px;align-items:center;margin-top:4px}
.f3-neu{opacity:0;transform:translateY(-10px);transition:.45s cubic-bezier(.2,1.1,.3,1)}
.f3-neu.da{opacity:1;transform:none}
.f3-foto{width:46px;height:32px;border-radius:6px;background:linear-gradient(140deg,#5a6b7c,#2e3c4a);position:relative;overflow:hidden;flex:none;opacity:0;transform:scale(.6);transition:.35s cubic-bezier(.2,1.5,.4,1)}
.f3-foto.da{opacity:1;transform:none}
.f3-foto::before{content:"";position:absolute;left:9px;top:9px;width:26px;height:5px;border-radius:3px;background:rgba(255,255,255,.4);transform:rotate(-16deg)}
.f3-foto::after{content:"";position:absolute;left:16px;top:17px;width:16px;height:4px;border-radius:3px;background:rgba(255,255,255,.22);transform:rotate(-16deg)}
.f3-chip{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;border-radius:4px;padding:2px 7px;white-space:nowrap}
.f3-chip.wart{background:#FBF1DC;color:#9A6B10}
.f3-chip.frei{background:#E7F4EC;color:#177244;opacity:0;transform:scale(.6);transition:.32s cubic-bezier(.2,1.5,.4,1)}
.f3-chip.frei.an{opacity:1;transform:none}
.f3-anf{display:inline-flex;gap:6px;align-items:center;font-size:10.5px;font-weight:700;color:#9A6B10;background:#FBF1DC;border:1px solid #F0DDB0;border-radius:7px;padding:4px 10px;transition:.2s;white-space:nowrap}
.f3-anf.k-hover{transform:translateY(-1px);background:#F7E8C8}
.f3-anf.gesendet{background:#EEF1F4;color:#8FA0B1;border-color:#E3E9EF}
.f3-summe{display:flex;justify-content:space-between;align-items:baseline;padding-top:11px;font-size:12px;font-weight:700;color:#16283C}
.f3-summe b{font-family:var(--mono);font-size:16px}
.f3-plus{display:inline-flex;gap:6px;align-items:center;margin-top:9px;background:#E7F4EC;border:1px solid #BFE3CD;color:#177244;font-size:10.5px;font-weight:700;border-radius:99px;padding:4px 11px;opacity:0;transform:translateY(8px);transition:.4s cubic-bezier(.2,1.3,.4,1)}
.f3-plus.an{opacity:1;transform:none}
/* Portal auf dem Kundenhandy */
.pt-portal{display:none}
.k-phone.portal #f3-screen1{display:none}
.k-phone.portal .pt-portal{display:block}
.pt-kopf{display:flex;gap:6px;align-items:center;font-size:9.5px;font-weight:700;color:#16283C;margin-bottom:6px}
.pt-kopf .zahn{width:16px;height:16px;border-radius:5px;background:#0f766e;color:#fff;display:grid;place-items:center;flex:none}
.pt-kopf span{font-family:var(--mono);font-size:7px;color:#8FA0B1;letter-spacing:.08em;margin-left:auto}
.pt-foto{height:52px;border-radius:8px;background:linear-gradient(140deg,#5a6b7c,#2e3c4a);position:relative;overflow:hidden;margin-bottom:7px}
.pt-foto::before{content:"";position:absolute;left:26px;top:16px;width:52px;height:8px;border-radius:5px;background:rgba(255,255,255,.4);transform:rotate(-14deg)}
.pt-pos{font-size:10.5px;color:#16283C;font-weight:600;line-height:1.4}
.pt-preis{font-family:var(--mono);font-size:13px;color:#16283C;margin:3px 0 8px}
.pt-btn{display:block;width:100%;text-align:center;background:#189A58;color:#fff;font-size:10.5px;font-weight:700;border-radius:8px;padding:8px 0;border:0;transition:.25s}
.pt-btn.ok{background:#0E6B3C}
.pt-neben{display:block;text-align:center;font-size:8.5px;color:#8FA0B1;margin-top:6px}
.pt-tipp{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 3px rgba(24,154,88,.45);opacity:0;pointer-events:none;z-index:40}
.pt-tipp.an{animation:pttipp .55s ease-out}
@keyframes pttipp{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}

/* Feierabend-Rechner */
.rechner{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:linear-gradient(180deg,var(--panel),var(--nacht-tief));border:1px solid var(--linie-stark);border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.re-links{padding:38px 40px}
.re-links h1,.re-links h2{font-size:clamp(26px,3.2vw,36px)}
.re-links .re-intro{margin-top:14px;color:var(--dim);font-size:15.5px;max-width:46ch}
.re-links .re-intro b{color:var(--text);font-weight:600}
.regler{margin-top:28px;display:flex;flex-direction:column;gap:22px}
.regler label{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-family:var(--mono);color:var(--dim)}
.regler output{color:var(--amber);font-size:14px}
.regler input[type=range]{width:100%;margin-top:10px;accent-color:var(--amber);height:5px}
.re-note{margin-top:22px;font-family:var(--mono);font-size:11.5px;color:#5C6B7A;line-height:1.6}
.re-rechts{background:rgba(245,166,35,.07);border-left:1px solid rgba(245,166,35,.3);padding:38px 40px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.re-rechts .gross{font-family:var(--disp);font-weight:800;font-size:clamp(46px,5.5vw,68px);line-height:1;color:var(--amber)}
.re-rechts .was{margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.re-rechts .euro{margin-top:22px;padding-top:20px;border-top:1px dashed var(--linie-stark);font-size:15px;color:var(--dim)}
.re-rechts .euro b{display:block;margin-top:4px;font-family:var(--mono);font-size:24px;color:var(--gruen)}
.re-rechts .fa{margin-top:20px;font-size:15.5px;color:var(--text)}
.re-rechts .fa b{color:var(--amber)}

.quellen{margin-top:18px;font-family:var(--mono);font-size:11px;color:#5C6B7A;letter-spacing:.03em}

/* Für wen */
.wer{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.werbox{background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);padding:26px 24px;text-align:center;transition:.22s}
.werbox:hover{border-color:rgba(245,166,35,.45);transform:translateY(-3px)}
.wsym{width:54px;height:54px;margin:0 auto 14px;border:1.5px dashed rgba(245,166,35,.5);border-radius:50%;display:grid;place-items:center;color:var(--amber)}
.werbox h3{font-size:17.5px}
.werbox p{font-size:13.8px;color:var(--dim);margin-top:8px}
.wer-note{margin-top:22px;font-size:15px;color:var(--dim);text-align:center}
.wer-note b{color:var(--text);font-weight:600}

/* Alles-drin-Chips */
.chips-titel{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-size:13.5px;color:var(--dim);text-decoration:none;border:1px solid var(--linie);border-radius:999px;padding:7px 15px;transition:.15s;background:rgba(241,237,227,.03)}
.chip:hover{border-color:var(--amber);color:var(--amber)}

/* Funktions-Grid */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fkat{background:rgba(241,237,227,.025);border:1px solid var(--linie);border-radius:var(--radius);padding:26px 24px}
.fkat h3{font-size:18px;display:flex;align-items:center;gap:10px;color:var(--amber);font-weight:700}
.fkat h3 svg{flex:none}
.fkat ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px}
.fkat li{font-size:15px;color:var(--dim);padding-left:20px;position:relative}
.fkat li::before{content:"—";position:absolute;left:0;color:var(--amber-tief)}
.fkat li b{color:var(--text);font-weight:600}

/* Leitplanken */
.lp{display:flex;gap:16px;background:var(--panel);border:1px solid var(--linie);border-radius:12px;padding:18px 20px}
.lp .icon{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(63,207,142,.12);border:1px solid rgba(63,207,142,.3);display:grid;place-items:center;color:var(--gruen)}
.lp h4{font-size:16.5px;font-weight:600;font-family:var(--body)}
.lp p{font-size:14.5px;color:var(--dim);margin-top:3px}

/* Zitat */
.zitat{background:linear-gradient(120deg,rgba(245,166,35,.10),transparent 55%),var(--panel);border:1px solid var(--linie-stark);border-radius:20px;padding:48px 52px;position:relative}
.zitat blockquote{font-family:var(--disp);font-size:clamp(21px,2.6vw,28px);font-weight:600;line-height:1.35;max-width:30ch}
.zitat figcaption{margin-top:22px;display:flex;align-items:center;gap:14px;color:var(--dim);font-size:15px}
.zitat .avatar{width:44px;height:44px;border-radius:50%;background:conic-gradient(from 200deg,var(--amber),#8a5a10 60%,var(--amber));display:grid;place-items:center;font-weight:700;color:#1A1204;font-family:var(--disp)}
.bsp-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--linie-stark);border-radius:999px;padding:3px 9px}

/* Preise */
.gruender-banner{display:flex;gap:18px;align-items:flex-start;background:linear-gradient(115deg,rgba(245,166,35,.14),rgba(245,166,35,.03) 60%),var(--panel);border:1px solid rgba(245,166,35,.45);border-radius:16px;padding:22px 26px;margin-bottom:26px}
.gruender-banner .stern{flex:none;width:40px;height:40px;border-radius:50%;background:var(--amber);color:#1A1204;display:grid;place-items:center;font-size:18px}
.gruender-banner b{font-size:17px;color:var(--text)}
.gruender-banner p{margin-top:4px;font-size:14.5px;color:var(--dim);max-width:70ch}
.preise{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.preis{background:var(--panel);border:1px solid var(--linie);border-radius:18px;padding:32px 28px;display:flex;flex-direction:column;position:relative}
.preis.top{border-color:var(--amber);box-shadow:0 0 50px rgba(245,166,35,.14)}
.preis .beliebt{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:#1A1204;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 14px;border-radius:999px}
.preis h3{font-size:20px}
.preis .betrag{margin:18px 0 4px;font-family:var(--disp);font-size:46px;font-weight:800}
.preis .betrag small{font-size:16px;color:var(--dim);font-weight:400;font-family:var(--body)}
.preis .pnote{font-size:13.5px;color:var(--dim)}
.preis ul{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.preis li{font-size:14.8px;color:var(--dim);padding-left:24px;position:relative}
.preis li::before{content:"✓";position:absolute;left:0;color:var(--gruen);font-family:var(--mono)}
.preis li b{color:var(--text);font-weight:600}
.preis .btn{justify-content:center}
.preis-fuss{margin-top:26px;text-align:center;color:var(--dim);font-size:14.5px}

/* ── Paket-Tabelle „Alle Funktionen im Vergleich" (29.09.2026) ──
   Inhalt aus src/lib/billing/paket-matrix.json per paket-matrix-einbauen.py — nie von Hand.
   Nur Tokens (--text/--dim/--panel/--linie/--amber/--gruen): body.tag schaltet sie um,
   also gilt der Tag-Kontrast (≥ 4,5:1) ohne eigene Tag-Regel. */
.pm{margin-top:56px}
.pm-titel{font-size:24px;text-align:center}
.pm-intro{text-align:center;color:var(--dim);font-size:14.5px;margin:8px auto 22px;max-width:62ch}
.pm-rahmen{background:var(--panel);border:1px solid var(--linie);border-radius:18px;overflow:hidden}
.pm-tabelle{width:100%;border-collapse:collapse;font-size:14.5px}
.pm-tabelle th,.pm-tabelle td{padding:11px 14px;border-top:1px solid var(--linie);text-align:center;vertical-align:middle}
.pm-tabelle thead th{border-top:0;font-size:15px;color:var(--text);font-weight:700;width:17%}
.pm-tabelle thead th:first-child{width:auto;text-align:left}
.pm-tabelle thead th small{display:block;font-weight:400;color:var(--dim);font-size:12.5px;margin-top:2px}
.pm-tabelle th[scope=row]{text-align:left;font-weight:400;color:var(--text);line-height:1.4}
.pm-gruppe th{text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);padding-top:20px}
.pm-tabelle td.ja::before{content:"✓";color:var(--gruen);font-family:var(--mono);font-weight:700;font-size:16px}
.pm-tabelle td.nein::before{content:"—";color:var(--dim)}
.pm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pm-stark th[scope=row]{font-weight:700;position:relative}
.pm-stark th[scope=row]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--amber)}
@media (max-width:640px){
  .pm-tabelle{font-size:13.5px}
  .pm-tabelle th,.pm-tabelle td{padding:10px 8px}
  .pm-tabelle thead th{font-size:13px;width:19%}
  .pm-titel{font-size:21px}
}

/* ── Highlight-Kacheln „Das spart am meisten Zeit" (29.09.2026) ──
   Inhalt aus src/lib/billing/paket-matrix.json (`highlights`) per paket-matrix-einbauen.py.
   Nur Tokens — Tag und Nacht schalten über body.tag um. */
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hl{background:var(--panel);border:1px solid var(--linie);border-radius:16px;padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.hl-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--amber);border:1px solid var(--linie-stark)}
.hl h3{font-size:17.5px;margin-top:4px}
.hl p{font-size:14.5px;color:var(--dim);line-height:1.55;flex:1}
.hl-paket{align-self:flex-start;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);border:1px solid var(--linie-stark);border-radius:999px;padding:3px 10px;margin-top:4px}
.hl-titel{font-size:20px;margin:34px 0 16px}
@media (max-width:980px){.hl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.hl-grid{grid-template-columns:1fr}}

/* ── FAQ (Preise-Seite) ── */
.faq{max-width:780px;margin:0 auto;display:grid;gap:10px}
.faq details{background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius)}
.faq details[open]{border-color:var(--linie-stark);background:var(--panel-hell)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;font-family:var(--disp);font-size:17.5px;font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;width:26px;height:26px;border:1px solid var(--linie-stark);border-radius:50%;display:grid;place-items:center;color:var(--amber);font-size:17px;font-weight:400;transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 20px 18px;color:var(--dim);font-size:15.5px;line-height:1.68;margin:0}
.faq .faq-a b{color:var(--text)}
.faq .faq-a a{color:var(--amber)}
.faq-intro a{color:var(--amber)}
@media (max-width:640px){.faq summary{font-size:16px;padding:14px 16px}.faq .faq-a{padding:0 16px 16px}}

/* ── Der Greifer (Startseite) ── */
.greifer{--logo-desk:#F0B23E;display:grid;grid-template-columns:1fr 44px 1fr;gap:6px;align-items:stretch;max-width:980px;margin:0 auto}
body.tag .greifer{--logo-desk:#C98A04}
.gf-shop,.gf-auftrag{background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);padding:14px 16px 16px;font-size:13.5px}
.gf-chrome{display:flex;align-items:center;gap:6px;margin-bottom:12px;color:var(--dim);font-family:var(--mono);font-size:11px}
.gf-chrome i{width:8px;height:8px;border-radius:50%;background:var(--linie-stark)}
.gf-chrome span{margin-left:8px;border:1px solid var(--linie);border-radius:6px;padding:3px 10px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-suche{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--linie-stark);border-radius:8px;padding:7px 10px;font-family:var(--mono);font-size:11.5px;color:var(--text);margin-bottom:4px}
.gf-badge{margin-left:auto;background:rgba(245,166,35,.14);color:var(--amber);border-radius:20px;padding:2px 9px;font-family:var(--body);font-size:10.5px;font-weight:600;white-space:nowrap}
.gf-zeile{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid var(--linie);color:var(--dim)}
.gf-zeile b{color:var(--text);font-weight:600;font-family:var(--mono);font-size:12px;white-space:nowrap}
.gf-summe{display:flex;justify-content:space-between;padding:8px 2px 0;color:var(--dim);font-size:12px;font-family:var(--mono)}
.gf-panel{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--nacht-tief);border:1px solid var(--amber);border-radius:12px;padding:10px 12px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
body.tag .gf-panel{background:#FFF6E3;box-shadow:0 10px 24px -8px rgba(23,30,40,.16)}
.gf-panel b{display:block;font-size:13px}
.gf-panel small{color:var(--dim);font-size:11px}
.gf-cta{margin-left:auto;background:var(--amber);color:#1A1204;font-weight:700;font-size:11.5px;border-radius:8px;padding:6px 10px;white-space:nowrap}
.gf-pfeil{display:grid;place-items:center;color:var(--amber);font-size:24px;font-weight:700}
.gf-auftrag{align-self:center}
.gf-akopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px;padding:0 2px}
.gf-akopf b{font-family:var(--disp);font-size:15px}
.gf-akopf span{color:var(--dim);font-size:12px}
.gf-azeile{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 2px;border-top:1px solid var(--linie);color:var(--text)}
.gf-azeile>span:first-child{color:var(--dim)}
.gf-ek{margin-left:auto;color:var(--dim);font-family:var(--mono);font-size:10.5px;white-space:nowrap}
.gf-azeile b{font-family:var(--mono);font-size:12px;font-weight:600;white-space:nowrap}
.gf-afuss{margin-top:2px;padding:9px 2px 0;border-top:1px solid var(--linie-stark);display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--gruen)}
.gf-afuss b{font-family:var(--mono);white-space:nowrap;flex:none}
.gf-schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:980px;margin:32px auto 0}
.gfs{display:flex;gap:12px;align-items:flex-start}
.gfs .z{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--amber);color:var(--amber);display:grid;place-items:center;font-family:var(--mono);font-size:12.5px}
.gfs h4{font-family:var(--disp);font-size:15.5px;margin-bottom:4px}
.gfs p{color:var(--dim);font-size:14px;line-height:1.6}
@media (max-width:980px){.greifer{grid-template-columns:1fr}.gf-pfeil{transform:rotate(90deg);padding:2px 0}.gf-schritte{grid-template-columns:1fr;gap:16px;margin-top:26px}}
@media (max-width:640px){.gf-suche{font-size:10.5px}.gf-badge{margin-left:0}}

/* Demo-Seite */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.formular{background:var(--panel);border:1px solid var(--linie-stark);border-radius:18px;padding:34px}
.formular label{display:block;font-size:13.5px;font-weight:600;margin:18px 0 7px;color:var(--dim);letter-spacing:.03em;text-transform:uppercase;font-family:var(--mono)}
.formular label:first-of-type{margin-top:0}
.formular input,.formular select{width:100%;background:var(--nacht-tief);border:1px solid var(--linie-stark);border-radius:10px;padding:13px 15px;color:var(--text);font-size:16px;font-family:var(--body)}
.formular input:focus,.formular select:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
.formular .btn{width:100%;justify-content:center;margin-top:26px}
.formular textarea{width:100%;background:var(--nacht-tief);border:1px solid var(--linie-stark);border-radius:10px;padding:13px 15px;color:var(--text);font-size:16px;font-family:var(--body);line-height:1.55;resize:vertical}
.formular textarea:focus{outline:2px solid var(--amber);outline-offset:1px;border-color:transparent}
.formular label .opt{font-weight:400;text-transform:none;letter-spacing:0;font-family:var(--body);opacity:.7}
.form-kopf{font-size:15.5px;line-height:1.6;color:var(--dim);margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--linie)}
.form-kopf b{color:var(--text)}
.form-fuss{font-size:13px;line-height:1.65;color:var(--dim);margin:16px 0 0}
.form-fuss a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(240,178,62,.35)}
.form-ok{margin:18px 0 0;padding:15px 17px;border-radius:12px;background:rgba(240,178,62,.10);border:1px solid rgba(240,178,62,.30);font-size:14.5px;line-height:1.65}
.form-ok a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(240,178,62,.35)}
.demo-start{margin-top:34px;padding:26px 28px;border-radius:16px;background:var(--panel);border:1px solid var(--linie-stark)}
.demo-start h4{margin:0 0 8px;font-size:18px}
.demo-start p{margin:0 0 20px;font-size:15px;line-height:1.65;color:var(--dim)}
.demo-start .btn{width:100%;justify-content:center}
.demo-start .klein{margin:14px 0 0;font-size:12.8px;color:var(--dim);text-align:center}
.demo-punkte{display:flex;flex-direction:column;gap:22px}
.dpunkt{display:flex;gap:16px}
.dpunkt .z{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--amber);color:var(--amber);display:grid;place-items:center;font-family:var(--mono);font-size:14px}
.dpunkt h4{font-size:17px;font-family:var(--body);font-weight:600}
.dpunkt p{font-size:15px;color:var(--dim);margin-top:4px}

/* Kontakt-Karte unten rechts (Owner 09./10.10.2026): ein Knopf, eine Karte, drei Schritte —
   Demo-Frage → Termin-Formular oder Umfrage — und darunter der E-Mail-Weg. Steht ausserhalb
   jeder [data-page] (deren Einblend-Animation lässt ein transform stehen, das position:fixed
   an den Container bindet — s. src/website-startseite.test.ts). */
.schwebe{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.schwebe-knopf{display:inline-flex;align-items:center;gap:9px;padding:13px 18px;border-radius:999px;border:0;cursor:pointer;background:var(--amber);color:#1A1204;font:600 15px var(--body);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:.18s}
.schwebe-knopf:hover{transform:translateY(-2px)}
.schwebe-knopf svg{flex:none}
body.tag .schwebe-knopf{background:#F5A623;color:#1A1204;box-shadow:0 10px 26px rgba(23,30,40,.22)}
.schwebe-karte{width:min(360px,calc(100vw - 24px));max-height:calc(100vh - 96px);overflow:auto;background:var(--panel);border:1px solid var(--linie-stark);border-radius:18px;padding:20px 20px 16px;box-shadow:0 18px 50px rgba(0,0,0,.4);position:relative}
.schwebe-karte[hidden]{display:none}
.schwebe-karte.auf{animation:karte-auf .3s ease-out}
@keyframes karte-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body.tag .schwebe-karte{box-shadow:0 18px 50px rgba(23,30,40,.22)}
.schwebe-zu{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--linie);background:transparent;color:var(--dim);cursor:pointer;display:grid;place-items:center}
.schwebe-zu:hover{color:var(--text);border-color:var(--linie-stark)}
.schwebe-hallo{font-size:15px;line-height:1.55;color:var(--dim);margin:0 24px 14px 0}
.schwebe-hallo b{color:var(--text)}
.karte-schritt[hidden]{display:none}
.karte-knoepfe{display:flex;gap:8px;flex-wrap:wrap}
.schwebe-karte .btn{padding:11px 16px;font-size:14.5px;border-radius:10px;box-shadow:none}
.karte-knoepfe .btn-amber{flex:1 1 auto;justify-content:center}
.schwebe-karte .formular{position:relative;background:transparent;border:0;border-radius:0;padding:0}
.schwebe-karte .formular label{margin:10px 0 5px;font-size:12px}
.schwebe-karte .formular input,.schwebe-karte .formular textarea{padding:10px 12px;font-size:15px}
.schwebe-karte .formular .btn{width:100%;margin-top:14px}
.schwebe-karte .form-fuss{margin-top:10px;font-size:11.5px;line-height:1.5}
.schwebe-karte .form-ok{margin-top:12px;font-size:14px}
.karte-direkt{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linie);font-size:13px;color:var(--dim)}
.karte-direkt a{color:var(--amber);text-decoration:none;font-weight:600}
.schwebe-teaser{display:flex;align-items:center;gap:6px;max-width:calc(100vw - 24px);background:var(--panel);border:1px solid var(--linie-stark);border-radius:999px;padding:5px 6px 5px 14px;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:karte-auf .3s ease-out}
.schwebe-teaser[hidden]{display:none}
body.tag .schwebe-teaser{box-shadow:0 10px 26px rgba(23,30,40,.18)}
.schwebe-teaser-text{border:0;background:transparent;color:var(--text);font:600 14px var(--body);cursor:pointer;text-align:left;padding:5px 0}
.schwebe-teaser-zu{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--linie);background:transparent;color:var(--dim);cursor:pointer;display:grid;place-items:center}
/* Telefon (Owner 10.10.2026: „acel card sa ramana doar in dreapta jos iar pe telefon sa nu ocupe
   mult spatiu"): Knopf nur als Kreis mit Symbol, Karte schmaler und dichter, scrollt innen. */
@media (max-width:640px){
  .schwebe{right:12px;bottom:12px;gap:10px}
  .schwebe-knopf{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%}
  .schwebe-knopf span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .schwebe-karte{width:min(300px,calc(100vw - 24px));max-height:calc(100vh - 84px);padding:16px 16px 14px;border-radius:16px}
  .schwebe-hallo{font-size:14px;line-height:1.5;margin:0 22px 12px 0}
  .schwebe-zu{top:10px;right:10px}
  .schwebe-karte .btn{padding:10px 14px;font-size:14px}
  .karte-knoepfe .btn-amber{flex:1 1 100%}
  .schwebe-karte .formular label{margin:8px 0 4px}
  .schwebe-karte .formular input,.schwebe-karte .formular textarea{padding:9px 11px;font-size:16px}
  .schwebe-karte .form-fuss{margin-top:8px;font-size:11px}
  .karte-direkt{margin-top:10px;padding-top:10px;font-size:12.5px}
}
@media print{.schwebe{display:none}}
@media (prefers-reduced-motion:reduce){.schwebe-knopf{transition:none}.schwebe-knopf:hover{transform:none}.schwebe-karte.auf{animation:none}}

/* Tutorials (10.10.2026): Karten mit CSS-Cover statt YouTube-Bild — Symbol, Nummer, Abspielknopf.
   Erst der Klick laedt das Video (youtube-nocookie, Skript unten). */
.tut-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px}
@media (max-width:980px){.tut-raster{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.tut-raster{grid-template-columns:1fr;gap:24px}}
.tut{display:flex;flex-direction:column;gap:8px}
.tut-bild{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 12% 0%,rgba(245,166,35,.22),transparent 55%),var(--panel-hell);border:1px solid var(--linie-stark);text-decoration:none;color:var(--text);transition:.18s}
.tut-bild:hover{border-color:rgba(245,166,35,.6)}
.tut-bild iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tut-ico{position:absolute;left:16px;top:14px;width:44px;height:44px;border-radius:12px;background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.35);color:var(--amber);display:grid;place-items:center}
.tut-nr{position:absolute;right:16px;top:18px;font:600 12.5px var(--mono);letter-spacing:.16em;color:var(--dim)}
.tut-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--amber);color:#1A1204;display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:.18s}
.tut-bild:hover .tut-play{transform:translate(-50%,-50%) scale(1.08)}
body.tag .tut-play{background:#F5A623;color:#1A1204}
.tut-yt{position:absolute;left:18px;bottom:13px;font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tut h3{font-size:17px;line-height:1.3;font-family:var(--body);font-weight:600;margin-top:6px}
.tut p{font-size:14.5px;line-height:1.55;color:var(--dim)}
.tut-hinweis{margin-top:38px;padding-top:18px;border-top:1px solid var(--linie);font-size:13.5px;line-height:1.65;color:var(--dim)}
.tut-hinweis a{color:var(--amber);text-decoration:none;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.tut-bild,.tut-play{transition:none}.tut-bild:hover .tut-play{transform:translate(-50%,-50%)}}

/* CTA-Banner */
.banner{background:linear-gradient(115deg,rgba(245,166,35,.16),rgba(245,166,35,.03) 60%),var(--panel);border:1px solid rgba(245,166,35,.4);border-radius:22px;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.banner h1,.banner h2{font-size:clamp(26px,3.2vw,38px);max-width:22ch}
.banner p{color:var(--dim);margin-top:10px}

/* Footer */
footer{border-top:1px solid var(--linie);padding:44px 0 88px;position:relative;z-index:1}
/* Unten rechts schwebt „Fragen? Schreib uns“, am Handy dazu der Teaser darüber (zusammen 114 px hoch).
   Ohne diese Luft lagen beide am Seitenende über den letzten Fuß-Links: am Handy Partner-Vorteile,
   Instagram, Impressum; am Desktop Datenschutz. */
@media (max-width:640px){footer{padding-bottom:124px}}
.fzeile{display:flex;gap:20px 36px;flex-wrap:wrap;align-items:center;color:var(--dim);font-size:14px}
.fzeile .logo{font-size:17px}
.fzeile .logo .logo-mark{width:28px;height:16px}
.fzeile nav{display:flex;gap:22px;margin-left:auto}
.fzeile nav a{text-decoration:none;color:var(--dim)}
.fzeile nav a:hover{color:var(--amber)}
.entwurf{margin-top:22px;font-family:var(--mono);font-size:11.5px;color:#5C6B7A;letter-spacing:.05em}

@media (prefers-reduced-motion:reduce){
  body:not(.bewegung-ok) *{animation-duration:.01ms !important;animation-delay:0ms !important;transition:none !important}
  body:not(.bewegung-ok) .jrow,body:not(.bewegung-ok) .jfrage,body:not(.bewegung-ok) .jantwort{opacity:1}
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;padding:56px 0 48px}
  .szenarien,.fgrid,.preise{grid-template-columns:1fr}
  .wer{grid-template-columns:1fr 1fr}
  .rechner{grid-template-columns:1fr}
  .re-rechts{border-left:0;border-top:1px solid rgba(245,166,35,.3)}
  .re-links,.re-rechts{padding:28px 24px}
  .demo-grid{grid-template-columns:1fr;gap:36px}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--nacht-tief);flex-direction:column;padding:16px 24px 22px;border-bottom:1px solid var(--linie-stark)}
  .nav-links.offen{display:flex}
  .burger{display:block}
  .nav-cta{display:none}
  .nav-links .nur-mobil{display:block}
  .nav-links a.mobil-login{border-top:1px solid var(--linie-stark);margin-top:10px;padding-top:16px;border-radius:0}
  .nav-links a.mobil-cta{background:var(--amber);color:#1A1204;border-radius:12px;text-align:center;font-weight:700;margin-top:8px}
  .zitat{padding:34px 28px}
  .banner{padding:38px 30px}
}

/* Preis-Teaser Startseite */
.preis-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pz-karte{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--panel);border:1px solid var(--linie-stark);border-radius:16px;padding:20px 22px;text-decoration:none;color:var(--text);transition:.18s}
.pz-karte:hover{transform:translateY(-3px);border-color:rgba(245,166,35,.5)}
.pz-karte.top{border-color:rgba(245,166,35,.55);background:linear-gradient(160deg,rgba(245,166,35,.10),transparent 55%),var(--panel)}
.pz-band{position:absolute;top:-10px;right:16px;background:var(--amber);color:#1A1204;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:3px 10px}
.pz-name{font-family:var(--disp);font-weight:700;font-size:16px}
.pz-preis{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--amber)}
.pz-preis small{font-size:13px;color:var(--dim);font-weight:600}
.pz-info{font-size:13.5px;color:var(--dim);line-height:1.5}
.pz-info b{color:var(--text)}
.pz-fuss{margin-top:16px;text-align:center;color:var(--dim);font-size:14px}
.pz-fuss a{color:var(--amber)}
@media (max-width:860px){.preis-teaser{grid-template-columns:1fr}}
/* Archiv-Banner auf der Preisseite */
.gruender-banner.archiv{border-color:rgba(18,150,140,.5);background:linear-gradient(115deg,rgba(18,150,140,.13),rgba(18,150,140,.03) 60%),var(--panel)}
.gruender-banner.archiv .stern{background:#12968C;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.02em}

.nav-recht{display:flex;align-items:center;gap:10px;margin-left:6px}

/* Banner-Paar Startseite + Stern-Betonung */
.banner-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}
.banner-paar .gruender-banner{margin-bottom:0}
@media (max-width:900px){.banner-paar{grid-template-columns:1fr}}
.gruender-banner:not(.archiv) .stern{box-shadow:0 0 26px rgba(245,166,35,.55);font-size:20px}
.angebot.gruender{background:linear-gradient(120deg,rgba(245,166,35,.20),rgba(245,166,35,.05)),var(--panel);border:1px solid rgba(245,166,35,.6);box-shadow:0 0 22px rgba(245,166,35,.14)}
.angebot.gruender i{color:#1A1204;background:var(--amber);border-radius:50%;width:20px;height:20px;display:inline-grid;place-items:center;font-size:11px}

/* Ratgeber */
.art-haupt{display:block;background:linear-gradient(150deg,rgba(245,166,35,.10),transparent 55%),var(--panel);border:1px solid rgba(245,166,35,.45);border-left:4px solid var(--amber);border-radius:16px;padding:28px 30px;text-decoration:none;color:var(--text);margin-bottom:22px;transition:.18s}
.art-haupt:hover{transform:translateY(-3px)}
.art-haupt h3{font-size:clamp(21px,2.4vw,27px);margin:12px 0 10px}
.art-haupt p{color:var(--dim);max-width:72ch}
.art-raster{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.art-karte{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--linie-stark);border-radius:14px;padding:20px 22px;text-decoration:none;color:var(--text);transition:.18s}
.art-karte:hover{transform:translateY(-3px);border-color:rgba(245,166,35,.5)}
.art-karte h4{font-size:16.5px;line-height:1.4;font-weight:700}
.art-chip{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:3px 10px}
.art-chip.recht{color:var(--amber);background:rgba(245,166,35,.13)}
.art-chip.geld{color:var(--gruen);background:rgba(63,207,142,.13)}
.art-chip.digital{color:#7EA6CD;background:rgba(126,166,205,.14)}
.art-chip.kunden{color:#E5A0B2;background:rgba(229,96,94,.13)}
.art-chip.praxis{color:var(--dim);background:rgba(147,163,178,.15)}
.art-meta{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.04em;margin-top:auto}
.art-note{margin-top:20px;color:var(--dim);font-size:14px;max-width:70ch}
@media (max-width:860px){.art-raster{grid-template-columns:1fr}}
/* Partner */
.p-schritte{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.p-schritte span{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--linie-stark);border-radius:999px;padding:9px 16px;font-size:14px;color:var(--dim)}
.p-schritte i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--amber);color:#1A1204;display:inline-grid;place-items:center;font-size:11px;font-weight:800}
.p-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.p-karte{position:relative;display:flex;flex-direction:column;gap:9px;background:var(--panel);border:1px solid var(--linie-stark);border-radius:16px;padding:22px;transition:.18s}
.p-karte:hover{transform:translateY(-3px);border-color:rgba(245,166,35,.5)}
.p-karte h4{font-size:17.5px;padding-right:64px}
.p-karte p{font-size:14px;color:var(--dim);line-height:1.55}
.p-rabatt{position:absolute;top:18px;right:18px;font-family:var(--disp);font-weight:800;font-size:17px;color:#1A1204;background:var(--amber);border-radius:10px;padding:5px 10px}
.p-kat{margin-top:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.p-karte.offen{border-style:dashed;background:transparent;align-items:flex-start}
.p-plus{font-size:26px;color:var(--amber);line-height:1}
.p-note{margin-top:18px;color:var(--dim);font-size:13.5px}
@media (max-width:960px){.p-raster{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.p-raster{grid-template-columns:1fr}}

/* Ratgeber: Artikel & Redaktion */
.art-plan-titel{font-size:19px;margin:34px 0 14px}
.art-plan{display:flex;flex-direction:column;gap:8px}
.art-plan span{display:flex;align-items:baseline;gap:12px;background:var(--panel);border:1px dashed var(--linie-stark);border-radius:11px;padding:11px 16px;font-size:14.5px;color:var(--text)}
.art-plan i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--amber);flex:none}
.art-plan em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);flex:none}
.artikel{max-width:780px}
.art-zurueck{display:inline-block;color:var(--dim);text-decoration:none;font-size:14.5px;margin-bottom:22px}
.art-zurueck:hover{color:var(--amber)}
.artikel h1,.artikel h2{font-size:clamp(26px,3.4vw,38px);margin:12px 0 10px}
.artikel .art-meta{display:block;margin-bottom:26px}
.art-inhalt p{color:var(--dim);margin-bottom:18px;line-height:1.75}
.art-inhalt p b, .art-inhalt li b{color:var(--text)}
.art-inhalt .einstieg{font-size:18.5px;color:var(--text)}
.art-inhalt h3{font-size:21px;margin:30px 0 12px}
.art-inhalt ul{margin:0 0 18px 20px;display:flex;flex-direction:column;gap:9px;color:var(--dim)}
.art-kasten{background:linear-gradient(120deg,rgba(245,166,35,.10),transparent 60%),var(--panel);border:1px solid rgba(245,166,35,.4);border-radius:12px;padding:15px 18px;margin:22px 0;color:var(--dim);font-size:15px}
.art-kasten b{color:var(--text)}
.art-cta{background:var(--panel);border:1px solid var(--linie-stark);border-left:4px solid var(--amber);border-radius:12px;padding:16px 19px;margin-top:26px;color:var(--dim);font-size:15px}
.art-cta b{color:var(--text)}
.art-cta a{color:var(--amber);font-weight:600;text-decoration:none}
.art-weiter{display:inline-block;margin-top:30px;color:var(--amber);font-weight:600;text-decoration:none}

a.p-karte{text-decoration:none;color:inherit}
.p-logo{width:46px;height:46px;border-radius:12px;background:#16283C;color:#EAF1F7;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:13.5px;letter-spacing:.02em;border:1px solid rgba(126,166,205,.3);margin-bottom:4px}
.p-karte h4{padding-right:74px}
.p-rabatt.fest{background:var(--gruen);color:#0A2A18}
.p-link{font-family:var(--mono);font-size:11.5px;color:var(--amber);letter-spacing:.03em}
.p-link.stumm{color:var(--dim)}

.jahres{font-family:var(--mono);font-size:11.5px;color:var(--gruen);margin:-4px 0 6px;letter-spacing:.02em}
.jahres b{font-weight:600}
@media (min-width:981px){.preise .preis.top{transform:translateY(-12px) scale(1.035);z-index:1;box-shadow:0 34px 80px rgba(0,0,0,.4)}}

/* ── Mobil-Feinschliff ─────────────────────────────────────────── */
body{overflow-x:clip}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .login-link{display:none}
  .logo{font-size:16.5px;gap:8px}
  .logo .logo-mark{width:29px;height:16px}
  .thema-knopf{width:36px;height:36px}
  .wer{grid-template-columns:1fr}
  .banner{flex-direction:column;align-items:flex-start;gap:18px;padding:28px 22px}
  .angebot-zeile .angebot{font-size:13.5px}
  .art-plan span{flex-wrap:wrap}
  .art-plan em{margin-left:0;flex-basis:100%}
  .p-schritte span{width:100%}
  .fzeile{gap:14px 22px}
  .fzeile nav{flex-wrap:wrap;margin-left:0;gap:10px 18px}
  .gruender-banner{padding:18px 18px;gap:14px}
  .demo-frage-bp{padding:20px 18px}
  .k-suche{display:none}
  .preise .preis.top{transform:none}
}

/* ══ Startseite „Wechseln" (Owner 05.10.2026) ══════════════════════════════════
   Entwurf 6 der Startseiten-Entwürfe: Frage → was wir bieten → kompakte Preise → „Das war's".
   Rechts im Hero der gelbe Bon (aus dem Entwurf „Umsteigen"). Gelb + dunkle Tinte in beiden
   Themen wie der Amber-Knopf; alles andere über die Tokens, Tag und Nacht wie überall. */
.hero-beruhigt{margin-top:16px;font-size:15px;color:var(--dim);display:flex;align-items:flex-start;gap:8px}
.hero-beruhigt i{font-style:normal;color:var(--gruen);font-weight:700}

.bon{position:relative;width:100%;max-width:520px;justify-self:end;background:#F5A623;color:#1A1204;border-radius:22px;
  box-shadow:0 34px 60px -34px rgba(19,40,61,.55)}
.bon-oben{padding:26px 30px 22px}
.bon-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.bon-kopf em{font-style:normal;font-size:11px;letter-spacing:.08em;padding:4px 9px;border:1.5px solid #1A1204;border-radius:999px}
.bon-titel{font-family:var(--disp);font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1.05;letter-spacing:-.02em;
  margin-top:10px;text-wrap:balance}
.bon ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.bon li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;font-weight:600;line-height:1.35}
.bon .haken{flex:0 0 26px;height:26px;border-radius:50%;background:#13283D;color:#FFFFFF;display:grid;place-items:center;margin-top:-2px}
/* Abriss mit zwei Kerben — die Kerben tragen den Seitengrund */
.bon-riss{position:relative;height:0;border-top:2px dashed rgba(26,18,4,.38);margin:0 26px}
.bon-riss::before,.bon-riss::after{content:"";position:absolute;top:-16px;width:30px;height:30px;border-radius:50%;background:var(--nacht)}
.bon-riss::before{left:-41px}
.bon-riss::after{right:-41px}
/* Unter dem Abriss: Gründer-Bonus und 10 Jahre Archiv nebeneinander (Owner 05.10.2026) */
.bon-unten{padding:18px 26px 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bon-stub{display:flex;align-items:flex-start;gap:10px;min-width:0}
.bon-stub .haken{margin-top:1px}
.bon-stub .label{display:block;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.bon-stub b{display:block;font-family:var(--disp);font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-.02em;margin-top:3px}
.bon-stub p{font-size:13.5px;line-height:1.4;margin-top:4px;color:#33260A}

/* „Das bieten wir" — acht Karten, je mit Paket-Marke */
.biete{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.biete article{background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);padding:22px;display:flex;
  flex-direction:column;gap:10px;min-width:0}
.biete .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(245,166,35,.12);color:var(--amber);flex:none}
.biete h3{font-family:var(--disp);font-size:18.5px;line-height:1.25}
.biete p{font-size:15px;line-height:1.5;color:var(--dim)}
.biete .paket{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.biete .paket b{color:var(--amber);font-weight:600}
.biete-fuss{margin-top:16px;font-size:15px}
.biete-fuss a{color:var(--amber)}

/* Kompakte Preiskarten (Owner 05.10.2026: „sa nu ocupe atat de mult spatiu") */
/* Owner 19.10.2026: „preturile nu sunt perfect pe mijloc" — Karten und Überschrift mittig. */
.preise-kompakt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;max-width:980px;margin:0 auto}
.sek-kopf.mitte{text-align:center;margin-left:auto;margin-right:auto}
.pk{position:relative;background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);padding:22px 20px 20px;
  display:flex;flex-direction:column;gap:10px;min-width:0}
.pk.top{border-color:#F5A623;box-shadow:0 0 36px rgba(245,166,35,.14)}
.pk .beliebt{position:absolute;top:-12px;left:20px;background:#F5A623;color:#1A1204;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.pk-kopf{display:flex;flex-direction:column;gap:6px}
.pk h3{font-family:var(--disp);font-size:20px;line-height:1.2}
.pk-preis{font-family:var(--disp);font-weight:800;font-size:30px;line-height:1;white-space:nowrap}
.pk-preis small{font-family:var(--body);font-weight:400;font-size:13px;color:var(--dim);margin-left:4px}
.pk-note{font-size:14px;color:var(--dim);line-height:1.4}
.pk ul{list-style:none;margin:2px 0 6px;padding:0;display:flex;flex-direction:column;gap:6px}
.pk li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.4;color:var(--dim)}
.pk li::before{content:"✓";position:absolute;left:0;color:var(--gruen);font-family:var(--mono)}
.pk li b{color:var(--text);font-weight:600}
.pk .btn{margin-top:auto;justify-content:center;padding:11px 16px;font-size:15px}

.fertig h2{max-width:none}
.fertig .fertig-knoepfe{display:flex;gap:12px;flex-wrap:wrap}

/* Jessica-Seite: Jessica-Demo neben ihrer Erklärung (05.10.2026 Startseite → Funktionen, 12.10.2026 → Jessica) */
.jessica-zeile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.jessica-zeile .sek-kopf{margin-bottom:0}
.jessica-zeile .sek-kopf a{color:var(--amber)}

/* Die Produktfilme ragten am Handy über den Rand (scrollWidth 418 bei 390 px mit „Bewegung
   reduzieren"). clip schneidet ab, ohne einen Scroll-Container zu bauen — der Kopf bleibt sticky.
   Seit 19.10.2026 NICHT mehr auf main, sondern je Seite außer der Startseite: in Safari zittert
   ein position:sticky-Element, das in einem overflow-x:clip-Vorfahren steckt, beim Scrollen um
   1–2px (WebKit-Fehler 247130) — der Owner sah das Telefon der Präsentation „tremura destul de rau".
   Die Startseite ragt nirgends über (geprüft 360–430 px), sie braucht den Schnitt nicht. */
main>[data-page]:not([data-page="start"]){overflow-x:clip}

@media (max-width:980px){
  .bon{justify-self:stretch;max-width:none}
  .biete{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jessica-zeile{grid-template-columns:1fr;gap:28px}
}
@media (max-width:860px){
  .preise-kompakt{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:640px){
  .bon-oben{padding:22px 22px 18px}
  .bon-unten{padding:16px 22px 20px}
  .bon-riss{margin:0 20px}
  .bon-riss::before{left:-35px}
  .bon-riss::after{right:-35px}
  .bon li{font-size:15.5px}
  .biete{grid-template-columns:1fr;gap:10px}
  .biete article{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:16px}
  .biete .ico{grid-row:1 / span 3}
  .biete .paket{margin-top:2px}
  .pk{padding:18px 16px 16px;gap:8px}
  .pk-note{display:none}
  .pk ul{gap:4px}
}
@media (max-width:480px){
  .bon-unten{grid-template-columns:1fr;gap:14px}
}
/* „Funktionen": die ganze Liste eingeklappt unter den sechs Kacheln (Owner 12.10.2026, Audit funktionen-00) */
.alle-funktionen{margin-top:30px}
.alle-funktionen>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;padding:13px 22px;border:1px solid var(--linie-stark);border-radius:12px;font-family:var(--body);font-size:16px;font-weight:600;color:var(--text);background:rgba(241,237,227,.03);transition:.18s}
.alle-funktionen>summary::-webkit-details-marker{display:none}
.alle-funktionen>summary::after{content:"+";color:var(--amber);font-size:20px;line-height:1;font-weight:400;transition:transform .18s ease}
.alle-funktionen[open]>summary::after{transform:rotate(45deg)}
.alle-funktionen>summary:hover{border-color:var(--amber);color:var(--amber)}
.alle-funktionen>summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.alle-funktionen[open]>summary{margin-bottom:22px}
body.tag .alle-funktionen>summary{background:rgba(23,30,40,.03)}
/* Funktionen, 12.10.2026 — „Vier Sätze": vier Karten, auf breiten Schirmen 2 × 2 statt 3 + 1. */
@media (min-width:981px){.szenarien{grid-template-columns:repeat(2,1fr)}}
/* Handy (Prüflauf 12.10.2026): Funktionen war 9.237 px hoch (Ziel ≤ 9.000), Jessica wäre nach dem
   Untertitel-Umzug über 4.500 px gekommen. Weniger Luft zwischen den Abschnitten und in den vier
   Satz-Karten, kein Inhalt fällt weg. Nur direkte section-Kinder der Seite, die .k-screen-sections
   in den Filmen bleiben unberührt. Die Inline-Werte (padding-top:0, margin-bottom:36px) gelten weiter. */
@media (max-width:640px){
  [data-page="funktionen"] > section,[data-page="jessica"] > section{padding-top:64px;padding-bottom:64px}
  [data-page="funktionen"] .sek-kopf{margin-bottom:36px}
  .szenarien{gap:12px}
  .szene{padding:22px 20px}
  .szene h3{margin:10px 0 8px}
  .szene .ablauf{margin-top:14px;padding-top:12px}
}
/* „Für wen?" am Handy 2 × 2 statt einer Spalte. Eigene Klasse .wer-raster, weil .wer auch im Film 02 steht (.k-rkopf .wer). */
@media (max-width:640px){
  .wer.wer-raster{grid-template-columns:1fr 1fr;gap:12px}
  .wer-raster .werbox{padding:20px 14px}
  .wer-raster .wsym{width:44px;height:44px;margin-bottom:10px}
  .wer-raster .werbox h3{font-size:16px}
  .wer-raster .werbox p{font-size:13.2px}
}
/* Jessica-Seite (12.10.2026): drei Vertrauenszeilen unter den Beispielkarten — ersetzen den
   Abschnitt „Verlass ist eingebaut" (.leitplanken). Gleiche Kacheln (.lp), drei nebeneinander. */
.j-verlass{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
@media (max-width:980px){.j-verlass{grid-template-columns:1fr;gap:12px}}
/* Preise, 12.10.2026: Gründer-Bonus als eine Zeile, Vergleich eingeklappt (<details> aus paket-matrix-einbauen.py), Testen-Knopf unter dem FAQ */
.gruender-banner.kompakt{width:fit-content;max-width:100%;margin:0 auto 26px;align-items:center;gap:12px;padding:11px 20px;border-radius:999px}
/* Platz für das „Beliebt“-Schild: Ab 981 px steht die mittlere Preiskarte 12 px höher und ist größer
   skaliert (.preise .preis.top). Ohne den Abstand lag das Schild 11–13 px auf dem Gründer-Bonus. */
@media (min-width:981px){.gruender-banner.kompakt{margin-bottom:56px}}
.gruender-banner.kompakt .stern{width:28px;height:28px;font-size:14px;box-shadow:0 0 16px rgba(245,166,35,.45)}
.gruender-banner.kompakt p{margin:0;max-width:none;font-size:15.5px;line-height:1.45;color:var(--dim)}
.gruender-banner.kompakt b{font-size:inherit;color:var(--text)}
details.pm{margin-top:32px}
details.pm>summary.pm-titel{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;width:fit-content;max-width:100%;margin:0 auto;padding:12px 22px;border:1px solid var(--linie-stark);border-radius:999px;background:var(--panel);font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.01em;text-align:center;transition:border-color .18s}
details.pm>summary.pm-titel::-webkit-details-marker{display:none}
details.pm>summary.pm-titel::after{content:"+";flex:none;width:24px;height:24px;border:1px solid var(--linie-stark);border-radius:50%;display:grid;place-items:center;color:var(--amber);font-size:16px;font-weight:400;transition:transform .18s ease}
details.pm[open]>summary.pm-titel::after{transform:rotate(45deg)}
details.pm>summary.pm-titel:hover{border-color:var(--amber)}
details.pm>summary.pm-titel:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
details.pm[open]>.pm-intro{margin-top:18px}
.faq-cta{margin-top:28px;text-align:center}
@media (max-width:640px){
  .gruender-banner.kompakt{border-radius:14px;padding:10px 14px}
  .gruender-banner.kompakt p{font-size:14.5px}
  details.pm>summary.pm-titel{font-size:15.5px;padding:11px 16px}
}
/* ── Rand der Website, 12.10.2026 (Owner: „treci tot pe du", Audit-Plan) ── */
/* Fußzeile: zehn Links — die Leiste bricht um, statt über den Rand zu laufen. */
.fzeile nav{flex-wrap:wrap;row-gap:10px}
/* Partner: Schritt 1 ist der Weg zum Partnercode (E-Mail). */
.p-schritte a{color:inherit;text-decoration:underline;text-decoration-color:rgba(245,166,35,.6);text-underline-offset:3px}
.p-schritte a:hover{color:var(--amber)}
/* Tutorials am Telefon (Audit tutorials-00b): waagrechte, kompakte Karten — Symbol und Nummer
   links, Titel in der Mitte, Abspielknopf rechts. Der Link .tut-bild legt sich über die ganze
   Karte; nach dem Klick (.laeuft) wird er wieder 16:9 in voller Breite. Am Rechner bleibt alles. */
@media (max-width:640px){
  .tut-raster{grid-template-columns:1fr;gap:10px}
  .tut{position:relative;display:block;min-height:76px;padding:26px 62px 14px 72px;border:1px solid var(--linie-stark);border-radius:14px;background:radial-gradient(120% 160% at 0% 0%,rgba(245,166,35,.16),transparent 45%),var(--panel)}
  .tut .tut-bild{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:14px;background:transparent;z-index:1}
  .tut .tut-ico{left:14px;top:50%;transform:translateY(-50%);width:44px;height:44px}
  .tut .tut-nr{left:72px;right:auto;top:9px;font-size:11px}
  .tut .tut-play{left:auto;right:12px;width:40px;height:40px;transform:translateY(-50%)}
  .tut .tut-play svg{width:17px;height:17px}
  .tut .tut-bild:hover .tut-play{transform:translateY(-50%) scale(1.08)}
  .tut .tut-yt,.tut p{display:none}
  .tut h3{margin:0;font-size:15.5px}
  .tut .tut-bild.laeuft{position:relative;inset:auto;aspect-ratio:16/9;margin:-26px -62px 12px -72px;border-radius:13px 13px 0 0;background:#000}
  .tut .tut-bild.laeuft + h3{margin:0 -46px 0 -56px}
}
/* Kopfzeile zwischen 981 und 1199 px (Audit „navigation"): fünf Menüpunkte, Login und „Kostenlos
   testen" passen nur mit etwas engeren Abständen — sonst ragt der Knopf aus dem Bild und die ganze
   Seite lässt sich seitlich schieben. Ab 1200 px und unter 981 px (Burger) bleibt alles, wie es war. */
@media (min-width:981px) and (max-width:1199px){
  .nav{gap:14px}
  .nav-links{gap:2px}
  .nav-links a{padding:9px 9px}
  .nav-recht{gap:8px;margin-left:0}
  .login-link{padding:10px 13px}
  .nav-cta{padding:11px 15px}
}
/* Partner am Telefon (Audit partner-00b/00c): Schritte und Karten etwas dichter. */
@media (max-width:640px){
  .p-schritte{gap:8px;margin-bottom:20px}
  .p-schritte span{padding:7px 14px}
  .p-karte{padding:18px;gap:7px}
  .p-logo{width:38px;height:38px;font-size:12px;margin-bottom:0}
  .p-rabatt{top:16px;right:16px}
}
/* Startseite, Karten „Warum Werkstattdesk?": bei 981–1179 px ragten lange Überschriften
   („Lieferantenrechnungen einlesen") über den Kartenrand (Layout-Prüfer 12.10.2026). */
@media (min-width:981px) and (max-width:1179px){.biete article{padding-left:16px;padding-right:16px}.biete h3{font-size:16px}}
/* ── „So läuft ein Auftrag" (Startseite, direkt unter dem Hero) ─────────────────────────────
   Owner 19.10.2026: eine Präsentation mit ECHTEN Bildschirmen der App (Demodaten
   „Autoservice Musterfeld"), die zeigt, worum es geht. Am Computer heftet sich ein Laptop an
   (bei der Freigabe kommt ein Handy dazu). Am Handy ein Telefon mit Rahmen — „vreau sa fie cu
   telefonul in fundal" —, auf dessen Bildschirm sich Textseiten und App abwechseln; ALLE Texte
   stehen im Telefon („toate textele sa fie pe telefon nu in afara lui").
   Bewegung am Handy 1:1 mit dem Finger: „nu se misca suficient de bine" waren ein Nachziehen
   (lerp), Tempo 1,4 und eine Neuberechnung bei jeder Bewegung der Adressleiste. Wo der Browser
   Scroll-Timelines kann (Klasse sl-sda), bewegt er Bild und Leiste selbst; sonst das Skript.
   Die Kopfzeile der Seite (72px, sticky) steht über allem — darunter heftet sich die Bühne an.
   Wächter: src/website-so-laeufts.test.ts. */
.sl-story{--sl-kopf:72px;--sl-geraet:#253343;--sl-kante:rgba(241,237,227,.16);--sl-sockel-a:#3A4857;--sl-sockel-b:#1E2A36;--sl-schatten:0 50px 100px -40px rgba(0,0,0,.8);--sl-fokus:#F5A623;
  position:relative;height:calc((var(--sl-n,3) + 1) * 100vh - var(--sl-kopf));padding:0 28px}
body.tag .sl-story{--sl-geraet:#1A222C;--sl-kante:rgba(255,255,255,.10);--sl-sockel-a:#C9CDD3;--sl-sockel-b:#9AA1AA;--sl-schatten:0 50px 90px -40px rgba(27,36,48,.45)}
.sl-pin{position:sticky;top:var(--sl-kopf);height:calc(100vh - var(--sl-kopf));display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr);gap:clamp(24px,4vw,60px);align-items:center;max-width:1240px;margin:0 auto}
.sl-copy{display:grid;gap:20px;align-content:center;min-width:0}
.sl-augenbraue{font:500 12.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.sl-zaehler{display:flex;align-items:center;gap:14px;font:500 13px/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.sl-zaehler b{color:var(--text);font-weight:500}
.sl-leiste{flex:1;max-width:160px;height:2px;background:var(--linie-stark);position:relative;overflow:hidden}
.sl-leiste i{position:absolute;inset:0;background:var(--amber);transform-origin:0 50%;transform:scaleX(.1)}
.sl-schritte{list-style:none;margin:0;padding:0;display:grid}
.sl-schritt{display:grid;grid-template-columns:2.4em minmax(0,1fr);column-gap:10px;padding:12px 0;border-top:1px solid var(--linie);cursor:pointer}
.sl-schritt:last-child{border-bottom:1px solid var(--linie)}
.sl-schritt .sl-nr{font:500 13px/1.9 var(--mono);color:var(--dim)}
.sl-schritt h3{margin:0;font:600 20px/1.35 var(--body);letter-spacing:0;color:var(--dim);transition:color .3s}
.sl-schritt p{grid-column:2;margin:0;max-height:0;overflow:hidden;opacity:0;color:var(--dim);font-size:16px;transition:max-height .45s ease,opacity .35s ease,margin .35s}
.sl-schritt.sl-on .sl-nr{color:var(--amber)}
.sl-schritt.sl-on h3{color:var(--text)}
.sl-schritt.sl-on p{max-height:9em;opacity:1;margin-top:6px}
.sl-story.sl-spiegel .sl-pin{grid-template-columns:minmax(0,1.6fr) minmax(0,.78fr)}
.sl-story.sl-spiegel .sl-copy{order:2}
.sl-story.sl-spiegel .sl-buehne{order:1;padding-right:0;padding-left:5%}
.sl-ueberspringen{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);justify-self:start}

/* Laptop */
.sl-buehne{position:relative;min-width:0;padding-right:5%;padding-bottom:4%}
.sl-laptop{position:relative;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.sl-deckel{background:var(--sl-geraet);border-radius:20px 20px 8px 8px;padding:1.4% 1.4% 1.9%;box-shadow:var(--sl-schatten),inset 0 0 0 1px var(--sl-kante)}
.sl-schirm{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#0F1A26}
.sl-sockel{height:0;padding-bottom:2.4%;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(var(--sl-sockel-a),var(--sl-sockel-b));position:relative}
.sl-sockel::before{content:"";position:absolute;left:42%;right:42%;top:0;height:38%;border-radius:0 0 8px 8px;background:var(--sl-sockel-b);opacity:.7}
.sl-bild{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(var(--zoom,1));will-change:transform}
.sl-bild img{width:100%;height:100%;display:block;object-fit:cover;object-position:top left}
.sl-bild.sl-sicht{opacity:1}
/* Markierung, sitzt im gezoomten Bild und bewegt sich mit */
.sl-mark{position:absolute;border:3px solid var(--sl-fokus);border-radius:10px;box-shadow:0 0 0 9999px rgba(5,10,16,0),0 0 30px rgba(245,166,35,.45);opacity:0;transition:opacity .4s,box-shadow .5s;pointer-events:none}
.sl-bild.sl-sicht.sl-mark-an .sl-mark{opacity:1;box-shadow:0 0 0 9999px rgba(5,10,16,.2),0 0 30px rgba(245,166,35,.45)}

/* Handy zum Laptop (Schritt 3) */
.sl-handy{position:absolute;right:0;bottom:0;width:23%;opacity:0;transform:translateY(12%) rotate(3deg);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.sl-buehne.sl-mit-handy .sl-handy{opacity:1;transform:none}
.sl-buehne.sl-mit-handy .sl-laptop{transform:translateX(-4%) scale(.97)}
.sl-telefon{background:var(--sl-geraet);border-radius:15%/7%;padding:4.5%;box-shadow:var(--sl-schatten),inset 0 0 0 1px var(--sl-kante);position:relative}
.sl-telefon .sl-tglas{position:relative;aspect-ratio:390/844;border-radius:11%/5.2%;overflow:hidden;background:#0F1A26;container-type:inline-size}
.sl-telefon .sl-tinsel{position:absolute;top:2.2%;left:50%;width:30%;height:3.2%;transform:translateX(-50%);background:#000;border-radius:999px;z-index:3}
/* Statusleiste: die Aufnahmen beginnen unter der Kamera-Insel */
.sl-telefon .sl-tglas::before{content:"9:41";position:absolute;top:0;left:0;right:0;height:6.5%;z-index:2;background:#0F1A26;color:#E8EDF2;font:600 clamp(8px,3.6cqw,15px)/1 var(--body);display:flex;align-items:center;padding-left:9%}
.sl-lang{position:absolute;left:0;top:0;width:100%;height:auto!important;max-width:none;display:block;will-change:transform}
.sl-tipp{position:absolute;left:50%;width:22%;aspect-ratio:1;border-radius:50%;border:2px solid var(--sl-fokus);transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .3s,transform .5s;z-index:2}
.sl-buehne.sl-k4 .sl-tipp{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* ── Handy: ein Telefon; Textseite, App, Textseite, App … beim Scrollen ── */
.sl-reel{display:none}
/* Bewegung zwischen den Abschnitten (Owner 19.10.2026: „ceva motion intre scroll uri gen intre prima parte si a
   doua"): das Gerät (Laptop bzw. Telefon) fährt beim Hereinscrollen hoch und wird größer; wenn die Präsentation
   endet, tritt es leicht zurück. Im Takt des Scrollens, wo der Browser Scroll-Timelines kann; sonst blendet das
   Skript es einmal ein (Klasse sl-rein). */
.sl-story{view-timeline:--sl-story block}
@supports (animation-timeline: view()){
  .sl-story .sl-buehne,.sl-story .sl-reel{animation-name:sl-rein,sl-raus;animation-timing-function:cubic-bezier(.2,.7,.2,1),ease-in;animation-fill-mode:both,forwards;animation-duration:auto,auto;
    animation-timeline:--sl-story,--sl-story;animation-range:cover 0vh cover 80vh,exit 0% exit 55%}
}
@keyframes sl-rein{from{opacity:0;transform:translateY(70px) scale(.9)}to{opacity:1;transform:none}}
@keyframes sl-raus{from{opacity:1;transform:none}to{opacity:.35;transform:translateY(-30px) scale(.94)}}
.sl-story.sl-js-rein .sl-buehne,.sl-story.sl-js-rein .sl-reel{opacity:0;transform:translateY(50px) scale(.94);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.sl-story.sl-js-rein.sl-rein .sl-buehne,.sl-story.sl-js-rein.sl-rein .sl-reel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sl-story .sl-buehne,.sl-story .sl-reel{animation:none!important;opacity:1!important;transform:none!important}}
@media (max-width:820px){
  /* Länge der Strecke rechnet das Skript (--sl-lauf). svh bleibt stehen, wenn die Adressleiste ein- und ausfährt: nichts springt. */
  /* Am Handy gehört der ganze Bildschirm dem Telefon (Owner: „este mult mai mic" als im Entwurf):
     solange es angeheftet ist, fährt die Kopfzeile der Seite nach oben weg (body.sl-voll). */
  .sl-story{--sl-kopf:0px;height:calc(var(--sl-lauf,600vh) + 100svh);view-timeline:--sl-story block;padding:0 12px}
  body.sl-voll>header{transform:translateY(-100%)}
  /* Kontakt-Knopf unten rechts und seine Sprechblase decken sonst den Bildschirm des Telefons ab */
  body.sl-voll .schwebe{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
  body>header{transition:transform .25s ease}
  .sl-pin{display:flex;align-items:center;justify-content:center;height:calc(100svh - var(--sl-kopf));padding-block:8px}
  .sl-copy,.sl-buehne{display:none}
  /* Das Telefon: ein aktuelles iPhone in echten Maßen (71,5 × 149,6 mm) — Owner: „vreau un telefon mai
     realist, un iphone nou". Titanrahmen mit Lichtkante, schmaler schwarzer Rand, Dynamic Island,
     Tasten (links Aktion + Lautstärke, rechts Seitentaste + Kamerasteuerung), Home-Leiste. So groß,
     wie der Bildschirm es zulässt: Breite aus der Höhe, gedeckelt durch die Breite. */
  .sl-reel{--sl-oben:46px;--sl-hoehe:calc(100svh - var(--sl-kopf) - 16px);--sl-breit:min(calc(100vw - 24px),calc(var(--sl-hoehe) * .478));
    display:block;position:relative;flex:none;width:var(--sl-breit);height:calc(var(--sl-breit) / .478);padding:4px;border-radius:15.5%/7.4%;
    background:linear-gradient(145deg,#71767e 0%,#2e3136 13%,#43474e 47%,#202226 83%,#62666e 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),inset 0 0 0 2.5px rgba(0,0,0,.55),0 44px 70px -34px rgba(0,0,0,.6),0 18px 34px -18px rgba(0,0,0,.4);color:#F1EDE3}
  .sl-taste{position:absolute;width:3px;border-radius:1.5px;background:linear-gradient(90deg,#26282c,#6d7178 55%,#2c2e33)}
  .sl-taste.sl-l{left:-2.5px}
  .sl-taste.sl-r{right:-2.5px}
  .sl-glas{position:relative;height:100%;border:7px solid #040405;border-radius:14.6%/6.95%;overflow:hidden;background:radial-gradient(130% 80% at 50% 0%,#17283A,#0B1520 70%)}
  /* ein Hauch Spiegelung auf dem Glas */
  .sl-glas::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 30%)}
  .sl-oben{position:absolute;left:0;right:0;top:0;z-index:5;height:var(--sl-oben);background:#0F1A26;display:grid;grid-template-columns:1fr 34% 1fr;align-items:center;justify-items:center;padding-top:2px;font:600 15px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",var(--body);letter-spacing:-.01em;color:#F1EDE3;pointer-events:none}
  .sl-oben .sl-insel{position:absolute;left:50%;top:9px;width:32%;height:31px;transform:translateX(-50%);background:#000;border-radius:999px}
  .sl-oben .sl-symbole{grid-column:3;display:flex;gap:5px;align-items:center}
  .sl-oben .sl-symbole svg{display:block;fill:#F1EDE3}
  .sl-oben .sl-bahn{position:absolute;left:18px;right:18px;bottom:0;height:2px;border-radius:2px;background:rgba(241,237,227,.07);overflow:hidden}
  .sl-oben .sl-bahn i{display:block;height:100%;background:#F5A623;transform-origin:0 50%;transform:scaleX(0)}
  .sl-heim{position:absolute;left:50%;bottom:7px;width:36%;height:5px;border-radius:3px;background:rgba(241,237,227,.85);transform:translateX(-50%);z-index:6;pointer-events:none}
  .sl-seg{position:absolute;inset:0;opacity:0;transform:translateY(5%);transition:opacity .28s ease,transform .34s cubic-bezier(.2,.8,.2,1)}
  .sl-seg.sl-vorbei{transform:translateY(-5%)}
  .sl-seg.sl-an{opacity:1;transform:none}
  .sl-seg:not(.sl-an){pointer-events:none}
  /* Textseiten */
  .sl-seg.sl-text{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:calc(var(--sl-oben) + 28px) 24px 40px}
  .sl-seg.sl-text h3{margin:0;font:600 27px/1.2 var(--body);letter-spacing:-.01em;color:#F1EDE3;text-wrap:balance}
  .sl-seg.sl-text p{margin:0;font-size:18px;line-height:1.5;color:#C5CFD8;text-wrap:pretty}
  .sl-seg.sl-text .sl-weiter{margin-top:22px;font:400 22px/1 var(--body);color:#93A3B2}
  .sl-seg.sl-text .btn{align-self:flex-start;margin-top:10px;white-space:nowrap;font-size:15px;padding:13px 18px}
  /* App-Seiten */
  .sl-seg.sl-app{background:#0F1A26}
  .sl-seg.sl-app .sl-schild{position:absolute;top:calc(var(--sl-oben) + 10px);left:14px;z-index:3;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#F1EDE3;background:#0B1520;border:1px solid rgba(241,237,227,.18);padding:7px 10px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(0,0,0,.6)}
  .sl-fahrt{position:absolute;left:0;top:var(--sl-oben);width:100%;will-change:transform;backface-visibility:hidden}
  .sl-fahrt>img{display:block;width:100%;height:auto;max-width:none}
  .sl-fahrt .sl-ring{position:absolute;border:3px solid #F5A623;border-radius:12px;box-shadow:0 0 18px rgba(245,166,35,.45);opacity:0;transition:opacity .3s ease;pointer-events:none}
  .sl-fahrt .sl-ring.sl-an{opacity:1}
  .sl-fahrt .sl-frei-bild{position:absolute;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
  .sl-fahrt .sl-frei-bild img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 14px 30px -10px rgba(0,0,0,.7)}
  .sl-seg.sl-frei .sl-frei-bild{opacity:1;transform:none}
  /* Lupe (Jessica, Owner 19.10.2026: „as da zoom pe raspunsul ei, as face ceva mai premium"): am Ende
     der App-Seite tritt die Antwort vergrößert nach vorn, der Bildschirm dahinter wird dunkler. */
  .sl-seg .sl-lupe{position:absolute;left:4%;right:4%;top:54%;z-index:4;opacity:0;transform:translateY(-46%) scale(.9);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none;border-radius:16px;overflow:hidden;background:#0F1A26;box-shadow:0 30px 60px -18px rgba(0,0,0,.85),0 0 0 1.5px rgba(245,166,35,.7),0 0 46px rgba(245,166,35,.28)}
  .sl-seg .sl-lupe img{display:block;width:100%;height:auto}
  .sl-seg.sl-lupe-an .sl-lupe{opacity:1;transform:translateY(-50%) scale(1)}
  .sl-seg .sl-fahrt>img{transition:filter .4s ease}
  .sl-seg.sl-lupe-an .sl-fahrt>img{filter:brightness(.45) saturate(.8)}
  .sl-seg.sl-lupe-an .sl-ring{opacity:0!important}
  .sl-seg.sl-frei .sl-fahrt .sl-ring{opacity:0}
  /* Scroll-Timeline: die Werte (--sl-von/--sl-bis/--sl-weg) setzt das Skript; „contain 0" ist der Moment,
     in dem der Abschnitt oben am Fenster ankommt — die Bühne heftet sich schon 72px vorher an (Kopfzeile). */
  .sl-reel.sl-sda .sl-fahrt,.sl-reel.sl-sda .sl-oben .sl-bahn i{
    animation-timing-function:linear;animation-fill-mode:both;animation-duration:auto;
    animation-timeline:--sl-story;animation-range:contain var(--sl-von,0px) contain var(--sl-bis,1px)}
  .sl-reel.sl-sda .sl-fahrt{animation-name:sl-fahrt}
  .sl-reel.sl-sda .sl-oben .sl-bahn i{animation-name:sl-bahn;--sl-von:calc(-1 * var(--sl-kopf));--sl-bis:calc(var(--sl-lauf,1px) - var(--sl-kopf))}
}
@keyframes sl-fahrt{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--sl-weg,0px),0)}}
@keyframes sl-bahn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:820px) and (prefers-reduced-motion:reduce){.sl-seg{transition:none}}
.sl-weiter-anker{display:block;scroll-margin-top:80px}

/* Startangebot 2026 (Owner 11./12.10. und 21.10.2026), nach außen „Richtige Wahl: Erste 3 Monate 50 % Rabatt"
   (Owner 22.10.: sicher statt demütig, kein Metzger-Wortlaut, keine Bedingung als Verkaufssatz — die stehen
   eingeklappt unter „Bedingungen"): gelbe Leiste auf jeder
   Seite, Block „50 %" auf Start und Preise, durchgestrichener Preis je Paket. Die Bedingungen und der Gutschein beim Bezahlen stehen in
   src/lib/billing/startangebot.ts. Ab 01.01.2027 schaltet das Skript alles mit data-angebot ab (html.angebot-aus)
   und zeigt die normalen Preise; dann gehört der Block heraus. Wächter: src/website-startangebot.test.ts */
.angebot-leiste{position:relative;z-index:1;background:#F5A623;color:#1A1204;text-align:center;font-size:14.5px;font-weight:600;line-height:1.35;padding:9px 16px}
.angebot-leiste b{font-weight:800}
.angebot-leiste a{color:#1A1204;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;margin-left:4px}
.angebot-block{display:flex;align-items:center;gap:22px;max-width:760px;margin:0 auto 34px;padding:20px 26px;border-radius:18px;background:linear-gradient(115deg,rgba(245,166,35,.22),rgba(245,166,35,.06));border:1px solid rgba(245,166,35,.6)}
.angebot-block .minus{flex:none;font-family:var(--disp);font-weight:800;font-size:58px;line-height:1;color:var(--amber);letter-spacing:-.02em;white-space:nowrap}
.angebot-block h3{font-size:22px;line-height:1.25}
.angebot-block p{margin-top:6px;font-size:14.5px;color:var(--dim)}
.angebot-bedingungen{margin-top:8px;font-size:12.5px;color:var(--dim)}
.angebot-bedingungen summary{list-style:none;cursor:pointer;display:inline-block;text-decoration:underline;text-decoration-color:rgba(245,166,35,.7);text-underline-offset:3px}
.angebot-bedingungen summary::-webkit-details-marker{display:none}
.angebot-block .angebot-bedingungen p{margin-top:6px;font-size:12.5px;line-height:1.45}
.alt-preis{font-size:.5em;color:var(--dim);font-weight:600;text-decoration:line-through;text-decoration-thickness:2px;margin-right:8px;vertical-align:.18em}
.angebot-hinweis{font-family:var(--mono);font-size:11.5px;color:var(--amber);margin:6px 0 0;letter-spacing:.02em}
.preis .angebot-hinweis{margin:2px 0 10px}
html:not(.angebot-aus) .preis .betrag small{display:block;margin-top:6px}
html:not(.angebot-aus) .pk-preis small{display:block;margin:6px 0 0}
.ohne-angebot{display:none}
html.angebot-aus .mit-angebot,html.angebot-aus [data-angebot]{display:none!important}
html.angebot-aus .ohne-angebot{display:inline}
@media (max-width:640px){.angebot-leiste{font-size:13.5px;padding:8px 12px}.angebot-block{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px}.angebot-block .minus{font-size:46px}.angebot-block h3{font-size:19px}}