/* ZHL Haushaltsübersicht — Gestaltung.
   Halbtöne als Merkmale: Prognose ist kursiv UND orange UND mit ◆ markiert,
   damit sie auch im Ausdruck und bei Farbsehschwäche erkennbar bleibt. */

:root{
  --grund:#f2f4f6; --flaeche:#ffffff; --flaeche2:#f8f9fb; --flaeche3:#eef1f4;
  --tinte:#16202c; --tinte2:#5a6878; --tinte3:#8a97a6;
  --linie:#e2e7ec; --linie2:#c3ccd6;
  --akzent:#0f5a66; --akzent-weich:#e3f0f1; --akzent-tinte:#0b464f; --auf-akzent:#ffffff;
  --prognose:#9a5b12; --prognose-weich:#fbf1e3;
  --plan:#2b4fa8;
  --gut:#1a6b45; --schlecht:#a3271f; --schlecht-weich:#fbeae8;
  --spur:#e6eaee; --balken:#35717d; --balken-ueber:#a3271f;
  --schatten:0 1px 2px rgba(22,32,44,.06), 0 8px 24px -16px rgba(22,32,44,.35);
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --titel:"Source Serif 4",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --grund:#10151b; --flaeche:#171d25; --flaeche2:#1c232c; --flaeche3:#222b35;
    --tinte:#e7edf3; --tinte2:#9dabb9; --tinte3:#71808f;
    --linie:#28313b; --linie2:#3c4854;
    --akzent:#63bac6; --akzent-weich:#15333a; --akzent-tinte:#9ad7df; --auf-akzent:#0c1418;
    --prognose:#e0a95e; --prognose-weich:#2f2418;
    --plan:#8fa9ec;
    --gut:#61c191; --schlecht:#f08a80; --schlecht-weich:#3a201d;
    --spur:#262f39; --balken:#4f9dab; --balken-ueber:#d1635a;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --grund:#10151b; --flaeche:#171d25; --flaeche2:#1c232c; --flaeche3:#222b35;
  --tinte:#e7edf3; --tinte2:#9dabb9; --tinte3:#71808f;
  --linie:#28313b; --linie2:#3c4854;
  --akzent:#63bac6; --akzent-weich:#15333a; --akzent-tinte:#9ad7df; --auf-akzent:#0c1418;
  --prognose:#e0a95e; --prognose-weich:#2f2418;
  --plan:#8fa9ec;
  --gut:#61c191; --schlecht:#f08a80; --schlecht-weich:#3a201d;
  --spur:#262f39; --balken:#4f9dab; --balken-ueber:#d1635a;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
/* Muss vor allen display-Regeln stehen und sie schlagen: `main>section` setzt
   display:flex und wuerde sonst das hidden-Attribut der Reiter aushebeln. */
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--grund);color:var(--tinte);font-family:var(--ui);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--titel);font-weight:600;text-wrap:balance}
.zahl{font-variant-numeric:tabular-nums;white-space:nowrap}
.dehnen{flex:1 1 2rem}
.waechst{flex:1 1 12rem}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}

button,input,select{font:inherit;color:var(--tinte)}
button{cursor:pointer;border-radius:6px;border:1px solid var(--linie2);
  background:var(--flaeche);padding:.45rem .8rem;font-size:.85rem}
button:hover{background:var(--flaeche3)}
button.primaer{background:var(--akzent);border-color:var(--akzent);
  color:var(--auf-akzent);font-weight:500}
button.primaer:hover{filter:brightness(1.08)}
button.breit{width:100%;padding:.6rem;font-size:.95rem}
button[disabled]{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
input,select{background:var(--flaeche);border:1px solid var(--linie2);
  border-radius:6px;padding:.4rem .55rem;font-size:.85rem;max-width:100%}
label{display:block;font-size:.8rem;color:var(--tinte2)}
label input,label select{display:block;margin-top:.2rem;color:var(--tinte)}

/* ------------------------------------------------------------ Anmeldung */
.tor{min-height:100dvh;display:grid;place-items:center;padding:2rem 16px}
.torkarte{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;
  box-shadow:var(--schatten);padding:1.6rem;width:min(100%,380px)}
.torkarte h1{margin:0;font-size:1.4rem}
.torkarte .unter{margin:.2rem 0 1.2rem;color:var(--tinte2);font-size:.82rem}
.torkarte label{margin-top:.7rem}
.torkarte input{width:100%;margin-top:.25rem}
.torkarte button{margin-top:1.1rem}
.hinweis{color:var(--tinte2);font-size:.85rem}
.fehler{color:var(--schlecht);font-size:.85rem;margin:.8rem 0 0}
.fussnote{font-size:.78rem;color:var(--tinte2);margin:.9rem 0 0;max-width:72ch}

/* -------------------------------------------------------------- Kopf */
.kopf{background:var(--flaeche);border-bottom:1px solid var(--linie);
  padding:.9rem 16px 0;display:flex;gap:.9rem 1.25rem;align-items:flex-end;flex-wrap:wrap;
  position:sticky;top:0;z-index:20}
.marke h1{margin:0;font-size:1.25rem;letter-spacing:-.01em}
.marke p{margin:.15rem 0 0;color:var(--tinte2);font-size:.8rem}
.werkzeuge{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.schloss{font-size:.75rem;color:var(--akzent-tinte);background:var(--akzent-weich);
  border-radius:999px;padding:.28rem .6rem;white-space:nowrap}
.stand{font-size:.78rem;color:var(--tinte2);min-width:7rem;text-align:right}
.stand.arbeitet{color:var(--prognose)}
.stand.fehler{color:var(--schlecht)}
.reiter{display:flex;gap:.25rem;flex-basis:100%;margin-top:.6rem}
.reiter button{border:0;background:none;border-bottom:2px solid transparent;
  border-radius:0;padding:.5rem .8rem;color:var(--tinte2);font-size:.88rem}
.reiter button:hover{background:var(--flaeche3)}
.reiter button.aktiv{color:var(--tinte);border-bottom-color:var(--akzent);font-weight:500}

main{padding:1.25rem 16px 3rem;max-width:1400px;margin:0 auto;
  display:flex;flex-direction:column;gap:1rem}
main>section{display:flex;flex-direction:column;gap:1rem}

/* -------------------------------------------------------- Kennzahlen */
.kennzahlen{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kennzahl{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;
  padding:.85rem .95rem}
.kennzahl .bez{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinte2);display:block;margin-bottom:.3rem}
.kennzahl .wert{font-family:var(--titel);font-weight:600;font-size:1.55rem;
  line-height:1.15;display:block}
.kennzahl .zusatz{font-size:.76rem;color:var(--tinte2);display:block;margin-top:.2rem}
.kennzahl.haupt{background:var(--akzent-weich);border-color:transparent}
.kennzahl.haupt .wert{font-size:2.1rem}
.kennzahl.haupt .bez{color:var(--akzent-tinte)}
.wert.gut{color:var(--gut)} .wert.schlecht{color:var(--schlecht)}
.wert.prognose{color:var(--prognose);font-style:normal}

.warnband{display:flex;gap:.6rem;align-items:baseline;background:var(--schlecht-weich);
  border:1px solid var(--linie2);border-radius:8px;padding:.6rem .85rem;font-size:.86rem}
.warnband .marker{font-weight:600;color:var(--schlecht);white-space:nowrap}

/* ------------------------------------------------------------ Karten */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;
  box-shadow:var(--schatten);overflow:hidden}
.karte.schmal{max-width:640px}
.kartenkopf{display:flex;gap:.75rem;align-items:baseline;flex-wrap:wrap;
  padding:.75rem .95rem;border-bottom:1px solid var(--linie)}
.kartenkopf h2{font-size:1rem;margin:0}
.hinweistext{font-size:.78rem;color:var(--tinte2)}
.inhalt{padding:.9rem .95rem}
.inhalt>p:first-child{margin-top:0}
.inhalt h3{font-size:.9rem;margin:1.2rem 0 .4rem}
.formzeile{display:flex;gap:.75rem;align-items:flex-end}
.formzeile.umbruch{flex-wrap:wrap}
.schalter{display:inline-flex;gap:.45rem;align-items:center;font-size:.82rem;
  color:var(--tinte2);cursor:pointer}
.schalter input{accent-color:var(--akzent);width:1rem;height:1rem;margin:0}

/* ----------------------------------------------------------- Tabelle */
.tabellenrahmen{overflow-x:auto}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.84rem}
th,td{padding:.42rem .6rem;text-align:right;border-bottom:1px solid var(--linie);
  white-space:nowrap}
thead th{position:sticky;top:0;background:var(--flaeche2);color:var(--tinte2);
  font-weight:500;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  z-index:3;border-bottom:1px solid var(--linie2);vertical-align:bottom}
th.name,td.name{text-align:left;position:sticky;left:0;background:var(--flaeche);
  z-index:2;border-right:1px solid var(--linie);min-width:190px}
thead th.name{background:var(--flaeche2);z-index:4}
tr.gruppe td{background:var(--flaeche3);font-weight:600;font-size:.72rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tinte2);
  padding-top:.55rem;padding-bottom:.55rem}
tr.summe td{font-weight:600;background:var(--flaeche2)}
tr.gesamt td{font-weight:700;background:var(--flaeche2);
  border-top:2px solid var(--linie2);border-bottom:none;font-size:.9rem}
tr.datenzeile:hover td{background:var(--flaeche2)}
.namenknopf{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-align:left;display:flex;gap:.4rem;align-items:center;width:100%}
.namenknopf .pfeil{color:var(--tinte3);font-size:.7rem;transition:transform .15s}
tr.datenzeile.offen .pfeil{transform:rotate(90deg)}
.prognose{color:var(--prognose);font-style:italic}
.plan{color:var(--plan);display:block;font-size:.76rem}
.plan-inline{color:var(--plan)}
.weg,.punkt{color:var(--tinte3)}
td.rest{font-weight:600}
td.rest.gut{color:var(--gut)} td.rest.schlecht{color:var(--schlecht)}
.balkenzeile{display:flex;gap:.5rem;align-items:center;justify-content:flex-end}
.balken{width:56px;height:6px;border-radius:3px;background:var(--spur);
  overflow:hidden;flex:none}
.balken span{display:block;height:100%;border-radius:3px;background:var(--balken)}
.balken.ueber span{background:var(--balken-ueber)}

tr.detail td{padding:0;border-bottom:1px solid var(--linie);background:var(--flaeche2)}
.detailkasten{padding:.8rem .95rem 1rem;max-width:820px}
.detailkasten h3{margin:0 0 .15rem;font-size:.95rem}
.detailkasten p{margin:0 0 .6rem;font-size:.78rem;color:var(--tinte2)}
table.innen{font-size:.8rem;width:auto;min-width:min(100%,520px)}
table.innen th,table.innen td{border-bottom:1px solid var(--linie);
  padding:.3rem .8rem .3rem 0}
table.innen th{position:static;background:none;text-transform:none;
  letter-spacing:0;font-size:.72rem}
table.innen td.l,table.innen th.l{text-align:left}

.legende{display:flex;gap:1rem;flex-wrap:wrap;padding:.7rem .95rem;font-size:.78rem;
  color:var(--tinte2);border-top:1px solid var(--linie);background:var(--flaeche2)}
.legende b{font-weight:500;color:var(--tinte)}

/* ------------------------------------------------------------ Import */
.ablage{border:1.5px dashed var(--linie2);border-radius:8px;padding:1.6rem 1rem;
  text-align:center;color:var(--tinte2);font-size:.85rem;background:var(--flaeche2);
  cursor:pointer;display:grid;gap:.25rem}
.ablage b{color:var(--tinte);font-weight:500}
.ablage.bereit{border-color:var(--akzent);background:var(--akzent-weich)}
.erfolg{background:var(--akzent-weich);border-radius:8px;padding:.7rem .85rem;
  margin-top:1rem;font-size:.86rem}
.erfolg h3{margin:0 0 .3rem;font-size:.95rem}

/* -------------------------------------------------- Dialog & Meldung */
dialog{border:1px solid var(--linie2);border-radius:10px;background:var(--flaeche);
  color:var(--tinte);padding:0;max-width:min(94vw,560px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(10,16,22,.5)}
.dlg{padding:1.1rem 1.2rem 1.2rem}
.dlg h2{font-size:1.1rem;margin:0 0 .2rem}
.dlg p{font-size:.85rem;color:var(--tinte2)}
.dlgfuss{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
.konflikt{border:1px solid var(--linie);border-radius:6px;padding:.6rem .7rem;
  margin:.5rem 0;font-size:.84rem}
.konflikt .wo{font-weight:600;display:block;margin-bottom:.35rem}
.konflikt label{display:flex;gap:.4rem;align-items:baseline;color:var(--tinte);
  font-size:.84rem;margin:.15rem 0}

.meldung{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));
  background:var(--tinte);color:var(--grund);padding:.6rem 1rem;border-radius:8px;
  font-size:.85rem;z-index:50;box-shadow:var(--schatten);max-width:90vw}
.meldung.schlecht{background:var(--schlecht);color:#fff}

@media (max-width:560px){
  .kennzahl.haupt .wert{font-size:1.8rem}
  .kopf{align-items:flex-start}
  .stand{text-align:left;min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Konten */
button.still{background:none;border:0;color:var(--akzent);font-size:.85rem;
  text-decoration:underline;padding:.3rem}
button.still:hover{background:var(--flaeche3)}
.kontozeile{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
  padding:.55rem 0;border-bottom:1px solid var(--linie)}
.kontozeile:last-child{border-bottom:0}
.kontoname{font-weight:500}
.merkmal{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:.2rem .55rem;white-space:nowrap}
.merkmal.ich{background:var(--akzent-weich);color:var(--akzent-tinte)}
.merkmal.offen{background:var(--prognose-weich);color:var(--prognose)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;
  letter-spacing:.08em;background:var(--flaeche3);border-radius:6px;
  padding:.5rem .7rem;display:inline-block;margin:.4rem 0;user-select:all}

/* Monatszellen sind anklickbar — das darf man sehen */
td.monatszelle{cursor:pointer}
tr.datenzeile:hover td.monatszelle:hover{background:var(--akzent-weich)}
#monatsbereich select{padding:.25rem .4rem;font-size:.8rem}
#monatsbereich button{padding:.25rem .5rem;font-size:.78rem}

/* Erwartete Erstattung: eigenes Zeichen, eigene Farbe — sie senkt die Prognose */
.erstattung{color:var(--gut);display:block;font-size:.76rem}
.erstattung-inline{color:var(--gut)}
td.erstattung,td.plan-inline{display:table-cell;font-size:.8rem;white-space:nowrap}