/*
 * theme.css – Vereinsweite Gestaltung des Trainer-Portals.
 *
 * Dieser Code stand früher als <style>-Block direkt in base.html. Er wurde in
 * diese eigene Datei ausgelagert, damit der Browser sie zwischenspeichern kann
 * und die Content-Security-Policy ohne Sonderregeln für Inline-Styles auskommt.
 */

/*
 * CSS-CUSTOM-PROPERTIES (auch "CSS-Variablen"):
 * :root ist der Wurzel-Selektor – Variablen hier gelten für die ganze Seite.
 * Syntax: --variablenname: wert;   Verwendung: color: var(--rot);
 * VORTEIL: Wenn die Vereinsfarbe sich ändert, reicht eine Änderung hier.
 */
:root {
    --rot:         #c0392b;  /* Vereinsrot – Hauptakzentfarbe */
    --rot-dunkel:  #a93226;  /* Dunkleres Rot für Hover-Effekte */
    --rot-hell:    #fdf2f1;  /* Sehr helles Rot für Hintergründe */
    --schwarz:     #1a1a1a;  /* Fast-Schwarz für Navbar und Footer */
    --grau-hell:   #f7f7f7;  /* Seiten-Hintergrundfarbe */
    --grau-border: #e8e8e8;  /* Rahmenlinien – etwas heller als vorher */
    --grau-text:   #666;     /* Grauer Fließtext */

    /*
     * NEUE DESIGN-TOKENS (Frontend-Überarbeitung).
     * "Token" = ein benannter Design-Grundwert (Farbe, Abstand, Schatten). Indem wir
     * z. B. Schatten und Eckenradius EINMAL hier festlegen und überall per var(...)
     * verwenden, sieht die ganze App einheitlich aus und lässt sich zentral anpassen.
     */
    --gruen:       #198754;  /* Erfolg / „alles gut" (z. B. Quote erfüllt) */
    --gelb:        #f0ad4e;  /* Warnung / Mittelwert (teil-besetzt) */
    --blau:        #0d6efd;  /* Neutrale Info / Schwellenlinie in Diagrammen */

    /* Weiche Schatten: geben Karten Tiefe, ohne hart zu wirken.
       Syntax box-shadow: x-Versatz y-Versatz Weichzeichnung Farbe(mit Transparenz). */
    --schatten:       0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.05);
    --schatten-hover: 0 4px 14px rgba(0,0,0,0.10);

    --radius:    10px;  /* Standard-Eckenradius für Karten */
    --radius-sm: 8px;   /* Etwas kleiner, z. B. Buttons/Badges */

    /* Übergangsdauer für sanfte Hover-Effekte (transition). */
    --uebergang: 0.15s ease;
}

body {
    background: var(--grau-hell);
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #222;
}

/* ── Navbar ───────────────────────────
 * HELLER HEADER (statt vorher fast-schwarz):
 * Das Vereinslogo enthält Schwarz und war auf dunklem Grund kaum sichtbar.
 * Deshalb ist die Navbar jetzt WEISS mit dunkler Schrift und einer feinen
 * grauen Trennlinie + dezentem Schatten. Wichtig: In beiden base.html-Dateien
 * wurde die Bootstrap-Klasse "navbar-dark" auf "navbar-light" umgestellt, damit
 * Bootstrap die Link-/Brand-Farben automatisch dunkel setzt.
 */
.navbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--grau-border);
    box-shadow: var(--schatten);
}

.navbar-brand {
    color: var(--schwarz) !important;   /* Vereinsname klar lesbar auf Weiß */
}

.navbar-brand .bi-water {
    color: var(--rot);
}

.navbar-logo {
    height: 34px;    /* etwas größer, da das Logo jetzt der Blickfang im hellen Header ist */
    width: auto;     /* skaliert proportional auf die Höhe */
    vertical-align: middle;  /* richtet Logo an der Mitte des Textes aus */
    margin-right: 8px;
}

/* Auf hellem Grund ist Vereinsrot als Hover-Farbe kräftiger/lesbarer als das
   frühere Hellrot (#f87171), das nur auf dunklem Grund funktionierte. */
.nav-link:hover {
    color: var(--rot) !important;
}

/* ── Verwaltungs-Sub-Navigation ──────── */
.verwaltung-nav {
    background: white;
    border-bottom: 1px solid var(--grau-border);
    /* Vorher: 2px solid rot. Jetzt: 1px dezentes Grau – ruhiger, cleaner. */
    padding: 0;
    margin-bottom: 2rem;
}

.verwaltung-nav .nav-link {
    color: #444;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    /*
     * margin-bottom: -2px "schiebt" den Tab-Unterstrich über den
     * nav-Container-Rand – klassischer Tab-Effekt.
     */
    transition: color 0.15s, border-color 0.15s;
}

.verwaltung-nav .nav-link:hover {
    color: var(--rot);
    background: transparent;
    border-bottom-color: var(--rot);
}

.verwaltung-nav .nav-link.aktiv {
    color: var(--rot);
    font-weight: 600;
    border-bottom-color: var(--rot);
    background: transparent;
}

/* ── Einheiten-Karten ────────────────── */
.einheit-card {
    border: 1px solid var(--grau-border);
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--schatten);
    /* Sanfter Hover-Lift – gleiche Sprache wie Dashboard-Kacheln. */
    transition: box-shadow var(--uebergang), transform var(--uebergang);
}

.einheit-card:hover {
    box-shadow: var(--schatten-hover);
    transform: translateY(-2px);
}

.einheit-card.meine {
    border-left: 3px solid var(--rot); /* Roter Akzent: "gehört mir" */
}

.einheit-card.frei {
    border-left: 3px solid #ccc; /* Grau: "verfügbar" */
}

/* ── Wochen-Navigation ───────────────── */
.wochen-nav {
    background: white;
    border: 1px solid var(--grau-border);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}

/* ── Abschnitts-Überschriften ────────── */
.section-header {
    /* Vorher: Roter 3px linker Balken. Jetzt: nur Schriftsatz. Sauberer. */
    font-weight: 600;
    color: var(--schwarz);
    margin-bottom: 1rem;
}

/* ── Dashboard-Kacheln ───────────────── */
.stat-card {
    border: 1px solid var(--grau-border);
    /* Vorher: rote 3px left-border. Jetzt: gleichmäßige dünne Umrandung. */
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--schatten);
    /* transition: sorgt dafür, dass sich die Karte beim Überfahren SANFT verändert,
       statt schlagartig. Wir animieren Schatten und Position (transform). */
    transition: box-shadow var(--uebergang), transform var(--uebergang);
}

/* Hover-Lift: die Karte hebt sich beim Überfahren leicht an und wirft mehr Schatten.
   translateY(-2px) verschiebt sie 2 Pixel nach oben. Rein optisches Feedback. */
.stat-card:hover {
    box-shadow: var(--schatten-hover);
    transform: translateY(-2px);
}

.stat-card .display-5 {
    font-weight: 700;
    color: var(--schwarz);
    font-size: 2.25rem;
}

/* Kleiner Farbakzent oben auf einer Kennzahl-Kachel (optional per Modifier). */
.stat-card .stat-icon {
    font-size: 1.4rem;
    color: var(--rot);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * NEUE DASHBOARD-BAUSTEINE (Frontend-Überarbeitung)
 * Diese Klassen werden vom neuen Verwaltungs-Dashboard genutzt. Sie sind bewusst
 * generisch gehalten, damit man sie auch auf anderen Seiten wiederverwenden kann.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Shortcut-Kachel ──────────────────
 * Eine ganzflächig anklickbare Kachel (als <a>) mit Icon-Kreis, Titel und Untertitel.
 * Sie ist das Herz des neuen Dashboards: ein „Schnellzugriff" in einen Bereich.
 */
.shortcut-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: white;
    border: 1px solid var(--grau-border);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    /* text-decoration: none entfernt die blaue Link-Unterstreichung. */
    text-decoration: none;
    color: var(--schwarz);
    height: 100%;   /* alle Kacheln einer Reihe gleich hoch */
    transition: box-shadow var(--uebergang), transform var(--uebergang), border-color var(--uebergang);
}

.shortcut-card:hover {
    box-shadow: var(--schatten-hover);
    transform: translateY(-2px);
    border-color: var(--rot);
    color: var(--schwarz);
}

/* Der runde, farbige Kreis, in dem das Icon sitzt. */
.shortcut-card .shortcut-icon {
    flex: 0 0 auto;               /* Kreis behält seine Größe, schrumpft nicht */
    width: 44px;
    height: 44px;
    border-radius: 50%;           /* 50 % = perfekter Kreis */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--rot-hell);
    color: var(--rot);
}

.shortcut-card .shortcut-titel {
    font-weight: 600;
    line-height: 1.2;
}

.shortcut-card .shortcut-sub {
    font-size: 0.8rem;
    color: var(--grau-text);
}

/* Ein optionaler Zähler-Badge rechts in der Kachel (z. B. „3 offen"). */
.shortcut-card .shortcut-badge {
    margin-left: auto;   /* schiebt den Badge an den rechten Rand */
}

/* ── Abschnitt (Section) im Dashboard ──
 * Ein visuell abgesetzter Block mit Überschrift. Gibt dem Dashboard Struktur.
 */
.dashboard-section {
    margin-bottom: 2.5rem;
}

/* ── Diagramm-Karte ───────────────────
 * Rahmen + Padding um ein serverseitig gerendertes SVG-Diagramm.
 */
.chart-card {
    background: white;
    border: 1px solid var(--grau-border);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1rem 1.1rem 0.75rem;
    height: 100%;
}

.chart-card .chart-titel {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
    color: var(--schwarz);
}

.chart-card .chart-sub {
    font-size: 0.78rem;
    color: var(--grau-text);
}

/* Platzhalter-Kachel (z. B. „Tagesfragen – Auswertung folgt"): bewusst gedämpft,
   damit klar ist, dass hier noch keine echte Funktion steckt. */
.platzhalter-card {
    background: repeating-linear-gradient(
        45deg, #fafafa, #fafafa 10px, #f4f4f4 10px, #f4f4f4 20px
    );
    border: 1px dashed var(--grau-border);
    border-radius: var(--radius);
    color: var(--grau-text);
    padding: 1.25rem;
}

/* ── Area-Switch (oberer Bereichs-Umschalter: Dashboard | Meine Woche) ──
 * Ein „Segmented Control": zwei/drei zusammenhängende Reiter. Der aktive Reiter
 * ist rot gefüllt. Sitzt in der schwarzen Navbar, daher helle Grundfarben.
 */
.area-switch {
    display: inline-flex;
    /* Auf dem hellen Header: zarter grauer Hintergrund als „Gleis" für die Pillen. */
    background: var(--grau-hell);
    border: 1px solid var(--grau-border);
    border-radius: 999px;      /* 999px = vollständig runde Enden (Pillen-Form) */
    padding: 3px;
    gap: 2px;
}

.area-switch a {
    text-decoration: none;
    color: var(--grau-text);   /* gedämpftes Grau für den inaktiven Reiter */
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;       /* Text nicht umbrechen */
    transition: background var(--uebergang), color var(--uebergang);
}

.area-switch a:hover {
    color: var(--schwarz);
}

/* Der aktive Reiter: rot gefüllt, weißer Text. */
.area-switch a.aktiv {
    background: var(--rot);
    color: #fff;
}

/*
 * Im eingeklappten Hamburger-Menü (unterhalb des lg-Breakpoints, also < 992px)
 * zeigt der Bereichs-Umschalter NUR die Icons. Grund: Mit Text passten die drei
 * Reiter (v. a. "Auswertungen") nicht in die schmale Handy-Breite und wurden
 * abgeschnitten (die Pillen dürfen nicht umbrechen). Icon-only bleibt eine
 * kompakte, saubere Segment-Pille.
 * Der Text wird NICHT via display:none entfernt, sondern "visually-hidden"
 * (aus dem Fluss genommen, aber für Screenreader/Barrierefreiheit erhalten).
 */
@media (max-width: 991.98px) {
    .navbar .area-switch {
        margin: 0.35rem 0;   /* etwas Luft, wenn die Pille im Menü untereinander steht */
    }
    .area-switch a .area-switch-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    /* Ohne sichtbaren Text braucht das Icon keinen rechten Abstand mehr. */
    .area-switch a .bi {
        margin-right: 0 !important;
    }
    /* Etwas größere Tap-Fläche für die reinen Icon-Knöpfe. */
    .area-switch a {
        padding: 0.4rem 0.85rem;
    }
}

/* ── Scrollbare Tab-Leisten ──────────────────────────────────────────────────
 * Bootstrap-"nav-tabs" haben von Haus aus flex-wrap:wrap. Bei vielen Reitern
 * (z. B. 6 Reiter in der Athleten-Auswertung) brechen sie auf dem Handy in zwei
 * oder drei zerklüftete Zeilen um – das sieht kaputt aus. Die Zusatzklasse
 * .tabs-scroll zwingt die Reiter in EINE Zeile, die bei Platzmangel seitlich
 * scrollt (wie die Tab-Leiste einer Handy-App). Auf breiten Bildschirmen passen
 * ohnehin alle Reiter nebeneinander, dann erscheint keine Scrollleiste – die
 * Klasse kann also gefahrlos immer gesetzt bleiben (kein Media-Query nötig). */
.nav-tabs.tabs-scroll {
    flex-wrap: nowrap;                    /* nicht umbrechen … */
    overflow-x: auto;                     /* … sondern bei Bedarf seitlich scrollen */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;    /* weiches Scrollen auf iOS */
}
.nav-tabs.tabs-scroll .nav-item {
    flex: 0 0 auto;                       /* Reiter behalten ihre natürliche Breite */
}
.nav-tabs.tabs-scroll .nav-link {
    white-space: nowrap;                  /* Reiter-Beschriftung nicht umbrechen */
}
/* Dezente, dünne Scrollleiste (nur WebKit/Blink), damit sie die Reiter nicht überdeckt. */
.nav-tabs.tabs-scroll::-webkit-scrollbar {
    height: 3px;
}
.nav-tabs.tabs-scroll::-webkit-scrollbar-thumb {
    background: var(--grau-border);
    border-radius: 3px;
}

/* ── Buttons ─────────────────────────── */
.btn-rot {
    background: var(--rot);
    color: white;
    border: none;
}

.btn-rot:hover {
    background: var(--rot-dunkel);
    color: white;
}

.btn-outline-rot {
    color: var(--rot);
    border: 1px solid var(--rot);
    background: transparent;
}

.btn-outline-rot:hover {
    background: var(--rot);
    color: white;
}

/* ── Tabellen ────────────────────────── */
.table thead {
    background: #f2f2f2;
    /*
     * Vorher: fast-schwarzer Hintergrund mit weißem Text (sehr dominant).
     * Jetzt: helles Grau mit dunklem Text – dezent, professionell.
     */
    color: #333;
    border-bottom: 2px solid var(--grau-border);
}

.table-hover tbody tr:hover {
    background: #fafafa;
}

/* ── Formulare ───────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: var(--rot);
    box-shadow: 0 0 0 0.15rem rgba(192, 57, 43, 0.12);
    /*
     * box-shadow bei :focus: visuelles Feedback für Keyboard-Navigation.
     * rgba(r, g, b, a): Farbe mit Transparenz (0=transparent, 1=opak).
     * Etwas weniger Opazität als vorher → ruhiger.
     */
}

/* ── Footer ──────────────────────────── */
footer {
    background: var(--schwarz);
    color: rgba(255, 255, 255, 0.4); /* 0.4 statt 0.5: Footer tritt zurück */
    padding: 1.5rem 0;
    margin-top: 4rem;
    font-size: 0.875rem;
}

/*
 * Logo im (dunklen) Footer: Da der Footer schwarz ist und das Vereinslogo Schwarz
 * enthalten kann, setzen wir es in ein kleines weißes, abgerundetes „Chip". So ist
 * jedes Logo – egal welche Farbe – zuverlässig sichtbar.
 */
.footer-logo-chip {
    display: inline-block;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 5px 9px;
    margin-bottom: 0.6rem;
}

.footer-logo-chip img {
    height: 28px;
    width: auto;
    vertical-align: middle;
    display: block;
}

/* ── Badges ──────────────────────────── */
.badge-rot    { background: var(--rot);     color: white; }
.badge-schwarz { background: var(--schwarz); color: white; }

/* Hilfsklasse: Text/Icon in Vereinsrot (z. B. Fallback-Icon auf den Login-Seiten). */
.text-rot { color: var(--rot) !important; }

/* Logo auf den Login-Seiten (über dem Anmeldeformular): groß, aber gedeckelt,
   damit auch ein sehr breites/hohes Logo die Karte nicht sprengt. */
.login-logo {
    max-height: 76px;
    max-width: 220px;
    width: auto;
    height: auto;
}

/* =========================================================================
   TAGESFRAGEN – Skala 1–6 als „Segmented Control" (rein CSS, kein JavaScript)
   =========================================================================
   Aufbau im HTML: ein Container .skala-gruppe mit je einem <label.skala-opt>,
   das einen versteckten Radio-Button und ein sichtbares <span> (die Zahl) umschließt.
   Der Radio bleibt für Tastatur/Screenreader erhalten, ist aber optisch ausgeblendet;
   gestylt wird das <span>. Bei ausgewähltem Radio (input:checked + span) färbt sich
   das zugehörige Feld rot. So entsteht eine hübsche, klickbare Skala ganz ohne Skript. */
.skala-gruppe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.skala-opt {
    margin: 0;
    cursor: pointer;
}
/* Den echten Radio-Button visuell ausblenden – aber NICHT via display:none,
   damit er per Tab erreichbar und für Screenreader nutzbar bleibt. */
.skala-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.skala-opt span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;      /* großes Tap-Ziel fürs Handy */
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--grau-border);
    border-radius: var(--radius-sm);
    background: #fff;
    font-weight: 600;
    color: var(--schwarz);
    transition: all var(--uebergang);
}
.skala-opt span:hover {
    border-color: var(--rot);
    color: var(--rot);
}
/* Ausgewählter Wert: rot gefüllt. */
.skala-opt input:checked + span {
    background: var(--rot);
    border-color: var(--rot);
    color: #fff;
}
/* Sichtbarer Fokusring für Tastatur-Bedienung (Barrierefreiheit). */
.skala-opt input:focus-visible + span {
    outline: 2px solid var(--rot);
    outline-offset: 2px;
}

/* =========================================================================
   ANWESENHEIT – Status als „Segmented Control" (Karten-Erfassung, mobil-first)
   =========================================================================
   Gleiches Grundprinzip wie die Tagesfragen-Skala (.skala-opt): ein <label>
   umschließt einen optisch versteckten (aber bedienbaren) Radio-Button und ein
   sichtbares <span>. Das <span> ist ein großer Pillen-Knopf – ein bequemes
   Tap-Ziel poolside auf dem Handy.

   UNTERSCHIED zur Skala: Hier färben wir NACH BEDEUTUNG (Ampel-Logik), damit der
   Trainer die Auswahl sofort erfasst:
     • anwesend        → grün  (war da)
     • unentschuldigt  → rot   (unentschuldigt gefehlt)
     • entschuldigt/abgemeldet → neutrales Dunkelgrau (fällt aus der Wertung)
   Die Bedeutungsfarbe steuert das Attribut data-status="…" am <label>. */
.status-gruppe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.status-opt {
    margin: 0;
    cursor: pointer;
}
/* Echten Radio ausblenden – aber NICHT display:none (Tastatur/Screenreader). */
.status-opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.status-opt span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;      /* großes Tap-Ziel fürs Handy */
    padding: 0 16px;
    border: 1px solid var(--grau-border);
    border-radius: 999px;  /* Pillenform */
    background: #fff;
    font-weight: 500;
    color: var(--grau-text);
    transition: all var(--uebergang);
}
.status-opt span:hover {
    border-color: var(--schwarz);
    color: var(--schwarz);
}
/* Ausgewählt (neutraler Standard): dunkel gefüllt. Die Bedeutungsfarben unten
   überschreiben diesen Standard für „anwesend" und „unentschuldigt". */
.status-opt input:checked + span {
    background: var(--schwarz);
    border-color: var(--schwarz);
    color: #fff;
}
.status-opt input:focus-visible + span {
    outline: 2px solid var(--rot);
    outline-offset: 2px;
}
/* Bedeutungsfarben nur im ausgewählten Zustand (Ampel). */
.status-opt[data-status="anwesend"] input:checked + span {
    background: var(--gruen);
    border-color: var(--gruen);
}
.status-opt[data-status="unentschuldigt"] input:checked + span {
    background: var(--rot);
    border-color: var(--rot);
}

/* Eine Athleten-Karte in der Anwesenheitserfassung. */
.anwesenheit-karte {
    border: 1px solid var(--grau-border);
    border-radius: var(--radius);
}

/* ── Sticky Speichern-Leiste ─────────────────────────────────────────────────
 * Auf langen Formularseiten (z. B. Anwesenheit für eine große Gruppe) klebt der
 * Speichern-Knopf am unteren Rand mit, sodass man nicht erst ans Seitenende
 * scrollen muss. position:sticky lässt die Leiste beim Scrollen unten „haften",
 * bis das eigentliche Seitenende erreicht ist. Der halbtransparente, leicht
 * verschwommene Hintergrund hebt sie dezent vom durchscrollenden Inhalt ab. */
.speichern-leiste {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: 1rem;
    padding: 0.65rem 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    border-top: 1px solid var(--grau-border);
}
/* Auf dem Handy den Knopf über die volle Breite – ein bequemes Tap-Ziel. */
@media (max-width: 575.98px) {
    .speichern-leiste .btn {
        width: 100%;
    }
}

/* ── "Stapel-Tabelle": breite Tabellen auf dem Handy als Karten ──────────────
 * Breite Datentabellen (viele Spalten) scrollen auf dem Handy unangenehm zur
 * Seite. Mit der Klasse .table-stack wird die Tabelle unter dem lg-Breakpoint
 * "aufgebrochen": Der Tabellenkopf wird ausgeblendet, jede ZEILE wird zu einer
 * Karte und jede ZELLE zu einer eigenen Zeile mit Beschriftung. Die Beschriftung
 * kommt aus dem Attribut data-label="…" der jeweiligen <td> (per CSS ::before).
 *
 * WARUM SO (statt Karten doppelt im HTML)? Weil dasselbe DOM bleibt – vorhandene
 * Interaktionen (Filter, Checkboxen, Dropdowns, Popover) funktionieren unverändert
 * weiter, und es entstehen keine doppelten id-Attribute. Auf ≥lg ist es wieder
 * eine ganz normale Tabelle. */
@media (max-width: 991.98px) {
    .table-stack thead {
        display: none;   /* Kopfzeile weg – die Labels stehen jetzt an den Zellen */
    }
    .table-stack,
    .table-stack tbody,
    .table-stack tr,
    .table-stack td {
        display: block;
        width: 100%;
    }
    .table-stack tr {
        border: 1px solid var(--grau-border);
        border-radius: var(--radius);
        background: #fff;
        margin-bottom: 0.75rem;
        padding: 0.4rem 0.85rem;
        box-shadow: var(--schatten);
    }
    .table-stack td {
        border: 0;
        padding: 0.3rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
    }
    /* Beschriftung der Zelle (aus data-label). Fehlt data-label, bleibt es leer. */
    .table-stack td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--grau-text);
        flex: 0 0 auto;
    }
    /* Zellen ohne Label (z. B. reine Aktions-Zelle) dürfen die volle Breite nutzen. */
    .table-stack td[data-label=""]::before,
    .table-stack td:not([data-label])::before {
        content: none;
    }
}

/* =========================================================================
   TAGESFRAGEN-ERINNERUNGSBANNER (Athletenportal)
   =========================================================================
   Vollbreites, auffälliges Band unter der Navbar. Erscheint, solange der heutige
   Gesundheits-Check nicht ausgefüllt ist (siehe base.html / Context-Processor). */
.tagesfrage-banner {
    background: var(--rot);
    color: #fff;
    box-shadow: var(--schatten);
}
.tagesfrage-banner a.btn-light {
    color: var(--rot);
}

/* Einladungs-Variante: für Sportler, die die Tagesfragen noch nicht angenommen haben.
   Bewusst DEZENTER als das rote Erinnerungsband (ruhiges Blau statt Alarm) – es ist eine
   freiwillige Einladung, kein Alarm. Weißer Text auf dem Blau bleibt gut lesbar. */
.tagesfrage-einladung-banner {
    background: #4a9fd8;
    color: #fff;
    box-shadow: var(--schatten);
}
.tagesfrage-einladung-banner a.btn-light {
    color: #2b6f9e;
}

/* =========================================================================
   ANKÜNDIGUNGS-BANNER (Athletenportal)
   =========================================================================
   Prominente Ankündigungen erscheinen als dunkles Band unter der Navbar – bewusst
   in einer anderen Farbe als das rote Tagesfragen-Banner, damit beide unterscheidbar
   sind. Bleibt sichtbar, bis der Athlet „Nicht mehr anzeigen" klickt. */
.ankuendigung-banner {
    background: var(--schwarz);
    color: #fff;
    box-shadow: var(--schatten);
}
.ankuendigung-banner a.btn-light {
    color: var(--schwarz);
}

/* =========================================================================
   TAGESFRAGEN-SERIE ("Streak", Athletenportal)
   =========================================================================
   Motivations-Elemente im Duolingo-Stil: eine Flamme mit der Anzahl Tage in Folge,
   ein Wochenstreifen aus 7 Punkten und die Meilenstein-Abzeichen. Alles rein per CSS
   (keine Bilder, kein JS – passend zur strengen Content-Security-Policy). */

/* Flamme + Zahl übereinander. Das Icon liegt groß im Hintergrund, die Zahl darüber. */
.serie-flamme {
    position: relative;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rot);
    flex-shrink: 0;
}
.serie-flamme .bi-fire {
    font-size: 3.2rem;
    line-height: 1;
}
.serie-flamme .serie-zahl {
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;                 /* weiße Zahl mitten in der roten Flamme */
}
/* Bei Serie = 0 wirkt die Flamme „aus": grau statt rot, Zahl dunkel. */
.serie-flamme-aus { color: var(--grau-border); }
.serie-flamme-aus .serie-zahl { color: var(--grau-text); }

/* Wochenstreifen: 7 kleine Punkte nebeneinander. */
.wochen-streifen {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}
.tag-punkt {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--grau-border);   /* leerer Tag */
    display: inline-block;
}
.tag-punkt.erledigt { background: var(--rot); }      /* ausgefüllter Tag */
.tag-punkt.heute { box-shadow: 0 0 0 2px var(--rot-hell), 0 0 0 3px var(--rot); }

/* ── Streak-Freezes ("Schutzschilde") ─────────────────────────────────────────
   Ein Freeze rettet die Serie, wenn ein Tag vergessen wurde. Farbe: Eisblau – bewusst
   NICHT das Vereinsrot, damit man Flamme (Serie) und Eiskristall (Schutz) auf einen
   Blick auseinanderhält. */
.tag-punkt.gefroren {
    background: #e3f2fb;                 /* helles Eisblau */
    color: #4a9fd8;
    /* Der Punkt wird zum kleinen Kästchen mit Schneeflocke darin. */
    width: 1.05rem;
    height: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    border: 1px solid #b8dcf0;
}

/* Die Guthaben-Anzeige neben der Flamme: Eiskristall mit Zahl. */
.freeze-anzeige {
    position: relative;
    display: inline-block;
    font-size: 2.2rem;
    line-height: 1;
    color: #4a9fd8;
}
.freeze-zahl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    /* Feiner dunkler Rand, damit die weiße Zahl auf dem hellen Kristall lesbar bleibt. */
    text-shadow: 0 0 2px #2a7fb8, 0 0 3px #2a7fb8;
}
/* Kein Guthaben mehr: grau statt blau – die Serie ist ungeschützt. */
.freeze-leer { color: var(--grau-border); }
.freeze-leer .freeze-zahl { color: var(--grau-text); text-shadow: none; }

/* Meilenstein-Abzeichen als kleine Pillen. Offen = blass, erreicht = rot. */
.abzeichen-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.abzeichen {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: var(--grau-hell);
    color: var(--grau-text);
    border: 1px solid var(--grau-border);
}
.abzeichen.erreicht {
    background: var(--rot);
    color: #fff;
    border-color: var(--rot);
}

/* ── Tagesfragen-Auswertung: Ampel, Matrix, Kategorie-Reiter ──────────────────
   Diese Stile machen die Gesundheitsdaten schneller deutbar: farbige „Ampel"-Chips
   (gut/neutral/schlecht) und eine kompakte Übersichts-Matrix. Alles rein per CSS. */

/* Ampel-Chip: eine kleine farbige Pille um einen Wert. Sanfte Hintergründe mit
   kräftiger Schrift bleiben gut lesbar (auch für farbschwache Nutzer helfen zusätzlich
   die Icons/Marker im HTML). */
.ampel {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.ampel-gut      { background: #e7f4ec; color: #146c43; }
.ampel-neutral  { background: #fdf3e3; color: #8a5a00; }
.ampel-schlecht { background: #fbe6e3; color: #a02c1f; }
/* Werte ohne Ampel (Messwerte/Gewicht): neutral-grau, ohne Wertung. */
.ampel-keine    { color: var(--grau-text); }

/* Kleiner Legenden-Punkt (im Erklär-Kasten neben dem Text). */
.ampel-punkt {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    vertical-align: -1px;
}
.ampel-punkt.gut      { background: #146c43; }
.ampel-punkt.neutral  { background: #d59b3a; }
.ampel-punkt.schlecht { background: #a02c1f; }

/* Übersichts-Matrix: kompakte Tabelle. Die erste Spalte (Sportlername) „klebt" beim
   horizontalen Scrollen am linken Rand, damit man die Zeile immer zuordnen kann. */
.tf-matrix { font-size: 0.9rem; }
.tf-matrix th, .tf-matrix td { text-align: center; vertical-align: middle; }
.tf-matrix th:first-child, .tf-matrix td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
}
.tf-matrix thead th { white-space: nowrap; }
/* Der ⚠-Ausreißer-Marker in einer Zelle. */
.tf-marker { color: var(--gelb); margin-left: 0.15rem; }

/* Rohdaten-Tabelle: erste Spalte (Datum) ebenfalls fixieren beim Scrollen. */
.tf-rohdaten th:first-child, .tf-rohdaten td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 2;
}
/* Kategorie-Einfärbung der Spaltenköpfe (dezente Grundtöne zur Orientierung). */
.tf-kat-Messwerte              { background: #eef4fb !important; }
.tf-kat-Schlaf                 { background: #f1eefb !important; }
.tf-kat-ErholungBeanspruchung  { background: #eefbf3 !important; }

/* Kategorie-Reiter: die aktive Metrik-Rubrik im Vereinsrot hervorheben. */
.tf-reiter .nav-link { color: var(--grau-text); }
.tf-reiter .nav-link.active {
    color: var(--rot);
    font-weight: 600;
    border-color: var(--grau-border) var(--grau-border) #fff;
}

/* ── Einklappbare Abschnitte (<details>/<summary>) ────────────────────────────
   Wir verstecken den Standard-Marker der Browser und setzen einen eigenen kleinen
   Pfeil, der sich beim Aufklappen dreht. Reines CSS, kein JavaScript. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }   /* Safari/Chrome: Dreieck aus */
summary::before {
    content: "\F285";                 /* Bootstrap-Icons: chevron-right */
    font-family: "bootstrap-icons";
    font-size: 0.8em;
    margin-right: 0.4rem;
    display: inline-block;
    transition: transform var(--uebergang);
    color: var(--grau-text);
}
details[open] > summary::before { transform: rotate(90deg); }   /* nach unten zeigen */

/* ── Mobil: Verwaltungs-Navigation umbrechen lassen ───────────────────────────
   FRÜHER stand hier `flex-wrap: nowrap; overflow-x: auto;` – die Leiste war seitlich
   wischbar. Das hatte aber einen ECHTEN BUG:

   `overflow-x: auto` erzeugt im Browser einen sogenannten "Clipping-Kontext": Alles,
   was über den Rand dieses Kastens hinausragt, wird ABGESCHNITTEN. Die Dropdown-Menüs
   ("Planung ▾", "Personen ▾" …) werden von Bootstrap aber genau so positioniert – sie
   ragen nach unten aus der Leiste heraus. Auf dem Handy wurden sie deshalb abgeschnitten
   oder erzeugten einen zweiten, verschachtelten Scrollbereich. Die Menüs waren praktisch
   unbenutzbar.

   LÖSUNG: Auf schmalen Bildschirmen die Leiste einfach UMBRECHEN lassen (flex-wrap: wrap).
   Dann gibt es kein overflow und damit auch keinen Clipping-Kontext – die Dropdowns
   klappen wieder normal auf. Die Leiste wird dafür zwei- oder dreizeilig; das ist auf dem
   Handy völlig in Ordnung und allemal besser als ein kaputtes Menü. */
@media (max-width: 767.98px) {
    .verwaltung-nav .nav {
        flex-wrap: wrap;
        row-gap: 0.15rem;
    }
    .verwaltung-nav .nav-link {
        white-space: nowrap;
        padding-inline: 0.6rem;      /* etwas kompakter, damit mehr in eine Zeile passt */
        font-size: 0.9rem;
    }
    /* "ms-auto" (schiebt Einstellungen/Meine Woche nach rechts) ergibt beim Umbruch
       keinen Sinn mehr – sonst klebt der Link allein am rechten Rand einer neuen Zeile. */
    .verwaltung-nav .nav-link.ms-auto { margin-left: 0 !important; }
}

/* ── Ladezustand: Knopf während des Absendens ─────────────────────────────────
   Der Doppel-Submit-Schutz (app.js, Abschnitt 8) sperrt den Knopf und tauscht seinen
   Text gegen einen Spinner. Ein gesperrter Knopf soll klar als "gerade beschäftigt"
   erkennbar sein – nicht als kaputt. */
.btn:disabled,
.btn[disabled] {
    cursor: progress;
    opacity: 0.75;
}

/* ── Leerzustand (_leerzustand.html) ──────────────────────────────────────────
   Reine Feinheit: Das große Icon soll ruhig und zurückhaltend wirken. */
.leerzustand-icon {
    font-size: 2.5rem;
    color: var(--grau-border);
}

/* ── Easter Eggs (siehe planung/static/planung/js/eastereggs.js) ──────────────
   Reine Spielerei: Konfetti nach dem Konami-Code. Bewusst komplett in CSS – so braucht
   das JavaScript keine Animations-Bibliothek. */

/* Konfetti: Der Behälter liegt über allem, lässt aber Klicks durch (pointer-events: none)
   – sonst wäre die Seite während des Regens nicht bedienbar. */
.konfetti-behaelter {
    position: fixed;
    inset: 0;                 /* Kurzform für top/right/bottom/left: 0 */
    pointer-events: none;
    overflow: hidden;
    z-index: 2000;            /* über der Navbar (die liegt bei ~1030) */
}
.konfetti {
    position: absolute;
    top: -12px;               /* startet knapp oberhalb des sichtbaren Bereichs */
    width: 8px;
    height: 14px;
    opacity: 0.9;
    animation-name: konfetti-fallen;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes konfetti-fallen {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* BARRIEREFREIHEIT: Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat (z. B.
   weil ihm von Animationen schwindelig wird), bekommt keine. Das ist kein Extra, sondern
   gehört zum guten Ton – und kostet uns hier drei Zeilen. */
@media (prefers-reduced-motion: reduce) {
    .konfetti { animation: none; }
    .konfetti-behaelter { display: none; }
}

/* ── Der versteckte Footer-Punkt (Easter Egg) ─────────────────────────────────
   Ein anklickbarer Trennpunkt zwischen zwei Footer-Links. Er MUSS exakt so aussehen
   wie die normalen Trennpunkte (<span class="mx-2">·</span>) – sonst ist er kein
   Versteck mehr. Deshalb überschreiben wir alles, was ein Link normalerweise mitbringt:
   Farbe, Unterstreichung, Hover-Effekt und den Hand-Mauszeiger. */
.footer-egg,
.footer-egg:hover,
.footer-egg:focus {
    margin-inline: 0.5rem;        /* entspricht Bootstraps mx-2 */
    color: inherit;               /* dieselbe Farbe wie der umgebende Footer-Text */
    text-decoration: none;
    cursor: default;              /* kein Hand-Cursor – sonst verrät er sich sofort */
    outline: none;
}

/* ══ Tagesfragen: nüchternes Abweichungs-Panel (Trainer) ═══════════════════════
   JS-freie Bausteine (CSP-konform) für die Kachel „Abweichungen vom eigenen Mittel".
   WICHTIG – Datenschutz/Neutralität: Die Farben sind bewusst WERTNEUTRAL. Es gibt
   KEIN Grün/Rot als gut/schlecht. Wir nutzen nur EINEN Blau-Ton (wie die neutrale
   Trendlinie in den Diagrammen) und Grautöne. Farbe dient hier nur der Orientierung,
   nicht der Bewertung. */

/* CSS-Tooltip: erscheint beim Überfahren mit der Maus ODER bei Tastatur-Fokus sofort
   und gut sichtbar. Das native title-Attribut reicht nicht (träge, teils unsichtbar),
   deshalb dieser eigene, rein per CSS gelöste Tooltip.
   Nutzung: <span class="tf-tip" tabindex="0" data-tip="Erklärungstext …">SD</span>
   Der Text steht im data-tip-Attribut; content: attr(data-tip) liest ihn aus. */
.tf-tip {
    position: relative;
    cursor: help;                             /* Fragezeichen-Cursor signalisiert „Hilfe" */
    border-bottom: 1px dotted var(--grau-text);
    outline: none;
}
.tf-tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    bottom: 135%;                             /* Sprechblase oberhalb des Wortes */
    z-index: 30;
    width: max-content;
    max-width: 260px;
    background: var(--schwarz);
    color: #fff;
    padding: 6px 9px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;                               /* im Ruhezustand unsichtbar … */
    visibility: hidden;
    transition: opacity var(--uebergang);
    box-shadow: var(--schatten-hover);
}
.tf-tip:hover::after,
.tf-tip:focus::after {                        /* … erst bei Hover/Fokus einblenden */
    opacity: 1;
    visibility: visible;
}

/* Wertneutrale Abweichungs-Leiste: die BREITE zeigt die GRÖSSE der Abweichung (in SD,
   gedeckelt bei 4 SD = volle Leiste). Einheitliches Blau – damit nicht „viel Balken =
   schlecht" mitschwingt. Es ist reine Größen-Anzeige, keine Wertung. */
.tf-sd-spur {
    display: inline-block;
    width: 84px;
    height: 8px;
    background: var(--grau-border);
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
}
.tf-sd-fuell {
    display: block;
    height: 100%;
    background: var(--blau);
    border-radius: 999px;
}

/* Kleine Kategorie-Pille – nutzt die vorhandenen, neutralen tf-kat-Hintergründe
   (Messwerte/Schlaf/Erholung) nur zur Orientierung, welche Rubrik die Frage hat. */
.tf-kat-pille {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    color: var(--schwarz);
    border: 1px solid var(--grau-border);
}

/* Eine Abweichungs-Zeile: dünne Trennlinie oben, etwas Luft. */
.tf-abw-zeile {
    border-top: 1px solid var(--grau-border);
}

/* =========================================================================
   SIDEBAR-NAVIGATION (Trainerportal) – Phase 1a
   =========================================================================
   Ersetzt die frühere doppelte/dreifache Navigation (Top-Navbar + Sub-Nav +
   Dashboard-Kacheln) durch EINE linke Seitenleiste. Responsive über Bootstraps
   „offcanvas-lg": ab ≥992px eine feste Spalte, darunter ein per Hamburger
   ein-/ausklappbares Offcanvas (CSP-konform via data-bs-*). */
.app-shell {
    min-height: 100vh;
}
.app-sidebar {
    background: #fff;
    border-right: 1px solid var(--grau-border);
}
@media (min-width: 992px) {
    /* Feste Spaltenbreite. Der weiße Sidebar-Hintergrund STRECKT sich über die volle
       Höhe der App-Shell (bis zum Footer), weil die App-Shell align-items-stretch nutzt. */
    .app-sidebar {
        flex: 0 0 250px;
        width: 250px;
    }
    /* Die Navigation selbst „klebt" beim Scrollen – aber UNTER der vollbreiten Kopf-
       leiste (top = Kopfleisten-Höhe), damit sie nicht darunter verschwindet. Sie scrollt
       bei Bedarf selbst, während der weiße Hintergrund bis zum Footer reicht. */
    .app-sidebar > .offcanvas-body {
        position: sticky;
        top: var(--topbar-h);
        max-height: calc(100vh - var(--topbar-h));
        overflow-y: auto;
    }
}
/* Der Inhaltsbereich rechts der Sidebar. min-width:0 verhindert, dass breite
   Inhalte (Tabellen) das Flex-Layout aufblähen. */
.app-main {
    min-width: 0;
}
/* Vollbreite, klebende Kopfleiste ganz oben (über Sidebar + Inhalt). --topbar-h ist die
   feste Höhe, an der sich der Sticky-Offset der Sidebar-Navi ausrichtet. z-index 1030 hält
   sie über dem Inhalt, aber unter dem mobilen Offcanvas (1045), das sie überlagern darf. */
:root { --topbar-h: 3.5rem; }
.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--grau-border);
    box-shadow: var(--schatten);
}
.app-brand {
    color: var(--schwarz);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.app-brand img { height: 30px; width: auto; }
.app-brand .bi-water { color: var(--rot); }

/* Navigations-Links in der Sidebar. */
.app-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}
.app-nav .nav-link {
    color: #333;
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    transition: background var(--uebergang), color var(--uebergang);
}
.app-nav .nav-link .bi:first-child { width: 1.4rem; }
.app-nav .nav-link:hover {
    background: var(--grau-hell);
    color: var(--rot);
}
.app-nav .nav-link.aktiv {
    background: var(--rot-hell);
    color: var(--rot);
    font-weight: 600;
}
/* Kleine Abschnitts-Überschrift zwischen Gruppen von Links. */
.app-nav .sidebar-heading {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grau-text);
    padding: 0.6rem 0.75rem 0.2rem;
    margin-top: 0.35rem;
}
/* Badge (Zähler) rechtsbündig im Link. */
.app-nav .nav-link .badge { margin-left: auto; }

/* ── Klappbare Gruppen (Akkordeon) ──────────────────────────────────────────
   Der Gruppen-Kopf sieht aus wie eine Überschrift, ist aber ein <button>, der per
   Bootstrap-collapse (data-bs-toggle, CSP-konform) die Items auf-/zuklappt. */
.app-nav .sidebar-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grau-text);
    padding: 0.65rem 0.75rem 0.35rem;
    margin-top: 0.35rem;
    cursor: pointer;
}
.app-nav .sidebar-group .bi:first-child { width: 1.4rem; }
.app-nav .sidebar-group .grp-label { flex: 1 1 auto; }
.app-nav .sidebar-group:hover { color: var(--rot); }
.app-nav .sidebar-group .caret {
    font-size: 0.8rem;
    transition: transform var(--uebergang);
}
/* Zugeklappt (.collapsed): Pfeil zur Seite drehen. */
.app-nav .sidebar-group.collapsed .caret { transform: rotate(-90deg); }
/* Zähler-Badge am Gruppenkopf (zeigt Dringendes auch bei zugeklappter Gruppe). */
.app-nav .sidebar-group .badge { font-size: 0.65rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE-FEINSCHLIFF & STICKY  (Handy: kein seitliches Scrollen; Vorbild Einheiten)
   Reines CSS – kein JavaScript (CSP-konform). Laptop-Ansicht bleibt unverändert,
   außer bei den bewusst gewünschten Sticky-Elementen (gelten Handy + Laptop).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sticky (Handy + Laptop) ─────────────────────────────────────────────── */
/* Reiter-Leiste (Überblick/Zusammenhang/…) bleibt beim Scrollen oben. */
.sticky-reiter { position: sticky; top: 0; z-index: 30; background: #fff; padding-top: .3rem; }
/* Filter-/Zeitraumleiste bleibt griffbereit (etwas unter den Reitern). */
.sticky-filter { position: sticky; top: 3.1rem; z-index: 20; }
/* Tabellenkopf bleibt beim vertikalen Scrollen sichtbar. */
.table-responsive thead th { position: sticky; top: 0; background: #fff; z-index: 2; }
/* Aktions-/Speicherleiste bleibt unten griffbereit. */
.sticky-actions { position: sticky; bottom: 0; z-index: 20; background: #fff;
                  padding: .5rem 0; border-top: 1px solid #e9ecef; }

/* ── Karten-Tabellen: auf schmalen Screens Zeilen als Karten ─────────────── */
/* Tabelle die Klasse .tabelle-karten geben; jede <td> ein data-label="Spalte". */
@media (max-width: 640px) {
  table.tabelle-karten thead { display: none; }
  table.tabelle-karten, table.tabelle-karten tbody,
  table.tabelle-karten tr, table.tabelle-karten td { display: block; width: 100%; }
  table.tabelle-karten tr {
    border: 1px solid #e9ecef; border-radius: .6rem; margin-bottom: .6rem;
    padding: .4rem .7rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  table.tabelle-karten td {
    border: none; padding: .28rem 0; display: flex; justify-content: space-between;
    gap: 1rem; text-align: right; align-items: center;
  }
  table.tabelle-karten td::before {
    content: attr(data-label); font-weight: 600; color: #6c757d; text-align: left;
  }
  /* Leere Zellen (kein Wert) auf dem Handy ausblenden. */
  table.tabelle-karten td:empty { display: none; }

  /* ── Größere Tap-Ziele auf dem Handy ───────────────────────────────────── */
  .btn-sm { min-height: 40px; }
  .form-select-sm, .form-control-sm { min-height: 40px; }
  .nav-pills .nav-link { padding: .5rem .9rem; }
  .app-nav .nav-link { padding-top: .55rem; padding-bottom: .55rem; }

  /* Filter unter den Reitern brauchen auf dem Handy etwas mehr Abstand. */
  .sticky-filter { top: 3.4rem; }
}

/* ── Verantwortliche(r) Trainer ────────────────────────────────────────────
   Dezente Kennzeichnung des/der verantwortlichen Trainer(s) in Einheiten-Karten
   und -Listen: eine feine gepunktete Unterstreichung. Bewusst zurückhaltend –
   sie soll auffindbar sein, aber nicht schreien. Der Tooltip erklärt die Bedeutung. */
.trainer-verantwortlich {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ── Trainer-Checkbox-Auswahl mit Suchfeld (Phase 2) ─────────────────────────
   Ersetzt die kleinen <select multiple>-Boxen. Scrollbarer Container, mehrspaltige
   Checkbox-Liste mit klaren Klickflächen; Abwählen per Klick. */
.checkbox-scroll { max-height: 220px; overflow-y: auto; }
.checkbox-scroll ul {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .1rem .75rem;
}
.checkbox-scroll li { margin: 0; }
.checkbox-scroll label {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .22rem .3rem; cursor: pointer; font-size: .95rem; width: 100%;
}
.checkbox-scroll label:hover { background: rgba(0,0,0,.04); border-radius: 4px; }
.checkbox-scroll input[type="checkbox"] { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* Kompakte Variante für die Massenanlage-Tabellenzellen. */
.checkbox-scroll-sm { max-height: 130px; overflow-y: auto; min-width: 150px; }
.checkbox-scroll-sm ul { list-style: none; margin: 0; padding: 0; }
.checkbox-scroll-sm label {
    display: flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .82rem; cursor: pointer;
}
.checkbox-scroll-sm input[type="checkbox"] { width: .95rem; height: .95rem; flex: 0 0 auto; }