/* TAZAN-Website. Gleiches Design-System wie die App (docs/design.md Abschnitt 10):
   Nur hell (Hari 09.11.2026): Farben aus tazan/web/ansicht.py (HELL), Skalen --s-*, --t-*, --r-* aus tazan/web/vorlagen/stil.css.
   website/bauen.py setzt sie unten ein; dazu kommen nur Website-Größen (--s-14 … --s-30, --t-display, --t-lead …).
   Minze nur für Aktion, Auswahl und Fokus. Keine Schrift, kein Bild, kein Skript von fremden Servern. */
@font-face{font-family:Inter;src:url(/assets/inter-latin-wght-normal.f052ee44c3.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--control-line:#7b8780;--bg:#f4f2ed;--side:#fbfaf7;--box:#fff;--soft:#f0eee7;--line:#e5e1d7;--fg:#16211c;--muted:#5a6861;--akzent:#0e7a5a;--onakzent:#fff;--akzentsoft:#dff0e7;--akzenttext:#0a5c44;--akzent2:#d9a457;--warn:#9a4a06;--warnsoft:#fbe8cf;--neg:#b3261e;--negsoft:#fbe4e1;--ok:#0a5c44;--oksoft:#e3f3ea;--hero:#12302a;--herocard:#1b4038;--herofg:#eaf5ef;--heroakzent:#8ee3c2;--herook:#8ee3c2;--herotrack:#2f5a52;--info:#1d5fa8;--infosoft:#e3edf8;--schatten:rgba(22,33,28,.10);--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--t-mini:12px;--t-klein:13px;--t-mittel:14px;--t-text:15px;--t-h3:16px;--t-h2:18px;--t-kennzahl:20px;--t-gross:24px;--t-zahl:28px;--t-titel:32px;--r-s:8px;--r-m:12px;--r-l:16px;--r-rund:999px;--s-14:56px;--s-16:64px;--s-20:80px;--s-24:96px;--s-30:120px;--t-lead:clamp(18px,1rem + .45vw,21px);--t-h2-web:clamp(30px,1.3rem + 2.2vw,46px);--t-display:clamp(40px,1.4rem + 4.4vw,72px);--t-lese:17px;--r-xl:24px;--r-xxl:32px;color-scheme:light}

:root{--breite:1160px;--rand-seite:var(--s-6);--hero-leise:#b9d3c8;--glanz:rgba(142,227,194,.28);
 --schatten-karte:0 1px 2px var(--schatten),0 8px 24px -12px var(--schatten);
 --schatten-gross:0 2px 4px var(--schatten),0 30px 60px -20px rgba(18,48,42,.35);
 --schrift:Inter,-apple-system,"Segoe UI",Roboto,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--s-24)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--t-lese)/1.6 var(--schrift);
 font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--akzenttext);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:var(--r-s)}
h1,h2,h3{margin:0 0 var(--s-4);font-weight:720;line-height:1.08;letter-spacing:-.025em;text-wrap:balance;color:var(--fg)}
h1{font-size:var(--t-display);letter-spacing:-.035em;line-height:1.02}
h2,.h2{font-size:var(--t-h2-web)}
h3,.h3{font-size:var(--t-kennzahl);line-height:1.3;letter-spacing:-.012em;font-weight:680}
p{margin:0 0 var(--s-4);text-wrap:pretty}
ul,ol{margin:0 0 var(--s-4);padding-left:1.3em}
.springen{position:absolute;left:-9999px;top:var(--s-2);background:var(--box);color:var(--fg);padding:var(--s-3) var(--s-4);border-radius:var(--r-m);z-index:20}
.springen:focus{left:var(--s-3)}
.breite{max-width:var(--breite);margin:0 auto;padding:0 var(--rand-seite)}
.schmal{max-width:800px}
.leise{color:var(--muted)}
.klein{font-size:var(--t-mittel)}
.mitte{text-align:center}
.abstand-oben{margin-top:var(--s-6)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--muted);max-width:620px}
.mitte .lead{margin-left:auto;margin-right:auto}
.etikett{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-mittel);font-weight:650;color:var(--akzenttext);
 background:var(--akzentsoft);border-radius:var(--r-rund);padding:var(--s-1) var(--s-3);margin-bottom:var(--s-5)}
.etikett::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--akzenttext)}
.ueberzeile{font-size:var(--t-klein);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--akzenttext);margin-bottom:var(--s-3)}

/* Knöpfe: wie in der App, ein Hauptknopf je Bereich; am Handy mindestens 44 px */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-6);border-radius:var(--r-m);
 font-weight:650;font-size:16px;text-decoration:none;line-height:1.2;border:1.5px solid transparent;white-space:nowrap;transition:filter .15s,background .15s}
.knopf.haupt{background:var(--akzent);color:var(--onakzent)}
.knopf.haupt:hover{filter:brightness(1.08)}
.knopf.zweit{border-color:var(--control-line);color:var(--fg);background:transparent}
.knopf.zweit:hover{background:var(--soft)}
.knopf.klein{min-height:var(--treffer,44px);padding:0 var(--s-4);font-size:15px}
.knoepfe{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.mitte .knoepfe{justify-content:center}
.pfeil{font-weight:650;text-decoration:none}
/* Jeder Pfeil-Link ist ein eigenes Ziel: mindestens 44 px hoch */
a.pfeil{display:inline-flex;align-items:center;min-height:var(--treffer,44px)}
.pfeil::after{content:"\00a0→";display:inline-block;transition:transform .15s}
.pfeil:hover::after{transform:translateX(3px)}
.pfeil.nur-text{display:inline-flex;align-items:center;min-height:52px;padding:0 var(--s-3)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 86%,transparent);
 backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.kopf-innen{display:flex;align-items:center;gap:var(--s-8);min-height:68px}
.marke{display:inline-flex;align-items:center;gap:var(--s-3);min-height:var(--treffer,44px);color:var(--fg);text-decoration:none;flex:none;white-space:nowrap}
.marke .wortmarke{stroke:currentColor}
.z-grund{fill:var(--hero)}.z-soll{fill:#eaf5ef}.z-haben{fill:#8ee3c2}
.nav{flex:1}
.nav-liste{display:flex;gap:var(--s-1);list-style:none;margin:0;padding:0}
.nav-liste a{display:block;padding:var(--s-2) var(--s-3);border-radius:var(--r-m);color:var(--fg);text-decoration:none;font-weight:520;font-size:15px}
.nav-liste a:hover{background:var(--soft)}
.nav-liste a.aktiv{color:var(--akzenttext);font-weight:650}
.kopf-aktion{display:flex;gap:var(--s-3);align-items:center}
.menue{display:none;margin-left:auto}
.menue summary{list-style:none;display:flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-3);border:1.5px solid var(--control-line);
 border-radius:var(--r-m);cursor:pointer;font-weight:600;font-size:16px}
.menue summary::-webkit-details-marker{display:none}
.menue-symbol,.menue-symbol::before,.menue-symbol::after{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;position:relative}
.menue-symbol::before,.menue-symbol::after{content:"";position:absolute;left:0}
.menue-symbol::before{top:-5px}.menue-symbol::after{top:5px}
.menue[open] .menue-symbol{background:transparent}
.menue[open] .menue-symbol::before{top:0;transform:rotate(45deg)}
.menue[open] .menue-symbol::after{top:0;transform:rotate(-45deg)}
.menue-tafel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:var(--s-2) var(--rand-seite) var(--s-5);
 box-shadow:var(--schatten-karte)}
.menue-liste{list-style:none;margin:0 0 var(--s-4);padding:0}
.menue-liste a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:600;font-size:18px}
.menue-tafel .knopf{width:100%}
@media (max-width:960px){.nav,.kopf-aktion .nur-breit{display:none}.menue{display:block}.kopf-innen{gap:var(--s-3)}}

/* Abschnitte */
/* Ein Rhythmus für alle Seiten: ein Abstand zwischen Abschnitten (Runde 3: Steuerberater, Funktionen waren zu luftig) */
.abschnitt{padding:clamp(var(--s-14),6vw,var(--s-20)) 0}
.abschnitt-oben{padding-top:clamp(var(--s-10),5vw,var(--s-16));padding-bottom:clamp(var(--s-14),6vw,var(--s-20))}
.abschnitt.flaeche{background:var(--box);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.abschnitt-kopf{max-width:760px;margin-bottom:clamp(var(--s-6),3vw,var(--s-10))}
.abschnitt-kopf.mitte{margin-left:auto;margin-right:auto}
.abschnitt-kopf p{color:var(--muted);font-size:var(--t-lead)}

/* Hero: links die Botschaft, rechts die Bühne mit dem Handy und dem Ablauf Foto → gebucht */
.hero{padding:clamp(var(--s-8),5vw,var(--s-16)) 0 clamp(var(--s-10),5vw,var(--s-16));overflow:hidden}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(var(--s-8),5vw,var(--s-16));align-items:center}
.hero h1{margin-bottom:var(--s-5)}
.hero .lead{margin-bottom:var(--s-8)}
.hero-unter{margin:var(--s-3) 0 0;font-size:15px;color:var(--muted)}
.buehne{position:relative;background:var(--hero);border-radius:var(--r-xxl);padding:clamp(var(--s-8),4vw,var(--s-12)) var(--s-6) var(--s-6);
 overflow:hidden;isolation:isolate;box-shadow:var(--schatten-gross)}
.buehne::before{content:"";position:absolute;inset:-20% -10% auto auto;width:75%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(closest-side,rgba(142,227,194,.35),transparent);z-index:-1}
.buehne::after{content:"";position:absolute;inset:auto auto -30% -20%;width:70%;aspect-ratio:1;border-radius:50%;
 background:radial-gradient(closest-side,rgba(217,164,87,.18),transparent);z-index:-1}
/* Das Gerät: echte Oberfläche in HTML (Farben der App), drei Zustände übereinander im selben Rasterfeld */
.geraet{width:min(380px,100%);margin:0 auto;background:#0b0e0d;border-radius:40px;padding:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.1)}
.geraet>*{background:var(--bg)}
.geraet-kopf{display:flex;justify-content:space-between;align-items:center;border-radius:30px 30px 0 0;padding:var(--s-5) var(--s-5) var(--s-2);
 font-weight:720;font-size:var(--t-gross);letter-spacing:-.02em;color:var(--fg)}
.geraet-beispiel{font-size:var(--t-mini);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--soft);
 border-radius:var(--r-rund);padding:2px var(--s-2)}
.zustaende{display:grid;border-radius:0 0 30px 30px;padding:var(--s-2) var(--s-4) var(--s-5)}
.zustand{grid-area:1/1;background:var(--box);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-4);align-self:start}
.zustand p{margin:0}
.z-titel{font-size:var(--t-klein);font-weight:700;color:var(--muted);margin-bottom:var(--s-3)!important}
.z-gross{font-size:var(--t-kennzahl);font-weight:700;line-height:1.3;color:var(--fg);margin-bottom:var(--s-3)!important}
.z-klein{font-size:var(--t-mittel);line-height:1.45;color:var(--muted);margin-top:var(--s-3)!important}
.z-ok{display:inline-flex;font-size:var(--t-mittel);font-weight:700;color:var(--ok);background:var(--oksoft);border-radius:var(--r-rund);
 padding:var(--s-1) var(--s-3);margin-bottom:var(--s-3)!important}
.z-knoepfe{display:flex;gap:var(--s-2);flex-wrap:wrap}
.z-knoepfe span{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-4);border:1.5px solid var(--control-line);border-radius:var(--r-m);
 font-weight:650;font-size:15px;color:var(--fg)}
.z-knoepfe .gewaehlt{background:var(--akzent);border-color:var(--akzent);color:var(--onakzent)}
/* Der Beleg im Handy: groß und gut lesbar (Hari 09.11.2026: „den Beleg selbst größer“) */
.bon{position:relative;overflow:hidden;background:#fffdf8;color:#2a2f2c;border-radius:var(--r-s);padding:var(--s-4) var(--s-5);
 font:500 15.5px/1.6 ui-monospace,Menlo,Consolas,monospace;box-shadow:inset 0 0 0 1px #e6e1d6,0 6px 18px -10px rgba(0,0,0,.35)}
.bon-kopf{display:flex;flex-direction:column;margin-bottom:var(--s-3)!important}
.bon-kopf b{font-family:var(--schrift);font-size:19px;letter-spacing:-.01em}
.bon-kopf span{color:#5f655f}
.bon-zeile{display:flex;justify-content:space-between}
.bon-zeile.summe{border-top:1px dashed #b9b4a8;margin-top:var(--s-1)!important;padding-top:var(--s-1);font-weight:700}
.lade{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--akzenttext);border-right-color:transparent;margin-right:var(--s-2);vertical-align:-1px}
/* Ohne Animation (oder „Bewegung reduzieren“): das Ergebnis, alle drei Schritte hervorgehoben */
.zustand.z1,.zustand.z2{visibility:hidden}
/* Die drei Schritte unter dem Handy: dezent, nur Text mit Punkt (Hari 09.11.2026: Fokus liegt auf dem Belegscan) */
.folge-schritte{list-style:none;margin:var(--s-5) auto 0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s-1) var(--s-5);counter-reset:f}
.folge-schritte li{counter-increment:f;display:flex;align-items:center;gap:6px;font-size:var(--t-klein);font-weight:600;line-height:1.3;
 border-bottom:2px solid transparent;color:var(--herofg)}
.folge-schritte li::before{content:counter(f) ".";opacity:.8}
@media (prefers-reduced-motion:no-preference){
 .zustand.z1,.zustand.z2{visibility:visible}
 .zustand{animation:tz-zeigen 12s ease-in-out infinite both}
 .zustand.z2{animation-delay:4s}.zustand.z3{animation-delay:8s}
 .folge-schritte li{animation:tz-schritt 12s ease-in-out infinite both;background:transparent;color:var(--hero-leise)}
 .folge-schritte li:nth-child(2){animation-delay:4s}.folge-schritte li:nth-child(3){animation-delay:8s}
 .bon::after{content:"";position:absolute;left:0;right:0;height:30%;top:-30%;
  background:linear-gradient(to bottom,transparent,rgba(14,122,90,.18),transparent);animation:tz-scan 4s ease-in-out infinite}
 .lade{animation:tz-drehen .9s linear infinite}
}
@keyframes tz-zeigen{0%{opacity:0;transform:translateY(12px) scale(.98)}4%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes tz-schritt{0%{color:var(--hero-leise)}4%,30%{color:var(--herofg);border-color:var(--heroakzent)}36%,100%{color:var(--hero-leise)}}
@keyframes tz-scan{0%{top:-30%}70%,100%{top:100%}}
@keyframes tz-drehen{to{transform:rotate(360deg)}}
@media (max-width:1000px){.hero-raster{grid-template-columns:1fr}.hero-text{text-align:center}.hero .lead{margin-left:auto;margin-right:auto}
 .hero .knoepfe{justify-content:center}.buehne{max-width:560px;margin:0 auto;width:100%}}
@media (max-width:600px){.hero .lead{margin-bottom:var(--s-6)}.hero .etikett{margin-bottom:var(--s-4)}.hero .knoepfe{gap:var(--s-1)}
 .pfeil.nur-text{min-height:44px}.hero-unter{font-size:var(--t-mittel)}.folge-schritte li{font-size:var(--t-klein)}}

/* Geräte-Rahmen für Bildschirmfotos */
figure{margin:0}
.fenster{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--box);box-shadow:var(--schatten-gross);position:relative;padding-top:34px}
.fenster::before{content:"";position:absolute;top:13px;left:16px;width:9px;height:9px;border-radius:50%;background:#e2a59a;
 box-shadow:15px 0 0 #e6c58c,30px 0 0 #9fd3b6}
.fenster::after{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:min(38%,280px);height:17px;border-radius:var(--r-s);background:var(--soft)}
.fenster img{width:100%;border-top:1px solid var(--line)}
.handy{background:#0b0e0d;border-radius:clamp(28px,4.6vw,48px);padding:clamp(6px,.9vw,10px);box-shadow:var(--schatten-gross),inset 0 0 0 1px rgba(255,255,255,.08);position:relative}
.handy::before{content:"";position:absolute;top:clamp(12px,1.6vw,20px);left:50%;transform:translateX(-50%);width:28%;height:clamp(14px,1.8vw,22px);
 border-radius:var(--r-rund);background:#0b0e0d;z-index:2}
/* Bildschirm: runder Rahmen mit Innenrand, damit die Ecken keinen Text anschneiden; unten blendet er weich aus,
   statt eine Zeile hart zu durchschneiden */
.handy picture{display:block;position:relative;overflow:hidden;border-radius:clamp(22px,3.7vw,38px);background:var(--bg);
 padding:clamp(12px,1.8vw,20px) clamp(6px,.9vw,10px) 0}
.handy picture::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;pointer-events:none;
 background:linear-gradient(to bottom,transparent,var(--bg) 80%)}
.handy img{width:100%;border-radius:var(--r-s)}
.handys{display:flex;gap:clamp(var(--s-4),3vw,var(--s-8));justify-content:center;align-items:flex-start}
.handys .handy{width:min(290px,46%)}
.handys .handy:nth-child(2){margin-top:clamp(var(--s-8),6vw,var(--s-16))}
.ausschnitt{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);box-shadow:var(--schatten-karte);background:var(--box)}
.ausschnitt img{width:100%}

/* Vertrauensband */
.vertrauen{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--box)}
.vertrauen ul{list-style:none;margin:0 auto;padding:var(--s-6) var(--rand-seite);max-width:var(--breite);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-4) var(--s-6)}
.vertrauen li{display:flex;gap:var(--s-3);align-items:flex-start;font-size:15px;line-height:1.4;color:var(--fg);font-weight:560}
.vertrauen a{display:block;min-height:var(--treffer,44px);color:inherit;text-decoration:none}
.v-titel::after{content:"\00a0→";color:var(--akzenttext);display:inline-block;transition:transform .15s}
.vertrauen a:hover .v-titel{text-decoration:underline;text-decoration-thickness:2px}
.vertrauen a:hover .v-titel::after{transform:translateX(3px)}
.vertrauen small{display:block;font-weight:400;color:var(--muted);font-size:var(--t-mittel);margin-top:2px}
.ikon{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--r-m);background:var(--akzentsoft);color:var(--akzenttext)}
.ikon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1100px){.vertrauen ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.vertrauen ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.vertrauen ul{grid-template-columns:1fr}}

/* Raster und Karten */
.raster{display:grid;gap:clamp(var(--s-4),2vw,var(--s-6))}
.raster-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.raster-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.raster-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.karte{background:var(--box);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(var(--s-5),2.4vw,var(--s-8))}
.abschnitt.flaeche .karte{background:var(--bg)}
.karte h3,.karte .h3{margin-bottom:var(--s-2)}
.karte p{color:var(--muted)}
.karte p:last-child{margin-bottom:0}
a.karte{display:flex;flex-direction:column;text-decoration:none;color:var(--fg);transition:border-color .15s,transform .15s,box-shadow .15s}
a.karte:hover{border-color:var(--akzent);transform:translateY(-2px);box-shadow:var(--schatten-karte)}
a.karte .pfeil{color:var(--akzenttext);margin-top:auto}
.karte .ikon{margin-bottom:var(--s-4)}

/* Zielgruppen */
.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(var(--s-4),2vw,var(--s-6))}
.wege .karte{padding:clamp(var(--s-6),2.6vw,var(--s-10))}
.wege .karte.haupt-weg{background:var(--hero);border-color:var(--hero);color:var(--herofg)}
.wege .karte.haupt-weg h3{color:var(--herofg)}
.wege .karte.haupt-weg p{color:var(--hero-leise)}
.wege .karte.haupt-weg .pfeil{color:var(--heroakzent)}
.wege .karte.haupt-weg .ikon{background:rgba(142,227,194,.16);color:var(--heroakzent)}
@media (max-width:900px){.wege{grid-template-columns:1fr}}

/* Text neben Bild */
.zeile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(var(--s-8),5vw,var(--s-20));align-items:center}
.zeile.umgekehrt{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.zeile.umgekehrt .zeile-text{order:2}
.zeile.oben{align-items:start}
/* Hauptüberschrift neben Bild: Textspalte halb so breit wie die Zeile, Schrift höchstens 50 px, damit kein Wort allein
   in einer Zeile steht */
.zeile h1{font-size:clamp(34px,1.1rem + 2.2vw,50px);text-wrap:balance}
@media (min-width:901px){.zeile:has(>.zeile-text h1){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:900px){.zeile,.zeile.umgekehrt{grid-template-columns:1fr}.zeile.umgekehrt .zeile-text{order:0}}
.punkte{list-style:none;padding:0;margin:0 0 var(--s-6)}
.punkte li{position:relative;padding-left:var(--s-8);margin-bottom:var(--s-3)}
.punkte li::before{content:"";position:absolute;left:3px;top:.45em;width:13px;height:7px;border-left:2.5px solid var(--akzenttext);
 border-bottom:2.5px solid var(--akzenttext);transform:rotate(-45deg)}
.punkte strong{font-weight:650}
.punkte.gross li{margin-bottom:var(--s-5)}

/* Ablauf mit Ausschnitten */
.ablauf{list-style:none;padding:0;margin:0;display:grid;gap:clamp(var(--s-5),2.4vw,var(--s-8));grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:a}
.ablauf li{counter-increment:a;display:flex;flex-direction:column}
.ablauf h3{margin-top:var(--s-6)}
.ablauf h3::before{content:counter(a);display:inline-grid;place-items:center;width:28px;height:28px;margin-right:var(--s-2);border-radius:50%;
 background:var(--akzent);color:var(--onakzent);font-size:var(--t-mittel);vertical-align:2px}
.ablauf p{color:var(--muted);margin:0}
@media (max-width:900px){.ablauf{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

/* Gespräch */
.gespraech{display:flex;flex-direction:column;gap:var(--s-3);margin:0 0 var(--s-8);padding:0;list-style:none}
.gespraech li{max-width:88%;padding:var(--s-3) var(--s-5);border-radius:var(--r-xl);line-height:1.45}
.gespraech .du{align-self:flex-end;background:var(--akzent);color:var(--onakzent);border-bottom-right-radius:var(--r-s)}
.gespraech .tazan{align-self:flex-start;background:var(--box);border:1px solid var(--line);border-bottom-left-radius:var(--r-s)}
.abschnitt.flaeche .gespraech .tazan{background:var(--bg)}
.gespraech .wer{display:block;font-size:var(--t-klein);font-weight:700;margin-bottom:2px}

/* Band (Tannengrün) */
.band{background:var(--hero);color:var(--herofg);border-radius:var(--r-xxl);padding:clamp(var(--s-10),6vw,var(--s-20));position:relative;overflow:hidden;isolation:isolate}
.band::before{content:"";position:absolute;right:-12%;top:-40%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(142,227,194,.22),transparent);z-index:-1}
.band h2{color:var(--herofg)}
.band p{color:var(--hero-leise)}
.band a:not(.knopf){color:var(--heroakzent)}
.band .knopf.haupt{background:var(--heroakzent);color:#12302a}
.band .knopf.zweit{border-color:var(--hero-leise);color:var(--herofg)}
.band .knopf.zweit:hover{background:rgba(255,255,255,.08)}
.band-raster{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(var(--s-8),4vw,var(--s-14));align-items:center}
@media (max-width:900px){.band-raster{grid-template-columns:1fr}}
.band .punkte li{color:var(--herofg)}
.band .punkte li::before{border-color:var(--heroakzent)}

/* Chips (Anbindungen nur als Text: fremde Logos erst mit Erlaubnis) */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:0 0 var(--s-5)}
/* Nur Namen, keine Links: ruhige Fläche ohne Rand, eckiger als die klickbaren Pillen */
.chips li{background:var(--soft);color:var(--fg);border-radius:var(--r-s);padding:var(--s-1) var(--s-3);font-weight:520;font-size:15px}
.chips-titel{font-size:var(--t-klein);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-2)}
.zitat-kompetenz{border-left:3px solid var(--akzent);padding:var(--s-1) 0 var(--s-1) var(--s-5);margin:var(--s-6) 0;color:var(--fg);font-size:var(--t-lead);line-height:1.5}

/* Neu */
.neu-woche{margin-bottom:var(--s-8)}
.neu-punkte{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.neu-punkte li{background:var(--box);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-4) var(--s-5);display:flex;gap:var(--s-3);
 align-items:baseline;flex-wrap:wrap}
.abschnitt.flaeche .neu-punkte li{background:var(--bg)}
.marke-bereich{font-size:var(--t-mini);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--akzenttext);background:var(--akzentsoft);
 border-radius:var(--r-rund);padding:3px var(--s-3);flex:none}

/* FAQ */
.faqs{max-width:800px;margin:0 auto}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{cursor:pointer;list-style:none;padding:var(--s-5) var(--s-10) var(--s-5) 0;font-weight:640;font-size:18px;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:var(--s-2);top:50%;transform:translateY(-50%);font-size:26px;font-weight:400;color:var(--akzenttext)}
details.faq[open] summary::after{content:"–"}
details.faq p{color:var(--muted);padding-right:var(--s-10)}

/* Preise */
.preise{align-items:stretch}
.preis{display:flex;flex-direction:column}
.preis.empfohlen{border:2px solid var(--akzent);box-shadow:var(--schatten-karte)}
.preis h2{font-size:var(--t-gross);margin-bottom:var(--s-1)}
.preis .betrag{font-size:36px;font-weight:750;letter-spacing:-.02em;margin:var(--s-3) 0 var(--s-1);color:var(--fg)}
.preis .punkte{flex:1;margin-top:var(--s-4)}
.preis .punkte li{color:var(--fg)}
.hinweis-folgt{display:inline-block;background:var(--warnsoft);color:var(--warn);font-weight:650;font-size:var(--t-mittel);border-radius:var(--r-rund);padding:var(--s-1) var(--s-3)}

/* Texte, Rechtliches, Angaben */
.text h1{font-size:clamp(32px,1.3rem + 2.4vw,48px)}
.text h2{font-size:var(--t-gross);margin-top:var(--s-10)}
.text h3{font-size:var(--t-kennzahl);margin-top:var(--s-6)}
.text li{margin-bottom:var(--s-2)}
.text code{font-size:.9em;background:var(--soft);border-radius:var(--r-s);padding:1px var(--s-2)}
.tabelle{overflow-x:auto;margin:0 0 var(--s-6);border:1px solid var(--line);border-radius:var(--r-m)}
.tabelle table{border-collapse:collapse;width:100%;font-size:15px;min-width:560px}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:var(--s-3);border-bottom:1px solid var(--line)}
.tabelle th{background:var(--soft);font-weight:650;color:var(--muted)}
/* Handy: jede Zeile eine Karte, Spaltenname über dem Wert (kein seitliches Wischen, nichts abgeschnitten) */
@media (max-width:640px){.tabelle{border:0;border-radius:0;overflow:visible}.tabelle table{min-width:0}
 .tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .tabelle table,.tabelle tbody,.tabelle tr,.tabelle td{display:block}
 .tabelle tr{border:1px solid var(--line);border-radius:var(--r-m);margin-bottom:var(--s-3);background:var(--box)}
 .tabelle td{border-bottom:1px solid var(--line);padding:var(--s-2) var(--s-4)}
 .tabelle td:last-child{border-bottom:0}
 .tabelle td::before{content:attr(data-spalte);display:block;font-size:var(--t-klein);font-weight:650;color:var(--muted)}}
.entwurf{background:var(--warnsoft);color:var(--fg);border-left:4px solid var(--warn);border-radius:var(--r-m);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-8)}
.entwurf strong{color:var(--warn)}
.angaben{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);border-top:1px solid var(--line);margin:0 0 var(--s-8)}
.angaben dt,.angaben dd{margin:0;padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.angaben dt{color:var(--muted);font-weight:560;padding-right:var(--s-4)}
.angaben dd a{display:inline-block;padding:var(--s-3) 0;margin:calc(-1 * var(--s-3)) 0}
@media (max-width:560px){.angaben{grid-template-columns:1fr}.angaben dt{border-bottom:0;padding-bottom:0}}

/* Hilfe-Videos: Platz ist fest (16:10), ein neues Video ersetzt nur die Datei */
.videos-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);align-items:start}
@media (max-width:1000px){.videos-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.videos-raster{grid-template-columns:1fr}}
.video-karte{padding:0;overflow:hidden;display:flex;flex-direction:column}
.video-karte video{width:100%;aspect-ratio:16/10;background:#0b0e0d}
.video-karte .karte-text{padding:var(--s-5) var(--s-6) var(--s-6)}
/* Platzhalter „Video folgt“ (Hilfe und Themenvideos, ein Stil): ruhig, ohne Abspielknopf, nichts sieht klickbar aus */
.video-folgt{display:flex;gap:var(--s-3);align-items:center;background:var(--soft);color:var(--muted);font-size:var(--t-mittel);line-height:1.4;
 padding:var(--s-3) var(--s-4);border-radius:var(--r-m)}
.video-folgt b{display:block;color:var(--fg);font-weight:650}
.video-folgt .ikon{width:32px;height:32px;background:var(--box);color:var(--muted)}
.video-folgt .ikon svg{width:18px;height:18px}
.video-karte .video-folgt{margin:var(--s-5) var(--s-6) 0}
.schritte{padding-left:1.2em;margin:0}
.schritte li{margin-bottom:var(--s-2)}

/* Fußzeile */
.fuss{border-top:1px solid var(--line);padding:var(--s-14) 0 var(--s-8);font-size:15px;background:var(--box)}
.fuss-raster{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s-8)}
@media (max-width:900px){.fuss-raster{grid-template-columns:1fr 1fr}.fuss-marke{grid-column:1/-1}}
.fuss-marke p{color:var(--muted);max-width:300px;margin-top:var(--s-4)}
.fuss-ohne{color:var(--muted)}
.fuss-titel{font-size:var(--t-klein);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-bottom:var(--s-3)}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li a{color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
@media (max-width:768px){.fuss li a{min-height:var(--treffer,44px);min-width:var(--treffer,44px)}}
.fuss li a:hover{color:var(--akzenttext);text-decoration:underline}
.fuss-zeile{margin-top:var(--s-10);padding-top:var(--s-5);border-top:1px solid var(--line);color:var(--muted);font-size:var(--t-mittel)}

@media (max-width:700px){:root{--rand-seite:var(--s-5)}}
@media (max-width:400px){:root{--rand-seite:var(--s-4)}body{font-size:16px}.knopf{padding:0 var(--s-5)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.kopf,.fuss,.menue{display:none}}
.band .ueberzeile{color:var(--heroakzent)}

/* Preise: Free groß vorne (Hari 08.11.2026), darunter die Bezahltarife */
.free-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(var(--s-6),4vw,var(--s-14));align-items:center;
 background:var(--hero);color:var(--herofg);border-radius:var(--r-xxl);padding:clamp(var(--s-8),5vw,var(--s-14));margin-bottom:var(--s-8);
 position:relative;overflow:hidden;isolation:isolate}
.free-band::before{content:"";position:absolute;right:-10%;top:-40%;width:55%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(142,227,194,.25),transparent);z-index:-1}
.free-band p{margin:0}
.free-marke{font-size:var(--t-gross);font-weight:750;color:var(--heroakzent)}
.free-preis{font-size:clamp(56px,3rem + 3vw,88px);font-weight:780;letter-spacing:-.04em;line-height:1;margin:var(--s-2) 0 var(--s-5)!important}
.free-preis span{display:block;font-size:var(--t-mittel);letter-spacing:0;font-weight:500;color:var(--hero-leise);margin-top:var(--s-2)}
.free-satz{color:var(--hero-leise);font-size:var(--t-lead);line-height:1.5;margin-bottom:var(--s-6)!important;max-width:520px}
.free-band .knopf.haupt{background:var(--heroakzent);color:#12302a}
.free-punkte{margin:0}
.free-punkte li{color:var(--herofg);font-size:18px}
.free-punkte li::before{border-color:var(--heroakzent)}
@media (max-width:900px){.free-band{grid-template-columns:1fr}}
.preis .betrag span{display:block;font-size:var(--t-mittel);font-weight:500;letter-spacing:0;color:var(--muted);margin-top:var(--s-1)}
.preis-zeile{color:var(--muted)}
.preis-zeile strong{color:var(--fg)}
.fuss-claim{font-weight:700;color:var(--fg)!important;font-size:18px}

/* Chat: Auftrag und Ergebnis groß */
.pruefstand{display:flex;gap:var(--s-4);align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-4) var(--s-5);color:var(--muted)}
.pruefstand strong{display:block;color:var(--fg)}

/* Handy und Tablet: Demo direkt nach dem Startknopf, Hinweis und Zielgruppen danach */
@media (max-width:1000px){
 .hero-raster{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
 .hero-text{display:contents}
 .hero .etikett{order:1}.hero h1{order:2}.hero .lead{order:3}.hero .knoepfe{order:4}.hero .hero-unter{order:5}.hero .buehne{order:6;margin-top:var(--s-8)}
 .hero .hero-unter{margin-top:var(--s-2)}.hero .fuer-wen{order:7;margin-top:var(--s-6)}
}
@media (max-width:600px){
 .hero{padding-top:var(--s-6)}
 .hero h1{margin-bottom:var(--s-3)}.hero .lead{margin-bottom:var(--s-5)}
 .hero .buehne{margin-top:var(--s-6);padding:var(--s-5) var(--s-4) var(--s-4);border-radius:var(--r-xl)}
 .fuer-wen a{font-size:14px;min-height:40px}
}

/* Zielgruppen im Hero: drei kurze Wege */
.fuer-wen{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-8) 0 0}
.fuer-wen a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4) 0 var(--s-1);border:1px solid var(--line);
 border-radius:var(--r-rund);background:var(--box);color:var(--fg);text-decoration:none;font-weight:600;font-size:15px}
.fuer-wen a:hover{border-color:var(--akzent)}
.fuer-wen .ikon{width:34px;height:34px;border-radius:50%}
.fuer-wen .ikon svg{width:18px;height:18px}
@media (max-width:1000px){.fuer-wen{justify-content:center}}

/* Freigabe-Zeile unter dem Ablauf */
.freigabe-zeile{display:flex;gap:var(--s-4);align-items:center;max-width:820px;margin:var(--s-10) auto 0;padding:var(--s-4) var(--s-5);
 border:1px solid var(--line);border-radius:var(--r-l);background:var(--box);color:var(--fg);font-size:16px;line-height:1.5}

/* Funktionen als offene Zeilen statt Karten */
.funktionen{list-style:none;margin:var(--s-10) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2) var(--s-6)}
.funktionen a{display:flex;gap:var(--s-4);align-items:flex-start;padding:var(--s-4) var(--s-2);border-radius:var(--r-m);color:var(--muted);text-decoration:none;
 line-height:1.45;font-size:16px}
.funktionen a:hover{background:var(--soft)}
.funktionen b{display:block;color:var(--fg);font-size:18px;margin-bottom:2px}
.funktionen a:hover b{color:var(--akzenttext)}
@media (max-width:900px){.funktionen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.funktionen{grid-template-columns:1fr}}

/* Beispiel-Auszahlung (E-Commerce) */

/* Einstieg in drei Schritten */
.schritte-weg{list-style:none;padding:0;margin:0 auto;display:grid;gap:var(--s-4);counter-reset:w;max-width:640px}
.schritte-weg.drei{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
@media (max-width:900px){.schritte-weg.drei{grid-template-columns:1fr;max-width:640px}}
.schritte-weg li{counter-increment:w;background:var(--box);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5) var(--s-6);color:var(--muted);line-height:1.5}
.schritte-weg li::before{content:counter(w);display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--akzent);color:var(--onakzent);
 font-weight:750;font-size:var(--t-mittel);margin-bottom:var(--s-3)}
.schritte-weg strong{display:block;color:var(--fg);font-size:18px}
.abschnitt-kopf .ueberzeile{color:var(--akzenttext);font-size:var(--t-klein)}
.handy::before{content:none}
.hero h1{font-size:clamp(40px,1.2rem + 3.4vw,64px)}
.hero-raster{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
@media (max-width:1000px){.hero-raster{grid-template-columns:1fr}}
.abstand-oben-gross{margin-top:var(--s-10)}
.punkte.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2) var(--s-8);margin:0}
@media (max-width:900px){.punkte.drei{grid-template-columns:1fr}}
.z-klein+.z-knoepfe{margin-top:var(--s-3)}
.abschnitt-kopf h1{font-size:clamp(36px,1.2rem + 3vw,56px)}
/* Ablauf: die drei App-Ausschnitte haben dasselbe Format (website/bilder.py), nichts wird abgeschnitten */
.ablauf .ausschnitt img{height:auto;object-fit:initial}
.text{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3}
.text h1,.text h2,.text h3,.text a,.text code,.wort{hyphens:manual;-webkit-hyphens:manual}
.wort{white-space:nowrap}
.text code{overflow-wrap:anywhere}
.schritte-weg h3{font-size:18px;color:var(--fg);margin:0 0 var(--s-1)}
.schritte-weg p{margin:0}
.abschnitt.flaeche .schritte-weg li{background:var(--bg)}

/* ================================================================ Runde 3 (Hari 08.11.2026): Rhythmus, Grafik,
   Vertrauen, Pakete, Formulare. Gleiche Tokens wie oben; keine neuen Farben außer Tannengrün im Logo. */

/* Einheitlicher Rhythmus: Abstand zwischen Abschnitten gleicher Fläche nur einmal (kein doppeltes Polster) */
:is(.abschnitt,.abschnitt-oben):not(.flaeche)+:is(.abschnitt,.abschnitt-oben):not(.flaeche){padding-top:0}
.abschnitt.flaeche+.abschnitt.flaeche{padding-top:0;border-top:0}
/* Mail-Adressen brechen nie mitten im Namen um */
a[href^="mailto:"]:not(.kontakt-weg,.knopf),.mail{white-space:nowrap}
abbr[title]{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Illustrationen: Linienstil wie die Symbole, Farben aus den Tokens */
.illu{display:block;width:120px;color:var(--akzenttext)}
.illu svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.illu .i-f{fill:var(--akzentsoft);stroke:none}
.illu .i-f2{fill:var(--akzentsoft)}
.illu .i-p{fill:var(--box)}
.illu .i-a{fill:var(--akzent);stroke:var(--akzent)}
.illu .i-h{stroke:var(--onakzent)}
.illu .i-dick{stroke-width:4}
.illu .i-a-strich{stroke:var(--akzent2);stroke-width:2.5}

/* Startseite: Buchhaltung und Lohn aus einer Hand, Nutzen je Zielgruppe */
.usp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(var(--s-8),5vw,var(--s-16));align-items:center}
.usp-text{max-width:560px}
.usp h2{margin-bottom:var(--s-5)}
.usp .lead{margin:0}
.nutzen{display:grid;gap:var(--s-3)}
.nutzen-karte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-4);background:var(--box);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5) var(--s-6)}
.nutzen-karte .ikon{grid-row:span 2}
.nutzen-karte h3{margin:0;font-size:18px}
.nutzen-karte p{margin:0;color:var(--muted);line-height:1.5}
@media (max-width:960px){.usp{grid-template-columns:1fr}}

/* Gründer und E-Commerce-Erfahrung */
.gruender{margin:var(--s-6) 0;padding:var(--s-5) var(--s-6);border-radius:var(--r-l);background:var(--box);border:1px solid var(--line);border-left:4px solid var(--akzent)}
.abschnitt.flaeche .gruender{background:var(--bg)}
.gruender p{margin:0}
.gruender-satz{font-size:var(--t-lead);font-weight:650;line-height:1.4;color:var(--fg)}
.gruender-wer{color:var(--muted);margin-top:var(--s-2)!important;font-size:16px;line-height:1.5}
.gruender-wer b{color:var(--fg)}
.gruender-titel{margin-top:var(--s-4)!important;font-size:var(--t-klein);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.gruender-titel+.gruender-zahlen{margin-top:var(--s-2)}
.gruender-zahlen{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.gruender-zahlen li{font-size:var(--t-klein);color:var(--muted);line-height:1.3}
.gruender-zahlen b{display:block;font-size:var(--t-gross);font-weight:760;color:var(--akzenttext);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
@media (max-width:480px){.gruender-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Symbolkacheln: Schnittstellen, Sicherheit, Gebaut in Österreich */
.kacheln{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--s-3)}
.kacheln li{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--box);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-4)}
.abschnitt.flaeche .kacheln li{background:var(--bg)}
.kacheln b{display:block;font-size:16px;line-height:1.3;color:var(--fg);font-weight:650}
.kacheln small{display:block;color:var(--muted);font-size:var(--t-mittel);line-height:1.4;margin-top:2px}
.kachel-gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(var(--s-6),4vw,var(--s-12));align-items:start}
.kachel-gruppen .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
.kachel-titel{font-size:var(--t-klein);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-3)}
.kachel-gruppen .pfeil{margin-top:var(--s-3)}
@media (max-width:900px){.kachel-gruppen{grid-template-columns:1fr}}
@media (max-width:520px){.kachel-gruppen .kacheln{grid-template-columns:1fr}}
.oesterreich-band .abschnitt-kopf{margin-bottom:var(--s-8)}
.oesterreich-band .abschnitt-kopf p:not(.ueberzeile){color:var(--hero-leise)}
.oesterreich-band .kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
.oesterreich-band .kacheln li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.oesterreich-band .kacheln b{color:var(--herofg)}
.oesterreich-band .kacheln small{color:var(--hero-leise)}
.oesterreich-band .ikon{background:rgba(142,227,194,.16);color:var(--heroakzent)}
@media (max-width:900px){.oesterreich-band .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.oesterreich-band .kacheln{grid-template-columns:1fr}}

/* Karten mit Symbol links */
.karten-ikon .karte{display:flex;gap:var(--s-4);align-items:flex-start}
.karten-ikon .karte .ikon{margin:0}
.karten-ikon .karte h3,.karten-ikon .karte .h3{margin-bottom:var(--s-2)}

/* Steuerberater: drei Schritte mit Illustration */
.schritte-bild{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(var(--s-4),2vw,var(--s-6));counter-reset:sb}
.schritte-bild li{counter-increment:sb;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-6)}
.schritte-bild .illu{width:100%;max-width:220px;margin:0 0 var(--s-5)}
.schritte-bild h3{font-size:18px;margin-bottom:var(--s-2)}
.schritte-bild h3::before{content:counter(sb);display:inline-grid;place-items:center;width:28px;height:28px;margin-right:var(--s-2);border-radius:50%;background:var(--akzent);color:var(--onakzent);font-size:var(--t-mittel);vertical-align:1px}
.schritte-bild p{color:var(--muted);margin:0}
@media (max-width:900px){.schritte-bild{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

/* Funktionen: Sprungleiste und Bereiche mit Illustration und Ausschnitt */
.sprung{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
.sprung a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4) 0 var(--s-1);border:1px solid var(--line);border-radius:var(--r-rund);background:var(--box);color:var(--fg);text-decoration:none;font-weight:600;font-size:15px}
.sprung a:hover{border-color:var(--akzent)}
/* Klickbare Pillen tragen einen Pfeil: ↓ springt auf der Seite, → führt weiter */
:is(.sprung,.fuer-wen) a::after{content:"→";color:var(--akzenttext);font-weight:650;transition:transform .15s}
:is(.sprung,.fuer-wen) a[href^="#"]::after{content:"↓"}
:is(.sprung,.fuer-wen) a:hover::after{transform:translateX(2px)}
:is(.sprung,.fuer-wen) a[href^="#"]:hover::after{transform:translateY(2px)}
.sprung .ikon{width:34px;height:34px;border-radius:50%}
.sprung .ikon svg{width:18px;height:18px}
.bereiche{display:grid;gap:clamp(var(--s-12),6vw,var(--s-20))}
.bereich{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(var(--s-8),5vw,var(--s-16));align-items:center;scroll-margin-top:var(--s-24)}
.bereich:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.bereich:nth-child(even) .bereich-text{order:2}
.bereich .illu{width:104px;margin-bottom:var(--s-5)}
.h2-klein{font-size:clamp(26px,1rem + 1.4vw,36px);margin-bottom:var(--s-3)}
.bereich-text p{color:var(--muted);font-size:var(--t-lead);line-height:1.55}
.fenster.mini img{aspect-ratio:16/10;object-fit:cover;object-position:top left}
.handy.mini-handy{width:min(300px,72%);margin:0 auto}
.mini-handy img{aspect-ratio:393/620;object-fit:cover;object-position:top}
@media (max-width:860px){.bereich,.bereich:nth-child(even){grid-template-columns:1fr}.bereich:nth-child(even) .bereich-text{order:0}}

/* Themenvideos: vier Plätze, Standbild bis das Video da ist */
.videos-4{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(var(--s-4),2vw,var(--s-6))}
.video-platz h3{font-size:17px;margin:var(--s-3) 0 0;line-height:1.35}
.video-platz video{width:100%;aspect-ratio:16/10;border-radius:var(--r-l);background:#0b0e0d;object-fit:cover}
.video-bild{position:relative;aspect-ratio:16/10;border-radius:var(--r-l);background:var(--soft);overflow:hidden;display:grid;place-items:center}
.video-bild .illu{width:56%;color:var(--muted)}
.video-bild .illu .i-f{fill:transparent}
.video-bild .illu .i-a{fill:var(--control-line);stroke:var(--control-line)}
.video-bild .illu .i-h{stroke:var(--box)}
.video-bild .video-folgt{position:absolute;left:var(--s-3);bottom:var(--s-3);padding:var(--s-1) var(--s-3);background:var(--box);border-radius:var(--r-rund);font-weight:650;font-size:var(--t-klein)}
@media (max-width:1000px){.videos-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.videos-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-3)}.video-platz h3{font-size:15px}
 .video-bild .video-folgt{left:var(--s-2);bottom:var(--s-2)}}

/* Pakete: alle drei klickbar (führen zur Anfrage mit vorgewähltem Paket), nichts erscheint gewählt */
.pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(var(--s-4),2vw,var(--s-6));align-items:stretch}
.paket{display:flex;flex-direction:column;background:var(--box);border:1.5px solid var(--line);border-radius:var(--r-xl);padding:clamp(var(--s-6),2.6vw,var(--s-8));color:var(--fg);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.paket:hover{border-color:var(--akzent);transform:translateY(-3px);box-shadow:var(--schatten-karte)}
.paket p{margin:0}
.paket-name{font-size:var(--t-gross);font-weight:750;letter-spacing:-.01em}
.paket-fuer{color:var(--muted);margin-top:var(--s-2)!important;font-size:16px;line-height:1.45;min-height:4.4em}
.paket-preis{font-size:46px;font-weight:780;letter-spacing:-.03em;line-height:1;margin:var(--s-4) 0 var(--s-5)!important;font-variant-numeric:tabular-nums}
.paket-preis span{display:block;font-size:var(--t-mittel);font-weight:500;letter-spacing:0;color:var(--muted);margin-top:var(--s-2)}
.paket .punkte{flex:1;margin-bottom:var(--s-5)}
.paket .punkte li{font-size:16px;line-height:1.45}
.paket-preis .paket-jahr{margin-top:var(--s-1);font-weight:650;color:var(--fg)}
/* Hinweis zu Free unter den Karten statt in der Karte: so bestimmt er nicht die Höhe aller drei Karten */
.paket-danach{max-width:760px;margin:var(--s-5) auto 0;text-align:center;color:var(--muted);font-size:15px;line-height:1.5}
.paket-danach b{color:var(--fg)}
.paket-danach+.paket-danach{margin-top:var(--s-2)}
.paket-knopf{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:var(--r-m);border:1.5px solid var(--control-line);font-weight:650;transition:background .15s}
.paket:hover .paket-knopf{background:var(--akzent);border-color:var(--akzent);color:var(--onakzent)}
.paket-knopf::after{content:"\00a0→"}
.paket-free{background:var(--hero);border-color:var(--hero);color:var(--herofg)}
.paket-free:hover{border-color:var(--heroakzent)}
.paket-free .paket-name{color:var(--heroakzent)}
.paket-free .paket-fuer,.paket-free .paket-preis span{color:var(--hero-leise)}
.paket-free .punkte li{color:var(--herofg)}
.paket-free .punkte li::before{border-color:var(--heroakzent)}
.paket-free .paket-knopf,.paket-free:hover .paket-knopf{background:var(--heroakzent);border-color:var(--heroakzent);color:#12302a}
@media (max-width:960px){.pakete{grid-template-columns:1fr;max-width:560px;margin:0 auto}.paket-fuer{min-height:0}}

/* Lohn als Zusatzbaustein mit kleinem Rechner (ohne Skript: Radioknöpfe und :has) */
.zusatz{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(var(--s-6),4vw,var(--s-12));align-items:center;margin-top:var(--s-12);background:var(--box);border:1.5px dashed var(--control-line);border-radius:var(--r-xl);padding:clamp(var(--s-6),3vw,var(--s-10))}
.zusatz-plus{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:var(--akzent);color:var(--onakzent);display:grid;place-items:center;font-size:28px;font-weight:600;line-height:1;box-shadow:0 0 0 6px var(--bg)}
.zusatz-text p{color:var(--muted)}
.zusatz-text .ueberzeile{color:var(--akzenttext)}
.zusatz h2{margin-bottom:var(--s-3)}
@media (max-width:860px){.zusatz{grid-template-columns:1fr}}
.rechner{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-5)}
.rechner p{margin:0}
.rechner-titel{font-weight:650;font-size:15px;margin-bottom:var(--s-3)!important}
.rechner-wahl{display:flex;gap:var(--s-2);flex-wrap:wrap}
.rechner-wahl label{min-width:48px;min-height:44px;display:grid;place-items:center;border:1.5px solid var(--control-line);border-radius:var(--r-m);font-weight:650;cursor:pointer;padding:0 var(--s-3);font-variant-numeric:tabular-nums;background:var(--box)}
.rechner-wahl label:hover{border-color:var(--akzent)}
.rechner-wahl input:checked+label{background:var(--akzent);border-color:var(--akzent);color:var(--onakzent)}
.rechner-wahl input:focus-visible+label{outline:2px solid var(--akzent);outline-offset:2px}
.rechner-ergebnis{margin-top:var(--s-4)!important;font-size:var(--t-kennzahl);min-height:1.6em;color:var(--fg)}
.rechner-ergebnis b{font-size:var(--t-zahl);letter-spacing:-.02em;color:var(--akzenttext);font-variant-numeric:tabular-nums}
.erg{display:none}
.rechner:has(#ma-1:checked) .erg-1,.rechner:has(#ma-3:checked) .erg-3,.rechner:has(#ma-5:checked) .erg-5,
.rechner:has(#ma-8:checked) .erg-8,.rechner:has(#ma-10:checked) .erg-10,.rechner:has(#ma-20:checked) .erg-20{display:inline}
@supports not selector(:has(*)){.erg-8{display:inline}}
.rechner-fuss{color:var(--muted);font-size:var(--t-mittel);margin-top:var(--s-2)!important}
.preis-fuss{margin:var(--s-6) auto 0;max-width:760px;font-size:15px}

/* Vergleich der Pakete */
.vergleich-rahmen{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg);max-width:980px;margin:0 auto}
.vergleich{width:100%;border-collapse:collapse;min-width:640px;font-size:15px}
.vergleich th,.vergleich td{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.vergleich thead th{font-size:18px;font-weight:720;padding-top:var(--s-5);width:19%}
.vergleich thead th:first-child{width:auto}
.vergleich thead small{display:block;font-size:var(--t-mittel);font-weight:500;color:var(--muted)}
.vergleich tbody th{text-align:left;font-weight:520}
.vergleich .gruppe th{font-size:var(--t-klein);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--soft);padding:var(--s-2) var(--s-4)}
.vergleich td.ja,.vergleich td.nein{font-size:0;color:transparent}
.vergleich td.ja::before{content:"";display:inline-block;width:14px;height:7px;border-left:3px solid var(--akzenttext);border-bottom:3px solid var(--akzenttext);transform:rotate(-45deg) translate(1px,-2px)}
.vergleich td.nein::before{content:"";display:inline-block;width:14px;height:2px;border-radius:2px;background:var(--control-line);vertical-align:middle}
.vergleich tfoot td{border-bottom:0;padding:var(--s-4) var(--s-2)}
.vergleich tfoot .knopf{padding:0 var(--s-3)}
.vergleich tfoot .knopf::after{content:"\00a0→"}

/* Anfrageformulare (POST an TAZAN, ohne Skript) */
.anfrage-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(var(--s-8),5vw,var(--s-16));align-items:start}
.anfrage-text h1{font-size:clamp(36px,1.2rem + 3vw,52px)}
.anfrage-karte{background:var(--box);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(var(--s-5),3vw,var(--s-8));box-shadow:var(--schatten-karte)}
@media (max-width:900px){.anfrage-raster{grid-template-columns:minmax(0,1fr)}}
/* langer Knopftext („Anfrage in deiner Mail-App öffnen“) bricht um, statt die Seite am Handy zu verbreitern */
/* Anfrageseite: Einleitung und Formular zuerst, Ablauf und Vertrauen links darunter bzw. am Handy nach dem Formular */
.anfrage-raster.mit-reihen{grid-template-areas:"kopf karte" "mehr karte";grid-template-rows:auto 1fr;row-gap:0}
.mit-reihen .anfrage-kopf{grid-area:kopf}.mit-reihen .anfrage-karte{grid-area:karte}.mit-reihen .anfrage-mehr{grid-area:mehr}
.mit-reihen .anfrage-kopf .lead{margin-bottom:var(--s-6)}
@media (max-width:900px){.anfrage-raster.mit-reihen{grid-template-areas:"kopf" "karte" "mehr";grid-template-rows:auto;row-gap:var(--s-8)}.mit-reihen .anfrage-kopf .lead{margin-bottom:0}}
.anfrage{position:relative;display:grid;gap:var(--s-5)}
.anfrage fieldset,.tarif-wahl{border:0;margin:0;padding:0;min-width:0}
.anfrage legend,.anfrage label{font-weight:620;font-size:15px}
.anfrage legend{margin-bottom:var(--s-3);padding:0}
.anfrage .knoepfe{margin-top:var(--s-1)}
.anfrage button.knopf{font:inherit;font-weight:650;font-size:16px;cursor:pointer}
.anfrage button[disabled]{opacity:.5;cursor:not-allowed}
.tarif-optionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.tarif-option{position:relative;display:block;cursor:pointer}
.tarif-option input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tarif-option span{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--s-2);border:1.5px solid var(--control-line);border-radius:var(--r-m);padding:var(--s-3) var(--s-4);min-height:64px;align-content:center;background:var(--bg)}
.tarif-option b{font-size:16px}
.tarif-option em{font-style:normal;font-weight:700;color:var(--akzenttext);font-variant-numeric:tabular-nums}
.tarif-option small{grid-column:1/-1;color:var(--muted);font-weight:450;font-size:var(--t-klein)}
.tarif-option:hover span{border-color:var(--akzent)}
.tarif-option input:checked+span{border-color:var(--akzent);background:var(--akzentsoft);box-shadow:inset 0 0 0 1px var(--akzent)}
.tarif-option input:focus-visible+span{outline:2px solid var(--akzent);outline-offset:2px}
.felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.feld{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.feld-breit{grid-column:1/-1}
.anfrage input:is([type=text],[type=email],[type=tel],[type=number]),.anfrage textarea{width:100%;min-height:48px;border:1.5px solid var(--control-line);border-radius:var(--r-m);padding:var(--s-2) var(--s-3);font:inherit;font-size:16px;color:var(--fg);background:var(--bg)}
.anfrage textarea{min-height:112px;resize:vertical;line-height:1.5}
.anfrage :is(input,textarea):focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)}
.feld-breit input[type=number]{max-width:160px}
.feld-hilfe{color:var(--muted);font-size:var(--t-klein);line-height:1.45;font-weight:400}
.pflicht{color:var(--neg);margin-left:2px}
.frei{color:var(--muted);font-weight:450}
.haken{display:flex;gap:var(--s-3);align-items:center;cursor:pointer;line-height:1.45;min-height:var(--treffer,44px);padding:var(--s-1) 0}
.haken input{appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:0;border:2px solid var(--control-line);border-radius:6px;background:var(--bg);display:grid;place-items:center;cursor:pointer}
.haken input::after{content:"";width:12px;height:6px;border-left:2.5px solid var(--onakzent);border-bottom:2.5px solid var(--onakzent);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.haken input:checked{background:var(--akzent);border-color:var(--akzent)}
.haken input:checked::after{opacity:1}
.haken input:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.form-hinweis{color:var(--muted);font-size:var(--t-mittel);margin:0}
.form-pflicht{color:var(--muted);font-size:var(--t-klein)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:560px){.felder,.tarif-optionen{grid-template-columns:1fr}}
.weiter-liste{list-style:none;padding:0;margin:var(--s-6) 0;display:grid;gap:var(--s-4);counter-reset:w2}
.weiter-liste li{counter-increment:w2;position:relative;padding-left:var(--s-10);color:var(--muted);line-height:1.5;min-height:28px}
.weiter-liste li::before{content:counter(w2);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:var(--akzent);color:var(--onakzent);display:grid;place-items:center;font-weight:700;font-size:var(--t-mittel)}
.weiter-liste b{color:var(--fg)}
.mini-vertrauen{list-style:none;padding:0;margin:0 0 var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.mini-vertrauen li{display:flex;align-items:center;gap:var(--s-2);font-size:15px;font-weight:560}
.mini-vertrauen .ikon{width:30px;height:30px}
.mini-vertrauen .ikon svg{width:16px;height:16px}
.kontakt-wege{display:grid;gap:var(--s-3);margin:var(--s-6) 0}
/* Klickbare Karte wie a.karte und .paket: Pfeil rechts, Rand und Schatten beim Darüberfahren, Fokusring */
.kontakt-weg{display:flex;gap:var(--s-4);align-items:center;padding:var(--s-4) var(--s-5) var(--s-4) var(--s-4);border:1px solid var(--line);border-radius:var(--r-l);background:var(--box);color:var(--muted);text-decoration:none;font-size:15px;line-height:1.4;
 transition:border-color .15s,transform .15s,box-shadow .15s}
.kontakt-weg>span:not(.ikon){flex:1;min-width:0}
.kontakt-weg::after{content:"→";flex:none;color:var(--akzenttext);font-weight:650;font-size:18px;transition:transform .15s}
.kontakt-weg:hover{border-color:var(--akzent);transform:translateY(-2px);box-shadow:var(--schatten-karte)}
.kontakt-weg:hover::after{transform:translateX(3px)}
:is(.kontakt-weg,a.karte,.paket):focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:var(--r-l)}
.kontakt-weg b{display:block;color:var(--fg);font-size:16px}

/* Bestätigung nach der Anfrage */
.danke-haken{display:grid;place-items:center;width:72px;height:72px;margin:0 auto var(--s-6);border-radius:50%;background:var(--oksoft);color:var(--ok)}
.danke-haken svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.danke h1{font-size:clamp(34px,1.2rem + 2.6vw,52px)}
.danke{margin-bottom:clamp(var(--s-6),3vw,var(--s-10))}
.danke .lead{margin-bottom:0}
.mitte-knoepfe{justify-content:center;margin-top:var(--s-8)}
.oesterreich-band .ueberzeile{color:var(--heroakzent)}
/* Pakete in gleicher Höhe: Name, Satz, Preis, Liste, Knopf stehen in allen drei Karten auf einer Linie */
@supports (grid-template-rows:subgrid){
 @media (min-width:961px){
  .pakete{grid-template-rows:auto auto auto 1fr auto}
  .paket{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .paket-fuer{min-height:0}
 }
}
/* Handy: Vergleich passt ohne seitliches Wischen, Rechner in einer Zeile */
@media (max-width:700px){
 .vergleich{min-width:0;font-size:13px;table-layout:fixed;hyphens:manual;-webkit-hyphens:manual}
 .vergleich th,.vergleich td{padding:var(--s-2) 2px}
 .vergleich tbody th{padding-left:var(--s-3);overflow-wrap:break-word}
 .vergleich thead th{font-size:13px;letter-spacing:-.02em;width:20%}
 .vergleich thead th:first-child{width:40%}
 .vergleich tfoot{display:none}
 .vergleich .gruppe th{padding:var(--s-2) var(--s-3)}
 .vergleich tfoot .knopf{padding:0 var(--s-2);font-size:13px;white-space:normal;min-height:44px}
 .rechner-wahl{flex-wrap:nowrap}
 .rechner-wahl label{flex:1;min-width:0;padding:0}
}
/* Runde 3, GPT-Runde 1: Monat als Beispiel, Abstand der Preiszeile, ruhigere Video-Platzhalter */
.monat{margin-top:clamp(var(--s-8),4vw,var(--s-12));border-top:1px solid var(--line);padding-top:var(--s-8)}
.monat-titel{font-weight:650;margin-bottom:var(--s-4)}
.monat-schritte{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);counter-reset:mo}
.monat-schritte li{counter-increment:mo;display:flex;gap:var(--s-3);align-items:flex-start;font-size:15px;line-height:1.45;color:var(--muted)}
.monat-schritte b{display:block;color:var(--fg);font-size:16px}
.monat-schritte b::before{content:counter(mo) ". ";color:var(--akzenttext)}
@media (max-width:1000px){.monat-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.monat-schritte{grid-template-columns:1fr}}
.schritte-weg+.preis-zeile{margin-top:var(--s-6)}
.erg small{display:block;font-size:var(--t-mittel);color:var(--muted);margin-top:var(--s-1)}
.tarif-hinweis{margin:var(--s-2) 0 0}
.nutzen-preis{grid-column:2;font-size:var(--t-mittel);font-weight:650;color:var(--akzenttext)!important;margin-top:var(--s-1)!important}
@media (max-width:560px){.anfrage .knoepfe .knopf{width:100%}}
/* Prüfstand auf der Sicherheitsseite: Grenze des Tests und Inhalt des Testsatzes */
.pruef-grenze{margin:var(--s-4) 0 0;color:var(--muted);font-size:15px;line-height:1.5}
.pruef-grenze strong{color:var(--fg)}
.kachel-titel.abstand-klein{margin-top:var(--s-6)}
/* Handy: Senden-Knopf der Formulare über die volle Breite (GPT Runde 3) */
@media (max-width:600px){
 .anfrage .knoepfe{flex-direction:column;align-items:stretch}
 .anfrage .knoepfe .knopf{width:100%}
 .anfrage .form-pflicht{text-align:center}
}
/* Prüfbericht auf der Sicherheitsseite: Bereiche des Testsatzes mit Ergebnis, ohne Fallzahlen */
/* Startseite: sechs Belege für Zuverlässigkeit in drei Spalten; Anbieterzeile im E-Commerce-Block */
.kacheln.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.kacheln.drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kacheln.drei{grid-template-columns:1fr}}
.kacheln.drei+.mitte{margin:var(--s-6) 0 0}
.anbieter-zeile{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 var(--s-5)}
.anbieter-zeile b{color:var(--fg)}
.pruefbericht{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;margin:0 0 var(--s-3)}
.pruefbericht th,.pruefbericht td{text-align:left;padding:var(--s-3) 0;border-bottom:1px solid var(--line);vertical-align:top;font-weight:500}
.pruefbericht thead th{font-size:var(--t-klein);color:var(--muted);font-weight:700;padding-top:0}
.pruefbericht td{color:var(--ok);font-weight:650;white-space:nowrap;padding-left:var(--s-4);text-align:right}
.pruefbericht tbody td::before{content:"\2713\00a0"}

.szene-knopf[hidden]{display:none}

/* ================================================================ Ablauf-Szenen der Startseite (Hari 09.11.2026)
   Ausschnitte der App in HTML: Teile mit data-schritt blendet tazan.js nacheinander ein (.laeuft, .da). Ohne
   JavaScript, bei „Bewegung reduzieren“ und angehalten steht der Endzustand; was nur unterwegs zu sehen ist
   (data-unterwegs: Scanlinie, Markierungen, Knopf vor dem Bestätigen, zweiter Beleg), fehlt dann. */
.szene [data-schritt]{transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.szene.laeuft [data-schritt]:not(.da){opacity:0;transform:translateY(8px)}
.szene:not(.laeuft) [data-unterwegs]{visibility:hidden}
.szene.angehalten *,.szene.angehalten *::before,.szene.angehalten *::after{animation-play-state:paused!important}
.szene-unten{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:var(--s-4)}
.szene-hinweis{font-size:var(--t-mittel);color:var(--muted)}
/* Nebenelement, darum dezent: wie ein Textlink, aber 44 px hoch */
.szene-knopf{min-height:var(--treffer,44px);padding:0 var(--s-2);border:0;border-radius:var(--r-m);background:transparent;color:var(--muted);
 font:600 var(--t-mittel)/1.2 var(--schrift);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.szene-knopf:hover{color:var(--fg)}
.ok-punkt{flex:none;position:relative;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--akzent)}
.ok-punkt::after{content:"";position:absolute;left:5px;top:5px;width:8px;height:4px;border-left:2px solid var(--onakzent);
 border-bottom:2px solid var(--onakzent);transform:rotate(-45deg)}
.kreis{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--akzenttext);border-right-color:transparent;
 animation:tz-drehen .9s linear infinite}
.mini-haupt{display:inline-flex;align-items:center;min-height:34px;padding:0 var(--s-4);border-radius:var(--r-m);background:var(--akzent);
 color:var(--onakzent);font-weight:650;font-size:var(--t-mittel);white-space:nowrap}

/* Szene 1: die Scan-Bühne. Tannengrün über die volle Breite, links groß der Beleg mit Scan, rechts die Buchung */
.scan-buehne{position:relative;overflow:hidden;isolation:isolate;background:var(--hero);color:var(--herofg);
 padding:clamp(var(--s-8),4vw,var(--s-12)) 0 clamp(var(--s-6),3vw,var(--s-10))}
.scan-buehne::before{content:"";position:absolute;left:-10%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;z-index:-1;
 background:radial-gradient(closest-side,rgba(142,227,194,.22),transparent)}
.scan-buehne::after{content:"";position:absolute;right:-15%;bottom:-40%;width:55%;aspect-ratio:1;border-radius:50%;z-index:-1;
 background:radial-gradient(closest-side,rgba(217,164,87,.14),transparent)}
.scan-kopf{max-width:980px;margin:0 auto clamp(var(--s-5),2.4vw,var(--s-8));text-align:center}
.scan-kopf h2{margin-bottom:var(--s-3)}
.scan-kopf .ueberzeile{color:var(--heroakzent)}
.scan-kopf h2{color:var(--herofg)}
.scan-kopf p:last-child{margin:0;font-size:var(--t-lead);line-height:1.5;color:var(--hero-leise)}
.scan-buehne .szene-hinweis,.scan-buehne .szene-knopf{color:var(--hero-leise)}
.scan-buehne .szene-knopf:hover{color:var(--herofg)}
.szene-bild{position:relative}
.faelle{display:grid}
.fall{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(var(--s-6),4vw,var(--s-14));align-items:center}
.fall p{margin:0}
.fall-bon{display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}
.bon-herkunft{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-mittel);color:var(--hero-leise)}
.bon-herkunft .ikon{width:28px;height:28px;background:rgba(142,227,194,.16);color:var(--heroakzent)}
.bon-herkunft .ikon svg{width:16px;height:16px}
.bon-platz{position:relative;width:min(100%,430px);padding:var(--s-5) var(--s-5) var(--s-8)}
/* Kassenbon mit Registrierkassen-Code */
.kassabon{position:relative;padding:var(--s-6) var(--s-6) var(--s-5);background:#fffdf8;color:#2a2f2c;border-radius:var(--r-s) var(--r-s) 0 0;
 font:500 14.5px/1.55 ui-monospace,Menlo,Consolas,monospace;box-shadow:0 2px 4px rgba(0,0,0,.18),0 30px 60px -20px rgba(0,0,0,.55);
 transform:rotate(-1.5deg)}
.kassabon::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;
 background:linear-gradient(135deg,#fffdf8 50%,transparent 50%) 0 0/14px 9px repeat-x,linear-gradient(225deg,#fffdf8 50%,transparent 50%) 0 0/14px 9px repeat-x}
.szene.laeuft .kassabon:not(.da){opacity:0;transform:translateY(60px) rotate(-7deg) scale(.92)}
.kassabon>p{position:relative}
.kb-name{font:780 21px/1.25 var(--schrift);letter-spacing:.07em;text-transform:uppercase;text-align:center}
.kassabon .kb-mitte{margin-bottom:var(--s-3);color:#5f655f;text-align:center}
.kb-zeile{display:flex;justify-content:space-between;gap:var(--s-3)}
.kb-zeile span:last-child{white-space:nowrap}
.kb-steuer{display:grid;grid-template-columns:minmax(0,1fr) 5.5em 4.5em;text-align:right}
.kb-steuer span:first-child{text-align:left}
.kassabon .kb-strich{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px dashed #b9b4a8}
.kassabon .kb-summe{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px dashed #b9b4a8;font-size:17px;font-weight:800}
.kassabon .kb-fuss{display:flex;gap:var(--s-4);align-items:center;margin-top:var(--s-4);color:#5f655f;font-size:12.5px;line-height:1.45}
.kb-code{flex:none;width:58px;height:58px;fill:#2a2f2c}
/* Erkannte Stellen leuchten am Beleg auf (Papier ist immer hell: feste Minze-Töne) */
.mark{position:absolute;inset:0 -8px;border-radius:5px;background:rgba(14,122,90,.15);box-shadow:inset 3px 0 0 rgba(14,122,90,.8);pointer-events:none}
.szene.laeuft .mark:not(.da){transform:scaleX(.6)}
/* Scan: Eckwinkel um den Bon, darüber eine Linie in Minze mit Lichtschweif */
.scan-ecken{position:absolute;inset:0;pointer-events:none;--e:var(--heroakzent);
 background:linear-gradient(var(--e),var(--e)) 0 0/36px 4px,linear-gradient(var(--e),var(--e)) 0 0/4px 36px,
  linear-gradient(var(--e),var(--e)) 100% 0/36px 4px,linear-gradient(var(--e),var(--e)) 100% 0/4px 36px,
  linear-gradient(var(--e),var(--e)) 0 100%/36px 4px,linear-gradient(var(--e),var(--e)) 0 100%/4px 36px,
  linear-gradient(var(--e),var(--e)) 100% 100%/36px 4px,linear-gradient(var(--e),var(--e)) 100% 100%/4px 36px;
 background-repeat:no-repeat}
.szene.laeuft .scan-ecken.da{animation:tz-ecken 1.6s ease-in-out infinite}
.scan-linie{position:absolute;inset:var(--s-5) var(--s-3) var(--s-8);pointer-events:none;
 background:linear-gradient(to bottom,transparent 40%,rgba(142,227,194,.2) 49.6%,#8ee3c2 49.7%,#8ee3c2 50%,transparent 50.1%) 0 100%/100% 200% no-repeat;
 filter:drop-shadow(0 0 6px rgba(142,227,194,.8));animation:tz-scanlinie 1.9s ease-in-out infinite alternate}
/* Die Buchung: ruhige, kompakte Karte (Hari 09.11.2026: so hoch wie der Beleg, die ganze Szene am Desktop ohne
   Scrollen). Raster mit sechs Spalten: kurze Felder zu dritt (.feld), längere zu zweit (.weit), Text über die Breite. */
.buchung{background:var(--box);color:var(--fg);border-radius:var(--r-xxl);padding:clamp(var(--s-4),2vw,var(--s-6));
 box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.buchung-kopf{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-2)!important;
 font-size:var(--t-gross);font-weight:740;letter-spacing:-.02em}
.phasen{list-style:none;display:flex;gap:var(--s-4);margin:0 0 var(--s-3);padding:0;counter-reset:ph;font-size:var(--t-klein);font-weight:650;color:var(--muted)}
.phasen li{counter-increment:ph;display:flex;align-items:center;gap:6px}
.phasen li::before{content:counter(ph);display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--akzent);
 color:var(--onakzent);font-size:11px}
.szene.laeuft .phasen li:not(.da){opacity:.45;transform:none}
.buchung .felder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px var(--s-2)}
.buchung .feld{grid-column:span 2;display:flex;flex-direction:column;gap:1px;padding:7px var(--s-3);background:var(--bg);border:1px solid var(--line);
 border-radius:var(--r-m);min-width:0}
.buchung .feld.weit{grid-column:span 4}
.buchung .feld.breit{grid-column:1/-1}
/* Noch leer: der Rahmen mit dem Namen steht schon (gestrichelt), der Wert gleitet beim Erkennen hinein */
.feld>:not(.feld-name){transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.szene.laeuft .feld:not(.da){opacity:1;transform:none;border-style:dashed;background:transparent}
.szene.laeuft .feld:not(.da)>:not(.feld-name){opacity:0;transform:translateX(-14px)}
.szene.laeuft .feld.da{animation:tz-aufleuchten 1.4s ease-out}
.feld-name{font-size:12px;font-weight:600;line-height:1.35;color:var(--muted)}
.feld-wert{font-size:15.5px;font-weight:700;line-height:1.3;color:var(--fg)}
.feld-wert small{display:block;margin-top:1px;font-size:13px;font-weight:500;line-height:1.35;color:var(--muted)}
.feld-stapel{display:grid}
.feld-stapel>span{grid-area:1/1}
.feld-sucht{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-mittel);font-weight:600;color:var(--muted)}
.konto-feld .feld-wert{font-size:17px}
.st-tabelle{display:grid;gap:0;margin-top:1px}
.st-tabelle p{display:grid;grid-template-columns:minmax(0,1fr) 5.5em 5em;gap:var(--s-2);text-align:right;font-variant-numeric:tabular-nums}
.st-tabelle p span:first-child{text-align:left}
.st-kopf{font-size:12px;font-weight:600;color:var(--muted)}
.st-kopf .feld-name{text-align:left}
.st-zeile{font-size:15px;font-weight:650;line-height:1.45;color:var(--fg)}
.buchung-ende{display:grid;margin-top:var(--s-3)}
.buchung-ende>p{grid-area:1/1}
.knopf-reihe{position:relative;display:flex;gap:var(--s-3);align-items:center}
/* Demo-Zeiger: zeigt, dass du tippst, nicht TAZAN */
.zeiger{position:absolute;left:96px;top:30px;display:inline-flex;align-items:flex-start;gap:2px;pointer-events:none;
 font-size:var(--t-klein);font-weight:700;color:var(--fg);transition:opacity .4s ease,transform .7s cubic-bezier(.3,.7,.2,1)}
.zeiger svg{width:26px;height:26px;fill:var(--fg);stroke:var(--box);stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.szene.laeuft .zeiger:not(.da){transform:translate(150px,46px)}
.bestaetigen{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-8);border-radius:var(--r-m);
 background:var(--akzent);color:var(--onakzent);font-weight:700;font-size:16px}
.aendern{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-4);font-weight:600;font-size:15px;color:var(--muted)}
/* Der Druck auf „Bestätigen“: ein Lichtkreis, der Knopf gibt kurz nach */
.druck{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--onakzent);opacity:0}
.szene.laeuft .druck.da{animation:tz-druck .7s ease-out forwards}
.szene.laeuft .knopf-reihe:has(.druck.da) .bestaetigen{transform:scale(.96);filter:brightness(1.1)}
.erfolg{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--r-l);background:var(--oksoft);
 font-size:14.5px;line-height:1.45;color:var(--fg)}
.erfolg b{color:var(--ok)}
.erfolg small{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--muted)}
.erfolg .ok-punkt{width:22px;height:22px}
.erfolg .ok-punkt::after{left:6px;top:6.5px;width:9px;height:5px}
.szene.laeuft .erfolg:not(.da){transform:scale(.97)}

/* Szene 2: Bankumsätze kommen an und bekommen ihre Art, Beleg und Zahlung werden abgeglichen, rechts der Monat */
.monat-raster{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(var(--s-4),2vw,var(--s-6));align-items:start}
.app-karte{background:var(--box);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(var(--s-5),2.4vw,var(--s-6));box-shadow:var(--schatten-karte)}
.app-karte p{margin:0}
.app-karte .karte-kopf{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);font-weight:700;color:var(--fg)}
.bank-liste{list-style:none;margin:0;padding:0}
.bank-liste li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:2px var(--s-3);align-items:baseline;padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.b-datum{font-size:var(--t-mittel);color:var(--muted);font-variant-numeric:tabular-nums}
.b-text{font-size:15px;font-weight:600;color:var(--fg);min-width:0}
.b-text small{display:block;font-size:var(--t-klein);font-weight:400;color:var(--muted)}
.b-betrag{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;color:var(--fg)}
.b-betrag.plus{color:var(--ok)}
.b-art{grid-column:3;justify-self:end;padding:1px var(--s-2);border-radius:var(--r-rund);background:var(--akzentsoft);color:var(--akzenttext);
 font-size:var(--t-klein);font-weight:650;white-space:nowrap}
.abgleich{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;margin-top:var(--s-5)}
.ab-teil{display:flex;gap:var(--s-3);align-items:center;padding:var(--s-3);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-m);min-width:0}
.ab-teil b{display:block;font-size:var(--t-mittel);font-weight:650;color:var(--fg);overflow-wrap:anywhere}
.ab-teil small{display:block;font-size:var(--t-klein);color:var(--muted)}
.ab-linie{position:relative;display:grid;place-items:center;align-self:stretch;min-width:132px;padding:0 var(--s-2)}
.ab-linie::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--akzent);transform-origin:left;transition:transform .7s ease}
.szene.laeuft .ab-linie:not(.da)::before{transform:scaleX(0)}
.ab-marke{position:relative;display:inline-flex;gap:6px;align-items:center;padding:var(--s-1) var(--s-3);border-radius:var(--r-rund);
 background:var(--oksoft);color:var(--ok);font-size:var(--t-klein);font-weight:700;white-space:nowrap}
.ab-marke .ok-punkt{width:16px;height:16px;margin:0}
.ab-marke .ok-punkt::after{left:4px;top:4.5px;width:7px}
.balken-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-4)}
.balken-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3);align-items:baseline}
.bl-text{font-size:var(--t-mittel);font-weight:600;color:var(--fg)}
.bl-wert{font-size:var(--t-mittel);font-weight:700;font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
.balken{grid-column:1/-1;position:relative;height:8px;border-radius:var(--r-rund);background:var(--soft);overflow:hidden}
.balken::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--akzent);transform-origin:left;
 transform:scaleX(var(--wert,1));transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .15s}
.bl-98{--wert:.98}
.szene.laeuft .balken-liste li:not(.da) .balken::after{transform:scaleX(0);transition-duration:.2s;transition-delay:0s}
.app-karte .monat-offen{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);margin-top:var(--s-5);
 padding:var(--s-4);border-radius:var(--r-m);background:var(--warnsoft);font-size:var(--t-mittel);line-height:1.4;color:var(--fg)}
.monat-offen b{display:block;font-size:15px}

/* Szene 3: KI-Chat (Hari 09.11.2026). Oben der gesprochene Auftrag, darunter das Ergebnis wie in der App */
.chat-zeile{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.chat-szene{display:grid;gap:var(--s-3)}
.chat-szene p{margin:0}
.chat-auftrag{justify-self:end;max-width:92%;padding:var(--s-4) var(--s-5);border-radius:var(--r-xl) var(--r-xl) var(--r-s) var(--r-xl);
 background:var(--akzent);color:var(--onakzent);box-shadow:var(--schatten-karte)}
.chat-wer{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-klein);font-weight:700;opacity:.9;margin-bottom:var(--s-1)!important}
.chat-wer .ikon{width:22px;height:22px;background:rgba(255,255,255,.18);color:var(--onakzent)}
.chat-wer .ikon svg{width:14px;height:14px}
.chat-text{font-size:16px;line-height:1.5;font-weight:520;overflow-wrap:break-word}
.chat-arbeitet{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-mittel);font-weight:650;color:var(--akzenttext)}
.chat-ergebnis{position:relative;display:grid;gap:var(--s-2)}
.chat-ergebnis>.chat-arbeitet{position:absolute;left:clamp(var(--s-5),2.4vw,var(--s-6));top:clamp(var(--s-5),2.4vw,var(--s-6))}
.chat-ok{display:flex;gap:var(--s-3);align-items:flex-start;font-size:15px;line-height:1.45;color:var(--fg)}
.chat-ok .ok-punkt{margin-top:2px}
.rechnung-entwurf{margin-top:var(--s-1);padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg)}
.re-kopf{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;font-weight:720;color:var(--fg);
 margin-bottom:var(--s-2)!important}
.re-zeile{display:flex;justify-content:space-between;gap:var(--s-4);padding:6px 0;border-top:1px solid var(--line);font-size:15px;
 font-variant-numeric:tabular-nums;color:var(--fg)}
.re-zeile span:last-child,.re-kopf .nr{white-space:nowrap}
.re-status{display:grid}.re-status>*{grid-area:1/1;justify-self:end}
.re-gesendet{background:var(--oksoft);color:var(--ok)}
.re-zeile small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.re-pos{font-weight:600}
.re-summe{font-weight:760;font-size:16.5px}
.re-fuss{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-1) var(--s-4);padding-top:var(--s-2);border-top:1px solid var(--line);
 font-size:var(--t-klein);color:var(--muted)}
.chat-ergebnis .buchung-ende{margin-top:var(--s-1)}

/* Szene 4: Lohn (Hari 09.11.2026: KI-Lohnverrechnung prominent). Zahlen aus dem Lohnkern, siehe index.html */
.lohn-zeile{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.lohn-punkte{margin:var(--s-2) 0 var(--s-5)}
.lohn-szene{display:grid;gap:var(--s-3)}
.lohn-szene .karte-kopf{margin-bottom:0}
.lohn-szene .phasen{margin:0}
.karte-kopf small{display:block;font-size:var(--t-klein);font-weight:500;color:var(--muted)}
.lohn-tabelle{display:grid}
.lohn-tabelle p{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) 5.6em 5.6em;gap:var(--s-3);align-items:center;
 padding:var(--s-2) 0;border-bottom:1px solid var(--line)}
.lt-kopf{font-size:var(--t-klein);font-weight:650;color:var(--muted);padding-top:0!important}
.lt-kopf span:nth-child(n+3),.lt-zahl{text-align:right}
.lt-name{font-size:15px;font-weight:650;color:var(--fg);line-height:1.3}
.lt-name small{display:block;font-size:12.5px;font-weight:500;color:var(--muted)}
.lt-erfasst{display:flex;flex-wrap:wrap;gap:4px}
.lt-erfasst i{font-style:normal;font-size:12.5px;font-weight:650;line-height:1.3;padding:2px var(--s-2);border-radius:var(--r-rund);
 background:var(--soft);color:var(--fg);white-space:nowrap}
.lt-zahl{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg)}
.lt-netto{font-weight:760;color:var(--ok)}
.lohn-mitte{display:grid;min-height:30px;align-items:center}
.lohn-mitte>*{grid-area:1/1}
.lohn-checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px var(--s-4)}
.lohn-checks li{display:flex;align-items:center;gap:6px;font-size:var(--t-klein);font-weight:650;color:var(--ok)}
.lohn-checks li::before{content:"";width:9px;height:5px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.lohn-szene .lohn-warum{padding:var(--s-3) var(--s-4);border-radius:var(--r-m);background:var(--akzentsoft);font-size:14.5px;line-height:1.45;color:var(--fg)}
.lohn-warum b{display:block;color:var(--akzenttext)}
.lohn-summen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2)}
.lohn-summen li{padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg)}
.lohn-summen span{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.lohn-summen b{font-size:15.5px;font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}

/* E-Commerce kurz: helle Karte mit dem Gründer-Satz, die Details stehen auf /funktionen/e-commerce/ */
.ecommerce-kurz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--s-6),4vw,var(--s-12));align-items:center;
 padding:clamp(var(--s-6),4vw,var(--s-10));border:1px solid var(--line);border-radius:var(--r-xxl);background:var(--box)}
.ecommerce-kurz h2{font-size:var(--t-h2-web)}
.ecommerce-kurz .gruender{margin:0;background:var(--bg)}
.ecommerce-kurz .anbieter-zeile{margin-bottom:var(--s-3)}

@media (max-width:900px){.chat-zeile,.lohn-zeile,.ecommerce-kurz{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.chat-auftrag{max-width:100%}.chat-text{font-size:15px}.chat-ergebnis .erfolg small{display:none}
 .lohn-tabelle .lt-kopf{display:none}
 .lohn-tabelle p{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name brutto" "erfasst netto";row-gap:4px}
 .lt-name{grid-area:name}.lt-erfasst{grid-area:erfasst}.lt-zahl{grid-area:brutto}.lt-netto{grid-area:netto}
 .lt-zahl::before{content:"Brutto ";font-size:12px;font-weight:500;color:var(--muted)}
 .lt-netto::before{content:"Netto "}
 .lohn-summen{grid-template-columns:repeat(2,minmax(0,1fr))}}

@keyframes tz-scanlinie{from{background-position:0 100%}to{background-position:0 0}}
@keyframes tz-ecken{0%,100%{transform:scale(1)}50%{transform:scale(.985)}}
@keyframes tz-aufleuchten{0%{border-color:var(--akzent);box-shadow:0 0 0 4px var(--akzentsoft)}100%{border-color:var(--line);box-shadow:none}}
@keyframes tz-druck{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(14)}}
@media (prefers-reduced-motion:reduce){.szene *,.szene *::before,.szene *::after{animation:none!important}}

@media (max-width:900px){.fall{grid-template-columns:minmax(0,1fr);align-items:start}.monat-raster{grid-template-columns:minmax(0,1fr)}}
/* Handy: Bon kleiner (das Ergebnis soll schnell darunter folgen), Anhalten oben, Umsätze in drei Zeilen */
@media (max-width:600px){.bon-platz{width:min(100%,320px);padding:var(--s-3) var(--s-3) var(--s-5)}
 .kassabon{padding:var(--s-4) var(--s-4) var(--s-3);font-size:12px;line-height:1.5}
 .kb-name{font-size:16px}.kassabon .kb-summe{font-size:14px}.kassabon .kb-fuss{font-size:11px}.kb-code{width:44px;height:44px}
 .buchung .felder{grid-template-columns:repeat(2,minmax(0,1fr))}.buchung .feld{grid-column:auto}
 .buchung .feld.weit,.buchung .feld.mobil-breit{grid-column:1/-1}
 .buchung .feld.mobil-breit small{display:none}
 .st-tabelle p{grid-template-columns:minmax(0,1fr) 4.6em 4.2em}.buchung{border-radius:var(--r-xl)}.phasen{gap:var(--s-3)}
 .szene{display:flex;flex-direction:column}.szene-unten{order:-1;margin:0 0 var(--s-3)}
 .abgleich{grid-template-columns:minmax(0,1fr)}.ab-linie{min-height:56px}
 .ab-linie::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--akzent);transform-origin:top}
 .szene.laeuft .ab-linie:not(.da)::before{transform:scaleY(0)}
 .bank-liste li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"datum datum" "text text" "art betrag";row-gap:var(--s-1)}
 .b-datum{grid-area:datum;font-size:var(--t-klein)}.b-text{grid-area:text}.b-betrag{grid-area:betrag}
 .b-art{grid-area:art;grid-column:auto;justify-self:start}}
@media (max-width:350px){.buchung .felder{grid-template-columns:minmax(0,1fr)}.buchung .feld.breit{grid-column:auto}}