/* theme-kirsch-hauch-blau.css — NEUER Baustein (UNIVERSAL §21 Regel 2/4), NICHT in die App eingebunden.
   Kirsch-Hauch (theme-kirsch-hauch.css) plus das Blau des Originals als DEZENTER Zweitton.
   Alle Kirsch-Töne werden Variationen des Blaus (Knöpfe, Auswahl, Linien, Flächen). Blau (Original: --color-500 #2a5fa8, --color-100 #e5eaf5,
   --color-50 #f3f5fb aus premium-design-tokens.css) erscheint nur als Haarlinie, Symbol-/Eyebrow-Farbe,
   zweiter Knopf und ein kühler Hauch hinter dem Foto — passend zum Pullover der Frau im Hero-Foto.
   Wirkt NUR mit <html data-design="kirsch-hauch" data-blau>. Lädt NACH theme-kirsch-hauch.css.
   Kontrast (gerechnet, WCAG): --kb-blue auf Weiß 6,6:1 · --kb-blue auf --kb-mist 6,1:1.
   Gesehen im Mockup: mockups/mockup-kirsch-hauch-blau-startseite.html */

:root[data-design="kirsch-hauch"][data-blau] {
    /* Die Kirsch-Töne des Hauchs werden Blau-Stufen aus der Token-Quelle (Original-Blau) */
    --kh-cherry:      var(--color-500, #2a5fa8);
    --kh-cherry-ink:  var(--color-600, #1a3e73);
    /* Blautöne der Anmelde-Seite (login.html, gemessen): Grund #ecf5ff, Fläche #d7e5fe, Schrift #060f1c */
    --kh-paper:       #ecf5ff;
    --kh-blush:       #d7e5fe;
    --kh-blush-2:     #c4d8f3;
    --kh-line:        #c4d8f3;
    --kh-line-strong: #a9c3e8;
    --kh-ink:         #060f1c;
    --bg-surface:     #d7e5fe;
    --text-secondary:       #3f4d68;
    --text-muted:           #55627c;
    --color-text-secondary: #3f4d68;
    --focus-ring:           rgba(42, 95, 168, 0.25);
    /* „Nur für Schüler“ (Zellen, Panels, Avatare): wieder die Farben von Kirsch-Dezent = Token-Quelle (User 2026-10-14) */
    --cal-personal-bg:          #e1bee7;
    --cal-personal-text:        #4a148c;
    --cal-personal-cell-border: #ce93d8;
    --kh-filter-open: #d7e5fe;
    --kb-blue:      var(--color-500, #2a5fa8);
    --kb-blue-soft: var(--color-400, #5b87cc);
    --kb-mist:      #ecf5ff;
    --kb-line:      #c4d8f3;
}

/* Blau nur als Schrift / Symbol */
:root[data-design="kirsch-hauch"][data-blau] .hero-eyebrow,
:root[data-design="kirsch-hauch"][data-blau] .section-eyebrow,
:root[data-design="kirsch-hauch"][data-blau] .service-card-icon,
:root[data-design="kirsch-hauch"][data-blau] .feature-icon { color: var(--kb-blue); }
:root[data-design="kirsch-hauch"][data-blau] .service-card-cta,
:root[data-design="kirsch-hauch"][data-blau] a:not([class]) { color: var(--kb-blue); }

/* zweiter Knopf: blaue Haarlinie, Kirsch bleibt dem ersten Knopf */
:root[data-design="kirsch-hauch"][data-blau] .btn-secondary {
    background: #ffffff;
    color: var(--kb-blue);
    border: 1px solid var(--kb-line);
}
:root[data-design="kirsch-hauch"][data-blau] .btn-secondary:hover { background: var(--kb-mist); border-color: var(--kb-blue-soft); }

/* Karten: Kirsch-Hauch-Fläche, aber die Haarlinie wird bei Berührung blau */
:root[data-design="kirsch-hauch"][data-blau] .service-card:hover { border-color: var(--kb-blue-soft); }

/* Foto: kühler Hauch dahinter, damit das Blau des Pullovers im Seitengrund anklingt */
:root[data-design="kirsch-hauch"][data-blau] .hero-visual {
    background: radial-gradient(ellipse at 55% 60%, var(--kb-mist) 0, transparent 68%);
}
:root[data-design="kirsch-hauch"][data-blau] .hero-photo img { object-position: center 18%; }

/* Fokus: blauer Ring (Original), Kirsch nur in der Auswahl */
:root[data-design="kirsch-hauch"][data-blau] :focus-visible { outline-color: var(--kb-blue-soft); }

/* Service-Karten: wie die Fläche der Anmelde-Seite (#d7e5fe) statt Vollblau; Schrift dunkel, Symbol blau */
:root[data-design="kirsch-hauch"][data-blau] .service-card--accent {
    background: var(--kh-blush);
    border: 1px solid var(--kh-line);
    color: var(--kh-ink);
}
:root[data-design="kirsch-hauch"][data-blau] .service-card--accent .service-card-title,
:root[data-design="kirsch-hauch"][data-blau] .service-card--accent .service-card-list li { color: var(--kh-ink); }
:root[data-design="kirsch-hauch"][data-blau] .service-card--accent .service-card-icon,
:root[data-design="kirsch-hauch"][data-blau] .service-card--accent .service-card-cta { color: var(--kb-blue); }
:root[data-design="kirsch-hauch"][data-blau] .service-card--accent:hover { background: var(--kh-blush-2); }

/* Foto: rechts weniger Ausblendung — der marineblaue Pullover soll als Blau stehen bleiben, nicht verblassen */
:root[data-design="kirsch-hauch"][data-blau] .hero-photo--soft {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 94%, transparent 100%),
                        linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 94%, transparent 100%),
                linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%);
}

/* Nicht verfügbare Zellen: Schraffur etwas kräftiger (User 2026-10-14), Fläche bleibt hell */
:root[data-design="kirsch-hauch"][data-blau] #calendar-table tbody td.unavailable {
    background-color: #f6f7fa !important;
    background-image: repeating-linear-gradient(135deg, transparent 0 7px, #b9bfca 7px 9px) !important;
    border-color: #d5d9e1 !important;
}

/* Auszeit-Knopf: gelb wie die Auszeit-Zellen (Farben der Zellen: combined-all.css td.timeout) */
:root[data-design="kirsch-hauch"][data-blau] #sidebar.wk-sidebar #btn-blocked,
:root[data-design="kirsch-hauch"][data-blau] #sidebar.wk-sidebar #btn-blocked.button-standard-black {
    background: var(--pending-amber-bg, #fef3cd) !important;
    color: var(--pending-amber-tx, #7a5c00) !important;
    border: 1px solid var(--pending-amber, #f5a623) !important;
}
:root[data-design="kirsch-hauch"][data-blau] #sidebar.wk-sidebar #btn-blocked:hover,
:root[data-design="kirsch-hauch"][data-blau] #sidebar.wk-sidebar #btn-blocked.active {
    background: var(--pending-amber-hover-bg, #fde68a) !important;
}

/* „Buchungen verwalten“: „Nur für Schüler“ (Flieder) und „Nur für neue Schüler“ (Koralle) heben sich von den
   freien Zellen (Blau) ab (User 2026-10-14). Das Hauch-Blau färbt td.available sonst gleichmäßig — mit dieser
   höheren Spezifität gewinnen die Kennfarben aus css/avail-marks.css wieder. Stärkerer Farbanteil als dort. */
:root[data-design="kirsch-hauch"][data-blau] #calendar-table tbody td.available:is(.avail-personal, .avail-new) {
    background: color-mix(in srgb, var(--avail-mark) 38%, #ffffff) !important;
    border-color: var(--avail-mark) !important;
    color: var(--kh-ink);
}
:root[data-design="kirsch-hauch"][data-blau] #calendar-table tbody td.available:is(.avail-personal, .avail-new):hover {
    background: color-mix(in srgb, var(--avail-mark) 55%, #ffffff) !important;
}

/* ══ Kalender im Aufbau von „S/W dick, Raster rund“ (User 2026-10-14: „bis auf die Farben“) ══
   Geometrie aus css/theme-sw-dick.css übernommen: dicke Ränder an Knöpfen und Listenzeilen der Seitenleiste (2 px),
   runde Ecken (10/14 px), Linie zur Seitenleiste dünn, Raster 1 px mit runder Außenkante und Abstand. Die Farben sind
   die des Hauch-Blaus: Rand und Schrift in Dunkelblau (--kh-cherry-ink = --color-600), Flächen hell, Hauptwahl gefüllt.
   Gilt nur auf den Kalenderseiten (data-kal). */
:root[data-design="kirsch-hauch"][data-blau][data-kal] {
    --rand-dick: 2px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --kb-edge: var(--kh-cherry-ink);   /* „Schwarz“ des S/W-Entwurfs → Dunkelblau */
}

/* Knöpfe: weiß, dicker Rand, runde Ecken; Überfahren und Auswahl gefüllt */
:root[data-design="kirsch-hauch"][data-blau][data-kal] .cal-nav-btn,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .cal-view-mode-bar button,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .btn,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .button-standard-black,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .mode-segmented-btn {
    background: #ffffff !important;
    color: var(--kb-edge) !important;
    border: var(--rand-dick) solid var(--kb-edge) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    font-weight: 700;
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] .cal-nav-btn:hover,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .btn:hover,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .button-standard-black:hover {
    background: var(--kb-edge) !important;
    color: #ffffff !important;
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .button-standard-black.active,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .mode-segmented-btn[aria-checked="true"],
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .cal-view-mode-bar button[aria-pressed="true"] {
    background: var(--kb-edge) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
/* Modus-Schalter: Rahmen der ganzen Gruppe passend */
:root[data-design="kirsch-hauch"][data-blau][data-kal] .mode-segmented {
    background: #ffffff !important;
    border: var(--rand-dick) solid var(--kb-edge) !important;
    border-radius: var(--radius-md) !important;
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .mode-segmented-btn { border: 0 !important; border-radius: calc(var(--radius-md) - 2px) !important; }

/* Auszeit-Knopf bleibt gelb (User 2026-10-14), nimmt aber Rand und Rundung des Entwurfs */
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar.wk-sidebar #btn-blocked,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar.wk-sidebar #btn-blocked.button-standard-black {
    border-width: var(--rand-dick) !important;
    border-radius: var(--radius-md) !important;
}

/* Sprung-Schalter (Tag | Woche | Monat): Gruppe wie der Modus-Schalter */
:root[data-design="kirsch-hauch"][data-blau][data-kal] .cal-step__group {
    background: #ffffff;
    border: var(--rand-dick) solid var(--kb-edge);
    border-radius: var(--radius-md);
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .cal-week-nav .cal-step__btn.is-active {
    background: var(--kb-edge) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Schülerliste in der Seitenleiste: Zeilen mit 2-px-Rand */
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .student-item,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .student-list-item,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .sidebar-person-item {
    background: #ffffff !important;
    border: 2px solid var(--kb-edge) !important;
    border-radius: var(--radius-md) !important;
}

/* Seitenleiste: Linie zum Raster dünn; Raster: dünne Linien, außen runder Rahmen mit Abstand ("Raster rund") */
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar.wk-sidebar { border-right: 1px solid var(--kb-edge) !important; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table { border-collapse: collapse !important; border-spacing: 0 !important; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table thead th {
    border-bottom: 1px solid var(--kb-edge) !important;
    border-left: 1px solid var(--kb-edge) !important;
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td { border-width: 1px !important; outline: 0 !important; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] .grid-scroll {
    border: 1px solid var(--kb-edge) !important;
    border-radius: var(--radius-lg) !important;
    margin: var(--space-2) var(--space-2) var(--space-2) var(--space-2);
}

/* „Nur für Schüler“-Blöcke verschmelzen (wie im S/W-Entwurf): Innenlinien in der Blockfarbe */
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td.pc-view {
    border-top-color: var(--cal-personal-bg) !important;
    border-bottom-color: var(--cal-personal-bg) !important;
    border-left-color: var(--cal-personal-cell-border) !important;
    border-right-color: var(--cal-personal-cell-border) !important;
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td.pc-view.pc-view--first { border-top-color: var(--cal-personal-cell-border) !important; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td.pc-view.pc-view--last { border-bottom-color: var(--cal-personal-cell-border) !important; }

/* ══ Weiße Navbar, graue Trennstriche (User 2026-10-14) ══
   „Magnetic Grey“ für alle dünnen Trennlinien (Navbar-Unterkante, Linie zur Seitenleiste, Kopfzeile, Rahmen und
   Zellen des Rasters). Die dicken Ränder der Knöpfe behalten ihr Dunkelblau. Ein Wert, eine Stelle: --kb-sep. */
:root[data-design="kirsch-hauch"][data-blau] {
    --kb-sep:      #000000;                                       /* Magnetic Black (User 2026-10-14: alle Trenner schwarz und dicker) */
    --kb-thick:     2px;                                           /* Stärke der Trenner (Navbar, Seitenleisten, Filter) */
    --kb-sep-soft: color-mix(in srgb, var(--kb-sep) 32%, #ffffff);  /* Zellen: ein Hauch davon */
}
:root[data-design="kirsch-hauch"][data-blau][data-navbar="offen"] .nav,
:root[data-design="kirsch-hauch"][data-blau][data-navbar="offen"] .unified-navbar,
:root[data-design="kirsch-hauch"][data-blau][data-navbar="offen"] .lang-nav {
    background: #ffffff;
    border-bottom: var(--kb-thick) solid var(--kb-sep);
}
/* Navbar in der Seitenfarbe (User 2026-10-15, Mockup mockups/mockup-startseite-navbar.html) — NEUER Baustein,
   wirkt nur mit <html data-navbar-bg="seite"> (ohne Linie) oder "seite-linie" (mit Trennlinie); bis zur Freigabe in
   keiner Seite gesetzt (UNIVERSAL §21). Schrift dunkel statt grau: --text-secondary hätte auf Petrol zu wenig Kontrast. */
:root[data-design="kirsch-hauch"][data-blau][data-navbar-bg^="seite"] .nav,
:root[data-design="kirsch-hauch"][data-blau][data-navbar-bg^="seite"] .unified-navbar,
:root[data-design="kirsch-hauch"][data-blau][data-navbar-bg^="seite"] .lang-nav {
    background: var(--kb-petrol);
    border-bottom: 0;
}
:root[data-design="kirsch-hauch"][data-blau][data-navbar-bg="seite-linie"] .nav,
:root[data-design="kirsch-hauch"][data-blau][data-navbar-bg="seite-linie"] .unified-navbar,
:root[data-design="kirsch-hauch"][data-blau][data-navbar-bg="seite-linie"] .lang-nav {
    border-bottom: var(--kb-thick) solid var(--kb-sep);
}
:root[data-design="kirsch-hauch"][data-blau][data-navbar-bg^="seite"] .unified-nav-link,
:root[data-design="kirsch-hauch"][data-blau][data-navbar-bg^="seite"] .nav-link,
:root[data-design="kirsch-hauch"][data-blau][data-navbar-bg^="seite"] .lang-nav .lang-nav-link { color: var(--text-primary); }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar.wk-sidebar { border-right-color: var(--kb-sep) !important; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table thead th {
    border-bottom-color: var(--kb-sep) !important;
    border-left-color: var(--kb-sep) !important;
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] .grid-scroll { border-color: var(--kb-sep) !important; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td:not(.pc-view),
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table td.calendar-time-cell {
    border-color: var(--kb-sep-soft) !important;
}

/* ══ Farben von „S/W dick, Raster rund“ in den Kalender übernommen (User 2026-10-14: „Dieses übernehmen“) ══
   Im Mockup design-blau gefiel der Modus „S/W dick, Raster rund“ in den Farben besser als die Produktivfassung.
   Übernommen für die Kalenderseiten: schwarze Ränder, Schrift und Füllungen (Auswahl, Überfahren), weißer Grund,
   weiße freie Zellen. Bleibt wie zuvor: graue Trennstriche und Streifen, gelbe Auszeit, Flieder „Nur für Schüler“,
   weiße Navbar. Alles hängt an --kb-edge (Rand/Füllung) — eine Stelle. */
:root[data-design="kirsch-hauch"][data-blau][data-kal] {
    --kb-edge: #000000;
    --kh-ink: #000000;
    --focus-ring: rgba(0, 0, 0, 0.25);
    --kb-sep: #000000;            /* Kalender: alle Trennlinien schwarz wie im Mockup (User 2026-10-14) */
    --border-default: #000000;    /* u. a. Linien zwischen den Seitenleisten-Blöcken */
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] .grid-scroll,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar.wk-sidebar { background: #ffffff !important; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td.available,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td.readonly-available { background: #ffffff !important; color: #000000; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td.available:hover { background: #f2f2f2 !important; }

/* Navbar-Knöpfe auf den Kalenderseiten wie im S/W-Entwurf: weiß, dicker schwarzer Rand, rund */
:root[data-design="kirsch-hauch"][data-blau][data-kal] #scroll-to-time.lang-nav-time-select,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #wallet-button.wallet-button {
    background: #ffffff !important;
    color: #000000 !important;
    border: var(--rand-dick) solid var(--kb-edge) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    font-weight: 700;
}
/* „heute“ im Kalenderkopf: schwarz, halbfett */
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table th.is-today .grid-day-num,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table th.is-today .grid-day-name { color: #000000 !important; font-weight: 800; }
/* Kalender-Navigation « < > » in der Seitenleiste: dashboard-leicht.css färbt sie mit #sidebar-Gewicht — hier gleichziehen */
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .cal-nav-btn,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #btn-toggle-visibility {
    background: #ffffff !important;
    color: var(--kb-edge) !important;
    border: var(--rand-dick) solid var(--kb-edge) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .cal-nav-btn:hover {
    background: var(--kb-edge) !important;
    color: #ffffff !important;
}

/* ══ Trenner und Filterleiste (User 2026-10-14) ══
   Alle Trenner schwarz (--kb-sep) und 2 px (--kb-thick): Navbar-Unterkante, Linie der Filterleisten, Linien im Filter.
   Dashboard/Stundenübersicht: Die Leiste reicht über die ganze Höhe der Liste (Spalte streckt sich, die Linie läuft
   durch). Der Inhalt darin klebt (sticky) unter der Navbar und wandert beim Scrollen mit; er ist höchstens so hoch wie
   der sichtbare Rest des Fensters (--filter-sidebar-h, gemessen von js/filter-sidebar-fit.js) und scrollt erst dann
   in sich, wenn der Filter länger ist als das Fenster. So wird nie unten etwas abgeschnitten. */
@media (min-width: 769px) {
    :root[data-design="kirsch-hauch"][data-blau] #filter-sidebar {
        position: static;
        height: auto;
        align-self: stretch;
        overflow: visible;
    }
    :root[data-design="kirsch-hauch"][data-blau] #filter-sidebar-content {
        position: sticky;
        top: var(--nav-height, 70px);
        height: auto;
        max-height: var(--filter-sidebar-h, calc(100vh - var(--nav-height, 70px)));
    }
}
:root[data-design="kirsch-hauch"][data-blau] #filter-sidebar,
:root[data-design="kirsch-hauch"][data-blau] .catalog-filter-sidebar {
    border-right: var(--kb-thick) solid var(--kb-sep);
}
:root[data-design="kirsch-hauch"][data-blau] .filter-header {
    border-bottom: var(--kb-thick) solid var(--kb-sep);
}
:root[data-design="kirsch-hauch"][data-blau] .filter-section-header,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard="leicht"] .filter-section-header {
    border-bottom: var(--kb-thick) solid var(--kb-sep);
}
:root[data-design="kirsch-hauch"][data-blau] .filter-section { border-bottom-color: var(--kb-sep); }
:root[data-design="kirsch-hauch"][data-blau] .messages-header,
:root[data-design="kirsch-hauch"][data-blau] .chat-list {
    border-bottom: var(--kb-thick) solid var(--kb-sep);
}

/* ══ Dashboard: bessere Sichtbarkeit mit dem dunklen Blau des Originals (User 2026-10-14) ══
   1 Schrift und Symbole in --color-600 (#1a3e73, ca. 9:1 auf Hellblau), 2 Filterköpfe mit kräftigerer Fläche und
   Balken links in --color-500 (offener Abschnitt: dunkler), dazu Ränder der Kacheln und Stundenkarten in Dunkelblau. */
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] { --kb-navy: var(--color-600, #1a3e73); --kb-navy-2: var(--color-500, #2a5fa8); }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .dashboard-stat-label,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .dashboard-stat-value,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .dashboard-stat-change,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .lessons-header h2,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .lesson-user-name,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .lesson-topic,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-header h3,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section-header { color: var(--kb-navy); }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section-header .filter-section-icon,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-chevron { color: var(--kb-navy); }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section-header {
    background: #c4d8f3;
    border-left: 5px solid var(--kb-navy-2);
    font-weight: 600;
}
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section-header:hover { background: #b3cdee; border-color: var(--kb-navy); border-bottom-color: var(--kb-sep); }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section.open .filter-section-header { background: #aac6ec; border-left-color: var(--kb-navy); }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .dashboard-stat,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .dashboard-card,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .lesson-item { border: 2px solid var(--kb-navy); }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .lesson-item:hover { border-color: var(--kb-navy-2); }

/* Dashboard: ganzer Hintergrund im Original-Blau #d7e5fe (User 2026-10-14); Kacheln, Karten und geschlossene Filterköpfe
   weiß, damit sie sich mit dem dunkelblauen Rand klar abheben. */
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] body,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] body.page-app,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] body.dashboard-page,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] #main-content,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .lessons-layout { background: #469ea0; }   /* wie die Profilseite (User 2026-10-14: „Ich mag den Hintergrund, wie er in Profile ist“) */
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .overview-stats-bar { background: #469ea0; }
/* Auf dem Petrol liegen Filter und Liste als helle Flächen (wie die Abschnitte im Profil), damit die Schrift lesbar bleibt */
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] #filter-sidebar-content { background: #ffffff; border-radius: 0 0 12px 0; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .lessons-container { background: #d7e5fe !important; border: 2px solid #000000 !important; border-radius: 12px; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .dashboard-stat,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .dashboard-card,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .lesson-item { background: #ffffff; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section-header { background: #ffffff; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section-header:hover { background: #eef4ff; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section.open .filter-section-header { background: #c4d8f3; }

/* ══ Petrol-Hintergrund wie die Profilseite (User 2026-10-14: Dashboard, Meine Schüler, Kalender, Startseite, Login) ══
   Eine Stelle: --kb-petrol. Inhalte (Kalender-Raster, Seitenleiste, Karten, Anmelde-Karte) bleiben hell darauf. */
:root[data-design="kirsch-hauch"][data-blau] { --kb-petrol: #469ea0; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] body,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] body.page-app,
:root[data-design="kirsch-hauch"][data-blau][data-kal] body.page-app,
:root[data-design="kirsch-hauch"][data-blau][data-kal] .wk-main,
:root[data-design="kirsch-hauch"][data-blau] body.auth-page,
:root[data-design="kirsch-hauch"][data-blau][data-hero] body { background: var(--kb-petrol) !important; }

/* Kalender: Petrol-Rand um Seitenleiste und Raster (User 2026-10-14 „1a“). Nur Desktop; am Handy zählt jeder Pixel. */
@media (min-width: 769px) {
    :root[data-design="kirsch-hauch"][data-blau][data-kal] .wk-view#content { background: var(--kb-petrol) !important; padding: 12px !important; gap: 12px !important; box-sizing: border-box; }
    :root[data-design="kirsch-hauch"][data-blau][data-kal] .wk-view > #sidebar.wk-sidebar { border-radius: 14px; border-right: 0 !important; }
    :root[data-design="kirsch-hauch"][data-blau][data-kal] .wk-main { background: transparent !important; }
}

/* Katalog: Petrol-Grund wie im Profil (User 2026-10-14 „Teacher Catalog auch“); Filterleiste bleibt weiß. */
:root[data-design="kirsch-hauch"][data-blau] body:has(.catalog-layout),
:root[data-design="kirsch-hauch"][data-blau] .catalog-layout,
:root[data-design="kirsch-hauch"][data-blau] .catalog-main-content { background: var(--kb-petrol) !important; }
:root[data-design="kirsch-hauch"][data-blau] .catalog-filter-sidebar { background: #ffffff !important; }

/* Kalender: ganze Seitenleiste Petrol, nur die Knöpfe/Zeilen bleiben weiß (User 2026-10-14: „zu viele Divs“);
   alle Trenner gleich dünn: 1 px (User: „die dünnere von beiden“). */
:root[data-design="kirsch-hauch"][data-blau][data-kal] { --kb-thick: 1px; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] .wk-view > #sidebar.wk-sidebar,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .wk-sidebar-body,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .cal-week-nav { background: var(--kb-petrol) !important; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar .wk-sidebar-label { color: #000000; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] .wk-view > #main.wk-main { background: transparent !important; }

/* „Buchungen verwalten“: „Nur für Schüler“/„Nur für neue Schüler“ dezent, aber sichtbar abgesetzt (User 2026-10-14).
   Die weißen freien Zellen dieses Blocks ([data-kal], höhere Spezifität) hatten die Kennfarbe überdeckt. */
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td.available:is(.avail-personal, .avail-new) {
    background: color-mix(in srgb, var(--avail-mark) 32%, #ffffff) !important;
    box-shadow: inset 3px 0 0 var(--avail-mark);   /* schmaler Streifen links: auch ohne Farbsehen erkennbar */
}
:root[data-design="kirsch-hauch"][data-blau][data-kal] #calendar-table tbody td.available:is(.avail-personal, .avail-new):hover {
    background: color-mix(in srgb, var(--avail-mark) 48%, #ffffff) !important;
}

/* Auszeit-Knopf klar gelb (User 2026-10-14: „Der Timeoutbutton sollte gelb sein“) */
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar.wk-sidebar #btn-blocked.button-standard-black,
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar.wk-sidebar #btn-blocked.button-standard-black.active { background: #fde047 !important; color: #000000 !important; border-color: #000000 !important; }
:root[data-design="kirsch-hauch"][data-blau][data-kal] #sidebar.wk-sidebar #btn-blocked.button-standard-black:hover { background: #facc15 !important; }

/* ══ Dashboard-Filter schlicht (User 2026-10-14: „1a; 2a“ — zu viele Kästen und Linien) ══
   Weiße Leiste, Überschriften als Text, dünne Trenner (1 px), keine Kästen, keine Balken, alle Abschnitte offen.
   Überschreibt die Kopf-Kästen von oben (gleiche Selektoren, später in der Datei). */
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-header { border-bottom: 1px solid var(--kb-sep); margin-bottom: 0; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section { margin: 0; border-bottom: 1px solid var(--kb-sep); padding: 12px 0; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section:last-child { border-bottom: 0; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section-header,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section-header:hover,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section.open .filter-section-header,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard][data-dashboard="leicht"] .filter-section-header {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0 0 6px;
    font-weight: 600;
    cursor: default;
    pointer-events: none;          /* alles offen: der Kopf klappt nicht mehr */
}
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section-header .filter-chevron { display: none; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section .filter-section-content,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section.open .filter-section-content { max-height: none; padding: 0; overflow: visible; }
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] .filter-section,
:root[data-design="kirsch-hauch"][data-blau][data-dashboard] #filter-sidebar .filter-section.open { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }