/* kunde.css — Lauener Systematic, Kunden-Sicht (k/<slug>/) und Gate-Seiten
 * Look der öffentlichen Site: Tokens, Schriften, Wortmarke aus site.css übernommen
 * (Kopie, nicht verlinkt — designs/public_site/ wird veröffentlicht, diese Sicht nicht).
 * Dark/Light via prefers-color-scheme, manuell über <html data-theme="dark|light"> (kunde.js).
 */

/* ---------- Schriften (lokal, byte-identisch mit public_site/assets/fonts) ---------- */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-Regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-Medium.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSerif-Regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSerif-Medium.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Serif';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSerif-SemiBold.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexMono-Regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexMono-Medium.woff2') format('woff2');}

/* ---------- Tokens (= site.css) ---------- */
:root{
  --bg:#f5f1e9; --surface:#fcfaf4; --ink:#221c14; --muted:#6f6555; --faint:#988d7c;
  --hair:#e2dac9; --accent:#8c6a34; --pos:#1f7059; --neg:#b23f30;
  --chart-bench:#a79d8b; --chart-overlay:#5c7ba3;
  --chart-shade:rgba(60,48,30,0.05); --chart-band:rgba(140,106,52,0.10);
  --sel:rgba(140,106,52,0.16);
  --serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --maxw:1120px;
  --wordmark-systematic-weight:400;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16130f; --surface:#1e1a15; --ink:#e8e1d3; --muted:#a89b87; --faint:#7b7160;
    --hair:#332d24; --accent:#c69d5c; --pos:#4fae8c; --neg:#d97f66;
    --chart-bench:#6d6455; --chart-overlay:#87a1c4;
    --chart-shade:rgba(232,225,211,0.055); --chart-band:rgba(198,157,92,0.13);
    --sel:rgba(198,157,92,0.22);
  }
}
:root[data-theme="dark"]{
  --bg:#16130f; --surface:#1e1a15; --ink:#e8e1d3; --muted:#a89b87; --faint:#7b7160;
  --hair:#332d24; --accent:#c69d5c; --pos:#4fae8c; --neg:#d97f66;
  --chart-bench:#6d6455; --chart-overlay:#87a1c4;
  --chart-shade:rgba(232,225,211,0.055); --chart-band:rgba(198,157,92,0.13);
  --sel:rgba(198,157,92,0.22);
}

/* ---------- Basis (= site.css) ---------- */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{background:var(--bg);scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums lining-nums;}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;}
a:hover{color:var(--accent);text-decoration-color:var(--accent);}
::selection{background:var(--sel);}
h1,h2,h3,p{margin:0;}
button,input{font:inherit;color:inherit;}
input[type="checkbox"]{accent-color:var(--accent);}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:28px;padding-right:28px;}
.pos{color:var(--pos);} .neg{color:var(--neg);} .dim{color:var(--faint);}
.mono{font-family:var(--mono);}

/* ---------- Kopf: Wortmarke + Kontoname + Theme ---------- */
.site-header{border-bottom:1px solid var(--hair);}
.site-header .wrap{padding-top:18px;padding-bottom:16px;display:flex;align-items:baseline;gap:12px 22px;flex-wrap:wrap;}
.brand{font-family:var(--serif);font-size:18px;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap;}
.brand span{font-weight:var(--wordmark-systematic-weight);}
.brand:hover{color:var(--ink);}
.k-mandant{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.k-mandant b{font-weight:500;color:var(--ink);}
.theme-btn{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:none;border:1px solid var(--hair);color:var(--muted);padding:4px 10px;cursor:pointer;border-radius:2px;}
.theme-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- Navigation: fünf Einträge, sticky; Handy: Bottom-Bar ---------- */
.subnav{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--hair);background:var(--surface);}
.subnav .wrap{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;}
.subnav .wrap::-webkit-scrollbar{display:none;}
.subnav a{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);text-decoration:none;padding:12px 0 10px;border-bottom:2px solid transparent;white-space:nowrap;}
.subnav a:hover{color:var(--accent);}
.subnav a[aria-current]{color:var(--accent);border-bottom-color:var(--accent);}
.subnav a.logout{margin-left:auto;}

/* ---------- Seitenkopf ---------- */
main.wrap{padding-top:40px;padding-bottom:40px;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.page-title{font-family:var(--serif);font-weight:500;font-size:clamp(28px,4vw,38px);line-height:1.15;margin-top:10px;text-wrap:balance;}
.sec-title{font-family:var(--serif);font-size:22px;font-weight:500;}
.sub{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:5px;}
.prose{font-size:16px;line-height:1.75;max-width:62ch;text-wrap:pretty;}
.prose strong{font-weight:600;}
.prose p+p{margin-top:14px;}
.meta{margin-top:14px;display:flex;gap:8px 22px;flex-wrap:wrap;align-items:baseline;font-family:var(--mono);font-size:12px;color:var(--muted);}
.meta .dim{color:var(--faint);}
.stale{margin-top:14px;border:1px solid var(--neg);color:var(--neg);border-radius:4px;padding:11px 16px;font-size:13.5px;font-weight:500;line-height:1.55;}

/* Status-Banner: Paper deutlich (Akzent-Rahmen, gefülltes Badge), Live ruhig */
.banner{margin-top:22px;border:1px solid var(--accent);background:var(--surface);border-radius:4px;padding:16px 20px;display:flex;gap:14px 16px;align-items:flex-start;flex-wrap:wrap;}
.banner p{font-size:14.5px;line-height:1.6;max-width:78ch;}
.banner.live{border-color:var(--hair);}
.badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bg);background:var(--accent);padding:3px 9px;border-radius:2px;white-space:nowrap;margin-top:3px;}
.badge.live{background:none;color:var(--accent);border:1px solid var(--accent);padding:2px 8px;}
.st-chip{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;border-radius:20px;padding:2px 9px;border:1px solid var(--hair);color:var(--muted);white-space:nowrap;vertical-align:middle;}
.st-chip.live,.st-chip.paper{color:var(--accent);border-color:var(--accent);}

/* ---------- Stand: drei Zahlen gross ---------- */
.k-big{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px 28px;}
.k-num .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);}
.k-num .v{font-family:var(--mono);font-size:clamp(28px,3.6vw,38px);font-weight:500;margin-top:8px;line-height:1.1;white-space:nowrap;}
.k-num .v small{font-size:.5em;font-weight:400;color:var(--muted);margin-left:.15em;}
.k-num .s{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:8px;line-height:1.6;}
.k-num .s b{font-weight:500;color:var(--muted);}

/* ---------- Charts ---------- */
.chart-section{margin-top:52px;}
.chart-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 26px;flex-wrap:wrap;margin-bottom:14px;}
.chart-card{background:var(--surface);border:1px solid var(--hair);border-radius:4px;padding:14px 10px 8px;position:relative;}
.chart-card svg{display:block;width:100%;cursor:crosshair;touch-action:pan-y;}
svg .grid,svg .ab-grid{stroke:var(--hair);stroke-width:1;}
svg .ax,svg .ab-ax{font-size:10px;fill:var(--faint);font-family:var(--mono);}
svg .nav-line,svg .ab-nav{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
svg .ab-hwm{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:5 3;opacity:.7;}
svg .ab-fill{fill:var(--chart-band);}
svg .shade{fill:var(--chart-shade);}
svg .cut,svg .ab-cut{stroke:var(--faint);stroke-width:1;}
svg .cutlbl,svg .ab-cutlbl{font-size:10px;fill:var(--muted);font-family:var(--mono);}
svg .flow,svg .ab-flow{stroke:var(--chart-overlay);stroke-width:1.2;stroke-dasharray:2 3;}
svg .flowdot,svg .ab-flowdot{fill:var(--chart-overlay);}
svg .flowlbl,svg .ab-flowlbl{font-size:10.5px;fill:var(--chart-overlay);font-family:var(--mono);font-weight:500;}
svg .hline{stroke:var(--faint);stroke-width:1;}
.tt{position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);border-radius:3px;padding:6px 9px;font-size:11.5px;font-family:var(--mono);white-space:nowrap;z-index:5;line-height:1.5;}
.tt .m{opacity:.7;} .tt .b{font-weight:500;}
.legend-inline{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted);}
.legend-inline>span{display:flex;gap:10px;align-items:center;}
.legend-inline .swatch-line{width:24px;border-top:2px solid var(--accent);flex:none;}
.legend-inline .swatch-hwm{width:24px;border-top:2px dashed var(--ink);opacity:.7;flex:none;}
.legend-inline .swatch-cut{width:24px;border-top:1px solid var(--faint);flex:none;}
.legend-inline .swatch-shade{width:24px;height:12px;background:var(--chart-shade);border:1px solid var(--hair);border-radius:2px;flex:none;}
.legend-inline .swatch-band{width:24px;height:12px;background:var(--chart-band);border-radius:2px;flex:none;}
.legend-inline .swatch-flow{width:9px;height:9px;border-radius:50%;background:var(--chart-overlay);flex:none;}
.legend-inline .hint{font-family:var(--mono);font-size:10.5px;color:var(--faint);}
.chart-empty{padding:44px 20px;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.6;}
.fineprint{margin-top:12px;font-size:12.5px;color:var(--muted);max-width:74ch;line-height:1.6;text-wrap:pretty;}

/* ---------- Kacheln: Trend / Overlay / Cash ---------- */
.k-tiles{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.tile{background:var(--surface);border:1px solid var(--hair);border-radius:4px;padding:16px 18px 14px;display:flex;flex-direction:column;gap:6px;}
.tile-label{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.tile-value{font-family:var(--mono);font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;}
.tile-value small{font-size:12px;font-weight:400;color:var(--muted);margin-left:4px;}
.tile-share{font-family:var(--mono);font-size:11.5px;color:var(--faint);}
.tile-share b{font-weight:500;color:var(--muted);}
.tile-text{font-size:12.5px;line-height:1.6;color:var(--muted);text-wrap:pretty;margin-top:4px;}
.tile-list{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-family:var(--mono);font-size:12px;color:var(--muted);}
.tile-list li{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--hair);padding-top:5px;}
.tile-list li span:last-child{color:var(--ink);white-space:nowrap;}

/* ---------- Tabellen (Positionen, Kapitalflüsse, Abrechnungen) ---------- */
.instr-controls{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;}
.controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.controls label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;}
.table-scroll{margin-top:14px;overflow-x:auto;border:1px solid var(--hair);border-radius:4px;background:var(--surface);}
.ctable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;}
.ctable th{font-weight:400;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:10px 10px;text-align:right;border-bottom:1px solid var(--hair);white-space:nowrap;}
.ctable td{padding:10px 10px;text-align:right;white-space:nowrap;border-top:1px solid var(--hair);vertical-align:middle;}
.ctable tr:first-child td{border-top:none;}
.ctable .left{text-align:left;}
.ctable th.left,.ctable td.left{padding-left:14px;}
.ctable th:last-child,.ctable td:last-child{padding-right:14px;}
.ctable td.name{font-family:var(--sans);font-size:14px;}
.ctable td.name .cls{display:none;}
.ctable .cls-cell{color:var(--muted);font-family:var(--sans);font-size:12.5px;}
.ctable th.cls-cell{font-family:var(--mono);font-size:10.5px;}
.ctable .dir{font-family:var(--sans);font-size:12.5px;color:var(--ink);white-space:nowrap;}
.ctable .dir .arr{font-family:var(--mono);color:var(--muted);margin-right:4px;}
.ctable .dir.short .arr{color:var(--neg);} .ctable .dir.long .arr{color:var(--pos);}
.ctable .bar{display:inline-block;width:56px;height:6px;background:var(--hair);border-radius:1px;vertical-align:middle;margin-right:8px;position:relative;overflow:hidden;}
.ctable .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);opacity:.75;}
.ctable tr.grp td{background:var(--chart-shade);font-family:var(--sans);font-size:12px;color:var(--muted);padding:8px 10px;border-top:1px solid var(--hair);}
.ctable tr.grp td b{font-weight:600;color:var(--ink);}
.ctable tr.grp td.num{font-family:var(--mono);font-size:12px;}
.ctable tr.sum td{border-top:2px solid var(--hair);font-weight:500;}
.ctable td.wrap-cell{white-space:normal;text-align:left;font-family:var(--sans);font-size:13px;color:var(--muted);min-width:200px;}
.table-empty{padding:32px 20px;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.6;}
.table-foot{margin-top:10px;font-size:12px;color:var(--muted);}
.ab-st{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;border-radius:20px;padding:2px 9px;border:1px solid var(--hair);color:var(--muted);}
.ab-st.bezahlt{color:var(--pos);border-color:var(--pos);}
.ab-st.gestellt,.ab-st.offen{color:var(--accent);border-color:var(--accent);}
.ab-stdate{font-size:11px;color:var(--faint);margin-left:6px;}

/* ---------- Ereignisse ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
.chip{font-family:var(--mono);font-size:11px;letter-spacing:.02em;padding:4px 12px;border:1px solid var(--hair);border-radius:20px;background:none;color:var(--muted);cursor:pointer;}
.chip:hover{border-color:var(--accent);color:var(--accent);}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--sel);}
.chip .n{opacity:.7;margin-left:4px;}
.k-day{margin-top:36px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--hair);}
.k-ev{display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:6px 18px;padding:16px 0;border-bottom:1px solid var(--hair);align-items:start;}
.k-ev .badge-art{display:inline-block;justify-self:start;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--surface);border:1px solid var(--hair);padding:3px 10px;border-radius:20px;white-space:nowrap;margin-top:1px;}
.k-ev .t{font-weight:600;font-size:14.5px;line-height:1.5;}
.k-ev .x{margin-top:4px;font-size:13.5px;line-height:1.65;color:var(--muted);max-width:66ch;text-wrap:pretty;}
.k-ev .amt{font-family:var(--mono);font-size:13px;white-space:nowrap;padding-top:2px;}
.k-ev.vorfall{border-left:2px solid var(--accent);padding-left:16px;margin-left:-18px;}
.k-ev.vorfall .badge-art{border-color:var(--accent);}
.k-ev.vorfall .x{color:var(--ink);}
.k-empty{margin-top:28px;border:1px dashed var(--hair);border-radius:4px;padding:36px 24px;text-align:center;color:var(--muted);font-size:14px;line-height:1.6;}

/* ---------- Abrechnung (ab-*: gemeinsam mit abrechnung.js) ---------- */
.ab-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;}
.ab-kopf .name{font-family:var(--serif);font-size:22px;font-weight:500;}
.ab-kond{margin-top:22px;font-size:16px;line-height:1.7;max-width:64ch;text-wrap:pretty;}
.ab-kond b{font-weight:600;}
.ab-kpis{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;}
.ab-kpi{background:var(--surface);border:1px solid var(--hair);border-radius:4px;padding:13px 15px;min-width:0;}
.ab-kpi .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.ab-kpi .val{font-family:var(--mono);font-size:22px;font-weight:500;margin-top:6px;white-space:nowrap;}
.ab-kpi .val .dimval{display:block;white-space:normal;color:var(--faint);font-size:14px;font-family:var(--sans);font-weight:400;padding-top:4px;}
.ab-kpi .pos{color:var(--pos);}
.ab-kpi .sub{margin-top:6px;font-size:12px;line-height:1.55;color:var(--muted);text-wrap:pretty;}
.ab-kpi .sub b{color:var(--ink);font-weight:600;}
.ab-kpi.fee{border-color:var(--accent);}
.ab-kpi.fee .val{color:var(--accent);}
.ab-note{margin-top:14px;border:1px solid var(--hair);background:var(--surface);border-radius:4px;padding:12px 16px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:78ch;}
.ab-note strong{color:var(--ink);}
.ab-chart .chart-box{position:relative;}
.ab-legend{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted);}
.ab-legend .item{display:flex;gap:10px;align-items:center;}
.ab-legend .sw-nav{width:24px;border-top:2px solid var(--accent);display:inline-block;}
.ab-legend .sw-hwm{width:24px;border-top:2px dashed var(--ink);opacity:.7;display:inline-block;}
.ab-legend .sw-flow{width:9px;height:9px;border-radius:50%;background:var(--chart-overlay);display:inline-block;}
.ab-legend .sw-shade{width:24px;height:12px;border-radius:2px;display:inline-block;background:var(--chart-band) !important;opacity:1 !important;}
.ab-table .table-inner{min-width:640px;padding:0 4px;}
.ab-thead{display:grid;gap:0 12px;padding:10px 10px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair);}
.ab-row{display:grid;gap:0 12px;align-items:center;padding:10px 10px;border-top:1px solid var(--hair);font-size:13.5px;}
.ab-row:first-child{border-top:none;}
.ab-row .mono,.ab-thead .mono{font-family:var(--mono);font-size:12.5px;}
.ab-row .num,.ab-thead .num{text-align:right;font-family:var(--mono);font-size:12.5px;}
.ab-thead .num{font-size:inherit;}
.ab-row .bem{color:var(--muted);font-size:13px;}
.ab-kf .ab-thead,.ab-kf .ab-row{grid-template-columns:110px 130px 110px minmax(200px,1fr);}
.ab-hist .table-inner{min-width:900px;}
.ab-hist .ab-thead,.ab-hist .ab-row{grid-template-columns:100px 160px 110px 176px 84px 84px 100px minmax(150px,1fr);}
.ab-empty{padding:26px 16px;text-align:center;font-size:13.5px;color:var(--muted);line-height:1.6;}
.k-sec{margin-top:52px;}
.k-sec .sec-title+.sub{margin-top:6px;}

/* ---------- Konto ---------- */
.k-kv{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 48px;max-width:820px;}
.k-kv .row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--hair);align-items:baseline;}
.k-kv .row .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);}
.k-kv .row .v{font-size:15px;}
.k-kv .row .v.mono{font-family:var(--mono);font-size:14px;}
.k-kv .row .v small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;}
.card{border:1px solid var(--hair);border-radius:4px;padding:22px 24px;}
.card.filled{background:var(--surface);}
.card-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.card p{margin-top:12px;font-size:13.5px;line-height:1.7;color:var(--muted);text-wrap:pretty;}
.card p a{color:var(--ink);}
.notes-grid{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start;}
.btn{display:inline-block;background:var(--ink);color:var(--bg);padding:12px 22px;text-decoration:none;font-size:14.5px;font-weight:500;border-radius:3px;border:none;cursor:pointer;}
.btn:hover{background:var(--accent);color:#fff;}
.btn-ghost{display:inline-block;border:1px solid var(--hair);color:var(--ink);padding:11px 20px;text-decoration:none;font-size:14px;font-weight:500;border-radius:3px;background:none;cursor:pointer;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- Erklärung ---------- */
.narrow{max-width:760px;}
.numbered{margin-top:44px;display:grid;grid-template-columns:48px 1fr;gap:6px 18px;}
.numbered .n{font-family:var(--mono);font-size:13px;color:var(--faint);padding-top:6px;}
.numbered .n:not(:first-child),.numbered .n:not(:first-child)+div{margin-top:36px;}
.numbered h2{font-family:var(--serif);font-size:22px;font-weight:500;}
.numbered .prose{margin-top:12px;}
.numbered .prose p{font-size:15.5px;}
.placeholder{border:1px dashed var(--hair);border-radius:3px;padding:12px 14px;color:var(--faint);font-size:13.5px;line-height:1.6;background:repeating-linear-gradient(135deg,transparent 0 9px,var(--chart-shade) 9px 18px);}

/* ---------- Fuss ---------- */
.site-footer{border-top:1px solid var(--hair);margin-top:72px;}
.site-footer .wrap{padding-top:28px;padding-bottom:40px;display:flex;justify-content:space-between;gap:20px 60px;flex-wrap:wrap;}
.site-footer .legal{max-width:60ch;font-size:12.5px;line-height:1.65;color:var(--muted);text-wrap:pretty;}
.site-footer .copy{margin-top:10px;color:var(--faint);}
.site-footer nav{display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;}
.site-footer nav a{text-decoration:none;color:var(--muted);}
.site-footer nav a:hover{color:var(--accent);}

/* ---------- Gate (Login, Einladung, Reset, Abgemeldet) ---------- */
body.gate{min-height:100vh;display:flex;flex-direction:column;}
.gate-main{flex:1;display:grid;place-items:start center;padding:56px 20px 40px;}
.gate-card{width:100%;max-width:400px;}
.gate-card .brand{display:inline-block;font-size:20px;}
.gate-card .eyebrow{margin-top:34px;}
.gate-card h1{font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.2;margin-top:8px;text-wrap:balance;}
.gate-card .lead{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--muted);text-wrap:pretty;}
.gate-form{margin-top:26px;display:grid;gap:16px;}
.field{display:grid;gap:6px;}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);}
.field input{width:100%;padding:11px 13px;font-size:15px;border:1px solid var(--hair);border-radius:3px;background:var(--surface);color:var(--ink);outline:none;}
.field input:focus{border-color:var(--accent);}
.field .rule{font-size:12.5px;color:var(--faint);line-height:1.5;}
.gate-form .btn{width:100%;text-align:center;padding:13px 22px;}
.gate-links{margin-top:22px;display:flex;gap:10px 22px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;}
.gate-links a{color:var(--muted);text-decoration:none;}
.gate-links a:hover{color:var(--accent);}
.gate-msg{margin-top:20px;border:1px solid var(--neg);color:var(--neg);border-radius:4px;padding:11px 14px;font-size:13.5px;line-height:1.55;font-weight:500;}
.gate-msg.info{border-color:var(--hair);color:var(--ink);font-weight:400;background:var(--surface);}
.gate-msg.ok{border-color:var(--pos);color:var(--pos);}
.gate-foot{padding:18px 20px 28px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--faint);}
.gate-foot a{color:var(--faint);}
/* Zustände: alles ist im Markup, data-state blendet ein/aus — kein JS nötig */
[data-only]{display:none !important;}
body[data-state="leer"] [data-only~="leer"],body[data-state="fehler"] [data-only~="fehler"],body[data-state="gesperrt"] [data-only~="gesperrt"],
body[data-state="setzen"] [data-only~="setzen"],body[data-state="abgelaufen"] [data-only~="abgelaufen"],body[data-state="erledigt"] [data-only~="erledigt"],
body[data-state="adresse"] [data-only~="adresse"],body[data-state="gesendet"] [data-only~="gesendet"],body[data-state="neu"] [data-only~="neu"]{display:block !important;}
body[data-state="leer"] form[data-only~="leer"],body[data-state="fehler"] form[data-only~="fehler"],body[data-state="gesperrt"] form[data-only~="gesperrt"],
body[data-state="setzen"] form[data-only~="setzen"],body[data-state="adresse"] form[data-only~="adresse"],body[data-state="neu"] form[data-only~="neu"]{display:grid !important;}
/* Zustands-Schalter nur für die Design-Abnahme */
.state-demo{position:fixed;right:12px;bottom:12px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:60vw;z-index:50;}
.state-demo a{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--hair);border-radius:20px;padding:3px 9px;color:var(--faint);text-decoration:none;background:var(--bg);}
.state-demo a:hover,.state-demo a.on{color:var(--accent);border-color:var(--accent);}

/* ---------- Handy ---------- */
@media (max-width:640px){
  .wrap{padding-left:20px;padding-right:20px;}
  body.k{padding-bottom:64px;}
  .site-header .wrap{padding-top:14px;padding-bottom:12px;}
  .k-mandant{width:100%;order:3;}
  .subnav{position:fixed;top:auto;bottom:0;left:0;right:0;border-bottom:0;border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom);}
  .subnav .wrap{gap:0;padding:0;justify-content:space-between;}
  .subnav a{flex:1;text-align:center;font-size:9.5px;letter-spacing:.06em;padding:13px 2px 12px;border-bottom:0;border-top:2px solid transparent;}
  .subnav a[aria-current]{border-top-color:var(--accent);}
  .subnav a.logout{display:none;}
  main.wrap{padding-top:28px;}
  .k-big{margin-top:30px;grid-template-columns:1fr;gap:20px;}
  .k-num .v{font-size:32px;}
  .k-ev{grid-template-columns:1fr auto;gap:8px 14px;padding:14px 0;}
  .k-ev .badge-art{grid-column:1/-1;justify-self:start;}
  .k-ev.vorfall{margin-left:0;padding-left:14px;}
  .ctable th,.ctable td{padding:9px 7px;}
  .ctable th.left,.ctable td.left{padding-left:10px;}
  .ctable th:last-child,.ctable td:last-child{padding-right:10px;}
  .ctable td.name{white-space:normal;}
  .ctable td.name .cls{display:block;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:2px;}
  .ctable .cls-cell,.ctable th.cls-cell{display:none;}
  .ctable .bar{display:none;}
  .ab-table .table-inner,.ab-hist .table-inner{min-width:0;}
  .ab-thead{display:none;}
  .ab-row{grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 10px;}
  .ab-kf .ab-row .bem,.ab-hist .ab-row .c-per,.ab-hist .ab-row .c-st{grid-column:1/-1;}
  .ab-hist .ab-row{grid-template-columns:1fr 1fr 1fr;}
  .ab-row .num{text-align:left;}
  .ab-row [data-l]::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:2px;}
  .k-kv .row{grid-template-columns:1fr;gap:4px;}
  .numbered{grid-template-columns:1fr;gap:4px;}
  .numbered .n{padding-top:0;}
  .site-footer{margin-top:52px;}
}

/* ---------- Intraday: Karte «Heute im Tagesverlauf» (stand.html, kunde_intraday.json) ---------- */
.intra{margin-top:36px;background:var(--surface);border:1px solid var(--hair);border-radius:4px;padding:18px 20px 10px;}
.intra .chart-head{margin-bottom:0;align-items:flex-start;}
.intra .sec-title{font-size:19px;}
.intra-stand{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;padding-top:7px;}
.intra-text{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:76ch;text-wrap:pretty;}
.intra-text .hinweis{display:block;margin-top:4px;color:var(--ink);}
.intra-stale{margin-top:12px;font-size:13px;}
.intra-chart{margin-top:12px;position:relative;}
.intra-chart svg{display:block;width:100%;}
.intra .chart-empty{padding:30px 16px;}
svg .intra-zero{stroke:var(--muted);stroke-width:1;}
svg .intra-line{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
svg .intra-pos{fill:var(--pos);opacity:.14;}
svg .intra-neg{fill:var(--neg);opacity:.14;}
svg .intra-gap{fill:var(--chart-shade);}
svg .intra-dot{fill:var(--ink);}
svg .intra-last{fill:var(--ink);stroke:var(--surface);stroke-width:1.5;}
svg .intra-last.pos{fill:var(--pos);} svg .intra-last.neg{fill:var(--neg);}
svg .intra-lbl{font-size:10.5px;font-family:var(--mono);font-weight:500;fill:var(--ink);}
@media (max-width:640px){
  .intra{margin-top:26px;padding:14px 14px 8px;}
  .intra .chart-head{flex-direction:column;align-items:flex-start;gap:4px;}
  .intra .sec-title{font-size:18px;}
  .intra-stand{padding-top:0;white-space:normal;}
  .intra-text{font-size:12px;margin-top:8px;}
  .intra-chart{margin-top:8px;}
  .intra .chart-empty{padding:22px 12px;}
}