/* Family - handwritten stylesheet.
   Implements the design tokens and three-column layout from chapter 13.
   No build step: a single static CSS file kept intentionally small. */

:root {
  --bg-app: radial-gradient(circle at 50% 30%, #f9fafb 0%, #edf0f3 70%, #e2e8f0 100%);
  --bg-app-fallback: #edf0f3;
  --bg-body: #f8fafc;        /* Hintergrundfarbe für Eingabefelder (kontrastiert zu --bg-surface) */
  --bg-surface: #ffffff;
  --bg-subtle: #f8fafc;      /* leicht abgesetzte Flächen (Karten-Innen, Hover) */
  --bg-hover: #f1f5f9;       /* Hover für Listen/Navigation */
  --bg-active: #eef2ff;      /* aktive/ausgewählte Elemente */
  --border-subtle: #e5e7eb;
  --border-strong: #cbd5e1;  /* Baumlinien, kräftigere Ränder */
  --grid-dot: #e2e8f0;       /* Punkteraster im Stammbaum */
  --text-primary: #0f172a;
  --text-muted: #475569;
  --accent: #5b4bf3;
  --accent-soft: rgba(91, 75, 243, .15);
  --accent-wash: rgba(91, 75, 243, .06); /* zarteste Stufe: große Flächen-Hinterlegung */
  --accent-contrast: #ffffff;
  --lineage-bg: #ecfdf5;
  --lineage-border: #10b981;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-text: #b91c1c;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --success-text: #047857;
  --info-bg: rgba(59, 130, 246, 0.08);
  --info-border: rgba(59, 130, 246, 0.2);
  --info-text: #1d4ed8;
  --warning-bg: rgba(245, 158, 11, 0.08);
  --warning-border: rgba(245, 158, 11, 0.2);
  --warning-text: #b45309;
  --focus-bg: #0b1220;
  --badge: #f43f5e;
  /* Dev-Kennzeichnung: rotes Logo statt Akzent, damit Dev/Prod auf einen Blick trennbar sind. */
  --logo-dev: #ef4444;
  --shadow: rgba(15, 23, 42, .08);
  --radius-card: 16px;
  --radius-field: 8px;
  --gap: 24px;
  /* Globaler Schrift-/Zoom-Faktor (per Cookie steuerbar, siehe prefs.js). */
  --font-scale: 1;
  /* Dynamische Viewport-Höhe: berücksichtigt ein-/ausblendende Browserleisten
     und vermeidet so überall ungenutzten Leerraum. Fallback für alte Browser. */
  --vh: 100dvh;
  /* Bottom-Navigation-Höhe: 0 auf Desktop, 64px auf Mobile (+ safe-area).
     Alle padding-bottom-Kompensationen referenzieren diesen Token. */
  --bottom-nav-h: 0px;
  /* Hub-/Navigation-Tokens: Kachelfarben (Bento), Radius-Abstufung, Knob-Schatten.
     Dark: leicht entsättigt für besseren Kontrast (weißes Icon auf Kachel ≥ 3:1). */
  --tile-green: #10b981;
  --tile-pink:  #ec4899;
  --tile-amber: #f59e0b;
  --tile-blue:  #3b82f6;
  --tile-slate: #64748b;
  --shadow-md:  rgba(15, 23, 42, .28);
  --radius-tile: 12px;
  /* Motion-Design-Tokens: einheitliches Timing-System für alle Animationen.
     Duration: Fast für Micro-Interaktionen (z.B. Button-Press), Base für Übergänge,
     Slow für Seitenübergänge und Modal-Overlays. */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  /* Easing-Funktionen: ease-out für initiale Bewegungen (snappig), ease-in zum Stopp,
     ease-spring nur für kleine UI-Elemente (Badges, Pulses) — nie für Layout/Modal. */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.55,0,1,.45);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);


  /* Premium glassmorphism tokens */
  --bg-glass: rgba(255, 255, 255, 0.75);
  --bg-glass-hover: rgba(255, 255, 255, 0.45);
  --border-glass: rgba(255, 255, 255, 0.65);
  --shadow-glass: inset 0 1px 0 0 rgba(255, 255, 255, 0.65), 0 8px 32px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --blur-glass: 20px;
  --modal-bg: rgba(255, 255, 255, 0.42);
  --modal-backdrop: rgba(15, 23, 42, 0.08);
}

/* --- Dunkelmodus: redefiniert nur die Farbtoken (siehe prefs.js / Cookie) --- */
:root[data-theme="dark"] {
  --bg-app: radial-gradient(circle at 50% 30%, #171c2c 0%, #0d111d 75%, #050810 100%);
  --bg-app-fallback: #0d111d;
  --bg-body: #0d1628;        /* Dunklerer Hintergrund für Eingabefelder im Dark-Mode */
  --bg-surface: #161f33;
  --bg-subtle: #1e293b;
  --bg-hover: #273349;
  --bg-active: #2d2a66;
  --border-subtle: #2c3a52;
  --border-strong: #3b4a63;
  --grid-dot: #25324a;
  --text-primary: #e8edf6;
  --text-muted: #94a3b8;
  --accent: #8b7dff;
  --accent-soft: rgba(139, 125, 255, .22);
  --accent-wash: rgba(139, 125, 255, .08); /* zarteste Stufe: große Flächen-Hinterlegung */
  --accent-contrast: #ffffff;
  --lineage-bg: #0f2e26;
  --lineage-border: #2dd4a7;
  --danger-bg: #3a1620;
  --danger-border: #6e2435;
  --danger-text: #fca5a5;
  --success-bg: #0f2e26;
  --success-border: #1f7a5c;
  --success-text: #6ee7b7;
  --info-bg: rgba(59, 130, 246, 0.15);
  --info-border: rgba(59, 130, 246, 0.3);
  --info-text: #60a5fa;
  --warning-bg: rgba(245, 158, 11, 0.15);
  --warning-border: rgba(245, 158, 11, 0.3);
  --warning-text: #fbbf24;
  --focus-bg: #020617;
  --logo-dev: #f87171;
  --shadow: rgba(0, 0, 0, .45);
  --tile-green: #059669;
  --tile-pink:  #db2777;
  --tile-amber: #d97706;
  --tile-blue:  #2563eb;
  --tile-slate: #475569;
  --shadow-md:  rgba(0, 0, 0, .55);

  /* Premium glassmorphism tokens - Dark Mode */
  --bg-glass: rgba(22, 31, 51, 0.65);
  --bg-glass-hover: rgba(255, 255, 255, 0.06);
  --border-glass: rgba(255, 255, 255, 0.08);
  --shadow-glass: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 12px 40px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
  --blur-glass: 20px;
  --modal-bg: rgba(15, 23, 42, 0.45);
  --modal-backdrop: rgba(0, 0, 0, 0.35);
}
/* Sanfter Übergang beim Umschalten von Hell/Dunkel. */
body, .sidebar, .card, .btn, .field input, .field select, .field textarea {
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Beim Theme-Wechsel kurz eine weiche Farb-Überblendung über ALLE Elemente
   legen (prefs.js setzt diese Klasse nur für die Dauer des Wechsels auf <html>).
   So fadet der Moduswechsel angenehm, ohne normale Hover-Übergänge zu bremsen.
   WICHTIG: Die Dauer ist auf die Schalter-Animation (.switch --duration .85s)
   abgestimmt, damit Seite und Sonne/Mond-Knopf GEMEINSAM umschalten – sonst ist
   die Seite schon dunkel, während die Sonne im Schalter noch sichtbar ist. Der
   Timeout in prefs.js muss minimal länger sein, sonst springt der Wechsel hart. */
.theme-anim, .theme-anim * {
  transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out), fill var(--dur-slow) var(--ease-out) !important;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg-app-fallback);
  background: var(--bg-app);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
}

/* UIX-028: Wellen-Pattern (Ref. uiverse.io/marcelodolza/kind-panther-75),
   tonal auf Markenfarben abgestimmt — überlappende Viertelkreis-Radialgradienten. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --wave-s: 120px;
  --wave-c1: #e9ebfa; /* helles Lila-Grau, nah an --bg-app */
  --wave-c2: #dde1f6; /* eine Nuance tiefer */
  --wave-shadow: rgba(15, 23, 42, 0.05);
  --wave-g: var(--wave-c2) 4% 14%, var(--wave-c1) 14% 24%, var(--wave-c2) 22% 34%,
    var(--wave-c1) 34% 44%, var(--wave-c2) 44% 56%, var(--wave-c1) 56% 66%,
    var(--wave-c2) 66% 76%, var(--wave-c1) 76% 86%, var(--wave-c2) 86% 96%;
  background:
    radial-gradient(100% 100% at 100% 0, var(--wave-c1) 4%, var(--wave-g), var(--wave-shadow) 96%, #0000),
    radial-gradient(100% 100% at 0 100%, #0000, var(--wave-shadow) 4%, var(--wave-g), var(--wave-c1) 96%)
    var(--wave-c1);
  background-size: var(--wave-s) var(--wave-s);
  opacity: 0.55;
}
:root[data-theme="dark"] body::before {
  --wave-c1: #10162a;
  --wave-c2: #181f38;
  --wave-shadow: rgba(0, 0, 0, 0.25);
  opacity: 0.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- App shell: three-column layout --- */
.app-shell { display: flex; min-height: var(--vh); }

.sidebar {
  width: 256px;
  flex-shrink: 0;
  /* Beanstandung 6: solide wie die Cards — kein backdrop-filter/Glass mehr. */
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  box-shadow: 2px 0 8px var(--shadow);
  display: flex;
  flex-direction: column;
  padding: 12px; /* UIX-031 R3: von var(--gap)=24px auf 12px verdichtet */
  /* UIX-031 R3: Sidebar-Text skaliert mit --font-scale wie .main-inner (Owner-Nachschärfung). */
  font-size: calc(14px * var(--font-scale, 1));
  position: sticky;
  top: 0;
  /* Beanstandung 5: robuste Höhe ohne zoom-Hack.
     nav-Bereich trägt flex:1 + overflow-y:auto → scrollt intern.
     Fallback var(--vh) für Browser ohne dvh-Support. */
  height: var(--vh);
  height: 100dvh;
}

.main { flex: 1; min-width: 0; }
/* Zoom liegt auf dem inneren Wrapper. Ein gezoomter Block füllt seinen Eltern-
   bereich bereits visuell aus – keine Breiten-Korrektur nötig (sonst entstünde
   Leerraum bzw. Abschneiden rechts beim Rein-/Rauszoomen). */
.main-inner {
  padding: var(--gap);
  zoom: var(--font-scale, 1);
  /* Flex-Spalte über die volle Bildschirmhöhe: große Panels (Baum, Karte,
     Ahnenblatt) wachsen via flex:1 automatisch mit und nutzen den Platz
     restlos – kein fester Höhenabzug/Magic-Number mehr nötig. */
  display: flex;
  flex-direction: column;
  min-height: calc(var(--vh) / var(--font-scale, 1));
}

/* Vollbild-Seiten (Baum, Karte, Ahnenblatt): Höhe FEST auf eine Bildschirmseite
   begrenzen, statt nur min-height. Nur so werden die inneren Panels (overflow:auto)
   zu echten Scroll-Containern – sonst wächst der Inhalt endlos, die Suche klebt
   nutzlos fest und das Zentrieren der angesprungenen Person (panel.scrollTop) bleibt
   wirkungslos. Nur am Desktop; auf kleinen Bildschirmen scrollt die Seite normal. */
/* Punkt 6 R6: main-inner startet jetzt bei y=var(--gap) (matching Sidebar-Card).
   Padding-Y wechselt auf .main; main-inner behält nur Horizontal-Padding. */
@media (min-width: 769px) {
  .main { padding-top: var(--gap); padding-bottom: var(--gap); }
  .main-inner { padding-top: 0; padding-bottom: 0; min-height: calc((var(--vh) - 2 * var(--gap)) / var(--font-scale, 1)); }
}
@media (min-width: 1025px) {
  /* Fill-Höhe um main's Y-Padding reduziert (sonst überläuft main-inner die Card). */
  .main-inner--fill {
    height: calc((var(--vh) - 2 * var(--gap)) / var(--font-scale, 1));
    min-height: 0;
    overflow: hidden;
  }
}

/* ============================================================================
   SIDEBAR (UIX-031 R5–R7) — Card-Sidebar nach Owner-Prototyp V9, in Projekt-Tokens.
   Header (Logo + Titel + Zähler + Toggle) · Übersicht · Gruppen-Cards ·
   Footer (3 Pref-Cards + Account) · Rail-Modus (72px) mit Flyout-Untermenüs.
   Rail/Flyout nur Desktop (>=769px) — der mobile Drawer (max-width:768px) bleibt
   vollständig unangetastet.
   ============================================================================ */

/* --- Header: Logo-Button + Wortmarke + Collapse-Toggle --- */
.sidebar-header {
  flex: none;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 10px;
}
.sidebar-brand-toggle {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center; padding: 0;
  border: none; border-radius: var(--radius-field);
  background: var(--accent); color: var(--accent-contrast);
  cursor: default; font-size: 1.21em;
  /* Punkt 8 R6: Rotation via transform (dur-base); active scale bleibt extra. */
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
/* R8 P1: uicons zurück — i-Glyph zentriert im Button. */
.sidebar-brand-toggle i { line-height: 1; display: block; }
/* Dev-Umgebung: rotes Logo statt Akzent (Dev/Prod auf einen Blick). */
[data-env="dev"] .sidebar-brand-toggle { background: var(--logo-dev); }
/* P5 R7: Expand-Chevron → rechts (kein rotate). Collapse-Toggle in expanded bleibt ←. */
.sidebar-brand-toggle .brand-logo-expand { display: none; }
.sidebar-brand-toggle:active { transform: scale(.94); }
html.sidebar-rail .sidebar-brand-toggle:active { transform: scale(.94); }
.sidebar-brand-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sidebar-collapse-btn { display: none; }

/* --- Brand-Wortmarke: Auth-Seiten (login/register) + Mobile-Topbar + Sidebar-Header --- */
.brand {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  text-decoration: none !important; color: inherit !important;
  flex: 1; min-width: 0;
}
.brand:hover { text-decoration: none !important; }
.brand:hover .brand-name { color: var(--accent); }
.brand-logo {
  width: 30px; height: 30px; border-radius: var(--radius-field);
  background: var(--accent); color: var(--accent-contrast);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.brand-logo i { line-height: 1; display: block; transform: translateY(2px); }
[data-env="dev"] .brand-logo { background: var(--logo-dev); }
.brand-text { min-width: 0; overflow: hidden; }
.brand-name {
  font-weight: 600; font-size: 1em; letter-spacing: -0.015em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-count {
  font-size: 0.86em; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Navigation --- */
.nav { margin-top: 2px; display: flex; flex-direction: column; gap: 3px; flex: 1; overflow-y: auto; overflow-x: hidden; }
.nav-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 8px 6px; }

.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; border-radius: var(--radius-field);
  color: var(--text-primary); font-size: 1em; font-weight: 500; min-height: 38px;
  position: relative;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-link { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.nav-icon { font-size: 1.36em; color: var(--text-muted); display: inline-flex; flex-shrink: 0; transition: color var(--dur-fast) var(--ease-out); }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) {
  .nav-item:hover { background: var(--bg-hover); color: var(--accent); text-decoration: none; }
  .nav-item:hover .nav-icon { color: var(--accent); }
}
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Aktiv-Zustand: linker Akzent-Balken + zarte Fläche (Prototyp). */
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item.active::before {
  content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 99px; background: var(--accent);
}

.nav-badge-end {
  margin-left: auto;
  background: var(--badge); color: #fff; border-radius: 999px;
  font-size: 0.79em; padding: 1px 7px; font-weight: 700; line-height: 1.4;
}

/* --- Gruppen-Cards --- */
.nav-group {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--bg-subtle); padding: 6px; margin: 2px 0;
}
.nav-group + .nav-group { margin-top: 8px; }
.nav-group-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; min-height: 44px;
  border: none; background: transparent; border-radius: var(--radius-field);
  color: var(--text-muted); font-weight: 700; font-size: 0.79em;
  letter-spacing: .05em; text-transform: uppercase; cursor: default;
  text-align: left;
}
/* R9: Desktop/Hover-Geräte dürfen kompakter sein; Touch-Geräte ≥44px (Basis oben). */
@media (hover: hover) { .nav-group-head { min-height: 34px; } }
.nav-group-icon {
  width: 20px; display: inline-flex; justify-content: center; flex-shrink: 0;
  font-size: 1.14em; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out);
}
.nav-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-group-badge { flex-shrink: 0; }
.nav-group-chevron { display: none; }
.nav-group-body { display: flex; flex-direction: column; gap: 2px; padding: 2px; }
.nav-sub { font-size: 1em; min-height: 36px; }
.nav-sub .nav-icon { font-size: 1.21em; }
/* Gruppe enthält die aktive Seite: Icon dezent hervorheben. */
.nav-group:has(.nav-item.active) > .nav-group-head .nav-group-icon { color: var(--accent); }

/* Punkt 4 R6: In expanded mode sind Gruppen-Trigger reine Section-Header (kein Icon links).
   Im Rail-Modus bleibt das Icon als Flyout-Trigger erhalten (overriden durch rail-CSS). */
html:not(.sidebar-rail) .nav-group-head .nav-group-icon { display: none; }


/* Klappbare Gruppe (Verwaltung, nur Admin). */
.nav-group--toggle .nav-group-head { cursor: pointer; }
.nav-group--toggle .nav-group-chevron {
  display: block; margin-left: auto; color: var(--text-muted);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-group--toggle .nav-group-body { display: none; }
.nav-group--toggle.is-open .nav-group-body { display: flex; }
.nav-group--toggle.is-open .nav-group-chevron { transform: rotate(90deg); }
.nav-group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .nav-group--toggle .nav-group-head:hover { color: var(--accent); }
  .nav-group--toggle .nav-group-head:hover .nav-group-icon,
  .nav-group--toggle .nav-group-head:hover .nav-group-chevron { color: var(--accent); }
}

/* --- Footer: drei Pref-Cards + Account-Zeile --- */
.sidebar-footer { flex: none; display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.sidebar-footer-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 2px 2px; }

.pref-card {
  display: grid; align-items: center; gap: 8px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  padding: 8px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); background: var(--bg-subtle);
}
/* Punkt 9 R6: Sprach-Card ohne Icon — Segmented Control volle Breite. */
.pref-card--lang { grid-template-columns: 1fr; padding: 6px; }
.pref-icon {
  width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0;
  border-radius: var(--radius-field); background: var(--bg-surface);
  border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 1.07em;
}
.pref-icon i { line-height: 1; }
.pref-body { min-width: 0; }
.pref-title { font-size: 0.93em; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pref-value { font-size: 0.79em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hell/Dunkel-Wert rein per Attribut (kein JS): zeigt den passenden String. */
.pref-value .val-dark { display: none; }
:root[data-theme="dark"] .pref-value .val-light { display: none; }
:root[data-theme="dark"] .pref-value .val-dark { display: inline; }

/* P2 R7: Darstellung + Schriftgröße in einer Pref-Card (Border + Radius + Fläche). */
.pref-card--display {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; gap: 8px;
}
/* R8 P2: Theme-Switch breiter für visuelle Balance mit dem Font-Stepper. */
.pref-card--display .theme-switch { width: 64px; }
.pref-card--display .theme-switch.is-active::before { transform: translateX(36px); }
/* ponytail: .pref-row bleibt für andere Nutzungen; --display überschreibt für die Card. */
.pref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 2px;
}

/* Sprache: Segmented Control mit gleitendem Indikator. */
.lang-segmented {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 3px; isolation: isolate;
  border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-surface);
}
.lang-indicator {
  position: absolute; top: 3px; left: 3px; z-index: 0;
  height: calc(100% - 6px); width: 0;
  border-radius: 999px; background: var(--accent-soft); transform: translateX(0);
}
@media (prefers-reduced-motion: no-preference) {
  .lang-indicator { transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out); }
}
.lang-seg {
  position: relative; z-index: 1; display: grid; place-items: center;
  min-height: 44px; padding: 0 4px; border-radius: 999px;
  font-size: 0.86em; font-weight: 700; color: var(--text-muted);
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .lang-seg:hover { color: var(--accent); } }
.lang-seg:active { transform: scale(.92); }
.lang-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-seg.is-active { color: var(--accent); }
/* Punkt 12 R6: kein Underline aus dem globalen a:hover-Stil. */
.lang-seg, .lang-seg:hover { text-decoration: none; }

/* Darstellung: Switch mit Knob + Sonne/Mond. */
.theme-switch {
  position: relative; width: 52px; height: 30px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--bg-surface); cursor: pointer; touch-action: manipulation;
  transition: background var(--dur-base) var(--ease-out);
}
.theme-switch-track {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 7px; pointer-events: none; color: var(--text-muted); font-size: 0.79em;
}
.theme-switch-track i { line-height: 1; }
.theme-switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; z-index: 1;
  border-radius: 999px; background: var(--accent-contrast); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform var(--dur-base) var(--ease-out);
}
.theme-switch.is-active { background: var(--accent); }
.theme-switch.is-active .theme-switch-track { color: var(--accent-contrast); }
.theme-switch.is-active::before { transform: translateX(22px); }
.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Schriftgröße: −  %  + */
.font-stepper {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
  border: 1px solid var(--border-subtle); border-radius: 999px;
  background: var(--bg-surface); padding: 3px;
}
.font-btn {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  border: none; background: transparent; border-radius: 50%; cursor: pointer;
  color: var(--text-muted); font-size: 0.93em; font-family: inherit;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .font-btn:hover:not(:disabled) { background: var(--bg-hover); color: var(--accent); } }
.font-btn:active:not(:disabled) { transform: scale(.9); }
.font-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.font-btn:disabled { opacity: .35; cursor: not-allowed; }
.font-btn i { line-height: 1; }
.font-size-label {
  /* Punkt 10 R6: nicht fett, muted — Wert ist Referenz, kein Highlight. */
  min-width: 34px; text-align: center; cursor: pointer; user-select: none;
  font-weight: 400; font-size: 0.86em; color: var(--text-muted);
}
@media (hover: hover) { .font-size-label:hover { color: var(--accent); } }

/* Account-Zeile: quadratischer Avatar + Name/Rolle + Logout. */
.account-row {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border-subtle); background: var(--bg-subtle);
  /* ponytail: 16px-4px = 12px; kein echter nested-Kontext, eher visuelles Tier */
  border-radius: calc(var(--radius-card) - 4px); padding: 5px 6px;
}
.account-main {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit; border-radius: var(--radius-field); padding: 3px;
}
@media (hover: hover) { .account-main:hover { background: var(--bg-hover); } }
.account-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.account-text { display: flex; flex-direction: column; min-width: 0; }
.account-name { font-weight: 600; font-size: 0.93em; letter-spacing: -0.01em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-role { font-size: 0.79em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Avatar quadratisch abgerundet (nicht rund) — UIX-031 R5 (e). */
.avatar {
  width: 34px; height: 34px; flex-shrink: 0; overflow: hidden;
  border-radius: var(--radius-field);
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-size: 0.93em; font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials { line-height: 1; }

/* P3 R7: Logout — statischer Danger-Icon-Button (kein Hover-Expand). */
.logout-form { margin: 0; display: flex; }
.logout-btn {
  flex-shrink: 0; width: 40px; height: 44px;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--danger-border); background: var(--danger-bg);
  border-radius: var(--radius-field); cursor: pointer; color: var(--danger-text);
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .logout-btn:hover { background: color-mix(in srgb, var(--danger-bg) 80%, var(--danger-text) 20%); border-color: var(--danger-text); }
}
.logout-btn:active { transform: scale(.92); }
.logout-btn:focus-visible { outline: 2px solid var(--danger-text); outline-offset: 1px; }
/* Rail-Footer: Logout bleibt einfacher Icon-Button. */
.logout-form .rail-icon-btn { width: 44px; }

/* Rail-Footer + Flyout: nur Desktop-Rail (Basis versteckt). */
.rail-footer { display: none; }
.nav-flyout { display: none; }

/* ============================================================================
   Desktop (>=769px): schwebende Card, Rail-Modus (72px), Flyout-Untermenüs.
   ============================================================================ */
@media (min-width: 769px) {
  /* Sidebar als schwebende Card. */
  .sidebar {
    /* UIX-031 R11: 232px statt 256px — space-between in .pref-card--display
       schrumpft mit (Theme-Switch 64px + Font-Stepper ~114px + ~8px Luft). */
    width: 232px;
    z-index: 50;
    margin: var(--gap) 0 var(--gap) var(--gap);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: 0 4px 20px var(--shadow);
    height: calc(var(--vh) - 2 * var(--gap));
    height: calc(100dvh - 2 * var(--gap));
    top: var(--gap);
  }
  /* Collapse-Toggle (Header rechts) — R8 P3: gleich groß wie Logo-Button (36×36, --radius-field). */
  .sidebar-collapse-btn {
    display: grid; place-items: center; flex-shrink: 0;
    width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--border-subtle); background: var(--bg-subtle);
    color: var(--text-muted); border-radius: var(--radius-field); cursor: pointer;
    touch-action: manipulation; font-size: 1.21em;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .sidebar-collapse-btn i { display: block; line-height: 1; }
  .sidebar-collapse-btn:active { transform: scale(.92); }
  .sidebar-collapse-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (hover: hover) {
    .sidebar-collapse-btn:hover { background: var(--bg-hover); color: var(--accent); }
  }

  /* Label-Übergänge im Rail (opacity, layout-neutral). */
  .nav-label, .brand-text { transition: opacity var(--dur-fast) var(--ease-out); }

  /* === RAIL-MODUS === */
  html.sidebar-rail .sidebar { width: 72px; padding-left: 12px; padding-right: 12px; }

  /* Header: nur Logo, wird zum Ausklapp-Button. */
  html.sidebar-rail .sidebar-header { grid-template-columns: 1fr; justify-items: center; }
  html.sidebar-rail .brand-text,
  html.sidebar-rail .sidebar-collapse-btn { display: none; }
  /* Punkt 3 R6: Rail-Logo-Button in Akzentfarbe (wie ausgeklappt), Dev-rot via :has(). */
  html.sidebar-rail .sidebar-brand-toggle {
    cursor: pointer; background: var(--accent); color: var(--accent-contrast); border: none;
  }
  /* ponytail: :has() — Chrome 105+/Firefox 121+/Safari 15.4+; ≤20 family users auf modernen Browsern */
  html.sidebar-rail:has(body[data-env="dev"]) .sidebar-brand-toggle { background: var(--logo-dev); }
  html.sidebar-rail .sidebar-brand-toggle .brand-logo-tree { display: none; }
  html.sidebar-rail .sidebar-brand-toggle .brand-logo-expand { display: block; }
  @media (hover: hover) {
    html.sidebar-rail .sidebar-brand-toggle:hover { opacity: .85; }
  }

  html.sidebar-rail .nav { overflow: visible; }
  html.sidebar-rail .nav-divider { display: none; }

  /* Übersicht + Nicht-Admin-Adminlink: zentriertes Icon + Tooltip. */
  html.sidebar-rail .nav > .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
  html.sidebar-rail .nav > .nav-item .nav-label { display: none; }
  html.sidebar-rail .nav > .nav-item .nav-link { gap: 0; }
  html.sidebar-rail .nav > .nav-item.active { background: none; }
  html.sidebar-rail .nav > .nav-item.active::before { display: none; }
  html.sidebar-rail .nav > .nav-item.active .nav-icon {
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-field); padding: 8px; margin: -8px;
  }

  /* Gruppen → ein Icon (Flyout-Trigger). */
  html.sidebar-rail .nav-group { border: none; background: transparent; padding: 0; margin: 3px 0; }
  html.sidebar-rail .nav-group-body { display: none; }
  html.sidebar-rail .nav-group-head {
    justify-content: center; padding: 0; min-height: 44px; cursor: pointer;
    border-radius: var(--radius-field);
  }
  html.sidebar-rail .nav-group-title,
  html.sidebar-rail .nav-group-chevron,
  html.sidebar-rail .nav-group-badge { display: none; }
  html.sidebar-rail .nav-group-icon { width: auto; font-size: 1.36em; }
  html.sidebar-rail .nav-group:has(.nav-item.active) > .nav-group-head { background: var(--accent-soft); }
  html.sidebar-rail .nav-group:has(.nav-item.active) > .nav-group-head .nav-group-icon { color: var(--accent); }
  html.sidebar-rail .nav-group.is-flyout-open > .nav-group-head { background: var(--bg-hover); }
  /* Punkt 1 R6: Tooltip des aktiven Flyout-Triggers unterdrücken (lugt am Flyout-Rand hervor). */
  html.sidebar-rail .nav-group.is-flyout-open > .nav-group-head[data-tooltip]::after,
  html.sidebar-rail .nav-group.is-flyout-open > .nav-group-head[data-tooltip]:focus-visible::after {
    opacity: 0 !important; visibility: hidden !important;
  }

  /* Footer: Pref-Cards/Account aus, Rail-Footer an. */
  html.sidebar-rail .sidebar-footer { display: none; }
  html.sidebar-rail .rail-footer {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: none; padding-top: 8px;
  }

  /* Rail-Tooltips (Nav-Items + Gruppen-Icons). */
  html.sidebar-rail .nav-item[data-tooltip],
  html.sidebar-rail .nav-group-head[data-tooltip] { position: relative; }
  html.sidebar-rail .nav-item[data-tooltip]::after,
  html.sidebar-rail .nav-group-head[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--text-primary); color: var(--bg-surface);
    border-radius: var(--radius-field); padding: 5px 10px;
    font-size: 0.86em; font-weight: 500; white-space: nowrap; pointer-events: none;
    z-index: 200; box-shadow: 0 2px 8px var(--shadow); opacity: 0; visibility: hidden;
  }
  @media (hover: hover) {
    html.sidebar-rail .nav-item[data-tooltip]:hover::after,
    html.sidebar-rail .nav-group-head[data-tooltip]:hover::after { opacity: 1; visibility: visible; }
  }
  html.sidebar-rail .nav-item[data-tooltip]:focus-visible::after,
  html.sidebar-rail .nav-group-head[data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; }

  /* Rail-Footer-Buttons: Theme / Profil / Logout. */
  .rail-icon-btn {
    width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--border-subtle); background: var(--bg-subtle);
    border-radius: var(--radius-field); color: var(--text-muted); cursor: pointer;
    font-size: 1.21em; text-decoration: none; touch-action: manipulation;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) { .rail-icon-btn:hover { background: var(--bg-hover); color: var(--accent); } }
  .rail-icon-btn:active { transform: scale(.92); }
  .rail-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .rail-icon-btn i { line-height: 1; }
  .theme-switch-rail .icon-moon { display: none; }
  .theme-switch-rail.is-active .icon-sun { display: none; }
  .theme-switch-rail.is-active .icon-moon { display: inline-flex; }
  .rail-profile { padding: 0; }
  .rail-profile .avatar { width: 40px; height: 40px; }

  /* === FLYOUT (Rail-Untermenü) === */
  .nav-flyout {
    position: fixed; z-index: 210; display: block;
    width: min(240px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto;
    padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
    background: var(--bg-surface); box-shadow: 0 12px 40px var(--shadow);
    opacity: 0; transform: translateX(-8px) scale(.98); transform-origin: left center;
    pointer-events: none; visibility: hidden;
  }
  @media (prefers-reduced-motion: no-preference) {
    .nav-flyout { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base); }
  }
  .nav-flyout.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav-flyout-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 4px 4px 8px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 6px;
  }
  .nav-flyout-head-copy { min-width: 0; }
  .nav-flyout-head-copy strong { display: block; font-size: 0.93em; color: var(--text-primary); }
  .nav-flyout-head-copy span { display: block; font-size: 0.79em; color: var(--text-muted); margin-top: 1px; }
  .nav-flyout-close {
    flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--border-subtle); background: var(--bg-subtle); border-radius: var(--radius-field);
    color: var(--text-muted); cursor: pointer; font-size: 1em;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  @media (hover: hover) { .nav-flyout-close:hover { background: var(--bg-hover); color: var(--accent); } }
  .nav-flyout-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-flyout-body { display: flex; flex-direction: column; gap: 2px; }
  .nav-flyout-body .nav-item { justify-content: flex-start; }
  .nav-flyout-body .nav-label { display: inline; }
  /* Im Flyout keine Rail-Tooltips (Labels sind sichtbar). */
  html.sidebar-rail .nav-flyout-body .nav-item[data-tooltip]::after { display: none; }

  /* P6 R7: Aktives Flyout-Item = exakt gleiche Optik wie Sidebar-Active (Accent-Pill).
     R8 P1: color-cascade auf .nav-icon reicht (uicons erbt currentColor, kein svg-stroke). */
  .nav-flyout-body .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  .nav-flyout-body .nav-item.active .nav-icon { color: var(--accent); }
  .nav-flyout-body .nav-item.active::before { display: none; }

  /* P1+P7 R7: Rail offene Gruppen → Sub-Icons direkt (kein Gruppen-Trigger), zentriert + Pill. */
  html.sidebar-rail [data-group].is-open > .nav-group-head { display: none; }
  html.sidebar-rail [data-group].is-open > .nav-group-body { display: flex; flex-direction: column; gap: 2px; }

  /* P7 R7: Sub-Icons in rail-offenen Gruppen: zentriert + Active-Pill (wie Top-Level-Items). */
  html.sidebar-rail [data-group].is-open > .nav-group-body > .nav-item {
    justify-content: center; padding-left: 0; padding-right: 0;
  }
  html.sidebar-rail [data-group].is-open > .nav-group-body > .nav-item .nav-link { gap: 0; }
  html.sidebar-rail [data-group].is-open > .nav-group-body > .nav-item .nav-label { display: none; }
  html.sidebar-rail [data-group].is-open > .nav-group-body > .nav-item.active { background: none; }
  html.sidebar-rail [data-group].is-open > .nav-group-body > .nav-item.active::before { display: none; }
  /* R8 P1: uicons — Pill auf .nav-icon (i-Element) statt svg; color statt stroke. */
  html.sidebar-rail [data-group].is-open > .nav-group-body > .nav-item.active .nav-icon {
    background: var(--accent-soft); color: var(--accent);
    border-radius: var(--radius-field); padding: 8px; margin: -8px;
  }

  /* P8 R7: Tooltip erbt text-transform:uppercase vom Gruppen-Header → überschreiben. */
  html.sidebar-rail .nav-group-head[data-tooltip]::after { text-transform: none; letter-spacing: normal; }

  /* UIX-031 R11 P2 — Theme-Switch auf Stepper-Höhe (Desktop, ≥769px). */
  .pref-card--display .theme-switch { width: 78px; height: 42px; }
  .pref-card--display .theme-switch::before { width: 34px; height: 34px; }
  /* ponytail: translateX(36px) für 78×42 rechnerisch identisch zur Base-Regel (l. 428) — kein Extra-Override. */
}

/* P4 R7 + R9: Cross-Document View Transition (Minimal-Basis von UIX-001).
   Sidebar steht beim Sprachwechsel, Content crossfaded. Firefox ignoriert; kein Schaden.
   @view-transition ist in @media gültig (parst in allen Engines); Opt-out für reduce unten.
   view-transition-name nur hinter prefers-reduced-motion: no-preference. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .sidebar { view-transition-name: sidebar; }
  /* R8 P4: VT-Morph für Sprach-Indikator — Browser morpht ihn bei Navigation. */
  #lang-indicator { view-transition-name: lang-indicator; }
  /* Übergangs-Dauern via Token: Root+Sidebar auf --dur-fast; lang-indicator auf --dur-base
     (sichtbarer Positions-Morph darf länger gleiten als Content-Crossfade). */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-fast); }
  ::view-transition-group(sidebar), ::view-transition-old(sidebar), ::view-transition-new(sidebar) { animation-duration: var(--dur-fast); }
  ::view-transition-group(lang-indicator), ::view-transition-old(lang-indicator), ::view-transition-new(lang-indicator) { animation-duration: var(--dur-base); }
}

/* R10 P3: Logo-Spin beim Ein-/Ausklappen — transienter 360°-Spin, nur transform, kein Layout-Shift. */
@keyframes sidebar-logo-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .sidebar-brand-toggle.is-spinning i {
    animation: sidebar-logo-spin var(--dur-base) var(--ease-out);
  }
}

/* Desktop-Verdichtung nur auf Hover-Geräten (Touch-Geräte behalten 44px). */
@media (min-width: 769px) and (hover: hover) {
  .lang-seg { min-height: 32px; }
  .font-btn { width: 28px; height: 28px; }
  /* P3 R7: logout-btn Basisgröße 40×44 → auf Hover-Geräten 40×40 verdichten. */
  .logout-btn { width: 40px; height: 40px; }
  .pref-card { padding: 7px 8px; }
  /* UIX-031 R11 P2 Nachbesserung: Stepper ist im Hover-Zweig 36px hoch (28px-Buttons) — Switch zieht mit. */
  .pref-card--display .theme-switch { height: 36px; }
  .pref-card--display .theme-switch::before { width: 28px; height: 28px; }
  /* translateX: 76 (inner) − 3 (left) − 28 (knob) − 3 (right) = 42px. */
  .pref-card--display .theme-switch.is-active::before { transform: translateX(42px); }
}

/* --- Profilseite: Identitäts-Kopf (Avatar + Name + Bild-Editor-Öffner) --- */
.identity-head {
  display: flex; align-items: center; gap: 18px; margin-bottom: 22px;
  padding-bottom: 22px; border-bottom: 1px solid var(--border-subtle);
}
.identity-avatar {
  width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  position: relative; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 30px; font-weight: 700;
  box-shadow: 0 4px 14px var(--shadow);
}
.identity-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.identity-avatar-img[hidden] { display: none; }
.identity-avatar-fallback[hidden] { display: none; }
.identity-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.identity-name { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 0; }
.identity-role { font-size: 13px; color: var(--text-muted); margin: 0 0 4px; }
.identity-meta .btn { align-self: flex-start; }

/* --- Modal (natives <dialog>) ---
   Dialoge liegen im DOM innerhalb von .main-inner (zoom: var(--font-scale)),
   werden aber im Top-Layer gegen den ECHTEN Viewport positioniert. Viewport-
   Einheiten müssen deshalb – wie überall sonst im Layout – durch den Zoom
   geteilt werden, sonst ragen Modale bei Schriftskalierung ≠ 100% rechts/unten
   aus dem Bildschirm bzw. sitzen nicht mehr mittig. */
.modal {
  border: 1px solid var(--border-glass) !important; padding: 0; margin: auto;
  width: min(500px, calc((100vw - 32px) / var(--font-scale, 1)));
  max-height: calc(90dvh / var(--font-scale, 1));
  border-radius: 16px; background: var(--modal-bg) !important;
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  color: var(--text-primary); box-shadow: var(--shadow-glass), 0 24px 64px var(--shadow);
  overflow: hidden;
}
.modal--lg {
  width: min(840px, calc((100vw - 48px) / var(--font-scale, 1)));
}
.modal::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal[open] { animation: modal-pop .16s ease-out; }
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card { display: flex; flex-direction: column; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; border-bottom: 1px solid var(--border-glass);
}
.modal-title { font-size: 19px; font-weight: 700; margin: 0; }
.modal-close {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: none; background: transparent; border-radius: 50%; cursor: pointer;
  color: var(--text-muted); font-size: 18px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body { padding: 28px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 12px;
  padding: 20px 28px; border-top: 1px solid var(--border-glass);
  background: transparent;
}

/* --- Bild-Zuschnitt-Widget (Personenfoto & Avatar) --- */
.crop-widget { display: flex; flex-direction: column; gap: 10px; }
/* Editor-Layout im Modal: Vorschau zentriert über den Werkzeugen. */
.crop-editor { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.crop-tools { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
/* Runder Vorschau-Rahmen: zeigt den Bildausschnitt wie er gespeichert wird. */
.crop-frame {
  width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  position: relative; flex-shrink: 0; cursor: grab; touch-action: none;
  background: var(--bg-subtle); border: 2px dashed var(--border-subtle);
  display: grid; place-items: center; margin: 0 auto;
}
/* Große Variante im Modal für komfortables Ausrichten. */
.crop-frame--lg { width: 200px; height: 200px; }
.crop-frame:active { cursor: grabbing; }
.crop-image {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  display: none; user-select: none; -webkit-user-drag: none;
}
.crop-placeholder { color: var(--text-muted); font-size: 28px; }
/* Datei-Auswahl als gestylter Button (versteckt den nativen File-Input). */
.upload-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radius-field);
  border: 1px solid var(--border-subtle); background: var(--bg-subtle);
  color: var(--text-primary); font-size: 14px; font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.upload-btn:hover { background: var(--bg-hover); border-color: var(--accent); }
.upload-btn input[type="file"] { display: none; }
.crop-hint { font-size: 12px; color: var(--text-muted); text-align: center; }
.crop-loading-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  z-index: 10;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
  padding: 16px;
  text-align: center;
}
[data-theme="dark"] .crop-loading-overlay {
  background: rgba(25, 25, 35, 0.85);
}
.crop-loading-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 10px;
}

/* --- Headings --- */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: var(--gap); flex-wrap: wrap; }
.page-head h1,
.page-head .subtitle {
  display: none !important;
}
.page-head:not(:has(> div:nth-child(2))) {
  display: none !important;
}
h1 { font-size: 24px; font-weight: 600; margin: 0; }
.subtitle { color: var(--text-muted); font-size: 14px; margin-top: 4px; }

/* --- Cards --- */
.card {
  background: var(--bg-glass); border: 1px solid var(--border-glass);
  backdrop-filter: blur(12px);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border-radius: var(--radius-card); padding: 20px; margin-bottom: var(--gap);
  box-shadow: var(--shadow-glass);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring), border-color var(--dur-base) var(--ease-spring);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--shadow);
  border-color: var(--border-strong);
}
/* Ohne explizites font-weight erbt h2 den UA-Default (bold/700), was neben
   h1 (600) unbeabsichtigt zu fett wirkt. Gleiche Stärke wie h1 verwenden. */
.card h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.grid { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Einklappbare Karte (<details>): kompakter Kopf, der den Inhalt aufdeckt. */
.collapse-card { padding: 0; overflow: hidden; }
.collapse-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 600; color: var(--text-primary);
}
.collapse-summary::-webkit-details-marker { display: none; }
.collapse-summary span { display: inline-flex; align-items: center; gap: 8px; }
.collapse-summary i:first-child { color: var(--accent); }
.collapse-summary:hover { background: var(--bg-hover); }
/* Pfeil dreht sich beim Aufklappen. */
.collapse-chevron { transition: transform var(--dur-fast) var(--ease-out); color: var(--text-muted); }
.collapse-card[open] .collapse-chevron { transform: rotate(180deg); }
.collapse-body { padding: 12px 20px 20px; }

.stat { text-align: center; }
.stat-value { font-size: 28px; font-weight: 700; }
.stat-label { color: var(--text-muted); font-size: 13px; }



/* ── Responsive Tables ── */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Forms & Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 16px; border-radius: 12px; border: 1px solid transparent;
  font-size: 14px; font-weight: 600; font-family: inherit;
  transition: all var(--dur-base) var(--ease-spring);
}
.btn:active {
  transform: scale(0.96);
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { filter: brightness(.95); text-decoration: none; }
.btn-secondary { background: var(--bg-surface); border-color: var(--border-subtle);
  color: var(--text-primary); }
.btn-secondary:hover { background: var(--bg-hover); text-decoration: none; }
.btn-danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.btn-ghost { background: transparent; border-color: transparent; color: inherit; }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-ghost-danger { background: transparent; color: var(--danger-text); border-color: transparent; }
.btn-ghost-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Deaktivierter Button (z. B. während ein Export läuft). */
.btn:disabled { opacity: .6; cursor: progress; }

/* Unified loader: 5 choreographed squares in lila (--accent). */
.loader-squares {
  --loader-square: 26px;
  --loader-offset: 30px;
  --loader-duration: 2.4s;
  position: relative;
  display: block;
  width: calc(var(--loader-offset) * 2 + var(--loader-square));
  height: calc(var(--loader-offset) + var(--loader-square));
}
.loader-squares--small {
  --loader-square: 6px;
  --loader-offset: 7px;
  display: inline-block;
  vertical-align: middle;
}
.loader-squares--inline {
  margin-right: 6px;
}
.loader-squares--hint {
  margin-right: 4px;
}
.loader-squares span {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--loader-square);
  height: var(--loader-square);
  background-color: var(--accent);
  border-radius: calc(var(--loader-square) * 0.15);
  animation: loader-flow var(--loader-duration) ease-in-out infinite,
            loader-fadein var(--dur-slow) var(--ease-out) forwards;
  opacity: 0;
}
.loader-squares span:nth-child(1) {
  --loader-start-x: 0;
  --loader-start-y: 0;
  animation-delay: 0ms, 0ms;
}
.loader-squares span:nth-child(2) {
  --loader-start-x: var(--loader-offset);
  --loader-start-y: 0;
  animation-delay: 200ms, 100ms;
}
.loader-squares span:nth-child(3) {
  --loader-start-x: calc(var(--loader-offset) * 2);
  --loader-start-y: 0;
  animation-delay: 400ms, 200ms;
}
.loader-squares span:nth-child(4) {
  --loader-start-x: 0;
  --loader-start-y: var(--loader-offset);
  animation-delay: 600ms, 300ms;
}
.loader-squares span:nth-child(5) {
  --loader-start-x: var(--loader-offset);
  --loader-start-y: var(--loader-offset);
  animation-delay: 800ms, 400ms;
}

/* Choreographed flow across a 3x2 grid, staggered per square. */
@keyframes loader-flow {
  0% { transform: translate(var(--loader-start-x), var(--loader-start-y)); }
  8.333% { transform: translate(var(--loader-start-x), var(--loader-start-y)); }
  16.666% { transform: translate(calc(var(--loader-offset) * 2), 0); }
  25% { transform: translate(calc(var(--loader-offset) * 2), var(--loader-offset)); }
  33.333% { transform: translate(var(--loader-offset), var(--loader-offset)); }
  41.666% { transform: translate(0, var(--loader-offset)); }
  50% { transform: translate(0, 0); }
  58.333% { transform: translate(var(--loader-offset), 0); }
  66.666% { transform: translate(calc(var(--loader-offset) * 2), 0); }
  75% { transform: translate(calc(var(--loader-offset) * 2), var(--loader-offset)); }
  83.333% { transform: translate(var(--loader-offset), var(--loader-offset)); }
  91.666% { transform: translate(0, var(--loader-offset)); }
  100% { transform: translate(var(--loader-start-x), var(--loader-start-y)); }
}

@keyframes loader-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .loader-squares span {
    animation: none;
    opacity: 1;
    transform: translate(var(--loader-start-x), var(--loader-start-y));
  }
}

/* Perfekte Ausrichtung für Icons in Buttons */
button i, .btn i, .btn-icon i, .logout-btn i, .feed-edit-btn i, .feed-delete-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  height: 1em;
  width: 1em;
  vertical-align: -0.1em;
}

/* --- Forms --- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; max-width: 100%; padding: 10px 14px;
  /* Bewusst KEIN Glas: Eingabefelder brauchen soliden Grund + sichtbaren Rand,
     sonst verschwimmen sie im Light Mode mit Glas-Karten (Owner-Review UIX-026). */
  border: 1px solid var(--border-strong);
  border-radius: 12px; font-size: 15px; font-family: inherit;
  background: var(--bg-body); color: var(--text-primary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
  box-sizing: border-box; margin: 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input:not([type="checkbox"]):not([type="radio"]) {
  -webkit-appearance: none; appearance: none;
}
.table-wrap select {
  padding: 6px 32px 6px 12px; border: 1px solid var(--border-strong);
  border-radius: 8px; font-size: 13px; font-family: inherit;
  background: var(--bg-body); color: var(--text-primary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field select, .table-wrap select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%208.825c-.2%200-.4-.075-.55-.225L1.225%204.375c-.3-.3-.3-.775%200-1.075.3-.3.775-.3%201.075%200L6%206.975l3.7-3.675c.3-.3.775-.3%201.075%200%20.3.3.3.775%200%201.075L6.55%208.6c-.15.15-.35.225-.55.225z%22%20fill%3D%22%2364748B%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px !important;
}
.field input:focus, .field select:focus, .field textarea:focus, .table-wrap select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99, 102, 241), 0.15);
}

/* --- Autocomplete --- */
.autocomplete-container { position: relative; }
.autocomplete-results {
  position: absolute; top: 100%; left: 0; right: 0;
  margin: 4px 0 0; padding: 0; list-style: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  max-height: 200px; overflow-y: auto;
  z-index: 1000;
  display: none;
}
.autocomplete-results li {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
}
.autocomplete-results li:last-child { border-bottom: none; }
.autocomplete-results li:hover { background: var(--bg-hover); }
.autocomplete-results li small { font-size: 11px; color: var(--text-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }

/* --- Neue-Person: Platzierungs-Auswahl (neuer Strang vs. anhängen) --- */
.placement-choice { border: none; padding: 0; margin: 0 0 16px; }
.placement-choice legend {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  padding: 0; margin-bottom: 10px;
}
.radio-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--border-subtle); border-radius: 12px;
  cursor: pointer; transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.radio-card:hover { border-color: var(--accent); }
.radio-card input[type="radio"] { margin-top: 3px; accent-color: var(--accent); }
/* Highlight the card whose radio is selected. */
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--bg-active); }
.radio-card span { display: flex; flex-direction: column; gap: 2px; }
.radio-card strong { font-size: 14px; }
.radio-card small { color: var(--text-muted); font-size: 12px; }
.attach-target {
  padding: 14px; margin-bottom: 16px;
  background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 12px;
}
.attach-target[hidden] { display: none; }

/* --- Tables --- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
tbody tr:hover { background: var(--bg-hover); }

/* --- Badges & alerts --- */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-base) var(--ease-out); }
.badge:hover {
  transform: scale(1.05);
}
.badge-living { background: var(--success-bg); color: var(--success-text); }
.badge-deceased { background: var(--bg-hover); color: var(--text-muted); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }

.alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 8px; margin-bottom: var(--gap); font-size: 14px; line-height: 1.45; }
.alert-error { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); }
.alert-success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); }
.alert-info { background: var(--info-bg); color: var(--info-text); border: 1px solid var(--info-border); }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }

/* --- Auth pages --- */
/* --font-scale auf 1 pinnen: .auth-wrap hat kein zoom:var(--font-scale) (das liegt nur auf
   .main-inner). Ohne Pinnen würde calc(16px/var(--font-scale)) bei großer Schrift < 16px
   rendern und iOS-Fokus-Zoom auslösen. */
.auth-wrap { --font-scale: 1; position: relative; min-height: var(--vh); display: grid; place-items: center; padding: 24px; overflow: hidden; }
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; }
/* Etwas breitere Karte für die Registrierung (zweispaltige Felder). */
.auth-card--register { max-width: 560px; }

/* Sprach-Umschalter: dezenter Fuß innerhalb der Auth-Karte */
.guest-lang-switcher {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 11px; font-weight: 700;
}
.lang-link { color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) ease; }
.lang-link:hover { color: var(--accent); }
.lang-link--active { color: var(--accent); }
.lang-sep { color: var(--border-strong); user-select: none; }


/* Dezenter Hinweis am Fuß der Login-Karte (private Familienseite). */
.auth-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--border-subtle);
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.auth-note i { margin-top: 2px; color: var(--accent); flex-shrink: 0; }

/* Registrierung: zentriertes Formular, Hinweise gestapelt darunter. */
.auth-stack { display: flex; flex-direction: column; gap: var(--gap); }
.auth-main { margin-bottom: 0; }
/* Kompaktere Felder, damit alles ohne Scrollen auf eine Seite passt. */
.auth-main .field { margin-bottom: 12px; }
.auth-main .field-row { gap: 12px; }
.auth-main h2 { margin-bottom: 14px; }

/* Hinweis-Karte: gleiche weiße Fläche, mit Akzent-Leiste; Liste zweispaltig
   für eine kompakte, ansehnliche Höhe. */
.auth-aside {
  margin-bottom: 0; border-left: 3px solid var(--accent);
  font-size: 13px; line-height: 1.5; color: var(--text-muted);
}
.auth-aside-title { margin: 0 0 12px; font-weight: 700; color: var(--text-primary); }
.auth-aside-title i { color: var(--accent); margin-right: 6px; }
.auth-aside ul {
  margin: 0; padding-left: 18px;
  columns: 2; column-gap: 28px;
}
.auth-aside li { margin-bottom: 8px; break-inside: avoid; }
.auth-aside li:last-child { margin-bottom: 0; }

/* Passwortfeld mit eingebettetem Auge-Button (anzeigen/verbergen). */
.pw-field { position: relative; }
.pw-field input { padding-right: 40px; }
.pw-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 38px;
  display: grid; place-items: center; border: none; background: transparent;
  cursor: pointer; color: var(--text-muted); font-size: 15px; padding: 0;
}
.pw-toggle:hover { color: var(--accent); }

/* Auf schmalen Bildschirmen: Hinweis-Liste einspaltig. */
@media (max-width: 640px) {
  .auth-aside ul { columns: 1; }
}

/* --- Stammbaum: echte Top-Down-Baumstruktur mit Verbindungslinien --- */
/* Füllt als Flex-Spalte die restliche Höhe; Viewport darin wächst automatisch. */
.tree-card { position: relative; overflow: hidden; padding: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: 0; }

/* Werkzeugleiste über dem Baum */
.tree-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.tree-tool-group { display: flex; align-items: center; gap: 6px; }
.tree-search-group { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; }
.tree-search { max-width: 360px; padding: 2px 14px; }
.tree-search .search-input { padding: 8px 0; font-size: 14px; }
.tree-search-nav { display: flex; align-items: center; gap: 4px; }
/* hidden-Attribut hat Vorrang: ohne (mehrere) Treffer wird die Navigation ausgeblendet. */
.tree-search-nav[hidden] { display: none; }
.tree-search-count { font-size: 13px; white-space: nowrap; min-width: 56px; text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tree-zoom-label {
  min-width: 56px; text-align: center; font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: 14px;
}
.tree-hint {
  position: relative; display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; cursor: help;
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  color: var(--text-muted); font-size: 15px; flex-shrink: 0;
}
/* Icon-Glyph optisch zentrieren (Flaticon bringt eigene Metriken/Zeilenhöhe mit). */
.tree-hint > i { display: block; line-height: 1; }
.tree-hint > i::before { display: block; line-height: 1; }
.tree-hint:hover, .tree-hint:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
/* Sprechblase mit den Bedien-Tipps, erscheint bei Hover/Fokus. */
.tree-hint-bubble {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  width: max-content; max-width: 280px; padding: 10px 12px;
  background: var(--focus-bg); color: #fff; border-radius: 10px;
  font-size: 12px; line-height: 1.5; box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}
.tree-hint-bubble i { font-size: 12px; }
.tree-hint:hover .tree-hint-bubble,
.tree-hint:focus-visible .tree-hint-bubble { opacity: 1; visibility: visible; transform: translateY(0); }

/* --- Wiederverwendbares Info-Icon: Hinweis hinter Symbol + Hover/Fokus --- */
.info-hint {
  position: relative; display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; cursor: help;
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  color: var(--text-muted); font-size: 11px; vertical-align: middle;
  margin-left: 8px; flex-shrink: 0;
}
/* Icon-Glyph optisch zentrieren (Flaticon bringt eigene Metriken/Zeilenhöhe mit). */
.info-hint > i { display: block; line-height: 1; }
.info-hint > i::before { display: block; line-height: 1; }
.info-hint:hover, .info-hint:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.info-bubble {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: max-content; max-width: 280px; padding: 10px 12px;
  background: var(--focus-bg); color: #fff; border-radius: 10px;
  font-size: 12px; line-height: 1.5; font-weight: 400;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast) var(--ease-out);
}
.info-hint:hover .info-bubble,
.info-hint:focus-visible .info-bubble { opacity: 1; visibility: visible; transform: translateY(0); }

/* Bedienbarer Ausschnitt: passt sich der Fensterhöhe an, in beide Richtungen scrollbar. */
.tree-viewport {
  /* Füllt automatisch die restliche Höhe der Karte (Flex) – ohne Leerraum. */
  flex: 1;
  min-height: 0;
  overflow: auto;
  touch-action: pan-x pan-y; /* Erlaubt natives Scrollen, blockiert aber nativer Seiten-Zoom, damit wir es per JS steuern können */
  /* Dunklere Arbeitsfläche (App-Hintergrund) + Punkteraster: dadurch heben
     sich die helleren Knoten-Kacheln deutlich ab – besonders im Darkmode. */
  background-color: var(--bg-app);
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  border-radius: var(--radius-card);
  cursor: grab;
}
.tree-viewport.is-dragging { cursor: grabbing; }
.tree-viewport.is-dragging a { pointer-events: none; }

/* Bühne, die gezoomt wird. */
.tree-stage {
  transform-origin: top center;
  transition: transform var(--dur-fast) var(--ease-out);
  display: inline-block; min-width: 100%;
  padding: 24px;
}
.tree-stage.is-pinching {
  transition: none !important; /* Kein Delay beim nativen Pinch, sonst "schwimmt" der Zoom */
}
.tree-topdown { display: inline-block; min-width: 100%; position: relative; }
/* SVG-Overlay: zeichnet die Verbindungslinien aus den echten Knoten-
   Positionen (siehe tree.js). Liegt hinter den Karten, fängt keine Klicks ab
   und skaliert mit der gezoomten Bühne mit. Ersetzt die früheren, fragilen
   CSS-Pseudoelement-Linien (die je nach Zeilenhöhe Lücken zeigten). */
.tree-links {
  position: absolute; top: 0; left: 0;
  pointer-events: none; overflow: visible;
}
.tree-links path { fill: none; stroke: var(--border-strong); stroke-width: 2; }
/* Jede Ebene ist eine waagerechte Reihe von Knoten. Das Padding schafft den
   senkrechten Raum, in den das SVG-Overlay die Linien zeichnet. */
.tree-topdown ul {
  display: flex; justify-content: center; list-style: none;
  padding-top: 32px; margin: 0; position: relative;
}
.tree-topdown > ul { padding-top: 0; }
.tree-topdown li {
  list-style: none; position: relative; text-align: center;
  padding: 32px 10px 0;
}
/* Zugeklappter Ast: Kinder ausblenden. */
.tree-topdown li.collapsed > ul { display: none; }

/* Knoten-Kachel im Baum. */
.tnode {
  position: relative;
  /* Über dem SVG-Linien-Overlay liegen, damit Karten die Linien verdecken. */
  z-index: 1;
  display: inline-flex; flex-direction: column; gap: 2px; align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  /* Farbiger oberer Akzent je Generation – macht Ebenen sofort erkennbar. */
  border-top: 3px solid var(--lvl, var(--accent));
  border-radius: 12px; padding: 8px 14px; white-space: nowrap;
  box-shadow: 0 1px 3px var(--shadow);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* Hover: Kachel leicht anheben und Akzent verstärken (klare Interaktivität). */
.tnode:hover {
  border-color: var(--lvl, var(--accent));
  box-shadow: 0 0 0 2px var(--accent-soft), 0 4px 10px var(--shadow);
  transform: translateY(-1px);
}
/* Hauptlinien-Highlighting entfernt – alle Personen werden gleich dargestellt. */
.tnode.is-deceased .tnode-name { color: var(--text-muted); }
/* Suchtreffer hervorheben. */
.tnode.is-match { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(109, 94, 247, .35); }
.tnode.is-first-match { background: var(--bg-active); }
/* Name in heller Vordergrundfarbe statt Akzent-Lila (bessere Lesbarkeit). */
.tnode-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.tnode-name:hover { color: var(--accent); }
.tnode-dates { font-size: 12px; color: var(--text-muted); }
/* Generations-Badge als farbige Pille je Ebene (wie im Ahnenblatt). */
.tnode-gen {
  font-size: 10px; text-transform: uppercase; font-weight: 700;
  color: var(--accent-contrast);
  background: var(--lvl, var(--accent));
  border-radius: 999px; padding: 1px 8px; letter-spacing: .3px;
}
.tnode-spouse { font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
.tnode-spouse i { color: var(--lineage-border); font-size: 12px; }

/* Klapp-Schalter unten an der Kachel. */
.tnode-toggle {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  /* Rahmen in Hintergrundfarbe „schneidet“ die Verbindungslinie sauber (Hell/Dunkel). */
  background: var(--accent); color: #fff; border: 2px solid var(--bg-app);
  display: grid; place-items: center; font-size: 12px; padding: 0;
  box-shadow: 0 1px 3px var(--shadow); z-index: 2;
}
.tnode-toggle:hover { filter: brightness(.95); }
.tnode-toggle i { line-height: 1; }
/* Zugeklappt: Pfeil nach unten + Anzahl der verborgenen Kinder. */
.collapsed > .tnode > .tnode-toggle i { transform: rotate(180deg); }
.collapsed > .tnode > .tnode-toggle::after {
  content: attr(data-count); position: absolute; top: -8px; right: -8px;
  background: var(--badge); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 0 5px; min-width: 16px; line-height: 16px;
}

/* --- Map --- */
/* Karte füllt die restliche Höhe (Flex); die Leaflet-Fläche zieht 100% mit. */
.map-card { flex: 1; min-height: 0; margin-bottom: 0; }
#map { height: 100%; min-height: 0; border-radius: var(--radius-card); border: 1px solid var(--border-subtle); }

/* --- Explorer (Ahnenblatt): two-column data sheet --- */
.explorer-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
  /* Eine Zeile, die GENAU die verfügbare Höhe füllt (minmax(0,1fr) erlaubt das
     Schrumpfen unter die Inhaltshöhe) – erst dadurch werden die Panels darunter
     zu echten Scroll-Containern statt endlos zu wachsen. */
  grid-template-rows: minmax(0, 1fr);
  gap: 0; align-items: stretch;
  /* Füllt die restliche Höhe unter dem Seitenkopf; Panels scrollen intern. */
  flex: 1; min-height: 0;
}
/* Tree panel is its own scroll container. Its top padding is removed so the
   sticky toolbar can sit flush at the very top with NO content peeking above or
   below it. The list and empty state carry their own inner padding instead. */
.expl-tree-panel { min-height: 0; overflow: auto; margin: 0 var(--gap) 0 0; padding: 0; }
.expl-sheet-panel { min-height: 0; overflow: auto; margin: 0 0 0 var(--gap); }

/* Kopfzeile der Baumansicht mit Auf-/Zuklappen-Buttons. */
.expl-tree-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.expl-tree-tools { display: flex; gap: 6px; }
.btn-sm { padding: 5px 10px; font-size: 13px; }

/* Werkzeugleiste (Titel + Klapp-Buttons + Suche) klebt beim Scrollen oben.
   Negative Ränder ziehen sie über die Card-Polsterung, damit kein Inhalt
   oberhalb durchscrollt und der Hintergrund bis an die Kanten reicht. */
/* Toolbar (title + collapse buttons + search) sticks to the top while the tree
   scrolls beneath it. It sits at top:0 with full inner padding and no negative
   margins, so the panel's rounded corners clip it cleanly and nothing scrolls
   through above it. */
.expl-tree-toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 10px;
  margin: 0; padding: 16px 20px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}

/* Suchleiste im Ahnenblatt: volle Breite unter dem Titel. */
.expl-search-bar {
  display: flex; align-items: center; gap: 8px;
}
.expl-search { flex: 1; min-width: 160px; max-width: none; padding: 2px 14px; }
.expl-search .search-input { padding: 8px 0; font-size: 14px; }

/* Schieberegler zwischen Baumansicht und Datenblatt. */
.expl-resizer {
  align-self: stretch; width: 8px; cursor: col-resize; border-radius: 999px;
  background: var(--border-subtle); transition: background var(--dur-fast) var(--ease-out);
  position: sticky; top: var(--gap);
}
.expl-resizer:hover, .expl-resizer:focus-visible { background: var(--accent); outline: none; }

/* Zeile mit Klapp-Schalter + Knoten. */
.expl-row { display: flex; align-items: center; gap: 4px; }
.expl-toggle {
  flex-shrink: 0; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: 4px; cursor: pointer; color: var(--text-muted); padding: 0;
  font-size: 14px;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.expl-toggle i {
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.expl-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.expl-toggle-spacer { flex-shrink: 0; width: 24px; height: 24px; }
/* Eingeklappter Ast: Kinder ausblenden, Pfeil drehen. */
.expl-item.collapsed > .expl-children { display: none; }
.expl-item.collapsed > .expl-row .expl-toggle { transform: rotate(-90deg); }


/* Nested tree with dashed level guides (kept from the PoC). */
/* The list carries the panel's inner padding (the panel itself has none so the
   sticky toolbar can sit flush at the top). */
.expl-tree { list-style: none; margin: 0; padding: 12px 20px 20px; }
.expl-children { list-style: none; margin: 6px 0; padding: 0; }
/* Empty state ("no persons yet") needs the same inner padding as the list. */
.expl-tree-panel > .muted { padding: 16px 20px; }
.expl-children { padding-left: 26px; border-left: 1px dashed var(--border-strong); margin-left: 8px; }
.expl-item { position: relative; margin: 6px 0; }

.expl-node {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--lvl, var(--accent));
  border-radius: 999px; padding: 6px 14px 6px 10px;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.expl-node:hover { background: var(--bg-hover); }
.expl-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Suchtreffer hervorheben (darkmode-fähig über Tokens). */
.expl-node.is-match { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* Aktiver Treffer bzw. von außen angesprungene Person: deutlich abgesetzt. */
.expl-node.is-current {
  background: var(--bg-active); border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 4px rgba(109, 94, 247, .18);
}
/* Kurzer Aufmerksamkeits-Puls beim Springen von einer anderen Seite. */
.expl-node.is-jump { animation: expl-pulse 1.4s ease-out 2; }
@keyframes expl-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent-soft); }
  50% { box-shadow: 0 0 0 4px var(--accent), 0 0 0 8px var(--accent-soft); }
}
.expl-level {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--lvl, var(--accent)); border-radius: 999px; padding: 2px 8px;
}
.expl-text { font-size: 13px; }
.expl-dates { color: var(--text-muted); font-size: 12px; }
.expl-spouse { color: var(--text-muted); font-size: 12px; }

/* Per-level accent colours (cycled), mirroring the PoC palette. */
.lvl-0 { --lvl: #0b7a75; }
.lvl-1 { --lvl: #a16207; }
.lvl-2 { --lvl: #7c3aed; }
.lvl-3 { --lvl: #15803d; }
.lvl-4 { --lvl: #c2410c; }
.lvl-5 { --lvl: #2563eb; }
.lvl-6 { --lvl: #be185d; }

/* Detail sheet cards on the right. */
.sheet-title { font-size: 16px; margin: 4px 0 16px; }
.sheet-card {
  border: 1px solid var(--border-subtle); border-radius: 12px;
  padding: 16px; margin-bottom: 16px; background: var(--bg-subtle);
}
.sheet-card-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px;
}
.sheet-pid { font-variant-numeric: tabular-nums; }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sheet-field { display: flex; flex-direction: column; gap: 4px; }
.sheet-field-wide { grid-column: 1 / -1; }
.sheet-field label {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
}
.sheet-value {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-field); padding: 9px 11px; font-size: 14px;
  min-height: 38px;
}
.sheet-actions { margin-top: 12px; }

/* --- Ahnenblatt: ausklappbare Bearbeitung & Beziehungen --- */
.edit-block {
  border: 1px solid var(--border-subtle); border-radius: 12px;
  margin-bottom: 16px; background: var(--bg-surface); overflow: hidden;
}
.edit-block > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px; list-style: none;
  background: var(--bg-subtle); user-select: none;
}
.edit-block > summary::-webkit-details-marker { display: none; }
.edit-block > summary:hover { background: var(--bg-hover); }
.edit-block > summary i { color: var(--accent); }
.edit-block[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.edit-form { padding: 16px; }

/* Beziehungslisten im Datenblatt */
.rel-title { margin: 10px 0 4px; font-weight: 600; font-size: 13px; }
.rel-empty { margin: 0 0 6px; }
.rel-list { list-style: none; margin: 0 0 8px; padding: 0; }
.rel-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.rel-list li i { color: var(--text-muted); font-size: 13px; }

.sheet-delete { margin-top: 8px; }

/* --- Ahnenblatt-Datenblatt: prominent & einfach --- */
/* Abstammungslinie (Wurzel -> Person) als klickbarer Breadcrumb-Pfad. */
.lineage-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.lineage-crumb {
  font-size: 12px; display: inline-flex; align-items: center;
  color: var(--text-muted); text-decoration: none;
  white-space: nowrap; transition: color var(--dur-fast) var(--ease-out);
}
a.lineage-crumb:hover { color: var(--accent); text-decoration: underline; }
.lineage-crumb.is-current {
  color: var(--accent-contrast); background: var(--accent); font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
}
.lineage-sep { color: var(--text-muted); font-size: 11px; line-height: 1; margin: 0 2px; opacity: 0.7; }
.crumb-years {
  font-size: 10px; opacity: 0.75; margin-left: 4px; font-weight: 400;
}
.lineage-crumb.is-current .crumb-years {
  opacity: 0.9;
}

/* Kopf mit Profilfoto + Name. */
.sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--gap); }
.person-photo-container {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.person-photo {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
  font-size: 28px; border: 2px solid var(--border-subtle);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-photo.is-clickable {
  cursor: zoom-in;
  transition: filter var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.person-photo.is-clickable:hover {
  filter: brightness(.95);
  border-color: var(--accent);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Geburtstage-Tabelle: kleiner Rund-Avatar vor dem Namen, gleiches Muster wie .person-photo. */
.birthday-name-cell { display: flex; align-items: center; gap: 10px; }
.birthday-avatar {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
  font-size: 16px; border: 1px solid var(--border-subtle);
}
.birthday-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-edit-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast, #ffffff);
  border: 2px solid var(--bg-surface);
  display: grid;
  place-items: center;
  font-size: 11px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  z-index: 5;
  padding: 0;
}
.avatar-edit-badge:hover {
  transform: scale(1.12);
  filter: brightness(1.08);
}
.avatar-edit-badge i {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet-head .sheet-title { margin: 0; }
/* Ehepartner ganz oben, deutlich hervorgehoben: Akzent-Wash + Akzent-Kante,
   damit der Bereich nicht mit den Eckdaten darunter verschwimmt (UIX-026). */
.spouse-banner {
  background: var(--accent-wash);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 18px;
}
.spouse-banner-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--accent); margin-bottom: 10px;
}
.spouse-banner-label i { color: var(--accent); }
.spouse-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* Große, gut anklickbare Karte je Ehepartner. */
.spouse-chip {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: 10px 14px; text-decoration: none;
  color: var(--text-primary); font-weight: 600; font-size: 15px; cursor: pointer;
  box-shadow: 0 1px 3px var(--shadow);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .spouse-chip:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--shadow);
    transform: translateY(-1px);
    text-decoration: none;
  }
  .spouse-chip:hover .spouse-chip-chevron { color: var(--accent); transform: translateX(2px); }
}
.spouse-chip:active { transform: scale(.98); }
.spouse-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.spouse-avatar {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
  font-size: 19px; border: 1px solid var(--border-subtle);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.spouse-avatar img { width: 100%; height: 100%; object-fit: cover; }
.spouse-chip small { color: var(--text-muted); font-weight: 500; }
.spouse-chip-chevron {
  color: var(--text-muted); font-size: 17px; display: inline-flex;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.spouse-hint { margin: 10px 0 0; font-size: 12px; }


/* Eckdaten als klare Definitionsliste. */
.fact-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
  margin: 0 0 18px;
}
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact-wide { grid-column: 1 / -1; }
.fact dt {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted);
}
.fact dd { margin: 0; font-size: 15px; }

/* Eltern & Kinder kompakt nebeneinander. */
.family-mini {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px;
}
.family-mini h4 { margin: 0 0 6px; font-size: 13px; color: var(--text-muted); }
.mini-link {
  display: block; padding: 4px 0; font-size: 14px;
  color: var(--accent); text-decoration: none;
}
.mini-link:hover { text-decoration: underline; }

/* Große, eindeutige Aktions-Buttons (ausklappbar). */
.action-list { display: flex; flex-direction: column; gap: 10px; }
.action {
  border: 1px solid var(--border-subtle); border-radius: 12px;
  background: var(--bg-surface); overflow: hidden;
}
.action > summary {
  cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: space-between;
  list-style: none; user-select: none;
}
.action > summary::-webkit-details-marker { display: none; }
.action > summary:hover { background: var(--bg-hover); }
.action-label { display: inline-flex; align-items: center; gap: 8px; }
.action-label i { color: var(--accent); font-size: 16px; }
.action .chev { color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.action[open] .chev { transform: rotate(180deg); }
.action[open] > summary { border-bottom: 1px solid var(--border-subtle); }
.action-form { padding: 16px; }

/* Löschen klar abgesetzt am Ende. */
.action-delete { margin-top: 4px; }
.action-delete-btn { width: 100%; justify-content: center; }

/* Modern Action Buttons instead of Collapsibles */
.action-section {
  margin-bottom: var(--gap);
}
.action-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .08em;
  margin: 0 0 10px 4px;
}
.action-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-family: inherit;
  transition: all var(--dur-base) var(--ease-out);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}
.action-btn::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  box-shadow: 0 6px 16px var(--shadow);
}
.action-btn:hover::after {
  opacity: 1;
}
.action-btn:active {
  transform: scale(0.995);
}
.action-btn-content {
  display: flex;
  align-items: center;
  gap: 16px;
}
.action-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--bg-subtle);
  color: var(--accent);
  font-size: 20px;
  flex-shrink: 0;
  transition: all var(--dur-base) var(--ease-out);
}
.action-btn:hover .action-btn-icon {
  background: var(--accent);
  color: var(--accent-contrast, #ffffff);
}
.action-btn-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.action-btn-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.action-btn-desc {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.4;
}
.action-btn .fi-rr-angle-small-right {
  font-size: 20px;
  color: var(--text-muted);
  transition: all var(--dur-base) var(--ease-out);
}
.action-btn:hover .fi-rr-angle-small-right {
  color: var(--text-primary);
  transform: translateX(4px);
}

/* --- Rendered markdown docs (changelog / readme) --- */
.doc-content { line-height: 1.7; }
.doc-content h1, .doc-content h2, .doc-content h3 { margin-top: 1.4em; }
.doc-content h1 { font-size: 22px; }
.doc-content h2 { font-size: 18px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 6px; }
.doc-content h3 { font-size: 15px; }
.doc-content code {
  background: var(--bg-subtle); padding: 2px 6px; border-radius: 6px; font-size: 13px;
}
.doc-content pre {
  background: #0b1220; color: #e2e8f0; padding: 14px 16px;
  border-radius: 10px; overflow-x: auto;
}
.doc-content pre code { background: transparent; padding: 0; color: inherit; }
.doc-content ul { padding-left: 22px; }
.doc-content table { margin: 12px 0; }
/* Bilder in Markdown-Posts nie breiter als ihr Container (R2). */
.doc-content img { max-width: 100%; height: auto; }

@media (max-width: 1024px) {
  /* Volle Höhe auf Mobilgeräten nutzen für Vollbildansichten */
  .app-shell {
    height: var(--vh) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
  }
  .main {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Nur bei Vollbild-Ansichten das Scrollen der Hauptseite verhindern */
  .main:has(.main-inner--fill) {
    overflow: hidden !important;
  }
  .main-inner--fill {
    flex: 1 !important;
    min-height: 0 !important;
    height: calc(var(--vh) - (var(--gap) * 2)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 12px !important;
  }
  .explorer-layout { 
    grid-template-columns: 1fr !important; 
    grid-template-rows: 1fr !important; 
    flex: 1 !important; 
    min-height: 0 !important; 
    height: calc(100% - 58px) !important; 
  }
  .expl-resizer { display: none; }
  .expl-tree-panel { 
    margin: 0 !important; 
    height: calc(100% - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px)) !important; 
    min-height: 0 !important; 
    overflow-y: auto !important; 
    display: flex !important;
    flex-direction: column !important;
  }
  .expl-sheet-panel { 
    margin: 0 !important; 
    height: calc(100% - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px)) !important; 
    min-height: 0 !important; 
    overflow-y: auto !important; 
  }
  .tree-viewport {
    height: calc(100% - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px)) !important;
  }
  .sheet-grid { grid-template-columns: 1fr; }
  .fact-list { grid-template-columns: 1fr; }
  .family-mini { grid-template-columns: 1fr; }
}

/* --- Search results --- */
.search-results { list-style: none; padding: 0; margin: 8px 0 0; }
.search-results li a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--text-primary); }
.search-results li a:hover { background: #f1f5f9; text-decoration: none; }

/* --- Dashboard quick search box (full width, pill-shaped) --- */
.search-box {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--bg-glass); border: 1px solid var(--border-glass);
  border-radius: 999px; padding: 4px 18px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.search-box:focus-within {
  background: var(--bg-surface); border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-box .search-icon { font-size: 20px; color: var(--text-muted); flex-shrink: 0; }
.search-input {
  flex: 1; width: 100%; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 16px; color: var(--text-primary);
  padding: 12px 0;
}
.search-input::placeholder { color: var(--text-muted); }

.muted { color: var(--text-muted); }
.right { text-align: right; }
.mt { margin-top: var(--gap); }

/* --- Mobile-Kopfleiste & Drawer (standardmäßig versteckt) --- */
.mobile-topbar { display: none; }
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  z-index: 1990; border: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
.sidebar-close-btn { display: none; }

/* ── Mobile Header + Navigation (UIX-032) ───────────────────────────────────
   Ein Menüsystem auf Mobile: Bottom-Bar. Hamburger/Drawer entfallen.
   Sidebar bleibt off-screen (Desktop-Nav unverändert, ≥769px). */
@media (max-width: 768px) {
  .field-row { grid-template-columns: 1fr; }

  /* Fixed Header: volle Viewportbreite, oben/links/rechts kantenbündig,
     unten beide Ecken mit --radius-card abgerundet, Glass-Optik. */
  .mobile-topbar {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
    min-height: 60px;
    background: var(--bg-glass);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border: 1px solid var(--border-glass); border-top: 0;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: var(--shadow-glass);
  }

  /* Brand-Link (Baum-Logo + Familienname) — Haupt-Seiten.
     Kein flex:1: Brand nimmt natürliche Breite, startet immer links. */
  .mobile-brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none !important; color: inherit !important;
    touch-action: manipulation;
  }
  .mobile-brand .brand-logo {
    width: 28px; height: 28px; border-radius: var(--radius-field); font-size: 15px;
    flex: none;
  }
  .mobile-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-field); }

  /* Kontext-Pill (Sub-Seiten) — rechts, „‹ Seitenname", eine Ebene hoch.
     Nur im DOM wenn _msub gesetzt (Jinja). Verdrängt die Marke nie:
     margin-left:auto schiebt sie nach rechts, max-width kappt sie. */
  .mobile-context {
    margin-left: auto; flex: none; max-width: 50%;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 7px 13px 7px 8px; min-height: 34px;
    border: 0; border-radius: 999px;
    background: var(--accent-wash); color: var(--accent);
    font-size: 13.5px; font-weight: 600;
    text-decoration: none !important; cursor: pointer;
    font-family: inherit; touch-action: manipulation;
    transition: background var(--dur-fast) var(--ease-out);
  }
  .mobile-context .fi { font-size: 17px; flex: none; }
  .mobile-context-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-context:active { background: var(--accent-soft); }
  .mobile-context:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Main: Platz für den fixed Header freischaufeln */
  .main { padding-top: calc(60px + env(safe-area-inset-top, 0px)); }

  /* Sidebar bleibt off-screen (Desktop-Nav; auf Mobile nie zugänglich) */
  .app-shell { flex-direction: column !important; }
  .sidebar {
    position: fixed; top: 0; right: 0; left: auto;
    height: var(--vh); height: 100dvh;
    width: 85%; max-width: 280px;
    z-index: 2000; transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
    border-left: 1px solid var(--border-subtle);
    border-right: none;
    padding-bottom: calc(var(--gap) + env(safe-area-inset-bottom, 0px));
  }

  /* Größere Touch-Ziele in der Navigation. */
  .nav-item { padding: 13px 14px; font-size: 1.14em; }
}

@media (hover: hover) and (max-width: 768px) {
  .mobile-brand:hover .brand-name { color: var(--accent); }
  .mobile-context:hover { background: var(--accent-soft); }
}

/* === Bildergalerie (Personen) ==============================================
   Karussell-Look: horizontale Scroll-Snap-Leiste mit großen Hochformat-Karten,
   Glas-Overlays (backdrop-filter) für Captions/Aktionen. Rein natives CSS. */
.gallery { margin: 22px 0 28px; }
.gallery-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; margin: 0 0 12px; color: var(--text-primary);
}
.gallery-title i { color: var(--accent); }
.gallery-grid {
  display: flex; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  padding: 4px 4px 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* Firefox */
}
.gallery-grid::-webkit-scrollbar { display: none; }
.gallery-item {
  --gallery-radius: 14px;
  margin: 0; position: relative;
  flex: 0 0 auto; width: 148px;
  scroll-snap-align: start;
  border-radius: var(--gallery-radius); overflow: hidden;
  background: var(--bg-subtle);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.gallery-thumb {
  display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; cursor: zoom-in;
  border: none; background: var(--bg-subtle); position: relative;
  border-radius: var(--gallery-radius); overflow: hidden;
}
.gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--gallery-radius);
  transition: transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .gallery-item:hover .gallery-thumb img { transform: scale(1.05); }
}
/* Caption als Glas-Leiste über dem unteren Bildrand */
.gallery-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 9px 14px;
  font-size: 12px; font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(24, 26, 32, .38);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0 0 var(--gallery-radius) var(--gallery-radius);
  pointer-events: none;              /* Klick geht durch aufs Bild */
  z-index: 4;
}
/* Glas-Buttons (Stern / Stift / Papierkorb) + Hauptfoto-Badge: EINE Basisgröße
   für alle Icon-Kreise über dem Foto, damit Badge und Aktionen bei jedem
   Zustand (Hover, Touch) exakt gleich groß bleiben statt gegeneinander zu
   driften. */
.gallery-badge,
.gallery-action {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; font-size: 13px; color: #fff;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.gallery-badge {
  position: absolute; top: 10px; left: 10px; z-index: 10;
  background: color-mix(in srgb, var(--accent) 62%, transparent);
  border-color: rgba(255, 255, 255, .4);
}
/* EINE Flex-Reihe für alle Icon-Kreise über dem Foto: Badge ODER
   Stern-Button links, Bearbeiten/Löschen rechts. Der Badge liegt bei
   Schreibrechten mit in dieser Reihe (statisch statt absolut), damit
   Favoriten- und Nicht-Favoriten-Kacheln identisch verteilt sind. */
.gallery-actions {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex; justify-content: flex-end; align-items: flex-start;
  gap: 8px;
  z-index: 10;
}
.gallery-actions .gallery-badge {
  position: static;
}
.gallery-actions > :first-child {
  margin-right: auto; /* schiebt Badge bzw. Stern-Button ans linke Ende */
}
/* Bearbeiten + Löschen als ein Flex-Paar mit gleichmäßigem Abstand statt
   zweier einzeln positionierter Buttons mit abgestimmten right-Werten. */
.gallery-actions-end {
  display: flex; gap: 8px;
}
/* Desktop: Aktions-Buttons erst bei Hover einblenden. Bewusst auf den
   Buttons statt dem Container, damit der Badge in der Reihe immer
   sichtbar bleibt. */
.gallery-action {
  cursor: pointer;
  opacity: 0;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.gallery-item:hover .gallery-action,
.gallery-actions:focus-within .gallery-action {
  opacity: 1;
}
/* Nur auf Geräten mit echtem Hover aktivieren – sonst bleibt der Button auf
   Touch nach dem Tap dauerhaft eingefärbt/vergrößert hängen (sticky hover)
   und sprengt die gleichmäßige Verteilung der drei Icons. */
@media (hover: hover) {
  .gallery-action:hover { background: var(--accent); border-color: transparent; transform: scale(1.08); }
  .gallery-action--danger:hover { background: #dc2626; }
}
/* fi-rr-star/fi-sr-star haben mehr Innenabstand im Glyph als Stift/Papierkorb
   und wirken dadurch bei gleicher font-size kleiner – Ausgleich über
   gezielten Bonus, für Badge (fi-sr-star) und Aktion (fi-rr-star) gleich. */
.gallery-badge .fi-sr-star,
.gallery-action .fi-rr-star { font-size: 1.15em; }
/* Touch-Geräte haben kein Hover – Aktionen dauerhaft einblenden */
@media (hover: none) {
  .gallery-action { opacity: 1; }
  .gallery-badge,
  .gallery-action { width: 32px; height: 32px; font-size: 15px; }
}
/* Handy: Die Kachel ist für "links-Gruppe / rechts-Gruppe" mit festem
   8px-Gap zu schmal. Da Badge bzw. Stern-Button immer als erstes Kind in
   der Reihe liegen, werden alle drei Kreise auf jeder Kachel gleich
   verteilt: space-between verteilt den Restplatz gleichmäßig auf beide
   Lücken, gap: 0 verhindert ein Überlaufen der Kachel. */
@media (max-width: 768px) and (hover: none) {
  .gallery-actions {
    justify-content: space-between;
    gap: 0;
  }
  .gallery-actions > :first-child {
    margin-right: 0;
  }
  .gallery-actions-end {
    display: contents;
  }
}

/* === Bild-Upload-Zone (geteilt: Feed-Composer & Personen-Galerie) ========== */
.image-upload-zone {
  border: 2px dashed var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-subtle);
  transition: all var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 120px;
}
.upload-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.image-upload-zone:hover, .image-upload-zone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.image-upload-zone .upload-icon {
  font-size: 32px;
  color: var(--text-muted);
  transition: color var(--dur-base) var(--ease-out);
}
.image-upload-zone:hover .upload-icon, .image-upload-zone.dragover .upload-icon {
  color: var(--accent);
}
.image-upload-zone .upload-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.image-upload-zone .upload-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.image-upload-zone .upload-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}
/* Vorschau der ausgewählten Bilder unterhalb der Zone (vor dem Hochladen) */
.upload-previews {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.upload-preview {
  position: relative; width: 64px; height: 64px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--border-subtle);
}
.upload-preview img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
}
.upload-preview-remove {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: none; border-radius: 50%; font-size: 10px;
  background: rgba(15, 23, 42, .75); color: #fff;
}
.upload-preview-remove:hover { background: #dc2626; }

/* === Lightbox (große Bildansicht) ==========================================
   Frosted-Glass-Vollbild: stark geblurter Hintergrund, Glas-Buttons. */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 24px; background: rgba(8, 12, 20, .78);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
.lightbox[hidden] { display: none; }
.lightbox-stage {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  max-width: min(92vw, 1100px); max-height: 90vh;
}
.lightbox-image {
  max-width: 100%; max-height: 80vh; object-fit: contain;
  border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
}
.lightbox-caption {
  color: #f1f5f9; margin-top: 14px; font-size: 13.5px; text-align: center;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14);
}
.lightbox-counter { color: #94a3b8; margin-top: 8px; font-size: 12px; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px;
}
.lightbox-nav, .lightbox-close {
  flex-shrink: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  font-size: 20px; color: #fff;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox-nav { width: 48px; height: 48px; }
.lightbox-nav:hover, .lightbox-close:hover { background: rgba(255, 255, 255, .28); }

@media (max-width: 768px) {
  .gallery-item { width: 124px; }
  .lightbox { padding: 12px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 17px; }
}

/* === Mobile & Tablet Responsive Optimizations === */

/* --- Explorer Mobile Tabs --- */
.explorer-tabs {
  display: none;
}

@media (max-width: 1024px) {
  .explorer-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    background: var(--bg-subtle);
    padding: 3px;
    border-radius: 9px;
    border: 1px solid var(--border-subtle);
  }
  .explorer-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none !important;
    background: transparent !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: none !important;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
  }
  .explorer-tab-btn:hover {
    color: var(--text-primary);
  }
  .explorer-tab-btn.active {
    background: var(--bg-surface) !important;
    color: var(--accent) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  }
  .explorer-tab-btn i {
    font-size: 13px;
  }
  
  /* Hide the panel that is not active on mobile/tablet */
  .explorer-layout:not(.tab-sheet) .expl-sheet-panel {
    display: none !important;
  }
  .explorer-layout.tab-sheet .expl-tree-panel {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* Hide button text on mobile to fit icons */
  .btn-text {
    display: none !important;
  }
  
  /* Compact tree/explorer toolbars */
  .tree-toolbar {
    gap: 8px !important;
  }
  .tree-tool-group {
    gap: 4px !important;
  }
  .tree-search-group {
    min-width: 100% !important;
    margin-bottom: 4px;
  }
  .tree-search {
    max-width: none !important;
  }
  .tree-zoom-label {
    min-width: 44px !important;
    font-size: 13px;
  }
  
  .expl-tree-toolbar {
    padding: 12px 14px 10px !important;
  }
  .expl-search-bar {
    gap: 6px !important;
  }
  .expl-search {
    padding: 2px 12px !important;
  }
  .expl-search .search-input {
    padding: 6px 0 !important;
  }
  
  .tree-search-nav {
    gap: 2px !important;
  }
  .tree-search-count {
    min-width: 48px !important;
    font-size: 12px !important;
  }
  
  /* Reduce explorer tree indentation */
  .expl-children {
    padding-left: 14px !important;
    margin-left: 4px !important;
  }
  
  /* Compact explorer nodes */
  .expl-node {
    padding: 4px 10px 4px 8px !important;
    gap: 6px !important;
  }
  .expl-level {
    padding: 1px 6px !important;
    font-size: 10px !important;
  }
  .expl-text {
    font-size: 12px !important;
  }
  .expl-dates, .expl-spouse {
    font-size: 11px !important;
  }
  
  /* Spacing in the main area */
  .main-inner {
    padding: 12px !important;
  }
}

/* iOS Safari auto-zooms on any touch device if rendered font-size < 16px.
   any-pointer: coarse fires when any input is coarse — catches iPad with
   Magic Keyboard (primary=fine, touch=coarse) that pointer:coarse misses. */
@media (any-pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,
  textarea {
    font-size: calc(16px / var(--font-scale, 1)) !important;
  }
}

@media (max-width: 768px) {
  /* Modale als Bottom-Sheet: sliden von unten ein, kleben am unteren Rand.
     Viewport-Einheiten durch --font-scale teilen (siehe Kommentar bei .modal). */
  .modal,
  .modal--lg {
    width: calc(100vw / var(--font-scale, 1)) !important;
    max-width: calc(100vw / var(--font-scale, 1)) !important;
    max-height: calc(92dvh / var(--font-scale, 1)) !important;
    margin: auto 0 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .modal[open] { animation: modal-slide-up .22s ease-out; }

  .modal-card {
    max-height: calc(92dvh / var(--font-scale, 1)) !important;
  }
  /* Dekorativer Griff-Balken */
  .modal-card::before {
    content: ""; display: block; flex: 0 0 auto; width: 40px; height: 4px;
    margin: 8px auto 0; border-radius: 2px; background: var(--border-subtle);
  }

  .modal-body {
    padding: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .modal-head,
  .modal-foot {
    padding: 14px 16px !important;
  }

  .modal-foot {
    flex-direction: column-reverse;
    gap: 8px;
    /* iPhone-Homebar darf die Buttons nicht überlagern */
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .modal-foot .btn {
    width: 100%;
    justify-content: center;
  }
}

@keyframes modal-slide-up {
  from { opacity: .6; transform: translateY(24px); }
  to   { opacity: 1;  transform: translateY(0); }
}

/* ── Floating Action Button (FAB) ──────────────────────────────────────────── */
.fab-new-post {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, #7c3aed) 100%);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 50%, transparent),
              0 2px 6px rgba(0,0,0,.25);
  transition: transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
  outline-offset: 3px;
}

.fab-new-post::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  animation: fab-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes fab-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.6); opacity: 0;  }
  100% { transform: scale(1.6); opacity: 0;  }
}

/* Hover-Effekte NUR auf Geräten mit echter Maus (nicht auf Touch-Screens).
   iOS/Android lösen :hover beim Antippen aus – rotate(90deg) rotierte
   dadurch den FAB + den Tooltip mit → sichtbarer Bug auf Mobile. */
@media (hover: hover) {
  .fab-new-post:hover {
    transform: scale(1.12) rotate(90deg);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 60%, transparent),
                0 4px 10px rgba(0,0,0,.3);
  }

  .fab-new-post:hover .fab-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Tap-Feedback auf Touch (kein Hover, aber :active funktioniert zuverlässig). */
.fab-new-post:active {
  transform: scale(.93);
  transition: transform var(--dur-fast) var(--ease-out);
}

/* Tooltip-Basis (Desktop mit Maus). */
.fab-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  white-space: nowrap;
  background: var(--focus-bg);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  transform: translateY(-50%) translateX(4px);
}

/* Tooltip: nur auf Desktop mit Maus sinnvoll – auf Touch ausblenden. */
@media (hover: none) {
  .fab-tooltip { display: none; }
}


/* ── Admin Filter Form ── */
.admin-filter-form {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: 16px;
  align-items: end;
}

/* Mobile: FAB sits above the Bottom Nav */
@media (max-width: 768px) {
  .admin-filter-form {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .admin-filter-form .btn {
    width: 100%;
    justify-content: center;
  }
  .fab-new-post {
    bottom: calc(var(--bottom-nav-h) + var(--gap) + 42px + env(safe-area-inset-bottom, 0px));
    /* Centered precisely above the 5th bottom-nav item (avatar) */
    right: calc(10% - 10px);
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
}

/* ── Bottom Navigation Bar ──────────────────────────────────────────────────
   Sichtbar nur auf Mobile (≤ 768px). Auf Desktop: display:none via Token 0px.
   Architektur: --bottom-nav-h Token steuert alle Abstands-Kompensierungen.  */

.bottom-nav {
  /* Standardmäßig versteckt – nur auf Mobile via Media-Query aktiviert. */
  display: none;
}

@media (max-width: 768px) {
  /* Token für diese Breakpoint-Breite aktivieren. */
  :root {
    --bottom-nav-h: 54px;
    --gap: 16px;
  }

  /* min-height aufheben, damit kurze Seiten keinen künstlichen globalen Scrollbalken erzwingen */
  .main-inner {
    min-height: auto;
  }

  /* Vollbild-Seiten exakt über dem schwebenden Menü begrenzen
     (60px = fixed Topbar-Höhe; safe-area-top = Notch-Kompensation) */
  .main-inner--fill {
    height: calc(var(--vh) - 60px - env(safe-area-inset-top, 0px) - var(--bottom-nav-h) - 64px - env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Innere Scroll-Bereiche nutzen 100% der gekürzten Elternhöhe */
  .explorer-layout {
    height: calc(100% - 140px) !important;
  }
  .expl-tree-panel,
  .expl-sheet-panel,
  .tree-viewport {
    height: 100% !important;
  }
  .expl-tree-panel,
  .expl-sheet-panel {
    padding-bottom: calc(var(--bottom-nav-h) + var(--gap) + 20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Safari ignoriert padding-bottom auf overflow:auto-Containern oft (siehe
     .main-inner::after oben) – echtes Spacer-Element statt Padding erzwingt
     den Platz auch hier zuverlässig, sonst verschwinden die letzten Aktions-
     Buttons unter der schwebenden Bottom-Nav. */
  .expl-tree-panel::after,
  .expl-sheet-panel::after {
    content: "";
    display: block;
    height: calc(var(--bottom-nav-h) + var(--gap) + 20px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Bottom Nav Container ── */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: calc(var(--gap) + env(safe-area-inset-bottom, 0px));
    left: 16px;
    right: 16px;
    padding: 0 4px;
    z-index: 1000;
    height: var(--bottom-nav-h);
    border-radius: 999px;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-glass);
  }

  /* ── Tab-Items (Links + More-Button) ── */
  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    /* 48px Mindest-Touch-Target (innerhalb der 64px-Leiste) */
    min-height: 48px;
    padding: 6px 4px;
    color: var(--text-muted);
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    /* 300ms Tap-Delay auf iOS/Android eliminieren */
    touch-action: manipulation;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    border-radius: 0;
    position: relative;
  }

  .admin-dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* ── Table to Cards (Admin) ── */
  .table-wrap table { width: 100%; display: block; }
  .table-wrap thead { display: none; }
  .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap tr { border-bottom: 2px solid var(--border-subtle); padding: 12px 0; }
  .table-wrap tr:last-child { border-bottom: none; }
  .table-wrap td { 
    display: flex; flex-direction: column; align-items: flex-start; 
    padding: 12px 12px; border-bottom: 1px solid var(--border-subtle); text-align: left;
  }
  .table-wrap td:last-child { border-bottom: none; }
  .table-wrap td::before { 
    content: attr(data-label); 
    display: block;
    font-size: 11px; font-weight: 700; color: var(--text-muted); 
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 6px; text-align: left;
  }
  .table-wrap td > * { text-align: left; width: 100%; }
  .table-wrap td > form { display: flex; justify-content: flex-start; }
  .table-wrap td form select { width: 100%; max-width: 100%; }
  
  /* Buttons in table cells */
  .table-wrap td .btn { padding: 8px 16px; font-size: 14px; width: 100%; justify-content: center; }


  .bottom-nav-item:hover { color: var(--accent); }

  /* Tap-Feedback: sofortige visuelle Bestätigung */
  .bottom-nav-item:active {
    opacity: 0.7;
    transform: scale(0.94);
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }

  /* Aktiver Tab */
  .bottom-nav-item.active {
    color: var(--accent);
  }



  .bottom-nav-icon {
    font-size: 20px;
    line-height: 1;
    display: block;
  }

  .bottom-nav-label {
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  /* ── Du-Tab: Mini-Avatar als Icon, Accent-Ring aktiv, Badge ── */
  .bottom-nav-you { position: relative; }
  /* ponytail: span-Container für initials UND img — overflow:hidden clippt
     intrinsische Bildgröße zuverlässig. img bekommt display:block statt grid. */
  .mini-avatar {
    width: 25px; height: 25px; border-radius: 50%; overflow: hidden;
    background: var(--accent-soft); color: var(--accent);
    display: grid; place-items: center; font-size: 10px; font-weight: 700;
    outline: 2px solid transparent; outline-offset: 1.5px;
    transition: outline-color var(--dur-fast) var(--ease-out);
    flex: none;
  }
  .mini-avatar--img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .bottom-nav-you.active .mini-avatar { outline-color: var(--accent); }
  .bottom-nav-badge {
    position: absolute; top: 4px; right: calc(50% - 18px);
    min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
    background: var(--badge); color: var(--accent-contrast);
    font-size: 9.5px; font-weight: 700;
    display: grid; place-items: center; pointer-events: none;
  }

  /* ── Main-Content: Platz für Bottom Nav freischaufeln ── 
     Safari ignoriert oft padding-bottom am Scroll-Container. 
     Ein echtes Element (::after) am Ende von .main-inner (der flex:1 hat) erzwingt den Platz zuverlässig. */
  .main-inner:not(.main-inner--fill)::after {
    content: "";
    display: block;
    height: calc(var(--bottom-nav-h) + var(--gap) + 32px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
  }

  /* ── Touch-Action global: 300ms Tap-Delay eliminieren ── */
  a, button, [role="button"], .nav-item, label {
    touch-action: manipulation;
  }

  /* ── Schrift: Mobile bleibt auf 14px (gleich Desktop).
     Nur interaktive Elemente (Nav, Buttons) werden größer für Touch. ── */
  body { font-size: 14px; }
  .subtitle { font-size: 14px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }

  /* ── Touch-Targets auf Apple/Google HIG Standard ── */
  /* Buttons: min 44px Höhe */
  .btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 15px;
  }
  .btn-sm {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 13px;
  }

  /* Modal Close / Icon-Buttons */
  .modal-close { width: 44px; height: 44px; font-size: 20px; }
  .logout-btn  { width: 44px; height: 44px; }

  /* Font-Size-Control Buttons */
  .font-btn {
    width: 36px;
    height: 36px;
  }

  /* Sidebar Nav-Items: 48px Touch-Target */
  .nav-item {
    min-height: 48px;
    padding: 13px 16px;
    font-size: 1.14em;
  }

  /* ── Tap-Feedback: visuelle Bestätigung für alle interaktiven Elemente ── */
  .btn:active {
    transform: scale(0.96);
    opacity: 0.85;
    transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }

  /* ── page-head: vertikal stapeln statt Side-by-Side ── */
  .page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--gap);
  }

  /* ── Seitentitel ausblenden: Mobile-Header übernimmt Orientierung (UIX-032).
     H1 + Untertitel des page-head verstecken; Inhalte beginnen direkt. ── */
  .page-head > div > h1,
  .page-head > div > .subtitle { display: none; }

  /* ── Tabellen: Tabellen haben bereits width:100% global.
     Kein display:block – das bricht das native Tabellenlayout.
     Nur overflow-x auf einem Wrapper wäre korrekt, aber da die
     Geburtstags-Tabelle mit 3 Spalten passt, brauchen wir nichts. ── */


  /* Geburtstags-Tabelle: unwichtige Spalten auf kleinen Screens ausblenden.
     Auf Mobile zählen Name, Anlass und Tage – das Datum kann weg. */
  .dash-col-date { display: none; }

  /* Stammbaum/Explorer: "Alles aufklappen/zuklappen" Buttons ausblenden. 
     Verbrauchen zu viel vertikalen Platz auf Mobile. */
  .expl-tree-tools, .tree-collapse-tools { display: none !important; }


  /* ── Inertia-Scrolling für alle Scroll-Container ── */
  .modal-body,
  .sidebar,
  .main {
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Hub-Seite /you ─────────────────────────────────────────────────────────
   Profil-Hero · Bento-2×2 · Einstellungs-Liste · Abmelden.
   Farben/Radien/Tokens aus Projekt-Tokens — keine Literale. */

/* Hero-Karte */
.hub-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 160% at 15% 0%, var(--accent-soft) 0%, transparent 55%),
    radial-gradient(110% 150% at 100% 100%, var(--accent-wash) 0%, transparent 60%),
    var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 20px 18px 16px; margin-bottom: var(--gap);
  box-shadow: 0 1px 2px var(--shadow);
}
.hub-hero-top { display: flex; align-items: center; gap: 14px; }
.hub-avatar {
  width: 62px; height: 62px; border-radius: 50%; flex: none; overflow: hidden;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 20px; font-weight: 700;
  border: 2px solid var(--bg-surface); box-shadow: 0 0 0 2px var(--accent);
}
.hub-avatar--img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-hero-info { flex: 1; }
.hub-hero-name { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.hub-hero-role { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.hub-hero-cta {
  margin-left: auto; align-self: flex-start; flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-wash); border: 0; border-radius: 999px;
  padding: 8px 13px; cursor: pointer; font-family: inherit;
  text-decoration: none !important; touch-action: manipulation;
}
.hub-hero-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-hero-link {
  display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0;
  text-decoration: none !important; color: inherit;
  transition: opacity var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}
.hub-hero-link:active { opacity: .75; }
.hub-hero-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-field); }

/* Bento 2×2 */
.hub-bento {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--gap);
}
.hub-bt {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px; min-height: 96px;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  text-decoration: none !important; color: var(--text-primary);
  box-shadow: 0 1px 2px var(--shadow);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}
.hub-bt:active { transform: scale(.97); background: var(--bg-active); }
.hub-bt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-tile {
  width: 34px; height: 34px; border-radius: var(--radius-tile);
  display: grid; place-items: center; color: var(--accent-contrast); font-size: 16px; flex: none;
}
/* uicons: ::before-Glyphe hat Baseline-Offset → line-height:1 + display:block kollabiert
   die Line-Box. translateY(1px) korrigiert den gemessenen Ink-Offset von −1,0…−1,5 px
   (Canvas-Messung: |offsetY| ≤ 0,5 px nach Fix). */
.hub-tile .fi { display: block; line-height: 1; transform: translateY(1px); }
.hub-tile--green { background: var(--tile-green); }
.hub-tile--pink  { background: var(--tile-pink); }
.hub-tile--amber { background: var(--tile-amber); }
.hub-tile--blue  { background: var(--tile-blue); }
.hub-bt-name { font-size: 14px; font-weight: 600; }
.hub-bt-sub  { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.hub-bt-badge {
  position: absolute; top: 12px; right: 12px;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--badge); color: var(--accent-contrast);
  font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center;
}

/* Einstellungen-Liste */
.hub-group-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin: 18px 4px 8px;
}
.hub-list-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); overflow: hidden;
  box-shadow: 0 1px 2px var(--shadow);
}
.hub-list-card--mt { margin-top: 18px; }
.hub-li {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; min-height: 52px;
  background: none; border: 0; border-top: 1px solid var(--border-subtle);
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--text-primary); cursor: default; text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.hub-li:first-child { border-top: 0; }
.hub-li:active { background: var(--bg-active); }
.hub-li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hub-li--danger { justify-content: center; font-weight: 600; color: var(--danger-text); cursor: pointer; width: 100%; }
.hub-li-icon { color: var(--text-muted); font-size: 17px; width: 24px; flex: none; text-align: center;
  display: block; line-height: 1; transform: translateY(1px); }

/* Navigations-Zeilen (Verwaltungs-Landing): getöntes Tile + Titel/Subline +
   Chevron. Erben das Zeilen-Chrom von .hub-li; --nav macht die Zeile klickbar. */
.hub-li--nav { cursor: pointer; text-decoration: none !important; }
.hub-tile--sm { width: 30px; height: 30px; font-size: 15px; }
.hub-tile--slate { background: var(--tile-slate); }
.hub-li-main { flex: 1; min-width: 0; }
.hub-li-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; font-weight: 400; }
.hub-li-chev { color: var(--text-muted); font-size: 16px; flex: none; }
.hub-li-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--badge); color: var(--accent-contrast);
  font-size: 11.5px; font-weight: 700; display: grid; place-items: center; flex: none;
}

/* Landing zeigt die Liste nur Mobile; Desktop behält das bestehende Dashboard. */
.admin-landing { display: none; }
@media (max-width: 768px) {
  .admin-landing { display: block; }
  .admin-dashboard-desktop { display: none; }
}

/* Dark-Mode-Switch (gleitender Knopf, Sonne/Mond) */
.hub-tswitch {
  margin-left: auto; flex: none; position: relative;
  width: 58px; height: 32px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: var(--bg-subtle);
  cursor: pointer; padding: 0;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  touch-action: manipulation;
}
.hub-tsw-icon {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--text-muted);
  transition: opacity var(--dur-base) var(--ease-out);
}
.hub-tsw-sun { left: 9px; }
.hub-tsw-moon { right: 9px; opacity: .45; }
.hub-tsw-knob {
  position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--bg-surface);
  box-shadow: 0 1px 4px var(--shadow-md);
  display: grid; place-items: center; font-size: 12px;
  transition: transform var(--dur-base) var(--ease-out);
}
.hub-tsw-knob-moon { display: none; color: var(--accent); }
.hub-tsw-knob-sun  { color: var(--tile-amber); }
/* Light (aria-checked=false) */
.hub-tswitch[aria-checked="false"] .hub-tsw-sun { opacity: 0; }
/* Dark (aria-checked=true) */
.hub-tswitch[aria-checked="true"] {
  background: var(--accent); border-color: var(--accent);
}
.hub-tswitch[aria-checked="true"] .hub-tsw-knob { transform: translateX(26px); }
.hub-tswitch[aria-checked="true"] .hub-tsw-moon { opacity: 0; }
.hub-tswitch[aria-checked="true"] .hub-tsw-knob-sun  { display: none; }
.hub-tswitch[aria-checked="true"] .hub-tsw-knob-moon { display: block; }
.hub-tswitch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sprache Segmented */
.hub-seg {
  margin-left: auto; display: flex;
  background: var(--bg-subtle); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 2.5px;
}
.hub-seg-btn {
  border: 0; background: none; font-family: inherit; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  padding: 5px 9px; border-radius: 999px; min-height: 27px;
  text-decoration: none !important; display: inline-flex; align-items: center;
  touch-action: manipulation;
}
.hub-seg-btn.on { background: var(--accent); color: var(--accent-contrast); }
.hub-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Schriftgröße Stepper */
.hub-stepper { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.hub-stepper button {
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: var(--bg-subtle);
  color: var(--text-primary); font-size: 14px; cursor: pointer;
  touch-action: manipulation; font-family: inherit;
}
.hub-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }
.hub-stepper button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hub-stepper [data-font-label] { font-size: 12px; color: var(--text-muted); min-width: 40px; text-align: center; }

/* Hub Desktop: zentrierter Container mit max-width */
@media (min-width: 769px) {
  .hub-hero,
  .hub-bento,
  .hub-group-label,
  .hub-list-card { max-width: 560px; }
}

@media (hover: hover) {
  .hub-bt:hover { background: var(--bg-hover); }
  .hub-li--nav:hover { background: var(--bg-hover); }
  .hub-li--danger:hover { background: var(--bg-hover); }
  .hub-hero-cta:hover { opacity: .85; }
  .hub-hero-link:hover { opacity: .85; }
  .hub-seg-btn:hover:not(.on) { background: var(--bg-hover); color: var(--text-primary); }
  .hub-tswitch:hover { background: var(--bg-hover); }
  .hub-tswitch[aria-checked="true"]:hover { background: var(--accent); }
  .hub-stepper button:hover:not(:disabled) { background: var(--bg-hover); }
}

@media (prefers-reduced-motion: reduce) {
  .hub-bt, .hub-tswitch, .hub-tsw-knob, .hub-tsw-icon, .hub-seg-btn, .hub-hero-link { transition: none; }
}

/* ── Modern Toggle Switch ── */
.toggle-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-hover);
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.toggle-switch:hover {
  background: var(--bg-surface);
  border-color: var(--accent);
}

.toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.toggle-input {
  appearance: none;
  -webkit-appearance: none;
  width: 44px !important;
  height: 24px !important;
  background-color: var(--text-muted);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
  transition: background-color var(--dur-base) var(--ease-out);
  margin: 0;
}

.toggle-input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.toggle-input:checked {
  background-color: var(--accent);
}

.toggle-input:checked::after {
  transform: translateX(20px);
}

/* Globale Scrollbalken auf allen Geräten komplett ausblenden, Scroll-Funktionalität bleibt aktiv */
* {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE 10+ */
}
*::-webkit-scrollbar {
  display: none !important; /* Safari, Chrome, Opera, Edge */
  width: 0 !important;
  height: 0 !important;
}

/* Verhindert das Überlagern durch das Menüband/FAB auf Mobilgeräten bei geöffneten Modals */
body:has(dialog[open]) .bottom-nav,
body:has(dialog[open]) .fab-new-post {
  display: none !important;
}

/* --- Filter actions & icon buttons --- */
.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border-radius: 12px;
}
.btn-icon i {
  font-size: 16px;
  line-height: 1;
  display: block;
}

.btn-clear-filter {
  color: var(--text-muted);
}
.btn-clear-filter:hover {
  background-color: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

@media (min-width: 769px) {
  .admin-filter-form .btn-icon,
  .audit-filter-form .btn-icon {
    width: 42px;
    height: 42px;
  }
}

/* Screenreader-only utility class (visually hidden) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Motion-Design: globaler Kill-Switch für Nutzer mit `prefers-reduced-motion: reduce`.
   Disables all animations and transitions instantly (0.01ms). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Toast-Feedback (P6-8/UIX-008): dezente Bestätigung nach Aktionen --- */
#toasts {
  position: fixed; z-index: 200;
  right: var(--gap); bottom: calc(var(--bottom-nav-h) + var(--gap));
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
/* Seiten mit Floating-Action-Button (Feed): Toast weicht dem FAB nach oben aus. */
body:has(.fab-new-post) #toasts {
  bottom: calc(var(--bottom-nav-h) + var(--gap) + 76px);
}
.toast {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--bg-glass); border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border-radius: 12px; padding: 10px 16px 10px 12px;
  color: var(--text-primary); font-size: 14px; font-weight: 500;
  animation: toast-in var(--dur-base) var(--ease-spring) both;
}
.toast--out { animation: toast-out 150ms var(--ease-in) forwards; }
.toast-icon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px;
}
.toast--success .toast-icon {
  background: var(--success-bg); color: var(--success-text);
  border: 1px solid var(--success-border);
}
.toast--error .toast-icon {
  background: var(--danger-bg); color: var(--danger-text);
  border: 1px solid var(--danger-border);
}
.toast--info .toast-icon {
  background: var(--info-bg); color: var(--info-text);
  border: 1px solid var(--info-border);
}
/* Haken zeichnet sich nach dem Einflug selbst (Stroke-Draw). */
.toast-check path {
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: toast-check-draw var(--dur-slow) var(--ease-out) 120ms forwards;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes toast-check-draw { to { stroke-dashoffset: 0; } }
/* Mobil: mittig über der Bottom-Nav. */
@media (max-width: 1024px) {
  #toasts { right: 0; left: 0; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast--out { animation: none; }
  .toast--out { opacity: 0; }
  .toast-check path { animation: none; stroke-dashoffset: 0; }
}

/* ── Übersicht-Suchfeld: Card-Hülle mobil entfernen ──
   Desktop: glassmorphism .card (Abstand, Schatten, Blur).
   Mobil: nur das Pill/Rect-Eingabefeld direkt auf dem Seitengrund. */
@media (max-width: 768px) {
  .search-card {
    background: none; border: none; padding: 0;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-radius: 0; margin-bottom: 12px;
    transform: none !important;
  }
  .search-card .search-box {
    border-radius: var(--radius-tile);
    padding: 12px 14px;
  }
  .search-card .search-input { padding: 0; }
}