/* ================================================
   Schulprozess – Global Stylesheet
   Ausgelagert aus layout.php
   ================================================ */

/* Visually hidden but accessible (for file inputs the server strips display:none from) */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important;}

/* --- Manrope + Inter: lokal gehostet (DSGVO) --- */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Material Symbols: lokal gehostet --- */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('fonts/material-symbols-outlined.woff2') format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

:root {
    /* --- Design-System: Digital Curator --- */
    /* Primary */
    --primary: #005394;
    --primary-hover: #004881;
    --primary-light: #d3e4ff;
    --primary-container: #2b6cb0;
    /* Schrift auf dem Akzent. Steht seit jeher in DESIGN.md, fehlte hier —
       deshalb schrieben die Rubriken #fff hin, wo dieses Token gemeint war.
       Daran entscheidet sich das dunkle Thema: colorsDark setzt den Wert auf
       #0a2540. Ohne das Token waere die Schrift auf einem hellblauen Knopf
       dann weiss auf hell. Nachgetragen 25.09.2026, keine Erweiterung der
       Palette. */
    --on-primary: #ffffff;

    /* Surfaces (Tonal Layering) */
    --bg: #F7F9FD;
    --card: #ffffff;
    --surface-low: #f2f4f8;
    --surface-container: #eceef2;
    --surface-high: #e6e8ec;

    /* Borders: Ghost-Borders statt harter Linien */
    --border: rgba(193, 199, 210, 0.35);
    --border-light: rgba(193, 199, 210, 0.25);

    /* Text: kein reines Schwarz */
    --text: #181c1f;
    --text-dark: #181c1f;
    --text-mid: #2D3748;
    --text-muted: #414750;
    /* 4.5:1 auf Weiss und auf gedaempfter Flaeche. Der frueher hier stehende
       Ton #727782 erreichte 4.49:1 auf Weiss und nur 4.08:1 im Tabellenkopf —
       das ist der Grund, warum Labels und Spaltenkoepfe schwer lesbar waren. */
    --text-light: #676b75;

    /* Backgrounds */
    --bg-subtle: #F7F9FD;
    --bg-light: #f2f4f8;

    /* Shadows: ambient, weich */
    --shadow-sm: 0 1px 3px rgba(24, 28, 31, 0.04);
    --shadow-md: 0 4px 16px rgba(24, 28, 31, 0.06);
    --shadow-lg: 0 24px 48px rgba(24, 28, 31, 0.06);

    /* Radii */
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* === Welle-0-Aliase — DEPRECATED ===
       Ein-Satz-Regel (DESIGN.md): Dieser Satz belegte dieselben Rollen mit
       abweichenden Werten. Er traegt jetzt exakt die normativen Werte von oben
       und existiert nur noch, damit bestehende Welle-0-Komponenten weiterlaufen.
       Neue Arbeit nutzt --primary / --bg / --text / --radius-*. */
    --c-primary: #005394;        /* = --primary */
    --c-primary-600: #2b6cb0;    /* = --primary-container */
    --c-primary-700: #004881;    /* = --primary-hover */
    --c-bg: #F7F9FD;             /* = --bg */
    --c-surface: #ffffff;        /* = --card */
    --c-text: #181c1f;           /* = --text */
    --c-muted: #676b75;          /* = --text-light */
    --c-border: rgba(193, 199, 210, 0.35); /* = --border */
    /* Der kraeftige Rand: Fussbalken von Feldern, Ankreuzfelder. DESIGN.md
       fuehrt ihn seit dem 24.09.2026 im Vorspann („line-strong"), das
       Stylesheet kannte ihn nicht — wer ihn brauchte, schrieb die Zahl hin. */
    --line-strong: #7f858f;

    /* --- Statusfarben, normativ ---
       DESIGN.md erklaert den Satz OHNE Praefix fuer massgebend, aber Status
       gab es bisher nur mit Praefix — der normative Satz konnte einen Zustand
       gar nicht ausdruecken, und wer einen brauchte, schrieb die Zahl hin.
       Die Namen sind die aus DESIGN.md (Waschung + Tinte). Kein Wert aendert
       sich; die --c-*-Namen zeigen von nun an hierher, statt zu wiederholen.
       24.09.2026, beim Aufraeumen des Kalenders. */
    --info-wash: #dbeafe;
    --info-ink: #1e40af;
    --success-wash: #dcfce7;
    --success-ink: #166534;
    --caution-wash: #fef9c3;
    --caution-ink: #854d0e;
    --danger-wash: #fee2e2;
    --danger-ink: #991b1b;
    --c-info-bg: var(--info-wash);
    --c-info-fg: var(--info-ink);
    --c-success-bg: var(--success-wash);
    --c-success-fg: var(--success-ink);
    --c-warn-bg: var(--caution-wash);
    --c-warn-fg: var(--caution-ink);
    --c-danger-bg: var(--danger-wash);
    --c-danger-fg: var(--danger-ink);
    /* Radius (B: größer) */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;
    /* Abstände */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    /* Typo */
    --text-sm: .85rem;
    --text-base: 1rem;
    --text-lg: 1.2rem;
}

/* ================================================
   BASE
   ================================================ */
body {
    font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', system-ui, sans-serif;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text-dark);
}

a,
a:visited {
    color: var(--primary);
}

/* ================================================
   LINK-FARBEN FÜR BUTTONS (verhindert visited-Override)
   ================================================ */
.button-primary,
.button-primary:visited,
.button-primary-small,
.button-primary-small:visited {
    color: #fff !important;
}

.button-secondary,
.button-secondary:visited,
.button-secondary-small,
.button-secondary-small:visited,
.button-ghost-small,
.button-ghost-small:visited {
    color: var(--text-mid) !important;
}

.button-danger-small,
.button-danger-small:visited {
    color: #C53030 !important;
}

/* Buttons auf farbigem Kopfzonen-Grund: weiß statt text-mid.
   Frueher stand hier [class*="-hero"] — ein Teilstring-Selektor, der JEDE
   Klasse mit der Zeichenfolge "-hero" traf, auch eine am <body>. Eine
   einzige solche Klasse faerbte damit saemtliche Aktionsbuttons der Seite
   weiss auf weiss. Jetzt stehen die Kopfzonen ausdruecklich da. */
.page-hero .button-secondary-small,
.page-hero .button-secondary-small:visited,
.page-hero .button-ghost-small,
.page-hero .button-ghost-small:visited,
.sa-sub-hero .button-secondary-small,
.sa-sub-hero .button-ghost-small,
.pa-sub-hero .button-secondary-small,
.pa-sub-hero .button-ghost-small,
.test-sub-hero .button-secondary-small,
.test-sub-hero .button-ghost-small {
    color: rgba(255,255,255,0.9) !important;
}

/* ================================================
   HEADER
   ================================================ */
header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    padding: 12px 24px 10px;
    box-shadow: var(--shadow-sm);
}

header .brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

header .brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

header .brand-logo {
    display: block;
    height: 48px;
    width: auto;
}

header .brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

header .brand-name {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}

header .brand-claim {
    font-size: 13px;
    color: #676b75;
}

header .role {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 2px;
}

/* ================================================
   HAUPTNAVIGATION
   ================================================ */
.main-nav {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.main-nav .nav-link {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--text-muted);
    background: var(--surface-low);
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.main-nav .nav-link:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 83, 148, 0.15);
}

.main-nav .nav-link.is-active {
    background: var(--primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 83, 148, 0.2);
}

.main-nav .nav-link.logout-link {
    margin-left: auto;
}

/* ================================================
   SEITENINHALT
   ================================================ */
main {
    padding: 1.25rem 1.25rem;
    max-width: 1600px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    main {
        padding: 1.25rem 1rem;
    }
}

.card {
    background: var(--card);
    /* Einmal-Erheben-Regel (DESIGN.md): Rand ODER Schatten, nicht beides. */
    border: none;
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s ease;
}
/* Margin nur wenn Card NICHT in einem Grid-Container ist */
main > .card {
    margin-bottom: 1.5rem;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.hint {
    color: var(--text-light);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ================================================
   BUTTONS — Stitch Design System
   ================================================ */
.button-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary);
    color: #fff;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
}

.button-primary:hover {
    background: var(--primary-hover);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 83, 148, 0.25);
    transform: translateY(-1px);
}

.button-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 83, 148, 0.15);
}

.button-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface-high);
    color: var(--text-mid);
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-lg);
    border: none;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
}

.button-secondary:hover {
    background: var(--surface-container);
    box-shadow: var(--shadow-sm);
}

/* Am Finger bekommt der Textknopf die volle Hoehe; an der Maus bleibt er
   schlank, weil er dort haeufig in einer Textzeile sitzt. */
@media (pointer: coarse) {
    .button-link { min-height: 44px; box-sizing: border-box; }
}

.button-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: color 0.15s;
}

.button-link:hover {
    text-decoration: underline;
}

/* Icon innerhalb von Buttons */
.button-primary .material-symbols-outlined,
.button-secondary .material-symbols-outlined,
.button-danger .material-symbols-outlined {
    font-size: 20px;
}

/* ===============================
   SMALL ACTION BUTTONS (GLOBAL)
   =============================== */
.button-ghost-small,
.button-secondary-small,
.button-primary-small,
.button-danger-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44er-Regel (DESIGN.md), aber nur in der Hoehe erzwungen.
       Eine feste Mindestbreite sprengt dichte Aktionsspalten: in der
       Schulverwaltung stehen sechs Icon-Buttons nebeneinander, die Spalte
       wuchs dadurch um 72px und schob sich in einer 11-spaltigen Tabelle
       aus dem Bild. Reine Icon-Buttons in dichten Tabellen bleiben damit
       schmaler als 44px — bewusster Kompromiss, siehe DESIGN.md. */
    min-height: 44px;
    box-sizing: border-box;
    gap: 0.35rem;
    font-size: 0.8rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    transition: all 0.15s ease;
    cursor: pointer;
    line-height: 1.4;
}

.button-ghost-small {
    border: none;
    background: var(--surface-low);
    color: var(--text-mid);
}

.button-ghost-small:hover {
    background: var(--surface-high);
}

.button-secondary-small {
    border: none;
    background: var(--surface-low);
    color: var(--text-mid);
}

.button-secondary-small:hover {
    background: var(--surface-high);
}

.button-primary-small {
    border: none;
    background: var(--primary);
    color: #fff;
}

.button-primary-small:hover {
    background: var(--primary-hover);
    box-shadow: 0 2px 8px rgba(0, 83, 148, 0.2);
}

.button-danger-small {
    border: none;
    background: #fef2f2;
    color: #c53030;
}

.button-danger-small:hover {
    background: #fee2e2;
}

/* Gesperrter Zustand: Die Aktion bleibt sichtbar an ihrem Platz, ist aber
   erkennbar nicht ausfuehrbar. Vorher stand hier das blosse Wort
   "geschuetzt" — es brach die Icon-Reihe und nannte den Grund nicht. */
.button-danger-small.is-blocked,
.button-secondary-small.is-blocked {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--surface-low);
    color: var(--text-muted) !important;
}

/* button-small: kleiner Hilfsbutton ohne eigene Farbe */
.button-small {
    font-size: 0.8rem;
    padding: 0.4rem 0.85rem;
}

/* button-danger: größerer Danger-Button */
.button-danger {
    border: none;
    color: #c53030;
    background: #fef2f2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-lg);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.button-danger:hover {
    background: #c53030;
    color: #fff;
    box-shadow: 0 4px 12px rgba(197, 48, 48, 0.2);
}

/* ================================================
   MODAL
   ================================================ */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(24, 28, 31, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-backdrop.open { display: flex; }
.modal-dialog {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalIn 0.2s ease;
}
.modal-dialog-sm  { max-width: 380px; }
.modal-dialog-lg  { max-width: 700px; }
@keyframes modalIn {
    from { opacity:0; transform:scale(0.95) translateY(8px); }
    to   { opacity:1; transform:scale(1)    translateY(0);   }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(193, 199, 210, 0.2);
}
.modal-title { margin:0; font-size:1.15rem; font-weight:700; color:var(--text-dark); letter-spacing:-0.01em; }
.modal-close {
    background:none; border:none; font-size:1.1rem; color:var(--text-light);
    cursor:pointer; padding:0.4rem; border-radius:var(--radius); line-height:1;
    transition: background 0.15s;
}
.modal-close:hover { background:var(--surface-low); color:var(--text-dark); }
.modal-body { padding: 1.25rem 1.5rem; }
.modal-body .form-input { max-width:100%; width:100%; }
.modal-footer {
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(193, 199, 210, 0.2);
    display: flex; justify-content: flex-end; gap: 0.75rem; align-items: center;
}
.modal-confirm-text { font-size:0.85rem; color:var(--text-light); margin-top:0.4rem; }

/* ================================================
   ALERT-BOXEN — Stitch Design System
   ================================================ */
.alert {
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    margin-top: 0.75rem;
    border: none;
    line-height: 1.5;
}

/* line-height: 1.5 NACHGETRAGEN (25.09.2026, Welle 3).
   Die Modifikatoren duplizieren Polsterung, Radius und Schriftgroesse, damit
   sie OHNE die Basisklasse .alert funktionieren — 47 der 54 Meldungsstellen
   im Portal nutzen genau das. line-height stand aber nur in .alert, also
   bekamen diese 47 die Grundeinstellung des Browsers (rund 1,2) statt 1,5.
   Aufgefallen beim Aufloesen der elf Kopien: sieben von ihnen setzten 1.5,
   neun Stellen haetten beim Umzug engere Zeilen bekommen.

   MELDUNGEN SPRECHEN TOKEN (25.09.2026).
   Hier standen neun feste Farben — und drei Rubriken hatten sie abgeschrieben:
   .tp-alert-* und .sg-alert-* im Treffpunkt, .cutp-alert-error in den
   Curricula. Wer eine Komponente nachbaut, erbt ihre Schulden.

   DER RAND NIMMT DIE TINTE SEINES STATUS. DESIGN.md legt Status auf „jeweils
   Waschung plus zugehoerige Tinte" fest — genau zwei Farben. Ein eigener
   Randton waere eine dritte und widerspraeche der Ein-Stimme-Regel. */
.alert-error {
    background: var(--danger-wash);
    border-left: 3px solid var(--danger-ink);
    color: var(--danger-ink);
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.5;
}

.alert-success {
    background: var(--success-wash);
    border-left: 3px solid var(--success-ink);
    color: var(--success-ink);
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.5;
}

.alert-warning {
    background: var(--caution-wash);
    border-left: 3px solid var(--caution-ink);
    color: var(--caution-ink);
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* .alert-info trug den AKZENT (--primary). Der markiert laut DESIGN.md
   „Handlung und Standort — nichts sonst"; eine Hinweismeldung ist keines
   von beiden. Es gibt eine Statusfarbe dafuer. */
.alert-info {
    background: var(--info-wash);
    border-left: 3px solid var(--info-ink);
    color: var(--info-ink);
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ================================================
   PAGE HEADER + SCHNELLAKTIONEN — Stitch Design System
   ================================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}

.page-header-main p {
    margin: 0.4rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 640px;
}

.page-header-main p + p {
    margin-top: 0.35rem;
}

.page-header-side {
    flex-shrink: 0;
    min-width: 220px;
    max-width: 280px;
    background: var(--surface-low);
    border: none;
    border-radius: var(--radius-xl);
    padding: 1.1rem 1.25rem;
    box-shadow: none;
}

.page-header-side h4 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Vertikaler Button-Stack in Schnellaktionen */
.quick-action-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.quick-action-list > a,
.quick-action-list > button {
    display: block;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    white-space: normal;
}

/* Alle Button-Klassen innerhalb der Schnellaktionen-Sidebar
   werden automatisch zu Block-Elementen (kein inline-style nötig) */
.page-header-side .button-primary,
.page-header-side .button-secondary,
.page-header-side .button-secondary-small,
.page-header-side .button-ghost-small,
.page-header-side .button-primary-small,
.page-header-side .button-danger-small {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    margin-top: 0.4rem;
}

.page-header-side .button-primary:first-child,
.page-header-side .button-secondary-small:first-child {
    margin-top: 0;
}

/* 2-Spalten-Grid (z.B. Kalender mit Toggle-Aktionen) */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
}

.quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    text-decoration: none;
    border: none;
    background: var(--surface-low);
    color: var(--text-mid);
    box-sizing: border-box;
    white-space: normal;
    transition: all 0.15s ease;
}

.quick-action:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.quick-action--active {
    background: var(--primary);
    color: #fff;
}

.quick-action:visited { color: var(--text-mid); }
.quick-action--active:visited { color: #fff; }

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 900px) {
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
    }

    .page-header-side {
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .main-nav .nav-link.logout-link {
        margin-left: 0;
    }
}

/* ================================================
   STATUS & FEEDBACK
   ================================================ */
.error {
    color: #c53030;
    font-size: 14px;
}

.success {
    color: #166534;
    font-size: 14px;
}

.footer {
    margin-top: 2.5rem;
    padding: 1.25rem 2.5rem;
    font-size: 0.8rem;
    color: var(--text-light);
    border-top: 1px solid var(--border-light);
}

.footer a {
    color: var(--text-light);
    text-decoration: none;
}

.footer a:hover {
    color: var(--primary);
}

/* ================================================
   VARIABLE-BALKEN (AUSWERTUNG)
   ================================================ */
.eval-var-bar {
    margin: 0.35rem 0 0.6rem 0;
}

.eval-var-bar-track {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: var(--border-light);
    overflow: hidden;
}

.eval-var-bar-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #2B6CB0, #4299E1);
}

.eval-var-bar-label {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ================================================
   TABELLEN — Stitch Design System
   ================================================ */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(193, 199, 210, 0.15);
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.data-table th,
.data-table td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(193, 199, 210, 0.15);
    vertical-align: top;
}

.data-table tr:last-child th,
.data-table tr:last-child td {
    border-bottom: none;
}

.data-table th {
    width: 25%;
    background: var(--surface-low);
    font-weight: 600;
    color: var(--text-mid);
    text-align: left;
    font-size: 0.85rem;
}

.data-table td {
    background: #FFFFFF;
}

.data-table input[type="text"],
.data-table textarea,
.data-table select {
    width: 100%;
    box-sizing: border-box;
}

.variable-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.variable-btn {
    padding: 6px 12px;
    background: #e0e0e0;
    border: 1px solid #bbb;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
}

.variable-btn:hover {
    background: #d5d5d5;
}

.variable-btn.active {
    background: var(--primary);
    color: white;
    border-color: #1A4A8A;
}

/* Tabs im Layout-Editor */
.layout-target-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.layout-target-tabs a {
    padding: 0.4rem 1rem;
    border-radius: 8px;
    border: 1px solid #cbd5e0;
    background: #edf2f7;
    color: #2d3748;
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background 0.15s;
}

.layout-target-tabs a.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    font-weight: 600;
}

/* ================================================
   FORMULAR-CONTROLS — Stitch Design System
   ================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="url"],
select,
textarea {
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--surface-low);
    border: 1px solid transparent;
    border-bottom: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    outline: none;
    background: #fff;
    border-color: transparent;
    border-bottom-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 83, 148, 0.06);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

input[type="hidden"] {
    display: none !important;
}

/* Nicht jedes Feld im Bestand traegt .form-input — viele stehen ohne Klasse
   oder mit einer seitenlokalen. Sie fielen deshalb weiter unter die
   Daumengrenze, obwohl die Klasse repariert war. Ankreuzfelder und
   Auswahlknoepfe bleiben aussen vor: dort ist das Quadrat die Marke, und die
   Trefferflaeche gehoert an das zugehoerige Label. */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
    min-height: 44px;
    box-sizing: border-box;
}

.form-input {
    /* Ohne Mindesthoehe traegt nur die Zeilenhoehe das Feld — ein <select> hat
       keine und fiel deshalb auf 25px zusammen, obwohl es dieselbe Klasse
       traegt wie seine Nachbarn. */
    min-height: 44px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--surface-low);
    border: 1px solid transparent;
    border-bottom: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    width: 100%;
}

.form-input:focus {
    outline: none;
    background: #fff;
    border-bottom-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(43,108,176,0.08);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

/* KEINE VERSALIEN AN FELDBESCHRIFTUNGEN (25.09.2026).
   DESIGN.md fuehrt Versalien ausschliesslich unter „Label" und nennt dort
   Tabellenkoepfe, Badges, Metazeilen und den Markenzusatz — Feldbeschriftungen
   stehen nicht dabei. Die Vorlage setzt sie in Manrope 700 bei 13,5px in der
   Tinte (Designvorschlag/komponenten.css: `.field label`); genau das steht
   jetzt hier. Mit Inter faellt auch die Sperrung weg: Inter tritt laut
   DESIGN.md nur bei Kleinstgraden und in Versalien an.

   Was die alte Regel angerichtet hat: „WAS SOLL IMPORTIERT WERDEN?",
   „E-MAIL-DOMAIN (OPTIONAL)" — und, wo eine Beschriftung einen Personennamen
   trug, „DIETER BOHLEN". Bewacht von docs/tests/test_design_dokument.php. */
.form-group label {
    font-size: 0.84rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.form-row {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1.1rem;
}

.form-row .form-group {
    flex: 1;
    min-width: 160px;
    margin-bottom: 0;
}

/* ================================================
   PAGINIERUNG + LISTENSUCHE
   ================================================ */
.pg-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    position: relative;
}
.pg-search > .material-symbols-outlined {
    position: absolute;
    left: 0.65rem;
    font-size: 20px;
    color: var(--text-light);
    pointer-events: none;
}
.pg-search input[type="search"] {
    flex: 1 1 260px;
    min-width: 0;
    max-width: 360px;
    padding-left: 2.35rem;
}

.pg-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    box-shadow: 0 -1px 0 var(--border-light);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.pg-info b { color: var(--text); font-weight: 700; }
.pg-size {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}
.pg-size label {
    font-size: 0.8rem;
    color: var(--text-light);
    white-space: nowrap;
}
.pg-size select { padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.pg-nav { display: inline-flex; align-items: center; gap: 0.5rem; }
.pg-pos { white-space: nowrap; }

@media (max-width: 640px) {
    .pg-bar { flex-direction: column; align-items: stretch; }
    .pg-size { margin-left: 0; justify-content: space-between; }
    .pg-nav { justify-content: space-between; }
    .pg-search input[type="search"] { max-width: none; }
}

/* ================================================
   BADGES / CHIPS — Stitch Design System
   ================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Inter', 'Manrope', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-green  { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef9c3; color: #854d0e; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-gray   { background: var(--surface-low); color: var(--text-muted); }
.badge-orange { background: #ffedd5; color: #9a3412; }

/* Chip-Variante (für Tags, Kategorien) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: var(--surface-low);
    color: var(--text-muted);
    white-space: nowrap;
    transition: background 0.15s;
}

.chip:hover {
    background: var(--surface-high);
}

.chip.is-active {
    background: var(--primary);
    color: #fff;
}

/* ================================================
   LIST-TABLE — Stitch Design System
   ================================================ */
.list-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(193, 199, 210, 0.15);
    border-radius: var(--radius-xl);
    background: #fff;
    margin-top: 1rem;
    box-shadow: var(--shadow-sm);
}

.list-table thead th {
    background: var(--surface-low);
    color: var(--text-light);
    font-family: 'Inter', 'Manrope', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(193, 199, 210, 0.2);
    text-align: left;
    white-space: nowrap;
    width: auto;
    position: sticky;
    top: 0;
    z-index: 10;
}
.list-table thead th:first-child { border-top-left-radius: var(--radius-xl); }
.list-table thead th:last-child { border-top-right-radius: var(--radius-xl); }
.list-table tbody tr:first-child th:first-child { border-top-left-radius: var(--radius-xl); }
.list-table tbody tr:last-child th { border-bottom-left-radius: var(--radius-xl); }
.list-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-xl); }

.list-table tbody th,
.list-table th:not(thead th) {
    background: var(--bg-light);
    font-weight: 600;
    color: var(--text-mid);
    text-align: left;
    width: 25%;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(193, 199, 210, 0.15);
    vertical-align: top;
}

.list-table tbody tr {
    transition: background 0.15s;
}

.list-table tbody td {
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid rgba(193, 199, 210, 0.1);
    font-size: 0.875rem;
    color: var(--text-mid);
    vertical-align: middle;
}

.list-table tbody tr:last-child td,
.list-table tbody tr:last-child th {
    border-bottom: none;
}

.list-table input[type="text"],
.list-table input[type="email"],
.list-table input[type="password"],
.list-table input[type="number"],
.list-table input[type="date"],
.list-table select,
.list-table textarea {
    width: 100%;
    box-sizing: border-box;
}

/* ================================================
   TOOLBAR / FILTER-LEISTE — Stitch Design System
   ================================================ */
.toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5rem;
}

.toolbar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    background: var(--surface-low);
    border: none;
    border-radius: var(--radius-xl);
    padding: 0.85rem 1.25rem;
    margin-bottom: 1rem;
}

.filter-bar label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.filter-bar select,
.filter-bar input {
    font-size: 0.82rem;
    padding: 0.3rem 0.55rem;
}

/* ================================================
   SECTION-TABS — Stitch Design System (Pill-Style)
   ================================================ */
.section-tabs {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
    padding: 0.3rem;
    background: var(--surface-low);
    border-radius: var(--radius-lg);
    border: none;
    width: fit-content;
}

.section-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius);
    border: none;
    margin-bottom: 0;
    transition: all 0.15s ease;
}

.section-tabs a:hover {
    color: var(--primary);
    background: rgba(0, 83, 148, 0.06);
}

.section-tabs a.is-active {
    color: #fff;
    background: var(--primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* ================================================
   PAGE-TITLE — Stitch Design System
   ================================================ */
.page-title {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 1.75rem;
    line-height: 1.6;
    max-width: 640px;
}

/* ================================================
   LEERE ZUSTÄNDE — Stitch Design System
   ================================================ */
.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--text-light);
    background: var(--surface-low);
    border-radius: var(--radius-xl);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    opacity: 0.4;
    color: var(--primary);
}

.empty-state p {
    margin: 0.35rem 0;
    font-size: 0.9rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* Der Titel traegt die Aussage, der Satz darunter die Begruendung.
   Ohne diesen Unterschied liest sich der leere Zustand wie eine Fehlermeldung. */
.empty-state-title {
    font-weight: 600;
    font-size: 1rem !important;
    color: var(--text);
}

/* Der Weg nach vorn. Ein leerer Zustand ohne Aktion ist eine Sackgasse —
   siehe app/empty_state.php. */
.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.25rem;
}

/* ================================================
   ERSTE SCHRITTE — die Einrichtungskarte auf der Startseite
   Siehe app/onboarding_checklist.php
   ================================================ */
.home-onboarding {
    margin-bottom: 1rem;
}
.home-onboarding .ob-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.home-onboarding h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.home-onboarding .ob-sub {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--text-light);
    max-width: 62ch;
}
.home-onboarding .ob-dismiss {
    margin: 0;
    flex-shrink: 0;
}
.home-onboarding .ob-progress {
    margin: 0.9rem 0 0.25rem;
    font-size: 0.82rem;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}
.home-onboarding .ob-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.home-onboarding .ob-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.25rem;
    border-top: 1px solid var(--border-subtle, rgba(193,199,210,0.25));
}
.home-onboarding .ob-item:first-child {
    border-top: 0;
}
.home-onboarding .ob-item-icon {
    font-size: 22px;
    color: var(--primary);
    flex-shrink: 0;
}
.home-onboarding .ob-item--done .ob-item-icon {
    color: #166534;
}
.home-onboarding .ob-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}
.home-onboarding .ob-item-title {
    font-weight: 600;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
/* Erledigtes wird leiser, nicht durchgestrichen: der Schritt bleibt lesbar,
   weil man ihn spaeter noch einmal braucht. */
.home-onboarding .ob-item--done .ob-item-title,
.home-onboarding .ob-item--done .ob-item-text {
    color: var(--text-light);
}
.home-onboarding .ob-item-text {
    font-size: 0.82rem;
    color: var(--text-light);
}
.home-onboarding .ob-optional {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-light);
    background: var(--surface-low);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}
.home-onboarding .ob-done-label {
    font-size: 0.78rem;
    color: #166534;
    font-weight: 600;
    flex-shrink: 0;
}
.home-onboarding .ob-item .button-primary,
.home-onboarding .ob-item .button-secondary {
    flex-shrink: 0;
    padding: 0.4rem 1.1rem;
    font-size: 0.82rem;
}

@media (max-width: 560px) {
    .home-onboarding .ob-item {
        flex-wrap: wrap;
    }
    .home-onboarding .ob-item .button-primary,
    .home-onboarding .ob-item .button-secondary {
        width: 100%;
        justify-content: center;
        margin-left: 37px;   /* auf die Textspalte ausrichten */
    }
}

/* Ein Suchergebnis ist kein Erstkontakt: hier fehlt nichts, es passt nur
   gerade nichts. Deshalb leiser und ohne Einladung zum Anlegen. */
.empty-state--filtered {
    padding: 2.25rem 1.5rem;
    background: transparent;
}
.empty-state--filtered .empty-state-icon {
    font-size: 2.25rem;
}

/* ================================================
   KALENDER: ABONNIEREN-KARTEN
   ================================================ */
.cal-subscribe-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }

.cal-subscribe-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    min-height: 90px;
    padding: 0.7rem 1rem;
    border: 1px solid #BEE3F8;
    border-radius: 8px;
    background: #EBF4FF;
    gap: 0.2rem;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.15s;
}

.cal-subscribe-card:hover { background: #DBEAFE; border-color: #93C5FD; }

.cal-subscribe-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.cal-subscribe-card a:hover { text-decoration: none; }
.cal-subscribe-card .cs-icon  { font-size: 1.5rem; line-height: 1; }
.cal-subscribe-card .cs-title { font-size: 0.9rem; font-weight: 700; color: var(--primary); }
.cal-subscribe-card .cs-sub   { font-size: 0.75rem; color: var(--text-muted); }

.cal-info-box {
    margin-top: 0.85rem;
    padding: 0.65rem 0.9rem;
    background: #F0FFF4;
    border: 1px solid #C6F6D5;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #276749;
}

.cal-info-box strong { color: #22543D; }

/* ================================================
   Typeahead / Autocomplete
   ================================================ */

.ta-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.ta-input {
    width: 100%;
    padding: 0.35rem 2rem 0.35rem 0.5rem;
    border: 1px solid var(--border, #CBD5E0);
    border-radius: 4px;
    font-size: 0.9rem;
    box-sizing: border-box;
    background: #fff;
    color: var(--text, #333);
}

.ta-input:focus {
    outline: none;
    border-color: var(--primary, #2b6cb0);
    box-shadow: 0 0 0 2px rgba(43,108,176,0.15);
}

.ta-arrow {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-light, #676b75);
    font-size: 0.7rem;
}
.ta-arrow::after { content: '▾'; }

.ta-list {
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border, #CBD5E0);
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.ta-item {
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ta-item:hover,
.ta-item.ta-active {
    background: var(--primary-light, #e8f0fb);
    color: var(--primary, #2b6cb0);
}

.ta-item mark {
    background: none;
    font-weight: 700;
    color: var(--primary, #2b6cb0);
}

.ta-empty {
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text-light, #676b75);
    font-style: italic;
}

/* Filter-Eingabe für Multi-Select */
.ta-multi-filter {
    display: block;
    width: 100%;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.3rem;
    border: 1px solid var(--border, #CBD5E0);
    border-radius: 4px;
    font-size: 0.85rem;
    box-sizing: border-box;
    background: #fff;
}

.ta-multi-filter:focus {
    outline: none;
    border-color: var(--primary, #2b6cb0);
}

/* ================================================
   SHARED: page-header-main flex (curricula, forms,
   form_template_edit, form_submissions,
   form_submission_view)
   ================================================ */
.page-header-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* ================================================
   SHARED: scope-pill (forms, test_library,
   form_template_edit)
   ================================================ */
.scope-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #bfcee6;
    background: #eef3fb;
    color: #23415f;
    font-size: 12px;
    font-weight: 600;
}
.scope-pill.scope-global { background:#e8f3ff; border-color:#9ec6f1; color:#1d4f85; }
.scope-pill.scope-provider { background:#eef8ef; border-color:#a6d8ab; color:#2d6a34; }
.scope-pill.scope-school { background:#fff3e8; border-color:#f3c8a6; color:#8a4f1d; }

/* ================================================
   SHARED: stack layout (gremien, gremien_meeting)
   ================================================ */
.stack { display:flex; flex-wrap:wrap; gap:0.35rem; align-items:center; }

/* ================================================
   SHARED: tight table cells (gremien, gremien_meeting)
   ================================================ */
.tight th, .tight td { padding:0.45rem 0.6rem; }

/* ================================================
   SHARED: muted text (gremien, gremien_meeting)
   ================================================ */
.muted { color:#676b75; font-size:0.82rem; }

/* ================================================
   SHARED: rich-toolbar / rich-btn
   (gremien_meeting, project_view)
   ================================================ */
.rich-toolbar {
    display:flex;
    gap:0.35rem;
    flex-wrap:wrap;
    margin:0.35rem 0;
}
.rich-btn {
    border:1px solid #CBD5E0;
    background:#F7FAFC;
    padding:0.2rem 0.5rem;
    border-radius:4px;
    font-size:0.85rem;
    cursor:pointer;
}

/* ================================================
   SHARED: actions-cell (test_library, test_runs)
   ================================================ */
.cell-actions {
    white-space:nowrap;
}
.actions-cell {
    display:flex;
    flex-wrap:nowrap;
    gap:0.25rem;
}

/* ================================================
   === page: home.php ===
   ================================================ */
.home-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:1rem;
}
.home-header > div:first-child {
    flex: 1 1 auto;
}
.home-mini-calendar {
    width: 320px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    background: #F8FAFC;
}
.mini-cal-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-size: 0.72rem;
}
.mini-cal-dow {
    text-align: center;
    color: #676b75;
    font-weight: 600;
    padding: 2px 0;
}
.mini-cal-day {
    min-height: 26px;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #fff;
}
.mini-cal-day a {
    text-decoration: none;
    color: #1F2937;
    width: 100%;
    text-align: center;
}
.mini-cal-dot {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.mini-upcoming {
    margin-top: 0.5rem;
    border-top: 1px solid #E2E8F0;
    padding-top: 0.4rem;
}
.mini-upcoming a {
    text-decoration: none;
}
.home-grid { display:block; }
.home-kpis {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0.75rem;
}
.kpi {
    border:1px solid #E2E8F0;
    border-radius:8px;
    padding:0.6rem 0.75rem;
    background:#F8FAFC;
}
.kpi .label {
    font-size:0.82rem;
    color:#4A5568;
}
.kpi .value {
    margin-top:0.15rem;
    font-size:1.2rem;
    font-weight:700;
    color:#2D3748;
}
.feed-list {
    display:flex;
    flex-direction:column;
    gap:0.55rem;
}
.feed-item {
    border:1px solid #E2E8F0;
    border-radius:8px;
    padding:0.55rem 0.7rem;
    background:#fff;
}
.feed-meta {
    font-size:0.78rem;
    color:#676b75;
    margin-bottom:0.2rem;
}
.feed-title {
    font-weight:600;
    color:#1F2937;
}
.feed-msg {
    margin-top:0.2rem;
    font-size:0.9rem;
    color:#374151;
}
.info-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:0.75rem;
}
.mini-list {
    margin:0;
    padding-left:1rem;
}
.mini-list li {
    margin-bottom:0.4rem;
}
.mini-muted {
    color:#676b75;
    font-size:0.82rem;
}
.mini-status {
    display:inline-block;
    padding:0.1rem 0.35rem;
    border-radius:999px;
    font-size:0.72rem;
    margin-left:0.35rem;
    background:#E2E8F0;
    color:#1F2937;
}
.todo-list {
    display:flex;
    flex-direction:column;
    gap:0.55rem;
}
.todo-item {
    border:1px solid #E2E8F0;
    border-radius:8px;
    padding:0.55rem 0.7rem;
    background:#fff;
    display:grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap:0.55rem;
}
.todo-title { font-weight:600; color:#1F2937; }
.todo-meta { font-size:0.8rem; color:#676b75; }
.todo-actions {
    display:flex;
    flex-wrap:wrap;
    gap:0.35rem;
    align-content:flex-start;
    justify-content:flex-end;
}
.todo-prio {
    display:inline-block;
    padding:0.08rem 0.45rem;
    border-radius:999px;
    font-size:0.72rem;
    font-weight:600;
    margin-left:0.35rem;
}
.todo-prio-hoch { background:#FEE2E2; color:#B91C1C; }
.todo-prio-mittel { background:#FEF3C7; color:#92400E; }
.todo-prio-niedrig { background:#DBEAFE; color:#1E40AF; }
.todo-status-rueckfrage { background:#FCE7F3; color:#9D174D; }
.todo-status-neu { background:#DCFCE7; color:#166534; }
.todo-status-offen { background:#E2E8F0; color:#1F2937; }
.todo-topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:0.6rem;
    flex-wrap:wrap;
    margin-bottom:0.6rem;
}
.todo-manual-form {
    margin-top:0.8rem;
    padding-top:0.8rem;
    border-top:1px solid #E2E8F0;
}
.todo-manual-grid {
    display:grid;
    grid-template-columns:2fr 2fr 1fr 1fr auto;
    gap:0.45rem;
}
@media (max-width: 1024px) {
    .home-grid { display:block; }
    .todo-manual-grid {
        grid-template-columns:1fr 1fr;
    }
}
@media (max-width: 720px) {
    .home-kpis {
        grid-template-columns:1fr;
    }
    .info-grid {
        grid-template-columns:1fr;
    }
    .home-header {
        flex-direction: column;
    }
    .home-mini-calendar {
        width: 100%;
    }
    .todo-item {
        grid-template-columns:1fr;
    }
    .todo-manual-grid {
        grid-template-columns:1fr;
    }
}

/* ================================================
   === page: calendar.php ===
   ================================================ */
.calendar-event-link { text-decoration: none; color: #1F2937; }
.calendar-event-link:hover { text-decoration: none; color: #2B6CB0; }

/* ================================================
   === page: forms.php ===
   ================================================ */
.forms-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.forms-actions .button-secondary-small,
.forms-actions .button-danger-small,
.forms-actions .button-primary {
    min-width: 112px;
    justify-content: center;
}
.forms-category-row { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.forms-category-row input[type="text"] { min-width: 220px; }
.forms-category-list { margin-top:0.75rem; }
.forms-category-badge {
    display:inline-block;
    padding:0.1rem 0.45rem;
    border-radius:999px;
    border:1px solid #bfcee6;
    color:#2a456a;
    background:#eef3fb;
    font-size:12px;
    font-weight:600;
}
.forms-filter { margin-top:0.5rem; display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.forms-filter select { min-width: 220px; }
.forms-group-row td {
    background: #eef3fb;
    font-weight: 700;
    color: #23415f;
}

/* ================================================
   === page: gremien.php ===
   ================================================ */
.gremia-grid { display:grid; grid-template-columns: 1.3fr 1.7fr; gap:1rem; }
.gremia-list a { text-decoration:none; color:#1a202c; display:block; padding:0.55rem 0.75rem; border-radius:6px; border:1px solid #e2e8f0; background:#fff; margin-bottom:0.4rem; }
.gremia-list a.active { background:#ebf4ff; border-color:#90cdf4; }
/* -- Inline member panel in sidebar -- */
.gremia-member-panel{background:#f7fafc;border:1px solid #e2e8f0;border-top:none;border-radius:0 0 6px 6px;padding:0.75rem;margin-top:-0.4rem;margin-bottom:0.4rem;}
.gremia-member-panel h4{margin:0 0 0.5rem;font-size:0.88rem;}
.gremia-member-panel .list-table{font-size:0.82rem;}
.gremia-member-panel .list-table th,.gremia-member-panel .list-table td{padding:0.3rem 0.5rem;}
.gremia-member-toggle{display:inline-flex;align-items:center;gap:4px;font-size:0.78rem;color:#4a5568;background:#edf2f7;border:1px solid #e2e8f0;border-radius:4px;padding:2px 8px;margin-top:4px;cursor:pointer;text-decoration:none;transition:background .15s;}
.gremia-member-toggle:hover{background:#e2e8f0;color:#2d3748;}
.gremia-list a.active{border-radius:6px 6px 0 0;margin-bottom:0;}
.gremia-list a.active + .gremia-member-panel{display:block;}
.member-cb-item:hover{background:#edf2f7;}
.member-add-details[open] summary{margin-bottom:0;}

/* ================================================
   === page: gremien_meeting.php ===
   ================================================ */
.gremia-two-col { display:grid; grid-template-columns: 1.2fr 1.8fr; gap:1rem; }
.agenda-card { border:1px solid #d9e2ef; border-radius:8px; padding:0.8rem; margin-bottom:0.85rem; background:#fff; }
.agenda-title-row { display:flex; justify-content:space-between; gap:0.5rem; align-items:flex-start; }
.agenda-minutes { min-height:140px; border:1px solid #cbd5e0; border-top:0; padding:0.6rem; }
.attendance-buttons { display:flex; gap:0.25rem; flex-wrap:wrap; }
.attendance-btn {
    border:1px solid #cbd5e0;
    background:#fff;
    color:#2d3748;
    border-radius:999px;
    padding:0.15rem 0.5rem;
    font-size:0.75rem;
    cursor:pointer;
}
.attendance-btn.active {
    background:#2b6cb0;
    border-color:#2b6cb0;
    color:#fff;
}
.decision-box {
    width:100%;
    min-height:90px;
    border:1px solid #cbd5e0;
    border-radius:8px;
    padding:0.6rem;
    box-sizing:border-box;
}
.vote-row { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.4rem; }
.vote-pill {
    display:flex;
    align-items:center;
    gap:0.3rem;
    border:1px solid #cbd5e0;
    border-radius:999px;
    padding:0.2rem 0.55rem;
    background:#f8fafc;
}
.vote-pill input { width:70px; }

/* ================================================
   === page: project_view.php ===
   ================================================ */
.kanban { display:flex; gap:12px; flex-wrap:wrap; }
.kanban-col { flex:1; min-width:220px; background:#F7FAFC; border:1px solid #E2E8F0; border-radius:8px; padding:8px; display:flex; flex-direction:column; }
.kanban-list { min-height:120px; padding:6px; border-radius:6px; }
.kanban-col h4 { margin:0 0 8px; font-size:14px; color:#2D3748; }
.task-card { background:#fff; border:1px solid #E2E8F0; border-radius:6px; padding:8px; margin-bottom:8px; }
.task-card { position:relative; padding-left:12px; }
.task-card::before {
    content:'';
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:5px;
    border-radius:6px 0 0 6px;
    background: var(--task-color, #2B6CB0);
}
.task-card.can-drag { cursor: grab; }
.task-card.can-drag:active { cursor: grabbing; }
.pill { display:inline-block; background:#EDF2F7; color:#2D3748; border-radius:999px; padding:2px 8px; font-size:12px; }
.result-pill { display:inline-flex; align-items:center; gap:6px; background:#EBF4FF; color:#2B6CB0; border:1px solid #BEE3F8; border-radius:999px; padding:2px 8px; font-size:12px; text-decoration:none; }
.result-remove { border:none; background:transparent; color:#C53030; font-size:12px; cursor:pointer; padding:0; }
.tabs { display:flex; gap:8px; margin-top:8px; }
.tabs a { padding:6px 10px; border-radius:999px; text-decoration:none; background:#E2E8F0; color:#2D3748; font-size:13px; }
.tabs a.active { background:#2B6CB0; color:#fff; }
.column-actions { display:flex; gap:6px; align-items:center; }
.column-actions form { display:inline-flex; gap:6px; align-items:center; margin:0; }
.column-actions input[type="text"] { width:120px; }
.assign-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.assign-form select { min-width:200px; }
.task-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.task-color-palette { display:flex; gap:5px; margin-top:6px; flex-wrap:wrap; }
.task-color-dot {
    width:14px;
    height:14px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.18);
    cursor:pointer;
    padding:0;
}
.task-color-dot.active { box-shadow:0 0 0 2px rgba(43,108,176,.2); border-color:#2B6CB0; }
.event-edit-form { display:flex; gap:8px; flex-wrap:wrap; }
.gantt-track { position:relative; height:14px; background:#E2E8F0; border-radius:999px; overflow:hidden; }
.gantt-bar { position:absolute; top:0; height:100%; background:#2B6CB0; border-radius:999px; }
.phase-card { border:1px solid #E2E8F0; border-radius:8px; padding:10px; background:#fff; margin-bottom:10px; }
.dt-transition {
    border: 1px solid #BEE3F8;
    background: #EBF8FF;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.dt-feedback-list {
    margin-top: 8px;
    display: grid;
    gap: 8px;
}
.dt-feedback-entry {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px;
    background: #FFFFFF;
}
.dt-feedback-entry .meta {
    color: #676b75;
    font-size: 12px;
    margin-bottom: 6px;
}
.dt-feedback-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}
.dt-feedback-grid > div {
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 8px;
    background: #F8FAFC;
}
.dt-feedback-grid > div strong {
    display: block;
    margin-bottom: 4px;
}
.dt-decisions-form .field-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 8px;
    align-items: center;
}
.dt-decisions-form textarea {
    width: 100%;
    min-height: 96px;
}
.okr-grid {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.okr-objective {
    border:1px solid #D1E3FF;
    border-radius:8px;
    background:#F8FBFF;
    padding:10px;
    margin-bottom:12px;
}
.okr-kr-card {
    border:1px solid #E2E8F0;
    border-radius:8px;
    background:#fff;
    padding:10px;
    margin-bottom:8px;
}
.okr-progress {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: #E2E8F0;
    overflow: hidden;
    margin-top: 6px;
}
.okr-progress > span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #2B6CB0;
}
.okr-checkins {
    margin-top: 8px;
    border-top: 1px dashed #CBD5E0;
    padding-top: 8px;
}
.okr-checkin-item {
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 6px 8px;
    background: #F9FAFB;
    margin-bottom: 6px;
}
.rich-editor {
    border:1px solid #CBD5E0;
    border-radius:6px;
    padding:0.45rem;
    min-height:200px;
    background:#fff;
}

/* ================================================
   === page: test_editor.php ===
   ================================================ */
.data-table th {
    width: 220px;
    vertical-align: top;
    background: #f5f7fb;
}
.data-table td {
    vertical-align: top;
}
.data-table input[type="text"],
.data-table select,
.data-table textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
}
.data-table textarea {
    min-height: 90px;
    resize: vertical;
}
.data-table textarea[name="publication"] {
    min-height: 70px;
}

/* ================================================
   === page: test_results.php ===
   ================================================ */
.chart-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    gap:1rem;
}
.chart-card {
    max-width:520px;
    width:100%;
    margin:0 auto;
    padding:0.75rem 1rem;
}
.chart-canvas {
    max-height:220px;
}

/* ================================================
   === page: test_result_individual.php ===
   ================================================ */
.individual-chart-wrap {
    max-width: 520px;
    margin: 0.35rem auto 0;
}

/* ================================================
   === page: schooladmin.php ===
   ================================================ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.card-grid .card {
    display:flex;
    flex-direction:column;
}
.card-grid .card p {
    flex-grow:1;
}
.card-grid .card .form-actions {
    margin-top:auto;
}
.card h3 {
    margin-top: 0;
}
@media (max-width: 1400px) {
    .card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 1100px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   === page: account_settings.php ===
   ================================================ */
.form-group small {
    display:block;
    margin-top:0.2rem;
    font-size:0.8rem;
    color:#4A5568;
}

/* ================================================
   === page: form_template_edit.php ===
   ================================================ */
.field-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.field-actions .button-secondary-small,
.field-actions .button-danger-small { min-width: 102px; justify-content: center; }

/* ================================================
   === page: form_submissions.php ===
   ================================================ */
.submissions-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.submissions-actions .button-secondary-small { min-width: 92px; justify-content: center; }

/* ================================================
   === page: help_center.php ===
   ================================================ */
.help-step {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}
.help-step:last-child {
    margin-bottom: 0;
}
.help-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2B6CB0;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.help-step-body h4 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    color: #1a365d;
}
.help-step-body p {
    margin: 0 0 0.6rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #2d3748;
}
.help-step-image {
    max-width: 100%;
    border: 1px solid #CBD5E0;
    border-radius: 8px;
    margin-top: 0.5rem;
}
.help-step-image-placeholder {
    display: inline-block;
    border: 1px dashed #CBD5E0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    color: #676b75;
    background: #F7FAFC;
    margin-top: 0.4rem;
}
.help-coming-soon {
    border: 1px dashed #CBD5E0;
    border-radius: 8px;
    padding: 1rem;
    background: #F8FAFC;
    color: #676b75;
    font-size: 0.875rem;
}

/* ================================================
   DRAG HANDLE (SortableJS rows)
   ================================================ */
.drag-handle {
    cursor: grab;
    user-select: none;
    /* Bedienelement, nicht Dekoration: 2.26:1 war zu blass zum Finden. */
    color: #676b75;
    font-size: 1.1rem;
}
.drag-handle:active {
    cursor: grabbing;
}
.sortable-ghost {
    background: #EBF8FF !important;
    opacity: 0.6;
}

/* ================================================
   RESPONSIVE: Table wrapper
   ================================================ */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    overflow: hidden;
}

/* Sticky header: scrollbare Tabellen mit fixiertem Kopf.
   overflow wird auf auto gesetzt, damit sticky funktioniert. */
.table-responsive.table-sticky {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--border-light);
}

.table-responsive.table-sticky .list-table {
    border: none;
    border-radius: 0;
    margin-top: 0;
}

/* ================================================
   RESPONSIVE: Mobile breakpoints
   ================================================ */

/* --- Tables (.list-table) --- */
@media (max-width: 768px) {
    .list-table {
        font-size: 0.82rem;
    }
    .list-table th,
    .list-table td {
        padding: 0.4rem 0.5rem;
    }
    /* Hide low-priority columns on mobile */
    .list-table .hide-mobile {
        display: none;
    }
}

/* --- Navigation --- */
@media (max-width: 768px) {
    header nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
    }
    .nav-link {
        font-size: 0.82rem;
        padding: 0.4rem 0.6rem;
    }
}

/* --- Forms inside tables --- */
@media (max-width: 768px) {
    .list-table input[type="text"],
    .list-table input[type="email"],
    .list-table input[type="number"],
    .list-table select,
    .list-table textarea {
        min-width: 120px;
    }
}

/* --- Gremien two-column grid --- */
@media (max-width: 768px) {
    .gremia-grid {
        grid-template-columns: 1fr;
    }
    .gremia-two-col {
        grid-template-columns: 1fr;
    }
}

/* --- Calendar month grid --- */
@media (max-width: 768px) {
    .calendar-month-table {
        font-size: 0.75rem;
    }
    .calendar-month-table td {
        min-height: 60px;
        padding: 2px;
    }
}

/* --- Toast container --- */
@media (max-width: 480px) {
    #toast-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
}

/* --- Quick actions grid --- */
@media (max-width: 480px) {
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   BREADCRUMBS
   ================================================ */
.breadcrumbs {
    font-family: 'Inter', 'Manrope', system-ui, sans-serif;
    font-size: 0.78rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.breadcrumbs a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs-sep {
    margin: 0 0.4rem;
    color: #A0AEC0;
}

.breadcrumbs-current {
    color: var(--text-mid);
    font-weight: 600;
}

/* ================================================
   SECTION TITLE WITH ICON (global pattern)
   ================================================ */
.section-title-icon,
.gremia-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.section-title-icon h3,
.section-title-icon h4,
.gremia-section-title h3,
.gremia-section-title h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.section-title-icon > .material-symbols-outlined,
.gremia-section-title > .material-symbols-outlined {
    color: var(--primary);
    font-size: 20px;
}

/* ================================================
   TAB NAVIGATION
   ================================================ */
.tab-nav {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid var(--border-light);
    margin: 0.75rem 0 0;
    gap: 0;
    overflow: visible;
}

.tab-nav-left {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.tab-nav-right {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-left: auto;
}

.tab-nav-item {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-light);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: inherit;
    transition: color 0.12s, border-color 0.12s;
}

.tab-nav-item:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.tab-nav-item--active {
    color: var(--primary);
    font-weight: 600;
    border-bottom-color: var(--primary);
}

.tab-nav-item:visited {
    color: var(--text-light);
}

.tab-nav-item--active:visited {
    color: var(--primary);
}

/* Tab dropdown */
.tab-nav-dropdown {
    position: relative;
}

.tab-nav-caret {
    font-size: 0.6em;
    margin-left: 0.2rem;
    vertical-align: middle;
}

.tab-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 0.3rem 0;
    margin-top: 2px;
}

.tab-nav-dropdown.open > .tab-nav-dropdown-menu,
.tab-nav-dropdown:hover > .tab-nav-dropdown-menu,
.tab-nav-dropdown:focus-within > .tab-nav-dropdown-menu {
    display: block;
}

.tab-nav-dropdown-item {
    display: block;
    padding: 0.45rem 1rem;
    font-size: 0.82rem;
    color: var(--text-mid);
    text-decoration: none;
    white-space: nowrap;
}

.tab-nav-dropdown-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.tab-nav-dropdown-item--active {
    font-weight: 600;
    color: var(--primary);
}

.tab-nav-dropdown-item:visited {
    color: var(--text-mid);
}

.tab-nav-dropdown-item--active:visited {
    color: var(--primary);
}

@media (max-width: 768px) {
    .tab-nav {
        flex-wrap: wrap;
    }

    .tab-nav-item {
        padding: 0.4rem 0.7rem;
        font-size: 0.78rem;
    }
}

/* ================================================
   DRAG-AND-DROP FILE UPLOAD ZONE
   ================================================ */
.file-drop-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}

.file-drop-zone:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.file-drop-zone.drag-over {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.15);
}

.file-drop-zone .drop-icon {
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
}

.file-drop-zone .drop-text {
    font-size: 0.88rem;
    color: var(--text-muted);
}

.file-drop-zone .drop-text strong {
    color: var(--primary);
}

.file-drop-zone .drop-hint {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 0.3rem;
}

.file-drop-zone .file-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-subtle);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-mid);
}

.file-drop-zone .file-preview .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-drop-zone .file-preview .file-remove {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 0.3rem;
    line-height: 1;
}

.file-drop-zone .file-preview .file-remove:hover {
    color: #C53030;
}

/* ================================================
   FLOATING ACTION BUTTON (Mobile)
   ================================================ */
.fab-container {
    display: none;
}

@media (max-width: 768px) {
    .fab-container {
        display: block;
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 900;
    }

    .fab-toggle {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s, background 0.2s;
    }

    .fab-toggle:hover,
    .fab-toggle:focus {
        background: var(--primary-hover);
    }

    .fab-container.open .fab-toggle {
        transform: rotate(45deg);
    }

    .fab-menu {
        position: absolute;
        bottom: 62px;
        right: 0;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        opacity: 0;
        transform: translateY(10px) scale(0.95);
        pointer-events: none;
        transition: opacity 0.2s, transform 0.2s;
    }

    .fab-container.open .fab-menu {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .fab-action {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 999px;
        font-size: 0.82rem;
        color: var(--text-mid);
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transition: background 0.15s;
    }

    .fab-action:hover {
        background: var(--bg-subtle);
    }

    /* Quick-Actions auf Mobile verstecken wenn FAB vorhanden */
    .page-header-side .quick-action-list {
        display: none;
    }
}

/* ===== RICHTEXT CONTENT (Schulprogramm inline media) ===== */

.richtext-content::after {
    content: '';
    display: table;
    clear: both;
}

.richtext-content img {
    max-width: 100%;
    height: auto;
}

.richtext-content video {
    max-width: 100%;
    height: auto;
}

/* ================================================
   STITCH UTILITIES & COMPONENTS
   ================================================ */

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Inter', 'Manrope', system-ui, sans-serif;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
}

.breadcrumbs a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumbs a:hover {
    color: var(--primary);
}

.breadcrumbs .breadcrumbs-current {
    color: var(--primary);
    font-weight: 600;
}

.breadcrumbs .material-symbols-outlined {
    font-size: 14px;
    color: var(--text-light);
}

/* Section Title mit Icon */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    margin-top: 2rem;
}

.section-header:first-child {
    margin-top: 0;
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.section-header-left .material-symbols-outlined {
    font-size: 22px;
    color: var(--primary);
}

.section-header h2,
.section-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.section-header .section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--surface-low);
    color: var(--text-muted);
    font-family: 'Inter', 'Manrope', system-ui, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Stat-Cards (Dashboard-Style) */
.stat-card {
    background: var(--surface-low);
    border-radius: var(--radius-xl);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.stat-card-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.stat-card-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Progress-Bars (Evolution Tracker) */
.progress-bar {
    height: 6px;
    width: 100%;
    background: var(--surface-high);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--primary-container));
    transition: width 0.4s ease;
}

/* Grid-Layouts */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

@media (max-width: 1024px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Spacing-Utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

/* Flex-Utilities */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ================================================
   APP-SHELL: SIDEBAR NAVIGATION
   ================================================ */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 256px;
    height: 100vh;
    background: var(--surface-low);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0 0;
    overflow: hidden;
    z-index: 100;
    transition: transform 0.25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
}

.sidebar-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #005394 0%, #2b6cb0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 83, 148, 0.2);
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sidebar-brand-name {
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.01em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-brand-claim {
    font-family: 'Inter', 'Manrope', system-ui, sans-serif;
    font-size: 0.6rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* --- Nav Links --- */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 0.75rem;
    overflow-y: auto;
    min-height: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 3px solid transparent;
}

.sidebar-link:visited {
    color: var(--text-muted);
}

.sidebar-link:hover {
    color: var(--primary);
    background: rgba(0, 83, 148, 0.05);
}

.sidebar-link.is-active {
    color: var(--primary);
    background: rgba(0, 83, 148, 0.08);
    font-weight: 600;
    border-right-color: var(--primary);
}

.sidebar-link.is-active:visited {
    color: var(--primary);
}

.sidebar-link .material-symbols-outlined {
    font-size: 22px;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* --- Sidebar Footer (User Area) --- */
.sidebar-footer {
    margin-top: auto;
    padding: 0.75rem 0.75rem 1.25rem;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.6);
}

.sidebar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-user-info {
    min-width: 0;
    flex: 1;
}

.sidebar-user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-family: 'Inter', 'Manrope', system-ui, sans-serif;
    font-size: 0.65rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    margin-top: 0.35rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-light);
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.sidebar-logout:visited {
    color: var(--text-light);
}

.sidebar-logout:hover {
    color: #c53030;
    background: rgba(197, 48, 48, 0.05);
}

/* --- Main Content Area (neben Sidebar) --- */
.app-content {
    margin-left: 256px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* --- Top Bar (kontextuell, in app-content) --- */
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 1.5rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.app-topbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.app-topbar-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Ein-Titel-Regel: unsichtbar, solange die Kopfzone den Namen traegt.
       Kein display:none und kein Inline-opacity — beides filtert der Server. */
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.app-topbar-title.is-shown {
    opacity: 1;
    transform: none;
}

/* ================================================
   TOPBAR OHNE EIGENEN PLATZ (Ein-Titel-Regel, zweiter Teil)
   Steht die Kopfzone ganz oben, legt sich die Leiste durchsichtig
   darueber statt 56px weiss zu verbrauchen. Die Glocke sitzt dann
   weiss auf dem Blau. Beim Scrollen wird die Leiste wieder fest.
   Die Klasse setzt das Skript nur, wenn die Kopfzone wirklich das
   erste Element im Inhalt ist — sonst bleibt alles beim Alten.
   ================================================ */
body.hero-leads main {
    /* Die Leiste ist 56px hoch, <main> hat 1.25rem Innenabstand oben.
       Beides muss weg, damit die Kopfzone wirklich am oberen Rand beginnt —
       sonst haengt die Glocke halb ueber der Kante. */
    margin-top: -56px;
    padding-top: 0;
}
.page-hero.is-lead {
    /* Kein Ausgleich fuer die entfallene Leiste — sonst waere nichts gewonnen.
       Die Kopfzone behaelt ihren normalen Innenabstand, der Inhalt rueckt um
       die vollen 76px nach oben. */
    padding-top: 1.25rem;
    /* Beruehrt sie den oberen Rand, sind runde Ecken dort falsch:
       oben gerade, unten weiter 16px. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Rechts oben sitzt die Glocke — die eigenen Aktionen weichen ihr aus,
   statt sich mit ihr zu ueberlagern. */
.page-hero.is-lead .page-hero-top {
    padding-right: 52px;
}
body.hero-leads .app-topbar {
    background: transparent;
    /* Die durchsichtige Leiste liegt ueber der Kopfzone und fing sonst
       jeden Klick ab, der eigentlich einer Kopfzonen-Aktion galt.
       Sie laesst Klicks jetzt durch; ihre eigenen Bedienelemente
       nehmen sie ueber die Regel darunter wieder an. */
    pointer-events: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease;
}
/* Nur die echten Bedienelemente nehmen Klicks an — nicht die Wrapper-Boxen.
   Die linke Box liegt sonst ueber dem Home-Link der Brotkrume. */
body.hero-leads .app-topbar .topbar-icon-btn,
body.hero-leads .app-topbar .burger-btn,
body.hero-leads .app-topbar .notif-wrap,
body.hero-leads .app-topbar .notif-dropdown {
    pointer-events: auto;
}
body.hero-leads .app-topbar.is-stuck {
    /* Deckend darf sie wieder alles annehmen.
       Voll deckend statt 85 % mit Weichzeichner: Sie traegt beim Scrollen
       Titel UND primaere Aktion, darunter liegt eine dichte Tabelle —
       durchscheinend wurde beides milchig. */
    pointer-events: auto;
    background: var(--card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
/* Auf dem Blau muessen Glocke und Burger weiss sein */
/* Auf dem Blau bekommen Glocke und Burger dasselbe Gewand wie die leisen
   Aktionen der Kopfzone — sonst schweben sie als nackte Symbole herum.
   44px, damit die 44er-Regel auch hier gilt. */
body.hero-leads .app-topbar:not(.is-stuck) .topbar-icon-btn,
body.hero-leads .app-topbar:not(.is-stuck) .burger-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.18s ease;
}
body.hero-leads .app-topbar:not(.is-stuck) .topbar-icon-btn:hover,
body.hero-leads .app-topbar:not(.is-stuck) .burger-btn:hover {
    background: rgba(255, 255, 255, 0.26);
}
body.hero-leads .app-topbar:not(.is-stuck) .topbar-icon-btn:focus-visible,
body.hero-leads .app-topbar:not(.is-stuck) .burger-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
/* Der rote Zaehler braucht auf Blau einen Rand, sonst verschwimmt er */
body.hero-leads .app-topbar:not(.is-stuck) .notif-badge {
    box-shadow: 0 0 0 2px rgba(0, 83, 148, 0.55);
}
/* Etwas Luft zum rechten Rand, damit die Glocke nicht an der Kante klebt */
body.hero-leads .app-topbar:not(.is-stuck) {
    padding-right: 1.25rem;
}
@media (max-width: 640px) {
    .page-hero.is-lead { padding-top: 1.25rem; }
    .page-hero.is-lead .page-hero-top { padding-right: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    body.hero-leads .app-topbar { transition: none; }
}
/* Seiten ohne Kopfzone behalten den Titel dauerhaft.
   Der Klassenname darf die Zeichenfolge "-hero" NICHT enthalten — siehe
   die Regel weiter oben, die auf [class*="-hero"] zielt. */
/* Gespiegelte Kopfzonen-Aktion in der klebenden Leiste: dort steht sie auf
   Weiss, also blau statt weiss, und etwas kompakter als in der Kopfzone. */
.app-topbar .topbar-action {
    background: var(--primary);
    color: #fff !important;
    border: none;
    border-radius: 10px;
    padding: 0 1rem;
    min-height: 38px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 0.5rem;
    white-space: nowrap;
}
.app-topbar .topbar-action:hover { background: var(--primary-hover); }
.app-topbar .topbar-action .material-symbols-outlined { font-size: 18px; }
@media (max-width: 640px) {
    /* Auf schmalen Geraeten nur das Symbol, sonst draengt es den Titel weg */
    .app-topbar .topbar-action { padding: 0; width: 38px; justify-content: center; }
    .app-topbar .topbar-action .topbar-action-text { display: none; }
}

.heroless .app-topbar-title {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .app-topbar-title { transition: none; }
}

.app-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.topbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.topbar-icon-btn:hover {
    background: var(--surface-low);
    color: var(--primary);
}

.topbar-notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e53e3e;
    border: 2px solid #fff;
}

.topbar-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid rgba(0, 83, 148, 0.1);
    transition: all 0.15s;
    text-decoration: none;
}

.topbar-avatar:visited {
    color: #fff;
}

.topbar-avatar:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 83, 148, 0.1);
}

.topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topbar-divider {
    width: 1px;
    height: 24px;
    background: var(--border-light);
    margin: 0 0.25rem;
}

/* --- Burger Button (nur Mobile) --- */
.burger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-mid);
    cursor: pointer;
    border-radius: var(--radius);
    transition: background 0.15s;
}

.burger-btn:hover {
    background: var(--surface-low);
}

/* --- Sidebar Overlay (Mobile) --- */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(24, 28, 31, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99;
}

/* ================================================
   APP-SHELL: RESPONSIVE (Mobile < 1024px)
   ================================================ */
@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.is-open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-overlay.is-open {
        display: block;
    }

    .app-content {
        margin-left: 0;
    }

    .burger-btn {
        display: flex;
    }
}

/* Alte Top-Navigation ausblenden wenn App-Shell aktiv */
.app-shell header:not(.app-topbar) {
    display: none;
}

.app-shell .main-nav {
    display: none;
}

/* === Welle-0-Bausteine === */
/* ================================================
   MODUL-KOPFZONE — Signaturkomponente (DESIGN.md)
   Eine-Kopfzone-Regel: Diese Klasse ist die einzige zugelassene
   Modul-Kopfzone. Den 135-Grad-Verlauf NICHT seitenlokal nachbauen.
   Markup siehe app/page_hero.php.
   ================================================ */
.page-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#005394 0%,#2b6cb0 100%);
  color:#fff;
  border-radius:16px;
  /* Kompakter als zuvor (war 1.75rem 2rem): die Kopfzone steht auf jeder
     Modulseite und darf nicht den halben ersten Bildschirm belegen. */
  padding:1.25rem 2rem;
  margin-bottom:1.25rem;
}
/* Angeschnittene Kreise: die einzige zugelassene Zierflaeche im System */
.page-hero::before{
  content:''; position:absolute; width:200px; height:200px;
  top:-70px; right:-50px; border-radius:50%;
  background:rgba(255,255,255,0.07); pointer-events:none;
}
.page-hero::after{
  content:''; position:absolute; width:120px; height:120px;
  bottom:-40px; left:35%; border-radius:50%;
  background:rgba(255,255,255,0.04); pointer-events:none;
}
.page-hero-inner{ position:relative; z-index:1; }

.page-hero-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
/* Die Aktionen stehen rechts oben — immer.
   Vorher hatte der Titelblock keine Flex-Angabe und war so breit wie sein
   laengster Text. Damit entschied die zufaellige Laenge des UNTERTITELS,
   ob die Knoepfe rechts blieben oder linksbuendig unter den Titel
   rutschten: „Antraege & Formulare" hatte die breiteste Knopfreihe von
   allen (670px) und blieb trotzdem oben, weil sein Untertitel der
   kuerzeste war — waehrend die Testbibliothek mit 624px umbrach.
   Dieselbe Kopfzone sah dadurch von Modul zu Modul anders aus
   (Stephan, 21.09.2026).
   Jetzt nimmt der Titelblock den Restplatz und sein Untertitel bricht um.
   Erst wenn unter 320px fuer ihn bliebe, weichen die Knoepfe nach unten —
   dann aber wegen des Platzes, nicht wegen einer Textlaenge, und auf jeder
   Seite bei derselben Fensterbreite. */
.page-hero-titlewrap{ min-width:0; flex:1 1 320px; }
.page-hero-titlewrap > .public-brand{ margin-bottom:0.75rem; opacity:0.85; }

.page-hero .breadcrumbs,
.page-hero-crumb{
  font-family:'Inter','Manrope',system-ui,sans-serif;
  font-size:0.72rem; letter-spacing:0.06em;
  color:rgba(255,255,255,0.7); margin-bottom:0.35rem;
}
.page-hero .breadcrumbs a,
.page-hero-crumb a{ color:rgba(255,255,255,0.7); text-decoration:none; }
.page-hero .breadcrumbs a:hover,
.page-hero-crumb a:hover{ color:#fff; text-decoration:underline; }
/* Die aktuelle Seite und der Trenner kamen sonst aus den hellen Standardfarben
   der Brotkrumen: Dunkelblau auf Blau war praktisch unsichtbar (19.09.2026). */
.page-hero .breadcrumbs .breadcrumbs-current{ color:rgba(255,255,255,0.92); }
.page-hero .breadcrumbs .breadcrumbs-sep{ color:rgba(255,255,255,0.5); }

.page-hero h1,.page-hero h2{
  color:#fff; margin:0;
  font-size:1.6rem; font-weight:800; line-height:1.15; letter-spacing:-0.02em;
  display:flex; align-items:center; gap:0.55rem;
}
.page-hero h1 .material-symbols-outlined,
.page-hero h2 .material-symbols-outlined{ font-size:26px; opacity:0.9; }
.page-hero-sub{
  margin:0.3rem 0 0; max-width:640px;
  font-size:0.92rem; line-height:1.5; color:rgba(255,255,255,0.85);
}

/* Primaere Aktion rechts oben */
.page-hero-actions{ display:flex; gap:0.5rem; flex-wrap:wrap; flex-shrink:0; margin-left:auto; }
.page-hero-actions .button-primary,
.page-hero-action{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  min-height:44px; box-sizing:border-box;
  background:#fff; color:#005394 !important;
  border:none; border-radius:12px; padding:0.65rem 1.5rem;
  font-family:'Manrope',system-ui,sans-serif; font-size:0.9rem; font-weight:600;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background 0.2s ease;
}
.page-hero-actions .button-primary:hover,
.page-hero-action:hover{ background:#d3e4ff; box-shadow:none; transform:none; }

/* Leise Variante: Nebenweg oder Umschalter, nicht die Hauptaktion */
.page-hero-action--quiet{
  background:rgba(255,255,255,0.14);
  color:#fff !important;
}
.page-hero-action--quiet:hover{ background:rgba(255,255,255,0.24); }

/* Metazeile: Kontext zur Kopfzone (Ort, Zeit, Gremium) */
.page-hero-meta{
  display:flex; flex-wrap:wrap; gap:1rem;
  margin-top:0.65rem;
  font-size:0.88rem; color:rgba(255,255,255,0.85);
  font-variant-numeric:tabular-nums;
}
.page-hero-meta-item{ display:inline-flex; align-items:center; gap:0.35rem; }
.page-hero-meta-item .material-symbols-outlined{ font-size:18px; opacity:0.8; }

/* Zaehlpillen */
.page-hero-stats{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.75rem; }
.page-hero-stat{
  display:inline-flex; align-items:baseline; gap:0.4rem;
  background:rgba(255,255,255,0.12); border-radius:10px;
  padding:0.3rem 0.7rem;
  font-variant-numeric:tabular-nums;
}
/* 1.25rem / 0.72rem sind die Werte, die sechs von sieben Kopfzonen vor der
   Vereinheitlichung trugen — der Bestand, nicht eine neue Erfindung. */
.page-hero-stat b{ font-size:1.25rem; font-weight:800; color:#fff; letter-spacing:-0.02em; }
.page-hero-stat span{
  font-family:'Inter','Manrope',system-ui,sans-serif;
  font-size:0.72rem; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase; color:rgba(255,255,255,0.78);
}

/* Tab-Leiste am Fuss der Kopfzone */
.page-hero--tabs{ padding-bottom:0; }
.page-hero-tabs{
  position:relative; z-index:1;
  display:flex; gap:0;
  margin:0 -2rem; padding:0 2rem;
  border-top:1px solid rgba(255,255,255,0.12);
  overflow-x:auto;
}
.page-hero-tabs a{
  display:inline-flex; align-items:center; gap:0.35rem;
  min-height:44px; box-sizing:border-box;
  padding:0.75rem 1rem;
  font-size:0.82rem; font-weight:600;
  color:rgba(255,255,255,0.65);
  border-bottom:2px solid transparent;
  text-decoration:none; white-space:nowrap;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.page-hero-tabs a:hover{ color:rgba(255,255,255,0.95); }
.page-hero-tabs a.is-active{ color:#fff; border-bottom-color:#fff; }
.page-hero-tabs a .material-symbols-outlined{ font-size:18px; }

@media (max-width:640px){
  .page-hero-tabs{ margin:0 -1.25rem; padding:0 1.25rem; }
  .page-hero{ padding:1.25rem; border-radius:12px; }
  .page-hero h1,.page-hero h2{ font-size:1.35rem; }
  .page-hero-sub{ font-size:0.95rem; }
  .page-hero-top{ flex-direction:column; }
  .page-hero-actions{ width:100%; }
  .page-hero-actions .button-primary,
  .page-hero-action{ width:100%; }
}

/* Die klebende Kopfleiste ist durchsichtig und liegt ueber der Kopfzone — am
   Schreibtisch ist sie leer und stoert dort niemanden. Unterhalb von 1024px
   traegt sie aber den Menue-Knopf, und der landete damit genau auf der ersten
   Zeile der Kopfzone: auf der Startseite auf der Ueberschrift, sonst auf der
   Brotkrume. Fuer die Glocke rechts war das schon geloest (padding-right an
   .page-hero-top), fuer den Knopf links nicht.

   Die Regel steht bewusst hier unten und nennt auch `.is-lead`: die
   Kurzform-`padding`-Regeln weiter oben wuerden ein einzelnes `padding-top`
   sonst ueberstimmen. Gemessen am 09.09.2026. */
@media (max-width:1024px){
  .page-hero,
  .page-hero.is-lead{ padding-top:62px; }
}

/* ================================================
   BROWSER-OBERFLAECHEN — gehoeren auch zum System
   ================================================ */
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
  border-radius:6px;
}
::selection{ background:#cfe0f2; color:#181c1f; }

/* Ziffern-Regel: Zahlen, die untereinander stehen, laufen tabellarisch */
.list-table td,
.list-table th,
.kpi .value,
.page-hero-stat,
time{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
.btn{
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--c-primary); color:#fff; border:none;
  border-radius:var(--r-md); padding:10px 16px; font-weight:600;
  min-height:44px; cursor:pointer; text-decoration:none;
}
.btn:hover{ background:var(--c-primary-600); }
.pill{ display:inline-flex; align-items:center; border-radius:var(--r-pill);
  padding:2px 10px; font-size:var(--text-sm); font-weight:600;
  background:var(--c-border); color:var(--c-text); }
.pill-info{ background:var(--c-info-bg); color:var(--c-info-fg); }
.pill-success{ background:var(--c-success-bg); color:var(--c-success-fg); }
.pill-warn{ background:var(--c-warn-bg); color:var(--c-warn-fg); }
.pill-danger{ background:var(--c-danger-bg); color:var(--c-danger-fg); }
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
/* Ein Feld im Raster stapelt und fuellt die Spalte. `align-items` muss hier
   ausdruecklich stehen: traegt dasselbe Element zusaetzlich die aeltere Klasse
   .form-row (die fuer eine waagerechte Feldzeile gedacht ist und
   align-items:flex-end setzt), schrumpfen Label, Eingabe und Liste sonst auf
   Inhaltsbreite und stehen rechtsbuendig. Aufgetreten auf treffpunkt_suggest.php. */
.form-grid .field{ display:flex; flex-direction:column; align-items:stretch; gap:var(--space-1); min-width:0; }
.form-grid .field--full{ grid-column:1 / -1; }
/* Ankreuz- und Auswahlfelder duerfen NICHT auf volle Breite gestreckt werden.
   Ohne diese Ausnahme wird eine Checkbox in einer Personenliste 185px breit,
   schiebt den Namen an den Rand und zwingt ihn in den Umbruch.
   Aufgetreten auf treffpunkt_suggest.php. */
.form-grid .field input:not([type="checkbox"]):not([type="radio"]),
.form-grid .field select,
.form-grid .field textarea{ width:100%; box-sizing:border-box; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
@media (max-width:640px){
  /* Zeilen und Zellen wurden zu Karten umgeformt, die Tabelle selbst blieb eine
     Tabelle — und eine Tabelle waechst auf ihre Mindestinhaltsbreite, statt sich
     der Karte zu fuegen. Auf schooladmin_students.php ragte sie damit 48px ueber
     den Bildschirmrand. Gemessen am 09.09.2026. */
  .list-table.table-cards,
  .list-table.table-cards tbody{ display:block; width:100%; }
  .list-table.table-cards tr{ box-sizing:border-box; }

  .list-table.table-cards thead{ position:absolute; left:-9999px; top:auto; }
  .list-table.table-cards tr{
    display:block; background:var(--c-surface); border:1px solid var(--c-border);
    border-radius:var(--r-md); box-shadow:var(--shadow-sm);
    margin-bottom:var(--space-3); padding:var(--space-3);
  }
  .list-table.table-cards td{
    display:flex; justify-content:space-between; gap:var(--space-3);
    padding:var(--space-1) 0; border:0; text-align:right;
    /* Ein langes Wort ohne Umbruchstelle — in der Praxis eine E-Mail-Adresse —
       setzt die Mindestbreite der Zelle und schiebt sie ueber alle Vorfahren
       bis zur Seite durch. Die Zelle selbst bleibt dabei im Bild, weshalb kein
       Element sichtbar heraussteht und der Fehler schwer zu finden ist.
       Gemessen am 09.09.2026: 48px Ueberlauf auf schooladmin_students.php. */
    min-width:0; overflow-wrap:anywhere;
  }
  .list-table.table-cards td::before{
    content:attr(data-label); font-weight:600; color:var(--c-muted);
    text-align:left; flex:0 0 auto;
  }
  .list-table.table-cards td:empty{ display:none; }
  /* Aktions-/Formularzellen: Inhalt voll, kein Label-Gegenüber */
  .list-table.table-cards td.cell-actions,
  .list-table.table-cards td.cell-stack{ display:block; text-align:left; }
  .list-table.table-cards td.cell-actions::before,
  .list-table.table-cards td.cell-stack::before{ display:block; margin-bottom:var(--space-1); }
}

@media (max-width:640px){
  .modal-backdrop{ align-items:flex-end; }
  .modal-dialog{
    width:100%; max-width:none; max-height:90vh; overflow-y:auto;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
  }
  .modal-dialog::before{
    content:""; display:block; width:36px; height:4px; border-radius:2px;
    background:var(--c-border); margin:0 auto var(--space-3);
  }
}

.container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-4); }
.l-stack > * + *{ margin-top:var(--space-3); }
.cluster{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; }
.only-sm{ display:none; }
@media (max-width:640px){
  .hide-sm{ display:none !important; }
  .only-sm{ display:revert; }
}

/* Die farbigen Kaesten und die Bildklassen stehen seit dem 22.09.2026 in
   textbild_css() (app/config.php), nicht mehr hier: Die oeffentliche
   Konzeptseite laedt ueberhaupt kein Stylesheet — sie bringt ihre Regeln
   inline mit, wegen der Theme-Farben je Schule. Eine Regel in style.css
   erreicht sie nie, und genau das fiel bei den Kaesten auf. */