/* ═══════════════════════════════════════════════════════════════════════════
   letsgoo "Aura" — helle Fassung (fanstories.letsgoo.io)

   Wird NUR geladen, wenn NEXT_PUBLIC_BRAND_SCHEME=light gesetzt ist
   (frontend/src/app/(app)/layout.tsx:63). letsgoo.io laedt diese Datei nie.
   Laedt NACH lg-glass.css und ueberschreibt zuerst die Token, danach die
   Stellen, die in lg-glass.css an den Token vorbei Farbe setzen.

   Palette aus der laufenden App des Kunden (fanstories.com):
     Grund #FFFFFF · Text #212529 · Zweittext #4E4E4E
     Hauptknopf #1A2342 / weiss / 8px · zweiter Knopf Verlauf #CCD3FF→#E1D1FE
     ruhige Flaeche #F2F2F2 / 10px · runde Schrift · Schatten statt Glas

   Diese Datei beruehrt das dunkle Thema an keiner Stelle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Freie Rundschrift fuer alles ausserhalb der Apple-Welt. @import statt eines
   zweiten <link> im Layout: die Inhaltsrichtlinie in nginx.conf:56 erlaubt
   style-src fonts.googleapis.com und font-src fonts.gstatic.com, damit kommt
   der Abruf ohne Layout-Aenderung durch. Muss die erste Anweisung der Datei
   sein, sonst verwirft der Browser sie. */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap");

/* ═══ 1 · TOKEN ════════════════════════════════════════════════════════════
   Der Selektor ist ABSICHTLICH `html:root:root`. brandThemeCss() in
   src/lib/brand.ts gibt seinen Block unter `html:root` aus, und layout.tsx
   haengt ihn als <style> HINTER den Verweis auf diese Datei — ein `:root` oder
   `html:root` hier waere wirkungslos. Zwei Wurzel-Pseudos heben die
   Spezifitaet auf (0,2,1) und entscheiden es unabhaengig von der Reihenfolge.
   Alle 14 Variablen, die brandThemeCss setzt, stehen deshalb hier noch einmal:
   es rechnet gegen den dunklen Untergrund #0b0b0c und wuerde die Kundenmarine
   #1A2342 zu blassem Blau aufhellen. */
html:root:root {

  /* ── Schrift ──────────────────────────────────────────────────────────────
     ui-rounded steht VOR -apple-system: Safari ab 15.4 loest es auf die
     Systemvariante von SF Pro Rounded auf — auf Apple-Geraeten also exakt die
     Schrift des Kunden, ohne Download und ohne Lizenzfrage. "SF Pro Rounded"
     davor greift, wenn Apples SF-Paket lokal installiert ist (Chrome/Firefox
     auf macOS). Alle anderen landen auf Nunito. */
  --aura-font-sans: "SF Pro Rounded", ui-rounded, -apple-system, system-ui, "Nunito",
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Der Kunde kennt ausserhalb von Stack-Traces keine Schreibmaschinenschrift. */
  --aura-font-mono: var(--aura-font-sans);

  /* ── Akzent ───────────────────────────────────────────────────────────────
     --aura-accent ist in lg-glass.css ueberwiegend FLAECHE (Hauptknopf, Chip
     an, Plakette, Fortschritt, Haken) und traegt darauf --aura-accent-ink als
     Schrift. Deshalb steht hier die Marine des Kunden und nicht sein #007BFF:
     weiss auf #1A2342 sind 15.4:1, weiss auf #007BFF nur 3.98:1. Die
     Verweisfarbe laeuft getrennt ueber --aura-link. */
  --aura-accent: #1a2342;
  --aura-accent-strong: #15172a;     /* Hover des Kunden: dunkler, nicht heller */
  --aura-accent-ink: #ffffff;
  --aura-accent-06: rgba(26, 35, 66, 0.06);
  --aura-accent-10: rgba(26, 35, 66, 0.1);
  --aura-accent-14: rgba(26, 35, 66, 0.14);
  --aura-accent-28: rgba(26, 35, 66, 0.28);
  --aura-accent-50: rgba(26, 35, 66, 0.5);

  /* Zweiter Knopf des Kunden: Verlauf 135deg mit schwarzer Schrift. */
  --aura-accent-2: linear-gradient(135deg, #ccd3ff, #e1d1fe);
  --aura-accent-2-hover: linear-gradient(135deg, #bcc5ff, #d6c2fd);
  --aura-accent-2-ink: #101010;

  /* Verweise. Das #007BFF des Kunden ist der unveraenderte Bootstrap-4-Wert und
     schafft auf Weiss nur 3.98:1. #006FE0 ist optisch dasselbe Blau bei 4.8:1. */
  --aura-link: #006fe0;
  --aura-link-hover: #0a58ca;

  /* ── Flaeche und Schrift ──────────────────────────────────────────────────
     Vier Textstufen, alle gegen Weiss geprueft: 15.4 / 8.3 / 6.6 / 5.1.
     --aura-dim traegt in lg-glass.css an 23 Stellen echten Text (Platzhalter,
     Fussnoten, abgeschaltete Zeilen) und muss deshalb selbst AA erreichen. */
  /* Seite hellgrau, Moebel weiss. Bei Weiss auf Weiss verliert jede Flaeche
     ihre Kante: die Eingabeleiste unten sah aus, als waere sie verschwunden,
     und die Ausgabeflaeche verschwamm mit der Seite. Der Kunde arbeitet
     ebenfalls mit abgesetzten Bloecken auf ruhigem Grund. */
  --aura-canvas: #f4f5f7;
  --aura-canvas-raise: #ffffff;
  --aura-text: #212529;
  --aura-text-2: #4e4e4e;
  --aura-muted: #565d68;
  --aura-dim: #676e7b;

  /* ── Glas wird Papier ─────────────────────────────────────────────────────
     Die Glas-Token bleiben bestehen (sonst muessten ~40 Regeln umgeschrieben
     werden), tragen aber Flaechen statt Verlaeufen; der Weichzeichner faellt
     weg. Der Kunde arbeitet ausschliesslich mit klaren Schatten. */
  --aura-glass: #ffffff;
  --aura-glass-soft: #fafbfc;
  --aura-glass-accent: #f4f6fb;
  --aura-border: rgba(17, 24, 39, 0.1);
  --aura-border-soft: rgba(17, 24, 39, 0.08);
  --aura-border-hair: rgba(17, 24, 39, 0.06);
  --aura-blur: none;

  /* NICHT `none`. --aura-highlight steht in lg-glass.css an sechs Stellen als
     erster Wert einer Schattenliste; `none` ist dort unzulaessig und der
     Browser verwirft die GANZE Deklaration — Karten, Eingabeleiste, Tour und
     Goo haetten dann gar keinen Schatten. Durchsichtig ist gueltig. */
  --aura-highlight: 0 0 0 0 transparent;

  /* Zweistufig und kuehl: erste Stufe zeichnet die Kante, zweite gibt Hoehe.
     Ein einzelner grosser Schwarzschatten wird auf Weiss zum Fleck. */
  --aura-lift: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.08);
  --aura-lift-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 12px rgba(16, 24, 40, 0.06);
  --aura-lift-lg: 0 2px 4px rgba(16, 24, 40, 0.04), 0 16px 40px rgba(16, 24, 40, 0.12);

  /* Flaeche der schwebenden Moebel — lg-glass.css fuehrt sie seit dem letzten
     Umbau an allen 14 Stellen ueber dieses eine Token. */
  --aura-surface-float: #ffffff;

  /* Ruhige Flaechen. Ersetzen die weissen Transparenzen aus dem dunklen Thema;
     #F2F2F2 ist der gemessene Wert des Kunden fuer Chips und Segmente. */
  --aura-hover: #f2f2f2;             /* Ruhelage eines Bedienelements / Hover auf Leer */
  --aura-hover-strong: #e8e8e8;      /* Hover auf einer bereits gefuellten Flaeche */
  --aura-surface-2: #f7f8fa;         /* passive Fuellung: Tabellenkopf, Kachel, Code */

  /* ── Felder ───────────────────────────────────────────────────────────────
     Weiss mit Rand, nicht grau: ein graues Feld auf weissem Grund liest sich
     als gesperrt. --aura-field-quiet ist der gemeinsame Traeger der
     Anmeldemaske (#E4EBF3, aus auth-layout des Kunden). */
  --aura-field: #ffffff;
  --aura-field-border: rgba(17, 24, 39, 0.2);
  --aura-field-quiet: #e4ebf3;

  /* Hoehen der Bedienelemente, gemessen am Kunden (36 / 32 / 48 px). */
  --aura-h-ctl: 36px;
  --aura-h-ctl-sm: 32px;
  --aura-h-ctl-lg: 48px;

  /* ── Status ───────────────────────────────────────────────────────────────
     Der Kunde liefert dafuer keine Palette. Gewaehlt sind die dunkelsten Toene,
     die noch als Ampelfarbe lesbar sind — alle ueber 4.5:1 auf Weiss UND auf
     ihrer eigenen hellen Flaeche, weil sie in Meldungen Fliesstext tragen. */
  --aura-error: #b42318;
  --aura-ok: #067647;
  --aura-warn: #b54708;
  --aura-info: #175cd3;
  --aura-error-bg: #fef3f2;
  --aura-ok-bg: #ecfdf3;
  --aura-warn-bg: #fffaeb;
  --aura-info-bg: #eff8ff;

  /* Intim-Schublade: #dc5090 aus dem dunklen Thema liegt auf Weiss bei 4.3:1. */
  --aura-intim: #c2185b;
  --aura-intim-soft: #fce4ec;

  /* Abdunkler hinter Dialogen — im Markenton statt neutralem Schwarz. */
  --aura-scrim: rgba(16, 24, 40, 0.35);

  /* ── Radien ───────────────────────────────────────────────────────────────
     Beim Kunden dominiert 8px (191 Vorkommen), dann 10px (78) und 12px (56).
     18-20px kommt dort nur am Modal und am Telefonrahmen vor. */
  --aura-r-panel: 12px;
  --aura-r-card: 10px;
  --aura-r-ctl: 8px;
  --aura-r-chip: 10px;

  /* ── Bootstrap-Bruecke ────────────────────────────────────────────────────
     Falcon liest diese in vielen Komponenten direkt; in lg-glass.css stehen
     dort feste Hexwerte, keine Variablen. */
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;
  --bs-border-color: rgba(17, 24, 39, 0.1);
  --bs-emphasis-color: #212529;
  --bs-secondary-color: #565d68;
  --bs-tertiary-color: #676e7b;
  --bs-link-color: var(--aura-link);
  --bs-link-hover-color: var(--aura-link-hover);

  /* Sagt der Plattform, dass sie native Bedienelemente HELL malen soll: die
     nackten Einwilligungshaken im Anmeldeweg, Datumsfelder, Autofill,
     Auswahlmenues, Scrollbalken. In lg-glass.css:84 steht hier `dark`. */
  color-scheme: light;
  accent-color: var(--aura-accent);
}

/* ═══ 2 · STRUKTURELLE KORREKTUREN ═════════════════════════════════════════ */

/* lg-glass.css:92 setzt Schrift, Grund und Farbe mit !important. */
body {
  background: var(--aura-canvas) !important;
  color: var(--aura-text) !important;
  font-family: var(--aura-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Das ambiente Farbfeld ist eine Lichtstimmung auf Schwarz und ein
   Schmutzschleier auf Weiss — vor allem das Ember-Rot unten rechts. */
body::before { display: none !important; }

/* Uebergangsregel: die 17 "IBM Plex Mono"-Literale in lg-glass.css haengen an
   keinem Token. Code und Gutscheincode bleiben bewusst Schreibmaschine.
   Ersatzlos loeschen, sobald lg-glass.css auf var(--aura-font-mono) umgebaut ist. */
.sidebar-menu li > a .badge,
.aura-promo-chip-host,
.aura-mono,
.aura-num,
.table > thead,
.aura-stepper > span,
.aura-menu-tag,
.aura-character-label,
.aura-generate > span,
.aura-pill,
.aura-optional,
.aura-lang-btn,
.aura-tour-count,
.goo-panel-title span,
.goo-applied {
  font-family: var(--aura-font-sans);
  letter-spacing: 0.02em;
}

/* Glas hat in einer weissen App keine Aufgabe — es verschmiert nur und kostet
   auf jeder Karte Rechenzeit. backdrop-filter steht in lg-glass.css an 37
   Stellen, teils ohne Token. */
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.popover,
.toast,
.btn,
.alert,
.app-header,
.sidebar-wrapper,
[class*="aura-"],
[class*="goo-"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* lg-glass.css:116 schreibt color:#fff auf die helle Auswahlflaeche. */
::selection { background: var(--aura-accent-14); color: var(--aura-text); }

/* Scrollbalken — lg-glass.css:124-125 faerbt den Daumen in weissem Alpha. */
::-webkit-scrollbar-thumb { background: rgba(17, 24, 39, 0.18) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(17, 24, 39, 0.3) !important; }

/* Bootstraps Schliesskreuz ist ein schwarzes SVG; lg-glass.css:810 dreht es per
   invert(1) fuer den dunklen Grund weiss — auf Weiss damit unsichtbar. */
.btn-close { filter: none; opacity: 0.55; }
.btn-close:hover { opacity: 1; }

/* lg-glass.css:536 faerbt die Eintraege des aufgeklappten Auswahlmenues fast
   schwarz; mit --aura-text #212529 waeren das 1.2:1. */
.form-select option { background: #ffffff; color: var(--aura-text); }

/* lg-glass.css:523 schaltet das Feld beim Hineinklicken auf 45 % Schwarz. */
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  background: var(--aura-field) !important;
  border-color: var(--aura-accent) !important;
  box-shadow: 0 0 0 3px var(--aura-accent-14) !important;
  color: var(--aura-text) !important;
}

/* Meldungen: lg-glass.css:589-610 setzt feste Pastellschriften (1.6 bis 2.1:1
   auf Weiss) — also ausgerechnet die Texte, die gelesen werden muessen. */
.alert-danger {
  background: var(--aura-error-bg) !important;
  border: 1px solid rgba(180, 35, 24, 0.25) !important;
  color: var(--aura-error) !important;
}
.alert-warning {
  background: var(--aura-warn-bg) !important;
  border: 1px solid rgba(181, 71, 8, 0.25) !important;
  color: var(--aura-warn) !important;
}
.alert-success {
  background: var(--aura-ok-bg) !important;
  border: 1px solid rgba(6, 118, 71, 0.25) !important;
  color: var(--aura-ok) !important;
}
.alert-info {
  background: var(--aura-info-bg) !important;
  border: 1px solid rgba(23, 92, 211, 0.25) !important;
  color: var(--aura-info) !important;
}
.alert-light {
  background: var(--aura-surface-2) !important;
  border: 1px solid var(--aura-border-soft) !important;
  color: var(--aura-text-2) !important;
}

/* ═══ 3 · HUELLE ═══════════════════════════════════════════════════════════ */

/* Kopfzeile und Seitenleiste sind in lg-glass.css weisse Verlaeufe und
   verschwinden ersatzlos. Der Kunde trennt mit Schatten und Haarlinie. */
.app-header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--aura-border-hair);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06) !important;
  color: var(--aura-text);
}
.app-footer { border-top: 1px solid var(--aura-border-hair); }

/* Sprachumschalter: rechnet mit farbigem Kopfzeilen-Grund (lg-glass.css:2019)
   und ist auf weisser Kopfzeile vollstaendig unsichtbar. */
.aura-lang-btn {
  border: 1px solid var(--aura-border);
  background: var(--aura-hover);
  color: var(--aura-text);
}
.aura-lang-btn:hover { background: var(--aura-hover-strong); }

/* ═══ 4 · KNOEPFE ══════════════════════════════════════════════════════════
   Geometrie am Kunden nachgemessen: 336.6 x 47.9 px, 17px/600, Radius 8px. */
.btn {
  border-radius: var(--aura-r-ctl);
  min-height: var(--aura-h-ctl);
  font-family: var(--aura-font-sans);
  font-weight: 600;
  letter-spacing: 0;
}
.btn-sm { min-height: var(--aura-h-ctl-sm); }
.btn-lg { min-height: var(--aura-h-ctl-lg); font-size: 17px; }
/* Der Kunde laesst den Knopf beim Druecken stehen und arbeitet mit Farbe. */
.btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid var(--aura-accent); outline-offset: 2px; }

/* Hauptknopf: #1A2342, weisse Schrift, kein Rahmen. brightness(1.08) aus
   lg-glass.css:429 wuerde ihn beim Ueberfahren ausbleichen. */
.btn-primary:hover:not(:disabled) {
  background: var(--aura-accent-strong) !important;
  color: var(--aura-accent-ink) !important;
  filter: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.19);
}

/* Zweiter Knopf: der Verlauf des Kunden. Im Markup traegt ihn
   .btn-outline-primary — an neun Stellen genau seine Rolle ("Konto anlegen"
   neben "Anmelden"). .aura-btn-soft ist der ausdrueckliche Weg dorthin. */
.btn-outline-primary,
.aura-btn-soft {
  background: var(--aura-accent-2) !important;
  border: 1px solid transparent !important;
  color: var(--aura-accent-2-ink) !important;
}
.btn-outline-primary:hover:not(:disabled),
.aura-btn-soft:hover:not(:disabled) {
  background: var(--aura-accent-2-hover) !important;
  border-color: transparent !important;
  color: var(--aura-accent-2-ink) !important;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.19);
}

/* Ruhiger Knopf: weiss, Haarlinie, ein Hauch Schatten (seine Variante
   data-variant=outline). In lg-glass.css:437 weisses Alpha plus blur. */
.btn-light,
.btn-secondary,
.btn-outline-secondary {
  background: #ffffff !important;
  border: 1px solid var(--aura-border) !important;
  color: var(--aura-text) !important;
  box-shadow: var(--aura-lift-sm);
}
.btn-light:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-outline-secondary:hover:not(:disabled) {
  background: var(--aura-hover) !important;
  border-color: var(--aura-border) !important;
  color: var(--aura-text) !important;
}

/* Status-Knoepfe: in lg-glass.css Fuellungen bei 14-16 % (auf Weiss fast weiss)
   mit Pastellschrift. Hier gesaettigte helle Flaechen mit lesbarer Schrift. */
.btn-success {
  background: var(--aura-ok-bg) !important;
  border: 1px solid rgba(6, 118, 71, 0.25) !important;
  color: var(--aura-ok) !important;
}
.btn-warning {
  background: var(--aura-warn-bg) !important;
  border: 1px solid rgba(181, 71, 8, 0.25) !important;
  color: var(--aura-warn) !important;
}
/* Loeschen ist die einzige Aktion, die gefuellt auftritt — sie muss man sehen. */
.btn-danger {
  background: var(--aura-error) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
}
.btn-danger:hover:not(:disabled) { background: #8f1c13 !important; }
.btn-outline-danger {
  background: #ffffff !important;
  border: 1px solid rgba(180, 35, 24, 0.4) !important;
  color: var(--aura-error) !important;
}
.btn-outline-danger:hover:not(:disabled) { background: var(--aura-error-bg) !important; }

/* Der grosse Erzeugen-Knopf traegt in lg-glass.css 18px Radius — neben den
   8px-Knoepfen des Kunden faellt das auf. */
.aura-generate { border-radius: var(--aura-r-ctl); }

.btn-link { color: var(--aura-link) !important; }
.btn-link:hover { color: var(--aura-link-hover) !important; text-decoration: underline; text-underline-offset: 4px; }

/* ═══ 5 · FELDER ═══════════════════════════════════════════════════════════ */
.form-control,
.form-select,
textarea.form-control {
  min-height: var(--aura-h-ctl);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.form-control-sm,
.form-select-sm { min-height: var(--aura-h-ctl-sm); }
.form-control::placeholder { color: var(--aura-dim) !important; opacity: 1; }
.form-control:disabled,
.form-select:disabled { background: var(--aura-surface-2) !important; opacity: 0.7; }
.form-control.is-invalid,
.form-control[aria-invalid="true"] {
  border-color: var(--aura-error) !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.16) !important;
}

/* Pfeil der Auswahlliste: in lg-glass.css:531 olivgrau fuer den dunklen Grund. */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23565d68' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

.form-check-input { background-color: #ffffff; border-color: rgba(17, 24, 39, 0.25); }
.form-check-input:focus { border-color: var(--aura-accent); box-shadow: 0 0 0 3px var(--aura-accent-14); }
/* Der Punkt im Schalter war fuer Dunkel fast schwarz (lg-glass.css:553) und
   verschwindet auf der marineblauen Flaeche des eingeschalteten Schalters. */
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.input-group-text {
  background: var(--aura-hover) !important;
  border: 1px solid var(--aura-field-border) !important;
  color: var(--aura-muted) !important;
}
.form-range::-webkit-slider-runnable-track { background: var(--aura-hover-strong); }

/* Feldblock der Anmeldemaske: ein gemeinsamer Traeger in #E4EBF3, die Felder
   darin ohne eigene Flaeche, getrennt durch eine Haarlinie. */
.aura-fieldgroup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 19px;
  border-radius: 13px;
  background: var(--aura-field-quiet);
  color: var(--aura-text);
}
.aura-fieldgroup .form-control,
.aura-fieldgroup input {
  min-height: 0;
  padding: 6px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 17px !important;
  color: var(--aura-text) !important;
}
.aura-fieldgroup .form-control:focus,
.aura-fieldgroup input:focus { box-shadow: none !important; outline: none; }
.aura-fieldgroup > * + * { border-top: 1px solid rgba(17, 24, 39, 0.14); }

/* ═══ 6 · CHIPS, PILLEN, SEGMENTE ══════════════════════════════════════════
   Der Kunde hat fuer genau dieses Bauteil einen Wert: #F2F2F2 bei Radius 10px,
   ohne Rahmen. In lg-glass.css:495 Fuellung und Innenglanz in weissem Alpha. */
.aura-chip {
  background: var(--aura-hover);
  border-color: transparent;
  box-shadow: none;
  font-weight: 500;
}
.aura-chip:hover { background: var(--aura-hover-strong); border-color: transparent; color: var(--aura-text); }
/* brightness(1.06) bleicht die helle Akzentflaeche beim Ueberfahren aus. */
.aura-chip.is-on:hover { background: var(--aura-accent-strong); color: var(--aura-accent-ink); filter: none; }

/* Zweite Chipform des Kunden: weiss mit Haarlinie, 30px hoch — Filterleisten. */
.aura-chip-outline {
  background: #ffffff;
  border: 1px solid var(--aura-border);
  height: 30px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--aura-r-ctl);
  color: var(--aura-text-2);
}
.aura-chip-outline:hover { background: var(--aura-hover); }

.aura-pill {
  background: #ffffff;
  border: 1px solid var(--aura-border);
  box-shadow: var(--aura-lift-sm);
  color: var(--aura-text);
}

/* ═══ 7 · KARTEN UND KACHELN ═══════════════════════════════════════════════ */
.card {
  --bs-card-bg: #ffffff;
  --bs-card-border-color: var(--aura-border-soft);
  background: #ffffff !important;
  border: 1px solid var(--aura-border-soft) !important;
  box-shadow: var(--aura-lift) !important;
}
.card-title { font-weight: 600; letter-spacing: 0; }
/* Karte in der Karte: eingesenkt statt aufgesetzt, wie seine Listenbloecke. */
.card .card { background: var(--aura-surface-2) !important; }

/* Kachel und Schraffur: 2.5 % Weiss auf Weiss ist nicht da — dort stuende ein
   Loch statt einer Flaeche. Gleiche Geometrie, umgekehrtes Vorzeichen.
   Die Schraffur der LEEREN Ausgabeflaeche faellt dabei ganz weg: im Dunklen ist
   sie eine kaum sichtbare Struktur, auf Weiss wird daraus ein Streifenmuster
   ueber die halbe Seite, das wie eine Baustelle aussieht. Der Kunde arbeitet mit
   ruhigen Flaechen, also steht hier eine. */
.aura-tile { background: var(--aura-surface-2); }
.aura-tile.is-filled { border-color: var(--aura-accent-28); }
.aura-tile-empty-hatch { background: var(--aura-canvas-raise); }
.aura-tile-range input[type="range"] { background: var(--aura-hover-strong); }

.aura-result { box-shadow: var(--aura-lift-sm); }
.aura-result:hover { border-color: var(--aura-accent-28); }

/* Wartekachel: der Glanz lief auf Weiss zwischen Weiss und Weiss. Der
   Doppelselektor muss mit, sonst gewinnt .aura-result.aura-shimmer. */
.aura-shimmer,
.aura-result.aura-shimmer {
  background: linear-gradient(90deg, #f2f2f2 0%, rgba(26, 35, 66, 0.12) 50%, #f2f2f2 100%);
  background-size: 200% 100%;
}
/* Fehlkachel: Schraffur bei 5 % Rot verschwindet, die Kachel wirkt leer. */
.aura-result.aura-miss {
  border-color: rgba(180, 35, 24, 0.3);
  background:
    repeating-linear-gradient(-45deg, rgba(180, 35, 24, 0.07) 0 10px, transparent 10px 20px),
    var(--aura-canvas-raise);
}
.aura-result.aura-miss:hover { border-color: rgba(180, 35, 24, 0.5); }

/* Uebergangenes Referenzfoto: 28 % Deckkraft gegen Weiss ist ein Nichts —
   der Zweck der Regel ist aber, dass man weiter SIEHT, was ignoriert wird. */
.aura-character.is-bypassed img { filter: grayscale(1) contrast(0.9); opacity: 0.55; }
.aura-character.is-bypassed { box-shadow: inset 0 0 0 1px var(--aura-border); }
.aura-character.is-bypassed:hover { box-shadow: inset 0 0 0 1px var(--aura-accent-28); }
.aura-character.is-filled { box-shadow: inset 0 0 0 1px var(--aura-border-soft); }

/* ═══ 8 · SCHWEBENDE MOEBEL ════════════════════════════════════════════════
   Flaeche und Rand kommen ueber --aura-surface-float. Offen bleiben die fuenf
   Stellen, die ihren Schlagschatten als Festwert mitbringen (0.5 bis 0.6
   Schwarz) — auf Weiss ein grauer Fleck statt einer Kante. */
.aura-composer,
.aura-confirm,
.aura-tour-card,
.goo-hello,
.goo-panel { box-shadow: var(--aura-highlight), var(--aura-lift-lg); }

/* Der Knopf von Goo: die Ruheflaeche kommt ueber --aura-surface-float und ist
   damit schon weiss, die HOVER-Flaeche steht in lg-glass.css:3692 aber als
   fester Dunkelwert. Beim Ueberfahren wurde die Beschriftung deshalb schwarz
   auf schwarz. Gleiche Geometrie, helle Flaeche. */
.goo-launch:hover .goo-launch-label {
  background: var(--aura-hover) !important;
  border-color: var(--aura-accent-28);
  color: var(--aura-text);
}
.goo-launch-label { color: var(--aura-text); }

/* ── Falcon-Reste mit Kennung ──────────────────────────────────────────────
   main.min.css faerbt einige Symbole ueber ID-Selektoren weiss. ID schlaegt
   Klasse, unsere Themenregeln greifen dort also nicht. Betroffen ist vor allem
   der Menueknopf im Kopf: weisses Symbol auf weissem Kreis, auf hellem Grund
   unsichtbar. */
/* Moebel gegen den ruhigen Grund absetzen: weisse Flaeche, Haarlinie, weicher
   Schatten. Ohne das steht Weiss auf Weiss und die Kante fehlt. */
.card,
.aura-composer,
.aura-out-wrap,
.aura-panel {
  background: #ffffff !important;
  border: 1px solid var(--aura-border);
  box-shadow: var(--aura-lift-sm);
}

/* Die Kopfzeile traegt Weiss, damit der Arbeitsbereich darunter als eine
   Flaeche mit ihr liest. Die Seitenleiste steht in Abschnitt 13. */
.app-header { background: #ffffff !important; border-bottom: 1px solid var(--aura-border); }

/* Name und Kuerzel im Kopf kamen aus dem dunklen Thema in Weiss. */
.app-header .rounded-circle { background: var(--aura-accent) !important; color: var(--aura-accent-ink) !important; }
.app-header .small,
.app-header span { color: var(--aura-text-2); }

#toggle-sidebar i,
#pin-sidebar i {
  color: var(--aura-text-2);
  background: var(--aura-hover);
}
#toggle-sidebar:hover i,
#pin-sidebar:hover i {
  color: var(--aura-text);
  background: var(--aura-hover-strong);
}
.aura-style-zoom { box-shadow: var(--aura-lift-lg); background: var(--aura-surface-2); }
.aura-plus[data-tip]::after { box-shadow: var(--aura-lift-sm); }

/* Abdunkler: 55 % bzw. 74 % Schwarz ueber einer weissen Seite ist ein Bruch,
   kein Zuruecktreten. Der Tour-Wert ist ein SVG-fill. */
.aura-scrim { background: var(--aura-scrim); }
.aura-tour-scrim { fill: rgba(16, 24, 40, 0.45); }

/* ═══ 9 · RUHIGE FLAECHEN ══════════════════════════════════════════════════
   Sammelbehandlung der weissen Transparenzen aus lg-glass.css. Ruhelage eines
   Bedienelements: #F2F2F2. Hover darauf: #E8E8E8. Passive Fuellung: #F7F8FA. */

/* Ruhelage — Bedienelemente, die eine Flaeche tragen. */
.aura-act,
.aura-advbtn,
.aura-tool,
.aura-nsfw-tab,
.aura-plus,
.aura-clear,
.aura-undo button,
.aura-pchip,
.aura-pchip-thumb,
.aura-note,
.aura-style-x,
.aura-character,
.aura-bypass,
.aura-optional,
.aura-nsfw-state,
.aura-step-locked .aura-step-num,
.goo-actions button,
.goo-error button { background: var(--aura-hover); }
/* Die statische Pille ist kein Bedienelement — sie darf beim Ueberfahren nicht
   die Farbe wechseln. */
.aura-tool.is-static:hover { background: var(--aura-hover); color: var(--aura-text-2); }

/* Hover auf einer bereits gefuellten Flaeche. */
.aura-act:hover,
.aura-advbtn:hover,
.aura-tool:hover:not(:disabled),
.aura-nsfw-tab:hover,
.aura-plus:hover:not(:disabled),
.aura-clear:hover,
.aura-undo button:hover,
.aura-pchip:hover,
.aura-note:hover,
.aura-style-x:hover,
.aura-character:hover,
.aura-bypass:hover,
.goo-actions button:hover { background: var(--aura-hover-strong); }

/* Hover auf einer bis dahin leeren Zeile. */
.nav-pills .nav-link:hover,
.aura-composer-tab:hover,
.aura-prompt-row:hover,
.aura-stepper button:hover:not(:disabled),
.aura-undo .aura-undo-x:hover,
.aura-note-actions button:hover,
.aura-mail-tab:hover,
.aura-tour-x:hover,
.aura-tour-x:focus-visible,
.aura-tour-back:hover,
.aura-tour-back:focus-visible,
.goo-hello button:hover,
.goo-icon-btn:hover,
.goo-icon-btn:focus-visible { background: var(--aura-hover); }
.dropdown-item:hover { background: var(--aura-hover) !important; }

/* Passive Fuellungen ohne Bedienabsicht. */
.aura-collab-tab::before,
.aura-style-img,
.lg-video-page .lg-code,
.lg-video-page .lg-howto { background: var(--aura-surface-2); }
/* Die Fortschrittsschiene der Tour muss sich vom Weiss absetzen. */
.aura-tour-bars span { background: var(--aura-hover-strong); }
.aura-collab-tab:hover::before { background: var(--aura-hover); }
.goo-msg code { background: var(--aura-hover); }
.progress { background: var(--aura-hover-strong) !important; }
.aura-style-img.is-blank,
.aura-pchip-img.is-blank {
  background: repeating-linear-gradient(135deg, rgba(17, 24, 39, 0.045) 0 8px, rgba(17, 24, 39, 0.02) 8px 16px);
}

/* Reiter und Menueeintrag im Zustand AN — .is-on hat (0,2,0) bzw. (0,3,0),
   gleiche Spezifitaet, spaeter geladen. */
.aura-composer-tab.is-on { background: var(--aura-hover-strong); color: var(--aura-text); }
.aura-menu-item:hover .aura-menu-label,
.aura-menu-item:hover .aura-menu-glyph { background: var(--aura-hover); }
.aura-menu-item.is-on .aura-menu-label,
.aura-menu-item.is-on .aura-menu-glyph { background: var(--aura-hover-strong); }
.aura-nsfw-tab > i:last-child { background: var(--aura-hover-strong); }
.aura-nsfw-tab:hover > i:last-child { background: rgba(17, 24, 39, 0.18); }
.aura-nsfw.is-open .aura-nsfw-tab > i:last-child { background: rgba(17, 24, 39, 0.16); }
@media (prefers-reduced-motion: reduce) {
  .aura-nsfw:not(.is-open):not(.is-on) .aura-nsfw-tab > i:last-child { background: var(--aura-hover-strong); }
  .aura-nsfw:not(.is-open):not(.is-on) .aura-nsfw-tab:hover > i:last-child { background: rgba(17, 24, 39, 0.2); }
}

/* Das kleine Rechteck ist im Format-Menue der einzige Traeger des
   Seitenverhaeltnisses und steht in lg-glass.css:1537 in 75 % Weiss. */
.aura-ratio { border-color: var(--aura-text-2); }

/* Eingabeleiste beim Ziehen: roher Limettenwert statt Akzent-Token. */
.aura-composer.is-drop { background: var(--aura-accent-06); }

/* Intim-Schublade: #f0a2c4 liegt auf Weiss bei 1.9:1, der Zustand waere nicht
   ablesbar. */
.aura-nsfw.is-on { border-color: var(--aura-intim); }
.aura-nsfw-tab > i:first-child,
.aura-pchip-thumb i.ri-heart-2-line { color: var(--aura-intim); }
.aura-nsfw.is-on .aura-nsfw-state { background: var(--aura-intim-soft); color: var(--aura-intim); }

/* Haken auf der Stil-Kachel: die Flaeche kommt aus dem Token, die Schrift
   nicht — fast Schwarz auf Marineblau sind 1.4:1, und der Haken ist der
   einzige Hinweis, welcher Stil gewaehlt ist. */
.aura-style-check { color: var(--aura-accent-ink); }

/* ═══ 10 · TABELLEN, ABZEICHEN, UTILITIES ══════════════════════════════════ */
.table {
  --bs-table-color: var(--aura-text);
  --bs-table-border-color: var(--aura-border-hair);
  --bs-table-hover-bg: rgba(17, 24, 39, 0.04);
  --bs-table-striped-bg: rgba(17, 24, 39, 0.02);
  --bs-table-striped-color: var(--aura-text-2);
}
.table thead th { background: var(--aura-surface-2); color: var(--aura-muted); }
.table-light { --bs-table-bg: var(--aura-surface-2); --bs-table-color: var(--aura-text-2); }

/* Abzeichen: die Ampelfarben aus lg-glass.css:749-753 liegen auf Weiss zwischen
   2.0 und 2.4:1. Die Doppelklasse dort hat (0,3,0) — hier ebenso. */
.badge.bg-secondary { background: var(--aura-hover) !important; color: var(--aura-text-2) !important; }
.badge.bg-success,
.badge.bg-success-subtle { background: var(--aura-ok-bg) !important; color: var(--aura-ok) !important; }
.badge.bg-warning,
.badge.text-bg-warning,
.badge.bg-warning-subtle { background: var(--aura-warn-bg) !important; color: var(--aura-warn) !important; }
.badge.bg-danger,
.badge.bg-danger-subtle { background: var(--aura-error-bg) !important; color: var(--aura-error) !important; }
.badge.bg-info,
.badge.bg-info-subtle { background: var(--aura-info-bg) !important; color: var(--aura-info) !important; }
.badge.text-bg-dark,
.badge.bg-dark { background: var(--aura-text) !important; color: #ffffff !important; }
.badge.bg-success-subtle.text-success,
.text-success { color: var(--aura-ok) !important; }
.badge.bg-warning-subtle.text-warning,
.text-warning { color: var(--aura-warn) !important; }
.badge.bg-danger-subtle.text-danger,
.text-danger { color: var(--aura-error) !important; }
.badge.bg-info-subtle.text-info { color: var(--aura-info) !important; }
.icon-box.bg-success-subtle { background: var(--aura-ok-bg) !important; }
.icon-box.bg-warning-subtle { background: var(--aura-warn-bg) !important; }

.bg-primary-subtle { background-color: var(--aura-accent-06) !important; color: var(--aura-accent) !important; }
.bg-success-subtle { background-color: var(--aura-ok-bg) !important; color: var(--aura-ok) !important; }
.bg-warning-subtle { background-color: var(--aura-warn-bg) !important; color: var(--aura-warn) !important; }
.bg-danger-subtle { background-color: var(--aura-error-bg) !important; color: var(--aura-error) !important; }
.bg-info-subtle { background-color: var(--aura-info-bg) !important; color: var(--aura-info) !important; }
/* lg-glass.css:583 dreht .bg-white/.bg-light auf weisses Alpha — auf Weiss ist
   das nichts; sie stehen im Markup u. a. als Bildplatzhalter. */
.bg-white { background-color: #ffffff !important; color: var(--aura-text) !important; }
.bg-light { background-color: var(--aura-hover) !important; color: var(--aura-text) !important; }
/* .bg-black/.bg-dark bleiben BEWUSST dunkel: sie tragen an 14 Stellen
   Videofenster, Vollbildbetrachter und Schleier auf Fotos. Sie werden nur
   dichter, damit die weisse Schrift darin wieder traegt (2.9:1 → 9.3:1) —
   lg-glass.css:390 bildet .text-white auf --aura-text ab, hier zurueck. */
.bg-black,
.bg-dark { background-color: rgba(0, 0, 0, 0.72) !important; }
.bg-black .text-white,
.bg-dark .text-white { color: #ffffff !important; }
.bg-black .text-white-50,
.bg-dark .text-white-50 { color: rgba(255, 255, 255, 0.72) !important; }
/* .text-white-50 ist in lg-glass.css nirgends gefasst und faellt auf Bootstrap
   zurueck — auf hellem Grund unsichtbar. */
.text-white-50 { color: var(--aura-muted) !important; }

a { color: var(--aura-link); }
a:hover { color: var(--aura-link-hover); text-decoration: underline; text-underline-offset: 4px; }
.text-info,
.text-primary { color: var(--aura-link) !important; }

/* Die Zeile mit den unwiderruflichen Aktionen muss die am besten lesbare sein,
   nicht die schlechteste: #e08a8a liegt auf Weiss bei 2.4:1. */
.aura-act.is-danger { color: var(--aura-error); border-color: rgba(180, 35, 24, 0.28); }
.aura-act.is-danger:hover {
  background: var(--aura-error-bg);
  border-color: rgba(180, 35, 24, 0.55);
  color: var(--aura-error);
}

/* ═══ 11 · TOUR ════════════════════════════════════════════════════════════ */
/* Leuchten braucht dunklen Grund; auf Weiss bleibt nur ein schmutziger Rand. */
.aura-tour-ring { filter: drop-shadow(0 0 6px rgba(26, 35, 66, 0.25)); }
.aura-tour-bars span.is-past { background: var(--aura-accent-50); }
/* Der Zeiger nimmt die Seitenfarbe, der Rand kommt aus dem Akzent — sonst
   stuende ein tiefschwarzer Pfeil mit limettenem Schein auf Weiss. */
.aura-tour-cursor svg { filter: drop-shadow(0 2px 6px rgba(16, 24, 40, 0.35)); }
.aura-tour-cursor svg path { fill: var(--aura-canvas); }

/* ═══ 12 · GOO ═════════════════════════════════════════════════════════════
   Der Koerperverlauf steht als Inline-SVG in GooMascot.tsx und bleibt dunkel.
   Genau deshalb duerfen Kopfglanz, Torsokante und Gesicht NICHT aufgehellt
   werden — sie liegen auf der dunklen Figur, nicht auf der Seite. Angefasst
   wird nur, was auf dem weissen Grund landet. */
.goo .goo-shadow { fill: rgba(16, 24, 40, 0.18); }
.goo .goo-antenna-ball { filter: none; }
.goo .goo-eye { filter: none; }
.goo .goo-face { stroke: rgba(255, 255, 255, 0.14); }
.goo-msg.is-goo { background: var(--aura-surface-2); border-color: var(--aura-border-soft); color: var(--aura-text); }
.goo-msg a { color: var(--aura-link); }
.goo-error {
  border: 1px solid rgba(180, 35, 24, 0.25);
  background: var(--aura-error-bg);
  color: var(--aura-error);
}
/* Der Aufmerksamkeitsblitz ist auf Limette festgelegt. */
@keyframes goo-flash-light {
  0% { box-shadow: 0 0 0 0 rgba(26, 35, 66, 0), 0 0 0 1.5px var(--aura-accent); }
  25% { box-shadow: 0 0 0 8px rgba(26, 35, 66, 0.18), 0 0 0 1.5px var(--aura-accent); }
  100% { box-shadow: 0 0 0 14px rgba(26, 35, 66, 0), 0 0 0 1.5px rgba(26, 35, 66, 0); }
}
.goo-flash { animation-name: goo-flash-light; }

/* ═══════════════════════════════════════════════════════════════════════════
   Feinschliff: Bedienelemente als Karten statt als graue Kaesten

   Im dunklen Thema traegt eine aufgehellte Flaeche das Bedienelement — auf
   Weiss wird daraus ein flaches Grau ohne Tiefe, und die Leiste sieht billig
   aus. Der Kunde arbeitet umgekehrt: weisse Flaeche, Haarlinie, ein Hauch
   Schatten. Genau das steht hier, und zwar am Ende der Datei, damit es die
   Sammelregeln weiter oben schlaegt.
   ═══════════════════════════════════════════════════════════════════════════ */

.aura-pchip,
.aura-tool,
.aura-act,
.aura-advbtn,
.aura-character,
.aura-plus,
.aura-note,
.aura-nsfw-tab {
  background: #ffffff;
  border: 1px solid var(--aura-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.aura-pchip:hover,
.aura-tool:hover:not(:disabled),
.aura-act:hover,
.aura-advbtn:hover,
.aura-character:hover,
.aura-plus:hover:not(:disabled),
.aura-note:hover,
.aura-nsfw-tab:hover {
  background: var(--aura-hover);
  border-color: var(--aura-border-strong, #d7dae0);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

/* Gesetzter oder offener Chip: die Hausfarbe traegt den Zustand, nicht ein
   weiteres Grau. */
.aura-pchip.is-set,
.aura-pchip.is-open {
  border-color: var(--aura-accent);
  box-shadow: 0 0 0 3px rgba(26, 35, 66, 0.08);
}
.aura-pchip.is-set .aura-pchip-val,
.aura-pchip.is-open .aura-pchip-val { color: var(--aura-accent); }

/* Beschriftung: die Kleinschrift oben ist Beiwerk, der Wert darunter die
   Aussage. Vorher lagen beide auf derselben Stufe. */
.aura-pchip-lab { color: var(--aura-muted); letter-spacing: 0.06em; }
.aura-pchip-val { color: var(--aura-text); font-weight: 600; }

/* Das Symbol im Chip bekommt die Hausfarbe statt Grau. */
.aura-pchip-thumb { background: var(--aura-surface-2); border: 1px solid var(--aura-border-hair); }
.aura-pchip-thumb i { color: var(--aura-accent); }

/* Die Eingabeleiste selbst: etwas mehr Luft und eine klare Trennung zur
   Werkzeugzeile darunter. */
.aura-composer { padding-bottom: 6px; }
.aura-composer-tools,
.aura-tools { border-top: 1px solid var(--aura-border-hair); padding-top: 10px; }

/* Der Hauptknopf traegt die Aktion — etwas praesenter als die Pillen daneben. */
.aura-generate { box-shadow: 0 2px 8px rgba(26, 35, 66, 0.25); }
.aura-generate:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(26, 35, 66, 0.3); }

/* ── Ruhige Kopfzeilen ─────────────────────────────────────────────────────
   Die Zeile ueber der Ausgabe trug drei Stimmen auf einmal: eine Ueberschrift,
   eine technische Kleinschrift in Kapitaelchen und einen blauen Knopf, der
   lauter war als alles andere auf der Seite. Auf Weiss faellt das sofort auf.
   Jetzt: eine Ueberschrift, eine leise Beschriftung, ein stiller Textknopf. */
.aura-sect-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--aura-text);
}
.aura-mono {
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--aura-dim);
  font-weight: 500;
}
/* Der stille Textknopf: kein Blau, keine Unterstreichung im Ruhezustand. */
.btn-link.aura-mono,
.aura-mono.btn-link {
  color: var(--aura-muted) !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
.btn-link.aura-mono:hover,
.aura-mono.btn-link:hover {
  color: var(--aura-text) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ── Stilfenster ohne Scrollbalken ─────────────────────────────────────────
   Zehn Kacheln in zwei Reihen passten um wenige Pixel nicht in die erlaubte
   Hoehe, also erschien ein Balken und die zweite Reihe war angeschnitten. Drei
   kleine Stellschrauben statt einer grossen: etwas mehr erlaubte Hoehe, ein
   flacheres Bildformat und ein Hinweistext, der nach zwei Zeilen endet.
   Schmalere Mindestbreite bringt zusaetzlich eine Spalte mehr. */
.aura-style-panel { max-height: min(74vh, 660px); }
/* Feste Spaltenzahl statt Mindestbreite: sonst rutschen die Kacheln bei
   schmalem Fenster in eine dritte und vierte Reihe und der Balken ist wieder
   da. So schrumpfen sie stattdessen mit — zehn Stueck bleiben zwei Reihen. */
.aura-style-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 860px) { .aura-style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .aura-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aura-style-img { aspect-ratio: 3 / 2; }
.aura-style-name { font-size: 14px; }
.aura-style-hint {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
}


/* ═══ 13 · SEITENNAVIGATION — MARKIERTE KANTE ══════════════════════════════
   Haltung: Der aktive Punkt wird nicht eingerahmt, sondern MARKIERT. Eine
   Kapsel an der linken Kante traegt den Zustand, die Zeile selbst bekommt nur
   einen Hauch Farbe, der nach rechts ausblendet — sie hat also keine rechte
   Kante und damit keine Blockwirkung. Dazu Marine als Schrift- und
   Symbolfarbe. Zustand ueber Markierung und Farbe, nicht ueber Kasten und
   Rahmen.

   Was dabei verschwindet:
   · lg-glass.css:190-195 faerbt den aktiven Punkt mit 10 % Marine, lg-light
     legte einen 28-%-Rahmen drum — zusammen der stumpfe graue Block aus dem
     Screenshot. Beides faellt ersatzlos.
   · main.min.css faerbt beim Ueberfahren die linke Kante #6036d4 (Falcon-Lila):
     .sidebar-menu>li:hover>a{border-left-color:#6036d4} ist zwar spezifischer
     als unsere Grundregel, verliert aber gegen border:0 !important — eine
     wichtige Kurzform schlaegt eine unwichtige Langform unabhaengig von der
     Spezifitaet.
   · Der blaue Standardring von Chrome: es gab bisher fuer die Navigation gar
     keine Fokusregel, deshalb zeichnete der Browser seinen eigenen.

   Wo lg-glass.css !important setzt (color, background, i.color, i.background,
   badge.font-size/background/color), steht es hier auch. Wo main.min.css mit
   .sidebar-menu>li>a>i eine hoehere Spezifitaet hat, adressieren wir das Symbol
   ebenfalls als direktes Kind (> i), statt !important zu streuen.

   Der Block gehoert ans DATEIENDE: mehrere Regeln haben dieselbe Spezifitaet
   wie die frueheren Sidebar-Stellen und gewinnen ueber die Reihenfolge. Die
   ersetzten Zeilen sind zu loeschen — siehe Begleitnotiz. */

/* ── Die Leiste ────────────────────────────────────────────────────────────
   Der Grund stand bisher an zwei Stellen dieser Datei und widersprach sich
   (surface-2 oben, canvas unten). Hier steht er einmal. Der Blur aus
   lg-glass.css liegt hinter einer deckenden Flaeche und kostet nur eine
   GPU-Ebene — im hellen Thema also abschalten. */
.sidebar-wrapper {
  background: var(--aura-canvas) !important;
  border-right: 1px solid var(--aura-border-soft);
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  /* Der Hauch, der die Markierung in die Zeile hinein verlaengert. 7 % Marine
     auf #F4F5F7 ergibt #E5E6EA; Marine darauf steht bei 12.35:1. */
  --lg-nav-wash: rgba(26, 35, 66, 0.07);
  --lg-nav-wash-hover: rgba(26, 35, 66, 0.11);
}

/* ── Liste und Zeile ───────────────────────────────────────────────────────
   Zeile und Markierung beginnen bei x=0. Das ist die eine Entscheidung, die
   den Entwurf zusammenhaelt: eine freistehende Kapsel neben einer eingerueckten
   Flaeche haette drei senkrechte Anfaenge in den ersten zwanzig Pixeln, und
   genau das liest man als unentschieden.

   44 px statt 52 px — nicht als Kompromiss, sondern weil dieselbe Leiste auf
   dem Handy die Schublade ist (AppShell rendert dort den Abdunkler davor) und
   44 px das Mass ist, das ein Finger sicher trifft. Das Symbol sass in einem
   36-px-Kreis aus Falcon, dessen Fuellung lg-glass.css laengst abgeschaltet
   hat — geblieben war nur die Groesse. 22 px genuegen der Glyphe; die
   Beschriftung bekommt dadurch 178 px statt 169 px. */
.sidebar-menu {
  margin: 6px 0 0;
  padding: 2px 0 8px;
}
.sidebar-menu > li { margin: 2px 0; }

.sidebar-menu li > a {
  position: relative;
  min-height: 44px;
  /* Rechts eingerueckt, links buendig: die Zeile ist an der Kante verankert,
     nicht auf ihr abgelegt. */
  margin: 0 10px 0 0;
  padding: 0 12px 0 16px;
  border-radius: 0 var(--aura-r-card) var(--aura-r-card) 0;
  /* Raeumt in einem Zug den 1-px-Geisterrahmen aus lg-glass.css, den
     border-left:3px aus main.min.css und dessen violette Hover-Kante weg. */
  border: 0 !important;
  background: transparent !important;
  color: var(--aura-text-2) !important;
  font-size: 15px;
  /* Das Gewicht aendert sich in KEINEM Zustand — weder beim Ueberfahren noch
     beim aktiven Punkt. Damit kann die Zeile nicht breiter werden, es braucht
     keine reservierte Laufweite und keinen zweiten, unsichtbaren Textknoten.
     Das !important ist Pflicht: main.min.css setzt fuer current-page 600 bei
     gleicher Spezifitaet, lg-glass.css 500. */
  font-weight: 400 !important;
  letter-spacing: 0.005em;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease, color 140ms ease;
}

/* Als direktes Kind adressiert, weil main.min.css das Symbol ebenfalls so
   anspricht (Groesse, Abstand, Kreis) und eine Regel mit nur zwei Elementen
   dagegen verloere. */
.sidebar-menu li > a > i {
  width: 22px;
  height: 22px;
  margin-right: 12px;
  font-size: 18px;
  line-height: 1;
  border-radius: 0;
  /* Statt opacity 0.7 (ergibt #808081, nur 3.62:1) eine echte Farbe. #565D68
     steht bei 6.09:1 und liegt bewusst EINE Stufe unter der Beschriftung
     (#4E4E4E, 7.63:1): eine Linienglyphe wiegt bei gleichem Farbwert optisch
     schwerer als 15-px-Text. Der Abstand bleibt in jedem Zustand erhalten. */
  color: var(--aura-muted) !important;
  opacity: 1;
  transition: color 140ms ease;
}

/* Lange Beschriftungen duerfen die Plakette nicht vor sich herschieben. */
.sidebar-menu li > a .menu-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Ueberfahren ───────────────────────────────────────────────────────────
   Derselbe Marine-Hauch wie beim aktiven Punkt, nur flach und ohne Markierung:
   Zeiger-Zustand, nicht Auswahl-Zustand. Der bisherige Wert #F2F2F2 stand auf
   #F4F5F7 bei 1.03:1 und war faktisch nicht vorhanden. */
.sidebar-menu li > a:hover {
  background: var(--aura-accent-06) !important;
  color: var(--aura-text) !important;
}
.sidebar-menu li > a:hover > i { color: var(--aura-text-2) !important; }
.sidebar-menu li > a:active { background: var(--aura-accent-10) !important; }

/* Gesperrte Punkte traegt AppShell als <li style="opacity:.45"> ohne Klasse.
   Sie duerfen keine Zeigerspur bekommen — eine Flaeche verspricht einen Klick,
   den es nicht gibt. */
.sidebar-menu li > a[aria-disabled="true"]:hover,
.sidebar-menu li > a[aria-disabled="true"]:active {
  background: transparent !important;
  color: var(--aura-text-2) !important;
}
.sidebar-menu li > a[aria-disabled="true"]:hover > i { color: var(--aura-muted) !important; }

/* ── Aktiver Punkt ─────────────────────────────────────────────────────────
   Kein Rahmen, keine geschlossene Flaeche. Der Verlauf beginnt an der
   Markierung und ist nach 62 % der Zeilenbreite verschwunden — die Zeile hat
   damit keine rechte Kante, an der sie zum Block werden koennte. */
.sidebar-menu li.current-page > a {
  background: linear-gradient(90deg, var(--lg-nav-wash) 0%, rgba(26, 35, 66, 0) 62%) !important;
  color: var(--aura-accent) !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
.sidebar-menu li.current-page > a:hover {
  background: linear-gradient(90deg, var(--lg-nav-wash-hover) 0%, rgba(26, 35, 66, 0) 68%) !important;
  color: var(--aura-accent) !important;
}
.sidebar-menu li.current-page > a > i,
.sidebar-menu li.current-page > a:hover > i {
  color: var(--aura-accent) !important;
  opacity: 1;
}

/* Die Markierung. main.min.css gibt jedem <li> bereits position:relative, das
   Pseudoelement braucht also kein zusaetzliches Markup. Sie waechst aus ihrer
   eigenen Mitte heraus — scaleY um transform-origin 50 %, kein Hoehensprung,
   der die Zeile umbrechen koennte. */
.sidebar-menu > li.current-page::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--aura-accent);
  transform: translateY(-50%);
  transform-origin: 50% 50%;
  animation: lgNavMark 160ms cubic-bezier(0.2, 0.75, 0.25, 1);
  pointer-events: none;
}
@keyframes lgNavMark {
  from { transform: translateY(-50%) scaleY(0.2); opacity: 0; }
  to   { transform: translateY(-50%) scaleY(1);   opacity: 1; }
}

/* ── Hervorgehobener, aber nicht aktiver Punkt ─────────────────────────────
   Gleiche Sprache, leiser gesprochen: eine kuerzere Markierung statt des
   frueheren Rahmens. Sie laeuft bewusst auf 50 % statt 28 % — 28 % ergaeben
   #B7BAC4 und damit 1.78:1, also ein Element, das seinen eigenen Zustand nicht
   mehr traegt. Bei 50 % sind es #878C9C und 3.07:1, die Schwelle fuer
   grafische Elemente. Das Symbol bekommt hier KEIN Marine: sonst waere der
   hervorgehobene Punkt vom aktiven nur noch durch 60 Quadratpixel Markierung
   zu unterscheiden. */
.sidebar-menu li.aura-nav-highlight:not(.current-page) > a,
.sidebar-menu li.aura-nav-highlight:not(.current-page) > a:hover {
  color: var(--aura-text) !important;
}
.sidebar-menu li.aura-nav-highlight:not(.current-page) > a > i {
  color: var(--aura-text-2) !important;
  opacity: 1;
}
.sidebar-menu > li.aura-nav-highlight:not(.current-page)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 12px;
  border-radius: 0 3px 3px 0;
  background: var(--aura-accent-50);
  transform: translateY(-50%);
  pointer-events: none;
}

/* ── Fokus ─────────────────────────────────────────────────────────────────
   Bisher gab es fuer die Navigation keine einzige Fokusregel, also zeichnete
   Chrome seinen eigenen blauen Ring — auch beim Mausklick, weil der Verweis
   den Fokus nach der Navigation behaelt. Jetzt: nichts bei der Maus, ein
   markeneigener Ring bei der Tastatur. Er liegt nach INNEN, weil die Zeile bis
   an die Leistenkante reicht und ein aeusserer Ring dort beschnitten wuerde. */
.sidebar-menu li > a:focus { outline: none; }
.sidebar-menu li > a:focus-visible {
  outline: 2px solid var(--aura-accent);
  outline-offset: -2px;
}

/* ── Plaketten: Status ist kein Zaehler ────────────────────────────────────
   "BETA" sagt, WAS der Punkt ist; "5" sagt, WIE VIELE dahinter liegen. Bisher
   sahen beide identisch aus — 14 % Marine, runde Pille. Jetzt zwei FORMEN,
   nicht zwei Farbtoene derselben Form.

   Grundform ist das Status-Etikett: rechteckig, Versalien, getoente Flaeche.
   Bewusst getoent und nicht grau umrandet — ein ausgegrauter Kasten neben
   einer satt gefuellten Pille liest sich nicht als zweite Bedeutung, sondern
   als deaktiviert. Ohne das data-Attribut aus AppShell.tsx faellt jede
   Plakette auf diese Form zurueck; die Navigation bleibt also auch dann
   stimmig. */
.sidebar-menu li > a .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  font-family: var(--aura-font-sans);
  font-size: 10px !important;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--aura-accent-10) !important;
  color: var(--aura-accent) !important;
  border: 0 !important;
  /* .rounded-pill aus Bootstrap ist 50rem !important — (0,2,2) schlaegt (0,1,0). */
  border-radius: 5px !important;
  transition: background-color 140ms ease;
}

/* Zaehlung: gefuellte Pille, weisse Ziffer. Der einzige gesaettigte Fleck der
   ganzen Leiste, deshalb aus dem Augenwinkel unverwechselbar. Feste
   Ziffernbreite nicht gegen den Sprung 9 → 10 (da kommt eine Stelle dazu),
   sondern damit 1 und 7 gleich viel Platz belegen und die Zahl beim
   Hochzaehlen nicht in sich zuckt. */
.sidebar-menu li > a .badge[data-badge="count"] {
  min-width: 18px;
  padding: 0 5px;
  background: var(--aura-accent) !important;
  color: var(--aura-accent-ink) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Eingeklappt (#pin-sidebar setzt .pinned, Leiste dann 74 px) ───────────
   ZWINGEND in dieselbe Medienabfrage wie main.min.css: dort gelten sowohl die
   74 px als auch das Ausblenden von .menu-text erst ab 992 px. Ohne die
   Gattung bekaeme jemand, der am Schreibtisch anheftet und dann das Fenster
   schmaler zieht, eine 250 px breite Leiste mit sichtbarem Text, zentrierten
   Zeilen und verschwundener Plakette — und kaeme ohne Neuladen nicht zurueck,
   weil #pin-sidebar unterhalb 992 px ausgeblendet ist, der React-Zustand aber
   bleibt. (.sidebar-hovered setzt im Projekt niemand; der Zustand ist also
   dauerhaft, nicht nur bis zur naechsten Mausbewegung.) */
@media (min-width: 992px) {
  .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-menu li > a {
    margin: 0;
    padding: 0;
    border-radius: 0;
    justify-content: center;
  }
  .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-menu li > a > i { margin-right: 0; }

  /* Ein Verlauf, der nach 62 % einer 74-px-Zeile ausblendet, waere ein
     Farbfleck. Im Streifen traegt die Flaeche flach. */
  .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-menu li.current-page > a {
    background: var(--lg-nav-wash) !important;
  }
  .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-menu li.current-page > a:hover {
    background: var(--lg-nav-wash-hover) !important;
  }

  /* Das Status-Etikett erklaert ein Wort, das gerade nicht sichtbar ist, und
     faellt deshalb weg. Die Zaehlung schrumpft auf einen Punkt an der Schulter
     des Symbols — das Signal "da ist etwas" bleibt, die Zahl geht. */
  .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-menu li > a .badge {
    display: none !important;
  }
  .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-menu li > a .badge[data-badge="count"] {
    display: block !important;
    position: absolute;
    top: 10px;
    right: 16px;
    width: 8px;
    height: 8px;
    min-width: 0;
    /* Gegen .ms-auto (margin-left:auto !important) aus Bootstrap — sonst
       rutscht der Punkt auf die Glyphe. */
    margin: 0 !important;
    padding: 0;
    font-size: 0 !important;
    line-height: 0;
    border-radius: 999px !important;
    /* Ring in der Grundfarbe, damit der Punkt die Schulter des Symbols nicht
       beruehrt, sondern darauf sitzt. */
    box-shadow: 0 0 0 2px var(--aura-canvas);
  }
  /* Auf der aktiven Zeile ist der Grund nicht mehr die Leiste, sondern der
     Hauch — der Freistellring muss mitziehen. */
  .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-menu li.current-page > a .badge[data-badge="count"] {
    box-shadow: 0 0 0 2px #e5e6ea;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-menu > li.current-page::before { animation: none; }
  .sidebar-menu li > a,
  .sidebar-menu li > a > i,
  .sidebar-menu li > a .badge { transition: none !important; }
}