/* 10-abrechnung.css — Teil der Aufteilung von style.css (2026-08-10).
   Urspruenglich Zeilen 5339-6095 der einen Datei. Abrechnung Smart-Tabelle (fk2-/sn2-), Feldklassen.
   Diese und alle anderen css/*.css-Dateien werden auf JEDER Seite
   gemeinsam geladen, in fester Reihenfolge - die Kaskade ist exakt
   dieselbe wie vorher, nur auf mehrere Dateien verteilt. */

/* =========================================================================
   Abrechnung: Smart-Tabellen Fahrtkosten + Stundennachweis
   (aus Fahrtkosten.php und Stundennachweis.php hierher migriert, 2026-07-26)
   -------------------------------------------------------------------------
   Bis 2026-07-26 lagen diese Regeln in fuenf <style>-Bloecken direkt in den
   beiden PHP-Dateien, die Ausfuellhilfe-Dialoge zusaetzlich komplett in
   style=""-Attributen. Beide Seiten hatten dabei praktisch dasselbe CSS
   doppelt: 47 Regeln waren bis auf das Praefix (fk2-/sn2-) zeichengleich.
   Deshalb stehen die gemeinsamen Regeln hier EINMAL mit doppeltem Selektor;
   nur die echten Unterschiede sind getrennt aufgefuehrt.
   Werte sind unveraendert uebernommen, optisch aendert sich nichts.
   Ergaenzung: die Aufklapp-Zeilen (.fk2-acc-*, .sn2-acc-*, .fk2-plusbtn,
   .sn2-plusbtn) stehen weiter oben im Block "Mehrfach-Eintraege pro Tag".
   ========================================================================= */

/* --- Rahmen und Kopf --- */
.fk2, .sn2{background:transparent!important;border:0!important;padding:0!important;margin:0!important;
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;}
.fk2-card, .sn2-card{background:rgba(var(--ink) / 0.14);backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);border:1px solid rgba(var(--ink) / 0.24);
  border-radius:20px;box-shadow:0 16px 48px rgba(15,15,15,0.28);overflow:hidden;}
.fk2-head, .sn2-head{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid rgba(var(--ink) / 0.16);background:rgba(var(--ink) / 0.06);}
.fk2-ic, .sn2-ic{width:38px;height:38px;border-radius:9px;background:var(--tigers-yellow);display:flex;
  align-items:center;justify-content:center;font-size:18px!important;flex:none;}
.fk2-head-txt, .sn2-head-txt{flex:1;min-width:0;}
.fk2-title, .sn2-title{font-size:18px!important;font-weight:800;color: rgb(var(--ink));line-height:1.1;}
.fk2-sub, .sn2-sub{font-size:12.5px!important;color: rgba(var(--ink) / 0.72);margin-top:2px;}
.fk2-pill, .sn2-pill{font-size:12px!important;font-weight:700;padding:6px 12px;border-radius:20px;
  /* War festes rgba(253,238,23,...) - folgte damit NICHT der Vereinsfarbe
     (Whitelabel) und ergab im Dunkelmodus 3,04:1. Die Transluzenz-Token
     kippen mit der eingestellten Marke (2026-08-23). */
  /* Die Pille benutzte die Markenfarbe gleichzeitig als Toenung UND als
     Schriftfarbe - das ist unabhaengig vom Farbton knapp (2026-08-23:
     3,33:1 mit dem Orange der Demo). Die Marke bleibt ueber Toenung und
     Rahmen sichtbar, die Schrift laeuft ueber --ink und kippt mit dem Theme. */
  background:var(--tigers-yellow-22);color: rgb(var(--ink));white-space:nowrap;
  border:1px solid var(--tigers-yellow-35);}
.fk2-details, .sn2-details{margin:0;}
.fk2-secttl, .sn2-secttl{padding:14px 20px 0;font-weight:800;font-size:11px!important;text-transform:uppercase;
  letter-spacing:.6px;color: rgba(var(--ink) / 0.72);}
.fk2-hint, .sn2-hint{padding:8px 20px 0;font-size:13px!important;color: rgba(var(--ink) / 0.75);}

/* --- Werkzeugleiste --- */
.fk2-tools, .sn2-tools{padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.fk2-help, .sn2-help{background:var(--tigers-yellow);color: #111;border:1px solid var(--tigers-yellow);
  padding:9px 16px;font-weight:700;font-size:13.5px!important;border-radius:9px;cursor:pointer;}
.fk2-help:hover, .sn2-help:hover{background:var(--accent-hover);}
.fk2-filter, .sn2-filter{font-size:13px!important;color: rgba(var(--ink) / 0.75);display:flex;
  align-items:center;gap:7px;cursor:pointer;user-select:none;}
.fk2-filter input, .sn2-filter input{accent-color:var(--tigers-yellow);}

/* --- Tabelle --- */
.fk2-split, .sn2-split{display:grid;grid-template-columns:1fr 290px;gap:0;align-items:start;}
.fk2-main, .sn2-main{min-width:0;}
.fk2-tablewrap, .sn2-tablewrap{overflow-x:auto;}
.fk2-table, .sn2-table{width:100%;border-collapse:collapse;}
.fk2-table{min-width:520px;}   /* mehr Spalten: Ziel + Grund + km */
.sn2-table{min-width:420px;}
.fk2-table thead th, .sn2-table thead th{background:rgba(var(--ink) / 0.08);text-align:left;font-size:11px!important;
  text-transform:uppercase;letter-spacing:.5px;color: rgba(var(--ink) / 0.72);
  font-weight:700;padding:10px 12px;border-bottom:1px solid rgba(var(--ink) / 0.16);}
.fk2-th-day, .sn2-th-day{width:58px;}
.fk2-th-x, .sn2-th-x{width:64px;}
.fk2-th-grund{width:34%;}
.fk2-th-km{width:118px;text-align:right!important;}
.sn2-th-std{width:110px;text-align:right!important;}
.fk2-table tbody td, .sn2-table tbody td{padding:6px 12px;border-bottom:1px solid rgba(var(--ink) / 0.10);
  vertical-align:middle;}
.fk2-tdx, .sn2-tdx{text-align:center;}

/* Kategorie-Streifen links: Fahrtkosten kennt Heim/Aus, der Stundennachweis
   Training/Torwart/Spiel. */
.fk2-row.fk2-cat-heim{box-shadow:inset 3px 0 0 #6aa8ff;}
.fk2-row.fk2-cat-aus{box-shadow:inset 3px 0 0 #f0b429;}
.sn2-row.sn2-cat-tr{box-shadow:inset 3px 0 0 #4ddb8b;}
.sn2-row.sn2-cat-tw{box-shadow:inset 3px 0 0 #6aa8ff;}
.sn2-row.sn2-cat-sp{box-shadow:inset 3px 0 0 #f0b429;}

/* Aus der Fahrtkostenabrechnung uebernommener Tag – bleibt bis zum Neuladen
   markiert, damit sofort auffaellt wo noch Stunden fehlen. */
.sn2-row.sn2-uebernommen{background:color-mix(in srgb, var(--tigers-yellow) 7%, transparent);}
/* Wochenend-Tage: stand als fester #ff9b9b da - das ist der Rotton der
   DUNKLEN Palette und ergab im Hellmodus 1,51:1 (2026-08-23 gemessen).
   var(--err-text) kippt mit dem Theme: hell #a8302b, dunkel #ff9b9a. */
.fk2-row.fk2-we .fk2-daycell, .sn2-row.sn2-we .sn2-daycell{color: var(--err-text);}
.fk2-daycell, .sn2-daycell{white-space:nowrap;font-weight:700;color: rgb(var(--ink));text-align:center;line-height:1.05;}
.fk2-dnum, .sn2-dnum{display:block;font-size:15px!important;}
.fk2-wd, .sn2-wd{display:block;font-size:10.5px!important;color: rgba(var(--ink) / 0.72);
  text-transform:uppercase;letter-spacing:.3px;}

/* --- Felder in der Tabelle --- */
.fk2-in, .sn2-in{font-family:inherit;font-size:14px!important;color: rgba(var(--ink) / 0.92);
  background:rgba(var(--ink) / 0.10);border:1px solid rgba(var(--ink) / 0.22);
  border-radius:8px;padding:8px 10px;width:100%;color-scheme:dark;}
.fk2-in::placeholder, .sn2-in::placeholder{color:rgba(var(--ink) / 0.72);}
.fk2-in:focus, .sn2-in:focus{outline:none;border-color:var(--tigers-yellow);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--tigers-yellow) 25%, transparent);}
.fk2-in option, .sn2-in option{color:var(--text-color);background:var(--darker-background);}
.fk2-grund, .sn2-art{cursor:pointer;}
.fk2-km, .sn2-std{text-align:right;font-variant-numeric:tabular-nums;}
.fk2-date{width:100%;}

/* Zahlenfelder ohne Hoch/Runter-Pfeile: die Pfeile fressen in der schmalen
   km-Spalte so viel Platz, dass dreistellige Entfernungen abgeschnitten
   wurden (Meldung Maik 2026-07-31). Eingetippt wird ohnehin, geklickt nie. */
.fk2-tdkm input[type="number"], .fk2-acc-entry input[type="number"], #fk-hilfe-km{
  -moz-appearance:textfield; appearance:textfield;}
.fk2-tdkm input[type="number"]::-webkit-outer-spin-button,
.fk2-tdkm input[type="number"]::-webkit-inner-spin-button,
.fk2-acc-entry input[type="number"]::-webkit-outer-spin-button,
.fk2-acc-entry input[type="number"]::-webkit-inner-spin-button,
#fk-hilfe-km::-webkit-outer-spin-button,
#fk-hilfe-km::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;}

/* --- Auto-KM-Feld (nur Fahrtkosten) --- */
.km-auto-wrap { display:flex; align-items:center; gap:4px; position:relative; }
.km-unit { color:#999; font-size:0.82rem; white-space:nowrap; flex-shrink:0; }
.km-auto-wrap.km-loading .km-input { opacity:0.5; }
.km-auto-wrap.km-loading::before {
  content:''; position:absolute; right:30px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border:2px solid #aaa; border-top-color:var(--tigers-yellow);
  border-radius:50%; animation:km-spin 0.7s linear infinite; pointer-events:none;
}
@keyframes km-spin { to { transform:translateY(-50%) rotate(360deg); } }
.km-auto-wrap.km-ok .km-input { border-color:#4caf50 !important; }
.km-auto-wrap.km-error .km-input { border-color:#e53935 !important; }
.fk2-tdkm .km-auto-wrap{justify-content:flex-end;}
/* Ohne die Pfeile ist Platz frei – das Feld nutzt ihn jetzt aus, damit auch
   "123,4" vollstaendig sichtbar bleibt (Meldung Maik 2026-07-31). */
.km-auto-wrap .km-input{flex:1 1 auto;min-width:0;}

/* --- Zeile leeren ---
   Element + Klasse ist hier Absicht: abrechnung-leiste.php (auf beiden Seiten
   eingebunden) setzt fuer dieselben Klassen ein konkurrierendes
   "color: rgba(var(--ink) / 0.80)". Solange diese Regeln in den
   Seiten selbst standen, kamen sie NACH der Leiste und gewannen bei
   Gleichstand. Aus style.css heraus wuerden sie verlieren - die hoehere
   Spezifitaet haelt das bisherige Aussehen (0.7) fest. Faellt weg, sobald
   auch abrechnung-leiste.php migriert ist. */
button.fk-clear-btn, button.sn-clear-btn,
.fk-clear-btn, .sn-clear-btn {
    background: rgba(var(--ink) / 0.08);
    border: 1px solid rgba(var(--ink) / 0.22);
    border-radius: 4px;
    color: rgba(var(--ink) / 0.7) !important;
    cursor: pointer;
    padding: 2px 7px;
    font-size: 0.8em !important;
    line-height: 1;
}
.fk-clear-btn:hover, .sn-clear-btn:hover { background: #c00; color: #fff; border-color: #c00; }

/* --- Seitenleiste mit Summen --- */
.fk2-aside, .sn2-aside{border-left:1px solid rgba(var(--ink) / 0.16);background:rgba(var(--ink) / 0.06);
  align-self:stretch;}
.fk2-aside-inner, .sn2-aside-inner{padding:18px;position:sticky;top:12px;}
.fk2-aside-h, .sn2-aside-h{font-size:11px!important;text-transform:uppercase;letter-spacing:.6px;
  color: rgba(var(--ink) / 0.72);font-weight:700;margin-bottom:12px;}
.fk2-sumline, .sn2-sumline{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;
  border-bottom:1px dashed rgba(var(--ink) / 0.16);}
.fk2-k, .sn2-k{font-size:13px!important;color: rgba(var(--ink) / 0.75);display:flex;
  align-items:center;gap:8px;}
.fk2-v, .sn2-v{font-weight:800;font-variant-numeric:tabular-nums;color: rgb(var(--ink));font-size:14px!important;}
.fk2-dot, .sn2-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.fk2-dot-b, .sn2-dot-b{background:#6aa8ff;}
.fk2-dot-a, .sn2-dot-a{background:#f0b429;}
.sn2-dot-g{background:#4ddb8b;}
.fk2-lbl, .sn2-lbl{display:block;font-size:12px!important;font-weight:700;
  color: rgba(var(--ink) / 0.72);margin:16px 0 6px;}
/* Die Summenkachel hatte einen festen dunklen Schleier (rgba(0,0,0,0.35)).
   Im Hellmodus stand darauf dunkle Schrift auf dunklem Grund - 'Gesamtbetrag'
   kam auf 4,0:1 (2026-08-23 gemessen). var(--feld-bg) ist dieselbe Idee einer
   vertieften Flaeche, kippt aber mit dem Theme: hell rgba(0,0,0,0.06),
   dunkel rgba(0,0,0,0.3). */
.fk2-total, .sn2-total{margin-top:14px;background:var(--feld-bg);border:1px solid rgba(var(--ink) / 0.18);
  border-radius:12px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;}
.fk2-total span:first-child, .sn2-total span:first-child{font-size:11px!important;text-transform:uppercase;letter-spacing:.6px;
  color: var(--tigers-yellow-text);-webkit-text-stroke:0.4px var(--tigers-yellow-outline);text-shadow:0 0 1px var(--tigers-yellow-outline);font-weight:700;}
.fk2-total span:last-child, .sn2-total span:last-child{font-size:22px!important;font-weight:800;font-variant-numeric:tabular-nums;
  color: rgb(var(--ink));}
.fk2-btn-primary, .sn2-btn-primary{margin-top:14px;width:100%;background:var(--tigers-yellow);color: #111;
  border:1px solid var(--tigers-yellow);border-radius:10px;padding:12px 16px;font-weight:800;
  font-size:14px!important;cursor:pointer;font-family:inherit;display:flex;align-items:center;
  justify-content:center;gap:8px;}
.fk2-btn-primary:hover, .sn2-btn-primary:hover{background:var(--accent-hover);}

@media(max-width:760px){
  .fk2-split, .sn2-split{grid-template-columns:1fr;}
  .fk2-aside, .sn2-aside{border-left:0;border-top:1px solid rgba(var(--ink) / 0.16);}
  .fk2-aside-inner, .sn2-aside-inner{position:static;}
}

/* =========================================================================
   Ausfuellhilfe-Dialog (Fahrtkosten UND Stundennachweis)
   -------------------------------------------------------------------------
   Beide Seiten hatten denselben Dialog vollstaendig in style=""-Attributen,
   inklusive per JS gesetzter Farben fuer die Wochentag-Knoepfe. Jetzt eine
   gemeinsame Klassen-Familie .ah-*; der Aktiv-Zustand haengt an .ah-wt-active.
   Bewusst fest dunkel (wie .mo-ta/.dropdown): eigenstaendige Flaeche, die in
   beiden Themes gleich aussieht. Element + Klasse, damit generische Regeln
   wie ".content > div" oder ".content input[type=text]" den Dialog nicht
   schlagen koennen, falls er je in den Content wandert.
   ========================================================================= */
div.ah-modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9000;
  align-items:center; justify-content:center;}
div.ah-modal.ah-open{display:flex;}
.ah-box{background:#1e1e1e; border:1px solid #444; border-radius:12px; padding:28px 32px;
  min-width:360px; max-width:460px; width:90%;}
.ah-box-schmal{min-width:340px; max-width:420px;}
/* .ah-box ist ein dauerhaft DUNKLES Fenster (background:#1e1e1e), in beiden
   Themes - wie die Navigationsleiste. Deshalb die helle Markenfarbe und
   NICHT --tigers-yellow-text: der ist im Hellmodus dunkel und kam hier auf
   2,1:1 (2026-08-23 beim Gegentest aufgefallen). */
.ah-box h3{margin:0 0 20px 0; color:var(--tigers-yellow);}
.ah-group{margin-bottom:16px;}
.ah-group-last{margin-bottom:24px;}
.ah-lbl{display:block; margin-bottom:6px; color:#ccc; font-size:0.9em;}
.ah-lbl-wt{margin-bottom:8px;}
.ah-wtrow{display:flex; gap:6px; flex-wrap:wrap;}
.ah-wt{padding:8px 12px; border:2px solid #555; border-radius:6px; background:#2a2a2a;
  color:#ccc; cursor:pointer; font-weight:600; min-width:44px;}
.ah-wt.ah-wt-active{background:var(--tigers-yellow); color:var(--tigers-black); border-color:var(--tigers-yellow);}
.ah-zielrow{display:flex; gap:6px; align-items:center;}
input.ah-in, select.ah-in,
.content input.ah-in, .content select.ah-in{padding:8px; background:#2a2a2a; color:#fff;
  border:1px solid #555; border-radius:6px;}
.ah-in-ziel{flex:1;}
.ah-in-voll{width:100%; box-sizing:border-box;}
.ah-status{font-size:0.8em; color:#aaa; white-space:nowrap;}
.ah-note{margin-top:6px; font-size:0.8em; color:#888;}
.ah-actions{display:flex; gap:10px; justify-content:flex-end;}
.ah-btn{padding:9px 20px; border-radius:6px; cursor:pointer;}
.ah-btn-abbrechen{border:1px solid #555; background:#2a2a2a; color:#ccc;}
.ah-btn-ok{border:none; background:var(--tigers-yellow); color:var(--tigers-black); font-weight:700;}

/* =========================================================================
   Einheitliche Feldhoehen  (Vorgabe, 2026-07-26)
   -------------------------------------------------------------------------
   Alle einzeiligen Formularfelder einer Zeile/Gruppe muessen exakt gleich
   hoch sein. Vorher standen im Vertrags-Reiter des Spielerprofils in
   DERSELBEN Zeile: Dropdown 31,0px | Text 33,8px | Datum 35,8px |
   Datei 37,0px | Buttons 33,3-40,8px.

   Ursachen (beide nicht durch padding loesbar):
   1. Jeder Feldtyp hat eine andere intrinsische Hoehe: das Datumsfeld bringt
      den nativen Kalender mit, das Datei-Feld den "Durchsuchen"-Knopf, und
      <select> ignoriert line-height komplett.
   2. Die generischen Regeln ".content input[type=…] / .content select"
      schlagen per Spezifitaet die Feldklassen (.so-inp, .fk2-in) - daher
      kamen sogar unterschiedliche border-radius-Werte in einer Zeile.

   Deshalb: Hoehe IMMER ueber --feld-hoehe setzen, nie ueber padding. Neue
   Felder bekommen eine bestehende Feldklasse, keine eigene Variante.
   ========================================================================= */

/* --- 1) Generische Felder im Content-Bereich --- */
.content input[type="text"],
.content input[type="number"],
.content input[type="date"],
.content input[type="time"],
.content input[type="datetime-local"],
.content input[type="month"],
.content input[type="week"],
.content input[type="email"],
.content input[type="tel"],
.content input[type="url"],
.content input[type="search"],
.content input[type="password"],
.content input[type="file"],
.content select {
    height: var(--feld-hoehe);
    min-height: var(--feld-hoehe);
    box-sizing: border-box;
    line-height: 1.2;
}

/* --- 2) Feldklassen: Spielerprofil/-organisation (so-), Profil (pf-),
         Fahrtkosten (fk2-) und Stundennachweis (sn2-).
         Element + Klasse, damit die Regel die generischen .content-Regeln
         aus Abschnitt 1 sicher schlaegt. --- */
.content input.so-inp,
.content select.so-inp,
.content input.fk2-in,
.content select.fk2-in,
.content input.sn2-in,
.content select.sn2-in,
.content .so-sel,
input.so-inp,
select.so-inp,
.so-sel,
input.ah-in,
select.ah-in,
.pf-field input:not([type="checkbox"]):not([type="radio"]),
.pf-field select {
    height: var(--feld-hoehe);
    min-height: var(--feld-hoehe);
    box-sizing: border-box;
    line-height: 1.2;
}

/* Einheitliches Innenmass/Radius fuer die so-Familie: ohne das erben Datum
   und Dropdown padding 6px + radius 5px aus Abschnitt 1, das Textfeld aber
   7px + 8px aus .so-inp. */
.content input.so-inp,
.content select.so-inp,
.content .so-sel,
input.so-inp,
select.so-inp,
.so-sel {
    padding: 0 10px;
    border-radius: 8px;
}

/* Mehrzeilige Felder wachsen weiter mit, halten aber dieselbe Mindesthoehe. */
.content textarea,
.content textarea.so-inp,
textarea.so-inp {
    height: auto;
    min-height: var(--feld-hoehe);
    box-sizing: border-box;
    padding: 7px 10px;
}

/* --- 3) Buttons, die neben Feldern stehen (Anlege-Leiste, Aktionsspalte).
         .so-btn-mini ist bewusst ausgenommen: das ist ein Listen-Chip, kein
         Feld-Button. --- */
.so-btn:not(.so-btn-mini) {
    height: var(--feld-hoehe);
    min-height: var(--feld-hoehe);
    box-sizing: border-box;
}

/* Icons in Feld-Buttons: ohne diese Regel zieht die globale Falle
   "* { font-size: 1rem }" jedes <i> auf 16px hoch - ein Button MIT Icon war
   dadurch ~5px hoeher als derselbe Button ohne Icon. */
.so-btn i {
    font-size: 0.85em;
    line-height: 1;
}

/* =====================================================================
   Übungsdatenbank (Prefix ueb-, seit 2026-07-29). "Der Hub" — eine Seite
   mit Reitern, Aktionen laufen per fetch() gegen UebungAktion.php.
   Eigene Klassen statt Wiederverwendung von .ad-* (das ist Admin-Dashboard-
   spezifisch benannt, diese Seite ist es nicht) — gleiche Vereinbarung wie
   mo-/hb-/so- fuer die anderen Features.
   ===================================================================== */
/* Wie bei .content.hb/.content.ad: .content ist von Haus aus eine helle Karte
   (background-color: var(--background-color) = immer weiss, siehe style.css
   weiter oben) — ohne diese Neutralisierung sitzt die ganze Seite in einem
   weissen Kasten fest, unabhaengig vom Theme (genau der gemeldete Bug: "im
   Dark Modus wird das helle Design genommen"). */
.content.ueb { background: transparent; border: none; box-shadow: none; padding: 0; }
.content.ueb h1, .content.ueb h2, .content.ueb h3 { color: rgb(var(--ink)); border: none; padding: 0; margin: 0 0 4px; letter-spacing: normal; text-align: left; }
/* Auch direkte <p>-Kinder entkachelen: ".content > p" gibt jedem Absatz sonst
   --darker-background (hell), waehrend der Text im Dunkelmodus weiss bleibt ->
   der Einleitungssatz war weiss auf hellgrau und damit unlesbar (2026-07-30). */
.content.ueb > div, .content.ueb > p { margin: 0 0 18px; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; }

.ueb-h1 { font-size: 1.5rem; font-weight: 900; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.ueb-h1 i { color: var(--tigers-yellow-text); }
.ueb-lead { color: rgba(var(--ink) / 0.72); font-size: 0.85rem; margin: 0 0 14px; }

.ueb-tabbar { display: flex; gap: 6px; border-bottom: 1px solid rgba(var(--ink) / 0.16); margin-bottom: 18px; flex-wrap: wrap; }
/* Reiterleiste im Stil der Hauptnavigation: ruhender Text gedeckt, Hover und
   aktiver Reiter in Gelb, aktiver zusaetzlich mit 3px-Unterstrich.
   ACHTUNG, das war ein echter Fehler: ohne eigene :hover-Regel greift die
   generische "button:hover { background: var(--bg-table-row-dark) }" — dieser
   Wert ist #f1f3f5, also auch im Dunkelmodus fast weiss, und schlaegt
   ".ueb-tab" per Spezifitaet (0,1,1 gegen 0,1,0). Ergebnis war weisse Schrift
   auf weissem Grund, sobald die Maus ueber einem Reiter stand (2026-07-31).
   Fuer die Schrift --tigers-yellow-ink statt --tigers-yellow: die Leiste liegt
   auf der themenabhaengigen Seitenflaeche, nicht auf der immer dunklen Navileiste. */
.ueb-tab {
    font-weight: 700; font-size: 0.86rem; padding: 11px 12px; margin-right: 6px;
    background: none; border: none; border-bottom: 3px solid transparent;
    color: rgba(var(--ink) / 0.85); cursor: pointer;
    border-radius: 8px 8px 0 0; transition: background-color .15s, color .15s;
}
.ueb-tab i { color: var(--tigers-yellow-ink); }
.ueb-tab:hover, .ueb-tab:focus-visible {
    background: var(--glass-08); color: var(--tigers-yellow-ink);
}
.ueb-tab:hover i, .ueb-tab:focus-visible i { color: var(--tigers-yellow-ink); }
.ueb-tab.on { color: var(--tigers-yellow-ink); border-bottom-color: var(--tigers-yellow); }
.ueb-tab.on i { color: var(--tigers-yellow-ink); }
.ueb-badge { display: inline-block; margin-left: 4px; background: var(--err-icon); color: #fff; font-size: 0.66rem; font-weight: 800; padding: 1px 7px; border-radius: 99px; vertical-align: 2px; }

.ueb-card {
    background: var(--karte-bg); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--karte-border); border-radius: 18px; box-shadow: 0 12px 36px var(--glass-shadow);
    padding: 18px 20px; margin-bottom: 14px;
}
.ueb-sec { color: rgb(var(--ink)); }
.ueb-sec { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-left: 5px solid var(--tigers-yellow); padding: 0 0 0 12px; margin: 0 0 14px; }

.ueb-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.ueb-fields-filter { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .ueb-fields-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ueb-fields-filter { grid-template-columns: 1fr; } }
.ueb-fields .ueb-field { margin-bottom: 0; }
.ueb-fields-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
/* Kopfdaten des Trainingsplans: vier gleich breite Spalten (Datum, Von, Bis,
   Spieler). .ueb-fields-4 passt hier nicht — dessen vierte Spalte ist "auto"
   und fuer einen Knopf gedacht, ein Eingabefeld wuerde dort zusammenlaufen. */
.ueb-fields-kopf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
/* Schalter "Bilder mitdrucken": Kaestchen und Text auf einer Grundlinie.
   Farbe explizit auf dem <span> und <em>, weil "* { color }" die Vererbung schlaegt. */
.ueb-check { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 14px; cursor: pointer; }
.ueb-check input { width: 16px; height: 16px; min-height: 16px; margin-top: 2px; flex: 0 0 auto; }
.ueb-check span { font-size: 0.86rem; color: rgb(var(--ink)); }
.ueb-check em { font-style: normal; color: rgba(var(--ink) / 0.72); }
.ueb-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.ueb-field .l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(var(--ink) / 0.7); }
/* Einzeilige Felder: Hoehe kommt aus --feld-hoehe (Vorgabe, s. Block
   "Einheitliche Feldhoehen"). Das fruehere padding:10px liess bei 36px
   Feldhoehe nur 16px fuer 16px-Schrift -> Text war unten abgeschnitten. */
.ueb-field input, .ueb-field select, .ueb-field textarea {
    background: var(--bg-flaeche); color: var(--text-input); border: 1px solid rgba(var(--ink) / 0.35);
    border-radius: 10px; padding: 0 12px; width: 100%; font: inherit;
}
.ueb-field textarea { padding: 8px 12px; height: auto; }

.ueb-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.ueb-chip { font-size: 0.76rem; font-weight: 600; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--glass-22); background: var(--glass-12); color: rgba(var(--ink) / 0.7); cursor: pointer; }
.ueb-chip.on { background: var(--tigers-yellow); color: var(--tigers-black); border-color: var(--tigers-yellow); }

.ueb-btn-y { background: var(--tigers-yellow); color: var(--tigers-black); border: none; border-radius: 10px; padding: 10px 16px; font-weight: 800; font-size: 0.82rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ueb-btn-ghost { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(var(--ink) / 0.3); background: transparent; color: rgb(var(--ink)); border-radius: 8px; padding: 8px 13px; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
/* Eigene :hover-Regeln sind hier Pflicht, sonst greift die generische
   "button:hover { background: var(--bg-table-row-dark) }" (#f1f3f5, auch im
   Dunkelmodus fast weiss) und schlaegt die Klasse per Spezifitaet — beim
   Ghost-Button waere das helle Schrift auf fast weissem Grund (2026-07-31). */
.ueb-btn-y:hover { background: var(--tigers-yellow-hover); color: var(--tigers-black); }
.ueb-btn-ghost:hover { background: var(--glass-12); color: rgb(var(--ink)); border-color: rgba(var(--ink) / 0.5); }
.ueb-btn-teal { background: var(--status-teal); color: #0d2a20; border: none; border-radius: 8px; padding: 8px 13px; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.ueb-row-btn { display: flex; gap: 10px; margin-top: 6px; }

.ueb-msg { color: rgb(var(--ink)); background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: 10px; padding: 10px 12px; font-size: 0.82rem; margin-bottom: 14px; }
.ueb-msg-err { color: var(--err-text); background: var(--err-bg); border-color: var(--err-border); }
.ueb-loading { text-align: center; padding: 30px 20px; color: rgba(var(--ink) / 0.7); }

.ueb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ueb-ex-card { background: var(--glass-12); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--glass-22); border-radius: 14px; padding: 15px; display: flex; flex-direction: column; gap: 7px; position: relative; }
.ueb-ex-galerie-eins { margin: 4px -15px 4px; }
.ueb-ex-galerie-eins img { display: block; width: calc(100% + 30px); aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; }
.ueb-ex-galerie-mehr { display: flex; gap: 6px; overflow-x: auto; margin: 4px -15px 4px; padding: 0 15px 4px; }
.ueb-ex-galerie-mehr img { flex: 0 0 auto; height: 120px; width: auto; border-radius: 8px; object-fit: cover; }

/* Skizze statt Foto in der Listenkachel (2026-09-14). Sie wird bewusst NICHT
   beschnitten wie ein Foto: ein halber Spielzug ist keiner. Weisser Grund wie
   in der Detailansicht - die Skizze bringt ihre Farben fest mit und waere auf
   dunklem Grund unlesbar. */
.ueb-ex-galerie-skizze { margin: 4px -15px 4px; }
.ueb-ex-skizze {
    /* Breite genau 100%: die Galerie ist durch ihre negativen Raender schon
       randlos. Das calc(100% + 30px) der Foto-Regel daneben ist nur deshalb
       unauffaellig, weil ein <img> an der globalen max-width haengt - ein
       <div> nicht, das ragte 30 Pixel aus der Kachel. */
    position: relative; width: 100%; aspect-ratio: 16 / 10;
    background: #fff; border-radius: 10px; overflow: hidden;
}
.ueb-ex-skizze svg { display: block; width: 100%; height: 100%; }
.ueb-ex-skizze-marke {
    position: absolute; left: 8px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 99px;
    background: rgba(0, 0, 0, 0.62); color: #fff;
    font-size: 0.68rem; font-weight: 600;
}
.ueb-freigabe-galerie { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
.ueb-ex-bild-freigabe { width: 140px; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.ueb-ex-card h3 { margin: 0; padding-right: 36px; font-size: 0.95rem; font-weight: 700; color: rgb(var(--ink)); }
.ueb-ex-meta { font-size: 0.76rem; color: rgba(var(--ink) / 0.72); }

/* Kachel-Angaben: Kategorie, ab welcher Jugend, Spielerzahl */
.ueb-ex-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ueb-ex-chip, .ueb-ex-chip i {
    font-size: 0.74rem; font-weight: 600; color: rgba(var(--ink) / 0.82);
}
.ueb-ex-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px;
    border-radius: 99px; background: var(--glass-12); border: 1px solid var(--glass-22);
    white-space: nowrap;
}
.ueb-ex-chip i { color: var(--tigers-yellow-ink); font-size: 0.7rem; }

/* Material auf der Kachel: eigene Zeile, damit es nicht mit den Chips verschwimmt */
.ueb-ex-material, .ueb-ex-material span {
    font-size: 0.76rem; color: rgba(var(--ink) / 0.7); line-height: 1.35;
}
.ueb-ex-material { display: flex; align-items: flex-start; gap: 6px; }
.ueb-ex-material i { color: var(--tigers-yellow-ink); font-size: 0.72rem; margin-top: 2px; flex: 0 0 auto; }
.ueb-tag-mat, .ueb-tag-mat i { color: var(--tigers-yellow-ink); }
.ueb-tag-mat { border-color: var(--tigers-yellow-22, rgba(253,238,23,0.22)); }

/* Ganze Kachel ist anklickbar -> Detailansicht */
.ueb-ex-card { cursor: pointer; transition: border-color .15s, transform .15s; }
.ueb-ex-card:hover { border-color: var(--tigers-yellow); transform: translateY(-2px); }
.ueb-ex-card .ueb-plan-add-btn, .ueb-katalog-insert-btn { cursor: pointer; margin-top: auto; width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; line-height: 1; }

/* Favoriten-Stern auf Kacheln & im Modal */
.ueb-fav-btn {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--glass-12); border: 1px solid var(--glass-22);
    color: rgba(var(--ink) / 0.72); cursor: pointer;
    font-size: 0.92rem; display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0; margin: 0;
    transition: transform .15s, color .15s, background .15s, border-color .15s;
}
.ueb-fav-btn i { display: flex; align-items: center; justify-content: center; line-height: 1; margin: 0; padding: 0; }
.ueb-fav-btn:hover {
    transform: scale(1.15); color: var(--tigers-yellow-ink);
    background: var(--glass-22); border-color: var(--tigers-yellow);
}
.ueb-fav-btn.is-fav {
    color: var(--tigers-yellow-ink); background: color-mix(in srgb, var(--tigers-yellow) 18%, transparent);
    border-color: var(--tigers-yellow-22, rgba(253, 238, 23, 0.4));
}
.ueb-fav-btn.is-fav i {
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tigers-yellow) 60%, transparent));
}

/* Favoriten-Stern im Detail-Modal */
.ueb-detail-fav-btn {
    position: absolute; top: 14px; right: 54px; z-index: 5;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--glass-12); border: 1px solid var(--glass-22);
    color: rgba(var(--ink) / 0.72); cursor: pointer;
    font-size: 1rem; display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; padding: 0; margin: 0;
    transition: transform .15s, color .15s, background .15s, border-color .15s;
}
.ueb-detail-fav-btn i { display: flex; align-items: center; justify-content: center; line-height: 1; margin: 0; padding: 0; }

/* Favoriten Filter-Chip */
.ueb-chip-fav-filter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 99px; font-weight: 700;
    cursor: pointer; transition: all .15s;
    background: var(--glass-12); border: 1px solid var(--glass-22);
    color: rgba(var(--ink) / 0.8);
}
.ueb-chip-fav-filter:hover, .ueb-chip-fav-filter.on {
    background: color-mix(in srgb, var(--tigers-yellow) 20%, transparent); border-color: var(--tigers-yellow);
    color: var(--tigers-yellow-ink);
}
.ueb-chip-fav-filter i { color: var(--tigers-yellow-ink); }


/* ---- Detailansicht (Overlay) ----
   :not([hidden]) ist Pflicht: eine Klassenregel mit display schlaegt sonst das
   hidden-Attribut (gleiche Spezifitaet) und der Dialog liegt unsichtbar ueber
   der ganzen Seite — genau der Fehler vom Zuschneide-Dialog (2026-07-29). */
.ueb-detail-scrim:not([hidden]) {
    display: flex; align-items: flex-start; justify-content: center;
    /* z-index MUSS ueber der Navigation liegen (nav hat 1000, position:sticky).
       Mit 200 lag die Navileiste ueber dem Dialog und verdeckte dessen Kopfzeile
       samt Titel und Schliessen-Knopf (2026-07-31). */
    position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, 0.72);
    padding: 24px 16px; overflow-y: auto;
}
/* Flaeche wie beim Zuschneide-Dialog: --karte-bg ist themenabhaengig.
   NICHT --bg-flaeche verwenden - das ist die Eingabefeld-Flaeche und in BEIDEN
   Designs weiss, der weisse Text stand damit auf weissem Grund (2026-07-31). */
.ueb-detail-box {
    position: relative; width: min(900px, 100%); border-radius: 16px; padding: 22px;
    background: var(--karte-bg); border: 1px solid var(--karte-border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    display: flex; flex-direction: column; gap: 12px;
}
.ueb-detail-box h2 { margin: 0 44px 0 0; font-size: 1.25rem; font-weight: 800; color: rgb(var(--ink)); }
.ueb-detail-box h3 { margin: 6px 0 0; font-size: 0.95rem; font-weight: 700; color: rgb(var(--ink)); }
.ueb-detail-text { margin: 0; font-size: 0.9rem; line-height: 1.55; color: rgba(var(--ink) / 0.85); }
.ueb-detail-close {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
    background: var(--glass-12); border: 1px solid var(--glass-22); color: rgb(var(--ink));
    cursor: pointer; font-size: 1rem; line-height: 1;
}
.ueb-detail-close:hover { background: var(--tigers-yellow); color: var(--tigers-black); }
/* Ein Bild: einfach gross. Mehrere Bilder: Karussell (s. u.) */
.ueb-detail-galerie { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ueb-detail-galerie img {
    width: 100%; height: auto; border-radius: 10px; display: block;
    background: rgba(255, 255, 255, 0.06);
}

/* ---- Bilderkarussell (nur bei mehreren Bildern, per JS aktiviert) ----
   Sichtbarkeit ueber Klassen statt [hidden]: hier steuern beide Zustaende
   dieselbe Klasse, damit gibt es keinen Spezifitaetskonflikt. */
.ueb-detail-galerie.ueb-karussell { position: relative; }
.ueb-detail-galerie.ueb-karussell > img { display: none; }
.ueb-detail-galerie.ueb-karussell > img.aktiv { display: block; }
.ueb-karussell-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff; font-size: 1.1rem; line-height: 1; display: flex;
    align-items: center; justify-content: center;
}
.ueb-karussell-pfeil:hover { background: var(--tigers-yellow); color: var(--tigers-black); border-color: var(--tigers-yellow); }
.ueb-karussell-pfeil.vor { right: 10px; }
.ueb-karussell-pfeil.zurueck { left: 10px; }
.ueb-karussell-zaehler {
    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
    padding: 3px 12px; border-radius: 99px; background: rgba(0, 0, 0, 0.6);
    color: #fff; font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* ---- Medienspalte der Detailansicht (2026-09-14) ----
   Bild, Bewegtbild und Skizze standen in voller Breite ueber dem Text: man sah
   entweder das Bild oder die Beschreibung, nie beides. Jetzt liegen sie in
   einer 40-Prozent-Spalte links, der Text laeuft daneben. Wer genauer hinsehen
   will, klickt oder tippt darauf, ein zweiter Klick macht es wieder klein.

   Bewusst KEIN :hover (Entscheidung 2026-09-14). Ein Bild, das beim blossen
   Drueberfahren aufklappt, geht einem beim Lesen in die Quere - und auf Touch
   bliebe es nach dem Tippen ohnehin kleben. Was bleibt, ist die Tastatur:
   :focus-within vergroessert, weil es sonst keinen Weg dorthin gaebe.

   Vergroessert wird ueber transform und NICHT ueber die Breite: so verschiebt
   sich nichts darunter, und der Zeiger kann nicht aus einem wachsenden Bild
   herausrutschen und ein Flackern ausloesen. 40 Prozent Spalte plus 2 Prozent
   Abstand ergeben genau den Faktor 2.5 zurueck auf die volle Breite.

   Die Knoepfe und Schrittvorschauen der Skizze bleiben absichtlich draussen:
   verkleinert waeren sie in der Halle nicht mehr zu treffen. Nur die
   Zeichenflaeche schrumpft. */
.ueb-detail-medien { display: contents; }

@media (min-width: 761px) {
    .ueb-detail-medien { display: block; float: left; width: 40%; margin: 0 2% 12px 0; }
    #uebDetailInhalt::after { content: ''; display: block; clear: both; }
    /* Ab den Varianten geht es wieder ueber die volle Breite: der Bildspalte
       laufen sonst die Variantenbloecke in die Quere, und ein vergroessertes
       Variantenbild haette keinen Platz mehr im Dialog. */
    .ueb-detail-var-kopf { clear: left; }
    .ueb-detail-var-item { clear: left; }
    /* Variantenbilder werden nur schmaler, nicht umflossen: unter ihnen steht
       kein Text mehr, der danebenlaufen koennte. */
    .ueb-detail-var-item .ueb-detail-galerie-var { width: 40%; }
    .ueb-detail-medien .ueb-detail-galerie,
    .ueb-detail-medien .skz-rahmen,
    .ueb-detail-galerie-var {
        transform-origin: top left;
        transition: transform 180ms ease;
        cursor: zoom-in;
    }
    .ueb-detail-medien .ueb-detail-galerie:focus-visible,
    .ueb-detail-medien .skz-rahmen:focus-visible,
    .ueb-detail-galerie-var:focus-visible { outline: 2px solid var(--tigers-yellow); outline-offset: 2px; }
    /* :focus-visible und NICHT :focus-within - ein Klick setzt den Fokus auf
       das Feld, und mit :focus-within haette der zweite Klick es zwar wieder
       abgewaehlt, der Fokus es aber sofort wieder aufgeblasen. So greift der
       Fokus nur bei Tastaturbedienung. */
    .ueb-detail-medien .ueb-detail-galerie.ist-gross,
    .ueb-detail-medien .skz-rahmen.ist-gross,
    .ueb-detail-medien .ueb-detail-galerie:focus-visible,
    .ueb-detail-medien .skz-rahmen:focus-visible,
    .ueb-detail-galerie-var.ist-gross,
    .ueb-detail-galerie-var:focus-visible {
        transform: scale(2.5); position: relative; z-index: 5; cursor: zoom-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ueb-detail-medien .ueb-detail-galerie,
    .ueb-detail-medien .skz-rahmen,
    .ueb-detail-galerie-var { transition: none; }
}
.ueb-detail-fuss { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
@media (max-width: 760px) {
    .ueb-detail-box { padding: 16px; }
    .ueb-detail-galerie:has(img + img) { grid-template-columns: 1fr; }
}
.ueb-ex-desc { font-size: 0.82rem; color: rgba(var(--ink) / 0.8); margin: 0; line-height: 1.45; }
.ueb-ex-varianten { font-size: 0.78rem; color: rgba(var(--ink) / 0.72); margin: 0; font-style: italic; }
.ueb-ex-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ueb-tag { font-size: 0.68rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--glass-12); border: 1px solid var(--glass-22); color: rgba(var(--ink) / 0.72); }

.ueb-freigabe-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.ueb-freigabe-info h3 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 700; }
.ueb-freigabe-aktionen { display: flex; gap: 8px; flex: 0 0 auto; }

.ueb-plan-slot { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(var(--ink) / 0.12); }
.ueb-plan-slot:last-child { border-bottom: none; }
.ueb-plan-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tigers-yellow-ink); min-width: 44px; }
.ueb-plan-total { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(var(--ink) / 0.16); font-weight: 700; }

.ueb-stamm-liste { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ueb-stamm-liste li { display: flex; gap: 8px; align-items: center; }
.ueb-stamm-liste input { flex: 1; }
.ueb-stamm-neu { display: flex; gap: 8px; }
.ueb-stamm-neu input { flex: 1; }

/* z-index MUSS ueber der Detailansicht (.ueb-detail-scrim, 1100) und dem
   Zuschneide-Dialog (.ueb-crop-scrim, 1100) liegen. Mit 500 lag jede
   Meldung UNTER der schwarzen Dialogflaeche: "Uebung bearbeiten" meldete
   seinen Fehler in einen unsichtbaren Toast, fuer den Nutzer passierte
   also scheinbar gar nichts (2026-09-03). */
.ueb-toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--tigers-black); color: var(--tigers-yellow-text); font-weight: 600; font-size: 0.84rem; padding: 12px 20px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 1200; }
.ueb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Upload-Karte: drei gleichwertige Startpunkte als Kacheln (2026-09-11).
   Loest .ueb-upload-quellen/.ueb-upload-oder ab -- die beschrieben die alte
   Zeile "gelber Scan-Knopf | oder | rohes Dateifeld" und wurden nirgends
   sonst verwendet. */
.ueb-wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .ueb-wege { grid-template-columns: 1fr; } }

/* Eine Kachel. Gilt fuer <button> UND <label>, deshalb die Ruecksetzung von
   font und text-align: ein <button> erbt beides nicht. */
.ueb-weg {
    display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer;
    background: var(--glass-06); border: 1px solid var(--glass-22); border-radius: 14px;
    padding: 16px 14px; font: inherit; color: rgb(var(--ink)); position: relative;
}
/* Eigene :hover-Regel ist Pflicht, sonst greift die generische
   "button:hover { background: var(--bg-table-row-dark) }" (#f1f3f5, auch im
   Dunkelmodus fast weiss) und schlaegt die Klasse per Spezifitaet. */
.ueb-weg:hover { background: var(--glass-12); border-color: rgba(var(--ink) / 0.4); color: rgb(var(--ink)); }
.ueb-weg-primaer { border-color: var(--tigers-yellow); background: var(--glass-12); }
.ueb-weg-primaer:hover { border-color: var(--tigers-yellow); }
/* Der Fokusring haengt am Label, nicht am versteckten Feld. */
.ueb-weg:focus-within, .ueb-weg:focus-visible { outline: 2px solid var(--tigers-yellow); outline-offset: 2px; }

.ueb-weg-icon {
    width: 40px; height: 40px; border-radius: 11px; background: var(--glass-12);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; color: rgb(var(--ink)); flex: 0 0 auto;
}
.ueb-weg-primaer .ueb-weg-icon { background: var(--tigers-yellow); color: var(--tigers-black); }
/* Farbe explizit auf jedem Element, weil "* { color }" die Vererbung schlaegt. */
.ueb-weg-titel { font-weight: 700; font-size: 0.92rem; color: rgb(var(--ink)); }
.ueb-weg-text { font-size: 0.78rem; line-height: 1.45; color: rgba(var(--ink) / 0.7); }
/* Ergebniszeile unten buendig, damit die drei Kacheln gleich hoch wirken. */
.ueb-weg-fuss {
    margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem; color: rgba(var(--ink) / 0.55);
}
.ueb-weg-fuss i { color: rgba(var(--ink) / 0.55); }

/* Das echte <input type=file>: unsichtbar, aber im DOM und fokussierbar.
   display:none wuerde es der Tastatur entziehen. */
.ueb-weg-datei {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Ausklappzeile "Was passiert nach dem Hochladen?" */
.ueb-klapp { margin-top: 14px; border: 1px solid var(--glass-22); border-radius: 10px; background: var(--glass-06); }
.ueb-klapp > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; font-size: 0.8rem; color: rgba(var(--ink) / 0.8);
}
.ueb-klapp > summary::-webkit-details-marker { display: none; }
.ueb-klapp > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.7rem; margin-left: auto; color: rgba(var(--ink) / 0.55); }
.ueb-klapp[open] > summary::after { content: "\f077"; }
.ueb-klapp > .ueb-lead { margin: 0; padding: 0 12px 12px; }

/* Fusszeile der Upload-Karte (Scanner-Hinweis). Eigene Klasse statt
   .ueb-feldhinweis, weil deren Regel nur INNERHALB von .ueb-field gilt --
   ausserhalb faellt der Text auf Fliesstextgroesse zurueck. */
.ueb-kartenfuss {
    display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0;
    font-size: 0.74rem; line-height: 1.45; color: rgba(var(--ink) / 0.6);
}
.ueb-kartenfuss i { margin-top: 2px; color: rgba(var(--ink) / 0.6); flex: 0 0 auto; }

/* Bilder-Galerie im Korrektur-Formular (Übung erfassen) */
.ueb-medien-galerie { display: flex; flex-wrap: wrap; gap: 8px; }
.ueb-medien-item { position: relative; width: 132px; height: 108px; border-radius: 8px; overflow: hidden; border: 1px solid var(--glass-22); background: var(--glass-06); }
.ueb-medien-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ueb-medien-pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: rgba(var(--ink) / 0.72); font-size: 0.68rem; }
.ueb-medien-pdf i { font-size: 1.3rem; }
/* Die Knoepfe standen auf opacity:0 und kamen erst beim Ueberfahren mit der
   Maus. Auf Handy und Tablet gibt es kein Ueberfahren — dort waren Zuschneiden,
   Zuordnen und vor allem Loeschen unerreichbar (Meldung Maik 2026-08-17).
   Jetzt dauerhaft sichtbar als Leiste am unteren Bildrand, auf abgedunkeltem
   Grund, damit sie auf hellen Scans nicht verschwinden. */
.ueb-medien-aktionen { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; justify-content: center; padding: 4px 0; background: rgba(0,0,0,.45); }
.ueb-medien-btn { width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 0.74rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ueb-medien-btn:hover { background: rgba(0,0,0,.75); }
.ueb-medien-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 0.7rem; cursor: pointer; }

/* Ausschnitt/Crop-Dialog */
/* WICHTIG: [hidden] (display:none) und eine Klassen-Regel mit "display" haben
   dieselbe Spezifität — die Klassenregel gewinnt und würde [hidden] überschreiben,
   der Dialog stünde unsichtbar-aber-klickbar dauerhaft über der GANZEN Seite
   (so am 2026-07-29 gefunden: Klicks überall landeten auf den Dialog-Buttons).
   Deshalb :not([hidden]) statt der Klasse allein — nur DANN display:flex. */
.ueb-crop-scrim:not([hidden]) { display: flex; }
.ueb-crop-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1100; align-items: center; justify-content: center; padding: 20px; }
.ueb-crop-modal { background: var(--karte-bg); backdrop-filter: blur(20px); border: 1px solid var(--karte-border); border-radius: 16px; padding: 20px; max-width: min(90vw, 640px); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.ueb-crop-stage { position: relative; max-width: 100%; max-height: 60vh; overflow: auto; user-select: none; border: 1px solid var(--glass-22); border-radius: 10px; margin-bottom: 14px; }
.ueb-crop-stage img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.ueb-crop-auswahl { position: absolute; border: 2px dashed var(--tigers-yellow); background: color-mix(in srgb, var(--tigers-yellow) 18%, transparent); pointer-events: none; }

/* Kamera-Scan-Session (mehrere Fotos hintereinander, s. Uebungsdatenbank.php) */
.ueb-scan-modal { max-width: min(90vw, 520px); }
.ueb-scan-stage { position: relative; width: 100%; max-height: 55vh; overflow: hidden; border: 1px solid var(--glass-22); border-radius: 10px; margin-bottom: 12px; background: #000; }
.ueb-scan-stage video { display: block; width: 100%; max-height: 55vh; object-fit: contain; }
.ueb-scan-miniaturen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ueb-scan-thumb { position: relative; width: 72px; height: 60px; border-radius: 8px; overflow: hidden; border: 1px solid var(--glass-22); }
.ueb-scan-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ueb-scan-thumb-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 0.62rem; cursor: pointer; line-height: 1; }
#uebScanFertigBtn:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 760px) {
    .ueb-fields, .ueb-fields-4 { grid-template-columns: 1fr; }
    /* Datum/Von/Bis/Spieler sind kurze Felder – auf dem Handy zwei je Reihe
       statt vier untereinander. */
    .ueb-fields-kopf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Manueller Trainingsplan-Baukasten */
.ueb-plan-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 32px 8px 4px; border-bottom: 1px solid rgba(var(--ink) / 0.1); }
.ueb-plan-item:last-child { border-bottom: none; }
.ueb-plan-item .ueb-medien-x { top: 50%; transform: translateY(-50%); right: 6px; }
.ueb-plan-notiz-btn {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(var(--ink) / 0.3);
    background: var(--glass-08); color: rgb(var(--ink)); display: inline-flex;
    align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem;
    line-height: 1; padding: 0; margin: 0;
    flex: 0 0 auto; transition: background-color .15s, border-color .15s, color .15s;
}
.ueb-plan-notiz-btn:hover { background: var(--glass-16); border-color: rgba(var(--ink) / 0.5); color: rgb(var(--ink)); }
.ueb-plan-notiz-btn.hat { background: var(--tigers-yellow-22, rgba(253,238,23,0.22)); border-color: var(--tigers-yellow); color: var(--tigers-yellow-ink); }
.ueb-plan-notiz-btn i { display: flex; align-items: center; justify-content: center; line-height: 1; margin: 0; padding: 0; }

.ueb-abschnitt-add-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px dashed rgba(var(--ink) / 0.35); background: transparent;
    color: rgb(var(--ink)); border-radius: 6px; padding: 4px 9px;
    font-size: 0.74rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    flex: 0 0 auto; transition: background-color .15s, border-color .15s;
}
.ueb-abschnitt-add-btn:hover { background: var(--tigers-yellow-22, rgba(253,238,23,0.22)); border-color: var(--tigers-yellow); color: var(--tigers-yellow-ink); }
.ueb-abschnitt-add-btn i { color: var(--tigers-yellow-ink); }
/* Der Pausen-Knopf steht neben "Übung hinzufügen" und soll nicht wie ein
   zweiter davon aussehen: gedämpftes Symbol, gleiche Bauform. */
.ueb-abschnitt-add-pause i { color: rgba(var(--ink) / 0.6); }
.ueb-abschnitt-add-pause:hover i { color: var(--tigers-yellow-ink); }

/* Katalog-Modal (Übung in Abschnitt einfügen) */
.ueb-katalog-scrim:not([hidden]) {
    display: flex; align-items: flex-start; justify-content: center;
    position: fixed; inset: 0; z-index: 1150; background: rgba(0, 0, 0, 0.75);
    padding: 24px 16px; overflow-y: auto;
}
.ueb-katalog-box {
    position: relative; width: min(960px, 100%); border-radius: 16px; padding: 22px;
    background: var(--karte-bg); border: 1px solid var(--karte-border);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; gap: 14px;
    max-height: 85vh;
}
.ueb-katalog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ueb-katalog-header h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: rgb(var(--ink)); }
.ueb-katalog-body { overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 14px; }
.ueb-plan-item-nav { display: flex; flex-direction: column; gap: 2px; }
.ueb-plan-item-nav button { width: 24px; height: 20px; border: 1px solid var(--glass-22); background: var(--glass-08); color: rgb(var(--ink)); border-radius: 4px; cursor: pointer; font-size: 0.65rem; line-height: 1; }
.ueb-plan-item-nav button:disabled { opacity: 0.25; cursor: default; }
.ueb-plan-item-info { flex: 1 1 auto; min-width: 0; }
/* Quellenangabe einer Übung: bewusst klein und zurückgenommen — sie gehört zur
   Übung, soll aber den Ablauf nicht überlagern.
   BEWUSST NICHT mit `.content.ueb` davor: die Detailansicht (.ueb-detail-scrim)
   haengt am Seitenende AUSSERHALB von .content.ueb, dorthin wird der Inhalt nur
   geklont — eine so eingeschraenkte Regel greift dort nicht. Farben trotzdem
   explizit, sonst faerbt `* { color: var(--text-color) }` auf #333 um. */
.ueb-quelle {
    margin-top: 12px; padding-top: 8px;
    border-top: 1px solid rgba(var(--ink) / 0.12);
    font-size: 0.74rem; line-height: 1.5;
    color: rgba(var(--ink) / 0.72);
}
/* Ergebnisliste nach dem seitenweisen PDF-Import: je erkannter Uebung eine
   Zeile zum Oeffnen. Farben explizit, sonst greift die `* { color }`-Kette. */
.ueb-import-ergebnis { margin-top: 6px; }
.ueb-import-ergebnis b { color: rgb(var(--ink)); }
.ueb-import-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ueb-import-liste li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ueb-import-liste .ueb-lead { margin: 0; font-size: 0.76rem; }

/* Verwaltung der gespeicherten Trainingsplaene (Auswahl + Neu + Loeschen).
   Die Auswahl nimmt den freien Platz, die Knoepfe bleiben in ihrer Breite. */
.ueb-plan-verwaltung-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ueb-plan-verwaltung-zeile select { flex: 1 1 220px; min-width: 0; }
.ueb-plan-verwaltung .ueb-feldhinweis { display: block; margin-top: 4px; }

/* Kleiner Erklaertext unter einem Eingabefeld (z. B. bei "Quelle"). */
.ueb-field .ueb-feldhinweis { font-size: 0.72rem; line-height: 1.45; color: rgba(var(--ink) / 0.72); }
.ueb-field .ueb-feldhinweis b { color: rgba(var(--ink) / 0.85); }

/* Eigenerklärung bei Übungen aus fremder Vorlage (2026-09-09). Kästchen und
   Text nebeneinander, Text oben ausgerichtet, damit die zweite Zeile nicht
   unter dem Kästchen klebt. */
.ueb-eigenerklaerung { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.ueb-eigenerklaerung input { margin-top: 2px; flex: none; }

.ueb-quelle .l {
    display: block; font-size: 0.65rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(var(--ink) / 0.5); margin-bottom: 2px;
}
.ueb-quelle a { color: var(--tigers-yellow-text); text-decoration: none; white-space: nowrap; }
.ueb-quelle a:hover { text-decoration: underline; }

.ueb-plan-item-info b { display: block; font-size: 0.88rem; }
.content.ueb .ueb-plan-item-info b { color: rgb(var(--ink)); }
.ueb-plan-item-dauer { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: rgba(var(--ink) / 0.7); white-space: nowrap; }
.ueb-plan-item-dauer input { width: 56px; background: var(--bg-flaeche); color: var(--text-input); border: 1px solid rgba(var(--ink) / 0.35); border-radius: 8px; padding: 6px 8px; text-align: center; }
.ueb-plan-add-btn { width: 100%; justify-content: center; display: flex; align-items: center; gap: 6px; }

/* Abschnittszeile im Plan: hebt sich klar von den Übungszeilen ab */
.ueb-plan-abschnitt { background: var(--tigers-yellow-06, rgba(253,238,23,0.06)); border-left: 3px solid var(--tigers-yellow); border-radius: 6px; margin-top: 8px; }
.ueb-plan-abschnitt .ueb-plan-item-dauer b { color: var(--tigers-yellow-ink); font-size: 0.82rem; }
.ueb-plan-abschnitt-titel {
    width: 100%; background: transparent; border: none; border-bottom: 1px dashed rgba(var(--ink) / 0.3);
    color: rgb(var(--ink)); font-weight: 800; font-size: 0.9rem; padding: 2px 0;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.ueb-plan-abschnitt-titel:focus { outline: none; border-bottom-color: var(--tigers-yellow); }

/* Uhrzeit je Zeile. Reine Anzeige, deshalb kein Eingabefeld und kein Rahmen:
   Sie folgt aus Planbeginn, Reihenfolge und Dauern. Gleiche Ziffernbreite,
   damit die Spalte bei jeder Zeile an derselben Stelle steht. */
.ueb-plan-uhr {
    flex: 0 0 auto; min-width: 46px; font-variant-numeric: tabular-nums;
    font-size: 0.82rem; font-weight: 700; color: rgba(var(--ink) / 0.78); line-height: 1.2;
}
/* 0.62 statt 0.5: gemessen kam die Endzeit auf der Zeilenflaeche im
   Dunkelmodus auf 4,12:1 und lag damit unter den geforderten 4,5:1
   (nachgemessen 2026-09-17). */
.ueb-plan-uhr-bis { display: block; font-weight: 500; font-size: 0.72rem; color: rgba(var(--ink) / 0.62); }
/* Am Abschnitt einzeilig und groesser: Sie ist die Orientierung beim
   Ueberfliegen, nicht eine Angabe unter vielen. */
.ueb-plan-uhr-abschnitt {
    min-width: 104px; font-size: 0.95rem; letter-spacing: 0.01em;
    color: var(--tigers-yellow-ink); white-space: nowrap;
}
/* Ende des Plans in den Kopfdaten: Ergebnis, kein Eingabefeld. Deshalb ohne
   Rahmen und ohne Feldhoehe - es soll nicht aussehen, als koenne man es
   anfassen (die alten Abschnitts-Zeitfelder taten genau das). */
.ueb-plan-ende {
    display: inline-block; padding: 2px 0; font-variant-numeric: tabular-nums;
    font-size: 0.95rem; font-weight: 700; color: rgb(var(--ink));
}

/* Pausenzeile: Unterbrechung, kein Kapitelanfang. Deshalb gestrichelter Rand
   und gedämpfte Farbe statt des gelben Bands der Abschnittszeile. */
.ueb-plan-pause {
    background: rgba(var(--ink) / 0.04);
    border-left: 3px dashed rgba(var(--ink) / 0.35);
    border-radius: 6px;
}
.ueb-plan-pause-symbol { flex: 0 0 auto; font-size: 1rem; color: rgba(var(--ink) / 0.6); }
.ueb-plan-pause .ueb-plan-item-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ueb-plan-pause-art {
    flex: 0 0 auto; background: var(--glass-08); color: rgb(var(--ink));
    border: 1px solid rgba(var(--ink) / 0.3); border-radius: 8px;
    font-size: 0.82rem; font-weight: 700; padding: 4px 8px;
}
.ueb-plan-pause-titel {
    flex: 1 1 200px; min-width: 0; background: transparent; border: none;
    border-bottom: 1px dashed rgba(var(--ink) / 0.3);
    color: rgb(var(--ink)); font-size: 0.88rem; padding: 3px 0;
}
.ueb-plan-pause-titel:focus { outline: none; border-bottom-color: var(--tigers-yellow); }

/* Rahmen und Plan in der Kopfleiste. BEWUSST ohne Warnfarbe: Ein Plan, der
   vor der Hallenzeit anfaengt oder darueber hinauslaeuft, ist bei uns normal
   (Laufeinheit, Tabata am Seitenrand) und kein Fehler. */
#uebPlanRahmenWrap { color: rgba(var(--ink) / 0.78); }

/* Anfasser zum Ziehen (ersetzt die ▲▼-Knöpfe) */
.ueb-plan-griff {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 26px; align-self: stretch; cursor: grab; touch-action: none;
    color: rgba(var(--ink) / 0.72);
}
.ueb-plan-griff:hover { color: var(--tigers-yellow-ink); }
.ueb-plan-griff i { font-size: 0.95rem; }
.ueb-plan-item.ueb-zieht { opacity: 0.45; }
.ueb-plan-item.ueb-zieht .ueb-plan-griff { cursor: grabbing; }
/* Einfügemarke, die beim Ziehen mitwandert */
.ueb-plan-marker { height: 3px; margin: 2px 0; border-radius: 2px; background: var(--tigers-yellow); }

/* Notiz je Übung */
.ueb-plan-notiz-btn {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--glass-22); background: var(--glass-08); color: rgba(var(--ink) / 0.7);
    font-size: 0.75rem; line-height: 1;
}
.ueb-plan-notiz-btn:hover { background: var(--tigers-yellow); color: var(--tigers-black); border-color: var(--tigers-yellow); }
.ueb-plan-notiz-btn.hat { color: var(--tigers-yellow-ink); border-color: var(--tigers-yellow); }
.ueb-plan-notiz {
    width: 100%; margin-top: 6px; 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;
}