/* 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: 36px; 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; }

/* Hell/Dunkel-Schalter (theme.js): drei kleine Knöpfe, der gewählte ist hinterlegt */
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--st-line); border-radius: var(--st-radius-pill); background: var(--st-surface); }
.theme-switch button { border: 0; background: transparent; color: var(--st-ink-muted); width: 2rem; height: 2rem; border-radius: var(--st-radius-pill);
    display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.theme-switch button:hover { color: var(--st-ink); }
.theme-switch button:focus-visible { outline: 2px solid var(--st-petrol); outline-offset: 1px; }
.theme-switch button[aria-pressed="true"] { background: var(--st-surface-raised); color: var(--st-petrol); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.theme-switch svg { width: 1rem; height: 1rem; }

/* ---------- 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); }
.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-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; }
.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; }
}

/* Logo-Varianten (Hell/Dunkel) */
.navbar-brand .logo-dark, .site-footer .logo-dark, .legal-header .navbar-brand .logo-dark { display: none; }
[data-bs-theme="dark"] .navbar-brand .logo-light, [data-bs-theme="dark"] .site-footer .logo-light, [data-bs-theme="dark"] .legal-header .navbar-brand .logo-light { display: none; }
[data-bs-theme="dark"] .navbar-brand .logo-dark, [data-bs-theme="dark"] .site-footer .logo-dark, [data-bs-theme="dark"] .legal-header .navbar-brand .logo-dark { display: block; }