/* Automatisch übernommen aus AI-CONNECTOR Interface/css/style.css — nicht von Hand ändern,
   sondern hilfe_uebernehmen.php erneut laufen lassen. */
/* DAS Gate „Entwicklerversion": alles mit `data-nur-entwickler` sieht nur, wer das Adminpanel hat (Konzept-Reiter
   der Container und Plugins, Auslauf-Anbieter …). Die Klasse setzt `core/navigation.js`, sobald
   `/api/admin/available` antwortet; Skripte fragen `window.aicEntwicklerversion()`, der Server
   `server/services/entwicklerversion.js#ist`. Eine Regel, keine zweite daneben. */
body:not(.aic-entwickler) [data-nur-entwickler] { display: none !important; }

/* Gestaltungswerte, Schriften, Reset — die Grundlage für alles Weitere
   Konzept Schnellstrasse, Phase B, S-B4 — thematisch gruppiert.
   ACHTUNG: Die Reihenfolge der <link>-Tags im index.html ist die Kaskade. Nicht umsortieren. */

/* Gestaltungswerte, Schriften, Reset — die Grundlage für alles Weitere
   Konzept Schnellstrasse, Phase B, S-B4 — thematisch gruppiert.
   ACHTUNG: Die Reihenfolge der <link>-Tags im index.html ist die Kaskade. Nicht umsortieren. */

/* Gestaltungswerte, Schriften, Reset — die Grundlage für alles Weitere
   Konzept Schnellstrasse, Phase B, S-B4 — thematisch gruppiert.
   ACHTUNG: Die Reihenfolge der <link>-Tags im index.html ist die Kaskade. Nicht umsortieren. */

/* ========== DESIGN TOKENS (v1, 2026-04-19) ==========
   Apps ziehen ihre Farben/Spacing/Shadows hier statt zu raten. Siehe
   Brain/blueprints/ui-architecture.md für die Nutzungs-Regeln.
   `.aic-stil-hell` / `.aic-stil-dunkel` an einem App-Bereich setzen den jeweiligen
   Wertesatz nur für dessen Teilbaum — für eine App mit eigener Darstellungswahl
   (Audiostation). Kein zweiter Wertesatz in der App.
*/
:root,
.aic-stil-hell {
  /* Gestaltungswerte des Interface — die EINZIGE Quelle für Farben.
     Im Stylesheet steht kein Hex-Wert mehr; jede Farbe kommt von hier.
     Der dunkle Stil setzt dieselben Namen unter [data-theme="dark"] neu.
     Erzeugt aus dem Bestand: gleiche Farbe + gleiche Verwendung = ein Token. */

  /* Flächen */
  --aic-surface:              #ffffff;   /* 98x */
  --aic-surface-alt:          #f8f9fa;   /* 21x */
  --aic-surface-alt-2:        #f5f7fa;   /* 15x */
  --aic-surface-inset-2:      #f5f5f5;   /* 22x */
  --aic-surface-inset-3:      #f0f0f0;   /* 19x */
  --aic-surface-inset-4:      #f0f2f5;
  --aic-surface-sunken:       #e8e8e8;
  --aic-surface-sunken-2:     #dddddd;
  --aic-surface-sunken-3:     #d5d5d5;
  --aic-surface-sunken-4:     #cccccc;
  --aic-surface-dim:          #9e9e9e;
  --aic-surface-dim-2:        #c4c4c4;
  --aic-surface-dim-3:        #bdbdbd;
  --aic-surface-dim-4:        #999999;
  --aic-surface-dim-5:        #888888;
  --aic-surface-dim-6:        #aaaaaa;
  --aic-surface-dark:         #2c2c2c;   /* 21x */
  --aic-surface-dark-2:       #484848;
  --aic-surface-dark-3:       #3a3a3a;
  --aic-surface-dark-4:       #1a1a1a;
  --aic-surface-dark-5:       #000000;
  --aic-surface-dark-6:       #0a0a0a;
  /* Kopf einer Tabelle/Liste: dunkler als BEIDE Zeilenfarben (Grund und Zebra) — sonst sieht der
   * Kopf aus wie eine Zeile. Kein vorhandener Ton ist das in beiden Themen. */
  --aic-tabellenkopf:         #e3e6ea;
  /* Farbmarken (Mail-Liste): im hellen Thema voll, im dunklen aufgehellt — beide als SCHRIFT auf den
   * Zeilenfarben lesbar (≥ 4,5:1). */
  --aic-marke-rot:            #c62828;
  --aic-marke-blau:           #1a5fb4;
  --aic-marke-orange:         #a04a00;
  --aic-marke-violett:        #7b3fbf;
  --aic-marke-pink:           #c2185b;

  /* Text */
  --aic-text-2:               #333333;   /* 36x */
  --aic-text-3:               #222222;   /* 23x */
  --aic-text-4:               #000000;
  --aic-text-5:               #111111;
  --aic-text-6:               #1a1a1a;
  --aic-text-muted-2:         #666666;   /* 39x */
  --aic-text-muted-3:         #555555;   /* 32x */
  --aic-text-muted-4:         #444444;   /* 19x */
  --aic-text-muted-5:         #5b6472;
  --aic-text-dim:             #888888;   /* 29x */
  --aic-text-dim-2:           #777777;
  --aic-text-dim-3:           #8b949e;
  --aic-text-dim-4:           #6e7681;
  --aic-text-faint:           #c4c4c4;   /* 34x */
  --aic-text-faint-2:         #999999;
  --aic-text-faint-3:         #aaaaaa;
  --aic-text-faint-4:         #cccccc;
  --aic-text-faint-5:         #d4d4d4;
  --aic-text-inverse:         #ffffff;   /* 140x */
  --aic-text-inverse-2:       #f8f9fa;
  --aic-text-inverse-3:       #e0e0e0;
  --aic-text-inverse-4:       #f5f5f5;
  /* „Papier" — Flächen, die in BEIDEN Ansichten gleich bleiben MÜSSEN, weil
   * ihr Inhalt das Programm verlässt: der Schreibbereich einer E-Mail, eine
   * Druckvorschau. Der Empfänger liest sie auf Weiss; ein dunkler Editor legt
   * eine helle Schrift nahe, die dort unsichtbar ist. Deshalb stehen diese
   * Werte im hellen und im dunklen Block ABSICHTLICH gleich — das ist
   * kein vergessener Eintrag. Der Link-Ton ist der Akzent des hellen Themas:
   * das Hellblau des dunklen Themas ist auf Weiss kaum lesbar. */
  --aic-papier:               #ffffff;
  --aic-papier-text:          #1a1a1a;
  --aic-papier-link:          #3a6ea5;

  /* Linien */
  --aic-border-soft-2:        #eeeeee;   /* 21x */
  --aic-border-soft-3:        #ffffff;
  --aic-border-soft-4:        #eef0f3;
  --aic-border-2:             #dddddd;   /* 56x */
  --aic-border-3:             #cccccc;   /* 20x */
  --aic-border-4:             #e0e0e0;
  --aic-border-5:             #e1e4e8;
  --aic-border-6:             #e8e8e8;
  --aic-border-strong:        #bbbbbb;   /* 20x */
  --aic-border-strong-2:      #b8bfc7;
  --aic-border-strong-3:      #999999;
  --aic-border-strong-4:      #888888;
  --aic-border-strong-5:      #c4c4c4;
  --aic-border-dark:          #555555;
  --aic-border-dark-2:        #333333;
  --aic-border-dark-3:        #777777;
  --aic-border-dark-4:        #2c2c2c;
  --aic-border-dark-5:        #666666;
  --aic-border-dark-6:        #444444;
  --aic-border-dark-7:        #4a4a4a;

  /* Türkis — die Marke der Audio-Gattung (Nutzer-Direktive 2026-09-01). Bild und Video
     tragen farbige Emoji (🎨 🎬), das Notenzeichen ♫ ist ein reines Textzeichen und nähme
     sonst die Textfarbe an: neben zwei bunten Marken sähe es aus wie vergessen. Zwei
     Werte, weil ein Türkis auf hellem Grund dunkler sein muss als auf dunklem. */
  --aic-audio-mark:           #0d8a8a;

  /* Akzent */
  --aic-accent:               #3a6ea5;   /* 138x */
  --aic-accent-2:             #2c5a8a;   /* 20x */
  --aic-accent-3:             #2c5d8c;
  --aic-accent-4:             #1565c0;
  --aic-accent-5:             #32628f;
  --aic-accent-6:             #5a8ec5;
  --aic-accent-7:             #7db9f0;
  --aic-accent-8:             #4a7eb5;
  --aic-accent-9:             #4a90d9;
  --aic-accent-10:            #1976d2;
  --aic-accent-11:            #2196f3;
  --aic-accent-12:            #4a9eff;
  --aic-accent-13:            #1a73e8;
  --aic-accent-14:            #5ba0d0;
  --aic-accent-15:            #2f7fd6;
  --aic-accent-16:            #5a7a98;
  --aic-accent-17:            #42a5f5;
  --aic-accent-18:            #4a90c8;
  --aic-accent-dark-2:        #24292f;
  --aic-accent-dark-3:        #1f4870;
  --aic-accent-dark-4:        #0d47a1;
  --aic-accent-dark-5:        #1f2430;
  --aic-accent-dark-6:        #1f3a5c;
  --aic-accent-dark-7:        #2c3e50;
  --aic-accent-dark-8:        #6a1b9a;
  --aic-accent-dark-9:        #4a148c;
  --aic-accent-dark-10:       #2a3a4a;
  --aic-accent-dark-11:       #1c4e7a;
  --aic-accent-soft-2:        #cbd1d8;
  --aic-accent-soft-3:        #7eb6f0;
  --aic-accent-soft-4:        #dde1e7;
  --aic-accent-line:          #b5d0eb;
  --aic-accent-line-2:        #cbd1d8;
  --aic-accent-line-3:        #e0e4e8;
  --aic-accent-line-4:        #bbdefb;
  --aic-accent-line-5:        #d1c4e9;
  --aic-accent-line-6:        #d0d7de;
  --aic-accent-line-7:        #b8d4f0;
  --aic-accent-line-8:        #d8dde4;
  --aic-accent-line-9:        #c8ddf5;
  --aic-accent-line-10:       #d0e3f7;
  --aic-accent-line-11:       #c5cdd5;
  --aic-accent-line-12:       #b8cdd9;
  --aic-accent-line-13:       #d5e8f5;
  --aic-accent-wash:          #eaf1f8;   /* 21x */
  --aic-accent-wash-2:        #f0f7ff;
  --aic-accent-wash-3:        #eef2f6;
  --aic-accent-wash-4:        #e3f2fd;
  --aic-accent-wash-5:        #d5e8f5;
  --aic-accent-wash-6:        #f5f0ff;
  --aic-accent-wash-7:        #e3edf7;
  --aic-accent-wash-8:        #e2e9f1;
  --aic-accent-wash-9:        #dcebfb;

  /* Erfolg */
  --aic-success:              #2e7d32;   /* 37x */
  --aic-success-2:            #4caf50;
  --aic-success-3:            #28a745;
  --aic-success-dark:         #1b5e20;
  --aic-success-dark-2:       #2c5d36;
  --aic-success-soft:         #66bb6a;
  --aic-success-line:         #c8e6c9;
  --aic-success-line-2:       #93d4a3;
  --aic-success-line-3:       #a5d6a7;
  --aic-success-wash:         #e8f5e9;

  /* Warnung */
  --aic-warn-2:               #e65100;
  --aic-warn-3:               #f57c00;
  --aic-warn-4:               #f9a825;
  --aic-warn-5:               #806200;
  --aic-warn-6:               #f57f17;
  --aic-warn-7:               #6a4a00;
  --aic-warn-8:               #8a5000;
  --aic-warn-9:               #e07a1a;
  --aic-warn-10:              #c79a3a;
  --aic-warn-11:              #ef6c00;
  --aic-warn-12:              #ff9800;
  --aic-warn-13:              #b8860b;
  --aic-warn-14:              #f0ad4e;
  --aic-warn-15:              #b35900;
  --aic-warn-16:              #a07c1f;
  /* Zwischenruf — die Blase, die der Nutzer einem LAUFENDEN Auftrag nachschiebt
     (Nutzer-Direktive 2026-08-30: „nicht blau sondern lila, leichte Opacity").
     Sie sieht aus wie eine normale Nutzer-Blase; allein die Farbe sagt, dass sie
     mitten in die Arbeit ging und keinen neuen Turn gestartet hat. Der Wert gehört
     in die Palette und nicht in die Komponente — sonst steht er beim nächsten
     Stilwechsel als fester Fleck da. */
  --aic-einwurf:              #7c4dff;
  --aic-einwurf-wash:         rgba(124, 77, 255, 0.16);
  --aic-einwurf-line:         rgba(124, 77, 255, 0.45);
  /* Bot-Avatar (`css/bot-avatar.css`) — je Zustand ein satter Ton und ein heller Begleiter; das Licht des Kerns.
     In beiden Stilen gleich: die Kugel leuchtet in ihrer Zustandsfarbe, nur die Linienfarbe folgt dem Stil (dort gemischt). */
  --aic-bav-ruhe:             #3ee6c1;
  --aic-bav-ruhe-2:           #b8fff0;
  --aic-bav-denkt:            #3d8bff;
  --aic-bav-denkt-2:          #bcd8ff;
  --aic-bav-arbeitet:         #ff9d2e;
  --aic-bav-arbeitet-2:       #ffe0b0;
  --aic-bav-fertig:           #33e07a;
  --aic-bav-fertig-2:         #c9ffd9;
  --aic-bav-fehler:           #ff4d5e;
  --aic-bav-fehler-2:         #ffc9cf;
  --aic-bav-licht:            #ffffff;
  --aic-warn-17:              #c7a93a;
  --aic-warn-18:              #6a5a2a;
  --aic-warn-19:              #8a7a40;
  --aic-warn-20:              #b87316;
  --aic-warn-21:              #e8a838;
  --aic-warn-22:              #bf5500;
  --aic-warn-23:              #ffb74d;
  --aic-warn-24:              #bf6b00;
  --aic-warn-dark:            #5a4a00;
  --aic-warn-dark-2:          #3a2a00;
  --aic-warn-soft:            #ffb74d;
  --aic-warn-soft-2:          #ffb056;
  --aic-warn-soft-3:          #ff9800;
  --aic-warn-soft-4:          #f57f17;
  --aic-warn-line:            #ffe0b2;
  --aic-warn-line-2:          #ffcc80;
  --aic-warn-line-3:          #f0d878;
  --aic-warn-line-4:          #ffd54f;
  --aic-warn-line-5:          #ffb74d;
  --aic-warn-line-6:          #ffe9d4;
  --aic-warn-line-7:          #f0c674;
  --aic-warn-line-8:          #f0e6c8;
  --aic-warn-line-9:          #ffe082;
  --aic-warn-wash:            #fff3e0;
  --aic-warn-wash-2:          #fff8e1;
  --aic-warn-wash-3:          #f5e9c2;
  --aic-warn-wash-4:          #ffecb3;
  --aic-warn-wash-5:          #fef5d8;
  --aic-warn-wash-6:          #fffbea;
  --aic-warn-wash-7:          #fffbf2;

  /* Fehler */
  --aic-error:                #c62828;   /* 54x */
  --aic-error-2:              #e53935;
  --aic-error-3:              #ff5252;
  --aic-error-4:              #ef5350;
  --aic-error-5:              #cc4444;
  --aic-error-6:              #ef9a9a;
  --aic-error-7:              #c0392b;
  --aic-error-8:              #ff8888;
  --aic-error-9:              #d32f2f;
  --aic-error-10:             #d9534f;
  --aic-error-11:             #bf360c;
  --aic-error-12:             #8a3521;
  --aic-error-dark:           #b71c1c;
  --aic-error-dark-2:         #9b1e1e;
  --aic-error-dark-3:         #8a1d1d;
  --aic-error-soft:           #ffcdd2;
  --aic-error-line:           #ffcdd2;
  --aic-error-line-2:         #f5c6b8;
  --aic-error-line-3:         #f8bbd0;
  --aic-error-wash:           #fef3f0;
  --aic-error-wash-2:         #ffebee;
  --aic-error-wash-3:         #fbeaea;
  --aic-error-wash-4:         #fce4ec;

  /* Schatten */
  --aic-shadow-farbe:         #ffffff;
  --aic-shadow-farbe-2:       #ffb300;
  --aic-shadow-farbe-3:       #c62828;
  --aic-shadow-farbe-4:       #66bb6a;
  --aic-shadow-farbe-5:       #3a6ea5;
  --aic-shadow-farbe-6:       #7eb6f0;
  --aic-shadow-farbe-7:       #2c2c2c;

  /* Weiter in Benutzung */
  --aic-accent-hover:         #325e8f;
  --aic-accent-dark:          #2c5a8a;
  --aic-accent-soft:          #d5e8f5;
  --aic-bg:                   #f5f5f5;
  --aic-surface-inset:        #f7f9fc;
  --aic-border:               #e9ecef;
  --aic-border-soft:          #eef1f5;
  --aic-text:                 #222222;
  --aic-text-muted:           #555555;
  --aic-warn:                 #f57c00;

  /* Rückmeldung beim Zeigen und Klicken.
     Eigene Tokens, weil eine Hover-Fläche relativ zum Grund gedacht ist: im hellen
     Stil eine Spur dunkler, im dunklen eine Spur heller. Vorher liehen sich die
     Knöpfe dafür helle Flächentöne — die im dunklen Stil grell aufblitzten. */
  --aic-hover:                 #f0f0f0;
  --aic-hover-stark:           #e2e2e2;

  /* Symbole im Akzentton. Im hellen Stil ist Blau auf Weiss ein guter Kontrast —
     im dunklen wird daraus ein dunkler Fleck auf dunklem Grund. Deshalb ein
     eigenes Token: dieselbe Regel, zwei Werte. Statussymbole (grün, rot, orange)
     laufen bewusst NICHT hierüber — die sind kräftig genug und tragen Bedeutung. */
  --aic-icon:                  #3a6ea5;

  /* Umrandung der Schalter — im hellen Stil eine kaum sichtbare Kante. */
  --aic-schalter-rand:         rgba(0,0,0,.12);

  /* Fläche eines Knopfes, der im hellen Stil den Akzent trägt. Im dunklen wird
     daraus eine neutrale Fläche: ein dauerhaft blauer Knopf liest sich dort wie
     ein aktiver Zustand. Der Zeigen-Zustand bleibt blau, in beiden Stilen. */
  --aic-knopf-akzent:          #3a6ea5;

  /* Ruhepunkt der Aktivitaetsanzeige. Er sitzt auf der blauen Kopfzeile, die in
     beiden Stilen gleich ist — also bleibt auch er gleich. Ueber surface-dim`n     lief er im dunklen Stil auf #535353 und war auf dem Blau nicht mehr zu sehen. */
  --aic-punkt-ruhe:            #9e9e9e;

  /* Helle Auflagen auf farbigem Grund — Griffbalken, Chip-Knöpfe.
     Im hellen Stil deckend, im dunklen gedämpft: dort wirkt dieselbe Deckung
     wie ein Blitz, weil der Grund viel dunkler ist. */
  --aic-auflage:               rgba(255,255,255,.75);
  --aic-auflage-stark:         rgba(255,255,255,.9);

  /* Auflagen AUF EINEM BILD — Häkchen, Papierkorb, Play-Knopf, Zeigen-Auflage der
     Vorschaukacheln. Ihr Grund ist das Motiv, nicht die Oberfläche: deshalb haben sie
     KEIN Gegenstück im dunklen Block, mit Absicht. Dunkel durchscheinend mit heller
     Kante trägt auf hellen wie dunklen Motiven; eine helle Auflage (--aic-auflage)
     verschwand auf hellen Bildern. Die Stärke lebt hier — die Bausteine sagen nur
     „an" oder „aus", nie eine eigene Zahl. */
  --aic-bild-grund:            rgba(0,0,0,.55);
  --aic-bild-grund-stark:      rgba(0,0,0,.75);
  --aic-bild-kante:            rgba(255,255,255,.45);
  --aic-bild-zeigen:           rgba(0,0,0,.22);
  /* Knöpfe AUF einer farbigen/dunklen Kopfleiste (Mediathek-Kopf, Detailfenster, Reiter): helle Glasfläche.
     Wie --aic-bild-* ohne Gegenstück im dunklen Block — der Grund ist die Leiste, nicht das Farbschema. */
  --aic-farbe-knopf:           rgba(255,255,255,.15);
  --aic-farbe-knopf-zeigen:    rgba(255,255,255,.25);
  --aic-farbe-knopf-an:        rgba(255,255,255,.3);
  --aic-farbe-kante:           rgba(255,255,255,.3);

  /* Radien */
  --aic-radius-sm:             6px;
  --aic-radius-md:             10px;
  --aic-radius-lg:             12px;

  /* Schatten */
  --aic-shadow-sm:             0 1px 4px rgba(0,0,0,.08);
  --aic-shadow-md:             0 4px 12px rgba(0,0,0,.08);

  /* Abstände */
  --aic-space-xs:              4px;
  --aic-space-sm:              8px;
  --aic-space-md:              12px;
  --aic-space-lg:              16px;
  --aic-space-xl:              24px;
  /* Schriftstufen — die EINE Quelle für Schriftgrössen (konzept_styleguide „Schriftgrössen"). Immer px,
     nie em: em hängt vom Elternteil ab, derselbe Wert ergab je Reiter eine andere Grösse. */
  --aic-schrift-mini:                 11px;
  --aic-schrift-klein:                12px;
  --aic-schrift-text:                 13px;
  --aic-schrift-gross:                14px;
  --aic-schrift-titel:                16px;
  --aic-schrift-kopf:                 20px;

  /* Dichte — die EINE Quelle für Zeilen- und Knopfmasse wiederkehrender Bausteine (Nutzer 2026-10-31: „nicht
     jedes Element einzeln"). Wer hier dreht, ändert ALLE Menüs/Listen/Symbolknöpfe zugleich (bausteine.css). */
  --aic-menue-zeile-y:         5px;    /* Ausklappmenü + Auswahlliste: Innenabstand je Eintrag oben/unten */
  --aic-menue-zeile-x:         12px;   /*   … links/rechts */
  --aic-menue-innen:           4px;    /*   Rand der Liste um die Einträge */
  --aic-menue-zeilenhoehe:     1.35;
  --aic-symbolknopf:           26px;   /* quadratischer Symbolknopf (×, i, ?, Stern …) */
  --aic-symbolknopf-klein:     22px;
  --aic-symbolknopf-gross:     36px;   /* Kopfzeilen von Dialogen, Ansichts-Umschalter */
  --aic-symbolknopf-bild:      14px;   /* Symbol darin */
  --aic-symbolknopf-bild-klein: 12px;
  --aic-symbolknopf-bild-gross: 18px;
  --aic-zeile-y:               10px;   /* Listenzeile (`.aic-zeile`): Innenabstand oben/unten */
  --aic-zeile-x:               14px;   /*   … links/rechts */
  --aic-zeile-y-kompakt:       6px;    /* `.aic-zeile--kompakt` (Protokolle, Aufgaben, Ordnerwahl) */
  --aic-zeile-x-kompakt:       10px;
  --aic-zeile-abstand:         10px;   /*   Lücke zwischen den Spalten einer Zeile */
  --aic-zeile-rund:            6px;    /* `.aic-zeile--frei` (Seitenleisten-Einträge) */
  --aic-knopf-klein-y:         3px;    /* kleiner Knopf `.btn-sm` / `.btn-small` */
  --aic-knopf-klein-x:         10px;
  --aic-kopf-y:                10px;   /* Kopfzeile von Box/Panel/Schublade (.aic-kopf): oben/unten */
  --aic-kopf-x:                16px;   /*   … links/rechts */
  --aic-kopf-y-kompakt:        6px;    /* .aic-kopf--kompakt: Unterboxen, Seitenleisten */
  --aic-kopf-x-kompakt:        12px;
  --aic-marke-hoehe:           18px;   /* Marke (Pille, Chip, Zähler — bausteine.css `.aic-marke`): Mindesthöhe */
  --aic-marke-y:               1px;    /*   Innenabstand oben/unten */
  --aic-marke-x:               7px;    /*   … links/rechts */
  --aic-marke-luecke:          4px;    /*   Abstand Symbol ↔ Text ↔ × */
  --aic-marke-radius:          999px;  /*   rund; eckige Marken nehmen --aic-marke-radius-eckig */
  --aic-marke-radius-eckig:    4px;

  /* Doppelrolle getrennt: als Flaeche bleibt der Ton, als Text wird er im
     dunklen Stil aufgehellt — sonst 2,7:1 und unlesbar. */
  --aic-error-text:           #c62828;
  --aic-success-text:         #2e7d32;
  --aic-warn-2-text:          #e65100;
  --aic-accent-text:          #3a6ea5;
  --aic-error-5-text:         #cc4444;
  --aic-success-2-text:       #4caf50;
  --aic-error-4-text:         #ef5350;
  --aic-accent-3-text:        #2c5d8c;
  --aic-accent-4-text:        #1565c0;
  --aic-error-2-text:         #e53935;
  --aic-error-dark-text:      #b71c1c;
  --aic-warn-3-text:          #f57c00;
  --aic-accent-2-text:        #2c5a8a;

  /* Einzelfarben aus dem Markup — damit auch sie umschaltbar sind. */
  --aic-sonder-text-1:          #cc0000;
  --aic-sonder-text-2:          #8a3228;
  --aic-sonder-text-3:          #6a3939;
  --aic-sonder-linie-4:         #90caf9;
  --aic-sonder-linie-5:         #c5e1a5;
  --aic-sonder-text-6:          #c97400;
  --aic-sonder-text-7:          #5d4037;
  --aic-sonder-text-8:          #5c7d63;
  --aic-sonder-text-9:          #8a9a8d;
  --aic-sonder-linie-10:        #dc3545;
  --aic-sonder-flaeche-11:      #f1f8e9;
  --aic-sonder-text-12:         #2e9e5b;
  --aic-sonder-text-13:         #aa0000;
  --aic-sonder-linie-14:        #e67e22;
  --aic-sonder-flaeche-15:      #5a8fc5;
  --aic-sonder-text-16:         #990000;
  --aic-sonder-text-17:         #66aa44;
  --aic-sonder-linie-18:        #c5d9ed;
  --aic-sonder-text-19:         #22aa77;
  --aic-sonder-flaeche-20:      #43a047;
  --aic-sonder-flaeche-21:      #0f172a;
  --aic-sonder-text-22:         #cbd5e1;
  --aic-sonder-flaeche-23:      #fff3cd;
  --aic-sonder-linie-24:        #ffc107;
  --aic-sonder-linie-25:        #b3d4fc;
  --aic-sonder-text-26:         #1c3d5a;
  --aic-sonder-text-27:         #5a7a4a;
  --aic-sonder-text-28:         #8a6a3a;
  --aic-sonder-text-29:         #8a4a4a;
  --aic-sonder-text-30:         #333333;
  --aic-sonder-text-31:         #8d6e63;
  --aic-sonder-linie-32:        #c8b0b0;
  --aic-sonder-text-33:         #aa3333;
  --aic-sonder-text-34:         #3a4a60;
  --aic-sonder-text-35:         #5a6a80;
  --aic-sonder-linie-36:        #bfe3cd;
  --aic-sonder-text-37:         #999999;
  --aic-sonder-text-38:         #444455;
  --aic-sonder-linie-39:        #f4b4b4;
  --aic-sonder-text-40:         #cc5555;
  --aic-sonder-text-41:         #aa8800;
  --aic-sonder-linie-42:        #aa8800;
  --aic-sonder-text-43:         #33aa33;

  --aic-sonder-text-44:      #7a2018;
  --aic-sonder-text-45:      #6a5a20;
  --aic-sonder-text-46:      #6b5200;

  /* Einzelfarben aus den Stylesheets der System-Apps. Signalpunkt, Stern und die
     farbigen Knöpfe (grün/orange mit weisser Schrift) bleiben in beiden Stilen gleich. */
  --aic-sonder-linie-47:     #e0c97f;   /* Rand einer Warnbox (Audiostation, Mobile-Apps) */
  --aic-sonder-text-48:      #f5b301;   /* Favoriten-Stern */
  --aic-sonder-flaeche-49:   #3dd67a;   /* Punkt „verbunden" (FTP) */
  --aic-sonder-linie-50:     #1f5722;   /* Kante des grünen Knopfs (FTP) */
  --aic-sonder-flaeche-51:   #266a29;   /* grüner Knopf beim Zeigen */
  --aic-sonder-linie-52:     #174a1a;   /* dessen Kante beim Zeigen */
  --aic-sonder-flaeche-53:   #e07b00;   /* oranger Knopf (FTP) */
  --aic-sonder-linie-54:     #9a5000;   /* dessen Kante beim Zeigen */
  --aic-sonder-flaeche-55:   #a85c00;   /* oranger Knopf gedrückt */
  --aic-sonder-text-56:      #ffffdd;   /* Schliessen-Kreuz beim Zeigen, auf dunkler Kopfzeile */
  --aic-sonder-linie-57:     #e2c97a;   /* Rand des Rechte-Hinweises (FTP) */
  --aic-sonder-text-58:      #ad7a1f;   /* Warnzeile im FTP-Protokoll */
  --aic-sonder-linie-59:     #f0e0b0;   /* Rand einer offenen Prüfzeile (Mobile-Apps) */
  --aic-sonder-text-60:      #8a6d00;   /* deren Marke */

  /* Schrift auf einer SIGNALFLAECHE (Zaehlmarke auf Orange, Punkt auf Gruen).
     Signalflaechen bleiben in beiden Stilen gleich — also auch die Schrift darauf.
     Ueber `--aic-text-*` lief sie im dunklen Stil hell und verschwand im Orange. */
  --aic-text-auf-signal:       #222222;
}

/* Kippschalter (`bausteine.css`): Grösse der Bahn — Knopf und Weg werden daraus gerechnet. EINE Stellschraube für
   alle Schalter des Systems. Bewusst NICHT im Block darüber: der gilt auch für `.aic-stil-hell` und setzte in einem
   solchen App-Bereich die Touch-Grösse zurück. Kompakt für die Maus; auf Touch die volle Grösse — ein Finger trifft
   keine 16 px hohe Bahn sicher. */
:root {
  --aic-schalter-breite:       30px;
  --aic-schalter-hoehe:        16px;
}

@media (pointer: coarse) {
  :root {
    --aic-schalter-breite:     44px;
    --aic-schalter-hoehe:      24px;
  }
}

/* ========== FONTS ========== */
@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-style: normal;
  src: url('../../fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-style: normal;
  src: url('../../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-style: normal;
  src: url('../../fonts/Roboto-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-style: normal;
  src: url('../../fonts/Roboto-Bold.ttf') format('truetype');
}

/* ========== RESET & BASE ========== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Der Textcursor nur dort, wo man schreibt: in Eingabefeldern und IN bearbeitbaren Flächen.
 * Überall sonst ist er ein Störsignal — ein Fokus auf <button>, <label> oder <div tabindex> liess
 * ihn vor Checkboxen und in Popups blinken; deshalb wird er zentral abgeschaltet.
 * ⛔ Die Ausnahme gilt für alles INNERHALB einer bearbeitbaren Fläche, nicht nur für die Fläche:
 * der Cursor nimmt die Farbe des Elements, in dem er steht — in einem Editor ist das der Absatz —,
 * und `*` trifft jeden Absatz direkt. Ohne `… *` war der Cursor in jedem Editor unsichtbar ([[W-PI1008]]). */
* { caret-color: transparent; }

input, textarea, select,
[contenteditable]:not([contenteditable="false"]),
[contenteditable]:not([contenteditable="false"]) * {
  caret-color: auto;
}

/* Formularfelder erben ihre Schriftfarbe NICHT — der Browser setzt seinen eigenen
   Standard, und der ist schwarz. Im hellen Stil faellt das nie auf; im dunklen steht
   schwarze Schrift auf dunklem Grund und ist unlesbar. Rund dreissig Stellen setzten
   zwar `background` ueber ein Token, aber kein `color`.
   Eine Regel statt dreissig — Felder auf farbigem Grund (blaue Kopfzeile, Werkzeugleiste)
   setzen ihre eigene Farbe und gewinnen ueber ihre hoehere Genauigkeit. */
input, textarea, select, option {
  color: var(--aic-text);
}

/* Bedienelemente erben die Schrift der Seite NICHT von selbst — jeder Browser gibt Knöpfen
   und Feldern seine eigene: Chromium Arial, Firefox die Systemschrift, Safari die Apple-
   Systemschrift, WebKit auf Windows sogar eine Serifenschrift (Rundgang 2026-10-04,
   `konzept_macos_test_setup` §7b). Nur die Familie — Grösse und Gewicht regelt jedes
   Bauteil selbst. Wer eine eigene will (Pfadfeld in Monospace), setzt sie über seine Klasse
   und gewinnt über die höhere Genauigkeit. */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

/* Die aufgeklappte Liste eines Auswahlfeldes zeichnet das Betriebssystem. Ohne
   eigene Flaeche bleibt sie hell, auch wenn das Feld selbst dunkel ist. */
select option {
  background: var(--aic-surface);
  color: var(--aic-text);
}

/* Schieberegler, Haken und Auswahlpunkte zeichnet ebenfalls der Browser. Ohne
   `color-scheme` nimmt er dafuer sein helles Standardaussehen — die Schiene
   eines Reglers bleibt dann weiss, egal was das Stylesheet sagt. Ein Wort
   genuegt, und er zeichnet alle nativen Bedienelemente passend. */
:root, .aic-stil-hell { color-scheme: light; }
[data-theme="dark"], .aic-stil-dunkel { color-scheme: dark; }
input[type="range"], input[type="checkbox"], input[type="radio"], progress {
  accent-color: var(--aic-accent);
}

/* Platzhaltertext ist gedaempft, nicht unsichtbar. */
input::placeholder, textarea::placeholder {
  color: var(--aic-text-dim);
  opacity: 1;
}

/* Verweise IM FLIESSTEXT. Ohne eigene Regel nimmt der Browser sein Standardblau
   (#0000ee) — auf dunklem Grund 1,5:1 und praktisch unlesbar.
   `:not([class])` ist hier entscheidend: Navigations- und Knopf-Elemente sind
   ebenfalls `<a>`, erben ihre Farbe aber von ihrem Container (weiss auf der
   blauen Kopfzeile, weiss in der Seitenleiste). Eine Regel auf blankem `a`
   bricht diese Vererbung und faerbt das Hilfe-Fragezeichen und die
   Navigationseintraege blau — genau das ist beim ersten Versuch passiert.
   Ein Verweis mit Klasse gehoert einem Bauteil und regelt seine Farbe selbst. */
a:not([class]) { color: var(--aic-accent-text); }
a:not([class]):visited { color: var(--aic-accent-text); }
a:not([class]):hover { color: var(--aic-accent-6); }

/* Kopfzeile und Navigationsleiste bleiben im dunklen Stil UNVERAENDERT
   (Nutzer-Direktive 2026-08-29). Das ist bereits ueber die Werte geregelt:
   `accent`, `surface-dark` und `text-inverse` tragen im dunklen Satz ihre
   hellen Werte. Eine zusaetzliche `color: inherit`-Regel stand hier und war
   nicht nur ueberfluessig, sondern schaedlich: sie schlug das `color: #fff`
   der Kopfzeilen-Knoepfe und faerbte sie auf den geerbten Textton um. */

/* Bunte Emojis auf Akzentflächen einfärben.
   Ein Farbbild-Emoji (🎵 📅 ✉️ 📞) wird von der Schriftart als fertiges Bild
   gezeichnet — `color: #fff` erreicht es nicht. Auf dem blauen Grund bleibt es
   dunkellila und ist kaum zu erkennen; das gilt im hellen Stil genauso wie im
   dunklen. Der Styleguide verlangt hier einfarbige Symbole. Statt 18 Zeichen
   auszutauschen, werden sie zu Weiss gerechnet: brightness(0) macht das Bild
   schwarz, invert(1) daraus reines Weiss. Text darin ist ohnehin weiss und
   bleibt es. */
.app-widget-icon,
[style*="--aic-accent"] > h3,
.aic-emoji-auf-akzent {
  filter: brightness(0) invert(1);
}

html, body {
  height: 100%;
  /* Emoji-Schriften am Ende der Kette: erst die des Systems, zuletzt der
     mitgelieferte Rückfall (`emoji-fallback.css`). Ohne diesen Schwanz zeigt ein
     minimales Linux ohne Emoji-Schrift überall Kästchen statt Symbolen — die
     Oberfläche zeichnet Schalter, Knöpfe und App-Symbole als Emoji.
     Der Rückfall wird nur geladen, wenn keine Systemschrift das Zeichen kennt. */
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', 'Meiryo', 'Malgun Gothic', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'AIC Emoji Fallback';
  font-size: var(--aic-schrift-gross);
  color: var(--aic-text-3);
  background: var(--aic-surface-inset-2);
}



/* ============================================================
   Dunkler Stil — NUR Werte, keine Regeln. Jede Regel im System
   arbeitet mit denselben Namen und ist damit in beiden Stilen
   richtig. Wer hier eine Farbe vermisst, hat im Stylesheet
   einen Hex-Wert stehen lassen.
   ============================================================ */
[data-theme="dark"],
.aic-stil-dunkel {
  --aic-surface:              #292929;
  --aic-surface-alt:          #303134;
  --aic-surface-alt-2:        #303134;
  --aic-surface-inset-2:      #2f2f2f;
  --aic-surface-inset-3:      #323232;
  --aic-surface-inset-4:      #313235;
  --aic-surface-sunken:       #383838;
  --aic-surface-sunken-2:     #3a3a3a;
  --aic-surface-sunken-3:     #3c3c3c;
  --aic-surface-sunken-4:     #3e3e3e;
  --aic-surface-dim:          #535353;
  --aic-surface-dim-2:        #535353;
  --aic-surface-dim-3:        #535353;
  --aic-surface-dim-4:        #535353;
  --aic-surface-dim-5:        #535353;
  --aic-surface-dim-6:        #535353;
  --aic-surface-dark:         #2c2c2c;
  --aic-surface-dark-2:       #484848;
  --aic-surface-dark-3:       #3a3a3a;
  --aic-surface-dark-4:       #1a1a1a;
  --aic-surface-dark-5:       #000000;
  --aic-surface-dark-6:       #0a0a0a;
  --aic-tabellenkopf:         #1e1f22;
  --aic-marke-rot:            #ff8a80;
  --aic-marke-blau:           #82b1ff;
  --aic-marke-orange:         #ffb74d;
  --aic-marke-violett:        #c9a0ff;
  --aic-marke-pink:           #f48fb1;
  --aic-text-2:               #cbcbcb;
  --aic-text-3:               #d6d6d6;
  --aic-text-4:               #e6e6e6;
  --aic-text-5:               #e0e0e0;
  --aic-text-6:               #dadada;
  --aic-text-muted-2:         #aeaeae;
  --aic-text-muted-3:         #b6b6b6;
  --aic-text-muted-4:         #c0c0c0;
  --aic-text-muted-5:         #9dafc8;
  --aic-text-dim:             #b0b0b0;
  --aic-text-dim-2:           #aeaeae;
  --aic-text-dim-3:           #9fb2c9;
  --aic-text-dim-4:           #9fb0c9;
  --aic-text-faint:           #afafaf;
  --aic-text-faint-2:         #afafaf;
  --aic-text-faint-3:         #afafaf;
  --aic-text-faint-4:         #aeaeae;
  --aic-text-faint-5:         #b0b0b0;
  --aic-text-inverse:         #ffffff;
  --aic-text-inverse-2:       #f8f9fa;
  --aic-text-inverse-3:       #e0e0e0;
  --aic-text-inverse-4:       #f5f5f5;
  /* Absichtlich gleich wie im hellen Block — siehe Begründung dort. */
  --aic-papier:               #ffffff;
  --aic-papier-text:          #1a1a1a;
  --aic-papier-link:          #3a6ea5;
  --aic-border-soft-2:        #535353;
  --aic-border-soft-3:        #535353;
  --aic-border-soft-4:        #4e545c;
  --aic-border-2:             #535353;
  --aic-border-3:             #747474;
  --aic-border-4:             #535353;
  --aic-border-5:             #4e545d;
  --aic-border-6:             #535353;
  --aic-border-strong:        #727272;
  --aic-border-strong-2:      #6c757f;
  --aic-border-strong-3:      #727272;
  --aic-border-strong-4:      #747474;
  --aic-border-strong-5:      #757575;
  --aic-border-dark:          #757575;
  --aic-border-dark-2:        #747474;
  --aic-border-dark-3:        #757575;
  --aic-border-dark-4:        #757575;
  --aic-border-dark-5:        #737373;
  --aic-border-dark-6:        #727272;
  --aic-border-dark-7:        #727272;
  --aic-audio-mark:           #3fd6d6;
  --aic-accent:               #3a6ea5;
  --aic-accent-2:             #2c5a8a;
  --aic-accent-3:             #2c5d8c;
  --aic-accent-4:             #1565c0;
  --aic-accent-5:             #32628f;
  --aic-accent-6:             #6596c9;
  --aic-accent-7:             #7db9f0;
  --aic-accent-8:             #5b8abc;
  --aic-accent-9:             #4a90d9;
  --aic-accent-10:            #4095e8;
  --aic-accent-11:            #2196f3;
  --aic-accent-12:            #4a9eff;
  --aic-accent-13:            #7fb0ee;
  --aic-accent-14:            #5ba0d0;
  --aic-accent-15:            #79b0e8;
  --aic-accent-16:            #7895af;
  --aic-accent-17:            #42a5f5;
  --aic-accent-18:            #5697cc;
  --aic-accent-dark-2:        #8291a0;
  --aic-accent-dark-3:        #1f4870;
  --aic-accent-dark-4:        #5391f0;
  --aic-accent-dark-5:        #98a3bc;
  --aic-accent-dark-6:        #8cb0d8;
  --aic-accent-dark-7:        #9bb4cc;
  --aic-accent-dark-8:        #6a1b9a;
  --aic-accent-dark-9:        #a66dea;
  --aic-accent-dark-10:       #6d8cac;
  --aic-accent-dark-11:       #61a1db;
  --aic-accent-soft-2:        #252b32;
  --aic-accent-soft-3:        #1d2b39;
  --aic-accent-soft-4:        #242a33;
  --aic-accent-line:          #3b5671;
  --aic-accent-line-2:        #4a545f;
  --aic-accent-line-3:        #4a555f;
  --aic-accent-line-4:        #37566f;
  --aic-accent-line-5:        #5b4b78;
  --aic-accent-line-6:        #495561;
  --aic-accent-line-7:        #3b5671;
  --aic-accent-line-8:        #495463;
  --aic-accent-line-9:        #3d5570;
  --aic-accent-line-10:       #3b5672;
  --aic-accent-line-11:       #4a5460;
  --aic-accent-line-12:       #395768;
  --aic-accent-line-13:       #35576f;
  --aic-accent-wash:          #202e3c;
  --aic-accent-wash-2:        #202d3c;
  --aic-accent-wash-3:        #202e3c;
  --aic-accent-wash-4:        #20303c;
  --aic-accent-wash-5:        #20303c;
  --aic-accent-wash-6:        #29203c;
  --aic-accent-wash-7:        #202e3c;
  --aic-accent-wash-8:        #202d3c;
  --aic-accent-wash-9:        #202d3c;
  --aic-success:              #2e7d32;
  --aic-success-2:            #4caf50;
  --aic-success-3:            #28a745;
  --aic-success-dark:         #37c041;
  --aic-success-dark-2:       #68b878;
  --aic-success-soft:         #66bb6a;
  --aic-success-line:         #2a5e2c;
  --aic-success-line-2:       #2b5e36;
  --aic-success-line-3:       #2a5e2d;
  --aic-success-wash:         #203c22;
  --aic-warn-2:               #e65100;
  --aic-warn-3:               #f57c00;
  --aic-warn-4:               #f9a825;
  --aic-warn-5:               #d2a000;
  --aic-warn-6:               #f57f17;
  --aic-warn-7:               #df9c00;
  --aic-warn-8:               #f08b00;
  --aic-warn-9:               #e07a1a;
  --aic-warn-10:              #c79a3a;
  --aic-warn-11:              #ef6c00;
  --aic-warn-12:              #ff9800;
  --aic-warn-13:              #b8860b;
  --aic-warn-14:              #f0ad4e;
  --aic-warn-15:              #b35900;
  --aic-warn-16:              #a07c1f;
  /* Zwischenruf im dunklen Stil: heller und etwas kräftiger gewaschen, sonst
     verschwindet das Lila auf dunklem Grund. */
  --aic-einwurf:              #b39dff;
  --aic-einwurf-wash:         rgba(140, 100, 255, 0.24);
  --aic-einwurf-line:         rgba(160, 130, 255, 0.55);
  --aic-bav-ruhe:             #3ee6c1;
  --aic-bav-ruhe-2:           #b8fff0;
  --aic-bav-denkt:            #3d8bff;
  --aic-bav-denkt-2:          #bcd8ff;
  --aic-bav-arbeitet:         #ff9d2e;
  --aic-bav-arbeitet-2:       #ffe0b0;
  --aic-bav-fertig:           #33e07a;
  --aic-bav-fertig-2:         #c9ffd9;
  --aic-bav-fehler:           #ff4d5e;
  --aic-bav-fehler-2:         #ffc9cf;
  --aic-bav-licht:            #ffffff;
  --aic-warn-17:              #c7a93a;
  --aic-warn-18:              #bea55b;
  --aic-warn-19:              #8a7a40;
  --aic-warn-20:              #b87316;
  --aic-warn-21:              #e8a838;
  --aic-warn-22:              #bf5500;
  --aic-warn-23:              #ffb74d;
  --aic-warn-24:              #e0a72e;
  --aic-warn-dark:            #eec400;
  --aic-warn-dark-2:          #ffd563;
  --aic-warn-soft:            #ffb74d;
  --aic-warn-soft-2:          #392c1d;
  --aic-warn-soft-3:          #ff9800;
  --aic-warn-soft-4:          #392a1d;
  --aic-warn-line:            #67502e;
  --aic-warn-line-2:          #67502e;
  --aic-warn-line-3:          #5e532b;
  --aic-warn-line-4:          #5f522b;
  --aic-warn-line-5:          #67502e;
  --aic-warn-line-6:          #694e35;
  --aic-warn-line-7:          #63512c;
  --aic-warn-line-8:          #60522b;
  --aic-warn-line-9:          #60522b;
  --aic-warn-wash:            #3c3120;
  --aic-warn-wash-2:          #3c3520;
  --aic-warn-wash-3:          #3c3520;
  --aic-warn-wash-4:          #3c3520;
  --aic-warn-wash-5:          #3c3520;
  --aic-warn-wash-6:          #3c3620;
  --aic-warn-wash-7:          #3c3320;
  --aic-error:                #c62828;
  --aic-error-2:              #e53935;
  --aic-error-3:              #ff5252;
  --aic-error-4:              #e85854;
  --aic-error-5:              #cc4444;
  --aic-error-6:              #e68181;
  --aic-error-7:              #c0392b;
  --aic-error-8:              #f85f5f;
  --aic-error-9:              #d32f2f;
  --aic-error-10:             #d9534f;
  --aic-error-11:             #bf360c;
  --aic-error-12:             #dc826d;
  --aic-error-dark:           #b71c1c;
  --aic-error-dark-2:         #e05d5d;
  --aic-error-dark-3:         #dd5e5e;
  --aic-error-soft:           #391d20;
  --aic-error-line:           #75474b;
  --aic-error-line-2:         #72493e;
  --aic-error-line-3:         #754555;
  --aic-error-wash:           #3c2620;
  --aic-error-wash-2:         #3c2024;
  --aic-error-wash-3:         #3c2020;
  --aic-error-wash-4:         #3c2029;
  --aic-shadow-farbe:         #ffffff;
  --aic-shadow-farbe-2:       #f9d172;
  --aic-shadow-farbe-3:       #d24646;
  --aic-shadow-farbe-4:       #6dc371;
  --aic-shadow-farbe-5:       #5a8bbf;
  --aic-shadow-farbe-6:       #6fabe8;
  --aic-shadow-farbe-7:       #2c2c2c;
  --aic-accent-hover:         #325e8f;
  --aic-accent-dark:          #5f94cc;
  --aic-accent-soft:          #1d2e39;
  --aic-bg:                   #23262a;
  --aic-surface-inset:        #23262a;
  --aic-border:               #4d545a;
  --aic-border-soft:          #4e545b;
  --aic-text:                 #d6d6d6;
  --aic-text-muted:           #b6b6b6;
  --aic-warn:                 #f57c00;

  /* Schatten tragen auf dunklem Grund nicht — die Ränder übernehmen. */
  --aic-shadow-sm:             0 1px 3px rgba(0,0,0,.55);
  --aic-shadow-md:             0 6px 18px rgba(0,0,0,.6);

  /* Rückmeldung: im dunklen Stil eine Spur HELLER als der Grund, nicht Richtung Weiss. */
  --aic-hover:                 #333333;
  --aic-hover-stark:           #3d3d3d;

  /* Symbole werden hell statt blau — Blau auf dunklem Grund ist ein Fleck. */
  --aic-icon:                  #dcdcdc;

  /* Die Kante des Schalters wird hell — sie traegt ihn gegen den dunklen Grund. */
  --aic-schalter-rand:         rgba(255,255,255,.38);
  --aic-punkt-ruhe:            #9e9e9e;

  /* Knöpfe tragen im dunklen Stil eine neutrale Fläche, kein Dauerblau. */
  --aic-knopf-akzent:          #2c2c2c;

  /* Helle Auflagen deutlich zurueckgenommen — 75 % Weiss blitzt auf dunklem Grund. */
  --aic-auflage:               rgba(255,255,255,.4);
  --aic-auflage-stark:         rgba(255,255,255,.55);

  --aic-error-text:           #e29f9f;
  --aic-success-text:         #66c16b;
  --aic-warn-2-text:          #f8945f;
  --aic-accent-text:          #92b3d6;
  --aic-error-5-text:         #dc9e9e;
  --aic-success-2-text:       #6ac26e;
  --aic-error-4-text:         #ea9997;
  --aic-accent-3-text:        #8ab2d8;
  --aic-accent-4-text:        #81b3ee;
  --aic-error-2-text:         #e79b9a;
  --aic-error-dark-text:      #e99b9b;
  --aic-warn-3-text:          #f69838;
  --aic-accent-2-text:        #8db2d8;

  --aic-sonder-text-1:          #f98484;
  --aic-sonder-text-2:          #dc968e;
  --aic-sonder-text-3:          #c99e9e;
  --aic-sonder-linie-4:         #90caf9;
  --aic-sonder-linie-5:         #c5e1a5;
  --aic-sonder-text-6:          #fa9000;
  --aic-sonder-text-7:          #c3a095;
  --aic-sonder-text-8:          #92af98;
  --aic-sonder-text-9:          #9eaba0;
  --aic-sonder-linie-10:        #dc3545;
  --aic-sonder-flaeche-11:      #242e19;
  --aic-sonder-text-12:         #38bf6e;
  --aic-sonder-text-13:         #f98787;
  --aic-sonder-linie-14:        #e67e22;
  --aic-sonder-flaeche-15:      #213345;
  --aic-sonder-text-16:         #f98989;
  --aic-sonder-text-17:         #72b84e;
  --aic-sonder-linie-18:        #c5d9ed;
  --aic-sonder-text-19:         #26be85;
  --aic-sonder-flaeche-20:      #43a047;
  --aic-sonder-flaeche-21:      #0f172a;
  --aic-sonder-text-22:         #cbd5e1;
  --aic-sonder-flaeche-23:      #2e2919;
  --aic-sonder-linie-24:        #ffc107;
  --aic-sonder-linie-25:        #b3d4fc;
  --aic-sonder-text-26:         #7cacd6;
  --aic-sonder-text-27:         #91b280;
  --aic-sonder-text-28:         #c4a474;
  --aic-sonder-text-29:         #c99e9e;
  --aic-sonder-text-30:         #a7a7a7;
  --aic-sonder-text-31:         #c3a195;
  --aic-sonder-linie-32:        #c8b0b0;
  --aic-sonder-text-33:         #dc9494;
  --aic-sonder-text-34:         #95a8c3;
  --aic-sonder-text-35:         #96aac4;
  --aic-sonder-linie-36:        #bfe3cd;
  --aic-sonder-text-37:         #a8a8a8;
  --aic-sonder-text-38:         #a4a4cc;
  --aic-sonder-linie-39:        #f4b4b4;
  --aic-sonder-text-40:         #dc9595;
  --aic-sonder-text-41:         #cfa500;
  --aic-sonder-linie-42:        #aa8800;
  --aic-sonder-text-43:         #3ac23a;

  --aic-sonder-text-44:      #e37a71;
  --aic-sonder-text-45:      #c4a63b;
  --aic-sonder-text-46:      #c29400;

  --aic-sonder-linie-47:     #63512c;
  --aic-sonder-text-48:      #f5b301;
  --aic-sonder-flaeche-49:   #3dd67a;
  --aic-sonder-linie-50:     #1f5722;
  --aic-sonder-flaeche-51:   #266a29;
  --aic-sonder-linie-52:     #174a1a;
  --aic-sonder-flaeche-53:   #e07b00;
  --aic-sonder-linie-54:     #9a5000;
  --aic-sonder-flaeche-55:   #a85c00;
  --aic-sonder-text-56:      #ffffdd;
  --aic-sonder-linie-57:     #63512c;
  --aic-sonder-text-58:      #d4a043;
  --aic-sonder-linie-59:     #5e532b;
  --aic-sonder-text-60:      #d2a000;

  --aic-text-auf-signal:       #222222;
}

/* Der Grund selbst. Ohne das bliebe der Bereich hinter dem Inhalt hell. */
[data-theme="dark"] body { background: var(--aic-surface-inset); color: var(--aic-text); }

/* Überschriften ohne eigene Grösse bekommen eine Schriftstufe statt der Browser-Vorgabe (h3 = 1.17em ergab 16,38 px). */
h1 { font-size: var(--aic-schrift-kopf); }
h2 { font-size: var(--aic-schrift-kopf); }
h3 { font-size: var(--aic-schrift-titel); }
h4, h5, h6 { font-size: var(--aic-schrift-gross); }
/* Formularelemente ohne eigene Grösse: Stufe statt Browser-Vorgabe (13,33 px). */
button, input, select, textarea { font-size: var(--aic-schrift-text); }