/* =====================================================================
   verwaltung-entwurf.css — Hand-Entwurf „Verwaltung 0e" (2026-10-07)
   Kita Familya · Familya Verwaltung · Persona-geprüfte Vereinfachung
   Grundlage: 02-Designsystem.md § 0e (vorrangig vor § 0d und § 12),
   echte CI aus § 0a/0c (Varela Round + Open Sans, Markenfarben 1:1).
   Nur Muster — NICHT app/admin/. Keine externen Quellen, keine Tracker.
   ===================================================================== */

@font-face {
  font-family: "Open Sans";
  src: url("../website/assets/fonts/opensans-400.woff2") format("woff2-variations"),
       url("../website/assets/fonts/opensans-400.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Varela Round";
  src: url("../website/assets/fonts/varelaround-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marke (tokens.css, § 0a/0c) */
  --blau-900: #0A4B6B;
  --blau-800: #005F8F;   /* Text, Links, Umriss-Knöpfe */
  --blau-700: #0077B3;
  --blau-500: #009FE3;   /* nur Deko */
  --blau-100: #E2F4FC;
  --pink-700: #A2275F;
  --pink-500: #C42C71;   /* NUR die eine Hauptaktion */
  --pink-400: #E94B92;   /* nur Deko */
  --pink-100: #FCE4F0;
  --gruen-700: #4E7A12;
  --gruen-400: #9DC23F;  /* nur Deko */
  --gruen-100: #EEF6DC;
  --petrol-700: #0F6E6E;
  --orange-700: #9A4708;
  --orange-500: #F2A007; /* nur Deko */
  --orange-100: #FDEFD2;
  --gelb-500: #F2E000;   /* nur Deko */
  --fehler: #C0301A;
  --fehler-bg: #FBE3DF;
  --fokus: #006C9E;

  /* Verwaltung (admin.css § 22) */
  --flaeche: #F2F5F7;
  --karte: #FFFFFF;
  --linie: #DFE5E9;
  --linie-stark: #C2CBD1;
  --text: #21292E;
  --text-leise: #56626A;
  --ton-ende: #4A5257;
  --ton-ende-bg: #EEF1F3;

  --schrift-basis: 1rem;      /* 16 */
  --schrift-gross: 1.125rem;  /* 18 */
  --schrift-satz: 1.375rem;   /* 22 */
  --schrift-klein: 0.875rem;  /* 14 — Untergrenze in 0e */

  --ziel: 44px;
  --ziel-gross: 52px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --schatten-schwebend: 0 12px 32px rgba(10, 75, 107, .18), 0 2px 6px rgba(10, 75, 107, .10);
  --dauer: 160ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; flex: none; vertical-align: -4px; } /* jede Klassenregel überschreibt das */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--schrift-basis);
  line-height: 1.5;
  color: var(--text);
  background: var(--flaeche);
}
h1, h2, h3, .display {
  font-family: "Varela Round", "Open Sans", system-ui, sans-serif;
  font-weight: 400;          /* Varela hat nur Regular — Hierarchie über Größe */
  line-height: 1.25;
  margin: 0;
  hyphens: manual;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 .75rem; }
a { color: var(--blau-800); text-underline-offset: 3px; }
a:hover { color: var(--blau-900); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.leise { color: var(--text-leise); font-size: var(--schrift-klein); }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grid > *, .zeile > * { min-width: 0; }

/* ---------------------------------------------------------------------
   1  Rahmen — Desktop (Menü links) und Handy (Leiste unten)
   --------------------------------------------------------------------- */
.rahmen { min-height: 100vh; }

.g-desktop .rahmen {
  background: linear-gradient(to right, var(--karte) 247px, var(--linie) 247px, var(--linie) 248px, var(--flaeche) 248px);
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-width: 1200px;
}
.seitenmenue {
  background: var(--karte);
  border-right: 1px solid var(--linie);
  padding: 20px 16px;
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column; gap: 4px;
}
.seitenmenue__logo { display: block; padding: 4px 8px 4px; }
.seitenmenue__logo img { width: 150px; height: auto; display: block; }
/* Signatur: die fünf Logo-Farben als Marken-Punkte — leise, nur einmal pro Seite */
.markenpunkte { display: flex; gap: 6px; padding: 10px 8px 18px; }
.markenpunkte i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.markenpunkte i:nth-child(1) { background: var(--pink-400); }
.markenpunkte i:nth-child(2) { background: var(--blau-500); }
.markenpunkte i:nth-child(3) { background: var(--gruen-400); }
.markenpunkte i:nth-child(4) { background: var(--orange-500); }
.markenpunkte i:nth-child(5) { background: var(--petrol-700); }

.menue { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menue a {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text); text-decoration: none; font-weight: 600;
}
.menue a:hover { background: var(--flaeche); }
.menue a[aria-current="page"] {
  background: var(--blau-100); color: var(--blau-900);
  box-shadow: inset 4px 0 0 var(--blau-800);
}
.menue svg { width: 22px; height: 22px; flex: none; }
.menue__zahl {
  margin-left: auto; min-width: 26px; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--blau-800); color: #fff; font-size: var(--schrift-klein); text-align: center;
}
.menue__zahl[data-dringend="1"] { background: var(--fehler); }
.seitenmenue__unten { margin-top: auto; border-top: 1px solid var(--linie); padding-top: 12px; display: grid; gap: 4px; }
.seitenmenue__unten a { font-weight: 400; color: var(--text-leise); }
.konto { padding: 8px 12px; font-size: var(--schrift-klein); color: var(--text-leise); }
.konto strong { display: block; color: var(--text); font-size: var(--schrift-basis); }

.inhalt { padding: 28px 40px 96px; max-width: 1080px; width: 100%; }
.g-desktop .inhalt--breit { max-width: none; }

/* Seitenkopf: Titel links, EINE Hauptaktion + „Mehr" rechts — immer im ersten Bild */
.kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.kopf__titel { min-width: 0; }
.kopf__titel p { margin: 4px 0 0; color: var(--text-leise); }
.kopf__aktionen { display: flex; align-items: center; gap: 12px; flex: none; }
.zurueck { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ziel); font-weight: 600; text-decoration: none; margin-bottom: 4px; }

/* Handy */
.g-mobil { background: #E3E9ED; }
.g-mobil .rahmen {
  max-width: 390px; margin: 0 auto; background: var(--flaeche);
  position: relative; box-shadow: 0 0 0 1px var(--linie);
}
.g-mobil .seitenmenue { display: none; }
.kopfleiste {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 56px; padding: 0 12px 0 16px;
  background: var(--karte); border-bottom: 1px solid var(--linie);
}
.kopfleiste img { height: 30px; width: auto; display: block; }
.kopfleiste__konto { display: flex; align-items: center; gap: 4px; }
.g-desktop .kopfleiste, .g-desktop .unterleiste, .g-desktop .daumenleiste { display: none; }
.g-mobil .inhalt { padding: 16px 16px 168px; }
.g-mobil h1 { font-size: 1.5rem; }
.g-mobil .kopf { margin-bottom: 14px; }
.g-mobil .kopf__aktionen .knopf--haupt { display: none; } /* Hauptknopf sitzt unten in der Daumenzone */

.unterleiste {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(390px, 100%); z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--karte); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.unterleiste a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 64px; padding: 6px 2px; position: relative;
  color: var(--text-leise); text-decoration: none; font-size: var(--schrift-klein); line-height: 1.15; text-align: center;
}
.unterleiste svg { width: 24px; height: 24px; }
.unterleiste a[aria-current="page"] { color: var(--blau-900); font-weight: 700; }
.unterleiste a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 4px;
  border-radius: 0 0 4px 4px; background: var(--blau-800);
}
.unterleiste .menue__zahl { position: absolute; top: 4px; right: 12%; margin: 0; min-width: 22px; padding: 0 6px; font-size: var(--schrift-klein); line-height: 1.4; }

/* Daumenzone: der Hauptknopf über der unteren Leiste */
.daumenleiste {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 25;
  width: min(390px, 100%); padding: 10px 16px 12px;
  background: linear-gradient(to top, var(--flaeche) 70%, rgba(242,245,247,0));
  display: flex; gap: 8px;
}
.daumenleiste .knopf { flex: 1; }

/* ---------------------------------------------------------------------
   2  Knöpfe
   --------------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ziel); padding: 10px 18px;
  border: 1px solid transparent; border-radius: 10px;
  font: 600 var(--schrift-basis)/1.2 "Open Sans", system-ui, sans-serif;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dauer), border-color var(--dauer), color var(--dauer);
}
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf--haupt { min-height: var(--ziel-gross); padding: 12px 22px; background: var(--pink-500); color: #fff; }
.knopf--haupt:hover { background: var(--pink-700); color: #fff; }
.knopf--zweit { background: var(--karte); color: var(--blau-800); border-color: var(--blau-800); }
.knopf--zweit:hover { background: var(--blau-100); color: var(--blau-900); }
.knopf--leise { background: transparent; color: var(--blau-800); padding-inline: 10px; }
.knopf--leise:hover { background: var(--blau-100); }
.knopf--gefahr { background: var(--karte); color: var(--fehler); border-color: var(--fehler); }
.knopf--gefahr:hover { background: var(--fehler-bg); }
.knopf--gefahr-voll { background: var(--fehler); color: #fff; }
.knopf--klein { min-height: 40px; padding: 8px 14px; font-size: var(--schrift-klein); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.knopf--breit { width: 100%; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------------------------------------------------------------------
   3  „⋯ Mehr" — seltene Funktionen, vollständig, eine Ebene tiefer
   --------------------------------------------------------------------- */
.mehr { position: relative; }
.mehr__knopf { background: var(--karte); color: var(--text); border-color: var(--linie-stark); }
.mehr__knopf:hover { background: var(--flaeche); }
.mehr__liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: 340px; max-height: 70vh; overflow: auto;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md);
  box-shadow: var(--schatten-schwebend); padding: 8px;
}
.mehr__gruppe { padding: 8px 10px 4px; font-size: var(--schrift-klein); color: var(--text-leise); font-weight: 600; }
.mehr__punkt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  min-height: 48px; padding: 10px 10px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text); text-align: left; text-decoration: none;
  font: 400 var(--schrift-basis)/1.35 "Open Sans", system-ui, sans-serif; cursor: pointer;
}
.mehr__punkt:hover { background: var(--flaeche); color: var(--text); }
.mehr__punkt small { display: block; color: var(--text-leise); font-size: var(--schrift-klein); }
.mehr__trenner { border: 0; border-top: 1px solid var(--linie); margin: 10px 4px; }
.mehr__punkt--gefahr { color: var(--fehler); }
.mehr__punkt--gefahr:hover { background: var(--fehler-bg); color: var(--fehler); }
.rolle { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: var(--r-pill); background: var(--ton-ende-bg); color: var(--ton-ende); font-size: var(--schrift-klein); font-weight: 600; white-space: nowrap; }
/* Handy: Mehr als Blatt von unten */
.g-mobil .mehr__liste {
  position: fixed; left: 50%; transform: translateX(-50%); right: auto; top: auto; bottom: 0;
  width: min(390px, 100%); max-height: 78vh; border-radius: 18px 18px 0 0; padding: 12px 8px 24px; z-index: 60;
}
.g-mobil .mehr__liste::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--linie-stark); margin: 0 auto 8px; }
.mehr-schleier { position: fixed; inset: 0; background: rgba(33,41,46,.35); z-index: 55; }

/* ---------------------------------------------------------------------
   4  Karten, Abschnitte, Stand-Abzeichen
   --------------------------------------------------------------------- */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); padding: 20px; }
.g-mobil .karte { padding: 16px; }
.abschnitt { margin-top: 28px; }
.abschnitt__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.abschnitt__kopf h2 { font-size: 1.25rem; }
.stapel > * + * { margin-top: 12px; }
.zeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.stand {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: var(--schrift-klein); font-weight: 600; white-space: nowrap;
}
.stand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stand[data-ton="laeuft"]   { background: var(--blau-100);  color: var(--blau-800); }
.stand[data-ton="familie"]  { background: var(--pink-100);  color: var(--pink-700); }
.stand[data-ton="gut"]      { background: var(--gruen-100); color: var(--gruen-700); }
.stand[data-ton="ende"]     { background: var(--ton-ende-bg); color: var(--ton-ende); }
.stand[data-ton="dringend"] { background: var(--fehler-bg); color: var(--fehler); }
.stand[data-ton="umriss"]   { background: var(--karte); color: var(--blau-800); border-color: var(--blau-800); }
.stand[data-ton="umriss"]::before { display: none; }

/* ---------------------------------------------------------------------
   5  „Heute" — Satz, Aufgaben, Häuser
   --------------------------------------------------------------------- */
.heute-satz { font-family: "Varela Round", system-ui, sans-serif; font-size: var(--schrift-satz); line-height: 1.35; margin: 0 0 6px; max-width: 46ch; }
.g-mobil .heute-satz { font-size: 1.1875rem; }
.datumzeile { color: var(--text-leise); font-size: var(--schrift-klein); margin-bottom: 16px; }
.aufgaben { list-style: none; margin: 0; padding: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); }
.aufgabe {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 76px; padding: 12px 16px; border-top: 1px solid var(--linie);
}
.aufgabe:first-child { border-top: 0; }
.aufgabe__wer { font-weight: 700; font-size: var(--schrift-gross); }
.aufgabe__was { color: var(--text-leise); }
.aufgabe[data-dringend="1"] .aufgabe__was { color: var(--fehler); font-weight: 600; }
.aufgabe[data-dringend="1"] { box-shadow: inset 4px 0 0 var(--fehler); }
.aufgabe__art { display: block; font-size: var(--schrift-klein); color: var(--text-leise); text-transform: none; }
.g-mobil .aufgabe { grid-template-columns: 1fr; gap: 8px; }
.g-mobil .aufgabe .knopf { width: 100%; }
.mehr-zeile { padding: 12px 16px; border-top: 1px solid var(--linie); }

.suche { position: relative; }
.suche input { padding-left: 46px; }
.suche svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--text-leise); pointer-events: none; }
.treffer { margin-top: 6px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); box-shadow: var(--schatten-schwebend); overflow: hidden; }
.treffer a { display: block; padding: 12px 16px; text-decoration: none; color: var(--text); border-top: 1px solid var(--linie); }
.treffer a:first-child { border-top: 0; }
.treffer a:hover { background: var(--flaeche); }
.treffer strong { display: block; }

.haeuser { width: 100%; border-collapse: collapse; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); overflow: hidden; }
.haeuser th, .haeuser td { text-align: left; padding: 14px 16px; border-top: 1px solid var(--linie); }
.haeuser thead th { border-top: 0; font-size: var(--schrift-klein); color: var(--text-leise); font-weight: 600; background: var(--karte); }
.haeuser td a { font-weight: 700; font-size: var(--schrift-gross); }
.haeuser tfoot td { font-weight: 700; background: var(--flaeche); }
.haeuser--kompakt th, .haeuser--kompakt td { padding: 6px 8px; line-height: 1.2; }
.haeuser--kompakt th:first-child, .haeuser--kompakt td:first-child { padding-left: 12px; }
.haeuser--kompakt td a { display: inline-block; min-width: 32px; min-height: 32px; line-height: 32px; }
.g-mobil .muster { padding: 6px 10px 8px; margin-bottom: 10px; }
.g-mobil .muster .wahl-chips { flex-wrap: nowrap; gap: 6px; }
.g-mobil .muster .chip { min-height: 36px; padding: 6px 10px; }
.haus-karten { display: grid; gap: 10px; }
.haus-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); padding: 12px 14px; }
.haus-karte h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.haus-karte dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; }
.haus-karte dt { font-size: var(--schrift-klein); color: var(--text-leise); line-height: 1.25; }
.haus-karte dd { margin: 0; font-weight: 700; font-size: var(--schrift-gross); }

.plaetze { list-style: none; margin: 0; padding: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); }
.plaetze li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.plaetze li:first-child { border-top: 0; }

details.aufklapp { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); }
details.aufklapp > summary {
  list-style: none; cursor: pointer; min-height: var(--ziel-gross); padding: 14px 16px;
  display: flex; align-items: center; gap: 10px; font-weight: 600;
}
details.aufklapp > summary::-webkit-details-marker { display: none; }
details.aufklapp > summary::before {
  content: "+"; width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; border: 1px solid var(--linie-stark); color: var(--blau-800); font-weight: 700;
}
details.aufklapp[open] > summary::before { content: "−"; }
details.aufklapp > summary small { font-weight: 400; color: var(--text-leise); font-size: var(--schrift-klein); margin-left: auto; text-align: right; }
.aufklapp__inhalt { padding: 4px 16px 18px; }

/* Muster-Steuerung (nur im Entwurf, nicht Teil der Oberfläche) */
.muster {
  border: 1px dashed var(--linie-stark); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 18px;
  font-size: var(--schrift-klein); color: var(--text-leise); background: #FAFBFC;
}
.muster .wahl-chips { margin-top: 6px; }

/* Ansicht je Persona auf „Heute" */
[data-fuer] { display: none; }
body[data-ansicht="leitung"] [data-fuer~="leitung"],
body[data-ansicht="traeger"] [data-fuer~="traeger"],
body[data-ansicht="verwaltung"] [data-fuer~="verwaltung"] { display: block; }

/* ---------------------------------------------------------------------
   6  Listen und Tabellen
   --------------------------------------------------------------------- */
.filter { display: grid; gap: 12px; margin-bottom: 16px; }
.g-desktop .filter { grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(0, 1fr)) auto; align-items: end; }
.wahl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: var(--ziel); padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--linie-stark); background: var(--karte); color: var(--text);
  font: 600 var(--schrift-klein)/1.2 "Open Sans", system-ui, sans-serif; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--blau-100); border-color: var(--blau-800); color: var(--blau-900); }
.ergebniszeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; color: var(--text-leise); font-size: var(--schrift-klein); }

.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); overflow: hidden; }
.tabelle th, .tabelle td { padding: 12px 14px; text-align: left; border-top: 1px solid var(--linie); vertical-align: middle; }
.tabelle thead th { border-top: 0; font-size: var(--schrift-klein); color: var(--text-leise); font-weight: 600; white-space: nowrap; }
.tabelle tbody tr { cursor: pointer; }
.tabelle tbody tr:hover { background: #F7FAFB; }
.tabelle td a.zeilenlink { color: var(--text); font-weight: 700; text-decoration: none; }
.tabelle td a.zeilenlink:hover { text-decoration: underline; color: var(--blau-900); }
.tabelle .zahl { font-variant-numeric: tabular-nums; }
.sortierknopf { background: none; border: 0; padding: 0; min-height: 40px; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.sortierknopf::after { content: "↕"; font-size: 13px; opacity: .6; }
th[aria-sort="ascending"] .sortierknopf::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .sortierknopf::after { content: "↓"; opacity: 1; }
.haken { width: 22px; height: 22px; accent-color: var(--blau-800); }
.haken-zelle { width: 48px; }
.haken-zelle label { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }

.karten-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.listenkarte {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); padding: 12px 14px;
  text-decoration: none; color: var(--text); min-height: 64px;
}
.listenkarte strong { font-size: var(--schrift-gross); }
.listenkarte .leise { grid-column: 1 / -1; }
.listenkarte--haken { grid-template-columns: auto minmax(0, 1fr) auto; }

.naechste { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); padding: 16px; margin-bottom: 20px; }
.naechste ol { list-style: none; margin: 10px 0 0; padding: 0; }
.naechste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.platz-nr { display: inline-grid; place-items: center; min-width: 36px; height: 36px; border-radius: 50%; background: var(--blau-100); color: var(--blau-900); font-weight: 700; margin-right: 10px; }

.sammelleiste {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--blau-100); border: 1px solid #B9DDEE; border-radius: var(--r-md);
  padding: 10px 14px; margin-bottom: 10px;
}
.sammelleiste strong { color: var(--blau-900); }
.sammelleiste .leise { flex-basis: 100%; color: var(--blau-900); }

.reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 20px; }
.reiter a, .reiter button {
  min-height: var(--ziel); padding: 10px 16px; border: 0; background: none; cursor: pointer;
  font: 600 var(--schrift-basis)/1.2 "Open Sans", system-ui, sans-serif; color: var(--text-leise); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.reiter [aria-current="page"], .reiter [aria-selected="true"] { color: var(--blau-900); border-bottom-color: var(--blau-800); }
.g-mobil .reiter { overflow: visible; flex-wrap: wrap; }
.g-mobil .reiter a, .g-mobil .reiter button { padding: 10px 10px; font-size: var(--schrift-klein); }

/* ---------------------------------------------------------------------
   7  Detailansicht (Familie, Bewerbung)
   --------------------------------------------------------------------- */
.detail { display: grid; gap: 20px; }
.g-desktop .detail { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: start; }
.kontakt { display: flex; flex-wrap: wrap; gap: 8px; }
.kontakt a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ziel); padding: 8px 14px; border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--karte); font-weight: 600; text-decoration: none; }
.kontakt a:hover { border-color: var(--blau-800); background: var(--blau-100); }
.kontakt svg { width: 20px; height: 20px; }
.eckdaten { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-leise); margin: 6px 0 12px; }
.eckdaten strong { color: var(--text); }

.kette { list-style: none; margin: 8px 0 0; padding: 0; display: flex; gap: 0; }
.kette li { flex: 1; position: relative; text-align: center; font-size: var(--schrift-klein); color: var(--text-leise); padding-top: 26px; }
.kette li::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linie-stark); background: var(--karte); z-index: 1; }
.kette li::after { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: var(--linie-stark); }
.kette li:first-child::after { display: none; }
.kette li[data-erledigt]::before { background: var(--blau-800); border-color: var(--blau-800); }
.kette li[data-erledigt]::after, .kette li[data-jetzt]::after { background: var(--blau-800); }
.kette li[data-jetzt] { color: var(--blau-900); font-weight: 700; }
.kette li[data-jetzt]::before { border-color: var(--blau-900); box-shadow: 0 0 0 4px var(--blau-100); background: var(--blau-900); }
.kette button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; min-height: 40px; padding: 4px 2px; }
.kette button:hover { color: var(--blau-900); text-decoration: underline; }
.g-mobil .kette { display: none; }
.kette-kurz { display: none; }
.g-mobil .kette-kurz { display: block; }

.notiz textarea { min-height: 96px; }
.notiz-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.notiz-liste li { border-left: 4px solid var(--orange-500); background: #FFFBF2; padding: 10px 12px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-top: 8px; }
.notiz-liste .leise { display: block; }
.team-marke { display: inline-block; font-size: var(--schrift-klein); font-weight: 700; color: var(--orange-700); background: var(--orange-100); padding: 0 8px; border-radius: var(--r-pill); }

.angaben { display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 8px 12px; margin: 0; }
.angaben dt { color: var(--text-leise); font-size: var(--schrift-klein); padding-top: 2px; }
.angaben dd { margin: 0; }
.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li { padding: 8px 0; border-top: 1px solid var(--linie); }
.verlauf li:first-child { border-top: 0; }
.verlauf time { display: block; font-size: var(--schrift-klein); color: var(--text-leise); }

.hinweisbox { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); background: var(--blau-100); color: var(--blau-900); }
.hinweisbox svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.hinweisbox--warnung { background: var(--orange-100); color: #5E2C05; }
.hinweisbox p { margin: 0; }

/* ---------------------------------------------------------------------
   8  KI-Note („Vorsortierung") — dreifach kodiert, immer mit Mensch-Satz
   --------------------------------------------------------------------- */
.note {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 10px;
  border: 2px solid currentColor; border-radius: var(--r-pill); background: var(--karte); white-space: nowrap;
}
.note__zahl { font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.note__wort { font-size: var(--schrift-klein); font-weight: 600; }
.note[data-stufe="hoch"]   { color: var(--gruen-700); }
.note[data-stufe="gut"]    { color: var(--petrol-700); }
.note[data-stufe="teils"]  { color: var(--orange-700); }
.note[data-stufe="gering"] { color: var(--pink-700); }
.note[data-stufe="ohne"]   { color: var(--text-leise); border-style: dashed; }
.note--gross { padding: 6px 16px; gap: 10px; }
.note--gross .note__zahl { font-family: "Varela Round", system-ui, sans-serif; font-weight: 400; font-size: 2.25rem; line-height: 1.1; }
.note--gross .note__wort { font-size: var(--schrift-basis); }
.mensch-satz {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--blau-100); color: var(--blau-900); font-weight: 600;
}
.mensch-satz svg { width: 22px; height: 22px; flex: none; }
.begruendung { list-style: none; padding: 0; margin: 10px 0 0; }
.begruendung li { display: grid; grid-template-columns: 28px 1fr; gap: 6px; padding: 8px 0; border-top: 1px solid var(--linie); }
.begruendung li:first-child { border-top: 0; }
.begruendung .plus, .begruendung .minus { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 14px; }
.begruendung .plus { background: var(--gruen-100); color: var(--gruen-700); }
.begruendung .minus { background: var(--orange-100); color: var(--orange-700); }
.note-hinweis { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid #B9DDEE; background: var(--blau-100); color: var(--blau-900); display: flex; gap: 10px; align-items: flex-start; }
.note-hinweis svg { width: 22px; height: 22px; flex: none; }
.note-hinweis p { margin: 0; }

/* ---------------------------------------------------------------------
   9  Formulare
   --------------------------------------------------------------------- */
.formular { display: grid; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld > label, .feld > .feld__label, fieldset.feld > legend { font-weight: 600; }
.feld__hilfe { color: var(--text-leise); font-size: var(--schrift-klein); }
.pflicht { color: var(--pink-500); margin-left: 2px; }
.optional { color: var(--text-leise); font-weight: 400; font-size: var(--schrift-klein); }
.eingabe {
  width: 100%; min-height: var(--ziel-gross); padding: 12px 14px;
  border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--karte);
  font: 400 var(--schrift-basis)/1.4 "Open Sans", system-ui, sans-serif; color: var(--text);
}
textarea.eingabe { min-height: 120px; resize: vertical; }
.eingabe:hover { border-color: #9AA7AF; }
.feld--fehler .eingabe { border-color: var(--fehler); border-width: 2px; }
.feld__fehler { color: var(--fehler); font-weight: 600; font-size: var(--schrift-klein); }
.felder-2 { display: grid; gap: 16px; }
.g-desktop .felder-2 { grid-template-columns: 1fr 1fr; }
.g-desktop .felder-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.g-mobil .felder-3 { display: grid; gap: 16px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pflicht-hinweis { font-size: var(--schrift-klein); color: var(--text-leise); }
.wahl { display: flex; align-items: center; gap: 10px; min-height: var(--ziel); cursor: pointer; }
.wahl input { width: 22px; height: 22px; accent-color: var(--blau-800); }
.formfuss { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 8px; }
.formfuss .abstand { margin-left: auto; }
.g-mobil .formfuss { flex-direction: column; align-items: stretch; }
.g-mobil .formfuss .abstand { margin-left: 0; }
.regler { display: grid; grid-template-columns: 1fr 140px 48px; gap: 10px; align-items: center; }
.regler input[type="range"] { width: 100%; accent-color: var(--blau-800); }
.g-mobil .regler { grid-template-columns: 1fr 1fr 40px; }

.zaehler { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--linie-stark); border-radius: 12px; overflow: hidden; background: var(--karte); }
.zaehler button { width: 56px; height: 56px; border: 0; background: var(--flaeche); font-size: 1.5rem; cursor: pointer; color: var(--blau-900); }
.zaehler button:hover { background: var(--blau-100); }
.zaehler output { min-width: 72px; text-align: center; font-family: "Varela Round", system-ui, sans-serif; font-size: 1.75rem; }

/* ---------------------------------------------------------------------
   10  Rückfrage-Dialog und „Rückgängig"-Hinweis
   --------------------------------------------------------------------- */
dialog.dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  border: 0; border-radius: var(--r-lg); padding: 0; color: var(--text);
  box-shadow: var(--schatten-schwebend);
}
dialog.dialog--breit { width: min(720px, calc(100vw - 32px)); }
dialog.dialog::backdrop { background: rgba(33, 41, 46, .5); }
.dialog__kopf { padding: 22px 24px 8px; }
.dialog__kopf p { margin: 6px 0 0; color: var(--text-leise); }
.dialog__inhalt { padding: 8px 24px 8px; }
.dialog__fuss { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; padding: 16px 24px 22px; }
.g-mobil dialog.dialog { width: 100vw; max-width: 390px; margin: auto auto 0; border-radius: 18px 18px 0 0; max-height: 92vh; }
.g-mobil .dialog__fuss { flex-direction: column-reverse; }
.g-mobil .dialog__fuss .knopf { width: 100%; }
.empfaenger { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-sm); background: var(--flaeche); margin-bottom: 12px; }
.empfaenger strong { display: block; }
.wer-sieht { font-size: var(--schrift-klein); color: var(--text-leise); margin-top: 8px; }

.hinweise {
  position: fixed; z-index: 70; display: grid; gap: 10px;
  right: 24px; bottom: 24px; width: min(440px, calc(100vw - 32px));
}
.g-mobil .hinweise { right: auto; left: 50%; transform: translateX(-50%); bottom: 150px; width: min(358px, calc(100vw - 32px)); }
.hinweis {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start;
  background: var(--karte); border: 1px solid var(--linie); border-left: 6px solid var(--gruen-700);
  border-radius: var(--r-md); padding: 12px 10px 12px 14px; box-shadow: var(--schatten-schwebend);
}
.hinweis svg { width: 22px; height: 22px; color: var(--gruen-700); margin-top: 1px; }
.hinweis p { margin: 0; }
.hinweis__knoepfe { display: flex; gap: 6px; align-items: center; grid-column: 2 / 3; margin-top: 6px; }
.hinweis__zu { background: none; border: 0; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; font-size: 22px; color: var(--text-leise); }
.hinweis__zu:hover { background: var(--flaeche); }
.hinweis[data-art="zurueck"] { border-left-color: var(--blau-800); }
.hinweis[data-art="zurueck"] svg { color: var(--blau-800); }

.hinweis[data-art="fehler"] { border-left-color: var(--fehler); }
.hinweis[data-art="fehler"] svg { color: var(--fehler); }

/* „Heute" am Schreibtisch: Aufgaben links, Plätze/Zahlen rechts — alles im ersten Bild */
.heute-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 28px; align-items: start; }
.heute-raster .abschnitt:first-child { margin-top: 0; }

/* Index-Seite */
.index-liste { display: grid; gap: 16px; }
.index-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-md); padding: 20px 22px; }
.index-karte h2 { margin-bottom: 6px; }
.index-karte ul { margin: 8px 0 0; padding-left: 20px; }
.index-karte li { margin: 4px 0; }
.p-marke { display: inline-block; min-width: 30px; text-align: center; font-weight: 700; font-size: var(--schrift-klein); padding: 0 6px; border-radius: var(--r-pill); background: var(--blau-100); color: var(--blau-900); margin-right: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}