/* ══════════════════════════════════════════════════════════════
   Design-Tokens (Farbe/Spacing/Radius/Type/Control-Größe) leben in
   tokens.css — siehe layout/admin.html :: head für die Einbindung.
   ══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ── Admin-Layout ────────────────────────────────────────────── */
.admin {
  max-width: 980px; margin: 20px auto;
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 6px 28px rgba(0,0,0,.12);
}
.admin-bar {
  background: var(--primary); color: var(--text-inverse);
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-bar h1  { font-size: 19px; font-weight: var(--fw-bold); }
.admin-bar sub { display: block; font-size: var(--fs-xs); opacity: .65; margin-bottom: 2px; }
.admin-tabs {
  background: var(--bg); border-bottom: var(--border-width-thin) solid var(--border);
  padding: 0 24px; display: flex;
}
.admin-tabs a {
  display: block; padding: 11px 16px; font-size: var(--fs-md); color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer;
}
.admin-tabs a:hover { color: var(--text); }
.admin-tabs a.on {
  color: var(--primary); border-bottom-color: var(--primary); font-weight: var(--fw-semibold);
}
html.dark .admin-tabs a.on { color: var(--info-text); border-bottom-color: var(--focus-blue); }
.admin-body { padding: var(--space-5); }

/* ── Topbar (Feld-Seiten ohne .admin-Rahmen: Karte, Fläche-Detail,
   Historie-Mitarbeiteransicht) — war vorher dreimal unabhängig als
   lokaler <style>-Block je Template definiert, leicht auseinander-
   gedriftet (unterschiedliche Link-Deckkraft, teils ohne flex-shrink).
   Kanonisch jetzt hier, .topbar h1/nav nur wo tatsächlich gebraucht. */
.topbar {
  background: var(--primary); color: var(--text-inverse); padding: 0 16px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; position: relative;
  /* Verhindert Browser-Pinch-Zoom der ganzen Seite, wenn bei einer Zwei-Finger-Zoomgeste auf der
     Karte ein Finger versehentlich Topbar/Bottom-Tabs/Pflegeart-Leiste erwischt (Cornelius-Fund
     2026-07-17, mobil am oberen/unteren Kartenrand) - Leaflet handhabt sein eigenes Pinch-Zoom
     unabhängig per JS auf #map und braucht dieses touch-action nicht (siehe .leaflet-container in
     leaflet.css). Kein Effekt auf normale Taps/Klicks, nur auf native Zoom-/Pan-Gesten. */
  touch-action: none;
}
.topbar h1 { font-size: 18px; font-weight: var(--fw-bold); }
.topbar nav { display: flex; align-items: center; gap: var(--space-4); }
.topbar a { color: rgba(255,255,255,.8); text-decoration: none; font-size: var(--fs-13); }
.topbar a:hover { color: var(--text-inverse); }
.topbar a.on { color: var(--text-inverse); font-weight: var(--fw-semibold); }

/* ── Kebab-Menü (Topbar-Overflow) — Rest-Aktionen (Historie/Verwaltung/Theme/Abmelden),
   siehe .bottom-tabs für die drei Feldarbeiter-Aktionen, die stattdessen dorthin gewandert
   sind (wireframes/karte-topbar-mobil-varianten.html Variante C, Cornelius-Entscheidung
   2026-07-17). top:100% statt hartkodierter Höhe folgt automatisch der echten Topbar-Höhe. ── */
.topbar-kebab {
  background: none; border: none; color: rgba(255,255,255,.8); font-size: 20px;
  cursor: pointer; padding: 0 var(--space-1); line-height: 1;
}
.topbar-kebab:hover { color: var(--text-inverse); }
.overflow-menu {
  /* z-index deutlich über Leaflets eigenen Panes/Controls (bis 1000, siehe auch
     .karte-debug-badge) - .topbar/#map bilden ohne eigenes z-index keinen neuen
     Stacking-Context, ein niedriger Wert hier verschwindet sonst hinter der aktiven Karte
     (Cornelius-Fund 2026-07-17: Menü "verschwindet hinter der Karte"). */
  position: absolute; top: 100%; right: var(--space-3); z-index: 1001;
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0,0,0,.18);
  min-width: 170px; padding: var(--space-1) 0; display: none;
  touch-action: none; /* siehe .topbar-Kommentar - kurzes, nicht scrollendes Menü */
}
.overflow-menu.on { display: block; }
.overflow-menu a {
  display: block; padding: var(--space-2) var(--space-3); font-size: var(--fs-13);
  color: var(--text); text-decoration: none;
}
.overflow-menu a:hover { background: var(--bg); }

/* ── Bottom-Tab-Bar — daumenerreichbare Leiste für die drei Feldarbeiter-Aktionen
   (Melden/Auswahl/Routen), fixes letztes Kind der Flex-Shell in karte.html, damit die drei
   Slide-up-Panels (.batch-panel-container) immer darüber wachsen statt sie zu verdecken. ── */
.bottom-tabs {
  display: flex; flex-shrink: 0;
  background: var(--surface); border-top: var(--border-width) solid var(--border);
  touch-action: none; /* siehe .topbar-Kommentar - derselbe Rand-Pinch-Zoom-Fund am unteren Kartenrand */
}
.bottom-tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-2) 0; text-decoration: none; color: var(--muted); font-size: var(--fs-xs);
}
.bottom-tabs a .ico { font-size: 20px; }
.bottom-tabs a.on { color: var(--primary); font-weight: var(--fw-semibold); }

/* ── Feldarbeiter-Dashboard ("was steht als nächstes dringend an") — Titel "Mähbert" in der
   Topbar ist der Umschalter Karte ⇄ Dashboard (kein Bottom-Tab, siehe karte.html
   feldDashboardUmschalten), wireframes/feldarbeiter-dashboard-mobil.html Variante 2,
   Cornelius-Entscheidung 2026-07-17. .brand-toggle ersetzt das vorherige bare .topbar h1 - button
   statt h1, deshalb eigener Reset auf dieselbe Optik. ── */
.brand-toggle {
  background: none; border: none; padding: 0; color: inherit; font: inherit;
  font-size: 18px; font-weight: var(--fw-bold); cursor: pointer;
  display: flex; align-items: center; gap: 4px;
}
.brand-toggle .chev { font-size: 12px; opacity: .75; transition: transform .15s; }
body.feld-dashboard-aktiv .brand-toggle .chev { transform: rotate(180deg); }

/* Ersetzt Karte/Pflegeart-Leiste/Panels/Bottom-Tabs komplett (kein eigener Screen/eigene URL -
   ein Zeilen-Tap springt direkt auf dieselbe Leaflet-Instanz zurück, siehe
   feldDashboardZuObjektSpringen). */
body.feld-dashboard-aktiv #map,
body.feld-dashboard-aktiv .pflegeart-leiste,
body.feld-dashboard-aktiv .batch-panel-container,
body.feld-dashboard-aktiv .bottom-tabs { display: none; }
.feld-dashboard-container { display: none; flex-direction: column; }
body.feld-dashboard-aktiv .feld-dashboard-container { display: flex; flex: 1; min-height: 0; }
/* Kein padding-top hier (anders als links/rechts/unten) - ein position:sticky-Kind (siehe
   #feld-dashboard-aufgaben-block) kombiniert mit padding-top auf demselben Scroll-Container
   rendert browserabhängig inkonsistent: das Sticky-Element blieb zwar layoutmäßig korrekt exakt
   padding-top Pixel unterhalb der Sichtbarkeitsgrenze (per getBoundingClientRect() geprüft),
   zeigte auf dem Dev-Server aber sichtbar durchscheinende Pflegeobjekt-Zeilen genau in diesem
   Bereich (Cornelius-Fund 2026-07-18, Screenshot). Der obere Abstand kommt jetzt stattdessen aus
   dem jeweils ersten Kind selbst (padding-top auf #feld-dashboard-aufgaben-block bzw.
   #feld-dashboard-pflegeobjekte, siehe dort) - vom eigenen Hintergrund abgedeckt statt vom
   Container-Padding, das laut Spec zwar nie Kind-Inhalt zeigen sollte, hier aber offenbar doch
   inkonsistent mit dem Sticky-Offset zusammenspielte. */
#feld-dashboard-liste {
  flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--space-3) var(--space-4);
  touch-action: pan-y; /* scrollt selbst vertikal, siehe .batch-panel-container-Kommentar */
}

.sort-toggle {
  display: flex; flex-shrink: 0; border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  overflow: hidden; margin: var(--space-3) var(--space-3) 0;
  touch-action: none; /* siehe .topbar-Kommentar - fixe Leiste, kein Scroll-Inhalt */
}
.sort-toggle button {
  flex: 1; border: none; background: var(--surface); color: var(--text);
  padding: 7px 8px; font-size: var(--fs-13); font-weight: var(--fw-semibold); cursor: pointer;
}
.sort-toggle button.on { background: var(--primary); color: var(--text-inverse); }
.sort-toggle button:disabled { color: var(--muted); cursor: not-allowed; }

/* Aufklappbar (Cornelius-Feedback 2026-07-18, Nachtrag) - dieselbe kräftigere
   .dash-section-head/.dash-count-badge-Optik wie der Aufgaben-Abschnittskopf darunter statt der
   vorherigen leisen Uppercase-Beschriftung: ein anklickbares Element mit eigenständiger Funktion
   (jetzt: Aufklappen) braucht dieselbe Antippbarkeits-Optik, dieselbe Begründung wie beim
   Aufgaben-Kopf (siehe dortiger Kommentar). Eingeklappt per Default, Zustand + gewählter
   Sortier-Modus werden in localStorage gemerkt (feldDashboardZustandSpeichern/-Lesen in
   karte.html) - anders als der Aufgaben-Kopf (immer eingeklappt, keine eigene Konfiguration
   nötig) MUSS der Zustand hier über den htmx-Reload beim nächsten Öffnen hinweg erhalten bleiben,
   sonst müsste man bei jedem Öffnen alle drei Stufen erneut aufklappen. */
.dash-group-head {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
  padding: var(--space-2) 0; margin-top: var(--space-2);
  border-bottom: var(--border-width-thin) solid var(--border);
}
.dash-group-head:first-child { margin-top: 0; }
.dash-group-chevron { display: inline-block; margin-left: auto; transition: transform .15s; }
.dash-group-head.on .dash-group-chevron { transform: rotate(180deg); }
#feld-dashboard-pflegeobjekte.sort-naehe .dash-group-head { display: none; }
/* Zeilen je Stufe standardmäßig verborgen, erst nach Aufklappen (.on) sichtbar - Attribut- statt
   Wrapper-Div-Ansatz (kein zusätzliches Verschachtelungslevel), damit
   feldDashboardOriginalReihenfolge/die Nähe-Umsortierung (karte.html) weiter von einer flachen
   Kindliste ausgehen können. In der Nähe-Sortierung sind Stufen ohnehin irrelevant (Farbgruppen
   verschwinden, siehe .dash-group-head oben) - dort deshalb immer sichtbar unabhängig vom
   Aufklapp-Zustand. */
#feld-dashboard-pflegeobjekte .feld-dash-row[data-farbe-zeile] { display: none; }
#feld-dashboard-pflegeobjekte .feld-dash-row[data-farbe-zeile].on,
#feld-dashboard-pflegeobjekte.sort-naehe .feld-dash-row[data-farbe-zeile] { display: flex; }
.dash-empty-hint { text-align: center; font-size: var(--fs-sm); color: var(--muted); padding: var(--space-4) 0; }

/* Aufgaben-Abschnitt (Einmalaufgaben, Cornelius-Feedback 2026-07-17/18) - eigener, per Default
   eingeklappter Bereich UNTER dem Sortier-Umschalter, bewusst kein dritter Reiter darin (andere
   Datenquelle als die Pflegeobjekt-Liste). Stattdessen wirkt derselbe Dringlichkeit/Nähe-
   Umschalter auf BEIDE Sektionen (Cornelius-Idee 2026-07-18: löst die sonst irreführende
   Nachbarschaft zwischen Umschalter und Aufgaben-Zeile elegant auf, statt sie extra wegzuräumen -
   Dringlichkeit sortiert Aufgaben nach Datum, Nähe nach Entfernung, siehe
   feldDashboardAufgabenSortierung in karte.html), in derselben, kräftigeren Optik wie die
   Admin-Dashboard-Sektionsköpfe (.dash-section-head/.dash-count-badge) gehalten (jetzt auch vom
   .dash-group-head oben übernommen, siehe dortiger Kommentar).

   Sticky sitzt auf #feld-dashboard-aufgaben-block (Kopf + Zeilen ZUSAMMEN), nicht nur auf dem
   Toggle-Kopf allein (Cornelius-Fund 2026-07-18): war nur der Kopf sticky, liefen die
   aufgeklappten Zeilen beim Scrollen normal weiter und verschwanden sichtbar HINTER dem
   feststehenden Kopf, statt mit ihm "zusammenzugehören" (wie ein Dropdown, dessen Optionsliste
   sich beim Scrollen vom Button wegschiebt) - zusätzlich blieb zwischen dem gedachten
   Kopf-Ende und dem #feld-dashboard-liste-Padding eine schmale, nicht vom Sticky-Hintergrund
   abgedeckte Lücke, durch die beim Scrollen kurz Listenzeilen durchschimmerten. Ein gemeinsamer
   Sticky-Wrapper löst beides: Kopf und (falls aufgeklappt) Zeilen bewegen sich als ein
   lückenloses, blickdicht hinterlegtes Stück. Max-height/eigener Scroll nur im aufgeklappten
   Zustand (:has(), analog body:has(.batch-panel-container.offen)) - bewusst großzügig (90dvh,
   nicht z.B. 50% wie bei den Slide-up-Panels): ist die Aufgaben-Liste aufgeklappt, gilt die
   volle Aufmerksamkeit den Aufgaben, nicht der Pflege-Liste dahinter (Cornelius-Einschätzung
   2026-07-18) - erst beim Wiedereinklappen rückt die Pflege-Liste zurück in den Fokus. */
/* padding-top statt des entfernten Container-paddings auf #feld-dashboard-liste (siehe dortiger
   Kommentar) - hier vom eigenen background:var(--surface) abgedeckt, kein Durchscheinen möglich. */
#feld-dashboard-aufgaben-block {
  position: sticky; top: 0; z-index: 1; background: var(--surface); padding-top: var(--space-3);
}
#feld-dashboard-aufgaben-block:has(#feld-dashboard-aufgaben-liste.on) { max-height: 90dvh; overflow-y: auto; }
#feld-dashboard-aufgaben-toggle {
  cursor: pointer; padding: var(--space-2) 0; border-bottom: var(--border-width-thin) solid var(--border);
}
#feld-dashboard-aufgaben-liste { display: none; }
#feld-dashboard-aufgaben-liste.on { display: block; }
#feld-dashboard-aufgaben-chevron { display: inline-block; margin-left: auto; transition: transform .15s; }
#feld-dashboard-aufgaben-toggle.on #feld-dashboard-aufgaben-chevron { transform: rotate(180deg); }
/* padding-top: Ersatz für das entfernte Container-padding, falls kein Aufgaben-Block vorhanden
   ist (dann ist dies das erste Kind). Ist ein Aufgaben-Block vorhanden (.nach-aufgaben-block),
   übernimmt DESSEN eigenes padding-top den oberen Einzug, hier stattdessen nur noch der
   Zwischenraum zwischen beiden Abschnitten per margin-top - lebt bewusst außerhalb des
   Sticky-Blocks (auf dem folgenden Geschwister), nicht als margin-bottom AUF dem Sticky-Block
   selbst: Margins zählen nicht zum vom Hintergrund abgedeckten Bereich, hätten also dieselbe
   Durchscheinen-Lücke wieder eingeführt. */
#feld-dashboard-pflegeobjekte { padding-top: var(--space-3); }
#feld-dashboard-pflegeobjekte.nach-aufgaben-block { padding-top: 0; margin-top: var(--space-2); }
/* Dasselbe Primär-/Sekundär-Umschaltprinzip wie bei Pflegeobjekten oben (Cornelius-Feedback
   2026-07-18: an die Pflege-Darstellung angleichen - groß die Distanz, klein die Zeit darunter,
   statt zweier gleichrangiger, je nach Modus komplett unterschiedlicher Werte). row-meta-offen
   = Dringlichkeit-Primärwert ("4 Std. offen"), row-meta-distanz = Nähe-Primärwert ("123 m",
   serverseitig vorbelegt - JS befüllt sie erst nach Positionsermittlung, siehe
   feldDashboardAufgabenSortierung), row-meta-distanz-sub = Nähe-Sekundärwert (dieselbe
   "offen"-Zeit, jetzt klein darunter). */
#feld-dashboard-aufgaben-liste .row-meta { display: block; text-align: right; flex-shrink: 0; }
#feld-dashboard-aufgaben-liste.sort-naehe .row-meta-offen { display: none; }
#feld-dashboard-aufgaben-liste.sort-naehe .row-meta-distanz,
#feld-dashboard-aufgaben-liste.sort-naehe .row-meta-distanz-sub { display: block; }

/* Ganze Zeile tappbar - Sprung zur Karte (feldDashboardZuObjektSpringen), bewusst KEIN
   eigener Inline-Melden-Button hier (siehe wireframes/feldarbeiter-dashboard-mobil.html): die
   Karte ist jetzt selbst das Sprungziel inkl. Detail-Popup, dort liegt der reale .btn-melden. */
.feld-dash-row {
  display: flex; align-items: center; gap: var(--space-2); padding: 10px 4px;
  border-bottom: var(--border-width-thin) solid var(--border); text-decoration: none; color: inherit;
}
.feld-dash-row:last-child { border-bottom: none; }
.feld-dash-row .status-punkt { flex-shrink: 0; margin-right: 0; }
.feld-dash-row .row-main { flex: 1; min-width: 0; }
/* Badge als eigenes Flex-Geschwister vor .row-title statt im selben Textfluss - sonst würde
   ein langer Objektname den ★-Badge mit in die Ellipse ziehen statt sich selbst zu kürzen. */
.feld-dash-row .row-title-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.feld-dash-row .row-title-row .badge-prio { flex-shrink: 0; margin-right: 0; }
.feld-dash-row .row-title {
  font-size: var(--fs-13); font-weight: var(--fw-semibold); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* flex-wrap:wrap + white-space:nowrap je Segment - ohne das brach eine lange Pflegeart (z.B.
   "Laubentfernung") + Ortsteil + Flächenmaß auf schmalen Screens mitten im Text um statt als
   ganze Segmente sauber in eine zweite Zeile zu rutschen (Cornelius-Fund 2026-07-17). */
.feld-dash-row .row-sub {
  font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px;
  margin-top: 2px; flex-wrap: wrap; row-gap: 2px;
}
.feld-dash-row .row-sub > * { white-space: nowrap; }
.feld-dash-row .row-meta { text-align: right; flex-shrink: 0; }
.feld-dash-row .row-meta-primary { font-size: var(--fs-13); font-weight: var(--fw-bold); display: block; white-space: nowrap; }
.feld-dash-row .row-meta-primary.status-rot { color: var(--red); }
.feld-dash-row .row-meta-primary.status-orange { color: var(--orange); }
.feld-dash-row .row-meta-primary.status-gelb { color: var(--yellow); }
.feld-dash-row .row-meta-secondary { font-size: 10px; color: var(--muted); display: block; margin-top: 1px; white-space: nowrap; }
.feld-dash-row .row-chevron { color: var(--muted); font-size: 16px; flex-shrink: 0; }

/* Verzug vs. Distanz je Zeile - Position ist nur client-seitig bekannt, deshalb rein
   CSS-gesteuerte Sichtbarkeit statt eines zweiten Server-Renderings (siehe
   felddashboard/_liste.html, karte.html feldDashboardSortierung). */
.feld-dash-row .row-meta-distanz, .feld-dash-row .row-meta-distanz-sub { display: none; }
#feld-dashboard-pflegeobjekte.sort-naehe .feld-dash-row .row-meta-verzug { display: none; }
#feld-dashboard-pflegeobjekte.sort-naehe .feld-dash-row .row-meta-distanz,
#feld-dashboard-pflegeobjekte.sort-naehe .feld-dash-row .row-meta-distanz-sub { display: block; }

/* ── Login ───────────────────────────────────────────────────── */
body.login-page {
  background: var(--primary);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.login-card {
  background: var(--surface); border-radius: 16px; padding: 40px 36px;
  width: 380px; box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo h1 { font-size: 26px; font-weight: var(--fw-black); color: var(--primary); }
.login-logo p  { font-size: var(--fs-13); color: var(--muted); margin-top: 3px; }

/* ── Form groups ─────────────────────────────────────────────── */
.fg { margin-bottom: 14px; }
/* .field-label ist dieselbe Recipe standalone (z.B. über einem Control
   außerhalb von .fg, das eigene Layout-Bedürfnisse hat, siehe teilpflege.html)
   - war dort als Klasse bereits verwendet, aber nie definiert (toter Stil). */
.fg label, .field-label {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: var(--space-1);
}
/* line-height:1 (statt "normal") - bei "normal" bestimmt der höchste tatsächlich gerenderte
   Glyph in der Zeile die Zeilenbox-Höhe; auf Windows ersetzt der Browser einzelne vom
   UI-Font nicht abgedeckte Zeichen (z.B. "…" je nach Font) durch eine andere, höhere Schrift
   und bläht dadurch nur DIESES Control auf - inkonsistent zu Nachbar-Controls mit reinem
   ASCII-Text. Betraf konkret die Dashboard-Formularzeilen (Cornelius-Report 2026-07-15,
   siehe .btn für den analogen Button-Fall). Gleiches Muster wie .btn-icon/.chip-del hier
   im File, keine neue Zahl. */
.fg input, .fg select, .fg textarea {
  width: 100%; padding: var(--control-pad-y) var(--control-pad-x);
  border: var(--border-width) solid var(--border); border-radius: var(--control-radius);
  font-size: var(--control-fs); color: var(--text); background: var(--surface);
  font-family: inherit; line-height: 1;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { outline: none; border-color: var(--primary); }
.fg textarea { resize: vertical; }
/* Versuch, input/select per expliziter height exakt auf Button-Höhe zu zwingen (Windows-
   Chrome respektiert line-height bei nativen Form-Controls teils nicht) wieder verworfen -
   traf die Zielhöhe nicht exakt und schnitt bei Comboboxen den Text unten ab
   (Cornelius-Report 2026-07-15). Rest-Diskrepanz Button vs. input/select bleibt bewusst
   bestehen, volle Angleichung ist Aufgabe einer eigenen Design-Harmonisierungs-Session. */
/* Dichte Variante für Inline-Tabellenzeilen/Fat-Rows (Pflegeintervalle-Zeile,
   Objektarten-/Prioritäten-Namensfeld, Wartungsmodus-Select u.ä.) - eigene,
   bewusst dritte Stufe neben Feld/Admin (siehe tokens.css Control-Größe),
   ersetzt ca. zehn vorher fast identische Einzelregeln mit leicht
   schwankendem Padding. */
.fg-dense input, .fg-dense select, .fg-dense textarea { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.field-error { color: var(--red); font-size: var(--fs-sm); margin-top: 5px; }
.sub { color: var(--muted); font-size: var(--fs-sm); }

.zeitraum-felder { display: flex; align-items: center; gap: var(--space-2); }
.zeitraum-felder input { width: auto; flex: 1; }
.zeitraum-felder span { color: var(--muted); }

/* ── Geometrie-Zeichenkarte (Pflegeobjekte-Formular) ──────────────── */
.draw-map { height: 320px; border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-1); user-select: none; }

/* ── Buttons — .btn ist Basis für alle Varianten, Modifier setzen nur
   noch Farbe (Größe/Radius kommen einheitlich aus den Control-Tokens,
   Feld vs. Admin siehe tokens.css) ──────────────────────────────── */
/* font-family:inherit fehlte hier - anders als .fg input/select (siehe dort) nutzte ein
   ungestylter <button> die native UI-Font des Browsers (Windows: "Arial") statt der
   Seiten-Schrift, dazu line-height:1 aus demselben Grund wie dort: Emoji/Symbole, die die
   UI-Font selbst nicht abdeckt (👁📍✏️📋🗑, teils auch ✓), werden pro Zeichen durch eine
   andere, höhere Schrift ersetzt und blähten sonst nur DIESEN Button auf (Cornelius-Report
   2026-07-15, reproduzierbar nur auf echtem Windows-Chrome, nicht im Linux-Sandbox-Check -
   keine Emoji-Font installiert). */
.btn {
  padding: var(--control-pad-y) var(--control-pad-x); border-radius: var(--control-radius);
  font-size: var(--control-fs); font-weight: var(--fw-semibold); font-family: inherit; line-height: 1;
  cursor: pointer; border: var(--border-width) solid transparent;
  display: inline-block; text-decoration: none; text-align: center;
}
.btn-primary { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.btn-blue    { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.btn-green   { background: var(--green); color: var(--text-inverse); border-color: var(--green); }
.btn-line    { background: transparent; color: var(--text); border-color: var(--border); }
.btn-line:hover { border-color: var(--muted); }
.btn-red     { background: var(--red); color: var(--text-inverse); }
.btn-red:hover { background: #b91c1c; }
.btn-ghost-white { background: transparent; color: var(--text-inverse); border-color: rgba(255,255,255,.35); text-decoration: none; }
.btn-ghost-white:hover { background: rgba(255,255,255,.1); }
/* Größen-Modifier, farbunabhängig - volle Breite + größere CTA-Schrift
   (Login-Button, Import-Wizard-Abschluss-Commit). */
.btn-block { display: block; width: 100%; padding: 14px; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
/* Größen-Modifier für kompakte Reihen (z.B. Buttons in einer schmalen
   Karten-Zeile) - ersetzt die vorher pro Stelle wiederholte Inline-
   Verkleinerung (Wurzel des zu kleinen "+ Anlegen"-Buttons im Dashboard:
   dieselbe Inline-Bastellösung war dort versehentlich auch auf einen
   Button neben einem normal großen Input/Select gesetzt worden). */
.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); white-space: nowrap; }
/* Noch kompakter - Icon-/Lösch-Buttons in Tabellenzeilen (vorher an ~15
   Stellen einzeln als Inline-Style mit leicht schwankenden Werten
   (3-6px Padding, mal mit/ohne eigene Schriftgröße) nachgebaut). */
.btn-xs { padding: var(--space-1) var(--space-2); font-size: var(--fs-xs); }
/* Icon-only Mini-Button (z.B. 👁/✕ in Listen) - bewusst NICHT aus den
   Control-Tokens, ein Icon braucht andere Proportionen als ein Text-Button. */
.btn-icon {
  border: none; background: none; cursor: pointer; font-size: 15px; padding: 2px 6px;
  border-radius: var(--radius-sm); line-height: 1;
}
.btn-icon:hover { background: var(--bg); }

/* ── Alert / Error ───────────────────────────────────────────── */
.alert-error {
  background: var(--danger-bg); color: var(--red); border: var(--border-width-thin) solid var(--danger-border);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); font-size: var(--fs-md);
}
/* ── Fehlerseite (error.html) — eigene Seite außerhalb von .admin-Body-
   Kontexten mit fixer Breite, kein anderer Screen braucht dieses Maß. ── */
.error-page { max-width: 640px; }
.error-stacktrace {
  white-space: pre-wrap; font-size: var(--fs-sm); background: var(--bg);
  padding: var(--space-3); border-radius: var(--radius-md); max-height: 420px; overflow: auto;
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.toolbar h2 { font-size: var(--fs-lg); font-weight: var(--fw-bold); }

/* ── Table ───────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th {
  text-align: left; padding: var(--space-2) var(--space-3);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px;
  border-bottom: 2px solid var(--border);
}
td { padding: var(--space-3); border-bottom: var(--border-width-thin) solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg); }
td code {
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: var(--fs-13); color: var(--primary);
  background: var(--bg); padding: 2px 6px; border-radius: 4px;
}

/* ── Badges — eine Form, Farbe/Rand pro Bedeutung (auch die
   Import-Wizard-Badges .imp-badge-ok/-missing sind hier, waren vorher
   ein wortgleiches Duplikat von .badge-aktiv/-inaktiv) ───────────── */
.role-a, .role-u, .badge-aktiv, .badge-inaktiv, .badge-geometrietyp,
.imp-badge-ok, .imp-badge-missing {
  display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 3px 8px; border-radius: var(--radius-pill);
}
/* .role-a hat bewusst einen kräftigeren Blauton als --info-bg/-border (dort
   für dezente Hervorhebung gedacht, hier für eine gut sichtbare Rollen-
   Kennzeichnung) - nur die Textfarbe deckt sich mit --info-text. */
.role-a { background: #dbeafe; color: var(--info-text); }
.role-u, .badge-geometrietyp { background: var(--bg); color: var(--muted); border: var(--border-width-thin) solid var(--border); }
.badge-aktiv, .imp-badge-ok { background: var(--success-bg); color: var(--green); }
.badge-inaktiv, .imp-badge-missing { background: var(--danger-bg); color: var(--red); }
html.dark .role-a { background: #172554; color: var(--info-text); }
html.dark .role-u, html.dark .badge-geometrietyp { background: var(--surface); border-color: var(--border); }
/* .badge-aktiv/-inaktiv (+ .imp-badge-ok/-missing) hatten wie .role-a einen
   fest hellen Pastell-Hintergrund ohne Dark-Gegenstück - leuchtete zu hell. */
html.dark .badge-aktiv, html.dark .imp-badge-ok { background: var(--success-bg); }
html.dark .badge-inaktiv, html.dark .imp-badge-missing { background: var(--danger-bg); }

/* ── Cards — eine rezessierte Form (auf --bg, sitzt in der weißen
   .admin-Fläche) für alle Panel/Tile-artigen Container. Nur Padding/
   Margin/Ausrichtung bleiben je Verwendungszweck speziell. Die
   erhöhte Variante (auf --surface, für klickbare/hervorgehobene
   Karten: .mod-card/.reminder-card) steht weiter unten. ─────────── */
.form-panel, .pflegeart-card, .tp-fa-block, .imp-stat-tile, .stat-card, .batch-override-eintrag {
  background: var(--bg); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
}
.form-panel { padding: var(--space-5); margin-bottom: var(--space-5); }
.form-panel h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--space-4); }
.form-panel .fg input,
.form-panel .fg select { background: var(--surface); }
.form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); }

/* ── Hint ────────────────────────────────────────────────────── */
.hint { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--space-3); }

/* ── Datepicker ohne Jahr (Aktiver Zeitraum, Pflegearten) ──────── */
.date-field { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.date-text {
  width: 56px; padding: 3px 7px; border: var(--border-width) solid var(--border); border-radius: 5px;
  font-size: var(--fs-13); color: var(--text); background: var(--surface); text-align: center;
}
.date-picker-btn {
  border: none; background: none; cursor: pointer; font-size: var(--fs-md); padding: 2px 4px;
  line-height: 1;
}
.date-error { display: block; font-size: var(--fs-xs); margin-top: 2px; }
.date-picker-pop {
  position: absolute; top: 100%; left: 0; z-index: 20; margin-top: var(--space-1);
  background: var(--surface); border: var(--border-width-thin) solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-2); box-shadow: 0 6px 20px rgba(0,0,0,.15); width: 220px;
}
/* Umgeklappt per dpPositionPop() (layout/admin :: datePickerScript), wenn unterhalb im Viewport
   nicht genug Platz ist - sonst ragt der Kalender bei Zeilen weit unten aus dem Bild. */
.date-picker-pop-oben { top: auto; bottom: 100%; margin-top: 0; margin-bottom: var(--space-1); }
.dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1-5); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.dp-nav button { border: none; background: none; cursor: pointer; font-size: var(--fs-md); padding: 2px 8px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { font-size: 10px; color: var(--muted); text-align: center; padding: 2px 0; }
.dp-day {
  border: none; background: none; cursor: pointer; font-size: var(--fs-sm); padding: var(--space-1) 0;
  line-height: 16px; border-radius: 5px; color: var(--text);
}
.dp-day:hover { background: var(--bg); }
.dp-day.on { background: var(--primary); color: var(--text-inverse); }
/* Füllzellen (Wochenstart-Offset + Auffüllen auf 6 Wochen, siehe dpRenderCalendar in
   layout/admin.html) - dieselbe Höhe wie .dp-day, sonst kollabiert eine Zeile, die NUR aus
   Füllzellen besteht (6. Woche bei einem 5-Wochen-Monat), im CSS-Grid auf eine geringere
   Zeilenhöhe, wodurch das Popup je nach Monat unterschiedlich hoch wird (siehe
   wireframes/datepicker-hoehe-demo.html). */
.dp-empty { padding: var(--space-1) 0; line-height: 16px; display: block; visibility: hidden; }

/* ── Globaler Error-Banner — Swap-Ziel für GlobalExceptionHandler bei
   HTMX-Requests (HX-Retarget); :empty blendet ihn aus, kein JS nötig ──── */
#error-banner:empty { display: none; }
#error-banner {
  background: var(--danger-bg); border: var(--border-width-thin) solid var(--danger-border); color: var(--red);
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 14px; font-size: var(--fs-13);
}
.error-banner-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.error-banner-row button {
  background: none; border: none; color: var(--red); font-size: var(--fs-lg);
  line-height: 1; cursor: pointer; flex-shrink: 0;
}
#error-banner details { margin-top: var(--space-2); }
#error-banner summary { cursor: pointer; font-size: var(--fs-sm); }
#error-banner pre { white-space: pre-wrap; font-size: var(--fs-xs); max-height: 240px; overflow: auto; margin-top: var(--space-1-5); }

/* ── HTMX-Standard-Ladeindikator: per Default unsichtbar, HTMX blendet ihn
   während einer laufenden Anfrage selbst ein (fügt .htmx-request am Element
   selbst oder einem Vorfahren hinzu) — kein eigenes JS nötig ──────────────── */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ── Import-Wizard: Upload-Fortschrittsbalken (pflegeobjekte_import/_upload.html) ──
   Prozent waehrend der eigentlichen Uebertragung (htmx:xhr:progress), danach
   indeterminate-Sweep waehrend Server-Analyse (kein messbarer Fortschritt dort). */
.imp-progress-row { display: flex; align-items: center; gap: var(--space-2-5); margin-top: var(--space-3); }
.imp-progress-bar {
  flex: 1; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden;
}
.imp-progress-fill {
  height: 100%; width: 0%; background: var(--primary); border-radius: 4px;
  transition: width 150ms ease-out;
}
.imp-progress-fill.imp-progress-indeterminate {
  width: 40% !important; animation: imp-progress-sweep 1.1s ease-in-out infinite;
}
@keyframes imp-progress-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.imp-progress-pct { font-size: var(--fs-sm); color: var(--muted); min-width: 34px; text-align: right; }

/* ── Import-Wizard: Spinner in Weiter/Zurück-Buttons - zeigt waehrend eines
   (teils mehrere Sekunden dauernden) Step-Uebergangs, dass der Klick gewirkt hat.
   htmx-indicator uebernimmt die Sichtbarkeit (htmx setzt .htmx-request automatisch
   auf den Button, solange dessen Request laeuft - siehe hx-disabled-elt am selben
   Button/Form), hier nur die Optik des Spinners selbst. */
.btn-wizard-spinner {
  display: inline-block; width: 13px; height: 13px; margin-left: 7px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: var(--text-inverse);
  border-radius: 50%; vertical-align: -2px;
  animation: btn-wizard-spinner-turn .6s linear infinite;
}
.btn-line .btn-wizard-spinner { border-color: rgba(0,0,0,.2); border-top-color: var(--text); }
@keyframes btn-wizard-spinner-turn { to { transform: rotate(360deg); } }

/* ── Pflegeart-Karten (Konfiguration) — Inline-Edit-Ausnahme,
   siehe feedback-edit-pattern-Memory ───────────────────────── */
.pflegeart-card { padding: var(--space-4); margin-bottom: var(--space-3); }
.pflegeart-card-head {
  display: flex; align-items: center; gap: var(--space-2-5); justify-content: space-between; margin-bottom: var(--space-2-5);
}
.pflegeart-card-head input[name=name] {
  padding: var(--space-1) var(--space-2-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); background: var(--surface); width: 220px;
}
.pflegeart-meta { font-size: var(--fs-13); color: var(--muted); display: flex; flex-direction: column; gap: var(--space-2); }
.pflegeart-meta input {
  padding: 3px 7px; border: var(--border-width) solid var(--border); border-radius: 5px;
  font-size: var(--fs-13); color: var(--text); background: var(--surface);
}
.pflegeart-meta input[name=aktionsLabel] { width: 160px; margin-left: var(--space-1); }
.pflegeart-meta input[type=number] { width: 56px; }
.pflegeart-footer {
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--space-2-5); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-width-thin) solid var(--border);
}
.toggle-wrap { display: flex; align-items: center; gap: var(--space-2-5); font-size: var(--fs-13); }
/* Ereignis-Aktivierung + Archivieren rechtsbündig ans Zeilenende gepinnt (margin-left:auto
   statt justify-content:space-between auf .pflegeart-footer) - so bleibt ihre X-Position
   unabhängig davon, wie breit die Modus-Pills gerade sind, siehe _pflegeart_karte.html
   (Cornelius-Feedback 2026-07-16, Feedback-Runde 2). margin-left:auto sitzt auf diesem
   gemeinsamen Wrapper statt auf dem Toggle allein (Cornelius-Feedback 2026-07-17) - sonst
   konnten Toggle und Archivieren bei wenig Platz unabhängig voneinander umbrechen (der Toggle
   passte noch, Archivieren rutschte allein auf die nächste Zeile). */
.pflegeart-footer-rechts { display: flex; align-items: center; gap: var(--space-2-5); margin-left: auto; }
/* Zeitraum-Feld bleibt bei aktiver Ereignis-Aktivierung im DOM, nur unsichtbar - reserviert
   dadurch weiterhin seine Zeilenhöhe (kein hartkodierter Höhenwert nötig), der Ereignis-
   Aktivierung-Toggle im Footer springt deshalb nicht mehr vertikal. */
.unsichtbar-platzhalter { visibility: hidden; }
.cfg-link { font-size: var(--fs-sm); color: var(--primary); margin-left: var(--space-2); cursor: pointer; text-decoration: none; }
/* ── Segmentierte Toggle-Gruppe — kanonisches Muster für "genau eine
   von N Optionen", z.B. Wartungsmodus. Die frühere lokale Variante in
   karte.html (.standpunkt-modus, einzelne Pill-Buttons mit Lücke statt
   verbundenem Segment) wurde hierauf umgestellt, siehe karte.html. ── */
.modus-pills { display: flex; }
.modus-pills button {
  padding: var(--space-1) var(--space-2-5); font-size: var(--fs-sm); cursor: pointer;
  border: var(--border-width) solid var(--border); background: var(--surface); color: var(--text);
  transition: background .15s, color .15s; white-space: nowrap;
}
.modus-pills button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.modus-pills button:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.modus-pills button:not(:first-child) { border-left: none; }
.modus-pills button.selected, .modus-pills button.on { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
/* Schmaler vertikaler Trenner zwischen zwei fachlich unterschiedlichen Button-Gruppen (z.B.
   Pflegeart-Leiste in karte.html, Ereignis-melden-Varianten vs. -beenden hier) - ursprünglich nur
   lokal in karte.html definiert, jetzt global für den zweiten Verwendungsort. */
.pa-leiste-trenner { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
/* ── Pflegeart-Leiste Aufklapp-Menü (karte.html, Variante 2 aus
   wireframes/pflegeart-leiste-mobil-varianten.html, Cornelius-Entscheidung 2026-07-17) -
   .pflegeart-leiste selbst braucht position:relative als Positionierungs-Vorfahre für
   .pa-collapse-menu (top:100%), sonst driftet es auf die volle position:fixed-Body-Box (siehe
   .topbar/.overflow-menu-Lehre vom selben Tag). ── */
.pflegeart-leiste.pa-leiste-collapse {
  position: relative; flex-wrap: nowrap;
  touch-action: none; /* siehe .topbar-Kommentar - liegt ebenfalls am oberen Kartenrand */
}
.pa-collapse-toggle {
  border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--radius-pill); padding: 5px 14px; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pa-collapse-menu {
  /* z-index über Leaflets eigenen Panes/Controls (bis 1000, siehe .overflow-menu) - sonst
     verschwindet das Menü hinter der aktiven Karte. */
  position: absolute; top: 100%; left: var(--space-3); right: var(--space-3); z-index: 1001;
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0,0,0,.18);
  padding: var(--space-2); display: none; flex-wrap: wrap; gap: 8px;
  touch-action: none; /* siehe .topbar-Kommentar - kein eigenes Scrollen */
}
.pa-collapse-menu.on { display: flex; }

/* ── Pflegeintervalle — Inline-Tabellenzeilen mit Live-Vorschau ─ */
.cat-row {
  display: grid;
  grid-template-columns: 170px 90px 70px 80px 80px 80px 1fr 36px;
  gap: var(--space-2); align-items: center;
  padding: 10px 0; border-bottom: var(--border-width-thin) solid var(--border);
  font-size: var(--fs-13);
}
.cat-row.hdr {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; padding-bottom: var(--space-1-5);
}
.color-bar { height: 14px; border-radius: var(--radius-sm); overflow: hidden; display: flex; width: 100%; }
.color-bar span { display: block; height: 100%; }

/* ── Toggle-Switch (Override-Schalter Pflegeobjekt/Pflegeart) ──────── */
.toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--inactive); border-radius: 24px;
  cursor: pointer; transition: .2s;
}
.toggle-slider:before {
  content: ''; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: white; border-radius: 50%; transition: .2s;
}
.toggle input:checked + .toggle-slider { background: var(--primary); }
.toggle input:checked + .toggle-slider:before { transform: translateX(18px); }
/* Aus-Zustand war fest hellgrau (#d1d5db), kein Dark-Gegenstück - leuchtete
   dadurch im Dark Mode zu hell gegen den dunklen Hintergrund. */
html.dark .toggle-slider { background: var(--border); }

/* ── Badges (Pflegeart-Chips u.ä.) — eigene, dichtere Chip-Form
   (nicht Pill), weil hier oft mehrere nebeneinander in einer Zeile
   stehen (Pflegeart-Zuordnung) ─────────────────────────────────── */
.bdg {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--radius-sm); font-weight: var(--fw-semibold);
}
.bdg-pa { background: var(--neutral-bg); color: var(--neutral-text); border: var(--border-width-thin) solid var(--inactive); }
html.dark .bdg-pa { background: var(--surface); color: var(--slate-light); border-color: var(--border); }

/* ── Pflegeart-Chip-Interaktion (Objektarten-Konfiguration) ───── */
/* Checkbox ist versteckt, der Label-Klick toggelt sie; :has() spiegelt Zustand live.
   Schreibgeschützt (override=false): chip-aktiv/inaktiv als Klassenmodifier. */
.chip-cb { display: none; }
.chip-label { cursor: pointer; user-select: none; }
/* Aktiv-Stil: server-seitige Klasse ODER live per :has() */
.chip-aktiv .bdg-pa,
.chip-compound:has(.chip-cb:checked) .bdg-pa { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
/* Inaktiv-Stil: server-seitige Klasse ODER live per :has() — kommt nach Aktiv-Regeln → gewinnt bei Konflikt */
.chip-inaktiv .bdg-pa { opacity: 0.4; }
.chip-compound:has(.chip-cb:not(:checked)) .bdg-pa { opacity: 0.4; background: var(--neutral-bg); color: var(--neutral-text); border-color: var(--inactive); }
.fa-pi-name { font-size: var(--fs-xs); color: var(--muted); margin-left: 2px; }

/* ── Hold-to-Confirm — eine Fill-Mechanik (Überlagerung wächst beim
   Halten), nur die Füllfarbe unterscheidet destruktiv (rot), bestätigend
   (grün) und "auf farbigem Grund" (halbtransparent weiß, .btn-melden -
   Mitarbeiter-Aktionsmeldung, Fläche-Detail). .btn-hold-confirm steht bei
   den Import-Wizard-Regeln weiter unten, teilt sich aber dieselbe Basis. */
/* Long-Press ist bei Hold-to-Confirm Absicht (kein Versehen) - ohne diese beiden Regeln
   startet Mobile-Safari/-Chrome bei genau dieser Geste stattdessen die Text-Selektion bzw.
   (iOS-Safari) das Kopieren-Kontextmenü, was den Hold-Fortschritt sichtbar stört. */
.btn-hold-delete, .btn-hold-confirm, .btn-melden {
  position: relative; overflow: hidden;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.btn-hold-delete::before, .btn-hold-confirm::before, .btn-melden::before {
  content: ''; position: absolute; inset: 0; width: 0;
}
.btn-hold-delete::before  { background: rgba(220,38,38,.18); }
.btn-hold-confirm::before { background: rgba(22,163,74,.22); }
.btn-melden::before       { background: rgba(255,255,255,.35); }
.btn-hold-delete.holding::before, .btn-hold-confirm.holding::before, .btn-melden.holding::before {
  width: 100%; transition: width 1.2s linear;
}

/* ── Mitarbeiter-Aktionsmeldung (Fläche-Detail, Feld-Kontext) — großer,
   voller-Breite CTA-Button (analog .btn.btn-primary.btn-block, aber
   eigenständig, weil zusätzlich die Hold-Fill-Mechanik oben dazukommt).
   .btn-melden-secondary ersetzt den früher wiederholt inline gesetzten
   "sieht aus wie Outline"-Style (siehe _pflegeart_karte.html). ───────── */
.btn-melden {
  width: 100%; padding: 14px; border-radius: var(--radius-lg); border: none; font-size: var(--fs-lg);
  font-weight: var(--fw-semibold); background: var(--primary); color: var(--text-inverse); cursor: pointer;
}
.btn-melden span { position: relative; z-index: 1; }
.btn-melden-secondary { background: var(--surface); color: var(--text); border: var(--border-width) solid var(--border); }

.section-hint { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--space-4); }

/* ── Konfiguration: Sidebar-Layout ───────────────────────────── */
.admin-body.cfg-body { padding: 0; }
.cfg-layout { display: flex; }
.cfg-sidebar {
  width: 178px; flex-shrink: 0;
  background: var(--bg); border-right: var(--border-width-thin) solid var(--border);
  padding: 20px 0;
}
.cfg-sidebar .eyebrow { padding: 0 16px; margin: 18px 0 5px; }
.cfg-sidebar .eyebrow:first-child { margin-top: 0; }
.cfg-nav-item {
  display: block; padding: var(--space-2) var(--space-4); font-size: var(--fs-13);
  color: var(--text); text-decoration: none;
  border-left: 3px solid transparent;
}
.cfg-nav-item.cfg-nav-sub { padding-left: 28px; font-size: var(--fs-sm); color: var(--muted); }
.cfg-nav-item:hover { background: var(--surface); }
.cfg-nav-item.on {
  background: var(--info-bg); border-left-color: var(--primary);
  color: var(--primary); font-weight: var(--fw-semibold);
}
/* --primary bleibt in Dark Mode dieselbe dunkle Navy-Farbe (kein eigener
   Dark-Wert) - auf dem jetzt dunkleren --info-bg unlesbar, daher eigener
   Text-Farb-Override auf --info-text (bereits die passende helle
   Kontrastfarbe für --info-bg im Dark Mode). */
html.dark .cfg-nav-item.on { color: var(--info-text); }
.cfg-content { flex: 1; padding: var(--space-5); min-width: 0; }

/* ── Chip — EIN Muster für "Tag/Zuordnung, optional mit eingebettetem
   Control und/oder Lösch-Button" (löst .fa-pair/.opt-chip/.sf-chip ab, die
   unabhängig mit je eigener Form/Farbe/Lösch-Button entstanden waren - drei
   Varianten für dieselbe Idee, siehe styleguide.html § Chips).
   Einfache Chips (nur Label) sind Pill; sobald ein Select/Lösch-Button rein
   muss, wirkt volle Pill-Form gequetscht - .chip-compound nutzt dafür einen
   sanfteren Radius. Bedeutung (z.B. "das ist ein aktiver Filter") kommt über
   einen Farb-Modifier wie .chip-info, Form/Anatomie bleibt immer gleich. */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--bg); border: var(--border-width) solid var(--border); border-radius: var(--radius-pill);
  padding: 3px 10px; font-size: var(--fs-sm); color: var(--text);
}
.chip-compound { border-radius: var(--radius-md); padding: 3px 6px 3px 10px; }
.chip-del {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: var(--fs-sm); line-height: 1; padding: 0 3px; border-radius: var(--radius-pill);
  transition: color .15s;
}
.chip-del:hover { color: var(--red); }
.chip-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.chip-enthalten { opacity: 0.55; }
.chip select {
  padding: 1px 2px; border: none; background: var(--bg);
  font-size: var(--fs-sm); color: var(--text); cursor: pointer; max-width: 130px;
}

/* ── Objektarten: fat-line rows (Name + Pflegeart-Defaults inline) ── */
.fa-row {
  display: flex; align-items: center; gap: var(--space-2-5);
  padding: 10px 0; border-bottom: var(--border-width-thin) solid var(--border); flex-wrap: wrap;
}
.fa-row form { display: flex; align-items: center; gap: var(--space-2-5); flex: 1; flex-wrap: wrap; }
/* Chip-Container-Basis (Flex-Wrap+Gap) für alle drei Zeilen-Kontexte gemeinsam,
   jede Zeile behält ihre kontextspezifische Zusatzregel darunter. */
.fa-pairs, .opt-chip-row, .filter-chips-row { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: center; }
.fa-pairs { flex: 1; }
.fa-count { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.fa-chip-disabled { opacity: 0.35; cursor: not-allowed; }
.fa-no-intervall-hint { font-size: var(--fs-xs); color: var(--orange); font-style: italic; }

/* ── Prioritäten: Drag & Drop Sortierung ──────────────────────── */
.drag-handle {
  display: inline-block; padding: 0 8px; font-size: 18px; line-height: 1;
  cursor: grab; user-select: none; color: var(--slate-light); transition: color .15s;
}
.drag-handle:hover  { color: #94a3b8; }
.drag-handle:active { cursor: grabbing; }
html.dark .drag-handle       { color: var(--border); }
html.dark .drag-handle:hover { color: #64748b; }
tr.dragging  { opacity: .35; }
tr.drag-over { box-shadow: inset 0 3px 0 0 var(--focus-blue); }
/* ── Prioritäts-Badge (Stern + Stufe, Karte/Detail) — bewusst kein
   Pill wie .role-a/.badge-aktiv: kompakter Präfix direkt vor dem
   Bezeichnungstext, keine eigenständige Zeilen-Badge. ───────────── */
.badge-prio {
  background: var(--violet); color: var(--text-inverse); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  padding: 2px 6px; border-radius: var(--radius-sm); margin-right: 5px; display: inline-block;
}

/* ── Pflegeobjekt-Formular: Priorität-Radio-Cards ───────────────────── */
.fe-prio-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fe-prio-opt {
  display: flex; align-items: center; gap: var(--space-1-5);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  padding: 6px 12px; cursor: pointer; font-size: var(--fs-13); user-select: none;
}
.fe-prio-opt input[type=radio] { display: none; }
.fe-prio-opt:has(input:checked) { border-color: var(--violet); background: var(--violet-bg); }
html.dark .fe-prio-opt:has(input:checked) { background: var(--violet-bg); color: #d8b4fe; }

/* ── Warn-Box — EINE Farbrezeptur für "Hinweis lesen bevor weiter" (löst
   .override-hint-panel/.wartungsmodus-hint/.fe-wechsel-dialog ab, die
   unabhängig mit unterschiedlichem Rand entstanden waren - eine davon sogar
   mit hartkodierter Farbe statt Warn-Token). Identische Rezeptur wie die
   bereits gezeigte .tp-fa-block.warn-Karte, nur als eigenständige,
   generische Klasse statt an eine Objektart-Block-Karte gekoppelt. */
.warn-box {
  background: var(--warn-bg); border: var(--border-width) solid var(--warn-border); border-radius: var(--radius-lg);
  padding: var(--space-2-5) var(--space-3); font-size: var(--fs-sm); color: var(--text); line-height: 1.6;
}
.warn-box strong { color: var(--warn-text); }
.warn-box a { color: inherit; }

/* ── Eyebrow-Sektionslabel — EINE Typografie für "kleine Großbuchstaben-
   Überschrift" (löst .sec-label/.cfg-group-label/.opt-section-header ab,
   die unabhängig mit 1-2px abweichender Font-Size/Letter-Spacing entstanden
   waren - keine davon nutzte --fs-xs, obwohl die Typo-Skala genau dafür
   "Label / Eyebrow" vorsieht). Abstand/Rahmen (Dashboard-Trennlinie,
   Sidebar-Einzug) bleiben bewusst separat - das ist Layout je Einsatzort,
   keine Typografie-Frage, daher per Inline-Style bzw. .cfg-sidebar .eyebrow
   am jeweiligen Einsatzort ergänzt statt in dieser Basisklasse. */
.eyebrow {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
}

/* ── Teilpflege-Config: Optionen-Chips + Abschnittslayout ────── */
.opt-chip-row { min-height: 28px; }
.opt-add-form {
  display: flex; gap: var(--space-2); margin-top: var(--space-2-5); align-items: center;
}
.opt-add-form input[type=text] {
  flex: 1; max-width: 300px; padding: 5px 10px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--fs-13); color: var(--text); background: var(--surface);
}
.opt-add-form input[type=text]:focus { outline: none; border-color: var(--primary); }

/* ── Teilpflege-Config: Objektart-Block-Karte + Disclosure ─── */
.tp-fa-block { padding: var(--space-2-5) var(--space-3); margin-bottom: var(--space-2); }
.tp-fa-block.warn { background: var(--warn-bg); border-color: var(--warn-border); }

/* ── Nacharbeit-Hinweis (Pflegeart-Karte, Fläche-Detail) - war vorher
   komplett inline mit hartkodierten Amber-Werten. ─────────────────── */
.nacharbeit-sektion {
  margin-top: var(--space-2-5); padding: var(--space-2-5) var(--space-3); border-radius: var(--radius-md);
  background: var(--warn-bg); border: var(--border-width) solid var(--warn-border-strong);
}
.nacharbeit-sektion-titel { font-weight: var(--fw-semibold); font-size: var(--fs-13); color: var(--warn-text); margin-bottom: var(--space-1); }
.nacharbeit-sektion-fusszeile { font-size: var(--fs-xs); margin-top: var(--space-1-5); color: var(--warn-text); }

/* ── Pflegeart-Karte (Melden-Ansicht, _pflegeart_karte.html) — bisher nur lokal in
   pflegeobjekte/detail.html definiert, jetzt global, da dieselbe Karte auch im
   Batch-Panel (karte.html, siehe 20_batch_aktion_melden.md) eingebettet wird. */
.pflegeart-karte {
  background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-4);
  margin-bottom: 14px; border: var(--border-width) solid var(--border);
}
.pflegeart-karte .kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2-5); }

/* ── Batch-Aktion melden (Karte, siehe 20_batch_aktion_melden.md) ─────────────── */
.batch-override-eintrag { padding: 14px 16px; margin-bottom: var(--space-3); }
.batch-override-eintrag .batch-override-label {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); margin-bottom: var(--space-2);
}
/* Ursprünglich nur lokal in karte.html definiert, jetzt global - dieselbe Slide-up-Mechanik
   trägt auf karte.html zwei unabhängige Panels (#batch-panel-container, #routen-panel-container,
   siehe 22_routen.md), slidet ein/aus statt hart ein-/auszublenden. */
.batch-panel-container {
  max-height: 0; overflow-y: auto; flex-shrink: 0;
  background: var(--surface); border-top: 1px solid var(--border);
  transition: max-height 200ms ease-out;
  /* pan-y statt none (siehe .topbar-Kommentar) - diese Panels scrollen selbst vertikal
     (overflow-y: auto), touch-action: none würde das mit blockieren. Pinch-Zoom bleibt trotzdem
     unterbunden, pan-y erlaubt nur vertikales Scrollen, kein Zoom/horizontales Pan. */
  touch-action: pan-y;
}
.batch-panel-container.offen { max-height: 50dvh; padding: 12px 16px; }
/* Dreistufiges Panel für die Batch-Melden-Kachel-Vorauswahl (Cornelius-Idee 2026-07-17, siehe
   wireframes/batch-melden-kachel-vorauswahl.html) - nur an #batch-panel-container vergeben
   (karte.html batchPanelPhaseAnwenden), NICHT an #routen-panel-container/
   #standpunkt-panel-container, obwohl die sich dieselbe .batch-panel-container-Basisklasse
   teilen. Höhere Spezifität (3 statt 2 Klassen) gewinnt korrekt gegen .offen allein. */
.batch-panel-container.offen.phase-auswahl { max-height: 25dvh; }
.batch-panel-container.offen.phase-detail { max-height: 80dvh; }
.batch-panel-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
/* ── Phase "auswahl": kompakter Zähler + Weiter-Button ── */
.auswahl-zaehler { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auswahl-zaehler-text { font-size: var(--fs-sm); color: var(--muted); }
.auswahl-zaehler-text strong { color: var(--text); }
/* ── Phase "kacheln": kompakte Zeile pro Pflegeart statt voller Karte, siehe .pflegeart-karte
   für die volle Variante in Phase "detail". ── */
.pa-kachel-liste { display: flex; flex-direction: column; gap: 8px; }
.pa-kachel {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; font-size: inherit; color: var(--text);
}
.pa-kachel:hover { border-color: var(--primary); }
.pa-kachel-name { font-weight: var(--fw-semibold); }
.pa-kachel-meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.pa-kachel-chevron { color: var(--muted); font-size: 18px; flex-shrink: 0; }
.pa-kachel-check { color: var(--green); font-weight: var(--fw-bold); display: none; }
.pa-kachel.erledigt { opacity: .55; cursor: default; }
.pa-kachel.erledigt .pa-kachel-check { display: inline; }
.pa-kachel.erledigt .pa-kachel-chevron { display: none; }
/* ── Phase "detail": Zurück-Link oberhalb der unveränderten vollen Pflegeart-Karte,
   Edit-Pattern-B-Konvention (Breadcrumb/Zurück statt Abbrechen). ── */
.pa-detail-zurueck {
  display: flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--primary); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  padding: 0 0 var(--space-3); cursor: pointer;
}
.batch-panel-close {
  border: none; background: none; font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 4px 8px;
}
.batch-override-label { display: flex; align-items: center; justify-content: space-between; }
.batch-remove-btn {
  border: none; background: none; font-size: 13px; line-height: 1; cursor: pointer; color: var(--muted);
}
.batch-breakdown { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.tp-fa-block-header {
  font-size: var(--fs-13); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); color: var(--text);
}
.tp-fa-block.warn .tp-fa-block-header { color: var(--warn-text); }
.tp-disclosure {
  margin-top: var(--space-4); border: 1.5px dashed var(--warn-border); border-radius: var(--radius-md);
}
.tp-disclosure summary {
  cursor: pointer; padding: 10px 14px; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--warn-text); list-style: none; display: flex; align-items: center;
  gap: var(--space-1-5); user-select: none;
}
.tp-disclosure summary::-webkit-details-marker { display: none; }
.tp-disclosure summary::before {
  content: '▶'; font-size: 10px; flex-shrink: 0; transition: transform .2s;
}
details[open].tp-disclosure summary::before { transform: rotate(90deg); }
.tp-disclosure-body { padding: 10px 14px 14px; border-top: var(--border-width-thin) solid var(--warn-border); }
.tp-disclosure-intro {
  font-size: var(--fs-xs); color: var(--warn-text); margin-bottom: var(--space-3); line-height: 1.5;
}
.tp-disclosure-intro a { color: inherit; }

/* ── Pflegeintervall: Lösch-Panel (Verwendungsnachweis + Ersatz) ─ */
.iv-loeschen-panel {
  background: var(--warn-bg); border: var(--border-width-thin) solid var(--warn-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin: 2px 0; font-size: var(--fs-13);
}
.iv-loeschen-block {
  display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap;
}
.iv-loeschen-warn { margin-bottom: var(--space-1-5); }
.iv-loeschen-icon { font-size: var(--fs-lg); flex-shrink: 0; }
.iv-loeschen-details {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-bottom: var(--space-2-5); font-size: var(--fs-sm); color: var(--text);
}
.iv-loeschen-form {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2);
}
/* ── Dashboard: KPI-Grid ─────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-3); margin-bottom: 28px; }
.stat-card { padding: var(--space-4) var(--space-3); text-align: center; }
.stat-card .n { font-size: 32px; font-weight: var(--fw-black); line-height: 1; }
.stat-card .n.status-gruen  { color: var(--green); }
.stat-card .n.status-gelb   { color: var(--yellow); }
.stat-card .n.status-orange { color: var(--orange); }
.stat-card .n.status-rot    { color: var(--red); }
.stat-card .l { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-1); }
.stat-card .breakdown { font-size: 10px; color: var(--muted); margin-top: var(--space-1-5); line-height: 1.5; opacity: .75; }

/* ── Dashboard: Offene Nacharbeiten ──────────────────────────── */
.nacharbeit-section { border: var(--border-width) solid var(--border); border-radius: 10px; padding: var(--space-4); margin-bottom: 22px; }
.nacharbeit-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); margin-top: var(--space-2); }
.nacharbeit-table th {
  text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; padding: var(--space-1) var(--space-2); border-bottom: var(--border-width-thin) solid var(--border);
}
.nacharbeit-table td { padding: var(--space-1-5) var(--space-2); border-bottom: var(--border-width-thin) solid var(--border); }
html.dark .nacharbeit-table th, html.dark .nacharbeit-table td { border-color: var(--border); }

/* ── Dashboard: Pflegeart-Erinnerungen ────────────────────────── */
.reminder-section {
  background: var(--warn-bg); border: var(--border-width) solid var(--warn-border-strong); border-radius: var(--radius-lg);
  padding: var(--space-4); margin-bottom: 22px;
}
.reminder-card {
  background: var(--surface); border: var(--border-width-thin) solid var(--warn-border); border-radius: var(--radius-md); padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
}
.reminder-card + .reminder-card { margin-top: var(--space-2-5); }
.reminder-text { font-size: var(--fs-sm); color: var(--warn-text); margin-top: 3px; }

/* ── Dashboard: Erinnerungs-Badge (auch im Konfiguration-Tab) ──── */
.cfg-reminder-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--warn-solid-strong); color: var(--text-inverse);
  font-size: 10px; font-weight: var(--fw-black);
  width: 16px; height: 16px; border-radius: 50%;
  margin-left: var(--space-1); vertical-align: middle;
}

/* Ungesehen-Punkt am Dashboard-Tab (analog "neue Mails"-Indikator) - reiner Punkt statt
   Zahl (im Unterschied zu .cfg-reminder-badge), Farbe passend zum bestehenden
   Standpunktmeldungen-Akzent (siehe .standpunktmeldungen-section-Badge in dashboard.html). */
.tab-unseen-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--violet); margin-left: 5px; vertical-align: middle;
}

/* Read-only Mini-Karte hinter dem 👁-Button bei Standpunktmeldungen/Einmalaufgaben mit
   Ortsbezug (Dashboard) - Leaflet braucht eine konkrete Höhe, sonst kollabiert der Container. */
.mini-karte-map { height: 160px; border-radius: var(--radius-sm); margin-top: var(--space-2); }

/* ── Dashboard: Sektionskopf mit Zähler-Badge (Nacharbeiten/Erinnerungen/
   Einmalaufgaben/Standpunktmeldungen) — vier vorher unabhängig inline
   duplizierte Kopfzeilen, nur die Badge-Farbe unterscheidet sich je
   Bedeutung. font-size 13px/10px und die 10px-Gaps sind bewusst literal
   gelassen (passen nicht exakt auf die --fs-/--space-Skala, Kandidaten für
   die separate Tier-2-Abstimmung der main.css-Tokenisierung). ────────── */
.dash-section-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.dash-section-title { font-size: var(--fs-13); font-weight: var(--fw-bold); }
.dash-item-title { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.dash-count-badge {
  color: var(--text-inverse); font-size: 10px; font-weight: var(--fw-black);
  padding: 1px 7px; border-radius: var(--radius-pill);
}
.dash-count-badge-warn        { background: var(--warn-solid); }
.dash-count-badge-warn-strong { background: var(--warn-solid-strong); }
.dash-count-badge-info        { background: var(--info-blue); }
.dash-count-badge-violet      { background: var(--violet); }
/* Feldarbeiter-Dashboard-Stufen (felddashboard/_liste.html) - dieselbe Ampelfarbe wie
   .status-punkt/.row-meta-verzug, nicht die vier obigen Bedeutungs-Farben. */
.dash-count-badge-rot         { background: var(--red); }
.dash-count-badge-orange      { background: var(--orange); }
.dash-count-badge-gelb        { background: var(--yellow); }
.dash-reminder-card-stacked { flex-direction: column; align-items: stretch; gap: var(--space-2-5); }
/* align-items:flex-start explizit - ohne das stretcht Flexbox (Default "stretch") die
   .btn-sm-Buttons auf die Höhe des mehrzeiligen Text-Geschwisters (Titel + reminder-text)
   hoch (gemessen 32px statt der echten 28px Button-Eigenhöhe) - betraf u.a. "Position"/
   "In der Nähe"/"Bearbeiten"/"Erledigt", Cornelius-Feedback 2026-07-14. */
.dash-item-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.dash-btn-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.dash-inline-form { display: flex; gap: var(--space-2); align-items: flex-start; }
.dash-basis-divider { padding-bottom: var(--space-1-5); margin-bottom: var(--space-2-5); border-bottom: var(--border-width-thin) solid var(--border); }

/* ── Dashboard: Navigations-Kacheln ───────────────────────────── */
.mod-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  gap: var(--space-2-5); margin-bottom: 26px;
}
.mod-card {
  background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  padding: 15px 13px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; text-decoration: none; color: inherit; display: block;
}
.mod-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(26,58,92,.10); }
.mod-card .ic { font-size: 24px; margin-bottom: var(--space-2); }
.mod-card .mn { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.mod-card .md { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }

/* ── Statusfarbe-Punkt (Pflegeobjekte-Listen-Filter, analog pflegeobjekte/detail.html) ──── */
/* Bewusst auf .status-punkt gescoped, nicht bare .status-gruen etc. - sonst kollidiert das
   mit .stat-card .n.status-gruen (Dashboard-KPI-Zahlen, andere Property/Zweck, gleicher
   Klassenname): grüne Zahl auf grünem Quadrat = unlesbar. Bug per Cornelius-Report gefunden. */
.status-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: var(--space-2); }
.status-punkt.status-gruen  { background: var(--green); }
.status-punkt.status-gelb   { background: var(--yellow); }
.status-punkt.status-orange { background: var(--orange); }
.status-punkt.status-rot    { background: var(--red); }
.status-punkt.status-grau   { background: var(--gray); }
.status-punkt.status-unbekannt { background: var(--unknown); }

/* ── Pflegeobjekte-Listen-Filter: Leiste + additive Chips ──────────────────────── */
.filterleiste { margin-bottom: var(--space-4); }
.filter-kernzeile { display: flex; align-items: center; gap: var(--space-2-5); flex-wrap: wrap; margin-bottom: var(--space-2); }
.filter-suche {
  padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-md); color: var(--text); background: var(--surface); min-width: 200px;
}
.filter-kernzeile select {
  padding: var(--space-2) var(--space-2-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-md); color: var(--text); background: var(--surface);
}
/* Native Datums-Filter (Historie/Einmalaufgaben-Zeitraum) - bewusst der
   native Browser-Kalender, kein eigenes Popover: anders als .date-field
   (Tag/Monat ohne Jahr, für wiederkehrende Pflegezeiträume) braucht ein
   Historien-Filter ein echtes Kalenderdatum inkl. Jahr. Vorher komplett
   ungestylt (Browser-Default direkt neben den restlichen Filterfeldern) -
   jetzt dieselbe Rahmen-/Radius-/Schriftsprache wie .filter-suche daneben. */
input[type=date] {
  padding: var(--space-1-5) var(--space-2-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-md); font-family: inherit; color: var(--text); background: var(--surface);
}
input[type=date]:focus { outline: none; border-color: var(--primary); }
/* Natives Icon unsichtbar, aber weiterhin an derselben Stelle klickbar
   (öffnet weiter den Browser-Kalender) - eigenes 📅-Emoji als Overlay,
   identisch zum Icon von .date-field (Pflegeart "Aktiver Zeitraum").
   Ein CSS-Filter (frühere Version dieser Regel) kann aus einem einfarbigen
   Icon nur einen einzelnen Farbton erzeugen - auf dem sehr dunklen
   --primary (#24506e) optisch kaum von Schwarz zu unterscheiden; "bunt"
   braucht das mehrfarbige Emoji-Icon selbst. Nur WebKit/Blink - Firefox
   kennt ::-webkit-calendar-picker-indicator nicht, behält dort sein
   eigenes (dann doppelt sichtbares) Icon neben dem Emoji-Overlay. */
input[type=date]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}
/* Bewusst auf den DIREKTEN Elternknoten des Inputs gescoped (":has(> ...)"),
   nicht auf eine bestimmte Wrapper-Klasse wie ".sub" - sonst zeigt ein
   künftiges Datumsfeld mit anderem Wrapper (z.B. ein <div> statt <label
   class="sub">) kein Icon (kein Fehler, einfach eine leere Fläche). Per
   Cornelius-Report im Styleguide-Demo gefunden, wo genau das passierte. */
:has(> input[type=date]) { position: relative; }
:has(> input[type=date])::after {
  content: '📅';
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-13); pointer-events: none;
}
/* Native Auf/Ab-Pfeile bei Zahlenfeldern komplett ausgeblendet (Cornelius:
   wirkten als eigenes Klick-Ziel deplatziert - der Kontext soll "hier eine
   Zahl eintippen" vermitteln, kein Zähler-Widget suggerieren). Erster
   Versuch war nur eine Einfärbung (siehe Commit-Historie) - bewusst
   verworfen zugunsten des einfacheren, eindeutigeren Signals. */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
input[type=number] { -moz-appearance: textfield; }
/* Historie-Zusatzfilter (Art-Select + Dauer-Zahlenfelder neben der
   normalen Pflegeobjekte-Filterleiste, .historie-filter) - waren bare,
   kein Rahmen/Hintergrund/Farbe, da .fg als Wrapper hier den
   <label>Text <input/></label>-Inline-Fluss gebrochen hätte. */
.historie-filter select, .historie-filter input[type=number] {
  padding: var(--space-1-5) var(--space-2-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-md); font-family: inherit; color: var(--text); background: var(--surface);
}
.historie-filter select:focus, .historie-filter input[type=number]:focus { outline: none; border-color: var(--primary); }
/* "+ X hinzufügen"-Dropdown (Pflegeart/Schutzart auf Pflegeobjekt-Detail,
   Pflegeart-zu-Zeitfenster) - identisches Muster an drei Stellen, vorher
   unstyled bzw. mit dreifach dupliziertem Inline-Style. */
.add-select {
  padding: var(--space-1-5) var(--space-2-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-13); font-family: inherit; color: var(--text); background: var(--surface);
}
.add-select:focus { outline: none; border-color: var(--primary); }
/* Import-Wizard Schritt 2: "Neue Objektart"-Namensfeld, erscheint erst
   nach Auswahl von "+ Neue Objektart anlegen…" im Select daneben. */
.imp-neu-input {
  padding: var(--space-1-5) var(--space-2-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-13); font-family: inherit; color: var(--text); background: var(--surface); margin-top: var(--space-1);
}
.filter-weitere-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.filter-weitere-row.hidden { display: none; }
.filter-weitere-select {
  padding: var(--space-1-5) var(--space-2); border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--fs-13); color: var(--text); background: var(--surface);
}
/* Größe an .filter-weitere-select (Zeilennachbarn) angeglichen - .filter-toggle-btn ist
   auch .btn.btn-line und würde sonst dessen volle Control-Token-Größe erben (9px/16px/14px
   im Admin-Kontext statt der hier etablierten Werte), Cornelius-Feedback 2026-07-14. Padding
   dabei von literalem 5px 8px auf --space-1-5/--space-2 migriert (kein exakter Token für 5px,
   6px ist der nächstliegende - betraf nur diese beiden Stellen, kein verbreitetes Muster). */
.filter-toggle-btn { padding: var(--space-1-5) var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-13); }
.filter-toggle-btn.on { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.filter-chips-row:empty { display: none; }

/* ── Schutzfläche: Schutz-Box (Pflegeobjekt-Detail Mobile) ──────────── */
/* Eigene, in sich geschlossene Slate-Textskala (dieses Kärtchen kam ursprünglich
   aus einem externen Wireframe mit eigener Palette) - Werte decken sich nur
   zufällig mit anderen Dark-Mode-Tokens, deshalb hier bewusst literal statt
   erzwungener Wiederverwendung; die Dark-Overrides darunter nutzen aber echte
   Tokens, wo die Werte tatsächlich exakt übereinstimmen. */
.schutz-box {
  background: #f1f5f9; border: var(--border-width-thin) solid var(--slate-light); border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3); margin: 14px 0;
}
.schutz-box-head {
  font-size: var(--fs-sm); font-weight: var(--fw-black); color: #334155;
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: var(--space-2);
}
.schutz-item { padding: 6px 0; }
.schutz-item + .schutz-item { border-top: var(--border-width-thin) solid var(--slate-light); margin-top: var(--space-1-5); }
.schutz-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.schutz-item-name { font-size: var(--fs-13); font-weight: var(--fw-bold); color: #1e293b; }
.schutz-item-zeit { font-size: var(--fs-sm); color: #64748b; white-space: nowrap; }
.schutz-item-hint { font-size: var(--fs-13); color: #334155; margin-top: 3px; }
html.dark .schutz-box { background: var(--surface); border-color: var(--slate); }
html.dark .schutz-box-head { color: var(--slate-light); }
html.dark .schutz-item { border-color: var(--border); }
html.dark .schutz-item-name { color: var(--text); }
html.dark .schutz-item-zeit { color: var(--muted); }

/* ── Datenimport-Wizard (Schnitt 6) ────────────────────────────── */
/* Kreis-Steps + Verbindungslinie + Unterschrift, aus wireframes/index.html übernommen
   (Cornelius, 2026-07-07) - Farben über die im Projekt etablierten CSS-Variablen statt
   der dortigen hartkodierten Dark-Mode-Werte, passt sich dadurch automatisch an. */
.imp-stepper-block { margin-bottom: var(--space-5); }
.imp-stepper-toprow { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.imp-stepper { display: flex; align-items: flex-start; width: 100%; }
.imp-step {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5);
  flex-shrink: 0; text-decoration: none;
}
.imp-step-num {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--surface); color: var(--muted); font-size: var(--fs-13); font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
}
.imp-step-label { font-size: var(--fs-xs); color: var(--muted); text-align: center; line-height: 1.3; white-space: nowrap; }
.imp-step.on .imp-step-num { background: var(--primary); border-color: var(--primary); color: var(--text-inverse); }
.imp-step.on .imp-step-label { color: var(--text); font-weight: var(--fw-semibold); }
.imp-step.done .imp-step-num { background: var(--green); border-color: var(--green); color: var(--text-inverse); }
/* flex:1 statt fixer Breite: die Linien fuellen den verbleibenden Platz, so dass die
   gesamte Stepper-Zeile die volle Breite des inneren Frames einnimmt statt kompakt
   linksbuendig zu haengen (Cornelius, 2026-07-07). */
.imp-step-line { flex: 1 1 auto; height: 2px; background: var(--border); margin: 13px 6px 0; min-width: 12px; }
.imp-step-line.done { background: var(--green); }
.imp-map { height: 360px; border-radius: var(--radius-md); overflow: hidden; margin: 12px 0; user-select: none; }
.imp-filter-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
/* Suchfeld nutzt bewusst dieselbe .filter-suche-Klasse wie die Pflegeobjekte-Filterleiste
   (type="search" gibt browsernativ das (x)-Loeschen-Icon) - siehe filter/_filterleiste.html. */
.imp-filter-row select { padding: var(--space-2) var(--space-2-5); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); font-size: var(--fs-md); background: var(--surface); color: var(--text); }
.imp-row-ausgeschlossen { opacity: .55; }
/* Schritt 1: Layername + Objektanzahl eines nicht importierbaren Layers gedimmt - die
   zugehoerige Checkbox hat bereits das native disabled-Attribut, ist damit aber gerade im
   Dark Mode kaum von einer aktivierten zu unterscheiden (Cornelius-Feedback 2026-07-14).
   Bewusst nur diese zwei Zellen, nicht die ganze Zeile - der Hinweistext (vierte Spalte,
   erklaert WARUM) soll gut lesbar bleiben statt mitgedimmt zu werden. */
.imp-zelle-deaktiviert { color: var(--muted); }
/* "Woher kam ich" nach 👁-Klick (Karte fokussieren) - bleibt markiert bis zum naechsten
   👁-Klick (bewusst kein Auto-Reset bei Kartenbewegung, siehe Cornelius-Diskussion 2026-07-14:
   man will die Karte manchmal bewegen und trotzdem wissen, woher man kam). Immer nur EIN
   Eintrag markiert. */
.imp-row-fokussiert td { background: var(--info-bg); }
.imp-bez-input {
  border: var(--border-width-thin) solid transparent; background: transparent; font: inherit; color: var(--text);
  padding: 3px 5px; border-radius: 4px; width: 100%;
}
.imp-bez-input:hover, .imp-bez-input:focus { border-color: var(--border); background: var(--surface); }
.imp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.imp-stat-tile { padding: 12px 14px; text-align: center; }
.imp-stat-tile strong { display: block; font-size: 22px; }
.imp-stat-tile span { font-size: var(--fs-sm); color: var(--muted); }
/* Import-Abschluss (Schritt 6): Commit-Button ueber volle Breite, Zurueck darunter -
   analog wireframes/index.html Schritt 5 (.btn-import-commit + separate Zurueck-Zeile). */
.imp-commit-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2-5); margin-top: var(--space-1); }

/* ── Schritt 4 "Flächen vereinen" - Vorschlagskarten + manuelle Kombination, 1:1 aus
   wireframes/flaechen-vereinen-wireframe.html (Cornelius, 2026-07-13/14) übernommen. ── */
.fv-abstand-row {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3); background: var(--bg); border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.fv-abstand-row label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.fv-abstand-row input[type=range] { width: 200px; }
.fv-abstand-value { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); min-width: 48px; }
.fv-objektart-info { font-size: var(--fs-xs); color: var(--muted); }

.fv-gruppen-liste { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0; }
.fv-karte { padding: var(--space-3); }
.fv-karte.vereint { border-color: var(--green); background: var(--success-bg); }
/* Nach .vereint platziert (gleiche Spezifität, Quellreihenfolge entscheidet) - "gerade
   fokussiert" soll auch eine gruene "Bereits vereint"-Karte uebertoenen koennen, siehe
   .imp-row-fokussiert weiter oben (gleiches Konzept, Schritt 5). */
.fv-karte.fv-karte-fokussiert { border-color: var(--info-border); background: var(--info-bg); }
.fv-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.fv-karte-titel { display: flex; align-items: center; gap: var(--space-2); }
.fv-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.fv-mitglieder { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin: var(--space-2) 0; }
.fv-luecke-hinweis { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.fv-name-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.fv-name-row input { max-width: 320px; }
.fv-aktionen { display: flex; gap: var(--space-2); margin-top: var(--space-2-5); }
.fv-tag {
  font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info-text);
}
.fv-tag-manuell { background: var(--violet-bg); color: var(--violet); }

.fv-map-wrap { position: relative; }
.fv-floatbar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: var(--space-2) var(--space-3);
  display: none; align-items: center; gap: var(--space-2-5); z-index: 500; font-size: var(--fs-sm);
}
.fv-floatbar.on { display: flex; }
.fv-floatbar select {
  padding: 3px 6px; border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); background: var(--surface); color: var(--text);
}
.fv-map.select-mode { cursor: crosshair; }

/* ── Großbild-Dashboard (Büro-TV / Wandanzeige, öffentlicher Link ohne Login) ──── */
.gb-wrap { max-width: 1400px; margin: 0 auto; padding: 32px 40px; }
.gb-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--space-5); }
.gb-eyebrow { color: var(--muted); font-size: 15px; letter-spacing: .02em; }
.gb-title { font-size: 32px; font-weight: var(--fw-black); margin-top: var(--space-1); }
.gb-clock-box { text-align: right; }
.gb-clock { font-size: 40px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.gb-date { color: var(--muted); font-size: 15px; }
.gb-update { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.gb-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.gb-kpi { border-radius: 14px; padding: 22px; color: var(--text-inverse); }
.gb-kpi-num { font-size: 46px; font-weight: var(--fw-black); line-height: 1; }
.gb-kpi-lbl { font-size: var(--fs-lg); margin-top: var(--space-2); opacity: .95; }
.gb-kpi-gruen  { background: var(--green); }
.gb-kpi-gelb   { background: var(--yellow); }
.gb-kpi-orange { background: var(--orange); }
.gb-kpi-rot    { background: var(--red); }
.gb-section { background: var(--surface); border: var(--border-width-thin) solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 20px; }
.gb-section-lbl { font-size: 18px; font-weight: var(--fw-bold); margin-bottom: 14px; }
.gb-table { width: 100%; border-collapse: collapse; }
.gb-th { text-align: left; font-size: var(--fs-13); color: var(--muted); padding: var(--space-1-5) var(--space-2-5); border-bottom: 2px solid var(--border); }
.gb-tr .gb-td, .gb-tr .gb-td-bold, .gb-tr .gb-td-muted, .gb-tr .gb-td-red { padding: var(--space-2-5); border-bottom: var(--border-width-thin) solid var(--border); font-size: var(--fs-lg); }
.gb-td-bold { font-weight: var(--fw-bold); }
.gb-td-muted { color: var(--muted); }
.gb-td-red { color: var(--red); font-weight: var(--fw-bold); }
.gb-empty { color: var(--muted); padding: 14px 10px; }
.gb-not-found { display: flex; align-items: center; justify-content: center; height: 100vh; font-size: var(--fs-xl); color: var(--muted); }
html.dark .schutz-item-hint { color: var(--slate-light); }

/* ── Konfiguration: Objektarten — aus _objektart_zeile.html/objektarten.html extrahiert ── */
.fa-name-input { width: 132px; font-weight: var(--fw-semibold); }

/* ── Konfiguration: Pflegearten-Karte — aus _pflegeart_karte.html extrahiert ── */
.toggle-label { font-size: var(--fs-13); }

/* ── Konfiguration: Pflegeketten — aus _pflegekette_zeile.html extrahiert ── */
.pk-override-chips-row { margin-top: var(--space-2); display: flex; gap: var(--space-1-5); flex-wrap: wrap; align-items: center; }
.pk-bdg-close { background: none; border: none; cursor: pointer; padding: 0 2px; color: inherit; }
.pk-override-add-form { display: flex; gap: var(--space-1-5); align-items: center; margin-top: var(--space-2); flex-wrap: wrap; }

/* ── Konfiguration: Prioritäten — aus _prioritaet_zeile.html/prioritaeten.html extrahiert ── */
.prio-stufe { color: var(--muted); font-weight: var(--fw-bold); font-size: var(--fs-13); }
.prio-name-fg { margin-bottom: 0; max-width: 130px; }
.prio-col-handle { width: 32px; }
.prio-col-stufe { width: 40px; }

/* ── Konfiguration: Fußnotentext, geteilt zwischen Pflegeintervalle- und Prioritäten-Seite ── */
.cfg-footnote { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--space-2-5); }

/* ── Konfiguration: Pflegeintervalle — aus pflegeintervalle.html extrahiert ── */
.iv-header-row { display: flex; align-items: center; gap: var(--space-2-5); }

/* ── Konfiguration: Schutzarten — aus _schutzart_meta_form/_schutzart_zeitfenster_*/schutzart_detail extrahiert ── */
.sf-meta-fg { max-width: 320px; }
.sf-zeitfenster-add-btn { margin-top: var(--space-2-5); }
.sf-chips-cell { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.sf-breadcrumb { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 14px; }
.sf-breadcrumb-sep { margin: 0 5px; }
.sf-back-btn { margin-bottom: 18px; display: inline-block; }
.sf-cancel-btn { margin-bottom: 18px; margin-left: var(--space-2); }
.sf-zeitfenster-eyebrow { margin-top: 18px; padding-bottom: var(--space-1-5); margin-bottom: var(--space-2-5); border-bottom: var(--border-width-thin) solid var(--border); }

/* ── Konfiguration: Mandant — aus mandant.html extrahiert ── */
.mand-saved-msg { color: var(--green); font-size: var(--fs-13); margin: -6px 0 14px; }
#mand-map { height: 320px; border-radius: var(--radius-md); overflow: hidden; border: var(--border-width) solid var(--border); }
.mand-position-hint { font-size: var(--fs-13); color: var(--muted); margin-top: var(--space-2); }
.mand-zoom-fg { max-width: 160px; }

/* ── Konfiguration: Teilpflege — aus teilpflege.html extrahiert ── */
.tp-pa-select { max-width: 280px; margin-bottom: 20px; }
.tp-warnbox-gap { margin-bottom: 20px; }

/* ── Inline-style-Ausräumung: rohe px-Werte ohne passenden Token ──
   (siehe Design-Overhaul-Auftrag) - Literal-Werte unveraendert aus den
   ehemaligen style="..."-Attributen uebernommen, nur der Ort hat sich
   geaendert. */
.historie-einmalaufgaben-bereich { margin-top: 28px; }
.historie-dauer-input { width: 70px; }
.historie-topbar-actions { display: flex; align-items: center; gap: 14px; }
.admin-bar-actions { display: flex; align-items: center; gap: var(--space-2-5); }

/* ── Pflegeobjekte: Melden-Ansicht (_form.html, _historie_sektion.html,
   _pflegeart_karte.html, _pflegeart_karte_sammel.html, _pflegearten_panel.html,
   _pflegeketten_panel.html, _schutzarten_panel.html, _teilpflege_panel.html,
   _zeile.html, detail.html) — aus Inline-Styles extrahiert ── */

/* Generisches Abstands-Utility für "kleiner Top-Abstand" (6px trifft keinen
   Spacing-Token), quer über mehrere Panels wiederverwendet. */
.mt-6 { margin-top: var(--space-1-5); }

/* _form.html: Override-Toggle-Beschreibungstext */
.fe-override-hinweis-text { font-size: var(--fs-13); }

/* _historie_sektion.html: Filterzeile-Layout für die vorhandene .historie-filter-Klasse
   (main.css definierte bisher nur die Kind-Selektoren für select/input). */
.historie-filter { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-2-5); }

/* _pflegeart_karte.html + _pflegeart_karte_sammel.html: Pflegeketten-Nachfrage-Sektion */
.pk-fragen-hinweis { margin: 6px 0 4px; font-size: var(--fs-sm); }
.melden-checkbox-row { display: flex; align-items: center; gap: var(--space-1-5); margin-bottom: var(--space-1); font-size: var(--fs-13); }

/* _pflegeart_karte.html: Liste der offenen Nacharbeiten */
.nacharbeit-liste { margin: var(--space-1) 0 var(--space-1) var(--space-4); padding: 0; font-size: var(--fs-13); }

/* _pflegeart_karte.html + _pflegeart_karte_sammel.html: Teilweise-melden-Panel */
.melden-teilweise-hinweis { margin: 0 0 6px; font-size: var(--fs-sm); }
.melden-notiz-input {
  width: 100%; margin-top: var(--space-1); box-sizing: border-box; padding: var(--space-2) var(--space-2-5);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  font-size: var(--fs-md); font-family: inherit; color: var(--text); background: var(--surface);
}

/* _pflegeart_karte_sammel.html: Status-Breakdown-Zeile im Batch-Panel */
.batch-breakdown-entry { margin-right: var(--space-2-5); }

/* _pflegeketten_panel.html: Vorschau-Chip-Zeile (read-only) + "+ Hinzufügen"-Formularzeile */
.pk-vorschau-row { display: flex; gap: var(--space-1-5); flex-wrap: wrap; }
.pk-add-form-row { display: flex; gap: var(--space-1-5); align-items: center; flex-wrap: wrap; margin-top: var(--space-2); }

/* _schutzarten_panel.html + _teilpflege_panel.html: gemeinsame Override-Karte
   (Schutzart-/Pflegeart-Eintrag mit eigener Kopie) */
.override-eintrag {
  margin-bottom: var(--space-2-5); padding: var(--space-2);
  border: var(--border-width-thin) solid var(--border); border-radius: var(--radius-md);
}
.override-eintrag-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1-5); }
.override-eintrag-title { font-size: var(--fs-13); }
.override-eintrag-actions { display: flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; }
.override-eintrag-title-input {
  width: 100%; font-size: var(--fs-13); font-weight: var(--fw-semibold);
  border: var(--border-width-thin) solid transparent; background: transparent;
  padding: 2px 4px; border-radius: 4px; color: var(--text); font-family: inherit;
}
.override-hinweistext-input {
  width: 100%; font-size: var(--fs-sm); padding: 4px 6px; font-family: inherit;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
  color: var(--text); background: var(--surface);
}
.override-sub-hint { margin-top: var(--space-1-5); font-size: var(--fs-sm); }