/* ── 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}
.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") */
.preise-kompakt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;max-width:980px}
.preise-kompakt + .pz-fuss{text-align:left}
.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. */
main{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}}