/* ==========================================================================
   base.css — Korbi Lebens Planer: Reset, Layout, Komponenten, Zustände.
   Themeneutral: keine Theme-Farbe, kein Schriftname — nur var(--…). Farben
   und Schriften setzen die theme-*.css (Vertrag aus DESIGN-VARIANTEN.md).
   Feste Werte nur für neutrale Abdunklung/Schatten — einzeln kommentiert.
   ========================================================================== */

/* Maß-Variablen: verbindlich, für alle Themes gleich — NUR Maße, sonst bricht die Theme-Trennung. */
:root {
  --tap: 44px;                 /* Mindest-Tapfläche, nie unterschreiten */
  --radius: 10px;
  --radius-gross: 18px;
  --raum-1: 4px;  --raum-2: 8px;  --raum-3: 12px;
  --raum-4: 16px; --raum-5: 24px; --raum-6: 32px; --raum-7: 48px;
  --t-mikro: 12px;             /* nur Labels/Badges, nie Fließtext */
  --t-klein: 14px;             /* absolutes Minimum für Text */
  --t-body: 16px;
  --t-gross: 20px;
  --t-titel: 26px;
  --t-display: 34px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; } /* display-Regeln dürfen das Attribut nicht schlagen */
html { -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, system-ui, sans-serif); /* Fallback nur generische Familien */
  font-size: var(--t-body);
  line-height: 1.5;
  /* Notch-Geräte: Inhalt nicht unter die gerundeten Ecken legen */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--akzent); }
h1, h2, h3, .karte-titel {
  font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
  line-height: 1.2;
}
h1 { font-size: var(--t-titel); }
h2 { font-size: var(--t-gross); }

/* Tastaturfokus immer sichtbar — nirgendwo outline:none ohne Ersatz. */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Die Zahl ist der Inhalt: tabellarische Ziffern, sonst springen Listen beim Aktualisieren. */
.zahl, .zeile-zahl, .tabelle-zahl, .termin-zeit, .stat-zahl, .timer-pille, .zaehler-text {
  font-family: var(--font-zahl, var(--font-body, monospace));
  font-variant-numeric: tabular-nums; }

/* --- Grundlayout: unten Platz, damit die feste Bottom-Nav nichts deckt --- */
main#inhalt {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--raum-4) var(--raum-4)
           calc(var(--tap) * 1.6 + env(safe-area-inset-bottom, 0px));
}

/* --- Kopfzeile --- */
.kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center; gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-4);
  background: var(--bg-erhoben);
  border-bottom: 1px solid var(--linie);
}
.marke {
  font-family: var(--font-display, var(--font-body, system-ui, sans-serif));
  font-size: var(--t-gross); color: var(--akzent);
  text-decoration: none; white-space: nowrap;
}
/* Auf 380 px konkurriert der Zusatz mit Timer-Pille und Benutzer-Chip. */
.marke-zusatz { display: none; color: var(--text-leise); font-size: var(--t-klein); }
@media (min-width: 480px) { .marke-zusatz { display: inline; } }
.kopf-status { display: flex; align-items: center; gap: var(--raum-2); }
.timer-pille {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  min-height: var(--tap); padding: 0 var(--raum-3);
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--akzent); color: var(--akzent-kontrast);
  white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; /* eine Zeile, sonst drückt sie die Kopfzeile auf */
}
.timer-pille::before { /* laufender Punkt; pulsiert nur ohne reduced-motion */
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentcolor;
}
.offline-hinweis { font-size: var(--t-klein); color: var(--warnung); }
.benutzer-chip {
  display: inline-flex; align-items: center; gap: var(--raum-2);
  min-height: var(--tap); padding: 0 var(--raum-3);
  background: transparent; border: 1px solid var(--linie); border-radius: 999px;
  cursor: pointer;
}
.personen-punkt { /* Farbe kommt inline aus PHP (--personen-farbe) */
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--personen-farbe, var(--akzent)); }
.benutzer-name { font-size: var(--t-klein); }

/* --- Navigation, Seitenleiste, Mehr-Blatt und Heute-Spalte: rahmen.css --- */

/* --- Karten: Themes dürfen die Linie per Variable gegen Schatten tauschen --- */
.karte, .stat-karte {
  background: var(--bg-erhoben);
  border: 1px solid var(--karte-linie, var(--linie));
  border-radius: var(--radius);
  box-shadow: var(--karte-schatten, none);
  padding: var(--raum-4);
}
.karte + .karte { margin-top: var(--raum-4); }
.karte-titel { font-size: var(--t-gross); margin-bottom: var(--raum-2); }
.karte-leise { color: var(--text-leise); font-size: var(--t-klein); }

/* --- Knöpfe --- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--raum-2);
  min-height: var(--tap); padding: var(--raum-2) var(--raum-4);
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: var(--t-body); text-decoration: none; cursor: pointer;
}
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: default; }
.knopf-primaer { background: var(--akzent); color: var(--akzent-kontrast); }
.knopf-sekundaer { background: transparent; border-color: var(--linie-stark); color: var(--text); }
/* Der Vertrag kennt nur eine Kontrast-Variable: die helle Schrift auf Signalfarbe. */
.knopf-gefahr { background: var(--dringend); color: var(--akzent-kontrast); }
/* Ausnahme zur 44-px-Regel, nur für enge Stellen (Zeilen, Tabellen). */
.knopf-klein { min-height: 36px; padding: 0 var(--raum-3); font-size: var(--t-klein); }
.knopf-block { width: 100%; }

/* --- Formulare --- */
.formular-feld { display: block; margin-bottom: var(--raum-4); }
.formular-feld > span, .formular-feld > label {
  display: block; margin-bottom: var(--raum-1);
  font-size: var(--t-klein); color: var(--text-leise);
}
input, select, textarea {
  width: 100%; min-height: var(--tap); /* date/time erben so dieselbe Höhe */
  padding: var(--raum-2) var(--raum-3);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius);
  font-size: var(--t-body);
}
input:focus, select:focus, textarea:focus { border-color: var(--akzent); }
textarea { min-height: calc(var(--tap) * 2); resize: vertical; }
input[type="checkbox"], input[type="radio"] {
  width: 20px; height: 20px; min-height: 0;
  accent-color: var(--akzent); /* native Kontrollkästchen in Theme-Farbe, ohne Bild */
}
.formular-meldung { margin: var(--raum-2) 0; font-size: var(--t-klein); }
.formular-meldung.ist-fehler { color: var(--dringend); }
.formular-meldung.ist-ok { color: var(--gut); }
@media (min-width: 480px) {
  .formular-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); }
  .formular-reihe .formular-feld { margin-bottom: 0; } /* Abstand kommt vom gap */
}

/* --- Hinweis-Kasten --- */
.hinweis-kasten {
  margin: var(--raum-4) 0;
  padding: var(--raum-3) var(--raum-4);
  background: var(--bg-vertieft);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
  font-size: var(--t-klein);
}
.hinweis-kasten.warnung { border-left-color: var(--warnung); }
.hinweis-kasten.dringend { border-left-color: var(--dringend); }
.hinweis-kasten.gut { border-left-color: var(--gut); }

/* --- Leerer Zustand --- */
.leer-zustand {
  text-align: center;
  padding: var(--raum-7) var(--raum-4);
  color: var(--text-leise);
}
.leer-zustand h1 { color: var(--text); margin-bottom: var(--raum-3); }

/* --- Listen-Zeilen --- */
.liste-zeile {
  display: flex; align-items: center; gap: var(--raum-3);
  min-height: var(--tap); padding: var(--raum-2) var(--raum-3);
  border-bottom: 1px solid var(--linie);
  color: var(--text); text-decoration: none;
}
.liste-zeile:active { background: var(--bg-vertieft); } /* Tap-Rückmeldung */
button.liste-zeile {
  width: 100%; border-width: 0 0 1px; background: none;
  cursor: pointer; text-align: left; font-size: var(--t-body);
}
.zeile-haupt { /* min-width 0, damit ellipsis im Flex-Item greift */
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zeile-neben { flex: none; font-size: var(--t-klein); color: var(--text-leise); }
.zeile-zahl { flex: none; }
/* Runde Abhak-Fläche; Zustand über aria-checked, Häkchen ohne Bild. */
.checkbox-rund {
  position: relative; flex: none;
  width: 22px; height: 22px; padding: 0;
  border: 2px solid var(--linie-stark); border-radius: 50%;
  background: none; cursor: pointer;
}
.checkbox-rund[aria-checked="true"] { background: var(--akzent); border-color: var(--akzent); }
.checkbox-rund[aria-checked="true"]::after {
  content: ""; position: absolute; left: 5px; top: 6px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--akzent-kontrast);
  border-bottom: 2px solid var(--akzent-kontrast);
  transform: rotate(-45deg);
}
.ist-erledigt { color: var(--text-still); text-decoration: line-through; }
.ist-ueberfaellig { box-shadow: inset 3px 0 0 var(--dringend); } /* rote Kante links */

/* --- Gruppierung --- */
.kategorie-kopf {
  padding: var(--raum-3) var(--raum-3) var(--raum-1);
  font-size: var(--t-mikro); /* Label-Ausnahme */
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-still);
}
.gruppe + .gruppe { margin-top: var(--raum-5); }

/* --- Badges/Pillen: Farbtext immer; 12-%-Alpha-Grund via color-mix, sonst solider Fallback --- */
.badge, .pille {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: var(--t-mikro); /* Label-Ausnahme */
  background: var(--bg-vertieft); color: var(--text-leise);
}
.pille { padding: 4px 12px; }
.badge-warnung, .pille-warnung { color: var(--warnung); }
.badge-dringend, .pille-dringend { color: var(--dringend); }
.badge-gut, .pille-gut { color: var(--gut); }
@supports (background: color-mix(in srgb, currentcolor 12%, transparent)) {
  .badge-warnung, .pille-warnung { background: color-mix(in srgb, var(--warnung) 12%, transparent); }
  .badge-dringend, .pille-dringend { background: color-mix(in srgb, var(--dringend) 12%, transparent); }
  .badge-gut, .pille-gut { background: color-mix(in srgb, var(--gut) 12%, transparent); }
}

/* --- Statistik --- */
.stat-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--raum-3);
}
.stat-zahl { font-size: var(--t-display); line-height: 1.1; color: var(--akzent); }
.stat-label { font-size: var(--t-mikro); color: var(--text-leise); }

/* --- Tabellen --- */
.tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  padding: var(--raum-2) var(--raum-3);
  font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-still); text-align: left;
  border-bottom: 1px solid var(--linie-stark);
}
.tabelle td { padding: var(--raum-2) var(--raum-3); border-bottom: 1px solid var(--linie); }
.tabelle-zahl { text-align: right; }

/* --- Kalender: Linien entstehen über 1-px-Lücken auf Linien-Grund (kein Doppelrand) --- */
.monatsraster {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie);
}
.monats-zelle {
  background: var(--bg-erhoben);
  aspect-ratio: 1; min-width: 0; overflow: hidden;
  padding: 4px; font-size: var(--t-klein);
}
.monats-zelle.ist-heute { box-shadow: inset 0 0 0 2px var(--akzent); }
.monats-zelle.ist-fremdmonat { color: var(--text-still); }
.termin-punkte { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.termin-punkt {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kalender-farbe, var(--akzent));
}
.listen-termin { display: flex; align-items: baseline; gap: var(--raum-3); padding: var(--raum-2) 0; }
.termin-zeit { flex: none; min-width: 48px; }
.termin-inhalt { flex: 1; min-width: 0; }
.termin-kalenderpunkt {
  flex: none; align-self: center;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--kalender-farbe, var(--akzent));
}
.wochenleiste {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--raum-1);
  text-align: center; font-size: var(--t-klein);
}

/* --- Zeitachse (Tagesablauf) --- */
.zeitachse-termin { display: flex; gap: var(--raum-3); }
.zeitachse-strich { position: relative; flex: none; width: 2px; background: var(--linie); }
.zeitachse-strich::before {
  content: ""; position: absolute; top: var(--raum-2); left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--kalender-farbe, var(--akzent));
}
.zeitachse-inhalt { flex: 1; min-width: 0; padding-bottom: var(--raum-4); }
.ist-vergangen { opacity: .55; }
.ist-aktuell {
  background: var(--bg-erhoben); border-radius: var(--radius);
  box-shadow: inset 3px 0 0 var(--akzent);
  padding: var(--raum-3);
}

/* --- Magnet (Pinnwand-Signatur, nur die Form). Eltern-Karte braucht position: relative. --- */
.magnet {
  position: absolute; top: -4px; left: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--personen-farbe, var(--akzent));
  /* Bewusst feste Farbe: ein Schatten muss auf jeder Zettel-/Kartenfarbe wirken. */
  box-shadow: 0 1px 2px rgb(0 0 0 / .35);
}

/* --- Toasts: invertierte Fläche hebt sich in jedem Theme ab; Container klickdurchlässig --- */
#toast-container {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tap) * 1.6 + env(safe-area-inset-bottom, 0px) + var(--raum-3));
  display: flex; flex-direction: column; gap: var(--raum-2);
  width: min(480px, calc(100% - 2 * var(--raum-4)));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--text); color: var(--bg);
  border-radius: var(--radius);
  padding: var(--raum-3) var(--raum-4);
  font-size: var(--t-klein);
  /* Schatten aus der Theme-Textfarbe gemischt; ohne color-mix entfällt er schadlos. */
  box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 25%, transparent);
}
.toast-fehler { background: var(--dringend); color: var(--akzent-kontrast); }
.toast-ok { background: var(--gut); color: var(--akzent-kontrast); }

/* --- Modal --- */
.modal {
  position: fixed; inset: 0; z-index: 55;
  display: grid; place-items: center;
  padding: var(--raum-4);
}
.modal::before {
  content: ""; position: absolute; inset: 0;
  /* Bewusst feste Farbe: gleiche neutrale Abdunklung wie beim Sheet. */
  background: rgba(0, 0, 0, .4);
}
.modal-kasten {
  position: relative; /* über dem ::before-Backdrop */
  width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto;
  background: var(--bg-erhoben);
  border-radius: var(--radius-gross);
  padding: var(--raum-5);
}
.modal-titel { font-size: var(--t-gross); margin-bottom: var(--raum-3); }
.modal-aktionen { display: flex; gap: var(--raum-3); justify-content: flex-end; margin-top: var(--raum-5); }

/* --- Seitenkopf und Filter --- */
.seiten-kopf {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--raum-3);
  margin: var(--raum-5) 0;
}
.seiten-aktionen { display: flex; gap: var(--raum-2); }
.filter-leiste {
  display: flex; gap: var(--raum-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--raum-2); margin-bottom: var(--raum-3);
}
/* Chips sind bewusst flacher als 44 px: dichte Filterzeilen, dafür großzügige Breite. */
.chip {
  flex: none; padding: 6px 12px;
  border: 1px solid var(--linie); border-radius: 999px;
  background: transparent; color: var(--text-leise);
  font-size: var(--t-klein); text-decoration: none; cursor: pointer;
}
.chip.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-kontrast); }

/* --- Kartenmodul (Touren) und Höhenprofil --- */
.karte-container {
  height: 280px;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-vertieft);
}
.karte-hinweis { /* „Kartenserver nicht konfiguriert" */
  height: 100%; display: grid; place-items: center;
  padding: var(--raum-4); text-align: center;
  color: var(--text-leise); font-size: var(--t-klein);
}
.hoehenprofil { width: 100%; height: 80px; }

/* --- Anmeldung und Einrichtung --- */
.anmelde-bereich, .einrichten-hinweis {
  max-width: 420px; margin: 0 auto; padding-top: var(--raum-6);
}
.einrichten-hinweis { max-width: 560px; }
.anmelde-karte h1, .einrichten-hinweis h1 { margin-bottom: var(--raum-3); }
.anmelde-karte p, .einrichten-hinweis p { margin-bottom: var(--raum-4); }
.anmelde-erneut { display: flex; align-items: center; gap: var(--raum-3); margin-top: var(--raum-4); }
.zaehler-text { font-size: var(--t-klein); color: var(--text-leise); }
.schritte { padding-left: var(--raum-5); margin: var(--raum-4) 0; }
.schritte li { margin-bottom: var(--raum-2); }

/* --- Utilities (sparsam) --- */
.leise { color: var(--text-leise); }
.still { color: var(--text-still); }
.klein { font-size: var(--t-klein); }
.mikro { font-size: var(--t-mikro); }
.zentriert { text-align: center; }
.rechts { text-align: right; }
.abstand-oben { margin-top: var(--raum-5); }
.versteckt { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Animationen: nur diese drei; bei reduzierter Bewegung werden sie nicht gesetzt --- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes einblenden { from { opacity: 0; } }
  @keyframes hochfahren { from { opacity: 0; transform: translateY(12px); } }
  @keyframes pulsieren { 50% { opacity: .4; } }
  .toast { animation: hochfahren 160ms ease-out; }
  .sheet { animation: einblenden 140ms ease-out; }
  .sheet-kasten { animation: hochfahren 160ms ease-out; }
  .modal { animation: einblenden 140ms ease-out; }
  .timer-pille::before { animation: pulsieren 2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- Druck --- */
@media print {
  .hauptnav, .kopf-status, .knopf, .filter-leiste, .seiten-aktionen,
  #toast-container, .sheet { display: none !important; }
  body { background: none; } /* Browser drucken ohnehin weiß — keine Fixfarbe nötig */
  main#inhalt { max-width: none; padding: 0; }
  .karte, .stat-karte { box-shadow: none; }
}

/* Fortsetzung (app.js-Klassen, Modul-Ergänzungen): base-module.css */