/* Pensenplanung – Gestaltung
   Aufbau: Menüband links (mit Logo oben), Inhalt rechts. Auf kleinen Bildschirmen
   klappt das Menüband aus (Knopf oben links). */

:root {
    --bg: #f4f6fa;
    --surface: #ffffff;
    --surface-2: #f8f9fc;
    --text: #18202f;
    --muted: #5f6b7f;
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --accent-soft: #e8efff;
    /* Schrift bleibt neutral, unabhängig von der Bereichsfarbe */
    --link: #1f4fbf;
    --border: #e1e5ee;
    --error-bg: #fdecec;
    --error-text: #9b1c1c;
    --success-bg: #e7f6ec;
    --success-text: #1e6b34;
    --info-bg: #e8f0fd;
    --info-text: #1d4a8f;
    --warning-bg: #fff4dc;
    --warning-text: #7a5300;
    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
    --sidebar-width: 248px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: Calibri, Carlito, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text);
    background: var(--bg);
}

a { color: var(--link); }

.icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    vertical-align: -3px;
}

/* ---------- Menüband ---------- */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.sidebar-brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; min-width: 0; color: var(--text); text-decoration: none; }
.brand img { display: block; max-width: 100%; max-height: 56px; object-fit: contain; }
.sidebar-brand .brand { justify-content: center; }
.sidebar-close { position: absolute; top: 8px; right: 8px; }
.brand-text { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }

.sidebar-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    overflow-y: auto;
}

.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list-bottom { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }

.nav-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin-bottom: 2px;
    color: var(--muted);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s, color 0.15s;
}
.nav-list a:hover { background: var(--surface-2); color: var(--text); }
.nav-list a.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }

.icon-button.sidebar-close, .sidebar-backdrop, .icon-button.menu-toggle, .brand-mobile { display: none; }

/* ---------- Seite ---------- */

.page { min-height: 100vh; }
.has-sidebar .page { margin-left: var(--sidebar-width); }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 28px;
    background: rgba(244, 246, 250, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.topbar-spacer { flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 6px; }
.topbar-user form { margin: 0; }

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin-right: 4px;
    color: var(--text);
    font-weight: 500;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.icon-button:hover { color: var(--text); background: var(--surface); border-color: var(--border); }

.content { max-width: 1200px; padding: 28px; }
.no-sidebar .content { max-width: 480px; margin: 0 auto; padding-top: 8vh; }

.login-brand { display: flex; justify-content: center; margin-bottom: 24px; }
.login-brand img { max-width: 280px; max-height: 80px; object-fit: contain; }
.login-brand .brand-text { font-size: 1.5rem; }

/* ---------- Bausteine ---------- */

h1 { margin: 0 0 14px; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.center { text-align: center; }

.card {
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card + .card { margin-top: 14px; }
.card-narrow { max-width: 440px; margin: 0 auto; }
.no-sidebar .card-narrow { max-width: none; }

.card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-header h2 { margin: 0; }

.notice { padding: 12px 16px; margin: 0 0 16px; border-radius: var(--radius-sm); }
.notice-error { background: var(--error-bg); color: var(--error-text); }
.notice-success { background: var(--success-bg); color: var(--success-text); }
.notice-info { background: var(--info-bg); color: var(--info-text); }

/* Formulare */
.form { display: flex; flex-direction: column; gap: 6px; }
.form label { margin-top: 10px; font-weight: 500; }
.form input[type=text],
.form input[type=password],
.form input[type=email],
.form input[type=tel],
.form input[type=date],
.form input[type=number],
.form input[type=file],
.form select,
.form textarea {
    width: 100%;
    padding: 6px 9px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 20px; }
.form-grid > div { display: flex; flex-direction: column; gap: 6px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; }
.form-inline { margin-top: 12px; }
.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400 !important; }

/* Knöpfe */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    font: inherit;
    font-weight: 600;
    color: var(--accent-contrast, #fff);
    text-decoration: none;
    background: var(--accent);
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s;
}
.button:hover { background: var(--accent-dark); color: #fff; }
.form > .button { margin-top: 18px; }
.button-small { padding: 4px 10px; font-size: 0.9rem; }
.button-secondary { background: var(--muted); }
.button-secondary:hover { background: var(--text); }
.button-ghost { color: var(--error-text); background: transparent; border: 1px solid var(--border); }
.button-ghost:hover { background: var(--error-bg); }

.link-button { padding: 0; font: inherit; color: var(--text); background: none; border: 0; cursor: pointer; }
.link-button:hover { text-decoration: underline; }

.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 12px; text-decoration: none; }

/* Register (Tabs) */
.tabs { display: flex; gap: 2px; margin-bottom: 14px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.tabs a {
    padding: 7px 12px;
    margin-bottom: -1px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.table th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.table tbody tr:hover { background: var(--surface-2); }
.table th.center, .table td.center { text-align: center; }

.badge { display: inline-block; padding: 2px 10px; font-size: 0.8rem; font-weight: 500; border-radius: 999px; }
.badge-ok { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.permissions { margin: 24px 0 0; padding: 0; border: 0; }
.permissions legend { margin-bottom: 4px; font-weight: 600; }

.logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    margin: 12px 0 8px;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}
.logo-preview img { max-width: 100%; max-height: 100px; object-fit: contain; }
.logo-preview span { display: inline-flex; align-items: center; gap: 8px; }

/* Standorte, Gebäude, Zimmer */
h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.tag {
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.subcard {
    padding: 16px;
    margin-bottom: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.subcard .card-header { margin-bottom: 8px; }
.subcard .table { background: var(--surface); border-radius: var(--radius-sm); }
.add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.add-row input[type=text] {
    flex: 1 1 220px;
    padding: 8px 12px;
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.add-row input.input-short { flex: 0 1 140px; }
.add-row input[type=text], .add-row select { min-width: 0; }
.add-row select {
    flex: 1 1 220px;
    max-width: 100%;
    padding: 8px 12px;
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
/* Tabellenzellen nie als Flexbox (sonst verrutschen Zeilen und Linien) */
td.with-icon, th.with-icon { display: table-cell; }
.add-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.row-actions { display: inline-flex; gap: 2px; }
.row-actions form { margin: 0; }
.icon-danger:hover { color: var(--error-text); background: var(--error-bg); }
.right { text-align: right !important; }

/* Filter-Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips a {
    padding: 4px 12px;
    font-size: 0.85rem;
    color: var(--muted);
    text-decoration: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.chips a.active { color: var(--text); background: var(--accent-soft); border-color: transparent; font-weight: 600; }

/* Verlauf / Protokoll */
.timeline { list-style: none; margin: 16px 0 0; padding: 0; }
.timeline-item { position: relative; padding: 0 0 18px 20px; border-left: 2px solid var(--border); margin-left: 6px; }
.timeline-item::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 4px;
    width: 12px;
    height: 12px;
    background: var(--surface);
    border: 2px solid var(--accent);
    border-radius: 50%;
}
.timeline-item:last-child { border-left-color: transparent; }
.timeline-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.badge-create { background: var(--success-bg); color: var(--success-text); }
.badge-update { background: var(--info-bg); color: var(--info-text); }
.badge-delete { background: var(--error-bg); color: var(--error-text); }
.badge-restore, .badge-revert { background: var(--warning-bg); color: var(--warning-text); }
.diff { margin-top: 8px; border-collapse: collapse; font-size: 0.9rem; }
.diff th { padding: 2px 12px 2px 0; font-weight: 500; color: var(--muted); text-align: left; vertical-align: top; }
.diff td { padding: 2px 6px; vertical-align: top; }
.diff-old { color: var(--error-text); text-decoration: line-through; }
.diff-new { color: var(--success-text); }
.diff-arrow { color: var(--muted); }
.form-inline .link-button { margin-top: 6px; font-size: 0.9rem; }

/* Rechte-Übersicht der Benutzergruppen */
.level { display: inline-block; padding: 1px 8px; font-size: 0.75rem; font-weight: 600; border-radius: 6px; white-space: nowrap; }
.level-write { background: var(--success-bg); color: var(--success-text); }
.level-read { background: var(--info-bg); color: var(--info-text); }
.level-none { color: var(--muted); }

/* Dashboard */
.dashboard-hello { margin: 0 0 16px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.dashboard-grid .card + .card { margin-top: 0; }
.tile { min-height: 180px; }
.tile h2 .icon { color: var(--text); }

/* Modultitel in der Kopfzeile */
.topbar-title { margin: 0 8px 0 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.page-subtitle { margin: 0 0 16px; font-size: 1.3rem; }

/* Suche und Rückgängig in der Kopfzeile */
.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}
.topbar-search .icon { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
.topbar-search input {
    width: 220px;
    padding: 7px 12px 7px 36px;
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: width 0.15s;
}
.topbar-search input:focus { width: 280px; outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.icon-button.search-mobile { display: none; }
.undo-buttons { display: flex; gap: 2px; margin-right: 6px; padding-right: 8px; border-right: 1px solid var(--border); }
.undo-buttons form { margin: 0; }
.icon-button:disabled { opacity: 0.35; cursor: default; background: transparent; border-color: transparent; }

.search-group { margin-top: 20px; }
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }

/* Stammlisten */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.add-form { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.add-form h3 { margin-bottom: 8px; }
.add-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.field { display: flex; flex: 1 1 200px; flex-direction: column; gap: 6px; }
.field label { font-weight: 500; }
.field-short { flex: 0 1 130px; }
.field-color { flex: 0 0 auto; }
.field-button { flex: 0 0 auto; }
.add-grid .checkbox { flex: 0 0 auto; padding-bottom: 8px; }
.add-grid input[type=text], .add-grid input[type=number], .add-grid input[type=time], .add-grid select {
    width: 100%;
    padding: 8px 12px;
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
input[type=color] {
    width: 56px;
    height: 38px;
    padding: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    background: var(--item-color, #ccc);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

/* Stundenplan */
.timetable-filter { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 28px; }
.tt-site { display: flex; align-items: center; gap: 10px; margin: 0; }
.tt-site label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tt-site select, .tt-options select {
    padding: 8px 12px;
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.tt-choose { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tt-options { display: flex; align-items: center; }
.tt-options form { margin: 0; }
.segmented { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.segmented a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    color: var(--muted);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
}
.segmented a.active { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12); font-weight: 600; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--item-color, var(--border));
    border-radius: 8px;
}
.chip:hover { border-color: var(--accent); border-left-color: var(--item-color, var(--accent)); }
.chip.active { color: var(--text); background: var(--accent-soft); border-color: var(--accent); border-left-color: var(--item-color, var(--accent)); }

.timetable-card h2 { margin-bottom: 16px; }
.timetable { width: 100%; min-width: 640px; margin: 0 auto; border-collapse: collapse; table-layout: fixed; }
.timetable th, .timetable td { text-align: center; vertical-align: middle; border: 1px solid var(--border); }
.timetable thead th { padding: 10px 6px; font-weight: 600; background: var(--surface-2); }
.timetable .tt-time { width: 110px; padding: 6px; background: var(--surface-2); }
.tt-number { display: block; font-weight: 700; }
.tt-hours { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.tt-cell { height: 64px; padding: 4px; }
/* Halbdicke Linie nach der 3., dicke nach der 5. Lektion */
.timetable tr.tt-split-medium > * { border-bottom: 3px solid #9aa3b5; }
.timetable tr.tt-split-thick > * { border-bottom: 5px solid #5f6b7f; }

/* Dropdown mit Farben (Stundenplan-Auswahl) */
.dropdown { position: relative; }
.dropdown summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
    padding: 8px 12px;
    font-weight: 600;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.dropdown summary::-webkit-details-marker { display: none; }
.dropdown summary:hover, .dropdown[open] summary { border-color: var(--accent); }
.dropdown summary .chevron { margin-left: auto; width: 16px; height: 16px; transition: transform 0.15s; }
.dropdown[open] .chevron { transform: rotate(180deg); }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    min-width: 100%;
    max-height: 360px;
    padding: 6px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
}
.dropdown-item:hover { background: var(--surface-2); }
.dropdown-item.active { background: var(--accent-soft); color: var(--text); }
.dropdown-name { font-weight: 600; }
.dropdown-item .muted { margin-left: auto; padding-left: 12px; }

/* Schuljahr-Umschalter */
.year-switch { position: relative; }
.year-switch summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    list-style: none;
    color: var(--text);
    background: var(--accent-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}
.year-switch summary::-webkit-details-marker { display: none; }
.year-switch summary:hover { border-color: var(--accent); }
.year-switch .chevron { width: 16px; height: 16px; transition: transform 0.15s; }
.year-switch[open] .chevron { transform: rotate(180deg); }
.year-other summary { color: var(--warning-text); background: var(--warning-bg); }
.year-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 240px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.year-menu form { margin: 0; }
.year-menu button {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    color: var(--text);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.year-menu button:hover { background: var(--surface-2); }
.year-menu button.active { color: var(--text); background: var(--accent-soft); font-weight: 600; }

/* Personen */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-header h1 { margin: 0; }
.subtitle { margin: 4px 0 0; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat {
    display: block;
    padding: 14px 16px;
    color: var(--text);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.stat:hover { border-color: var(--accent); }
.stat.active { border-color: var(--accent); background: var(--accent-soft); }
.stat-value { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.stat-label { color: var(--muted); font-size: 0.85rem; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.toolbar input[type=search] {
    flex: 1 1 220px;
    padding: 8px 12px;
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.table-click tbody tr { cursor: pointer; }
.table-click td a.row-link { color: var(--text); font-weight: 600; text-decoration: none; }
.table-click td a.row-link:hover { color: var(--text); }
.badge-active, .badge-new { background: var(--success-bg); color: var(--success-text); }
.badge-leaving { background: var(--warning-bg); color: var(--warning-text); }
.badge-left, .badge-future { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.cat { display: inline-block; padding: 2px 8px; font-size: 0.8rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.details dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; overflow-wrap: anywhere; }
.form-section { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--border); }
.form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.form textarea { min-height: 90px; resize: vertical; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: var(--shadow);
    }
    .menu-open .sidebar { transform: none; }
    .icon-button.sidebar-close { display: inline-flex; }
    .menu-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 25;
        background: rgba(16, 24, 40, 0.35);
    }

    .has-sidebar .page { margin-left: 0; }
    .icon-button.menu-toggle { display: inline-flex; }
    .brand-mobile { display: flex; }
    .brand-mobile img { max-height: 36px; max-width: 160px; }
    .topbar { padding: 0 16px; gap: 6px; }
    .topbar-search { display: none; }
    .icon-button.search-mobile { display: inline-flex; }
    .brand-mobile { display: none !important; }
    .topbar-title { font-size: 1.05rem; }
    .content { padding: 20px 16px; }
}

@media (max-width: 560px) {
    .user-chip span { display: none; }
    .year-switch summary > span { font-size: 0.85rem; }
    .details dl { grid-template-columns: 1fr; gap: 0 0; }
    .details dd { margin-bottom: 8px; }
    .user-chip { padding: 8px; margin-right: 0; }
    .card { padding: 18px; }
    h1 { font-size: 1.35rem; }
}

/* Download-Menü in der Kopfzeile */
.download-menu summary.icon-button { min-width: 0; padding: 0; border-color: transparent; background: transparent; }
.download-menu[open] summary.icon-button, .download-menu summary.icon-button:hover { background: var(--surface); border-color: var(--border); }
.download-menu summary .chevron { display: none; }
.dropdown-right { left: auto; right: 0; min-width: 280px; }

/* Druckansichten */
.print-page { background: #fff; padding: 24px 32px; }
.print-toolbar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 16px; }
.print-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--text); }
.print-logo img { max-height: 60px; max-width: 260px; object-fit: contain; }
.print-meta { text-align: right; font-size: 0.9rem; color: var(--muted); }
.print-title { margin: 0 0 16px; text-align: center; font-size: 1.5rem; }
.print-timetable { min-width: 0; }
.print-timetable .tt-cell { height: 70px; }
.print-kids.print-title { font-size: 2rem; }
.print-timetable.print-kids { font-size: 1.15rem; }
.print-timetable.print-kids thead th { font-size: 1.3rem; }
.print-timetable.print-kids .tt-cell { height: 80px; }
.print-footer { margin-top: 16px; font-size: 0.8rem; color: var(--muted); text-align: right; }

@media print {
    @page { size: A4 landscape; margin: 12mm; }
    .print-page { padding: 0; }
    .print-toolbar { display: none; }
    .timetable th, .timetable td { border-color: #888; }
    .timetable thead th, .timetable .tt-time { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Anstellungen und Gesamtanstellung */
.notice-warning { background: var(--warning-bg); color: var(--warning-text); }
.total-badge { display: inline-block; padding: 3px 10px; font-weight: 700; border-radius: 999px; white-space: nowrap; }
.total-ok { background: var(--success-bg); color: var(--success-text); }
.total-warn { background: #ffe8cc; color: #9a4b00; }
.total-alert { background: var(--error-bg); color: var(--error-text); }
.table tfoot th { font-weight: 600; background: var(--surface-2); }
.table tfoot tr.total-row th { font-size: 1rem; }
.table tfoot tr.total-row.total-warn th { background: #ffe8cc; color: #9a4b00; }
.table tfoot tr.total-row.total-alert th { background: var(--error-bg); color: var(--error-text); }
.table tfoot tr.total-row.total-ok th { background: var(--success-bg); color: var(--success-text); }

/* Suche als Lupe in der Kopfzeile */
.search-pop summary.icon-button { min-width: 0; padding: 0; border-color: transparent; background: transparent; }
.search-pop[open] summary.icon-button, .search-pop summary.icon-button:hover { background: var(--surface); border-color: var(--border); }
.search-panel { width: 320px; padding: 10px; }
.search-panel form { display: flex; gap: 6px; margin: 0; }
.search-panel input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.search-panel input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 560px) { .search-panel { width: calc(100vw - 32px); left: auto; right: -60px; } }

/* Dashboard-Kacheln: Listen und Auswahl pro Gruppe */
.tile-list { list-style: none; margin: 0; padding: 0; }
.tile-list li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.tile-list li:last-child { border-bottom: 0; }
.tile-list li.today a { font-weight: 700; }
.tile-list li.today .muted { color: var(--text); font-weight: 600; }
.tile-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; }

/* Lektionszuweisung (Ressourcen) */
.alloc-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.alloc-table th, .alloc-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); text-align: center; }
.alloc-table .alloc-subject { min-width: 220px; text-align: left; font-weight: 500; }
.alloc-level {
    font-weight: 700;
    color: var(--text);
    background: var(--surface-2);
    border-top: 5px solid var(--item-color, var(--border));
}
.alloc-kg { display: block; font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.alloc-group-head th {
    text-align: left;
    padding-top: 14px;
    font-weight: 700;
    border-left: 5px solid var(--item-color, var(--border));
    background: var(--surface-2);
}
.alloc-group tr > th.alloc-subject { border-left: 5px solid var(--item-color, var(--border)); }
.alloc-cell { white-space: nowrap; }
.alloc-cell input {
    width: 48px;
    padding: 2px 4px;
    font: inherit;
    text-align: right;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
}
.alloc-cell input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.alloc-unit { margin-left: 3px; font-size: 0.75rem; color: var(--muted); }
.alloc-off { color: var(--muted); background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--surface) 4px, var(--surface) 8px); }
.alloc-table tfoot th { font-weight: 700; background: var(--surface-2); }

/* Bereiche als anklickbare Chips (Personen) */
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chip { position: relative; cursor: pointer; }
.area-chip input { position: absolute; opacity: 0; pointer-events: none; }
.area-chip span {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-weight: 600;
    background: var(--surface);
    border: 2px solid var(--item-color, var(--border));
    border-radius: 999px;
    transition: background-color 0.15s, color 0.15s;
}
.area-chip input:checked + span { background: var(--item-color, var(--accent)); color: #fff; }
.area-chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.area-chip input:checked + span::before { content: "✓ "; }
.area-tag {
    display: inline-block;
    padding: 2px 10px;
    margin: 0 4px 4px 0;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--item-color, var(--border));
    border-left-width: 5px;
    border-radius: 6px;
}
.area-tag-small { padding: 0 6px; font-size: 0.75rem; }

/* Matrix Lehrpersonen × Klassen (Pensenplanung) */
.matrix-wrap { max-height: 70vh; overflow: auto; }
.matrix { border-collapse: separate; border-spacing: 0; }
.matrix th, .matrix td { padding: 6px 8px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); text-align: center; }
.matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.matrix .matrix-name { position: sticky; left: 0; z-index: 1; min-width: 220px; text-align: left; font-weight: 500; background: var(--surface); }
.matrix thead .matrix-name { z-index: 3; }
.matrix-col { min-width: 64px; font-weight: 700; border-top: 6px solid var(--item-color, var(--border)); }
.matrix-col span { display: inline-block; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); }
.matrix-cell { position: relative; }
.matrix-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--item-color, transparent);
    opacity: 0.08;
    pointer-events: none;
}
.matrix-cell.on::before { opacity: 0.35; }
.matrix-cell input { position: relative; width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.matrix tbody tr:hover .matrix-name, .matrix tbody tr:hover td { background-color: var(--surface-2); }
.matrix-count { font-weight: 700; color: var(--muted); }

/* Gruppierte Stammlisten (z.B. Fächer nach Anstellungsart) */
.ml-group-head th {
    padding-top: 12px;
    font-weight: 700;
    text-align: left;
    background: var(--surface-2);
    border-left: 6px solid var(--item-color, var(--border));
}
.ml-group .ml-row td { position: relative; }
.ml-group .ml-row td:first-child { border-left: 6px solid var(--item-color, var(--border)); }
.ml-group .ml-row td::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--item-color, transparent);
    opacity: 0.1;
    pointer-events: none;
}

/* Automatisch speichern: Knöpfe ausblenden, Rückmeldung anzeigen */
/* Knöpfe mit form="…" gehören zu einem anderen Formular (z.B. Löschen in der Zeile) und bleiben sichtbar */
.js form[data-autosave] button[type=submit]:not([form]) { display: none; }
/* Bleibt dann nichts mehr übrig, fällt die ganze Knopfzeile weg */
.js form[data-autosave] .form-actions:not(:has(> :not(button[type=submit]:not([form])))) { display: none; }
.saving { opacity: 0.6; }
.saved { box-shadow: 0 0 0 3px var(--success-bg) !important; border-color: var(--success-text) !important; transition: box-shadow 0.2s; }
.save-error { box-shadow: 0 0 0 3px var(--error-bg) !important; border-color: var(--error-text) !important; }
.toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100;
    max-width: 420px;
    padding: 10px 16px;
    font-weight: 600;
    color: var(--success-text);
    background: var(--success-bg);
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }
.toast-error { color: var(--error-text); background: var(--error-bg); }

/* Ressourcen pro Klasse: Stufen als obere Kopfzeile, Klassen darunter */
.class-matrix .alloc-class { font-weight: 600; background: var(--surface); border-bottom: 3px solid var(--item-color, var(--border)); }
.class-matrix .alloc-cell input { width: 50px; }

/* Filter-Pillen über Tabellen */
.col-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; }
.pill {
    padding: 5px 12px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    background: var(--surface);
    border: 2px solid var(--item-color, var(--border));
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.55;
}
.pill.active { color: var(--text); background: var(--item-color, var(--accent-soft)); opacity: 1; }
.pill:hover { opacity: 1; }
.pill-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--border); }
.pill-reset { margin-left: 4px; font-size: 0.85rem; }
.col-hidden { display: none; }

.matrix-col.matrix-area { border-top-style: double; }
.matrix-col.matrix-area span { font-style: italic; }
th.matrix-area:first-of-type { border-left: 3px solid var(--border); }

/* Tabs mit Gruppen (Stammlisten, Einstellungen) */
.tabs-grouped { gap: 0 18px; flex-wrap: wrap; align-items: flex-end; overflow: visible; }
.tab-group { display: flex; flex-direction: column; }
.tab-group + .tab-group { padding-left: 18px; border-left: 1px solid var(--border); }
.tab-group-label { padding: 0 16px 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tab-group-items { display: flex; flex-wrap: wrap; }
.settings-section { margin: 18px 0 4px; font-size: 0.95rem; color: var(--muted); }
.settings-section:empty { display: none; }

.alloc-converted { display: block; font-size: 0.75rem; color: var(--muted); }
.alloc-subject .small { display: block; font-weight: 400; }

/* Reihenfolge per Ziehen */
.drag-col { width: 32px; padding-left: 6px !important; padding-right: 0 !important; }
.drag-handle { display: inline-block; padding: 2px 4px; color: var(--muted); font-weight: 700; letter-spacing: -2px; cursor: grab; user-select: none; }
.drag-handle:hover { color: var(--text); background: var(--surface-2); border-radius: 4px; }
tr.dragging { opacity: 0.5; background: var(--accent-soft); }

/* Tabellen sortieren und filtern */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th.sortable::after { content: " ↕"; opacity: 0.3; font-size: 0.8em; }
th.sortable[data-sort="asc"]::after { content: " ↑"; opacity: 1; }
th.sortable[data-sort="desc"]::after { content: " ↓"; opacity: 1; }
.table-filter { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.table-filter input {
    flex: 0 1 320px;
    padding: 7px 12px;
    font: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.table-filter input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.filtered-out { display: none; }
/* Verschieben nur in der Ausgangsreihenfolge ohne Filter */
table.is-sorted .drag-handle, table.is-filtered .drag-handle { visibility: hidden; }

.notice-warning.flash { background: var(--warning-bg); color: var(--warning-text); }
.card-header > form + form { margin-left: 8px; }

.class-matrix .alloc-row > th.alloc-subject { border-left: 5px solid var(--item-color, var(--border)); }
.class-matrix .alloc-subject .swatch { margin-right: 4px; }
.class-matrix .alloc-subject .small { display: block; font-weight: 400; }

/* Untertabs (z.B. Klassen einer Stufe) */
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 18px; }
.subtabs a {
    padding: 5px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.subtabs a:hover { color: var(--text); border-color: var(--accent); }
.subtabs a.active { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }

/* Stufen-Tabs mit Icon in Stufenfarbe (Pensenplanung) */
.tabs a.level-tab { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--item-color, var(--muted)) 80%, black); }
.tabs a.level-tab .icon { color: var(--item-color, currentColor); }
.tabs a.level-tab.active { color: color-mix(in srgb, var(--item-color, var(--text)) 70%, black); border-bottom-color: var(--item-color, var(--accent)); }

/* Stufenbalken über Klassen-Spalten (vollflächig in Stufenfarbe, weisse Schrift) */
th.level-bar, .alloc-table th.alloc-level {
    padding: 6px 8px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: color-mix(in srgb, var(--item-color, #8a93a6) 82%, black);
    border: 0;
    border-right: 2px solid var(--surface);
    border-top: 0;
}
th.level-bar-neutral { background: var(--muted); }
/* Zwei Kopfzeilen fixiert: die zweite sitzt genau unter dem Stufenbalken (Höhe misst app.js, --matrix-head1).
   Ecke oben links liegt über allem, Lehrperson-Spalte über den Klassenspalten, alles mit deckendem Hintergrund. */
.matrix thead tr.level-bar-row th { position: sticky; top: 0; z-index: 3; white-space: nowrap; }
.matrix thead tr.level-bar-row + tr th { top: var(--matrix-head1, 29px); }
.matrix thead th.matrix-name, .matrix thead tr.level-bar-row th.matrix-name { z-index: 5; }
.matrix thead tr.level-bar-row th.level-bar { z-index: 4; text-align: left; border-bottom: 3px solid var(--item-color, var(--grid)); }
/* Stufenname bleibt beim seitlichen Scrollen sichtbar, gleich neben der Lehrperson-Spalte */
.level-bar-label { position: sticky; left: calc(var(--matrix-left, 236px) + 8px); }
.matrix .matrix-name { box-shadow: inset -1px 0 0 var(--grid-strong, var(--border)); }
/* Klassennamen unter dem Balken: graue Versalien */
th.class-head, th.class-head span {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: transparent;
}
.matrix-col.class-head { border-top: 0; }

/* =====================================================================
   Einheitlicher Stil (gilt für das ganze Tool, überschreibt ältere Einzelregeln)
   Schriftgrössen: xs 11px (Spaltentitel, Gruppen, Hinweise) · sm 12px (Tabellenzellen, Zahlen, Pillen)
                   md 13px (Text, Tabs, Formulare, Knöpfe) · lg 15px (Kartentitel) · xl 19px (Seitentitel)
   Gewichte: 400 normal · 600 betont · 700 Titel und Spaltentitel
   ===================================================================== */
:root {
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-md: 13px;
    --fs-lg: 15px;
    --fs-xl: 19px;
    --grid: #e6e8ee;
    --grid-strong: #cfd4de;
    --ok-bg: #dcfae6; --ok-text: #085d3a;
    --warn-bg: #fef0c7; --warn-text: #b54708;
    --bad-bg: #fee4e2; --bad-text: #b42318;
}
body { font-size: var(--fs-md); }
h1, .topbar-title { font-size: var(--fs-xl); font-weight: 700; }
h2, .page-subtitle { font-size: var(--fs-lg); font-weight: 700; }
h3 { font-size: var(--fs-md); font-weight: 700; }
.small, .muted.small, .table-filter, .tag, .badge, .level, .area-tag { font-size: var(--fs-xs); }
.button, .link-button, .form input, .form select, .form textarea, .table-filter input { font-size: var(--fs-md); }
.button-small, .pill, .pill-reset { font-size: var(--fs-sm); }

/* ---------- Navigation: Tabs > Untertabs/Pillen ---------- */
.tabs { gap: 0; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.tabs a {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
    font-size: var(--fs-md); font-weight: 600; color: var(--muted);
    border-bottom: 3px solid transparent; background: transparent;
}
.tabs a:hover { color: var(--text); background: var(--surface-2); }
.tabs a.active { color: var(--text); border-bottom-color: var(--accent); }
.tabs a.level-tab .icon { width: 15px; height: 15px; color: color-mix(in srgb, var(--item-color, var(--muted)) 75%, black); }
.tabs a.level-tab:hover { background: color-mix(in srgb, var(--item-color, var(--muted)) 10%, white); }
.tabs a.level-tab.active {
    background: color-mix(in srgb, var(--item-color, var(--muted)) 14%, white);
    border-bottom-color: color-mix(in srgb, var(--item-color, var(--accent)) 80%, black);
}
.tab-group-label { font-size: var(--fs-xs); }
.subtabs, .class-pills { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.subtabs a, .class-pills a, .pill {
    padding: 2px 10px; font: inherit; font-size: var(--fs-sm); font-weight: 600; line-height: 1.6;
    color: var(--muted); text-decoration: none; background: var(--surface);
    border: 1px solid var(--border); border-radius: 999px; cursor: pointer; opacity: 1;
}
.subtabs a:hover, .class-pills a:hover, .pill:hover { color: var(--text); border-color: color-mix(in srgb, var(--item-color, var(--accent)) 70%, black); }
.subtabs a.active, .class-pills a.active, .pill.active {
    color: var(--text);
    background: color-mix(in srgb, var(--item-color, var(--accent)) 22%, white);
    border-color: color-mix(in srgb, var(--item-color, var(--accent)) 70%, black);
}
.col-filter { gap: 4px; margin: 0 0 12px; }

/* ---------- Tabellen allgemein ---------- */
.table { font-size: var(--fs-sm); }
.table th, .table td { padding: 5px 8px; border-bottom: 1px solid var(--grid); }
.table thead th, .matrix thead th, .plan-table thead th, .alloc-table thead th, th.class-head, th.class-head span {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
    vertical-align: bottom; background: var(--surface);
}
.table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table tfoot th { font-size: var(--fs-sm); }
.matrix { font-size: var(--fs-sm); }
.matrix th, .matrix td { padding: 4px 8px; border-color: var(--grid); }

/* ---------- Matrix-Tabellen (Pensenplanung, Stundentafel, Ressourcen) ---------- */
.plan-table, .alloc-table { width: auto; border-collapse: collapse; border-spacing: 0; background: var(--surface); font-size: var(--fs-sm); table-layout: auto; }
.plan-table th, .plan-table td, .alloc-table th, .alloc-table td { padding: 4px 6px; border: 1px solid var(--grid); font-size: var(--fs-sm); }
.plan-table tbody td, .alloc-table tbody td { height: 34px; text-align: center; font-weight: 400; background: var(--surface); }
.plan-table tbody tr, .alloc-group tr, .class-matrix .alloc-row { background: transparent; }
.plan-table td input, .alloc-table td input {
    width: 100%; min-width: 34px; height: 100%; padding: 0; text-align: center;
    font: inherit; font-size: var(--fs-sm); font-weight: inherit; color: inherit;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
}
.plan-table td input:focus, .alloc-table td input:focus {
    outline: 2px solid color-mix(in srgb, var(--item-color, var(--accent)) 60%, white); outline-offset: -2px; border-radius: 3px;
}
/* Fachspalte: hell in Kategoriefarbe, Balken links, Kürzel betont */
.plan-table .plan-subject, .alloc-table .alloc-subject { text-align: left; white-space: nowrap; min-width: 220px; font-weight: 400; }
.plan-group tr:not(.plan-group-head) > th.plan-subject,
.alloc-group tr:not(.alloc-group-head) > th.alloc-subject,
.class-matrix .alloc-row > th.alloc-subject {
    padding: 4px 10px;
    background: color-mix(in srgb, var(--item-color, #9aa3b5) 16%, white);
    border-left: 6px solid var(--item-color, #9aa3b5);
}
.plan-group th.plan-subject b { margin-right: 6px; font-weight: 600; color: color-mix(in srgb, var(--item-color, var(--text)) 60%, black); }
.plan-subject .muted, .alloc-subject .muted { font-size: var(--fs-xs); color: var(--muted); }
.plan-children { display: block; font-size: var(--fs-xs); color: var(--muted); white-space: normal; }
.child-matrix .alloc-subject { min-width: 90px; }
.child-matrix select { font-size: var(--fs-sm); }
.child-matrix .child-birth input { width: 9.5em; font-size: var(--fs-sm); }
.alloc-subject .small { display: inline; margin-left: 4px; }
.alloc-table th.alloc-subject .tag { white-space: nowrap; }
/* Gruppenzeile */
.plan-group-head th, .alloc-group-head th {
    padding: 6px 10px; text-align: left; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--item-color, var(--muted)) 70%, black);
    background: color-mix(in srgb, var(--item-color, #9aa3b5) 6%, white);
    border-left: 6px solid var(--item-color, var(--grid));
}
/* Spalten: Einheit und Zahlen schmal */
.plan-table .plan-unit, .alloc-table .alloc-unit-col { width: 64px; min-width: 56px; text-align: center; color: var(--muted); white-space: nowrap; background: var(--surface); }
.plan-table th.plan-num, .plan-table td.plan-num { width: 46px; min-width: 46px; padding-left: 2px; padding-right: 2px; text-align: center; white-space: nowrap; }
.alloc-table th.alloc-level, .alloc-table td.alloc-cell, .alloc-table th.alloc-class { width: 60px; min-width: 56px; }
.plan-table .plan-soll { font-style: normal; color: var(--text); }
.plan-table td.plan-open { font-weight: 600; }
.plan-table tbody td.plan-open.left { background: var(--ok-bg); color: var(--ok-text); }
.plan-table tbody td.plan-open.over { background: var(--bad-bg); color: var(--bad-text); }
/* Belegte Zellen hell in der Kategoriefarbe */
.plan-cell.filled, .alloc-cell:has(input:not([value=""])) { background: color-mix(in srgb, var(--item-color, var(--accent)) 16%, white); }
.alloc-off { color: var(--muted); background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, var(--surface) 4px, var(--surface) 8px) !important; }
/* Summenzeilen unten */
.plan-table tfoot th, .plan-table tfoot td, .alloc-table tfoot th, .alloc-table tfoot td {
    font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; text-align: center; background: var(--surface-2);
    border-top: 2px solid var(--grid-strong);
}
.plan-table tfoot .plan-subject, .alloc-table tfoot .alloc-subject { text-align: left; }
/* Stufenbalken und Klassen (Ressourcen pro Klasse, LP → Klasse) */
th.level-bar, .alloc-table th.alloc-level { font-size: var(--fs-sm); font-weight: 700; padding: 5px 8px; }
.class-matrix .alloc-class { border-bottom: 3px solid var(--item-color, var(--grid)); }
.class-matrix .alloc-level-all { background: color-mix(in srgb, var(--item-color, #9aa3b5) 28%, white) !important; border-left: 2px solid color-mix(in srgb, var(--item-color, #9aa3b5) 70%, black); }
.class-matrix th.alloc-level-all { color: color-mix(in srgb, var(--item-color, var(--text)) 50%, black); }
.class-matrix td.alloc-level-all.mixed input::placeholder { color: color-mix(in srgb, var(--item-color, var(--muted)) 60%, black); font-weight: 700; }
.alloc-converted { display: none; }
/* Stundentafel mit Bereich: Spalte «Bereich» pro Stufe, geerbte Werte hellgrau, eigene Werte eingefärbt */
.alloc-tiers .alloc-tier-area { background: color-mix(in srgb, var(--item-color, #9aa3b5) 22%, white); border-left: 2px solid color-mix(in srgb, var(--item-color, #9aa3b5) 70%, black); }
.alloc-tiers th.alloc-tier-area { font-weight: 700; }
.alloc-tiers .alloc-cell input::placeholder { color: var(--muted); opacity: .75; }
.alloc-tiers td.alloc-own { background: color-mix(in srgb, var(--item-color, var(--accent)) 30%, white); font-weight: 700; }
.alloc-tiers td.alloc-own input { font-weight: 700; }
.alloc-table td.alloc-deviates { position: relative; }
.alloc-table td.alloc-deviates::after { content: "≠"; position: absolute; top: 1px; right: 3px; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-dark); }

/* ---------- Pensenplanung: Kopf der Karte ---------- */
.class-plan { border-top: 3px solid var(--item-color, var(--border)); }
.class-plan-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: var(--fs-md); }
.class-plan-head strong { font-size: var(--fs-lg); }
.level-badge {
    padding: 1px 8px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 700;
    background: color-mix(in srgb, var(--item-color, var(--muted)) 22%, white);
    color: color-mix(in srgb, var(--item-color, var(--text)) 55%, black);
    border: 1px solid color-mix(in srgb, var(--item-color, var(--muted)) 60%, black);
}
/* Namen der Lehrpersonen gedreht, unten bündig mit den Spaltentiteln */
.plan-table th.plan-lp { position: relative; width: 48px; min-width: 48px; height: 150px; padding: 0; vertical-align: bottom; }
.plan-table td.plan-cell { width: 48px; min-width: 48px; padding: 0; }
.plan-table th.plan-lp .plan-lp-name {
    position: absolute; left: 50%; bottom: 6px; transform-origin: 0 100%; transform: rotate(-90deg) translateY(50%);
    writing-mode: horizontal-tb; white-space: nowrap; font-size: var(--fs-sm); font-weight: 400; line-height: 1.2;
    text-transform: none; letter-spacing: 0; color: var(--text); text-decoration: none;
}
.plan-lp-name b { font-weight: 700; }
/* Pensum pro LP oben: Gesamtpensum immer sichtbar, Details einklappbar */
.plan-summary th, .plan-summary td { height: auto; padding-top: 3px; padding-bottom: 3px; background: var(--surface-2); font-size: var(--fs-sm); }
.plan-summary td.plan-num { font-weight: 400; }
.plan-summary td.plan-num b { font-weight: 600; }
.plan-summary tr:last-child > * { border-bottom: 3px solid var(--grid-strong); }
.plan-summary .plan-detail { display: none; }
.plan-summary.is-open .plan-detail { display: table-row; }
.plan-summary tr.plan-toggle-row { cursor: pointer; }
.plan-summary tr.plan-toggle-row > * { border-bottom: 3px solid var(--grid-strong); }
.plan-summary.is-open tr.plan-toggle-row > * { border-bottom: 1px solid var(--grid); }
.plan-summary tr.plan-toggle-row:hover > * { background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.plan-toggle {
    display: inline-flex; align-items: center; gap: 4px; padding: 0; font: inherit; font-size: var(--fs-xs); font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: none; border: 0; cursor: pointer;
}
.plan-toggle:hover { color: var(--text); }
.plan-toggle .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.plan-toggle .icon { width: 16px; height: 16px; stroke-width: 2.5; transition: transform .15s; }
.plan-summary.is-open .plan-toggle .icon { transform: rotate(90deg); }
.plan-summary .warn-orange, .plan-table .warn-orange { color: var(--warn-text); background: var(--warn-bg); }
.plan-summary .warn-red, .plan-table .warn-red { color: var(--bad-text); background: var(--bad-bg); }

/* Pensenplanung Startseite: Ablauf als Schritte */
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--grid); }
.step:last-child { border-bottom: 0; }
.step-number {
    flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); font-weight: 700; border-radius: 50%; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.step-body { flex: 1; min-width: 0; }
.step-title { font-weight: 700; }
.step-badge { margin-left: 6px; padding: 0 8px; font-size: var(--fs-xs); font-weight: 600; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.step-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.step-links .tag { text-decoration: none; }
.step-link { flex: 0 0 auto; }
.step-ok .step-number { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.step-ok .step-badge { background: var(--ok-bg); color: var(--ok-text); }
.step-todo .step-badge { background: var(--accent-soft); color: var(--text); }
.step-warn .step-number, .step-warn .step-badge { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.step-alert .step-number, .step-alert .step-badge { background: var(--bad-bg); color: var(--bad-text); border-color: transparent; }

/* Kürzel-Vorschlag: beide Vorschläge vergeben */
input.field-warning { border-color: var(--warning-text); background: var(--warning-bg); }

/* ---------- Stundenplan: Einträge und Popup ---------- */
.tt-cell { position: relative; vertical-align: top; }
.tt-cell.tt-editable { cursor: pointer; }
.tt-cell.tt-editable:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.tt-add { position: absolute; right: 4px; bottom: 2px; font-size: var(--fs-md); font-weight: 700; color: var(--muted); opacity: 0; }
.tt-cell.tt-editable:hover .tt-add { opacity: 1; }
.tt-entry {
    display: block; width: 100%; margin: 0 0 3px; padding: 3px 5px; text-align: left;
    font: inherit; font-size: var(--fs-sm); line-height: 1.25; color: var(--text); cursor: inherit;
    background: color-mix(in srgb, var(--item-color, #9aa3b5) 16%, white);
    border: 0; border-left: 4px solid var(--item-color, #9aa3b5); border-radius: 3px;
}
button.tt-entry { cursor: pointer; }
button.tt-entry:hover { background: color-mix(in srgb, var(--item-color, #9aa3b5) 28%, white); }
.tt-entry strong { display: block; font-weight: 700; }
.tt-entry span { display: inline-block; margin-right: 6px; font-size: var(--fs-xs); color: var(--muted); }
.tt-entry.tt-conflict { background: var(--bad-bg); border-left-color: var(--bad-text); outline: 1px solid var(--bad-text); }
.tt-entry.tt-conflict strong { color: var(--bad-text); }
td.tt-open-left { color: var(--ok-text); background: var(--ok-bg); font-weight: 600; }
td.tt-open-over { color: var(--bad-text); background: var(--bad-bg); font-weight: 600; }
td.tt-open-done { color: var(--muted); }
.tt-dialog { width: min(520px, calc(100vw - 32px)); padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.tt-dialog::backdrop { background: rgba(16, 24, 40, 0.35); }
.tt-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tt-dialog-head h2 { margin: 0 0 2px; }
.tt-dialog-close { font-size: 22px; line-height: 1; color: var(--muted); }
.tt-dialog-form select { width: 100%; }
.tt-dialog-form label { display: block; margin: 10px 0 4px; font-weight: 600; }
.tt-dialog-form .muted.small { margin: 4px 0 0; }
.tt-option-done { color: var(--muted); }
.tt-dialog-actions { display: flex; gap: 8px; margin-top: 16px; }
.tt-dialog-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 520px) { .tt-dialog-rooms { grid-template-columns: 1fr; } }
.tt-dialog-semester { margin: 12px 0 0; padding: 0; border: 0; }
.tt-dialog-semester legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.tt-dialog-semester label.inline { display: inline-flex; align-items: center; gap: 4px; margin: 0 14px 0 0; font-weight: 400; }
.tt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.tt-head h2 { margin: 0; }
.tt-head .tt-semester { margin: 0 0 0 auto; }
.tt-sem { display: block; font-size: var(--fs-xs); font-style: normal; font-weight: 600; color: var(--warn-text); }
.tt-pending tr.tt-pending-head > th { padding-top: 10px; font-size: var(--fs-sm); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text); background: var(--surface-2); border-top: 2px solid var(--grid-strong); }
.tt-pending tr.tt-pending-head > th.tt-open-left { color: var(--ok-text); background: var(--ok-bg); }
.tt-pending tr.tt-pending-head > th.tt-open-over { color: var(--bad-text); background: var(--bad-bg); }
.tt-type { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--item-color, #9aa3b5); }
.tt-badge { padding: 1px 10px; font-size: var(--fs-sm); font-weight: 600; border-radius: 999px; }
.tt-badge-open { color: var(--ok-text); background: var(--ok-bg); }
.tt-badge-over { color: var(--bad-text); background: var(--bad-bg); }
.tt-badge-done { color: var(--muted); background: var(--surface-2); }
.tt-dialog-delete { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grid); }
@media print {
    .tt-entry { background: transparent !important; border-left: 3px solid #888; }
    .tt-add { display: none; }
}

/* Schul-Pool: schmales Zahlenfeld in Tabellen */
.input-narrow { width: 5.5em; }

/* Zwei-Faktor: QR-Code und Schlüssel zum Abtippen */
.totp-qr { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.totp-qr svg { display: block; width: 200px; height: 200px; }
/* Passkeys: Meldung beim Knopf, Code als Alternative, Namen in der Liste */
[data-passkey-status]:empty { display: none; }
.notice-error-text { color: var(--error-text); }
.passkey-alternative { margin-top: 16px; }
form[data-passkey] + h2 { margin-top: 24px; }
.passkey-name { width: 100%; max-width: 320px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font: inherit; }
.passkey-alternative summary { cursor: pointer; font-size: var(--fs-md); }
.card form[data-passkey] h3 { margin: 16px 0 4px; font-size: var(--fs-md); }
.totp-secret { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-md); letter-spacing: 1px; word-break: break-all; }

/* Pensenstände: Wahl in der Kopfzeile, Hinweis bei gesperrtem Stand, Pensenzusammenstellung */
.nowrap { white-space: nowrap; }
form.inline { display: inline-block; margin: 0; }
.required { color: var(--error-text); }
.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; font-size: var(--fs-md); }
.facts dt { font-weight: 600; color: var(--muted); }
.facts dd { margin: 0; }
.version-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warning-text); }
.version-dot.is-locked { background: var(--success-text); }
.year-menu-link { display: block; padding: 8px 12px; font-size: var(--fs-sm); border-top: 1px solid var(--border); }
.version-banner { margin-bottom: 12px; }
.pensum-sheet { font-size: var(--fs-md); }
.pensum-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pensum-name { font-size: var(--fs-lg); font-weight: 700; margin-bottom: 4px; }
.pensum-status { text-align: right; font-size: var(--fs-sm); }
.pensum-stamp { display: inline-block; padding: 2px 10px; font-weight: 700; letter-spacing: 2px; color: var(--error-text); border: 2px solid var(--error-text); border-radius: 4px; }
.pensum-table { margin-bottom: 12px; }
.pensum-table tr.pensum-changed td { font-weight: 700; background: var(--warning-bg); }
.pensum-table tr.pensum-current td { font-weight: 700; }
.pensum-sub { margin: 16px 0 6px; font-size: var(--fs-md); }
.pensum-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; font-size: var(--fs-sm); }
.pensum-signatures .sig-line { height: 40px; margin-bottom: 4px; border-bottom: 1px solid var(--text); }
.pensum-page { page: pensum; }
.page-break { break-before: page; }
@page pensum { size: A4 portrait; margin: 15mm; }
@media print {
    .pensum-table tr.pensum-changed td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.version-switch summary strong, .version-switch summary .small { white-space: nowrap; }

/* Automatische Abmeldung: Ansicht sofort ausblenden, bis die Anmeldeseite geladen ist (app.js) */
html.session-locked body { visibility: hidden; }

/* Stammdaten «nicht mehr verwenden ab Schuljahr»: im gewählten Schuljahr abgeschwächt */
tr.is-retired td { opacity: 0.55; }

/* =====================================================================
   Sachliches Design (Entscheid Lukas 1.11.2026, angelehnt an grosse Schweizer Online-Shops):
   viel Weiss auf hellgrauem Grund, dünne Linien statt Schatten, kleine Rundungen,
   Akzent = Bereichsfarbe nur für Knöpfe, aktive Navigation und den gewählten Bereich.
   Kopfzeile: Modul › Seite, darunter klar beschriftet Schuljahr, Stand und Bereich; Suche kompakt.
   ===================================================================== */
:root {
    --bg: #f2f2f2;
    --surface: #ffffff;
    --surface-2: #f7f7f7;
    --text: #1a1a1a;
    --muted: #5c5c5c;
    --border: #e0e0e0;
    --grid: #e6e6e6;
    --grid-strong: #c8c8c8;
    --radius: 4px;
    --radius-sm: 3px;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Karten flach */
.card { border-radius: var(--radius); box-shadow: none; }
.subcard { border-radius: var(--radius); }

/* Menüband: aktive Seite mit Balken in Bereichsfarbe */
.sidebar-nav { padding: 12px 0; }
.nav-list a { margin: 0 0 1px; padding: 9px 20px; border-radius: 0; color: #3d3d3d; }
.nav-list a:hover { background: var(--surface-2); }
.nav-list a.active { background: var(--surface-2); color: var(--text); font-weight: 700; box-shadow: inset 4px 0 0 var(--accent); }
.nav-list a.active .icon { color: var(--accent-dark); }
.nav-list-bottom { margin: 16px 0 0; }

/* Menüband in Gruppen (Pensenplanung, Schulbetrieb, Schuljahresplanung, Verwaltung): Titel klein und grau,
   auf-/zuklappbar, feine Striche zwischen den Gruppen */
.nav-part-bottom { margin-top: 16px; border-top: 1px solid var(--border); }
.nav-list-top { padding-bottom: 8px; }
.nav-group { border-top: 1px solid var(--border); }
.nav-part-bottom .nav-group:first-child { border-top: 0; }
.nav-group summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 6px; list-style: none; cursor: pointer; user-select: none;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary:hover { color: var(--text); }
.nav-group .nav-chevron { width: 14px; height: 14px; transition: transform 0.15s; }
.nav-group[open] .nav-chevron { transform: rotate(90deg); }
.nav-group .nav-list { padding-bottom: 8px; }
.nav-group .nav-list a { padding-left: 28px; }

/* Kopfzeile */
.topbar {
    gap: 14px;
    background: var(--surface);
    backdrop-filter: none;
    height: auto;
    min-height: 64px;
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 4px solid var(--accent);
    border-bottom: 1px solid var(--border);
}
/* Wird es eng, rutschen Schuljahr und Bereich in eine zweite Zeile; der Titel bleibt ganz sichtbar */
.topbar-title { display: flex; flex: 0 0 auto; align-items: baseline; gap: 8px; margin: 0 6px 0 0; }
.topbar-title h1 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.crumb-sep { color: var(--muted); font-size: var(--fs-lg); }
.crumb-page {
    max-width: 260px; overflow: hidden; color: var(--muted); font-size: var(--fs-lg); font-weight: 600;
    white-space: nowrap; text-overflow: ellipsis;
}

/* Schuljahr, Stand und Bereich: beschriftete Kästchen */
.context-switches { display: flex; align-items: center; gap: 8px; }
.year-switch summary {
    gap: 8px;
    min-height: 42px;
    padding: 4px 10px;
    background: var(--surface);
    border: 1px solid var(--grid-strong);
    border-radius: var(--radius);
}
.year-switch summary:hover, .year-switch[open] summary { border-color: var(--text); }
.year-switch summary .icon { color: var(--muted); }
.switch-text { display: flex; flex-direction: column; line-height: 1.15; }
.switch-label { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.switch-text strong { font-size: var(--fs-md); white-space: nowrap; }
.year-other summary { color: var(--warning-text); background: var(--warning-bg); border-color: #e0b44c; }
.year-other summary .switch-label { color: var(--warning-text); }
.area-switch summary { background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); padding-left: 14px; }
.area-switch summary:hover, .area-switch[open] summary { border-color: var(--accent-dark); }
.version-locked summary { background: var(--surface-2); }
.year-menu { border-radius: var(--radius); }
.year-menu button { border-radius: var(--radius-sm); }
.year-menu button.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }

/* Suche: kleines Feld */
.topbar-search .icon { width: 16px; height: 16px; left: 10px; }
.topbar-search input {
    width: 150px;
    padding: 7px 10px 7px 32px;
    font-size: var(--fs-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.topbar-search input:focus { width: 220px; background: var(--surface); border-color: var(--text); box-shadow: none; }
.search-pop { display: none; }

.user-chip { border-radius: var(--radius); }
.icon-button { border-radius: var(--radius); }
.icon-button:hover { background: var(--surface-2); }

/* Knöpfe und Eingabefelder */
.button { font-weight: 600; border-radius: var(--radius); }
.form input, .form select, .form textarea, .add-row input, .table-filter input { border-radius: var(--radius-sm); }

/* Tabs, Pillen: eckiger */
.tabs a.active { border-bottom-width: 3px; }
.subtabs a, .class-pills a, .pill, .chips a { border-radius: var(--radius); }
.segmented { border-radius: var(--radius); }
.segmented a, .segmented button { border-radius: var(--radius-sm); }

/* Tabellen: Spaltentitel kräftig, klare Linie darunter, Zeile beim Überfahren hervorheben */
.table thead th { color: var(--text); border-bottom: 2px solid var(--grid-strong); }
.table th, .table td { padding: 6px 8px; }
.table tbody tr:nth-child(even) { background: var(--surface-2); }
.table tbody tr:hover { background: var(--accent-soft); }

@media (max-width: 1280px) {
    .crumb-page { max-width: 160px; }
    .user-chip span { display: none; }
    .user-chip { padding: 8px; margin-right: 0; }
    .year-switch summary > .icon:first-child { display: none; }
}
@media (max-width: 1100px) {
    .crumb-sep, .crumb-page { display: none; }
}
@media (max-width: 900px) {
    .topbar { gap: 6px; }
    .topbar-search { display: none; }
    .search-pop { display: block; }
    .context-switches { gap: 4px; }
    .switch-label { display: none; }
    .year-switch summary { min-height: 34px; padding: 4px 8px; }
    .area-switch summary { padding-left: 10px; }
}
@media (max-width: 560px) {
    .topbar-title h1 { font-size: var(--fs-lg); }
    .year-switch .chevron { display: none; }
}

/* Einstellungen → Bereiche: Gebäude als Karten nebeneinander, Zimmer als kompakte Liste */
.card-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 20px; align-items: start; }
.card-pair > .card { margin: 0 0 20px; }
.building-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.building-grid .subcard { margin-bottom: 0; padding: 12px; }
.building-grid .card-header { margin-bottom: 6px; gap: 6px; }
.building-new { border-style: dashed; background: var(--surface); }
.building-new h3 { margin-bottom: 8px; color: var(--muted); }
.room-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.room-list li { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.room-list li:first-child { border-top: 0; }
.room-names { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.room-name { font-weight: 600; }
.room-official { color: var(--muted); font-size: var(--fs-xs); }
.room-code { flex: 0 0 auto; padding: 1px 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.room-list .icon-button { width: 28px; height: 28px; }
.add-details { margin-top: 8px; }
.add-details summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: var(--fs-sm); color: var(--accent); list-style: none; }
.add-details summary::-webkit-details-marker { display: none; }
.add-details summary svg { width: 14px; height: 14px; }
.room-add { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.room-add input[type=text] { min-width: 0; padding: 6px 10px; font: inherit; font-size: var(--fs-sm); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.room-add input[type=text]:first-of-type { grid-column: 1 / -1; }
.room-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.room-add .button { justify-self: start; }

/* Modul Projekte: Aufgabenliste mit Häkchen pro Zuständigen (auch im Dashboard) */
.filter-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.filter-rows .chips { align-items: center; }
.filter-rows .chips > .muted { min-width: 72px; }
.filter-rows .chips a { padding: 2px 10px; font-size: var(--fs-sm); }
.filter-rows .chips a[data-color] { border-left: 3px solid var(--item-color); }
.project-progress { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin-top: 8px; }
.progress-item { display: grid; grid-template-columns: 1fr 80px auto; align-items: center; gap: 8px; padding: 4px 8px; font-size: var(--fs-sm);
    color: var(--text); text-decoration: none; border-left: 3px solid var(--item-color, var(--border)); }
.progress-item progress { width: 80px; height: 8px; accent-color: var(--accent); }
.card-warning { border-left: 3px solid var(--error-text); }
.task-week { margin: 14px 0 4px; font-size: var(--fs-md); }
.task-week:first-child { margin-top: 0; }
.task-list { list-style: none; margin: 0; padding: 0; }
.task-list > li { display: grid; grid-template-columns: minmax(120px, auto) 1fr auto; align-items: start; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border); }
.task-list > li:first-child { border-top: 0; }
.task-list > li.is-done .task-title { color: var(--muted); text-decoration: line-through; }
.task-checks { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.task-check { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; font-size: var(--fs-xs); cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); white-space: nowrap; }
.task-check input { margin: 0; }
.task-check[data-color] { border-left: 3px solid var(--item-color); }
.task-check.checked, .task-check:has(input:checked) { background: var(--success-bg); color: var(--success-text); border-color: transparent; }
.task-check[data-color].checked, .task-check[data-color]:has(input:checked) { border-left-color: var(--item-color); }
.task-list > li.is-clickable { cursor: pointer; }
.task-list > li.is-clickable:hover { background: var(--surface-2); }
.assignee-box[data-color] { padding-left: 6px; border-left: 3px solid var(--item-color); }
.inline-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.inline-add input[type=text] { flex: 0 1 320px; padding: 6px 10px; font: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.inline-add input[type=color] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.field-wide { flex: 2 1 320px; }
.text-danger { color: var(--error-text); }
.plan-list { list-style: none; margin: 0; padding: 0; }
.plan-list > li { border-top: 1px solid var(--border); }
.plan-list > li:first-child { border-top: 0; }
.plan-item > summary { list-style: none; cursor: pointer; }
.plan-item > summary::-webkit-details-marker { display: none; }
.plan-item > summary:hover, .plan-item[open] > summary { background: var(--surface-2); }
.plan-row { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: start; padding: 6px 4px; }
.plan-date { display: flex; flex-direction: column; font-size: var(--fs-sm); font-weight: 600; }
.plan-title { display: flex; flex-direction: column; font-size: var(--fs-md); }
.plan-who { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.plan-list > li.is-done .plan-title { color: var(--muted); }
.plan-edit, .plan-delete { padding: 8px 4px 12px; background: var(--surface-2); }
.plan-edit { padding-bottom: 0; }
.plan-delete .link-button svg { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 700px) { .plan-row { grid-template-columns: 1fr; gap: 2px; } .plan-who { justify-content: flex-start; } }
.task-check.locked { cursor: default; opacity: 0.75; }
.task-text { font-size: var(--fs-md); min-width: 0; }
.task-project { margin-left: 6px; padding: 0 6px; font-size: var(--fs-xs); color: var(--muted); text-decoration: none;
    border-left: 3px solid var(--item-color, var(--border)); }
.task-date { text-align: right; white-space: nowrap; }
.task-date .muted { display: block; }
.text-error { color: var(--error-text); font-weight: 600; }
.task-list-compact > li { grid-template-columns: 1fr; gap: 2px; }
.task-list-compact .task-date { text-align: left; }
.task-list-compact .task-date .muted { display: inline; }
.assignee-boxes { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--fs-xs); border: 0; padding: 0; margin: 8px 0; }
.assignee-boxes label { white-space: nowrap; }
@media (max-width: 700px) {
    .task-list > li { grid-template-columns: 1fr; gap: 4px; }
    .task-date { text-align: left; }
}

/* Benutzergruppen-Übersicht: Module als Pillen nach Recht, Bereichsleitung beim Bereich */
.group-table td { vertical-align: top; }
.group-table .level-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.group-table .level-row:last-child { margin-bottom: 0; }
.group-table .level-label { min-width: 64px; font-size: var(--fs-xs); }
.group-table .level { font-size: var(--fs-xs); font-weight: 500; }
.area-leaders { margin: 0 0 10px; }
/* Felder, die nur bei bestimmter Auswahl erscheinen (data-show-when) */
.form-grid > [hidden] { display: none; }

/* Rollenwechsel beim Namen oben (Konten mit mehreren Benutzergruppen) */
.role-menu summary.user-chip { min-width: 0; padding: 6px 10px; font-weight: 600; }
.role-menu .role-name { margin-left: 4px; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
.role-menu .dropdown-title { margin: 2px 10px 6px; }
.role-menu form { margin: 0; }
.role-menu button.dropdown-item { width: 100%; font: inherit; text-align: left; cursor: pointer; background: none; border: 0; }
.role-menu button.dropdown-item.active { background: var(--accent-soft); }

/* Info-Icon mit aufklappbarer Erklärung (Hints::info, app.js data-info) */
.info-tip { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; font-size: var(--fs-md);
    font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1; }
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
    color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.info-btn .icon { width: 17px; height: 17px; }
.info-btn:hover, .info-tip.open .info-btn { color: var(--accent-dark, var(--text)); background: var(--accent-soft); }
.info-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.info-pop { display: none; position: absolute; z-index: 50; top: calc(100% + 6px); left: -8px; width: max-content;
    max-width: min(380px, calc(100vw - 32px)); padding: 10px 12px; color: var(--text); background: var(--surface, #fff);
    border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    font-size: var(--fs-md); line-height: 1.45; text-align: left; white-space: normal; }
.info-tip.open .info-pop { display: block; }
.info-pop .info-line { display: block; }
.info-pop .info-line + .info-line { margin-top: 6px; }
@media print { .info-tip { display: none; } }

/* =====================================================================
   Ansprechendere Gestaltung (Entscheid Lukas 3.11.2026): sachlich wie bisher, aber wärmer.
   Weichere Rundung, Signet und Schulname im Menüband, aktive Seite als Fläche in Bereichsfarbe,
   Hauptknöpfe farbig und Nebenknöpfe mit Rahmen, Namenszeichen mit Initialen, Balken für Fortschritt und Pensum.
   Die Farbe kommt weiterhin vom Bereich bzw. von der Schulfarbe (Einstellungen → Allgemein).
   ===================================================================== */
:root { --radius: 8px; --radius-sm: 6px; }
.card { border-radius: 10px; }

/* Menüband: Signet (ohne Logo), Schulname und Name der App */
.sidebar-brand { justify-content: flex-start; }
.sidebar-brand .brand { justify-content: flex-start; gap: 12px; }
.brand-signet {
    display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px;
    color: var(--accent-contrast, #fff); background: var(--accent); font-size: 18px; font-weight: 800; line-height: 1;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-lg); line-height: 1.2; }
.brand-sub { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.brand-mobile .brand-signet { flex-basis: 30px; width: 30px; height: 30px; font-size: 15px; border-radius: 7px; }
.brand-mobile .brand-sub { display: none; }

/* Aktive Seite als helle Fläche in Bereichsfarbe */
.nav-list a { margin: 1px 10px; padding: 8px 12px; border-radius: var(--radius-sm); }
.nav-group .nav-list a { padding-left: 14px; }
.nav-list a.active { background: var(--accent-soft); color: var(--accent-dark); box-shadow: none; }
.nav-list a.active .icon { color: var(--accent); }
.nav-group summary { padding-left: 22px; }

/* Kopfzeile: Akzent als feine Linie, Bereich ohne dicken Balken */
.topbar { border-top-width: 3px; }
.area-switch summary { box-shadow: none; padding-left: 10px; }

/* Rundes Namenszeichen mit Initialen (Kopfzeile, Personenliste, letzte Änderungen) */
.avatar {
    display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    color: #fff; background: var(--item-color, var(--accent)); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
    text-decoration: none;
}
.user-chip .avatar { margin-left: -4px; }
.person-name { display: inline-flex; align-items: center; gap: 10px; }
.person-name .avatar { width: 28px; height: 28px; }

/* Knöpfe: Hauptaktion farbig, Nebenaktion mit Rahmen */
.button:hover { color: var(--accent-contrast, #fff); }
.button-secondary { color: var(--text); background: var(--surface); border: 1px solid var(--grid-strong); }
.button-secondary:hover { color: var(--text); background: var(--surface-2); border-color: var(--text); }

/* Balken (progress): Fortschritt, verteilte Lektionen, Pensum */
.progress {
    display: block; width: 100%; height: 8px; overflow: hidden; vertical-align: middle;
    appearance: none; -webkit-appearance: none; border: 0; border-radius: 4px; background: var(--grid);
    color: var(--item-color, var(--accent));
}
.progress::-webkit-progress-bar { background: var(--grid); border-radius: 4px; }
.progress::-webkit-progress-value { background: var(--item-color, var(--accent)); border-radius: 4px; }
.progress::-moz-progress-bar { background: var(--item-color, var(--accent)); border-radius: 4px; }
.pensum-bar { display: inline-block; width: 64px; height: 6px; margin-right: 8px; }
.pensum-warn { --item-color: #d98a1a; }
.pensum-alert { --item-color: #c43c2f; }

/* Pensenplanung → Übersicht: Fortschritt */
.progress-box {
    display: flex; align-items: center; gap: 16px; margin: 4px 0 12px; padding: 12px 16px;
    background: var(--accent-soft); border-radius: var(--radius);
}
.progress-box strong { white-space: nowrap; color: var(--accent-dark); }
.progress-box .progress { flex: 1; height: 10px; background: var(--surface); }
.progress-box .progress::-webkit-progress-bar { background: var(--surface); }
.step-number { border-radius: 50%; }
.step-ok .step-number { color: #fff; background: var(--ok-text); }
.step-todo .step-number { color: var(--accent-dark); background: var(--surface); border: 2px solid var(--accent); font-weight: 700; }

/* Personenliste: Kategorie als ruhiger Text */
.table .cat { padding: 0; font-size: inherit; color: var(--muted); background: none; border: 0; }
.stat { border-radius: 10px; }
.stat.active .stat-value { color: var(--accent-dark); }

/* Dashboard: Begrüssung, Kennzahlen, Balken pro Bereich, letzte Änderungen */
.dashboard-hero { margin: 0 0 18px; }
.dashboard-hero h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.dashboard-hero p { margin: 4px 0 0; font-size: var(--fs-md); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi {
    display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; color: var(--text); text-decoration: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.kpi:hover { border-color: var(--accent); }
.kpi-label { font-size: var(--fs-sm); color: var(--muted); }
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1.15; }
.kpi .progress { margin: 6px 0 2px; height: 6px; }
.kpi-sub { font-size: var(--fs-sm); color: var(--muted); }
.kpi-ok { color: var(--ok-text); }
.kpi-warn { color: #b35c00; }
.kpi-bad { color: var(--bad-text); }
.bar-list { list-style: none; margin: 8px 0 0; padding: 0; }
.bar-list li { display: grid; grid-template-columns: minmax(90px, 140px) 1fr 48px; gap: 10px; align-items: center; padding: 7px 0; font-size: var(--fs-md); }
.bar-list strong { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bar-list .dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--item-color, var(--accent)); }
.change-list { list-style: none; margin: 4px 0 8px; padding: 0; font-size: var(--fs-md); }
.change-list li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--grid); }
.change-list li:last-child { border-bottom: 0; }
.change-list .muted { display: block; margin-top: 1px; }
/* Kachel Warnungen: Punkt rot (alert) oder orange (warn) */
.warning-list { list-style: none; margin: 4px 0 8px; padding: 0; font-size: var(--fs-md); }
.warning-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--grid); }
.warning-list li:last-child { border-bottom: 0; }
.warning-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #b35c00; }
.warning-alert .warning-dot { background: var(--bad-text); }
.warning-ok { color: var(--ok-text); }
.tile a:not(.button) { color: var(--text); text-decoration: none; }
.tile a:not(.button):hover { color: var(--accent-dark); text-decoration: underline; }
@media (max-width: 560px) {
    .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi-value { font-size: 22px; }
}
.user-chip .avatar { display: inline-grid; }
.tile p.small a { color: var(--accent-dark); font-weight: 600; }

/* =====================================================================
   Responsiv (Entscheid Lukas 3.11.2026): Handy, Tablet und Laptop.
   Breiten wie oben: 900px Tablet (Menüband klappt ein), 560px Handy.
   Grosse Tabellen wischen innerhalb ihrer Karte, die erste Spalte bleibt stehen.
   Auf Touch-Geräten (pointer: coarse) sind Häkchen, Pillen und kleine Knöpfe grösser.
   app.js setzt .scroll-more, solange rechts noch etwas versteckt ist (Tabs, Tabellen).
   ===================================================================== */

/* Nichts darf breiter als der Bildschirm werden */
.segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented a { flex: 0 0 auto; white-space: nowrap; }
.tt-choose, .tt-choose > * { min-width: 0; max-width: 100%; }
.dropdown-menu, .year-menu { max-width: calc(100vw - 32px); }
.tabs a { flex: 0 0 auto; white-space: nowrap; }
.table td.right, .table th.right, .table .num { white-space: nowrap; }

/* Hinweis «es geht rechts weiter»: Rand blendet aus */
.scroll-more {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}

/* Grosse Tabellen: erste Spalte (Fach) bleibt beim seitlichen Wischen stehen */
.plan-table .plan-subject, .alloc-table .alloc-subject { position: sticky; left: 0; z-index: 1; }
.plan-table thead .plan-subject, .alloc-table thead .alloc-subject { z-index: 2; background: var(--surface); }
/* Gruppenzeilen gehen über alle Spalten: nur die Beschriftung bleibt links stehen */
.plan-group-head .group-label, .alloc-group-head .group-label { position: sticky; left: 10px; display: inline-block; }

@media (max-width: 900px) {
    .tabs { scrollbar-width: none; }
    .tabs::-webkit-scrollbar, .segmented::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
    /* Kopfzeile in zwei festen Zeilen:
       1. Menü, Seitentitel, Suche, Konto   2. Schuljahr, Pensenstand, Bereich, Download, Rückgängig */
    .topbar { gap: 4px; row-gap: 6px; padding: 6px 12px; }
    .topbar > .menu-toggle { order: 1; }
    .topbar-title { order: 2; flex: 1 1 0; min-width: 0; margin: 0; }
    .topbar-title h1 { overflow: hidden; text-overflow: ellipsis; }
    .topbar > .search-pop { order: 3; }
    .topbar-user { order: 4; gap: 2px; }
    .topbar::after { content: ''; order: 5; flex-basis: 100%; height: 0; }
    .topbar-spacer { display: none; }
    .context-switches { order: 6; flex: 1 1 0; min-width: 0; }
    .context-switches > .year-switch { flex: 1 1 0; min-width: 0; }
    .context-switches .year-switch summary { width: 100%; justify-content: flex-start; }
    .switch-text { min-width: 0; }
    .switch-text strong { overflow: hidden; text-overflow: ellipsis; }
    .topbar > .download-menu { order: 7; }
    .topbar > .undo-buttons { order: 8; }
    .topbar .icon-button { width: 38px; height: 38px; }
    .user-chip { padding: 6px; }

    /* Aufklappmenüs der Kopfzeile über die ganze Breite statt aus dem Bild */
    .topbar details > .dropdown-menu, .topbar details > .year-menu {
        position: fixed; top: auto; left: 12px; right: 12px; width: auto; min-width: 0; max-width: none;
    }
    .search-panel { width: auto; }

    /* Inhalt: weniger Rand, Tabellen dürfen bis an den Kartenrand */
    .content { padding: 14px 12px; }
    .card { padding: 14px; }
    .card > .table-wrap, .card > form > .table-wrap { margin-left: -14px; margin-right: -14px; }

    /* Fachspalte schmaler, Text darf umbrechen */
    .plan-table .plan-subject, .alloc-table .alloc-subject, .matrix .matrix-name {
        min-width: 120px; max-width: 46vw; white-space: normal;
    }
    .plan-subject .muted, .alloc-subject .muted { display: block; }
    .plan-table th.plan-lp { height: 120px; }

    /* Personen: Kategorien als wischbare Reihe statt sieben Kacheln untereinander */
    .stats { display: flex; overflow-x: auto; gap: 8px; margin-bottom: 14px; scrollbar-width: none; }
    .stats::-webkit-scrollbar { display: none; }
    .stat { flex: 0 0 auto; min-width: 104px; padding: 8px 12px; }
    .stat-value { font-size: 1.25rem; }
    .table .person-name { white-space: nowrap; }

    /* Knopfreihen umbrechen statt hinausragen */
    .page-header, .actions-row, .form-actions, .toolbar { flex-wrap: wrap; }
    .card-header { flex-wrap: wrap; }
    .card-pair, .building-grid { grid-template-columns: 1fr; }
    .progress-box { flex-wrap: wrap; gap: 8px; }
    .bar-list li { grid-template-columns: minmax(70px, 1fr) 1.2fr 44px; }
}

/* Touch-Geräte: Tippflächen mindestens etwa 36–40 px */
@media (pointer: coarse) {
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
    .tabs a, .segmented a { min-height: 40px; }
    .subtabs a, .class-pills a, .pill, .chips a, .tag[href], a.tag, .step-link, .button-small {
        display: inline-flex; align-items: center; min-height: 36px;
    }
    .icon-button { min-width: 38px; min-height: 38px; }
    .task-check { min-height: 32px; padding: 4px 10px 4px 6px; }
    .info-btn { min-width: 32px; min-height: 32px; }
    .plan-table tbody td, .alloc-table tbody td { height: 40px; }
    .table .row-link, .back-link { display: inline-block; padding: 4px 0; }
}

@media print {
    .table-wrap, .matrix-wrap { overflow: visible; max-height: none; }
    .scroll-more { -webkit-mask-image: none; mask-image: none; }
    .plan-table .plan-subject, .alloc-table .alloc-subject { position: static; }
}
/* Schul-Pool: Ressourcen (Total, Anteile der Bereiche) und Verteilung auf Personen */
.pool-matrix .alloc-subject { min-width: 180px; }
/* Eingabefeld nicht über die ganze Zellhöhe, damit «LP x» darunter in der Zelle Platz hat */
.pool-matrix tbody td, .pool-matrix tbody th { vertical-align: top; padding-top: 3px; padding-bottom: 3px; line-height: 24px; }
.pool-matrix td.alloc-cell input { display: block; height: 24px; }
.pool-matrix .pool-people { display: block; min-height: 13px; color: var(--muted); font-size: var(--fs-xs); line-height: 13px; }
.pool-matrix .pool-people.over, .pool-share .over { color: var(--bad-text); }
.pool-open.left, .pool-share .left { background: var(--ok-bg); color: var(--ok-text); font-weight: 600; }
.pool-open.over, .pool-share .over { background: var(--bad-bg); color: var(--bad-text); font-weight: 600; }
.pool-open.done { color: var(--muted); }
.pool-share { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 8px; font-size: var(--fs-sm); font-weight: 400; }
.pool-share > span { padding: 1px 6px; border-radius: 4px; background: var(--surface-2); }
.pool-area { margin-top: 18px; }
.pool-area h3 { display: flex; align-items: center; gap: 8px; }
/* Pensenplanung → Mentorate: eine Zeile pro Person im Mentorat, Vorschläge (noch nichts gespeichert) hell */
.mentoring-table td { vertical-align: middle; }
.mentoring-table select { max-width: 190px; }
/* Name und Prozent einer Person stehen zusammen, die Gruppen sind durch eine Linie getrennt */
.mentoring-table .mentoring-group { border-left: 1px solid var(--border); }
.mentoring-pair { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mentoring-pair .mentoring-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.mentoring-pair input.mentoring-pct { width: 4.5em; text-align: right; }
/* Pensenwünsche */
.wish-table input.wish-pct { width: 4.5em; text-align: right; }
.wish-table input.wish-note { width: 100%; min-width: 14em; }
.wish-table td.warn-orange { color: var(--warn-text); background: var(--warn-bg); }
.mentoring-person .mentoring-pair { display: flex; }
.mentoring-person .mentoring-who { flex: 1 1 auto; }
.mentoring-reason { display: block; color: var(--muted); font-size: var(--fs-xs); }
.mentoring-suggested .mentoring-person a { color: var(--muted); }