:root{
  --bg:#f6f7f9; --karte:#fff; --linie:#e3e6ea; --text:#16181d; --leise:#6b7280;
  --gut:#0f7b4f; --schlecht:#b4232c; --akzent:#1f3a5f; --balken:#c8d3e0;
  --warnung-bg:#fff4e5; --warnung-linie:#f0c98a; --warnung-text:#7a4b00;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14161a; --karte:#1c1f25; --linie:#2b2f37; --text:#e8eaed; --leise:#9aa3af;
    --gut:#4ade80; --schlecht:#f87171; --akzent:#8ab4f8; --balken:#333a45;
    --warnung-bg:#2e2312; --warnung-linie:#5a4520; --warnung-text:#f0c98a;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
     font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
header{padding:20px 24px 8px;display:flex;flex-wrap:wrap;gap:16px;align-items:baseline}
h1{font-size:19px;margin:0;font-weight:650}
.leise{color:var(--leise)}
.fueller{flex:1}
select{font:inherit;padding:6px 10px;border:1px solid var(--linie);border-radius:7px;
       background:var(--karte);color:var(--text)}
main{padding:0 24px 40px;max-width:1500px}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin:16px 0 8px}
.kachel{background:var(--karte);border:1px solid var(--linie);border-radius:11px;padding:14px 16px}
.kachel .wert{font-size:23px;font-weight:640;letter-spacing:-.02em;margin-top:2px}
.kachel .titel{font-size:11.5px;color:var(--leise);text-transform:uppercase;letter-spacing:.05em}
.warnung{background:var(--warnung-bg);border:1px solid var(--warnung-linie);color:var(--warnung-text);
         border-radius:9px;padding:11px 14px;margin:14px 0;font-size:13px}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:11px;
       overflow-x:auto;margin-top:14px}
table{border-collapse:collapse;width:100%;min-width:1080px}
th,td{padding:9px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--linie)}
th{font-size:11.5px;color:var(--leise);text-transform:uppercase;letter-spacing:.04em;
   font-weight:600;cursor:pointer;user-select:none;position:sticky;top:0;background:var(--karte)}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--karte)}
tbody tr:hover td{background:rgba(127,127,127,.07)}
tfoot td{font-weight:650;border-top:2px solid var(--linie);border-bottom:none}
.gut{color:var(--gut)} .schlecht{color:var(--schlecht)}
.balken{display:block;height:4px;border-radius:2px;background:var(--balken);margin-top:3px}
.balken i{display:block;height:100%;border-radius:2px;background:var(--akzent)}
.verlauf{display:flex;align-items:flex-end;gap:5px;height:110px;padding:16px}
.verlauf div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
             align-items:center;gap:5px;height:100%}
.verlauf b{display:block;width:100%;background:var(--akzent);border-radius:3px 3px 0 0;min-height:2px}
.verlauf b.minus{background:var(--schlecht)}
.verlauf span{font-size:10.5px;color:var(--leise)}
#fehler{padding:60px 24px;text-align:center;color:var(--leise)}

/* Umschalter Jahr / Monat */
.schalter{display:inline-flex;border:1px solid var(--linie);border-radius:8px;overflow:hidden}
.schalter button{font:inherit;padding:6px 14px;border:0;background:var(--karte);
                 color:var(--leise);cursor:pointer}
.schalter button+button{border-left:1px solid var(--linie)}
.schalter button.aktiv{background:var(--akzent);color:#fff}
.schalter.klein button{padding:4px 10px;font-size:12px}

.karten-kopf{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
             padding:12px 14px;border-bottom:1px solid var(--linie);font-weight:600}

/* Spalte "Monate" nur in der Jahresansicht */
td.monate{color:var(--leise);font-size:12.5px}

/* Monate ausserhalb der gewaehlten Ansicht bleiben sichtbar, treten aber zurueck */
.verlauf b.blass{opacity:.28}

/* Einheit x Monat */
table.matrix{min-width:0}
table.matrix th,table.matrix td{padding:7px 11px;font-size:12.5px}
table.matrix td.leer{color:var(--leise);opacity:.5}
table.matrix th{cursor:default}

/* Anmeldung */
body.anmeldeseite{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.anmeldung{background:var(--karte);border:1px solid var(--linie);border-radius:13px;
           padding:28px 30px;width:100%;max-width:370px}
.anmeldung h1{margin:0 0 4px}
.anmeldung p{margin:0 0 20px;font-size:13px}
.anmeldung label{display:block;font-size:12px;color:var(--leise);margin:14px 0 5px;font-weight:600}
.anmeldung input{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--linie);
                 border-radius:8px;background:var(--bg);color:var(--text)}
.anmeldung input:focus{outline:2px solid var(--akzent);outline-offset:1px}
.anmeldung button{width:100%;margin-top:22px;font:inherit;font-weight:600;padding:10px;
                  border:0;border-radius:8px;background:var(--akzent);color:#fff;cursor:pointer}
.fehlermeldung{background:var(--warnung-bg);border:1px solid var(--warnung-linie);
               color:var(--warnung-text);border-radius:8px;padding:9px 12px;font-size:13px}
.anmeldung .fehlermeldung{margin-bottom:0}

/* Angemeldeter Zugang in der Kopfzeile */
.konto{font-size:12.5px;color:var(--leise)}
.konto a{color:var(--leise)}