:root{color-scheme:light;--bg:#fff;--bg2:#f4f6f9;--card:#fff;--fg:#111827;--mut:#5b6472;--line:#e2e6ec;--acc:#1d4ed8;--accfg:#fff;--accsoft:#eaf0ff;--bad:#b91c1c;--ok:#166534;--r:10px;--field:#7c8594}
html[data-theme=dark]{color-scheme:dark;--bg:#0f141c;--bg2:#161c26;--card:#1a212c;--fg:#eef1f6;--mut:#a3adbb;--line:#2a3340;--acc:#6ea0ff;--accfg:#0b1220;--accsoft:#1c2a46;--bad:#f87171;--ok:#4ade80;--field:#6b778a}
@media(prefers-color-scheme:dark){html:not([data-theme]){--bg:#0f141c;--bg2:#161c26;--card:#1a212c;--fg:#eef1f6;--mut:#a3adbb;--line:#2a3340;--acc:#6ea0ff;--accfg:#0b1220;--accsoft:#1c2a46;--bad:#f87171;--ok:#4ade80;--field:#6b778a}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--fg);background:var(--bg)}
a{color:var(--acc)}
img,svg{max-width:100%}
.wrap{width:min(1080px,100% - 2rem);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--card);padding:.5rem;z-index:9}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lg{fill:var(--acc)}
/* Kopf: genau eine Navigation */
.top{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.6rem 0}
.logo{display:flex;align-items:center;min-height:40px;gap:.5rem;font-weight:700;color:var(--fg);text-decoration:none;font-size:1.1rem}
.nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;align-items:center;flex-wrap:wrap}
.nav a.l{display:inline-flex;align-items:center;min-height:40px;padding:.45rem .7rem;border-radius:8px;color:var(--fg);text-decoration:none;font-size:.95rem}
.nav a.l:hover{background:var(--bg2)}
.nav a[aria-current=page].l{color:var(--acc);font-weight:600}
@media(max-width:620px){.nav ul{width:100%;border-top:1px solid var(--line);padding-top:.35rem;gap:0}.nav a.l{padding:.45rem .55rem;font-size:.9rem}}
/* Buttons */
.btn{display:inline-block;background:var(--acc);color:var(--accfg);border:1px solid var(--acc);border-radius:var(--r);padding:.7rem 1.2rem;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:transparent;color:var(--acc)}
.btn.sec:hover{background:var(--accsoft);filter:none}
.btn.sm{padding:.4rem .8rem;font-size:.9rem}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.off,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.linkbtn{background:none;border:0;color:var(--acc);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
/* Typografie */
h1,h2,h3,h4{line-height:1.2;margin:0 0 .6rem}
h1{font-size:clamp(2rem,5vw,3.1rem);letter-spacing:-.02em}
h1 em{font-style:normal;color:var(--acc)}
h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em}
.h1s{font-size:2.2rem}.h2{font-size:1.5rem}.h3{font-size:1.15rem;margin-top:1.8rem}
h3{font-size:1.15rem}h4{font-size:.95rem;margin:1.1rem 0 .4rem;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.lead{font-size:1.15rem;color:var(--mut);max-width:38rem}.lead.sm{font-size:1rem}
.fine{color:var(--mut);font-size:.9rem}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;word-break:break-all}
.center{text-align:center}.center .cta{justify-content:center}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.2rem 0}
/* Abschnitte */
.hero{padding:3.5rem 0 3rem}
.hero .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center}
@media(max-width:760px){.hero .wrap{grid-template-columns:1fr}.hero .phone{max-width:200px;margin:0 auto;display:block}}
.phone{width:100%;max-width:260px;height:auto;justify-self:center}
.ph1{fill:#1f2937}.ph2{fill:#f4f6f9}.ph3{fill:#374151}
.s{padding:3rem 0}.s.alt{background:var(--bg2)}
.grid{display:grid;gap:1rem}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.card.flat{margin:0 0 1rem}
.grid>.card{margin:0}
.num{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accsoft);color:var(--acc);font-weight:700;margin-bottom:.6rem}
/* Preise */
.plan{display:flex;flex-direction:column;position:relative}
.plan .btn{margin-top:auto}
.plan .ticks{margin-bottom:1.2rem}
.price{font-size:1.8rem;font-weight:700;margin:.2rem 0 0}
.badge{display:inline-block;background:var(--bg2);color:var(--mut);border:1px solid var(--line);border-radius:999px;font-size:.75rem;font-weight:600;padding:.12rem .6rem;vertical-align:middle}
.plan .badge{position:absolute;top:1.1rem;right:1.1rem}
.badge.pro{background:var(--accsoft);color:var(--acc);border-color:transparent}
.ticks{list-style:none;padding:0;margin:.8rem 0}
.ticks li{padding-left:1.5rem;margin:.35rem 0;position:relative;font-size:.95rem}
.ticks li::before{content:"";position:absolute;left:.15rem;top:.45rem;width:.6rem;height:.32rem;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
thead th{color:var(--mut);font-weight:600}
th.betrag,td.betrag{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
details{border-bottom:1px solid var(--line);padding:.8rem 0}
summary{cursor:pointer;font-weight:600;padding:.6rem 0}
details p{color:var(--mut);margin:.5rem 0 0}
/* Formulare */
.f{display:grid;gap:.9rem}.f.narrow,.narrow{max-width:30rem}
label{display:grid;gap:.25rem;font-weight:600;font-size:.95rem}
label .h,.h{font-weight:400;color:var(--mut);font-size:.85rem}
input,select,textarea{font:inherit;padding:.6rem .7rem;border:1px solid var(--field);border-radius:8px;background:var(--bg);color:var(--fg);width:100%}
input[type=checkbox],input[type=radio]{width:auto}
.chk{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.err{color:var(--bad);font-size:.85rem;font-weight:400}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}.row.zip{display:grid;grid-template-columns:7rem 1fr;gap:.9rem}
@media(max-width:520px){.row.two{grid-template-columns:1fr}}
.f.inline{display:flex;flex-wrap:wrap;align-items:end;gap:.8rem}.f.inline label{min-width:8rem}
fieldset{border:1px solid var(--line);border-radius:12px;padding:1rem;margin:0}
legend{font-weight:600;padding:0 .4rem}
.flash{padding:.7rem 1rem;border-radius:10px;margin:1rem 0;border:1px solid var(--line);background:var(--bg2)}
.flash.ok{border-color:var(--ok)}.flash.bad{border-color:var(--bad);color:var(--bad)}
.notice{background:var(--accsoft);border-radius:10px;padding:.7rem 1rem;margin:.8rem 0;font-size:.92rem}
.auth{max-width:26rem;margin:3rem auto}
.copy{display:flex;gap:.5rem;flex-wrap:wrap}.copy input{flex:1;min-width:12rem}
.photo{display:flex;gap:1rem;align-items:center}
.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--bg2);display:grid;place-items:center;font-weight:700;color:var(--mut)}
/* Kontobereich */
.app{padding-bottom:3rem}
.tabs{display:flex;gap:.3rem;margin:1.2rem 0;border-bottom:1px solid var(--line)}
.tabs a{padding:.6rem .9rem;text-decoration:none;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a[aria-current=page]{color:var(--acc);border-color:var(--acc);font-weight:600}
.pagehead{display:flex;align-items:center;gap:.8rem}.pagehead h1{margin:0}
.steps{display:flex;gap:.5rem;list-style:none;padding:0;margin:1.2rem 0;flex-wrap:wrap}
.steps li{flex:1;min-width:9rem}
.steps a{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--mut);font-size:.92rem}
.steps b{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--bg2);font-size:.85rem}
.steps .on a{border-color:var(--acc);color:var(--fg);font-weight:600}.steps .on b{background:var(--acc);color:var(--accfg)}
.cardrow{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cardrow h3{margin:0}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:.6rem 0 1rem}
.kpi div{background:var(--bg2);border-radius:12px;padding:.9rem;color:var(--mut);font-size:.85rem}
.kpi b{display:block;font-size:1.6rem;color:var(--fg)}
.locked{opacity:.75}
.danger-zone{margin-top:2rem}
/* Designer */
.designer{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}
@media(max-width:860px){.designer{grid-template-columns:1fr}.prev{order:-1;position:static!important}}
.prev{position:sticky;top:5rem;text-align:center}
.qrbox{background:var(--bg2);border-radius:14px;padding:1rem;display:grid;place-items:center}
.qrbox img{width:100%;max-width:320px;height:auto}
.thumb{display:block;margin:0 auto 1rem;height:auto}
.sws{display:flex;flex-wrap:wrap;gap:.5rem}
.sw{display:flex;gap:.4rem;align-items:center;border:1px solid var(--line);border-radius:10px;padding:.35rem .6rem;font-weight:500;font-size:.88rem;cursor:pointer}
.sw:has(input:checked){border-color:var(--acc);background:var(--accsoft)}
.sw.locked{opacity:.55;cursor:not-allowed}
.sw input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.sw:has(input:focus-visible){outline:2px solid var(--acc)}
.sw small{color:var(--acc);font-weight:700}
.sw input.pick{position:static;opacity:1;width:36px;height:36px;padding:0;border:0;background:none}
/* Oeffentliche Karte */
body.card{background:var(--bg2);min-height:100vh;display:flex;flex-direction:column}body.card main{flex:1}
.cardv{width:min(440px,100% - 1.5rem);margin:1.5rem auto 1rem;background:var(--card);border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.cardv .hd{background:var(--acc);height:84px}
.cardv .bd{padding:0 1.5rem 1.5rem;text-align:center}
.cardv .avatar{width:104px;height:104px;margin:-52px auto .6rem;border:4px solid var(--card);font-size:2rem}
.cardv h1{font-size:1.6rem;margin:.2rem 0}
.cardv .sub{color:var(--mut);margin:0 0 1.2rem}
.cl{list-style:none;padding:0;margin:1.2rem 0 0;text-align:left;display:grid;gap:.4rem}
.cl a{display:flex;gap:.75rem;padding:.7rem .9rem;border-radius:12px;background:var(--bg2);text-decoration:none;color:var(--fg);word-break:break-word}
.cl small{color:var(--mut);display:block}
.cardv .btn{width:100%;font-size:1.1rem;padding:.9rem}
.own{text-align:center;font-size:.8rem;padding:0 1rem .5rem;margin:0;color:var(--mut)}.own a{color:var(--mut)}
/* Eigenwerbung: Platz fuers Angebot ist vorab reserviert, damit nichts springt */
.promo{width:min(440px,100% - 1.5rem);margin:0 auto;padding-bottom:1rem}
.offerslot{min-height:10rem}
.offer{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;position:relative;padding:.9rem 2.6rem .9rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:.9rem;animation:offerin .35s ease-out both}
.offer[hidden]{display:none}
.offer .ot{flex:1 1 14rem;display:grid;gap:.15rem}.offer .ot span{color:var(--mut)}
.offer .btn{width:auto;flex:0 0 auto}
.offer .x{position:absolute;top:.35rem;right:.35rem;width:2.75rem;height:2.75rem;border:0;background:none;color:var(--mut);font-size:1.5rem;line-height:1;cursor:pointer;border-radius:10px}
.offer .x:hover{color:var(--fg)}.offer .x:focus-visible{outline:2px solid var(--acc)}
@keyframes offerin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.offer{animation:none}}
footer{border-top:1px solid var(--line);padding:1.5rem 0;color:var(--mut);font-size:.88rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:var(--mut)}
fieldset>label{margin-top:.9rem}
.chk{display:block}.chk input{margin:.25rem .55rem 0 0;vertical-align:top}
.s .h2{margin-top:2.2rem}

.themebtn{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:8px;padding:.4rem .7rem;font:inherit;font-size:.85rem;cursor:pointer;min-height:40px}
.themebtn:hover{background:var(--bg2)}
.sw.preset{background:transparent;font:inherit;color:var(--fg)}
.sw.preset:disabled{cursor:not-allowed}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.prose{max-width:68ch;line-height:1.7}.prose h2{margin-top:1.8em}.prose h3{margin-top:1.4em}.prose img{max-width:100%;height:auto}
.plain{list-style:none;padding:0;margin:0}.plain li{padding:.35rem 0}.more li{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
form.inl{display:inline;margin-left:.5rem}
input.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
.more li{margin:0}.more a{display:inline-flex;align-items:center;min-height:40px}
/* Profil-Editor: Gruppen, Teilen-Schalter, Live-Vorschau */
.dgrid{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){.dgrid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.dprev{position:sticky;top:1rem}}
.dprev{min-width:0}
.dprev h2{margin:0 0 .6rem}
.phoneprev{border:1px solid var(--line);border-radius:22px;background:var(--bg2);padding:.5rem;max-height:70vh;overflow:auto}
.phoneprev .cardv{margin:.25rem auto;width:100%}
.dprev details{margin-top:.8rem}.dprev summary{cursor:pointer;color:var(--mut);min-height:40px;display:flex;align-items:center}
pre.vc{white-space:pre-wrap;word-break:break-all;overflow:auto;max-height:260px;margin:.4rem 0 0;padding:.7rem;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);font:12px/1.45 ui-monospace,Menlo,Consolas,monospace}
fieldset.sec{border:1px solid var(--line);border-radius:var(--r);padding:.4rem 1rem 1rem;margin:0 0 1rem;min-width:0}
fieldset.sec legend{font-weight:700;padding:0 .4rem}
.frow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem .75rem;align-items:end}
.frow>label:not(.tg){min-width:0}
.frow.addr{align-items:center}
label.tg{display:inline-flex;align-items:center;gap:.4rem;min-height:40px;padding:0 .2rem;color:var(--mut);font-size:.9rem;font-weight:400;cursor:pointer;white-space:nowrap}
label.tg input{width:24px;height:24px;margin:0;accent-color:var(--acc)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.photo .avatar{width:96px;height:96px;flex:none}
.crop{position:relative;display:inline-block;max-width:100%;line-height:0;background:var(--bg2)}
.crop img{max-width:100%;max-height:360px;display:block}
.cropframe{position:absolute;border:2px solid #fff;outline:9999px solid rgba(0,0,0,.45);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.5);pointer-events:none}
#photo-edit label{display:block;margin:.4rem 0}
#photo-edit input[type=range]{width:100%}
.cardv .meta{color:var(--mut);font-size:.9rem;margin:.1rem 0 .6rem}
.cardv .bio{margin:.2rem 0 1rem;white-space:pre-line;color:var(--fg)}
.cl .static{display:flex;gap:.75rem;padding:.7rem .9rem;border-radius:12px;background:var(--bg2);word-break:break-word}
.cardv .btn.sec{margin:.6rem 0 0}
@media(max-width:520px){.frow{grid-template-columns:1fr}.frow>label.tg{justify-self:start}}
.chart{width:100%;height:120px;display:block}.chart .bar{fill:var(--acc)}
.tr-up{color:var(--ok)}.tr-down{color:var(--bad)}
.locknote{margin:.5rem 0 1rem}
@media(max-width:520px){.photo{flex-direction:column;align-items:flex-start}}

/* Iteration 4: Landing, Firmen, Team, Footer */
.g4{grid-template-columns:repeat(4,1fr)}@media(max-width:1000px){.g4{grid-template-columns:1fr 1fr}}@media(max-width:620px){.g4{grid-template-columns:1fr}}
.plan.hl{border-color:var(--acc);box-shadow:0 0 0 2px var(--accsoft)}
.vc{align-items:center}
.ba .card{margin:0}.ba .bad{border-color:var(--bad)}.ba .good{border-color:var(--ok)}
ul.x{list-style:none;padding:0;margin:.8rem 0}ul.x li{padding-left:1.5rem;margin:.35rem 0;position:relative;font-size:.95rem}ul.x li::before{content:"×";position:absolute;left:.15rem;color:var(--bad);font-weight:700}
.bandf{background:var(--accsoft)}
.calc{max-width:34rem}.calc input[type=range]{padding:0;accent-color:var(--acc)}
.calcout{margin:.8rem 0 0}.calcout .big{font-size:2.2rem;font-weight:800;color:var(--acc)}
.refband{display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--accsoft);border-color:transparent;margin:1rem 0}
.refband>div:first-child{flex:1;min-width:16rem}
.share{display:flex;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
footer .fgrid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:1.5rem;justify-content:normal}
footer .fbot{grid-column:1/-1;border-top:1px solid var(--line);padding-top:1rem}
footer h4,footer h2.fh{margin:0 0 .5rem}
footer h2.fh{font-size:.95rem;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
@media(max-width:700px){footer .fgrid{grid-template-columns:1fr}}
.steps2{list-style:none;padding:0;margin:0}.steps2 li{display:flex;gap:.7rem;align-items:center;padding:.5rem 0}.steps2 b{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--accsoft);color:var(--acc);flex:none}
.designer.locked form,.designer.locked .sws{opacity:.55;pointer-events:none}
td.act{white-space:nowrap}td.act form.inl,td.act .btn{margin:.15rem .2rem .15rem 0}
details.rm{display:inline-block;margin-left:.3rem}details.rm summary{display:inline-block;padding:.2rem .6rem;border:1px solid var(--line);border-radius:8px;font-weight:500;font-size:.9rem}
details.rm[open]{display:block;margin:.5rem 0}
.hero .card h3{margin-top:0}
details.grp{border:0;padding:0}details.grp>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
/* ROI-Rechner und Staffeltabelle */
.roi,.roisolo{max-width:none}
.roi .grid.f{gap:.8rem}.roi .g2{grid-template-columns:1fr 1fr}@media(max-width:620px){.roi .g2{grid-template-columns:1fr}}
.roi input[type=range]{padding:0;accent-color:var(--acc)}
.roi details.assume{border-bottom:0;padding:.2rem 0 .6rem}
.roitab th,.roitab td{padding:.5rem .4rem;font-weight:400}.roitab td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.roitab .sum th,.roitab .sum td{font-weight:700;border-top:2px solid var(--line)}
.roisum{background:var(--accsoft);border-radius:var(--r);padding:.7rem .9rem;margin:.8rem 0}
.roisum[hidden]{display:none}
.src{padding-left:1.1rem;margin:.5rem 0;font-size:.85rem;color:var(--mut)}.src li{margin:.4rem 0}
table.tiers th[scope=row]{font-weight:600}table.tiers caption{text-align:left;padding:.3rem 0}

/* ===== Feinschliff (Iteration 5): Raster, Touch-Ziele >= 44px, Mobil-Navigation, Zustände ===== */
:root{--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;--tap:44px;--shadow:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.06);--hero:radial-gradient(60rem 28rem at 85% -10%,var(--accsoft),transparent 70%)}
html[data-theme=dark]{--shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25)}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
[hidden]{display:none!important}
body{overflow-wrap:break-word}
main{min-height:60vh}
/* Kopf */
.top{backdrop-filter:saturate(1.4) blur(8px);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.nav{padding:.35rem 0;gap:.5rem 1rem;flex-wrap:nowrap}
.logo{min-height:var(--tap)}
.nav ul{flex-wrap:nowrap;gap:.15rem}
.nav a.l,.nav .btn.sm{min-height:var(--tap);padding:.5rem .75rem}
.nav .btn.sm{display:inline-flex;align-items:center;margin-left:.25rem}
.themebtn{min-height:var(--tap);min-width:var(--tap);padding:.4rem .8rem;margin-left:.25rem}
.navbtn{display:none;align-items:center;gap:.5rem;min-height:var(--tap);padding:.4rem .9rem;border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.navbtn i{display:block;width:18px;height:2px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}
@media(max-width:760px){
  .js .navbtn{display:inline-flex}
  .nav{flex-wrap:wrap}
  .js .nav nav{display:none;width:100%;order:3}
  .js .nav.open nav{display:block;padding:.25rem 0 .75rem;border-top:1px solid var(--line)}
  .js .nav.open ul{flex-direction:column;align-items:stretch;gap:.1rem}
  .js .nav ul{border-top:0;padding-top:0}
  .nav a.l{padding:.55rem .75rem;font-size:1rem;width:100%}
  .nav .btn.sm{margin:.25rem 0;justify-content:center}
  .themebtn{width:100%;margin:.25rem 0 0;text-align:left}
  html:not(.js) .nav{flex-wrap:wrap}
  html:not(.js) .nav ul{flex-wrap:wrap;width:100%}
}
/* Buttons und Formularelemente */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);line-height:1.2;transition:filter .15s,background .15s,box-shadow .15s}
.btn.sm{min-height:var(--tap);padding:.5rem 1rem;font-size:.95rem}
.btn:focus-visible,.themebtn:focus-visible,.navbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn.danger{background:var(--bad);color:#fff}
html[data-theme=dark] .btn.danger{background:#b91c1c;border-color:#b91c1c;color:#fff}
.btn[aria-busy=true],button[aria-busy=true]{opacity:.7;cursor:progress;pointer-events:none}
.btn[aria-busy=true]::after{content:"";width:1em;height:1em;margin-left:.6em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.linkbtn{min-height:var(--tap);padding:0 .25rem}
input,select,textarea{min-height:var(--tap);font-size:1rem;line-height:1.3}
textarea{min-height:6rem}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
input[type=file]{padding:.5rem;min-height:var(--tap)}
input[type=range]{min-height:var(--tap)}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;accent-color:var(--acc);flex:none}
label.chk{display:flex;gap:.65rem;align-items:flex-start;min-height:var(--tap);padding:.6rem 0;font-weight:400;cursor:pointer}
label.chk input{margin:.1rem 0 0}
.f{gap:var(--s4)}
.err{font-size:.9rem}
summary{min-height:var(--tap);display:flex;align-items:center}
summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.more a,.plain a{min-height:var(--tap);display:inline-flex;align-items:center}
footer .plain a{min-height:var(--tap)}
/* Raster: Abstaende */
.s{padding:clamp(2.25rem,5vw,4rem) 0}
.s .wrap>h2{margin-bottom:var(--s5)}
.s .wrap>.lead{margin:-.8rem 0 var(--s5)}
.hero{padding:clamp(2.25rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem);background:var(--hero)}
.hero .wrap{gap:clamp(1.5rem,4vw,3rem)}
.hero .cta{margin:var(--s5) 0 var(--s4)}
.hero .phone{filter:drop-shadow(0 18px 28px rgba(16,24,40,.18))}
.card{box-shadow:var(--shadow);padding:clamp(1.1rem,3vw,1.6rem)}
.card.flat{margin:0 0 var(--s4)}
.card h3:first-child{margin-top:0}
.grid{gap:clamp(.75rem,2vw,1.25rem)}
.wrap{width:min(1080px,100% - 2*clamp(1rem,4vw,2rem))}
@media(max-width:820px){.g3,.g2{grid-template-columns:1fr}.hero .wrap{text-align:left}}
.cta{align-items:stretch}
@media(max-width:420px){.hero .cta .btn,.cta .btn{flex:1 1 100%}}
.cardrow .actions .btn{flex:0 0 auto}
/* Konto-Bereich */
.app{padding-top:var(--s2);padding-bottom:var(--s7)}
.tabs{overflow-x:auto;scrollbar-width:none;margin:var(--s4) 0 var(--s5)}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;min-height:var(--tap);white-space:nowrap}
/* Review E14: Scroll-Hinweis, wenn Reiter rechts/links abgeschnitten sind (Verlauf am Rand; Deckflächen scrollen mit, Schatten bleibt) */
.tabs{background:linear-gradient(to right,var(--bg) 40%,transparent) left center/2.5rem 100% no-repeat local,linear-gradient(to left,var(--bg) 40%,transparent) right center/2.5rem 100% no-repeat local,linear-gradient(to right,var(--line),transparent) left center/.9rem 100% no-repeat scroll,linear-gradient(to left,var(--line),transparent) right center/.9rem 100% no-repeat scroll}
footer.fapp .fbot{border-top:0;padding-top:0}
.steps a{min-height:var(--tap)}
.pagehead{flex-wrap:wrap}
.kpi{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.kpi div{border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.sw{min-height:var(--tap)}
.sw.preset{padding:.5rem .8rem}
label.tg{min-height:var(--tap)}
label.tg input{width:24px;height:24px}
.copy input{min-width:0}
.copy .btn{flex:0 0 auto}
td.act form.inl,td.act .btn{margin:.2rem .25rem .2rem 0}
.tablewrap,.card>table{overflow-x:auto}
.card:has(>table){overflow-x:auto}
table{min-width:0}
details.rm summary{min-height:var(--tap);display:inline-flex;align-items:center}
.share{gap:.5rem}
footer{padding:var(--s6) 0}
footer .fgrid{gap:var(--s5) var(--s6)}
footer .fbot{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center}
footer .fbot a{display:inline-flex;align-items:center;min-height:var(--tap)}
/* Oeffentliche Kontaktseite */
.cardv{box-shadow:var(--shadow)}
.cl a{min-height:var(--tap);align-items:center}
.own a{display:inline-flex;align-items:center;min-height:var(--tap)}
.offer .btn{min-height:var(--tap)}
/* Leer- und Ladezustaende */
.empty{border:1px dashed var(--line);border-radius:14px;padding:var(--s6) var(--s5);text-align:center;color:var(--mut);background:var(--bg2)}
.empty h3{margin:0 0 .3rem;color:var(--fg)}
.empty p{margin:0 auto var(--s4);max-width:30rem}
.skel{background:linear-gradient(90deg,var(--bg2),var(--line),var(--bg2));background-size:200% 100%;animation:skel 1.2s linear infinite;border-radius:10px}
@keyframes skel{to{background-position:-200% 0}}
/* Kontrast: kein Opacity-Trick auf Text */
.locked{opacity:1;color:var(--mut)}
.sw.locked{opacity:1;color:var(--mut);background:var(--bg2)}
.btn.off,.btn[disabled]{opacity:1;background:var(--bg2);border-color:var(--line);color:var(--mut)}
.badge{color:var(--mut)}
.designer.locked form,.designer.locked .sws{opacity:.7}
/* Empfehlungsprogramm / Teilen */
.ref{display:grid;gap:var(--s4)}
.ref .copy{align-items:stretch}
.refstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.75rem;margin:0}
.refstats div{background:var(--bg2);border-radius:12px;padding:.8rem .9rem;color:var(--mut);font-size:.85rem}
.refstats b{display:block;font-size:1.5rem;color:var(--fg);line-height:1.2}
progress.meter{appearance:none;-webkit-appearance:none;display:block;width:100%;height:10px;border:1px solid var(--line);border-radius:999px;background:var(--bg2);overflow:hidden;color:var(--acc)}
progress.meter::-webkit-progress-bar{background:var(--bg2)}
progress.meter::-webkit-progress-value{background:var(--acc);border-radius:999px}
progress.meter::-moz-progress-bar{background:var(--acc);border-radius:999px}
@media print{.top,footer,.skip,.share,.themebtn,.navbtn{display:none!important}body{background:#fff;color:#000}}
/* Korrekturen aus dem Audit */
label{grid-template-columns:minmax(0,1fr)}
input,select,textarea{min-width:0;max-width:100%}
details.frow.addr{display:block;border:0;padding:.2rem 0 .6rem}
details.frow.addr>summary{font-weight:600}
.addrg{display:grid;grid-template-columns:minmax(5.5rem,7rem) minmax(0,1fr);gap:.75rem;margin:.4rem 0 .4rem}
.addrg>label:nth-child(1),.addrg>label:nth-child(4){grid-column:1/-1}
details.frow.addr>label.tg{margin-top:.2rem}
input[type=color]{width:var(--tap);min-width:var(--tap);padding:3px;border:1px solid var(--field);border-radius:8px;background:var(--bg)}
.sw input.pick{width:var(--tap);height:var(--tap)}
footer .plain a{min-width:var(--tap)}
.chk a{display:inline;min-height:0}
.auth{margin:clamp(1.5rem,6vw,3rem) auto}
.f .h,.auth .fine a{overflow-wrap:anywhere}
.fine a:not(.btn){padding-block:.25rem}
label.chk .ct{display:block;min-width:0}

/* Inhaltsseiten, Empfehlen, Erfahrungen */
footer .fgrid{grid-template-columns:1.2fr 1fr 1.2fr 1.3fr}
@media(max-width:1023px){footer .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){footer .fgrid{grid-template-columns:1fr}}
.crumbs{margin:var(--s4) 0 var(--s3);font-size:.9rem;color:var(--mut)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.crumbs li+li::before{content:"›";margin-right:.5rem;color:var(--mut)}
.crumbs a{display:inline-block;padding:.65rem .1rem;min-height:var(--tap);box-sizing:border-box}
.seo{max-width:46rem;margin-inline:auto}
.seo h1.h1s{font-size:clamp(1.7rem,4.5vw,2.3rem);line-height:1.2;margin:0 0 var(--s3)}
.seo .lead{font-size:1.1rem;color:var(--mut)}
.seo section{margin-top:var(--s6)}
.seo h2{font-size:1.35rem;margin:0 0 var(--s3)}
.seo .cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.answer{background:var(--bg2);border-left:4px solid var(--acc);border-radius:8px;padding:var(--s4);margin:var(--s4) 0}
.seo details{border:1px solid var(--line);border-radius:10px;padding:0 var(--s4);margin:.5rem 0}
.seo details summary{padding:.75rem 0;cursor:pointer;font-weight:600}
.seo-more{max-width:46rem;margin:var(--s5) auto var(--s7)}
.seo-more .more{display:grid;gap:.25rem}
.seo-more .more a{display:inline-block;padding:.6rem 0;min-height:var(--tap);box-sizing:border-box}
table.cmp{border-collapse:collapse;width:100%;min-width:34rem;font-size:.95rem}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:top}
table.cmp thead th{background:var(--bg2)}
table.cmp tbody th{background:var(--bg2);font-weight:600;white-space:nowrap}
.seo .txt textarea{font-size:.95rem;resize:vertical}
.seo .txt h3{margin:0 0 .5rem}
.badges{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s4) 0}
.bdg{padding:var(--s4);border-radius:12px;border:1px dashed var(--line)}
.bdg.lt{background:#f8fafc}.bdg.dk{background:#1e293b}
.bdg img{display:block;max-width:100%;height:auto}
.quote{margin:0}.quote blockquote{margin:0 0 .6rem;font-size:1.05rem}.quote blockquote p{margin:0}
.quote figcaption{color:var(--mut);font-size:.9rem}
.refband.ask{border-color:var(--acc)}
.ref{margin:var(--s5) 0}
.crumbs a{min-width:var(--tap);display:inline-flex;align-items:center;justify-content:center;padding:0 .35rem}

.crumbs ol{align-items:center}
@media(max-width:480px){.ref .copy input{flex:1 1 100%}.seo{padding:var(--s4)}}
@media(max-width:640px){
 table.cmp{min-width:0;display:block}
 table.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 table.cmp tbody,table.cmp tr{display:block}
 table.cmp tr{border:1px solid var(--line);border-radius:10px;margin:0 0 var(--s4);overflow:hidden}
 table.cmp tbody th{display:block;border:0;border-bottom:1px solid var(--line);white-space:normal}
 table.cmp td{display:grid;grid-template-columns:8.5rem 1fr;gap:.5rem;border:0;border-bottom:1px solid var(--line)}
 table.cmp td:last-child{border-bottom:0}
 table.cmp td::before{content:attr(data-label);font-weight:600;color:var(--mut)}
}

/* ---- Messe-Modus: Dashboard ---- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.mtop{margin-top:var(--s4)}
.mflow{padding-left:1.2rem;margin:var(--s3) 0}.mflow li{margin:.35rem 0}.mflow li>b{display:block}
.upg{border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);background:var(--hero),var(--card);box-shadow:var(--shadow)}
.mcards{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:var(--s4) 0}
.mcard{display:block;border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);background:var(--card);color:var(--fg);text-decoration:none;box-shadow:var(--shadow)}
.mcard:hover,.mcard:focus-visible{border-color:var(--acc)}
.mcard b{display:block;font-size:1.05rem}.mcard .fine{display:block;margin-top:.25rem}
.mstat td,.mstat tfoot th{text-align:right;font-variant-numeric:tabular-nums}
.mleads td{vertical-align:top}.mleads details summary{cursor:pointer;color:var(--acc);white-space:nowrap}
.mleads details[open]{min-width:220px}
@media(max-width:720px){
  .mleads thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mleads,.mleads tbody,.mleads tr,.mleads td{display:block;width:100%}
  .mleads tr{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);margin-bottom:var(--s3)}
  .mleads td{border:0;padding:.2rem 0}
}
.kprev{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);margin:var(--s3) 0}
.kprev .kx{position:absolute;inset:0}

/* ---- Messe-Modus: Praesentation und Vollbild-QR (Groessen relativ zum Bildschirm, bis 4K) ---- */
body.kiosk{margin:0;overflow:hidden;height:100vh;height:100dvh;background:#000;overscroll-behavior:none}
body.kiosk .kx{position:fixed;inset:0}
.kx{--kx-acc:#1d4ed8;--kx-acc-t:#fff;--kx-bg:#f8fafc;--kx-fg:#0f172a;--kx-mut:#475569;display:flex;flex-direction:column;background:var(--kx-bg);color:var(--kx-fg);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;font-family:inherit;line-height:1.2}
.kx-dark{--kx-bg:#0b1220;--kx-fg:#f1f5f9;--kx-mut:#a3b1c4}
.kx-v-stand{--kx-bg:#fff;--kx-fg:#0f172a;--kx-mut:#475569}
.kx::before{content:"";position:absolute;left:0;right:0;top:0;height:max(4px,1vmin);background:var(--kx-acc);z-index:1}
.kprev .kx::before{height:4px}
.kx-in{flex:1;min-height:0;container-type:size;container-name:kx}
.kx-g{height:100%;box-sizing:border-box;display:grid;padding:5cqmin 6cqmin;gap:2.5cqmin 6cqmin;
  grid-template-columns:minmax(0,1fr) min(84cqh,52cqw);grid-template-rows:auto 1fr auto auto;
  grid-template-areas:"head qr" "who qr" "cta qr" "foot qr";align-items:center}
.kx-slides,.kx-slide.on{display:contents}
.kx-slide{display:none;margin:0}
.kx-head{grid-area:head;display:flex;align-items:center;gap:3cqmin;min-width:0}
.kx-logo{max-height:12cqmin;max-width:28cqw;object-fit:contain;flex:none}
.kx-h{font-size:7cqmin;line-height:1.05;margin:0;font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere}
.kx-sub{font-size:3.4cqmin;margin:1.2cqmin 0 0;color:var(--kx-mut)}
.kx-qr{grid-area:qr;background:#fff;padding:3cqmin;border-radius:3cqmin;box-shadow:0 1cqmin 4cqmin rgba(0,0,0,.12);aspect-ratio:1;width:100%;box-sizing:border-box;justify-self:center;align-self:center;max-height:100%;animation:kxin .5s ease}
.kx-qr svg{display:block;width:100%;height:100%}
.kx-who{grid-area:who;display:flex;align-items:center;gap:3cqmin;min-width:0;align-self:end;animation:kxin .5s ease}
.kx-who>span{display:flex;flex-direction:column;min-width:0}
.kx-ph{width:16cqmin;height:16cqmin;border-radius:50%;object-fit:cover;flex:none;border:.6cqmin solid var(--kx-acc)}
.kx-name{font-size:6cqmin;font-weight:800;line-height:1.05;overflow-wrap:anywhere}
.kx-job{font-size:3.4cqmin;color:var(--kx-mut);margin-top:.8cqmin}
.kx-cta{grid-area:cta;margin:0;justify-self:start;background:var(--kx-acc);color:var(--kx-acc-t);font-weight:700;font-size:3.6cqmin;padding:1.6cqmin 3.2cqmin;border-radius:99cqmin}
.kx-foot{grid-area:foot;margin:0;font-size:2.1cqmin;color:var(--kx-mut)}
.kx-empty{grid-area:qr;font-size:4cqmin;text-align:center}
@keyframes kxin{from{opacity:0}to{opacity:1}}
@container kx (max-aspect-ratio:1/1){
  .kx-g{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;grid-template-areas:"head" "qr" "who" "cta" "foot";justify-items:center;text-align:center;padding:6cqmin 6cqw;gap:3cqmin}
  .kx-head{flex-direction:column;gap:2cqmin}
  .kx-qr{width:min(84cqw,56cqh);height:auto;max-height:none}
  .kx-who{align-self:center;justify-content:center;text-align:center}.kx-who>span{align-items:center}
  .kx-cta{justify-self:center}
}
/* Vollbild-QR am Handy: QR so gross wie moeglich, Bedienung unten */
.kx-v-stand .kx-foot,.kx-v-stand .kx-cta{display:none}
.kx-v-stand .kx-h{font-size:5cqmin}.kx-v-stand .kx-sub{font-size:3cqmin}
@container kx (max-aspect-ratio:1/1){.kx-v-stand .kx-qr{width:min(94cqw,70cqh);padding:2cqmin}}
.kx-switch{display:flex;gap:.5rem;overflow-x:auto;padding:.6rem .8rem;border-top:1px solid #e2e8f0;scrollbar-width:none;flex:none}
.kx-switch button,.kx-tb{flex:none;min-height:44px;padding:.5rem 1rem;border-radius:99px;border:1px solid #cbd5e1;background:#fff;color:#0f172a;font:inherit;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;cursor:pointer}
.kx-switch button.on{background:var(--kx-acc);border-color:var(--kx-acc);color:var(--kx-acc-t)}
.kx-tools{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;padding:.5rem .8rem calc(.6rem + env(safe-area-inset-bottom));flex:none}
.kx-tb{min-height:40px;padding:.4rem .9rem;font-size:.9rem}
/* Kiosk-Steuerung */
.kx-start{position:absolute;inset:0;z-index:5;border:0;background:rgba(15,23,42,.72);color:#fff;font:inherit;font-size:clamp(1.2rem,3.5vmin,4rem);font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5vmin;padding:5vmin;text-align:center}
.kx-start small{font-size:.55em;font-weight:400;opacity:.85}
.kx-on .kx-start{display:none}
.kx-on{cursor:none}
.kx-pin{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;color:#0f172a;border-radius:14px;padding:1.2rem;box-shadow:0 10px 40px rgba(0,0,0,.35);display:grid;gap:.6rem;min-width:min(320px,90vw);cursor:auto;font-size:clamp(1rem,1.6vmin,1.6rem)}
.kx-pin[hidden],.kx-exit[hidden]{display:none}
.kx-pin input{display:block;width:100%;box-sizing:border-box;font-size:1.4em;letter-spacing:.3em;padding:.5rem;margin-top:.3rem;border:1px solid #cbd5e1;border-radius:8px}
.kx-pin button{min-height:44px;font:inherit;border-radius:8px;border:1px solid #cbd5e1;background:#fff;cursor:pointer}
.kx-pin button[type=submit]{background:#0f172a;color:#fff;border-color:#0f172a}
.kx-pin output{color:#b91c1c;min-height:1.2em}
.kx-exit{position:absolute;z-index:6;left:0;right:0;top:0;display:flex;gap:1rem;align-items:center;justify-content:center;padding:.8rem;background:#0f172a;color:#fff;font-size:clamp(1rem,1.6vmin,1.6rem)}
.kx-exit button{min-height:44px;padding:.4rem 1rem;border-radius:99px;border:0;background:#fff;color:#0f172a;font:inherit;font-weight:700;cursor:pointer}
.kx-net{position:absolute;right:1.4vmin;bottom:1.4vmin;width:1.4vmin;height:1.4vmin;min-width:8px;min-height:8px;border-radius:50%;background:transparent;z-index:2}
.kx-off .kx-net{background:#f59e0b;box-shadow:0 0 0 .4vmin rgba(245,158,11,.25)}
.kprev .kx-net{display:none}
/* Live-Wand */
.kx-v-wand{overflow:auto}
.kw{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:4vmin;padding:6vmin 7vmin}
.kw-h h1{margin:0;font-size:clamp(1.6rem,6vmin,7rem);font-weight:800;line-height:1.05;overflow-wrap:anywhere}
.kw-h p{margin:.6vmin 0 0;color:var(--kx-mut);font-size:clamp(1rem,2.6vmin,3rem)}
.kw-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3vmin}
.kw-t{background:rgba(127,127,127,.08);border-radius:2vmin;padding:4vmin 3vmin;display:flex;flex-direction:column;gap:1vmin;border-top:max(4px,.8vmin) solid var(--kx-acc);min-width:0}
.kw-t b{font-size:clamp(2.6rem,14vmin,16rem);line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.kw-t span{font-size:clamp(.95rem,2.6vmin,3rem);color:var(--kx-mut)}
.kw-sum,.kw-st,.kw-fine{margin:0;font-size:clamp(.9rem,2.2vmin,2.4rem);color:var(--kx-mut)}
.kw-sum b{color:var(--kx-fg);font-variant-numeric:tabular-nums}
.kw-fine{font-size:clamp(.8rem,1.6vmin,1.8rem)}
.kw-off{display:none;color:#b45309;font-weight:700}
.kx-off .kw-off{display:inline}
.kw-up{animation:kwup .8s ease}
@keyframes kwup{from{color:var(--kx-acc)}to{color:inherit}}
@media (max-width:700px),(max-aspect-ratio:3/4){.kw-g{grid-template-columns:1fr}.kw-t{flex-direction:row;align-items:baseline;gap:3vw;padding:3vh 4vw}.kw-t b{font-size:clamp(2.2rem,12vw,6rem)}}
.mstat thead th:not(:first-child){text-align:right}
#kontakte form.f>.btn,#einstellungen form.f>.btn{width:auto;justify-self:start;align-self:flex-start}
.obf{unicode-bidi:bidi-override;direction:rtl;display:inline-block}

.abo-l{text-align:center;margin:1rem 0 0;font-size:.95rem}
.ampel{display:grid;gap:.6rem;margin:1rem 0}
.ampel li{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem 1rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.amp .dot,.ampel .dot{flex:none;width:1.1rem;height:1.1rem;border-radius:50%;margin-top:.15rem;display:inline-block}
.amp{display:flex;gap:.6rem;align-items:center;font-size:1.15rem}
.amp-gruen .dot{background:#16a34a}.amp-gelb .dot{background:#f59e0b}.amp-rot .dot{background:#dc2626}
.plan .forwho{font-weight:600;margin:.6rem 0 .3rem}
.plan .results{margin:0 0 .6rem;padding-left:1.1rem}
.plan .results li{margin:.2rem 0}
.plan details.more summary{cursor:pointer;color:var(--acc);font-size:.92rem;margin:.3rem 0}
/* Eingangsbestaetigungen (Kuendigung, Widerruf, Meldung) */
pre.beleg{white-space:pre-wrap;word-break:break-word;background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:1rem;font-size:.92rem;line-height:1.5}
.ok-note{font-weight:600}
/* Vertrauen (Startseite, /vertrauen) */
.trust .kicker{font-weight:700;color:var(--acc);letter-spacing:.02em;margin:0 0 .3rem}
.trust-list{list-style:none;padding:0;margin:1rem 0}
.trust-list h3{margin:.5rem 0 .3rem}
.ticon{width:32px;height:32px}
.ticon .ti1{fill:var(--acc)}
.ticon .ti2{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trust-statements{padding-left:1.2rem}
.trust-statements li{margin:0 0 1rem}
.ticon .tf1{fill:#111}.ticon .tf2{fill:#dd0000}.ticon .tf3{fill:#ffce00}
.report-l{text-align:center;font-size:.85rem;margin:1rem 0 0}.report-l a{color:var(--mut)}
.anon-hinweis{display:none}.anon-hinweis[data-an],form:has(option[value=kindesmissbrauch]:checked) .anon-hinweis{display:block}

/* Karten-Editor am Handy: Link umbrechen, Datei-Auswahl auf Deutsch, Tippflaechen mind. 24 px */
.copy.stack input{flex:1 1 100%;min-width:0;font-size:.95rem}
@media(min-width:621px){.copy.stack input{flex:1 1 14rem}}
.lbl{margin:.2rem 0 .35rem;font-weight:600}
.file{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;position:relative}
.filein{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filein:focus-visible+label{outline:3px solid var(--acc);outline-offset:2px}
label.tg input,label.chk input[type=checkbox],label.chk input[type=radio]{width:24px;height:24px;flex:0 0 24px}
/* Startseite kompakt: Zielgruppen und Zusagen als Liste statt Kartenraster */
.who{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.2rem 1.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.who li{padding:.55rem 0;border-bottom:1px solid var(--line)}
.who h3,.who h4{font-size:1rem;margin:0 0 .15rem}
.who p{margin:0}
#code-bleibt{margin-top:1rem}#code-bleibt h3{font-size:1.05rem}
details.more{margin:.8rem 0}details.more>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}
.card.bandf h3{margin-top:.4rem}
#vertrauen{margin-top:1.5rem}
.endcta{margin-top:2rem}
@media(max-width:620px){
.hero .phone{max-width:120px}
.steps{gap:.5rem}.steps .card{display:grid;grid-template-columns:2.2rem 1fr;column-gap:.6rem;padding:.75rem .9rem}
.steps .card .num{grid-row:span 2;margin:0}.steps .card h3{margin:0;font-size:1rem}.steps .card p{margin:.1rem 0 0}
.trust-list .card{padding:.8rem .9rem}
}
.card h2.h3:first-child,.cardrow h2.h3{margin-top:0}.h4{font-size:1rem;margin:var(--s5) 0 var(--s2)}h2+.h4,.h4:first-child{margin-top:0}
.err-note{background:var(--card);border-left:4px solid var(--bad);padding:.6rem .9rem;border-radius:8px}
dl.facts{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;gap:.3rem 1rem;margin:0}dl.facts dt{color:var(--mut)}dl.facts dd{margin:0;overflow-wrap:anywhere}
.fnref{font-size:.6em;vertical-align:super;line-height:0}.fn{max-width:44rem;margin:.4rem 0 .8rem}.kicker{font-size:.85rem;color:var(--mut);margin-top:.6rem}
.subline{font-size:1.15rem;margin:.4rem 0 0}
/* Wunsch-Adresse */
.vanity summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline}.vanity summary .h3{margin:0}
.prefix{display:flex;align-items:stretch;border:1px solid var(--field);border-radius:8px;overflow:hidden;background:var(--card)}
.prefix .pre{padding:.55rem .5rem;background:var(--bg2);color:var(--mut);font-size:.85rem;white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.prefix input{border:0;background:transparent;color:var(--fg);flex:1;min-width:0;border-radius:0}
.chip{display:inline-block;margin:.15rem .1rem;padding:.3rem .6rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg);font:inherit;font-size:.85rem;cursor:pointer;min-height:32px}
/* Ansichten pro Empfänger: Matrix Ansichten × Felder, mobil kompakt, bei vielen Ansichten horizontal scrollbar mit fester Feldspalte */
.mxwrap{overflow-x:auto;margin:.6rem 0 1rem;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
form:has(>.mxwrap){min-width:0;max-width:100%}
table.mx{width:100%;font-size:.85rem}
table.mx th,table.mx td{padding:.3rem .25rem;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
table.mx th[scope=row]{text-align:left;font-weight:500;position:sticky;left:0;background:var(--card);z-index:1;min-width:6.4rem;max-width:7.6rem;hyphens:auto;overflow-wrap:break-word}
table.mx thead th{font-size:.75rem;font-weight:600;color:var(--mut)}
table.mx thead th:first-child{position:sticky;left:0;background:var(--card);z-index:2}
table.mx td.def{color:var(--mut)}
table.mx input[type=checkbox]{width:24px;height:24px;margin:0;accent-color:var(--acc)}
table.mx input.mxl{width:4.9rem;min-height:36px;padding:.2rem .3rem;font-size:.8rem;font-weight:600}
.view .vqr{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:.6rem 0}
.view .vqr img{width:160px;height:160px;border:1px solid var(--line);border-radius:8px;background:#fff}
.view form{margin-top:.5rem}
/* Zeitplan (Pro) */
.zp .zp-state{padding:.5rem .75rem;border-radius:.5rem;margin:.5rem 0}
.zp .zp-state{background:var(--bg2);border-left:4px solid var(--mut)}
.zp .zp-state.on{border-left-color:var(--ok)}
.zp .zp-state.off{border-left-color:var(--bad)}
.zp .zp-toggle{width:100%;min-height:3rem;font-size:1.05rem}
.zp fieldset{border:0;padding:0;margin:.75rem 0 0}
.zp legend{font-weight:600;margin-bottom:.25rem}
.zp .zp-radio{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}
.zp .zp-days{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.zp .zp-days .chip{position:relative;display:inline-flex}
.zp .zp-days .chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.zp .zp-days .chip span{display:inline-flex;align-items:center;justify-content:center;min-width:2.75rem;min-height:2.75rem;border:1px solid var(--line);border-radius:.5rem;font-weight:600}
.zp .zp-days .chip input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--accfg)}
.zp .zp-days .chip input:focus-visible+span{outline:3px solid var(--acc);outline-offset:2px}
.zp .zp-days .chip input:disabled+span{opacity:.5}
.zp .zp-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.zp .zp-row input{width:100%;min-height:2.75rem}
.zp form+form{margin-top:.75rem}
.zp-closed .zp-code{font-size:1.6rem;letter-spacing:.5em;text-align:center;max-width:9rem}
/* Abstand Kopfleiste -> erster Inhalt und letzter Inhalt -> Footer, zentral für alle Inhaltsseiten.
   Bänder (z. B. .hero, section.s) bringen eigenes Padding mit; Ränder kollabieren mit vorhandenen (z. B. .auth), es wird nichts doppelt. */
main{display:flow-root} /* Ränder bleiben in main, auch wenn min-height greift */
main>.wrap:not(.app):first-child{margin-top:clamp(1.5rem,5vw,2rem)}
main>.wrap:not(.app):last-child{margin-bottom:clamp(1.5rem,5vw,2.5rem)}
/* Raster ohne Waise: die letzte Zeile hat nie nur eine Karte. Kartenraster mit .grid wählen die Klasse nach Anzahl (util.raster);
   .who und .kpi richten sich hier nach der Anzahl ihrer Einträge. Geprüft bei 1280, 1024, 768 und 390 px. */
.who:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1099px){.who:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:559px){.who:has(>li:nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}
.kpi:has(>:nth-child(3):last-child),.kpi:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.kpi:has(>:nth-child(4):last-child),.kpi:has(>:nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.kpi:has(>:nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}}
/* Ticketsystem: Verlauf und Fristampel */
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.ticket-verlauf{display:grid;gap:.6rem;margin:1rem 0}
.ticket-verlauf .notiz{border-style:dashed}
.ampel{font-weight:600}