/* Erscheinungsbild wie die Desktop-Anwendung (tkinter/ttk unter Windows): graue Fläche, weisse Felder, flache Rahmen */
:root{--bg:#f0f0f0;--flaeche:#f0f0f0;--tinte:#000;--leise:#444;--linie:#c8c8c8;--linie2:#e1e1e1;--blau:#1f77b4;--blau-hell:#e5f1fb;--gruen:#006400;--rot:#c00000;--fokus:#0078d4}
html{font-family:"Segoe UI",Tahoma,system-ui,sans-serif;font-size:12.5px;color:#000;background:var(--bg)}
body{background:var(--bg);padding-bottom:2.9rem}
h2{font-size:1.2rem;font-weight:700;margin:1.1rem 0 .55rem}
.klein{color:#444}

/* Menüleiste */
.menuleiste{display:flex;background:#fff;border-bottom:1px solid #e0e0e0;padding:0 .25rem;position:relative;z-index:20}
.menue summary{list-style:none;cursor:default;padding:.3rem .7rem;user-select:none}
.menue summary::-webkit-details-marker{display:none}
.menue summary:hover,.menue[open] summary{background:#e5f3ff}
.menuepunkte{position:absolute;top:100%;left:.25rem;min-width:13rem;background:#fff;border:1px solid #c8c8c8;box-shadow:2px 2px 6px rgba(0,0,0,.2);padding:.2rem 0}
.menuepunkte button{display:block;width:100%;text-align:left;padding:.35rem 1.2rem;border:0;background:transparent;cursor:default}
.menuepunkte button:hover{background:#e5f3ff}
.menuepunkte hr{border:0;border-top:1px solid #e0e0e0;margin:.2rem 0}

/* Reiter wie ttk.Notebook */
.reiter{position:static;background:var(--bg);border:0;padding:.2rem 0 0 0;gap:0;overflow:visible}
.reiter button{padding:.22rem .5rem;margin:0 0 0 0;border:1px solid #d9d9d9;border-bottom:0;border-radius:0;background:#f0f0f0;color:#000;font-weight:400}
.reiter button[aria-selected=true]{background:#fff;border-color:#d9d9d9;font-weight:400;margin-bottom:-1px;position:relative;z-index:1;color:#000}
.inhalt{background:#f0f0f0;border-top:1px solid #d9d9d9;padding:0 .5rem 1rem;max-width:none}
.tab{background:#f0f0f0}

/* Rahmen (ttk.LabelFrame) */
fieldset{background:transparent;border:1px solid #dcdcdc;border-radius:0;padding:.55rem .7rem .7rem;margin:0 0 .7rem}
legend{color:#000;font-weight:400;padding:0 .25rem}
#personen{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:flex-start}
#personen>fieldset{flex:0 1 430px;margin:0}
.zwei{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:flex-start}
.zwei>*{flex:0 1 auto;min-width:0}
.zwei>div{flex:0 1 auto}

/* Eingabefelder: weiss, rechtsbündig, flache Kante */
.feld{grid-template-columns:minmax(0,1fr) 100px;gap:.5rem;padding:.12rem 0}
.feld.zus{grid-template-columns:minmax(0,1fr) 100px auto 62px}
.feld.zus:has(output){grid-template-columns:minmax(0,1fr) 100px auto 70px}
input:not([type=checkbox]):not([type=radio]),select{background:#fff;border:1px solid #fff;border-bottom:1px solid #b9b9b9;border-radius:0;padding:.2rem .35rem;box-shadow:none}
input:not([type=checkbox]):not([type=radio]):focus,select:focus{border-color:#0078d4;outline:0}
input:disabled,select:disabled{background:#f0f0f0;color:#888;opacity:1}
input[type=checkbox],input[type=radio]{accent-color:#0067c0;width:1rem;height:1rem;margin:0}
label.satz{color:#000}
.satzout{color:#000}
output{font-weight:400}
.radios{gap:.3rem 1.2rem}

/* Knöpfe wie ttk.Button */
.knopf,.login button{border:1px solid #adadad;border-radius:2px;background:linear-gradient(#f2f2f2,#e1e1e1);color:#000;padding:.28rem 1.1rem;cursor:default;font-weight:400}
.knopf:hover,.login button:hover{background:#e5f1fb;border-color:#0078d4}
.knopf:active{background:#cce4f7}

/* Kinder */
.kinder{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:flex-start}
.kindrahmen{flex:0 1 auto}
.kindraster{display:grid;grid-template-columns:4rem 9rem 8rem 6.5rem 5rem 5rem;gap:.3rem .45rem;align-items:center}
.kindraster>span{font-size:.92rem;text-align:center}
.kindraster>strong{font-weight:400}
.kindraster input[type=checkbox]{justify-self:center}
.kindraster input:not([type=checkbox]){text-align:right}
@media (max-width:640px){.kindraster{grid-template-columns:3.4rem 1fr 1fr;font-size:.9rem}.kindraster>span:nth-child(n+4){display:none}}

/* Werkzeugzeile Tab 4 */
.werkzeug{gap:.5rem 1rem;margin:.6rem 0 .5rem}
.inline select{width:14rem;text-align:left}
.status{color:#444}

/* Tabellen (ttk.Treeview) */
.tabelle-rahmen{background:#fff;border:1px solid #c8c8c8;border-radius:0}
.jahre{font-size:.96rem}
.jahre th,.jahre td{background:#fff;border-bottom:1px solid #f0f0f0}
.jahre thead th,.jahre thead tr.alter th,.jahre thead tr.alter td{background:#f0f0f0;color:#000;font-weight:400;border:1px solid #e1e1e1}
.jahre thead tr.alter th,.jahre thead tr.alter td{background:#fff;border:0;border-bottom:1px solid #f0f0f0}
.jahre .l1,.jahre .l2{background:#fff}
.jahre tr.summe th,.jahre tr.summe td{font-weight:700}
.jahre tr.totalsteuer th,.jahre tr.totalsteuer td{color:#1f4eb4}
.jahre tr.trenner th{background:#e8e8e8;color:#000;font-weight:700}
.jahre tr.trenner.steuer th{color:#c00000}
.jahre tbody tr:hover td,.jahre tbody tr:hover th{background:#e5f3ff}
.jahre tbody tr.gewaehlt td,.jahre tbody tr.gewaehlt th{background:#cce8ff}
figure{background:#fff;border:1px solid #dcdcdc;border-radius:0}
.tip{border-radius:0}
.gesamt{background:transparent;border:1px solid #dcdcdc;border-left:1px solid #dcdcdc;border-radius:0}
.abzuege .sum,.abzuege tfoot td,.ergebnis .sum,.steuerhoheit tfoot th,.steuerhoheit tfoot td{color:#006400}
.abzuege tfoot th,.abzuege tfoot td,.ergebnis .sum,.steuerhoheit tfoot th,.steuerhoheit tfoot td{border-top:1px solid #c8c8c8}
.abzuege thead th,.steuerhoheit thead th{color:#000;font-weight:700}

/* Statusleiste unten: Szenario blau, Werte fett, Knopf rechts */
.kpi{background:var(--bg);border-top:1px solid #c8c8c8;padding:.45rem .5rem;font-size:1rem;align-items:center}
.kpi #kpi-szenario{color:#1f77b4;font-weight:700}
.kpi #kpi-szenario[data-bezug="50% Teilkapitalbezug"]{color:#ff7f0e}
.kpi #kpi-szenario[data-bezug="100% Kapitalbezug"]{color:#2ca02c}
.kpi .trenn{color:#000}
.kpi strong{font-weight:700}
.kpi small{color:#000;font-size:inherit;font-weight:700}
.kpi small.gut{color:#2e7d32}.kpi small.schlecht{color:#c62828}
.kpi #btn-berechnen{margin-left:auto}

/* Anmeldung */
.login form{background:#fff;border:1px solid #c8c8c8;border-radius:0}
.login input{border:1px solid #adadad}
@media (prefers-color-scheme:dark){:root{--bg:#f0f0f0}}
.grafiken.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,30rem),1fr))}
.grafiken.drei{display:grid}

/* ---- Tab 4 wie Desktop ---- */
.t4kopf{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-start;margin-top:.6rem}
.t4kopf fieldset{margin:0}
.annahmen{border-collapse:collapse}
.annahmen th{font-weight:400;text-align:left;padding:.15rem .6rem .15rem 0}
.annahmen th.skopf{text-align:center;font-weight:700;padding:.15rem .4rem;max-width:8.5rem;white-space:normal}
.annahmen td{padding:.15rem .4rem}
.annahmen td input{width:6.2rem}
.annahmen td.vtrenn{border-left:1px solid #c8c8c8;width:.1rem;padding:0}
.annahmen th.skopf{vertical-align:bottom}
.plotknoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem}
.klein-knopf{padding:.12rem .5rem;font-size:.9rem;width:13rem;white-space:nowrap}
.trennlinie{border:0;border-top:1px solid #c8c8c8;margin:.55rem 0 .4rem}
.werkzeug{flex-wrap:wrap;align-items:center;margin:.1rem 0 .2rem}
.werkzeug .inline{gap:.4rem}
.grau{color:#444}
.horizont{margin:0;padding:.25rem .5rem .35rem}
.schmal{width:5.5rem!important}
.status{margin:0;color:#0000ff;padding:0;text-align:left}
.hinweis{color:#008000;margin:0 0 .35rem}
.tabelle-rahmen{max-height:calc(100vh - 21rem);min-height:12rem}
.jahre tbody tr:hover td,.jahre tbody tr:hover th{background:#fff}
.jahre tbody tr.trenner:hover th{background:#e8e8e8}
.jahre tbody tr.gewaehlt td,.jahre tbody tr.gewaehlt th{background:#0078d7;color:#fff}
.jahre tbody tr.gewaehlt.totalsteuer td,.jahre tbody tr.gewaehlt.totalsteuer th{color:#fff}
.jahre .l1{cursor:default;user-select:none}

/* Fenster (wie Toplevel) */
.fenster{border:1px solid #888;padding:0;width:min(1050px,96vw);background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.fenster::backdrop{background:rgba(0,0,0,.25)}
.fenstertitel{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0 .25rem .6rem;background:#fff;border-bottom:1px solid #e0e0e0;font-size:.95rem}
.fenstertitel button{border:0;background:transparent;width:2.8rem;height:1.8rem;font-size:1rem;cursor:default}
.fenstertitel button:hover{background:#c42b1c;color:#fff}
.fensterinhalt{padding:.6rem .8rem .8rem;min-height:12rem}
.fensterinhalt .diagramm .achse{font-size:11px}
.legende i.band{height:.7rem;opacity:.3;width:.9rem}

/* Kontextmenü */
.kontext{position:fixed;z-index:50;background:#fff;border:1px solid #c8c8c8;box-shadow:2px 2px 6px rgba(0,0,0,.25);padding:.15rem 0}
.kontext button{display:block;border:0;background:transparent;padding:.3rem 1.4rem;text-align:left;width:100%;cursor:default}
.kontext button:hover{background:#e5f3ff}