/* 08-spielerorganisation-mannschaften.css — Teil der Aufteilung von style.css (2026-08-10).
   Urspruenglich Zeilen 4553-5117 der einen Datei. Spielerorganisation (Scope .so), Mannschaften-Orga (Scope .mo), News-Editor.
   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. */

/* =====================================================================
 * SPIELERORGANISATION (so-*) – Liste + Spielerprofil im Register-Layout
 * ===================================================================== */

/* Zähler rechts in der Abschnitts-Überschrift */
.ad-sec .cnt { margin-left: auto; font-size: 0.68rem; color: var(--glass-60);
    letter-spacing: 0; text-transform: none; font-weight: 500; }

/* --- Buttons / Felder ------------------------------------------------ */
.so-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--tigers-yellow, #fdee17);
    color: var(--tigers-black); border: none; border-radius: 8px; padding: 8px 14px; font-size: 0.78rem;
    font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.so-btn:hover { filter: brightness(1.08); }
.so-btn-ghost { background: var(--glass-08); border: 1px solid var(--glass-22);
    color: rgb(var(--ink)); font-weight: 500; }
.so-btn-mini { padding: 5px 10px; font-size: 0.72rem; }
.so-btn-del { background: var(--glass-08); border: 1px solid var(--glass-22);
    color: var(--glass-75); padding: 6px 9px; }
.so-btn-del:hover { background: var(--danger-red-tint); color: rgb(var(--ink)); filter: none; }

.so-inp { background: var(--glass-bg); border: 1px solid var(--glass-22);
    border-radius: 8px; color: rgb(var(--ink)); padding: 7px 10px; font-size: 0.8rem; font-family: inherit;
    width: 100%; box-sizing: border-box; }
.so-inp:focus { outline: none; border-color: var(--tigers-yellow, #fdee17); }
.so-inp[readonly] { background: var(--glass-06); color: var(--glass-60); }
.so-inp option { background: var(--tigers-black); color: var(--white); }
.so-num { text-align: right; font-variant-numeric: tabular-nums; }
.so-sel { background: var(--glass-bg); border: 1px solid var(--glass-22);
    border-radius: 10px; color: rgb(var(--ink)); padding: 8px 11px; font-size: 0.8rem; font-family: inherit; }
.so-sel option { background: var(--tigers-black); color: var(--white); }

.so-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.so-fld label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--glass-45); font-weight: 700; }
.so-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

/* --- Liste ----------------------------------------------------------- */
.so-person { display: flex; align-items: center; color: rgb(var(--ink)); text-decoration: none; }
.so-person:hover b { color: var(--tigers-yellow-text, #fdee17); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }
/* Spalte "Login" (2026-09-28): Symbol statt Pille hinter dem Namen, filterbar */
.so-liste .so-login { width: 90px; text-align: center; white-space: nowrap; }
td.so-login i { font-size: 1.05rem; }
.so-login-ja { color: var(--ok-icon); }
.so-login-nein { color: rgba(var(--ink) / 0.45); }
.so-liste-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; margin-right: 8px;
    vertical-align: middle; flex-shrink: 0; border: 1px solid var(--glass-22); }
.so-team { display: inline-block; background: var(--glass-08); border: 1px solid var(--glass-border);
    border-radius: 99px; padding: 3px 10px; font-size: 0.74rem; margin: 2px 4px 2px 0; }
.so-team em { font-style: normal; color: var(--tigers-yellow-text, #fdee17); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); font-size: 0.66rem;
    margin-left: 5px; font-weight: 700; }
/* --glass-40 ist eine Flaechen-Transluzenz (im Hellmodus schwarz mit 40 %)
   und als Schriftfarbe zu blass: 2,23:1 (2026-08-23 gemessen). */
.so-leer { color: rgba(var(--ink) / 0.72); font-size: 0.78rem; }

/* --- Profilkopf ------------------------------------------------------ */
.so-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.so-av { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.so-av-ph { background: var(--tigers-yellow, #fdee17); color: var(--tigers-black); font-weight: 900;
    font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.so-head-txt { min-width: 0; }
.so-head-txt h2 { margin: 0 !important; font-size: 1.3rem !important; }
.so-meta { color: var(--glass-60); font-size: 0.78rem; margin-top: 3px; }
.so-rollen { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.so-rollen .ad-pill i { margin-right: 4px; }
.so-fix { background: var(--tigers-yellow-16); color: var(--tigers-yellow-text, #fdee17); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline);
    border-radius: 99px; padding: 2px 10px; font-size: 0.66rem; font-weight: 800; }
.so-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- Reiter ---------------------------------------------------------- */
.so-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--glass-16);
    margin: 18px 0 0; flex-wrap: wrap; }
.so-tabs button, .so-tabs a { text-decoration: none; background: none; border: none; color: var(--glass-60); font-family: inherit;
    font-size: 0.83rem; padding: 11px 15px; cursor: pointer; border-bottom: 3px solid transparent;
    margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.so-tabs button:hover, .so-tabs a:hover { color: rgb(var(--ink)); }
.so-tabs button.on, .so-tabs a.on { color: var(--tigers-yellow-text, #fdee17); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); border-bottom-color: var(--tigers-yellow, #fdee17);
    font-weight: 700; }
.so-tabs .so-tabs-rechts { margin-left: auto; }
.so-tabs + .ad-lead { margin-top: 14px; }
.so-tabs button i, .so-tabs a i { font-size: 0.8rem; }
.so-cnt { background: var(--glass-bg-strong); border-radius: 99px; padding: 1px 7px;
    font-size: 0.62rem; font-weight: 800; }
.so-tabs button.on .so-cnt { background: var(--tigers-yellow-22); }

.so-pane { display: none; padding-top: 18px; }
.so-pane.on { display: block; }

/* --- Tabellen im Profil ---------------------------------------------- */
.content.ad table.so-tab { border: none; border-radius: 0; margin-bottom: 0; }
.content.ad .so-tab th { background: transparent; color: var(--glass-45); font-size: 0.66rem;
    letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; padding: 0 8px 8px;
    border-bottom: 1px solid var(--glass-16); }
.content.ad .so-tab td { padding: 9px 8px; border-bottom: 1px solid var(--glass-08);
    color: var(--glass-90); vertical-align: middle; }
.content.ad .so-tab tr:last-child td { border-bottom: none; }
.so-tab .so-empty td { color: var(--glass-40); font-size: 0.8rem; padding: 16px 8px; }
.so-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px;
    vertical-align: middle; }
.so-v-pill { margin-left: 7px; vertical-align: middle; }

/* --- Anlege-Leiste --------------------------------------------------- */
.so-add { background: var(--tigers-yellow-06); border: 1px dashed var(--tigers-yellow-35);
    border-radius: 12px; padding: 12px; margin-top: 14px; display: grid; gap: 10px;
    grid-template-columns: 1.4fr 1fr 0.9fr 0.9fr auto; align-items: end; }
.so-add-v { grid-template-columns: 1.6fr 1fr 0.9fr 0.9fr auto; }
.so-add-w { grid-template-columns: 1fr 1.3fr 0.9fr 0.9fr 0.7fr 1fr auto; }
/* Zuordnung anlegen: seit 01.08.2026 mit eigener Saison-Spalte, weil die
   Saison-Auswahl oben rechts nur noch filtert und leer sein darf. */
.so-add-z { grid-template-columns: 1.4fr 0.9fr 1fr 0.5fr 0.8fr 0.9fr 0.9fr auto; }

/* --- Summe / Hinweise / Meldung -------------------------------------- */
.so-summe { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 12px 14px; border-top: 1px solid var(--glass-22);
    font-size: 0.86rem; }
.so-summe span { color: var(--glass-60); font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 700; }
.so-summe b { color: rgb(var(--ink)); font-size: 1.05rem; font-weight: 900; }
.so-hint { margin: 12px 0 0 !important; font-size: 0.75rem !important; }

/* --- Dialog "Person ohne Login anlegen" --------------------------------
   Bewusst KEINE display-Regel an .so-dlg: sie wuerde das [open]-Verhalten
   des <dialog> aushebeln und ihn dauerhaft zeigen. */
.so-dlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
    padding: 18px; border: 1px solid var(--karte-border); border-radius: 12px;
    background: var(--bg-flaeche); color: rgb(var(--ink)); }
.so-dlg h2 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 900; }
.so-dlg-treffer { margin-top: 14px; }
.so-dlg-treffer-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; margin-top: 6px; border: 1px solid var(--glass-22); border-radius: 10px;
    background: var(--glass-06); font-size: 0.82rem; }
.so-dlg-fuss { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.so-msg { display: none; margin-top: 14px; border-radius: 10px; padding: 9px 13px; font-size: 0.8rem;
    font-weight: 600; }
.so-msg.on { display: block; }
.so-msg.ok { background: var(--ok-bg); color: var(--ok-text); border: 1px solid var(--ok-border); }
.so-msg.err { background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border); }

@media (max-width: 900px) {
    .so-add, .so-add-v, .so-add-w, .so-add-wi, .so-add-z { grid-template-columns: 1fr 1fr; }
    .so-grid2 { grid-template-columns: 1fr; }
    .so-head-right { margin-left: 0; width: 100%; }
}

/* --- Vertragsinhalte am Vertrag (Accordion, 01.08.2026) ---------------
   Loest den frueheren Reiter "Vertragswerte" ab: die Werte haengen jetzt
   direkt an ihrem Vertrag und werden per Button aufgeklappt. Die
   Detail-Zeile ist eine normale <tr> in derselben Tabelle, deshalb
   display:table-row (nicht block) beim Aufklappen.
   --------------------------------------------------------------------- */
.so-doc-cell { display: flex; align-items: center; gap: 6px; }
.so-doc-form { display: inline-flex; }
.so-doc-form label.so-btn { cursor: pointer; margin: 0; }

/* Felder fuellen ihre Spalte, sonst bleiben Bezeichnung und Art schmal,
   waehrend rechts Platz verschenkt wird. */
.content.ad .so-tab .so-inp { width: 100%; }
/* Feste Spaltenbreiten: die Breiten aus <th> gelten exakt, der Rest geht an
   die Bezeichnung. Ohne das verteilt der Browser nach Inhalt. */
.content.ad table.so-tab-vertraege { table-layout: fixed; width: 100%; }
/* Datumsfelder: der native Kalender-Knopf frisst Platz, deshalb hier schmaler
   gepolstert – sonst wird "01.07.2026" abgeschnitten. */
.content.ad .so-tab input[type="date"].so-inp { padding-left: 7px; padding-right: 4px; }

.so-akt-cell { text-align: right; white-space: nowrap; }
.so-akt-cell .so-btn + .so-btn { margin-left: 6px; }
.so-btn-inhalte { padding-left: 9px; padding-right: 9px; }

.so-v-details-row { display: none; }
.so-v-details-row.on { display: table-row; }
.content.ad .so-v-details-row > td { padding: 4px 8px 14px; border-bottom: 1px solid var(--glass-08); }

.so-v-details-box { border: 1px solid var(--glass-16); border-radius: 12px;
    padding: 12px 14px; background: var(--glass-06); }
.so-v-details-kopf { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 8px; font-weight: 700; font-size: 0.86rem; }
/* Farben hier bewusst auf den <span> selbst und nicht auf den Eltern-Container:
   `* { color: var(--text-color) }` weiter oben schlaegt sonst die Vererbung. */
.so-v-details-titel { color: rgb(var(--ink)); }
.so-v-details-titel i { color: var(--tigers-yellow-text); margin-right: 6px; }
.so-v-details-id { font-weight: 600; font-size: 0.72rem; color: var(--glass-45);
    text-transform: uppercase; letter-spacing: 0.05em; }

/* Art-Zelle: der Farbpunkt darf die Auswahl nicht nach rechts schieben,
   sonst steht sie nicht mehr unter der Spaltenueberschrift. */
.content.ad .so-tab-werte td.so-w-art-td { display: flex; align-items: center; gap: 7px; }
/* Ueberschrift um Punkt + Abstand einruecken, damit sie ueber dem Feld steht. */
.content.ad .so-tab-werte th.so-w-art-th { padding-left: 23px; }
.so-tab-werte td.so-w-art-td .so-dot { margin-right: 0; flex: 0 0 auto; }
.so-tab-werte td.so-w-art-td .so-inp { flex: 1 1 auto; min-width: 0; }

/* Anlege-Leiste innerhalb des Accordions bzw. unter den freien Werten:
   wie .so-add-w, aber ohne die Spalte "Vertrag". */
.so-add-wi { grid-template-columns: 1.2fr 0.9fr 0.9fr 0.7fr 1fr auto; }

.so-frei { margin-top: 26px; padding-top: 6px; border-top: 1px solid var(--glass-16); }

/* ===== News: Titel/Body-Struktur (DB-basiert) + „Alle News"-Button ===== */
.changelog-card .cl-title {
    font-size: 0.95rem; font-weight: 800; color: var(--text-color);
    margin-bottom: 4px; line-height: 1.35;
}
.changelog-card .cl-body { font-size: 0.9rem; color: var(--text-color); line-height: 1.5; }
.changelog-card .cl-body p { margin: 0 0 6px; }
.changelog-card .cl-body p:last-child { margin-bottom: 0; }
.changelog-card .cl-body ul,
.changelog-card .cl-body ol { margin: 4px 0 6px 1.25em; padding: 0; }
.changelog-card .cl-body li { margin: 2px 0; }

/* Glass-Startseite: Titel + Body kräftig weiß (wie zuvor die <p>) */
.page-home .changelog-card .cl-title,
.page-home .changelog-card .cl-body,
.page-home .changelog-card .cl-body strong,
.page-home .changelog-card .cl-body em { color: var(--on-glass); }

/* „Alle News" / Zurück – gelber Button */
.changelog-more {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 12px; padding: 9px 16px;
    background: var(--tigers-yellow); color: var(--tigers-black);
    border-radius: 10px; font-weight: 700; font-size: 0.88rem;
    text-decoration: none; border: none; cursor: pointer;
}
.changelog-more:hover { filter: brightness(0.95); }
.changelog-more i { color: var(--tigers-black); }

/* ===== Admin: News-Editor (RTE) + Liste ===== */
.ad-rte-toolbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ad-rte-toolbar button {
    border: 1px solid var(--border-light); background: var(--bg-flaeche);
    border-radius: 6px; padding: 6px 11px; cursor: pointer;
    font-size: 0.85rem; color: var(--text-color); min-width: 34px;
}
.ad-rte-toolbar button:hover { background: var(--darker-background); }
.ad-rte {
    min-height: 130px; border: 1px solid var(--border-light); border-radius: 8px;
    padding: 10px 12px; background: var(--bg-flaeche); color: var(--text-color);
    font-size: 0.9rem; line-height: 1.5;
}
.ad-rte:focus { outline: 2px solid var(--tigers-yellow); }
.ad-rte ul, .ad-rte ol { margin: 4px 0 6px 1.25em; }

.ad-news-list { display: flex; flex-direction: column; gap: 10px; }
.ad-news-item {
    border: 1px solid var(--border-light); border-radius: 8px;
    padding: 12px 14px; background: var(--bg-flaeche);
}
.ad-news-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ad-news-date {
    font-size: 0.72rem; font-weight: 700; color: var(--text-placeholder);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.ad-news-title { font-size: 0.92rem; font-weight: 800; color: var(--text-color); }
.ad-news-body { font-size: 0.86rem; color: var(--text-color); line-height: 1.45; }
.ad-news-body p { margin: 0 0 4px; }
.ad-news-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ad-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--border-light); background: var(--bg-flaeche);
    color: var(--text-color); border-radius: 8px; padding: 7px 13px;
    font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.ad-btn-ghost:hover { background: var(--darker-background); }
.ad-btn-del {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--danger-red, #c0392b); background: transparent;
    color: var(--danger-red, #c0392b); border-radius: 8px; padding: 7px 13px;
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.ad-btn-del:hover { background: rgba(192,57,43,0.08); }

/* =====================================================================
 * MANNSCHAFTEN-ORGA – Team-Hub (Vorschlag B, 2026-07-17)
 * Scope .mo-. Links Mannschafts-Karten, rechts der Kader.
 *
 * ACHTUNG: der Universalselektor setzt `font-size: 1rem` DIREKT auf jedes
 * Element. Verschachtelte <span>/<b>/<em> brauchen darum explizit
 * `font-size: inherit`, sonst werden sie 16px gross statt der Groesse
 * des umgebenden Textes.
 * ================================================================== */

.mo-filter { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.mo-filter .so-fld { min-width: 200px; }

.mo-status { font-size: 0.78rem; font-weight: 700; color: var(--glass-60); padding-bottom: 9px; }
.mo-status.ok  { color: var(--ok-icon); }
.mo-status.err { color: var(--err-icon); }

/* Mannschaftsauswahl OBEN, Kader darunter über die volle Breite: so bleibt für
   die Kaderliste die ganze Spaltenbreite übrig (lange Namen + Funktion + Von/Bis
   ohne Gedränge), und die Karten nutzen die Breite als Reihe statt als schmale
   Spalte. */
.mo-hub { display: grid; grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.mo-detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------- Mannschaftsliste links (Variante B, 2026-09-28) ---------- */
.mo-liste {
    position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    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: 10px;
}
.mo-fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.mo-fchip {
    min-height: 30px; padding: 3px 10px; border-radius: 99px; cursor: pointer;
    background: transparent; border: 1px solid var(--glass-22);
    color: rgb(var(--ink)); font-size: 0.72rem; font-weight: 600;
}
.mo-fchip:hover { border-color: var(--tigers-yellow-50); }
.mo-fchip.on { background: var(--tigers-yellow-16); border-color: var(--tigers-yellow-40); }
.mo-gruppe {
    margin: 10px 8px 2px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--glass-55);
}
.mo-li {
    display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px;
    border: 1px solid transparent; border-radius: 9px;
    text-decoration: none; color: rgb(var(--ink)); font-size: 0.84rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.mo-li:hover { background: var(--glass-16); }
.mo-li.on { background: var(--tigers-yellow-12); border-color: var(--tigers-yellow); font-weight: 700; }
.mo-li[hidden], .mo-gruppe[hidden] { display: none; }
.mo-li-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: inherit; font-weight: inherit; }
.mo-li-warn { color: var(--err-icon); font-size: 0.8rem; }

.mo-cnt {
    background: var(--glass-12); border: 1px solid var(--glass-22);
    color: var(--glass-75); font-size: 0.68rem; font-weight: 800;
    border-radius: 99px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.mo-cnt.y    { background: var(--tigers-yellow-16); border-color: var(--tigers-yellow-40); color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }
.mo-cnt.null { background: var(--err-bg-strong); border-color: var(--err-border-strong); color: var(--err-text); }


/* Sportliche Leitung / Zuständigkeit (2026-07-22).
   Chips bewusst im Stil der Trainer-Chips aus der Hallenbelegung, damit beide
   Zuordnungen als dasselbe Konzept lesbar sind. */
/* .mo-team ist die Karte "Trainerteam" (2026-08-07). Sie teilt sich Aufbau
   und Chip-Optik mit der sportlichen Leitung darunter — es sind zwei
   Zuordnungen derselben Art. Eigener Klassenname statt .mo-leitung an beiden
   Karten, damit im Markup steht, was gemeint ist. */
.mo-leitung, .mo-team { display: flex; flex-direction: column; gap: 10px; }
.mo-leitung-liste { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 30px; }
.mo-leitung-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tigers-yellow-16); border: 1px solid var(--tigers-yellow-40); color: rgb(var(--ink)); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.82rem; font-weight: 600; }
.mo-leitung-chip i { color: var(--tigers-yellow-text); font-size: 0.75rem; }
.mo-leitung-add { max-width: 320px; }
/* Trainerteam: Funktion + Person nebeneinander (2026-09-28) */
.mo-trainer-add { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-trainer-funktion { max-width: 150px; }

/* ---------- Avatare ---------- */
.mo-av {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
    background: var(--glass-bg-strong); border: 1px solid var(--glass-22);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.62rem; font-weight: 800; color: var(--on-glass);
}
.mo-av.xs { width: 24px; height: 24px; font-size: 0.55rem; }

/* ---------- Kader ---------- */
.mo-roster { min-width: 0; }
.mo-roster-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.mo-h3 { display: flex; align-items: center; gap: 9px; color: rgb(var(--ink)); font-size: 1rem; font-weight: 700; margin: 0; }

.mo-person { display: inline-flex; align-items: center; gap: 9px; color: rgb(var(--ink)); text-decoration: none; min-width: 0; }
.mo-person b { font-size: 0.84rem; font-weight: 600; }
.mo-person:hover b { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }

.mo-tab td { vertical-align: middle; }
/* Spaltenbreiten (vorher Inline-Styles 175/150/150/70). Seit der Liste links
   ist die Spalte schmaler, der Name braucht den Rest (2026-09-28). */
.mo-tab .mo-col-funktion { width: 140px; }
.mo-tab .mo-col-datum { width: 128px; }
.mo-tab .mo-col-aktion { width: 64px; text-align: right; white-space: nowrap; }
.mo-tab .so-inp { width: 100%; }
.mo-leer td { color: var(--glass-40); font-size: 0.82rem; font-style: italic; text-align: center; padding: 22px 0; }
.mo-hint { margin-top: 12px; }

/* ---------- Hinzufuegen / Typeahead ---------- */
.mo-add { position: relative; margin: 14px 0 4px; }
.mo-add-in { display: flex; align-items: center; gap: 9px;
    background: var(--glass-bg); border: 1px solid var(--tigers-yellow-45);
    border-radius: 9px; padding: 0 12px; }
.mo-add-in i { color: var(--tigers-yellow-text); -webkit-text-stroke: 0.4px var(--tigers-yellow-outline); text-shadow: 0 0 1px var(--tigers-yellow-outline); }
.mo-add-in .so-inp { border: none; background: transparent; padding: 9px 0; }
.mo-add-in .so-inp:focus { outline: none; }

.mo-ta {
    position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 30;
    background: var(--tigers-black); border: 1px solid var(--tigers-yellow-35);
    border-radius: 10px; padding: 5px; box-shadow: 0 12px 30px var(--glass-black-55);
    display: flex; flex-direction: column; gap: 3px; max-height: 320px; overflow-y: auto;
}
.mo-ta[hidden] { display: none; }
.mo-ta-row {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 8px; border-radius: 7px; cursor: pointer;
    background: transparent; border: none; text-align: left; font-family: inherit;
}
.mo-ta-row:hover, .mo-ta-row:focus-visible { background: var(--tigers-yellow-12); outline: none; }
.mo-ta-row b  { color: var(--white); font-size: 0.82rem; font-weight: 600; }
.mo-ta-row em {
    font-style: normal; margin-left: auto; font-size: 0.68rem; color: var(--glass-55);
    background: var(--glass-08); border: 1px solid var(--glass-16);
    border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
.mo-ta-row em.none { background: transparent; border: none; color: var(--warn-text); padding: 0; }
.mo-ta-leer { padding: 11px 9px; font-size: 0.78rem; color: var(--glass-50); }

/* Schmale Bildschirme: Liste ueber der Bearbeitung, nicht klebend. */
@media (max-width: 900px) {
    .mo-hub { grid-template-columns: minmax(0, 1fr); }
    .mo-liste { position: static; max-height: 320px; }
}

/* =====================================================================
   Hilfe / Bedienungsanleitung (Prefix hi-)
   Hinweis: die globale Regel `* { font-size: 1rem }` überschreibt die
   Vererbung, deshalb steht an jeder Überschrift eine explizite Größe.
   ===================================================================== */

/* .content>div bekommt global eine Box — für das Hilfe-Layout neutralisieren */
.content>.hi-layout {
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
}

.hi-kopf-sub { font-size: .95rem; color: var(--text-color); }

.hi-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* --- Kapitelliste ------------------------------------------------- */
.hi-nav {
    position: sticky;
    top: calc(var(--navbar-height) + 12px);
    background: var(--darker-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1rem;
}
.hi-nav-titel {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-placeholder);
    margin-bottom: .6rem;
}
.hi-nav ul { list-style: none; margin: 0; padding: 0; }
.hi-nav>ul>li { margin-bottom: .3rem; }
.hi-nav a {
    display: block;
    padding: .45rem .6rem;
    border-radius: var(--radius-small);
    color: var(--text-dark);
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
}
.hi-nav a:hover { background: var(--overlay-light); }
.hi-nav a.hi-nav-aktiv {
    background: var(--tigers-yellow);
    border-left-color: var(--tigers-black);
    font-weight: 700;
}
.hi-nav-toc { margin: .25rem 0 .5rem .4rem; border-left: 1px solid var(--border-light); }
.hi-nav-toc a { font-size: .82rem; color: var(--text-color); padding: .3rem .6rem; }

/* --- Kapitelinhalt ------------------------------------------------ */
.hi-artikel {
    background: var(--background-color);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    max-width: 70ch;
}
/* .hi-artikel davor, sonst gewinnt die frühere Regel `.content h2` */
.hi-artikel .hi-artikel-titel {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    padding: 0 0 .75rem;
    margin: 0 0 1rem;
    border-bottom: 2px solid var(--tigers-yellow);
}
.hi-artikel p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.65; color: var(--text-color); }
.hi-artikel .hi-h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 2.25rem 0 .75rem;
    padding: 0;
    border: none;
    scroll-margin-top: calc(var(--navbar-height) + 16px);
}
.hi-artikel .hi-h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 1.5rem 0 .5rem;
    scroll-margin-top: calc(var(--navbar-height) + 16px);
}
.hi-artikel .hi-h4 { font-size: .98rem; font-weight: 700; margin: 1.2rem 0 .4rem; }
.hi-code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .88rem;
    background: var(--bg-table-row-dark);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: .1em .4em;
}
.hi-trenner { border: none; border-top: 1px solid var(--border-light); margin: 2rem 0; }

/* Ankerlink erst beim Überfahren der Überschrift zeigen */
.hi-anker { color: var(--border-light); text-decoration: none; opacity: 0; font-weight: 400; }
.hi-h2:hover .hi-anker, .hi-h3:hover .hi-anker { opacity: 1; }

.hi-liste { margin: 0 0 1rem 1.25rem; padding: 0; }
.hi-liste li { margin-bottom: .5rem; line-height: 1.6; font-size: 1rem; }
.hi-liste li .hi-figur { margin: .75rem 0; }

/* --- Screenshots -------------------------------------------------- */
.hi-figur { margin: 1.25rem 0; }
.hi-figur img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-small);
    box-shadow: var(--shadow);
}
.hi-figur figcaption {
    font-size: .84rem;
    color: var(--text-placeholder);
    margin-top: .5rem;
    font-style: italic;
}
.hi-platzhalter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 120px;
    padding: 1.5rem;
    border: 2px dashed var(--border-light);
    border-radius: var(--radius-small);
    background: var(--darker-background);
    color: var(--text-placeholder);
    font-size: .88rem;
}
.hi-platzhalter i { font-size: 1.5rem; }

/* --- Callouts ----------------------------------------------------- */
.hi-callout {
    margin: 1.25rem 0;
    padding: .9rem 1.1rem;
    border-radius: var(--radius-small);
    border-left: 4px solid var(--border-gray);
    background: var(--darker-background);
}
.hi-callout p { margin: 0; font-size: .95rem; }
.hi-callout-titel { font-weight: 700; font-size: .95rem; margin-bottom: .35rem; color: var(--text-dark); }
.hi-callout-tipp    { border-left-color: var(--tigers-yellow); background: #fffdf0; }
.hi-callout-hinweis { border-left-color: var(--primary-blue); background: #f2f7fd; }
.hi-callout-achtung { border-left-color: var(--danger-red); background: #fdf3f3; }

/* --- Tabellen ----------------------------------------------------- */
.hi-tabelle { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .92rem; }
.hi-tabelle th, .hi-tabelle td {
    border: 1px solid var(--border-light);
    padding: .55rem .7rem;
    text-align: left;
    vertical-align: top;
}
.hi-tabelle th { background: var(--bg-table-header); font-weight: 700; font-size: .88rem; }

/* --- Fragezeichen in der Navigation ------------------------------- */
.nav-hilfe-link i { font-size: 1.05rem; }

/* --- Mobil -------------------------------------------------------- */
@media (max-width: 1024px) {
    .hi-layout { grid-template-columns: 1fr; }
    .hi-nav { position: static; }
    .hi-nav-toc { display: none; }
    .hi-artikel { padding: 1.1rem; }
}

/* Kaderpflege (2026-09-27): Trikotnummer im Mannschafts-Chip, Trainer-Dialog */
.so-team .so-nr { font-weight: 900; margin-right: 2px; }
/* hidden muss gegen .so-grid2 { display: grid } gewinnen (Trainer-Dialog, Stammdaten) */
#skStamm[hidden] { display: none; }
#skStammHinweis { margin: 4px 0 0; }
.sk-zeile { border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 12px 12px; margin: 12px 0 0; }
.sk-zeile legend { padding: 0 6px; font-size: 0.78rem; font-weight: 800; }
.sk-raus { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.8rem; cursor: pointer; }
/* Liste importieren (2026-09-27). Die Tabelle scrollt in ihrem Kasten,
   nie die Seite (Handybreite). */
.ki-dlg { width: min(1100px, calc(100vw - 32px)); }
.ki-dlg .ad-hinweis strong { font-size: inherit; }
.ki-quelle { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 10px; }
.ki-datei { cursor: pointer; }
.ki-datei input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ki-datei:focus-within { outline: 2px solid var(--tigers-yellow, #fdee17); outline-offset: 2px; }
.ki-wrap { overflow-x: auto; margin-bottom: 8px; border: 1px solid var(--glass-border); border-radius: 10px; }
.ki-tab { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: 0.8rem; }
/* Spaltenbreiten: Vorname, Nachname, Geschlecht, Geburtsdatum, Funktion, Gruppe, Nr., Status, Entfernen */
.ki-tab th:nth-child(1), .ki-tab th:nth-child(2) { width: 125px; }
.ki-tab th:nth-child(3) { width: 135px; }
.ki-tab th:nth-child(4) { width: 120px; }
.ki-tab th:nth-child(5) { width: 140px; }
.ki-tab th:nth-child(6) { width: 100px; }
.ki-tab th:nth-child(7) { width: 64px; }
.ki-tab th:nth-child(9) { width: 44px; }
.ki-tab th { text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
    padding: 8px 6px; border-bottom: 1px solid var(--glass-border); white-space: nowrap; }
.ki-tab td { padding: 4px 6px; vertical-align: top; border-bottom: 1px solid var(--glass-08); }
.ki-tab .so-inp { width: 100%; min-width: 0; padding: 6px 8px; }
.ki-status { min-width: 220px; }
.ki-wahl { margin-top: 4px; }
.ki-fertig td { opacity: 0.6; }
.ki-st { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: 0.7rem; font-weight: 800; border: 1px solid; }
.ki-st-neu, .ki-st-ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.ki-st-vorhanden, .ki-st-im_kader, .ki-st-doppelt { background: var(--glass-08); color: rgb(var(--ink)); border-color: var(--glass-22); }
.ki-st-unklar { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.ki-st-err { background: var(--err-bg); color: var(--err-text); border-color: var(--err-border); white-space: normal; }
/* Gruppen (2026-09-27): Haekchen-Spalte in der Kaderliste */
.so-liste .so-wahl { width: 36px; text-align: center; }
.so-liste .so-wahl input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--tigers-yellow, #fdee17); }
#sgMannschaftFeld[hidden] { display: none; }
/* Liste drucken (2026-09-27) */
.kd-dlg { width: min(720px, calc(100vw - 32px)); }
.kd-block { border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 12px 12px; margin: 14px 0 0; }
.kd-block legend { padding: 0 6px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
#kdGruppenBlock[hidden] { display: none; }
.kd-wahl { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 0; font-size: 0.85rem; }
.kd-wahl label, .kd-zeile { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.kd-zeile { margin-top: 8px; font-size: 0.85rem; }
.kd-wahl input, .kd-zeile input { accent-color: var(--tigers-yellow, #fdee17); }
.kd-leer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.kd-leer .so-leer { grid-column: 1 / -1; }
.kd-hinweis { margin: 6px 0 0; }
.kd-dlg .so-grid2 { margin-top: 14px; }
@media (max-width: 600px) { .kd-leer { grid-template-columns: 1fr; } }

/* Kaderliste am Handy (KaderlisteAnsicht.php, 2026-10-01). Eigene Klassen
   statt <section>/<table> nackt zu stylen - 00-basis-nav.css greift auf
   section und nav zu, und unter 1024 px macht das Portal Tabellen zu Karten. */
.kda-titel { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.kda-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.kda-meta { font-size: 0.85rem; color: rgba(var(--ink) / 0.72); margin: 8px 0; }
.kda-block { margin: 18px 0 0; padding: 0; background: none; border: none; box-shadow: none; }
.kda-block h2 { font-size: 1.1rem; margin: 0; color: rgb(var(--ink)); border: none; padding: 0; }
.kda-block > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 6px 0; min-height: 44px; }
.kda-block > summary::-webkit-details-marker { display: none; }
.kda-block > summary::before { content: "B8"; color: rgb(var(--ink)); transition: transform .15s; }
.kda-block[open] > summary::before { transform: rotate(90deg); }
.kda-block h2 span { font-weight: 400; color: rgba(var(--ink) / 0.72); }
.kda-team { font-size: 0.92rem; margin: 0 0 8px; color: rgb(var(--ink)); }
/* Zeilen: Name links und nimmt den Rest, die schmalen Spalten haben feste Breite und
   stehen mittig. Feste Breiten, damit die Spalten in jeder Zeile untereinander
   liegen (je Zeile ein eigenes Raster haette sie verschoben). */
.kda-tab { font-size: 1.02rem; }
.kda-z { display: flex; align-items: baseline; gap: 4px 8px; padding: 12px 8px;
    border-bottom: 1px solid var(--glass-22); color: rgb(var(--ink)); }
.kda-z:nth-child(even) { background: var(--glass-12); }
.kda-z span { flex: 0 0 auto; min-width: 2.6rem; text-align: center; overflow-wrap: anywhere; color: rgb(var(--ink)); }
.kda-z .kda-name { flex: 1 1 0; min-width: 0; text-align: left; font-weight: 600; }
.kda-z .kda-nr { min-width: 2.2rem; }
.kda-z .kda-funktion { min-width: 5rem; text-align: left; }
.kda-z .kda-geburtsdatum { flex: 0 0 5.8rem; min-width: 0; }
.kda-kopf { padding: 8px 8px; border-bottom: 2px solid var(--tigers-yellow); background: none !important; }
.kda-kopf span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; overflow-wrap: normal; color: rgba(var(--ink) / 0.72); }