/* ===========================================================================
   Übungsdatenbank und Trainingsplaner
   ---------------------------------------------------------------------------
   Bis 2026-08-20 standen diese Regeln als <style>-Block direkt in
   Uebungsdatenbank.php. Sie liegen jetzt hier, weil Inline-CSS im Portal
   nicht vorgesehen ist und die Regeln sonst bei jedem Seitenaufruf neu
   übertragen würden, statt im Browser-Cache zu bleiben.
   =========================================================================== */

#uebVerschiebenSuche { width: 100%; margin-bottom: 10px; }
.ueb-import-seiten { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.ueb-import-seiten .ueb-medien-item { width: 150px; height: 200px; }
.ueb-import-seiten .ueb-medien-item img { object-fit: contain; background: rgba(0,0,0,.18); }
.ueb-import-seiten .ueb-medien-aktionen { opacity: 1; }
.ueb-import-wahl { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; cursor: pointer; }
/* Varianten im Bearbeiten-Formular. Die Klassen gab es schon, Regeln dazu
   bisher nicht — die Zeilen liefen ungestylt mit. */
.ueb-var-edit-liste { display: flex; flex-direction: column; gap: 10px; }
.ueb-var-edit-row {
    padding: 10px 12px;
    /* Themefaehig ueber --border-light statt fester Weiss-Transluzenz, sonst
       waere der Rahmen im hellen Design unsichtbar. */
    border: 1px solid var(--border-light);
    border-radius: 8px;
}
.ueb-var-del-btn {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.ueb-var-del-btn:hover { border-color: var(--tigers-yellow); color: var(--tigers-yellow-ink); }
.ueb-var-bild-box { margin-top: 6px; }
.ueb-var-bild-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ueb-var-bild-kachel {
    position: relative;
    width: 84px; height: 84px;
    border: 2px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}
.ueb-var-bild-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ueb-var-bild-kachel input { position: absolute; top: 4px; left: 4px; accent-color: var(--tigers-yellow); }
.ueb-var-bild-kachel:has(input:checked) { border-color: var(--tigers-yellow); }
.ueb-import-wahl input { accent-color: var(--tigers-yellow); }
.ueb-plan-var-box, .ueb-plan-img-box, .ueb-plan-parallel-box {
    margin-top: 8px;
    padding: 8px 12px;
    /* Themefaehig ueber --border-light: die fruehere feste Weiss-Transluzenz
       war im hellen Design praktisch unsichtbar. */
    border: 1px solid var(--border-light);
    border-radius: 8px;
}
.ueb-plan-var-title, .ueb-plan-img-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tigers-yellow-ink, #fdee17);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ueb-plan-var-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    margin-bottom: 4px;
    cursor: pointer;
}
.ueb-plan-var-chk {
    accent-color: var(--tigers-yellow-ink, #fdee17);
    margin-top: 3px;
}
.ueb-plan-img-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.ueb-plan-img-thumb-item {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
}
.ueb-plan-img-thumb-item img {
    width: 68px;
    height: 50px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    transition: opacity 0.2s;
}
.ueb-plan-img-chk {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    accent-color: #4ade80;
    transform: scale(1.2);
}
.ueb-plan-img-thumb-item:has(.ueb-plan-img-chk:not(:checked)) img {
    opacity: 0.35;
    filter: grayscale(1);
}
.ueb-plan-parallel-box.on {
    border-color: var(--tigers-yellow-40);
    background: rgba(253, 238, 23, 0.05);
    background: color-mix(in srgb, var(--tigers-yellow) 5%, transparent);
}
.ueb-plan-parallel-btn {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    /* #ccc war ein Dunkelmodus-Grau und kam im Hellmodus auf 1,6:1 (2026-08-23). */
    color: rgba(var(--ink) / 0.75);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.ueb-plan-parallel-btn:hover, .ueb-plan-parallel-btn.on {
    background: rgba(253, 238, 23, 0.15);
    background: color-mix(in srgb, var(--tigers-yellow) 15%, transparent);
    border-color: var(--tigers-yellow-ink, #fdee17);
    color: #fff;
}
.ueb-plan-parallel-body {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ueb-plan-parallel-type-row {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
    font-size: 0.82rem;
}
.ueb-plan-par-type-lbl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.ueb-plan-par-twin-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 3px solid var(--tigers-yellow-ink, #fdee17);
}
.ueb-plan-par-hinweis-input {
    width: 100%;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   Varianten im Bearbeiten-Formular (2026-08-20)
   Jede Variante ist eine eigene Karte, die zugeklappt nur Bezeichnung und
   Gruppe zeigt. Bei sechs Passvarianten waere das Formular sonst unbedienbar
   lang - aufgeklappt ist immer nur die, an der gerade gearbeitet wird.
   --------------------------------------------------------------------------- */
.ueb-var-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.ueb-var-pfeil { transition: transform .15s ease; opacity: .65; font-size: .8rem; }
.ueb-var-edit-row.offen .ueb-var-pfeil { transform: rotate(90deg); }
.ueb-var-kopf-text { flex: 1 1 auto; font-weight: 600; }
.ueb-var-kopf-gruppe {
    flex: 0 0 auto;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    opacity: .8;
}
/* Zugeklappt: nur die Kopfzeile ist zu sehen. */
.ueb-var-body { display: none; margin-top: 10px; }
.ueb-var-edit-row.offen .ueb-var-body { display: block; }
.ueb-var-feld { display: block; margin-bottom: 8px; }
.ueb-var-feld-l {
    display: block;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .75;
    margin-bottom: 3px;
}
.ueb-var-feld input, .ueb-var-feld textarea { width: 100%; }
.ueb-var-zeile2 { display: flex; flex-wrap: wrap; gap: 10px; }
.ueb-var-zeile2 .ueb-var-feld { flex: 1 1 180px; margin-bottom: 8px; }
.ueb-var-zeile2 .ueb-var-feld-breit { flex: 2 1 260px; }

/* ---------------------------------------------------------------------------
   Variantengruppen in Anzeige, Freigabe und Trainingsplan
   --------------------------------------------------------------------------- */
.ueb-detail-var-gruppe, .ueb-plan-var-gruppe {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    opacity: .7;
    margin: 10px 0 4px;
}
.ueb-plan-var-gruppe { margin: 8px 0 3px; }
.ueb-detail-var-korrektur { font-size: .88rem; opacity: .85; margin-top: 4px; }
.ueb-freigabe-feld { margin-bottom: 8px; }
.ueb-freigabe-feld-titel {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .7;
}
.ueb-freigabe-var { font-size: .88rem; margin-bottom: 3px; }

/* Zaehler an der Varianten-Box im Plan: macht sichtbar, dass beim Einfuegen
   bewusst nichts vorausgewaehlt ist. */
.ueb-plan-var-zaehler {
    margin-left: 8px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    opacity: .75;
}
.ueb-plan-var-zaehler.leer { opacity: 1; }

/* ---------------------------------------------------------------------------
   Druckauswahl in den Plan-Kopfdaten
   --------------------------------------------------------------------------- */
.ueb-druckwahl {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
}
.ueb-druckwahl-titel {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.ueb-druckwahl-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.ueb-druckwahl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-size: .84rem;
    cursor: pointer;
}
.ueb-druckwahl-chip input { accent-color: var(--tigers-yellow); }
.ueb-druckwahl-chip:has(input:checked) { border-color: var(--tigers-yellow); }

/* Variantenzeile im Plan: Bezeichnung fett, darunter gedaempft die Abweichung.
   Vorher stand beides in einer Zeile und der Umbruch begann mit einem
   fuehrenden Doppelpunkt - das las sich wie ein Fehler. */
.ueb-plan-var-text { display: flex; flex-direction: column; gap: 1px; }
.ueb-plan-var-besch { opacity: .75; font-size: .82rem; }

/* ===========================================================================
   Ersteller und Sichtbarkeit (2026-08-20)
   ---------------------------------------------------------------------------
   Farben durchgehend explizit ueber rgb(var(--ink)) statt geerbt: `*
   { color }` im Basis-CSS faerbt sonst alles auf #333 um, und die
   Detailansicht (.ueb-detail-scrim) haengt ausserhalb von .content.ueb,
   dorthin wird der Inhalt nur geklont.
   =========================================================================== */

/* Kleines Schloss neben dem Titel einer privaten Uebung. */
.ueb-privat-schloss {
    font-size: 0.72em;
    color: var(--tigers-yellow-text);
    vertical-align: middle;
    margin-left: 4px;
}

/* Ersteller-Zeile auf der Kachel: dieselbe Zurueckhaltung wie die
   Material-Zeile darueber, damit sie den Titel nicht ueberstimmt. */
.ueb-ex-ersteller {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 6px 0 8px;
    font-size: 0.74rem; line-height: 1.4;
    color: rgba(var(--ink) / 0.72);
}
.ueb-ex-ersteller i { opacity: 0.7; }

/* "nur fuer dich" - als Plakette, damit der Zustand auch ohne das Schloss
   im Titel erkennbar bleibt (z. B. in der geklonten Katalog-Kachel). */
.ueb-privat-hinweis {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px;
    border: 1px solid rgba(var(--ink) / 0.22);
    border-radius: 999px;
    font-size: 0.68rem;
    color: rgba(var(--ink) / 0.72);
    white-space: nowrap;
}
.ueb-privat-hinweis i { font-size: 0.9em; color: var(--tigers-yellow-text); }

/* Ersteller in der Detailansicht: sitzt direkt unter der Quelle und teilt
   sich deren Grundstil, braucht aber keinen zweiten Trennstrich. */
.ueb-detail-ersteller {
    margin-top: 6px; padding-top: 0;
    border-top: 0;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}

/* Wer hat eingereicht - im Freigabe-Reiter bewusst deutlicher als auf der
   Kachel: der Admin entscheidet hier und muss wissen, wen er fragen kann. */
.ueb-freigabe-ersteller {
    display: flex; align-items: center; gap: 7px;
    margin: 2px 0 8px;
    font-size: 0.8rem;
    color: rgba(var(--ink) / 0.78);
}
.ueb-freigabe-ersteller b { color: rgb(var(--ink)); }
.ueb-freigabe-ersteller i { color: var(--tigers-yellow-text); }

/* ===========================================================================
   Trainingsplaner: sticky Kennzahlen-/Export-Leiste + einklappbare Kopfdaten
   ---------------------------------------------------------------------------
   Vorher lag zwischen dem Reiter-Wechsel und der ersten Uebung ein Block aus
   Planverwaltung, Trainingseinheit, neun Kopf-Feldern und der Druckwahl -
   "Als Word"/"Als PDF" standen dabei fest am Kartenende, unabhaengig von der
   Planlaenge. Kennzahlen und Export bleiben jetzt oben sichtbar, die
   Kopfdaten klappen zusammen, sobald sie einmal ausgefuellt sind
   (Vorgabe Maik 2026-09-03).
   =========================================================================== */
.ueb-plan-stickybar {
    position: sticky;
    top: calc(var(--navbar-height) + 12px);
    z-index: 3;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    background: var(--bg-flaeche);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
/* Fliesstext, kein Flex-Gitter (2026-09-17 auf jede Breite ausgeweitet).
   Als Flex-Container wird jede <span> zum eigenen Flex-Element, und die
   Woerter dazwischen ebenfalls: "Trainingsplan ·", "2", "Uebungen ·", "30",
   "Min." Sobald die Leiste zu schmal wird, bricht das an den falschen
   Stellen um - "2" stand unter "Uebungen". Bis zum 17.09. fiel das nur
   unter 700px auf, seit der Plan in der rechten Spalte der Werkbank steht,
   auch auf dem grossen Bildschirm. */
.ueb-plan-stickybar-sec {
    display: block; line-height: 1.5;
    font-size: 0.82rem; font-weight: 700;
    border-left: 5px solid var(--tigers-yellow);
    padding-left: 12px;
    color: rgb(var(--ink));
}
.ueb-plan-stickybar-sec i { color: var(--tigers-yellow-ink); margin-right: 6px; }
/* Zusammengehoeriges nicht trennen: "30 Min." und "18:00-19:44" bleiben je
   auf einer Zeile, auch wenn der Satz davor umbricht. */
.ueb-plan-stickybar-sec span { white-space: nowrap; }
.ueb-plan-stickybar-aktionen { margin: 0; }

.ueb-kopfdaten { margin-bottom: 14px; }
.ueb-kopfdaten-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: var(--glass-08); border: 1px solid var(--border-light); border-radius: 10px;
    padding: 10px 14px; cursor: pointer; color: rgb(var(--ink)); font: inherit; text-align: left;
}
.ueb-kopfdaten-toggle:hover, .ueb-kopfdaten-toggle:focus-visible { background: var(--glass-12); }
.ueb-kopfdaten-toggle-label { display: flex; align-items: center; gap: 9px; font-size: 0.86rem; font-weight: 700; }
.ueb-kopfdaten-toggle-label i { color: var(--tigers-yellow-ink); }
.ueb-kopfdaten-stand { font-weight: 400; color: rgba(var(--ink) / 0.65); font-size: 0.82rem; }
.ueb-kopfdaten-chevron { transition: transform .15s; color: rgba(var(--ink) / 0.6); }
.ueb-kopfdaten-toggle[aria-expanded="true"] .ueb-kopfdaten-chevron { transform: rotate(180deg); }
.ueb-kopfdaten-body { padding: 14px 2px 0; }

.ueb-plan-buttonzeile { margin-bottom: 10px; }

/* ===========================================================================
   Trainingseinheit als Terminkarten statt langer Dropdown-Zeile
   ---------------------------------------------------------------------------
   Ein <select> quetschte Datum, Zeit, Mannschaft und Halle jeder Hallenzeit in
   eine Textzeile - bei mehreren Mannschaften schnell 20+ kaum unterscheidbare
   Eintraege. Karten zeigen Datum/Zeit gross, Mannschaft/Halle als Unterzeile.
   Die Mannschaft filtert man ueber ein normales Dropdown (.ueb-field select
   deckt Optik/Groesse schon ab) - Chips sahen bei wenigen Mannschaften gut
   aus, wurden bei vollem Jugendaufbau (17 Mannschaften) aber selbst zur Wand
   aus Knoepfen (Korrektur Maik 2026-09-03).
   =========================================================================== */
/* Filterzeile (Datum / Mannschaft / Halle) - nutzt das vorhandene
   .ueb-fields-Raster, bricht dadurch unter 760px von selbst einspaltig um. */
.ueb-einheit-filterzeile { margin-top: 2px; }
.ueb-einheit-filterstand {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; margin-top: 8px;
    font-size: 0.76rem; color: rgba(var(--ink) / 0.7);
}
.ueb-einheit-filter-reset { padding: 4px 10px; font-size: 0.74rem; }
/* .ueb-btn-ghost setzt display:inline-flex und schlaegt damit das
   [hidden]-Attribut des Browsers (gleiche Spezifitaet, spaeter im Cascade).
   Ohne diese Regel steht "Filter zuruecksetzen" immer da. Dieselbe Falle wie
   bei .ueb-detail-scrim (s. Kommentar in Uebungsdatenbank.php). */
.ueb-einheit-filter-reset[hidden] { display: none; }
.ueb-einheit-leer { margin: 8px 0 0; }
.ueb-einheit-liste {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 260px; overflow-y: auto;
    margin-top: 8px; padding-right: 2px;
}
.ueb-einheit-karte {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px;
    /* flex-shrink MUSS 0 sein: die Liste ist ein flex-Container mit max-height,
       und Flex-Kinder schrumpfen dort per Voreinstellung. Ohne das quetschte
       sich jede Karte auf eine Zeile zusammen und die Unterzeile mit
       Mannschaft/Halle wurde weggeschnitten (Meldung Maik 2026-09-03). */
    flex: 0 0 auto;
    width: 100%; text-align: left; font: inherit; line-height: 1.4; margin: 0; cursor: pointer;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--bg-flaeche); color: rgb(var(--ink));
    border: 1px solid rgba(var(--ink) / 0.35); border-radius: 10px;
    padding: 8px 34px 8px 12px; position: relative; transition: border-color .15s;
}
.ueb-einheit-karte:hover, .ueb-einheit-karte:focus-visible { border-color: var(--tigers-yellow); }
.ueb-einheit-karte.on { border-color: var(--tigers-yellow); background: var(--glass-12); }
.ueb-einheit-karte[hidden] { display: none; }
.ueb-einheit-datum { font-weight: 700; font-size: 0.86rem; color: rgb(var(--ink)); }
.ueb-einheit-zeit { font-size: 0.78rem; color: rgba(var(--ink) / 0.65); }
.ueb-einheit-sub { flex-basis: 100%; font-size: 0.78rem; color: rgba(var(--ink) / 0.7); }
/* Spezifitaet ueber ".ueb-einheit-karte" statt nur der eigenen Klasse noetig -
   fontawesome.min.css setzt ".fa-solid{display:...}" mit derselben (einfachen)
   Spezifitaet und laedt NACH dieser Datei, wuerde also sonst gewinnen. */
.ueb-einheit-karte .ueb-einheit-check {
    display: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    color: var(--tigers-yellow-ink);
}
.ueb-einheit-karte.on .ueb-einheit-check { display: inline-block; }


/* ===================================================================
   AENDERUNGSVORSCHLAEGE (2026-09-03)
   Ein Trainer bearbeitet eine fremde Uebung nicht direkt, sondern schlaegt
   eine Fassung vor. Beide Stellen, an denen das sichtbar wird: der Balken
   ueber dem Erfassungsformular und die Gegenueberstellung im Freigabe-Reiter.
   Farben bewusst ueber --ink und --tigers-yellow, damit Hell- und Dunkelmodus
   ohne eigene Regeln funktionieren.
   =================================================================== */

.ueb-vorschlag-hinweis {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
    background: var(--glass-08); border: 1px solid var(--tigers-yellow-40);
    font-size: 0.84rem; line-height: 1.5; color: rgb(var(--ink));
}
.ueb-vorschlag-hinweis i { color: var(--tigers-yellow-ink); margin-top: 2px; }
.ueb-vorschlag-hinweis[hidden] { display: none; }

.ueb-vorschlag-marke {
    display: inline-flex; gap: 6px; align-items: center;
    margin-bottom: 6px; padding: 3px 9px; border-radius: 999px;
    background: var(--glass-12); border: 1px solid var(--tigers-yellow-40);
    font-size: 0.74rem; font-weight: 700; color: var(--tigers-yellow-ink);
}

.ueb-vorschlag-diff { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ueb-diff-feld {
    padding: 10px 12px; border-radius: 10px;
    background: var(--glass-08); border: 1px solid var(--border-light);
}
.ueb-diff-feld .ueb-freigabe-feld-titel { display: block; margin-bottom: 6px; }
/* Der farbige Balken links traegt die Aussage, nicht die Textfarbe: rote und
   gruene Schrift waere im Dunkelmodus schlecht lesbar und fuer Rot-Gruen-Blinde
   gar nicht unterscheidbar. Das Woertchen "bisher"/"neu" steht ohnehin daneben. */
.ueb-diff-alt, .ueb-diff-neu {
    position: relative; padding: 4px 0 4px 12px; font-size: 0.84rem; line-height: 1.5;
    border-left: 3px solid rgba(var(--ink) / 0.25);
}
.ueb-diff-alt { color: rgba(var(--ink) / 0.62); }
.ueb-diff-neu { border-left-color: var(--tigers-yellow); color: rgb(var(--ink)); }
.ueb-diff-marke {
    display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(var(--ink) / 0.55); margin-bottom: 2px;
}
.ueb-diff-neu .ueb-diff-marke { color: var(--tigers-yellow-ink); }

/* ===========================================================================
   Spielerzahl im Trainingsplaner (2026-09-04)
   Aus Min./Max. Spieler einer Uebung und den Anwesenden aus den Kopfdaten
   rechnet der Planer die Gruppenaufteilung. Der Hinweis steht an der Planzeile,
   die Warnung ebenfalls - beide werden bei jeder Aenderung neu gerechnet.
   =========================================================================== */

/* Vier Eingabefelder plus Knopf: wie .ueb-fields-4, nur eine Spalte mehr.
   Die letzte Spalte bleibt "auto", dort steht der Knopf. */
.ueb-fields-5 { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; }
/* Der Hinweis unter "Anwesende Spieler" darf die Feldhoehe nicht veraendern:
   die Reihe richtet sich per align-items:end an der Unterkante aus, ein
   zusaetzlicher Textknoten hob das Eingabefeld sonst um 21 px gegenueber
   Kategorie, Altersgruppe und Dauer an. Loesung: JEDES Feld der Reihe haelt
   unten denselben Streifen frei, der Hinweis steht absolut darin. Damit
   stehen die Eingabefelder auf einer Linie, und beim Umbruch auf eine Spalte
   ueberlappt der Hinweis nicht das naechste Feld. */
.ueb-fields-5 .ueb-field { position: relative; padding-bottom: 20px; }
.ueb-fields-5 .ueb-field > .ueb-feldhinweis {
    position: absolute; bottom: 0; left: 0; right: 0;
}
.ueb-fields-5 > .ueb-btn-y { margin-bottom: 20px; }
@media (max-width: 560px) { .ueb-fields-5 > .ueb-btn-y { margin-bottom: 0; } }
@media (max-width: 1100px) { .ueb-fields-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ueb-fields-5 { grid-template-columns: 1fr; } }

/* Chip an der Planzeile. Farbe explizit auf dem Element und dem Symbol,
   weil "* { color }" im Portal die Vererbung schlaegt. */
.ueb-plan-gruppen, .ueb-plan-gruppen i {
    font-size: 0.74rem; font-weight: 600; color: rgba(var(--ink) / 0.82);
}
.ueb-plan-gruppen {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
    padding: 3px 9px; border-radius: 99px;
    background: var(--glass-12); border: 1px solid var(--glass-22);
}
.ueb-plan-gruppen i { color: var(--tigers-yellow-ink); font-size: 0.7rem; }

/* Passt nicht zur Anwesenheit: sichtbar, aber kein Riegel - eingefuegt und
   gedruckt wird trotzdem. Im Ausdruck taucht diese Warnung bewusst nicht auf. */
.ueb-plan-gruppen.warn, .ueb-plan-gruppen.warn i { color: var(--warn-text); }
.ueb-plan-gruppen.warn {
    background: var(--warn-bg); border-color: var(--warn-border);
}

/* ===========================================================================
   FREIE UEBUNG IM PLAN (2026-09-16)
   Eine Zeile, die der Trainer selbst tippt. Sie sieht aus wie eine
   Uebungszeile - mit zwei Unterschieden: der Titel ist ein Eingabefeld, und
   ein Marker erklaert, warum darunter nichts weiter steht.

   Der Marker ist bewusst ruhig gehalten. Er ist eine Erklaerung, keine
   Warnung: an der Zeile ist nichts falsch.
   =========================================================================== */
.ueb-plan-frei-nr { flex: 0 0 auto; color: rgb(var(--ink)); }
.ueb-plan-frei-titel {
    flex: 1 1 220px; min-width: 0;
    font-size: 0.9rem; font-weight: 700; color: rgb(var(--ink));
    background: var(--glass-06); border: 1px solid var(--glass-22);
    border-radius: 8px; padding: 6px 10px;
}
.ueb-plan-frei-titel:focus {
    outline: none; border-color: var(--tigers-yellow);
    background: var(--glass-12);
}
.ueb-plan-frei-titel::placeholder { font-weight: 400; color: rgba(var(--ink) / 0.45); }

.ueb-frei-marke {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap; font-size: 0.68rem; font-weight: 600;
    padding: 2px 8px; border-radius: 99px;
    border: 1px solid var(--glass-22); background: var(--glass-06);
    color: rgba(var(--ink) / 0.7);
}
.ueb-frei-marke i { font-size: 0.64rem; }

/* Titelzeile, Feld und Marker nebeneinander - bei schmalem Fenster umbrechend,
   damit das Eingabefeld nicht auf Briefmarkenbreite schrumpft. */
.ueb-plan-item-frei .ueb-plan-item-info {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
.ueb-plan-item-frei .ueb-plan-item-info > .ueb-plan-parallel-box,
.ueb-plan-item-frei .ueb-plan-item-info > .ueb-plan-notiz,
.ueb-plan-item-frei .ueb-plan-item-info > .ueb-plan-rueck-box { flex: 1 1 100%; }

@media (max-width: 560px) {
    .ueb-plan-frei-titel { flex: 1 1 100%; }
}

/* Der Knopf je Abschnitt, neben "Uebung hinzufuegen" und "Pause". */
.ueb-abschnitt-add-frei { flex: 0 0 auto; }

/* Nachpflege-Liste im Freigabe-Reiter (zusammengefasst 2026-09-16).
   Eine Karte, eine Zeile je Uebung, die Luecken als Marker daneben.
   Zugeklappt, weil die Liste dreistellig wird - die Zahlen in der Kopfzeile
   sagen, ob sich das Aufklappen lohnt. */
.ueb-sec-oben { margin-top: 0; }
.ueb-nachpflege-card { padding: 0; }
.ueb-nachpflege-kopf {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
    padding: 18px 20px;
}
.ueb-nachpflege-kopf::-webkit-details-marker { display: none; }
.ueb-nachpflege-kopf .ueb-sec { margin: 0; }
.ueb-nachpflege-zahlen { display: flex; flex-wrap: wrap; gap: 6px; }
.ueb-nachpflege-pfeil {
    margin-left: auto; font-size: 0.8rem; color: rgba(var(--ink) / 0.55);
    transition: transform 0.15s ease;
}
.ueb-nachpflege-card[open] .ueb-nachpflege-pfeil { transform: rotate(180deg); }
.ueb-nachpflege-card > .ueb-lead { padding: 0 20px; }
.ueb-nachpflege-card > #uebNachpflegeListe { padding: 0 20px 18px; }

.ueb-nachpflege-zeile {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 7px 8px; margin: 0 -8px; border-radius: 8px;
    border-top: 1px solid var(--glass-12);
}
.ueb-nachpflege-zeile:hover, .ueb-nachpflege-zeile:focus-visible {
    background: var(--glass-06); outline: none;
}
.ueb-nachpflege-zeile:focus-visible { box-shadow: 0 0 0 2px var(--tigers-yellow); }
.ueb-nachpflege-name {
    flex: 1 1 auto; min-width: 0; font-size: 0.86rem; color: rgb(var(--ink));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ueb-nachpflege-zeile .ueb-ex-meta { flex: 0 0 auto; }
.ueb-nachpflege-luecken { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.ueb-nachpflege-btn { flex: 0 0 auto; }

/* Marker fuer die einzelne Luecke. Zwei Farben, damit sich Intensitaet und
   Spielerangaben auf einen Blick trennen lassen - beides ueber die Variablen,
   sonst faellt es im hellen Design auseinander. */
.ueb-luecke {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 99px;
    border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-text);
}
.ueb-luecke i { font-size: 0.68rem; }
.ueb-luecke-spieler {
    border-color: var(--glass-22); background: var(--glass-06); color: rgba(var(--ink) / 0.75);
}

@media (max-width: 720px) {
    .ueb-nachpflege-zeile { flex-wrap: wrap; gap: 6px 10px; }
    .ueb-nachpflege-name { flex: 1 1 100%; white-space: normal; }
    .ueb-nachpflege-btn { margin-left: auto; }
}

/* ===========================================================================
   BEWEGTBILD AN DER UEBUNG (2026-09-04)
   Video und Animation liegen in derselben Galerie wie die Bilder. Farben
   ausschliesslich ueber die Variablen, sonst faellt es im hellen Design
   auseinander - und Groessen so, dass eine Kachel neben den vorhandenen
   .ueb-medien-item (132x108) nicht aus der Reihe tanzt.
   =========================================================================== */

/* Knopfleiste unter der Galerie im Erfassungsformular. Umbricht auf dem Handy,
   statt die Knoepfe zu quetschen. */
.ueb-medien-knopfleiste {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}

/* Video-/Animationskachel im Erfassungsformular. */
.ueb-medien-bewegt video,
.ueb-medien-bewegt img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    background: rgba(0, 0, 0, 0.35);
}
/* Kleine Marke oben links, damit Video und Animation ohne Klick
   auseinanderzuhalten sind. */
.ueb-medien-marke {
    position: absolute; top: 4px; left: 4px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 99px;
    background: rgba(0, 0, 0, 0.62); color: #fff;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em;
}
.ueb-medien-marke i { font-size: 0.62rem; }

/* Ein reiner Link hat nichts zu zeigen: Symbol und Anbietername, mehr nicht. */
.ueb-medien-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; color: rgba(var(--ink) / 0.72); font-size: 0.68rem; text-align: center;
    padding: 0 6px;
}
.ueb-medien-link i { font-size: 1.25rem; }
.ueb-medien-link span { overflow-wrap: anywhere; }

/* ---- Kachel in der Detailansicht ----
   Als <button> gebaut (Tastatur, CSP), muss also die Knopf-Voreinstellungen
   des Browsers loswerden. */
.ueb-bewegt-kachel {
    position: relative; display: block; width: 100%; padding: 0;
    border: 1px solid var(--karte-border); border-radius: 10px;
    background: var(--glass-06); cursor: pointer; overflow: hidden;
    aspect-ratio: 16 / 9;
    font: inherit; color: rgb(var(--ink));
}
.ueb-bewegt-kachel:hover { border-color: var(--tigers-yellow); }
/* Sichtbarer Fokus: die Kachel ist mit der Tastatur erreichbar, das muss man
   auch sehen. outline statt border, sonst springt die Groesse. */
.ueb-bewegt-kachel:focus-visible { outline: 2px solid var(--tigers-yellow); outline-offset: 2px; }
.ueb-bewegt-vorschau {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
    background: rgba(0, 0, 0, 0.35);
}
/* Play-Knopf in der Mitte. Liegt ueber der Vorschau, bei Link und Embed steht
   er auf der leeren Flaeche - beides sieht gleich aus. */
.ueb-bewegt-symbol {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.58); border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff; font-size: 1.2rem;
}
.ueb-bewegt-kachel:hover .ueb-bewegt-symbol {
    background: var(--tigers-yellow); color: var(--tigers-black); border-color: var(--tigers-yellow);
}
.ueb-bewegt-text {
    position: absolute; left: 8px; bottom: 8px;
    padding: 2px 9px; border-radius: 99px;
    background: rgba(0, 0, 0, 0.62); color: #fff;
    font-size: 0.7rem; font-weight: 700;
}

/* ---- Abspieler ----
   Sichtbarkeit ueber :not([hidden]) wie bei .ueb-detail-scrim: eine Klasse mit
   display:flex haette dieselbe Spezifitaet wie das hidden-Attribut und wuerde
   es schlagen (dieselbe Falle steht in Uebungsdatenbank.php dokumentiert). */
.ueb-player-scrim:not([hidden]) {
    display: flex; align-items: center; justify-content: center;
    /* Ueber .ueb-detail-scrim (1100): der Abspieler wird AUS der Detailansicht
       heraus geoeffnet und muss darueber liegen. */
    position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, 0.85);
    padding: 24px 16px;
}
.ueb-player-box {
    position: relative; width: min(1000px, 100%);
    display: flex; flex-direction: column; gap: 10px;
}
.ueb-player-buehne {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: #000; border-radius: 12px; overflow: hidden;
}
.ueb-player-buehne video,
.ueb-player-buehne img,
.ueb-player-buehne iframe {
    width: 100%; height: 100%; display: block; border: 0;
}
/* Animationen sind oft hochkant oder quadratisch - nicht beschneiden. */
.ueb-player-buehne video,
.ueb-player-buehne img { object-fit: contain; }
.ueb-player-fuss {
    margin: 0; text-align: center; color: rgba(255, 255, 255, 0.75); font-size: 0.78rem;
}
/* Der Schliessen-Knopf sitzt ueber der Buehne, nicht darin: bei einem Video im
   Vollbild waere er sonst weg. */
.ueb-player-box .ueb-detail-close { top: -42px; right: 0; }

@media (max-width: 640px) {
    .ueb-bewegt-symbol { width: 46px; height: 46px; font-size: 1rem; }
    .ueb-player-box .ueb-detail-close { top: -40px; }
}

/* Reihe der Bewegtbild-Kacheln in der Detailansicht. auto-fit statt fester
   Spaltenzahl: bei einem einzelnen Video wird die Kachel gross, bei dreien
   stehen sie nebeneinander, und auf dem Handy rutschen sie von allein
   untereinander. */
.ueb-bewegt-leiste {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* ===========================================================================
   REIFEGRAD EIGENER UEBUNGEN (2026-09-05)
   Seit die Liste auch die eigenen Entwuerfe zeigt, muss auf einen Blick klar
   sein, warum sie sonst niemand sieht. Bewusst ein farbiger Balken und keine
   kleine Plakette: die Kachel soll sich sichtbar von den freigegebenen
   unterscheiden, sonst uebersieht man den Unterschied genau wieder.
   =========================================================================== */
.ueb-reifegrad {
    display: flex; align-items: baseline; gap: 6px;
    margin: 6px 0 2px; padding: 6px 9px; border-radius: 8px;
    font-size: 0.76rem; line-height: 1.35;
    border: 1px solid var(--karte-border); background: var(--glass-06);
    color: rgba(var(--ink) / 0.85);
}
.ueb-reifegrad i { flex: 0 0 auto; }
/* Entwurf: gelb wie alles, was auf eine Handlung wartet. */
.ueb-reifegrad-draft {
    border-color: var(--tigers-yellow);
    background: color-mix(in srgb, var(--tigers-yellow) 14%, transparent);
}
/* Eingereicht: ruhiger - hier ist der Trainer nicht mehr am Zug. */
.ueb-reifegrad-review { border-style: dashed; }
/* Ersatz fuer den Trainingsplan-Knopf, damit die Kachel nicht einfach
   kuerzer wird und die Zeile fehlt. */
.ueb-reifegrad-hinweis {
    margin-top: 6px; font-size: 0.74rem; font-style: italic;
    /* 0.72 statt 0.6: im Hellmodus kam der Hinweis auf 4,15:1 und lag damit
       unter den geforderten 4,5:1 (nachgemessen 2026-09-17). */
    color: rgba(var(--ink) / 0.72);
}
/* Dieselbe Aussage im Fuss der Detailansicht, wo der Knopf fehlt. */
.ueb-detail-reifegrad {
    margin: 0; flex: 1 1 auto;
    font-size: 0.8rem; color: rgba(var(--ink) / 0.72);
}

/* Loeschen: bewusst zurueckhaltend statt knallrot - der Knopf steht neben
   Speichern und Einreichen, und ein Fehlgriff kostet hier eine Uebung. Erst
   beim Ueberfahren wird er deutlich. */
.ueb-btn-loeschen {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 0.86rem;
    background: transparent; border: 1px solid var(--karte-border);
    color: rgba(var(--ink) / 0.66);
}
.ueb-btn-loeschen:hover {
    border-color: #c0392b; color: #c0392b;
    background: color-mix(in srgb, #c0392b 10%, transparent);
}
.ueb-btn-loeschen:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }

/* Zeitausschnitt (2026-09-05): kleine Plakette an der Kachel im
   Erfassungsformular, damit man den Ausschnitt sieht, ohne abzuspielen. */
.ueb-medien-zeit {
    position: absolute; top: 4px; right: 4px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 99px;
    background: rgba(0, 0, 0, 0.62); color: #fff;
    font-size: 0.62rem; font-weight: 700;
}
.ueb-medien-zeit i { font-size: 0.58rem; }
/* Bei der Link-Kachel sitzt sie im Fluss statt ueber dem Bild. */
.ueb-medien-link .ueb-medien-zeit { position: static; margin-top: 2px; }

/* Knöpfe mit hidden-Attribut wirklich verstecken (09.09.2026).
   .ueb-btn-y und .ueb-btn-ghost setzen `display: inline-flex`, und jede
   ausdrückliche display-Regel schlägt das `display: none`, mit dem der Browser
   das hidden-Attribut umsetzt. Folge: der Freigabe-Knopf in der Detailansicht
   stand als leerer 32-Pixel-Knopf zwischen "Übung löschen" und "Zum
   Trainingsplan", ohne Beschriftung und ohne Funktion — er ist nur für zwei
   Zustände gedacht (eigener Entwurf einreichen, als Admin freigeben) und sonst
   versteckt.
   Dieselbe Fehlerklasse ist im Portal schon viermal einzeln geflickt worden
   (.ha-schleier[hidden], .ha-blaettern[hidden], .wk-foto img[hidden],
   .mo-ta[hidden]). Hier deshalb für alle drei Knopfarten der Übungsdatenbank
   auf einmal. */
.ueb-btn-y[hidden],
.ueb-btn-ghost[hidden],
.ueb-btn-loeschen[hidden] { display: none; }

/* ===========================================================================
   Zweispaltiger Editor „Übung bearbeiten“ (11.09.2026)
   ---------------------------------------------------------------------------
   Vorher standen alle 17 Felder in einer Karte untereinander: rund 1500 Pixel
   am Stück, ohne Zwischenüberschrift, und die Textfelder liefen über die volle
   Fensterbreite — auf einem breiten Bildschirm gut 150 Zeichen je Zeile. Jetzt
   steht links, was man
   schreibt, und rechts in einer mitlaufenden Spalte, was man ankreuzt.
   =========================================================================== */

.ueb-edit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
    /* Deckel fuer den ganzen Editor: ohne ihn zieht die linke Spalte auf einem
       27-Zoll-Bildschirm ueber 1200px auf, und ein Satz laeuft ueber gut 150
       Zeichen. */
    max-width: 1060px;
}
/* Pflichtzeile, kein Beiwerk: `display: grid` schlägt das `display: none`, mit
   dem der Browser das hidden-Attribut umsetzt. Ohne diese Regel stünde das
   Formular dauerhaft offen — dieselbe Fehlerklasse wie bei .ueb-btn-y[hidden]
   weiter unten. */
.ueb-edit[hidden] { display: none; }

.ueb-edit-haupt { min-width: 0; }
.ueb-edit-haupt .ueb-card:last-child { margin-bottom: 0; }

.ueb-edit-seite {
    min-width: 0;
    position: sticky;
    top: calc(var(--navbar-height) + 12px);
    /* Platz fuer die klebende Knopfleiste darunter (2026-09-14). Die Spalte ist
       laenger als der Bildschirm und schiebt sich beim Herunterrollen bis an den
       unteren Rand des Editors - also unter die Leiste. Der letzte Hinweis
       ("Die Uebung selbst darf jeder nutzen ...") stand dauerhaft dahinter und
       war durch kein Rollen hervorzuholen. Die Leiste ist eine Zeile hoch
       (62px) plus 14px Gitterabstand. */
    padding-bottom: 80px;
}
.ueb-steckbrief { margin-bottom: 0; }

/* Die fünf Medienknöpfe stehen in der schmalen Spalte untereinander statt im
   Flattersatz — links bündig gelesen wie eine Liste, und jeder bleibt breit
   genug zum Antippen. */
.ueb-steckbrief .ueb-medien-knopfleiste { flex-direction: column; align-items: stretch; }
.ueb-steckbrief .ueb-medien-knopfleiste .ueb-btn-ghost {
    justify-content: flex-start;
    min-height: var(--feld-hoehe);
}

/* Dauer, ab, bis: drei schmale Zahlenfelder in einer Zeile. */
.ueb-steckbrief-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ueb-steckbrief-drei .ueb-field { margin-bottom: 0; }
.ueb-steckbrief-dreihinweis { display: block; margin: 5px 0 12px; }

/* Der Formathinweis der Medienknöpfe nutzt die vorhandene Ausklappzeile
   (.ueb-klapp). Dort steht ein .ueb-feldhinweis statt eines .ueb-lead — der
   braucht dieselbe Innenkante wie der Fließtext. */
.ueb-klapp > .ueb-feldhinweis { display: block; padding: 0 12px 12px; }

/* Knopfleiste klebt am unteren Rand. Vorher stand „Speichern“ nach 1500 Pixeln
   Formular ganz unten und war beim Tippen im ersten Feld nicht zu sehen.
   Flächen und Rahmen wie bei .ueb-plan-stickybar im Trainingsplaner. */
.ueb-edit-aktionen {
    grid-column: 1 / -1;
    position: sticky;
    bottom: 12px;
    z-index: 3;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0;
    padding: 10px 14px;
    background: var(--bg-flaeche);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 6px 20px var(--glass-shadow);
}

/* Feld ohne Abstand nach unten — das letzte in einer Karte. Ersetzt die
   früheren style="margin-bottom:0"-Einschübe im HTML. */
.ueb-field-letzt { margin-bottom: 0; }

/* .ueb-field setzt display:flex und schlaegt damit das display:none, mit dem
   der Browser das hidden-Attribut umsetzt. Folge (gefunden 11.09.2026, war
   schon vorher so): die Eigenerklaerung "Aus fremder Vorlage" stand bei JEDER
   Uebung im Formular, auch bei selbst getippten -- mit leerem Kaestchen und
   ohne Bezug. Sie soll nur nach einem Seitenimport erscheinen. */
.ueb-field[hidden] { display: none; }

/* Zweiter Fund am selben Feld (11.09.2026): `.ueb-field input { width: 100% }`
   trifft auch das Kontrollkaestchen der Eigenerklaerung. Mit `flex: none`
   daneben hiess das 100% der Zeile fuer das Kaestchen -- der Text daneben wurde
   aus der Karte hinausgedrueckt und lief einwortweise am Seitenrand herunter.
   Auf Maiks Bildschirmfoto vom Altstand ist genau das zu sehen. */
.ueb-field input[type="checkbox"] { width: auto; }
.ueb-var-add { margin-top: 4px; align-self: flex-start; }
.ueb-duplikat-lead { margin: 4px 0 8px; }
.ueb-duplikat-fuss { margin-top: 6px; }

/* Unter 1000px fällt der Steckbrief unter den Textteil. Die Reihenfolge im
   HTML ist so gewählt, dass das einspaltig gelesen ebenfalls stimmt:
   schreiben, Varianten, Zuschnitt, dann Steckbrief. */
@media (max-width: 1000px) {
    .ueb-edit { grid-template-columns: 1fr; }
    .ueb-edit-seite { position: static; padding-bottom: 0; }
    .ueb-edit-haupt .ueb-card:last-child { margin-bottom: 14px; }
    .ueb-steckbrief .ueb-medien-knopfleiste { flex-direction: row; align-items: flex-start; }
    .ueb-steckbrief .ueb-medien-knopfleiste .ueb-btn-ghost { justify-content: center; }
}
/* Auf dem Handy nimmt die klebende Leiste zu viel Bildschirm weg, sobald sie
   zweizeilig umbricht — dort steht sie wieder ganz am Ende. */
@media (max-width: 560px) {
    .ueb-edit-aktionen { position: static; }
}

/* ===================================================================
   INTENSITÄT (2026-09-11)
   Fünf Segmente, die Spanne der Übung ist gefüllt. Bewusst KEINE
   Grün-Rot-Skala: Farbe als alleiniger Bedeutungsträger fällt für
   farbfehlsichtige Nutzer aus, und fünf feste Farbwerte müssten im
   Farb-Editor für Hell und Dunkel getrennt gepflegt werden. Der
   Kurztext steht deshalb immer neben dem Balken.
   =================================================================== */
.ueb-int-chip { gap: 7px; }
.ueb-int-balken { display: inline-flex; align-items: center; gap: 2px; }
.ueb-int-seg {
    width: 5px; height: 11px; border-radius: 2px;
    background: rgba(var(--ink) / 0.18);
}
.ueb-int-seg.on { background: var(--tigers-yellow); }
/* Nicht eingestuft: sichtbar, aber zurückgenommen — die Lücke soll
   auffallen, ohne die Kachel zu beherrschen. */
.ueb-int-leer, .ueb-int-leer i { color: rgba(var(--ink) / 0.55); font-style: italic; }

/* Rechte Seite der Planzeile, seit 11.09.2026 in zwei Spalten:
   erst die Werte (Dauer über Intensität), dann die Knöpfe (Notiz über
   Entfernen). Vorher standen Notiz-Knopf, Dauer, Intensität und ein
   absolut gesetztes Schriftzeichen "x" nebeneinander in einer Reihe —
   vier verschiedene Bauarten in einer Zeile.
   Der Hinweis "über der hinterlegten Spanne" steht unter dem Feld, damit
   die Zeile nicht breiter wird. */
.ueb-plan-item-werte { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.ueb-plan-item-int { display: flex; flex-direction: column; gap: 2px; }
.ueb-plan-wert-lbl {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: 0.78rem; color: rgba(var(--ink) / 0.7);
}
/* Feste Breite für Symbol + Wort: dadurch beginnen Eingabefeld und
   Auswahlfeld auf derselben senkrechten Linie. */
.ueb-plan-wert-name { flex: 0 0 auto; min-width: 92px; display: inline-flex; align-items: center; gap: 6px; }
.ueb-plan-wert-lbl i { color: var(--tigers-yellow-ink); font-size: 0.72rem; width: 0.9rem; text-align: center; }
.ueb-plan-wert-lbl input {
    width: 62px; height: var(--feld-hoehe, 36px);
    background: var(--bg-flaeche); color: var(--text-input);
    border: 1px solid rgba(var(--ink) / 0.35); border-radius: 8px;
    padding: 4px 8px; text-align: center;
}
/* 0.68 statt 0.55: "Min." neben dem Dauerfeld kam im Hellmodus auf 3,81:1
   (nachgemessen 2026-09-17). */
.ueb-plan-wert-einheit { color: rgba(var(--ink) / 0.68); }
.ueb-plan-int-lbl select {
    width: auto; min-width: 104px; height: var(--feld-hoehe, 36px);
    background: var(--bg-flaeche); color: var(--text-input);
    border: 1px solid rgba(var(--ink) / 0.35); border-radius: 8px; padding: 4px 8px;
}
.ueb-plan-int-hinweis { font-size: 0.72rem; color: var(--warn-text); text-align: right; }

/* Knopf-Spalte: Notiz und Entfernen im selben Bau, beide mit
   Font-Awesome-Symbol. Der Entfernen-Knopf sitzt dadurch im Fluss und
   nicht mehr absolut am rechten Rand — deshalb darf die Zeile rechts
   auch wieder eng werden. */
.ueb-plan-item { padding-right: 8px; }
.ueb-plan-item-aktionen { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.ueb-plan-ibtn {
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(var(--ink) / 0.3); background: var(--glass-08);
    color: rgba(var(--ink) / 0.75);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem; line-height: 1; padding: 0; margin: 0;
    transition: background-color .15s, border-color .15s, color .15s;
}
.ueb-plan-ibtn i { display: block; line-height: 1; }
.ueb-plan-ibtn:hover { background: var(--glass-16); border-color: rgba(var(--ink) / 0.5); color: rgb(var(--ink)); }
.ueb-plan-ibtn.hat { background: var(--tigers-yellow-22, rgba(253,238,23,0.22)); border-color: var(--tigers-yellow); color: var(--tigers-yellow-ink); }
.ueb-plan-ibtn-weg:hover { border-color: var(--warn-text); color: var(--warn-text); }

/* Zwei Auswahlfelder nebeneinander im Steckbrief — gleiche Bauart wie
   die Dreier-Zeile aus Dauer und Spielerzahl darüber. */
.ueb-steckbrief-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ueb-steckbrief-zwei .ueb-field { margin-bottom: 0; }

/* Auf schmalen Geräten rutscht der Tageswert unter den Titel, statt die
   Planzeile zu sprengen. */
@media (max-width: 700px) {
    .ueb-plan-item-werte { flex: 1 0 100%; align-items: flex-start; }
    .ueb-plan-int-hinweis { text-align: left; }
}

/* ===========================================================================
   Rückblick in der Planzeile (Stufe 2, 2026-09-11)
   ---------------------------------------------------------------------------
   Zwei Dinge in einem Kasten: oben, was beim letzten Mal war (Lesekasten,
   kommt beim Kopieren eines Plans mit), darunter das Protokoll dieser
   Einheit. Beides ruhig gehalten — die Planzeile gehört der Planung, der
   Rückblick ist Beiwerk und darf sie nicht überstrahlen.

   Farben: keine festen Werte, sondern rgba(var(--ink) / …). --bg-summary und
   --tigers-yellow-ink drehen sich im Dunkelmodus nicht mit und wären hier
   heller Text auf hellem Grund (nachgemessen beim Bau der Trainingsansicht).
   =========================================================================== */
.ueb-plan-rueck {
    margin-top: 8px; padding: 8px 10px;
    border-radius: 8px;
    background: rgba(var(--ink) / 0.05);
    border: 1px solid rgba(var(--ink) / 0.14);
}
.ueb-plan-rueck-titel {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: rgba(var(--ink) / 0.6);
    margin-bottom: 4px;
}
.ueb-plan-rueck-titel i { font-size: 0.7rem; }
.ueb-plan-rueck-stand {
    margin-left: auto; text-transform: none; letter-spacing: 0;
    font-size: 0.7rem; color: rgba(var(--ink) / 0.5);
}
/* Der Lesekasten. Gelber Streifen links: er kommt von woanders her. */
.ueb-plan-rueck-vor {
    margin-bottom: 10px; padding-left: 8px;
    border-left: 3px solid var(--tigers-yellow);
}
.ueb-plan-rueck-vor p {
    margin: 0; font-size: 0.84rem; line-height: 1.4;
    color: rgba(var(--ink) / 0.85);
    white-space: pre-wrap;   /* Absätze aus der Halle bleiben Absätze */
}
.ueb-plan-prot {
    width: 100%; padding: 6px 8px; border-radius: 8px; font: inherit;
    font-size: 0.82rem; background: var(--bg-flaeche); color: var(--text-input);
    border: 1px solid rgba(var(--ink) / 0.3); resize: vertical;
}

/* ===========================================================================
   Knopfleisten des Planers auf dem Handy (2026-09-11)
   ---------------------------------------------------------------------------
   Gemeldet von Maik: auf dem Handy lief die Ausgabeleiste aus dem Bild heraus,
   "Plan leeren" war nur noch zur Hälfte da. Grund war .ueb-row-btn — ein
   display:flex OHNE flex-wrap. Vier Knöpfe mit Wort passen bei 360 px Breite
   schlicht nicht nebeneinander.

   Zwei Stufen: das Umbrechen ist das Sicherheitsnetz (nie wieder etwas
   abgeschnitten), unterhalb von 700 px stehen dann nur noch die Symbole.
   Jeder Knopf trägt title und aria-label — ein Symbol ohne Erklärung wäre
   ein Rätsel, und für Screenreader bleibt der Name erhalten.
   =========================================================================== */
.ueb-row-btn { flex-wrap: wrap; }
.ueb-plan-stickybar-aktionen { flex-wrap: wrap; }

@media (max-width: 700px) {
    /* Die Kennzahlen sind Fließtext und kein Flex-Gitter: als Flex-Elemente
       wurden "3", "Übungen" und "Schnitt: Mittel" auseinandergerissen. */
    .ueb-plan-stickybar-sec { display: block; line-height: 1.5; }
    .ueb-plan-stickybar-sec i { margin-right: 6px; }
    .ueb-plan-stickybar-aktionen { flex: 1 1 100%; }

    /* Nur Symbole. flex: 1 1 0 teilt die Breite gleichmäßig auf, damit die
       Leiste nicht von der Wortlänge der Knöpfe abhängt. */
    .ueb-plan-stickybar-aktionen .ueb-btn-wort,
    .ueb-plan-verwaltung-zeile .ueb-btn-wort { display: none; }
    .ueb-plan-stickybar-aktionen > button,
    .ueb-plan-verwaltung-zeile > button {
        flex: 1 1 0;
        min-width: 52px; min-height: 44px;   /* Tippfläche, nicht kleiner */
        padding-left: 0; padding-right: 0;
        gap: 0;
    }
    .ueb-plan-stickybar-aktionen > button i,
    .ueb-plan-verwaltung-zeile > button i { font-size: 1.05rem; margin: 0; }

    /* Das Auswahlfeld bekommt die eigene Zeile, die drei Knöpfe teilen sich
       die nächste. */
    .ueb-plan-verwaltung-zeile select { flex: 1 1 100%; }

    /* Die Planzeile selbst. .ueb-plan-item ist ein display:flex OHNE
       flex-wrap — dadurch quetschten Dauer, Tageswert und die Knopfspalte
       den Titel auf ein Wort je Zeile ("1. / Kreuzen / mit / Rückpass").
       Nebenbei war damit die schon vorhandene Regel
       ".ueb-plan-item-werte { flex: 1 0 100% }" wirkungslos: ohne Umbruch
       kann kein Element eine eigene Zeile bekommen.
       Jetzt: Anfasser und Titel oben, Werte und Knöpfe darunter. */
    .ueb-plan-item { flex-wrap: wrap; align-items: flex-start; }
    .ueb-plan-item-info { flex: 1 1 240px; }
    .ueb-plan-item-werte { flex: 1 1 auto; }
    .ueb-plan-item-aktionen { flex-direction: row; }
}


/* =====================================================================
 * Stammdaten-Verwaltung: Gruppenkarten zum Einklappen (14.09.2026)
 * AdminUebungStammdaten.php. Ersetzt .ueb-stamm-liste / .ueb-stamm-neu
 * aus 10-abrechnung.css, die dort jetzt ungenutzt stehen.
 * ===================================================================== */

.ueb-st-gruppe {
    border: 1px solid var(--karte-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
}

.ueb-st-gruppenkopf {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--karte-border);
    background: var(--glass-06);
    color: rgb(var(--ink));
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ueb-st-gruppenkopf:hover { background: var(--glass-12); }
.ueb-st-gruppenkopf > i:first-child {
    width: 22px;
    text-align: center;
    font-size: 1rem;
    color: var(--tigers-yellow-ink);
}
.ueb-st-gruppenkopf .name { font-weight: 900; }
.ueb-st-gruppenkopf .anz {
    margin-left: auto;
    font-size: 0.78rem;
    color: rgba(var(--ink) / 0.6);
}
.ueb-st-gruppenkopf .pfeil {
    color: rgba(var(--ink) / 0.6);
    transition: transform 180ms ease;
}
/* Zugeklappt: der Pfeil zeigt zur Seite, der Inhalt ist weg. Kein
   Hoehen-Uebergang - eine Gruppe mit 15 Kacheln laesst sich nicht sauber
   animieren, ohne ihre Hoehe vorher zu messen. */
.ueb-st-gruppe.zu .pfeil { transform: rotate(-90deg); }
.ueb-st-gruppe.zu .ueb-st-inhalt { display: none; }

.ueb-st-inhalt {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 8px;
}

/* Die Kachel ist ein <button>, damit sie mit Tab erreichbar ist und die
   Eingabetaste sie oeffnet. Deshalb hier die Browser-Vorgaben zuruecksetzen. */
.ueb-st-kachel {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-flaeche);
    color: rgb(var(--ink));
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease;
}
.ueb-st-kachel:hover {
    border-color: var(--tigers-yellow);
    background: var(--tigers-yellow-06);
}
.ueb-st-kachel > i {
    width: 22px;
    text-align: center;
    font-size: 1rem;
    color: var(--tigers-yellow-ink);
    flex: 0 0 auto;
}
.ueb-st-text { min-width: 0; }
.ueb-st-kachel .name {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}
.ueb-st-kachel .nutzung {
    display: block;
    font-size: 0.74rem;
    color: rgba(var(--ink) / 0.6);
}
/* Null Verwendungen ist keine Fehlermeldung, sondern ein Hinweis: nur
   solche Eintraege lassen sich ueberhaupt loeschen. */
.ueb-st-kachel .nutzung.null { color: var(--warn-text); }

.ueb-st-kachel.aus { opacity: 0.6; border-style: dashed; }
.ueb-st-kachel.aus > i { color: rgba(var(--ink) / 0.55); }

.ueb-st-neu { border-style: dashed; color: rgba(var(--ink) / 0.7); }
.ueb-st-neu > i { color: rgba(var(--ink) / 0.7); }

.ueb-st-fuss { margin-top: 14px; }

/* ---- Dialog --------------------------------------------------------- */
.ueb-st-dlg {
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--karte-border);
    border-radius: 12px;
    background: var(--bg-flaeche);
    color: rgb(var(--ink));
}
.ueb-st-dlg::backdrop { background: rgba(0, 0, 0, 0.55); }
.ueb-st-dlg h2 { margin: 0 0 2px; font-size: 1.05rem; font-weight: 900; }
.ueb-st-dlg-nutzung {
    margin: 0 0 16px;
    font-size: 0.82rem;
    color: rgba(var(--ink) / 0.65);
}

.ueb-st-feld { margin-bottom: 14px; }
.ueb-st-feld > label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.8rem;
    font-weight: 700;
}
.ueb-st-feld input {
    width: 100%;
    height: var(--feld-hoehe);
    padding: 0 10px;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    background: var(--feld-bg, var(--background-color));
    color: var(--text-input);
    font: inherit;
}

.ueb-st-icon-zeile { display: flex; align-items: center; gap: 10px; }
.ueb-st-icon-vorschau {
    flex: 0 0 auto;
    width: var(--feld-hoehe);
    height: var(--feld-hoehe);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    background: var(--glass-06);
}
.ueb-st-icon-vorschau i { color: var(--tigers-yellow-ink); }

.ueb-st-hilfe {
    margin: 6px 0 0;
    font-size: 0.76rem;
    color: rgba(var(--ink) / 0.6);
}

.ueb-st-icon-katalog {
    margin-top: 8px;
    /* Hoeher als frueher: mit 114 Symbolen und einer Suche lohnt sich die
       Flaeche. Der Dialog selbst ist auf die Fensterhoehe begrenzt, die
       Auswahl bekommt also nie mehr Platz als da ist. */
    max-height: min(320px, 40vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
}
.ueb-st-katalog-kopf {
    margin: 6px 0 5px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--ink) / 0.55);
}
.ueb-st-katalog-kopf:first-child { margin-top: 0; }
.ueb-st-katalog-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}
.ueb-st-katalog-raster button {
    height: 44px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--glass-06);
    color: rgb(var(--ink));
    font-size: 1rem;
    cursor: pointer;
}
.ueb-st-katalog-raster button:hover { border-color: var(--tigers-yellow); }
.ueb-st-katalog-raster button[aria-pressed="true"] {
    background: var(--tigers-yellow);
    color: var(--tigers-black);
}

.ueb-st-dlg-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}
/* Archivieren und Loeschen stehen rechts, abgesetzt von Speichern: beides
   ist nichts, was man im Vorbeigehen trifft. */
.ueb-st-dlg-fuss .ueb-st-gefahr:not([hidden]) ~ .ueb-st-gefahr { margin-left: 0; }
.ueb-st-dlg-fuss #uebStArchiv { margin-left: auto; }
.ueb-st-gefahr { color: var(--err-text); border-color: var(--err-text); }
.ueb-st-gefahr:hover { background: var(--err-bg, var(--glass-12)); color: var(--err-text); }

@media (max-width: 560px) {
    .ueb-st-inhalt { grid-template-columns: 1fr; }
    .ueb-st-gruppenkopf .anz { display: none; }
    .ueb-st-dlg-fuss #uebStArchiv { margin-left: 0; }
}


/* =====================================================================
 * Durchgriff der Stammdaten-Symbole ins Portal (14.09.2026)
 * Uebungskacheln, Detailansicht und das Material-Chipset im Formular.
 * ===================================================================== */

/* Material auf der Kachel: je Material ein eigenes Symbol statt eines
   gemeinsamen Werkzeugkastens vor einer Komma-Aufzaehlung. */
.ueb-ex-material { flex-wrap: wrap; gap: 4px 10px; }
.ueb-ex-mat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.ueb-ex-mat i {
    color: var(--tigers-yellow-ink);
    font-size: 0.72rem;
    margin-top: 0;
}

/* Material-Auswahl im Bearbeiten-Formular, nach Gruppen gegliedert. */
.ueb-chipset-gruppen { display: block; }
.ueb-chipgruppe { margin-bottom: 10px; }
.ueb-chipgruppe:last-child { margin-bottom: 0; }
.ueb-chipgruppe-kopf {
    display: block;
    margin-bottom: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--ink) / 0.5);
}
.ueb-chipgruppe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ueb-chipgruppe-chips .ueb-chip { display: inline-flex; align-items: center; gap: 6px; }
.ueb-chipgruppe-chips .ueb-chip i { font-size: 0.72rem; }

/* Archivierte Materialien: aus der Auswahl heraus, aber NICHT aus dem
   Dokument. Steckt so eines noch an der geoeffneten Uebung, setzt das
   Formular .on - und der Chip wird wieder sichtbar. Ohne diesen Weg
   haette das Speichern es still entfernt. */
.ueb-chip-aus:not(.on) { display: none; }
.ueb-chip-aus.on { border-style: dashed; }


/* =====================================================================
 * Eigene Sportsymbole (sportsymbole.php), 14.09.2026
 * ---------------------------------------------------------------------
 * Sie stehen ueberall dort, wo vorher ein <i> mit Font-Awesome-Klasse
 * stand, und muessen sich deshalb wie ein Schriftzeichen verhalten:
 * Groesse aus der Schriftgroesse, Farbe aus currentColor, Ausrichtung auf
 * der Grundlinie. 1em waere zu klein - Font Awesome zeichnet mit
 * Innenabstand, diese Symbole nutzen die ganze Flaeche.
 * ===================================================================== */
.ti-sym {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    vertical-align: -0.2em;
    flex: 0 0 auto;
    color: inherit;
    fill: none;
}

/* An den Stellen, wo ein <i> per Regel eine feste Breite oder Farbe
   bekommt, muss das Symbol dasselbe tun - sonst springt die Spalte. */
.ueb-st-kachel > .ti-sym,
.ueb-st-gruppenkopf > .ti-sym {
    width: 22px;
    height: 22px;
    color: var(--tigers-yellow-ink);
    vertical-align: middle;
}
.ueb-st-icon-vorschau .ti-sym { width: 20px; height: 20px; color: var(--tigers-yellow-ink); }
.ueb-st-katalog-raster .ti-sym { width: 20px; height: 20px; vertical-align: middle; }
.ueb-ex-mat > .ti-sym { width: 1em; height: 1em; color: var(--tigers-yellow-ink); }
.ueb-ex-chip > .ti-sym { color: inherit; }
.ueb-tag-mat > .ti-sym { color: var(--tigers-yellow-ink); }
.ueb-chipgruppe-chips .ueb-chip > .ti-sym { width: 1em; height: 1em; }

/* Im gewaehlten Zustand steht der Chip auf Gelb - das Symbol muss dann
   die dunkle Schrift mitnehmen, sonst verschwindet es im Untergrund. */
.ueb-chip.on > .ti-sym { color: var(--tigers-black); }
.ueb-st-katalog-raster button[aria-pressed="true"] .ti-sym { color: var(--tigers-black); }


/* ---- Suche in der Symbolauswahl (14.09.2026) ------------------------
 * Anlass: "es ist sehr mühselig als Text" — 114 Symbole in acht Gruppen
 * lassen sich nicht mehr durch Scrollen erfassen.
 * ------------------------------------------------------------------- */
.ueb-st-suchzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.ueb-st-suchfeld {
    position: relative;
    flex: 1 1 auto;
    display: block;
}
.ueb-st-suchfeld > i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: rgba(var(--ink) / 0.5);
    pointer-events: none;
}
.ueb-st-feld .ueb-st-suchfeld input,
.ueb-st-suchfeld input {
    width: 100%;
    height: var(--feld-hoehe);
    padding: 0 10px 0 32px;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    background: var(--feld-bg, var(--background-color));
    color: var(--text-input);
    font: inherit;
}
/* Das eigene Loeschkreuz von type="search" sitzt in Chrome auf dem Rand
   und ist im Dunkelmodus kaum zu sehen - die Suche leert sich ohnehin
   beim naechsten Oeffnen. */
.ueb-st-suchfeld input::-webkit-search-cancel-button { opacity: 0.5; }

.ueb-st-treffer {
    flex: 0 0 auto;
    font-size: 0.74rem;
    color: rgba(var(--ink) / 0.55);
    font-variant-numeric: tabular-nums;
}

.ueb-st-katalog-block[hidden] { display: none; }
.ueb-st-katalog-raster button[hidden] { display: none; }

.ueb-st-leer {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--warn-text);
}

/* Die Gruppenueberschrift bleibt beim Scrollen stehen: bei acht Gruppen
   sieht man sonst ein Raster ohne zu wissen, wovon. */
.ueb-st-katalog-kopf {
    position: sticky;
    top: -8px;
    z-index: 1;
    background: var(--bg-flaeche);
    padding-top: 4px;
}


/* Spalte mit fester Kopfzeile und festem Fuss, damit der Speichern-Knopf
   sichtbar bleibt, egal wie hoch das Fenster ist.
   ZWINGEND an [open] gebunden: ein <dialog> ist nur deshalb unsichtbar, weil
   das Browser-Stylesheet ihm display:none gibt. Ein display:flex auf dem
   Element selbst schlaegt das und zeigt den Dialog ab dem Seitenaufbau -
   die Seite ist dann nicht mehr bedienbar. Genau das ist am 14.09.2026
   live gegangen, weil jeder Test zuerst eine Kachel angeklickt und damit
   den Dialog geoeffnet hat. */
.ueb-st-dlg[open] {
    display: flex;
    flex-direction: column;
}

/* Nur die Mitte scrollt - Titel oben, Knopfleiste unten bleiben stehen. */
.ueb-st-dlg-mitte {
    flex: 1 1 auto;
    min-height: 0;          /* ohne das waechst der Flex-Kasten ueber den Rand */
    overflow-y: auto;
    margin: 0 -18px;        /* Bildlaufleiste an den Dialogrand */
    padding: 0 18px;
}
.ueb-st-dlg h2,
.ueb-st-dlg-nutzung,
.ueb-st-dlg-fuss { flex: 0 0 auto; }
.ueb-st-dlg-fuss {
    border-top: 1px solid var(--glass-12);
    padding-top: 14px;
}


/* ===========================================================================
   Zugeklappte Planzeile (2026-09-17)
   ---------------------------------------------------------------------------
   Varianten, Bilder, Parallel-Modus, Notiz und Rueckblick standen bei JEDER
   Zeile dauerhaft offen. Bei acht Uebungen mit je drei Varianten und zwei
   Bildern waren das rund 40 Haekchen gleichzeitig auf dem Schirm. Sie liegen
   jetzt in .ueb-plan-klapp; sichtbar bleibt der Titel und darunter die
   Statuszeile, die dieselbe Auskunft in Worten traegt.
   =========================================================================== */

.ueb-plan-kopf {
    display: block;
    cursor: pointer;
    border-radius: 8px;
    padding: 2px 4px;
    margin: -2px -4px;
}
.ueb-plan-kopf:hover { background: var(--glass-06); }
.ueb-plan-kopf:focus-visible {
    outline: 3px solid var(--tigers-yellow);
    outline-offset: 2px;
}

/* Die Statuszeile ist das Gegenstueck zum Zuklappen: Wer hier nichts zu tun
   sieht, klappt gar nicht erst auf. "leer" ist dabei eine Auskunft und kein
   Fehler - null gewaehlte Varianten heisst, im Ausdruck steht keine. */
.ueb-plan-status {
    display: flex; flex-wrap: wrap; gap: 3px 12px;
    margin-top: 4px;
    font-size: 0.75rem; color: rgba(var(--ink) / 0.62);
}
.ueb-plan-status span { display: inline-flex; align-items: center; gap: 5px; }
.ueb-plan-status i { font-size: 0.72rem; color: rgba(var(--ink) / 0.52); }
/* 0.6 statt der frueher erwogenen 0.38: darunter faellt der Text im
   Dunkelmodus auf rund 2,9:1 und damit unter die geforderten 4,5:1. */
.ueb-plan-status .leer { color: rgba(var(--ink) / 0.6); font-style: italic; }

.ueb-plan-klapp { display: none; }
.ueb-plan-item.ueb-plan-offen .ueb-plan-klapp { display: block; }

/* Seit 2026-09-17 ein echter Knopf - der einfache Klick auf die Zeile
   klappt nicht mehr auf, also muss der Pfeil anfassbar sein. */
.ueb-plan-chevron {
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(var(--ink) / 0.6);
    transition: transform .18s;
    background: none; border: 1px solid transparent; cursor: pointer;
}
.ueb-plan-chevron:hover { background: var(--glass-16); border-color: var(--glass-22); color: rgb(var(--ink)); }
.ueb-plan-item.ueb-plan-offen .ueb-plan-chevron { transform: rotate(180deg); }

/* Vermerk statt Protokollfeld. Geschrieben wird in der Trainingsansicht. */
.ueb-plan-prot-vermerk {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 8px; padding: 9px 12px;
    border: 1px solid var(--border-light); border-radius: 8px;
    background: var(--glass-06);
    font-size: 0.8rem; color: rgba(var(--ink) / 0.72);
}
.ueb-plan-prot-vermerk i { color: rgba(var(--ink) / 0.52); margin-top: 2px; }
.ueb-plan-prot-vermerk b { color: rgb(var(--ink)); font-weight: 700; }

/* ===========================================================================
   Werkbank: Katalog links, Plan rechts (2026-09-17)
   ---------------------------------------------------------------------------
   Der Kernablauf ist suchen, in den Plan legen, weiter. Beim Reiterwechsel
   verlor man dabei jedes Mal die jeweils andere Seite aus dem Blick. Beide
   Spalten scrollen fuer sich; unter 1100px fallen sie untereinander.
   =========================================================================== */

.wb {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.wb-katalog {
    position: sticky; top: 12px;
    max-height: calc(100vh - 24px);
    display: flex; flex-direction: column;
    min-width: 0;
}
.wb-katalog .ueb-card { margin-bottom: 10px; }
/* Die Trefferliste ist das, was scrollt - nicht die ganze Spalte. Nur in
   der Werkbank: im Reiter "Uebungsdatenbank" laeuft die Liste ueber die
   ganze Seite, dort waere ein Scrollkasten im Scrollkasten. */
.wb-katalog #uebDbListe { overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }

/* In 400px Breite ist das Kachelraster ein Einspalter, und die Kachel wird
   flacher: Bild kleiner, Zeilenabstaende enger. Das Bild bleibt - die
   Wiedererkennung ueber das Diagramm ist beim Suchen die halbe Miete. */
/* Die Filterzeile richtet sich sonst nach der FENSTER-Breite und stuende in
   der 400px-Spalte vierspaltig - jedes Feld rund 85px breit. Hier zaehlt die
   Spalte, nicht das Fenster. */
.wb-katalog .ueb-fields-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 10px; }
.wb-katalog .ueb-field .l { font-size: 0.68rem; }
.wb-katalog .ueb-chip-fav-filter { font-size: 0.74rem; padding: 0 9px; }

.wb-katalog .ueb-cards { grid-template-columns: 1fr; gap: 8px; }
.wb-katalog .ueb-ex-card { padding: 11px 12px; gap: 5px; }
.wb-katalog .ueb-ex-card h3 { font-size: 0.92rem; }
.wb-katalog .ueb-ex-galerie-eins { margin: 2px -12px; }
.wb-katalog .ueb-ex-galerie-eins img {
    width: calc(100% + 24px); aspect-ratio: 16/7; border-radius: 8px;
}
.wb-katalog .ueb-ex-galerie-skizze { margin: 2px 0; }
.wb-katalog .ueb-ex-chips { gap: 4px; }
.wb-katalog .ueb-ex-chip { font-size: 0.7rem; padding: 3px 8px; }
.wb-katalog .ueb-ex-material { font-size: 0.72rem; }
.wb-katalog .ueb-ex-ersteller { font-size: 0.7rem; }
.wb-katalog .ueb-plan-add-btn { padding: 7px 12px; font-size: 0.78rem; }

.wb-plan { min-width: 0; }

@media (max-width: 1100px) {
    .wb { grid-template-columns: minmax(0, 1fr); }
    .wb-katalog { position: static; max-height: none; }
    .wb-katalog #uebDbListe { max-height: 420px; }
}

/* ---- Bausteine -------------------------------------------------------- */
.ueb-bausteine-karte { padding: 14px 16px; }
.ueb-bausteine {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.ueb-bausteine-titel {
    width: 100%; margin-bottom: 2px;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(var(--ink) / 0.66);
}
.ueb-baustein {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px; border-radius: 8px;
    border: 1px dashed var(--border-gray); background: var(--glass-06);
    color: rgba(var(--ink) / 0.82);
    font-size: 0.78rem; font-weight: 600;
    cursor: grab;
    /* Ohne das scrollt der Finger die Seite, statt den Baustein zu ziehen -
       dieselbe Vorgabe wie am Griff einer Planzeile. */
    touch-action: none;
    min-height: 34px;
}
.ueb-baustein:hover { border-color: var(--tigers-yellow); color: rgb(var(--ink)); }
.ueb-baustein:focus-visible { outline: 3px solid var(--tigers-yellow); outline-offset: 2px; }
.ueb-baustein.ueb-zieht { opacity: 0.45; cursor: grabbing; }
.ueb-baustein i { color: rgba(var(--ink) / 0.6); }

/* ---- Anfasser auf der Katalogkachel ----------------------------------- */
/* Der Anfasser ergibt nur dort Sinn, wo es einen Plan zum Hineinziehen
   gibt. Im Reiter "Uebungsdatenbank" waere er ein Knopf ins Leere - und
   wuerde ausserdem mit der Ueberschrift der Kachel kollidieren. */
.ueb-kat-griff { display: none; }
.wb-katalog .ueb-kat-griff {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 8px; left: 8px; z-index: 2;
    width: 30px; height: 30px; border-radius: 8px;
    color: rgba(var(--ink) / 0.46);
    background: var(--glass-08);
    cursor: grab; touch-action: none;
}
.ueb-ex-card:hover .ueb-kat-griff { color: var(--tigers-yellow-ink); background: var(--glass-16); }
.ueb-ex-card.ueb-zieht { opacity: 0.45; }
.ueb-ex-card.ueb-zieht .ueb-kat-griff { cursor: grabbing; }
/* Der Titel weicht dem Anfasser aus, sonst laege er darunter. */
.wb-katalog .ueb-ex-card h3 { padding-left: 34px; min-height: 30px; }

/* ---- Einfügemarke mit Uhrzeit ----------------------------------------- */
/* Die Marke sagt, WANN das Gezogene laufen wuerde. Das ist der Zweck des
   Ziehens: nicht "irgendwo einsortieren", sondern "um 18:23 soll das laufen". */
.ueb-plan-marker {
    display: flex; align-items: center; gap: 10px;
    height: 32px; margin: 3px 0;
    border-top: 3px solid var(--tigers-yellow);
    border-radius: 2px;
}
.ueb-plan-marker-zeit {
    display: inline-flex; align-items: center;
    margin-top: -3px; padding: 3px 10px; border-radius: 0 0 8px 8px;
    background: var(--tigers-yellow); color: var(--tigers-black);
    font-size: 0.76rem; font-weight: 800;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Waehrend eines Zugs nichts markieren - die blaue Auswahl ueber den halben
   Plan war der haesslichste Teil des alten Ziehens. */
body.ueb-zieht-laeuft { user-select: none; -webkit-user-select: none; }

/* ---- Startpunkte nur am Anfang ---------------------------------------- */
.ueb-startstruktur {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 10px 0 14px;
}
.ueb-startstruktur[hidden] { display: none; }


/* ===========================================================================
   Werkbank, zweiter Durchgang (2026-09-17, nach Maiks Rueckmeldung)
   ---------------------------------------------------------------------------
   1. Die Bausteine standen unter der Trefferliste und waren damit bei jedem
      gefuellten Katalog ausserhalb des Sichtfelds. Sie sind jetzt am unteren
      Rand der Spalte festgesetzt; gescrollt wird nur die Trefferliste.
   2. Im Planer zeigt die Kachel NUR den Titel. Gesucht wird hier nach Namen,
      und alles Weitere - Bild, Chips, Material, Ersteller - steht in der
      Detailansicht, die ein Klick oeffnet. Vorher war jede Kachel so hoch,
      dass in die Spalte drei Uebungen passten.
   =========================================================================== */

/* ---- 1. Spaltenaufteilung: Liste scrollt, Bausteine bleiben ------------ */
.wb-katalog > .ueb-katalog-heimat {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
}
.wb-katalog #uebKatalog {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
}
.wb-katalog #uebKatalog > .ueb-card { flex: 0 0 auto; }
.wb-katalog .ueb-bausteine-karte { flex: 0 0 auto; margin-bottom: 0; }

/* ---- 2. Kachel auf den Titel eingedampft ------------------------------ */
.wb-katalog .ueb-ex-card {
    display: flex; flex-direction: row; align-items: center;
    gap: 8px; padding: 9px 44px 9px 40px; min-height: 44px;
}
/* Alles ausser Anfasser, Stern und Titel faellt weg. Die <template> mit dem
   Volltext bleibt davon unberuehrt - sie wird ohnehin nicht gezeichnet und
   speist weiter die Detailansicht. */
.wb-katalog .ueb-ex-card > .ueb-ex-galerie,
.wb-katalog .ueb-ex-card > .ueb-ex-chips,
.wb-katalog .ueb-ex-card > .ueb-ex-material,
.wb-katalog .ueb-ex-card > .ueb-ex-ersteller,
.wb-katalog .ueb-ex-card > .ueb-plan-add-btn,
.wb-katalog .ueb-ex-card > .ueb-reifegrad-hinweis { display: none; }
.wb-katalog .ueb-ex-card > .ueb-reifegrad {
    position: absolute; right: 44px; top: 50%; transform: translateY(-50%);
    font-size: 0.66rem; padding: 2px 7px; margin: 0;
}
.wb-katalog .ueb-ex-card h3 {
    font-size: 0.86rem; line-height: 1.3; margin: 0; padding-left: 0;
    min-height: 0; flex: 1 1 auto;
}
.wb-katalog .ueb-kat-griff { top: 50%; transform: translateY(-50%); left: 6px; }
/* Unfertige Uebungen zeigen gar keinen Anfasser: sie duerfen nicht in den
   Plan (uebZiehStart prueft es noch einmal), und ein Anfasser, der beim
   Anfassen ablehnt, waere eine Einladung ins Leere. */
.wb-katalog .ueb-ex-card[data-unfertig="1"] .ueb-kat-griff { display: none; }
.wb-katalog .ueb-ex-card[data-unfertig="1"] h3 { padding-left: 6px; }
.wb-katalog .ueb-fav-btn { top: 50%; transform: translateY(-50%); right: 8px; width: 28px; height: 28px; }


/* ---- Filter ein- und ausklappen (2026-09-17) -------------------------- */
.ueb-filter-karte { padding-top: 12px; padding-bottom: 12px; }
.ueb-filter-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 4px 2px; margin-bottom: 10px;
    background: none; border: none; cursor: pointer;
    color: rgb(var(--ink)); font: inherit; text-align: left;
}
.ueb-filter-toggle:hover .ueb-filter-toggle-label { color: var(--tigers-yellow-ink); }
.ueb-filter-toggle:focus-visible { outline: 3px solid var(--tigers-yellow); outline-offset: 2px; border-radius: 8px; }
.ueb-filter-toggle-label {
    display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0;
    font-size: 0.82rem; font-weight: 700;
}
.ueb-filter-toggle-label > i { color: var(--tigers-yellow-ink); }
/* Der Stand ist die einzige Auskunft, solange zugeklappt ist. */
.ueb-filter-stand {
    font-weight: 500; font-size: 0.78rem; color: rgba(var(--ink) / 0.7);
    overflow-wrap: anywhere;
}
.ueb-filter-chevron { transition: transform .18s; color: rgba(var(--ink) / 0.6); }
.ueb-filter-toggle.zu .ueb-filter-chevron { transform: rotate(-90deg); }
/* Zugeklappt braucht die Karte keinen Abstand nach unten mehr. */
.ueb-filter-toggle.zu { margin-bottom: 0; }