/*
 * components.css: Wiederverwendbare UI-Komponenten
 *
 * ARCHITEKTUR-ENTSCHEIDUNG: BEM-ähnliche Naming Convention
 * ================================================================
 * Wir nutzen .component-name--modifier für States statt Utility-First
 * (wie bei Tailwind). Das liefert klare, semantische CSS-Klassen,
 * die im HTML auf den ersten Blick verständlich sind.
 * Beispiel: .card, .card--elevated, .btn, .btn--primary
 * ================================================================
 */

/* ── Cards ────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

/* Warum: Hover auf der gesamten Card?
 *   - Ein leicht verstärkter Schatten signalisiert Interaktivität.
 *   - Kein transform: translateY hier, damit benachbarte Cards nicht
 *     "wackeln" (wird bei spezifischeren Cards wie im Tracker überschrieben).
 */
.card:hover {
  box-shadow: var(--shadow-lg);
}

/* Warum: .card--flat ohne Schatten?
 *   - In dichten Listen oder nebeneinander angeordneten Elementen
 *     kann zu viel Schatten überladen wirken. Flat-Cards nutzen
 *     stattdessen nur einen feinen Rahmen zur Abgrenzung.
 */
.card--flat {
  box-shadow: none;
  border-color: var(--color-border-subtle);
}

.card__header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.card__body {
  padding: var(--space-lg);
}

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  background: transparent;
  color: var(--color-text);
  white-space: nowrap;
}

/* Warum: translateY(-1px) auf Hover?
 *   - Ein leichter "Lift" vermittelt Drückbarkeit und hebt die
 *     Schaltfläche visuell aus der Ebene heraus.
 *   - Nur 1px, mehr würde bei engen Button-Gruppen unruhig wirken
 *     und könnte Layout-Shift verursachen.
 */
.btn:hover {
  transform: translateY(-1px);
}

/* Warum: :active setzt transform zurück?
 *   - Beim Klicken soll die Schaltfläche "eingedrückt" wirken.
 *   - translateY(0) hebt den Hover-Lift auf, das Hirn interpretiert
 *     das als physisches Feedback.
 */
.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
}

/* Farbe: Primärer Button, Hover mit leuchtendem Schatten für CTA-Effekt. */
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 4px 12px var(--schein-akzent);
}

.btn--secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-border-subtle);
}

.btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-accent);
}

/* Beim Darüberfahren wird der Knopf HELLER, nicht dunkler. Hier stand fest
   #dc2626, ein dunkleres Rot: die richtige Richtung auf weißem Grund, die
   falsche auf schwarzem. Dort verschwindet ein Knopf, der dunkler wird.
   Danach stand hier ebenso fest #fca5a5, also der richtige Ton am falschen
   Ort: eine Farbe, die nur diese eine Regel kennt. Jetzt ist sie ein Wert
   des Systems und heißt --color-danger-hover. */
.btn--danger:hover {
  background: var(--color-danger-hover);
  box-shadow: 0 4px 12px var(--schein-gefahr);
}

/* Warum: .btn--ghost für subtile Aktionen?
 *   - In dichten UI-Bereichen (z. B. Tabellenzeilen) braucht man
 *     Buttons, die nicht visuell dominieren. Ghost-Buttons haben
 *     keinen Hintergrund und nur eine dezente Farbe.
 */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

.btn--ghost:hover {
  background: var(--color-border-subtle);
  color: var(--color-text);
}

.btn--sm {
  padding: 6px 12px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

/* ── Forms ───────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: 6px;
}

/* Warum: Required-Marker via ::after?
 *   - Kein zusätzliches HTML-Element nötig.
 *   - Wenn sich die Required-Logik ändert, reicht eine CSS-Anpassung.
 *   - Farbe: Danger-Rot, damit es als Warnung gelesen wird.
 */
.form-label .required::after {
  content: " *";
  color: var(--color-danger);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Warum: Fokus-Ring mit box-shadow statt outline?
 *   - outline ist manchmal vom Browser-Default abhängig und schwer zu stylen.
 *   - Ein box-shadow mit 3px Radius und 0.12 Opazität ist dezent,
 *     aber klar sichtbar, und verhält sich konsistent über alle Browser.
 */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--schein-akzent-leise);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* Warum: Custom-Dropdown-Arrow als SVG-Data-URI?
 *   - Das native select-Element hat browserseitig unterschiedliche Pfeile.
 *   - appearance: none entfernt den Default-Pfeil. Der SVG-Pfeil ist
 *     exakt 16px groß, passt also perfekt zur Schriftgröße.
 *   - Farbe: #a8b0c4, der aktuelle Wert von --color-text-secondary.
 *     Hier stand #64748b, das dunkle Grau aus dem hellen Design. Auf dem
 *     dunklen Feld kam der Pfeil damit auf etwa 2,5:1 und war kaum noch
 *     zu erkennen; mit dem hellen Ton sind es rund 6:1.
 *     Eine Data-URI kann keine CSS-Variable lesen, der Wert muss also
 *     ausgeschrieben stehen. Wer --color-text-secondary ändert, muss ihn
 *     hier von Hand nachziehen.
 */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8b0c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px; /* Platz für den Pfeil + Padding */
  cursor: pointer;
}

.form-input--inline {
  width: auto;
  display: inline-block;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* ── Tables ──────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-size-sm);
}

/* Warum: border-collapse: separate + border-spacing: 0?
 *   - border-collapse: separate ermöglicht border-radius auf Zellen und
 *     sticky Header, die sonst abgeschnitten werden könnten.
 *   - border-spacing: 0 stellt sicher, dass keine unerwünschten Gaps
 *     zwischen den Zellen entstehen.
 */
.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.data-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
  color: var(--color-text);
}

/* Warum: transition auf der Zeile statt auf der Zelle?
 *   - Wenn der Hintergrund auf der Zeiebene animiert, wirkt es flüssiger.
 *   - Zellen-Transitionen würden stotterig wirken, wenn der Cursor
 *     über Spaltengrenzen gleitet.
 */
.data-table tbody tr {
  transition: background var(--transition-fast);
}

.data-table tbody tr:hover {
  background: var(--color-primary-subtle);
}

/* Warum: Letzte Zeile ohne Border-Bottom?
 *   - Die untere Grenze der Tabelle wird durch den Card-Rahmen oder
 *     den Footer abgeschlossen. Eine doppelte Linie wäre redundant.
 */
.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Warum: .num mit text-align: right und Monospace?
 *   - Zahlen werden rechtsbündig gelesen (Dezimalpunkte ausgerichtet).
 *   - Monospace sorgt für gleichmäßige Ziffernbreiten, wichtig,
 *     wenn Werte sich dynamisch ändern (kein Springen der Spalte).
 */
.data-table .num {
  text-align: right;
  font-family: var(--font-mono);
}

.data-table .actions {
  text-align: right;
  white-space: nowrap;
}

/* ── Modals ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

/* Warum: opacity + pointer-events statt display: none?
 *   - display: none kann nicht animiert werden. Mit opacity kann man
 *     sanfte Ein- und Ausblendungen realisieren.
 *   - pointer-events: none stellt sicher, dass Klicks durch das
 *     unsichtbare Overlay hindurchgehen, solange es nicht aktiv ist.
 */
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 560px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.98);
  transition: transform var(--transition-base);
}

/* Warum: transform auf dem Modal bei active?
 *   - Das Modal gleitet von leicht unten (20px) und leicht verkleinert (0.98)
 *     in die Mitte. Das erzeugt ein sanftes "Aufpoppen" statt eines harten Cuts.
 */
.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
}

.modal__header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.modal__close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.modal__close:hover {
  background: var(--color-border-subtle);
  color: var(--color-text);
}

.modal__body {
  padding: var(--space-lg);
  overflow-y: auto;
}

.modal__footer {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  background: var(--color-border-subtle);
}

/* ── Badges & Chips ──────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

/* Farbe: Status-Badges, jede Farbe hat einen subtilen Hintergrund
 * und eine kräftige Textfarbe für maximale Lesbarkeit.
 */
.badge--primary { background: var(--color-primary-subtle); color: var(--color-primary); }
.badge--success { background: var(--color-success-subtle); color: var(--color-success); }
.badge--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-subtle); color: var(--color-danger); }

/* ── Progress Bar ─────────────────────────────────────────────────────
 *
 * ENTFERNT: .progress-bar, .progress-bar__fill und die drei Modifier.
 *
 * Diese generische Fortschrittsbalken-Komponente war komplett ungenutzt.
 * Der einzige Fortschrittsbalken im Projekt (die Hydra-Timer) hat in
 * tracker.css eine eigene, praktisch zeichengleiche Implementierung unter
 * dem Namen .hydra-progress / .hydra-progress__fill.
 *
 * Zwei Komponenten für dieselbe Sache, von denen eine nie benutzt wurde: Wer
 * die generische Variante gepflegt hätte, hätte sich gewundert, warum seine
 * Änderung am Balken nichts bewirkt.
 *
 * Falls irgendwann eine zweite Seite einen Fortschrittsbalken braucht, gehört
 * .hydra-progress aus tracker.css hierher hochgezogen und umbenannt, statt
 * eine tote Zwillingskomponente wiederzubeleben.
 * ──────────────────────────────────────────────────────────────────── */

/* ── Toast Notifications ─────────────────────────────── */
.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

/* Warum: pointer-events: none auf dem Container?
 *   - Der Container soll nicht selbst Klicks abfangen. Er ist nur
 *     ein Layout-Wrapper. Die einzelnen Toasts haben pointer-events: auto,
 *     damit man sie schließen kann.
 */
.toast {
  pointer-events: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 280px;
  max-width: 400px;
  animation: toast-in var(--transition-base) forwards;
}

/* Farbe: Farbige Linke Border als Typ-Indikator, dezent, aber
 * sofort erkennbar. Ein dicker Rahmen wäre visuell überwältigend. */
.toast--success { border-left: 4px solid var(--color-success); }
.toast--error { border-left: 4px solid var(--color-danger); }
.toast--warning { border-left: 4px solid var(--color-warning); }
.toast--info { border-left: 4px solid var(--color-primary); }

.toast__message {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.toast__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* Warum: Slide-Animation von rechts nach links?
 *   - Toasts erscheinen typischerweise oben rechts. Ein Einflug von
 *     rechts signalisiert "Hinzufügen" zum Stack. Der Ausflug nach
 *     rechts signalisiert "Entfernen". Das ist ein etabliertes UX-Pattern.
 */
@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(20px); }
}

.toast--exit {
  animation: toast-out var(--transition-fast) forwards;
}

/* ── Toggle Switch ───────────────────────────────────── */
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

/* Warum: opacity: 0 auf dem input statt display: none?
 *   - display: none nimmt das Element aus dem Accessibility-Tree.
 *   - opacity: 0 macht es unsichtbar, aber trotzdem fokussierbar
 *     (wichtig für Tastatur-Navigation und Screenreader).
 */
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--color-border);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

/* Warum: 18px × 18px Kreis mit 3px Abstand?
 *   - 24px Höhe minus 2×3px Padding = 18px. So bleibt ein gleichmäßiger
 *     Rand oben, unten und links, wenn der Schalter aus ist.
 *   - Beim Einschalten gleitet der Kreis 20px nach rechts (44px - 18px - 3px - 3px = 20px).
 */
.toggle__slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.toggle input:checked + .toggle__slider {
  background: var(--color-primary);
}

.toggle input:checked + .toggle__slider::before {
  transform: translateX(20px);
}

/* ── Empty State ───────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-lg);
  color: var(--color-text-muted);
}

/* Warum: 48px Icon-Font-Size und 0.5 Opacity?
 *   - Das Icon soll sichtbar sein, aber nicht der Hauptfokus.
 *   - 48px ist groß genug, um als visueller Anker zu dienen,
 *     aber klein genug, um nicht übermächtig zu wirken.
 *   - Die halbe Opacity verbindet es visuell mit dem muted Text.
 */
.empty-state__icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.empty-state__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}


/* ═══════════════════════════════════════════════════════════════════
 *  APP-NAVIGATION
 *  ═══════════════════════════════════════════════════════════════════
 *  Diese Regeln standen bis eben in einem <style>-Block in base.html, und
 *  zwar HINTER dem schließenden </html>-Tag. Browser haben sie per
 *  Fehlerkorrektur trotzdem angewendet, deshalb ist es nie aufgefallen.
 *
 *  Warum der Umzug hierher trotzdem richtig ist:
 *    - Gültiges HTML statt Verlass auf die Fehlertoleranz des Browsers.
 *    - CACHING: Die Datei wird einmal geladen und dann vom Browser behalten.
 *      Ein <style>-Block im HTML kommt bei JEDEM Seitenaufruf erneut über
 *      die Leitung.
 *    - Das Projekt sagt an drei Stellen "Styles gehören in CSS-Dateien".
 *      Genau das tun wir jetzt auch.
 *
 *  Das AUSSEHEN ändert sich dabei nicht um einen Pixel, es sind exakt
 *  dieselben Regeln, nur an der richtigen Stelle.
 *  ═══════════════════════════════════════════════════════════════════ */

.app-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.app-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}

.app-nav__logo {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  /* Stand hier als "white" ausgeschrieben und ist deshalb bei der Suche nach
     "#fff" durchgerutscht. Dieselbe Sache: dunkle Schrift auf heller Fläche. */
  color: var(--color-on-accent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: 14px;
}

.app-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.app-nav__link {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.app-nav__link:hover {
  color: var(--color-text);
  background: var(--color-border-subtle);
}

.app-nav__link.active {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* ── Logout ──────────────────────────────────────────────────────────
 *  Der Abmelden-Button steckt in einem <form method="post">, weil ein
 *  GET-Logout von fremden Seiten auslösbar wäre. Damit die Navigation
 *  optisch unverändert bleibt, entkleiden wir Formular und Button von allen
 *  Browser-Defaults und geben dem Button exakt das Aussehen eines
 *  .app-nav__link.
 *  ─────────────────────────────────────────────────────────────────── */
.app-nav__logout {
  margin: 0;
  padding: 0;
  display: flex;
}

.app-nav__link--logout {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.app-main {
  padding: var(--space-lg) 0;
  min-height: calc(100vh - var(--header-height));
}

/* ── Nur-Lesen-Abzeichen in der Navigation ──────────────────────────────── */
.app-nav__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  background: var(--color-bg-subtle, rgba(100, 116, 139, 0.12));
  cursor: default;
}

/* ── Benutzerverwaltung ─────────────────────────────────────────────────── */
.benutzer-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 8px);
  align-items: center;
}
.benutzer-form .form-input { flex: 1 1 180px; max-width: 260px; }

.benutzer-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md, 16px);
  padding: var(--space-sm, 8px) 0;
  border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
}
.benutzer-zeile:last-child { border-bottom: none; }
.benutzer-zeile__name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.benutzer-zeile__akt { display: flex; gap: 6px; flex-shrink: 0; }

.benutzer-rolle {
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}
/* Diese beiden hatten feste, DUNKLE Schriftfarben (#166534 Tannengrün und
   #475569 Schiefergrau). Auf weißem Grund war das richtig; auf dem dunklen
   Grund wären es dunkle Buchstaben auf dunklem Feld gewesen, also nichts.

       Eine feste Farbe ist eine Wette darauf, dass der Hintergrund
       bleibt, wie er ist.

   Jetzt die Variablen des Design-Systems, die beim Umbau mitgezogen sind. */
.benutzer-rolle--voll  { color: var(--color-success); background: rgba(52, 211, 153, 0.12); }
.benutzer-rolle--lesen { color: var(--color-text-secondary); background: rgba(168, 176, 196, 0.12); }
.benutzer-ich { font-size: var(--font-size-xs, 12px); font-weight: 400; color: var(--color-text-muted, #64748b); }

/* ── Notizen (schwarzes Brett) ──────────────────────────────────────────── */
.notiz-senden { margin-top: var(--space-sm, 8px); display: flex; justify-content: flex-end; }

.notiz {
  padding: var(--space-sm, 8px) 0;
  border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
}
.notiz:last-child { border-bottom: none; }
.notiz--erledigt { opacity: 0.5; }
.notiz__kopf {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 3px;
}
.notiz__autor { font-weight: 600; }
.notiz__zeit { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted, #64748b); }
/* pre-wrap: Zeilenumbrüche in der Notiz bleiben erhalten. */
/* pre-wrap haelt Zeilenumbrueche des Melders. overflow-wrap/anywhere bricht
   auch einen Riesen-String ohne Leerzeichen um, damit er nicht seitlich aus dem
   Kasten laeuft. max-height macht aus einer sehr langen Meldung einen
   scrollbaren Kasten, sonst fuellt eine einzige Spam-Meldung die halbe Seite. */
.notiz__text {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 300px;
  overflow-y: auto;
  /* Schlanke Rollleiste statt der klobigen Windows-Leiste mit Pfeil-Knöpfen. */
  scrollbar-width: thin;
}
.notiz__akt { display: flex; gap: 6px; margin-top: 6px; }

/* ── Fußzeile (rechtlicher Hinweis) ─────────────────────────────────────────
   Leise und klein, sitzt unter dem Inhalt, drängt sich nicht auf. Eine feine
   Linie trennt sie vom Rest. */
.app-fuss {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2xl, 48px);
  padding: 20px 0 32px;
}
.app-fuss .container { text-align: center; }
.app-fuss__text {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.app-fuss__jahr {
  margin: 10px 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.app-fuss a { color: var(--color-text-secondary); text-decoration: underline; }
.app-fuss a:hover { color: var(--color-text); }

/* ── Rechtstext (Datenschutz) ─────────────────────────────────────────────── */
.recht-text { line-height: 1.65; }
.recht-text h2 {
  font-size: 1.05rem;
  margin: 22px 0 6px;
  color: var(--color-text);
}
.recht-text h2:first-of-type { margin-top: 8px; }
.recht-text p { margin: 0 0 10px; color: var(--color-text-secondary); }