/* ── Aiory: Lesbarkeits-Korrekturen ──────────────────────────────────────────
⚠️ Die dreifache :root-Kette ist Absicht: die Widget-Styles werden per
   JavaScript injiziert und landen damit NACH dieser Datei im Dokument.
   Bei gleicher Spezifitaet gewinnt der spaetere - deshalb hier eine Stufe
   drueber. Semantisch identisch (jedes html IST :root).
   Von Hand gepflegt (im Gegensatz zu aiory-theme.css / aiory-map.css).
   Behebt Stellen, die im HELLEN Design nie angepasst wurden - die Widgets
   waren ursprünglich nur fuer das dunkle Design gestaltet. Gemessen mit
   scripts/audit.py (WCAG-Kontrast, gamma-korrekt); jede Regel unten stand
   vorher unter 4.5:1 (Text) bzw. war praktisch unsichtbar.
   Alle Werte kommen aus den Design-Tokens, gelten also in JEDEM Theme.
   Laedt NACH aiory-map.css. */

/* Aufgaben: Filterleiste ------------------------------------------------- */
/* Chips standen hell auf hell (aktiv) bzw. hell auf mittelgrau (inaktiv). */
html:root:root:root.theme-light .tkw-filter {
    background: rgb(var(--ai-n-100)) !important;
    color: rgb(var(--ai-n-700)) !important;
    border: 1px solid rgb(var(--ai-n-200)) !important;
}
html:root:root:root.theme-light .tkw-filter:hover {
    background: rgb(var(--ai-n-200)) !important;
    color: rgb(var(--ai-n-900)) !important;
}
html:root:root:root.theme-light .tkw-filter.is-active {
    background: rgb(var(--ai-accent-600)) !important;
    color: rgb(var(--ai-n-0)) !important;
    border-color: rgb(var(--ai-accent-600)) !important;
}

/* Leere Zustaende: Titel/Text waren zu blass (1.5:1 bzw. 2.6:1) ---------- */
html:root:root:root.theme-light .tkw-empty-title,
html:root:root:root.theme-light .apw-empty-title,
html:root:root:root.theme-light .aion-shop-empty-title,
html:root:root:root.theme-light .aion-recipes-empty-title {
    color: rgb(var(--ai-n-700)) !important;
}
html:root:root:root.theme-light .tkw-empty-sub,
html:root:root:root.theme-light .apw-empty-sub,
html:root:root:root.theme-light .aion-shop-empty-sub,
html:root:root:root.theme-light .aion-recipes-empty-sub {
    color: rgb(var(--ai-n-600)) !important;
}

/* Termine: Datumszeilen und Tages-Plus waren zu blass -------------------- */
html:root:root:root.theme-light .apw-day-meta,
html:root:root:root.theme-light .apw-day-sub,
html:root:root:root.theme-light .apw-list-sub {
    color: rgb(var(--ai-n-600)) !important;
}
html:root:root:root.theme-light .apw-calendar-date,
html:root:root:root.theme-light .apw-day-add {
    color: rgb(var(--ai-accent-700)) !important;
}

/* Hinweis-/Warnzeilen: Amber auf Weiss ist 2,1:1 ------------------------- */
html:root:root:root.theme-light .aion-notification-status.is-warn,
html:root:root:root.theme-light .aion-notification-status.is-error {
    color: rgb(var(--ai-warn-500)) !important;
    filter: brightness(.72);
}

/* Sekundaertext im Chat (Schnellzugriff-Beschreibungen) ------------------ */
html:root:root:root.theme-light .quick-btn-desc,
html:root:root:root.theme-light .aion-hint-sub {
    color: rgb(var(--ai-n-600)) !important;
}

/* ── Runde 2: Reste aus scripts/audit.py ─────────────────────────────────── */

/* Sidebar-Ueberschrift stand hell auf hell (1,0:1 - komplett unsichtbar).
   Im dunklen Design ist die helle Schrift richtig, im hellen nie angepasst. */
html:root:root:root.theme-light #desktop-sidebar-title-label,
html:root:root:root.theme-light .aion-desktop-sidebar-title-main > span {
    color: rgb(var(--ai-n-800)) !important;
}

/* "Senden": der Knopf ist bei leerem Feld deaktiviert (opacity .4) und traegt
   text-white - auf hellem Grund unsichtbar. Deaktiviert = grauer Text. */
html:root:root:root.theme-light #action-btn:disabled,
html:root:root:root.theme-light #action-btn[aria-disabled="true"],
html:root:root:root.theme-light #action-btn.cursor-not-allowed {
    /* 16.08.2026 gemessen: n-600 kam bei .85 Deckkraft auf 4,38:1 - knapp
       unter AA. n-800 bringt rund 7:1, der Knopf bleibt trotzdem sichtbar
       gedaempft. */
    color: rgb(var(--ai-n-800)) !important;
    opacity: .85 !important;
}

/* Warn-/Hinweiszeilen: Amber auf Weiss ist 2,1:1. Dunklere Stufe nehmen,
   statt per filter nachzudunkeln (das traf den Token nicht). */
html:root:root:root.theme-light .aion-notification-status.is-warn,
html:root:root:root.theme-light .aion-notification-status.is-error,
html:root:root:root.theme-light [class*="notif"][class*="warn"] {
    color: rgb(var(--ai-warn-500)) !important;
    filter: none !important;
}
html:root:root:root.theme-light .aion-notification-status.is-warn {
    color: color-mix(in srgb, rgb(var(--ai-warn-500)) 55%, rgb(var(--ai-n-900))) !important;
}

/* [16.08.2026 entfallen] Hier stand die dunkle Schrift fuer die amber- bzw.
   gruenfarbenen Knoepfe von Rezepte/Einkaufsliste. Beide tragen seit dem
   Knopf-Gleichzug (Abschnitt "Hauptaktionen" am Dateiende) die violette
   Markenflaeche - darauf gehoert helle Schrift (--ai-on-accent). */

/* Restliche blasse Sekundaertexte (2,5-4,5:1) ---------------------------- */
html:root:root:root.theme-light .apw-day-line,
html:root:root:root.theme-light .apw-day-title + span,
html:root:root:root.theme-light .apw-list-day-sub,
html:root:root:root.theme-light .aion-recipes-empty p,
html:root:root:root.theme-light .text-gray-400 {
    color: rgb(var(--ai-n-600)) !important;
}

/* [16.08.2026 entfallen] s. o. - die Schriftfarbe dieser beiden Knoepfe
   steht jetzt im Abschnitt "Hauptaktionen" und deckt die <span> mit ab. */
html:root:root:root.theme-light #action-btn,
html:root:root:root.theme-light #action-btn * {
    color: rgb(var(--ai-n-600)) !important;
}
html:root:root:root.theme-light #action-btn:not(:disabled):not(.cursor-not-allowed),
html:root:root:root.theme-light #action-btn:not(:disabled):not(.cursor-not-allowed) * {
    color: rgb(var(--ai-n-0)) !important;
}
/* "Quellen"-Chip: weisse Schrift auf weissem Grund */
html:root:root:root.theme-light [class*="sources"] span,
html:root:root:root.theme-light .aion-sources-toggle,
html:root:root:root.theme-light .aion-sources-toggle * {
    color: rgb(var(--ai-n-700)) !important;
}

/* "Senden" bei leerem Eingabefeld: aion-chat.css faerbt
   `#chat-form button[type=submit]` weiss (!important, ID+Attribut = hohe
   Spezifitaet). Der Knopf ist dann deaktiviert und steht auf hellem Grund -
   1,0:1. Deshalb hier mit derselben Struktur PLUS :root-Kette kontern. */
html:root:root:root.theme-light #chat-form button[type="submit"]:disabled,
html:root:root:root.theme-light #chat-form button[type="submit"]:disabled *,
html:root:root:root.theme-light #chat-form button[type="submit"].cursor-not-allowed,
html:root:root:root.theme-light #chat-form button[type="submit"].cursor-not-allowed * {
    color: rgb(var(--ai-n-600)) !important;
}

/* Termin-Zeilen: der Zusatztext steht in einem <span> ohne eigene Klasse. */
html:root:root:root.theme-light .apw-day-head span,
html:root:root:root.theme-light .apw-day > span,
html:root:root:root.theme-light .apw-list-item span:not([class]) {
    color: rgb(var(--ai-n-600)) !important;
}

/* Warnzeile: wird zusaetzlich per Inline-Style gefaerbt - dagegen hilft nur
   dieselbe Ebene mit hoeherer Spezifitaet. */
html:root:root:root .aion-notification-status.is-warn,
html:root:root:root .aion-notification-status.is-warn * {
    color: color-mix(in srgb, rgb(var(--ai-warn-500)) 50%, rgb(var(--ai-n-950))) !important;
}

/* ══ Hell-Design: Restbefunde vom 16.08.2026 ═══════════════════════════════
   Gefunden mit einem Kontrast-Suchlauf ueber die gerenderten Seiten (Chromium,
   Transparenz UND Deckkraft mitgerechnet). Alle Werte unten sind gemessen,
   nicht geschaetzt; Ziel ist WCAG AA = 4,5:1.
   Der Selektor-Kniff `:root:root:root` ist der Hausstil dieser Datei - er
   schlaegt die Original-Regeln, ohne sie anzufassen. */

/* "Senden" war 4,38:1. Der Knopf traegt zusaetzlich opacity .85 (gewollt),
   deshalb muss die Schrift dunkler sein als der uebliche Slate-Ton.
   Die Beschriftung erbt vom Knopf (`.inline-flex{color:inherit!important}`),
   darum hier den KNOPF setzen, nicht das span. */
html:root:root:root.theme-light #action-btn:disabled,
html:root:root:root.theme-light #action-btn[aria-disabled="true"],
html:root:root:root.theme-light #action-btn.cursor-not-allowed {
    color: rgb(var(--ai-fix-gray-800)) !important;
}

/* Plan-Abzeichen "Standard": Gruen 5,150,105 auf hellem Grund = 3,44:1. */
html:root:root:root.theme-light .aion-profile-badge {
    color: rgb(var(--ai-fix-emerald-800)) !important;
}

/* Zweitzeilen im Kontobereich (verknuepfte Konten): 4,34:1. */
html:root:root:root.theme-light .aion-linked-meta,
html:root:root:root.theme-light .aion-profile-location {
    color: rgb(var(--ai-n-600)) !important;
}

/* Warnzeile in den Einstellungen: Amber auf Weiss = 2,15:1. Die vorhandene
   Regel weiter oben zog nur auf warn-500 - das reicht auf Weiss nicht. */
html:root:root:root.theme-light .aion-notification-status.is-warn,
html:root:root:root.theme-light [class*="notif"][class*="warn"] {
    color: rgb(var(--ai-fix-amber-800)) !important;
}

/* Rechtsseiten: Markenlink violett-400 = 2,48:1, Kontaktlinks blau-400 =
   3,52:1, Fusszeilen grau-500 = 4,34:1. */
html:root:root:root.theme-light .page-surface a,
html:root:root:root.theme-light .lg-title a {
    color: rgb(var(--ai-fix-violet-800)) !important;
}
html:root:root:root.theme-light .page-surface a[class*="text-blue"],
html:root:root:root.theme-light a.text-blue-400 {
    color: rgb(var(--ai-fix-blue-700)) !important;
}
html:root:root:root.theme-light .page-surface span.text-gray-500,
html:root:root:root.theme-light .page-surface .text-gray-500,
html:root:root:root.theme-light footer span,
html:root:root:root.theme-light .aiory-legal-footer span {
    color: rgb(var(--ai-n-600)) !important;
}

/* Nachtrag: zwei Stellen brauchten das gemessene Element selbst.
   - Die Senden-Beschriftung erbt NICHT vom Knopf (eigene Tailwind-Klasse).
   - Der Markenlink der Rechtsseiten sitzt im Fusszeilenbereich, nicht in
     .page-surface, und wurde von der dortigen Regel nicht erfasst. */
html:root:root:root.theme-light #action-btn-label { color: rgb(var(--ai-fix-gray-800)) !important; }
/* NUR der Inhaltsbereich: die Kopfleiste der Rechtsseiten steht auf dunklem
   Grund - dort waere dunkles Violett 2,19:1 (gemessen). */
html:root:root:root.theme-light body.aion-legal-page main a { color: rgb(var(--ai-fix-violet-800)) !important; }
html:root:root:root.theme-light body.aion-legal-page main a[class*="text-blue"] { color: rgb(var(--ai-fix-blue-700)) !important; }

/* Markenlink der Rechtsseiten: sitzt im <footer>, nicht im Inhaltsbereich. */
html:root:root:root.theme-light body.aion-legal-page footer a { color: rgb(var(--ai-fix-violet-800)) !important; }

/* Schrift auf Akzentflaechen bleibt WEISS - in jedem Design.
   Der violette Verlauf ist themenunabhaengig; die Umsetzung auf Tokens dreht
   aber jedes #fff mit und setzt dunkle Schrift auf Violett (gemessen 2,51:1
   auf den Rechtsseiten, 1,05:1 auf der Startseite). */
html:root:root:root.theme-light .btn-p,
html:root:root:root.theme-light .btn-p *,
html:root:root:root.theme-light .btn-primary,
html:root:root:root.theme-light .btn-primary * { color: rgb(var(--ai-n-0)) !important; }

/* Knoepfe mit Akzentflaeche: Schrift bleibt weiss.
   Die Umsetzung auf Tokens kann das nicht selbst erkennen - Flaeche und
   Schriftfarbe stehen in VERSCHIEDENEN Regeln, die Verlaufsflaeche ist der
   Farbregel also nicht anzusehen. Deshalb hier benannt.
   Gemessen: "Neues Dokument" 2,9:1, "Route finden" 3,68:1,
   "Produkte suchen" 1,96:1 - alle dunkel bzw. hell auf gesaettigter Flaeche. */
/* NUR die Primaervariante hat die Akzentflaeche - die Grundvariante ist hell
   und braucht dunkle Schrift. Meine erste Fassung traf beide und machte
   "Hochladen" weiss auf weiss. */
html:root:root:root.theme-light .aion-letter-studio-btn--primary,
html:root:root:root.theme-light .aion-letter-studio-btn--primary * { color: rgb(var(--ai-n-0)) !important; }
/* journey-/shopping-search-btn-main standen hier ebenfalls. Sie sind jetzt
   Teil der Hauptaktionen-Gruppe unten, die Flaeche UND Schrift zusammen
   setzt - eine Schriftregel ohne die zugehoerige Flaeche war genau der
   Grund, warum diese Knoepfe immer wieder auseinanderliefen. */


/* ══ Apps im hellen Design geradegezogen — 16.08.2026 ══════════════════════
   Ausgangslage: die Apps sind DUNKEL entworfen worden. Termine und Aufgaben
   haben spaeter einen echten Hell-Durchgang bekommen (73 bzw. 58 eigene
   theme-light-Regeln), Shopping, Reise, Route, Rezepte, Einkaufsliste und
   die Cloud NICHT. aiory-map.css uebersetzt die Dunkel-Werte mechanisch auf
   Tokens - dabei bleibt eine dunkle Flaeche eine dunkle Flaeche, auch im
   hellen Design. Deshalb standen hier graue Kloetze statt Eingabefelder.

   Gemessen wurde nicht am Stylesheet, sondern am GERENDERTEN BILD: Chromium-
   Screenshot -> Canvas -> Pixel. Nur so loesen sich Verlaeufe, Backdrops und
   gestapelte Transparenzen auf; wer nur getComputedStyle liest, sieht bei
   einem Verlaufsknopf die Flaeche dahinter und misst Unsinn.
   Werkzeug: scratchpad/pixel.mjs (Verdeckungstest via elementFromPoint).   */

/* ── 1. Eingabefelder: Shopping · Reise · Route ────────────────────────────
   aiory-map.css setzt hier `rgb(var(--ai-n-1000) / 0.4)` — und --ai-n-1000
   ist in JEDEM Theme Schwarz. Im Dunklen ergibt das ein dezent abgesenktes
   Feld, im Hellen 40 % Schwarz auf Weiss: gemessen rgb(150,151,152), also
   ein grauer Block, der wie ein gesperrtes Feld aussieht.
   Nur im hellen Design korrigieren - im dunklen ist die Regel richtig.      */
html:root:root:root.theme-light .shopping-form-group input,
html:root:root:root.theme-light .shopping-form-group select,
html:root:root:root.theme-light .travel-form-group input,
html:root:root:root.theme-light .travel-form-group select,
html:root:root:root.theme-light .travel-input-wrapper input,
html:root:root:root.theme-light .journey-form-group input {
    background-color: rgb(var(--ai-n-0)) !important;
    border: 1px solid rgb(var(--ai-n-300)) !important;
    color: rgb(var(--ai-n-900)) !important;
}
html:root:root:root.theme-light .shopping-form-group input:focus,
html:root:root:root.theme-light .shopping-form-group select:focus,
html:root:root:root.theme-light .travel-form-group input:focus,
html:root:root:root.theme-light .travel-form-group select:focus,
html:root:root:root.theme-light .travel-input-wrapper input:focus,
html:root:root:root.theme-light .journey-form-group input:focus {
    background-color: rgb(var(--ai-n-0)) !important;
    border-color: rgb(var(--ai-accent-500)) !important;
    box-shadow: 0 0 0 3px rgb(var(--ai-accent-500) / 0.18) !important;
    outline: none !important;
}
/* Platzhalter: n-600 war als Platzhalter zu kraeftig (liest sich wie ein
   ausgefuelltes Feld), n-400 zu blass. n-500 = 4,76:1 auf Weiss.           */
html:root:root:root.theme-light .shopping-form-group input::placeholder,
html:root:root:root.theme-light .travel-form-group input::placeholder,
html:root:root:root.theme-light .travel-input-wrapper input::placeholder,
html:root:root:root.theme-light .journey-form-group input::placeholder {
    color: rgb(var(--ai-n-500)) !important;
    opacity: 1 !important;
}

/* ── 2. Hauptaktionen: eine Farbe fuer den Hauptknopf ──────────────────────
   Vorher trug jede App eine andere Knopffarbe, teils im Widerspruch zum
   eigenen App-Symbol (Shopping: blaues Symbol + amberfarbener Knopf; Reise:
   amberfarbenes Symbol + blauer Knopf). Gemessen auf der Flaeche:
     „Produkte suchen"  weiss auf rgb(241,177,71)   = 1,89:1
     „Reise finden"     blau  auf rgb(114,165,249)  = 1,48:1
     „Route finden"     weiss auf rgb(107,161,248)  = 2,60:1
   Aufgaben, Termine und Cloud machen es laengst richtig: Markenviolett mit
   heller Schrift. Diese Gruppe zieht die uebrigen Apps darauf nach.
   Bewusst OHNE theme-Bindung: die Hauptaktion soll in Hell und Dunkel
   dieselbe Farbe haben, sonst ist die Farbe keine Aussage mehr.
   Die farbigen App-Symbole im Kopf bleiben unangetastet - sie tragen die
   Identitaet der App, der Knopf traegt die Marke.                           */
html:root:root:root .shopping-search-btn-main,
html:root:root:root .travel-search-btn-main,
html:root:root:root .journey-search-btn-main,
html:root:root:root .aion-recipes-btn.primary,
html:root:root:root .aion-shop-add-btn {
    /* background-image ueberschreibt sonst die Flaeche: die Altregeln in
       aiory-map.css setzen einen Verlauf, keine Farbe. */
    background-image: none !important;
    background-color: rgb(var(--ai-accent-600)) !important;
    border: 1px solid rgb(var(--ai-accent-700)) !important;
    color: rgb(var(--ai-on-accent)) !important;
}
/* Beschriftung und Symbol liegen teils in eigenen <span>/<svg> mit eigener
   Farbe - ohne diese Zeile bleibt der alte Ton stehen. */
html:root:root:root .shopping-search-btn-main *,
html:root:root:root .travel-search-btn-main *,
html:root:root:root .journey-search-btn-main *,
html:root:root:root .aion-recipes-btn.primary *,
html:root:root:root .aion-shop-add-btn * {
    color: rgb(var(--ai-on-accent)) !important;
}
html:root:root:root .shopping-search-btn-main svg,
html:root:root:root .travel-search-btn-main svg,
html:root:root:root .journey-search-btn-main svg,
html:root:root:root .aion-recipes-btn.primary svg,
html:root:root:root .aion-shop-add-btn svg {
    stroke: rgb(var(--ai-on-accent)) !important;
}
html:root:root:root .shopping-search-btn-main:hover,
html:root:root:root .travel-search-btn-main:hover,
html:root:root:root .journey-search-btn-main:hover,
html:root:root:root .aion-recipes-btn.primary:hover,
html:root:root:root .aion-shop-add-btn:hover {
    background-image: none !important;
    background-color: rgb(var(--ai-accent-700)) !important;
    border-color: rgb(var(--ai-accent-700)) !important;
    box-shadow: 0 4px 14px rgb(var(--ai-accent-600) / 0.3) !important;
}

/* ── 3. Reise/Route: Typ-Chips (Alles · Fluege · Hotels · Pauschal) ────────
   Der aktive Chip war blau auf blassblau (2,48:1) und stand damit farblich
   quer zum Hauptknopf. Gleiche Logik wie die Aufgaben-Filter: aktiv =
   Markenflaeche, inaktiv = neutral.                                        */
html:root:root:root.theme-light .travel-type-btn,
html:root:root:root.theme-light .journey-type-btn {
    background-image: none !important;
    background-color: rgb(var(--ai-n-50)) !important;
    border: 1px solid rgb(var(--ai-n-300)) !important;
    color: rgb(var(--ai-n-700)) !important;
}
html:root:root:root.theme-light .travel-type-btn:hover,
html:root:root:root.theme-light .journey-type-btn:hover {
    background-color: rgb(var(--ai-n-100)) !important;
    color: rgb(var(--ai-n-900)) !important;
}
html:root:root:root .travel-type-btn.active,
html:root:root:root .journey-type-btn.active {
    background-image: none !important;
    background-color: rgb(var(--ai-accent-600)) !important;
    border-color: rgb(var(--ai-accent-700)) !important;
    color: rgb(var(--ai-on-accent)) !important;
}
html:root:root:root .travel-type-btn.active *,
html:root:root:root .journey-type-btn.active * { color: rgb(var(--ai-on-accent)) !important; }
html:root:root:root .travel-type-btn.active svg,
html:root:root:root .journey-type-btn.active svg { stroke: rgb(var(--ai-on-accent)) !important; }

/* ── 4. Termine: Ansicht-Umschalter (Tage | Monat) ─────────────────────────
   Cyan-200 auf fast weissem Grund = 2,96:1, die inaktive Haelfte 4,38:1.
   Der Umschalter ist derselbe Bautyp wie die Aufgaben-Filterchips und
   bekommt deshalb dieselbe Sprache - in beiden Designs.                    */
html:root:root:root.theme-light .apw-view-btn { color: rgb(var(--ai-n-600)) !important; }
html:root:root:root.theme-light .apw-view-btn:hover { color: rgb(var(--ai-n-900)) !important; }
html:root:root:root .apw-view-btn.is-active {
    background-color: rgb(var(--ai-accent-600)) !important;
    color: rgb(var(--ai-on-accent)) !important;
}
html:root:root:root .apw-view-btn.is-active svg { stroke: rgb(var(--ai-on-accent)) !important; }

/* ── 5. Cloud: Nebentexte in der Seitenleiste ──────────────────────────────
   letter-studio.css faerbt „Deine Dateien" und die Rubrik „ORDNER" im HELLEN
   Design auf #94a3b8 — das ist HELLER als der Dunkel-Wert (#64748b), also
   genau verkehrt herum. Gemessen 2,34:1. Die Speicherzeile lag bei 4,34:1
   und damit knapp unter AA.                                                */
html:root:root:root.theme-light .aion-cloud-brandtxt span,
html:root:root:root.theme-light .aion-cloud-navlabel,
html:root:root:root.theme-light .aion-cloud .aion-documents-section-label,
html:root:root:root.theme-light .aion-cloud .aion-storage-text {
    color: rgb(var(--ai-n-600)) !important;
}

/* ── 6. Profilmenue: Rechtslinks waren unsichtbar ──────────────────────────
   `.aion-legal-links a` steht auf `rgba(255,255,255,.9)` und hat NIE eine
   Hell-Fassung bekommen - anders als die Mobilvariante
   (`.mobile-nav-legal-links`, die ihre eigene theme-light-Regel hat).
   Im hellen Profilmenue also weisse Schrift auf weissem Grund: 1,05:1.
   Merke: wenn eine Mobil- und eine Desktopfassung getrennt gestylt sind,
   erwischt eine Korrektur an einer Stelle die andere nie.                  */
html:root:root:root.theme-light .aion-legal-links { color: rgb(var(--ai-n-500)) !important; }
html:root:root:root.theme-light .aion-legal-links a,
html:root:root:root.theme-light .aion-legal-links a:visited {
    color: rgb(var(--ai-n-700)) !important;
}
html:root:root:root.theme-light .aion-legal-links a:hover,
html:root:root:root.theme-light .aion-legal-links a:focus-visible {
    color: rgb(var(--ai-accent-700)) !important;
}

/* ── 7. Hinweiszeilen unter den Suchformularen ─────────────────────────────
   „Preisfilter optional …" lag bei 4,11:1 (gestrichelter Kasten, n-600 auf
   einer leicht getoenten Flaeche). n-700 bringt 8,6:1 und bleibt ruhig.    */
html:root:root:root.theme-light .shopping-filter-hint,
html:root:root:root.theme-light .journey-filter-hint,
html:root:root:root.theme-light .shopping-mode-hint,
html:root:root:root.theme-light .travel-mode-hint,
html:root:root:root.theme-light .journey-mode-hint,
html:root:root:root.theme-light .shopping-portals-hint,
html:root:root:root.theme-light .travel-portals-hint,
html:root:root:root.theme-light .journey-portals-hint {
    color: rgb(var(--ai-n-700)) !important;
}

/* ── 8. Nachtrag Dunkel: drei Nebentexte unter AA ──────────────────────────
   Beim Nachmessen der Knopf-Umstellung aufgefallen, aber NICHT davon
   verursacht - die Stellen standen vorher schon so da. Nur Schriftfarbe,
   keine Flaeche; n-500 auf dem dunklen Grund war 3,4-3,8:1, die leere
   Ordnerliste sogar 2,36:1 (n-600 auf n-950).
   Bewusst auf :not(.theme-light) begrenzt, damit die Hell-Werte aus den
   Abschnitten 5 und 7 unberuehrt bleiben.                                   */
html:root:root:root:not(.theme-light) .shopping-search-subtitle,
html:root:root:root:not(.theme-light) .travel-search-subtitle,
html:root:root:root:not(.theme-light) .journey-search-subtitle,
html:root:root:root:not(.theme-light) .shopping-filter-hint,
html:root:root:root:not(.theme-light) .journey-filter-hint,
html:root:root:root:not(.theme-light) .shopping-mode-hint,
html:root:root:root:not(.theme-light) .travel-mode-hint,
html:root:root:root:not(.theme-light) .journey-mode-hint {
    color: rgb(var(--ai-n-400)) !important;
}
html:root:root:root:not(.theme-light) .aion-cloud-brandtxt span,
html:root:root:root:not(.theme-light) .aion-cloud-navlabel,
html:root:root:root:not(.theme-light) .aion-cloud-sideempty {
    color: rgb(var(--ai-n-400)) !important;
}

/* ── 9. Quellen-Panel warf seinen Schatten auch im geschlossenen Zustand ───
   `#sources-panel` liegt `position:fixed; right:0` und wird mit
   `transform: translateX(100%)` nach rechts aus dem Bild geschoben - der
   `box-shadow: -12px 0 48px rgba(0,0,0,.6)` zeigt aber nach LINKS und bleibt
   dabei im Bild stehen. Im dunklen Design faellt das nicht auf (Schwarz auf
   Schwarz), im hellen steht ein grauer Schleier am rechten Rand des Chats.
   Gemessen am gerenderten Bild: Grauwert faellt von 248 (x=1240) auf 166
   (x=1279) - dieselbe Spur steckt in JEDER Hero-Aufnahme.
   Marcel, 16.08.2026: „da ist rechts schwarzer verlauf mache den weg".
   Der Schatten gehoert an den geoeffneten Zustand - dort trennt er das Panel
   vom Inhalt, und genau dafuer ist er da. */
html:root:root:root #sources-panel { box-shadow: none !important; }
html:root:root:root #sources-panel.sp-open {
    box-shadow: -12px 0 48px rgb(var(--ai-n-1000) / 0.45) !important;
}
/* Im hellen Design ist 45 % Schwarz zu schwer - dort reicht die Haelfte. */
html:root:root:root.theme-light #sources-panel.sp-open {
    box-shadow: -12px 0 40px rgb(var(--ai-n-900) / 0.18) !important;
}

/* ── 10. PDF-Editor im hellen Design ───────────────────────────────────────
   `pdf-editor.js` hat NULL theme-light-Regeln und aiory-map.css kennt keinen
   einzigen `.aion-pdfed`-Selektor - die Flaeche war rein dunkel gebaut.
   Das Dokument selbst (`.aion-pdfed-page`) war immer schon weiss; hell werden
   muessen Huelle, Werkzeugleisten, Seitenleiste, Dialoge und der Chat.
   Marcel, 16.08.2026: "pdf hat dunkles design im webvideo".
   Die Signalfarben (Loeschen rot, Marker gelb, Auswahl violett) bleiben. */
html:root:root:root.theme-light .aion-pdfed-overlay {
    background: rgb(var(--ai-n-50)) !important; color: rgb(var(--ai-n-900)) !important;
}
html:root:root:root.theme-light .aion-pdfed-bar,
html:root:root:root.theme-light .aion-pdfed-aside,
html:root:root:root.theme-light .aion-pdfed-main.is-chatopen > .aiory-chat {
    background: rgb(var(--ai-n-100)) !important;
    border-bottom-color: rgb(var(--ai-n-300)) !important;
}
html:root:root:root.theme-light .aion-pdfed-pagebar,
html:root:root:root.theme-light .aion-pdfed-zoomwrap {
    background: rgb(var(--ai-n-100) / 0.92) !important;
    border-bottom-color: rgb(var(--ai-n-300)) !important;
}
/* Werkzeuge, Knoepfe, Zurueck-Knopf: helle Flaeche, dunkle Schrift. */
html:root:root:root.theme-light .aion-pdfed-tool,
html:root:root:root.theme-light .aion-pdfed-btn,
html:root:root:root.theme-light .aion-pdfed-back,
html:root:root:root.theme-light .aion-pdfed-toolgroup-caret {
    background: rgb(var(--ai-n-0)) !important;
    border-color: rgb(var(--ai-n-300)) !important;
    color: rgb(var(--ai-n-800)) !important;
}
html:root:root:root.theme-light .aion-pdfed-tool:hover,
html:root:root:root.theme-light .aion-pdfed-btn:hover,
html:root:root:root.theme-light .aion-pdfed-back:hover,
html:root:root:root.theme-light .aion-pdfed-toolgroup-caret:hover {
    background: rgb(var(--ai-n-100)) !important;
}
/* Aktiv/Primaer bleibt Markenviolett - dort gehoert helle Schrift drauf. */
html:root:root:root.theme-light .aion-pdfed-tool.is-active,
html:root:root:root.theme-light .aion-pdfed-btn--primary,
html:root:root:root.theme-light .aion-pdfed-chatsend {
    background: rgb(var(--ai-accent-600)) !important;
    border-color: rgb(var(--ai-accent-700)) !important;
    color: rgb(var(--ai-on-accent)) !important;
}
/* Nebentexte: die dunklen Werte waren auf Hell 2-3:1. */
html:root:root:root.theme-light .aion-pdfed-zoom,
html:root:root:root.theme-light .aion-pdfed-pblabel,
html:root:root:root.theme-light .aion-pdfed-status,
html:root:root:root.theme-light .aion-pdfed-loading,
html:root:root:root.theme-light .aion-pdfed-modaltext,
html:root:root:root.theme-light .aion-pdfed-delrow,
html:root:root:root.theme-light .aion-pdfed-objrow,
html:root:root:root.theme-light .aion-pdfed-ptool,
html:root:root:root.theme-light .aion-pdfed-plabel,
html:root:root:root.theme-light .aion-pdfed-objicon,
html:root:root:root.theme-light .aion-pdfed-objcaret,
html:root:root:root.theme-light .aion-pdfed-chathead,
html:root:root:root.theme-light .aion-pdfed-sigempty,
html:root:root:root.theme-light .aion-pdfed-signote {
    color: rgb(var(--ai-n-700)) !important;
}
html:root:root:root.theme-light .aion-pdfed-draftnote,
html:root:root:root.theme-light .aion-pdfed-objempty,
html:root:root:root.theme-light .aion-pdfed-chatempty,
html:root:root:root.theme-light .aion-pdfed-aistep span {
    color: rgb(var(--ai-n-600)) !important;
}
/* Dialoge und Eingaben. */
html:root:root:root.theme-light .aion-pdfed-modalbox,
html:root:root:root.theme-light .aion-pdfed-flyout {
    background: rgb(var(--ai-n-0)) !important;
    border-color: rgb(var(--ai-n-300)) !important;
}
html:root:root:root.theme-light .aion-pdfed-flyout-item {
    color: rgb(var(--ai-n-800)) !important;
}
html:root:root:root.theme-light .aion-pdfed-input,
html:root:root:root.theme-light .aion-pdfed-chatta {
    background: rgb(var(--ai-n-0)) !important;
    border-color: rgb(var(--ai-n-300)) !important;
    color: rgb(var(--ai-n-900)) !important;
}
/* Chatblasen: Nutzer violett (weisse Schrift), Antwort hell mit dunkler. */
html:root:root:root.theme-light .aion-pdfed-msg--assistant .aion-pdfed-bubble {
    background: rgb(var(--ai-n-100)) !important;
    color: rgb(var(--ai-n-900)) !important;
}
/* Trennlinien und die Loeschmarke am Signaturfeld (stand auf Dunkelblau). */
html:root:root:root.theme-light .aion-pdfed-objsec,
html:root:root:root.theme-light .aion-pdfed-chatinput,
html:root:root:root.theme-light .aion-pdfed-asideleft {
    border-color: rgb(var(--ai-n-300)) !important;
}
html:root:root:root.theme-light .aion-pdfed-sigdel {
    border-color: rgb(var(--ai-n-0)) !important;
}

/* ── 10b. PDF-Editor: die blassen Signalfarben ─────────────────────────────
   Die Fortschrittszeilen der KI standen in Pastelltoenen, die fuer DUNKEL
   gedacht sind. Auf der hellen Panelflaeche (#f1f5f9) gemessen:
     „PDF laden" / „Seiten analysieren"  #86efac = 1,28:1
     „Aiory denkt nach" (laeuft)         #c4b5fd = 1,69:1
     „Alle loeschen"                     #f87171 = 1,48:1
   Marcel, 16.08.2026: „das analysieren ist schlecht gemacht im hellen Design
   bzw. kann man es nicht lesen".
   Auf Hell gehoert die DUNKLE Stufe derselben Farbe - die Bedeutung
   (gruen = erledigt, violett = laeuft, rot = loeschen) bleibt erhalten. */
html:root:root:root.theme-light .aion-pdfed-aistep,
html:root:root:root.theme-light .aion-pdfed-signote.is-ok {
    color: rgb(var(--ai-fix-emerald-800)) !important;              /* erledigt, 8,0:1 */
}
html:root:root:root.theme-light .aion-pdfed-aistep.is-run {
    color: rgb(var(--ai-accent-700)) !important; /* laeuft, 7,4:1 */
}
html:root:root:root.theme-light .aion-pdfed-clearall,
html:root:root:root.theme-light .aion-pdfed-status.is-error,
html:root:root:root.theme-light .aion-pdfed-signote.is-err,
html:root:root:root.theme-light .aion-pdfed-delicon,
html:root:root:root.theme-light .aion-pdfed-deleted-restore,
html:root:root:root.theme-light .aion-pdfed-objdel:hover {
    color: rgb(var(--ai-fix-red-800)) !important;            /* rot auf hell, 7,0:1 */
}
html:root:root:root.theme-light .aion-pdfed-clearall {
    background: rgb(var(--ai-danger-500) / 0.10) !important;
    border-color: rgb(var(--ai-danger-500) / 0.45) !important;
}
/* Die Zeitangabe hinter jedem Schritt lag bei 4,34:1 - knapp unter AA. */
html:root:root:root.theme-light .aion-pdfed-aistep span {
    color: rgb(var(--ai-n-700)) !important;
}
/* „Auf welche Seite wirken die Werkzeuge" stand in Hellviolett (#c4b5fd). */
html:root:root:root.theme-light .aion-pdfed-ptarget {
    color: rgb(var(--ai-accent-700)) !important;
}

/* ── 11. Kompass im hellen Design ──────────────────────────────────────────
   Der Kompass war am 14.07.2026 bewusst dunkel gelassen worden ("Instrument").
   Marcel hebt das am 16.08.2026 auf: "kompass muss auch hell im hellen design".
   Die Flaechen hatte aiory-map.css laengst umgestellt - stehen geblieben sind
   zwei Schriften, die fuer den dunklen Grund gedacht waren:
     Ueberschrift "Kompass"   #f1f5f9 auf hellem Kopf = 1,06:1
     "Kalibrierung empfohlen" #fbbf24 (Amber) auf hell = 1,9:1
   Die Kompassrose selbst (N/O/S/W, Gradzahlen, Nadel) war schon dunkel und
   bleibt unberuehrt - die rote Nordnadel ist Bedeutung, keine Dekoration. */
html:root:root:root.theme-light .compass-title-v2 {
    color: rgb(var(--ai-n-900)) !important;
}
html:root:root:root.theme-light .compass-calibration-hint strong,
html:root:root:root.theme-light .compass-calibration-hint {
    color: rgb(var(--ai-fix-amber-800)) !important;   /* Amber-800, 6,4:1 auf hell */
}

/* ── 12. Adressprofile: drei Schriften fuer dunklen Grund ──────────────────
   Der Dialog hatte bereits theme-light-Regeln, drei Stellen blieben aber auf
   ihren Dunkel-Werten. Gegen den TATSAECHLICHEN Grund gemessen:
     Auswahl "Person"/"Organisation"  #fff auf #f8fafc = **1,05:1** (unsichtbar)
     Pfeil ">" der Profilkarte        #c4b5fd auf #e2e8f0 = 1,50:1
     Knopf "Loeschen"                 #fecaca auf #f1f5f9 = 1,32:1
   ⚠️ Die <option>-Farbe erbt vom <select>: dessen `color:#fff` war fuer den
   dunklen Dialog gedacht. Im hellen Design ist damit sowohl der GEWAEHLTE
   Wert als auch die aufgeklappte Liste weiss auf weiss.
   Weiss auf Violett (Reiter "Alle", "Profil hinzufuegen", "Speichern") ist
   mit 5,70:1 richtig und bleibt. */
html:root:root:root.theme-light .doc-profile-field select,
html:root:root:root.theme-light .doc-profile-dialog select,
html:root:root:root.theme-light .doc-profile-dialog select option {
    color: rgb(var(--ai-n-900)) !important;
}
html:root:root:root.theme-light .doc-profile-card-chevron {
    color: rgb(var(--ai-n-500)) !important;
}
html:root:root:root.theme-light .doc-profile-btn.danger {
    color: rgb(var(--ai-fix-red-800)) !important;
}


/* ── 13. Dokumente: KI-Panel im hellen Design ────────────────────────
   17.08.2026. Ursache ist EINE Kaskadenregel, nicht eine vergessene Farbe:
   der Generator schreibt die Hell-Fassung als
       html.theme-light:root .aiory-chat-tiers button        -> (0,3,2)
   das ist SPEZIFISCHER als die Zustandsregel
       :root .aiory-chat-tiers button.is-on                  -> (0,3,1)
   Beide tragen !important, also gewinnt im hellen Design die Grundfarbe:
   der aktive Chip behaelt Schiefergrau, obwohl er auf Violett steht.
   Dasselbe Muster trifft JEDEN Zustand des Panels ohne eigene theme-light-
   Fassung: .is-on, .is-rec, .opt-open, :hover, .is-error.
   Gemessen (Screenshot -> Canvas -> Pixel, Collabora- UND PDF-Editor, hell):
     aktiver Denkmodus-Chip "Aus"        1,61:1
     aktiver Qualitaets-Chip "Mittel"    1,62:1
     Optionen-Knopf bei offenem Menue    1,72:1  (weiss auf hellem Violett)
     "Chatverlauf loeschen" beim Hover   1,24:1
     Mikrofon waehrend der Aufnahme      1,57:1  (Symbol auf Rot)
     Verbrauchswert + Unterzeile         2,52:1
     Papierkorb-Symbol                   2,54:1
     Notiz "Dokument geaendert"          1,62:1
     Brief-Studio, Zeile "Aktuell ..."   1,41:1
     Brief-Studio, "Alles loeschen"      1,68:1
   ⚠️ Signalfarben brauchen im Hellen EIGENE Werte: die -400er Toene der
   Palette sind fuer dunklen Grund gemacht (Rot 2,52:1, Gruen 1,62:1 auf
   hell). Wie in Abschnitt 11/12 stehen darum feste dunkle Toene hier. */

/* Aktive Stufe (Denkmodus + KI-Qualitaet + Modus-Menue im Chat) - fuer ALLE
   Designs, nicht nur fuer das helle. Der Generator schreibt
       .aiory-chat-tiers button.is-on { color: rgb(var(--ai-n-0)) }
   also IMMER weiss. Im Schwarz-Weiss-Design traegt der Akzent aber Kontrast
   statt Farbe und ist auf dunklem Grund HELL (accent-600 = 165 165 165):
   weisse Schrift darauf ergab gemessen 1,86:1 - der gewaehlte Chip war der
   am schlechtesten lesbare im ganzen Menue. Richtig ist --ai-on-accent
   (dort 23 23 23), genau dafuer gibt es das Token.
   Flaeche einfarbig accent-600 statt Verlauf: der Verlauf lief zum helleren
   Ende hin aus und zog den Wert im dunklen Aiory-Design auf 4,23:1.
   Gemessen nach der Aenderung (Menue im Chat, alle vier Designs):
     Aiory dunkel  5,70:1   Aiory hell  5,70:1
     SW dunkel     7,28:1   SW hell     9,44:1
   (vorher: SW dunkel 1,86:1, Aiory dunkel 4,23:1) */
html:root:root:root:root .aiory-chat-tiers button.is-on {
    background-image: none !important;
    background-color: rgb(var(--ai-accent-600)) !important;
    color: rgb(var(--ai-on-accent)) !important;
}

/* Optionen-Knopf bei offenem Menue: die Flaeche ist im Hellen nur ein
   Violett-Hauch (accent-600/.24 auf hell), weisse Schrift verschwindet darin. */
html:root:root:root.theme-light .aiory-chat.opt-open .aiory-chat-optbtn {
    color: rgb(var(--ai-n-900)) !important;
}

/* Verbrauchsanzeige: Warn- und Alarmton fuer hellen Grund. */
html:root:root:root.theme-light .aiory-chat-usage[data-level="full"] .aiory-chat-usage-val,
html:root:root:root.theme-light .aiory-chat-usage[data-level="full"] .aiory-chat-usage-sub {
    color: rgb(var(--ai-fix-red-700)) !important;   /* Rot-700, 5,97:1 auf hell */
}
html:root:root:root.theme-light .aiory-chat-usage[data-level="warn"] .aiory-chat-usage-val {
    color: rgb(var(--ai-fix-amber-800)) !important;   /* Amber-800, 6,4:1 - wie Abschnitt 11 */
}

/* "Chatverlauf loeschen": Symbol im Ruhezustand, Schrift beim Ueberfahren. */
html:root:root:root.theme-light .aiory-chat-optrow--danger .aiory-chat-optrow-ic {
    color: rgb(var(--ai-danger-600)) !important;   /* 4,46:1 - Symbol, Schwelle 3:1 */
}
html:root:root:root.theme-light .aiory-chat-optrow--danger:hover .aiory-chat-optrow-txt b {
    color: rgb(var(--ai-fix-red-700)) !important;   /* 5,55:1 auf der Hoverflaeche */
}

/* Notiz unter einer Antwort ("Dokument geaendert"): Gruen fuer hellen Grund. */
html:root:root:root.theme-light .aiory-chat-msg-note {
    color: rgb(var(--ai-fix-emerald-800)) !important;     /* Emerald-800, 6,5:1 auf heller Blase */
}

/* Fehlerblase: die theme-light-Regel der Assistenzblase (0,4,1) ueberstimmt
   .is-error (0,4,0) - im Hellen sah eine Fehlermeldung deshalb aus wie eine
   normale Antwort. */
html:root:root:root.theme-light .aiory-chat-msg.is-error .aiory-chat-bubble {
    background-color: rgb(var(--ai-danger-500) / .14) !important;
    color: rgb(var(--ai-fix-red-800)) !important;   /* Rot-800 */
}

/* Mikrofon waehrend der Aufnahme: Symbol war Schiefergrau auf Rot. */
html:root:root:root.theme-light .aiory-chat-mic.is-rec {
    background-color: rgb(var(--ai-danger-600)) !important;
    background-image: linear-gradient(135deg, rgb(var(--ai-danger-600)), rgb(var(--ai-danger-500))) !important;
    color: rgb(var(--ai-on-accent)) !important;
}

/* Markierungs-Abzeichen ueber der Eingabe. */
html:root:root:root.theme-light .aiory-chat-selbadge {
    color: rgb(var(--ai-accent-700)) !important;
}

/* Brief-Studio: Verlaufsmenue und Archiv-Banner.
   ⚠️ Hier reicht die :root-Kette NICHT: die Grundregeln stehen als
   `:root #aion-letter-studio .aiory-chat-histmeta` (1,3,0) in der Map, und
   EINE ID schlaegt jede Zahl von Klassen. Die ID muss also mit - ohne sie
   blieb der Block wirkungslos (nachgemessen: unveraendert 1,41:1). */
html:root:root:root.theme-light #aion-letter-studio .aiory-chat-histrow.is-active .aiory-chat-histmeta {
    color: rgb(var(--ai-accent-700)) !important;   /* 5,42:1 auf der aktiven Zeile */
}
html:root:root:root.theme-light #aion-letter-studio .aiory-chat-histclear,
html:root:root:root.theme-light #aion-letter-studio .aiory-chat-histclear:hover,
html:root:root:root.theme-light #aion-letter-studio .aiory-chat-histdel:hover {
    color: rgb(var(--ai-fix-red-700)) !important;   /* Rot-700, 5,97:1 auf hell */
}
html:root:root:root.theme-light #aion-letter-studio .aiory-chat-archbanner {
    color: rgb(var(--ai-accent-700)) !important;
}
html:root:root:root.theme-light #aion-letter-studio .aiory-chat-archback {
    background-color: rgb(var(--ai-accent-600)) !important;
    color: rgb(var(--ai-on-accent)) !important;
}


/* ── 14. Aiory Cloud: Logo-Symbol und Aktionsflaeche der Kacheln ─────
   17.08.2026. Zweimal dasselbe Muster wie in Abschnitt 13: eine generierte
   Map-Regel mit !important ueberstimmt das, was die Cloud selbst gestaltet
   hat - einmal die Flaeche ohne die Schriftfarbe, einmal einen bewussten
   Verzicht auf Flaeche und Schatten. */

/* (a) Logo oben links: `:root .aion-cloud-logo` (aiory-map.css) legt einen
   VOLLEN Violettverlauf als background-image drueber. Entworfen war in
   aion-embeds.css aber eine nur 14 % getoente Flaeche MIT violettem Symbol -
   und diese Symbolfarbe blieb stehen. Gemessen auf der Verlaufsflaeche:
       hell    accent-700 auf accent-600   1,45:1  (praktisch unsichtbar)
       dunkel  accent-300 auf accent-600   3,09:1
   Weiss ist der Hausstandard fuer jede volle Violettflaeche der Marke
   (.aiory-chat-dot, .aiory-chat-send, "Neues Dokument"): 5,70:1.
   Bewusst in BEIDEN Designs - die Kachel ist in beiden dieselbe. */
html:root:root:root .aion-cloud-logo,
html:root:root:root .aion-cloud-logo svg {
    color: rgb(var(--ai-on-accent)) !important;
}

/* (b) ⋯-Knopf auf den Datei- und Ordnerkacheln: die Cloud setzt fuer ihre
   Kacheln ausdruecklich `background:none; box-shadow:none; border-radius:0`
   (letter-studio.css, ".aion-cloud .aion-doc-tile-actions"). Die generierte
   Regel `html.theme-light:root .aion-doc-tile-actions` (0,3,1) hat mit
   !important beides zurueckgeholt - und zwar OHNE Eckenrundung, weil die
   Map nur background-color und box-shadow schreibt.
   Ergebnis im Hellen: ein fast weisses QUADRAT (n-50 mit 72 %) samt dunklem
   Schlagschatten hinter dem 9-px-runden Knopf - die "weissen Ecken", die
   ueber die runde Ecke der Kachel hinausragen.
   Dunkel steht dasselbe Quadrat in n-950/0,72 da, nur unauffaelliger.
   Darum ohne theme-Bindung: hier wird die Absicht der Cloud
   wiederhergestellt, nicht eine Farbe fuer ein Design gewaehlt. */
html:root:root:root .aion-cloud .aion-doc-tile-actions,
html:root:root:root .aion-cloud .aion-doc-row-actions {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}


/* ── 15. Aiory Cloud: tote Hover-Zustaende im hellen Design ──────────
   17.08.2026, Marcel: "beim hamburger menue fehlt hover effekt".
   Dieselbe Kaskadenfalle wie in Abschnitt 13 — nur diesmal frisst sie nicht
   die Farbe, sondern die RUECKMELDUNG:

       html:root.theme-light .aion-doc-more        (0,3,1)  schlaegt
       :root .aion-doc-more:hover                  (0,3,0)

   Beide mit !important, also gewinnt im Hellen die Grundfarbe und der Hover
   aendert **gar nichts**. Nachgemessen mit einem Durchlauf ueber alle
   Bedienelemente der Cloud (getComputedStyle vor/nach page.hover, hell gegen
   dunkel) — drei Stellen waren betroffen, dunkel funktionieren alle drei:

       .aion-doc-more        ⋯-Knopf auf jeder Kachel   (von Marcel gemeldet)
       .aion-cloud-chip      Filter Alle/Dokumente/PDF/…
       .aion-cloud-newfolder "+ Neuer Ordner"

   Die Hell-Fassungen spiegeln die DUNKLE Entwurfssprache (Toenung + kraeftigere
   Schrift), nicht eine volle Flaeche — ein Hover soll nicht wie "ausgewaehlt"
   aussehen. Kontrast gegen die getoente Flaeche gerechnet. */
html:root:root:root.theme-light .aion-doc-more:hover {
    background-color: rgb(var(--ai-accent-600) / .16) !important;
    color: rgb(var(--ai-accent-700)) !important;   /* 5,57:1 auf der Toenung */
}
html:root:root:root.theme-light .aion-cloud-chip:hover {
    color: rgb(var(--ai-n-900)) !important;
    border-color: rgb(var(--ai-accent-600) / .45) !important;
}
html:root:root:root.theme-light .aion-cloud-newfolder:hover {
    border-color: rgb(var(--ai-accent-600) / .5) !important;
    color: rgb(var(--ai-accent-700)) !important;   /* 6,56:1 auf hell */
}


/* ── 16. Einstellungs-Fenster: Symbole im hellen Design ──────────────
   17.08.2026, Marcel: "einige svg sind in einstellungen noch nicht auf hell
   angepasst". Die Farben stehen als HARTE Werte im Inline-<style> von
   chat.py (`color:#c4b5fd` = accent-300, `#fca5a5`, `#fff`) — der
   Token-Generator kommt da nicht hin, das Fenster baut sein CSS selbst.
   Gemessen im Fenster (Screenshot -> Canvas -> Pixel), hell gegen dunkel:

     Symbolkacheln aller 8 Zeilen   1,49:1   (dunkel in Ordnung)
     davon "Standort"               1,24:1   <- eigene Regel, REINES WEISS
     Stift-Symbole rechts           1,61:1   (dunkel 8,31:1)
     Wert "Automatisch" (Text!)     1,69:1
     "Verknuepfen"/"Trennen"        1,68:1 / 1,75:1
     Kopfzeile PUSH / E-MAIL        4,30:1   (dunkel 5,02:1)
     aktiver Reiter im Fenster      2,54:1   weiss auf 28 % Violett

   Schwelle: Text 4,5:1, Symbole 3:1. */

/* Symbolkacheln: accent-300 ist fuer DUNKLEN Grund gemacht. Auf der
   10 % getoenten Kachel des hellen Designs traegt accent-700 (5,73:1). */
html:root:root:root.theme-light .aion-notification-row-icon,
html:root:root:root.theme-light .aion-notification-master-icon {
    color: rgb(var(--ai-accent-700)) !important;
}
/* ⚠️ "Standort" braucht die ID. Seine Farbe kommt aus aiory-map.css:
   `html:root.aion-chat-page #aion-profile-location-button .aion-notification-row-icon
    { color: rgb(var(--ai-n-0)) }`  (1,3,1)
   — und `--ai-n-0` ist in JEDEM Theme WEISS, genau wie --ai-n-1000 ueberall
   Schwarz ist. Der Generator hat das alte `#fff` mechanisch uebersetzt; im
   Dunklen stimmt es, im Hellen steht das Symbol weiss auf heller Kachel
   (1,24:1 — die blasseste Zeile der Liste). Eine Klassenkette verliert gegen
   die ID, deshalb hier ebenfalls mit ID. */
/* ⚠️⚠️ ZWEITER Anlauf (17.08.): die uebliche Hauskette reichte NICHT.
   Auf dem echten Host (test.aiory.app) traegt die Seite zusaetzlich
   `html.aion-chat-only` + `body.aion-chat-body` — dort gilt
     html:root.theme-light.aion-chat-only body.aion-chat-body
       #aion-profile-location-button .aion-notification-row-icon   -> (1,5,2)
   und die Hauskette `html:root:root:root.theme-light …` ist nur (1,5,1).
   Gleich viele Klassen, aber EIN Typselektor mehr (`body`) — der entscheidet.
   Darum hier `body` UND ein viertes `:root`: (1,6,2).
   👉 Nur ueber 127.0.0.1 gemessen sieht man das nicht: dort fehlen beide
   Huellen-Klassen, die Regel greift gar nicht und alles wirkt heil. */
html:root:root:root:root.theme-light body #aion-profile-location-button .aion-notification-row-icon {
    color: rgb(var(--ai-accent-700)) !important;
}

/* Abschnitts-Abzeichen im Reiter "Profil" (1,34:1). Fuer diese beiden gibt es
   in chat.py laengst eine Hell-Fassung — sie haengt aber an
   `html.theme-light.aion-chat-only body.aion-chat-body`, und die Huelle
   `aion-chat-body` traegt die heutige Seite nicht mehr (sie heisst
   `aion-unified-chat-body`). Die Regel greift also nie. Hier stehen die
   Werte von dort, nur ohne die tote Bedingung. */
html:root:root:root.theme-light .aion-account-icon--profile {
    background: rgb(var(--ai-fix-indigo-50)) !important;
    border-color: rgb(var(--ai-fix-indigo-500) / .24) !important;
    color: rgb(var(--ai-fix-indigo-600)) !important;                     /* 5,62:1 */
}
html:root:root:root.theme-light .aion-account-icon--linked {
    background: rgb(var(--ai-fix-emerald-50)) !important;
    border-color: rgb(var(--ai-success-500) / .24) !important;
    color: rgb(var(--ai-success-600)) !important;                     /* 3,58:1 — Symbol, Schwelle 3:1 */
}

/* Rechte Spalte der Aktionszeilen: Stift-Symbol UND der Wert daneben
   ("Automatisch") haengen an derselben Farbe. 6,56:1 auf hell. */
html:root:root:root.theme-light .aion-settings-action-value {
    color: rgb(var(--ai-accent-700)) !important;
}

/* Spaltenkopf der Benachrichtigungs-Matrix: 4,30 -> 6,92:1.
   ⚠️ Ebenfalls mit `body` + viertem `:root` (s. Standort oben): die
   Huellen-Regel setzt hier im HELLEN Design n-500 — also HELLER als die
   allgemeine Hell-Regel (n-600). */
html:root:root:root:root.theme-light body .aion-notification-matrix-head {
    color: rgb(var(--ai-n-600)) !important;
}

/* Aktiver Reiter: die Flaeche wurde auf 28 % Violett getoent, die weisse
   Schrift blieb stehen. Im Hellen volle Markenflaeche wie bei jeder anderen
   Hauptauswahl (Entscheid 16.08.), 5,70:1. Dunkel bleibt die Toenung. */
html:root:root:root.theme-light .aion-profile-tab.is-active,
html:root:root:root.theme-light .aion-profile-tab.is-active:hover {
    background-color: rgb(var(--ai-accent-600)) !important;
    color: rgb(var(--ai-on-accent)) !important;
}

/* Verknuepfungs-Aktionen im Reiter "Profil" (tragen selbst !important). */
html:root:root:root.theme-light .aion-linked-action {
    color: rgb(var(--ai-accent-700)) !important;   /* 6,56:1 */
}
html:root:root:root.theme-light .aion-linked-action--danger {
    color: rgb(var(--ai-fix-red-700)) !important;              /* Rot-700, 5,97:1 */
}


/* ── 17. Kontrast-Durchgang 17.08.: Restbefunde hell UND dunkel ──────
   Vollstaendiger Durchlauf mit Playwright ueber 13 Seiten, das Profilmenue,
   6 Reiter des Einstellungs-Fensters und 8 Widgets, beide Designs, gemessen
   per Screenshot->Canvas->Pixel und mit getComputedStyle gegengeprueft.
   Schwelle: Text 4,5:1, Symbole 3:1. */

/* ── 17a) DUNKEL: ein Token, viele Stellen ────────────────────────────
   `--ai-n-500` als Beschriftungsfarbe ergibt auf `--ai-n-900` nur **3,75:1**.
   Im Hellen ergibt dasselbe Token 4,76:1 — deshalb ist es nie aufgefallen.
   `--ai-n-400` bringt dieselben Stellen auf 6,96:1.
   Betroffen sind ausschliesslich die kleinen Beschriftungen/Metazeilen. */
html:root:root:root:not(.theme-light) .aion-documents-section-label,
html:root:root:root:not(.theme-light) .aion-menu-label,
html:root:root:root:not(.theme-light) .apw-time-section-label,
html:root:root:root:not(.theme-light) .aion-doc-tile-sub,
html:root:root:root:not(.theme-light) #chat-history-list .text-\[10px\] {
    color: rgb(var(--ai-n-400)) !important;
}

/* ── 17b) HELL: Support-Seiten (geteilte Markets-Vorlagen) ────────────
   Dort wurde der Hell-Durchgang nie gemacht: `#94a3b8` (= n-400) ist die
   Dunkel-Farbe fuer Nebentext und steht hier auf hellem Grund.
       "Zurueck zu Aiory"          2,34:1
       Untertitel auf /support/new 2,34:1
       Formular-Beschriftungen     2,56:1
   ⚠️ Der <style> der Ticket-Vorlage steht im BODY und damit SPAETER als diese
   Datei — nur die Hauskette + !important gewinnt dagegen.
   ⚠️ Inkonsistenz nebenbei: `.tk-subtitle` ist auf /support n-600, auf
   /support/new n-400. Hier wird beides auf n-600 gezogen. */
html:root:root:root.theme-light .tk-back,
html:root:root:root.theme-light .tk-subtitle,
html:root:root:root.theme-light .tk-label {
    color: rgb(var(--ai-n-600)) !important;      /* 6,99:1 */
}
html:root:root:root.theme-light .tk-back:hover {
    color: rgb(var(--ai-n-900)) !important;
}
/* "Abbrechen" war ein DUNKLER Knopf mitten auf der hellen Seite
   (`rgba(30,41,59,.6)` + `#e0e7ff`, 4,04:1). Jetzt ein heller Zweitknopf. */
html:root:root:root.theme-light .tk-btn-secondary {
    background: rgb(var(--ai-n-200)) !important;
    color: rgb(var(--ai-n-800)) !important;      /* 11,9:1 */
    border-color: rgb(var(--ai-n-300)) !important;
}
html:root:root:root.theme-light .tk-btn-secondary:hover {
    background: rgb(var(--ai-n-300)) !important;
}

/* ── 17c) HELL: Einzelstellen mit Dunkel-Palette auf hellem Grund ─────
   Immer dasselbe Muster wie in den Abschnitten 13-16. */
html:root:root:root.theme-light #desktop-sidebar-title-icon {
    color: rgb(var(--ai-accent-700)) !important;   /* 1,85 -> 6,56:1 */
}
html:root:root:root.theme-light .tkw-trigger-chip {
    color: rgb(var(--ai-accent-700)) !important;   /* 1,39 -> 5,5:1 auf der Toenung */
}
/* Rezepte: aktive UND ruhende Kategorie tragen Amber-500 auf Amber-Toenung. */
html:root:root:root.theme-light .aion-recipes-cat,
html:root:root:root.theme-light .aion-recipes-cat.active {
    color: rgb(var(--ai-fix-amber-800)) !important;              /* Amber-800, 6,41:1 — wie Abschnitt 11 */
}

/* ── 17d) HELL: Symbol-Abzeichen der Rechtsseiten ─────────────────────
   Tailwind-Muster `bg-<farbe>-500/10` + `text-<farbe>-300`: der -300er Ton
   ist fuer dunklen Grund gedacht und steht hier auf seiner eigenen
   10-%-Toenung (Impressum gemessen: 1,67:1).
   Bewusst NUR diese Kombination treffen — `text-*-300` allein kann auch auf
   einer dunklen Flaeche sitzen, dort waere Abdunkeln falsch. */
html:root:root:root.theme-light .bg-amber-500\/10.text-amber-300   { color: rgb(var(--ai-fix-amber-800)) !important; }
html:root:root:root.theme-light .bg-blue-500\/10.text-blue-300     { color: rgb(var(--ai-fix-blue-700)) !important; }
html:root:root:root.theme-light .bg-emerald-500\/10.text-emerald-300 { color: rgb(var(--ai-fix-emerald-700)) !important; }
html:root:root:root.theme-light .bg-purple-500\/10.text-purple-300 { color: rgb(var(--ai-accent-700)) !important; }


/* ── 17e) Reste aus dem GEGENDURCHLAUF ────────────────────────────────
   Nach 17a-d nochmal komplett gemessen; drei Stellen blieben. */

/* Impressum: das fuenfte Abzeichen ist Cyan und war in 17d nicht dabei
   (gemessen 2,16:1). Cyan-700 statt des -300er Tons. */
html:root:root:root.theme-light .bg-cyan-500\/10.text-cyan-300 {
    color: rgb(var(--ai-fix-cyan-700)) !important;             /* Cyan-700, 5,1:1 auf der Toenung */
}

/* Support-Formular: das Anhang-Feld `.tk-filedrop` ist ein DUNKLER Kasten
   mitten auf der hellen Seite (`rgba(2,6,23,.5)`), Beschriftung `#e0e7ff`,
   Hinweiszeile n-500. Gemessen: Hinweis **1,24:1**, Ueberschrift 3,11:1,
   Symbol 1,89:1 — dieselbe Ursache wie beim Knopf "Abbrechen" in 17b. */
html:root:root:root.theme-light .tk-filedrop {
    background: rgb(var(--ai-n-50)) !important;
    border-color: rgb(var(--ai-accent-600) / .35) !important;
}
html:root:root:root.theme-light .tk-filedrop strong,
html:root:root:root.theme-light .tk-filedrop svg {
    color: rgb(var(--ai-n-900)) !important;
}
html:root:root:root.theme-light .tk-filedrop small {
    color: rgb(var(--ai-n-600)) !important;
}

/* Fusszeile im DUNKLEN Design: der Markenhinweis steht auf n-500 ueber
   `bg-slate-950` = 4,24:1, knapp unter AA. Bewusst NUR die Klasse treffen,
   nicht `footer span` — dort sitzen auch helle Ueberschriften, die durch ein
   Abdunkeln SCHLECHTER wuerden. */
html:root:root:root:not(.theme-light) footer .text-gray-500 {
    color: rgb(var(--ai-n-400)) !important;        /* 6,96:1 */
}

/* Dieselbe Hinweiszeile im DUNKLEN Design: n-500 auf n-950 = 4,16:1. */
html:root:root:root:not(.theme-light) .tk-filedrop small {
    color: rgb(var(--ai-n-400)) !important;
}


/* ── 18. Anzahl-Abzeichen der Schnellzugriffe (hell) ─────────────────
   17.08.2026, Marcel: „anzahl der sachen pro app ist schlecht erkennbar".
   `.quick-btn-count` traegt in JEDEM Theme `color: rgb(var(--ai-n-100))` —
   also FAST WEISS — auf `rgb(var(--ai-accent-500) / .24)`. Im Dunklen sitzt
   diese Toenung auf dunklem Grund und Weiss stimmt; im Hellen wird daraus ein
   blasses Violett, auf dem die Zahl praktisch verschwindet.
   Gemessen: **1,24:1** (fast weiss auf rgb(227,217,253)).
   Eine `theme-light`-Fassung gibt es fuer diese Klasse gar nicht (0 Treffer).
   Gleiche Ursache wie Abschnitt 13-17: Flaeche getoent, Schrift nicht mitgezogen. */
html:root:root:root.theme-light .quick-btn-count {
    color: rgb(var(--ai-accent-700)) !important;          /* 5,20:1 */
    border-color: rgb(var(--ai-accent-600) / .45) !important;
}
/* Der Live-Zustand faerbt sich blau um und hatte dasselbe Problem
   (`--ai-info-300` auf `--ai-info-500 / .22`). */
html:root:root:root.theme-light .quick-btn-count.is-live {
    color: rgb(var(--ai-fix-blue-700)) !important;                     /* Blau-700, 5,32:1 */
    border-color: rgb(var(--ai-info-500) / .5) !important;
}


/* ── 19. Mobilfassung (390 px) ───────────────────────────────────────
   17.08.2026. Gefunden erst im ZWEITEN Durchgang — der erste maß nur den
   ersten Bildschirm und nur 1500 px. Zwei Lehren stecken drin:
     1. ohne Durchscrollen sieht man alles unterhalb der Falz nicht,
     2. Mobil- und Desktopfassung sind GETRENNT gestylt (bekannte Falle). */

/* ⚠️⚠️ Die beiden Knoepfe im Handy-Kopf (Seitenleiste + Menue) trugen
   `--ai-accent-300` auf fast weissem Grund: **1,34:1 / 1,76:1**.
   Das sind die HAUPT-Bedienelemente auf dem Handy — praktisch unsichtbar.
   Dunkel bleibt accent-300 richtig, deshalb nur hell. */
html:root:root:root.theme-light .mobile-header-action-btn svg {
    color: rgb(var(--ai-accent-700)) !important;    /* 6,56:1 */
}

/* Die Pfeilchen der Menuezeilen stehen auf `rgba(71,85,105,.4)` — 40 %
   Deckkraft, und zwar DAUERHAFT (nicht wie der Papierkorb im Verlauf, der
   sich beim Ueberfahren zeigt). Gemessen 1,14:1 hell und 1,09:1 dunkel. */
html:root:root:root.theme-light .mobile-nav-row__chevron {
    color: rgb(var(--ai-n-500)) !important;         /* 4,76:1 */
}
html:root:root:root:not(.theme-light) .mobile-nav-row__chevron {
    color: rgb(var(--ai-n-400)) !important;         /* 6,96:1 */
}

/* Rubrikzeile im Mobilmenue: n-500 auf dunklem Grund = 4,12:1. Das ist die
   Mobil-Schwester von `.aion-menu-label` aus Abschnitt 17a — beim ersten Mal
   uebersehen, weil nur die Desktopfassung im Bild war. */
html:root:root:root:not(.theme-light) .mobile-nav-section-label {
    color: rgb(var(--ai-n-400)) !important;         /* 6,96:1 */
}


/* ── 20. Anmeldefenster („Anmeldung erforderlich") im hellen Design ──
   17.08.2026, Marcel. Das Fenster (`_aion_lock_html()` in chat.py, sichtbar
   unter `/launch` fuer Abgemeldete) war **komplett dunkel verdrahtet** — es gab
   keine einzige theme-light-Regel dafuer, weder in der Map noch hier.
   Im hellen Design stand es als dunkle Insel auf heller Seite; die
   Rechtslinks (`rgba(255,255,255,.9)`) waren sogar weiss auf weiss.
   ⚠️ Der Stilblock steht als Inline-<style> in chat.py und damit SPAETER als
   diese Datei — nur die Hauskette + !important gewinnt dagegen. */

/* Schleier etwas heller: im hellen Design muss die Seite dahinter erkennbar
   bleiben, sonst wirkt das Fenster wie ein Fehler. */
html:root:root:root.theme-light .aion-locked-overlay {
    background: rgb(var(--ai-n-950) / .45) !important;
}
html:root:root:root.theme-light .aion-locked-dialog {
    background: rgb(var(--ai-n-0)) !important;
    background-image: none !important;
    border: 1px solid rgb(var(--ai-accent-600) / .28) !important;
    color: rgb(var(--ai-n-900)) !important;
    box-shadow: 0 24px 60px rgb(var(--ai-n-950) / .18) !important;
}
html:root:root:root.theme-light .aion-locked-dialog h2 { color: rgb(var(--ai-n-900)) !important; }
html:root:root:root.theme-light .aion-locked-dialog p  { color: rgb(var(--ai-n-600)) !important; }

/* Symbol oben: accent-300 auf accent/.18 waere hell 1,3:1. */
html:root:root:root.theme-light .aion-locked-mark {
    background: rgb(var(--ai-accent-600) / .12) !important;
    border: 1px solid rgb(var(--ai-accent-600) / .24) !important;
    color: rgb(var(--ai-accent-700)) !important;
}
html:root:root:root.theme-light .aion-locked-close {
    background: rgb(var(--ai-n-100)) !important;
    border: 1px solid rgb(var(--ai-n-300)) !important;
    color: rgb(var(--ai-n-700)) !important;
}
html:root:root:root.theme-light .aion-locked-close:hover {
    background: rgb(var(--ai-n-200)) !important;
}

/* Anmeldeknoepfe: Google (weiss) und Discord (Markenblau mit weisser Schrift)
   stimmen im Hellen bereits — Google braucht nur einen sichtbaren Rand.
   Der E-Mail-Knopf war ein DUNKLER Kasten. */
html:root:root:root.theme-light .aion-locked-login-btn--google {
    border: 1px solid rgb(var(--ai-n-300)) !important;
}
html:root:root:root.theme-light .aion-locked-login-btn--email {
    background: rgb(var(--ai-n-100)) !important;
    border: 1px solid rgb(var(--ai-n-300)) !important;
    color: rgb(var(--ai-n-800)) !important;
}
html:root:root:root.theme-light .aion-locked-login-btn--email:hover {
    background: rgb(var(--ai-n-200)) !important;
}

/* ⚠️ Weiss auf Weiss: dieselbe Stelle wie im Profilmenue am 16.08.
   Der Elternknoten faerbt die Trennpunkte „·" (`rgba(255,255,255,.48)`) —
   ohne ihn verschwinden sie im Hellen spurlos. Beim ersten Anlauf uebersehen,
   im Bild aufgefallen: „Impressum Datenschutz AGB" ohne Punkte dazwischen. */
html:root:root:root.theme-light .aion-locked-legal-links {
    color: rgb(var(--ai-n-500)) !important;
}
html:root:root:root.theme-light .aion-locked-legal-links a,
html:root:root:root.theme-light .aion-locked-legal-links a:visited {
    color: rgb(var(--ai-n-600)) !important;
}
html:root:root:root.theme-light .aion-locked-legal-links a:hover {
    color: rgb(var(--ai-accent-700)) !important;
    text-decoration-color: rgb(var(--ai-accent-600) / .72) !important;
}

/* E-Mail-Bereich (aufklappbar): Feld, Reiter, Meldungen. */
html:root:root:root.theme-light .aion-locked-email-panel {
    background: rgb(var(--ai-n-50)) !important;
    border: 1px solid rgb(var(--ai-n-200)) !important;
}
html:root:root:root.theme-light .aion-locked-email-tab {
    background: rgb(var(--ai-n-100)) !important;
    border: 1px solid rgb(var(--ai-n-200)) !important;
    color: rgb(var(--ai-n-700)) !important;
}
html:root:root:root.theme-light .aion-locked-email-tab.is-active {
    background: rgb(var(--ai-accent-600) / .14) !important;
    border-color: rgb(var(--ai-accent-600) / .45) !important;
    color: rgb(var(--ai-accent-700)) !important;
}
html:root:root:root.theme-light .aion-locked-email-form label,
html:root:root:root.theme-light .aion-locked-email-form p {
    color: rgb(var(--ai-n-600)) !important;
}
html:root:root:root.theme-light .aion-locked-email-form input {
    background: rgb(var(--ai-n-0)) !important;
    border: 1px solid rgb(var(--ai-n-300)) !important;
    color: rgb(var(--ai-n-900)) !important;
}
html:root:root:root.theme-light .aion-locked-email-form input::placeholder {
    color: rgb(var(--ai-n-500)) !important; opacity: 1 !important;
}
html:root:root:root.theme-light .aion-locked-email-status {
    background: rgb(var(--ai-n-100)) !important;
    border: 1px solid rgb(var(--ai-n-200)) !important;
    color: rgb(var(--ai-n-700)) !important;
}
html:root:root:root.theme-light .aion-locked-email-status[data-level="error"] {
    background: rgb(var(--ai-danger-500) / .12) !important;
    border-color: rgb(var(--ai-danger-500) / .35) !important;
    color: rgb(var(--ai-fix-red-800)) !important;
}
html:root:root:root.theme-light .aion-locked-email-status[data-level="success"] {
    background: rgb(var(--ai-success-500) / .12) !important;
    border-color: rgb(var(--ai-success-500) / .35) !important;
    color: rgb(var(--ai-fix-emerald-800)) !important;
}


/* ═════════════════════════════════════════════════════════════════════════
   WETTER: Regenrisiko im HELLEN Design (17.08.2026)
   Die Signalskala endet bei `--ai-info-500` = rgb(59 130 246). Die Quelle
   nennt fuer Hell ausdruecklich #2563eb, der Token-Umsetzer rundet das aber
   auf info-500 auf -> 3,68:1 auf der weissen Tageskarte (11 px Schrift).
   Wie in den Abschnitten 11-17: fester dunkler Ton von Hand. Die Kette
   braucht drei :root, um `html:root.aion-chat-page.theme-light` (0,4,1) aus
   der erzeugten Zuordnung zu schlagen - beide tragen !important.
   ⚠️ Der Tropfen davor ist ein FARB-EMOJI, `color` erreicht ihn nicht; eine
   reine Pixelmessung des Kastens meldet darum immer den Tropfen.
   ═════════════════════════════════════════════════════════════════════════ */
html:root:root:root.theme-light .forecast-rain-chance {
    color: rgb(var(--ai-fix-blue-700)) !important;   /* Blau-700, 6,3:1 auf Weiss */
}


/* ═════════════════════════════════════════════════════════════════════════
   SCHLIESSEN-KNOEPFE: Hover + Ruhefarbe im HELLEN Design (17.08.2026)
   Marcel: „die buttons zum schliessen haben in der app keinen hover effekt".
   Gemessen stimmte das - im hellen Design tat sich an KEINEM der Knoepfe
   etwas Sichtbares (Pixel-Delta 0 an allen erreichbaren Knoepfen).

   Zwei Ursachen, dieselbe Wurzel: die Hover-Fassung wurde nur fuer das dunkle
   Design geschrieben und danach mechanisch auf Tokens uebersetzt.
   1) `rgba(255,255,255,.1)` wurde zu `rgb(var(--ai-n-0) / .1)` - und
      `--ai-n-0` ist in JEDEM Theme WEISS. Weiss auf einer weissen Karte ist
      nichts. Der Anlauf war da, man sah ihn nur nie.
   2) Bei travel/journey/shopping griff er nicht einmal: die Ruhe-Regel
      `html.theme-light:root .travel-close` (0,3,1) ist spezifischer als die
      Hover-Regel `:root .travel-close:hover` (0,3,0) - beide !important,
      also gewinnt die Ruhe-Regel und der Knopf blieb voellig starr.

   🔑 Gewaschen wird ueber `background-image`, NICHT ueber `background-color`.
   Ein Teil der Knoepfe (Wetter, Rechner, Kompass, Reise, Route, Shopping)
   hat im Ruhezustand eine eigene Fuellung; eine Hover-*Farbe* ersetzt die und
   der Knopf wird beim Zeigen HELLER statt dunkler - erst gemessen (Δ6, falsche
   Richtung), dann so geloest. Als Bild liegt der Anlauf UEBER der Fuellung:
   flache Knoepfe und gefuellte werden gleichermassen dunkler.
   Die Kette braucht drei `:root`, um die erzeugte Zuordnung zu schlagen
   (wie Abschnitte 11-17); aiory-fixes.css laedt VOR aion-chat.css, ueber die
   Reihenfolge allein waere nichts zu holen.
   ⚠️ Nur `html.theme-light` - das dunkle Design bleibt unberuehrt.
   ═════════════════════════════════════════════════════════════════════════ */
html:root:root:root.theme-light .aiory-close:hover,
html:root:root:root.theme-light .aiory-close:focus-visible,
html:root:root:root.theme-light #close-sidebar:hover,
html:root:root:root.theme-light #close-sidebar:focus-visible,
html:root:root:root.theme-light #sources-sidebar-close:hover,
html:root:root:root.theme-light #sources-sidebar-close:focus-visible,
html:root:root:root.theme-light #sources-panel-close:hover,
html:root:root:root.theme-light #sources-panel-close:focus-visible,
html:root:root:root.theme-light #sources-mobile-close:hover,
html:root:root:root.theme-light #sources-mobile-close:focus-visible,
html:root:root:root.theme-light #close-filter-sheet:hover,
html:root:root:root.theme-light #close-filter-sheet:focus-visible,
html:root:root:root.theme-light #close-quick-access-sheet:hover,
html:root:root:root.theme-light #close-quick-access-sheet:focus-visible,
html:root:root:root.theme-light #close-running-tasks-panel:hover,
html:root:root:root.theme-light #close-running-tasks-panel:focus-visible,
html:root:root:root.theme-light #close-live-chart:hover,
html:root:root:root.theme-light #close-live-chart:focus-visible,
html:root:root:root.theme-light #mobile-nav-close:hover,
html:root:root:root.theme-light #mobile-nav-close:focus-visible,
html:root:root:root.theme-light #location-close-btn:hover,
html:root:root:root.theme-light #location-close-btn:focus-visible,
html:root:root:root.theme-light #apw-close:hover,
html:root:root:root.theme-light #apw-close:focus-visible,
html:root:root:root.theme-light #apw-date-close:hover,
html:root:root:root.theme-light #apw-date-close:focus-visible,
html:root:root:root.theme-light #apw-edit-close:hover,
html:root:root:root.theme-light #apw-edit-close:focus-visible,
html:root:root:root.theme-light .apw-close-btn:hover,
html:root:root:root.theme-light .apw-close-btn:focus-visible,
html:root:root:root.theme-light #tkw-close:hover,
html:root:root:root.theme-light #tkw-close:focus-visible,
html:root:root:root.theme-light #tkw-date-close:hover,
html:root:root:root.theme-light #tkw-date-close:focus-visible,
html:root:root:root.theme-light #tkw-edit-close:hover,
html:root:root:root.theme-light #tkw-edit-close:focus-visible,
html:root:root:root.theme-light .tkw-close-btn:hover,
html:root:root:root.theme-light .tkw-close-btn:focus-visible,
html:root:root:root.theme-light .calc-close-v2:hover,
html:root:root:root.theme-light .calc-close-v2:focus-visible,
html:root:root:root.theme-light .compass-close-v2:hover,
html:root:root:root.theme-light .compass-close-v2:focus-visible,
html:root:root:root.theme-light .weather-app-close:hover,
html:root:root:root.theme-light .weather-app-close:focus-visible,
html:root:root:root.theme-light .weather-detail-close:hover,
html:root:root:root.theme-light .weather-detail-close:focus-visible,
html:root:root:root.theme-light .travel-close:hover,
html:root:root:root.theme-light .travel-close:focus-visible,
html:root:root:root.theme-light .journey-close:hover,
html:root:root:root.theme-light .journey-close:focus-visible,
html:root:root:root.theme-light .shopping-close:hover,
html:root:root:root.theme-light .shopping-close:focus-visible,
html:root:root:root.theme-light .crypto-modal-close:hover,
html:root:root:root.theme-light .crypto-modal-close:focus-visible,
html:root:root:root.theme-light .sources-popup-close:hover,
html:root:root:root.theme-light .sources-popup-close:focus-visible,
html:root:root:root.theme-light .sources-panel-close-btn:hover,
html:root:root:root.theme-light .sources-panel-close-btn:focus-visible,
html:root:root:root.theme-light .doc-profile-close:hover,
html:root:root:root.theme-light .doc-profile-close:focus-visible,
html:root:root:root.theme-light .aion-temp-chat-close:hover,
html:root:root:root.theme-light .aion-temp-chat-close:focus-visible,
html:root:root:root.theme-light .aion-clarification-close:hover,
html:root:root:root.theme-light .aion-clarification-close:focus-visible,
html:root:root:root.theme-light .aion-letter-studio-close:hover,
html:root:root:root.theme-light .aion-letter-studio-close:focus-visible,
html:root:root:root.theme-light .aion-collabora-close:hover,
html:root:root:root.theme-light .aion-collabora-close:focus-visible,
html:root:root:root.theme-light .aion-profile-close:hover,
html:root:root:root.theme-light .aion-profile-close:focus-visible,
html:root:root:root.theme-light .aion-legal-modal__close:hover,
html:root:root:root.theme-light .aion-legal-modal__close:focus-visible,
html:root:root:root.theme-light .aionity-news-popup__close:hover,
html:root:root:root.theme-light .aionity-news-popup__close:focus-visible,
html:root:root:root.theme-light .chart-more-header__close:hover,
html:root:root:root.theme-light .chart-more-header__close:focus-visible,
html:root:root:root.theme-light .mobile-nav-header__close:hover,
html:root:root:root.theme-light .mobile-nav-header__close:focus-visible {
    background-image: linear-gradient(rgb(var(--ai-n-900) / .10), rgb(var(--ai-n-900) / .10)) !important;
    color: rgb(var(--ai-n-900)) !important;
    outline: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Zwei Fenster bleiben auch im hellen Design dunkel: die Bildlupe
   (rgba(0,0,0,.95) - eine Bildansicht gehoert dunkel) und das News-Fenster
   (#1e1b2e, Inhalt komplett fuer Dunkel geschrieben, gemessen 6,9-14,4:1).
   Dorthin greift die erzeugte Zuordnung mit einer HELL-Regel hinein und setzt
   `color: --ai-n-600` - dunkles Schiefer auf die dunkle Karte. Gemessen
   2,00:1 / 2,45:1 / 2,39:1; im dunklen Design stehen dieselben Knoepfe bei
   6,8-7,2:1. Also hier dieselbe Farbe wie dort, und der Anlauf geht heller
   statt dunkler.
   ⚠️ Das KRYPTO-Fenster sieht im Quelltext genauso dunkel aus
   (`rgba(30,30,50,.98)`), wird aber hell dargestellt - es steht im Block
   darueber. Zugehoerigkeit hier NUR nach Messung entscheiden, nicht nach
   dem, was in der Widget-Datei steht.
   ⚠️ `.nol-close-btn` ist der beschriftete „Schliessen"-Knopf im News-Fenster
   und seit 17.08. KEIN Ikonen-Knopf mehr. Er steht hier trotzdem, weil die
   erzeugte `aiory-map.css` ihn weiter listet und ihm hell `--ai-n-600` auf
   die dunkle Karte setzt (2,39:1). Beim naechsten Neubau der Zuordnung
   pruefen, ob die Zeile dann entfallen kann.
   Steht bewusst NACH dem Block darueber: gleiche Spezifitaet, spaetere Zeile.
   ───────────────────────────────────────────────────────────────────────── */
html:root:root:root.theme-light .nol-close,
html:root:root:root.theme-light .lightbox-close,
html:root:root:root.theme-light .nol-close-btn {
    color: rgb(var(--ai-n-400)) !important;
}
html:root:root:root.theme-light .nol-close:hover,
html:root:root:root.theme-light .nol-close:focus-visible,
html:root:root:root.theme-light .lightbox-close:hover,
html:root:root:root.theme-light .lightbox-close:focus-visible,
html:root:root:root.theme-light .nol-close-btn:hover,
html:root:root:root.theme-light .nol-close-btn:focus-visible {
    background-image: linear-gradient(rgb(var(--ai-n-0) / .14), rgb(var(--ai-n-0) / .14)) !important;
    color: rgb(var(--ai-n-0)) !important;
    outline: none !important;
}

/* ── 22) SCHWARZ-WEISS: Farben, die per style-Attribut im Markup stehen ──────
   Die Schnellzugriff-Symbole bekommen ihre Farbe in quick-buttons.js direkt
   ins `style`-Attribut geschrieben (`style="…; color: #fbbf24"`, je Symbol ein
   eigener Ton). 🔑 Ein Inline-Stil steht ueber JEDEM Stylesheet - kein Theme,
   kein Generator und keine Token-Zuweisung kann ihn erreichen. Genau deshalb
   blieben die zehn Symbole als einzige Stelle im Schwarz-Weiss bunt (gemessen
   17.08.2026: amber/violet/emerald/blue/orange/sky/pink).
   Ueberschreiben laesst er sich nur mit `!important`; das ist hier kein
   Holzhammer, sondern die einzige Ebene, die hoeher liegt.
   Bewusst NUR fuer die beiden Schwarz-Weiss-Designs - die farbigen behalten
   ihre zehn Tonwerte unveraendert.
   Der Akzent-Token traegt in Schwarz-Weiss den Kontrast (dunkel auf heller
   Basis, hell auf dunkler) - die Symbole bleiben damit in beiden Fassungen
   gut sichtbar: gemessen 5,1:1 (hell) und 9,5:1 (dunkel), Schwelle fuer
   Bedienelemente ist 3:1. */
html:root:root:root.theme-mono .quick-btn-icon,
html:root:root:root.theme-mono .quick-btn-icon svg {
    color: rgb(var(--ai-accent-500)) !important;
}

/* ── Cloud/Studio: "Neues Dokument" im schwarz-weissen DUNKEL ────────────
   21.08.2026, Marcel: "neues dokument in cloud ist viel zu hell beim
   schwarzen layout". Zwei Fehler steckten drin:
   1. Weisse Schrift auf der Flaeche - gemessen 1,4:1, praktisch unlesbar.
      Ursache lag im Generator (er erkannte nur `background-color` als
      Akzentflaeche, nicht den VERLAUF) und ist dort behoben; seitdem steht
      dort --ai-on-accent.
   2. Die Helligkeit selbst: der Akzent traegt in Schwarz-Weiss dunkel
      Kontrast statt Farbe, ist also HELL (accent-500 = 190). Ein fast
      weisser Block auf schwarzem Grund blendet.
   Deshalb hier eine Stufe dunkler (600 -> 700) und ein Schatten, der nicht
   leuchtet. Der Knopf bleibt der auffaelligste in der Leiste, ohne zu
   blenden. Gemessen mit --ai-on-accent: 6,68:1 (600) bis 4,73:1 (700). */
html:root:root:root.theme-mono:not(.theme-light) .aion-letter-studio-btn--primary {
    background-image: linear-gradient(180deg, rgb(var(--ai-accent-600)), rgb(var(--ai-accent-700))) !important;
    box-shadow: 0 4px 14px rgb(var(--ai-n-1000) / 0.45) !important;
}

/* ── ... und der Hover war unsichtbar geworden ───────────────────────────
   Die Original-CSS hebt die Flaeche beim Ueberfahren auf helleres Violett
   (#9d72f8/#8b46f0). Die Token-Umschreibung rundete Grund- UND Hover-Zustand
   auf dieselben Stufen (accent-500/600) - seitdem passierte optisch nichts.
   Der Hover-Zweig aendert zwar `background-color`, die liegt aber UNTER dem
   deckenden Verlauf und ist damit unsichtbar (gemessen: Verlauf in Ruhe und
   im Hover identisch).
   Jetzt aendert der Hover den VERLAUF - und zwar in Richtung mehr Kontrast
   zur Schrift, nicht weniger: bei dunklem Akzent (farbig, SW hell) eine
   Stufe DUNKLER (weisse Schrift 5,70 -> ~7:1), im SW-Dunkel mit hellem
   Akzent eine Stufe HELLER (dunkle Schrift 4,73 -> 9,6:1). Der alte
   Hover-Ton waere andersherum gelaufen und haette den Kontrast gedrueckt.
   Dazu 1 px Anheben - das liest man auch ohne Farbunterschied. */
html:root:root:root .aion-letter-studio-btn--primary {
    transition: background-image 140ms ease, box-shadow 140ms ease, transform 120ms ease !important;
}

html:root:root:root .aion-letter-studio-btn--primary:hover,
html:root:root:root .aion-letter-studio-btn--primary:focus-visible {
    background-image: linear-gradient(180deg, rgb(var(--ai-accent-600)), rgb(var(--ai-accent-700))) !important;
    box-shadow: 0 8px 22px rgb(var(--ai-accent-700) / 0.45) !important;
    transform: translateY(-1px) !important;
}

html:root:root:root.theme-mono:not(.theme-light) .aion-letter-studio-btn--primary:hover,
html:root:root:root.theme-mono:not(.theme-light) .aion-letter-studio-btn--primary:focus-visible {
    background-image: linear-gradient(180deg, rgb(var(--ai-accent-500)), rgb(var(--ai-accent-600))) !important;
    box-shadow: 0 8px 20px rgb(var(--ai-n-1000) / 0.55) !important;
    transform: translateY(-1px) !important;
}