/* ==========================================================================
   blapier.de – Papier rein. Erledigt raus.
   Ruhig, warm, langsam. Alles ohne externe Schriften oder Dienste.
   ========================================================================== */
:root{
  --papier:#f6f1e7; --creme:#fbf8f2; --weiss:#ffffff; --tinte:#17161a; --grau:#6b6760; --grau-hell:#a39e95;
  --linie:rgba(23,22,26,.08); --linie-stark:rgba(23,22,26,.16);
  --gruen:#2e7d5b; --gruen-hell:#e3f1ea; --gruen-dunkel:#215c43;
  --rot:#b5453a; --rot-hell:#f7e5e2; --gelb:#b8801a; --gelb-hell:#faf0d8; --blau:#2f5f8f; --blau-hell:#e3ecf5;
  --radius:18px; --radius-klein:12px;
  --ease:cubic-bezier(.2,.8,.2,1); --ease-weich:cubic-bezier(.4,0,.2,1);
  --schatten:0 1px 2px rgba(23,22,26,.04),0 12px 40px -18px rgba(23,22,26,.22);
  --schatten-stark:0 2px 4px rgba(23,22,26,.05),0 30px 70px -30px rgba(23,22,26,.35);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:1}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,5vw,3.6rem)} h2{font-size:clamp(1.7rem,3.4vw,2.5rem)} h3{font-size:1.25rem;font-family:var(--sans);font-weight:600;letter-spacing:0}
p{margin:0 0 1em} a{color:inherit} .leise{color:var(--grau)} .gross{font-size:1.15rem} .mitte{text-align:center} .etikett{font-size:.8rem;color:var(--grau);display:block;margin-bottom:.1em}
em{font-style:italic;color:var(--gruen-dunkel)}
code{font-family:var(--mono);font-size:.9em;background:rgba(23,22,26,.06);padding:.1em .35em;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--tinte);color:#fff;padding:8px 12px;border-radius:8px;z-index:100}.skip:focus{left:8px}
.inline{display:inline}

/* ---------- Knöpfe, Chips, Pillen, Stempel ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.7em 1.25em;border-radius:999px;border:1px solid transparent;font:inherit;font-weight:600;font-size:.95rem;text-decoration:none;cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s,color .4s,opacity .3s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98);transition-duration:.15s}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-voll{background:var(--tinte);color:#fff;box-shadow:0 10px 30px -14px rgba(23,22,26,.6)}.btn-voll:hover{background:#000;box-shadow:0 18px 40px -16px rgba(23,22,26,.65)}
.btn-leise{background:rgba(255,255,255,.6);border-color:var(--linie-stark);color:var(--tinte)}.btn-leise:hover{background:#fff}
.btn-rot{background:var(--rot);color:#fff}.btn-rot:hover{background:#9b3a30}
.btn-gross{padding:.95em 1.6em;font-size:1.05rem}.btn-klein{padding:.4em .9em;font-size:.85rem}.btn-breit{width:100%}
.link{background:none;border:0;padding:0;font:inherit;color:var(--grau);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.link:hover{color:var(--tinte)}.link-rot{color:var(--rot)}
.chip{display:inline-flex;align-items:center;gap:.35em;padding:.25em .7em;border-radius:999px;font-size:.8rem;font-weight:600;background:rgba(23,22,26,.06);color:var(--tinte);white-space:nowrap}
.chip-gruen,.chip-ok{background:var(--gruen-hell);color:var(--gruen-dunkel)} .chip-bald{background:var(--gelb-hell);color:var(--gelb)} .chip-dringend,.chip-ueber{background:var(--rot-hell);color:var(--rot)} .chip-gelb{background:var(--gelb-hell);color:var(--gelb)}
.chip-risiko-niedrig{background:var(--gruen-hell);color:var(--gruen-dunkel)}.chip-risiko-mittel{background:var(--gelb-hell);color:var(--gelb)}.chip-risiko-hoch{background:var(--rot-hell);color:var(--rot)}
.chips{display:flex;flex-wrap:wrap;gap:.5em}
.pille{display:inline-block;padding:.2em .65em;border-radius:8px;font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:rgba(23,22,26,.06);color:var(--grau)}
.pille-analyse,.pille-neu,.pille-entwurf_laeuft{background:var(--blau-hell);color:var(--blau);animation:atmen 2.4s var(--ease-weich) infinite}
.pille-verstanden{background:var(--blau-hell);color:var(--blau)} .pille-entwurf,.pille-zahlung{background:var(--gelb-hell);color:var(--gelb)} .pille-freigegeben,.pille-erledigt{background:var(--gruen-hell);color:var(--gruen-dunkel)} .pille-fehler{background:var(--rot-hell);color:var(--rot)}
@keyframes atmen{0%,100%{opacity:1}50%{opacity:.55}}
.stempel{display:inline-block;padding:.2em .6em;border:3px solid currentColor;border-radius:8px;font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-8deg);opacity:.9;line-height:1.1;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.35'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23r)'/%3E%3C/svg%3E");-webkit-mask-size:cover;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.35'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23r)'/%3E%3C/svg%3E");mask-size:cover}
.stempel-gruen{color:var(--gruen)} .stempel-rot{color:var(--rot)} .stempel-grau{color:var(--grau-hell)} .stempel.gross{font-size:2rem}
.hinweis{padding:.85em 1.1em;border-radius:var(--radius-klein);background:var(--blau-hell);color:var(--tinte);margin:0 0 1.2em;font-size:.95rem;display:flex;flex-wrap:wrap;gap:.6em;align-items:center}
.hinweis-gruen{background:var(--gruen-hell)} .hinweis-rot{background:var(--rot-hell)} .hinweis-gelb{background:var(--gelb-hell)}
.karte{background:rgba(255,255,255,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--schatten);transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.karte-rot{border-color:var(--rot-hell)}
.haken{list-style:none;padding:0;margin:0 0 1.2em}.haken li{position:relative;padding-left:1.7em;margin:.5em 0}.haken li::before{content:"";position:absolute;left:0;top:.45em;width:1.05em;height:1.05em;border-radius:50%;background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.haken.klein li{font-size:.92rem;margin:.4em 0}

/* ---------- Kopf / Navigation ---------- */
.kopf{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(246,241,231,.72);border-bottom:1px solid var(--linie)}
.navi{max-width:1180px;margin:0 auto;padding:.7rem 1.25rem;display:flex;align-items:center;gap:1.5rem}
.logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--serif);font-size:1.45rem;letter-spacing:-.02em;font-weight:600}
.logo svg{transition:transform .8s var(--ease)}.logo:hover svg{transform:rotate(-8deg) translateY(-1px)}
.logo.klein{font-size:1.2rem}
.navi-links{display:flex;gap:1.3rem;margin-left:.5rem}.navi-links a{text-decoration:none;color:var(--grau);font-size:.95rem;font-weight:500;padding:.3em 0;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}.navi-links a:hover,.navi-links a.aktiv{color:var(--tinte);border-color:var(--tinte)}
.navi-rechts{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.ton{display:inline-flex;align-items:center;gap:.4em;background:none;border:1px solid var(--linie-stark);border-radius:999px;padding:.35em .8em;font:inherit;font-size:.8rem;color:var(--grau);cursor:pointer;transition:all .4s}
.ton:hover{color:var(--tinte);background:rgba(255,255,255,.6)}
.ton-icon{width:14px;height:14px;border-radius:50%;background:var(--grau-hell);position:relative;transition:background .4s}
.ton[aria-pressed="true"]{color:var(--gruen-dunkel);border-color:var(--gruen)}.ton[aria-pressed="true"] .ton-icon{background:var(--gruen);box-shadow:0 0 0 4px var(--gruen-hell);animation:atmen 2s infinite}

/* ---------- Fuß ---------- */
.fuss{position:relative;z-index:1;margin-top:4rem;border-top:1px solid var(--linie);background:rgba(255,255,255,.35)}
.fuss-innen{max-width:1180px;margin:0 auto;padding:3rem 1.25rem 2rem;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem;font-size:.92rem;color:var(--grau)}
.fuss-spalte{display:flex;flex-direction:column;gap:.35em}.fuss-spalte strong{color:var(--tinte);margin-bottom:.3em}.fuss-spalte a{color:var(--grau);text-decoration:none}.fuss-spalte a:hover{color:var(--tinte)}
.fuss-ki a{color:var(--gruen-dunkel);font-weight:600}
.fuss-zeile{max-width:1180px;margin:0 auto;padding:0 1.25rem 2rem;font-size:.8rem;color:var(--grau-hell)}

/* ---------- Abschnitte / Enthüllen ---------- */
.abschnitt{padding:5.5rem 1.25rem}.abschnitt-innen{max-width:1180px;margin:0 auto}.abschnitt-innen.schmal,.abschnitt.schmal{max-width:760px;margin-left:auto;margin-right:auto}
.abschnitt-kopf{max-width:720px;margin:0 auto 2.6rem;text-align:center}.abschnitt-kopf p{color:var(--grau);font-size:1.1rem}
.augenbraue{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-dunkel);margin-bottom:1em}
.augenbraue .punkt{width:8px;height:8px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 4px var(--gruen-hell);animation:atmen 2.5s infinite}
.js .enthuellen{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .enthuellen.sichtbar,.ohne-anim .enthuellen{opacity:1;transform:none}
.text h1{margin-bottom:.4em}.text h2{font-size:1.35rem;margin-top:1.8em}.text p{color:#2e2d31}

/* ---------- Papier-Bausteine ---------- */
.brief{position:relative;width:150px;aspect-ratio:1/1.35;background:#fff;border-radius:6px;padding:16px 14px;box-shadow:0 1px 1px rgba(0,0,0,.04),0 18px 36px -18px rgba(23,22,26,.4);display:flex;flex-direction:column;gap:9px}
.brief.gross{width:230px;padding:24px 22px;gap:12px}
.brief-kopf{display:flex;justify-content:space-between;margin-bottom:6px}.brief-kopf span{height:7px;width:40%;border-radius:4px;background:rgba(23,22,26,.5)}.brief-kopf span.kurz{width:18%;background:rgba(23,22,26,.2)}
.brief-zeile{height:6px;border-radius:4px;background:rgba(23,22,26,.12)}.brief-zeile.kurz{width:62%}
.brief .stempel{position:absolute;right:10px;bottom:16px;font-size:.95rem;padding:.15em .4em;border-width:2.5px}
.brief .bla{position:absolute;left:14px;bottom:16px;font-family:var(--serif);font-style:italic;color:var(--grau-hell);font-size:.8rem;letter-spacing:.04em}
.scanlinie{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--gruen),transparent);box-shadow:0 0 18px 4px rgba(46,125,91,.35);animation:scannen 2.8s var(--ease-weich) infinite;pointer-events:none}
@keyframes scannen{0%{top:4%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:96%;opacity:0}}
.skelett{display:flex;flex-direction:column;gap:10px;margin:1em 0}.skelett span{height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(23,22,26,.06),rgba(23,22,26,.12),rgba(23,22,26,.06));background-size:200% 100%;animation:schimmern 1.8s linear infinite}.skelett span.kurz{width:55%}
@keyframes schimmern{0%{background-position:200% 0}100%{background-position:-200% 0}}
.puls{font-size:.85rem;color:var(--blau);margin-left:auto;animation:atmen 1.8s infinite}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:calc(100vh - 70px);display:flex;align-items:center;padding:4rem 1.25rem 5rem;overflow:hidden}
.hero-hintergrund{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:blobben 22s var(--ease-weich) infinite alternate}
.blob-1{width:520px;height:520px;left:-120px;top:-120px;background:#e9f3ec}.blob-2{width:460px;height:460px;right:-80px;top:10%;background:#f1e7d2;animation-delay:-7s}.blob-3{width:400px;height:400px;left:40%;bottom:-180px;background:#e4ecf5;animation-delay:-14s}
@keyframes blobben{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}100%{transform:translate(-30px,30px) scale(.95)}}
.treibend{position:absolute;inset:0;transition:transform 1.2s var(--ease-weich)}
.blatt{position:absolute;width:70px;height:92px;background:#fff;border-radius:4px;box-shadow:0 12px 30px -14px rgba(23,22,26,.35);opacity:.6;animation:schweben 12s var(--ease-weich) infinite alternate}
.blatt::before,.blatt::after{content:"";position:absolute;left:12px;right:14px;height:4px;border-radius:2px;background:rgba(23,22,26,.1)}.blatt::before{top:18px}.blatt::after{top:30px;right:30px}
.b1{left:6%;top:18%;transform:rotate(-8deg);animation-duration:14s}.b2{left:14%;top:68%;transform:rotate(6deg);animation-duration:11s;animation-delay:-4s;width:54px;height:70px}.b3{right:10%;top:12%;transform:rotate(10deg);animation-duration:13s;animation-delay:-2s}.b4{right:4%;bottom:14%;transform:rotate(-14deg);animation-duration:16s;animation-delay:-8s;width:58px;height:76px}.b5{left:46%;top:8%;transform:rotate(3deg);animation-duration:10s;animation-delay:-6s;width:44px;height:58px;opacity:.4}
@keyframes schweben{0%{margin-top:0}100%{margin-top:-22px}}
.hero-innen{position:relative;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;width:100%}
.hero h1{font-size:clamp(2.8rem,6.5vw,5.2rem);margin-bottom:.35em}
.hero-sub{font-size:1.2rem;color:#3a393e;max-width:34rem;margin-bottom:1.6em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.8rem}
.hero-fakten{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4em 1.6em;color:var(--grau);font-size:.92rem}.hero-fakten li::before{content:"·";margin-right:.5em;color:var(--gruen)}
.hero-szene{position:relative;height:460px;display:flex;align-items:center;justify-content:center}
.maschine{position:relative;width:260px;height:460px}
.m-oben{position:absolute;left:0;right:0;top:0;height:227px;overflow:hidden}
.m-unten{position:absolute;left:0;right:0;top:227px;bottom:0;overflow:hidden}
.maschine .brief{position:absolute;left:55px;top:0}
.schlitz{position:absolute;left:0;right:0;top:200px;height:54px;z-index:2;background:linear-gradient(180deg,#2a2930,#17161a);border-radius:14px;box-shadow:0 20px 50px -20px rgba(23,22,26,.7),inset 0 1px 0 rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.schlitz::before{content:"";position:absolute;left:18px;right:18px;top:-6px;height:6px;background:#0d0d10;border-radius:4px 4px 0 0}
.schlitz::after{content:"";position:absolute;left:18px;right:18px;bottom:-6px;height:6px;background:#0d0d10;border-radius:0 0 4px 4px}
.schlitz span{font-family:var(--serif);color:#f6f1e7;font-size:1.05rem;letter-spacing:.05em}
.brief-ein{animation:einwerfen 9s var(--ease-weich) infinite}
.brief-aus{animation:auswerfen 9s var(--ease-weich) infinite}
.brief-aus .stempel{opacity:0;animation:stempeln 9s var(--ease) infinite}
@keyframes einwerfen{0%{transform:translateY(-16px) rotate(-4deg);opacity:0}9%{transform:translateY(0) rotate(0);opacity:1}30%{transform:translateY(0);opacity:1}50%{transform:translateY(232px);opacity:1}51%,100%{transform:translateY(232px);opacity:0}}
@keyframes auswerfen{0%,50%{transform:translateY(-206px);opacity:1}72%{transform:translateY(30px);opacity:1}92%{transform:translateY(30px);opacity:1}100%{transform:translateY(40px);opacity:0}}
@keyframes stempeln{0%,74%{opacity:0;transform:rotate(-8deg) scale(1.8)}79%{opacity:.95;transform:rotate(-8deg) scale(1)}92%{opacity:.95;transform:rotate(-8deg) scale(1)}100%{opacity:0;transform:rotate(-8deg) scale(1)}}
.szene-karte{position:absolute;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-radius:14px;padding:.7rem .9rem;box-shadow:var(--schatten);font-size:.85rem;display:flex;flex-direction:column;gap:.2em;animation:schweben 9s var(--ease-weich) infinite alternate}
.karte-frist{right:0;top:70px;animation-delay:-3s}.karte-summe{left:-10px;bottom:50px;animation-delay:-6s}.karte-summe strong{font-size:1.2rem}.karte-summe span{color:var(--grau);font-size:.8rem}

/* ---------- Demo ---------- */
.demo{background:linear-gradient(180deg,transparent,rgba(255,255,255,.5) 30%,rgba(255,255,255,.5) 70%,transparent)}
.demo-tabs{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
.tab{background:rgba(255,255,255,.5);border:1px solid var(--linie-stark);border-radius:999px;padding:.55em 1.2em;font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:all .5s var(--ease)}.tab:hover{background:#fff;transform:translateY(-1px)}.tab.aktiv{background:var(--tinte);color:#fff;border-color:var(--tinte)}
.demo-buehne{display:grid;grid-template-columns:300px 1fr;gap:2.5rem;align-items:start;max-width:980px;margin:0 auto}
.demo-brief{display:flex;justify-content:center;padding-top:1rem;position:sticky;top:110px}.demo-brief .brief{transform:rotate(-3deg);transition:transform 1s var(--ease)}.demo-brief .brief.wechsel{transform:rotate(-3deg) translateY(10px) scale(.98)}
.demo-karte{padding:2rem;transition:opacity .5s,transform .8s var(--ease)}.demo-karte.wechsel{opacity:.3;transform:translateY(6px)}
.demo-kopf{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:1rem}.demo-kopf strong{display:block}
.demo-karte h3{margin:1.4em 0 .4em;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.demo-text{font-size:1.15rem;line-height:1.5;min-height:4.5em}.demo-text .cursor{display:inline-block;width:2px;height:1em;background:var(--gruen);vertical-align:-.15em;margin-left:2px;animation:atmen .9s steps(2) infinite}
.demo-nichts{background:var(--rot-hell);border-radius:var(--radius-klein);padding:.8em 1em;color:#5d2a24}
.optionen{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6em;counter-reset:o}
.optionen li{position:relative;padding:.85em 1em .85em 3em;border:1px solid var(--linie);border-radius:var(--radius-klein);background:#fff;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s}
.optionen li.sichtbar{opacity:1;transform:none}.optionen li::before{counter-increment:o;content:counter(o);position:absolute;left:1em;top:.85em;width:1.5em;height:1.5em;border-radius:50%;background:rgba(23,22,26,.06);font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.optionen li.empfohlen{border-color:var(--gruen);box-shadow:0 0 0 4px var(--gruen-hell)}.optionen li.empfohlen::before{background:var(--gruen);color:#fff}
.optionen strong{display:block}.optionen span{color:var(--grau);font-size:.92rem}
.demo-hinweis{margin:1.5em 0 0;font-size:.9rem;color:var(--grau)}

/* ---------- Schritte / Kacheln ---------- */
.schritte{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;counter-reset:s}
.schritte .karte{position:relative;padding-top:2.2rem}.schritte .karte:hover{transform:translateY(-6px);box-shadow:var(--schatten-stark)}
.nummer{position:absolute;top:-16px;left:1.4rem;width:36px;height:36px;border-radius:50%;background:var(--tinte);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 8px 20px -8px rgba(23,22,26,.6)}
.schritte li:nth-child(3) .nummer{background:var(--gruen)}
.schritte p{color:var(--grau);font-size:.95rem;margin:0}
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.kachel{padding:1.5rem}.kachel:hover{transform:translateY(-6px);box-shadow:var(--schatten-stark)}.kachel p{color:var(--grau);font-size:.95rem;margin:0}
.kachel-icon{width:44px;height:44px;border-radius:12px;background:var(--gruen-hell);color:var(--gruen-dunkel);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem}
.bald{margin:2rem auto 0;max-width:760px;text-align:center;color:var(--grau);font-size:.95rem;padding:1rem 1.4rem;border:1px dashed var(--linie-stark);border-radius:var(--radius)}

/* ---------- Datenschutz ---------- */
.zweispaltig{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.ds-grafik{position:relative;padding:2rem}
.ds-pfad{display:flex;flex-direction:column;gap:0;align-items:center}
.ds-knoten{width:100%;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);border-radius:var(--radius);padding:1.1rem 1.4rem;box-shadow:var(--schatten);display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:1rem;align-items:center}
.ds-knoten .ds-icon{grid-row:span 2;font-size:1.6rem}.ds-knoten strong{display:block}.ds-knoten small{color:var(--grau)}
.ds-clearing{border-color:var(--gruen);box-shadow:0 0 0 5px var(--gruen-hell),var(--schatten)}.ds-clearing small{font-family:var(--mono);color:var(--gruen-dunkel)}
.ds-pfeil{height:44px;width:2px;background:var(--linie-stark);position:relative;overflow:hidden}.ds-pfeil span{position:absolute;left:-2px;width:6px;height:14px;border-radius:3px;background:var(--gruen);animation:fliessen 2.2s var(--ease-weich) infinite}
@keyframes fliessen{0%{top:-14px;opacity:0}30%{opacity:1}100%{top:44px;opacity:0}}
.ds-siegel{position:absolute;right:-10px;top:-10px;width:120px;height:120px;border-radius:50%;background:var(--gruen);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:var(--serif);font-size:1rem;line-height:1.15;box-shadow:0 20px 40px -18px rgba(46,125,91,.8);transform:rotate(8deg);animation:schweben 8s var(--ease-weich) infinite alternate}.ds-siegel small{font-family:var(--sans);font-size:.65rem;opacity:.85;margin-top:.3em}

/* ---------- Preise ---------- */
.beta-band{display:inline-block;background:var(--gruen-hell);color:var(--gruen-dunkel);padding:.5em 1em;border-radius:999px;font-weight:600;font-size:.95rem}
.preis-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.preis{display:flex;flex-direction:column;position:relative;padding:2rem}.preis.hervor{border:2px solid var(--tinte);transform:translateY(-8px)}.preis.hervor.sichtbar{transform:translateY(-8px)}.preis:hover{box-shadow:var(--schatten-stark)}
.preis-band{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--tinte);color:#fff;padding:.3em .9em;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.05em}
.preis h3{font-family:var(--serif);font-size:1.5rem;font-weight:500}.preis-zahl{font-size:2.6rem;font-family:var(--serif);margin:0;line-height:1}.preis-takt{color:var(--grau);font-size:.9rem;margin:.3em 0 1em}.preis-claim{font-weight:600;margin-bottom:1em}
.preis .haken{flex:1}.preis-fuss{text-align:center;color:var(--grau);font-size:.9rem;margin-top:2rem}
.preis-tabelle{margin-top:4rem}.preis-tabelle table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.6);border-radius:var(--radius);overflow:hidden}.preis-tabelle th,.preis-tabelle td{padding:.8em 1em;text-align:center;border-bottom:1px solid var(--linie)}.preis-tabelle td:first-child,.preis-tabelle th:first-child{text-align:left}.preis-tabelle th{background:rgba(23,22,26,.04);font-weight:600}
.preise.seite{padding-top:3rem}

/* ---------- FAQ / Schluss ---------- */
.faq details{background:rgba(255,255,255,.6);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:0 1.2rem;margin-bottom:.7rem;transition:background .4s}.faq details[open]{background:#fff}
.faq summary{cursor:pointer;padding:1rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}.faq summary::after{content:"+";font-size:1.4rem;color:var(--grau);transition:transform .5s var(--ease)}.faq details[open] summary::after{transform:rotate(45deg)}.faq summary::-webkit-details-marker{display:none}
.faq details p{color:var(--grau);padding-bottom:1rem;margin:0}
.schluss{text-align:center;padding-top:2rem}

/* ---------- Auth ---------- */
.auth{display:flex;justify-content:center;padding-top:4rem}.auth-karte{width:100%;max-width:460px;padding:2.4rem}.auth-karte h1{font-size:2rem}
.formular{display:flex;flex-direction:column;gap:1rem}.formular label,.feld{display:flex;flex-direction:column;gap:.35em;font-size:.9rem;font-weight:600;color:var(--tinte)}.formular label small,.feld small{font-weight:400;color:var(--grau)}
input[type=text],input[type=email],input[type=password],input[type=file],textarea{font:inherit;font-size:1rem;padding:.7em .9em;border:1px solid var(--linie-stark);border-radius:var(--radius-klein);background:#fff;color:var(--tinte);transition:border-color .3s,box-shadow .3s;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 4px var(--gruen-hell)}
textarea{resize:vertical;line-height:1.5}.brieftext{font-family:var(--serif);font-size:1.05rem;min-height:16em}
.kontrolle{flex-direction:row !important;align-items:flex-start;gap:.6em !important;font-weight:400 !important}.kontrolle input{margin-top:.3em;accent-color:var(--gruen)}
.zweier{display:grid;grid-template-columns:1fr 2fr;gap:1rem}
.knopfzeile{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.5rem}

/* ---------- App ---------- */
body.app{background:var(--papier)}
.app-innen{max-width:1080px;margin:0 auto;padding:2rem 1.25rem 4rem}
.app-kopf{display:flex;justify-content:space-between;align-items:flex-end;margin:.5rem 0 1.5rem}.app-kopf h1{font-size:2.2rem;margin-bottom:.1em}
.brotkrumen{font-size:.9rem;margin-bottom:1rem}.brotkrumen a{color:var(--grau);text-decoration:none}.brotkrumen a:hover{color:var(--tinte)}
.ablage{display:block;margin-bottom:2rem;border:2px dashed var(--linie-stark);border-radius:var(--radius);background:rgba(255,255,255,.5);transition:all .5s var(--ease);cursor:pointer}
.ablage:hover,.ablage.drueber{border-color:var(--gruen);background:#fff;box-shadow:0 0 0 6px var(--gruen-hell)}.ablage.laedt{opacity:.7;pointer-events:none}
.ablage-innen{display:flex;align-items:center;gap:1.5rem;padding:1.4rem 1.8rem}
.ablage-blatt .brief{width:64px;padding:8px 7px;gap:4px;transform:rotate(-6deg);transition:transform .8s var(--ease)}.ablage-blatt .brief .brief-kopf span{height:4px}.ablage-blatt .brief .brief-zeile{height:3px}.ablage:hover .ablage-blatt .brief,.ablage.drueber .ablage-blatt .brief{transform:rotate(0) translateY(-4px)}
.ablage-text{display:flex;flex-direction:column;gap:.2em}.ablage-text strong{font-size:1.15rem}.ablage-text span{color:var(--grau);font-size:.92rem}.ablage-status{color:var(--gruen-dunkel) !important;font-weight:600}
.fristen{margin-bottom:2rem}.fristen h2{font-size:1.1rem;font-family:var(--sans);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grau);margin-bottom:.8rem}
.fristen-zeile{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem}
.frist-karte{display:flex;flex-direction:column;gap:.15em;padding:1rem 1.1rem;border-radius:var(--radius-klein);background:#fff;text-decoration:none;border-left:5px solid var(--grau-hell);box-shadow:var(--schatten);transition:transform .5s var(--ease)}.frist-karte:hover{transform:translateY(-3px)}
.frist-karte.stufe-ok{border-color:var(--gruen)}.frist-karte.stufe-bald{border-color:var(--gelb)}.frist-karte.stufe-dringend,.frist-karte.stufe-ueber{border-color:var(--rot)}
.frist-wann{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}.stufe-dringend .frist-wann,.stufe-ueber .frist-wann{color:var(--rot)}.stufe-bald .frist-wann{color:var(--gelb)}
.liste{display:flex;flex-direction:column;gap:.6rem}
.zeile{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;padding:1rem 1.3rem;background:#fff;border-radius:var(--radius-klein);text-decoration:none;box-shadow:var(--schatten);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}.zeile:hover{transform:translateX(4px);box-shadow:var(--schatten-stark)}
.zeile-haupt{display:flex;flex-direction:column;min-width:0}.zeile-haupt strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zeile-haupt .leise{font-size:.88rem}
.zeile-rechts{display:flex;align-items:center;gap:.8rem;font-size:.85rem}.betrag{font-weight:700}
.zeile.status-erledigt,.zeile.status-abgelegt{opacity:.6}
.leer{text-align:center;padding:3rem 1rem;color:var(--grau)}.leer .stempel{margin-bottom:1rem}

/* ---------- Vorgang ---------- */
.vorgang-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.5rem}.vorgang-kopf h1{font-size:1.9rem;margin:.3em 0 .2em}
.vorgang-raster{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:start}
.dokument{position:sticky;top:90px}
.dokument-rahmen{position:relative;background:#fff;border-radius:var(--radius-klein);overflow:hidden;box-shadow:var(--schatten);aspect-ratio:1/1.3;display:flex;align-items:center;justify-content:center}.dokument-rahmen img{width:100%;height:100%;object-fit:cover;object-position:top}
.dokument-rahmen.scannt img,.dokument-rahmen.scannt .brief{filter:saturate(.8)}
.dokument-aktionen{font-size:.88rem;margin:.8em 0 .4em}
.volltext{font-family:var(--mono);font-size:.75rem;background:#fff;border-radius:var(--radius-klein);padding:1em;max-height:320px;overflow:auto;white-space:pre-wrap;color:var(--grau)}
.schritte-spalte{display:flex;flex-direction:column;gap:1.2rem}
.schritt{position:relative;padding:1.6rem 1.8rem 1.8rem}.schritt header{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}.schritt header h2{font-size:1.35rem;margin:0}
.schritt .nummer{position:static;width:32px;height:32px;font-size:.9rem;background:var(--grau-hell);box-shadow:none}.schritt.aktiv .nummer{background:var(--tinte)}.schritt.fertig .nummer{background:var(--gruen)}.schritt.laeuft .nummer{background:var(--blau);animation:atmen 2s infinite}
.schritt.aktiv{border-color:rgba(23,22,26,.25);box-shadow:var(--schatten-stark)}
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem 1.5rem;margin:1.2em 0}.fakten div{display:flex;flex-direction:column}.fakten dt{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);font-weight:700}.fakten dd{margin:0;font-weight:500;word-break:break-word}
.nichts{background:var(--rot-hell);color:#5d2a24;border-radius:var(--radius-klein);padding:.9em 1.1em;margin-top:1em}
.einfach{margin:.5em 0 1em}.einfach summary{cursor:pointer;color:var(--grau);font-size:.9rem}.einfach p{margin:.6em 0 0;color:#3a393e}
.optionen-raster{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.option{display:flex;gap:.9rem;padding:1rem 1.1rem;border:1px solid var(--linie);border-radius:var(--radius-klein);background:#fff;cursor:pointer;transition:border-color .3s,box-shadow .4s,transform .5s var(--ease)}.option:hover{transform:translateX(3px)}
.option input{accent-color:var(--gruen);margin-top:.3em}.option:has(input:checked){border-color:var(--tinte);box-shadow:0 0 0 4px rgba(23,22,26,.06)}.option.empfohlen:has(input:checked){border-color:var(--gruen);box-shadow:0 0 0 4px var(--gruen-hell)}
.option-innen{display:flex;flex-direction:column;gap:.15em}.option-titel{font-weight:600;display:flex;gap:.6em;align-items:center;flex-wrap:wrap}
.optionen-form .feld{margin-bottom:1rem}
.entwurf-form{display:flex;flex-direction:column;gap:1rem}.briefkopf-vorschau{font-size:.85rem}
.versand{border:1px solid var(--linie);border-radius:var(--radius-klein);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem}.versand legend{font-weight:600;padding:0 .4em}
.freigabe{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}.freigabe .stempel{margin-bottom:.3rem}
.brieftext-lesen{white-space:pre-wrap;font-family:var(--serif);font-size:1rem;background:#fff;padding:1em;border-radius:var(--radius-klein)}
.zahlung{display:grid;grid-template-columns:200px 1fr;gap:1.5rem;align-items:start;margin-bottom:1rem}.qr{background:#fff;padding:10px;border-radius:var(--radius-klein);box-shadow:var(--schatten)}.qr svg{width:100%;height:auto;display:block}
.verlauf h2{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);font-family:var(--sans);font-weight:700}.verlauf ul{list-style:none;padding:0;margin:0;border-left:2px solid var(--linie-stark);margin-left:.4rem}
.verlauf li{position:relative;padding:.3em 0 .3em 1.4rem;font-size:.9rem;display:flex;gap:1rem;flex-wrap:wrap}.verlauf li::before{content:"";position:absolute;left:-6px;top:.75em;width:10px;height:10px;border-radius:50%;background:var(--grau-hell);border:2px solid var(--papier)}
.verlauf li.art-verstanden::before,.verlauf li.art-freigegeben::before,.verlauf li.art-erledigt::before{background:var(--gruen)}.verlauf li.art-fehler::before{background:var(--rot)}.verlauf time{color:var(--grau);font-variant-numeric:tabular-nums;min-width:9.5em}

/* ---------- Einstellungen ---------- */
.einstellungen-raster{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}.einstellungen-raster .karte h2{font-size:1.3rem}
.signatur-vorschau{background:#fff;border-radius:var(--radius-klein);padding:.8rem;margin-bottom:1rem;display:flex;justify-content:center}.signatur-vorschau img{max-height:90px;max-width:100%}

/* ---------- Responsiv ---------- */
@media (max-width:1000px){
  .hero-innen,.zweispaltig{grid-template-columns:1fr}.hero{min-height:auto;padding-top:3rem}.hero-szene{height:420px;order:2}
  .schritte{grid-template-columns:repeat(2,1fr)}.raster{grid-template-columns:repeat(2,1fr)}.preis-raster{grid-template-columns:1fr;max-width:460px;margin:0 auto}.preis.hervor,.preis.hervor.sichtbar{transform:none}
  .demo-buehne{grid-template-columns:1fr}.demo-brief{display:none}
  .vorgang-raster{grid-template-columns:1fr}.dokument{position:static;max-width:320px}
  .einstellungen-raster{grid-template-columns:1fr}.fuss-innen{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16px}.navi{gap:.8rem;padding:.6rem 1rem}.navi-links{display:none}.ton-text{display:none}.btn-leise.btn{padding:.6em 1em}
  .abschnitt{padding:3.5rem 1rem}.schritte,.raster{grid-template-columns:1fr}.hero h1{font-size:2.7rem}.hero-szene{height:380px;transform:scale(.85)}
  .zeile{grid-template-columns:1fr;gap:.4rem}.zeile-rechts{flex-wrap:wrap}.zahlung{grid-template-columns:1fr}.qr{max-width:220px}.fuss-innen{grid-template-columns:1fr}.zweier{grid-template-columns:1fr}
  .ablage-innen{flex-direction:column;align-items:flex-start;gap:.8rem}.szene-karte{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;scroll-behavior:auto !important}
  .js .enthuellen{opacity:1;transform:none}.brief-ein{opacity:1;transform:none}.brief-aus{opacity:1;transform:translateY(30px)}.brief-aus .stempel{opacity:.95}
}

/* ==========================================================================
   Stufe 2: Hero-Upload, Probe-Seite, Aufgabenplan, Kontingent, API, Upgrade
   ========================================================================== */
.hero-ablage{margin:1.2rem 0 1rem;background:rgba(255,255,255,.78);border-style:solid;border-color:rgba(23,22,26,.18);box-shadow:var(--schatten-stark)}
.hero-ablage .ablage-innen{padding:1.2rem 1.4rem;gap:1.2rem}
.hero-ablage .ablage-text strong{font-size:1.2rem}
.hero-ablage #hero-senden{margin-left:auto}
.hero-ablage.hat-datei{border-color:var(--gruen);box-shadow:0 0 0 6px var(--gruen-hell),var(--schatten-stark)}
.mensch-hinweis{display:flex;gap:.6em;align-items:flex-start;background:rgba(255,255,255,.55);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:.7em .9em;font-size:.9rem;color:#3a393e;margin:1rem 0 0}
.mensch-icon{font-size:1.1rem;line-height:1.3}
.klein-text{font-size:.85rem}
.schritte .karte.mensch{border:1px solid var(--gruen);box-shadow:0 0 0 4px var(--gruen-hell),var(--schatten)}.schritte li.mensch .nummer{background:var(--gruen)}
.unter{margin-top:1.4em !important}
.optionen.gezeigt li{opacity:1;transform:none}
.aufgaben{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:.6rem}
.aufgaben-spalte{border-radius:var(--radius-klein);padding:1rem 1.1rem}.aufgaben-spalte h3{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .6em}
.aufgaben-spalte.auto{background:var(--gruen-hell)}.aufgaben-spalte.auto h3{color:var(--gruen-dunkel)}
.aufgaben-spalte.selbst{background:var(--gelb-hell)}.aufgaben-spalte.selbst h3{color:var(--gelb)}
.aufgaben .haken{margin:0}.aufgaben .haken li{margin:.35em 0;font-size:.95rem}
.kaestchen{list-style:none;padding:0;margin:0}.kaestchen li{position:relative;padding-left:1.7em;margin:.35em 0;font-size:.95rem}.kaestchen li::before{content:"";position:absolute;left:0;top:.35em;width:1em;height:1em;border:2px solid var(--gelb);border-radius:4px;background:#fff}
.kaestchen.klein li,.aufgaben.kompakt .haken li{font-size:.88rem}
.aufgaben.kompakt{margin:.8rem 0}
.cta-karte{border:2px solid var(--tinte);box-shadow:var(--schatten-stark)}
.pruef-haken{background:var(--gelb-hell);border-radius:var(--radius-klein);padding:.8em 1em;font-size:.95rem}
.kontingent-chip{display:inline-flex;align-items:center;gap:.4em;padding:.5em 1em;border-radius:999px;background:var(--gruen-hell);color:var(--gruen-dunkel);font-weight:600;font-size:.88rem;text-decoration:none;white-space:nowrap;transition:transform .4s var(--ease)}.kontingent-chip:hover{transform:translateY(-2px)}.kontingent-chip.aufgebraucht{background:var(--rot-hell);color:var(--rot)}
.ablage-gesperrt{text-decoration:none;color:inherit;border-style:solid;border-color:var(--rot-hell);background:#fff}.ablage-gesperrt .btn{margin-left:auto}
.preis-raster.vier{grid-template-columns:repeat(4,1fr)}.preis-raster.drei{grid-template-columns:repeat(3,1fr)}
.preis-raster.vier .preis-zahl{font-size:2.2rem}
.api-teaser{background:linear-gradient(180deg,transparent,rgba(23,22,26,.03) 30%,rgba(23,22,26,.03) 70%,transparent)}
.code{background:#1d1c21;color:#e9e4d8;border-radius:var(--radius);padding:1.2rem 1.4rem;font-family:var(--mono);font-size:.82rem;line-height:1.55;overflow:auto;box-shadow:var(--schatten-stark);margin:0 0 1.2em;white-space:pre}
.code code{background:none;padding:0;font-size:inherit;color:inherit}
.api-doku h2{margin-top:2em}.api-doku code{font-size:.88em}.api-doku ul{color:#2e2d31}
.key-anzeige{justify-content:space-between}.key-anzeige code{font-size:.95em;word-break:break-all;background:#fff;padding:.3em .5em;border-radius:6px;display:inline-block;margin-top:.3em}
.probe .cta-karte .knopfzeile{margin-top:.6rem}
@media (max-width:1000px){.preis-raster.vier,.preis-raster.drei{grid-template-columns:1fr 1fr;max-width:none}.aufgaben{grid-template-columns:1fr}}
@media (max-width:640px){.preis-raster.vier,.preis-raster.drei{grid-template-columns:1fr;max-width:460px;margin:0 auto}.hero-ablage .ablage-innen{flex-direction:column;align-items:stretch}.hero-ablage #hero-senden{margin-left:0;width:100%}.app-kopf{flex-direction:column;align-items:flex-start;gap:.6rem}}

/* ==========================================================================
   Hero, zentriert: erster Screen ist nur Headline + Maske
   ========================================================================== */
.hero-mitte{min-height:calc(100vh - 62px);padding:3.5rem 1.25rem 3rem;align-items:center}
.hero-innen-mitte{position:relative;z-index:1;width:100%;max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-mitte h1{font-size:clamp(3rem,7.5vw,5.8rem);margin:.15em 0 .3em;line-height:1.02;letter-spacing:-.02em}
.hero-mitte .hero-sub{max-width:40rem;margin:0 auto 2rem;font-size:1.15rem}
.hero-mitte .hero-ablage{width:100%;max-width:780px;margin:0 0 1.4rem;border-width:2px;border-color:rgba(23,22,26,.22);background:rgba(255,255,255,.86);box-shadow:0 2px 4px rgba(23,22,26,.05),0 40px 90px -40px rgba(23,22,26,.45)}
.hero-mitte .hero-ablage:hover,.hero-mitte .hero-ablage.drueber{border-color:var(--gruen);box-shadow:0 0 0 8px var(--gruen-hell),0 40px 90px -40px rgba(23,22,26,.45)}
.hero-mitte .hero-ablage .ablage-innen{padding:1.6rem 2rem;gap:2.2rem;align-items:center;justify-content:center;text-align:left}
.hero-mitte .ablage-text{gap:.45em;flex:0 1 auto}
.hero-mitte .ablage-text strong{font-size:1.45rem;font-family:var(--serif);font-weight:500;line-height:1.15}
.hero-mitte .ablage-text > span{font-size:.95rem}
.hero-mitte #hero-senden{margin:.6rem 0 0;align-self:flex-start}
.hero-maschine{width:118px;height:200px;overflow:hidden;flex:none;position:relative}
.hero-maschine .maschine{transform:scale(.43);transform-origin:top center;position:absolute;left:50%;margin-left:-130px;top:0}
.hero-mitte .hero-fakten{justify-content:center;margin-bottom:.4rem}
.hero-mitte .mensch-hinweis{max-width:640px;text-align:left;margin-top:.6rem}
.scroll-hinweis{margin-top:2.2rem;color:var(--grau);text-decoration:none;font-size:.9rem;display:inline-flex;align-items:center;gap:.4em}.scroll-hinweis span{display:inline-block;animation:wippen 2.2s var(--ease-weich) infinite}.scroll-hinweis:hover{color:var(--tinte)}
@keyframes wippen{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero-mitte .karte-frist{right:6%;top:26%;left:auto;bottom:auto}.hero-mitte .karte-summe{left:5%;bottom:22%;top:auto}
@media (max-width:1000px){.hero-mitte .szene-karte{display:none}}
@media (max-width:640px){
  .hero-mitte{min-height:auto;padding-top:2.5rem}.hero-mitte h1{font-size:2.9rem}
  .hero-mitte .hero-ablage .ablage-innen{flex-direction:column;align-items:center;text-align:center;padding:1.4rem 1.2rem;gap:1rem}
  .hero-mitte .ablage-text{align-items:center}.hero-mitte #hero-senden{align-self:stretch;width:100%}
  .hero-maschine{height:150px}.hero-maschine .maschine{transform:scale(.33)}
}

/* ==========================================================================
   Stufe 3: weniger Text, mehr Bild. Einzeiler, Vertrauensleiste, Schloss, Clearing, Schritt-Bilder
   ========================================================================== */
.einzeilig{white-space:nowrap}
.hero-mitte h1.einzeilig{font-size:clamp(2.15rem,6.6vw,5.6rem)}
.hero-mitte .hero-sub{display:flex;flex-direction:column;gap:.1em;font-size:clamp(1rem,2.4vw,1.3rem);color:#3a393e;margin-bottom:1.8rem}
.hero-mitte .hero-sub span{display:block;white-space:nowrap}
.hero-mitte .hero-sub span:nth-child(3){color:var(--gruen-dunkel);font-weight:600}
.hero-mitte .ablage-text strong.einzeilig{font-size:clamp(1.15rem,2.6vw,1.5rem)}

/* Vertrauensleiste */
.vertrauen{list-style:none;padding:0;margin:.2rem 0 0;display:flex;flex-wrap:nowrap;justify-content:center;gap:.6rem .7rem;width:max-content;max-width:96vw}
.vertrauen li{display:inline-flex;align-items:center;gap:.5em;background:rgba(255,255,255,.7);border:1px solid var(--linie);border-radius:999px;padding:.4em .95em .4em .55em;font-size:.88rem;font-weight:600;color:var(--tinte);white-space:nowrap;box-shadow:var(--schatten);transition:transform .5s var(--ease)}
.vertrauen li:hover{transform:translateY(-2px)}
.v-icon{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--gruen-hell);color:var(--gruen-dunkel);font-size:.95rem}
.v-de{background:linear-gradient(180deg,#1d1d1d 0 33%,#d4232a 33% 66%,#f2c12e 66%);box-shadow:inset 0 0 0 2px #fff}
.v-uhr svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-uhr .zeiger{transform-origin:12px 12px;animation:ticken 12s steps(12) infinite}.v-uhr circle{fill:none}
@keyframes ticken{to{transform:rotate(360deg)}}
.v-logo{height:22px;width:auto;display:block}

/* Schloss mit Sicherungsring */
.schloss-anim{position:relative;display:inline-block;width:26px;height:26px;flex:none}
.schloss-anim.gross{width:220px;height:220px}
.schloss-svg{width:100%;height:100%;display:block;overflow:visible}
.ring-grund{fill:none;stroke:rgba(23,22,26,.1);stroke-width:5}
.ring-linie{fill:none;stroke:var(--gruen);stroke-width:5;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:340;transform:rotate(-90deg);transform-origin:60px 60px;transition:stroke-dashoffset 1.4s var(--ease-weich)}
.schloss-anim.ist-ring .ring-linie{stroke-dashoffset:0}
.buegel{fill:none;stroke:#3a393e;stroke-width:7;stroke-linecap:round;transform:translateY(-9px);transition:transform .22s cubic-bezier(.3,1.6,.5,1),stroke .4s}
.schloss-anim.ist-klick .buegel{transform:translateY(0)}
.korpus{fill:#3a393e;transition:fill .4s}
.loch{fill:#f6f1e7;transition:opacity .3s}
.schloss-haken{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .45s var(--ease)}
.schloss-anim.ist-fertig .korpus{fill:var(--gruen)}.schloss-anim.ist-fertig .buegel{stroke:var(--gruen)}.schloss-anim.ist-fertig .loch{opacity:0}.schloss-anim.ist-fertig .schloss-haken{stroke-dashoffset:0}
.schloss-anim.ist-fertig::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:3px solid var(--gruen);opacity:0;animation:puls-ring 1.4s var(--ease) 1}
.schloss-anim.ist-fertig .ring-linie{animation:ring-atmen 3.6s var(--ease-weich) 1.5s infinite}
@keyframes ring-atmen{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes puls-ring{0%{opacity:.7;transform:scale(.92)}100%{opacity:0;transform:scale(1.25)}}
.schloss-anim.ist-klick .schloss-g{animation:wackeln .3s var(--ease) 1}
@keyframes wackeln{0%{transform:translateY(0)}40%{transform:translateY(2px)}100%{transform:translateY(0)}}
.schloss-anim.zurueck *,.schloss-anim.zurueck::after{transition:none !important;animation:none !important}
.vertrauen [data-schloss-text]{transition:color .4s}

/* Sicher-Abschnitt */
.sicher{background:linear-gradient(180deg,transparent,rgba(255,255,255,.55) 25%,rgba(255,255,255,.55) 75%,transparent)}
.sicher-raster{display:grid;grid-template-columns:300px 1fr;gap:3rem;align-items:center;max-width:1000px;margin:0 auto}
.sicher-schloss{display:flex;flex-direction:column;align-items:center;gap:1rem}
.sicher-status{font-weight:600;color:var(--grau);margin:0;transition:color .5s}.sicher-status.gesichert{color:var(--gruen-dunkel)}
.sicher-pfad{display:flex;align-items:flex-start;gap:0;justify-content:space-between}
.pfad-knoten{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;min-width:150px}
.pfad-knoten strong{font-size:.95rem}.pfad-knoten small{color:var(--grau);font-size:.8rem;white-space:nowrap}
.pfad-icon{width:96px;height:96px;border-radius:24px;background:#fff;box-shadow:var(--schatten);display:flex;align-items:center;justify-content:center;transition:transform .6s var(--ease)}.pfad-knoten:hover .pfad-icon{transform:translateY(-4px)}
.pfad-icon img{width:56px;height:56px;border-radius:12px}
.brief.mini{width:46px;padding:7px 6px;gap:4px;border-radius:4px}.brief.mini .brief-kopf{margin-bottom:2px}.brief.mini .brief-kopf span{height:4px}.brief.mini .brief-zeile{height:3px}
.pfad-linie{flex:1;height:3px;background:var(--linie-stark);position:relative;margin:47px .6rem 0;border-radius:2px;overflow:visible}
.pfad-linie span{position:absolute;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 4px var(--gruen-hell);animation:laufen 2.4s linear infinite}
.pfad-linie span:nth-child(2){animation-delay:-.8s}.pfad-linie span:nth-child(3){animation-delay:-1.6s}
@keyframes laufen{0%{left:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 6px);opacity:0}}
.pfad-knoten.clearing .pfad-icon{background:var(--gruen-hell);box-shadow:0 0 0 6px rgba(46,125,91,.12),var(--schatten);animation:schild-atmen 3.2s var(--ease-weich) infinite}
@keyframes schild-atmen{0%,100%{box-shadow:0 0 0 6px rgba(46,125,91,.12),var(--schatten)}50%{box-shadow:0 0 0 14px rgba(46,125,91,.06),var(--schatten)}}
.schild svg{width:52px;height:60px}.schild-form{fill:var(--gruen);stroke:none}.schild-haken{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;animation:haken-zeichnen 3.2s var(--ease) infinite}
@keyframes haken-zeichnen{0%{stroke-dashoffset:40}30%{stroke-dashoffset:0}80%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.morph{position:relative;height:1.3em;width:170px;font-family:var(--mono);font-size:.78rem;overflow:hidden}
.morph span{position:absolute;left:0;right:0;top:0;white-space:nowrap;text-align:center}
.morph .vorher{color:var(--grau);animation:morph-weg 6s var(--ease-weich) infinite}
.morph .nachher{color:var(--gruen-dunkel);font-weight:700;animation:morph-her 6s var(--ease-weich) infinite}
.morph.m2 .vorher,.morph.m2 .nachher{animation-delay:-2s}.morph.m3 .vorher,.morph.m3 .nachher{animation-delay:-4s}
@keyframes morph-weg{0%,35%{opacity:1;filter:blur(0)}45%,85%{opacity:0;filter:blur(4px)}95%,100%{opacity:1;filter:blur(0)}}
@keyframes morph-her{0%,35%{opacity:0;filter:blur(4px);transform:translateY(4px)}45%,85%{opacity:1;filter:blur(0);transform:none}95%,100%{opacity:0;filter:blur(4px)}}
.partner{display:flex;align-items:center;justify-content:center;gap:1rem;margin:3rem 0 0;color:var(--grau);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.partner img{height:34px;width:auto;display:block;opacity:.9;transition:opacity .3s}.partner a:hover img{opacity:1}

/* Schritt-Bilder */
.schritte.bild .karte{text-align:center;padding-top:2.4rem}.schritte.bild h3{margin:.4em 0 .2em}.schritte.bild p{font-size:.92rem}
.schritt-bild{height:120px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:.6rem}
.s-ablegen .fach{position:absolute;bottom:14px;width:90px;height:14px;border-radius:7px;background:#2a2930}
.s-ablegen .fallend{animation:fallen 3.6s var(--ease-weich) infinite}
@keyframes fallen{0%{transform:translateY(-44px) rotate(-6deg);opacity:0}15%{opacity:1}55%{transform:translateY(8px) rotate(0);opacity:1}70%{transform:translateY(18px);opacity:0}100%{transform:translateY(18px);opacity:0}}
.s-verstehen .brief{position:relative}.s-verstehen .scanlinie{animation-duration:2.2s}
.s-chip{position:absolute;right:8%;bottom:10px;animation:chip-auf 2.2s var(--ease) infinite}
@keyframes chip-auf{0%,55%{opacity:0;transform:translateY(6px) scale(.9)}70%,95%{opacity:1;transform:none}100%{opacity:0}}
.s-entscheiden{flex-direction:column;gap:9px}
.wahl{width:110px;height:18px;border-radius:9px;background:rgba(23,22,26,.08);position:relative;transition:background .4s}
.wahl.gewaehlt{background:var(--gruen-hell);box-shadow:0 0 0 3px rgba(46,125,91,.25);animation:wahl-puls 3s var(--ease) infinite}
.wahl.gewaehlt span{position:absolute;left:6px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--gruen)}
@keyframes wahl-puls{0%,20%{box-shadow:0 0 0 0 rgba(46,125,91,0);background:rgba(23,22,26,.08)}35%,100%{box-shadow:0 0 0 3px rgba(46,125,91,.25);background:var(--gruen-hell)}}
.s-freigeben .brief{position:relative}
.s-stempel{position:absolute;right:-18px;bottom:-6px;font-size:.7rem !important;padding:.1em .35em !important;border-width:2px !important;animation:stempel-schlag 3.4s var(--ease) infinite}
@keyframes stempel-schlag{0%,40%{opacity:0;transform:rotate(-8deg) scale(2)}52%{opacity:.95;transform:rotate(-8deg) scale(1)}90%{opacity:.95}100%{opacity:0}}
.fuss-ki{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}.fuss-ki img{height:24px;width:auto;display:block;opacity:.85}

@media (max-width:1000px){.sicher-raster{grid-template-columns:1fr;gap:2rem}.sicher-pfad{flex-direction:column;align-items:center;gap:.6rem}.pfad-linie{width:3px;height:44px;flex:none;margin:0}.pfad-linie span{left:-4px !important;animation:laufen-v 2.4s linear infinite}
@keyframes laufen-v{0%{top:-4px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 6px);opacity:0}}}
@media (max-width:1000px){.vertrauen{flex-wrap:wrap;width:auto}}
@media (max-width:640px){.vertrauen{gap:.5rem}.vertrauen li{font-size:.8rem}.schloss-anim.gross{width:170px;height:170px}.hero-mitte .hero-sub{font-size:1rem}.einzeilig.gross{white-space:normal}}

/* ==========================================================================
   Stufe 4: digitales Formular, Gedächtnis, ausgefüllte Vorschau
   ========================================================================== */
.formular-schritt{border:2px solid var(--gruen);box-shadow:0 0 0 5px var(--gruen-hell),var(--schatten)}
.formular-schritt.fertig{border-color:var(--linie);box-shadow:var(--schatten)}
.formular-schritt header .chip{margin-left:auto}
.felder-raster{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.2rem;margin:1rem 0}
.felder-raster .feld{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:.25em .6em;align-items:center;font-weight:600;font-size:.88rem}
.felder-raster .feld-label{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.4em;align-items:center}
.felder-raster .feld-label em{color:var(--rot);font-style:normal}
.felder-raster input[type=text],.felder-raster input[type=date],.felder-raster select{font-weight:400;padding:.55em .8em}
.felder-raster select{font:inherit;font-size:1rem;border:1px solid var(--linie-stark);border-radius:var(--radius-klein);background:#fff;width:100%}
.feld-kreuz .kreuz-zeile{display:flex;align-items:center;gap:.6em;font-weight:400;padding:.5em .2em}.feld-kreuz input[type=checkbox]{width:20px;height:20px;accent-color:var(--gruen)}
.feld-anhang input{border-style:dashed}
.chip.mini{font-size:.68rem;padding:.15em .55em}
.merken{display:inline-flex;align-items:center;gap:.3em;font-size:.75rem;font-weight:600;color:var(--grau);white-space:nowrap;padding:.3em .6em;border-radius:999px;background:rgba(23,22,26,.05)}
.merken input{accent-color:var(--gruen);width:15px;height:15px;margin:0}.merken label{cursor:pointer}
.merken:has(input:checked){background:var(--gruen-hell);color:var(--gruen-dunkel)}
.gedaechtnis-frage{background:var(--gelb-hell);border-radius:var(--radius-klein);padding:1rem 1.2rem;margin:.6rem 0 1rem;font-size:.9rem}.gedaechtnis-frage strong{display:block;margin-bottom:.3em}.gedaechtnis-frage p{margin:0;color:#4a4740}
.ausgefuellt-vorschau{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.8rem;margin:1rem 0}.ausgefuellt-vorschau img{width:100%;border-radius:8px;box-shadow:var(--schatten);background:#fff}
.felder-vorschau{list-style:none;padding:0;margin:.6rem 0;display:flex;flex-wrap:wrap;gap:.4em}.felder-vorschau li{background:#fff;border:1px solid var(--linie);border-radius:999px;padding:.25em .8em;font-size:.85rem}
.gedaechtnis-liste{list-style:none;padding:0;margin:0 0 1rem}.gedaechtnis-liste li{padding:.4rem 0;border-bottom:1px solid var(--linie)}
.gedaechtnis-zeile{display:grid;grid-template-columns:130px 1fr auto auto;gap:.6rem;align-items:center}.g-schluessel{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}
.gedaechtnis-zeile input[type=text]{padding:.45em .7em;font-size:.95rem}
@media (max-width:700px){.felder-raster{grid-template-columns:1fr}.gedaechtnis-zeile{grid-template-columns:1fr;gap:.3rem}}
/* Stempel in der kleinen Maschine: ohne Körnung, damit er lesbar bleibt */
.maschine .brief .stempel{-webkit-mask-image:none;mask-image:none;font-size:1.3rem;border-width:3.5px;right:8px;bottom:18px;opacity:1}

/* ==========================================================================
   Stufe 5: Platzierungs-Editor – Werte auf dem Dokument verschieben und skalieren
   ========================================================================== */
@font-face{font-family:"blapier-dejavu";src:url("/schrift/dejavu.ttf") format("truetype");font-display:swap}
.form-schritte{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0 0 1rem;font-size:.8rem;font-weight:700;color:var(--grau)}
.form-schritte li{padding:.3em .9em;border-radius:999px;background:rgba(23,22,26,.06);white-space:nowrap}
.form-schritte li.da{background:var(--tinte);color:#fff}
.form-schritte li.durch{background:var(--gruen-hell);color:var(--gruen-dunkel)}
.platzmodus{max-width:1320px}
.platzmodus .vorgang-raster{grid-template-columns:1fr}
.platzmodus .dokument{display:none}
.platz{margin:1rem 0 1.2rem}
.platz-zoom{font-size:.82rem;font-weight:600;min-width:3.4em;text-align:center;color:var(--grau)}
.platz-buehne{--zoom:1;background:#e7e2d8;border:1px solid var(--linie-stark);border-radius:var(--radius-klein);padding:16px;overflow-x:auto}
.platz-seite{position:relative;width:calc(100% * var(--zoom));margin:0 auto 16px;background:#fff;box-shadow:0 2px 16px rgba(23,22,26,.2)}
.platz-seite:last-child{margin-bottom:0}
.platz-seite img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.wert{position:absolute;white-space:nowrap;line-height:1;color:#141e78;font-family:"blapier-dejavu","DejaVu Sans",Verdana,sans-serif;font-weight:400;font-style:normal;letter-spacing:0;word-spacing:0;text-rendering:geometricPrecision;font-kerning:none;font-variant-ligatures:none;font-feature-settings:"kern" 0,"liga" 0,"clig" 0;font-synthesis:none;-webkit-font-smoothing:antialiased;cursor:grab;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;outline:1px dashed rgba(46,125,91,.75);outline-offset:2px;background:rgba(227,241,234,.5);border-radius:1px}
.wert:hover{outline-style:solid}
.wert:focus{outline:2px solid var(--gruen)}
.wert.gewaehlt{outline:2px solid var(--gruen);background:rgba(227,241,234,.75);z-index:5;touch-action:none}
.wert.zieht{cursor:grabbing;box-shadow:0 8px 20px rgba(23,22,26,.28);z-index:30;touch-action:none}
.wert .wert-text{display:block}
.wert .griff{display:none;position:absolute;right:-12px;bottom:-12px;width:15px;height:15px;border-radius:50%;background:var(--gruen);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:nwse-resize;touch-action:none}
.wert.gewaehlt .griff{display:block}
.platz-zurueck{margin-top:.6rem}
.ausgefuellt-vorschau a{display:block}
@media (max-width:700px){.platz-buehne{padding:8px}}
.platz-sonde{position:absolute;left:-9999px;top:0;visibility:hidden;white-space:nowrap;line-height:1;font-size:200px;font-family:"blapier-dejavu","DejaVu Sans",Verdana,sans-serif}
.platz-sonde i{display:inline-block;width:1px;height:0;vertical-align:baseline}

/* ---------- Handy: nichts darf seitlich überstehen ---------- */
@media (max-width:640px){
  .navi-rechts .btn-voll{display:none}
  .hero-mitte .augenbraue{font-size:.6rem;letter-spacing:.06em}
  .hero-mitte .hero-sub{font-size:.95rem}
  .platzmodus .schritt{padding:1.1rem .7rem 1.3rem}
  .platzmodus{padding-left:.6rem;padding-right:.6rem}
  .platz-buehne{padding:6px}
  .wert{outline-offset:1px}
  .form-schritte{font-size:.72rem}
  .api-doku .code,.api-teaser .code{font-size:.7rem}
}
.zweispaltig > *{min-width:0}
.code{max-width:100%}
.preis-tabelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.preis-tabelle table{min-width:560px}
@media (max-width:640px){.hero-mitte h1.einzeilig{font-size:min(2.15rem,8.6vw)}}
@media (max-width:380px){.kachel p.einzeilig,.schritte.bild p.einzeilig,.preis-fuss.einzeilig{white-space:normal}.hero-mitte .hero-sub{font-size:.86rem}}
@media (max-width:380px){h2.einzeilig,.abschnitt-kopf p.einzeilig{white-space:normal}}

/* ==========================================================================
   Stufe 6: Unterschrift – immer frisch gezeichnet (Stift, Finger, Maus), nie gespeichert
   ========================================================================== */
.unterschrift-feld{border:1px solid var(--linie);border-radius:var(--radius-klein);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;min-width:0}
.unterschrift-feld legend{font-weight:600;padding:0 .4em}.unterschrift-feld legend small{font-weight:400;color:var(--grau)}
.u-flaeche{position:relative;height:170px;max-width:560px;background:#fff;border:1px dashed var(--linie-stark);border-radius:var(--radius-klein);overflow:hidden;transition:border-color .3s,box-shadow .4s}
.u-flaeche.gross{height:230px;max-width:none}
.u-flaeche:hover,.hat-zeichnung .u-flaeche{border-color:var(--gruen)}
.hat-zeichnung .u-flaeche{border-style:solid;box-shadow:0 0 0 4px var(--gruen-hell)}
.u-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;z-index:1}
.u-linie{position:absolute;left:8%;right:8%;bottom:26%;border-bottom:1.5px solid rgba(23,22,26,.28);padding-bottom:.25em;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grau-hell);pointer-events:none;user-select:none}
.u-linie::before{content:"✕";margin-right:.6em;color:rgba(23,22,26,.4);font-size:.9rem}
.hat-zeichnung .u-linie{color:transparent}.hat-zeichnung .u-linie::before{color:transparent}
.u-leiste{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.u-status{font-size:.85rem;margin-right:auto}
.feld-unterschrift{display:flex !important;flex-direction:column;gap:.3em;background:var(--gruen-hell);border-radius:var(--radius-klein);padding:.6em .8em}
.u-info{font-weight:400;font-size:.85rem;color:var(--gruen-dunkel)}
.wert-bild{background:none;outline-color:rgba(46,125,91,.5)}
.wert-bild img{display:block;height:1em;width:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.u-ziel{position:absolute;display:flex;align-items:center;padding:0 .9em;min-width:13em;font:inherit;font-size:.78rem;font-weight:700;color:var(--gruen-dunkel);background:rgba(227,241,234,.82);border:1.5px dashed var(--gruen);border-radius:8px;cursor:pointer;white-space:nowrap;z-index:3;animation:u-ziel-puls 2.6s var(--ease-weich) infinite;transition:background .3s}
.u-ziel:hover{background:#fff}
@keyframes u-ziel-puls{0%,100%{box-shadow:0 0 0 0 rgba(46,125,91,.35)}50%{box-shadow:0 0 0 7px rgba(46,125,91,0)}}
.u-fenster{border:0;border-radius:var(--radius);padding:0;width:min(680px,94vw);box-shadow:0 30px 90px -20px rgba(23,22,26,.6);background:var(--creme);color:var(--tinte)}
.u-fenster::backdrop{background:rgba(23,22,26,.45);backdrop-filter:blur(3px)}
.u-fenster-innen{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.u-fenster h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0}
.u-fenster p{margin:0}
@media (max-width:640px){.u-flaeche{height:150px}.u-flaeche.gross{height:200px}.u-fenster-innen{padding:1rem}}
/* Das Attribut hidden gilt immer, auch wenn eine Klasse display setzt */
[hidden]{display:none !important}

/* Auslieferung des unterschriebenen Dokuments: liegt nur im Browser, wird nicht gespeichert */
.u-ausgabe{width:min(560px,94vw)}
.u-ausgabe .stempel{align-self:flex-start;margin:.5rem 0 1rem .3rem;font-size:1.05rem}
.u-ausgabe .u-status{font-size:.88rem;min-height:1.4em}
.u-fehler{margin-bottom:1rem}

/* Preise: pro Vorgang oder Flatrate */
.preis-raster.zwei{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}
.kauf-form{display:flex;flex-direction:column;gap:.6rem}
.menge{display:flex;align-items:center;justify-content:space-between;gap:.8rem;font-size:.9rem;font-weight:600}
.menge select{font:inherit;padding:.5em .7em;border:1px solid var(--linie-stark);border-radius:var(--radius-klein);background:#fff}
@media (max-width:640px){.preis-raster.zwei{grid-template-columns:1fr;max-width:460px}}

/* ==========================================================================
   Konto-Knopf oben rechts mit Menü (auf jedem Gerät sichtbar)
   ========================================================================== */
.konto-menue{position:relative}
.konto-knopf{list-style:none;display:inline-flex;align-items:center;gap:.5em;padding:.3em .8em .3em .32em;border-radius:999px;border:1px solid var(--linie-stark);background:rgba(255,255,255,.7);font-weight:600;font-size:.92rem;cursor:pointer;user-select:none;transition:background .3s,box-shadow .4s,transform .5s var(--ease)}
.konto-knopf::-webkit-details-marker{display:none}
.konto-knopf:hover{background:#fff;transform:translateY(-1px)}
.konto-menue[open] .konto-knopf,.konto-knopf.aktiv{background:#fff;box-shadow:0 0 0 3px var(--gruen-hell);border-color:var(--gruen)}
.konto-bild{width:30px;height:30px;border-radius:50%;background:var(--tinte);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;font-family:var(--serif)}
.konto-pfeil{width:7px;height:7px;border-right:2px solid var(--grau);border-bottom:2px solid var(--grau);transform:rotate(45deg) translateY(-2px);transition:transform .4s var(--ease)}
.konto-menue[open] .konto-pfeil{transform:rotate(-135deg) translateY(-1px)}
.konto-liste{position:absolute;right:0;top:calc(100% + 10px);width:min(290px,88vw);background:#fff;border:1px solid var(--linie);border-radius:var(--radius-klein);box-shadow:var(--schatten-stark);padding:.4rem;display:flex;flex-direction:column;z-index:60;animation:konto-auf .25s var(--ease)}
@keyframes konto-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.konto-kopf{display:flex;flex-direction:column;gap:.1em;padding:.6rem .8rem .7rem;border-bottom:1px solid var(--linie);margin-bottom:.3rem}
.konto-kopf span{font-size:.82rem;color:var(--grau);overflow:hidden;text-overflow:ellipsis}
.konto-kopf .konto-stand{color:var(--gruen-dunkel);font-weight:600;margin-top:.25em}
.konto-liste a,.konto-liste form button{display:block;width:100%;text-align:left;padding:.6rem .8rem;border-radius:8px;font:inherit;font-size:.95rem;font-weight:500;color:var(--tinte);text-decoration:none;background:none;border:0;cursor:pointer}
.konto-liste a:hover,.konto-liste form button:hover{background:rgba(23,22,26,.05)}
.konto-liste a:first-of-type{font-weight:700}
.konto-liste form{border-top:1px solid var(--linie);margin-top:.3rem;padding-top:.3rem}
.konto-liste form button{color:var(--rot)}

/* ==========================================================================
   Stufe 7: Platzieren schwebt mit – Knopf „Felder“, Fenster mit allen Werten, Auswahl-Leiste
   ========================================================================== */
.platzmodus{padding-bottom:7rem}
.pf-knopf{position:fixed;right:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:.55em;padding:.78em 1.15em .78em .95em;border-radius:999px;border:0;background:var(--tinte);color:#fff;font:inherit;font-weight:700;font-size:.98rem;cursor:pointer;box-shadow:0 14px 34px -10px rgba(23,22,26,.7);transition:transform .5s var(--ease),box-shadow .5s var(--ease),opacity .3s,visibility .3s}
.pf-knopf:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(23,22,26,.75)}
.pf-knopf-bild svg{width:20px;height:20px;display:block;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.pf-knopf[aria-expanded="true"]{background:#fff;color:var(--tinte);box-shadow:0 0 0 2px var(--tinte),0 14px 34px -14px rgba(23,22,26,.6)}
.pf-knopf[aria-expanded="true"] .pf-knopf-bild svg{stroke:var(--tinte)}
.pf-zahl{min-width:1.65em;height:1.65em;padding:0 .4em;border-radius:999px;background:var(--gelb);color:#fff;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center}
.pf-knopf.offene[aria-expanded="false"]{animation:pf-puls 2.4s var(--ease-weich) infinite}
@keyframes pf-puls{0%,100%{box-shadow:0 14px 34px -10px rgba(23,22,26,.7),0 0 0 0 rgba(184,128,26,.5)}50%{box-shadow:0 14px 34px -10px rgba(23,22,26,.7),0 0 0 10px rgba(184,128,26,0)}}

.pf-fenster{position:fixed;right:18px;bottom:78px;z-index:69;width:340px;max-height:min(74vh,700px);display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie-stark);border-radius:16px;box-shadow:0 24px 70px -20px rgba(23,22,26,.55);overflow:hidden;transition:opacity .3s,transform .45s var(--ease),visibility .3s}
.pf-fenster.zu{opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;visibility:hidden}
.pf-kopf{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--linie);background:var(--creme);cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;position:relative}
.pf-kopf:active{cursor:grabbing}
.pf-griffleiste{display:none}
.pf-kopf strong{margin-right:auto;font-family:var(--serif);font-weight:500;font-size:1.12rem}
.pf-zu{font:inherit;font-size:.78rem;font-weight:600;color:var(--grau);background:#fff;border:1px solid var(--linie-stark);border-radius:999px;padding:.3em .85em;cursor:pointer}
.pf-zu:hover{color:var(--tinte)}
.pf-inhalt{overflow-y:auto;padding:.75rem .9rem .5rem;display:flex;flex-direction:column;gap:.95rem;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pf-hilfe{margin:0;font-size:.82rem;color:var(--grau)}
.pf-gruppe h4{margin:0 0 .45rem;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grau)}
.pf-gruppe h4 small{text-transform:none;letter-spacing:0;font-weight:400;margin-left:.4em}
.pf-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.pf-wert{display:flex;align-items:stretch;border:1px solid var(--linie);border-radius:11px;background:#fff;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .35s var(--ease),opacity .2s}
.pf-wert-haupt{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.45rem;padding:.25rem .5rem .25rem .15rem;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.pf-wert-haupt:focus-visible{outline:2px solid var(--gruen);outline-offset:-2px;border-radius:10px}
.pf-aendern{flex:none;width:40px;padding:0;border:0;border-left:1px solid var(--linie);background:none;color:var(--grau);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .3s,background .3s}
.pf-aendern:hover,.pf-aendern:focus-visible{color:var(--gruen-dunkel);background:var(--gruen-hell);outline:0}
.pf-aendern svg,.pf-stift svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;display:block}
.pf-zieh svg{width:13px;height:20px;fill:currentColor;display:block}
.pf-statt{display:block;font-size:.72rem;color:var(--grau);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-wert.geaendert .pf-wert-text>span{font-weight:700}
.pf-wert:hover{border-color:var(--gruen);transform:translateX(-2px)}
.pf-wert.gewaehlt{border-color:var(--gruen);box-shadow:0 0 0 3px var(--gruen-hell)}
.pf-wert.wird-gezogen{opacity:.4;border-style:dashed}
.pf-zieh{width:36px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--grau-hell);font-size:1.2rem;cursor:grab;touch-action:none;border-radius:8px;transition:color .3s,background .3s}
.pf-wert:hover .pf-zieh{color:var(--gruen-dunkel);background:var(--gruen-hell)}
.pf-wert-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.pf-wert-text strong{font-size:.84rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-wert-text span{font-size:.82rem;color:#141e78;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-stand{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;background:var(--gelb-hell);color:var(--gelb)}
.pf-wert.gesetzt .pf-stand{background:var(--gruen-hell);color:var(--gruen-dunkel)}
#pf-offen .pf-wert{border-color:rgba(184,128,26,.55);background:#fffdf6}
.pf-unterschrift .pf-wert-haupt{cursor:pointer;touch-action:auto}.pf-unterschrift .pf-zieh{cursor:pointer;color:var(--gruen-dunkel)}.pf-unterschrift .pf-wert-text span{color:var(--grau)}
.pf-werkzeug{display:flex;flex-wrap:wrap;gap:.4rem}
.pf-regler{display:flex;flex-direction:column;gap:.45rem;font-size:.82rem;font-weight:600;color:var(--grau)}
.pf-regler input[type=range]{accent-color:var(--gruen);width:100%;margin:0}
.pf-ansicht{display:flex;align-items:center;gap:.45rem;margin-top:.2rem}
.pf-fuss{padding:.7rem .9rem .9rem;border-top:1px solid var(--linie);background:var(--creme)}

.pf-auswahl{position:fixed;left:var(--pf-mitte,50%);bottom:var(--pf-unten,16px);transform:translateX(-50%);z-index:68;display:flex;align-items:center;gap:.4rem;padding:.4rem .5rem .4rem 1rem;background:var(--tinte);color:#fff;border-radius:999px;box-shadow:0 14px 34px -12px rgba(23,22,26,.75);max-width:calc(100vw - 24px);animation:pf-auf .3s var(--ease)}
@keyframes pf-auf{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.pf-auswahl-name{font-size:.86rem;font-weight:600;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:.2rem}
.pf-auswahl .btn{background:rgba(255,255,255,.16);color:#fff;border-color:transparent;padding:.4em .9em}
.pf-auswahl .btn:hover{background:rgba(255,255,255,.28)}

.pf-geist{position:fixed;z-index:200;pointer-events:none;outline:2px solid var(--gruen);background:rgba(227,241,234,.92);box-shadow:0 12px 28px rgba(23,22,26,.32);white-space:nowrap;line-height:1}
.platz-seite{transition:box-shadow .25s}
.platz-seite.ziel{box-shadow:0 0 0 4px var(--gruen),0 2px 16px rgba(23,22,26,.2)}
.wert.neu{animation:wert-neu 1.35s var(--ease)}
@keyframes wert-neu{0%,55%{box-shadow:0 0 0 9px rgba(46,125,91,.38)}100%{box-shadow:0 0 0 0 rgba(46,125,91,0)}}
body.pf-zieht{user-select:none;-webkit-user-select:none;cursor:grabbing}
@media (pointer:coarse){.wert .griff{width:26px;height:26px;right:-19px;bottom:-19px}}
body.pf-fern .pf-knopf,body.pf-fern .pf-fenster,body.pf-fern .pf-auswahl{opacity:0;visibility:hidden;pointer-events:none}

@media (max-width:760px){
  .pf-knopf{right:12px;bottom:12px}
  body.pf-offen .pf-knopf{opacity:0;pointer-events:none}
  .pf-fenster{left:0;right:0;bottom:0;width:auto;max-height:44vh;border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;box-shadow:0 -14px 44px -18px rgba(23,22,26,.5)}
  .pf-fenster{transition:transform .45s var(--ease),opacity .3s,visibility .45s}
  .pf-fenster.zu{transform:translateY(102%);opacity:1}
  .pf-kopf{cursor:default;padding-top:1.05rem;touch-action:auto}
  .pf-griffleiste{display:block;position:absolute;top:7px;left:50%;width:44px;height:4px;border-radius:2px;background:var(--linie-stark);transform:translateX(-50%)}
  body.pf-holt .pf-fenster{transform:translateY(calc(100% - 50px));opacity:.94}
  .pf-auswahl{left:10px;transform:none;max-width:calc(100vw - 22px);animation:none}
  .pf-auswahl-name{max-width:8.5rem;flex:0 1 auto;min-width:0}
  .pf-stift span{display:none}
  .pf-auswahl .btn{padding:.4em .75em}
  body.pf-offen .platzmodus{padding-bottom:calc(44vh + 3rem)}
  .pf-zieh{width:42px;height:44px;font-size:1.35rem;color:var(--gruen-dunkel);background:var(--gruen-hell)}
}
@media (max-width:420px){.kontingent-chip{white-space:normal;border-radius:16px;max-width:100%}}

/* ==========================================================================
   Stufe 8: Werte ändern (Stift) und robustes Ziehen
   ========================================================================== */
.wert img,.pf-geist img{pointer-events:none;-webkit-user-drag:none}
.pf-geist{-webkit-touch-callout:none;touch-action:none}
.platz-seite.ziel{z-index:1}
.pf-stift{display:inline-flex;align-items:center;gap:.4em}
.pf-hilfe .nur-finger{display:none}
@media (pointer:coarse){.pf-hilfe .nur-maus{display:none}.pf-hilfe .nur-finger{display:inline}}
.we-fenster{width:min(460px,94vw)}
.we-feld{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.9rem}
.we-feld input{font:inherit;font-weight:400;font-size:1.1rem;padding:.65em .8em;border:1.5px solid var(--linie-stark);border-radius:10px;background:#fff;color:#141e78;width:100%;min-width:0}
.we-feld input:focus{outline:2px solid var(--gruen);outline-offset:1px;border-color:var(--gruen)}
.we-schnell{display:flex;flex-wrap:wrap;gap:.4rem}
.we-schnell b{margin-right:.35em;color:#141e78}
@media (max-width:360px){.pf-auswahl-name{display:none}.pf-auswahl{padding-left:.5rem}}
/* Handy: im Blatt von unten zählt jede Zeile – möglichst viele Werte sichtbar */
@media (max-width:760px){
  .pf-fenster{max-height:47vh}
  body.pf-offen .platzmodus{padding-bottom:calc(47vh + 3rem)}
  .pf-kopf{padding:.85rem .8rem .45rem}
  .pf-kopf strong{font-size:1rem}
  .pf-inhalt{gap:.55rem;padding:.5rem .7rem .4rem}
  .pf-hilfe{font-size:.76rem;line-height:1.3}
  .pf-dazu h4{display:none}
  .pf-werkzeug .btn{padding:.42em .85em;font-size:.84rem}
  .pf-gruppe h4{margin-bottom:.3rem}
  .pf-fuss{padding:.45rem .7rem .6rem}
  .pf-fuss .btn{padding:.7em 1em}
  .pf-zieh{width:40px;height:42px}
}

/* Guthaben (Prepaid) */
.guthaben-stand{display:grid;grid-template-columns:auto 1fr;gap:.4rem 2.2rem;align-items:center;margin-bottom:2.4rem}
.guthaben-zahl{display:flex;flex-direction:column;align-items:flex-start;min-width:8rem}
.guthaben-zahl strong{font-family:var(--serif);font-size:4.2rem;line-height:1;font-weight:500;color:var(--gruen-dunkel)}
.guthaben-zahl span{color:var(--grau);font-weight:600;margin-top:.3em}
.guthaben-stand.ist-leer .guthaben-zahl strong{color:var(--rot)}
.guthaben-fakten{margin:0}
.guthaben-regel{grid-column:1/-1;font-size:.88rem;margin:.6em 0 0}
.guthaben-titel{font-size:1.5rem;margin:0 0 1.6rem;text-align:center}
.kauf-liste{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kauf-liste table{width:100%;border-collapse:collapse;font-size:.95rem}
.kauf-liste th,.kauf-liste td{padding:.65em .8em;text-align:left;border-bottom:1px solid var(--linie);white-space:nowrap}
.kauf-liste th{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);font-weight:700}
.kauf-liste td:nth-child(3),.kauf-liste th:nth-child(3),.kauf-liste td:nth-child(4),.kauf-liste th:nth-child(4){text-align:right}
.kauf-liste tr:last-child td{border-bottom:0}
#kaeufe{margin-top:2.4rem}
@media (max-width:640px){.guthaben-stand{grid-template-columns:1fr}.guthaben-zahl strong{font-size:3.4rem}.kauf-liste td:nth-child(2){white-space:normal}}
/* Bestellübersicht vor Stripe */
.bestell-seite{max-width:760px}
.bestell-uebersicht h2{margin-top:0}
.bestell-fakten{grid-template-columns:1fr 1fr}
.bestell-summe{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid var(--linie);padding-top:1rem;margin-top:.4rem}
.bestell-summe span{font-weight:700}.bestell-summe strong{font-size:2rem;letter-spacing:-.02em}
.bestell-steuer{text-align:right;margin:.2em 0 0}
.bestell-form{margin-top:1.2rem}.bestell-form .kontrolle span{line-height:1.5}.bestell-form .kontrolle input{width:1.25em;height:1.25em;flex:none;margin-top:.15em}
.bestell-weiter{font-size:.85rem;margin:0}
@media (max-width:640px){.bestell-fakten{grid-template-columns:1fr}}
/* Info-Seiten: Ratgeber, Lexikon, Funktionen, Fristenrechner */
.info-seite{max-width:780px;margin:0 auto;padding:2.2rem 1.25rem 4.5rem}
.info-seite.info-breit{max-width:1120px}
.info-kopf{margin:.4rem 0 1.6rem}.info-kopf h1{margin:.1em 0 .35em}
.info-lead{font-size:1.18rem;line-height:1.55;color:var(--tinte);margin:0}
.info-stand{font-size:.85rem;color:var(--grau);margin:.9em 0 0}
.info-klein{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);font-weight:700;margin:0 0 .6em}
.info-fakten{margin:0 0 2rem;padding:1.2rem 1.4rem}.info-fakten .fakten{margin:0}
.info-text section{margin:0 0 2rem}
.info-text h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin:0 0 .5em}
.info-text p,.info-text li{font-size:1.04rem;line-height:1.65}
.info-text ul,.info-text ol{padding-left:1.25em}.info-text li{margin:.35em 0}
.info-text a,.info-lead a,.info-faq a,.info-hinweis a,.begriff-kurz a{color:var(--gruen-dunkel);text-underline-offset:.18em}
.info-text code{font-family:var(--mono);font-size:.88em;background:rgba(23,22,26,.06);padding:.1em .35em;border-radius:6px}
.info-ablage{display:grid;grid-template-columns:1.2fr 1fr;gap:1.6rem;align-items:center;margin:2.2rem 0 2.4rem;border:2px solid var(--gruen);box-shadow:0 0 0 6px var(--gruen-hell),var(--schatten)}
.info-ablage h2{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:0 0 .6em}.info-ablage .augenbraue{margin-bottom:.6em}
.info-ablage .haken{margin:0}
.info-ablage-form{display:flex;flex-direction:column;gap:.7rem}
.info-datei{display:flex;flex-direction:column;gap:.45em;font-weight:600;font-size:.92rem;padding:1rem;border:2px dashed var(--linie-stark);border-radius:var(--radius-klein);background:rgba(255,255,255,.7);cursor:pointer}
.info-datei input{font-size:.9rem;max-width:100%}
.info-ablage-form .klein-text{margin:0;text-align:center}
.info-faq{margin:2.4rem 0}.info-faq h2{font-size:clamp(1.45rem,2.6vw,1.9rem)}
.info-begriffe{margin:2rem 0}.info-begriffe .chip{text-decoration:none;font-size:.88rem;padding:.4em .9em}.info-begriffe .chip:hover{background:var(--gruen-hell);color:var(--gruen-dunkel)}
.info-verwandt{margin:2rem 0}
.info-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.info-karten.drei{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.info-karte{display:flex;flex-direction:column;gap:.45em;text-decoration:none;color:var(--tinte);padding:1.2rem 1.3rem}
.info-karte strong{font-family:var(--serif);font-weight:500;font-size:1.15rem;line-height:1.2}
.info-karte span{font-size:.9rem;color:var(--grau);line-height:1.45}
.info-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-stark)}
.info-karte-hervor{border:2px solid var(--gruen)}
.info-extras{margin:0 0 2.6rem}
.info-gruppe{margin:0 0 2.4rem}.info-gruppe h2{font-size:1.5rem}
.info-hinweis{font-size:.85rem;color:var(--grau);border-top:1px solid var(--linie);padding-top:1rem;margin-top:2.4rem}
.begriff-kurz{margin:0 0 2rem;padding:1.2rem 1.4rem;border-left:4px solid var(--gruen)}.begriff-kurz p:last-child{margin:0;font-size:1.15rem;line-height:1.5}
.begriff-beispiel{margin:0;padding:1rem 1.2rem;background:#fff;border-radius:var(--radius-klein);font-family:var(--serif);font-size:1.08rem;color:var(--grau)}
.lexikon-abc{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 2rem}
.lexikon-abc a{display:inline-flex;width:2.2rem;height:2.2rem;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.7);border:1px solid var(--linie);text-decoration:none;color:var(--tinte);font-weight:600}
.lexikon-abc a:hover{background:var(--gruen-hell)}
.lexikon-gruppe{margin:0 0 1.8rem;scroll-margin-top:80px}.lexikon-gruppe h2{font-size:1.6rem;border-bottom:1px solid var(--linie);padding-bottom:.2em}
.lexikon-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem 2rem;margin:0}
.lexikon-liste dt a{font-weight:700;color:var(--tinte);text-decoration:none}.lexikon-liste dt a:hover{color:var(--gruen-dunkel)}
.lexikon-liste dd{margin:.2em 0 0;color:var(--grau);font-size:.93rem;line-height:1.45}
.frist-form{gap:1.2rem;margin:0 0 1.6rem}
.frist-feld{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem}
.frist-feld legend{font-weight:700;margin-bottom:.4rem;font-size:1rem}
.frist-feld input[type=date]{max-width:14rem}
.frist-ergebnis{margin:0 0 2.2rem;border:2px solid var(--gruen)}
.frist-datum{font-family:var(--serif);font-size:clamp(1.8rem,4.5vw,2.6rem);margin:.1em 0 .4em;line-height:1.1}
.frist-schritte{color:var(--grau);font-size:.93rem;padding-left:1.2em;margin:.8em 0 0}.frist-schritte li{margin:.3em 0}
.faq-mehr{margin-top:1.2rem;font-size:.92rem}
@media (max-width:760px){.info-ablage{grid-template-columns:1fr}.info-lead{font-size:1.08rem}}