/* FinSi – gemeinsame Styles der Zusatz-Simulatoren (Use-Case-Bewertung, Liquidität, Rente).
   Baut auf styles.css auf (Tokens, Buttons, Fokus, Barrierefreiheit).
   Regelwerk: lauer-design, Zone 2 (interaktive Werkzeuge). */

.sim-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:6px}
.sim-top h1 a{color:inherit;text-decoration:none}
.sim-nav{display:flex;flex-wrap:wrap;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:3px}
.sim-nav a{display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border-radius:3px;color:var(--blue-800);font-weight:700;font-size:13.5px;text-decoration:none}
.sim-nav a:hover{background:var(--blue-050)}
.sim-nav a[aria-current="page"]{background:var(--blue-800);color:#fff}
.sim-lead{color:var(--text);max-width:78ch;margin:6px 0 16px;line-height:1.55}
.sim-lead strong{color:var(--ink)}

.sim-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
.sim-grid.wide-left{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.sim-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.sim-sticky{position:sticky;top:12px}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,61,102,.08);padding:14px 16px;min-width:0}
.panel>h2{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 4px}
.hint{color:var(--muted);font-size:12.5px;line-height:1.45}
.panel>.hint{margin:0 0 10px}
.panel h3{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:14px 0 6px}
.eyebrow{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}

/* Regler-Zeile: Bezeichnung | Wert, darunter Regler */
.fld{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line-soft)}
.fld:last-child{border-bottom:0}
.fld>label,.fld>.fl{color:var(--text);font-size:13.5px;font-weight:600;display:block}
.fld .fv{font-weight:800;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fld .fh{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.4}
.fld input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--blue-800);height:28px;margin:0;cursor:pointer;touch-action:pan-y}
.fld.changed .fv{color:var(--blue-700)}

/* Zahlenfelder */
input[type=number],input[type=date],textarea{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:7px 9px;min-height:var(--btn-h);max-width:100%}
input[type=number]:hover,input[type=date]:hover,textarea:hover{border-color:var(--blue-700)}
.numrow{display:grid;grid-template-columns:1fr minmax(120px,160px);gap:8px;align-items:center;padding:5px 0;border-bottom:1px dashed var(--line-soft)}
.numrow:last-child{border-bottom:0}
.numrow label{color:var(--text);font-size:13.5px;font-weight:600;display:block}
.numrow label small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.numrow input{text-align:right;font-variant-numeric:tabular-nums;width:100%}
.numrow select{width:100%}
input.bad{border-color:var(--neg);background:var(--neg-bg)}
.fielderr{grid-column:1/-1;color:var(--neg);font-size:12px;min-height:0}

/* Kennzahlen */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:var(--surface-muted);border:1px solid var(--line-soft);border-radius:6px;padding:9px 12px;min-width:0}
.kpi .t{color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.kpi .v{font-size:21px;font-weight:800;color:var(--ink);margin-top:2px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.kpi .s{color:var(--muted);font-size:12px;margin-top:1px}
.kpi.good{border-color:#b9e3da;background:var(--pos-bg)} .kpi.good .v{color:var(--pos)}
.kpi.bad{border-color:#edc4c7;background:var(--neg-bg)} .kpi.bad .v{color:var(--neg)}
.kpi.warn{border-color:#f3d3a6;background:#fdf3e4} .kpi.warn .v{color:#8a5200}

/* Rückmeldung */
.note{border-radius:6px;padding:9px 12px;font-size:13px;line-height:1.45;margin:8px 0;border:1px solid var(--line)}
.note.info{background:var(--blue-050);color:var(--blue-900)}
.note.ok{background:var(--pos-bg);border-color:#b9e3da;color:#0d5f55}
.note.warn{background:#fdf3e4;border-color:#f3d3a6;color:#6b4000}
.note.err{background:var(--neg-bg);border-color:#edc4c7;color:var(--neg)}
.note:empty{display:none}
.privacy{display:flex;gap:10px;align-items:flex-start;background:var(--teal-soft);border:1px solid #b9e3da;color:#0d5f55;border-radius:var(--radius);padding:10px 14px;font-size:13px;margin-bottom:14px}
.privacy strong{color:#0a4d45}

/* Tabellen */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
table.sim{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
table.sim th{color:var(--muted);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.sim th:first-child,table.sim td:first-child{text-align:left}
table.sim td{padding:5px 8px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap}
table.sim tr:hover td{background:var(--blue-050)}
table.sim td.neg,table.sim .neg{color:var(--neg);font-weight:700}
table.sim td.pos{color:var(--pos)}
table.sim tfoot td{font-weight:800;color:var(--ink);border-top:1px solid var(--line)}

/* Diagramme */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--font);font-size:11px;fill:var(--muted)}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .grid{stroke:var(--line-soft);stroke-width:1}
.chart .zero{stroke:var(--ink);stroke-width:1}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:12px;height:4px;border-radius:2px;margin-right:5px;vertical-align:middle}

/* Werkzeugleiste */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.toolbar .msg{margin:0}
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{border:0;border-radius:0;min-height:36px;padding:6px 14px;background:transparent;color:var(--blue-800);font-weight:700}
.seg button[aria-pressed="true"]{background:var(--blue-800);color:#fff}
.chkline{display:flex;gap:8px;align-items:flex-start;padding:5px 0;font-size:13.5px;color:var(--text);cursor:pointer}
.chkline input{margin-top:3px;accent-color:var(--neg);width:16px;height:16px;flex:none}
details.more{margin-top:8px}
details.more summary{cursor:pointer;color:var(--blue-700);font-weight:700;font-size:13px;min-height:28px;display:flex;align-items:center}

.sim-foot{color:var(--muted);font-size:12.5px;margin-top:18px;line-height:1.5}
.sim-foot a{color:var(--blue-700)}

/* Übersichtsseite */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:14px 0}
.simcard{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,61,102,.08);padding:16px 18px;color:var(--text);text-decoration:none;transition:transform var(--dur-press,100ms) var(--ease-out,ease-out)}
.simcard:hover{border-color:var(--blue-700)}
.simcard:active{transform:scale(0.99)}
.simcard h3{font-size:17px;font-weight:800;color:var(--ink);margin:0;letter-spacing:0}
.simcard p{margin:0;font-size:13.5px;line-height:1.5}
.simcard .go{margin-top:auto;padding-top:6px;color:var(--blue-700);font-weight:800;font-size:13.5px}

@media(max-width:1020px){
  .sim-grid,.sim-grid.wide-left{grid-template-columns:1fr}
  .sim-sticky{position:static}
}
@media(max-width:520px){
  .sim-nav{width:100%}
  .sim-nav a{flex:1 1 auto;justify-content:center}
  .numrow{grid-template-columns:1fr}
  .kpi .v{font-size:19px}
}

@media print{
  body{background:#fff}
  .sim-nav,.toolbar,.privacy,button,details.more summary{display:none!important}
  .panel{box-shadow:none;break-inside:avoid}
  .sim-grid{grid-template-columns:1fr}
  .sim-sticky{position:static}
}
@media (prefers-contrast: more){
  .panel,.kpi{border-color:var(--ink)}
}