/* FinSi – Design nach lauer.io-Styleguide (DESIGN.md).
   Farbtokens, Inter-Fallback-Kette, 4px-Buttons, Kartenstil, Breakpoints 1020/820/520. */
:root{
  --ink:#102c3f; --text:#243b4a; --muted:#627b8d;
  --blue-900:#003d66; --blue-800:#004b76; --blue-700:#005f96;
  --blue-100:#eaf7ff; --blue-050:#f4fbff;
  --teal:#138779; --teal-soft:#d9f4ef; --orange:#f6a23a;
  --line:#c9ddeb; --line-soft:#e2edf5;
  --surface:#ffffff; --surface-muted:#f3f5f7;
  /* funktionale Signalfarben (Delta/Ampel) */
  --pos:#138779; --pos-bg:#e2f4f0; --neg:#b4232a; --neg-bg:#fbe9ea; --neu-bg:#eef2f5;
  --container: min(1180px, calc(100vw - 40px));
  --radius:8px; --btn-h:40px;
  /* Vergleichstabelle: feste Spaltenbreiten (identisch je Zeile → saubere Ausrichtung) */
  --cmp-name:320px; --cmp-col:140px; --cmp-delta:176px;
  --font:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--surface-muted);color:var(--text);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
.wrap{width:var(--container);max-width:1180px;margin:0 auto;padding:18px 0 64px}
a{color:var(--blue-700)}
h1{font-size:22px;font-weight:800;margin:0;color:var(--ink);letter-spacing:.1px}
h1 .sub{color:var(--muted);font-weight:500;font-size:13px;margin-left:10px}

/* Fokus überall sichtbar (Orange) */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px}

header.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}
.hgroup{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.simctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Formularelemente */
select,input[type=text],button{font:inherit;color:inherit}
select,input[type=text]{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px 10px;outline:none;min-height:var(--btn-h);min-width:0;max-width:100%}
select:hover,input[type=text]:hover{border-color:var(--blue-700)}
label{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:600}
label select{color:var(--text)}

button{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px 14px;min-height:var(--btn-h);cursor:pointer;font-weight:700;color:var(--blue-700)}
button:hover{border-color:var(--blue-700)}
button.primary{background:var(--blue-800);border-color:var(--blue-800);color:#fff;font-weight:800}
button.primary:hover{background:var(--blue-900);border-color:var(--blue-900);color:#fff}
button.ghost{border-color:transparent;background:transparent;color:var(--muted)}
button.ghost:hover{color:var(--neg)}
button:disabled{opacity:.45;cursor:not-allowed}

/* Modus-Umschalter Simulator | Vergleich */
.modes{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.modes button{border:0;border-radius:0;min-height:var(--btn-h);padding:8px 18px;background:transparent;color:var(--blue-800);font-weight:800}
.modes button.on{background:var(--blue-800);color:#fff}

/* Banner */
.banner{display:none;background:var(--neg-bg);border:1px solid #edc4c7;color:var(--neg);border-radius:var(--radius);padding:11px 15px;margin-bottom:14px}
.banner.show{display:block}
.banner button{margin-left:10px}
.banner.info{background:var(--blue-050);border-color:var(--line);color:var(--blue-900)}

/* Karten allgemein */
.card,.taxpanel,.tree{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,61,102,.08)}

/* Dashboard */
.dash{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:12px;margin-bottom:14px}
.card{padding:13px 16px;min-width:0}
.card .t{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.card .big{font-size:23px;font-weight:800;color:var(--ink);margin-top:4px;white-space:nowrap}
.card .plan{color:var(--muted);font-size:12px;margin-top:3px}
.chip{display:inline-block;font-size:12px;font-weight:700;border-radius:20px;padding:2px 10px;margin-top:6px}
.chip.pos{background:var(--pos-bg);color:var(--pos)}
.chip.neg{background:var(--neg-bg);color:var(--neg)}
.chip.neu{background:var(--neu-bg);color:var(--muted)}
.amp{width:10px;height:10px;border-radius:50%;display:inline-block}
.amp.g{background:var(--teal)}.amp.r{background:var(--neg)}.amp.n{background:#b9c2ce}
.top5{font-size:13px;overflow:auto;max-height:132px}
.top5 .item{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dashed var(--line-soft);cursor:pointer}
.top5 .item:last-child{border-bottom:0}
.top5 .item:hover .n{color:var(--blue-700)}
.top5 .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top5 .d{font-weight:700;white-space:nowrap}
.top5 .empty{color:var(--muted)}
.d.pos{color:var(--pos)}.d.neg{color:var(--neg)}

/* Steuer-Simulation */
.taxpanel{margin-bottom:14px}
.taxhead{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;user-select:none;color:var(--ink)}
.taxhead strong{font-weight:800}
.taxhead .cap{margin-left:auto;color:var(--muted);font-weight:600}
.switch{position:relative;width:40px;height:22px;background:#cfd7e1;border-radius:20px;transition:.15s;flex:none}
.switch::after{content:"";position:absolute;top:2.5px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s}
.switch.on{background:var(--blue-800)}
.switch.on::after{left:20px}
.taxbody{display:none;border-top:1px solid var(--line-soft);padding:12px 16px 14px}
.taxpanel.open .taxbody{display:block}
.taxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 24px}
.lever{display:grid;grid-template-columns:1fr 92px;gap:2px 10px;align-items:center;padding:5px 0}
.lever .lt{font-size:13px}
.lever .lv{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.lever input[type=range]{grid-column:1/2;width:100%}
.lever .ld{grid-column:2/3;text-align:right;font-size:12px;font-weight:700}
.taxnote{color:var(--muted);font-size:12px;margin-top:10px}
.taxbody.disabled{opacity:.45;pointer-events:none}

/* Controls / Tabs */
.ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.tabs{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.tabs button{border:0;border-radius:0;padding:8px 18px;background:transparent;color:var(--blue-800);font-weight:700}
.tabs button.on{background:var(--blue-800);color:#fff}
#search,#cmpSearch{flex:1;min-width:200px}
label.ck{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:13px;cursor:pointer;white-space:nowrap}

/* Baum (Simulator) */
.tree{overflow:hidden}
.treescroll,.cmpscroll{overflow-x:auto}
.thead{display:grid;grid-template-columns:minmax(230px,1fr) 108px 118px 150px 58px 118px 30px;gap:8px;
  padding:9px 14px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;min-width:840px}
.row{display:grid;grid-template-columns:minmax(230px,1fr) 108px 118px 150px 58px 118px 30px;gap:8px;
  padding:5px 14px;border-bottom:1px solid var(--line-soft);align-items:center;min-width:840px}
.row:hover{background:var(--blue-050)}
.row.lvl0{background:var(--surface-muted)}
.row.lvl0:hover{background:var(--blue-050)}
.row.lvl0 .name{font-weight:800;color:var(--ink)}
.row.lvl1 .name{font-weight:600}
.row.flash{animation:flash 1.6s}
@keyframes flash{0%{background:var(--blue-100)}100%{background:transparent}}
.lab{display:flex;align-items:center;gap:6px;min-width:0}
.caret{flex:none;width:18px;height:18px;border:0;background:transparent;padding:0;color:var(--muted);cursor:pointer;font-size:11px;line-height:18px;text-align:center;min-height:0}
.caret.leafdot{cursor:default;color:#b7c6d3;font-size:7px}
.num{flex:none;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;background:var(--surface-muted);border:1px solid var(--line-soft);border-radius:4px;padding:1px 5px}
.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name mark{background:#fdeebf;border-radius:2px;padding:0 1px}
.orig{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap}
.sim{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;color:var(--ink)}
.sim.up{color:var(--pos)} .sim.down{color:var(--neg)}
.row input[type=range]{width:100%;accent-color:var(--blue-800);height:20px}
.pct{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.pct.up{color:var(--pos);font-weight:700}.pct.down{color:var(--neg);font-weight:700}
.row input.val{width:100%;border:1px solid transparent;background:transparent;border-radius:4px;padding:4px 6px;min-height:0;
  text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}
.row input.val:hover{border-color:var(--line);background:#fff}
.row input.val:focus{border-color:var(--blue-700);background:#fff}
.rst{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:2px;visibility:hidden;font-size:13px;min-height:0}
.row.changed .rst{visibility:visible}
.rst:hover{color:var(--neg)}
.notice{padding:12px 15px;color:var(--muted)}

/* Vergleich */
.cmp-intro{color:var(--text);background:var(--blue-050);border:1px solid var(--line);border-radius:var(--radius);padding:11px 15px;margin-bottom:12px;font-size:13.5px}
.cmp-colbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.cmp-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:6px 10px;font-weight:700;color:var(--blue-800);font-size:13px}
.cmp-chip.ref{border-color:var(--blue-700);background:var(--blue-050)}
.cmp-chip-x,.cmp-hcol-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 2px;min-height:0}
.cmp-chip-x:hover,.cmp-hcol-x:hover{color:var(--neg)}
.cmp-add{display:inline-flex;align-items:center;gap:6px;background:var(--surface-muted);border:1px dashed var(--line);border-radius:4px;padding:4px 6px}
.cmp-add-year{min-height:34px;padding:6px 8px}
.cmp-add-btn{min-height:34px;padding:6px 10px;font-size:13px}
.cmp-add-note{color:var(--muted);font-size:12px}
.cmpscroll{position:relative;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.cmp-head{display:grid;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;min-width:max-content}
.cmp-hname{position:sticky;left:0;background:var(--surface);z-index:2;padding-right:8px;border-right:1px solid var(--line-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-hcol{display:flex;align-items:center;justify-content:flex-end;gap:6px;text-align:right;white-space:nowrap;text-transform:none;font-size:12.5px;color:var(--ink)}
.cmp-hcol.ref .cmp-hcol-t{color:var(--blue-800)}
.cmp-hdelta{text-align:right;color:var(--ink);font-size:12.5px}
.cmp-row{display:grid;gap:8px;padding:5px 14px;border-bottom:1px solid var(--line-soft);align-items:center;min-width:max-content}
.cmp-row:hover{background:var(--blue-050)}
.cmp-row.lvl0{background:var(--surface-muted)}
.cmp-row.lvl0 .name{font-weight:800;color:var(--ink)}
.cmp-row.lvl1 .name{font-weight:600}
.cmp-lab{position:sticky;left:0;background:var(--surface);z-index:1;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;border-right:1px solid var(--line-soft)}
.cmp-row:hover .cmp-lab{background:var(--blue-050)}
.cmp-row.lvl0 .cmp-lab{background:var(--surface-muted)}
.cmp-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;color:var(--ink)}
.cmp-val.empty{color:#b7c6d3;font-weight:500}
.cmp-delta{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;font-size:12.5px}
.cmp-delta.up{color:var(--pos)}.cmp-delta.down{color:var(--neg)}.cmp-delta.zero,.cmp-delta.empty{color:var(--muted);font-weight:500}

/* Footer */
footer{color:var(--muted);font-size:12.5px;margin-top:16px}
footer a{color:var(--blue-700)}
footer .legal{margin-top:5px}

/* Szenarien-Popover */
.scen{position:relative}
.scenbox{display:none;position:absolute;right:0;top:46px;z-index:30;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 16px 40px rgba(0,61,102,.16);padding:14px;width:330px;max-width:calc(100vw - 40px)}
.scen.open .scenbox{display:block}
.scenbox h3{margin:0 0 8px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.scenbox .rowline{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.scenbox .rowline input{flex:1}
.sitem{display:flex;align-items:center;gap:6px;padding:5px 2px;border-bottom:1px dashed var(--line-soft)}
.sitem:last-child{border-bottom:0}
.sitem .sn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sitem .sy{color:var(--muted);font-size:12px}
.msg{font-size:12px;color:var(--pos);min-height:15px;margin-top:6px}
.msg.err{color:var(--neg)}

/* Overlay */
#overlay{position:fixed;inset:0;background:rgba(243,245,247,.94);display:none;z-index:50;align-items:center;justify-content:center}
#overlay.show{display:flex}
.obox{width:min(430px,86vw);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px 30px;text-align:center;box-shadow:0 16px 44px rgba(0,61,102,.16)}
.obox .ot{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:6px}
.obox .os{color:var(--muted);font-size:13px;min-height:18px}
.pbar{height:8px;background:var(--line-soft);border-radius:6px;margin-top:14px;overflow:hidden}
.pbar>div{height:100%;width:0;background:var(--blue-800);border-radius:6px;transition:width .15s}
.pbar>div.indet{width:40%;animation:indet 1.4s ease-in-out infinite}
@keyframes indet{0%{margin-left:-40%}100%{margin-left:100%}}

/* Statische Unterseiten (Impressum, Datenschutz, Erklärung, 404) */
.page{width:var(--container);max-width:760px;margin:0 auto;padding:26px 0 64px}
.page h1{font-size:26px;margin:18px 0 8px}
.page h2{font-size:18px;font-weight:800;color:var(--ink);margin:24px 0 6px}
.page p,.page li{line-height:1.65}
.page a{color:var(--blue-700)}
.page .back{display:inline-block;margin-bottom:10px;color:var(--muted);text-decoration:none;font-weight:600}
.page .back:hover{color:var(--blue-700)}

/* Responsive – Breakpoints 1020 / 820 / 520 (DESIGN.md) */
/* Sicherung: die Seite selbst scrollt nie horizontal; breite Tabellen scrollen
   nur in ihrem eigenen Container (.treescroll / .cmpscroll). */
html,body{overflow-x:hidden}

@media(max-width:1020px){
  .dash{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  :root{--container: min(100vw - 28px, 1180px); --cmp-name:230px; --cmp-col:132px; --cmp-delta:170px}
  .wrap{padding:14px 0 56px}
  header.top{flex-direction:column;align-items:stretch;gap:12px}
  .hgroup{width:100%;flex-direction:column;align-items:stretch;gap:10px}
  .modes{display:flex;width:100%}
  .modes button{flex:1 1 0;min-width:0;padding:8px 10px}
  .simctl{width:100%;flex-wrap:wrap}
  .simctl label{flex:1 1 46%;min-width:0}
  .simctl label select{flex:1;width:100%;min-width:0}
  .simctl #resetAll{flex:1 1 46%}
  .simctl .scen{flex:1 1 100%}
  .scen>.primary{width:100%}
  .scenbox{top:auto}
  #search,#cmpSearch{min-width:140px;flex:1 1 100%;order:3}
}
@media(max-width:520px){
  :root{--cmp-name:150px; --cmp-col:116px; --cmp-delta:164px}
  .dash{grid-template-columns:1fr}
  h1{font-size:19px}
  .simctl label{flex:1 1 100%}
  .simctl #resetAll{flex:1 1 100%}
  .ctrl .tabs{flex:1 0 100%}
  .ctrl .tabs button{flex:1}
  .ctrl button:not(.tabs button){flex:1}
  .cmp-colbar{gap:6px}
  .cmp-add{flex:1 0 100%;justify-content:space-between}
  .cmp-add-year{flex:1}
}


/* === lauer-design: Barrierefreiheit, ergaenzt 25.08.2026 === */
/* Regelwerk: .claude/skills/lauer-design/SKILL.md, Kapitel 8 */
/* Kein backdrop-filter in diesem Projekt, daher nur reduzierte Bewegung. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}


/* === lauer-design: Laufweite nach Groesse, ergaenzt 25.08.2026 === */
/* Regelwerk: .claude/skills/lauer-design/SKILL.md, Kapitel 7 */
/* Ersetzt die frueher pauschale Regel "keine negative Laufweite". */
/* Kleintext leicht positiv, Fliesstext 0, Ueberschriften -0.01em, Display -0.02em. */
/* Eyebrows und Kicker behalten ihre Sperrung von 0.08em. */
/* Kopfzeile bleibt bei 22px und damit unter der Schwelle. Nur die Seitenueberschrift wird angepasst. */

.page h1 { letter-spacing: -0.01em; }  /* 26px, rund 1.63rem */


/* === lauer-design: Rueckmeldung beim Druecken, ergaenzt 26.08.2026 === */
/* Regelwerk: .claude/skills/lauer-design/SKILL.md, Kapitel 1 */
/* Rueckmeldung beim Druecken, nicht beim Loslassen. */
/* Zone 1: eine Eigenschaft, unter 200 ms, nur transform. */

:root {
  --dur-press: 100ms;
  --dur-state: 150ms;
  --dur-layer: 200ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cmp-add-btn,
button {
  transition: transform var(--dur-press) var(--ease-out);
}

.cmp-add-btn:active,
button:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .cmp-add-btn:active,
  button:active {
    transform: none;
  }
}