/*
 * dos-core.css — Referenzimplementierung DESIGN_GUIDELINES.md
 * ==============================================================
 * Zentrale UI-Grundlage fuer ALLE Bereiche (Site/App/Admin). Bereichs-CSS darf
 * NUR ergaenzen, nie diese Datei duplizieren (AGENTS.md Regel 9).
 *
 * Architektur (DESIGN §1, AGENTS.md D11): Diese Datei definiert den kompletten
 * Token-Katalog aus §1.1 als :root-FALLBACK mit den noble-dark-Werten. Die vom
 * Backend-Compiler erzeugten Theme-Dateien (public/assets/themes/<slug>.<v>.css)
 * ueberschreiben dieselben Variablen scope-genauer per [data-dos-theme="..."]
 * und gewinnen dank hoeherer CSS-Spezifitaet/spaeterer Ladereihenfolge. Faellt
 * das Theme-Stylesheet aus (Compiler-Fehler, Sprint-0-Stand ohne DB-Themes),
 * bleibt die Seite dank dieses Fallbacks trotzdem in einem konsistenten,
 * dunklen, kontrastreichen Zustand nutzbar (kein kaputtes Layout).
 *
 * Komponenten referenzieren AUSSCHLIESSLICH --dos-*-Tokens, nie Hex-Werte
 * (DESIGN §1 "Review-Finding"). Ausnahme sind rein strukturelle Formeln ohne
 * Themebezug (z. B. "Pill" = 999px Radius — das ist kein gestalterischer
 * Radius-Wert, sondern die mathematische Definition von "vollstaendig rund").
 */

/* -------------------------------------------------------------------------
 * 1. CSS-Reset (Minimum — DESIGN nennt kein eigenes Reset-Kapitel, aber ein
 *    konsistentes Box-Modell ist Voraussetzung fuer alle folgenden Komponenten)
 * ---------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* -------------------------------------------------------------------------
 * 2. Token-Katalog — Pflichtumfang DESIGN §1.1 (noble-dark als Fallback-Werte)
 * ---------------------------------------------------------------------- */
:root {
  /* Akzent (Amethyst — Startwert, admin-editierbar ueber Theme-Editor PR 13) */
  --dos-primary:        #8b5fc7;
  --dos-primary-light:  #a37fd9;
  --dos-primary-dark:   #6f47a8;
  --dos-primary-glow:   rgba(139, 95, 199, 0.28);

  /* Status (theme-uebergreifend semantisch identisch: gruen=ok, amber=Warnung, rot=Gefahr/Stopp, blau=Info) */
  --dos-success: #2fbf8f;
  --dos-warning: #e6a23c;
  --dos-danger:  #e5484d;
  --dos-info:    #4d8fe6;

  /* Hintergrund & Glas */
  --dos-bg:              radial-gradient(120% 120% at 20% 0%, #1b1430 0%, #0e0b18 55%, #0a0812 100%);
  --dos-bg-color:        #0e0b18;
  --dos-glass-bg:        rgba(30, 24, 48, 0.72);
  --dos-glass-bg-strong: rgba(22, 17, 36, 0.94);
  --dos-glass-border:    rgba(255, 255, 255, 0.07);
  --dos-glass-blur:      blur(18px) saturate(160%);
  --dos-glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.55);
  --dos-dropdown-bg:     rgba(20, 16, 32, 0.98); /* fast opak: Lesbarkeit über Inhalt */

  /* Text */
  --dos-text:       #ece8f4;
  --dos-text-muted: #9a92ad;
  --dos-text-light: #635d75;

  /* Geometrie & Motion (klinisch-streng ueberschreibt z. B. Radien) */
  --dos-radius-card:  16px;
  --dos-radius-btn:   10px;
  --dos-radius-input: 8px;
  --dos-radius-sm:    6px;
  --dos-transition:   all 0.2s ease;

  /* Typografie (DESIGN §4 — Apple-naher System-Font-Stack, kein Webfont-Download) */
  --dos-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  /*
   * RGB-Tripel-Helfer NUR fuer die Bootstrap-Bruecke (Abschnitt 4): Bootstrap
   * braucht --bs-*-rgb als "r, g, b"-Liste fuer rgba()-Interpolation intern.
   * Aus denselben Hex-Werten wie oben abgeleitet (Amethyst/Status) — bei
   * Aenderung der Hex-Werte MUSS dieser Block manuell mitgepflegt werden
   * (kein eigener Katalog-Eintrag in DESIGN §1.1, daher hier separat markiert).
   */
  --dos-primary-rgb: 139, 95, 199;
  --dos-success-rgb: 47, 191, 143;
  --dos-warning-rgb: 230, 162, 60;
  --dos-danger-rgb:  229, 72, 77;
  --dos-info-rgb:    77, 143, 230;

  /*
   * "On-Color"-Helfer: Textfarbe FUER Flaechen, die bereits eine Statusfarbe als
   * Hintergrund tragen (Buttons, Badges, Consent-Ampel). Ebenfalls kein eigener
   * Katalog-Eintrag in DESIGN §1.1, aber notwendig, um die "nie Hex-Werte in
   * Komponenten"-Regel (§1) auch hier einzuhalten — Status-Tokens sind laut §1.1
   * theme-uebergreifend FEST, daher sind auch diese Kontrastwerte projektweit fest
   * und gehoeren zentral hierher statt verstreut als Hex in Komponenten-Regeln.
   */
  --dos-on-primary: #ffffff;
  --dos-on-success: #06231a;
  --dos-on-warning: #2b1c04;
  --dos-on-danger:  #ffffff;
  --dos-on-info:    #ffffff;
}

/* -------------------------------------------------------------------------
 * 3. Basis-Layout
 * ---------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  font-family: var(--dos-font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--dos-text);
  background: var(--dos-bg);
  /* fixed statt scroll: verhindert helle Nahtstellen beim Ueberscrollen (iOS-Bounce);
     bekannte iOS-Problematik siehe DESIGN §2 — Pseudo-Element-Workaround nur bei
     tatsaechlich beobachtetem Rendering-Fehler nachruesten (Minimalismus). */
  background-attachment: fixed;
  background-color: var(--dos-bg-color);
}

main {
  display: block;
}

h1, h2, h3, h4 {
  letter-spacing: -0.02em;
  line-height: 1.25;
}

a {
  transition: var(--dos-transition);
}

/* Sichtbarer Fokusring ueberall, nie entfernen (DESIGN §8 — a11y-Pflicht) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--dos-primary-glow);
  border-radius: var(--dos-radius-sm);
}

/* -------------------------------------------------------------------------
 * 4. Bootstrap-Bruecke — Bootstrap-Variablen auf dos-Tokens mappen
 *    (DESIGN §5: "nie Bootstrap-Blau sichtbar"; Bootstrap 5.3 liest diese
 *    --bs-*-Variablen fuer Farben, Radien, Body-Hintergrund etc.)
 * ---------------------------------------------------------------------- */
:root {
  --bs-body-font-family: var(--dos-font);
  --bs-body-bg: var(--dos-bg-color);
  --bs-body-color: var(--dos-text);
  --bs-border-color: var(--dos-glass-border);
  --bs-border-radius: var(--dos-radius-btn);
  --bs-border-radius-sm: var(--dos-radius-sm);
  --bs-border-radius-lg: var(--dos-radius-card);

  --bs-primary: var(--dos-primary);
  --bs-primary-rgb: var(--dos-primary-rgb);
  --bs-link-color: var(--dos-primary-light);
  --bs-link-hover-color: var(--dos-primary);

  --bs-success: var(--dos-success);
  --bs-success-rgb: var(--dos-success-rgb);
  --bs-warning: var(--dos-warning);
  --bs-warning-rgb: var(--dos-warning-rgb);
  --bs-danger: var(--dos-danger);
  --bs-danger-rgb: var(--dos-danger-rgb);
  --bs-info: var(--dos-info);
  --bs-info-rgb: var(--dos-info-rgb);
}

/* -------------------------------------------------------------------------
 * 5. Liquid Glass (DESIGN §2)
 * ---------------------------------------------------------------------- */
.dos-glass,
.dos-glass-strong {
  background: var(--dos-glass-bg);
  backdrop-filter: var(--dos-glass-blur);
  -webkit-backdrop-filter: var(--dos-glass-blur); /* Safari/iOS zwingend (DESIGN §2) */
  border: 1px solid var(--dos-glass-border);
  border-radius: var(--dos-radius-card);
  box-shadow: var(--dos-glass-shadow);
  padding: 1.25rem;
}

/* Fuer Formulare/Modals: staerkeres Glas gegen Lesbarkeitsprobleme (DESIGN §2) */
.dos-glass-strong {
  background: var(--dos-glass-bg-strong);
}

/* -------------------------------------------------------------------------
 * 6. Buttons (DESIGN §5)
 * ---------------------------------------------------------------------- */
.btn-dos-primary,
.btn-dos-secondary,
.btn-dos-stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px; /* Touch-Ziel >= 44x44px, DESIGN §3 */
  padding: 0.6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--dos-radius-btn);
  font-weight: 600;
  cursor: pointer;
  transition: var(--dos-transition);
}

.btn-dos-primary {
  color: var(--dos-on-primary);
  background: linear-gradient(135deg, var(--dos-primary-light), var(--dos-primary-dark));
  box-shadow: 0 4px 16px var(--dos-primary-glow);
}

.btn-dos-primary:hover {
  transform: translateY(-1px);
}

.btn-dos-secondary {
  color: var(--dos-text);
  background: var(--dos-glass-bg);
  backdrop-filter: var(--dos-glass-blur);
  -webkit-backdrop-filter: var(--dos-glass-blur);
  border-color: var(--dos-glass-border);
}

.btn-dos-secondary:hover {
  border-color: var(--dos-primary);
}

/*
 * Stopp-/Safeword-Button: IMMER --dos-danger, IMMER fix positioniert, in
 * JEDEM Theme/jeder Ansicht/jedem Zustand unuebersehbar erreichbar — nie
 * umgestylt (DESIGN §1.1, §5). Die fixe Position ist Teil der Klasse selbst
 * (nicht optional pro Seite), damit kein View sie versehentlich "vergisst".
 * Funktionale Bindung (Consent/Alarm-Auslösung) folgt PR 06 — Konzept 5.6.
 */
.btn-dos-stop {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* oberhalb der Bottom-Nav */
  z-index: 1080; /* ueber App-Bar/Bottom-Nav/Toasts — nie hinter Menüs (DESIGN §1.1) */
  color: var(--dos-on-danger);
  background: var(--dos-danger);
  border-color: var(--dos-danger);
  box-shadow: 0 4px 16px rgba(var(--dos-danger-rgb), 0.45);
}

.btn-dos-stop:hover {
  filter: brightness(1.08);
}

/*
 * Destruktive Bestaetigungs-Aktionen (PR 02: Panic-Delete, Konzept 12.7) — bewusst
 * NICHT die Stop-Button-Klasse (die ist reserviert fuer den fixen Safeword-Slot,
 * DESIGN §1.1), sondern ein normal fliessender Button mit denselben Gefahren-Tokens.
 */
.btn-dos-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px; /* Touch-Ziel >= 44x44px, DESIGN §3 */
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--dos-danger);
  border-radius: var(--dos-radius-btn);
  font-weight: 600;
  cursor: pointer;
  transition: var(--dos-transition);
  color: var(--dos-on-danger);
  background: var(--dos-danger);
}

.btn-dos-danger:hover {
  filter: brightness(1.08);
}

/* -------------------------------------------------------------------------
 * 7. Formularfelder (DESIGN §5, §8 — Focus-Ring = --dos-primary-glow)
 * ---------------------------------------------------------------------- */
.dos-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dos-text-muted);
}

.dos-input,
.dos-select,
.dos-textarea {
  display: block;
  width: 100%;
  min-height: 44px; /* Touch-Ziel */
  padding: 0.6rem 0.85rem;
  color: var(--dos-text);
  background: var(--dos-glass-bg-strong);
  border: 1px solid var(--dos-glass-border);
  border-radius: var(--dos-radius-input);
  transition: var(--dos-transition);
}

.dos-textarea {
  min-height: 6rem;
  resize: vertical;
}

.dos-input::placeholder,
.dos-textarea::placeholder {
  color: var(--dos-text-light);
}

.dos-input:focus,
.dos-select:focus,
.dos-textarea:focus {
  outline: none;
  border-color: var(--dos-primary);
  box-shadow: 0 0 0 3px var(--dos-primary-glow);
}

/* -------------------------------------------------------------------------
 * 8. Badges & Consent-Ampel (DESIGN §5 — Status-Semantik einhalten)
 * ---------------------------------------------------------------------- */
.dos-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dos-text);
  background: var(--dos-glass-bg);
  border: 1px solid var(--dos-glass-border);
  border-radius: 999px; /* Pill: strukturelle Formel, kein Theme-Radius (siehe Kopfkommentar) */
}

.dos-badge-primary { color: var(--dos-on-primary); background: var(--dos-primary); border-color: var(--dos-primary-dark); }
.dos-badge-success { color: var(--dos-on-success); background: var(--dos-success); border-color: var(--dos-success); }
.dos-badge-warning { color: var(--dos-on-warning); background: var(--dos-warning); border-color: var(--dos-warning); }
.dos-badge-danger  { color: var(--dos-on-danger);  background: var(--dos-danger);  border-color: var(--dos-danger); }
.dos-badge-neutral { color: var(--dos-text-muted); background: transparent; }

/*
 * Consent-Ampel: nutzt AUSSCHLIESSLICH die Status-Tokens, nie andere Farben
 * (DESIGN §5) — Rot/Gelb/Gruen sind hier sicherheitsrelevante Bedeutungstraeger
 * (Zustimmungsstatus je Kategorie), keine freie Gestaltung.
 */
.dos-consent-green,
.dos-consent-yellow,
.dos-consent-red {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
}

.dos-consent-green  { color: var(--dos-on-success); background: var(--dos-success); }
.dos-consent-yellow { color: var(--dos-on-warning); background: var(--dos-warning); }
.dos-consent-red    { color: var(--dos-on-danger);  background: var(--dos-danger); }

/* -------------------------------------------------------------------------
 * 9. Alerts & Toasts (DESIGN §5 — Glas-Overlay oben, JS-API: DOS.toast())
 * ---------------------------------------------------------------------- */
.dos-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--dos-glass-bg-strong);
  border: 1px solid var(--dos-glass-border);
  border-left: 3px solid var(--dos-info);
  border-radius: var(--dos-radius-input);
  color: var(--dos-text);
}

.dos-alert-success { border-left-color: var(--dos-success); }
.dos-alert-warning  { border-left-color: var(--dos-warning); }
.dos-alert-danger   { border-left-color: var(--dos-danger); }
.dos-alert-info      { border-left-color: var(--dos-info); }

/* Container haengt fix ueber dem Inhalt — Toasts duerfen nie das Stop-Element verdecken */
.dos-toast-container {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(92vw, 420px);
  pointer-events: none; /* Klicks gehen an einzelne Toasts, nicht den leeren Container */
}

.dos-toast {
  pointer-events: auto;
  background: var(--dos-glass-bg-strong);
  backdrop-filter: var(--dos-glass-blur);
  -webkit-backdrop-filter: var(--dos-glass-blur);
  border: 1px solid var(--dos-glass-border);
  border-radius: var(--dos-radius-input);
  box-shadow: var(--dos-glass-shadow);
  padding: 0.75rem 1rem;
  color: var(--dos-text);
  opacity: 0;
  transform: translateY(-8px);
  transition: var(--dos-transition);
}

.dos-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
 * 10. Tabellen (DESIGN §5 — mobil horizontal scrollen im Wrapper)
 * ---------------------------------------------------------------------- */
.dos-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--dos-glass-border);
  border-radius: var(--dos-radius-card);
}

.dos-table {
  width: 100%;
  min-width: 480px; /* erzwingt horizontales Scrollen im Wrapper statt Zeilenbruch-Chaos */
  border-collapse: collapse;
  /* KEIN Blur auf Tabellenzeilen (DESIGN §2 — lange Listen sind Vollton, Performance mobil) */
  background: var(--dos-glass-bg-strong);
}

.dos-table th,
.dos-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--dos-glass-border);
}

.dos-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--dos-text-muted);
}

/* -------------------------------------------------------------------------
 * 11. App-Shell: App-Bar + Bottom-Nav (DESIGN §3 — Glas, Safe-Area, mobile-first)
 * ---------------------------------------------------------------------- */
.dos-appbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: max(0.5rem, env(safe-area-inset-top)) 1rem 0.5rem;
  background: var(--dos-glass-bg);
  backdrop-filter: var(--dos-glass-blur);
  -webkit-backdrop-filter: var(--dos-glass-blur);
  border-bottom: 1px solid var(--dos-glass-border);
}

.dos-appbar-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.dos-nav-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--dos-glass-bg);
  backdrop-filter: var(--dos-glass-blur);
  -webkit-backdrop-filter: var(--dos-glass-blur);
  border-top: 1px solid var(--dos-glass-border);
}

.dos-nav-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 1 1 0;
  min-height: 56px; /* Touch-Ziel */
  padding: 0.4rem 0.25rem;
  font-size: 0.68rem;
  color: var(--dos-text-muted);
}

.dos-nav-bottom-item.is-active {
  color: var(--dos-primary-light);
}

.dos-nav-bottom-item i {
  font-size: 1.15rem;
}

/* Platz fuer App-Bar/Bottom-Nav im Seiteninhalt reservieren, damit nichts verdeckt wird */
.dos-app-main {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* -------------------------------------------------------------------------
 * 12. Admin-Sidebar-Geruest (responsive — Betreiber arbeiten auch mobil)
 * ---------------------------------------------------------------------- */
.dos-admin-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.dos-admin-nav {
  background: var(--dos-glass-bg);
  backdrop-filter: var(--dos-glass-blur);
  -webkit-backdrop-filter: var(--dos-glass-blur);
  border-bottom: 1px solid var(--dos-glass-border);
}

.dos-admin-nav-list {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  overflow-x: auto; /* mobil: horizontale Pill-Leiste statt Sidebar */
  -webkit-overflow-scrolling: touch;
}

.dos-admin-nav-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  white-space: nowrap;
  border-radius: var(--dos-radius-btn);
  color: var(--dos-text-muted);
}

.dos-admin-nav-list a.is-active {
  color: var(--dos-text);
  background: var(--dos-glass-bg-strong);
}

.dos-admin-main {
  flex: 1 1 auto;
  padding: 1rem;
}

/* Ab Tablet/Desktop: klassische feste Sidebar links statt horizontaler Leiste */
@media (min-width: 992px) {
  .dos-admin-shell {
    flex-direction: row;
  }

  .dos-admin-nav {
    flex: 0 0 240px;
    border-bottom: none;
    border-right: 1px solid var(--dos-glass-border);
    height: 100dvh;
    position: sticky;
    top: 0;
  }

  .dos-admin-nav-list {
    flex-direction: column;
    overflow-x: visible;
  }

  .dos-admin-main {
    padding: 1.5rem 2rem;
  }
}

/* -------------------------------------------------------------------------
 * 13. Countdown/Timer (DESIGN §5 — tabellarische Ziffern)
 * ---------------------------------------------------------------------- */
.dos-timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
 * 14. Bewegung (DESIGN §6 — nur transform/opacity, reduced-motion IMMER respektieren)
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
 * 15. Wahlkarten & Checkbox-Zeilen (PR 02 — Registrierung/Consent/Panic-Delete)
 *     DESIGN §3/§8: Touch-Ziel >= 44px liegt auf dem GESAMTEN <label>, nicht auf
 *     der kleinen nativen Eingabe selbst.
 * ---------------------------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--dos-primary); /* native Kontrollen folgen dem Akzent-Token statt Browser-Blau */
}

.dos-choice-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Ab ~480px nebeneinander (mobile-first: Basis ist gestapelt, DESIGN §3) */
@media (min-width: 480px) {
  .dos-choice-group {
    flex-direction: row;
  }
}

.dos-choice-card {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-height: 44px;
  padding: 1rem;
  cursor: pointer;
  background: var(--dos-glass-bg);
  border: 1px solid var(--dos-glass-border);
  border-radius: var(--dos-radius-card);
  transition: var(--dos-transition);
}

.dos-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none; /* Klickflaeche ist die ganze Karte (das <label>) */
}

.dos-choice-card:has(input:checked) {
  border-color: var(--dos-primary);
  box-shadow: 0 0 0 2px var(--dos-primary-glow);
}

.dos-choice-card:has(input:focus-visible) {
  box-shadow: 0 0 0 3px var(--dos-primary-glow);
}

.dos-choice-card-title {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.dos-choice-card-hint {
  display: block;
  font-size: 0.82rem;
  color: var(--dos-text-muted);
}

/* Checkbox-Zeile (18+/AGB/Panic-Delete-Bestaetigung): das <label> selbst ist die
   Touch-Flaeche (>=44px), nicht die kleine native Checkbox. */
.dos-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.4rem 0;
  cursor: pointer;
}

.dos-check input {
  flex: 0 0 auto;
  margin-top: 0.2rem;
  width: 1.1rem;
  height: 1.1rem;
}

.dos-check span {
  color: var(--dos-text);
}

/* Admin-Assistent „Projekt befragen" (PR 02b): Antwortflaeche. Nur --dos-*-Tokens
   (DESIGN §12); white-space: pre-wrap, damit Absaetze/Listen der Modell-Antwort
   (reiner Text via textContent, kein HTML) lesbar bleiben. */
.dos-assistant-answer {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
  color: var(--dos-text);
  background: var(--dos-glass-bg);
  border: 1px solid var(--dos-glass-border);
  border-radius: var(--dos-radius-card);
  padding: 1rem 1.15rem;
}

/* -------------------------------------------------------------------------
 * 16. Benachrichtigungs-Glocke (PR 08 — App-Shell). In-App-Center (DESIGN §3);
 *     die Glocke sitzt rechts in der App-Bar, das Panel klappt als Glas-Dropdown
 *     darunter. NUR neutrale Kategorietexte (DESIGN §9 — nie Inhalt).
 * ---------------------------------------------------------------------- */
.dos-bell {
  position: relative;
  margin-left: auto; /* schiebt die Glocke an das rechte App-Bar-Ende */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px; /* Touch-Ziel >= 44px (DESIGN §3) */
  color: var(--dos-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--dos-radius-btn);
  cursor: pointer;
}

.dos-bell i {
  font-size: 1.2rem;
}

.dos-bell-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: var(--dos-on-danger);
  background: var(--dos-danger); /* Status-Semantik: ungelesen = Aufmerksamkeit */
  border-radius: 999px;
}

.dos-bell-panel {
  position: fixed;
  top: calc(56px + env(safe-area-inset-top, 0px));
  right: max(8px, env(safe-area-inset-right));
  z-index: 1040; /* über der App-Bar, unter Stopp-Button/Toasts */
  width: min(92vw, 360px);
  max-height: 70dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--dos-dropdown-bg); /* fast opak: Lesbarkeit über Inhalt (§1.1) */
  backdrop-filter: var(--dos-glass-blur);
  -webkit-backdrop-filter: var(--dos-glass-blur);
  border: 1px solid var(--dos-glass-border);
  border-radius: var(--dos-radius-card);
  box-shadow: var(--dos-glass-shadow);
}

.dos-bell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--dos-glass-border);
  font-weight: 600;
}

.dos-bell-markall {
  font-size: 0.8rem;
  color: var(--dos-primary-light);
  background: transparent;
  border: none;
  cursor: pointer;
}

.dos-bell-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 1rem;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dos-glass-border);
  color: var(--dos-text);
  cursor: pointer;
}

.dos-bell-item.is-unread {
  background: var(--dos-glass-bg);
}

.dos-bell-item i {
  color: var(--dos-primary-light);
  font-size: 1.05rem;
}

.dos-bell-item-time {
  display: block;
  font-size: 0.72rem;
  color: var(--dos-text-muted);
}

.dos-bell-empty {
  padding: 1.25rem 1rem;
  color: var(--dos-text-muted);
  text-align: center;
}

/* -------------------------------------------------------------------------
 * 17. Chat (PR 08 — 1:1 je Beziehung, Polling; Konzept 6.1). Nachrichten-Blasen,
 *     Composer unten, Tap-to-Reveal-Blur für Medien (DESIGN §9).
 * ---------------------------------------------------------------------- */
.dos-chat {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.dos-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 40dvh;
  max-height: 60dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem;
}

.dos-chat-msg {
  max-width: 85%;
  padding: 0.55rem 0.8rem;
  background: var(--dos-glass-bg-strong); /* Vollton-Blase, kein Blur (Performance, §2) */
  border: 1px solid var(--dos-glass-border);
  border-radius: var(--dos-radius-card);
  color: var(--dos-text);
  overflow-wrap: anywhere;
}

.dos-chat-msg.is-mine {
  align-self: flex-end;
  color: var(--dos-on-primary);
  background: linear-gradient(135deg, var(--dos-primary-light), var(--dos-primary-dark));
  border-color: var(--dos-primary-dark);
}

.dos-chat-msg-time {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  color: var(--dos-text-muted);
}

.dos-chat-msg.is-mine .dos-chat-msg-time {
  color: var(--dos-on-primary);
  opacity: 0.8;
}

/* Tap-to-Reveal: Medien-Vorschau standardmäßig geblurrt (DESIGN §9) */
.dos-chat-media {
  position: relative;
  display: block;
  margin-top: 0.4rem;
  max-width: 220px;
  border-radius: var(--dos-radius-input);
  overflow: hidden;
  cursor: pointer;
}

.dos-chat-media img,
.dos-chat-media video {
  width: 100%;
  filter: blur(18px);
  transition: var(--dos-transition);
}

.dos-chat-media.is-revealed img,
.dos-chat-media.is-revealed video {
  filter: none;
}

.dos-chat-media-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dos-on-primary);
  background: rgba(var(--dos-primary-rgb), 0.35);
}

.dos-chat-media.is-revealed .dos-chat-media-hint {
  display: none;
}

.dos-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.dos-chat-form .dos-textarea {
  min-height: 44px;
  max-height: 8rem;
}

.dos-chat-closed {
  color: var(--dos-text-muted);
  font-size: 0.85rem;
}

/* -------------------------------------------------------------------------
 * 18. App-Bar-Icon-Link (PR 14 — Einstellungen-Zahnrad neben der Glocke). Rein
 *     additiv: dieselbe 44x44-Touch-Geometrie wie .dos-bell (DESIGN §3), aber als
 *     eigene Klasse, damit .dos-bell selbst unangetastet bleibt (AGENTS.md Regel 9
 *     "minimal-invasiv und rein additiv").
 * ---------------------------------------------------------------------- */
.dos-appbar-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px; /* Touch-Ziel >= 44px (DESIGN §3) */
  color: var(--dos-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--dos-radius-btn);
}

.dos-appbar-icon-link i {
  font-size: 1.2rem;
}

.dos-appbar-icon-link:hover,
.dos-appbar-icon-link:focus-visible {
  color: var(--dos-primary-light);
}