:root{color-scheme:light dark}
:root{
    --bg:#f7f7f4; --card:#fff; --ink:#1c1f1c; --mut:#5c635c;
    --line:#dcded9; --gruen:#2e6e40; --gruen-hell:#eaf2ec;
    --warn:#8a5a12; --warn-bg:#fdf5e6; --rot:#8a2f2f;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);
       font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  .wrap{max-width:960px;margin:0 auto;padding:24px 18px 64px}
  header{border-bottom:3px solid var(--gruen);padding-bottom:14px;margin-bottom:22px}
  h1{font-size:1.6rem;margin:0 0 6px;line-height:1.25}
  .sub{color:var(--mut);font-size:.95rem;margin:0}
  h2{font-size:1.05rem;color:var(--gruen);margin:26px 0 10px;
     border-bottom:1px solid var(--line);padding-bottom:5px}
  .karte{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px}
  .raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
  /* Jede Zelle ist eine Spalte, die Beschriftung nimmt den Restplatz auf.
     Dadurch stehen Eingabefelder einer Zeile auf einer Linie, auch wenn ein
     Feld eine Zusatzzeile hat und das Nachbarfeld nicht. */
  .raster > div{display:flex;flex-direction:column}
  .raster > div > label{flex:1 1 auto}
  label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
  .hinweis{font-weight:400;color:var(--mut);font-size:.78rem;display:block;margin-top:2px}
  input,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:5px;
               font-size:1rem;background:#fff;color:var(--ink)}
  input:focus,select:focus{outline:2px solid var(--gruen);outline-offset:1px}
  .ergebnis{margin-top:26px}
  .kopfzahl{background:var(--gruen-hell);border:1px solid var(--gruen);border-radius:8px;
            padding:18px 20px;margin-bottom:18px}
  .kopfzahl .zahl{font-size:2rem;font-weight:700;color:var(--gruen);line-height:1.1}
  .kopfzahl .zahl.defizit{color:var(--rot)}
  .kopfzahl .erklaerung{color:var(--mut);font-size:.9rem;margin-top:6px}
  table{width:100%;border-collapse:collapse;font-size:.92rem}
  th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
  td.z,th.z{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  tr.summe td{font-weight:700;border-top:2px solid var(--ink);border-bottom:none}
  tr.abzug td{color:var(--mut)}
  .tabellenrahmen{overflow-x:auto}
  .vergleich{background:#fff;border:1px solid var(--gruen);border-left:5px solid var(--gruen);
             border-radius:6px;padding:14px 16px;margin-top:16px}
  .vergleich strong{color:var(--gruen)}
  .warnbox{background:var(--warn-bg);border:1px solid #e6d3a8;border-left:5px solid var(--warn);
           border-radius:6px;padding:14px 16px;margin:18px 0;font-size:.9rem}
  .warnbox h3{margin:0 0 6px;font-size:.95rem;color:var(--warn)}
  .warnbox ul{margin:6px 0 0;padding-left:20px}
  footer{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);
         color:var(--mut);font-size:.82rem}
  @media print{body{background:#fff}.karte{border:none;padding:0}}

/* Ersatz fuer frueher inline gesetzte Abstaende, CSP verbietet style-Attribute */
h2.erste{margin-top:0}
.warnbox p.eng{margin:0}
.warnbox p.abstand{margin:10px 0 0}

/* Dunkelmodus, passend zur Platzhalterseite (color-scheme: light dark) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#151915; --card:#1d221d; --ink:#e6eae3; --mut:#a3aca1;
    --line:#333a33; --gruen:#7fbe93; --gruen-hell:#1e2a21;
    --warn:#d7ab63; --warn-bg:#2a2418; --rot:#e08a8a;
  }
  input,select{background:#151915;color:var(--ink)}
  .vergleich{background:var(--card)}
  .warnbox{border-color:#4a3f22}
  tr.summe td{border-top-color:var(--ink)}
}