/* theme-kirsch-hauch.css — NEUER Baustein (UNIVERSAL §21 Regel 2/4), NICHT in die App eingebunden.
   Farbwelt „Kirsch-Hauch": dasselbe Kirsch-Schema wie theme-kirsch.css, aber die Farbe nur als HAUCH —
   fast weiße Flächen, Kirschrot nur in Haarlinien, Schrift und der Auswahl. Flächen tragen höchstens einen
   sehr hellen Ton; kräftige Vollflächen (Teal-Leiste, blaue/violette/gelbe Panels) werden hell mit dunkler Schrift.
   Bestellt vom User 2026-10-11 für den Kalender („wieder das KirschenSchema, aber die Farben nur ganz schwach").
   PD doc/Task_2026-10-11_14-00_Zellen-fest-Kirsch-Hauch-Blinken-Altlasten.txt [3/6].
   Wirkt NUR mit <html data-design="kirsch-hauch">. Lädt NACH theme-kirsch.css und kalender-neu.css (gleiche
   Spezifität, spätere Regel gewinnt). Überschreibt Tokens der Token-Quelle; feste Werte nur, wo andere Dateien
   Farben mit !important fest setzen (combined-all.css, panels.css, kalender-neu.css).
   Kontrast (gerechnet, WCAG): --kh-ink auf --kh-paper 16:1 · --kh-cherry-ink auf --kh-blush 8,9:1 ·
   Panel-Schriften auf ihren Flächen jeweils über 7:1.
   Gesehen im Mockup: mockups/design-kirsch/lehrer-kalender.html?design=kirsch-hauch */

:root[data-design="kirsch-hauch"] {
    --kh-cherry:      #b8253f;   /* nur Linie, Schrift, Auswahl-Rand */
    --kh-cherry-ink:  #7a1a2c;   /* Schrift auf hellem Kirsch-Ton */
    --kh-paper:       #fffbfb;   /* Seitengrund: Weiß mit Hauch */
    --kh-blush:       #fdf1f3;   /* hellster Kirsch-Ton für Flächen */
    --kh-blush-2:     #fae6ea;   /* Hover / Auswahl */
    --kh-line:        #f2dde1;   /* Haarlinien */
    --kh-line-strong: #e6c3ca;
    --kh-ink:         #2a1216;

    --bg-base:            var(--kh-paper);
    --bg-surface:         #ffffff;
    --bg-subtle:          var(--kh-blush);
    --color-bg-secondary: var(--kh-paper);
    --color-bg-hover:     var(--kh-blush);

    --text-primary:         var(--kh-ink);
    --text-secondary:       #5b3a40;
    --text-muted:           #6e4f55;
    --color-text-primary:   var(--kh-ink);
    --color-text-secondary: #5b3a40;

    --border-default: var(--kh-line);
    --border-subtle:  var(--kh-blush);
    --border-strong:  var(--kh-line-strong);
    --color-border:   var(--kh-line);
    --border-thin:    1px;

    /* Akzent: als FLÄCHE nur der helle Ton, als Schrift/Rand das Kirschrot */
    --accent:               var(--kh-cherry);
    --accent-hover:         var(--kh-cherry-ink);
    --accent-active:        var(--kh-cherry-ink);
    --color-primary:        var(--kh-cherry);
    --color-primary-dark:   var(--kh-cherry-ink);
    --text-on-accent:       #ffffff;
    --focus-ring:           rgba(184, 37, 63, 0.25);
    --brand-orange:         var(--kh-cherry);
    --brand-orange-hover:   var(--kh-cherry-ink);
    --brand-orange-tint:    var(--kh-blush);

    /* Kalender-Tokens (Zellen „Nur für Schüler", Avatare) */
    --cal-personal-bg:          #f7eff9;
    --cal-personal-text:        #5b2368;
    --cal-personal-cell-border: #e6d2eb;
}

/* ── 1 Seite und Seitenleiste: keine Vollfläche ───────────────────────────────────────── */
:root[data-design="kirsch-hauch"] body.page-app,
:root[data-design="kirsch-hauch"] .wk-main,
:root[data-design="kirsch-hauch"] .grid-scroll { background: var(--kh-paper) !important; }
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar {
    background: #ffffff !important;
    color: var(--kh-ink);
    border-right: 1px solid var(--kh-line) !important;
}
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar h3,
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar .wk-section-title { color: var(--text-muted); }

/* ── 2 Zellen ─────────────────────────────────────────────────────────────────────────── */
/* verfügbar: weiß mit Kirsch-Hauch, Haarlinie */
:root[data-design="kirsch-hauch"] #calendar-table tbody td.available {
    background: var(--kh-blush) !important;
    color: var(--kh-cherry-ink);
    border-color: var(--kh-line) !important;
}
:root[data-design="kirsch-hauch"] #calendar-table tbody td.available:hover { background: var(--kh-blush-2) !important; }
:root[data-design="kirsch-hauch"] #calendar-table tbody td.readonly-available { background: var(--kh-blush) !important; }
/* nicht verfügbar: fast weiß, feine graue Schraffur (unterscheidbar ohne Farbe) */
:root[data-design="kirsch-hauch"] #calendar-table tbody td.unavailable {
    background-color: #fbfafa !important;
    background-image: repeating-linear-gradient(135deg, transparent 0 7px, #ece6e7 7px 8px) !important;
    color: var(--text-muted);
    border-color: #efe9ea !important;
}
/* Kopf und Zeitspalte */
:root[data-design="kirsch-hauch"] #calendar-table thead th,
:root[data-design="kirsch-hauch"] #calendar-table td.calendar-time-cell {
    background: #ffffff !important;
    color: var(--text-secondary);
    border-color: var(--kh-line) !important;
}

/* ── 3 Panels: bewusst NICHT umgefärbt — Buchungs-Panels und alle anderen Panels behalten ihre Originalfarben (User 2026-10-11). ── */

/* ── 4 Knöpfe in Seitenleiste und Kopf: hell, Auswahl mit Kirsch-Rand statt Vollfläche ───── */
:root[data-design="kirsch-hauch"] .cal-nav-btn,
:root[data-design="kirsch-hauch"] .cal-view-mode-bar button,
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar .button-standard-black,
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar .btn {
    background: #ffffff !important;
    color: var(--kh-ink) !important;
    border: 1px solid var(--kh-line) !important;
    box-shadow: none !important;
}
:root[data-design="kirsch-hauch"] .cal-nav-btn:hover,
:root[data-design="kirsch-hauch"] .cal-view-mode-bar button:hover,
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar .button-standard-black:hover,
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar .btn:hover { background: var(--kh-blush) !important; }
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar .button-standard-black.active,
:root[data-design="kirsch-hauch"] .cal-view-mode-bar button[aria-pressed="true"],
:root[data-design="kirsch-hauch"] .cal-view-mode-bar button.active {
    background: var(--kh-blush) !important;
    color: var(--kh-cherry-ink) !important;
    border-color: var(--kh-cherry) !important;
    font-weight: 700;
}
/* Modus-Schalter „Verfügbarkeit einstellen / Buchungen verwalten" */
:root[data-design="kirsch-hauch"] .mode-segmented { background: var(--kh-blush) !important; border: 1px solid var(--kh-line) !important; }
:root[data-design="kirsch-hauch"] .mode-segmented-btn,
:root[data-design="kirsch-hauch"] #sidebar .mode-segmented-btn { background: transparent !important; color: var(--text-secondary) !important; }
:root[data-design="kirsch-hauch"] .mode-segmented-btn[aria-checked="true"],
:root[data-design="kirsch-hauch"] #sidebar .mode-segmented-btn[aria-checked="true"] {
    background: #ffffff !important;
    color: var(--kh-cherry-ink) !important;
    box-shadow: 0 0 0 1px var(--kh-cherry) inset !important;
}
/* Schülerliste in der Seitenleiste */
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar .student-item,
:root[data-design="kirsch-hauch"] #sidebar.wk-sidebar .student-list-item {
    background: #ffffff !important;
    border: 1px solid var(--kh-line) !important;
    color: var(--kh-ink);
}

/* ── 5 Kopfleiste: Guthaben-Knopf und Zeitauswahl ohne Vollfläche (gemessen: #wallet-button Kirschrot voll,
       #scroll-to-time fast schwarz) ─────────────────────────────────────────────────────────────────────── */
:root[data-design="kirsch-hauch"] #wallet-button.wallet-button {
    background: var(--kh-blush) !important;
    color: var(--kh-cherry-ink) !important;
    border: 1px solid var(--kh-line-strong) !important;
    box-shadow: none !important;
}
:root[data-design="kirsch-hauch"] #wallet-button.wallet-button:hover { background: var(--kh-blush-2) !important; }
:root[data-design="kirsch-hauch"] #scroll-to-time.lang-nav-time-select {
    background-color: #ffffff !important;
    color: var(--kh-ink) !important;
    border: 1px solid var(--kh-line-strong) !important;
}

/* ── 6 Dashboard (2026-10-11): Fremdfarben der Stundenkarten und Hinweise zurück ins Kirsch-Schema.
       Gemessen im Mockup lehrer-dashboard.html: blauer Hinweis, grüner/blauer Knopf, roter Kartenrand. ── */
:root[data-design="kirsch-hauch"] .dashboard-booking-hint {
    background: var(--kh-blush) !important;
    border: 0 !important;
    border-left: 2px solid var(--kh-cherry) !important;
    color: var(--kh-cherry-ink) !important;
}
:root[data-design="kirsch-hauch"] .lesson-item { border-color: var(--kh-line-strong) !important; }
:root[data-design="kirsch-hauch"] .lesson-item .action-btn {
    background: #ffffff !important;
    color: var(--kh-cherry-ink) !important;
    border: 1px solid var(--kh-line-strong) !important;
    box-shadow: none !important;
}
:root[data-design="kirsch-hauch"] .lesson-item .action-btn:hover { background: var(--kh-blush) !important; }
:root[data-design="kirsch-hauch"] .lesson-item .action-btn.join-btn {
    background: var(--kh-blush) !important;
    border-color: var(--kh-cherry) !important;
    font-weight: 600;
}
:root[data-design="kirsch-hauch"] .lesson-item .action-btn.join-btn:hover { background: var(--kh-blush-2) !important; }
:root[data-design="kirsch-hauch"] .lesson-item .action-btn.cancel-btn { color: var(--text-muted) !important; }

/* ── 7 Kalender-Seitenleiste: Zeile und Avatar „Neue Schüler“ in Kirsch statt Orange ── */
:root[data-design="kirsch-hauch"] #sidebar .pc-avatar--new { background: var(--kh-cherry) !important; }
:root[data-design="kirsch-hauch"] #sidebar .sidebar-person-item:has(.pc-avatar--new) {
    background: var(--kh-blush) !important;
    border-color: var(--kh-line-strong) !important;
}

/* ── 8 Aufgeklappter Filter-Abschnitt (User 2026-10-11, F4 „a“): derselbe Kirsch-Ton wie in S/W dick
   (theme-sw-dick.css, --kr-blush #fde9ec aus theme-kirsch.css), Kopf in Kirsch-Tinte halbfett. ── */
:root[data-design="kirsch-hauch"] { --kh-filter-open: #fde9ec; }
:root[data-design="kirsch-hauch"] #filter-sidebar .filter-section.open {
    background: var(--kh-filter-open) !important;
    border-radius: var(--radius-md);
}
:root[data-design="kirsch-hauch"] #filter-sidebar .filter-section.open > .filter-section-header {
    background: transparent !important;
    color: var(--kh-cherry-ink);
    font-weight: 700;
}