/*
 * Blur-Halo (seit dem UI/UX-Designsystem 2026-10-08 ein SCHALTER, <html data-halo="on">, mit jedem Stil kombinierbar;
 * Vorlage „Würfel Blur“ = Würfel + Pure Minimal + Halo). Ursprünglich: Vorlage „Würfel Blur“ (Mirko 2026-10-08): gleiche Navigation und Grundoptik wie „Würfel“ (design_cube.css, gilt über
 * data-layout="cube"), dazu die Unschärfe-Werte aus Mirkos DUAL BLUR / TYPE LAB (dual-blur-design.css).
 * Zuordnung der Demo-Klassen zu den echten Elementen:
 *   .pv-h1     Seiten-/Bereichstitel (h1, .cube-title, .ws-home__title), Hauptkategorien im Würfel (.cube-head)
 *   .pv-h2     Zwischenüberschriften (h2, h3, .card__title)
 *   .pv-menu   Würfel-Einträge, Seitenmenüs (Orga/Partlog/Fuhrpark/Ladepark/Rundgang/Verwaltung), Kopfzeile, Personen-/UI-UX-Menü
 *   .pv-body   Fließtext (alles übrige, über body vererbt)
 *   .pv-small  Kleingedrucktes (small, .muted, Hinweise, Gruppenköpfe)
 *   .pv-line   Trennlinien (Kopfzeile unten, Menü-Trenner, hr)
 *   .pv-panel  Fenster/Karten (Tokens --nm-2/--nm-3)
 *   .pv-input  Eingabefelder (Token --nm-in)
 *   .pv-button Knöpfe und Chips (Token --nm-1)
 * Schriften: Quicksand (Überschriften) und Albert Sans (Text/Menü) werden genutzt, wenn sie auf dem Gerät installiert sind;
 * ein Laden von Google Fonts ist in /app nicht erlaubt (LIMITS.md) - sonst gilt die Programmschrift --font-ui.
 */
:root[data-halo="on"] {
  --blur-ink: #34383c;
  --blur-rgb: 38, 40, 44;
  --c-ink: var(--blur-ink);
  --blur-font-head: 'Quicksand', var(--font-ui);
  --blur-font-text: 'Albert Sans', var(--font-ui);
  --blur-h1: 0 0 24px rgba(var(--blur-rgb), .40), 0 0 4px rgba(var(--blur-rgb), .70);
  --blur-h2: 0 0 24px rgba(var(--blur-rgb), .40), 0 0 3.9px rgba(var(--blur-rgb), .70);
  --blur-menu: 0 0 24px rgba(var(--blur-rgb), .20), 0 0 4px rgba(var(--blur-rgb), .30);
  --blur-body: 0 0 24px rgba(var(--blur-rgb), .20), 0 0 4px rgba(var(--blur-rgb), .40);
  --blur-small: 0 0 24px rgba(var(--blur-rgb), .30), 0 0 4px rgba(var(--blur-rgb), .50);
  --blur-line: 0 0 24px 0 rgba(var(--blur-rgb), .40), 0 0 4px -0.4px rgba(var(--blur-rgb), .70);
  --blur-panel: 0 0 20px -5px rgba(var(--blur-rgb), .20), 0 0 2px -5px rgba(var(--blur-rgb), .30);
  --blur-input: 0 0 20px -5px rgba(var(--blur-rgb), .20), 0 0 2px -5px rgba(var(--blur-rgb), .30);
  --blur-button: 0 0 24px 3px rgba(var(--blur-rgb), .40), 0 0 4px 0 rgba(var(--blur-rgb), .70);
  /* Flächen ohne harte Kanten: Karten, Felder und Knöpfe tragen nur noch den weichen Schein */
  --nm-1: var(--blur-button);
  --nm-2: var(--blur-panel);
  --nm-3: var(--blur-panel), 0 12px 32px rgba(var(--blur-rgb), .12);
  --nm-in: var(--blur-input);
  --nm-in-deep: var(--blur-input);
}
:root[data-halo="on"][data-theme="dark"] { --blur-ink: #d8dadd; --c-ink: #d8dadd; }

/* ---------- Schrift ---------- */
:root[data-halo="on"] body { font-family: var(--blur-font-text); text-shadow: var(--blur-body); }
:root[data-halo="on"] h1, :root[data-halo="on"] .cube-title, :root[data-halo="on"] .ws-home__title,
:root[data-halo="on"] .og-top__title, :root[data-halo="on"] .pl-head h1 {
  font-family: var(--blur-font-head); font-weight: 300; color: var(--blur-ink); text-shadow: var(--blur-h1);
}
:root[data-halo="on"] .cube-overview .cube-title { font-size: 43px; letter-spacing: 0; text-transform: none; }
:root[data-halo="on"] h2, :root[data-halo="on"] h3, :root[data-halo="on"] .card__title {
  font-family: var(--blur-font-head); font-weight: 300; color: var(--blur-ink); text-shadow: var(--blur-h2);
}
:root[data-halo="on"] .cube-head { font-family: var(--blur-font-head); text-shadow: var(--blur-h1); }
:root[data-halo="on"] .cube-item,
:root[data-halo="on"] .og-nav__item, :root[data-halo="on"] .pl-nav__item, :root[data-halo="on"] .admin-side__link,
:root[data-halo="on"] .app-header__nav, :root[data-halo="on"] .app-header__brand,
:root[data-halo="on"] .person-menu__item, :root[data-halo="on"] .ux-opt strong, :root[data-halo="on"] .ws-card__name {
  font-family: var(--blur-font-text); text-shadow: var(--blur-menu);
}
:root[data-halo="on"] .og-nav__item, :root[data-halo="on"] .pl-nav__item, :root[data-halo="on"] .admin-side__link { font-weight: 600; }
:root[data-halo="on"] small, :root[data-halo="on"] .muted, :root[data-halo="on"] .cube-hint,
:root[data-halo="on"] .cube-crumb, :root[data-halo="on"] .navacc__head, :root[data-halo="on"] .ws-home__sub,
:root[data-halo="on"] .ux-opt small, :root[data-halo="on"] .pl-nav__note, :root[data-halo="on"] .og-nav__note {
  text-shadow: var(--blur-small);
}
/* Weiße Schrift auf Rot (aktiver Eintrag, Hauptknopf) bekäme sonst einen grauen Hof - dort ohne Schein. */
:root[data-halo="on"] .btn--primary, :root[data-halo="on"] .chip--on, :root[data-halo="on"] .chip[aria-pressed="true"],
:root[data-halo="on"] .is-active, :root[data-halo="on"] .is-active *, :root[data-halo="on"] .btn--primary *,
:root[data-halo="on"] .pl-badge, :root[data-halo="on"] .og-badge { text-shadow: none; }
:root[data-halo="on"] .cube-flat .cube-item.is-active { text-shadow: var(--blur-menu); }

/* ---------- Linien ---------- */
:root[data-halo="on"] .app-header { box-shadow: none; position: relative; }
:root[data-halo="on"] .app-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(var(--blur-rgb), .18); box-shadow: var(--blur-line); pointer-events: none; }
:root[data-halo="on"] .person-menu__sep, :root[data-halo="on"] hr { height: 1px; border: 0; background: rgba(var(--blur-rgb), .18); box-shadow: var(--blur-line); }
:root[data-halo="on"] .navacc__group + .navacc__group { border-top-color: transparent !important; position: relative; }
:root[data-halo="on"] .navacc__group + .navacc__group::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: rgba(var(--blur-rgb), .14); box-shadow: var(--blur-line); }
:root[data-halo="on"] .og-nav__me, :root[data-halo="on"] .pl-nav__me { border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(var(--blur-rgb), .14), 0 10px 14px -12px rgba(var(--blur-rgb), .55); }
:root[data-halo="on"] .cube-back { border-color: transparent; box-shadow: var(--blur-button); }
/* Karten bekommen nur den weichen Schein (Panel), Knöpfe den kräftigeren (Button) - beides über die Tokens oben. */
:root[data-halo="on"] .ws-card, :root[data-halo="on"] .card, :root[data-halo="on"] .pl-card { box-shadow: var(--blur-panel); }
:root[data-halo="on"] input, :root[data-halo="on"] select, :root[data-halo="on"] textarea { box-shadow: var(--blur-input); }