/* =========================================================================
   app-ui.css · Design-Fundament D0 · WizClub-Tokens und Bootstrap-Brücke
   -------------------------------------------------------------------------
   EINE Quelle für Farben, Schrift, Formen und Schatten der Vereins-App.
   Geladen von app/views/layout/header.php als versionierte Datei
   (<link href="…/assets/css/app-ui.css?v=<mtime>">), NACH Bootstrap und VOR den
   Seiten-<style>-Blöcken. Der Mandanten-Block im Header (Vereinsfarbe) kommt
   danach und überschreibt nur --accent*, --brand*.

   Aufbau
     1  Schriften              @font-face, selbst gehostet (OFL), nie von Google
     2  Primitive              --wc-*   die Farben des Corporate Designs 1.0
     3  Formen & Ebenen        Radien, Abstände, z-index, Safe-Area
     4  Semantik, Hell         --bg --panel --text --border --accent …
     5  Semantik, Dunkel       dieselben Namen, ein zweiter Wertesatz
     6  Bootstrap-Brücke       --bs-* zeigen auf die Tokens (Variablen)
     7  Bootstrap-Komponenten  Knöpfe, Formulare, Karten, Listen … in Markenfarbe
     8  Basis                  Schrift, Fokus, Auswahl, kleine Helfer

   Regeln für neuen Code
     • Farben nie als Hex in Views: var(--text), var(--panel), var(--accent) …
       (Ausnahmen: PDF, E-Mail, SVG-Attribute, Canvas/JS).
     • Zwei Namensräume: --wc-* sind feste Markenwerte, alles andere ist Semantik
       und wechselt mit Hell/Dunkel. Semantik benutzen, nicht --wc-*.
     • Vereinsfarbe = --accent (Fläche, weißer Text darauf ≥ 5,2 : 1) bzw.
       --accent-text (Links/Text; im Dunkelmodus aufgehellt). Die rohe Farbe steht
       in --brand (Navigationsleiste, Tab-Leiste).
     • Dunkel = Attribut data-bs-theme="dark" am <html>; ein eigener
       [data-bs-theme="dark"]-Block in Views ist nur für harte Sonderfälle nötig.
   Werte: Corporate Design WizClub 1.0 (Ordner „Corporate Design/WizClub“,
   brand/tokens.css). Abweichungen davon sind unten mit „CD:“ vermerkt.
   ========================================================================= */

/* ─────────────────────────── 1 · Schriften ─────────────────────────── */
@font-face { font-family: "Anybody";      src: url("../site/fonts/anybody.woff2") format("woff2");      font-weight: 500 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Inter Tight";  src: url("../site/fonts/inter-tight.woff2") format("woff2");  font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("../site/fonts/martian-mono.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

/* ─────────────────────── 2 · Primitive (konstant) ─────────────────────── */
:root {
  --wc-violett: #7C3AED;   /* Marke, Knöpfe, Links; Weiß darauf 5,7 : 1 */
  --wc-purpur:  #5B21B6;   /* Hover, gedrückt, tiefe Flächen */
  --wc-nacht:   #1B1038;   /* Text auf Hell, dunkle Flächen */
  --wc-dunst:   #F6F2FF;   /* heller Grund */
  --wc-flieder: #B794FF;   /* interaktiv auf Dunkel */
  --wc-lavendel:#DCCEFF;
  --wc-nebel:   #E7E0F7;   /* Linien, Fläche 2 */
  --wc-himmel:  #4F8CFF;   /* Hinweis, Info */
  --wc-rasen:   #2FBF71;   /* Erfolg, bezahlt */
  --wc-schiefer:#5B5478;   /* Sekundärtext hell */
  --wc-daemmer: #9A94B8;   /* Sekundärtext dunkel */
  --wc-kirsche: #F0476B;   /* Fehler, überfällig */
  --wc-gold:    #FBBF24;   /* Stern auf Dunkel, Highlights */
  --wc-amber:   #F59E0B;   /* Stern auf Hell, Warnung */
  --wc-glow: linear-gradient(135deg, #7C3AED 0%, #B794FF 50%, #FBBF24 100%);  /* nur Flächen, nie hinter Schrift */
  --wc-ease: cubic-bezier(.2, .8, .2, 1);
  --wc-tap: 44px;          /* Trefferfläche mindestens 44 px („mit nassen Händen“) */

  /* Schriftfamilien. Die Emoji-Fallbacks bleiben im Stapel: die App nutzt Emoji als Symbole. */
  --font-display: "Anybody", "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Inter Tight", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-ui:      -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ───────────────────── 3 · Formen, Abstände, Ebenen ───────────────────── */
:root {
  /* Radien: Knöpfe 12, Karten 20, Kacheln 22,37 % (Brand Sheet „In der App“) */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --radius-tile: 22.37%;
  /* Abstände */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
  /* z-index-Skala — deckungsgleich mit den bestehenden Werten in header/footer */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-bottomnav:1030;
  --z-navbar:   1040;
  --z-search:   1050;
  --z-cookie:   1080;
  --z-backtotop:1090;
  --z-sheet:    10000;  /* == .app-modal-overlay (footer.php) */
  --z-modal:    10000;
  --z-toast:    10050;
  --z-install:  10060;
  /* Safe-Area-Kurzform */
  --safe-top:    env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left:   env(safe-area-inset-left);
  --safe-right:  env(safe-area-inset-right);
}

/* ─────────────────────── 4 · Semantik, Hell (Normalfall) ─────────────────────── */
:root {
  color-scheme: light;

  /* Flächen */
  --bg:             #F6F2FF;   /* Seitengrund (Dunst) */
  --bg-rgb:         246, 242, 255;
  --panel:          #FFFFFF;   /* Karten, Tafeln */
  --panel-rgb:      255, 255, 255;
  --panel-2:        #E7E0F7;   /* Fläche 2: Kopfzeilen, Hover, Chips (Nebel) */
  --panel-2-rgb:    231, 224, 247;
  --panel-elevated: #FFFFFF;   /* Dropdowns, Dialoge */
  --inset:          #F6F2FF;   /* eingelassen in einer Karte: Eingabegrund, Zebra, Code */
  --inset-rgb:      246, 242, 255;

  /* Text und Linien */
  --text:           #1B1038;   /* Nacht */
  --text-rgb:       27, 16, 56;
  --text-soft:      #433B66;   /* zwischen Text und Muted: Beschriftungen, Nebentexte in Knöpfen */
  --text-muted:     #5B5478;   /* Schiefer, auf Dunst 6,4 : 1 */
  --text-muted-rgb: 91, 84, 120;
  --text-faint:     rgba(27, 16, 56, .5);   /* Platzhalter, deaktiviert */
  --border:         rgba(27, 16, 56, .12);
  --border-strong:  rgba(27, 16, 56, .24);

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(27, 16, 56, .07);
  --shadow-md: 0 4px 14px rgba(27, 16, 56, .09);
  --shadow-lg: 0 24px 60px rgba(27, 16, 56, .20);

  /* Akzent: Der Mandant überschreibt --accent* im Header mit seiner Vereinsfarbe. */
  --accent:         #7C3AED;            /* Fläche; weißer Text darauf ≥ 5,2 : 1 (hier 5,7 : 1) */
  --accent-rgb:     124, 58, 237;
  --accent-on-dark: #B794FF;            /* Variante für dunkle Flächen (Flieder) */
  --accent-on-dark-rgb: 183, 148, 255;
  --accent-fill:    var(--accent);      /* was Knöpfe/aktive Elemente füllt … */
  --accent-fill-rgb:var(--accent-rgb);
  --on-accent:      #FFFFFF;            /* … und die Schrift darauf */
  --accent-text:    var(--accent);      /* Links und Text in Akzentfarbe */
  --accent-text-rgb:var(--accent-rgb);
  --accent-text-hover: color-mix(in srgb, var(--accent-text) 80%, #000);   /* Link-Hover */
  --accent-hover:   color-mix(in srgb, var(--accent-fill) 82%, #000);   /* Hover und gedrückt dunkeln in beiden Modi ab: weiße Schrift gewinnt dabei nur Kontrast */
  --accent-active:  color-mix(in srgb, var(--accent-fill) 68%, #000);
  --accent-soft:    color-mix(in srgb, var(--accent-fill) 9%, var(--panel));    /* Tönung (ausgewählt, Hover) */
  --accent-soft-2:  color-mix(in srgb, var(--accent-fill) 14%, var(--panel));   /* stärker getönt lässt Akzenttext (4,5 : 1) nicht mehr zu */
  --accent-ring:    color-mix(in srgb, var(--accent-fill) 24%, transparent);    /* Fokusring */

  /* Status. CD: go/hold/stop/info; --warn-ink und --ok-ink sind für Text auf Weiß auf 4,5 : 1 abgedunkelt. */
  --ok:   #0E8F6B; --warn: #B26A00; --bad: #D1243A; --info: #2A5FD0;
  --ok-fill:   #0B7F5E; --on-ok:   #FFFFFF;      /* Knopf/Fläche mit Schrift darauf */
  --warn-fill: #F59E0B; --on-warn: #1B1038;
  --bad-fill:  #D1243A; --on-bad:  #FFFFFF;
  --info-fill: #4F8CFF; --on-info: #1B1038;      /* Abendhimmel + Nacht (5,5 : 1): passt zu Bootstraps `.bg-info.text-dark` */
  --ok-soft:   #D6F3EE; --ok-ink:   #0B6E55;     /* Chips und Hinweise (Brand Sheet „Status“) */
  --warn-soft: #FFF0B8; --warn-ink: #7A5A00;
  --bad-soft:  #FFDCE0; --bad-ink:  #B01E32;
  --info-soft: #D9EEFA; --info-ink: #0B6A8F;
  --ok-rgb: 11, 127, 94; --warn-rgb: 245, 158, 11; --bad-rgb: 209, 36, 58; --info-rgb: 79, 140, 255;
  --neutral-fill: #5B5478; --neutral-fill-rgb: 91, 84, 120;   /* neutrale Füllung (.bg-secondary, „Entwurf“-Badge) mit weißer Schrift, 7,0 : 1 */
  --glint: #F59E0B;                                            /* der Funke in den Piktogrammen: Amber auf Hell, Gold auf Dunkel (Brand Sheet) */

  /* Altnamen: bleiben gültig, damit die ≈ 1.000 bestehenden Stellen nichts merken. --brand wird im Mandanten-
     Block mit der ROHEN Vereinsfarbe belegt (Navigationsleiste), --brand-gold ist die Akzentfarbe des Vereins. */
  --platform-mark:   var(--wc-violett);   /* die Plattformmarke („powered by WizClub“), unabhängig von der Vereinsfarbe */
  --brand:           var(--accent);
  --brand-secondary: var(--wc-flieder);
  --brand-gold:      var(--wc-gold);
  --brand-accent:    var(--brand-gold);
  --panel-alt:       var(--panel-2);
}

/* ─────────────────────── 5 · Semantik, Dunkel ─────────────────────── */
/* Gleiche Namen, zweiter Wertesatz. Der Selektor gilt auch für verschachtelte Bereiche mit
   data-bs-theme="dark" (Bootstrap-Konvention), nicht nur für <html>. */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --bg:             #130A28;   /* tiefer als Nacht, damit Karten (#271750) und ältere #1A0F35-Flächen sich abheben */
  --bg-rgb:         19, 10, 40;
  --panel:          #271750;
  --panel-rgb:      39, 23, 80;
  --panel-2:        #33206B;
  --panel-2-rgb:    51, 32, 107;
  --panel-elevated: #2C1B5C;
  --inset:          #211444;
  --inset-rgb:      33, 20, 68;

  --text:           #F6F2FF;
  --text-rgb:       246, 242, 255;
  --text-soft:      #C9C2E3;
  --text-muted:     #9A94B8;   /* Dämmer, auf Panel 5,4 : 1 */
  --text-muted-rgb: 154, 148, 184;
  --text-faint:     rgba(246, 242, 255, .5);
  --border:         rgba(255, 255, 255, .11);
  --border-strong:  rgba(255, 255, 255, .22);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .65);

  /* Füllung und Schrift darauf (--accent-fill, --on-accent, --ok-fill …) bleiben im Dunkeln WIE im Hellen: weiße Schrift
     auf einer Füllung mit ≥ 4,5 : 1. Nur so bleiben Seiten lesbar, die .btn-primary mit eigenem Hintergrund (Verlauf in
     Vereinsfarbe) bemalen und die Schriftfarbe von Bootstrap erben. Aufgehellt wird nur, was TEXT oder LINIE auf
     dunklem Grund ist (--accent-text, --*-ink). Die helle Flieder-Füllung des Brand Sheets kommt mit den
     D1-Komponenten (.wc-btn), nicht über die Brücke. */
  --accent-text:     var(--accent-on-dark);
  --accent-text-rgb: var(--accent-on-dark-rgb);
  --accent-text-hover: color-mix(in srgb, var(--accent-text) 82%, #fff);
  --accent-soft:     color-mix(in srgb, var(--accent-fill) 16%, var(--panel));
  --accent-soft-2:   color-mix(in srgb, var(--accent-fill) 26%, var(--panel));
  --accent-ring:     color-mix(in srgb, var(--accent-on-dark) 38%, transparent);

  /* Status als Text/Punkt auf dunklem Grund: die Brand-Sheet-Töne für Dunkel (Rasen, Amber, Kirsche, Abendhimmel) */
  --ok:   #2FBF71; --warn: #F59E0B; --bad: #F0476B; --info: #4F8CFF;
  --ok-soft:   color-mix(in srgb, #2FBF71 18%, var(--panel)); --ok-ink:   color-mix(in srgb, #2FBF71 55%, #fff);
  --warn-soft: color-mix(in srgb, #F59E0B 20%, var(--panel)); --warn-ink: color-mix(in srgb, #FBBF24 70%, #fff);
  --bad-soft:  color-mix(in srgb, #F0476B 20%, var(--panel)); --bad-ink:  color-mix(in srgb, #F0476B 55%, #fff);
  --info-soft: color-mix(in srgb, #4F8CFF 20%, var(--panel)); --info-ink: color-mix(in srgb, #4F8CFF 55%, #fff);
  --neutral-fill: #6B6296; --neutral-fill-rgb: 107, 98, 150;   /* Dämmer-Violett statt des hellen --text-muted: weiße Schrift darauf 5,5 : 1 */
  --platform-mark: var(--wc-flieder);
  --glint: #FBBF24;
}

/* ─────────────────────── 6 · Bootstrap-Brücke (Variablen) ───────────────────────
   Bootstrap 5.3 rechnet fast alles aus --bs-*-Variablen. Hier zeigen sie auf die Tokens, ein Wertesatz für
   Hell UND Dunkel (die Tokens wechseln selbst). Behebt den grauen Seitengrund (#212529) im Dunkelmodus und das
   Bootstrap-Blau (#0d6efd) bei allen .btn-primary, .text-primary, Schaltern, Tabs … */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-body-font-family: var(--brand-font, var(--font-text));
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--text);
  --bs-body-color-rgb: var(--text-rgb);
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: var(--bg-rgb);
  --bs-emphasis-color: var(--text);
  --bs-emphasis-color-rgb: var(--text-rgb);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: var(--text-muted-rgb);
  --bs-secondary-bg: var(--panel-2);
  --bs-secondary-bg-rgb: var(--panel-2-rgb);
  --bs-tertiary-color: var(--text-faint);
  --bs-tertiary-color-rgb: var(--text-rgb);
  --bs-tertiary-bg: var(--inset);
  --bs-tertiary-bg-rgb: var(--inset-rgb);

  --bs-link-color: var(--accent-text);
  --bs-link-color-rgb: var(--accent-text-rgb);
  --bs-link-hover-color: var(--accent-text-hover);
  --bs-link-hover-color-rgb: var(--accent-text-rgb);
  --bs-code-color: var(--accent-text);
  --bs-highlight-color: var(--text);
  --bs-highlight-bg: var(--warn-soft);

  --bs-border-color: var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-xxl: 28px;
  --bs-border-radius-2xl: 28px;
  --bs-border-radius-pill: var(--radius-pill);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);
  --bs-focus-ring-color: var(--accent-ring);

  --bs-primary: var(--accent-fill);
  --bs-primary-rgb: var(--accent-fill-rgb);
  --bs-primary-text-emphasis: var(--accent-text);
  --bs-primary-bg-subtle: var(--accent-soft);
  --bs-primary-border-subtle: color-mix(in srgb, var(--accent-fill) 34%, var(--panel));

  --bs-secondary: var(--text-muted);
  --bs-secondary-rgb: var(--text-muted-rgb);
  --bs-secondary-text-emphasis: var(--text-muted);
  --bs-secondary-bg-subtle: var(--panel-2);
  --bs-secondary-border-subtle: var(--border-strong);

  --bs-success: var(--ok-fill);      --bs-success-rgb: var(--ok-rgb);
  --bs-success-text-emphasis: var(--ok-ink);   --bs-success-bg-subtle: var(--ok-soft);
  --bs-success-border-subtle: color-mix(in srgb, var(--ok) 32%, var(--panel));
  --bs-warning: var(--warn-fill);    --bs-warning-rgb: var(--warn-rgb);
  --bs-warning-text-emphasis: var(--warn-ink); --bs-warning-bg-subtle: var(--warn-soft);
  --bs-warning-border-subtle: color-mix(in srgb, var(--warn) 32%, var(--panel));
  --bs-danger: var(--bad-fill);      --bs-danger-rgb: var(--bad-rgb);
  --bs-danger-text-emphasis: var(--bad-ink);   --bs-danger-bg-subtle: var(--bad-soft);
  --bs-danger-border-subtle: color-mix(in srgb, var(--bad) 32%, var(--panel));
  --bs-info: var(--info-fill);       --bs-info-rgb: var(--info-rgb);
  --bs-info-text-emphasis: var(--info-ink);    --bs-info-bg-subtle: var(--info-soft);
  --bs-info-border-subtle: color-mix(in srgb, var(--info) 32%, var(--panel));

  --bs-light: #F6F2FF; --bs-light-rgb: 246, 242, 255;
  --bs-dark:  #1B1038; --bs-dark-rgb: 27, 16, 56;
  --bs-form-valid-color: var(--ok-ink);     --bs-form-valid-border-color: var(--ok);
  --bs-form-invalid-color: var(--bad-ink);  --bs-form-invalid-border-color: var(--bad);
}

/* ─────────────────────── 7 · Bootstrap-Komponenten ───────────────────────
   Bootstrap legt die Farben der Komponenten als feste Werte ab (.btn-primary { --bs-btn-bg: #0d6efd }), nicht als
   Verweis auf --bs-primary. Deshalb hier die Komponenten-Variablen, die Markenfarbe tragen. Spezifität wie
   Bootstrap (eine Klasse): Seiten-<style>-Blöcke kommen später und gewinnen weiter. */

/* Knöpfe */
.btn { --bs-btn-border-radius: var(--radius-md); --bs-btn-font-weight: 600; }
.btn-sm { --bs-btn-border-radius: var(--radius-sm); }
.btn-primary {
  --bs-btn-color: var(--on-accent);            --bs-btn-bg: var(--accent-fill);          --bs-btn-border-color: var(--accent-fill);
  --bs-btn-hover-color: var(--on-accent);      --bs-btn-hover-bg: var(--accent-hover);   --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-color: var(--on-accent);     --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active);
  --bs-btn-disabled-color: var(--on-accent);   --bs-btn-disabled-bg: var(--accent-fill); --bs-btn-disabled-border-color: var(--accent-fill);
  --bs-btn-focus-shadow-rgb: var(--accent-fill-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--accent-text);          --bs-btn-border-color: var(--accent-text);
  --bs-btn-hover-color: var(--on-accent);      --bs-btn-hover-bg: var(--accent-fill);    --bs-btn-hover-border-color: var(--accent-fill);
  --bs-btn-active-color: var(--on-accent);     --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active);
  --bs-btn-disabled-color: var(--accent-text); --bs-btn-disabled-border-color: var(--accent-text);
  --bs-btn-focus-shadow-rgb: var(--accent-fill-rgb);
}
.btn-secondary {
  --bs-btn-color: var(--text);                 --bs-btn-bg: var(--panel-2);              --bs-btn-border-color: var(--panel-2);
  --bs-btn-hover-color: var(--text);           --bs-btn-hover-bg: color-mix(in srgb, var(--panel-2) 84%, var(--text)); --bs-btn-hover-border-color: color-mix(in srgb, var(--panel-2) 84%, var(--text));
  --bs-btn-active-color: var(--text);          --bs-btn-active-bg: color-mix(in srgb, var(--panel-2) 72%, var(--text)); --bs-btn-active-border-color: color-mix(in srgb, var(--panel-2) 72%, var(--text));
  --bs-btn-disabled-color: var(--text-faint);  --bs-btn-disabled-bg: var(--panel-2);     --bs-btn-disabled-border-color: var(--panel-2);
  --bs-btn-focus-shadow-rgb: var(--text-muted-rgb);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text-muted);           --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text);           --bs-btn-hover-bg: var(--panel-2);        --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text);          --bs-btn-active-bg: var(--panel-2);       --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--text-faint);  --bs-btn-disabled-border-color: var(--border);
  --bs-btn-focus-shadow-rgb: var(--text-muted-rgb);
}
.btn-light, .btn-outline-dark {
  --bs-btn-color: var(--text);                 --bs-btn-bg: var(--panel);                --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text);           --bs-btn-hover-bg: var(--panel-2);        --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text);          --bs-btn-active-bg: var(--panel-2);       --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-disabled-color: var(--text-faint);  --bs-btn-disabled-bg: var(--panel);       --bs-btn-disabled-border-color: var(--border);
  --bs-btn-focus-shadow-rgb: var(--text-muted-rgb);
}
.btn-outline-dark { --bs-btn-bg: transparent; }
.btn-link { --bs-btn-color: var(--accent-text); --bs-btn-hover-color: var(--accent-text-hover); --bs-btn-active-color: var(--accent-text-hover); --bs-btn-focus-shadow-rgb: var(--accent-fill-rgb); }
.btn-success, .btn-danger, .btn-warning, .btn-info {
  --bs-btn-hover-color: var(--bs-btn-color); --bs-btn-active-color: var(--bs-btn-color); --bs-btn-disabled-color: var(--bs-btn-color);
}
.btn-success { --bs-btn-color: var(--on-ok);   --bs-btn-bg: var(--ok-fill);   --bs-btn-border-color: var(--ok-fill);   --bs-btn-hover-bg: color-mix(in srgb, var(--ok-fill) 86%, #000);   --bs-btn-hover-border-color: color-mix(in srgb, var(--ok-fill) 86%, #000);   --bs-btn-active-bg: color-mix(in srgb, var(--ok-fill) 74%, #000);   --bs-btn-active-border-color: color-mix(in srgb, var(--ok-fill) 74%, #000);   --bs-btn-disabled-bg: var(--ok-fill);   --bs-btn-disabled-border-color: var(--ok-fill);   --bs-btn-focus-shadow-rgb: var(--ok-rgb); }
.btn-danger  { --bs-btn-color: var(--on-bad);  --bs-btn-bg: var(--bad-fill);  --bs-btn-border-color: var(--bad-fill);  --bs-btn-hover-bg: color-mix(in srgb, var(--bad-fill) 86%, #000);  --bs-btn-hover-border-color: color-mix(in srgb, var(--bad-fill) 86%, #000);  --bs-btn-active-bg: color-mix(in srgb, var(--bad-fill) 74%, #000);  --bs-btn-active-border-color: color-mix(in srgb, var(--bad-fill) 74%, #000);  --bs-btn-disabled-bg: var(--bad-fill);  --bs-btn-disabled-border-color: var(--bad-fill);  --bs-btn-focus-shadow-rgb: var(--bad-rgb); }
.btn-warning { --bs-btn-color: var(--on-warn); --bs-btn-bg: var(--warn-fill); --bs-btn-border-color: var(--warn-fill); --bs-btn-hover-bg: color-mix(in srgb, var(--warn-fill) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--warn-fill) 88%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--warn-fill) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--warn-fill) 78%, #000); --bs-btn-disabled-bg: var(--warn-fill); --bs-btn-disabled-border-color: var(--warn-fill); --bs-btn-focus-shadow-rgb: var(--warn-rgb); }
.btn-info    { --bs-btn-color: var(--on-info); --bs-btn-bg: var(--info-fill); --bs-btn-border-color: var(--info-fill); --bs-btn-hover-bg: color-mix(in srgb, var(--info-fill) 86%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--info-fill) 86%, #000); --bs-btn-active-bg: color-mix(in srgb, var(--info-fill) 74%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--info-fill) 74%, #000); --bs-btn-disabled-bg: var(--info-fill); --bs-btn-disabled-border-color: var(--info-fill); --bs-btn-focus-shadow-rgb: var(--info-rgb); }
.btn-outline-success { --bs-btn-color: var(--ok-ink);   --bs-btn-border-color: var(--ok);   --bs-btn-hover-color: var(--on-ok);   --bs-btn-hover-bg: var(--ok-fill);   --bs-btn-hover-border-color: var(--ok-fill);   --bs-btn-active-color: var(--on-ok);   --bs-btn-active-bg: var(--ok-fill);   --bs-btn-active-border-color: var(--ok-fill);   --bs-btn-disabled-color: var(--ok-ink);   --bs-btn-disabled-border-color: var(--ok);   --bs-btn-focus-shadow-rgb: var(--ok-rgb); }
.btn-outline-danger  { --bs-btn-color: var(--bad-ink);  --bs-btn-border-color: var(--bad);  --bs-btn-hover-color: var(--on-bad);  --bs-btn-hover-bg: var(--bad-fill);  --bs-btn-hover-border-color: var(--bad-fill);  --bs-btn-active-color: var(--on-bad);  --bs-btn-active-bg: var(--bad-fill);  --bs-btn-active-border-color: var(--bad-fill);  --bs-btn-disabled-color: var(--bad-ink);  --bs-btn-disabled-border-color: var(--bad);  --bs-btn-focus-shadow-rgb: var(--bad-rgb); }
.btn-outline-warning { --bs-btn-color: var(--warn-ink); --bs-btn-border-color: var(--warn); --bs-btn-hover-color: var(--on-warn); --bs-btn-hover-bg: var(--warn-fill); --bs-btn-hover-border-color: var(--warn-fill); --bs-btn-active-color: var(--on-warn); --bs-btn-active-bg: var(--warn-fill); --bs-btn-active-border-color: var(--warn-fill); --bs-btn-disabled-color: var(--warn-ink); --bs-btn-disabled-border-color: var(--warn); --bs-btn-focus-shadow-rgb: var(--warn-rgb); }
.btn-outline-info    { --bs-btn-color: var(--info-ink); --bs-btn-border-color: var(--info); --bs-btn-hover-color: var(--on-info); --bs-btn-hover-bg: var(--info-fill); --bs-btn-hover-border-color: var(--info-fill); --bs-btn-active-color: var(--on-info); --bs-btn-active-bg: var(--info-fill); --bs-btn-active-border-color: var(--info-fill); --bs-btn-disabled-color: var(--info-ink); --bs-btn-disabled-border-color: var(--info); --bs-btn-focus-shadow-rgb: var(--info-rgb); }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 .25rem var(--accent-ring); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Formulare */
.form-control, .form-select {
  --bs-body-bg: var(--panel);                  /* Bootstrap nimmt für Eingabefelder den Seitengrund; hier die Kartenfläche */
  background-color: var(--panel);
  color: var(--text);
  border-color: var(--border-strong);
  border-radius: var(--radius-md);
}
.form-control:focus, .form-select:focus {
  background-color: var(--panel);
  color: var(--text);
  border-color: var(--accent-fill);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--inset); }
.form-control::placeholder { color: var(--text-faint); opacity: 1; }
.form-control-sm, .form-select-sm { border-radius: var(--radius-sm); }
.input-group-text { background-color: var(--inset); color: var(--text-muted); border-color: var(--border-strong); }
.form-check-input { background-color: var(--panel); border-color: var(--border-strong); }
.form-check-input:focus { border-color: var(--accent-fill); box-shadow: 0 0 0 4px var(--accent-ring); }
.form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--accent-fill); border-color: var(--accent-fill); }
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); }
.form-range::-webkit-slider-thumb { background-color: var(--accent-fill); }
.form-range::-moz-range-thumb { background-color: var(--accent-fill); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--bg), 0 0 0 .25rem var(--accent-ring); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px var(--bg), 0 0 0 .25rem var(--accent-ring); }
/* Schalter im Dunkeln: Bootstrap zeichnet den Knopf ungefokussiert hell; fokussiert (nicht angekreuzt) soll er nicht blau werden */
[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e"); }

/* Karten, Listen, Tabellen */
.card {
  --bs-card-bg: var(--panel);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-cap-bg: color-mix(in srgb, var(--panel-2) 45%, var(--panel));
  --bs-card-color: var(--text);
}
.list-group {
  --bs-list-group-bg: var(--panel);
  --bs-list-group-color: var(--text);
  --bs-list-group-border-color: var(--border);
  --bs-list-group-action-color: var(--text);
  --bs-list-group-action-hover-bg: var(--accent-soft);
  --bs-list-group-action-hover-color: var(--text);
  --bs-list-group-action-active-bg: var(--accent-soft-2);
  --bs-list-group-action-active-color: var(--text);
  --bs-list-group-active-bg: var(--accent-fill);
  --bs-list-group-active-border-color: var(--accent-fill);
  --bs-list-group-active-color: var(--on-accent);
  --bs-list-group-disabled-bg: var(--inset);
  --bs-list-group-disabled-color: var(--text-faint);
}
.table {
  --bs-table-bg: transparent;               /* Bootstrap nimmt sonst den Seitengrund: Tabellen in Karten wären lavendelfarben */
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: color-mix(in srgb, var(--text) 3%, transparent);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--accent-soft);
  --bs-table-hover-color: var(--text);
  --bs-table-active-bg: var(--accent-soft-2);
  --bs-table-active-color: var(--text);
}

.table-light { --bs-table-bg: var(--inset); --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--inset); --bs-table-hover-bg: var(--accent-soft); }

/* Navigation, Auswahl, Fortschritt */
.nav { --bs-nav-link-color: var(--text-muted); --bs-nav-link-hover-color: var(--accent-text); --bs-nav-link-disabled-color: var(--text-faint); }
.nav-pills { --bs-nav-pills-link-active-color: var(--on-accent); --bs-nav-pills-link-active-bg: var(--accent-fill); --bs-nav-pills-border-radius: var(--radius-md); }
.nav-tabs { --bs-nav-tabs-border-color: var(--border); --bs-nav-tabs-link-hover-border-color: var(--border) var(--border) var(--border-strong); --bs-nav-tabs-link-active-color: var(--text); --bs-nav-tabs-link-active-bg: var(--panel); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--panel); }
.pagination {
  --bs-pagination-color: var(--accent-text); --bs-pagination-bg: var(--panel); --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--accent-text-hover); --bs-pagination-hover-bg: var(--accent-soft); --bs-pagination-hover-border-color: var(--border);
  --bs-pagination-focus-color: var(--accent-text-hover); --bs-pagination-focus-bg: var(--accent-soft); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--accent-ring);
  --bs-pagination-active-color: var(--on-accent); --bs-pagination-active-bg: var(--accent-fill); --bs-pagination-active-border-color: var(--accent-fill);
  --bs-pagination-disabled-color: var(--text-faint); --bs-pagination-disabled-bg: var(--inset); --bs-pagination-disabled-border-color: var(--border);
}
.progress { --bs-progress-bg: var(--panel-2); --bs-progress-bar-bg: var(--accent-fill); --bs-progress-bar-color: var(--on-accent); }
.accordion {
  --bs-accordion-bg: var(--panel); --bs-accordion-color: var(--text); --bs-accordion-border-color: var(--border);
  --bs-accordion-btn-color: var(--text); --bs-accordion-btn-bg: var(--panel);
  --bs-accordion-active-color: var(--accent-text); --bs-accordion-active-bg: var(--accent-soft);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--accent-ring);
}

/* Aufklappbares: Dropdown, Dialog, Popover, Toast, Offcanvas */
.dropdown-menu {
  --bs-dropdown-bg: var(--panel-elevated);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-inner-border-radius: calc(var(--radius-md) - 1px);
  --bs-dropdown-divider-bg: var(--border);
  --bs-dropdown-box-shadow: var(--shadow-lg);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--accent-soft);
  --bs-dropdown-link-active-color: var(--on-accent);
  --bs-dropdown-link-active-bg: var(--accent-fill);
  --bs-dropdown-link-disabled-color: var(--text-faint);
  --bs-dropdown-header-color: var(--text-muted);
}
.modal {
  --bs-modal-bg: var(--panel-elevated);
  --bs-modal-color: var(--text);
  --bs-modal-border-color: var(--border);
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-modal-header-border-color: var(--border);
  --bs-modal-footer-border-color: var(--border);
  --bs-modal-box-shadow: var(--shadow-lg);
}
.offcanvas { --bs-offcanvas-bg: var(--panel-elevated); --bs-offcanvas-color: var(--text); --bs-offcanvas-border-color: var(--border); --bs-offcanvas-box-shadow: var(--shadow-lg); }
.popover { --bs-popover-bg: var(--panel-elevated); --bs-popover-border-color: var(--border); --bs-popover-border-radius: var(--radius-md); --bs-popover-header-bg: var(--inset); --bs-popover-header-color: var(--text); --bs-popover-body-color: var(--text); }
.toast { --bs-toast-bg: var(--panel-elevated); --bs-toast-color: var(--text); --bs-toast-border-color: var(--border); --bs-toast-border-radius: var(--radius-md); --bs-toast-header-bg: var(--inset); --bs-toast-header-color: var(--text-muted); --bs-toast-header-border-color: var(--border); }

/* Textfarben-Helfer, die Bootstrap an die Füllung (--bs-primary) hängt, gehören im Dunkeln auf die Textvariante */
.text-primary { --bs-text-opacity: 1; color: var(--accent-text) !important; }
.link-primary { color: var(--accent-text) !important; }
.border-primary { border-color: var(--accent-fill) !important; }
.badge.bg-primary, .badge.text-bg-primary { color: var(--on-accent) !important; }
/* .bg-secondary ist bei Bootstrap dieselbe Variable wie .text-secondary (--bs-secondary-rgb). Als Text soll sie im Dunkeln hell sein,
   als Füllung mit weißer Schrift dunkel; deshalb hat die Füllung ein eigenes Token. */
.bg-secondary, .text-bg-secondary { background-color: rgba(var(--neutral-fill-rgb), var(--bs-bg-opacity, 1)) !important; }
/* Statusfarben als TEXT: die Füllfarben (--bs-success-rgb …) sind für weiße Schrift gedacht und auf dunklem Grund zu dunkel */
.text-success { --bs-text-opacity: 1; color: var(--ok-ink) !important; }
.text-danger  { --bs-text-opacity: 1; color: var(--bad-ink) !important; }
.text-warning { --bs-text-opacity: 1; color: var(--warn-ink) !important; }
.text-info    { --bs-text-opacity: 1; color: var(--info-ink) !important; }

/* ───────────────────────── 8 · Basis ───────────────────────── */
html { background-color: var(--bg); -webkit-text-size-adjust: 100%; }
a { text-underline-offset: .18em; }
::selection { background: var(--accent-soft-2); color: var(--text); }
:focus-visible { outline-color: var(--accent-text); }

/* Trefferfläche ≥ 44 px, wo ein Finger zielt (grobe Zeiger); Desktop bleibt dicht */
@media (pointer: coarse) {
  .btn:not(.btn-sm):not(.btn-link):not(.btn-close),
  .form-control:not(.form-control-sm):not(textarea):not([type="color"]):not([type="range"]),
  .form-select:not(.form-select-sm) { min-height: var(--wc-tap); }
}

/* Kleine Helfer für die Marken-Schriften (Überschriften in Anybody gibt es erst mit D1: ui_page_header()) */
.wc-display { font-family: var(--font-display); font-weight: 800; font-stretch: 118%; letter-spacing: -.01em; line-height: 1.1; }
.wc-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.wc-eyebrow { font: 500 .74rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.wc-glow    { background: var(--wc-glow); }

/* ───────────────────────── 9 · Piktogramme ─────────────────────────
   Stehen in public/assets/css/icons.css (eigene Datei, damit auch Seiten ohne app-ui.css sie laden können). layout/header.php
   bindet sie nach dieser Datei ein; die Tokens dafür (--accent-soft, --accent-text, --glint, --ok …) kommen von hier. */