/* Sprechtag-Planer – Bootstrap-Theme aus dem Design-System (design/tokens.json).
   Petrol trägt die Marke, Apricot markiert ausschließlich „das ist Ihr Termin“. */

@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root, [data-bs-theme="light"] {
    --st-surface: #f7f5f0;
    --st-surface-raised: #ffffff;
    --st-line: #ddd7cc;
    --st-line-strong: #748489;
    --st-ink: #16252b;
    --st-ink-muted: #56676c;
    --st-petrol: #0f5f6b;
    --st-petrol-rgb: 15, 95, 107;
    --st-petrol-soft: #d9eeee;
    --st-on-petrol: #ffffff;
    --st-apricot: #f2a65a;
    --st-apricot-soft: #fdebd6;
    --st-on-apricot: #2a1806;
    --st-apricot-ink: #8f4a0c;
    --st-moss: #2e6b3c;
    --st-moss-rgb: 46, 107, 60;
    --st-moss-soft: #e2f1e4;
    --st-alert: #b42318;
    --st-alert-rgb: 180, 35, 24;
    --st-shadow-card: 0 1px 2px rgba(22,37,43,0.08), 0 4px 12px rgba(22,37,43,0.06);
}
[data-bs-theme="dark"] {
    --st-surface: #121a1c;
    --st-surface-raised: #1b2528;
    --st-line: #2f3c40;
    --st-line-strong: #62767b;
    --st-ink: #edf2f1;
    --st-ink-muted: #a2b3b6;
    --st-petrol: #5cc3cf;
    --st-petrol-rgb: 92, 195, 207;
    --st-petrol-soft: #0e3439;
    --st-on-petrol: #0b1416;
    --st-apricot: #f2a65a;
    --st-apricot-soft: #3b2614;
    --st-on-apricot: #2a1806;
    --st-apricot-ink: #f6b878;
    --st-moss: #7ccf8c;
    --st-moss-rgb: 124, 207, 140;
    --st-moss-soft: #11301a;
    --st-alert: #f97066;
    --st-alert-rgb: 249, 112, 102;
    --st-shadow-card: none;
}
:root {
    --st-radius-sm: 6px;
    --st-radius-md: 10px;
    --st-radius-pill: 999px;
    --st-space-1: 4px;
    --st-space-2: 8px;
    --st-space-4: 16px;
    --st-space-6: 24px;
    --st-space-8: 32px;
}

/* ---------- Bootstrap auf Tokens abbilden ---------- */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
    --bs-font-sans-serif: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--st-surface);
    --bs-body-color: var(--st-ink);
    --bs-emphasis-color: var(--st-ink);
    --bs-secondary-color: var(--st-ink-muted);
    --bs-secondary-bg: var(--st-surface);
    --bs-tertiary-bg: var(--st-surface);
    --bs-border-color: var(--st-line);
    --bs-border-color-translucent: var(--st-line);
    --bs-border-radius: var(--st-radius-md);
    --bs-border-radius-sm: var(--st-radius-sm);
    --bs-border-radius-lg: var(--st-radius-md);
    --bs-border-radius-pill: var(--st-radius-pill);
    --bs-primary: var(--st-petrol);
    --bs-primary-rgb: var(--st-petrol-rgb);
    --bs-primary-bg-subtle: var(--st-petrol-soft);
    --bs-primary-text-emphasis: var(--st-petrol);
    --bs-primary-border-subtle: var(--st-petrol);
    --bs-success: var(--st-moss);
    --bs-success-rgb: var(--st-moss-rgb);
    --bs-success-bg-subtle: var(--st-moss-soft);
    --bs-success-text-emphasis: var(--st-moss);
    --bs-danger: var(--st-alert);
    --bs-danger-rgb: var(--st-alert-rgb);
    --bs-danger-text-emphasis: var(--st-alert);
    --bs-warning-bg-subtle: var(--st-apricot-soft);
    --bs-warning-text-emphasis: var(--st-apricot-ink);
    --bs-link-color: var(--st-petrol);
    --bs-link-color-rgb: var(--st-petrol-rgb);
    --bs-link-hover-color: var(--st-petrol);
    --bs-link-hover-color-rgb: var(--st-petrol-rgb);
    --bs-focus-ring-color: rgba(var(--st-petrol-rgb), .35);
    --bs-heading-color: var(--st-ink);
}

body { font-family: var(--bs-font-sans-serif); background: var(--st-surface); color: var(--st-ink); }
a { text-underline-offset: .15em; }

/* Tastaturfokus: 2px Abstand in Seitenfarbe, dann 2px Ring in Petrol */
:focus-visible { outline: 2px solid var(--st-petrol) !important; outline-offset: 2px; box-shadow: none !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus { box-shadow: none; }

/* ---------- Typografie ---------- */
h1, .h1, .h3 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; }
h2, .h2, .h4, .h5 { font-size: 20px; line-height: 28px; font-weight: 600; }
.h6 { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--st-ink-muted); }
.display-5 { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.small, small { font-size: 14px; line-height: 20px; }
.text-body-secondary { color: var(--st-ink-muted) !important; }
.label { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .02em; }
.tnum, .code { font-variant-numeric: tabular-nums; }
.code { font-family: var(--bs-font-sans-serif); font-weight: 600; letter-spacing: .06em; }
.stat { font-size: 28px; line-height: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Navigation ---------- */
.navbar { background: var(--st-surface-raised) !important; border-bottom: 1px solid var(--st-line) !important; box-shadow: none !important; }
.navbar-brand img, .navbar-brand svg { height: 32px; width: auto; display: block; }
.navbar .nav-link { color: var(--st-ink); font-weight: 600; border-radius: var(--st-radius-sm); }
.navbar .nav-link:hover { color: var(--st-petrol); }
.navbar .nav-link.active, .navbar .nav-link[aria-current="page"] { color: var(--st-petrol); background: var(--st-petrol-soft); }
.logo-dark { display: none; color: var(--st-ink); }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: block; }

/* ---------- Flächen ---------- */
.card { background: var(--st-surface-raised); border: 1px solid var(--st-line); border-radius: var(--st-radius-md); box-shadow: none; --bs-card-cap-bg: transparent; }
.card-header { background: transparent; font-weight: 600; border-bottom-color: var(--st-line); }
.card-footer { background: var(--st-surface) !important; border-top-color: var(--st-line); }
a.card:hover { border-color: var(--st-petrol); }
.dropdown-menu, .modal-content { background: var(--st-surface-raised); border-color: var(--st-line); box-shadow: var(--st-shadow-card); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--st-petrol-soft); color: var(--st-ink); }
.list-group { --bs-list-group-bg: var(--st-surface-raised); --bs-list-group-border-color: var(--st-line); }
.list-group-item.active { background: var(--st-petrol-soft); color: var(--st-ink); border-color: var(--st-line); }
.list-group-item.active .text-body-secondary, .list-group-item.active .small { color: var(--st-ink-muted) !important; }
.list-group-item-action:hover { background: var(--st-petrol-soft); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--st-ink); --bs-table-border-color: var(--st-line); --bs-table-active-bg: var(--st-petrol-soft); --bs-table-hover-bg: var(--st-petrol-soft); }
.table > thead th { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .02em; color: var(--st-ink-muted); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--st-ink-muted); --bs-breadcrumb-item-active-color: var(--st-ink-muted); }
footer { background: var(--st-surface-raised); }
.bg-body-tertiary { background-color: var(--st-surface) !important; }

/* ---------- Buttons: Aktionen benennen das Ergebnis ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: var(--st-radius-md); --bs-btn-padding-x: 16px; }
.btn-sm { --bs-btn-border-radius: var(--st-radius-sm); --bs-btn-padding-x: 10px; }
.btn-lg { --bs-btn-border-radius: var(--st-radius-md); }
.btn-primary {
    --bs-btn-color: var(--st-on-petrol); --bs-btn-bg: var(--st-petrol); --bs-btn-border-color: var(--st-petrol);
    --bs-btn-hover-color: var(--st-on-petrol); --bs-btn-hover-bg: color-mix(in srgb, var(--st-petrol) 86%, var(--st-ink));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--st-petrol) 86%, var(--st-ink));
    --bs-btn-active-color: var(--st-on-petrol); --bs-btn-active-bg: color-mix(in srgb, var(--st-petrol) 76%, var(--st-ink));
    --bs-btn-active-border-color: color-mix(in srgb, var(--st-petrol) 76%, var(--st-ink));
    --bs-btn-disabled-color: var(--st-on-petrol); --bs-btn-disabled-bg: var(--st-line-strong); --bs-btn-disabled-border-color: var(--st-line-strong);
}
.btn-outline-primary {
    --bs-btn-color: var(--st-petrol); --bs-btn-border-color: var(--st-petrol);
    --bs-btn-hover-color: var(--st-on-petrol); --bs-btn-hover-bg: var(--st-petrol); --bs-btn-hover-border-color: var(--st-petrol);
    --bs-btn-active-color: var(--st-on-petrol); --bs-btn-active-bg: var(--st-petrol); --bs-btn-active-border-color: var(--st-petrol);
}
.btn-outline-secondary, .btn-outline-warning {
    --bs-btn-color: var(--st-ink); --bs-btn-border-color: var(--st-line-strong);
    --bs-btn-hover-color: var(--st-ink); --bs-btn-hover-bg: var(--st-petrol-soft); --bs-btn-hover-border-color: var(--st-petrol);
    --bs-btn-active-color: var(--st-ink); --bs-btn-active-bg: var(--st-petrol-soft); --bs-btn-active-border-color: var(--st-petrol);
}
.btn-success, .btn-outline-success {
    --bs-btn-color: var(--st-on-petrol); --bs-btn-bg: var(--st-moss); --bs-btn-border-color: var(--st-moss);
    --bs-btn-hover-color: var(--st-on-petrol); --bs-btn-hover-bg: color-mix(in srgb, var(--st-moss) 86%, var(--st-ink)); --bs-btn-hover-border-color: color-mix(in srgb, var(--st-moss) 86%, var(--st-ink));
    --bs-btn-active-bg: color-mix(in srgb, var(--st-moss) 76%, var(--st-ink));
}
.btn-outline-danger {
    --bs-btn-color: var(--st-alert); --bs-btn-border-color: var(--st-line-strong);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--st-alert); --bs-btn-hover-border-color: var(--st-alert);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--st-alert); --bs-btn-active-border-color: var(--st-alert);
}
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-hover-color: var(--st-on-petrol); --bs-btn-active-color: var(--st-on-petrol); }
.btn-link { --bs-btn-color: var(--st-petrol); --bs-btn-hover-color: var(--st-petrol); font-weight: 600; }
.btn-check:checked + .btn { background: var(--st-petrol); border-color: var(--st-petrol); color: var(--st-on-petrol); }

/* ---------- Formulare ---------- */
.form-control, .form-select {
    background-color: var(--st-surface-raised); color: var(--st-ink);
    border-color: var(--st-line-strong); border-radius: var(--st-radius-sm);
}
.form-control::placeholder { color: var(--st-ink-muted); opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--st-petrol); background-color: var(--st-surface-raised); color: var(--st-ink); }
.form-label { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; }
.form-text { color: var(--st-ink-muted); }
.form-check-input { border-color: var(--st-line-strong); background-color: var(--st-surface-raised); }
.form-check-input:checked { background-color: var(--st-petrol); border-color: var(--st-petrol); }
.text-danger { color: var(--st-alert) !important; }

/* ---------- Meldungen ---------- */
.alert { border-radius: var(--st-radius-md); border-width: 1px; color: var(--st-ink); }
.alert-success { background: var(--st-moss-soft); border-color: var(--st-moss); }
.alert-danger { background: var(--st-surface-raised); border-color: var(--st-alert); }
.alert-danger::before { content: ""; }
.alert-warning { background: var(--st-apricot-soft); border-color: var(--st-apricot); }
.alert-light { background: var(--st-surface); border-color: var(--st-line) !important; }

/* ---------- Status-Pillen: Status in einem Wort ---------- */
.pill {
    display: inline-flex; align-items: center; gap: var(--st-space-1);
    padding: 2px 10px; border-radius: var(--st-radius-pill);
    font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.pill-petrol { background: var(--st-petrol-soft); color: var(--st-petrol); }
.pill-moss { background: var(--st-moss-soft); color: var(--st-moss); }
.pill-draft { background: var(--st-apricot-soft); color: var(--st-apricot-ink); }
.pill-muted { background: var(--st-surface); color: var(--st-ink-muted); border: 1px solid var(--st-line); }
.pill-alert { background: var(--st-surface-raised); color: var(--st-alert); border: 1px solid var(--st-alert); }
/* Der eigene Termin: Apricot plus Häkchen – nie Farbe allein */
.pill-mine { background: var(--st-apricot); color: var(--st-on-apricot); }

/* ---------- Zeitslots (Eltern) ---------- */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); gap: var(--st-space-2); }
.slot {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 48px; padding: 6px 4px; border: 1px solid transparent; border-radius: var(--st-radius-sm);
    background: var(--st-petrol-soft); color: var(--st-ink);
    font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
    cursor: pointer; transition: background-color .12s, color .12s;
}
.slot:hover { background: var(--st-petrol); color: var(--st-on-petrol); }
.slot .slot-note { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .02em; }
.slot-fit { border-color: var(--st-petrol); }
.slot-fit .slot-note { color: var(--st-petrol); }
.slot-fit:hover .slot-note { color: var(--st-on-petrol); }
/* Zu knapp für den Raumwechsel: buchbar, aber deutlich zurückgenommen */
.slot-tight { opacity: .45; border-style: dashed; }
.slot-tight:hover, .slot-tight:focus-visible { opacity: .85; }
.slot:disabled { cursor: not-allowed; }
.slot-taken, .slot-taken:hover { background: var(--st-line); color: var(--st-ink-muted); }
.slot-mine, .slot-mine:hover { background: var(--st-apricot); color: var(--st-on-apricot); }

/* ---------- Terminraster (Schule): Spalten = Zeiten, Zeilen = Lehrkräfte ---------- */
.grid-table { font-size: 13px; border-collapse: separate; border-spacing: 4px; }
.grid-table, .grid-table td, .grid-table th { border: 0 !important; }
.grid-table td, .grid-table th { white-space: nowrap; text-align: center; padding: 4px 6px; font-variant-numeric: tabular-nums; }
.grid-table th { color: var(--st-ink-muted); font-weight: 600; }
.grid-table th:first-child, .grid-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--st-surface-raised); z-index: 1; }
.grid-table td.cell-free, .grid-table td.cell-booked, .grid-table td.cell-blocked { border-radius: var(--st-radius-sm); min-width: 3.25rem; }
.cell-free { background: var(--st-petrol-soft) !important; color: var(--st-petrol); }
.cell-booked { background: var(--st-line) !important; color: var(--st-ink); font-weight: 600; }
.cell-booked .cell-class { font-weight: 400; font-size: .7rem; opacity: .75; line-height: 1.1; }
.cell-blocked { background: transparent !important; color: var(--st-ink-muted); outline: 1px dashed var(--st-line); outline-offset: -1px; }
.cell-btn { border: 0; background: transparent; width: 100%; padding: 0; font: inherit; color: inherit; }
/* Pause in der Belegung: schmale, schraffierte Spalte */
.grid-table th.break-col { font-size: 11px; line-height: 1.2; color: var(--st-ink-muted); vertical-align: bottom; }
.grid-table td.cell-break, .legend.cell-break { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--st-line) 4px 6px) !important; border-radius: var(--st-radius-sm); }
.grid-table td.cell-break { min-width: 1.5rem; }
.slot-break { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--st-ink-muted); }
.slot-break::before, .slot-break::after { content: ""; flex: 1; height: 0; border-top: 2px dashed var(--st-line); }

/* Uhrzeit im Tabellenkopf: anklicken = ganze Spalte sperren/freigeben */
.time-btn { border: 0; background: transparent; padding: 2px 4px; font: inherit; color: inherit; border-radius: var(--st-radius-sm); cursor: pointer; }
.time-btn:hover, .time-btn:focus-visible { background: var(--st-petrol-soft); color: var(--st-petrol); text-decoration: underline dotted; }
/* Lehrkräfte-Auswahl (Ansprechpartner hinzufügen) */
.teacher-pick { max-height: 20rem; overflow-y: auto; border: 1px solid var(--st-line); border-radius: var(--st-radius-sm); padding: 4px; }
.teacher-pick-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--st-radius-sm); font-size: 14px; cursor: pointer; }
.teacher-pick-item[hidden] { display: none; }
.teacher-pick-item:hover { background: var(--st-petrol-soft); }
.teacher-pick-item.is-checked { background: var(--st-petrol-soft); color: var(--st-petrol); font-weight: 600; }
.teacher-pick-item.is-taken { cursor: not-allowed; color: var(--st-ink-muted); opacity: .6; font-size: 13px; }
.teacher-pick-item.is-taken:hover { background: transparent; }
.teacher-pick-item.is-taken .bi { color: var(--st-petrol); }
.teacher-pick-item > .flex-grow-1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teacher-pick-item .pill { flex-shrink: 1; min-width: 0; font-size: 11px; }
.teacher-pick-divider { margin: 8px 4px 4px; padding-top: 8px; border-top: 1px dashed var(--st-line); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--st-ink-muted); }
.teacher-pick-divider[hidden] { display: none; }

/* Hervorgehobene Tabellenzeile – Farbe aus dem Design-System, funktioniert hell und dunkel */
.row-highlight > td { background: var(--st-petrol-soft) !important; color: var(--st-ink); font-weight: 600; }

/* Hell/Dunkel-Umschalter: Symbol der aktuellen Wahl, Häkchen am gewählten Eintrag */
.theme-toggle { background: none; border: 0; }
.theme-toggle::after { display: none; }
.theme-toggle [data-theme-icon] { display: none; font-size: 1.1rem; }
html[data-theme-choice="auto"] .theme-toggle [data-theme-icon="auto"],
html[data-theme-choice="light"] .theme-toggle [data-theme-icon="light"],
html[data-theme-choice="dark"] .theme-toggle [data-theme-icon="dark"] { display: inline-block; }
html[data-theme-choice="auto"] [data-theme-set="auto"],
html[data-theme-choice="light"] [data-theme-set="light"],
html[data-theme-choice="dark"] [data-theme-set="dark"] { font-weight: 600; color: var(--st-petrol); background: var(--st-petrol-soft); }

/* Ladeanzeige bei länger dauernden Formularen (site.js) */
.busy-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: color-mix(in srgb, var(--st-surface, #fff) 55%, transparent); backdrop-filter: blur(1px);
    opacity: 0; pointer-events: none; transition: opacity .2s; cursor: progress; }
.busy-overlay.show { opacity: 1; pointer-events: auto; }
.busy-box { display: flex; align-items: center; gap: 14px; max-width: 26rem; padding: 18px 22px;
    background: var(--st-surface-raised); border: 1px solid var(--st-line); border-radius: var(--st-radius-md); box-shadow: 0 10px 30px rgb(0 0 0 / .12); }
.busy-box .spinner-border { flex-shrink: 0; }

/* Gespräch erledigt */
.done-btn { width: 2rem; height: 2rem; border-radius: var(--st-radius-sm); border: 2px solid var(--st-line); background: transparent; color: transparent; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 1.1rem; }
.done-btn:hover { border-color: var(--st-petrol); color: var(--st-petrol-soft); }
.done-btn.is-done { background: var(--st-petrol); border-color: var(--st-petrol); color: var(--st-on-petrol); }
/* Lehrer-Übersicht: beschrifteter Button rechts */
.done-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 2.25rem; padding: 4px 14px; white-space: nowrap;
    border: 1.5px solid var(--st-line); border-radius: var(--st-radius-pill); background: var(--st-surface-raised);
    color: var(--st-ink-muted); font: inherit; font-size: 14px; font-weight: 600; }
.done-pill .bi { opacity: .35; }
.done-pill:hover { border-color: var(--st-petrol); color: var(--st-petrol); }
.done-pill:hover .bi { opacity: 1; }
.done-pill.is-done { background: var(--st-petrol); border-color: var(--st-petrol); color: var(--st-on-petrol); }
.done-pill.is-done .bi { opacity: 1; }
/* Gespräch begonnen: läuft bis „Erledigt“ */
.start-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 2.25rem; padding: 4px 14px; white-space: nowrap;
    border: 1.5px solid var(--st-line); border-radius: var(--st-radius-pill); background: var(--st-surface-raised);
    color: var(--st-ink-muted); font: inherit; font-size: 14px; font-weight: 600; }
.start-pill:hover { border-color: var(--st-apricot-ink); color: var(--st-apricot-ink); }
.start-pill.is-running { background: var(--st-apricot-soft); border-color: var(--st-apricot-ink); color: var(--st-apricot-ink); }
.start-pill.is-running .bi { animation: st-pulse 1.6s ease-in-out infinite; }
.row-running > td { background: var(--st-apricot-soft) !important; }
/* Live-Stand für Eltern am Sprechtag */
.live-box { display: flex; gap: .6rem; align-items: flex-start; margin-top: .5rem; padding: .55rem .75rem;
    border-radius: var(--st-radius, .5rem); border: 1px solid var(--st-line); background: var(--st-surface); color: var(--st-ink); }
.live-box > .bi { font-size: 1.25rem; line-height: 1.2; }
.live-box.live-wait { background: var(--st-petrol-soft); border-color: var(--st-petrol); color: var(--st-petrol); }
.live-box.live-late { background: var(--st-apricot-soft); border-color: var(--st-apricot-ink); color: var(--st-apricot-ink); }
.live-box.live-now { background: var(--st-moss-soft); border-color: var(--st-moss); color: var(--st-moss); }
.live-box.live-now > .bi { animation: st-pulse 1.6s ease-in-out infinite; }
.live-box.live-done { color: var(--st-ink-muted); }
.live-indicator { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--st-moss); }
.live-indicator .live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; animation: st-pulse 1.6s ease-in-out infinite; }
.live-indicator.is-offline { color: var(--st-ink-muted); }
.live-indicator.is-offline .live-dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .live-box.live-now > .bi, .live-indicator .live-dot { animation: none; } }
/* Lehreransicht: Familie verspätet sich bei anderer Lehrkraft / Termin vorziehen */
.arrival-hint { margin-top: .25rem; padding: .2rem .5rem; border-radius: .35rem; font-size: .8rem; font-weight: 600; }
.arrival-hint.is-late { background: var(--st-apricot-soft); color: var(--st-apricot-ink); }
.arrival-hint.is-pull { background: var(--st-moss-soft); color: var(--st-moss); }
/* Allgemein „im Gespräch“ (Lehreransicht) */
.busy-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 2.5rem; padding: 6px 16px; white-space: nowrap;
    border: 1.5px solid var(--st-moss); border-radius: var(--st-radius-pill); background: var(--st-moss-soft);
    color: var(--st-moss); font: inherit; font-weight: 600; }
.busy-toggle .busy-dot { width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; }
.busy-toggle.is-busy { background: var(--st-apricot-soft); border-color: var(--st-apricot-ink); color: var(--st-apricot-ink); }
.busy-toggle.is-busy .busy-dot { animation: st-pulse 1.6s ease-in-out infinite; }
@keyframes st-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .start-pill.is-running .bi, .busy-toggle.is-busy .busy-dot { animation: none; } }
.row-done > td:not(:first-child) { color: var(--st-ink-muted); }
.row-done strong { font-weight: 500; text-decoration: line-through; text-decoration-color: var(--st-line); }
/* Erledigtes Gespräch in der Belegung: eigene Farbe statt nur blasser */
.grid-table td.cell-booked.cell-done, .legend.cell-done { background: var(--st-moss-soft) !important; color: var(--st-moss); box-shadow: inset 0 0 0 1.5px var(--st-moss); }
.grid-table td.cell-done .bi { font-weight: 700; margin-right: 2px; }
.grid-table td.cell-booked.cell-running { background: var(--st-apricot-soft) !important; color: var(--st-apricot-ink); box-shadow: inset 0 0 0 1.5px var(--st-apricot-ink); }
@media print { .done-btn { border-color: #888; } .done-btn.is-done { background: transparent; color: #000; } }

/* Belegung im Vollbild */
.matrix-title { display: none; }
.matrix-full { position: fixed; inset: 0; z-index: 1080; margin: 0 !important; border-radius: 0; border: 0; display: flex; flex-direction: column; }
.matrix-full .matrix-title { display: inline; }
.matrix-full .matrix-tabs { flex: 1 1 auto; min-height: 0; display: flex; }
.matrix-full .matrix-tabs > .tab-pane.active { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.matrix-full .table-responsive { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; }
.matrix-full .grid-table thead th { position: sticky; top: 0; background: var(--st-surface-raised); z-index: 2; }
.matrix-full .grid-table thead th:first-child { z-index: 3; }
.legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

@media print {
    body, .card, footer { background: #fff !important; color: #000; }
    .card { border: 1px solid #ccc; }
}

/* Termine von Hand bearbeiten (Verwaltung > Sprechtag) */
.grid-table td.cell-open { cursor: pointer; }
.grid-table td.cell-open:hover, .grid-table td.cell-open:focus-visible { box-shadow: inset 0 0 0 2px var(--st-petrol); }
.cell-add { border: 0; background: transparent; padding: 0 .25rem; font-size: .7rem; color: var(--st-ink-muted); opacity: 0; line-height: 1; }
.grid-table td.cell-free:hover .cell-add, .cell-add:focus-visible { opacity: 1; }
.cell-add:hover { color: var(--st-petrol); }
@media (hover: none) { .cell-add { opacity: .6; } }

/* Dialog zum Bearbeiten liegt auch ueber der Belegung im Vollbild (z-index 1080) */
#bookingModal { z-index: 1100; }
.modal-backdrop { z-index: 1090; }