/*
 * GaWo Design-System
 * ------------------
 * Zentrale Farb- und Typografie-Tokens für das gesamte Frontend.
 * Alle Views nutzen ausschließlich diese Tokens/Klassen statt Ad-hoc-Werten,
 * damit Farben und Schriftgrößen konsistent bleiben.
 */

/* Eigene Schriftart (Montserrat) selbst gehostet, kein Google-Fonts-CDN. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/montserrat-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/montserrat-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-700.woff2') format('woff2');
}

/*
 * Monochrom-Palette: EIN Farbton (Primary/Heading, dieselbe Blaufamilie wie bisher) trägt die
 * gesamte Struktur - Navigation, Panels, Buttons, Überschriften. Grün/Gelb/Rot (accept/warn/
 * danger/success) bleiben erhalten, aber ausschließlich für kleine, bedeutungstragende Elemente
 * (Status-Badges, Alerts, Formular-Fehler) - nicht mehr für große Flächen wie Hero/Akzent-Button/
 * Hintergrund-Verlauf. So bleibt die Fläche ruhig/einfarbig, ohne die Status-Farben aufzugeben,
 * die an anderer Stelle tatsächlich etwas bedeuten (siehe FreigabeStatus::badgeClass()).
 */
:root {
    --gawo-primary: #00a0e3;
    --gawo-primary-dark: #0087bf;
    --gawo-accept: #16a34a;
    --gawo-warn: #d97706;
    --gawo-danger: #dc2626;
    --gawo-success: #16a34a;
    --gawo-link: #0d6efd;
    --gawo-heading: #191970;

    --gawo-bg: #f4f6fa;
    --gawo-surface: #ffffff;
    --gawo-surface-2: #f8f9fc;
    --gawo-border: #e3e7ef;
    --gawo-text: #212529;
    --gawo-text-muted: #6c757d;
    --gawo-shadow: 0 2px 10px rgba(20, 30, 60, 0.05);
    --gawo-shadow-hover: 0 6px 20px rgba(20, 30, 60, 0.09);
    --gawo-nav-bg: rgba(25, 25, 112, 0.92);
    --gawo-nav-text: #ffffff;

    /*
     * Rundungs-Skala: EIN gemeinsames, moderates Maß für praktisch alles (Buttons, Panels,
     * Eingabefelder, Navbar) statt der vorherigen Pillenform (border-radius: 999px) auf Buttons/
     * Navbar/Badges - klassisch-dezent gerundet, weder eckig-kantig noch komplett rund. Nur echte
     * Kreis-Elemente (Ping-Punkt, o.ä.) bleiben rund - das ist Form, keine "Rundung".
     */
    --gawo-radius-sm: 0.4rem;
    --gawo-radius: 0.6rem;
    --gawo-radius-lg: 0.85rem;
}

/*
 * Dark-Theme-Tokens: entsprechen den vorgegebenen "Ist-Farben" des aktuellen GaWo-Themes (kein
 * Rebranding auf die Schulwebsite-Farben), nur ebenfalls ohne den dekorativen Verlauf.
 */
[data-bs-theme="dark"] {
    --gawo-primary: #3b82f6;
    --gawo-primary-dark: #2f6fd6;
    --gawo-accept: #22c1e0;
    --gawo-warn: #eab308;
    --gawo-danger: #ef4444;
    --gawo-success: #22c55e;
    --gawo-link: #60a5fa;
    --gawo-heading: #c7d2fe;

    --gawo-bg: #0d1220;
    --gawo-surface: #171c2e;
    --gawo-surface-2: #1d2338;
    --gawo-border: #2c3245;
    --gawo-text: #e5e7eb;
    --gawo-text-muted: #9ca3af;
    --gawo-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    --gawo-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.4);
    --gawo-nav-bg: rgba(13, 18, 32, 0.85);
    --gawo-nav-text: #f0f2f8;
}

/*
 * Typografie-Skala: sechs feste Ebenen (Seitentitel, Abschnittstitel,
 * Card-Titel, Fließtext, Meta-Text, Button/Badge). Jede View benutzt diese
 * Klassen statt eigener/ad-hoc Größen.
 */
.gawo-h1 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--gawo-heading);
}

.gawo-h2 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gawo-heading);
}

.gawo-h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gawo-heading);
}

.gawo-text {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--gawo-text);
}

.gawo-meta {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--gawo-text-muted);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

/* Sticky Footer: body ist Flex-Spalte, main wächst, footer bleibt unten. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--gawo-bg);
    color: var(--gawo-text);
    transition: background-color 0.2s ease, color 0.2s ease;
    position: relative;
}

/*
 * Auf breiten Bildschirmen ist main.gawo-main auf 1140px begrenzt (siehe unten) - links und
 * rechts bleibt sonst einfach leere Fläche. EIN sehr dezenter, einfarbiger Farbfleck (statt der
 * vorherigen vier bunten) füllt sie ruhig statt sie "leer" wirken zu lassen, ohne mit den
 * eigentlichen Panels zu konkurrieren (hinter allem, per z-index, unabhängig vom Scrollen dank
 * position: fixed) - monochrom statt bunt, passend zum restlichen Design.
 */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 96% 4%, color-mix(in srgb, var(--gawo-primary) 10%, transparent) 0%, transparent 45%);
}

p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--gawo-text);
}

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

/* ---------- Navbar: volle Breite statt schwebender Karte ----------
   Vorher eine auf 1140px begrenzte, schwebende "Pille" mit Rand ringsum - jetzt eine
   randlose, kantenständige Leiste (wie eine klassische App-Titelleiste), der Inhalt darunter
   bleibt weiterhin auf 1140px zentriert (siehe .navbar-gawo .container-fluid). Sticky bleibt,
   nur ohne den umgebenden Abstand, der vorher den "schwebenden" Eindruck erzeugt hat. */
.gawo-nav-wrap {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-gawo {
    background-color: var(--gawo-nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--gawo-shadow);
    padding: 0.6rem 1rem;
}

.navbar-gawo .container-fluid {
    max-width: 1140px;
    margin: 0 auto;
}

.navbar-gawo .navbar-brand,
.navbar-gawo .nav-link {
    color: var(--gawo-nav-text);
}

/* Marken-Lockup: "GaWo" + kleiner Zusatz "Gauß-Woche" dahinter, in normaler Groß-/Kleinschreibung
   und ohne Sperrung - macht deutlich, dass GaWo eine Kurzform ist, ohne wie ein systemgenerierter
   "Eyebrow-Label" auszusehen (Versalien+Sperrung über Überschriften ist genau das, was ein
   generiertes Dashboard sofort verrät). */
.gawo-brand {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.gawo-brand-name {
    font-weight: 700;
    font-size: 1.15rem;
}

.gawo-brand-sub {
    font-size: 0.8rem;
    font-weight: 400;
    font-style: italic;
    opacity: 0.55;
}

.navbar-gawo .nav-link {
    border-radius: var(--gawo-radius);
    padding: 0.45rem 0.9rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-gawo .nav-link:hover,
.navbar-gawo .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* Aktiver Nav-Punkt: gefüllte Pille in der Akzentfarbe statt nur fetter/unterstrichener Text -
   auf einen Blick erkennbar, wo man gerade ist, auch beim schnellen Überfliegen der Leiste. */
.navbar-gawo .nav-link.active {
    background-color: var(--gawo-primary);
    color: #fff;
}

.navbar-gawo .nav-link.active:hover {
    background-color: var(--gawo-primary);
}

/* Nachrichten-Icon-Button (Glocke) und Benutzer-Button teilen sich denselben "auf dunklem
   Navbar-Grund freischwebend" Look - dezenter als ein Bootstrap-Outline-Button, aber klar als
   klickbar erkennbar. */
.gawo-icon-btn,
.gawo-user-btn {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--gawo-nav-text);
    border-radius: var(--gawo-radius);
    display: inline-flex;
    align-items: center;
    transition: background-color 0.15s ease;
}

.gawo-icon-btn {
    padding: 0.45rem 0.6rem;
}

.gawo-icon-btn:hover,
.gawo-icon-btn:focus,
.gawo-user-btn:hover,
.gawo-user-btn:focus {
    background-color: rgba(255, 255, 255, 0.16);
    color: var(--gawo-nav-text);
}

.gawo-user-btn {
    gap: 0.55rem;
    padding: 0.3rem 0.75rem 0.3rem 0.3rem;
}

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

.gawo-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.gawo-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
}

.gawo-user-rolle {
    font-size: 0.6875rem;
    opacity: 0.65;
}

/* Der Ping-Punkt saß bisher am Benutzernamen-Button (ein einzelner Button für Name+Nachrichten) -
   jetzt hat die Glocke einen eigenen Button, der Punkt sitzt also an dessen Ecke statt am Avatar. */
.gawo-icon-btn .gawo-ping-dot {
    top: -0.15rem;
    right: -0.15rem;
}

.navbar-gawo .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Der Menü-Hintergrund (--gawo-nav-bg) ist in BEIDEN Themes dunkel - das Icon soll also immer
   weiß sein. Eigenes SVG statt Bootstraps "--bs-navbar-toggler-icon-bg" + filter:invert(): Bootstrap
   tauscht das Icon im Dark Mode ([data-bs-theme=dark] .navbar-toggler-icon, siehe
   bootstrap.min.css) selbst schon gegen eine weiße Version - das vorherige invert(1) drehte diese
   dann zusätzlich um und machte sie dadurch im Dark Mode schwarz (auf dunklem Grund unsichtbar). */
.navbar-gawo .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Burger-Menü unter dem Benutzernamen (Admin/Kontoeinstellungen/Logout). */
.gawo-dropdown {
    background-color: var(--gawo-surface);
    border: 1px solid var(--gawo-border);
    border-radius: var(--gawo-radius);
    box-shadow: var(--gawo-shadow-hover);
    padding: 0.4rem;
    min-width: 12rem;
}

.gawo-dropdown .dropdown-item {
    border-radius: var(--gawo-radius-sm);
    color: var(--gawo-text);
}

.gawo-dropdown .dropdown-item:hover,
.gawo-dropdown .dropdown-item:focus {
    background-color: var(--gawo-surface-2);
    color: var(--gawo-text);
}

/* Bootstraps "--bs-border-color-translucent" (Grundlage der Trennstriche) bleibt im
   Dark-Theme ein transparentes Schwarz statt Weiß (siehe bootstrap.min.css [data-bs-theme=dark] -
   dort nicht neu gesetzt) - auf dem dunklen Menü-Hintergrund dadurch praktisch unsichtbar. Eigenes,
   bereits theme-bewusstes Token statt der Bootstrap-Variable. */
.gawo-dropdown .dropdown-divider {
    border-top-color: var(--gawo-border);
}

/* ---------- Main / floating panels ---------- */

main.gawo-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.gawo-panel {
    background-color: var(--gawo-surface);
    border: 1px solid var(--gawo-border);
    border-radius: var(--gawo-radius-lg);
    box-shadow: var(--gawo-shadow);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Monochrom statt Verlauf: ruhige Primary-getönte Fläche statt buntem Gradient. */
.gawo-hero {
    background-color: color-mix(in srgb, var(--gawo-primary) 10%, var(--gawo-surface));
    border: 1px solid color-mix(in srgb, var(--gawo-primary) 25%, var(--gawo-border));
    border-radius: var(--gawo-radius-lg);
    box-shadow: var(--gawo-shadow);
    padding: 3rem 2rem;
    color: var(--gawo-text);
    margin-bottom: 1.5rem;
}

.gawo-hero .gawo-h1 {
    color: var(--gawo-heading);
}

.list-group-item {
    background-color: var(--gawo-surface);
    border-color: var(--gawo-border);
    color: var(--gawo-text);
    border-radius: var(--gawo-radius) !important;
    margin-bottom: 0.6rem;
    box-shadow: var(--gawo-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.list-group-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--gawo-shadow-hover);
    z-index: 1;
}

.list-group-item + .list-group-item {
    border-top: 1px solid var(--gawo-border);
}

/*
 * Kennzahlen-Kacheln (Dashboard, Admin-Startseite, Statistiken): bisher optisch identisch mit
 * normalen Inhalts-Panels (gleicher Schatten/Rahmen wie z.B. der Dashboard-Text darunter) - dabei
 * sind es eigentlich Zahlen, keine Inhalte. Eigene, flachere Optik (kein Schatten, dafür ein
 * dünner Balken oben in der Akzentfarbe, wie eine Messmarke) unterscheidet sie klar von echten
 * Inhalts-Panels, statt dass alles zur selben "Karte mit Schatten" verschwimmt. "tabular-nums"
 * sorgt dafür, dass Ziffern gleich breit sind - passend zu einer Zahlen-Anzeige.
 */
.gawo-stat {
    position: relative;
    background-color: var(--gawo-surface-2);
    border: 1px solid var(--gawo-border);
    border-top: 3px solid var(--gawo-primary);
    box-shadow: none;
}

.gawo-stat .gawo-h1,
.gawo-stat .gawo-h3 {
    font-variant-numeric: tabular-nums;
}

/* Bewusst OHNE Icon-Abzeichen (das an sich schon ein Klischee generierter Dashboards ist) -
   die Farbvarianten unterscheiden die vier Kacheln allein über den Balken oben, ruhiger als ein
   zusätzliches buntes Icon pro Kachel. */
.gawo-stat--warn { border-top-color: var(--gawo-warn); }
.gawo-stat--accept { border-top-color: var(--gawo-accept); }
.gawo-stat--info { border-top-color: var(--gawo-link); }

.form-control, .form-select {
    background-color: var(--gawo-surface-2);
    border-color: var(--gawo-border);
    color: var(--gawo-text);
    border-radius: var(--gawo-radius);
}

.form-control:focus, .form-select:focus {
    background-color: var(--gawo-surface-2);
    color: var(--gawo-text);
    border-color: var(--gawo-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.text-muted {
    color: var(--gawo-text-muted) !important;
}

/* ---------- Buttons: feste Größen je Button-Rolle, Farben aus den Ist-Tokens ---------- */

.btn {
    border-radius: var(--gawo-radius);
    font-size: 0.9375rem;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn-sm {
    font-size: 0.8125rem;
}

.btn-primary {
    background-color: var(--gawo-primary);
    border-color: var(--gawo-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--gawo-primary-dark);
    border-color: var(--gawo-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--gawo-shadow-hover);
}

/* "Annehmen"-Aktionen: eigene Akzeptieren-Farbe, getrennt von generischem Primary. */
.btn-accept {
    background-color: var(--gawo-accept);
    border-color: var(--gawo-accept);
    color: #fff;
}

.btn-accept:hover,
.btn-accept:focus {
    filter: brightness(0.92);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--gawo-shadow-hover);
}

/* Solid- und Outline-Varianten sind bewusst getrennt: Outline darf --bs-btn-bg nicht von der
   Solid-Variante erben, sonst landet z.B. gelber Text auf gelbem Grund (unsichtbar). */
.btn-warning {
    --bs-btn-bg: var(--gawo-warn);
    --bs-btn-border-color: var(--gawo-warn);
    --bs-btn-hover-bg: var(--gawo-warn);
    --bs-btn-hover-border-color: var(--gawo-warn);
    --bs-btn-color: #1a1200;
    --bs-btn-hover-color: #1a1200;
}

.btn-outline-warning {
    --bs-btn-color: var(--gawo-warn);
    --bs-btn-border-color: var(--gawo-warn);
    --bs-btn-hover-bg: var(--gawo-warn);
    --bs-btn-hover-border-color: var(--gawo-warn);
    --bs-btn-hover-color: #1a1200;
}

.btn-danger {
    --bs-btn-bg: var(--gawo-danger);
    --bs-btn-border-color: var(--gawo-danger);
    --bs-btn-hover-bg: var(--gawo-danger);
    --bs-btn-hover-border-color: var(--gawo-danger);
}

.btn-outline-danger {
    --bs-btn-color: var(--gawo-danger);
    --bs-btn-border-color: var(--gawo-danger);
    --bs-btn-hover-bg: var(--gawo-danger);
    --bs-btn-hover-border-color: var(--gawo-danger);
    --bs-btn-hover-color: #fff;
}

/* War früher ein bunter Verlauf - jetzt eine dezente, leicht getönte Primary-Variante (statt
   voller Sättigung), damit sich "besondere" Aktionen (z.B. "+ Veranstaltung anlegen", PDF-Export)
   von normalem Primary abheben, ohne laut zu wirken. */
.btn-accent {
    background-color: color-mix(in srgb, var(--gawo-primary) 14%, var(--gawo-surface));
    border: 1px solid color-mix(in srgb, var(--gawo-primary) 35%, transparent);
    color: var(--gawo-primary);
}

.btn-accent:hover {
    background-color: color-mix(in srgb, var(--gawo-primary) 22%, var(--gawo-surface));
    transform: translateY(-1px);
    box-shadow: var(--gawo-shadow-hover);
    color: var(--gawo-primary);
}

.alert-success {
    --bs-alert-bg: color-mix(in srgb, var(--gawo-success) 15%, var(--gawo-surface));
    --bs-alert-border-color: var(--gawo-success);
    --bs-alert-color: var(--gawo-text);
}

.badge {
    border-radius: var(--gawo-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3em 0.6em;
    vertical-align: middle;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 0.25em 0.5em;
}

/* "Pop"-Effekt fuers Nachrichten-Badge, wenn per Hintergrund-Abfrage eine neue ungelesene
   Mitteilung erkannt wird (siehe gawo-nachrichten-badge.js). */
@keyframes gawo-badge-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}

.gawo-badge-pop {
    animation: gawo-badge-pop 0.4s ease;
}

/* Kleiner "Ping"-Punkt am Benutzernamen-Button, zeigt ungelesene Nachrichten an, ohne das
   Burger-Menü öffnen zu müssen (siehe layouts/main.php + gawo-nachrichten-badge.js). */
.gawo-ping-dot {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background-color: var(--gawo-danger);
    border: 2px solid var(--gawo-nav-bg);
}

/* Karten-Verfügbarkeits-Anzeige (Veranstaltungsliste/-Detail) nutzt Bootstraps "rounded"-Klasse
   (0.375rem, fest) statt eines Tokens - hier auf dieselbe Rundung wie der Rest angeglichen. In
   der Liste (veranstaltungen/index.php, <div>) war sie zusätzlich sehr groß (fs-2, volle
   Kartenhöhe durch align-items-stretch, viel Padding) - deutlich kompakter gemacht, in
   show.php (<span class="badge">) war sie schon kompakt und bleibt unverändert. */
.gawo-karten-badge {
    border-radius: var(--gawo-radius) !important;
}

div.gawo-karten-badge {
    min-width: 4rem;
    padding: 0.4rem 0.75rem;
}

.gawo-karten-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

div.gawo-karten-badge .gawo-karten-zahl {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/*
 * Status-Badges (Karten-Verfügbarkeit, Freigabe-Status, "neu"/"angepasst"-Markierungen, u.a.):
 * dezente, getönte Fläche mit farbigem Text statt einer voll gesättigten Farbfläche - liest sich
 * ruhiger und bleibt trotzdem klar erkennbar als Status-Hinweis.
 */
.text-bg-success {
    background-color: color-mix(in srgb, var(--gawo-success) 16%, var(--gawo-surface)) !important;
    color: var(--gawo-success) !important;
}

.text-bg-danger {
    background-color: color-mix(in srgb, var(--gawo-danger) 16%, var(--gawo-surface)) !important;
    color: var(--gawo-danger) !important;
}

.text-bg-warning {
    background-color: color-mix(in srgb, var(--gawo-warn) 18%, var(--gawo-surface)) !important;
    color: var(--gawo-warn) !important;
}

.text-bg-info {
    background-color: color-mix(in srgb, var(--gawo-primary) 16%, var(--gawo-surface)) !important;
    color: var(--gawo-primary) !important;
}

/* ---------- Kurs-Karten mit Schnellinfo-Panel (Veranstaltungen-/Meine-Karten-Liste) ---------- */
/* Klick oeffnet/schliesst das Panel statt zu navigieren - siehe gawo-kurs-details.js. Der
   "Detailseite"-Knopf bleibt eigenstaendig anklickbar/navigiert normal. */
.gawo-kurs-karte {
    cursor: pointer;
}

.gawo-kurs-details {
    border-top: 1px solid var(--gawo-border);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

/* "Das Wichtigste"-Feld (z.B. "Bitte 2€ für Kosten mitbringen") - soll ins Auge stechen, deshalb
   rot hervorgehoben statt nur fett wie der restliche Text. */
.gawo-wichtig-box {
    background-color: color-mix(in srgb, var(--gawo-danger) 12%, var(--gawo-surface));
    border: 1px solid var(--gawo-danger);
    border-radius: var(--gawo-radius-sm);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--gawo-text);
}

.gawo-wichtig-label {
    color: var(--gawo-danger);
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 0.35rem;
}

.gawo-kurs-details dt {
    font-size: 0.75rem;
    color: var(--gawo-text-muted);
}

.gawo-kurs-details dd {
    margin-bottom: 0.5rem;
}

/* ---------- Suchauswahl-Komponente (Mitveranstalter/Betreuer/Veranstalter) ---------- */

.gawo-search-select {
    position: relative;
}

.gawo-search-select.is-invalid .gawo-search-input,
.gawo-checkbox-group.is-invalid {
    border: 1px solid var(--gawo-danger);
    border-radius: var(--gawo-radius);
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.2);
}

.gawo-checkbox-group.is-invalid {
    padding: 0.5rem;
}

.gawo-search-select .gawo-search-input {
    background-color: var(--gawo-surface-2);
    border: 1px solid var(--gawo-border);
    border-radius: var(--gawo-radius);
    color: var(--gawo-text);
    width: 100%;
    padding: 0.5rem 0.75rem;
}

.gawo-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
    background-color: var(--gawo-surface);
    border: 1px solid var(--gawo-border);
    border-radius: var(--gawo-radius);
    box-shadow: var(--gawo-shadow-hover);
    max-height: 220px;
    overflow-y: auto;
    display: none;
}

.gawo-search-results.show {
    display: block;
}

.gawo-search-results .gawo-search-option {
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}

.gawo-search-results .gawo-search-option:hover,
.gawo-search-results .gawo-search-option.active {
    background-color: var(--gawo-primary);
    color: #fff;
}

.gawo-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.gawo-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--gawo-surface-2);
    border: 1px solid var(--gawo-border);
    border-radius: var(--gawo-radius-sm);
    padding: 0.25rem 0.5rem 0.25rem 0.85rem;
    font-size: 0.875rem;
}

.gawo-chip button {
    border: 0;
    background: transparent;
    color: var(--gawo-text-muted);
    line-height: 1;
    font-size: 1rem;
    cursor: pointer;
}

.gawo-chip button:hover {
    color: var(--gawo-danger);
}

/* ---------- Responsive: Handy/Tablet/Laptop/PC ----------
   Grundlayout (Bootstrap-Grid, .table-responsive) ist schon von Haus aus responsiv. Diese Regeln
   decken die Stellen ab, an denen GaWo eigene, mit fester Breite gedachte Bausteine nutzt (z.B.
   die Inline-Bearbeitungszeilen in der Admin-Klassen-/Fächerverwaltung), damit sie auf kleinen
   Bildschirmen (Handy) nicht seitlich abgeschnitten werden oder zu Quetsch-Eingabefeldern führen. */

/* Formularfelder in Inline-Bearbeitungszeilen (Admin: Klassen/Fächer/Nutzer). Auf breiten
   Bildschirmen feste Mindestbreite nebeneinander (wie bisher), auf schmalen Bildschirmen volle
   Breite untereinander statt gequetscht zu werden. */
.gawo-field-xs { flex: 1 1 6rem; min-width: 6rem; }
.gawo-field-sm { flex: 1 1 8rem; min-width: 8rem; }
.gawo-field-md { flex: 1 1 12rem; min-width: 12rem; }
.gawo-field-lg { flex: 1 1 14rem; min-width: 14rem; }

@media (max-width: 480px) {
    .gawo-field-xs,
    .gawo-field-sm,
    .gawo-field-md,
    .gawo-field-lg {
        flex-basis: 100%;
        min-width: 0;
    }
}

/* Handy: weniger Rand um die schwebenden Panels/die Navbar, sonst bleibt kaum Platz für Inhalt. */
@media (max-width: 576px) {
    main.gawo-main {
        padding: 1.25rem 0.75rem 2rem;
    }

    .gawo-panel {
        padding: 1.1rem;
    }

    .gawo-hero {
        padding: 1.75rem 1.25rem;
    }

    .navbar-gawo {
        padding: 0.5rem 0.75rem;
    }
}

/* ---------- Einstellungs-Liste (z.B. Admin-Startseite: Links zu den Verwaltungsbereichen) ----------
   Eine strukturierte, durchgehende Zeilen-Liste statt einzelner Kacheln/Cards - klassisches
   Einstellungen-Muster (Titel+Untertitel links, Pfeil rechts, dünne Trennlinien zwischen den
   Zeilen) statt eines Kachel-Rasters. */
.gawo-settings-list {
    background-color: var(--gawo-surface);
    border: 1px solid var(--gawo-border);
    border-radius: var(--gawo-radius-lg);
    box-shadow: var(--gawo-shadow);
    overflow: hidden;
}

.gawo-settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    color: var(--gawo-text);
    text-decoration: none;
    border-bottom: 1px solid var(--gawo-border);
    transition: background-color 0.15s ease;
}

.gawo-settings-item:last-child {
    border-bottom: none;
}

.gawo-settings-item:hover,
.gawo-settings-item:focus {
    background-color: var(--gawo-surface-2);
    color: var(--gawo-text);
}

.gawo-settings-item-titel {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gawo-heading);
}

.gawo-settings-item--gefahr .gawo-settings-item-titel {
    color: var(--gawo-danger);
}

.gawo-settings-item-pfeil {
    flex-shrink: 0;
    color: var(--gawo-text-muted);
}

/* ---------- Login-Seite: Koordinatengitter ----------
   Die eine bewusst "auffällige" Stelle im ganzen, sonst zurückhaltenden Design: ein sehr feines
   Koordinatengitter (Millimeterpapier-Anmutung) hinter dem Login-Panel - eine stille, dezente
   Anspielung auf Gauß/Mathematik statt eines wörtlichen Maskottchens oder Zitats, nur auf der
   allerersten Seite, die jede Person sieht. Reines CSS (zwei überlagerte linear-gradients für
   Linien, keine Bilddatei), sehr geringe Deckkraft, damit es nicht mit dem Formular konkurriert. */
.gawo-login-page {
    position: relative;
    padding-top: 1rem;
}

.gawo-login-page::before {
    content: "";
    position: absolute;
    inset: -2rem -1rem;
    z-index: -1;
    background-image:
        linear-gradient(color-mix(in srgb, var(--gawo-primary) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--gawo-primary) 14%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, #000 0%, transparent 75%);
}

/* ---------- Login-Logo ----------
   Das Schul-Logo (gauss-logo.webp) hat helle/weiße Konturen - auf der hellen Panel-/Seitenfläche
   kaum sichtbar. Derselbe dunkle Ton wie die Navbar (--gawo-nav-bg) gibt zuverlässig genug
   Kontrast, unabhängig vom Light/Dark-Theme. */
.gawo-login-logo-wrap {
    background-color: var(--gawo-nav-bg);
    border-radius: var(--gawo-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
}

.gawo-login-logo {
    max-width: 100%;
    width: 320px;
    height: auto;
    display: inline-block;
}

/* ---------- Dashboard-Kopf ----------
   Projektwoche-Zeitraum und aktive Phase stehen als normaler Fließtext in der Meta-Zeile statt
   als separate, bunte Badges/Pillen - ein einzelner kleiner Punkt vor der aktiven Phase reicht als
   visuelles Signal, ohne wie ein Baukasten aus Chips auszusehen. */
.gawo-status-punkt {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--gawo-success);
    vertical-align: middle;
    margin-bottom: 0.15em;
}

/* Ankündigungs-Panel: dünner Akzent-Balken links (statt eines weiteren gleich aussehenden
   Panels) markiert es als "wichtig, zuerst lesen" innerhalb der Seite. */
.gawo-panel--akzent {
    border-left: 3px solid var(--gawo-primary);
}

/* ---------- Dashboard-Text ----------
   Roh von Parsedown erzeugtes HTML (siehe DashboardController) bringt keine eigenen Klassen mit -
   hier an die Typografie-Tokens angeglichen, statt einfach die Browser-Standardformatierung von
   h1/p/ul durchscheinen zu lassen. */
.gawo-dashboard-text :first-child {
    margin-top: 0;
}

.gawo-dashboard-text :last-child {
    margin-bottom: 0;
}

.gawo-dashboard-text h1,
.gawo-dashboard-text h2,
.gawo-dashboard-text h3 {
    color: var(--gawo-heading);
    font-weight: 700;
    margin: 1rem 0 0.5rem;
}

.gawo-dashboard-text h1 { font-size: 1.5rem; }
.gawo-dashboard-text h2 { font-size: 1.25rem; }
.gawo-dashboard-text h3 { font-size: 1.0625rem; }

.gawo-dashboard-text p,
.gawo-dashboard-text li {
    color: var(--gawo-text);
    line-height: 1.6;
}

.gawo-dashboard-text ul,
.gawo-dashboard-text ol {
    padding-left: 1.25rem;
}

/* Eingebetteter YouTube-Player (siehe DashboardController::youtubeEinbetten()) - klassischer
   16:9-Platzhalter, damit das Video die Textbreite ausfüllt statt fest 560x315px zu sein, egal
   wie breit das Panel gerade ist (Handy bis Desktop). */
.gawo-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0.75rem 0;
    border-radius: var(--gawo-radius);
    overflow: hidden;
    background-color: var(--gawo-surface-2);
}

.gawo-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.gawo-dashboard-text a {
    color: var(--gawo-link);
}

/* ---------- Footer ---------- */

footer.gawo-footer {
    flex-shrink: 0;
    color: var(--gawo-text-muted);
    font-size: 0.875rem;
    padding: 1.5rem 1rem;
    text-align: center;
}

.badge-frei {
    background-color: var(--gawo-primary);
}

/* Lange Listen/Tabellen (z.B. admin/statistiken) bekommen eine eigene, begrenzte Scroll-Höhe statt
   die ganze Seite in die Länge zu ziehen - Tabellenkopf bleibt beim Scrollen sichtbar. */
.gawo-scroll-liste {
    max-height: 320px;
    overflow-y: auto;
}

.gawo-scroll-liste table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--gawo-surface);
}