/* Finanzkompass – Oberfläche */
/* Layout: feste Schrittleiste links (mobil oben), rechts ein Arbeitsblatt pro Beratungsschritt; Bericht als weißes Papierblatt */
:root{
  --paper:#f2f5f7; --surface:#ffffff; --sunk:#e9eef2; --ink:#10202e; --muted:#5a6b7b; --line:#d8e0e7;
  --brand:#1d2a6e; --brand-ink:#ffffff; --accent:#c98326; --good:#2c7a4b; --warn:#b5541c;
  --brand-soft:color-mix(in srgb, var(--brand) 10%, var(--surface));
  --accent-soft:color-mix(in srgb, var(--accent) 14%, var(--surface));
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Public Sans", "Segoe UI", system-ui, sans-serif;
  --f-num:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0c141a; --surface:#121d25; --sunk:#0f1920; --ink:#e4ecf1; --muted:#93a4b2; --line:#24333f;
  --brand:#9aa8f0; --brand-ink:#0b1030; --accent:#e2a24a; --good:#5fbf86; --warn:#ec8a55; color-scheme:dark } }
:root[data-theme="dark"]{
  --paper:#0c141a; --surface:#121d25; --sunk:#0f1920; --ink:#e4ecf1; --muted:#93a4b2; --line:#24333f;
  --brand:#9aa8f0; --brand-ink:#0b1030; --accent:#e2a24a; --good:#5fbf86; --warn:#ec8a55; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.5}
h1,h2,h3{font-family:var(--f-display); font-weight:700; letter-spacing:-.01em; text-wrap:balance; margin:0}
h1{font-size:1.9rem; line-height:1.15} h2{font-size:1.35rem} h3{font-size:1.05rem}
p{margin:0}
.num{font-family:var(--f-num); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.label{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600}

.app{display:grid; grid-template-columns:270px minmax(0,1fr); min-height:100vh}
.side{background:var(--surface); border-right:1px solid var(--line); padding:24px 18px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; overflow:auto}
.brandmark{display:flex; align-items:center; gap:10px; min-height:44px}
.brandmark img{max-height:44px; max-width:200px; object-fit:contain}
.mono{width:40px; height:40px; border-radius:9px; background:var(--brand); color:var(--brand-ink); display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:1.05rem; flex:none}
.brandmark .wm{font-family:var(--f-display); font-weight:700; line-height:1.1}
.brandmark .wm span{display:block; font-family:var(--f-body); font-weight:500; font-size:.75rem; color:var(--muted)}
.client{background:var(--sunk); border-radius:var(--r); padding:12px 14px}
.client strong{display:block; font-size:1rem}
.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.steps button{all:unset; box-sizing:border-box; width:100%; display:flex; gap:12px; align-items:center; padding:10px 10px; border-radius:8px; cursor:pointer; color:var(--ink); font-weight:500}
.steps button:hover{background:var(--sunk)}
.steps button:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.steps button[aria-current="true"]{background:var(--brand-soft); color:var(--brand); font-weight:700}
.steps .n{font-family:var(--f-num); font-size:.78rem; width:24px; height:24px; border-radius:50%; border:1.5px solid currentColor; display:grid; place-items:center; flex:none}
.steps button[aria-current="true"] .n{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:8px}

main{padding-block:32px 80px; padding-inline:clamp(16px,4vw,48px); min-width:0}
.sheet{max-width:1020px; margin:0 auto; display:flex; flex-direction:column; gap:22px}
.sec-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px}
.sec-head p{max-width:62ch}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){ .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} }

.field{display:flex; flex-direction:column; gap:5px; min-width:0}
.field label{font-size:.82rem; font-weight:600}
.field .hint{font-size:.76rem; color:var(--muted)}
input[type=text],input[type=password],input[type=number],input[type=date],select{font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%; min-width:0}
input:focus-visible,select:focus-visible{outline:2px solid var(--brand); outline-offset:0; border-color:var(--brand)}
.unit{position:relative} .unit input{padding-right:38px} .unit::after{content:attr(data-unit); position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.85rem; pointer-events:none}
.check{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:var(--surface)}
.check input{margin-top:3px; accent-color:var(--brand)}
.check:has(input:checked){border-color:var(--brand); background:var(--brand-soft)}
.seg{display:inline-flex; background:var(--sunk); border-radius:9px; padding:3px; gap:3px; flex-wrap:wrap}
.seg button{all:unset; padding:7px 13px; border-radius:7px; cursor:pointer; font-weight:600; font-size:.88rem}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--brand); box-shadow:0 1px 2px rgb(0 0 0 / .12)}
.seg button:focus-visible{outline:2px solid var(--brand)}

.btn{font:inherit; font-weight:600; border-radius:8px; padding:9px 15px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.btn:hover{border-color:var(--brand)}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.btn.primary{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.sm{padding:6px 10px; font-size:.82rem}
.btn.ghost{background:transparent}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.kpi .v{font-family:var(--f-num); font-size:1.45rem; font-weight:600; font-variant-numeric:tabular-nums; margin-top:2px}
.kpi.hl{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)} .kpi.hl .label{color:inherit; opacity:.8}
.kpi.ac{background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 40%, var(--line))}

.notice{display:flex; gap:10px; padding:11px 14px; border-radius:8px; background:var(--accent-soft); font-size:.88rem}
.notice b{white-space:nowrap}

/* Bankkarten */
.banks{display:flex; flex-direction:column; gap:12px}
.bank{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px}
.bank.top{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
.bank.out{opacity:.62}
.bank .name{font-family:var(--f-display); font-weight:700; font-size:1.12rem}
.bank .meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.chip{font-size:.76rem; font-weight:600; padding:3px 9px; border-radius:99px; background:var(--sunk); color:var(--muted); white-space:nowrap}
.chip.ok{background:color-mix(in srgb,var(--good) 14%, var(--surface)); color:var(--good)}
.chip.no{background:color-mix(in srgb,var(--warn) 14%, var(--surface)); color:var(--warn)}
.chip.br{background:var(--brand); color:var(--brand-ink)}
.bank .val{text-align:right} .bank .val .v{font-family:var(--f-num); font-size:1.35rem; font-weight:600}
.pc{grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:14px; font-size:.86rem}
.pc ul{margin:4px 0 0; padding-left:18px} .pc li{margin:2px 0}
.bank .acts{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px}
@media (max-width:560px){ .bank{grid-template-columns:minmax(0,1fr)} .bank .val{text-align:left} .pc{grid-template-columns:1fr} }

/* Upload */
.drop{border:2px dashed var(--line); border-radius:var(--r); padding:26px; text-align:center; background:var(--surface); cursor:pointer}
.drop.over{border-color:var(--brand); background:var(--brand-soft)}
.bars{display:flex; flex-direction:column; gap:8px}
.bar{display:grid; grid-template-columns:minmax(110px,190px) minmax(0,1fr) 90px; gap:10px; align-items:center; font-size:.88rem}
.bar .track{height:12px; background:var(--sunk); border-radius:99px; overflow:hidden}
.bar .fill{height:100%; background:var(--brand); border-radius:99px}
.bar .fill.var{background:var(--accent)}
.bar .amt{text-align:right; font-family:var(--f-num); font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); max-height:420px; overflow-y:auto}
table{border-collapse:collapse; width:100%; font-size:.85rem}
th,td{padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle}
th{background:var(--sunk); font-weight:600; position:sticky; top:0}
td.r,th.r{text-align:right; font-family:var(--f-num); font-variant-numeric:tabular-nums; white-space:nowrap}
td select{padding:4px 6px; font-size:.82rem}
.pos{color:var(--good)} .neg{color:var(--ink)}

/* Geldfluss */
.flow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; position:relative}
.acct{border-radius:var(--r); padding:16px; border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:6px}
.acct .role{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--brand)}
.acct .bk{font-family:var(--f-display); font-weight:700; font-size:1.1rem}
.acct .amt{font-family:var(--f-num); font-size:1.3rem; font-weight:600}
.acct.main{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)} .acct.main .role{color:inherit; opacity:.85}
.arrow{display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--muted)}
.arrow::before{content:""; flex:none; width:22px; height:2px; background:currentColor}
@media (max-width:760px){ .flow{grid-template-columns:minmax(0,1fr)} }
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.timeline li{display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); align-items:baseline}
.timeline li:last-child{border-bottom:0}
.timeline .d{font-family:var(--f-num); font-weight:600; color:var(--brand)}
.timeline .a{font-family:var(--f-num); font-weight:600; white-space:nowrap}
@media (max-width:520px){ .timeline li{grid-template-columns:minmax(0,1fr); gap:2px} }
.alloc{display:flex; height:16px; border-radius:99px; overflow:hidden; gap:2px}
.alloc span{display:block; height:100%}

/* Rente */
.ep{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px}
.ep .big{font-family:var(--f-num); font-size:clamp(2.2rem,6vw,3.4rem); font-weight:600; line-height:1; color:var(--brand); font-variant-numeric:tabular-nums}
.gap-chart{display:flex; flex-direction:column; gap:10px}
.stack{display:flex; height:34px; border-radius:7px; overflow:hidden; background:var(--sunk)}
.stack span{display:flex; align-items:center; padding:0 8px; font-size:.75rem; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; min-width:0}
.stack .gapseg{background:repeating-linear-gradient(135deg, var(--accent) 0 6px, color-mix(in srgb,var(--accent) 55%, var(--surface)) 6px 12px); color:var(--ink)}
.legend{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.82rem}
.legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.contract{display:grid; grid-template-columns:1.4fr 1.3fr .9fr .9fr auto; gap:10px; align-items:end; padding:12px 0; border-bottom:1px solid var(--line)}
.contract:last-child{border-bottom:0}
@media (max-width:820px){ .contract{grid-template-columns:repeat(2,minmax(0,1fr))} }
details.adv summary{cursor:pointer; font-weight:600; color:var(--brand)}
details.adv[open] summary{margin-bottom:12px}

/* Bericht-Papier */
.paper-wrap{background:var(--sunk); border-radius:var(--r); padding:clamp(10px,3vw,28px); overflow-x:auto}

/* Druck (lokal geöffnete Datei) */
@media print{
  .side,.no-print,section.view:not(#v-bericht){display:none!important}
  .app{display:block} main{padding:0} body{background:#fff}
  .paper-wrap{background:none; padding:0}
  #v-bericht{display:block!important}
}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line); padding:14px 16px; gap:12px}
  .steps{flex-direction:row; overflow-x:auto; padding-bottom:4px}
  .steps button{white-space:nowrap; padding:8px 10px}
  .client,.side-foot .brandpanel{display:none}
  .side-foot{flex-direction:row; flex-wrap:wrap}
}
@media (prefers-reduced-motion:no-preference){ .fill,.stack span{transition:width .35s ease} }

/* Modernisierung: jede Beratungsstufe hat eine eigene Farbe (--step), Kopfleiste mit Logo, schwebende Weiter/Zurück-Leiste */
:root{ --s1:#0f8b8d; --s2:#2f6fe4; --s3:#e0861a; --s4:#1e9e6a; --s5:#e0544a; --s6:#7a52e0; --step:var(--s1); --on-step:#ffffff;
  --paper:#f2f5f9; --r:16px; --tb:64px;
  --shadow:0 1px 2px rgb(16 32 46 / .05), 0 8px 24px -12px rgb(16 32 46 / .18); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --s1:#3cc2c4; --s2:#7aa3ff; --s3:#f3ab4e; --s4:#4fcf98; --s5:#ff8a7f; --s6:#ac92ff; --on-step:#07121a; --paper:#0a1117; --shadow:0 1px 2px rgb(0 0 0 / .45), 0 10px 28px -14px rgb(0 0 0 / .7); } }
:root[data-theme="dark"]{ --s1:#3cc2c4; --s2:#7aa3ff; --s3:#f3ab4e; --s4:#4fcf98; --s5:#ff8a7f; --s6:#ac92ff; --on-step:#07121a; --paper:#0a1117; --shadow:0 1px 2px rgb(0 0 0 / .45), 0 10px 28px -14px rgb(0 0 0 / .7); }
body[data-step="konto"]{--step:var(--s2)} body[data-step="haushalt"]{--step:var(--s3)} body[data-step="modell"]{--step:var(--s4)} body[data-step="rente"]{--step:var(--s5)} body[data-step="bericht"]{--step:var(--s6)}

.topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; height:var(--tb); display:flex; align-items:center; gap:18px; padding-inline:clamp(16px,3vw,32px);
  background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.topbar .brandmark{min-height:0}
.lockup{display:flex; align-items:center; gap:10px}
.lockup img{display:block; max-width:none}
.lockup .m{height:40px; width:40px} .lockup .w{height:28px; width:auto}
.lockup .lg-d{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lockup .lg-l{display:none} :root:not([data-theme="light"]) .lockup .lg-d{display:block} }
:root[data-theme="dark"] .lockup .lg-l{display:none} :root[data-theme="dark"] .lockup .lg-d{display:block}
@media (max-width:560px){ .lockup .w{display:none!important} }
.topbar .brandmark img{max-height:40px; max-width:220px}
.tb-sep{width:1px; height:28px; background:var(--line)}
.tb-title{font-family:var(--f-display); font-weight:700; font-size:1.05rem}
.tb-title span{display:block; font-family:var(--f-body); font-weight:500; font-size:.75rem; color:var(--muted)}
.sync{margin-left:auto; white-space:nowrap} .sync.ok{background:color-mix(in srgb,var(--s4) 14%, var(--surface)); color:var(--s4)} .sync.no{background:color-mix(in srgb,var(--s5) 14%, var(--surface)); color:var(--s5)}
.auth{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:16px; overflow:auto;
  background:radial-gradient(1200px 600px at 10% 0%, color-mix(in srgb,var(--s2) 55%, #1d2a6e), #1d2a6e 60%)}
.auth-card{background:var(--surface); color:var(--ink); border-radius:22px; padding:30px; width:min(440px,100%); box-shadow:0 30px 80px -20px rgb(0 0 0 / .5); display:flex; flex-direction:column; gap:16px}
.auth-card h2{font-size:1.5rem}
.auth .btn.primary{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.auth .field label{margin-top:2px}
.auth-logo .lockup{justify-content:flex-start}
.auth-card form{display:flex; flex-direction:column; gap:12px}
.auth-err{color:var(--s5); font-size:.88rem; min-height:1.2em}
.secret{font-family:var(--f-num); font-size:1.05rem; letter-spacing:.08em; background:var(--sunk); padding:10px 12px; border-radius:10px; word-break:break-all; user-select:all}
.qr{display:grid; place-items:center; background:#fff; border-radius:12px; padding:10px} .qr svg{width:180px; height:180px}
.auth-links{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.linkbtn{all:unset; cursor:pointer; color:var(--s2); font-size:.88rem; font-weight:600} .linkbtn:hover{text-decoration:underline} .linkbtn:focus-visible{outline:2px solid var(--s2); outline-offset:2px; border-radius:4px}
.userbox{font-size:.82rem; color:var(--muted); width:100%} .userbox b{color:var(--ink)}
.urow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; background:var(--sunk); border-radius:12px}
.klist{display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow:auto}
.krow{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border-radius:12px; background:var(--sunk)}
.krow.cur{outline:2px solid var(--s1)}
@media (max-width:560px){ .sync{display:none} }
.tb-client{margin-left:auto; display:flex; align-items:center; gap:10px; background:var(--sunk); border-radius:99px; padding:5px 14px 5px 5px; min-width:0}
.tb-client .av{width:30px; height:30px; border-radius:50%; background:var(--step); color:var(--on-step); display:grid; place-items:center; font-weight:700; font-size:.8rem; flex:none; transition:background .3s}
.tb-client strong{display:block; font-size:.9rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tb-client .small{display:block; line-height:1.2; white-space:nowrap}
.progress{position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent}
.progress span{display:block; height:100%; background:linear-gradient(90deg,var(--s1),var(--s2),var(--s3),var(--s4),var(--s5),var(--s6)); background-size:var(--pw,100vw) 100%; border-radius:0 99px 99px 0}
.app{min-height:calc(100vh - var(--tb))}
.side{top:var(--tb); height:calc(100vh - var(--tb)); background:var(--paper); border-right:0; padding-top:28px}
.steps{gap:4px}
.steps button{border-radius:12px; padding:11px 12px}
.steps .n{color:var(--c); border-color:var(--c); width:28px; height:28px; font-weight:600}
.steps button.done .n{background:color-mix(in srgb,var(--c) 18%, var(--surface)); border-color:transparent}
.steps button[aria-current="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
.steps button[aria-current="true"] .n{background:var(--c); border-color:var(--c); color:var(--on-step)}

.sec-head{background:linear-gradient(135deg, color-mix(in srgb,var(--step) 17%, var(--surface)) 0%, var(--surface) 75%); border:1px solid color-mix(in srgb,var(--step) 22%, var(--line)); border-radius:calc(var(--r) + 4px); padding:26px 26px 24px; box-shadow:var(--shadow)}
.sec-head .label{display:inline-block; background:var(--step); color:var(--on-step); padding:4px 11px; border-radius:99px; margin-bottom:10px; letter-spacing:.06em}
.sec-head h1{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.panel,.kpi,.bank,.acct,.drop,.tbl-wrap{border-radius:var(--r)}
.panel,.kpi,.bank,.acct{border-color:color-mix(in srgb,var(--line) 70%, transparent); box-shadow:var(--shadow)}
.kpi .label{display:block}
.kpi.hl{background:linear-gradient(135deg, var(--step), color-mix(in srgb,var(--step) 72%, #10202e)); color:var(--on-step); border-color:transparent}
.kpi.ac{background:color-mix(in srgb,var(--s3) 14%, var(--surface)); border-color:transparent}
.kpi:not(.hl):not(.ac) .v{color:var(--ink)}
input[type=text],input[type=password],input[type=number],input[type=date],select{border-radius:10px; background:var(--sunk); border-color:transparent; transition:border-color .15s, background .15s}
input[type=text]:hover,input[type=password]:hover,input[type=number]:hover,input[type=date]:hover,select:hover{border-color:var(--line)}
input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--step) 30%, transparent); border-color:var(--step); background:var(--surface)}
/* Auswahllisten: manche Browser zeichnen die offene Liste hell, daher Farben fest setzen */
select option{color:var(--ink); background:var(--surface)}
.check{border-radius:12px; border-color:transparent; background:var(--sunk)}
.check input{accent-color:var(--step)}
.check:has(input:checked){border-color:var(--step); background:color-mix(in srgb,var(--step) 10%, var(--surface))}
.btn{border-radius:99px; padding:9px 18px}
.btn:hover{border-color:var(--step)}
.btn.primary{background:var(--step); border-color:var(--step); color:var(--on-step)}
.btn:focus-visible,.seg button:focus-visible,.steps button:focus-visible{outline:3px solid color-mix(in srgb,var(--step) 40%, transparent)}
.seg{border-radius:99px; padding:4px}
.seg button{border-radius:99px}
.seg button[aria-pressed="true"]{color:var(--step)}
.notice{border-radius:12px; background:color-mix(in srgb,var(--step) 10%, var(--surface)); border:1px solid color-mix(in srgb,var(--step) 25%, transparent)}
.chip.br{background:var(--step); color:var(--on-step)}
.bank.top{border-color:var(--step); box-shadow:0 0 0 2px var(--step), var(--shadow)}
.bank .val .v.pos{color:var(--s4)}
.drop{border-color:color-mix(in srgb,var(--step) 45%, var(--line)); background:color-mix(in srgb,var(--step) 6%, var(--surface))}
.drop.over{border-color:var(--step); background:color-mix(in srgb,var(--step) 14%, var(--surface))}
.bar .fill{background:var(--s2)} .bar .fill.var{background:var(--s3)}
.acct.main{background:linear-gradient(135deg, var(--step), color-mix(in srgb,var(--step) 72%, #10202e)); color:var(--on-step)}
.acct:nth-child(2) .role{color:var(--s2)} .acct:nth-child(3) .role{color:var(--s6)}
.acct:nth-child(2){border-top:4px solid var(--s2)} .acct:nth-child(3){border-top:4px solid var(--s6)}
.timeline .d{color:var(--step)}
.ep .big{color:var(--step)}
details.adv summary{color:var(--step)}
.stack{border-radius:10px; height:38px}

main{padding-block:28px 24px}
.pager{position:sticky; bottom:0; z-index:20; margin-top:30px; padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.pager .in{max-width:1020px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px;
  background:color-mix(in srgb,var(--surface) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); border-radius:99px; box-shadow:var(--shadow)}
.pager .btn{white-space:nowrap}
.pager .dots{display:flex; gap:6px; align-items:center}
.pager .dots i{width:8px; height:8px; border-radius:99px; background:var(--line); transition:width .25s, background .25s}
.pager .dots i.on{width:26px; background:var(--step)}
.pager .dots i.done{background:color-mix(in srgb,var(--step) 45%, var(--line))}
:root{--s7:#cf3f7c}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --s7:#ff7fb2 } }
:root[data-theme="dark"]{ --s7:#ff7fb2 }
body[data-step="gesund"]{--step:var(--s7)}
.lohn-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:18px; align-items:start}
@media (max-width:760px){ .lohn-grid{grid-template-columns:minmax(0,1fr)} }
.lohn-grid tr.net td{font-weight:700; font-size:1rem; border-bottom:0; background:color-mix(in srgb,var(--s4) 10%, var(--surface))}
.lohn-split{display:flex; flex-direction:column; gap:12px}
.lohn-split .big{font-family:var(--f-num); font-size:2rem; font-weight:600; color:var(--s4); line-height:1}
#h-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){ #h-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
.man-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px 14px}
.man-grid h4{grid-column:1/-1; margin:8px 0 0; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.lims{display:flex; flex-direction:column; gap:14px}
.lim{display:grid; grid-template-columns:minmax(150px,230px) minmax(0,1fr) minmax(150px,auto); gap:14px; align-items:center; font-size:.88rem}
.lim .track{position:relative; height:12px; background:var(--sunk); border-radius:99px}
.lim .fill{position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--step)}
.lim .mark{position:absolute; top:-5px; bottom:-5px; width:3px; border-radius:2px; background:var(--ink)}
.lim .st{text-align:right}
@media (max-width:620px){ .lim{grid-template-columns:minmax(0,1fr)} .lim .st{text-align:left} }
.jaeg{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:14px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--s7) 16%, var(--surface)), var(--surface)); border:1px solid color-mix(in srgb,var(--s7) 35%, transparent)}
.jaeg b{color:var(--s7)}
.jaeg .btn.primary{background:var(--s7); border-color:var(--s7)}
.checks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.checks .ck{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; background:var(--sunk); border-radius:12px; flex-wrap:wrap}
.checks .seg button{padding:5px 11px; font-size:.8rem}
.checks .seg button[aria-pressed="true"][data-v="ok"]{color:var(--s4)} .checks .seg button[aria-pressed="true"][data-v="fehlt"]{color:var(--s5)}
@media (max-width:620px){ .checks{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
  .side{position:static; height:auto; background:var(--paper); padding:12px 16px 4px}
  .tb-sep,.tb-title{display:none}
}
@media (max-width:560px){ .pager .lbl{display:none} .tb-client .small{display:none} .sec-head{padding:20px 18px} }
@media print{ .topbar,.pager{display:none!important} }


/* Schritt „Nicht gewünscht“ */
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.steps button.aus{color:var(--muted, inherit); opacity:.6; text-decoration:line-through}
.steps button.aus .n{border-style:dashed}
.ausnote{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin:0 0 18px; padding:12px 14px; border-radius:12px; background:var(--sunk); border:1px dashed var(--line)}
.pager .in > .row{flex-wrap:nowrap}
@media (max-width:560px){ .pager [data-aus]{padding-inline:10px; font-size:.85rem} }

/* Beraterfoto in der Kopfzeile */
.tb-berater{display:flex; align-items:center; gap:10px; flex:none; margin-left:auto}
.tb-berater img{width:38px; height:38px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--line)}
.tb-berater strong{display:block; font-size:.9rem; line-height:1.2; white-space:nowrap}
.tb-berater .small{display:block; line-height:1.2}
.tb-berater:not([hidden]) + .tb-client{margin-left:0}
.tb-berater:not([hidden]) ~ .tb-client{margin-left:0}
@media (max-width:900px){ .tb-berater div{display:none} }

/* ---------- Responsiv: Handy, Tablet, PC ---------- */
/* Touch-Geräte (Handy, Tablet): Bedienflächen mind. 40–44 px, 16 px Schrift in Feldern (sonst zoomt das iPhone beim Antippen) */
@media (pointer:coarse){
  input[type=text],input[type=password],input[type=number],input[type=date],select{font-size:16px; min-height:44px}
  .btn{min-height:44px} .btn.sm{min-height:40px; padding:8px 14px}
  .seg button{padding:10px 15px}
  .checks .seg button{padding:11px 12px}
  .check{padding:12px 14px} .check input{width:20px; height:20px; margin-top:1px; flex:none}
  td select{min-height:40px; font-size:16px} td .btn.sm{min-height:36px; min-width:36px}
  .steps button{min-height:44px}
}
/* Tablet und kleine Laptops: Seitenränder, Weiter-Leiste ohne lange Beschriftung */
@media (max-width:1200px){ .pager .lbl{display:none} }
.pager .in > *{min-width:0} .pager .btn{overflow:hidden; text-overflow:ellipsis}
@media (min-width:561px) and (max-width:1100px){ main{padding-inline:24px} }
/* Handy */
@media (max-width:560px){
  main{padding-inline:12px; padding-top:16px}
  .sheet{gap:16px}
  .panel{padding:16px}
  .sec-head{padding:18px 16px}
  .sec-head h1{font-size:1.6rem}
  .topbar{gap:10px; padding-inline:12px}
  .pager{margin-top:20px}
  .pager .in{gap:6px; padding:6px}
  .pager .dots{display:none}
  .pager .btn{padding-inline:14px}
  .notice{flex-direction:column; gap:4px}
  .kpi .v{font-size:1.25rem}
  .bar{grid-template-columns:minmax(0,1fr) auto} .bar .track{grid-column:1/-1; order:3}
  .ausnote .btn{width:100%}
  .krow .row{width:100%}
  dialog{padding:16px!important; max-height:calc(100dvh - 24px)}
}
@media (max-width:380px){ .pager [data-aus]{font-size:.8rem; padding-inline:10px} }
/* Große Bildschirme: etwas mehr Breite für Tabellen und Diagramme */
@media (min-width:1500px){ .sheet,.pager .in{max-width:1180px} }

/* Einwilligung zu Beginn: ohne Haken sind die übrigen Felder von Schritt 1 ausgeblendet */
.consent{border:2px solid color-mix(in srgb,var(--step) 45%, var(--line))}
body.no-consent #v-kunde .panel:not(#consent), body.no-consent #v-kunde .lohn-grid{display:none}
.pager .btn[disabled]{opacity:.45; cursor:not-allowed; filter:none}
@keyframes fk-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--step) 60%, transparent)}100%{box-shadow:0 0 0 14px transparent}}
.consent.pulse{animation:fk-pulse .8s ease-out 2}