/* Optik "Petrol" - nach dem App-Entwurf vom 22.10.2026, hell und dunkel.
   Die Klassennamen sind die alten: Jede bestehende Seite bekommt die neue
   Optik, ohne angefasst zu werden. Handy-Bausteine: handy.css */
:root {
  --grund:#F3F5F4; --flaeche:#FFFFFF; --flaeche2:#F7F9F8; --schrift:#16201E;
  --schrift2:#4F5D59; --schrift3:#5F6D69; --linie:#E2E8E6; --linie2:#EEF2F1;
  --akzent:#1F6B5C; --akzent-dunkel:#164F44; --akzent-weich:#DDEEE9; --akzent-linie:#BFD8D1;
  --gut:#24704F; --gut-weich:#E3F2EA; --warn:#8A5300; --warn-weich:#FFF1DA;
  --schlecht:#A63D33; --schlecht-weich:#FCEDEB; --schatten:rgba(22,32,30,.06);
  --auf-akzent:#FFFFFF;
  --grotesk:Manrope,'Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --ziffern:Manrope,'Segoe UI',system-ui,sans-serif;
  --rund:18px; --rund-klein:12px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --grund:#111716; --flaeche:#1A2120; --flaeche2:#202927; --schrift:#E8EEEC;
  --schrift2:#A3B1AD; --schrift3:#9AA8A4; --linie:#2B3533; --linie2:#232C2A;
  --akzent:#5CC3A9; --akzent-dunkel:#8AD8C3; --akzent-weich:#173A32; --akzent-linie:#2A5A4F;
  --gut:#6CCB98; --gut-weich:#16301F; --warn:#E6B865; --warn-weich:#33280F;
  --schlecht:#EE8A80; --schlecht-weich:#3A1E1B; --schatten:rgba(0,0,0,.4);
  --auf-akzent:#0E1715;
}}
:root[data-theme="dark"] {
  --grund:#111716; --flaeche:#1A2120; --flaeche2:#202927; --schrift:#E8EEEC;
  --schrift2:#A3B1AD; --schrift3:#9AA8A4; --linie:#2B3533; --linie2:#232C2A;
  --akzent:#5CC3A9; --akzent-dunkel:#8AD8C3; --akzent-weich:#173A32; --akzent-linie:#2A5A4F;
  --gut:#6CCB98; --gut-weich:#16301F; --warn:#E6B865; --warn-weich:#33280F;
  --schlecht:#EE8A80; --schlecht-weich:#3A1E1B; --schatten:rgba(0,0,0,.4);
  --auf-akzent:#0E1715;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--grund); color:var(--schrift); font-family:var(--grotesk);
  font-size:15px; line-height:1.45; font-variant-numeric:tabular-nums; -webkit-tap-highlight-color:transparent; }
a { color:var(--akzent); text-decoration:none; }
h1,h2,h3 { font-weight:800; margin:0; letter-spacing:-.01em; text-wrap:balance; }
h1 { font-size:28px; letter-spacing:-.02em; } h2 { font-size:17px; } h3 { font-size:15px; }
.untertitel, .neben { color:var(--schrift2); font-size:13px; }
small { color:var(--schrift2); }
:focus-visible { outline:3px solid var(--akzent-linie); outline-offset:2px; }

/* Kopfleiste (am PC; auf dem Handy übernimmt die Leiste unten) */
.kopf { background:var(--flaeche); border-bottom:1px solid var(--linie); position:sticky; top:0; z-index:5; }
.kopf-innen { display:flex; align-items:center; gap:12px; padding:8px 16px; flex-wrap:wrap; }
.marke { display:flex; align-items:center; gap:10px; color:var(--schrift); }
.marke img { border-radius:10px; }
.marke span { display:flex; flex-direction:column; line-height:1.15; }
.marke b { font-size:15px; font-weight:800; }
.marke small { font-size:12px; }
.bereiche { display:flex; gap:2px; flex:1; overflow-x:auto; scrollbar-width:none; }
.bereiche::-webkit-scrollbar { display:none; }
.bereiche a { padding:8px 12px; border-radius:10px; color:var(--schrift2); white-space:nowrap; font-weight:600; }
.bereiche a:hover { background:var(--flaeche2); }
.bereiche a.aktiv { background:var(--akzent-weich); color:var(--akzent); }
.bereiche .zahl { font-style:normal; background:var(--schlecht); color:#fff; border-radius:10px; padding:0 6px; font-size:11px; margin-left:5px; }
.suche input { padding:8px 12px; border:1px solid var(--linie); border-radius:12px; background:var(--flaeche2); color:var(--schrift); width:180px; }
.haeuser { display:flex; gap:6px; padding:8px 16px; overflow-x:auto; background:var(--flaeche2); border-bottom:1px solid var(--linie); scrollbar-width:none; }
.chip { display:inline-flex; align-items:center; min-height:34px; padding:4px 14px; border-radius:999px; border:1px solid var(--linie);
  background:var(--flaeche); color:var(--schrift); white-space:nowrap; font-size:13px; font-weight:700; }
.chip.aktiv { background:var(--schrift); border-color:var(--schrift); color:var(--flaeche); }

/* Inhalt */
.inhalt { max-width:1400px; margin:0 auto; padding:20px 16px 40px; }
.kopfzeile { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.karte { background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); padding:16px; margin-bottom:14px; box-shadow:0 1px 2px var(--schatten); }
.karte h2 { margin-bottom:10px; } .karte.klein { max-width:420px; margin:40px auto; }
.gruppe { font-size:12px; font-weight:800; letter-spacing:.06em; color:var(--schrift2); text-transform:uppercase; margin:6px 4px 8px; }
.kennzahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
.kennzahl { background:var(--flaeche); border:1px solid var(--linie); border-radius:16px; padding:12px 14px; }
.kennzahl small { display:block; margin-bottom:2px; font-weight:700; font-size:12px; }
.kennzahl b { font-size:22px; font-weight:800; }
.gut { color:var(--gut); } .warn { color:var(--warn); } .schlecht { color:var(--schlecht); }

/* Listen und Tabellen */
.zeile { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--linie); border-radius:14px; margin-bottom:8px; background:var(--flaeche); }
.zeile .streifen { width:10px; height:10px; border-radius:5px; align-self:center; flex-shrink:0; background:var(--linie); }
.zeile.dringend .streifen { background:var(--schlecht); } .zeile.wichtig .streifen { background:#D08A1A; }
.zeile .text { flex:1; min-width:0; } .zeile .text b { display:block; }
.zeile .betrag { font-weight:800; color:var(--schlecht); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--schrift2); padding:9px 8px; border-bottom:1px solid var(--linie); }
td { padding:10px 8px; border-bottom:1px solid var(--linie2); vertical-align:middle; }
td.rechts, th.rechts { text-align:right; }
tr:hover td { background:var(--flaeche2); }
.tabelle { overflow-x:auto; }

/* Knöpfe und Formulare */
.knopf, button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 14px; border-radius:var(--rund-klein);
  border:1px solid var(--linie); background:var(--flaeche); color:var(--schrift); font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
.knopf:hover, button:hover { background:var(--flaeche2); }
.knopf.haupt, button.haupt { background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent); }
.knopf.haupt:hover, button.haupt:hover { background:var(--akzent-dunkel); }
.knopf.gefahr, button.gefahr { color:var(--schlecht); border-color:var(--schlecht); }
button.flach { border:none; background:none; color:var(--schrift2); }
.aktionen { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
form.inline { display:inline; }
label { display:block; margin:12px 0 5px; font-size:13px; font-weight:700; color:var(--schrift2); }
input:not([type=checkbox]):not([type=radio]), select, textarea { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--linie);
  border-radius:var(--rund-klein); background:var(--flaeche); color:var(--schrift); font:inherit; font-size:16px; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--akzent-linie); border-color:var(--akzent); }
.formular { max-width:560px; } .formular .reihe { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.formular button { margin-top:18px; }
.hinweis { padding:12px 14px; border-radius:14px; margin-bottom:12px; border:1px solid var(--linie); background:var(--flaeche); }
.hinweis.gut { background:var(--gut-weich); color:var(--gut); border-color:transparent; }
.hinweis.warn { background:var(--warn-weich); color:var(--warn); border-color:transparent; }
.hinweis.fehler { background:var(--schlecht-weich); color:var(--schlecht); border-color:transparent; }
.reiter { display:flex; gap:4px; padding:4px; border-radius:14px; background:var(--linie2); margin-bottom:16px; overflow-x:auto; scrollbar-width:none; }
.reiter::-webkit-scrollbar { display:none; }
.reiter a { flex:1 0 auto; text-align:center; padding:8px 14px; border-radius:11px; color:var(--schrift2); font-weight:700; white-space:nowrap; }
.reiter a.aktiv { background:var(--flaeche); color:var(--schrift); font-weight:800; box-shadow:0 1px 2px var(--schatten); }
.kacheln { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.kachel { display:block; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--rund); padding:14px 16px; color:var(--schrift); }
.kachel:hover { border-color:var(--akzent-linie); }
.kachel .stand { font-size:12px; font-weight:700; }
.anmeldung { display:flex; align-items:center; min-height:100vh; padding:16px; }
.anmeldung .logo { display:block; margin:0 auto 12px; border-radius:16px; }
.anmeldung h1 { text-align:center; }
.anmeldung .untertitel { text-align:center; margin-bottom:12px; }
.anmeldung button { width:100%; margin-top:16px; min-height:50px; }
.leer { color:var(--schrift2); padding:6px 0; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }