@font-face{font-family:Fraunces;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/fraunces-normal.ec6991c4.woff2) format("woff2")}
@font-face{font-family:Fraunces;font-style:italic;font-weight:400 800;font-display:swap;src:url(/assets/fonts/fraunces-italic.6607c2b5.woff2) format("woff2")}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/geist.19f9c925.woff2) format("woff2")}
/* == BASIS == */
:root{
  --bg:#F4EFE6;--card:#FFFBF5;--ink:#1C1A17;--ink2:#4F4A44;--ink3:#6B645A;--line:#E3DACB;--soft:#ECE4D6;
  --sig:#C4432E;--sigt:#B23C28;--sigl:#E2553F;--yes:#346B4B;
  --n:#1A1815;--npanel:#24201C;--nrand:#3A342D;--nhell:#F2ECE2;--nmittel:#CFC6B8;--nleise:#9B9386;--nsig:#F06A52;--ngr:#3E8A5C;--ngrh:#86CFA0;
  --papier:#FFFDF8;--pink:#1C1A17;--pgrau:#8C847A;--plinie:#ECE4D6;--mark:#FBE3D8;
  --schatten:0 1px 0 rgba(60,40,20,.04),0 24px 60px -36px rgba(60,40,20,.45);
  --fd:Fraunces,Georgia,"Times New Roman",serif;--fb:Geist,system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand:max(16px,env(safe-area-inset-left,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141210;--card:#1D1A16;--ink:#F2ECE2;--ink2:#CBC3B6;--ink3:#A39B8E;--line:#2E2924;--soft:#25211C;
  --sig:#C94C36;--sigt:#F07A63;--sigl:#F06A52;--yes:#7DBE97;
  --n:#24201C;--npanel:#2C2722;--nrand:#3F3831;
  --schatten:0 1px 0 rgba(0,0,0,.2),0 24px 60px -30px rgba(0,0,0,.8);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141210;--card:#1D1A16;--ink:#F2ECE2;--ink2:#CBC3B6;--ink3:#A39B8E;--line:#2E2924;--soft:#25211C;
  --sig:#C94C36;--sigt:#F07A63;--sigl:#F06A52;--yes:#7DBE97;
  --n:#24201C;--npanel:#2C2722;--nrand:#3F3831;
  --schatten:0 1px 0 rgba(0,0,0,.2),0 24px 60px -30px rgba(0,0,0,.8);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--fb);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--fd);font-variation-settings:"SOFT" 100;margin:0;text-wrap:balance}
p{margin:0}
.w{max-width:1200px;margin:0 auto;padding-left:max(clamp(16px,4vw,40px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,4vw,40px),env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid color-mix(in srgb,var(--sigl) 70%,transparent);outline-offset:3px;border-radius:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border:0;border-radius:999px;padding:0 26px;font:620 16.5px/1.2 var(--fb);letter-spacing:-.005em;cursor:pointer;background:var(--sig);color:#fff;text-decoration:none;text-align:center;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(196,67,46,.8)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.hell{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.hell:hover{box-shadow:inset 0 0 0 1.5px var(--ink3)}
.btn.voll{width:100%}
.eyebrow{font:620 12.5px/1.2 var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--sigt);margin-bottom:14px}
section.s{padding-block:clamp(52px,6.5vw,88px)}
main>section.s{border-top:1px solid var(--line)}
h2.t{font-weight:650;font-size:clamp(32px,4.2vw,52px);line-height:1.05;letter-spacing:-.028em;max-width:760px}
.lead{margin-top:16px;font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--ink2);max-width:600px}
.ok{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ngr);flex:none}
.ok svg{width:62%;height:62%}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* == KOPF == */
.nav{display:flex;align-items:center;gap:20px;min-height:76px}
.logo{font:700 30px/1 var(--fd);font-variation-settings:"SOFT" 100;letter-spacing:-.03em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.logo b{color:var(--sigl)}
.navr{margin-left:auto;display:flex;align-items:center;gap:6px}
.navr a{color:var(--ink2);text-decoration:none;font-weight:520;font-size:15.5px;padding:10px 14px;border-radius:99px;min-height:44px;display:inline-flex;align-items:center}
.navr a:hover{color:var(--ink);background:var(--soft)}
.anmelden{margin-left:8px;min-height:44px;border:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:99px;padding:0 18px;font-weight:600;font-size:15.5px;cursor:pointer}
.anmelden:hover{box-shadow:inset 0 0 0 1.5px var(--ink3)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(40px,6vw,96px);align-items:center;padding-block:clamp(24px,5vw,56px) clamp(48px,6vw,80px)}
@media (min-width:901px){.hero{min-height:min(calc(100svh - 76px),800px);padding-block:8px 40px}}
.htext{min-width:0;max-width:620px}
h1.hl{font-weight:680;font-size:clamp(42px,5.6vw,78px);line-height:1;letter-spacing:-.038em}
h1.hl em{display:block;font-style:italic;font-weight:600;color:var(--sigl);letter-spacing:-.03em;margin-top:.06em}
.sub{margin-top:26px;font-size:clamp(17.5px,1.55vw,20px);line-height:1.55;color:var(--ink2);max-width:540px}
.sub b{color:var(--ink);font-weight:600}
.cta{display:flex;align-items:center;gap:12px 18px;margin-top:34px}
.cta .btn{flex:none}
.cnote{font-size:14px;line-height:1.4;color:var(--ink3);text-align:left}
.pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;padding:6px 14px 6px 8px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;font-weight:560;color:var(--ink2);line-height:1.2}
.pill .ch{width:18px;height:18px;flex:none}
.cnote span{white-space:nowrap}
.cnote span:not(:last-child)::after{content:" ·"}
.trbtn{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:16px;border:0;background:transparent;border-radius:99px;padding:0 10px 0 0;cursor:pointer;font-weight:560;font-size:14.5px;color:var(--ink2);white-space:nowrap}
.trbtn .play{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);display:grid;place-items:center;flex:none;transition:background .18s,box-shadow .18s}
.trbtn .play path{fill:var(--ink2)}
.trbtn:hover{color:var(--ink)}
.trbtn:hover .play{background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--ink3)}
.trbtn .play svg{width:9px;height:9px;margin-left:2px}
.trbtn .trt{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;text-decoration-thickness:1px}
.trbtn:hover .trt{text-decoration-color:var(--ink3)}
.trbtn .dauer{color:var(--ink3);font-weight:500}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:clamp(24px,5vw,40px)}
  .htext{max-width:640px;margin-inline:auto;text-align:center}
  .sub{margin-inline:auto}
  .cta{justify-content:center}
  .navr a{display:none}
}
@media (max-width:520px){
  .nav{min-height:64px}
  .logo{font-size:28px}
  .hero{gap:26px;padding-top:36px;padding-bottom:36px}
  .pill{margin-bottom:18px;font-size:13px}
  h1.hl{font-size:clamp(33px,9.2vw,40px);line-height:1.04}
  .sub{margin-top:14px;font-size:16px;line-height:1.45;max-width:34ch}
  .cta{margin-top:24px;flex-direction:column;gap:12px}
  .cta .btn{min-height:54px;padding:0 34px;font-size:16.5px}
  .cnote{font-size:13.5px;text-align:center}
  .trbtn{margin-top:10px}
}

@media (max-width:520px) and (max-height:700px){.hero{padding-top:18px;gap:18px}.pill{margin-bottom:12px}.sub{margin-top:10px}.cta{margin-top:16px}.trbtn{margin-top:4px}}

/* == DEMO == */
.demo{min-width:0;display:flex;flex-direction:column;align-items:center}
.stapel{position:relative;width:min(420px,100%);height:432px;touch-action:pan-y}
.blatt{position:absolute;top:276px;right:0;width:88%;height:156px;background:var(--papier);color:var(--pink);border-radius:8px;padding:38px 22px 18px;box-shadow:0 1px 0 rgba(60,40,20,.06),0 18px 40px -22px rgba(60,40,20,.5);transform:rotate(1.5deg);transform-origin:50% 0;transition:transform .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1),height .7s cubic-bezier(.2,.8,.2,1),padding .7s,box-shadow .6s;font-size:13px;line-height:1.5;z-index:1;display:flex;flex-direction:column;overflow:hidden}
.blatt .kl{font-size:11px;color:var(--pgrau);display:flex;justify-content:space-between;gap:8px}
.blatt .bt{font:650 16px/1.25 var(--fd);font-variation-settings:"SOFT" 100;margin:12px 0 10px;letter-spacing:-.01em}
.blatt p{margin:0 0 7px}
.blatt mark{background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 0/var(--mk,100%) 100%;color:inherit;border-radius:2px;padding:0 1px;transition:background-size 1.1s ease}
.blatt .koerper{opacity:0;transition:opacity .4s}
.blatt .rest{visibility:hidden}
.blatt .gruss{margin-top:8px}
.blatt .sig{font:italic 600 15px/1.2 var(--fd);font-variation-settings:"SOFT" 100;margin-top:2px}
.blatt .stand{margin-top:auto;padding-top:12px;border-top:1px solid var(--plinie);display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.blatt .pkt{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--pgrau);transition:color .3s}
.blatt .pkt .ok{width:18px;height:18px;background:var(--plinie);transition:background .3s}
.blatt .pkt .ok svg{opacity:0;transition:opacity .3s}
.blatt .pkt b{font-weight:620;color:var(--pink)}
.blatt .pkt.an{color:var(--pink)}
.blatt .pkt.an .ok{background:var(--ngr)}.blatt .pkt.an .ok svg{opacity:1}
.blatt .pkt.laeuft .ok{background:transparent;border:2px solid var(--sigl);border-top-color:transparent;animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
.blatt .stempel2{position:absolute;right:18px;top:52%;transform:rotate(-9deg) scale(1.3);border:2.5px solid var(--yes);color:var(--yes);border-radius:10px;padding:6px 12px;font:800 14px/1.15 var(--fb);letter-spacing:.04em;text-align:center;opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1);background:color-mix(in srgb,var(--papier) 85%,transparent)}
.blatt .stempel2 small{display:block;font:600 11px/1.2 var(--fb);letter-spacing:0}
.stapel.offen .blatt{top:26px;height:392px;width:92%;padding:22px 22px 18px;transform:none;z-index:3;box-shadow:0 1px 0 rgba(60,40,20,.06),0 30px 60px -28px rgba(60,40,20,.55)}
.stapel.offen .blatt .stand{opacity:1;transform:none;transition-delay:.5s}
.stapel.offen .blatt .koerper{opacity:1;transition-delay:.35s}
.stapel.gesendet .blatt .stempel2{opacity:1;transform:rotate(-9deg) scale(1)}
.deck{position:absolute;left:0;top:0;width:92%;height:302px;z-index:2;outline-offset:6px;border-radius:26px}
.jk{position:absolute;inset:0;background:var(--n);color:var(--nhell);border-radius:26px;padding:22px 22px 20px;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;cursor:grab;transform:rotate(-2.5deg);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -30px rgba(30,20,10,.75);border:1px solid rgba(242,236,226,.06)}
.jk.drag{transition:none;cursor:grabbing}
.jk.rein{animation:rein .55s cubic-bezier(.2,.8,.2,1)}
@keyframes rein{from{opacity:0;transform:rotate(-2.5deg) translateY(18px) scale(.97)}}
.jk.stups{animation:stups 1.5s cubic-bezier(.4,0,.2,1) 1}
@keyframes stups{0%,100%{transform:rotate(-2.5deg)}35%{transform:translateX(26px) rotate(1.5deg)}60%{transform:translateX(-4px) rotate(-3deg)}}
.jk .kopf{display:flex;gap:12px;align-items:center}
.jk .ini{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font:700 20px/1 var(--fd);flex:none}
.jk .firma{font-weight:600;font-size:15.5px;line-height:1.25}
.jk .ort{font-size:13.5px;color:var(--nleise);line-height:1.3}
.jk h2{font-weight:650;font-size:27px;line-height:1.1;letter-spacing:-.02em;margin:18px 0 12px}
.jk .chips{display:flex;flex-wrap:wrap;gap:6px}
.jk .chips span{background:rgba(242,236,226,.08);border-radius:99px;padding:6px 11px;font-size:13.5px;font-weight:560;color:var(--nmittel)}
.jk .warum{margin-top:auto;display:flex;flex-direction:column;gap:7px;border-top:1px dashed var(--nrand);padding-top:14px;font-size:14px;color:var(--nmittel)}
.jk .warum div{display:flex;gap:9px;align-items:center}
.jk .warum .ok{width:17px;height:17px}
.stempel{position:absolute;top:40%;left:50%;padding:7px 15px;border:3px solid;border-radius:12px;font:800 19px/1 var(--fb);letter-spacing:.06em;opacity:0;pointer-events:none;background:var(--n);white-space:nowrap}
.stempel.ja{color:var(--ngrh);transform:translate(-50%,-50%) rotate(-10deg)}
.stempel.nein{color:var(--nsig);transform:translate(-50%,-50%) rotate(10deg)}
.leer{position:absolute;inset:0;border:1.5px dashed var(--line);border-radius:26px;display:grid;place-items:center;text-align:center;padding:28px;color:var(--ink2);font-size:15px}
.leer b{display:block;color:var(--ink);font:650 22px/1.2 var(--fd);font-variation-settings:"SOFT" 100;margin-bottom:6px}
.leer .btn{margin-top:18px}
.leer .nochmal{display:block;margin:10px auto 0;padding:6px 10px;border:0;background:none;color:var(--ink3);font:560 14px/1.3 var(--fb);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.leer .nochmal:hover{color:var(--ink)}
.steuer{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:22px;min-height:64px}
.rund{width:64px;height:64px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;transition:transform .18s,box-shadow .18s;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line),var(--schatten)}
.rund:hover{transform:scale(1.06)}
.rund:active{transform:scale(.96)}
.rund svg{width:24px;height:24px}
.rund.ja{background:var(--sig);box-shadow:0 14px 30px -14px rgba(196,67,46,.9)}
.rund.ja.puls{animation:puls 2s 2.2s 3}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(226,85,63,.5)}100%{box-shadow:0 0 0 18px rgba(226,85,63,0)}}
.steuer .btn{min-height:50px;padding:0 22px;font-size:15.5px}
.dmsg{margin-top:12px;font-size:14.5px;color:var(--ink3);text-align:center;min-height:23px;max-width:380px}
/* Swipe-Hinweis. Umschalten: data-hinweis="a" oder "b" auf #demo. A: leise, dauerhaft. B: Pfeil mit Kurztext, einmal beim Sichtbarwerden. */
.tipp{display:flex;align-items:center;justify-content:center;gap:8px;width:min(420px,100%);padding-right:8%;margin:0 0 14px;height:26px;white-space:nowrap;font-size:12.5px;font-weight:560;letter-spacing:.01em;color:var(--ink3);opacity:.85;transition:opacity .4s}
.tipp i{font-style:normal;font-weight:700;color:var(--ink3);opacity:.8}
.tipp-b{height:36px;margin-bottom:10px;opacity:0;visibility:hidden}
.tipp-b.sicht{opacity:1;visibility:visible}
.tipp .pille{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 16px;border-radius:99px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line),0 10px 24px -16px rgba(60,40,20,.5);color:var(--ink);font:620 14px/1 var(--fb);letter-spacing:0}
.tipp .pfeil{width:18px;height:18px;flex:none;color:var(--sigt);animation:fuehren8 1.15s cubic-bezier(.4,0,.2,1) 3 both}
@keyframes fuehren8{0%{transform:translateX(-5px);opacity:.25}55%{transform:translateX(5px);opacity:1}100%{transform:translateX(5px);opacity:1}}
.tipp.weg{opacity:0;visibility:hidden}
.dnote{margin-top:2px;font-size:12px;color:var(--ink3);opacity:.8;text-align:center}
@media (max-width:520px){
  .stapel{width:min(358px,100%);height:420px}
  .blatt{top:250px;height:170px;width:90%;padding:44px 18px 16px}
  .deck{height:276px;width:92%}
  .jk{padding:18px 18px 16px}
  .jk h2{font-size:24px;margin:14px 0 10px}
  .jk .chips span{padding:5px 10px;font-size:13px}
  .jk .chips span:nth-child(3){display:none}
  .jk .warum{padding-top:12px;gap:6px;font-size:13.5px}
  .stapel.offen .blatt{top:14px;height:392px;width:100%;padding:18px 18px 16px}
  .steuer{margin-top:16px}
  .tipp{margin-bottom:10px}
  .tipp-b{margin-bottom:8px}
  .tipp .lang{display:none}
}
@media (prefers-reduced-motion:reduce){.blatt,.blatt .koerper{transition:none!important}.tipp,.tipp-b{transition:none}.tipp .pfeil{animation:none}}
@media (min-width:1280px){.demo{zoom:1.08}}

/* == TRAILER == */
.tr{position:fixed;inset:0;z-index:80;background:rgba(10,9,7,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);animation:trauf .25s ease}
@keyframes trauf{from{opacity:0}}
.tv{position:relative;width:min(960px,100%);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#141210;color:#F2ECE2;box-shadow:0 40px 100px -40px rgba(0,0,0,.9)}
.tv .seg{position:absolute;left:16px;right:16px;top:14px;display:flex;gap:5px;z-index:4}
.tv .seg i{flex:1;height:3px;border-radius:3px;background:rgba(242,236,226,.22);overflow:hidden}
.tv .seg i b{display:block;height:100%;width:0;background:#F2ECE2}
.tv.hell .seg i{background:rgba(28,26,23,.15)}.tv.hell .seg i b{background:#1C1A17}
.tv .ctl{position:absolute;top:28px;right:14px;display:flex;gap:8px;z-index:4}
.tv .ctl button{width:44px;height:44px;border:0;border-radius:50%;background:rgba(242,236,226,.14);color:#F2ECE2;cursor:pointer;display:grid;place-items:center}
.tv.hell .ctl button{background:rgba(28,26,23,.08);color:#1C1A17}
.tv .ctl svg{width:18px;height:18px}
.sz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9% 7% 7%;opacity:0;transition:opacity 0s .5s;pointer-events:none;background:#141210;z-index:1}
.sz.on{opacity:1;pointer-events:auto;z-index:2;transition:opacity .45s}
.sz.hell{background:#F4EFE6;color:#1C1A17}
.sz .cap{font:650 clamp(26px,4.4vw,52px)/1.08 var(--fd);font-variation-settings:"SOFT" 100;letter-spacing:-.025em;max-width:16ch}
.sz .cap em{color:#E2553F;font-style:italic}
.sz .klein{margin-top:14px;font-size:clamp(14px,1.6vw,18px);opacity:.7}
.portale{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:520px;margin-bottom:28px}
.portale span{border:1px solid rgba(242,236,226,.25);border-radius:99px;padding:7px 13px;font-size:clamp(12px,1.4vw,15px);opacity:0}
.sz.on .portale span{animation:auf .4s forwards}
@keyframes auf{to{opacity:1}}
.blaetter{position:relative;width:min(280px,60%);height:120px;margin-bottom:26px}
.blaetter div{position:absolute;inset:0;background:#FFFDF8;color:#1C1A17;border-radius:6px;padding:14px;font-size:12px;text-align:left;opacity:0;box-shadow:0 10px 30px -14px rgba(0,0,0,.8)}
.sz.on .blaetter div{animation:fall .45s forwards}
@keyframes fall{from{opacity:0;transform:translateY(-24px)}to{opacity:1}}
.tlogo{font:700 clamp(54px,9vw,104px)/1 var(--fd);font-variation-settings:"SOFT" 100;letter-spacing:-.03em;opacity:0;transform:scale(.9)}
.tlogo b{color:#E2553F}
.sz.on .tlogo{animation:lp .6s .8s forwards}
@keyframes lp{to{opacity:1;transform:none}}
.sz.on .oder{animation:weg .5s .55s forwards}
@keyframes weg{to{opacity:0}}
.tkarte{width:min(300px,64%);background:#1A1815;color:#F2ECE2;border-radius:20px;padding:18px;text-align:left;margin-bottom:26px;position:relative}
.tkarte small{display:block;color:#9B9386;font-size:12px}
.tkarte b{display:block;font:650 20px/1.15 var(--fd);font-variation-settings:"SOFT" 100;margin-top:8px}
.tkarte .st{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-10deg);border:3px solid #86CFA0;color:#86CFA0;border-radius:10px;padding:5px 12px;font:800 16px/1 var(--fb);letter-spacing:.06em;opacity:0;background:#1A1815}
.sz.on .tkarte{animation:wisch 1.1s 1.2s forwards}
.sz.on .tkarte .st{animation:auf .25s .9s forwards}
@keyframes wisch{to{transform:translateX(150%) rotate(18deg);opacity:0}}
.haken{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;text-align:left}
.haken div{display:flex;gap:10px;align-items:center;font-size:clamp(15px,1.9vw,20px);font-weight:560;opacity:0}
.haken .ok{width:22px;height:22px}
.sz.on .haken div{animation:auf .35s forwards}
.tsend{margin-top:26px;background:#C4432E;color:#fff;border-radius:99px;padding:12px 22px;font-weight:650;font-size:clamp(14px,1.6vw,17px)}
.sz.on .tsend{animation:druck .5s 1.6s 2}
@keyframes druck{50%{transform:scale(.94)}}
.sz .btn{margin-top:28px}
@media (max-width:640px){.tv{aspect-ratio:9/16;width:min(420px,100%);max-height:calc(100dvh - 32px)}.sz{padding:18% 8% 10%}.sz .cap{font-size:clamp(28px,8vw,38px)}}
.tv.vid{aspect-ratio:16/9;width:min(1120px,100%);max-height:none;background:#F4EFE6}
.tv.vid video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:#F4EFE6}
.tv.vid .ctl{top:14px}.tv.vid .ctl button{background:rgba(28,26,23,.55);color:#F2ECE2}
@media (max-width:640px){.tv.vid{aspect-ratio:16/9;width:100%;max-height:none;border-radius:14px}.tv.vid .ctl button{width:38px;height:38px}}

/* == PREIS == */
.preise{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;margin:36px auto 0;align-items:stretch;max-width:940px;text-align:left}
.plan:not(.pass) ul{flex:1}
#preis .w{text-align:center}
#preis h2.t,#preis .lead{margin-inline:auto}
.plan{background:var(--card);border-radius:26px;padding:32px;box-shadow:var(--schatten);display:flex;flex-direction:column;min-width:0}
.plan h3{font-weight:650;font-size:22px;letter-spacing:-.01em}
.plan .gross{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:14px}
.plan .gross b{white-space:nowrap}
.plan .gross b{font:650 clamp(44px,4.6vw,56px)/1 var(--fd);font-variation-settings:"SOFT" 100;letter-spacing:-.035em}
.plan .gross span{font-weight:560;color:var(--ink3)}
.plan .klein{font-size:15px;color:var(--ink3);margin-top:8px}
.plan ul{list-style:none;padding:0;margin:26px 0 28px;display:flex;flex-direction:column;gap:12px}
.plan li{display:flex;gap:11px;align-items:flex-start;color:var(--ink2);font-size:16px;line-height:1.45}
.plan li .ok{width:19px;height:19px;margin-top:2px;background:var(--yes)}
.plan li small{display:block;font-size:14px;color:var(--ink3)}
.pass{background:var(--n);color:var(--nhell);box-shadow:inset 0 0 0 1px var(--nrand),0 34px 70px -36px rgba(30,20,10,.8)}
.pass .gross span,.pass .klein{color:var(--nleise)}
.pass li{color:var(--nmittel)}
.pass li .ok{background:var(--ngr)}
.pass li small{color:var(--nleise)}
.zahlarten{margin-top:14px;text-align:center;font-size:12.5px;letter-spacing:.01em;color:var(--nleise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan .tag{margin-top:10px;font-weight:600;font-size:16px;color:var(--nhell)}
.gueltig{margin-top:24px;padding-top:20px;border-top:1px solid var(--nrand);font-size:15px;color:var(--nmittel);display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px}
.gueltig b{font:650 17px/1.3 var(--fd);font-variation-settings:"SOFT" 100;color:var(--nhell)}
.pfuss{margin-top:24px;font-size:14px;color:var(--ink3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pass{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sig) 60%,transparent),0 34px 70px -36px rgba(0,0,0,.8)}}
:root[data-theme="dark"] .pass{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--sig) 60%,transparent),0 34px 70px -36px rgba(0,0,0,.8)}
@media (max-width:900px){
  .preise{grid-template-columns:minmax(0,1fr);max-width:560px}
  .pass{order:-1}
}
@media (max-width:520px){
  .plan{padding:26px 22px}
}


/* == V8: KACHELN == */
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
.kachel{background:var(--card);border-radius:24px;box-shadow:var(--schatten);padding:14px 14px 24px;display:flex;flex-direction:column;min-width:0}
.kachel h3{font-weight:650;font-size:22px;line-height:1.15;letter-spacing:-.015em;margin:20px 8px 0}
.kachel p{margin:8px 8px 0;color:var(--ink2);font-size:15.5px;line-height:1.5}
.viz{position:relative;height:216px;border-radius:16px;background:var(--bg);overflow:hidden;padding:12px}
.dnote2{margin-top:14px;font-size:12.5px;color:var(--ink3)}
@media (max-width:1100px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.kacheln{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:36px}.kachel h3{margin-top:16px}}
/* Zeilen, wie in der Suche und im Nein */
.viz .zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:center;padding:5px 10px;border-radius:10px;line-height:1.25}
.viz .zeile b{font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viz .zeile span{grid-column:1;font-size:11px;color:var(--ink3)}
.viz .zeile em{grid-row:1/3;grid-column:2;font-style:normal;font-size:10.5px;font-weight:650;padding:3px 8px;border-radius:99px;white-space:nowrap}
.viz .weg{opacity:.4}
.viz .weg b{background:linear-gradient(var(--sigl),var(--sigl)) 0 58%/100% 1.5px no-repeat}
.viz .weg em{background:var(--soft);color:var(--ink3)}
.viz .ja{background:var(--card);box-shadow:0 10px 22px -14px rgba(60,40,20,.55)}
.viz .ja em{background:color-mix(in srgb,var(--yes) 16%,transparent);color:var(--yes)}
/* Suchen: der Zähler läuft, vier fallen raus, eine bleibt */
.v-such{display:flex;flex-direction:column;gap:2px;justify-content:center}
.v-such .zeile{padding-block:4px}
.v-such .zaehl{display:flex;align-items:baseline;gap:6px;padding:0 10px 4px;font-size:11.5px;color:var(--ink3)}
.v-such .zaehl b{font:650 18px/1 var(--fd);font-variation-settings:"SOFT" 100;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.spiel .v-such .weg{animation:raus .45s calc(.35s + var(--i) * .3s) backwards}
.spiel .v-such .weg b{animation:strich .4s calc(.35s + var(--i) * .3s) backwards}
.spiel .v-such .ja{animation:hebt .5s 1.45s backwards}
.spiel .v-such .ja em{animation:auf8 .35s 1.65s backwards}
@keyframes raus{from{opacity:1}}
@keyframes strich{from{background-size:0 1.5px}}
@keyframes hebt{from{background:transparent;box-shadow:none}}
@keyframes auf8{from{opacity:0;transform:scale(.8)}}
/* Schreiben: der Absatz wird markiert, die zwei Teile kommen dazu */
.v-schreib .papier{position:absolute;left:12px;right:34px;top:12px;bottom:44px;background:var(--papier);color:var(--pink);border-radius:6px;padding:10px 12px;box-shadow:0 10px 24px -16px rgba(60,40,20,.55);font-size:10.5px;line-height:1.45;overflow:hidden}
.v-schreib .kl{display:block;font-size:9px;color:var(--pgrau);margin-bottom:6px}
.v-schreib .papier b{display:block;font:650 11.5px/1.3 var(--fd);font-variation-settings:"SOFT" 100;margin-bottom:4px}
.v-schreib .papier p{margin:0 0 6px}
.v-schreib mark{background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 0/100% 100%;color:inherit;border-radius:2px;padding:0 1px}
.v-schreib .papier i{display:block;height:4px;border-radius:2px;background:var(--plinie);margin-top:5px}.v-schreib .papier i.k{width:62%}
.v-schreib .dok{position:absolute;right:12px;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:10px;padding:6px 10px 6px 7px;font-size:12px;font-weight:600;box-shadow:0 8px 18px -12px rgba(60,40,20,.5)}
.v-schreib .dok .ok{width:17px;height:17px}
.v-schreib .d1{bottom:58px}.v-schreib .d2{bottom:24px}
.v-schreib .pbar{position:absolute;left:12px;right:12px;bottom:10px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.v-schreib .pbar i{display:block;height:100%;background:var(--yes);transform-origin:0 50%}
.spiel .v-schreib mark{animation:mark8 1.1s .3s backwards}
.spiel .v-schreib .d1{animation:auf8 .4s 1.2s backwards}
.spiel .v-schreib .d2{animation:auf8 .4s 1.7s backwards}
.spiel .v-schreib .pbar i{animation:fuell8 1.8s .2s cubic-bezier(.4,0,.2,1) backwards}
@keyframes mark8{from{background-size:0 100%}}
@keyframes fuell8{from{transform:scaleX(0)}}
/* Weg: Formular, Mail, Portal, die Felder schreiben sich ein */
.v-weg{display:flex;flex-direction:column;gap:6px}
.v-weg .seg{display:flex;gap:4px;margin-bottom:4px}
.v-weg .seg span{font-size:11.5px;font-weight:620;padding:4px 10px;border-radius:99px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
.v-weg .seg .s1{background:var(--ink);color:var(--bg);box-shadow:none}
.v-weg .feld{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:4px 2px;border-bottom:1px solid var(--line)}
.v-weg .feld span{color:var(--ink3);flex:none}
.v-weg .feld i{font-style:normal;font-weight:560;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-weg .knopf{margin-top:auto;background:var(--sig);color:#fff;border-radius:99px;text-align:center;font-size:11.5px;font-weight:650;padding:7px 10px}
.spiel .v-weg .feld i{animation:tipp8 .6s calc(.3s + var(--i) * .45s) backwards}
.spiel .v-weg .seg .s1{animation:seg1 3.4s .2s backwards}
.spiel .v-weg .seg .s2{animation:seg2 3.4s .2s backwards}
.spiel .v-weg .seg .s3{animation:seg3 3.4s .2s backwards}
@keyframes tipp8{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes seg1{0%,26%{background:var(--ink);color:var(--bg);box-shadow:none}33%,90%{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}}
@keyframes seg2{0%,26%{background:transparent;color:var(--ink2)}33%,58%{background:var(--ink);color:var(--bg);box-shadow:none}65%,100%{background:transparent;color:var(--ink2)}}
@keyframes seg3{0%,58%{background:transparent;color:var(--ink2)}65%,90%{background:var(--ink);color:var(--bg);box-shadow:none}97%,100%{background:transparent;color:var(--ink2)}}
/* Überblick: eine Bewerbung wandert bis zum Gespräch */
.v-ueber .spalten{position:absolute;inset:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.v-ueber .spalten div{background:var(--soft);border-radius:10px;padding:8px 6px;font-size:10.5px;letter-spacing:-.01em;font-weight:650;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-ueber .hop,.v-ueber .still{position:absolute;width:calc((100% - 36px) / 3 - 12px);margin-left:6px;background:var(--card);border-radius:8px;padding:6px 4px;font-size:11px;font-weight:650;text-align:center;box-shadow:0 6px 14px -10px rgba(60,40,20,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-ueber .hop{top:44px;left:calc(12px + 2 * ((100% - 36px) / 3 + 6px));background:var(--yes);color:#fff}
.v-ueber .s-a{top:44px;left:12px}
.v-ueber .s-b{top:44px;left:calc(12px + 1 * ((100% - 36px) / 3 + 6px))}
.spiel .v-ueber .hop{animation:hop8 3s .3s backwards}
@keyframes hop8{0%,18%{left:12px;background:var(--card);color:var(--ink);top:82px}
  36%,58%{left:calc(12px + 1 * ((100% - 36px) / 3 + 6px));background:var(--card);color:var(--ink);top:82px}
  80%,100%{left:calc(12px + 2 * ((100% - 36px) / 3 + 6px));background:var(--yes);color:#fff;top:44px}}

/* Schweiz: falsch wird gestrichen, richtig kommt dazu */
.v-ch{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px}
.v-ch div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;background:var(--card);border-radius:12px;padding:10px 14px;font:600 16px/1.25 var(--fd);font-variation-settings:"SOFT" 100;letter-spacing:-.01em;box-shadow:0 8px 18px -14px rgba(60,40,20,.5)}
.v-ch s{text-decoration:none;color:var(--ink3);background:linear-gradient(var(--sigl),var(--sigl)) 0 55%/100% 1.5px no-repeat}
.v-ch ins{text-decoration:none;color:var(--yes)}
.spiel .v-ch s{animation:strich2 .45s calc(.25s + var(--i, 0) * .55s) backwards}
.spiel .v-ch ins{animation:auf8 .4s calc(.6s + var(--i, 0) * .55s) backwards}
@keyframes strich2{from{background-size:0 1.5px;color:var(--ink)}}
/* Nein: Grund antippen, jobsi merkt es sich, morgen fällt das Unpassende weg */
.v-nein{display:flex;flex-direction:column;gap:6px;justify-content:center}
.v-nein .karte{position:relative;background:var(--n);color:var(--nhell);border-radius:12px;padding:8px 12px;line-height:1.3;opacity:.6}
.v-nein .karte b{display:block;font-weight:600;font-size:12.5px}
.v-nein .karte span{display:block;font-size:11px;color:var(--nleise)}
.v-nein .karte em{position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(8deg);border:2px solid var(--nsig);color:var(--nsig);border-radius:6px;padding:2px 7px;font:800 11px/1.1 var(--fb);font-style:normal;letter-spacing:.06em}
.v-nein .grund{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.v-nein .grund span{font-size:11px;font-weight:620;padding:4px 9px;border-radius:99px;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
.v-nein .grund .pk{background:var(--ink);color:var(--bg);box-shadow:none}
.v-nein .grund .gm{box-shadow:none;padding:4px 2px;color:var(--yes)}
.v-nein .mg{margin:4px 0 0 10px;font-size:10.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.spiel .v-nein .karte em{animation:auf8 .3s .3s backwards}
.spiel .v-nein .karte{animation:raus .4s .7s backwards}
.spiel .v-nein .grund .pk{animation:pk8 .35s 1.1s backwards}
.spiel .v-nein .grund .gm{animation:auf8 .35s 1.6s backwards}
.spiel .v-nein .weg{animation:raus .45s 2.1s backwards}
.spiel .v-nein .weg b{animation:strich .4s 2.1s backwards}
.spiel .v-nein .ja{animation:hebt .5s 2.5s backwards}
.spiel .v-nein .ja em{animation:auf8 .35s 2.7s backwards}
@keyframes pk8{from{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}}

/* == V8: VERGLEICH == */
.vgl{margin-top:32px;max-width:860px}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp col{width:15%}.cmp col:first-child{width:40%}
.cmp thead th{font:620 14.5px/1.2 var(--fb);color:var(--ink2);padding:0 4px 14px;text-align:center}
.cmp thead th.me{color:var(--sigt);font:700 19px/1 var(--fd);font-variation-settings:"SOFT" 100;letter-spacing:-.02em}
.cmp tbody th{text-align:left;font-weight:520;font-size:16px;line-height:1.35;color:var(--ink);padding:14px 12px 14px 0}
.cmp tbody tr{border-top:1px solid var(--line)}
.cmp tbody tr:last-child{border-bottom:1px solid var(--line)}
.cmp td{text-align:center;padding:14px 4px}
.cmp .me{background:color-mix(in srgb,var(--sig) 7%,transparent)}
.cmp thead th.me{border-radius:14px 14px 0 0;padding-top:14px}
.cmp i{font-style:normal;font-weight:700;font-size:18px;line-height:1}
.cmp i.j{color:var(--yes)}.cmp i.t{color:var(--ink3)}.cmp i.n{color:var(--sigt)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.src{margin-top:16px;font-size:13px;line-height:1.5;color:var(--ink3);max-width:760px}
.src a{color:var(--ink3)}
@media (max-width:620px){
  .vgl{margin-top:32px}
  .cmp col{width:16%}.cmp col:first-child{width:36%}
  .cmp thead th{font-size:12px;letter-spacing:-.01em;padding:0 1px 12px}
  .cmp thead th.me{font-size:16px;padding-top:12px}
  .cmp tbody th{font-size:14px;line-height:1.3;padding:12px 8px 12px 0}
  .cmp td{padding:12px 2px}
  .cmp i{font-size:16px}
}

/* == V8: PROBLEM == */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:32px}
.stats div{border-top:1.5px solid var(--line);padding-top:20px;min-width:0}
.stats b{display:block;font:650 clamp(48px,5.4vw,72px)/1 var(--fd);font-variation-settings:"SOFT" 100;letter-spacing:-.04em;color:var(--sigl)}
.stats p{margin-top:12px;font-size:16px;line-height:1.5;color:var(--ink2);max-width:30ch}
#problem .src{margin-top:24px}
#problem .lead{margin-top:28px;font-size:clamp(19px,1.9vw,23px);color:var(--ink);max-width:640px}
#problem .lead b{font-weight:620}
@media (max-width:700px){
  section.s{padding-block:44px}
  .stats{grid-template-columns:minmax(0,1fr);gap:0;margin-top:28px}
  .stats div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 14px;align-items:center;padding:16px 0}
  .stats b{font-size:40px}
  .stats p{margin-top:0;font-size:15px;line-height:1.4}
}

/* == REST == */
.schritte{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.schritte li{min-width:0;border-top:1.5px solid var(--line);padding-top:22px}
.schritte .nr{font:600 15px/1 var(--fd);font-variation-settings:"SOFT" 100;color:var(--sigt);display:block}
.schritte h3{font-weight:650;font-size:24px;line-height:1.15;letter-spacing:-.015em;margin:14px 0 10px}
.schritte p{color:var(--ink2);font-size:16.5px;line-height:1.55;max-width:34ch}
.eigen{background:var(--card);border-block:1px solid var(--line)}
.warumg{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center}
.zahl b{display:block;font:650 clamp(88px,12vw,168px)/.9 var(--fd);font-variation-settings:"SOFT" 100;letter-spacing:-.05em;color:var(--sigl)}
.zahl p{margin-top:16px;font-size:17px;color:var(--ink2);max-width:30ch}
#warum{padding-block:clamp(48px,8vw,104px)}
.zahl .quelle{margin-top:12px;font-size:13px;color:var(--ink3)}
.zahl .quelle a{color:var(--ink3)}
.warumg .lead{max-width:540px}
.fragen-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.kontakt{margin-top:28px;display:flex;gap:14px;align-items:center}
.kontakt .av{width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font:650 18px/1 var(--fd);font-variation-settings:"SOFT" 100;flex:none}
.kontakt p{font-size:15px;color:var(--ink2);line-height:1.45}
.kontakt b{color:var(--ink);font-weight:620}
.kontakt .mail{user-select:all;-webkit-user-select:all;color:var(--ink);font-weight:560;border-bottom:1px solid var(--line)}
.fragen{border-top:1px solid var(--line)}
.fragen details{border-bottom:1px solid var(--line)}
.fragen summary{cursor:pointer;font:600 17.5px/1.4 var(--fb);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;min-height:44px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary .pl{flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);position:relative;transition:transform .25s}
.fragen summary .pl::before,.fragen summary .pl::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ink2);transform:translate(-50%,-50%)}
.fragen summary .pl::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s}
.fragen details[open] summary .pl::after{transform:translate(-50%,-50%) rotate(0deg)}
.fragen details p{color:var(--ink2);padding:0 44px 22px 0;max-width:640px}
.schluss{background:var(--n);color:var(--nhell);border-radius:32px;padding:clamp(48px,7vw,88px) clamp(24px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;align-items:center;position:relative;overflow:hidden}
.schluss h2{font-weight:650;font-size:clamp(32px,4.4vw,56px);line-height:1.04;letter-spacing:-.03em;max-width:15ch}
.schluss h2 em{color:var(--nsig);font-style:italic;font-weight:600}
.schluss p{margin-top:14px;color:var(--nmittel);font-size:17px;max-width:44ch}
.schluss .sm{margin-top:12px;color:var(--nleise);font-size:13.5px;text-align:center}
.schluss-w{padding-bottom:clamp(40px,5vw,72px)}

footer.fuss{border-top:1px solid var(--line)}
footer.fuss .w{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;padding-block:24px 32px;color:var(--ink3);font-size:14.5px}
footer.fuss .logo{font-size:24px}
footer.fuss nav{display:flex;gap:4px 18px;flex-wrap:wrap}
footer.fuss nav a{color:var(--ink2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
footer.fuss .re{margin-left:auto}
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.mcta.zeig{transform:none}
.mcta .btn{width:100%;min-height:50px}
.platz{height:0}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:14px;font-weight:560;font-size:14.5px;opacity:0;transition:.3s;pointer-events:none;z-index:90;width:max-content;max-width:min(92vw,520px);text-align:center}
.toast.zeig{opacity:1;transform:translateX(-50%)}
@media (max-width:900px){
  .warumg,.fragen-g{grid-template-columns:minmax(0,1fr)}
  .schluss{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
  .schluss p,.schluss h2{margin-inline:auto}
  .mcta{display:block}.platz{height:72px}
}
@media (max-width:700px){
  .schritte{grid-template-columns:minmax(0,1fr);gap:0;margin-top:36px}
  .schritte li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 8px;padding-block:20px 22px}
  .schritte .nr{grid-row:1/3;padding-top:5px;font-size:17px}
  .schritte h3{margin:0 0 6px;font-size:21px}
  #warum{padding-block:48px}
  .zahl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;align-items:center}
  .zahl b{font-size:64px;grid-row:1/3}
  .zahl p{margin-top:0;font-size:16px;line-height:1.4}
  .zahl .quelle{grid-column:1/-1;margin-top:12px;font-size:13px}
  .warumg{gap:24px}
  .warumg .lead{margin-top:12px}
  .kontakt{margin-top:28px}
  .schluss-w{padding-bottom:40px}
  footer.fuss .w{padding-block:20px 28px}
  footer.fuss .re{margin-left:0;width:100%}
  .fragen summary{font-size:16.5px}
  .fragen details p{padding-right:8px}
  .schluss{border-radius:26px}
  .schluss .btn{width:100%}
}

/* == WEBSITE: Ergänzungen zur V8 für Links und Unterseiten == */
a.anmelden{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.navr a[aria-current="page"]{color:var(--ink);background:var(--soft)}
.kontakt a.mail{color:var(--ink);font-weight:560;text-decoration:none;border-bottom:1px solid var(--line)}
.kontakt a.mail:hover{border-bottom-color:var(--ink3)}
footer.fuss nav a:hover,footer.fuss nav a[aria-current="page"]{color:var(--ink)}

/* Seitenkopf der Unterseiten */
.ph{padding-block:clamp(20px,4vw,48px) clamp(40px,5vw,64px)}
.krumen{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;color:var(--ink3);margin-bottom:22px}
.krumen a{color:var(--ink3);text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.krumen a:hover{color:var(--ink)}
.ph h1{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;font-weight:680;font-size:clamp(38px,5.2vw,68px);line-height:1.02;letter-spacing:-.036em;max-width:16ch}
.ph h1 em{font-style:italic;font-weight:600;color:var(--sigl)}
.ph .lead{margin-top:20px}
.mitte{text-align:center}
.mitte h1,.mitte .lead{margin-inline:auto}
.mitte .krumen{justify-content:center}

/* Fliesstext: Fakten, Über uns, Rechtliches */
.text{max-width:68ch;min-width:0}
.text h2{font-weight:650;font-size:clamp(23px,2.3vw,28px);line-height:1.2;letter-spacing:-.015em;margin:48px 0 12px}
.text h2:first-child{margin-top:0}
.text p,.text li{color:var(--ink2)}
.text p+p{margin-top:14px}
.text ul{padding-left:1.2em;margin:12px 0 0;display:grid;gap:6px}
.text a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;text-decoration-thickness:1px}
.text a:hover{text-decoration-color:var(--ink3)}
.text address{font-style:normal;color:var(--ink)}
.fakten{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);margin:0;border-top:1px solid var(--line)}
.fakten dt,.fakten dd{margin:0;padding:18px 0;border-bottom:1px solid var(--line)}
.fakten dt{font-weight:620;color:var(--ink);padding-right:24px}
.fakten dd{color:var(--ink2)}
.fakten dd ul{margin-top:6px}
.stand{margin-top:20px;font-size:14px;color:var(--ink3)}
.mehr{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;color:var(--ink);font-weight:600;text-decoration:none}
.mehr span{border-bottom:1.5px solid var(--sigl)}
.mehr:hover span{border-bottom-color:var(--ink)}
.wege{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ph .lead a,.fragen details p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;text-decoration-thickness:1px}
.ph .lead a:hover,.fragen details p a:hover{text-decoration-color:var(--ink3)}

/* Fragen: «Mehr Fragen anzeigen» auf der Startseite */
.fragen details.mehrfragen{border-bottom:0}
.fragen .mehrfragen>summary{display:inline-flex;justify-content:flex-start;padding:18px 0;min-height:44px;font:600 15.5px/1.3 var(--fb);color:var(--ink)}
.fragen .mehrfragen>summary span{border-bottom:1.5px solid var(--sigl)}
.fragen .mehrfragen>summary:hover span{border-bottom-color:var(--ink)}
.fragen .mehrfragen>summary .zu,.fragen .mehrfragen[open]>summary .auf{display:none}
.fragen .mehrfragen[open]>summary .zu{display:inline}
.fragen .weitere{border-top:1px solid var(--line)}
.fragen-g .kontakt{margin-top:8px}
.wege.mitte{justify-content:center}
@media (max-width:600px){
  .fakten{grid-template-columns:minmax(0,1fr)}
  .fakten dt{border-bottom:0;padding-bottom:4px}
  .fakten dd{padding-top:0}
}
.fragen .weitere details:not([open]) summary .pl::after{transform:translate(-50%,-50%) rotate(90deg)}
.plan h2{font-weight:650;font-size:22px;letter-spacing:-.01em}
.dnote{opacity:1}

/* == HINWEIS-MODUS (hinweis.py): Banner, Sprachschalter, Rechtstext-Kasten == */
.hinweis{background:#1C1A17;color:#F4EFE6;border-bottom:3px solid #E2553F}
.hinweis p{margin:0;padding:12px 0;font:500 16px/1.45 var(--fb);text-align:center;text-wrap:balance}
.hinweis b{font-weight:680;color:#fff}
@media (max-width:600px){.hinweis p{padding:12px 0 13px;font-size:16.5px}.hinweis b{display:block}}
.hinweis:target,.hinweis.blink{animation:hinweisblink 1.6s ease 1}
@keyframes hinweisblink{0%,100%{box-shadow:inset 0 0 0 0 #E2553F}25%,60%{box-shadow:inset 0 0 0 5px #E2553F}}
.spr{display:inline-flex;align-items:center;margin-left:6px;font:600 14.5px/1 var(--fb);color:var(--ink3)}
.spr i{font-style:normal;color:var(--ink3);opacity:.6}
.spr [aria-current]{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--ink);font-weight:700}
.navr .spr a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:40px;padding:0 8px;border-radius:99px;color:var(--ink2);font-weight:600;font-size:14.5px;text-decoration:none}
.navr .spr a:hover{color:var(--ink);background:var(--soft)}
.kurz{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin:0 0 28px;color:var(--ink2)}
.kurz strong{color:var(--ink)}