/* Level11 Partner-App. Regeln aus UI.md (60/30/10, 8pt-Grid, Skala 1.25, fünf Zustände). Handy zuerst. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/hanken-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
 --bg:#f7f6f3;--surface:#ffffff;--card:#efeee9;--ink:#101012;--muted:#55555c;--line:#dedcd5;
 --accent:#ffd21f;--accent-hover:#f2c400;
 --ok:#16603c;--ok-bg:#e1f1e7;--info:#0b4f96;--info-bg:#e2edf9;--warn:#7a4f00;--warn-bg:#fff0c4;--bad:#9b2f26;--bad-bg:#fae3df;--neutral:#3d3d44;--neutral-bg:#ecebe6;
 --sh-sm:0 1px 2px rgba(40,30,10,.06);
 --sh-md:0 2px 4px rgba(40,30,10,.04),0 12px 28px rgba(40,30,10,.1);
 --sh-xl:0 24px 64px rgba(20,14,4,.3);
 --accent-soft:#fff6cf;--stage:#e4e2db;
 --r-s:8px;--r-m:12px;--r-l:16px;--r-xl:24px;
 --ease:cubic-bezier(.16,1,.3,1);
 --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
 --fs-s:.875rem;--fs-0:1rem;--fs-1:1.25rem;--fs-2:1.5625rem;--fs-3:1.953rem;--fs-4:2.441rem;
 color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-0)/1.5 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Werkzeugleiste (nur Entwurf) ---------- */
.devbar{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;min-height:48px;padding:4px 16px;background:#101012;color:#fff;font-size:var(--fs-s)}
.devbar .tag{font-weight:800;letter-spacing:.02em;color:#ffd21f}
.devbar .tag-s{display:none}
.devbar :focus-visible{outline-color:#fff}
.devbar,.seg{scrollbar-width:none}
.devbar::-webkit-scrollbar,.seg::-webkit-scrollbar{display:none}
.seg{display:inline-flex;gap:4px;max-width:100%;padding:4px;overflow-x:auto;border-radius:var(--r-m);background:rgba(255,255,255,.1)}
.seg button{min-height:40px;padding:0 16px;white-space:nowrap;border:0;border-radius:var(--r-s);background:transparent;color:inherit;font-weight:600;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.seg button:hover{background:rgba(255,255,255,.16)}
.seg button:active{transform:scale(.98)}
.seg button[aria-pressed="true"]{background:#ffd21f;color:#101012}

/* ---------- Bausteine ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:var(--r-m);background:var(--accent);color:#101012;font-weight:700;cursor:pointer;text-decoration:none;transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:disabled:hover{background:var(--accent)}.btn:disabled:active{transform:none}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}
.btn.ghost:disabled:hover{background:transparent;color:var(--ink)}
.btn.text{padding:0 12px;background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.btn.text:hover{background:var(--card)}
.btn.sm{min-height:44px;padding:0 16px;font-size:var(--fs-s)}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-m);background:transparent;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.icon-btn:hover{background:var(--card)}.icon-btn:active{transform:scale(.96)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 12px;border-radius:99px;font-size:var(--fs-s);font-weight:600;white-space:nowrap}
.chip i{width:8px;height:8px;border-radius:50%;background:currentColor}
.t-ok{background:var(--ok-bg);color:var(--ok)}.t-info{background:var(--info-bg);color:var(--info)}.t-warn{background:var(--warn-bg);color:var(--warn)}.t-bad{background:var(--bad-bg);color:var(--bad)}.t-neutral{background:var(--neutral-bg);color:var(--neutral)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-sm);padding:24px}
.field{display:grid;gap:8px}
.field label,.lbl{font-weight:700}
.field .hint{font-size:var(--fs-s);color:var(--muted)}
input[type=text],input[type=tel],input[type=password],input[type=email],input[type=search],input[type=number],input[type=date],select,textarea{width:100%;min-height:48px;padding:0 16px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface);color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
textarea{padding:12px 16px;min-height:96px;resize:vertical}
/* Auswahlfelder: eigenes Aussehen, damit Höhe und Pfeil in allen Browsern gleich sind (Safari am Mac ignoriert sonst die Höhe) */
select:not(.devbar select){-webkit-appearance:none;appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101012' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:20px;text-overflow:ellipsis}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
input[aria-invalid=true]{border-color:var(--bad)}
input:disabled,select:disabled{opacity:.5;cursor:not-allowed}
.err{min-height:0;font-size:var(--fs-s);color:var(--bad);font-weight:600}
.err:empty{display:none}
.bar{height:8px;border-radius:99px;background:var(--card);overflow:hidden}
.bar i{display:block;height:100%;width:100%;border-radius:99px;background:var(--ink);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .4s var(--ease)}
.chk{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;cursor:pointer}
.chk input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chk .box{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--ink);border-radius:var(--r-s);background:var(--surface);color:transparent;transition:background .2s var(--ease),transform .2s var(--ease),color .2s var(--ease)}
.chk:hover .box{background:var(--card)}
.chk input:active+.box{transform:scale(.92)}
.chk input:checked+.box{background:var(--ink);color:var(--bg)}
.chk input:focus-visible+.box{outline:2px solid var(--ink);outline-offset:3px}
.chk input:disabled+.box{opacity:.5}
.chk .ico{width:18px;height:18px;stroke-width:3}
#toast{position:fixed;left:50%;bottom:24px;z-index:80;max-width:calc(100vw - 32px);padding:12px 24px;border-radius:var(--r-m);background:#101012;color:#fff;font-weight:600;box-shadow:var(--sh-md);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .3s var(--ease),opacity .3s var(--ease)}
#toast.on{transform:translate(-50%,0);opacity:1}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;font-size:1.3rem;letter-spacing:-.04em}
.logo svg{display:block}
.logo .tagp{margin-left:8px;padding:2px 12px;border-radius:99px;background:var(--card);font-size:var(--fs-s);font-weight:700;letter-spacing:0}
.avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--card);font-size:var(--fs-s);font-weight:800}

/* ---------- Verkäufer: Kopf, Login, Onboarding ---------- */
.me{display:flex;align-items:center;gap:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.micro{font-size:var(--fs-s);color:var(--muted)}
.next{display:grid;gap:16px;margin:0 0 32px;counter-reset:n}
.next li{display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:start}
.next li::before{counter-increment:n;content:counter(n);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--card);font-weight:800;font-size:var(--fs-s)}
.next li.done::before{content:"✓";background:var(--ink);color:var(--bg)}
.next b{display:block}
.next span{color:var(--muted);font-size:var(--fs-s)}
.big-ok{display:grid;place-items:center;width:64px;height:64px;margin-bottom:24px;border-radius:50%;background:var(--accent);color:#101012}
.big-ok .ico{width:32px;height:32px;stroke-width:3}

/* ---------- Verkäufer: Dashboard ---------- */
.home{display:grid;gap:24px;padding:24px 16px 120px}
.sub{color:var(--muted);font-size:var(--fs-s)}
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-m);background:var(--card)}
.tabs button{min-height:44px;padding:0 16px;border:0;border-radius:var(--r-s);background:transparent;font-weight:600;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.tabs button:hover{background:var(--line)}
.tabs button:active{transform:scale(.98)}
.tabs button[aria-pressed="true"]{background:var(--surface);box-shadow:var(--sh-sm);font-weight:800}
.listbar{display:grid;gap:8px;margin-bottom:16px}
.detail{display:grid;grid-template-columns:1fr;gap:16px;padding:8px 16px 16px}
.detail h4{font-size:var(--fs-s);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:16px}
.ps{display:grid;gap:16px}
.ps li{display:grid;grid-template-columns:1fr;gap:4px;padding:16px;border-radius:var(--r-m);background:var(--card)}
.ps .p{font-weight:600}
.ps .l{color:var(--muted)}
.ps .ico{display:none}
.url{margin-top:16px;font-size:var(--fs-s);color:var(--muted)}
.empty{padding:48px 16px;text-align:center;color:var(--muted)}

/* ---------- Gamification: Level, Wochenziel, Serie, Erste Schritte, Abzeichen ---------- */
.pill{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:99px;background:var(--accent);color:#101012;font-size:var(--fs-1);font-weight:800;letter-spacing:-.02em}
.goal{display:grid;grid-template-columns:1fr;gap:16px}
.goal h3{font-size:var(--fs-1);letter-spacing:-.02em}
.goal .listbar{margin:16px 0 0}
.goal .msg{margin-top:16px;padding:12px 16px;border-radius:var(--r-m);background:var(--card);font-weight:600}
.goal.met .msg{background:var(--accent);color:#101012}
.serie{display:grid;gap:16px;align-content:start;padding-top:16px;border-top:1px solid var(--line)}
.serie .big{display:flex;align-items:baseline;gap:8px}
.serie .big b{font-size:var(--fs-3);font-weight:800;letter-spacing:-.04em;line-height:1}
.dots{display:flex;gap:8px;flex-wrap:wrap}
.dot{display:grid;justify-items:center;gap:4px;font-size:var(--fs-s);color:var(--muted)}
.dot i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);color:var(--muted)}
.dot.ok i{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.dot.now i{border-style:dashed;border-color:var(--ink);color:var(--ink)}
.dot.now.ok i{background:var(--accent);border-style:solid;color:#101012}
.dot .ico{width:16px;height:16px;stroke-width:3}
.fs{padding:0;overflow:hidden}
.fs summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 24px;cursor:pointer;list-style:none;font-weight:800;transition:background .2s var(--ease)}
.fs summary:hover{background:var(--card)}
.fs summary::-webkit-details-marker{display:none}
.fs summary .ico{transition:transform .25s var(--ease)}
.fs[open] summary .ico{transform:rotate(180deg)}
.fs .in{display:grid;gap:16px;padding:8px 24px 24px}
.fsteps{display:grid;gap:8px}
.fsteps li{display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:center;min-height:48px}
.fsteps .c{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--line);color:transparent}
.fsteps li.done .c{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.fsteps li.next .c{border-color:var(--ink);background:var(--accent);color:transparent}
.fsteps li.done b{color:var(--muted);font-weight:600}
.fsteps .c .ico{width:16px;height:16px;stroke-width:3}
.fsteps span.h{display:block;font-size:var(--fs-s);color:var(--muted)}
.confetti{position:fixed;inset:0;z-index:70;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-16px;width:10px;height:16px;border-radius:2px;opacity:0;animation:fall 1.8s var(--ease) forwards}
@keyframes fall{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:0;transform:translate3d(var(--dx),105vh,0) rotate(var(--r))}}

/* ---------- Verkäufer-App (Handy zuerst, auf dem Desktop als schmale Spalte) ---------- */
body.sh{background:var(--stage)}
.sapp{max-width:480px;min-height:calc(100vh - var(--dev,0px));margin:0 auto;background:var(--bg);box-shadow:0 0 0 1px var(--line)}
.sapp .card{padding:16px}
.sapp .card.fs{padding:0}
.ti{position:relative;display:inline-grid}
.tb{position:absolute;top:-8px;left:14px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--accent);color:#101012;font-size:.8125rem;font-weight:800}
.strip{display:grid;grid-template-columns:1fr 1fr 24px;align-items:center;gap:16px;width:100%;min-height:64px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--sh-sm);text-align:left;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.strip:hover{box-shadow:var(--sh-md)}
.strip:active{transform:scale(.99)}
.strip b{display:block}
.strip .sub{display:block}
.tabs.full{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.tabs.full button{padding:0 8px;white-space:nowrap}

/* ---------- Status, Tipps, Einführung ---------- */
.stpanel{display:grid;gap:16px;padding:16px;border-radius:var(--r-m);background:var(--card)}
.stpanel .lbl{font-size:var(--fs-s);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stb{min-height:48px;padding:8px 12px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface);font-weight:700;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.stb:hover{border-color:var(--ink)}
.stb:active{transform:scale(.98)}
.stb[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sth{font-size:var(--fs-s);color:var(--muted)}
.tips{display:grid;gap:8px}
.tip{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--sh-sm)}
.tip summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:8px 16px;border-radius:var(--r-l);cursor:pointer;list-style:none;transition:background .2s var(--ease)}
.tip summary:hover{background:var(--card)}
.tip summary::-webkit-details-marker{display:none}
.tip summary b{display:block;font-weight:800}
.tip .ph{display:block;font-size:var(--fs-s);color:var(--muted)}
.tip .tr{display:flex;align-items:center;gap:8px}
.tip .tr>.ico:last-child{transition:transform .25s var(--ease)}
.tip[open] .tr>.ico:last-child{transform:rotate(180deg)}
.tip .rd{display:inline-grid;color:var(--ok)}
.tip .tb2{display:grid;gap:12px;padding:0 16px 16px}
.quote{padding:12px 16px;border-left:3px solid var(--accent);border-radius:0 var(--r-m) var(--r-m) 0;background:var(--card)}
.quote .sub{display:block;margin-bottom:4px;font-weight:700}
.avoid{font-size:var(--fs-s);color:var(--muted)}
.whylist{display:grid;gap:16px;margin-top:16px;counter-reset:w}
.whylist li{display:grid;grid-template-columns:32px 1fr;gap:12px}
.whylist li::before{counter-increment:w;content:counter(w);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#101012;font-size:var(--fs-s);font-weight:800}
.whylist b{display:block}
.whylist span{color:var(--muted)}
.strip.one{grid-template-columns:1fr 24px}

/* ---------- Tabellen ---------- */
.tblwrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--sh-sm)}
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:var(--fs-s);font-weight:600;color:var(--muted);white-space:nowrap}
.tbl td{padding:8px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .2s var(--ease)}
.tbl tbody tr:hover{background:var(--card)}
.tbl tr.sel{background:var(--info-bg)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .idle{font-weight:700}
.tbl .namebtn{min-width:120px}
.namebtn{display:block;min-height:44px;padding:0;border:0;background:none;text-align:left;cursor:pointer;border-radius:var(--r-s)}
.namebtn b{display:block}
.namebtn span{display:block;font-size:var(--fs-s);color:var(--muted)}
.namebtn:hover b{text-decoration:underline;text-underline-offset:3px}
.minibar{display:flex;align-items:center;gap:12px;min-width:136px}
.minibar .bar{flex:1}
.minibar span{font-size:var(--fs-s);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Admin ---------- */
.adm{display:grid;grid-template-columns:256px 1fr;min-height:calc(100vh - var(--dev,0px));min-height:calc(100dvh - var(--dev,0px))}
.side{position:sticky;top:var(--dev,0px);height:calc(100vh - var(--dev,0px));height:calc(100dvh - var(--dev,0px));padding:24px 16px;display:flex;flex-direction:column;gap:32px;border-right:1px solid var(--line);background:var(--surface)}
.nav{display:grid;gap:4px}
.nav button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 16px;border:0;border-radius:var(--r-m);background:transparent;text-align:left;font-weight:600;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.nav button:hover{background:var(--card)}.nav button:active{transform:scale(.98)}
.nav button[aria-current="page"]{background:var(--card);font-weight:800}
.badge{margin-left:auto;display:grid;place-items:center;min-width:28px;height:24px;padding:0 8px;border-radius:99px;background:var(--accent);color:#101012;font-size:var(--fs-s);font-weight:800}
.side .me{margin-top:auto;padding:0 8px}
.main{padding:32px 32px 120px}
.main-in{max-width:1200px;margin:0 auto;display:grid;gap:32px}   /* mittig im Bereich rechts der Seitenleiste (Wunsch 2026-10-15) */
.ph h1{font-size:var(--fs-3);letter-spacing:-.03em;line-height:1.15}
.ph p{margin-top:8px;color:var(--muted)}
.todo{display:grid;gap:0;padding:8px 24px}
.todo li{display:flex;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.todo li:last-child{border:0}
.todo .n{min-width:56px;font-size:var(--fs-3);font-weight:800;letter-spacing:-.04em;line-height:1}
.todo .t{flex:1}
.todo .t b{display:block}
.todo .t span{font-size:var(--fs-s);color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{padding:24px}
.kpi .k{font-size:var(--fs-s);color:var(--muted);font-weight:600}
.kpi .v{display:block;margin-top:8px;font-size:var(--fs-3);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.kpi .d{margin-top:4px;font-size:var(--fs-s);color:var(--muted)}
.two{display:grid;grid-template-columns:3fr 2fr;gap:24px}
.card h2{font-size:var(--fs-1);letter-spacing:-.02em;margin-bottom:24px}
.funnel{display:grid;gap:16px}
.fr{display:grid;grid-template-columns:168px 1fr 96px;gap:16px;align-items:center}
.fr .lb{font-weight:600}
.fr .tr{height:32px;border-radius:var(--r-s);background:var(--card);overflow:hidden}
.fr .tr i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(var(--p));border-radius:var(--r-s)}
.fr:first-child .tr i{background:var(--ink)}
.fr .ct{text-align:right;font-variant-numeric:tabular-nums}
.fr .ct small{color:var(--muted)}
.stuck{display:grid;gap:8px;margin:24px 0 0}
.stuck li{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
.toolbar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.search{position:relative;flex:1;min-width:240px;max-width:400px}
.search .ico{position:absolute;left:16px;top:14px;color:var(--muted);pointer-events:none}
.search input{padding-left:48px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:99px;background:var(--surface);font-weight:600;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.fchip:hover{border-color:var(--ink)}.fchip:active{transform:scale(.98)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.fchip small{font-size:var(--fs-s);opacity:.7;font-variant-numeric:tabular-nums}
.bulk{position:fixed;left:50%;bottom:24px;z-index:40;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px);padding:12px 12px 12px 24px;border-radius:var(--r-l);background:#101012;color:#fff;box-shadow:var(--sh-xl);transform:translateX(-50%)}
.bulk b{font-variant-numeric:tabular-nums}
.bulk .btn.ghost{color:#fff;box-shadow:inset 0 0 0 1.5px #fff}.bulk .btn.ghost:hover{background:#fff;color:#101012}
.bulk .btn.text{color:#fff}.bulk .btn.text:hover{background:rgba(255,255,255,.12)}
.bulk :focus-visible{outline-color:#fff}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(272px,300px);gap:16px;overflow-x:auto;padding-bottom:16px;align-items:start}
.col{display:grid;gap:8px;padding:12px;border-radius:var(--r-xl);background:var(--card)}
.col-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8px 4px}
.col-h h3{font-size:var(--fs-0);letter-spacing:-.01em}
.col-h .sub{display:block}
.pc{display:grid;gap:8px;width:100%;padding:16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--sh-sm);text-align:left;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pc:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.pc:active{transform:scale(.99)}
.pc .nm{font-weight:800}
.pc .meta{font-size:var(--fs-s);color:var(--muted)}
.pc .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-s)}
.pc .who{display:flex;align-items:center;gap:8px;color:var(--muted)}
.pc .who .avatar{width:24px;height:24px;font-size:12px}
.more{min-height:44px;border:0;border-radius:var(--r-m);background:transparent;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.more:hover{background:var(--line)}

/* ---------- Dialoge ---------- */
dialog{padding:0;border:0;border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--sh-xl);width:calc(100vw - 32px);max-width:760px;max-height:calc(100dvh - 32px);overflow:hidden}
dialog[open]{display:flex;flex-direction:column;animation:pop .3s var(--ease)}
dialog::backdrop{background:rgba(10,10,12,.45);backdrop-filter:blur(4px)}
dialog.drawer{margin:0 0 0 auto;max-width:520px;height:100dvh;max-height:none;border-radius:var(--r-xl) 0 0 var(--r-xl)}
dialog.drawer[open]{animation:slide .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:.6;transform:translateX(48px)}to{opacity:1;transform:none}}
.dh{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 16px 16px 24px;border-bottom:1px solid var(--line)}
.dh h2{font-size:var(--fs-2);letter-spacing:-.03em;line-height:1.15}
.db{flex:1;overflow:auto;padding:24px;display:grid;gap:24px;align-content:start}
.df{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--line);background:var(--surface)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 24px}
.facts dt{color:var(--muted);font-size:var(--fs-s);padding-top:2px}
.facts dd{font-weight:600;word-break:break-word}
.group{display:grid;gap:16px}
.group>h3{font-size:var(--fs-s);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.plist{display:grid;gap:8px}
.plist button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);text-align:left;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.plist button:hover{background:var(--card)}.plist button:active{transform:scale(.99)}
.plist b{display:block}
.plist small{color:var(--muted)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:start}
.prow textarea{grid-column:1;min-height:48px;padding:11px 16px;line-height:1.4;resize:none;overflow:hidden}
.prow .icon-btn{grid-column:2;grid-row:1/span 3;align-self:center}
.two-f{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 24px;border-radius:var(--r-m);background:var(--card)}
.calc b{font-weight:800}
.calc .v{padding:0 12px;border-radius:var(--r-s);background:var(--accent);color:#101012;font-size:var(--fs-1);font-weight:800}
.rcpt{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Mobil ---------- */
@media (max-width:1040px){
 .kpis{grid-template-columns:repeat(2,1fr)}
 .two,.top2{grid-template-columns:1fr}
}
@media (max-width:960px){
 .adm{grid-template-columns:1fr}
 .side{position:static;height:auto;flex-direction:row;align-items:center;gap:16px;padding:8px 16px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
 .side .logo{display:none}
 .side .me{position:sticky;right:0;margin:0 0 0 auto;padding:0 0 0 8px;background:var(--surface);box-shadow:-12px 0 12px -4px var(--surface)}   /* Passwort und Abmelden bleiben rechts sichtbar, auch wenn die Leiste scrollt */
 .side .me .avatar,.side .me>span:not(.avatar){display:none}
 .nav{display:flex}
 .nav button{width:auto;white-space:nowrap}
 .main{padding:24px 16px 120px}
}
@media (max-width:760px){
 .wrap,.top-in{padding-left:16px;padding-right:16px}
 .ps li{grid-template-columns:1fr}
 .ps .ico{display:none}
 .kpis{grid-template-columns:1fr 1fr;gap:8px}.kpi{padding:16px}
 .fr{grid-template-columns:1fr 72px;gap:8px}.fr .tr{grid-column:1/-1;grid-row:2}
 .todo li{flex-wrap:wrap;gap:12px}
 .tbl thead{display:none}
 .tbl,.tbl tbody,.tbl tr,.tbl td{display:block}
 .tbl tr{padding:12px 16px;border-bottom:1px solid var(--line)}
 .tbl td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:4px 0;border:0;text-align:right}
 .tbl td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:var(--fs-s);text-align:left}
 .tbl .num{text-align:right}
 .two-f{grid-template-columns:1fr}
 dialog.drawer{max-width:none;width:100vw;border-radius:0}
 .devbar{position:static;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:4px 8px}
 .devbar .tag{display:none}
 .devbar .tag-s{display:inline;flex:none}
 .devbar .seg{flex:none}
 .top .me .nm{display:none}
 .seg button{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- Echtbetrieb: Zusätze ---------- */
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:12px 24px;border-radius:var(--r-s);background:var(--ink);color:var(--bg);font-weight:700;text-decoration:none;transition:transform .2s var(--ease)}
.skip:focus{top:16px}
.skel{height:16px;margin:16px 0;border-radius:var(--r-s);background:var(--card);animation:skel 1.2s ease-in-out infinite alternate}
.skel.s1{width:60%;height:32px}
.skel.s3{width:80%}
@keyframes skel{from{opacity:.5}to{opacity:1}}
.phr{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tb-actions{display:flex;gap:8px;flex-wrap:wrap}
.dupe{font-size:var(--fs-s);font-weight:600;color:var(--warn)}
.dupe:empty{display:none}
.sched{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.sched legend{padding:0;margin-bottom:8px;font-weight:700}
.rad{position:relative;display:block}
.rad input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.rad span{display:grid;gap:2px;padding:12px 16px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface);transition:border-color .2s var(--ease),background .2s var(--ease)}
.rad small{font-size:var(--fs-s);color:var(--muted)}
.rad:hover span{border-color:var(--ink)}
.rad input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--card)}
.rad input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
a.strip{text-decoration:none;color:inherit}
#toast.bad{background:#9b2f26;color:#fff}
.xc{display:flex;gap:4px;flex-wrap:wrap}
.tbl tfoot td{border-top:2px solid var(--line);background:var(--card)}
.devbar select{width:auto;max-width:240px;min-height:40px;padding:0 12px;border:0;border-radius:var(--r-s);background:rgba(255,255,255,.12);color:#fff}
.devbar select option{color:#101012}
.side .me{justify-content:space-between}

/* ---------- Verkäufer-Start im Banking-Stil (Entwurf A, gewählt am 2026-10-12) ---------- */
:root{--ink-card:#101012;--glass:rgba(244,243,240,.7);--glass-line:rgba(255,255,255,.75);--glass-sh:0 8px 30px rgba(60,40,10,.1)}
body.sh #toast{bottom:104px}
body.sh:has(#sheet[open]) #toast{bottom:calc(24px + env(safe-area-inset-bottom))}
.home{display:grid;gap:24px;padding:32px 20px 148px}
.hero{display:grid}
.hero .lbl{display:block;font-size:var(--fs-s);font-weight:600;color:var(--muted)}
.hero .big{display:block;margin:4px 0 8px;font-size:clamp(2.5rem,13vw,3.375rem);font-weight:800;letter-spacing:-.045em;line-height:1.05}
.cap{font-size:var(--fs-s);color:var(--muted)}
.hero .cap{max-width:32ch}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pills:empty{display:none}
.acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.act{display:grid;justify-items:center;align-content:start;gap:8px;padding:0;border:0;background:none;color:var(--ink);font-size:var(--fs-s);font-weight:600;text-decoration:none;cursor:pointer}
.act i{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--card);font-style:normal;transition:transform .2s var(--ease),background .2s var(--ease)}
.act.pri i{background:var(--accent);color:#101012}
.act:hover i{background:var(--line)}.act.pri:hover i{background:var(--accent-hover)}.act:active i{transform:scale(.94)}
.act i .tb{top:-2px;left:auto;right:-6px}
.bcard{position:relative;overflow:hidden;display:grid;gap:16px;width:100%;padding:20px;border:0;border-radius:24px;background:var(--accent);color:#101012;text-align:left;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.bcard::before{content:"";position:absolute;right:-60px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 66%);pointer-events:none}
.bcard>*{position:relative}
.bcard:hover{box-shadow:var(--sh-md)}.bcard:active{transform:scale(.99)}
.bcard .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bcard .cl{display:block;font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.bcard .pct{padding:4px 12px;border-radius:99px;background:#101012;color:var(--accent);font-weight:800;white-space:nowrap}
.bcard .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.bcard .steps i{display:block;height:8px;border-radius:99px;background:rgba(16,16,18,.2)}
.bcard .steps i.on{background:#101012}
.bcard .sub{font-size:var(--fs-s);font-weight:600;color:rgba(16,16,18,.82)}
.bcard .earn{display:grid;gap:4px;padding:16px;border-radius:16px;background:#101012;color:#fff}
.bcard .earn .row{align-items:baseline}
.bcard .earn .k{font-size:var(--fs-s);font-weight:600;color:rgba(255,255,255,.78)}
.bcard .earn .am{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--accent)}
.bcard .earn .mt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:var(--fs-s);color:rgba(255,255,255,.78)}
.bcard .wk{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.bcard .wk .ico{width:16px;height:16px}
.sech{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 4px}
.sech h3{font-size:var(--fs-1);letter-spacing:-.02em}
.sech span{font-size:var(--fs-s);color:var(--muted)}
.filterbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:var(--fs-s)}
.tx{display:grid}
.tx>li{border-bottom:1px solid var(--line)}
.tx>li.empty{padding:32px 0;border:0;text-align:center;color:var(--muted)}
.txr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:68px;padding:12px 0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;transition:opacity .2s var(--ease)}
.txr:hover .nm{text-decoration:underline;text-underline-offset:3px}
.txr:active{opacity:.7}
.av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--card)}
.txm{min-width:0}
.txr .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-weight:700;line-height:1.3;overflow:hidden;overflow-wrap:anywhere}
.txr .mt{display:block;font-size:var(--fs-s);color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.txr .am{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.txr .am small{display:block;font-weight:600;color:var(--muted)}
.txr .am.dim{color:var(--muted)}.txr .am.ok{color:var(--ok)}.txr .am.bad{color:var(--bad)}
.detail{display:grid;gap:16px;padding:4px 0 20px}
.dhero small{display:block;font-size:var(--fs-s);font-weight:600;color:var(--muted)}
.dhero b{display:block;font-size:clamp(2rem,10vw,2.75rem);font-weight:800;letter-spacing:-.045em;line-height:1.1}
.dhero span{font-size:var(--fs-s);color:var(--muted)}

/* Schwebende Leiste unten (N2, nach der Navigation der Landingpage: durchsichtig, Weichzeichner, feiner Rand, weicher Schatten).
   Runde Pille, nur Symbole, der aktive Tab zeigt seinen Namen im Gelb. Die gelbe Pille gleitet beim Wechsel (nur transform und opacity). */
.tabbar{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:2px;width:min(calc(100% - 24px),456px);padding:6px;transform:translateX(-50%);border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--glass-line);box-shadow:var(--glass-sh)}
.tabbar .pill{position:absolute;left:0;top:6px;width:52px;height:52px;border-radius:999px;background:var(--accent);pointer-events:none;will-change:transform}
.tabbar button{position:relative;z-index:1;display:flex;flex:0 0 52px;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:52px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink);font-size:var(--fs-s);font-weight:700;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
.tabbar button .tl{display:none;white-space:nowrap}
.tabbar button:hover{background:rgba(16,16,18,.07)}
.tabbar button:active{transform:scale(.96)}
.tabbar button[aria-current="page"]{flex:1 1 auto;padding:0 16px;color:#101012}
.tabbar button[aria-current="page"]:hover{background:transparent}
.tabbar button[aria-current="page"] .tl{display:inline}
.tabbar .tb{left:auto;right:-10px}
.tabbar button[aria-current="page"]{gap:16px}
.tabbar button[aria-current="page"] .tb{background:#101012;color:var(--accent)}
.tabbar .out{margin-left:auto;flex:0 0 52px}
@media (max-width:349px){.tabbar button[aria-current="page"]{flex:0 0 52px;padding:0}.tabbar button[aria-current="page"] .tl{display:none}}
@media (max-width:299px){.tabbar{gap:0}.tabbar .pill{top:6px;height:44px}.tabbar button,.tabbar .out{flex:0 0 44px;min-height:44px}.tabbar button[aria-current="page"]{flex:0 0 44px}}
.bar.slim{height:6px;margin-top:4px}

/* ---------- Kopf mit Ring (K2), gewählt am 2026-10-12 ---------- */
.hero{display:grid;justify-items:center;text-align:center}
.ringwrap{position:relative;display:grid;place-items:center;width:min(236px,72%);margin:16px auto 8px}
.ringwrap svg{width:100%;height:auto;transform:rotate(-90deg)}
.ringwrap .in{position:absolute;display:grid;justify-items:center;gap:2px;text-align:center}
.ringwrap .lbl{font-size:var(--fs-s);font-weight:600;color:var(--muted)}
.ringwrap .big{margin:0;font-size:min(2.25rem,8.6vw);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.ringwrap .cap{font-size:var(--fs-s);color:var(--muted)}
.legend{max-width:34ch;font-size:var(--fs-s);color:var(--muted)}
.hero .pills{justify-content:center}

/* ---------- Detailblatt von unten (E4) ---------- */
/* Das Blatt ist selbst der einzige Bereich, der scrollt (kein Kasten im Kasten). Griff und Kopfzeile mit dem Kreuz bleiben oben angeheftet, damit man das Blatt
   jederzeit schließen kann, auch wenn man weit nach unten gescrollt hat. Auf dem iPhone bleiben verschachtelte scrollende Kästen in einem Dialog gern hängen. */
dialog.sheet{margin:auto auto 0;width:100%;max-width:480px;max-height:92vh;max-height:92dvh;border-radius:28px 28px 0 0;box-shadow:0 -12px 40px rgba(20,14,4,.28);overflow-x:hidden;overflow-y:auto}
dialog.sheet[open]{display:block;animation:sheetin .4s var(--ease)}
html:has(dialog.sheet[open]){overflow:hidden;scrollbar-gutter:stable}
dialog.sheet[open]::backdrop{animation:fadein .3s var(--ease)}
dialog.sheet.closing::backdrop{opacity:0;transition:opacity .26s var(--ease)}
@keyframes sheetin{from{transform:translateY(100%)}to{transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.sh-drag{position:sticky;top:0;z-index:4;display:grid;place-items:center;height:28px;padding:0;background:var(--surface);cursor:grab;touch-action:none}
.sh-drag .grab{width:40px;height:5px;border-radius:99px;background:var(--line)}
.sh-scroll{display:grid;gap:20px;align-content:start;padding:0 20px calc(28px + env(safe-area-inset-bottom))}
.sh-head{position:sticky;top:28px;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:4px 0 6px;background:var(--surface)}
.sh-head::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(var(--surface),rgba(255,255,255,0));pointer-events:none}
.sh-head>div{min-width:0}
.sh-head .icon-btn{flex:none;width:44px;height:44px;margin:0;border-radius:50%;background:var(--card)}
.sh-head .icon-btn:hover{background:var(--line)}
.shn{font-size:var(--fs-1);letter-spacing:-.02em;line-height:1.2}
.sh-head .mt{display:block;font-size:var(--fs-s);color:var(--muted)}

/* Hinweis und Feier in der obersten Ebene, damit sie auch über dem Blatt stehen */
#toast{inset:auto auto 24px 50%;margin:0;border:0;overflow:visible;width:max-content;height:auto}
[popover].confetti{margin:0;width:100%;height:100%;max-width:none;border:0;padding:0;background:transparent;overflow:hidden}

/* ---------- Erfolge, Projekte, Tipps im Banking-Stil (gewählt am 2026-10-12: Erfolge C, Projekte A, Tipps B) ---------- */
.ptitle{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.psub{margin-top:4px;color:var(--muted)}
.av.y{background:var(--accent);color:#101012}
.av.dk{background:#101012;color:var(--accent)}
.txr.static{cursor:default}
.txr.static:hover .nm{text-decoration:none}
.txr.static:active{opacity:1}
.txr.static .nm{white-space:normal;line-height:1.25}
.wk{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.wk .ico{width:16px;height:16px}
.acc{display:grid;gap:8px;margin-top:20px}
.acc .k{font-size:var(--fs-s);font-weight:600;color:var(--muted)}
.acc .big{display:block;font-size:clamp(2.75rem,15vw,3.75rem);font-weight:800;letter-spacing:-.05em;line-height:1.05;font-variant-numeric:tabular-nums}
.accc{display:flex;flex-wrap:wrap;gap:8px}
.lvstrip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding:16px;border-radius:20px;background:var(--accent);color:#101012}
.lvstrip .cl{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.lvstrip .sub{display:block;font-size:var(--fs-s);font-weight:600;color:rgba(16,16,18,.82)}
.lvstrip .pct{padding:4px 12px;border-radius:99px;background:#101012;color:var(--accent);font-weight:800;white-space:nowrap}
.lvstrip+.cap{margin-top:8px}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 8px}
.bdg{display:grid;justify-items:center;align-content:start;gap:8px;text-align:center;line-height:1.25}
.bdg .ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:#101012}
.bdg .ic .ico{width:26px;height:26px}
.bdg b{font-size:var(--fs-s);font-weight:800}
.bdg small{font-size:var(--fs-s);color:var(--muted)}
.bdg.lock .ic{background:var(--card);color:var(--muted)}
.bdg.lock b{color:var(--muted)}
.phzs{display:grid;gap:8px;margin-top:20px}
.phz{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:12px;align-items:center;width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:inherit;text-align:left;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
div.phz{cursor:default}
.phz:hover{box-shadow:var(--sh-md)}
.phz:active{transform:scale(.99)}
.phz .av{font-weight:800;color:var(--muted)}
.phz .av.dk{color:var(--accent)}
.phz .nm{display:block;font-weight:800;font-size:1.0625rem;line-height:1.25}
.phz .mt{display:block;font-size:var(--fs-s);color:var(--muted)}
.phz .bar{display:block;margin-top:8px;height:6px}
.phz>.ico{color:var(--muted);transform:rotate(-90deg)}
.phz.now{background:var(--accent);border-color:transparent;color:#101012}
.phz.now .mt{color:rgba(16,16,18,.82)}
.phz.now .av{background:#101012;color:var(--accent)}
.phz.now .bar{background:rgba(16,16,18,.2)}
.phz.now>.ico{color:#101012}
.phz.why{margin-top:8px;background:var(--card);border-color:transparent}
.sh-tips{display:grid;gap:8px}
.sh-scroll .whylist{margin-top:0}


/* ---------- Anmeldung, Einführung, Onboarding im Vollbild (Entwurf A, gewählt am 2026-10-12) ---------- */
.au{min-height:calc(100dvh - var(--dev,0px));display:flex;justify-content:center;background:var(--bg)}
.au-in{display:flex;flex-direction:column;width:100%;max-width:480px;padding:28px 20px calc(20px + env(safe-area-inset-bottom))}
.au .mark{width:44px;height:44px;margin-bottom:28px}
.au .mark svg{display:block;width:40px;height:44px}
.au .mark{color:var(--ink)}
.segs{display:grid;grid-template-columns:repeat(var(--t,4),minmax(0,1fr));gap:4px;margin-bottom:28px}
.segs i{display:block;height:6px;border-radius:99px;background:var(--card)}
.segs i.on{background:var(--ink)}
.au h1{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.au .lead{margin-top:12px;color:var(--muted)}
.au form{display:flex;flex:1;flex-direction:column;gap:24px;margin-top:24px}
.au .big-ok{margin-bottom:24px}
.au .next{margin:24px 0 24px}
.au .micro a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.au .actions{position:sticky;bottom:0;display:flex;flex-direction:column-reverse;gap:8px;margin-top:auto;padding-top:24px;background:linear-gradient(rgba(247,246,243,0),var(--bg) 24px)}
.au .actions .btn{width:100%;min-height:56px;border-radius:16px;font-weight:800}
.au .actions .btn.text{text-decoration:none;font-weight:700}
.au .field input{min-height:56px;border-radius:16px}


/* ---------- Einführung und Anmeldung im Stories-Stil (Entwurf E, gewählt am 2026-10-12) ----------
   Alles unter .tour, damit nichts mit dem Rest der App kollidiert. Animationen heißen t…, weil „pop“ schon den Dialogen gehört. */
.tour{position:relative;container-type:inline-size;display:flex;flex-direction:column;width:100%;max-width:480px;height:calc(100vh - var(--dev,0px));height:calc(100dvh - var(--dev,0px));margin:0 auto;overflow:hidden;background:var(--bg)}
@media (min-width:481px){.tour{box-shadow:0 0 0 1px var(--line)}}
.tour .tbar{flex:none;display:grid;gap:4px;padding:16px 16px 0}
.tour .segs{margin:0}
.tour .segs i{background:rgba(16,16,18,.16)}
.tour .segs i.on{background:#101012}
.tour .trow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tour .tlogo{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.tour .tlogo svg{display:block;flex:none}
.tour .tlg{border:0;background:none;min-height:44px;padding:0 6px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@container (max-width:340px){.tour .lg-l{display:none}}
.tour .stage{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:6px 20px 14px}
.tour .stage::-webkit-scrollbar{display:none}
.tour .stage.rise{animation:trise .55s var(--ease)}
@keyframes trise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tpop{from{transform:scale(.9);opacity:.4}to{transform:none;opacity:1}}
@keyframes tbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes tbeat{0%{stroke-dashoffset:300}70%,100%{stroke-dashoffset:0}}
.tour .big{font-size:clamp(34px,10vw,48px);font-size:clamp(38px,12.5cqw,48px);font-weight:800;letter-spacing:-.055em;line-height:1}
.tour .big.s{font-size:clamp(30px,8.5vw,40px);font-size:clamp(32px,10.5cqw,40px)}
.tour .lead{margin-top:12px;color:rgba(16,16,18,.72);font-size:17px}
.tour .note{margin-top:10px;font-size:14px;color:rgba(16,16,18,.7)}
.tour .micro{font-size:14px;color:var(--muted)}
.tour .fine{margin-top:8px;font-size:14px;color:var(--muted)}
.tour .tnote{margin:12px 0 0;padding:12px 14px;border-radius:14px;background:var(--warn-bg);color:var(--warn);font-size:14px;font-weight:600}
.tour .glass{margin-top:12px;padding:14px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.tour .glass .gt{margin:0 0 10px;font-size:14px;font-weight:700;color:rgba(16,16,18,.7)}
.tour .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:0 24px;border:0;border-radius:18px;background:var(--accent);color:#101012;font-weight:800;font-size:16px;cursor:pointer;transition:transform .2s var(--ease),background .2s var(--ease)}
.tour .btn:hover{background:var(--accent-hover)}
.tour .btn:active{transform:scale(.98)}
.tour .btn.k{background:#101012;color:#fff}
.tour .btn.k:hover{background:#2a2a30}
.tour .btn:disabled{opacity:.4;cursor:not-allowed}
.tour .btn.k:disabled:hover{background:#101012}
.tour .edk{position:relative;flex:none;display:flex;gap:10px;padding:10px 16px calc(16px + env(safe-area-inset-bottom))}
.tour .edk .bk{flex:none;display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--line);border-radius:18px;background:var(--surface);cursor:pointer}
.tour .edk .btn{flex:1;min-width:0}
.tour .edk.onwhite{background:linear-gradient(rgba(255,255,255,0),#fff 24px)}

/* 1 Angebot: bunte Symbole und Liste mit Kommas */
.tour .bst{display:flex;align-items:center;margin:12px 0 16px 14px}
.tour .bb{display:grid;place-items:center;width:58px;height:58px;margin-left:-14px;border-radius:50%;border:3px solid rgba(255,255,255,.92);box-shadow:0 10px 20px rgba(60,40,10,.18);animation:tbob 3.4s ease-in-out infinite}
.tour .bb:nth-child(1){background:#ffd21f}
.tour .bb:nth-child(2){background:#fff;animation-delay:-.5s}
.tour .bb:nth-child(3){background:#101012;color:#ffd21f;animation-delay:-1s}
.tour .bb:nth-child(4){background:#f9d4b6;animation-delay:-1.5s}
.tour .bb:nth-child(5){background:#a9c6dd;animation-delay:-2s}
.tour .bb:nth-child(6){background:#fff;animation-delay:-2.5s}
.tour .commas{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.95}
.tour .commas i{font-style:normal;font-weight:400;color:rgba(16,16,18,.55)}
.tour .commas span{padding:2px 10px;border-radius:12px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tour .commas .w{background:var(--accent)}
.tour .commas .m{background:#f9d4b6}
.tour .commas .s{background:#cfe0ee}
.tour .commas .t{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(16,16,18,.14)}
.tour .commas .d{background:#cdeadb}
.tour .commas .b{background:#e4dcf3}
.tour .commas .p{background:#e6e4dd}

/* 2 Warum: Belege, seitlich wischen */
.tour .evwrap{margin-top:22px}
.tour .evs{display:flex;gap:10px;margin:0 -20px;padding:0 20px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:20px;scrollbar-width:none}
.tour .evs::-webkit-scrollbar{display:none}
.tour .evs .e{flex:0 0 82%;scroll-snap-align:start;position:relative;padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.tour .evs .e b{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.tour .evs .e .role{display:block;font-size:14px;color:var(--muted)}
.tour .evs .e p{margin-top:10px;font-size:17px;line-height:1.4}
.tour .evs .e .q{display:block;margin-top:12px;font-size:14px;color:var(--muted)}

/* 3 Dein Anteil wächst: wie die gelbe Karte in der App */
.tour .ycard{position:relative;overflow:hidden;display:grid;gap:14px;margin-top:16px;padding:20px;border-radius:24px;background:var(--accent);color:#101012}
.tour .ycard::before{content:"";position:absolute;right:-60px;bottom:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 66%)}
.tour .ycard>*{position:relative}
.tour .ycard .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tour .ycard .cl{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1.1;animation:tpop .4s var(--ease)}
.tour .ycard .pct{padding:4px 12px;border-radius:12px;background:#101012;color:var(--accent);font-weight:800;white-space:nowrap}
.tour .ycard .stps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.tour .ycard .stps button{height:44px;padding:18px 0;border:0;background:none;cursor:pointer}
.tour .ycard .stps i{display:block;height:8px;border-radius:99px;background:rgba(16,16,18,.2);transition:background .3s var(--ease)}
.tour .ycard .stps button.on i{background:#101012}
.tour .ycard .sub{margin-top:-8px;font-size:14px;font-weight:600;color:rgba(16,16,18,.82)}
.tour .ycard .earn{display:grid;gap:4px;padding:16px;border-radius:16px;background:#101012;color:#fff}
.tour .ycard .earn .row{align-items:baseline}
.tour .ycard .earn .k{font-size:14px;font-weight:600;color:rgba(255,255,255,.78)}
.tour .ycard .earn .am{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--accent);animation:tpop .4s var(--ease)}
.tour .ycard .earn .mt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-size:14px;color:rgba(255,255,255,.78)}
.tour .lvsel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:12px}
.tour .lvsel button{min-height:44px;padding:0 4px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);font-size:15px;font-weight:700;cursor:pointer}
.tour .lvsel button[aria-pressed="true"]{background:#101012;border-color:#101012;color:#fff}
.tour .gtk{display:grid;gap:8px}
.tour .gtk li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}
.tour .gtk .c{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--ink);color:var(--accent)}
.tour .gtk .c .ico{width:16px;height:16px;stroke-width:3}
.tour .fine a{font-weight:700;color:var(--ink);text-underline-offset:3px}

/* 4 Hausarzt */
.tour .prh{position:relative;display:flex;justify-content:center;margin:30px 0 18px}
.tour .praxis{position:relative;display:flex;align-items:center;gap:12px;width:100%;max-width:290px;height:92px;padding:0 16px;border-radius:26px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.tour .cross{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:18px;background:#101012;color:var(--accent)}
.tour .cross .ico{width:30px;height:30px;stroke-width:3.4}
.tour .beat{flex:1;min-width:0;height:44px}
.tour .beat path{fill:none;stroke:#101012;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;animation:tbeat 2.8s linear infinite}
.tour .coin{position:absolute;right:max(0px,calc(50% - 160px));top:-16px;padding:6px 13px;border-radius:99px;background:var(--accent);font-weight:800;font-size:15px;box-shadow:0 10px 20px rgba(60,40,10,.22);animation:tbob 3s ease-in-out infinite}
.tour .duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:18px}
.tour .dc{display:grid;gap:6px;justify-items:start;align-content:start;padding:16px 16px 18px;border:2px solid var(--line);border-radius:24px;background:var(--surface);text-align:left;cursor:pointer;transition:transform .3s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.tour .dc .ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border-radius:50%;background:var(--accent);transition:transform .3s var(--ease)}
.tour .dc .ic .ico{width:26px;height:26px;stroke-width:3}
.tour .dc.nein .ic{background:rgba(16,16,18,.1)}
.tour .dc b{font-size:36px;font-weight:800;letter-spacing:-.05em;line-height:1}
.tour .dc small{font-size:14px;color:var(--muted)}
.tour .dc:hover{transform:translateY(-2px)}
.tour .dc.sel{background:#101012;border-color:#101012;color:#fff;transform:translateY(-4px) rotate(-1.2deg);animation:tpop .4s var(--ease)}
.tour .dc.sel.nein{transform:translateY(-4px) rotate(1.2deg)}
.tour .dc.sel .ic{background:var(--accent);color:#101012;transform:scale(1.08)}
.tour .dc.sel small{color:var(--accent)}
.tour .rev{animation:trise .5s var(--ease)}
.tour .rev .hl2{font-size:19px;font-weight:800;letter-spacing:-.02em}
.tour .rev p+p{margin-top:6px}

/* 5 Anmeldung: größere weiße Fläche */
.tour .stage.sign{display:flex;flex-direction:column;padding:6px 8px 0}
.tour .stage.sign>.big{padding:0 12px}
.tour .stage.sign>.tnote{margin:12px 12px 0}
.tour .formcard{display:block;flex:1;margin-top:12px;padding:20px 20px 34px;border-radius:30px 30px 0 0;background:var(--surface);border:1px solid var(--line);border-bottom:0}
.tour .formcard .intro{margin:0 0 18px;font-size:15px;color:var(--muted)}
.tour .fld{display:grid;gap:6px;margin-top:12px}
.tour .formcard .fld:first-of-type{margin-top:0}
.tour .fld label{font-weight:700}
.tour .fld input{width:100%;min-height:56px;padding:0 16px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface);font-size:16px}
.tour .fld input:focus{border-color:var(--ink);outline:0;box-shadow:0 0 0 3px rgba(255,210,31,.55)}
.tour .grp{margin-top:18px}
.tour .grp h3{margin-bottom:2px;font-size:16px;font-weight:800}
.tour .tchk{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:8px 0;cursor:pointer}
.tour .tchk input{position:absolute;opacity:0;width:1px;height:1px}
.tour .tchk .bx{display:grid;place-items:center;width:28px;height:28px;border:2px solid var(--ink);border-radius:8px;background:var(--surface);color:transparent;transition:background .2s var(--ease)}
.tour .tchk .bx .ico{width:18px;height:18px;stroke-width:3}
.tour .tchk input:checked+.bx{background:var(--accent);color:#101012}
.tour .tchk input:focus-visible+.bx{outline:2px solid var(--ink);outline-offset:3px}
.tour .tchk .tx b{display:block;font-weight:700}
.tour .tchk .tx small{display:block;font-size:14px;color:var(--muted)}
.tour .contract{margin-top:10px;padding:2px 16px 10px;border-radius:20px;background:var(--bg);border:1.5px solid var(--line)}
.tour .contract .lnk{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-weight:700;color:var(--ink);text-underline-offset:3px}

/* 6 Hol dir die App */
.tour .plat{display:flex;gap:4px;padding:4px;border-radius:16px;background:rgba(16,16,18,.07)}
.tour .plat button{flex:1;min-height:44px;border:0;border-radius:12px;background:transparent;font-weight:700;cursor:pointer}
.tour .plat button[aria-pressed="true"]{background:var(--surface);box-shadow:var(--sh-sm)}
.tour .stp{display:grid;gap:14px;margin-top:14px}
.tour .stp li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.tour .stp .nb{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--accent);font-weight:800;font-size:15px}
.tour .stp b{font-weight:700}
.tour .stp .gl{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:8px;border-radius:8px;background:rgba(16,16,18,.08);vertical-align:middle}
.tour .stp .gl .ico{width:18px;height:18px}
.tour .stp .hint{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.tour .ban{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start;padding:14px;border-radius:20px;background:var(--ok-bg);color:var(--ok)}
.tour .ban .bi{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ok);color:#fff}
.tour .ban b{display:block;font-weight:800}
.tour .ban span{font-size:14px;color:#1c4a31;overflow-wrap:anywhere}
.tour .ban span b{display:inline}
.tour .code{margin-top:16px}

/* Einstellungen und Vertrag als Blatt */
.swr{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}
.swr .tx b{display:block;font-weight:700}
.swr .tx small{display:block;font-size:var(--fs-s);color:var(--muted)}
.sw{position:relative;flex:none;width:52px;height:32px}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sw .knob{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .2s var(--ease)}
.sw .knob::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.sw input:checked+.knob{background:var(--ink)}
.sw input:checked+.knob::after{transform:translateX(20px);background:var(--accent)}
.sw input:focus-visible+.knob{outline:2px solid var(--ink);outline-offset:3px}
.setgrp{display:grid;gap:8px}
.setgrp h3{font-size:var(--fs-s);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.vtext h1,.vtext .ver{display:none}   /* Titel und Version stehen schon oben im Blatt */
.vtext .sub{margin-top:0;font-size:var(--fs-s);color:var(--muted)}
.vtext section{margin-top:24px}
.vtext h2{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.vtext p{margin-top:10px;font-size:.9375rem;line-height:1.55}
.vtext ol.a{margin:6px 0 0;list-style:none}
.vtext ol.a li{margin-top:4px;padding-left:20px;text-indent:-20px;font-size:.9375rem}
.vtext table{width:100%;margin-top:12px;border-collapse:collapse;font-size:var(--fs-s)}
.vtext th,.vtext td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.vtext th{color:var(--muted)}
.vproof{margin:16px 0;overflow-wrap:anywhere}
.facts dd.hash{font-size:.8125rem;overflow-wrap:anywhere}
.evl{display:grid;gap:4px;font-size:var(--fs-s);color:var(--muted)}

/* Niedrige Bildschirme (kleine iPhones, Handys mit eingeblendeter Tastatur): Kopf und Knopf-Leiste der Einführung werden knapper, damit mehr Inhalt sichtbar bleibt */
@media (max-height:640px){
 .tour .tbar{padding-top:10px}
 .tour .edk{padding-top:8px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 .tour .btn,.tour .edk .bk{min-height:52px}
 .tour .edk .bk{width:52px}
 .tour .bst{margin:4px 0 10px 14px}
 .tour .bb{width:50px;height:50px}
 .tour .prh{margin:26px 0 10px}
 .tour .stage{padding-top:2px}
}

/* ---------- Desktop: Einführung, Anmeldung und Onboarding als Karte genau in der Mitte des Bildschirms (ab 700 px Breite und 600 px Höhe).
   Auf dem Handy bleibt alles wie vorher (Vollbild). Der Hintergrund wird etwas dunkler (--stage), damit die Karte sich abhebt. */
@media (min-width:700px) and (min-height:600px){
 #app:has(>.tour){display:grid;place-items:center;min-height:calc(100vh - var(--dev,0px));min-height:calc(100dvh - var(--dev,0px));padding:24px;background:var(--stage)}
 .tour{width:100%;max-width:560px;height:min(900px,calc(100vh - var(--dev,0px) - 48px));height:min(900px,calc(100dvh - var(--dev,0px) - 48px));margin:0;border-radius:28px;box-shadow:0 0 0 1px var(--line),var(--sh-xl)}
 .tour .tbar{padding:24px 32px 0}
 .tour .stage{padding:12px 32px 16px}
 .tour .stage.sign{padding:12px 16px 0}
 .tour .evs{margin:0 -32px;padding:0 32px 6px;scroll-padding-left:32px}
 .tour .edk{padding:12px 32px 28px}
 .tour .big{font-size:52px}
 .tour .big.s{font-size:42px}
 .au{align-items:center;padding:24px;background:var(--stage)}
 .au-in{max-width:520px;padding:40px;border-radius:28px;background:var(--bg);box-shadow:0 0 0 1px var(--line),var(--sh-xl)}
 .au .mark{margin-bottom:24px}
 .au .actions{position:static;padding-top:8px;background:none}
}
#live{top:0;left:0}   /* die unsichtbare Ansage-Zeile steht sonst unter der Seite und macht sie 1 px zu hoch (Rollbalken) */

/* ---------- Verkäufer am Desktop (ab 900 px): Seitenleiste + Cockpit (Entwurf B mit Seitenleiste aus A, gewählt am 2026-10-12) ----------
   Das Handy bleibt unverändert (schwebende Leiste unten). Hier steht die Navigation links, in der Mitte das Cockpit, rechts die Übersicht.
   Das Detail eines Unternehmens, die Einstellungen und der Vertrag öffnen als Karte in der Mitte statt als Blatt von unten. */
@media (min-width:900px){
 body.sh.desk{background:var(--bg)}
 body.sh.desk #toast,body.sh.desk:has(#sheet[open]) #toast{bottom:24px}
 .dsk{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - var(--dev,0px));min-height:calc(100dvh - var(--dev,0px))}
 .dk-side{position:sticky;top:var(--dev,0px);display:flex;flex-direction:column;gap:8px;align-self:start;height:calc(100vh - var(--dev,0px));height:calc(100dvh - var(--dev,0px));padding:24px 16px;border-right:1px solid var(--line);background:var(--surface)}
 .dk-logo{display:inline-flex;align-items:center;gap:8px;padding:0 8px 16px;font-weight:800;font-size:21px;letter-spacing:-.04em;line-height:1}
 .dk-logo svg{display:block;flex:none}
 .dk-nav{display:grid;gap:4px}
 .dk-nav button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:var(--r-m);background:transparent;font-weight:600;text-align:left;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
 .dk-nav button:hover{background:var(--card)}
 .dk-nav button:active{transform:scale(.98)}
 .dk-nav button[aria-current="page"]{background:var(--accent);font-weight:800}
 .dk-badge{margin-left:auto;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:var(--ink);color:var(--accent);font-size:.8125rem;font-weight:800}
 .dk-grow{flex:1}
 .dk-me{display:flex;align-items:center;gap:12px;padding:8px}
 .dk-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--accent);font-size:var(--fs-s);font-weight:800}
 .dk-who{flex:1;min-width:0;line-height:1.25}
 .dk-who b,.dk-who small{display:block;overflow:hidden;text-overflow:ellipsis}
 .dk-who small{white-space:nowrap}
 .dk-who small{color:var(--muted);font-size:var(--fs-s)}
 .dk-main{min-width:0;padding:32px 40px 64px}
 .dk-page{max-width:760px;margin:0 auto;display:grid;gap:0}
 .dk-grid{display:grid;grid-template-columns:minmax(0,1fr) 376px;gap:24px;align-items:start;max-width:1200px;margin:0 auto}
 .dk-col{display:grid;gap:24px;min-width:0}
 .dk-r{display:grid;gap:16px;min-width:0}
 .dk-r .card{padding:20px}
 .dk-r .card.fs{padding:0}
 .dk-hero{display:grid;grid-template-columns:168px minmax(0,1fr);gap:24px;align-items:center}
 .dk-hero h1{font-size:var(--fs-2);letter-spacing:-.04em;line-height:1.15}
 .dk-hero .sub{margin-top:4px;max-width:52ch}
 .dk-ring{position:relative;display:grid;place-items:center;width:168px;height:168px}
 .dk-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
 .dk-ring .in{position:absolute;display:grid;justify-items:center;text-align:center;line-height:1.2}
 .dk-ring .lbl{font-size:.8125rem;font-weight:600;color:var(--muted)}
 .dk-ring b{font-size:var(--fs-1);font-weight:800;letter-spacing:-.04em}
 .dk-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
 .dk-acts .btn.sm{padding:0 14px}
 .dk-lh{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;min-height:44px}
 .dk-lh h2{font-size:var(--fs-1);letter-spacing:-.03em}
 .dk-lh .filterbar{margin:0;flex:1}
 .dk-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .dk-cards>li.empty{grid-column:1/-1;padding:32px 16px;border:1px dashed var(--line);border-radius:var(--r-l)}
 .dk-co{display:grid;gap:8px;justify-items:start;width:100%;height:100%;padding:16px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);box-shadow:var(--sh-sm);text-align:left;cursor:pointer;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
 .dk-co:hover{box-shadow:var(--sh-md)}
 .dk-co:active{transform:scale(.99)}
 .dk-co .t{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;width:100%}
 .dk-co .nm{font-weight:800;line-height:1.3}
 .dk-co .am{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
 .dk-co .am.ok{color:var(--ok)}.dk-co .am.dim{color:var(--muted)}.dk-co .am.bad{color:var(--bad)}
 .dk-co .mt{font-size:var(--fs-s);color:var(--muted)}
 .dk-card h3{font-size:17px;letter-spacing:-.02em}
 .dk-appts{display:grid;gap:4px;margin-top:8px}
 .dk-appts button{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:4px 8px;border:0;border-radius:var(--r-m);background:transparent;text-align:left;cursor:pointer;transition:background .2s var(--ease)}
 .dk-appts button:hover{background:var(--card)}
 .dk-appts .d{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--r-m);background:var(--card);font-weight:800;line-height:1.1;text-align:center}
 .dk-appts .d small{display:block;font-size:11px;color:var(--muted)}
 .dk-appts b,.dk-appts small{display:block}
 .dk-appts span:last-child small{font-size:var(--fs-s);color:var(--muted)}
 .dk-tip{background:var(--accent-soft);border-color:transparent;box-shadow:none}
 .dk-tip p{margin-top:8px}
 .dk-tip .btn{margin-top:12px}
 /* Detail, Einstellungen, Vertrag und Tipps: Karte in der Mitte statt Blatt von unten */
 dialog.sheet{margin:auto;max-width:560px;max-height:min(88dvh,820px);border-radius:24px;box-shadow:var(--sh-xl)}
 dialog.sheet[open]{animation:sheetfade .3s var(--ease)}
 @keyframes sheetfade{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}
 .sh-drag{display:none}
 .sh-scroll{padding:0 24px 28px}
 .sh-head{top:0;padding-top:24px}
}
@media (min-width:900px) and (max-width:1179px){
 .dk-main{padding:24px 24px 56px}
 .dk-grid{grid-template-columns:minmax(0,1fr)}
 .dk-r{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
 .dk-r .fs,.dk-r .dk-tip{grid-column:1/-1}
}

/* ---------- Waagerecht scrollen mit der Maus (Belege in der Einführung, Spalten im Admin-Board) ----------
   Am Handy wischt man. Mit Maus gibt es Pfeile, Ziehen mit gedrückter Taste und (per Tastatur) die Pfeiltasten, wenn der Bereich Fokus hat. */
.evnav,.hs-btns,.only-mouse{display:none}
@media (hover:hover) and (pointer:fine){
 .only-touch{display:none}
 .only-mouse{display:inline}
 .evnav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
 .tour .evb{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
 .tour .evb:hover{background:var(--card)}
 .tour .evb:active{transform:scale(.94)}
 .tour .evc{min-width:64px;text-align:center;font-size:14px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
 .hs-btns{display:inline-flex;gap:4px}
 .tour .evs,.board{cursor:grab}
 .tour .evs.panning,.board.panning{cursor:grabbing;user-select:none}
 .tour .evs.panning *,.board.panning *{pointer-events:none}
}

/* Desktop-Seitenleiste: Konto und Hilfe über dem Namen */
@media (min-width:900px){
 .dk-sec{display:grid;gap:4px;padding-top:8px;border-top:1px solid var(--line)}
 .dk-sec button,.dk-sec a{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-m);background:transparent;color:var(--ink);font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease)}
 .dk-sec button:hover,.dk-sec a:hover{background:var(--card)}
 .dk-sec button:active,.dk-sec a:active{transform:scale(.98)}
}

/* Hilfe: die E-Mail-Adresse groß und markierbar */
.helpmail{padding:16px;border-radius:var(--r-m);background:var(--card);font-size:var(--fs-1);font-weight:800;letter-spacing:-.02em;text-align:center;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}

/* Anmeldeformular: Hinweis „Es fehlt noch …“ und Fehlermeldung stehen fest über dem Knopf, nicht am Ende des langen Formulars */
.tour .tmsg{flex:none;padding:6px 20px 0;background:#fff}
.tour .tmsg p{margin:0;font-size:14px;line-height:1.35}
.tour .tmsg .fine{color:var(--muted);font-weight:600}
.tour .tmsg .err{color:var(--bad);font-weight:700}
.tour .tmsg p:empty{display:none}
@media (min-width:700px) and (min-height:600px){.tour .tmsg{padding:8px 32px 0}}

/* ---------- Handy: die Seite selbst scrollt (nicht ein Kasten in der Seite) ----------
   Auf dem iPhone bleibt ein scrollender Kasten in der Seite gern hängen (nach unten geht es, nach oben nicht) und die Safari-Leiste verdeckt den
   Weiter-Knopf. Deshalb scrollt am Handy der ganze Bildschirm. Oben (Fortschritt, Logo) und unten (Knopf) bleiben angeheftet (sticky). */
@media (max-width:699px),(max-height:599px){
 .tour{position:relative;display:flex;flex-direction:column;height:auto;min-height:100vh;min-height:100dvh;overflow:visible;max-width:480px;margin:0 auto}
 .tour .tbar{position:sticky;top:var(--dev,0px);z-index:4;padding-bottom:8px;background:var(--bg)}
 .tour .stage{flex:1 0 auto;overflow:visible;overscroll-behavior:auto}
 .tour .tdock{position:sticky;bottom:0;z-index:4;background:var(--bg)}
 .tour .tdock.onwhite{background:#fff}
}

.tour .tdock{flex:none}

/* Einführung, Arzt-Seite: Hinweis, dass die Verkaufschance bei bekannten Ärzten am höchsten ist */
.tour .boost{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding:12px 14px;border-radius:14px;background:var(--accent-soft);color:#101012;font-size:15px;font-weight:600;line-height:1.4}
.tour .boost .ico{flex:none;margin-top:1px}
.tour .boost b{font-weight:800}

/* Fehlermeldung als Kasten (Anmeldung) und Schatten über dem angehefteten Fuß der Einführung am Handy */
.au .err.boxed{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:var(--bad-bg);color:var(--bad);font-weight:600;line-height:1.4}
@media (max-width:699px),(max-height:599px){.tour .tdock{box-shadow:0 -10px 18px -10px rgba(16,16,18,.12)}}

/* ---------- Projekt-Fenster im Admin (Klick auf eine Projektkarte) ----------
   Das Fenster selbst scrollt (kein Kasten im Kasten, wie beim Blatt der Verkäufer). Kopfzeile mit dem Kreuz bleibt oben, der Fuß mit Knöpfen
   und Fehlermeldung unten angeheftet. Ab 900 px zwei Spalten (links Unternehmen und Preis, rechts Probleme und Zeitpunkt), am Handy kompakt von unten. */
#modal{max-width:760px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
#modal[open]{display:block}
html:has(#modal[open]){overflow:hidden;scrollbar-gutter:stable}   /* die Seite dahinter scrollt nicht mit */
#modal .dh{position:sticky;top:0;z-index:3;background:var(--surface)}
#modal .dh>div{min-width:0}
#modal .dh h2{overflow-wrap:anywhere}
#modal .dh .icon-btn{flex:none}
#modal .db{overflow:visible;padding-bottom:32px}
#modal .df{position:sticky;bottom:0;z-index:3;box-shadow:0 -10px 18px -10px rgba(16,16,18,.14)}
#modal .df .err{flex:1 1 100%;margin:0;text-align:right}
.pm-l,.pm-r{display:grid;gap:24px;align-content:start;min-width:0}
#pl{gap:16px}
@media (min-width:900px){
 #modal{max-width:1040px}
 #modal .pm-b{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:0;align-items:start}
 #modal .pm-l{padding-right:32px}
 #modal .pm-r{padding-left:32px;border-left:1px solid var(--line)}
}
/* Der Firmenname braucht mehr Platz als die Stadt */
@media (min-width:761px){#modal .pm-nc{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
/* Schmaler als 900 px: eine Spalte, in der gewohnten Reihenfolge (Unternehmen, Status, Probleme, Preis, Zeitpunkt, Anteil) */
@media (max-width:899px){
 .pm-l,.pm-r{display:contents}
 #modal .pm-pb{order:1}
 #modal .pm-of{order:2}
 #modal .calc{order:3}
 #modal .pm-vis{order:4}
 #modal .sched{order:5}
}
/* Handy: fast bildschirmfüllendes Blatt von unten, Kopf und Fuß schlank, damit die Felder Platz haben */
@media (max-width:560px){
 #modal{width:100%;max-width:none;margin:auto 0 0;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);border-radius:24px 24px 0 0}
 #modal[open]{animation:sheetin .4s var(--ease)}
 #modal .dh{padding:12px 8px 12px 16px;gap:8px}
 #modal .dh h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:1.125rem}
 #modal .dh p{font-size:var(--fs-s)}
 #modal .db{padding:16px 16px 24px;gap:20px}
 #modal .df{gap:8px;flex-wrap:wrap;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
 #modal .df .btn.text{display:none}
 #modal .df .btn{flex:1 1 0;min-width:0;padding:6px 12px;line-height:1.2;text-align:center}
 #modal .df .btn:not(.ghost){flex-grow:1.5}
 #modal .df .err{text-align:left}
}
/* Niedrige Fenster (kleine Vorschau, Handy quer): Kopf und Fuß knapp halten, bei sehr wenig Höhe läuft der Fuß mit */
@media (max-height:560px){
 #modal{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
 #modal .dh{padding-top:12px;padding-bottom:12px}
 #modal .df{padding-top:10px;padding-bottom:10px}
}
@media (max-height:480px){
 #modal .df{position:static;box-shadow:none}
}

/* Hinweis im Projekt-Fenster: Verkäufer ist noch nicht freigegeben, Senden gibt ihn frei */
#modal .pend{padding:12px 16px;border-radius:var(--r-m);background:var(--accent-soft);color:#101012;font-size:var(--fs-s);font-weight:600;line-height:1.45}
#modal .pend:empty{display:none}


/* ===== Laufliste als Spickzettel, Chat und Projekt-Fenster mit Angeboten (2026-10-15) ===== */
/* Blatt zu einem Unternehmen (Verkäufer) */
.vfit{justify-self:start;margin-top:-8px}
.anote{display:grid;gap:6px;padding:16px;border-radius:var(--r-m);background:var(--accent-soft);border:1px solid #f3e3a0}
.anote .who{display:flex;align-items:center;gap:8px;font-size:var(--fs-s);font-weight:700;color:var(--ink)}
.anote .av{width:24px;height:24px;font-size:12px;font-weight:800;background:#101012;color:var(--accent)}
.anote p{white-space:pre-line}
.vsec{display:grid;gap:8px}
.vsec .lbl,.vsec>.lbl{font-size:var(--fs-s);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.qrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vsec .lnk{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.opener{padding:16px;border-radius:var(--r-m);background:var(--card);font-size:1.0625rem;line-height:1.5}
.vtalk{display:grid;gap:8px;counter-reset:vt}
.vtalk li{position:relative;padding:12px 16px 12px 52px;border-radius:var(--r-m);background:var(--card);counter-increment:vt}
.vtalk li::before{content:counter(vt);position:absolute;left:12px;top:10px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#101012;color:var(--accent);font-weight:800;font-size:.875rem}
.vrows{display:grid;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden}
.vrows li{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px}
.vrows li+li{border-top:1px solid var(--line)}
.vrows .ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--card)}
.vrows .tx{flex:1;min-width:0}
.vrows .tx b{display:block;line-height:1.3}
.vrows small{display:block;font-size:var(--fs-s);color:var(--muted);line-height:1.35}
.vrows .am{flex:none;text-align:right}
.vrows .am b{display:block;font-weight:800;white-space:nowrap}
.vacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
.vact{display:grid;justify-items:center;align-content:start;gap:4px;min-height:88px;padding:12px 6px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;text-align:center;text-decoration:none;line-height:1.25;cursor:pointer;transition:border-color .2s var(--ease),transform .2s var(--ease)}
.vact:hover{border-color:var(--ink)}.vact:active{transform:scale(.98)}
.vact .ico{width:22px;height:22px}
.vact small{max-width:100%;font-weight:500;font-size:.75rem;color:var(--muted);overflow-wrap:anywhere}
.vtime{display:flex;gap:10px;align-items:flex-start;margin-top:-8px;padding:12px 14px;border-radius:var(--r-m);background:var(--ok-bg);color:var(--ok);font-size:var(--fs-s)}
.vtime .ico{flex:none;margin-top:2px}
.vhint{margin-top:-12px;font-size:.8125rem;color:var(--muted)}
.ps .z{margin-top:4px;padding-top:8px;border-top:1px dashed var(--line);font-size:var(--fs-s)}
.vlimits{padding:14px 16px;border-radius:var(--r-m);border:1.5px dashed var(--line);font-size:var(--fs-s)}

/* Abmelden oben rechts (Handy) */
.sapp{position:relative}
.topout{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:5;background:var(--surface);box-shadow:var(--sh-sm);border-radius:50%}
.topout:hover{background:var(--card)}

/* Chat im WhatsApp-Stil (gewählt am 2026-10-15: Variante A „Klassisch, Vollbild“, Entwurf entwuerfe/chat-whatsapp-ideen.html) */
.wall,.wa,.cconv{background-color:#efe9dc;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23101012' stroke-opacity='.06' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 8v10h7'/%3E%3Cpath d='M42 40v10h7'/%3E%3Ccircle cx='44' cy='14' r='2'/%3E%3Ccircle cx='14' cy='46' r='2'/%3E%3C/g%3E%3C/svg%3E")}
.wa{display:flex;flex-direction:column;min-height:calc(100vh - var(--dev,0px));min-height:calc(100dvh - var(--dev,0px))}
.wapp{max-width:480px;background:#efe9dc}
.wapp #main{display:block}
.wahd{position:sticky;top:var(--dev,0px);z-index:5;display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 12px 8px 4px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid rgba(16,16,18,.08)}
.wahd .icon-btn{border-radius:50%}
.waav{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#101012;color:#fff;overflow:hidden}
.waav svg{width:22px;height:24px}
.wanm{flex:1;min-width:0;line-height:1.25}
.wanm b{display:block;font-size:1.0625rem}
.wanm span{display:block;font-size:.8125rem;color:var(--muted)}
.wams{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;margin:0;padding:10px 12px 12px;list-style:none}
.wasys{align-self:center;max-width:88%;margin:6px 0 8px;padding:6px 12px;border-radius:8px;background:#fff6cf;box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:.78rem;line-height:1.4;color:#54656f;text-align:center}
.waday{align-self:center;margin:8px 0}
.waday span{display:inline-block;padding:4px 12px;border-radius:8px;background:rgba(255,255,255,.92);box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:.78rem;font-weight:600;color:#54656f}
.wab{position:relative;max-width:82%;padding:6px 8px 6px 9px;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);overflow-wrap:anywhere}
.wab.tail{margin-top:8px}
.wab p{font-size:.97rem;line-height:1.38;white-space:pre-wrap}
.wab.in{align-self:flex-start;background:#fff}
.wab.out{align-self:flex-end;background:#fff1b0}
.wab.in.tail{border-top-left-radius:0}
.wab.out.tail{border-top-right-radius:0}
.wab.tail::before{content:"";position:absolute;top:0;width:8px;height:13px;background:inherit}
.wab.in.tail::before{left:-8px;clip-path:polygon(100% 0,0 0,100% 100%)}
.wab.out.tail::before{right:-8px;clip-path:polygon(0 0,100% 0,0 100%)}
.wam{float:right;display:inline-flex;align-items:center;gap:3px;margin:8px 0 -4px 10px;font-size:.69rem;line-height:1;color:rgba(16,16,18,.48);white-space:nowrap}
.wack{width:17px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wack.read{color:#2f7de1}
.waq{display:block;width:calc(100% + 7px);margin:-1px -3px 6px -4px;padding:6px 8px 6px 10px;border:0;border-left:4px solid #c99a00;border-radius:6px;background:rgba(16,16,18,.055);color:inherit;font:inherit;font-size:.84rem;line-height:1.3;text-align:left;cursor:pointer}
.waq b{display:block;color:#8a6a00}
.waq span{display:block;color:var(--muted)}
.waq u{font-weight:700;color:var(--ink)}
.wain{position:sticky;bottom:0;z-index:5;display:grid;padding:6px 8px calc(10px + env(safe-area-inset-bottom));background:#f0eee8}
.warp{display:flex;align-items:center;gap:8px;margin:0 56px 0 0;padding:6px 4px 6px 10px;border-radius:12px 12px 0 0;background:#fff;border-left:4px solid #c99a00;font-size:.84rem}
.warp>.ico{width:18px;height:18px;color:#8a6a00}
.warp>span{flex:1;min-width:0}
.warp b{display:block;color:#8a6a00}.warp span span{display:block;color:var(--muted)}
.warow{display:flex;align-items:flex-end;gap:8px}
.wain textarea{flex:1;min-height:48px;max-height:160px;padding:12px 16px;border:0;border-radius:24px;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.1);font-size:1rem;line-height:1.4;resize:none}
.warp+.warow textarea{border-top-left-radius:0}
.wasend{display:grid;place-items:center;flex:none;width:48px;height:48px;border:0;border-radius:50%;background:var(--accent);color:#101012;cursor:pointer;transition:transform .2s var(--ease)}
.wasend:active{transform:scale(.94)}.wasend:disabled{opacity:.5}
@media (max-width:760px){.wahd{top:0}}   /* die Demo-Leiste scrollt dort mit (siehe .devbar), der Chat-Kopf klebt ganz oben */
/* Desktop: Chat als Karte in der Mitte, Kopf und Eingabe angeheftet */
.dk-page .wa{min-height:calc(100dvh - 96px);border:1px solid var(--line);border-radius:var(--r-l);overflow:clip}
.dk-page .wahd{top:var(--dev,0px);padding-left:16px}
.dk-page .wab{max-width:68%}
.dk-page .wain{bottom:0}
/* Admin: Postfach */
.cbox{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:560px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden}
.cside{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.cside .search{margin:12px;max-width:none;min-width:0;flex:none}
.cthreads{margin:0;padding:0;list-style:none;overflow:auto}
.cthreads .empty{padding:16px;color:var(--muted)}
.cth{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;padding:10px 12px;border:0;border-top:1px solid var(--line);background:transparent;font:inherit;text-align:left;cursor:pointer}
.cth:hover{background:var(--bg)}
.cth.on{background:var(--accent-soft)}
.cth .tx{flex:1;min-width:0;display:block}
.cth .tx b{display:block;font-size:.9375rem;line-height:1.3}
.cth .tx span{display:block;font-size:.8125rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cth.unread .tx b::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:#e0912f;vertical-align:middle}
.cth .rt{display:grid;justify-items:end;gap:4px;flex:none;font-size:.75rem;color:var(--muted)}
.cth .rt .badge{margin:0;min-width:22px;height:22px;padding:0 6px;font-size:.75rem}
.cconv{display:flex;flex-direction:column;min-width:0}
.cconv.cnone{display:grid;place-items:center;color:var(--muted)}
.cch{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.cch>div{flex:1;min-width:0}
.cch b{display:block}.cch span{display:block;font-size:.8125rem;color:var(--muted)}
.cback{display:none}
.cconv .wams{justify-content:flex-start;overflow:auto;max-height:60vh}
.cconv .wab{max-width:72%}
.cconv .wain{position:static}
.cnote{margin:12px 16px;color:var(--muted)}
@media (max-width:899px){
 .cbox{grid-template-columns:minmax(0,1fr)}
 .cbox.has .cside{display:none}
 .cbox:not(.has) .cconv{display:none}
 .cside{border-right:0}
 .cback{display:inline-grid}
 .cconv .wab{max-width:86%}
}
/* Projekt-Fenster: Analyse einfügen, Angebote, Ansprechpartner */
#modal .pm-imp{display:grid;gap:12px;justify-items:start}
#modal .pm-imp .field{width:100%}
#modal .pm-imp textarea{min-height:120px;font-family:ui-monospace,Menlo,monospace;font-size:.8125rem}
#modal .flabel{display:block;font-weight:700;margin-bottom:4px}
.olist,.clist{display:grid;gap:8px;margin-bottom:8px}
.orow{display:grid;grid-template-columns:minmax(0,1fr) 96px auto 44px;gap:8px;align-items:center}
.orow input[type=text],.orow input[type=number],.crow2 input{min-width:0}
.omo{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-s);font-weight:600;white-space:nowrap;cursor:pointer}
.omo input{width:18px;height:18px;margin:0;accent-color:#101012}
.obrow{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:start;padding-bottom:8px;border-bottom:1px solid var(--line)}
.obrow input,.obrow textarea{grid-column:1;min-width:0}
.obrow textarea{padding:11px 16px;line-height:1.4;resize:none;overflow:hidden}
.obrow .icon-btn{grid-column:2;grid-row:1/span 2;align-self:center}
.crow2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px;gap:8px;align-items:center}
#modal .pm-vis .hint{margin-top:-8px}
@media (max-width:560px){
 .orow{grid-template-columns:minmax(0,1fr) 96px 44px}
 .orow .omo{grid-column:1/-1;order:5;min-height:32px}
 .crow2{grid-template-columns:minmax(0,1fr) 44px}
 .crow2 input[data-k="r"]{grid-column:1;grid-row:2}
 .crow2 .icon-btn{grid-column:2;grid-row:1/span 2}
}

/* Anmelden mit Passwort (2026-10-15) */
.pwbox{position:relative}
.pwbox input{padding-right:52px}
.pwbox .icon-btn{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
.pwbox .icon-btn[aria-pressed="true"]{color:var(--ink);background:var(--card)}
.pwnudge{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px 12px;align-items:start;padding:12px 14px 14px;border-radius:var(--r-m);background:var(--accent-soft);border:1px solid #f3e3a0}
.sapp .pwnudge{margin-top:40px}   /* unter dem Abmelden-Symbol oben rechts */
.pwnudge .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#101012;color:var(--accent)}
.pwnudge .ic .ico{width:18px;height:18px}
.pwnudge p{grid-column:2;align-self:center;font-size:var(--fs-s);line-height:1.4}
.pwnudge .btn{grid-column:2;grid-row:2;justify-self:start}
.pwnudge .icon-btn{grid-column:3;grid-row:1}

/* Laufzettel, Reiter „Kurz“ und „Alles“ (Variante B, gewählt am 2026-10-15) */
.zseg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:99px;background:var(--card)}
.zseg button{min-height:44px;border:0;border-radius:99px;background:transparent;font:inherit;font-weight:700;cursor:pointer}
.zseg button[aria-selected="true"]{background:var(--surface);box-shadow:0 1px 3px rgba(40,30,10,.14)}
.vsum{display:grid;border-radius:var(--r-l);background:var(--accent);color:#101012;overflow:hidden}
.vsum li{display:grid;grid-template-columns:20px 52px minmax(0,1fr);gap:8px;align-items:start;padding:12px 16px}
.vsum li+li{border-top:1px solid rgba(16,16,18,.12)}
.vsum .ico{margin-top:2px}
.vsum .k{font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(16,16,18,.6);padding-top:2px}
.vsum b{font-weight:800}
.vz{padding:10px 12px;border-radius:var(--r-m);background:var(--accent-soft);font-size:var(--fs-s)}
.vz{background:var(--surface)}
.vz b{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.vargs,.vobj{display:grid;gap:8px}
.vargs details,.vobj details{border-radius:var(--r-m);background:var(--card)}
.vargs summary,.vobj summary{display:flex;gap:12px;align-items:center;min-height:56px;padding:10px 14px;list-style:none;cursor:pointer;font-weight:700;line-height:1.3}
.vargs summary::-webkit-details-marker,.vobj summary::-webkit-details-marker{display:none}
.vargs summary i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#101012;color:var(--accent);font-style:normal;font-weight:800;font-size:.875rem}
.vargs summary::after,.vobj summary::after{content:"+";margin-left:auto;font-size:1.375rem;font-weight:600;color:var(--muted)}
.vargs details[open] summary::after,.vobj details[open] summary::after{content:"–"}
.vargs .in{display:grid;gap:8px;padding:0 14px 14px 54px;font-size:var(--fs-s)}
.vobj .in{margin:0;padding:0 14px 14px}
input.sr{width:1px;min-height:0;height:1px;padding:0;border:0}   /* unsichtbares Feld für Passwort-Manager, erbt sonst die Feldbreite */
.pm-batch .chip{padding-right:4px}
.pm-batch .chip .icon-btn{width:24px;height:24px;min-width:24px}
.pm-batch .chip .icon-btn svg{width:14px;height:14px}

/* ===== Dein nächster Schritt (Karte oben) und Rundgang beim ersten Start (Entwürfe E und A, 2026-10-17) ===== */
.nstep{position:relative;display:grid;gap:8px;padding:18px 20px;border-radius:24px;background:#101012;color:#fff}
.home>.nstep:first-child{margin-top:36px}   /* Platz unter dem Abmelden-Symbol oben rechts */
.nstep .k{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.nstep h2{font-size:var(--fs-1);letter-spacing:-.03em;line-height:1.15}
.nstep p{color:#e1e1e6}
.nstep .btn{justify-self:start;margin-top:4px}
.nstep .btn .ico{width:18px;height:18px}
.dk-col .nstep{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 24px;padding:20px 24px}
.dk-col .nstep>:not(.btn){grid-column:1}
.dk-col .nstep .btn{grid-column:2;grid-row:1/4;align-self:center;margin:0}
.rg{position:fixed;inset:0;z-index:75;touch-action:none;overscroll-behavior:contain}
.rg-spot{position:fixed;border-radius:22px;box-shadow:0 0 0 3px var(--accent),0 0 0 100vmax rgba(16,16,18,.62);transition:left .45s var(--ease),top .45s var(--ease),width .45s var(--ease),height .45s var(--ease),opacity .25s;pointer-events:none}
.rg-card{position:fixed;display:grid;gap:10px;padding:16px 16px 14px;border-radius:24px;background:var(--surface);box-shadow:var(--sh-xl);outline:none;max-height:calc(100vh - 24px);overflow-y:auto}
.rg-card:not(.dk){left:12px;right:12px;max-width:520px;margin:0 auto}
.rg-card.bot{bottom:calc(12px + env(safe-area-inset-bottom))}
.rg-card.top{top:calc(12px + env(safe-area-inset-top))}
.rg-card.dk{width:380px}
.rg-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rg-n{font-size:.8125rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rg-skip{min-height:44px;padding:0 6px;border:0;background:none;color:var(--muted);font-weight:700;font-size:var(--fs-s);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rg-card h2{font-size:1.3125rem;letter-spacing:-.03em;line-height:1.15}
.rg-card p{font-size:.9375rem;line-height:1.4;color:var(--muted)}
.rg-main,.rg-txt,.rg-side{display:grid;gap:10px;min-width:0}
.rg-txt{align-content:start}
.rg-chips{display:flex;flex-wrap:wrap;gap:6px}
.rg-task{display:flex;gap:10px;padding:9px 12px;border-radius:14px;background:var(--accent-soft);font-size:.90625rem;font-weight:600;line-height:1.35}
.rg-task::before{content:"→";font-weight:800}
.rg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rg-dots{display:flex;gap:6px}
.rg-dots i{width:8px;height:8px;border-radius:99px;background:var(--line);transition:width .3s var(--ease),background .3s}
.rg-dots i.on{width:22px;background:var(--ink)}
.rg-btns{display:flex;gap:8px}
/* niedrige Bildschirme (kleine Handys): Karte kompakter, damit sie den hervorgehobenen Bereich nicht verdeckt */
@media (max-height:700px){.rg-card:not(.dk){padding:12px 14px 10px;gap:6px}.rg-main,.rg-txt,.rg-side{gap:6px}.rg-card h2{font-size:1.125rem}.rg-card p{font-size:.84375rem;line-height:1.35}.rg-task{padding:7px 10px;font-size:.8125rem}.rg-chips{gap:4px}.rg-chips .chip{font-size:.75rem;padding:3px 8px}}
/* Querformat am Handy: Text links, Aufgabe und Knöpfe rechts */
@media (orientation:landscape) and (max-height:520px){.rg-card:not(.dk){max-width:min(760px,calc(100vw - 24px))}.rg-main{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:16px;align-items:end}}
@media (prefers-reduced-motion:reduce){.rg-spot,.rg-dots i{transition:none}}

/* ===== Anfragen aus dem Formular der Website, Reiter im Admin (2026-10-17) ===== */
.iqs{display:grid;gap:12px;margin-top:16px}
.iq{display:grid;gap:8px;padding:16px 18px;border-radius:var(--r-l);background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.iq.new{box-shadow:0 0 0 2px var(--accent)}
.iq-h{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.iq-h b{font-size:var(--fs-1);letter-spacing:-.02em}
.iq-m,.iq-mail{font-size:var(--fs-s);color:var(--muted)}
.iq-msg{max-width:70ch;overflow-wrap:anywhere}
.iq-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.iq-a .btn .ico{width:18px;height:18px}
.iq-s select{min-height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--surface);font-weight:600}
.main-in>.tabs{margin-top:16px;max-width:520px}
/* Offener Eintrag aus einer früheren Woche: eigene Zeile unter dem Namen */
.wkb{display:block;width:fit-content;margin-top:6px;padding:2px 10px;border-radius:99px;background:var(--warn-bg);color:var(--warn);font-size:.75rem;font-weight:700;line-height:1.5;white-space:nowrap}