/* ──────────────────────────────────────────────────────────────
   BUCHL — Landingpage (nur von index.php geladen)
   Apple-inspiriert: große Typo, Weißraum, full-bleed-Kapitel,
   scroll-getriggerte Mini-Produkt-Demos. Eigenständig, Buchl-Blau.
   App-Design (app.css) bleibt unberührt.
─────────────────────────────────────────────────────────────── */
html,body{height:auto}
body{background:var(--paper)}
.lp{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── Nav ── */
.lhead{position:sticky;top:0;z-index:50;background:rgba(245,247,249,.82);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px)}
.lnav{display:flex;align-items:center;gap:24px;padding:20px 0}
.lnav .logo{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.02em}
.lnav .links{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:wrap;justify-content:flex-end}
/* Mit dem sechsten Punkt (Ratgeber) passt die Leiste zwischen rund 860 und 960px nicht
   mehr auf eine Zeile und schob die Seite um wenige Pixel seitlich auf. Vorher enger
   setzen, dann umbrechen lassen — beides ohne Sprung im Erscheinungsbild. */
@media(max-width:980px){ .lnav{gap:16px} .lnav .links{gap:15px} .lnav .links a{font-size:14px} }
.lnav .links a{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.lnav .links a:hover{color:var(--ink)}
.lnav .links a.btn{color:#fff}
/* Aktueller Bereich im Kopf — sonst weiß der Besucher auf einer Ratgeber-Seite nicht,
   wo er ist. */
.lnav .links a.ist-hier{color:var(--ink);font-weight:600}
.lnav .links a.btn.ghost{color:var(--ink)}

/* ── HERO ── */
.hero{padding:clamp(56px,10vw,120px) 0 clamp(48px,8vw,96px);display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(36px,6vw,80px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--brand-bg);color:var(--brand-700);
  font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:99px;letter-spacing:.01em}
.hero h1{font-size:clamp(42px,7vw,80px);line-height:.98;letter-spacing:-.038em;margin:22px 0 0}
.hero h1 .hl{color:var(--brand)}
.hero .sub{font-size:clamp(16px,1.7vw,20px);color:var(--ink-2);max-width:520px;margin:24px 0 30px;line-height:1.5}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .note{font-size:13px;color:var(--muted);margin-top:16px}
/* Hero-Entrance (CSS-Keyframe beim Laden — kein Reveal-FOUC) */
@keyframes heroUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .h-anim{opacity:0;animation:heroUp .8s var(--ease) forwards}
.hero .h-anim.d1{animation-delay:.06s}.hero .h-anim.d2{animation-delay:.14s}
.hero .h-anim.d3{animation-delay:.24s}.hero .h-anim.d4{animation-delay:.34s}

/* Hero-Visual: die Auftrags-Pipeline als leuchtende Kette */
.flow{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:8px}
.flow::before{content:"";position:absolute;left:31px;top:26px;bottom:26px;width:2px;background:linear-gradient(var(--brand),var(--good))}
.frowc{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:16px 20px;box-shadow:var(--shadow-md);position:relative;z-index:1;
  opacity:0;transform:translateY(16px) scale(.98);animation:heroUp .7s var(--ease) forwards}
.hero .flow .frowc:nth-child(1){animation-delay:.30s}
.hero .flow .frowc:nth-child(2){animation-delay:.46s}
.hero .flow .frowc:nth-child(3){animation-delay:.62s}
.hero .flow .frowc:nth-child(4){animation-delay:.78s}
.hero .flow .frowc:nth-child(5){animation-delay:.94s}
.frowc .fic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--brand-bg);color:var(--brand)}
.frowc.done .fic{background:var(--good-bg);color:var(--good)}
.frowc .ft{font-family:var(--disp);font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.frowc .fs{font-size:12.5px;color:var(--muted);margin-top:1px}
.frowc .famt{margin-left:auto;font-family:var(--mono);font-weight:600;font-size:14px;color:var(--ink)}
.frowc.done .famt{color:var(--good)}

/* ── KAPITEL-SYSTEM ── */
.chapter{padding:clamp(76px,12vw,148px) 0;overflow:hidden}
.chapter.tint{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* minmax(0,…) statt 1fr: sonst ist die Mindestbreite der Spalte ihr min-content — die
   Kanban-Illustration (3 Karten à 268px) hat die Spalte auf 828px aufgeblasen und ragte
   zwischen 900 und 1180 px rechts aus dem Bild, abgeschnitten von .chapter{overflow:hidden}. */
.cwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,84px);align-items:center}
.chapter.flip .cwrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.chapter.flip .ctext{order:2}
.ctext{max-width:480px}
.ckicker{display:inline-block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand)}
.chapter h2{font-size:clamp(30px,4.6vw,54px);line-height:1.07;letter-spacing:-.018em;margin:14px 0 0}
.chapter h2 .hl{color:var(--brand)}
.clead{font-size:clamp(16px,1.55vw,19px);color:var(--ink-2);line-height:1.55;margin-top:20px}
.clead strong{color:var(--ink)}
.cnote{font-size:13px;color:var(--muted);margin-top:16px;line-height:1.5;max-width:440px}
.clist{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:20px;max-width:460px}
.clist li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.clist li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:3px;background:var(--brand)}
.clist li strong{color:var(--ink)}

/* Generisches Visual-Gehäuse */
.vis{position:relative}
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:24px;position:relative}
.vhead{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:15px;
  color:var(--ink);padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.vhead .ic{color:var(--brand)}
.vhead .tag{margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--brand-700);background:var(--brand-bg);padding:4px 10px;border-radius:99px}

/* Staged rows — Standard = Endzustand; .play spielt die Sequenz erneut */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}60%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
.play .st{animation:riseIn .55s var(--ease) both}
.play .st:nth-child(2){animation-delay:.10s}.play .st:nth-child(3){animation-delay:.20s}
.play .st:nth-child(4){animation-delay:.30s}.play .st:nth-child(5){animation-delay:.40s}
.play .st:nth-child(6){animation-delay:.50s}.play .st:nth-child(7){animation-delay:.60s}

/* ── Kapitel: Angebot & Kalkulation ── */
.pos{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:9px 0;border-bottom:1px solid var(--line)}
.pos .pl{color:var(--ink-2)}.pos .pr{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.calc-sum{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.calc-kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.calc-kpi .kl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.calc-kpi .kv{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--ink);margin-top:3px}
.calc-kpi.good .kv{color:var(--good)}
.bonus{display:flex;align-items:center;gap:8px;margin-top:14px;background:var(--brand-bg);color:var(--brand-700);
  font-size:13px;font-weight:600;padding:11px 14px;border-radius:10px}

/* ── Kapitel: Katalog & DATANORM ── */
.dn{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center}
.dn-file{width:96px;height:118px;border-radius:12px;background:#fff;border:1px solid var(--line-2);
  box-shadow:var(--shadow-md);position:relative;display:flex;flex-direction:column;padding:14px 12px;gap:7px}
.dn-file::before{content:"DATANORM";position:absolute;top:-9px;left:12px;font-size:9px;font-weight:800;
  letter-spacing:.08em;color:#fff;background:var(--brand);padding:2px 7px;border-radius:5px}
.dn-file i{height:5px;border-radius:3px;background:var(--line-2);display:block}
.dn-file i:nth-child(2){width:80%}.dn-file i:nth-child(3){width:95%}.dn-file i:nth-child(4){width:70%}
.dn-file i:nth-child(5){width:88%}.dn-file i:nth-child(6){width:60%}
.dn-arrow{position:absolute;left:78px;top:50%;transform:translateY(-50%);color:var(--brand);z-index:2}
.dn-list{display:flex;flex-direction:column;gap:8px}
.dn-item{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:10px 13px;font-size:13px}
.dn-item .di{width:30px;height:30px;border-radius:8px;background:var(--brand-bg);color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
.dn-item .dname{color:var(--ink);font-weight:500}
.dn-item .dprice{margin-left:auto;font-family:var(--mono);color:var(--muted);font-size:12.5px}
.dn-item.pick{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}

/* ── Kapitel: Pipeline (Kanban) ── */
.kan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;position:relative;min-height:230px}
.kcol{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:9px;min-width:0}
.kcol .kh{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:2px 2px 6px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 12px;box-shadow:var(--shadow-sm)}
.kcard .kt{font-size:13px;font-weight:600;color:var(--ink)}
.kcard .km{font-size:11.5px;color:var(--muted);margin-top:2px}
.kcard .kbar{margin-left:0}
.ktravel{position:absolute;left:12px;top:44px;width:calc(33.33% - 20px);z-index:3;
  border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg),var(--shadow-md);
  transform:translateX(215%)}
@keyframes travel{0%{transform:translateX(0)}45%{transform:translateX(108%)}100%{transform:translateX(215%)}}
.play .ktravel{animation:travel 2.6s var(--ease) both}

/* ── Kapitel: Zahlungs-Ampel ── */
.ampel-vis{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center}
.tl{width:66px;background:#1b2129;border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:11px;flex:0 0 auto;box-shadow:var(--shadow-lg)}
.tl span{width:42px;height:42px;border-radius:50%;background:#333b45;transition:.4s}
.play .tl .g{animation:lampOn .4s .3s both;background:#1F7A54;box-shadow:0 0 16px #1F7A54}
.play .tl .y{animation:lampOn .4s .9s both;background:#C79A2B;box-shadow:0 0 16px #C79A2B}
.play .tl .r{animation:lampOn .4s 1.5s both;background:#C0392B;box-shadow:0 0 16px #C0392B}
.tl .g{background:#1F7A54;box-shadow:0 0 16px #1F7A54}.tl .y{background:#C79A2B;box-shadow:0 0 16px #C79A2B}.tl .r{background:#C0392B;box-shadow:0 0 16px #C0392B}
@keyframes lampOn{from{opacity:.3;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.ampel-rows{display:flex;flex-direction:column;gap:11px}
.arow{display:flex;align-items:center;gap:13px;border:1px solid;border-radius:12px;padding:13px 15px}
.arow .adot{width:13px;height:13px;border-radius:50%;flex:0 0 auto}
.arow strong{font-size:15px;display:block}
.arow span{font-size:13px}
.arow{text-align:left}
.arow.is-g{background:#eef7f0;border-color:#cfe8d6}.arow.is-g .adot{background:#1a7f45}.arow.is-g span{color:#41805a}
.arow.is-y{background:#fdf6ec;border-color:#f0dcbd}.arow.is-y .adot{background:#d99a2b}.arow.is-y span{color:#8a6d3b}
.arow.is-r{background:#fdeeec;border-color:#f2ccc6}.arow.is-r .adot{background:#c0392b}.arow.is-r span{color:#a1483c}

/* ── Kapitel: Buchhaltung ── */
.beleg{display:flex;align-items:center;gap:11px;font-size:13px;padding:9px 0;border-bottom:1px solid var(--line)}
.beleg .bic{width:28px;height:28px;border-radius:7px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center;flex:0 0 auto}
.beleg .bn{color:var(--ink-2)}.beleg .ba{margin-left:auto;font-family:var(--mono);color:var(--ink)}
.beleg .ba.plus{color:var(--good)}.beleg .ba.minus{color:var(--bad)}
.uva{display:flex;justify-content:space-between;align-items:center;margin-top:16px;background:var(--ink);color:#fff;border-radius:12px;padding:15px 18px}
.uva .ul{font-size:12.5px;color:#aeb9c4}.uva .uv{font-family:var(--disp);font-weight:800;font-size:24px}
.klein{margin-top:14px}
.klein .kl2{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}
.klein .ktrack{height:9px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.klein .kfill{height:100%;width:72%;background:linear-gradient(90deg,var(--good),var(--warn));border-radius:99px}
.play .klein .kfill{animation:fillBar 1.1s var(--ease) both}
@keyframes fillBar{from{width:0}to{width:72%}}

/* ── Kapitel: E-Rechnung & ÖNORM ── */
.docs2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.xmlcard{background:#0f141a;border-radius:14px;padding:16px;box-shadow:var(--shadow-lg);font-family:var(--mono);font-size:11px;line-height:1.7;overflow:hidden}
.xmlcard .xh{color:#7CC4FF;font-weight:700;font-size:11px;letter-spacing:.04em;margin-bottom:10px;font-family:var(--sans);text-transform:uppercase}
.xmlcard .xl{color:#9aa4af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xmlcard .xl .k{color:#7CC4FF}.xmlcard .xl .v{color:#E7ECF1}

/* ── Kapitel: Wartung ── */
.wart{position:relative;display:flex;flex-direction:column;gap:14px}
.cal{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow-md)}
.cal .ch{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px;margin-bottom:12px}
.cal .cg{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .cg i{aspect-ratio:1;border-radius:6px;background:var(--surface-2);display:grid;place-items:center;font-size:11px;color:var(--muted);font-style:normal}
.cal .cg i.mark{background:var(--brand);color:#fff;font-weight:700}
.notif{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--brand);
  border-radius:14px;padding:14px 16px;box-shadow:0 0 0 3px var(--brand-bg),var(--shadow-lg)}
.notif .nic{width:40px;height:40px;border-radius:11px;background:var(--brand-bg);color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
.notif strong{font-size:14px;display:block}.notif span{font-size:12.5px;color:var(--muted)}
.play .notif{animation:pop .6s var(--ease) .5s both}
.wart-kpi{display:flex;align-items:center;gap:12px;background:var(--good-bg);color:var(--good);border-radius:12px;padding:14px 16px;font-weight:600;font-size:14px}
.wart-kpi .wv{font-family:var(--disp);font-weight:800;font-size:22px;margin-left:auto}

/* ── Reused: Hero-Mock (nicht mehr genutzt, aber schadlos) ── */
.mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-lg)}

/* ── Reused: animiertes Handy (Vor-Ort-Kapitel) ── */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,72px);align-items:center}
/* Inaktive Schritte werden über die FARBE zurückgenommen, nicht über die Deckkraft.
   Mit opacity:.38 landete der Text effektiv bei #a5a8aa bzw. #b5b9be — 2,39:1 und 1,97:1,
   also unlesbar für schwache Augen. Deckkraft deckelt den Kontrast prinzipbedingt: selbst
   bei .70 kommt der Fliesstext nur auf 4,06:1. --muted erreicht 5,92:1 und sieht trotzdem
   sichtbar zurückgenommen aus. Die Ziffer bleibt als reine Dekoration abgeblendet. */
.demo-steps .sstep{display:flex;gap:14px;padding:14px 0;transition:color .45s}
.demo-steps .sstep h3,.demo-steps .sstep p{color:var(--muted)}
.demo-steps .sstep.on h3{color:var(--ink)}
.demo-steps .sstep.on p{color:var(--ink-2)}
.demo-steps .sstep .n{opacity:.55}
.demo-steps .sstep.on .n{opacity:1}
.sstep .n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--brand-bg);color:var(--brand);font-weight:800;display:grid;place-items:center;font-family:var(--disp);transition:.45s}
.sstep.on .n{background:var(--brand);color:#fff;transform:scale(1.06)}
.sstep h3{font-size:17px;margin-bottom:2px}.sstep p{font-size:14px;color:var(--ink-2)}
.phone-wrap{display:flex;justify-content:center}
.phone{width:300px;height:600px;background:#0f141a;border-radius:42px;padding:12px;box-shadow:0 40px 80px -30px rgba(19,25,32,.5);position:relative}
.phone::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:22px;background:#0f141a;border-radius:0 0 15px 15px;z-index:3}
.pscreen{background:var(--paper);border-radius:31px;height:100%;overflow:hidden;position:relative}
.stage{position:absolute;inset:0;padding:40px 20px 20px;opacity:0;transform:translateY(12px);transition:opacity .55s,transform .55s;pointer-events:none}
.stage.on{opacity:1;transform:none}
.stage .shead{font-family:var(--disp);font-weight:800;font-size:16px;margin-bottom:15px;color:var(--ink)}
.frow{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:9px;opacity:0;transform:translateY(9px);transition:.5s}
.stage.on .frow{opacity:1;transform:none}
.stage.on .frow:nth-child(2){transition-delay:.12s}.stage.on .frow:nth-child(3){transition-delay:.26s}
.stage.on .frow:nth-child(4){transition-delay:.4s}.stage.on .frow:nth-child(5){transition-delay:.54s}
.frow .k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700}
.frow .v{font-size:13.5px;color:var(--ink);margin-top:2px}
.sig{border:1.5px dashed var(--line-2);border-radius:12px;height:150px;display:flex;align-items:center;justify-content:center;background:#fff;margin-top:4px}
.sig path{stroke-dasharray:1;stroke-dashoffset:1}
.stage.on .sig path{transition:stroke-dashoffset 1.7s ease .35s;stroke-dashoffset:0}
.sigbadge{display:flex;align-items:center;gap:8px;color:var(--good);font-weight:600;font-size:13.5px;margin-top:15px;background:var(--good-bg);padding:11px 13px;border-radius:9px;opacity:0;transform:translateY(6px);transition:.45s 1.6s}
.stage.on .sigbadge{opacity:1;transform:none}
.inv-line{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.inv-total{display:flex;justify-content:space-between;font-family:var(--disp);font-weight:800;font-size:19px;margin:11px 0 4px}
.qr{width:118px;height:118px;margin:14px auto 0;display:grid;grid-template-columns:repeat(13,1fr);background:#fff;padding:7px;border:1px solid var(--line);border-radius:10px}
.qr i{aspect-ratio:1}
.qr i.on{background:#0f141a;border-radius:1px}
.scanpay{text-align:center;font-size:11.5px;color:var(--muted);margin-top:9px;opacity:0;transition:.4s 1s}
.stage.on .scanpay{opacity:1}

/* ── Reused: scroll-gescrubbte Scan-&-Pay-Reise ── */
.scrolly{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scrolly .sinner{padding:64px 0}
.scrolly.scrub{height:300vh}
.scrolly.scrub .sinner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0}
.scrolly h2{font-size:clamp(26px,4vw,44px);text-align:center;letter-spacing:-.03em;margin:0}
.scrolly .cap{text-align:center;color:var(--ink-2);max-width:560px;margin:14px auto 0;font-size:16px;min-height:52px}
.jtrack{position:relative;max-width:720px;width:100%;margin:48px auto 0;height:112px}
.jline{position:absolute;top:19px;left:0;right:0;height:4px;background:var(--line-2);border-radius:99px}
.jfill{position:absolute;top:19px;left:8%;width:84%;height:4px;background:var(--brand);border-radius:99px}
.scrolly.scrub .jfill{width:0}
.jstop{position:absolute;top:8px;transform:translateX(-50%);width:150px;text-align:center;opacity:1;transition:opacity .25s ease}
.scrolly.scrub .jstop{opacity:.36}
.scrolly.scrub .jstop.on{opacity:1}
.jdot{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--line-2);color:var(--muted);transition:.25s}
.jstop.on .jdot{border-color:var(--brand);background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(20,111,194,.3)}
.jlbl{display:block;font-size:12.5px;color:var(--ink-2);margin-top:10px;line-height:1.35}
/* Am Handy reicht die Breite für fünf beschriftete Haltepunkte nicht: Die Punkte sitzen
   prozentual (8 % … 92 %) und sind 150px breit zentriert — der letzte ragte damit über
   den rechten Bildschirmrand hinaus und die ganze Startseite ließ sich seitlich schieben.
   Deshalb hier ein gleichmäßiges Raster statt der Prozentposition; Linie, Füllung und
   Laufmarke bleiben absolut und passen weiterhin dazu. */
@media(max-width:640px){
  .jtrack{display:grid;grid-template-columns:repeat(5,1fr);height:auto;min-height:112px;align-items:start}
  .jstop{position:static;width:auto;transform:none;padding:8px 3px 0}
  .jlbl{font-size:10.5px;margin-top:8px}
  .jmark{display:none}
}
.jmark{position:absolute;top:5px;left:92%;margin-left:-16px;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;z-index:3;box-shadow:0 8px 20px rgba(20,111,194,.4)}
.scrolly.scrub .jmark{left:8%}
.scenes{position:relative;height:392px;max-width:300px;margin:26px auto 4px}
.scene{position:absolute;inset:0;opacity:0}
.scrolly:not(.scrub) .scene:last-child{opacity:1}
.scr{background:#fff;border:1px solid var(--line);border-radius:24px;height:100%;box-shadow:0 26px 64px -30px rgba(19,25,32,.34);overflow:hidden;display:flex;flex-direction:column;text-align:left}
.scr-top{background:var(--ink);color:#fff;padding:13px 17px;font-size:12px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.scr-body{padding:18px 18px 20px;flex:1;display:flex;flex-direction:column}
.il-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);padding:7px 0;border-bottom:1px solid var(--line)}
.il-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;font-size:14px}
.il-tot strong{font-size:20px;font-family:var(--mono)}
.qr-inv{width:92px;height:92px;margin:12px auto 4px}
.qr-scan{width:150px;height:150px;margin:0;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.il-cap{text-align:center;font-size:11px;color:var(--muted)}
.scr.dark{background:#0f141a}
.scan-view{flex:1;position:relative;display:grid;place-items:center;overflow:hidden}
.scan-frame{position:absolute;width:186px;height:186px;pointer-events:none}
.scan-frame span{position:absolute;width:26px;height:26px;border:3px solid var(--brand)}
.scan-frame .tl{top:0;left:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.scan-frame .tr{top:0;right:0;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.scan-frame .bl{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 6px}
.scan-frame .br{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 6px 0}
.scan-line{position:absolute;left:8px;right:8px;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--brand),transparent);box-shadow:0 0 12px var(--brand)}
.scr-foot{background:#0b0f14;color:#9aa4af;font-size:11.5px;text-align:center;padding:11px}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:3px}
.fld .val{font-size:14px;color:var(--ink)}
.fld .val.mono{font-family:var(--mono);font-size:12.5px}
.fld .val.big{font-size:22px;font-weight:700;font-family:var(--mono)}
.prefill{background:var(--brand-bg);border-radius:7px;padding:5px 9px;display:inline-block}
.pay-btn{margin-top:auto;background:var(--brand);color:#fff;text-align:center;padding:12px;border-radius:11px;font-weight:600;font-size:14px}
.paid{align-items:center;justify-content:center;text-align:center;gap:6px}
.paid-circle{width:82px;height:82px;border-radius:50%;background:var(--good-bg);color:var(--good);display:grid;place-items:center;margin-bottom:8px}
.paid-amt{font-size:26px;font-weight:800;color:var(--good);font-family:var(--mono)}
.paid-txt{font-size:15px;font-weight:700}
.paid-sub{font-size:12.5px;color:var(--muted);max-width:200px}

/* ── Reused: Mahn-Timeline ── */
.mahn{display:flex;flex-direction:column;gap:0;position:relative;padding-left:26px}
.mahn::before{content:"";position:absolute;left:8px;top:18px;bottom:18px;width:2px;background:var(--line-2)}
.mstep{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 18px;margin-bottom:12px}
.mstep::before{content:"";position:absolute;left:-24px;top:20px;width:12px;height:12px;border-radius:50%;background:var(--brand);border:2.5px solid var(--paper)}
.mstep .tag{font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--brand)}
.mstep h3{font-size:15.5px;margin:3px 0 2px}
.mstep p{font-size:13.5px;color:var(--ink-2)}
.mstep.done{border-style:dashed;background:transparent}
.mstep.done::before{background:var(--good)}
.mstep.done .tag{color:var(--good)}
.play .mstep{animation:slideIn .5s var(--ease) both}
.play .mstep:nth-child(2){animation-delay:.12s}.play .mstep:nth-child(3){animation-delay:.24s}
.play .mstep:nth-child(4){animation-delay:.36s}

/* ── vs. die Großen ── */
.vs{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,64px);align-items:center}
.vs h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.03em;line-height:1.05}
.vs h2 .hl{color:var(--brand)}
.vs .txt p{font-size:16px;color:var(--ink-2);margin:18px 0 0;max-width:470px;line-height:1.55}
.vs .txt p strong{color:var(--ink)}
.vscard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px;box-shadow:var(--shadow-md)}
.vsrow{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.vsrow:last-child{border-bottom:none}
.vsrow .ic{color:var(--good);flex:0 0 auto;margin-top:1px}
.vsrow.no .ic{color:var(--muted)}
.vsrow h3{font-size:14.5px;margin-bottom:2px}
.vsrow p{font-size:13px;color:var(--ink-2)}

/* ── Preise ── */
.price-head{text-align:center;max-width:600px;margin:0 auto}
.price-head h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.03em;line-height:1.05}
.price-head .lead{color:var(--ink-2);font-size:16px;margin:14px auto 0;line-height:1.55}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:99px;padding:3px;margin:28px 0 4px;background:var(--surface-2)}
/* Handy-Mindestmass 44 px (marke/DESIGN-REGELN.md Paragraf 5). Die Regel steht auch in
   app.css, greift hier aber nicht: diese Datei laedt spaeter und gewinnt bei gleicher
   Spezifitaet. Deshalb an jeder Fundstelle nachgezogen. */
.seg button{border:none;background:none;padding:9px 20px;border-radius:99px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;font-family:var(--sans)}
@media(max-width:820px){ .seg button{min-height:44px} }
.seg button.on{background:var(--brand);color:#fff}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.tier:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.tier.hl{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
.tier.hl:hover{box-shadow:0 0 0 3px var(--brand-bg),var(--shadow-lg)}
/* Die „Beliebt"-Marke steht im Fluss und schiebt im hervorgehobenen Tarif alles um ihre
   eigene Hoehe (badge min-height 24px) plus ihren Abstand (8px) nach unten — gemessen: 32px.
   Die drei Preise standen dadurch treppenfoermig statt in einer Zeile. Auf der Startseite
   fiel das bei 632px hohen Karten kaum auf, auf der Werbeseite bei 385px sofort.
   Die Marke NICHT aus dem Fluss nehmen: Fuer eine absolute Platzierung gibt DESIGN-REGELN.md
   keine Werte her, und geraten wird hier nicht. Stattdessen bekommen die uebrigen Karten
   denselben Platz reserviert — dieselben Werte, kein neuer erfunden. */
.tier:not(.hl)::before{content:'';display:block;min-height:24px;margin-bottom:8px}
.tier h3{font-size:21px}
.tier .tprice{font-family:var(--disp);font-size:44px;font-weight:800;letter-spacing:-.02em;margin:8px 0 2px}
.tier .tprice .per{font-size:15px;color:var(--muted);font-weight:500}
.tier .tseat{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px;font-size:14px;color:var(--ink-2)}
.tier ul .ic{color:var(--good);flex:0 0 auto}
.tier ul li{display:flex;gap:8px;align-items:flex-start}
.tier .btn{margin-top:auto}
.badge.good{background:var(--good-bg);color:var(--good);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:99px}

/* ── FAQ ── */
.faq{max-width:720px;margin:0 auto}
.faq h2{font-size:clamp(26px,3.6vw,40px);text-align:center;letter-spacing:-.03em;margin-bottom:38px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:0 20px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand);font-size:22px;font-weight:400;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 18px;color:var(--ink-2);font-size:14.5px;line-height:1.6}

/* ── Big CTA + Footer ── */
.bigcta{text-align:center;padding:clamp(72px,10vw,120px) 0}
.bigcta h2{font-size:clamp(30px,5vw,56px);letter-spacing:-.035em;line-height:1.03}
.bigcta p{color:var(--ink-2);margin:16px auto 28px;font-size:clamp(16px,1.7vw,19px);max-width:520px}
.lfoot{border-top:1px solid var(--line);padding:34px 0;display:flex;flex-wrap:wrap;gap:18px;align-items:center;color:var(--muted);font-size:13.5px}
.lfoot .links{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.lfoot a:hover{color:var(--ink)}

/* ── Cookiebar ── */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:760px;margin:0 auto;
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--ink);color:#fff;border-radius:14px;padding:14px 18px;font-size:13.5px;line-height:1.5;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.4)}
.cookiebar[hidden]{display:none}
.cookiebar a{color:#9cc7ef;text-decoration:underline}
.cookiebar .btn{flex:0 0 auto;background:#fff;color:var(--ink);border:none}

/* ── Reveal-on-Scroll (site-weit) ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ── Responsive ── */
@media(max-width:860px){
  .lnav .links a:not(.btn){display:none}
  .hero{grid-template-columns:1fr;gap:36px}
  .cwrap,.chapter.flip .cwrap{grid-template-columns:1fr;gap:38px}
  .chapter.flip .ctext{order:0}
  .ctext{max-width:none}
  .demo-grid{grid-template-columns:1fr;gap:34px}
  .demo-steps .sstep{max-width:440px;margin:0 auto}
  .phone{width:280px;height:560px}
  .vs{grid-template-columns:1fr;gap:32px}
  .tiers{grid-template-columns:1fr}
  .scrolly h2{font-size:23px}.scrolly .cap{font-size:14.5px}
  .jlbl{display:none}.jtrack{margin-top:38px;height:56px}
  .scrolly.scrub{height:280vh}
  .ampel-vis{grid-template-columns:1fr;gap:22px;justify-items:center}
  .tl{flex-direction:row;width:auto}
  .docs2{grid-template-columns:1fr}
  .ktravel{position:static;width:auto;transform:none;animation:none!important}
  .kan{grid-template-columns:1fr;min-height:0}
}
@media(max-width:420px){
  .lp{padding:0 18px}
  .dn{grid-template-columns:1fr;gap:34px}
  .dn-arrow{display:none}
  .calc-sum{grid-template-columns:1fr}
}

/* ── Reduced Motion: alles auf Endzustand, keine Bewegung ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.h-anim,.frowc{opacity:1!important;transform:none!important}
  .sig path{stroke-dashoffset:0!important}
  .scene:last-child{opacity:1!important}
  .ktravel{transform:none!important}
  .klein .kfill{width:72%!important}
}

/* ──────────────────────────────────────────────────────────────
   ZETTELWIRTSCHAFT — Werbe-Landingpage (zettelwirtschaft.php, danke.php)
   Eigene, kleine Bausteine für die kurze Anzeigen-Landingpage. Nutzt bewusst NICHT die
   einmaligen Kapitel-Illustrationen weiter oben (Hero-Flow, Kanban-Mock, Ampel-Visual,
   Handy-Mock, Scrolly-Journey, XML-Karte) — die gehören inhaltlich zu genau einem Kapitel
   der Startseite. Neu, aber generisch gehalten, damit es auch anderswo passt.
─────────────────────────────────────────────────────────────── */

/* Hero-Visual: fertige, unterschriebene Rechnung — der Zielzustand in einer Karte. */
.hdoc{max-width:360px;margin-left:auto}
.hdoc .hrow{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-2);padding:8px 0;border-bottom:1px solid var(--line)}
.hdoc .htotal{display:flex;justify-content:space-between;align-items:baseline;margin-top:11px;font-family:var(--disp);font-weight:800;font-size:20px;color:var(--ink)}
.hdoc .hsig{display:flex;align-items:center;gap:8px;margin-top:14px;background:var(--good-bg);color:var(--good);font-size:13px;font-weight:600;padding:11px 13px;border-radius:10px}

/* Vorher-Liste: dieselbe Aufzählung wie .clist, aber der Punkt ist zurückgenommen statt
   markenblau — die Zeilen sind Probleme, keine Verkaufsargumente. */
.clist.neg li::before{background:var(--muted)}

/* Video: eigener Abspielknopf statt Autoplay — kein Ton, kein automatischer Start. */
.vidwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#0f141a;line-height:0}
/* 9/16 statt 4/5: Das Werbevideo ist hochkant (1080×1920). In einem 4/5-Rahmen haette
   object-fit:cover oben und unten je ~15 % weggeschnitten — genau dort, wo bei diesem Video
   die Überschrift und der Abbinder stehen. Das Verhältnis folgt der Datei, nicht umgekehrt.
   max-width begrenzt die Höhe: 9/16 auf voller Spaltenbreite wäre über 600 px hoch und
   würde die Textspalte daneben erschlagen. */
.vidwrap{max-width:330px;margin-inline:auto}
.vidwrap video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#0f141a}
/* Das Video laeuft von selbst, sobald es im Bild ist. Die grosse Abspielflaeche darueber
   ist damit weg — sie legte einen Schleier ueber das ganze Bild und verdeckte genau das,
   was der Betrieb sehen soll. Geblieben ist ein kleiner Halteknopf in der Ecke: Was laenger
   als fuenf Sekunden von selbst laeuft, muss sich anhalten lassen (WCAG 2.2.2).
   44x44px ist das Mindestmass fuer Tippziele aus marke/DESIGN-REGELN.md — kein neuer Wert. */
.vidctl{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border:none;padding:0;
  border-radius:50%;background:rgba(15,20,26,.55);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:0;
  opacity:.5;transition:opacity .2s var(--ease),background .2s var(--ease)}
.vidwrap:hover .vidctl,.vidctl:focus-visible{opacity:1;background:rgba(15,20,26,.75)}
/* Am Handy gibt es kein Hover — dort bleibt der Knopf sichtbar, sonst findet ihn niemand. */
@media (hover:none){ .vidctl{opacity:.85} }
/* Umschalten der beiden Symbole ueber eine Klasse, NICHT ueber das hidden-Attribut:
   Auf einem SVG-Element wirkt hidden nicht. Weder greift dort die Regel [hidden]{display:none}
   des Browsers, noch schreibt el.hidden = true ein Attribut — es entsteht nur eine lose
   JavaScript-Eigenschaft. Ergebnis war, dass BEIDE Symbole gleichzeitig zu sehen waren.
   Im Browser nachgemessen: Attribut und Eigenschaft widersprachen sich. */
.vidctl .vi-pause{display:none}
.vidctl .vi-play{display:block}
.vidwrap.laeuft .vidctl .vi-pause{display:block}
.vidwrap.laeuft .vidctl .vi-play{display:none}

/* Ablauf in drei Schritten: schlichte, nummerierte Karten — kein Produkt-Mockup nötig. */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.step3{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow-sm)}
.step3 .s3n{display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--brand-bg);color:var(--brand);
  font-family:var(--disp);font-weight:800;font-size:15px;align-items:center;justify-content:center;margin-bottom:14px}
.step3 h3{font-size:16.5px;margin-bottom:5px}
.step3 p{font-size:14px;color:var(--ink-2);line-height:1.5}

/* Honigtopf: für Menschen unsichtbar (Position außerhalb des Bildbereichs statt display:none,
   weil manche Bots versteckte Felder gezielt überspringen), für Screenreader per aria-hidden
   ausgeblendet. */
.field.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

@media(max-width:820px){
  .hdoc{margin:0 auto}
  .steps3{grid-template-columns:1fr}
}
@media(max-width:560px){
  .vidplay .circ{width:60px;height:60px}
}