/* ═══════════════════════════════════════════════════════════════════
   Kaderheld / SoccerMedia — Mobile-First Design System

   Phase 1: Token-Layer + Light/Dark-Toggle.
   Light ist Default. Dark wird via [data-theme="dark"] auf <html> aktiv.
   Per-Verein-Primary-Farbe kommt aus theme.css (--color-primary).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens — Light (Default) ─────────────────────────────────────── */
:root {
    /* Surfaces & Backgrounds */
    --bg-base:       #f4f6fb;
    --bg-surface:    #ffffff;
    --bg-elevated:   #ffffff;
    --bg-card:       #ffffff;
    --bg-input:      #ffffff;
    --bg-hover:      #f1f5f9;
    --bg-secondary:  #f8fafc;
    --bg-subtle:     #f1f5f9;
    --surface:       #ffffff;
    --primary-bg:    rgba(var(--color-primary-rgb), 0.08);

    /* Text */
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #5f6b7f;   /* 4,7:1 auf --bg-base — #94a3b8 lag bei 2,6:1 (Kriterien-Loop Runde 9) */
    --text-on-primary:#ffffff;

    /* Borders */
    --border:        #e2e8f0;
    --border-color:  #e2e8f0;
    --border-strong: #cbd5e1;

    /* Status */
    --success-bg:    #d1fae5;  --success-text: #065f46;  --success-border: #6ee7b7;
    --warning-bg:    #fef3c7;  --warning-text: #92400e;  --warning-border: #fcd34d;
    --danger-bg:     #fee2e2;  --danger-text:  #991b1b;  --danger-border:  #fca5a5;
    /* „info" ist KEIN Alarm, sondern ein Hinweis — deshalb eine ruhige neutrale Fläche
       statt Himmelblau. #e0f2fe (Tailwind sky-100) hatte mit Dunkelgrün, Orange und Creme
       nichts zu tun und war ausgerechnet an der Stelle am lautesten, die auf jeder Seite
       steht: dem Trial-Banner. Warnung, Fehler und Erfolg behalten ihre Signalfarben —
       die bedeuten etwas. */
    --info-bg:       #eef2f7;  --info-text:    #334155;  --info-border:    #d3dbe6;

    /* Sidebar / Topbar / Bottombar */
    /* Die Navigation ist die ruhigste Fläche, nicht die hellste. Bis 25.08.2026 war sie
       #ffffff — also genauso hell wie die Karten daneben und heller als der Arbeitsbereich
       (#f4f6fb). Sie trat damit nicht zurück, sondern konkurrierte mit dem Inhalt; die Seite
       wirkte flach. Jetzt eine klare Staffelung: Navigation dunkler als der Grund, Karten
       heller — dadurch tritt der Inhalt hervor. Im dunklen Modus stimmte das längst
       (#0d1424 gegen #0a0f1e Grund und #141a2d Karten); nur der helle war verkehrt herum. */
    --sidebar-bg:     #eaeef6;
    --sidebar-border: #dbe2ec;
    --topbar-bg:      rgba(255, 255, 255, 0.92);
    --topbar-border:  #e2e8f0;
    --bottombar-bg:   rgba(255, 255, 255, 0.96);

    /* Layout */
    --sidebar-w:     272px;
    --topbar-h:      56px;
    --bottombar-h:   64px;
    --tap:           44px;

    /* Shape */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  20px;

    /* Shadow */
    --shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md:     0 4px 14px rgba(15, 23, 42, 0.08);
    --shadow-lg:     0 12px 32px rgba(15, 23, 42, 0.14);
    --shadow-card:   var(--shadow-sm);
    --shadow-accent: 0 4px 16px rgba(var(--color-primary-rgb), 0.30);

    /* Typography */
    --font-display: 'Barlow Condensed', system-ui, sans-serif;
    --font-body:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Feld (Aufstellung) */
    --feld-bg:    #4ade80;
    --feld-linie: #ffffff;

    color-scheme: light;
}

/* ── Tokens — Dark Override ───────────────────────────────────────── */
[data-theme="dark"] {
    /* Vereinsfarbe als Text aufhellen: #0F4230 auf #141a2d ergab 1,5:1, das Vereinsblau 2,6:1
       (gemessen 26.08.2026 an Login, Dashboard, Kader). Flaechen behalten die echte Farbe. */
    --color-primary-text: color-mix(in srgb, var(--color-primary) 45%, #ffffff);
    --bg-base:      #0a0f1e;
    --bg-surface:   #141a2d;
    --bg-elevated:  #1b2236;
    --bg-card:      #141a2d;
    --bg-input:     #0f1525;
    --bg-hover:     #1f2740;
    --bg-secondary: #1b2236;
    --bg-subtle:    #1f2740;
    --surface:      #141a2d;
    --primary-bg:   rgba(var(--color-primary-rgb), 0.22);

    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #8b98b0;   /* 5,5:1 auf --bg-surface — #64748b lag bei 3,6:1 */

    --border:        rgba(255, 255, 255, 0.08);
    --border-color:  rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.18);

    --success-bg:    rgba(16, 185, 129, 0.15); --success-text:  #6ee7b7; --success-border: rgba(16, 185, 129, 0.4);
    --warning-bg:    rgba(245, 158, 11, 0.15); --warning-text:  #fcd34d; --warning-border: rgba(245, 158, 11, 0.4);
    --danger-bg:     rgba(239, 68, 68, 0.15);  --danger-text:   #fca5a5; --danger-border:  rgba(239, 68, 68, 0.4);
    --info-bg:       rgba(148, 163, 184, 0.16); --info-text:    #cbd5e1; --info-border:    rgba(148, 163, 184, 0.35);

    --sidebar-bg:     #0d1424;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --topbar-bg:      rgba(20, 26, 45, 0.92);
    --topbar-border:  rgba(255, 255, 255, 0.06);
    --bottombar-bg:   rgba(13, 20, 36, 0.96);

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg:     0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-accent: 0 4px 20px rgba(var(--color-primary-rgb), 0.5);

    color-scheme: dark;
}

/* ── Reset & Base — Mobile-First ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* iOS prevents zoom on input focus when font-size >= 16px */
input, textarea, select, button { font-family: inherit; font-size: 16px; }

a { color: var(--color-primary-text); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

::selection { background: rgba(var(--color-primary-rgb), 0.22); color: inherit; }

/* ── Layout: Body / Sidebar / Main-Wrapper ────────────────────────── */
body {
    display: flex;
    overflow-x: hidden;
}

#sidebar {
    width: var(--sidebar-w);
    min-height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 100;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

.sidebar-header {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-logo { display: flex; align-items: center; gap: 12px; }

.logo-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    /* Kein Hintergrund in der Vereinsfarbe mehr: Das Marken-Zeichen bringt Flaeche und Farbe
       selbst mit, und darunter noch eine zweite Farbe zu legen ergaebe einen Rand in einem
       dritten Ton. */
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.logo-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }

.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-title { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: 0.02em; color: var(--text-primary); }
.logo-accent { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--color-primary-text); }
.logo-title, .logo-accent { display: inline; }
.logo-sub { font-size: 10px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; display: block; }

.sidebar-section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 18px 16px 6px;
}

.sidebar-nav { list-style: none; padding: 0 8px; }

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--tap);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
    margin-bottom: 2px;
}
.sidebar-link i { font-size: 17px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-link:hover { background: var(--bg-hover); color: var(--text-primary); }
/* Der aktive Eintrag bekommt zusätzlich einen Balken links — das Muster, das Spond, Linear und
   Notion benutzen: Man sieht in einem Blick, wo man ist, ohne dass die Fläche schreien muss. */
.sidebar-link.active {
    background: var(--primary-bg);
    color: var(--color-primary-text);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--color-primary);
}
/* Im dunklen Modus stand hier #93c5fd — Tailwind blue-300, fest verdrahtet. In einer
   dunkelgrünen Marke färbte sich der aktive Menüpunkt damit blau, und bei einem Verein mit
   eigener Farbe erst recht falsch. Die Schrift kommt jetzt aus dem Token-Satz (hell genug auf
   dunklem Grund, unabhängig davon, wie dunkel die Vereinsfarbe ist), die Vereinsfarbe trägt
   der Balken. */
[data-theme="dark"] .sidebar-link.active { color: var(--text-primary); }

/* Sidebar-Link als Button (z.B. für Logout-Form) */
button.sidebar-link {
    width: 100%;
    background: none;
    border: 0;
    font-family: var(--font-body);
    cursor: pointer;
    text-align: left;
}
.sidebar-logout-form { margin: 0; padding: 0; }

/* Danger-Variante des Sidebar-Links (Logout) */
.sidebar-link-danger { color: var(--danger-text); }
.sidebar-link-danger:hover {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.sidebar-footer { margin-top: auto; padding: 12px 8px; border-top: 1px solid var(--sidebar-border); }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: var(--radius-sm);
}
.user-avatar { font-size: 30px; color: var(--text-muted); flex-shrink: 0; }
.user-info { overflow: hidden; }
.user-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role-hint { display: block; font-size: 11px; color: var(--text-muted); }

/* ── Main Wrapper ─────────────────────────────────────────────────── */
#main-wrapper {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Topbar ───────────────────────────────────────────────────────── */
.topbar {
    height: var(--topbar-h);
    background: var(--topbar-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--topbar-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 50;
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
}

.sidebar-toggle, .topbar-icon-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    width: var(--tap); height: var(--tap);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.sidebar-toggle:hover, .topbar-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Sidebar-Toggle-States */
body.sidebar-open #sidebar { transform: translateX(0); }
body.sidebar-open #main-wrapper { margin-left: var(--sidebar-w); }
body.sidebar-closed #sidebar { transform: translateX(-100%); }
body.sidebar-closed #main-wrapper { margin-left: 0; }

.topbar-breadcrumb { flex: 1; min-width: 0; }
.topbar-breadcrumb .breadcrumb { margin: 0; flex-wrap: nowrap; overflow: hidden; }
.topbar-breadcrumb .breadcrumb-item { font-size: 13.5px; white-space: nowrap; }
.topbar-breadcrumb .breadcrumb-item a { color: var(--text-secondary); text-decoration: none; }
.topbar-breadcrumb .breadcrumb-item a:hover { color: var(--color-primary-text); }
.topbar-breadcrumb .breadcrumb-item.active { color: var(--text-primary); font-weight: 500; }
.topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

.topbar-actions { display: flex; gap: 6px; align-items: center; }

/* Theme-Toggle icon switch */
.topbar-icon-btn .icon-light-active,
.topbar-icon-btn .icon-dark-active { display: none; }
:root .topbar-icon-btn .icon-light-active { display: inline-block; }
[data-theme="dark"] .topbar-icon-btn .icon-light-active { display: none; }
[data-theme="dark"] .topbar-icon-btn .icon-dark-active { display: inline-block; }

/* ── Alert Banners ────────────────────────────────────────────────── */
.alert-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    animation: slideDown 0.25s ease;
}
.alert-banner-success { background: var(--success-bg); border-bottom: 1px solid var(--success-border); color: var(--success-text); }
.alert-banner-error   { background: var(--danger-bg);  border-bottom: 1px solid var(--danger-border);  color: var(--danger-text); }
.alert-banner-info    { background: var(--info-bg);    border-bottom: 1px solid var(--info-border);    color: var(--info-text); }
.alert-close { margin-left: auto; background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; }
.alert-close:hover { opacity: 1; }

@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Page Content ─────────────────────────────────────────────────── */
.page-content {
    padding: 18px 16px 24px;
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}
@media (min-width: 768px)  { .page-content { padding: 24px 24px 32px; } }
@media (min-width: 1200px) { .page-content { padding: 28px 32px 40px; } }

/* ── Page Header ──────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}
.page-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    line-height: 1.15;
}
.page-subtitle { font-size: 13.5px; color: var(--text-secondary); margin-top: 3px; }
@media (min-width: 768px) { .page-title { font-size: 32px; } }

/* ── Cards ────────────────────────────────────────────────────────── */
.sm-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    /* Bis 25.08.2026 trug jede Karte die Vereinsfarbe als 3px-Oberkante. Sechs Karten
       auf einer Seite hiessen sechs farbige Striche — Farbe ohne Aussage, und der
       Grund, warum die Seite „bunt, aber nicht modern" wirkte. Die Vereinsfarbe hat
       jetzt drei Orte: der Haupt-Knopf, der aktive Menuepunkt, der Balken an einer
       Handlung. Dort bedeutet sie etwas. */
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sm-card:hover { border-color: var(--border-strong); }

/* Ruhiger Card-Kopf (04.08.2026): der Farbverlauf machte jede Info-Card
   gleich laut — die Detailseiten sprechen jetzt dieselbe Sprache wie die
   freigegebenen Listen-Karten. Titel klein in Vereinsfarbe, Rest still. */
.sm-card-header {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bg-surface);
    color: var(--text-primary);
}
.sm-card-header > * { color: inherit; }
.sm-card-header .text-muted,
.sm-card-header .text-muted-col { color: var(--text-muted) !important; opacity: 1; }
/* Die Display-Schrift (Barlow Condensed, Versalien) stand auf JEDER Kartenueberschrift und
   jedem Aufklapper — in Vereinsfarbe. Das ist die Typografie eines Sportplakats, und auf
   einer Seite mit acht Karten wirkte sie wie ein Vereinsheft. Linear, Notion und Stripe setzen
   Kartentitel in der Textschrift, Satzschreibung, halbfett, gedaempft: Der Titel benennt, der
   Inhalt spricht. Die Display-Schrift bleibt der EINEN Stelle mit Persoenlichkeit — dem
   Seitenkopf. */
.sm-card-title {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.sm-card-title > .bi { color: var(--text-muted); font-size: 15px; }
/* Buttons/Links im Header: stille Ghost-Optik */
.sm-card-header .btn-ghost-sm,
.sm-card-header .btn-icon,
.sm-card-header a:not(.btn-primary-sm):not(.btn-danger-sm) {
    background: transparent;
    color: var(--color-primary-text);
    border-color: rgba(var(--color-primary-rgb), 0.30);
}
.sm-card-header .btn-ghost-sm:hover,
.sm-card-header .btn-icon:hover,
.sm-card-header a:not(.btn-primary-sm):not(.btn-danger-sm):hover {
    background: var(--primary-bg);
    color: var(--color-primary-text);
    border-color: rgba(var(--color-primary-rgb), 0.50);
}
.sm-card-body { padding: 18px; }
@media (min-width: 768px) {
    .sm-card-header { padding: 16px 22px; }
    .sm-card-body { padding: 22px; }
}

/* Section-Label (Trenner zwischen Bereichen einer Seite) */
.sm-section-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    margin: 28px 0 10px;
}
/* „Alle anzeigen" gehoert in die Kopfzeile des Abschnitts, nicht als Knopf unter die Liste —
   dort stand er bisher neben „Weitere laden" als zweiter Umriss-Knopf, und niemand wusste,
   welcher wohin fuehrt. */
.sm-section-link {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-primary-text);
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sm-section-link:hover { text-decoration: underline; }
.dash-mehr { display: flex; justify-content: center; margin: 4px 0 12px; }

/* ── Stat Cards ───────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
@media (min-width: 768px) {
    .stat-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s;
}
.stat-card:hover::before { transform: scaleX(1); }
.stat-icon  { font-size: 22px; color: var(--color-primary-text); margin-bottom: 8px; }
.stat-value { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1; color: var(--text-primary); }
.stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 4px; }

/* ── Table ────────────────────────────────────────────────────────── */
.sm-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
}
/* Solange ein Dropdown-Menü (z.B. Status-Menü im aufgeklappten Event-Roster) offen ist, darf der
   horizontale Scroll-Container es nicht abschneiden — sonst ragt das Menü unsichtbar nach rechts raus.
   overflow-x:auto erzwingt sonst auch overflow-y:auto und clippt das Popup. */
.sm-table-wrap:has(.dropdown-menu.show) { overflow: visible; }
.sm-table { width: 100%; border-collapse: collapse; }
.sm-table thead tr { background: var(--bg-secondary); border-bottom: 1px solid var(--border); }
.sm-table thead th {
    padding: 12px 16px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: left;
}
.sm-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
}
.sm-table tbody tr:last-child { border-bottom: none; }
.sm-table tbody tr:hover { background: var(--bg-hover); }
.sm-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-primary);
    vertical-align: middle;
}
.sm-table td.text-muted-col { color: var(--text-secondary); font-size: 13.5px; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn-primary-sm, .btn-ghost-sm, .btn-danger-sm {
    min-height: var(--tap);
    padding: 0 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1;
}
.btn-primary-sm:active, .btn-ghost-sm:active, .btn-danger-sm:active { transform: translateY(1px); }

.btn-primary-sm {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
}
.btn-primary-sm:hover {
    background: var(--color-primary-hover);
    color: var(--color-primary-foreground);
    box-shadow: var(--shadow-accent);
}

.btn-ghost-sm {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border-color: var(--border-strong);
}
.btn-ghost-sm:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-danger-sm {
    background: transparent;
    color: var(--danger-text);
    border-color: var(--danger-border);
    padding: 0 14px;
    font-size: 13px;
    min-height: 36px;
}
.btn-danger-sm:hover { background: var(--danger-bg); color: var(--danger-text); }

.btn-icon {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    width: var(--tap); height: var(--tap);
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-icon:hover {
    background: var(--primary-bg);
    color: var(--color-primary-text);
    border-color: rgba(var(--color-primary-rgb), 0.35);
}
.btn-icon.danger:hover { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }

.action-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ── Aktionen-Modal: Kachel-Funktionsauswahl (feldtauglich) ───────── */
.action-modal-header { align-items: flex-start; gap: 12px; }
.action-modal-context { display: flex; align-items: center; gap: 12px; min-width: 0; }
.action-modal-context-text { min-width: 0; }
.action-modal-context-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    background: var(--primary-bg);
    color: var(--color-primary-text);
    font-size: 22px;
    display: inline-flex; align-items: center; justify-content: center;
}
.action-modal-title {
    font-weight: 600; color: var(--text-primary); line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.action-modal-subtitle { font-size: 13px; color: var(--text-secondary); }

.action-section + .action-section { margin-top: 18px; }
.action-section-title {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 8px;
}
/* Beschriftungen kurz halten — Faustregel: ein Wort, hoechstens zwoelf Zeichen. Die Kachel ist
   96 px breit; „Alle Termine der Serie" wurde dort zu einem vierzeiligen Turm. Als Netz darunter
   klemmt die Regel auf zwei Zeilen und trennt lange Woerter an der Silbe statt sie ueberlaufen zu
   lassen — aber das Netz ersetzt nicht das kurze Wort. */
.action-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}
.action-tile > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.action-tile-form { margin: 0; display: contents; }
.action-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center;
    min-height: 88px; padding: 12px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    font-size: 13px; line-height: 1.2;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
}
.action-tile i { font-size: 24px; color: var(--color-primary-text); }
.action-tile:hover {
    background: var(--primary-bg);
    border-color: rgba(var(--color-primary-rgb), 0.35);
}
.action-tile:active { transform: scale(0.97); }
.action-tile-danger i { color: var(--danger-text); }
.action-tile-danger:hover { background: var(--danger-bg); border-color: var(--danger-border); }

/* ── „Noch nicht" — sichtbar, aber nicht waehlbar ──────────────────────
   Fuer Kacheln, deren Voraussetzung schlicht noch fehlt: das Endergebnis-Reel
   vor dem Anpfiff, der Best Moment eines Spiels, das noch nicht gelaufen ist.
   Bewusst UNTERSCHIEDEN von `.nav-tile-gesperrt` (fehlendes Modul, Schloss):
   Hier hilft kein Abo, sondern Warten — deshalb die Sanduhr und kein Schloss.
   Ausgegraut statt ausgeblendet, weil ein Menuepunkt, der ohne Erklaerung
   fehlt, wie ein Fehler wirkt. */
.action-tile-wartet,
.nav-tile-wartet {
    border-style: dashed;
    cursor: default;
    opacity: 0.72;
}
.action-tile-wartet i,
.nav-tile-wartet .nav-tile-icon { color: var(--text-secondary); }
.nav-tile-wartet .nav-tile-icon { background: var(--bg-secondary); }
.nav-tile-wartet .nav-tile-label { color: var(--text-secondary); }
.nav-tile-wartet::before { background: var(--text-secondary); }
/* Kein Hover-Effekt: Eine Flaeche, die auf den Zeiger reagiert, verspricht einen Klick. */
.action-tile-wartet:hover,
.nav-tile-wartet:hover {
    background: var(--bg-surface);
    border-color: var(--border);
    transform: none;
    box-shadow: none;
}
.nav-tile-wartet:hover .nav-tile-icon { background: var(--bg-secondary); color: var(--text-secondary); }
.action-tile-wartet .wartet-grund {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.15;
}

/* ── Forms ────────────────────────────────────────────────────────── */
.sm-form-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

.sm-form-control {
    width: 100%;
    min-height: var(--tap);
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.sm-form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18);
}
.sm-form-control::placeholder { color: var(--text-muted); }

select.sm-form-control { cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394a3b8'%3E%3Cpath d='M3.204 5.5h9.592L8 11.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 38px;
}
select.sm-form-control option { background: var(--bg-elevated); color: var(--text-primary); }

.sm-form-group { margin-bottom: 18px; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

/* ── Color Picker ─────────────────────────────────────────────────── */
.color-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    min-height: var(--tap);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.color-input-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18); }
.color-swatch {
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    cursor: pointer;
    flex-shrink: 0;
}
input[type="color"] { opacity: 0; position: absolute; pointer-events: none; }
.color-hex-input {
    background: none; border: none; color: var(--text-primary);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 14px; width: 90px; outline: none; text-transform: uppercase;
}

/* ── Badges ───────────────────────────────────────────────────────── */
.badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text); }
.badge-info    { background: var(--info-bg);    color: var(--info-text); }
.badge-muted   { background: var(--bg-hover);   color: var(--text-secondary); }
.badge-accent  { background: var(--primary-bg); color: var(--color-primary-text); }

/* ── Avatar / Spieler-Card ────────────────────────────────────────── */
.avatar-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--primary-bg);
    color: var(--color-primary-text);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.player-cell { display: flex; align-items: center; gap: 12px; }
.player-name { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.player-meta { font-size: 12px; color: var(--text-muted); }

/* ── Modal (Bootstrap-Override) ───────────────────────────────────── */
.modal-content {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}
.modal-header { border-bottom: 1px solid var(--border) !important; padding: 18px 22px !important; }
.modal-title { font-family: var(--font-display) !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; }
.modal-body  { padding: 22px !important; }
.modal-footer{ border-top: 1px solid var(--border) !important; padding: 14px 22px !important; }
.btn-close   { filter: none; }
[data-theme="dark"] .btn-close { filter: invert(1); }

/* ── Sponsor Slots ────────────────────────────────────────────────── */
.sponsor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.sponsor-slot {
    background: var(--bg-secondary);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.sponsor-slot:hover { border-color: var(--color-primary); background: var(--primary-bg); }
.sponsor-slot.filled { border-style: solid; border-color: var(--border-strong); background: var(--bg-surface); }
.sponsor-slot.slot-1 { border-color: rgba(var(--color-primary-rgb), 0.40); }
.sponsor-slot-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.sponsor-slot-name  { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sponsor-slot-empty { font-size: 12px; color: var(--text-muted); }

/* ── Tag / Pill ───────────────────────────────────────────────────── */
.tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

/* ── Empty State ──────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); }
/* Nur das Hero-Icon (direktes Kind) — 04.08.2026: der breite Selektor traf
   auch die kleinen Icons IN den Buttons und blies sie auf 48px Block auf. */
.empty-state > i { font-size: 48px; opacity: 0.35; margin-bottom: 14px; display: block; color: var(--color-primary-text); }
.empty-state h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state p  { font-size: 13.5px; }

/* ── Pagination ───────────────────────────────────────────────────── */
.sm-pagination { display: flex; gap: 4px; justify-content: center; margin-top: 22px; }
.sm-page-btn {
    min-width: 36px; min-height: 36px;
    padding: 0 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 13.5px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sm-page-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sm-page-btn.active { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); }

/* ── Search & Filter Bar ──────────────────────────────────────────── */
.filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.search-input-wrap {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
}
.search-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
}
.search-input-wrap input { padding-left: 42px; }

/* ── Data-View Toggle ─────────────────────────────────────────────── */
.view-toggle {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    min-height: var(--tap);
    /* Unter 600px verschwindet die Beschriftung und uebrig bleibt ein 17px-Symbol in 24px
       Innenabstand — gemessen 35px breit, also unter der Daumen-Trefferflaeche, bei einem
       Knopf, der auf JEDER Listenseite oben rechts steht. Die Hoehe stimmte laengst; die
       Breite hat niemand nachgerechnet, weil sie am Desktop vom Wort kommt. */
    min-width: var(--tap);
    padding: 0 12px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.view-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.view-toggle i { font-size: 17px; }
.view-toggle .icon-show-table { display: inline; }
.view-toggle .icon-show-cards { display: none; }
body.data-view-table .view-toggle .icon-show-table { display: none; }
body.data-view-table .view-toggle .icon-show-cards { display: inline; }
.view-toggle-label { white-space: nowrap; }
@media (max-width: 600px) { .view-toggle-label { display: none; } }

/* ── Card-View für Tabellen (body.data-view-cards) ────────────────── */
body.data-view-cards:not(.admin-desktop) .page-content .sm-table-wrap {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
    box-shadow: none;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view),
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) {
    display: block;
    background: transparent;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) thead,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) thead { display: none; }

body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 640px) {
    body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody,
    body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 14px;
    }
}

body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr {
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr:hover,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr:hover {
    border-color: rgba(var(--color-primary-rgb), 0.40);
    box-shadow: var(--shadow-md);
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) td,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 4px 12px;
    border: none;
    white-space: normal;
    font-size: 14px;
    text-align: right;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) td::before,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) td::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    flex-shrink: 0;
    text-align: left;
}

/* Hero-Zelle — ruhiger weisser Kopf, Vereinsfarbe nur als Akzent
   (Oberkante der Karte + Avatar-Ring). Neugestaltung 04.08.2026 nach
   User-Freigabe des Spieler-Designs — vorher Farbverlauf-Balken, der
   jede Karte gleich laut machte. */
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child {
    padding: 13px 14px 9px;
    background: var(--bg-surface);
    color: var(--text-primary);
    justify-content: flex-start;
    text-align: left;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child::before { content: none; }
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child .avatar-circle {
    width: 40px; height: 40px; font-size: 13px; font-weight: 700;
    background: var(--primary-bg);
    color: var(--color-primary-text);
    border: 2px solid rgba(var(--color-primary-rgb), 0.55);
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child .player-cell img {
    width: 40px !important; height: 40px !important;
    border: 2px solid rgba(var(--color-primary-rgb), 0.55);
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child .player-name {
    font-size: 15px;
    font-weight: 650;
    color: var(--text-primary);
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child .player-meta,
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child .text-muted-col {
    color: var(--text-secondary) !important;
    opacity: 1;
}

/* ── Vereinfachung 03.08.2026: Karten aufs Wesentliche ───────────────
   Problem war: jede Tabellenzelle wurde zur Karten-Zeile — auch leere
   ("JG. —", "Nächstes Event —") und redundante (Verein steht schon im Kopf).
   Das blähte jede Karte auf ~250px auf und ließ Texte umbrechen/abschneiden.
   Gelöst rein per CSS: Funktion und DOM bleiben unangetastet, die Tabellen-
   Ansicht (Umschalter oben rechts) zeigt weiterhin ALLE Spalten. */

/* Leere Zellen (nur „—", „-" oder leer) in der Kartenansicht ausblenden. */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td.is-leer:not(:first-child):not(:last-child),
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td.is-leer:not(:first-child):not(:last-child) { display: none !important; }

/* Werte dürfen die Karte nicht sprengen: lieber umbrechen als abschneiden. */
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td {
    min-width: 0;
    word-break: break-word;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td::before { white-space: nowrap; }

/* Kopfzeile: Name/Verein einzeilig halten statt zweizeilig zu brechen. */
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child .player-name,
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child .player-meta,
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child .text-muted-col {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:first-child .player-cell { min-width: 0; }

/* Redundante Zellen ausblenden: Werte, die schon im Karten-Kopf stehen
   (Verein/Team) doppeln nur und erzwingen Umbrueche. Per data-label, damit
   es unabhaengig von der Spaltenreihenfolge greift. */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td.is-doppelt,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td.is-doppelt { display: none !important; }

/* Aktions-Buttons: volle Beschriftung statt „Bearbei…"/„Statisti…".
   Die Karte darf dafuer in eine zweite Button-Zeile umbrechen. */
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group > * {
    flex: 0 0 auto;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group {
    flex-wrap: wrap;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group a,
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group button,
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .btn-icon[title] {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 10px;
    padding-right: 10px;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .btn-icon[title],
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group a,
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group button {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Kopf-Feinschliff (hoehere Spezifitaet als die generische td-Regel):
   linksbuendig, kein Label — die Seite selbst sagt schon, was man sieht. */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td:first-child,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td:first-child {
    position: relative;
    justify-content: flex-start;
    text-align: left;
    padding: 13px 14px 9px;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td:first-child .player-name,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td:first-child .player-name {
    font-size: 15px;
    line-height: 1.3;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td:first-child .player-meta,
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td:first-child .text-muted-col,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td:first-child .player-meta,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td:first-child .text-muted-col {
    font-size: 12px;
    line-height: 1.3;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td:first-child::before,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td:first-child::before {
    content: none;
}
/* Dropdown-Menues duerfen aus der Karte ragen — Rundung liegt deshalb auf
   Kopf- und Fusszelle statt auf der tr. */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr {
    overflow: visible;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td:first-child,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td:first-child {
    border-radius: calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px) 0 0;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td:last-child,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td:last-child {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.meta-label { display: none; }
/* Elemente, die es nur in der Kartenansicht gibt (Tabelle hat eigene Spalten) */
body.data-view-table .nur-karten { display: none; }

/* Footer-Zelle (mit Actions) */
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:not(:first-child):has(.action-group) {
    padding: 5px 8px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    justify-content: stretch;
    margin-top: auto;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group)::before { content: none; }
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group {
    display: flex; flex: 1; width: 100%; gap: 6px; flex-wrap: wrap; justify-content: flex-start;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group > * {
    flex: 1 1 90px;
    min-width: 0;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group form { display: flex; min-width: 0; }
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .action-group form > .btn-icon { flex: 1; }
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .btn-icon[title] {
    width: auto;
    /* Stand fest auf 32px — unter der Daumen-Trefferflaeche, und zwar in der Fusszeile
       JEDER Karte in JEDER Liste. Am Telefon sind das die meistbenutzten Knoepfe der App
       (in der Terminliste „Teilnehmer" und das Aktionen-Menue). Die Breite wurde hier
       bewusst freigegeben, damit eine Beschriftung hineinpasst; die Hoehe hat niemand
       mitgezogen.

       Die Beschriftung selbst ist da: sie kommt weiter unten als `::after { content: attr(title) }`.
       Das Messwerkzeug sieht sie NICHT (`innerHTML`/`textContent` kennen kein Pseudoelement) — die
       Knoepfe wirken dort unbeschriftet. Wer daraufhin einen Span einbaut, bekommt sie zweimal. */
    min-height: var(--tap);
    padding: 0 10px;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 8px;
    /* Stille Textlinks statt Pills — Farbe erst beim Hover */
    background: transparent;
    color: var(--color-primary-text);
    border: none;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .btn-icon[title]:hover {
    background: var(--primary-bg);
    color: var(--color-primary-text);
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .btn-icon.danger[title] {
    background: transparent;
    color: var(--danger-text);
    opacity: 0.85;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .btn-icon.danger[title]:hover {
    background: var(--danger-bg);
    color: var(--danger-text);
    opacity: 1;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:last-child:has(.action-group) .btn-icon[title]::after {
    content: attr(title);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    /* Vereinfachung 03.08.2026: kein ellipsis mehr — „Bearbei…"/„Statisti…" war
       unlesbar. Buttons nehmen ihre natuerliche Breite und brechen bei Bedarf
       in eine zweite Zeile um. */
    white-space: nowrap;
    overflow: visible;
}

body.data-view-cards:not(.admin-desktop) .page-content td[data-label=""]::before,
body.data-view-cards:not(.admin-desktop) .page-content td:not([data-label])::before { content: none; }
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:not(:first-child):not(:last-child)[data-label=""],
body.data-view-cards:not(.admin-desktop) .page-content tbody tr > td:not(:first-child):not(:last-child):not([data-label]) {
    justify-content: flex-end;
}

/* Bootstrap-Responsive-Klassen auch im Card-View respektieren —
   so kann eine Tabelle Spalten wie `d-none d-md-table-cell` setzen,
   die dann auf Mobile in BEIDEN Modi (Tabelle UND Card) versteckt sind. */
body.data-view-cards:not(.admin-desktop) .page-content table:not(.no-card-view) td.d-none { display: none !important; }
@media (min-width: 576px) {
    body.data-view-cards:not(.admin-desktop) .page-content table:not(.no-card-view) td.d-sm-table-cell { display: flex !important; }
}
@media (min-width: 768px) {
    body.data-view-cards:not(.admin-desktop) .page-content table:not(.no-card-view) td.d-md-table-cell { display: flex !important; }
}
@media (min-width: 992px) {
    body.data-view-cards:not(.admin-desktop) .page-content table:not(.no-card-view) td.d-lg-table-cell { display: flex !important; }
}
@media (min-width: 1200px) {
    body.data-view-cards:not(.admin-desktop) .page-content table:not(.no-card-view) td.d-xl-table-cell { display: flex !important; }
}

/* Overflow-Schutz: nichts ragt aus der Card raus */
body.data-view-cards:not(.admin-desktop) .page-content tbody tr {
    min-width: 0;
    max-width: 100%;
}

/* ── Dichte Card-Variante (.cards-dense) ──────────────────────────────
   Zwei Werte pro Zeile (sofern Platz), engere Zeilenabstände.
   Hero (erste Zelle), Aktionen-Footer und .card-full bleiben volle Breite. */
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody { align-items: start; }
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr {
    flex-flow: row wrap;
    align-content: flex-start;
}
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr > td {
    flex: 1 1 45%;
    min-width: 45%;
    padding: 5px 14px;
    gap: 4px 8px;
    /* Lange Werte (z. B. 'Union St.Florian – Kampfmannschaft') brechen als
       ganze Zeile unters Label um, statt zeichenweise zerhackt zu werden. */
    flex-wrap: wrap;
    word-break: normal;
    overflow-wrap: break-word;
}
/* Label kompakter, Wert rechts */
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr > td::before {
    font-size: 10px;
}
/* Volle Breite: Spieler-Hero, Aktionen-Footer und explizit markierte Zellen */
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr > td:first-child,
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr > td:last-child:has(.action-group),
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr > td.card-full {
    flex: 1 1 100%;
    min-width: 100%;
}
/* card-full mit eigenem Label linksbündig (z.B. Event-Chips) */
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr > td.card-full {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
}
/* overflow:visible, damit Dropdown-Menüs (z.B. Aktionen-Menü) nicht von der
   Card abgeschnitten werden. Die Ecken werden stattdessen über Hero- und
   Footer-Zelle abgerundet. */
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr { overflow: visible; }
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr > td:first-child {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}
body.data-view-cards:not(.admin-desktop) .page-content table.cards-dense:not(.no-card-view) tbody tr > td:last-child:has(.action-group) {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr td {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr .player-cell { min-width: 0; flex-wrap: wrap; }
body.data-view-cards:not(.admin-desktop) .page-content tbody tr .player-cell > * { min-width: 0; }
body.data-view-cards:not(.admin-desktop) .page-content tbody tr .player-cell > div { min-width: 0; overflow: hidden; }
body.data-view-cards:not(.admin-desktop) .page-content tbody tr .player-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
body.data-view-cards:not(.admin-desktop) .page-content tbody tr .tag,
body.data-view-cards:not(.admin-desktop) .page-content tbody tr .badge-sm {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Kader-Liste (inline ausklappbar auf Mannschaften/Edit) ───────── */
.kader-details {
    margin: 24px 0 22px;
}
.kader-details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    user-select: none;
}
.kader-details > summary::-webkit-details-marker,
.kader-details > summary::marker { display: none; content: ''; }
.kader-summary-title { display: inline-flex; align-items: center; gap: 8px; }
.kader-summary-title i { color: var(--color-primary-text); font-size: 16px; }
.kader-summary-chevron {
    transition: transform 0.2s ease;
    color: var(--text-muted);
    font-size: 14px;
}
.kader-details[open] > summary .kader-summary-chevron { transform: rotate(180deg); }

.kader-card { margin-top: 10px; }

/* Kader-Details direkt in einer Card (ohne eigener Summary-Border) */
.kader-details-flush > summary {
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    margin: 0;
}
.kader-details-flush[open] > summary { border-bottom-color: var(--border); }

/* ── Teilnehmer-Liste auf Events/Details mit Zu-/Absage-Buttons ──── */
.teilnehmer-list { list-style: none; padding: 0; margin: 0; }
.teilnehmer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.teilnehmer-item:last-child { border-bottom: none; }

.teilnehmer-info { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 0; }
.teilnehmer-avatar { width: 36px; height: 36px; font-size: 13px; flex-shrink: 0; }
.teilnehmer-avatar-img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.teilnehmer-text { min-width: 0; flex: 1; }
.teilnehmer-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.teilnehmer-nom { margin-top: 2px; }
.teilnehmer-nom .badge { font-size: 10.5px; }

/* Zu-/Absage Button-Group */
.zusage-buttons {
    display: inline-flex;
    gap: 4px;
    margin: 0;
    flex-shrink: 0;
}
.zusage-btn {
    width: 36px; height: 36px;
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
    padding: 0;
}
.zusage-btn:hover { transform: scale(1.06); }
.zusage-btn:active { transform: scale(0.95); }

.zusage-btn-yes:hover,
.zusage-btn-yes.active {
    background: #d1fae5;
    color: #047857;
    border-color: #6ee7b7;
}
.zusage-btn-maybe:hover,
.zusage-btn-maybe.active {
    background: #fef3c7;
    color: #b45309;
    border-color: #fcd34d;
}
.zusage-btn-no:hover,
.zusage-btn-no.active {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}
[data-theme="dark"] .zusage-btn-yes.active   { background: rgba(16,185,129,0.20); color: #6ee7b7; border-color: rgba(16,185,129,0.50); }
[data-theme="dark"] .zusage-btn-maybe.active { background: rgba(245,158,11,0.20); color: #fcd34d; border-color: rgba(245,158,11,0.50); }
[data-theme="dark"] .zusage-btn-no.active    { background: rgba(239,68,68,0.20);  color: #fca5a5; border-color: rgba(239,68,68,0.50); }

.zusage-readonly { font-size: 11.5px; padding: 5px 10px; }

/* ── Zusage-Dropdown (Events/Index + Events/Details Teilnehmer-Liste) ── */
.zusage-dropdown { display: inline-block; }

.zusage-status-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    min-height: 32px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.zusage-status-btn i { font-size: 15px; }
.zusage-status-btn:hover { background: var(--bg-hover); }
.zusage-status-btn::after {
    /* Bootstrap caret kleiner halten */
    margin-left: 4px;
    border-top-width: 0.25em;
}
.zusage-status-label { white-space: nowrap; }
@media (max-width: 480px) { .zusage-status-label { display: none; } }

/* Farbvarianten — analog zu zusage-btn-* */
.zusage-status-btn.zusage-status-yes   { background: #d1fae5; color: #047857; border-color: #6ee7b7; }
.zusage-status-btn.zusage-status-maybe { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.zusage-status-btn.zusage-status-no    { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.zusage-status-btn.zusage-status-nn    { background: var(--bg-tertiary, #e5e7eb); color: var(--text-secondary); border-color: var(--border-strong); }
.zusage-status-btn.zusage-status-open  { background: var(--bg-surface); color: var(--text-muted); }
.zusage-status-btn.zusage-status-other { background: var(--info-bg); color: var(--info-text); border-color: var(--info-border); }

[data-theme="dark"] .zusage-status-btn.zusage-status-yes   { background: rgba(16,185,129,0.20); color: #6ee7b7; border-color: rgba(16,185,129,0.50); }
[data-theme="dark"] .zusage-status-btn.zusage-status-maybe { background: rgba(245,158,11,0.20); color: #fcd34d; border-color: rgba(245,158,11,0.50); }
[data-theme="dark"] .zusage-status-btn.zusage-status-no    { background: rgba(239,68,68,0.20);  color: #fca5a5; border-color: rgba(239,68,68,0.50); }
[data-theme="dark"] .zusage-status-btn.zusage-status-nn    { background: rgba(148,163,184,0.18); color: #cbd5e1; border-color: rgba(148,163,184,0.40); }

/* Dropdown-Menü und Items */
.zusage-menu { min-width: 200px; padding: 6px 0; }
.zusage-menu-form { margin: 0; display: block; }
.zusage-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    padding: 8px 14px;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.zusage-menu .dropdown-item i { font-size: 16px; width: 18px; text-align: center; }
.zusage-menu .zusage-item-yes i   { color: #047857; }
.zusage-menu .zusage-item-maybe i { color: #b45309; }
.zusage-menu .zusage-item-no i    { color: #b91c1c; }
.zusage-menu .zusage-item-nn i    { color: var(--text-muted); }
[data-theme="dark"] .zusage-menu .zusage-item-yes i   { color: #6ee7b7; }
[data-theme="dark"] .zusage-menu .zusage-item-maybe i { color: #fcd34d; }
[data-theme="dark"] .zusage-menu .zusage-item-no i    { color: #fca5a5; }

.zusage-item-meta {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* 'Anderes Team' — Inline-Item mit Pflicht-Grund-Feld */
.zusage-item-other { padding: 8px 14px; }
.zusage-item-other-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    margin-bottom: 6px;
}
.zusage-item-other-head i { font-size: 16px; width: 18px; text-align: center; color: var(--info-text); }
.zusage-item-other-row { display: flex; gap: 6px; }
.zusage-item-other-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--bg-surface);
    color: var(--text-primary);
}
.zusage-item-other-btn {
    flex: 0 0 auto;
    border: 0;
    background: var(--info-bg);
    color: var(--info-text);
    border-radius: 6px;
    padding: 0 10px;
    cursor: pointer;
}
.zusage-item-other-btn i { font-size: 16px; }

/* ── Status-Zusammenfassung (Icon + Anzahl je Status, _EventStatusZusammenfassung) ── */
.event-status-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.esz-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.esz-chip i { font-size: 13px; }
.esz-chip .esz-count { font-variant-numeric: tabular-nums; }
.esz-chip.esz-zero { opacity: 0.4; }

/* Farben aus dem Token-Satz, nicht als Hex-Literale: Die Werte hier waren Kopien von
   --success-bg/--warning-bg/--danger-bg, und „esz-other" war wieder Himmelblau (#e0f2fe) —
   dieselbe Fremdfarbe, die auch die Abzeichen hatten. Kopierte Farben laufen auseinander,
   sobald jemand den Token ändert; im dunklen Modus taten sie es bereits (eigener Block unten). */
.esz-chip.esz-yes   { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.esz-chip.esz-maybe { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.esz-chip.esz-no    { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-border); }
.esz-chip.esz-other { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-border); }
.esz-chip.esz-open  { background: var(--bg-hover);   color: var(--text-secondary); border-color: var(--border); }
.esz-chip.esz-nn    { background: var(--bg-hover);   color: var(--text-muted);     border-color: var(--border); }

/* Kein eigener Dunkelmodus-Block mehr nötig: --success-bg & Co. sind im dunklen Token-Satz
   bereits dunkel definiert. Der Block hier war eine zweite Wahrheit über dieselben Farben. */

/* ── Kader-Seite (Events/Kader) ───────────────────────────────────── */
.kader-tabs {
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 2px;
}
.kader-tabs .nav-link {
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.kader-tabs .nav-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.kader-tabs .nav-link.active {
    color: var(--color-primary-text);
    background: transparent;
    border-bottom-color: var(--color-primary);
}
.kader-tabs .nav-link i { font-size: 16px; }
.kader-tabs .badge { font-size: 11px; }

.kader-tab-content { padding-top: 4px; }

.kader-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.kader-row-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 280px;
    min-width: 0;
}
.kader-avatar { width: 44px; height: 44px; font-size: 15px; flex-shrink: 0; }
.kader-avatar-img {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.kader-row-text { flex: 1; min-width: 0; }
.kader-row-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kader-row-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 12px;
}
.kader-row-meta .badge { font-size: 10.5px; }
.kader-row-grund {
    font-size: 11.5px;
    color: var(--text-muted);
}
.kader-row-kommentar {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 4px;
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.kader-row-kommentar i { color: var(--text-muted); margin-right: 4px; }

.kader-row-form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1 1 360px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
}
.kader-status-select {
    flex: 0 0 auto;
    width: auto;
    min-width: 130px;
    font-size: 13px;
    padding: 6px 10px;
}
.kader-kommentar-input {
    flex: 1 1 100px;
    min-width: 0;
    font-size: 13px;
    padding: 6px 10px;
}
.kader-kommentar-input.is-required {
    border-color: #f59e0b;
    background: #fffbeb;
}
[data-theme="dark"] .kader-kommentar-input.is-required {
    border-color: rgba(245, 158, 11, 0.6);
    background: rgba(245, 158, 11, 0.08);
}
.kader-save-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 13px;
    min-height: 36px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .kader-row { gap: 10px; }
    .kader-row-form {
        flex-wrap: wrap;
        flex: 1 1 100%;
        justify-content: stretch;
    }
    .kader-status-select { flex: 1 1 130px; }
    .kader-kommentar-input { flex: 1 1 100%; }
    .kader-save-btn { flex: 0 0 auto; }
}

/* ── Filter-Bar Toggle (Checkbox-Style) ───────────────────────────── */
.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    padding: 0 10px;
    min-height: 38px;
    border-radius: var(--radius-sm);
}
.filter-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }
.filter-toggle input { margin: 0; cursor: pointer; width: 16px; height: 16px; accent-color: var(--color-primary); }

/* Dashboard: nächstes Event Stripe oben in der Mannschaft-Card */
.dashboard-next-event {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--primary-bg);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
.dashboard-next-event i {
    color: var(--color-primary-text);
    font-size: 16px;
    flex-shrink: 0;
}
.dashboard-next-event a {
    color: var(--color-primary-text);
    text-decoration: none;
}
.dashboard-next-event a:hover { text-decoration: underline; }

/* ── Spieler-Dashboard ───────────────────────────────────────────── */
.dash-profil {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
/* Zahlen-Zeile unter dem Profil — vier Werte, eine Reihe, auch auf schmalen Geräten. */
.dash-kennzahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
    text-decoration: none;
}
.dash-kennzahlen:hover .dkz-wert { color: var(--color-primary-hover, var(--color-primary)); }
.dash-kennzahl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    background: var(--surface);
}
.dkz-wert {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary-text);
}
.dkz-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.dash-profil-avatar img,
.dash-profil-avatar .avatar-circle {
    width: 64px;
    height: 64px;
    font-size: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.dash-profil-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.dash-profil-name { font-size: 1.4rem; font-weight: 700; margin: 0; line-height: 1.1; }
.dash-profil-edit { text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }

/* Benachrichtigungs-Bereich (gebündelte Hinweise/Zustände aus mehreren Quellen) */
.dash-hinweise { margin-bottom: 18px; }
.dash-hinweise-count {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-primary-foreground);
    font-size: 0.78rem;
    font-weight: 700;
}
.hinweis-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hinweis-item { border-radius: var(--radius-md); border: 1px solid var(--border); overflow: hidden; }
.hinweis-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-primary);
    border-left: 3px solid transparent;
}
a.hinweis-body:hover { text-decoration: none; background: var(--bg-hover, rgba(0, 0, 0, 0.03)); }
.hinweis-icon { flex-shrink: 0; font-size: 1.15rem; line-height: 1; display: inline-flex; }
.hinweis-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hinweis-titel { font-weight: 600; font-size: 0.9rem; }
.hinweis-beschreibung { font-size: 0.8rem; color: var(--text-secondary); }
.hinweis-chevron { margin-left: auto; opacity: 0.5; flex-shrink: 0; }

/* Farbcodierung je Stufe (linker Balken + Icon-Farbe) */
.hinweis-info    .hinweis-body { border-left-color: var(--info-border); }
.hinweis-info    .hinweis-icon { color: var(--info-text); }
.hinweis-aktion  .hinweis-body { border-left-color: var(--color-primary); }
.hinweis-aktion  .hinweis-icon { color: var(--color-primary-text); }
.hinweis-warnung .hinweis-body { border-left-color: var(--warning-border); }
.hinweis-warnung .hinweis-icon { color: var(--warning-text); }
/* Bis 25.08.2026 war die ganze Zeile rot gefuellt — auf der Startseite ein Alarmkasten, der
   lauter war als jede Handlung. Rot traegt jetzt der Balken, das Symbol und der Betrag. Das
   reicht, um zu sehen, dass es dringend ist; es muss nicht schreien. */
.hinweis-dringend .hinweis-body { border-left-color: var(--danger-text); }
.hinweis-dringend .hinweis-icon { color: var(--danger-text); }
.hinweis-dringend .hinweis-beschreibung { color: var(--danger-text); opacity: 0.9; }

/* Einklappbare Karten-Kopfzeile (z. B. „Meine Aufgaben") */
.dash-collapse-toggle {
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    font: inherit;
}
.dash-collapse-count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-primary-foreground);
    font-size: 0.78rem;
    font-weight: 700;
}
.dash-collapse-chevron {
    margin-left: auto;
    transition: transform 0.18s ease;
    opacity: 0.85;
}
.dash-collapse-chevron.rotated { transform: rotate(180deg); }

.dash-team-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dash-filter-chip {
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.dash-filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.dash-filter-chip.active {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    border-color: var(--color-primary);
}

.spieler-termine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.spieler-termin-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.spieler-termin-item:first-child { padding-top: 0; }
.spieler-termin-item:last-child { padding-bottom: 0; border-bottom: none; }

.kader-list { list-style: none; padding: 0; margin: 0; }
.kader-item {
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}
.kader-item:last-child { border-bottom: none; }
.kader-item-event {
    flex-basis: 100%;
    padding: 4px 14px 10px 66px;
    background: var(--bg-elevated);
}

.kader-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-primary);
    min-height: var(--tap);
    transition: background 0.12s;
}
.kader-item-action {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px 0 4px;
    flex-shrink: 0;
}
.kader-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.kader-avatar { flex-shrink: 0; }
.kader-avatar img {
    width: 40px; height: 40px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.kader-avatar .avatar-circle { width: 40px; height: 40px; font-size: 14px; }

.kader-info { flex: 1; min-width: 0; }
.kader-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.kader-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 1px;
}
.kader-num { font-family: var(--font-display); font-weight: 700; color: var(--color-primary-text); }
/* Doppelt vergebene Nummer: Hinweis, keine Sperre — siehe Core/Mannschaften/Trikotnummern. */
.kader-num-doppelt { color: #b45309; }
.kader-sep { margin: 0 4px; color: var(--text-muted); }
.kader-chevron { color: var(--text-muted); font-size: 16px; flex-shrink: 0; }

/* ── Spieler-Event-Status (Inline-Status zum nächsten Event) ─────── */
.spieler-event-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 12.5px;
}
.spieler-event-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.spieler-event-link:hover { color: var(--color-primary-text); text-decoration: underline; }
.spieler-event-titel { font-weight: 600; color: var(--text-primary); }
.spieler-event-when { color: var(--text-muted); }
.spieler-event-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.spieler-event-select   { width: auto; min-width: 110px; padding: 2px 6px !important; font-size: 12px !important; min-height: 28px !important; }
.spieler-event-kommentar { width: 160px; padding: 2px 6px !important; font-size: 12px !important; min-height: 28px !important; }
.spieler-event-form .btn-icon { width: 28px; height: 28px; }
.spieler-event-kom-zeile {
    flex-basis: 100%;
    color: var(--text-muted);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.spieler-event-kom-zeile strong { color: var(--text-secondary); font-weight: 600; }
/* Zusatzzeile (Typ · Team · Ort) — nur dort befüllt, wo die Karte allein steht (Spieler-Dashboard). */
.spieler-event-meta {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    color: var(--text-muted);
    font-size: 12px;
}

/* ── Status-Chips (Inline-Zusage in Spieler-Listen) ───────────────── */
[x-cloak] { display: none !important; }
.ses-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}
.ses-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    min-height: 32px;                 /* am Schreibtisch wird geklickt, nicht getippt */
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}
.ses-chip i { font-size: 15px; }
.ses-chip:hover { border-color: currentColor; }
/* Beschriftung immer sichtbar — die reine Icon-Reihe war als Bedienelement nicht erkennbar. */
.ses-chip .ses-chip-label { font-weight: 600; }
.ses-more { color: var(--text-muted); padding: 6px 9px; }
/* Tönung je Status (Icon-Farbe im Ruhezustand) */
.ses-yes:hover, .ses-yes.ses-active     { color: #fff; }
.ses-maybe:hover, .ses-maybe.ses-active { color: #1f2937; }
.ses-no:hover, .ses-no.ses-active       { color: #fff; }
.ses-other:hover, .ses-other.ses-active { color: #1f2937; }
.ses-open:hover, .ses-open.ses-active   { color: #fff; }
.ses-nn:hover, .ses-nn.ses-active       { color: #fff; }
/* Aktiver Zustand: Hintergrundfarbe */
.ses-yes.ses-active   { background: #16a34a; border-color: #16a34a; }
.ses-maybe.ses-active { background: #fbbf24; border-color: #fbbf24; }
.ses-no.ses-active    { background: #dc2626; border-color: #dc2626; }
.ses-other.ses-active { background: #38bdf8; border-color: #38bdf8; }
.ses-open.ses-active  { background: #94a3b8; border-color: #94a3b8; }
.ses-nn.ses-active    { background: #64748b; border-color: #64748b; }
.ses-komment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ses-komment-input { width: 170px; padding: 2px 6px !important; font-size: 12px !important; min-height: 28px !important; }
.ses-komment-ok { width: 28px; height: 28px; }

/* ── Foto-Vorschau auf der Event-Detailseite ──────────────────────── */
.event-fotos-vorschau { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.event-fotos-vorschau img {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm, 8px);
    display: block;
}
.event-foto-kachel { position: relative; display: inline-block; }
.event-foto-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    background: rgba(0,0,0,.18);
    border-radius: var(--radius-sm, 8px);
    pointer-events: none;
}
.event-fotos-mehr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 72px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
}

/* ── Navigation Tiles ─────────────────────────────────────────────── */
.nav-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* Mobile: immer zwei Kacheln pro Reihe */
    gap: 12px;
    margin-bottom: 24px;
}
@media (min-width: 768px) { .nav-tile-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } }

.nav-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
    min-height: 120px;
}
.nav-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s;
}
.nav-tile:hover {
    border-color: rgba(var(--color-primary-rgb), 0.40);
    background: var(--bg-surface);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.nav-tile:active { transform: translateY(0); }
.nav-tile:hover::before { transform: scaleX(1); }
/* Gesperrt = im Abo nicht enthalten. Bewusst noch klickbar (fuehrt auf den Premium-Hinweis) und
   nicht ausgegraut bis zur Unlesbarkeit — die Kachel soll ja neugierig machen, nicht kaputt wirken. */
.nav-tile-gesperrt { border-style: dashed; }
.nav-tile-gesperrt .nav-tile-icon { background: var(--bg-muted, rgba(128,128,128,.14)); color: var(--text-secondary); }
.nav-tile-gesperrt .nav-tile-label { color: var(--text-secondary); }
.nav-tile-gesperrt .nav-tile-label .bi-lock-fill { font-size: .8em; opacity: .75; margin-left: 2px; }
.nav-tile-gesperrt::before { background: var(--text-secondary); }
/* Achtung = es liegt wirklich etwas an (Dubletten im Kader). Gegenstueck zu `-gesperrt`:
   dort ist etwas NICHT verfuegbar, hier ist etwas ZU TUN. Deshalb Warnfarbe statt Grau, und
   deshalb steht so eine Kachel nie im Aufklapper — was Aufmerksamkeit braucht, muss sichtbar
   sein. Beide Farbwerte kommen aus demselben Token-Satz: ein Token-Hintergrund mit fester
   Schriftfarbe ergibt in genau einem der beiden Modi Unsichtbarkeit. */
.nav-tile-achtung { border-color: var(--bs-warning, #ffc107); }
.nav-tile-achtung::before { background: var(--bs-warning, #ffc107); transform: scaleX(1); }
.nav-tile-achtung .nav-tile-icon { background: rgba(255, 193, 7, .16); color: var(--bs-warning, #ffc107); }

/* „Weitere Bereiche" — der Aufklapper unter den vier Alltags-Kacheln eines Teams. Die Gruppen
   darin bekommen etwas Luft, damit die Abschnittsueberschriften auch als solche gelesen werden
   und nicht als weitere Kachelzeile. */
.bereiche-mehr > .bereiche-gruppe:first-of-type { margin-top: .5rem; }
.bereiche-gruppe + .bereiche-gruppe { margin-top: 1rem; }

/* Aufklapper fuer die freie Adresseingabe im Termin-Formular. Sieht bewusst nach Bedienelement
   aus (Rahmen, Zeiger, Pfeil) und nicht nach Ueberschrift — sonst haelt man ihn fuer einen
   Abschnittstitel und findet die Felder nicht. */
.ort-details { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ort-details-kopf {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .75rem; cursor: pointer;
    font-size: .88rem; font-weight: 600;
    list-style: none;
}
.ort-details-kopf::-webkit-details-marker { display: none; }
.ort-details-kopf .ort-details-pfeil { margin-left: auto; transition: transform .15s ease; }
.ort-details[open] .ort-details-kopf { border-bottom: 1px solid var(--border); }
.ort-details[open] .ort-details-kopf .ort-details-pfeil { transform: rotate(180deg); }
.ort-details > .row { padding: .75rem; }
.nav-tile-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--primary-bg);
    color: var(--color-primary-text);
    font-size: 22px;
    margin-bottom: 4px;
    transition: background 0.18s, color 0.18s;
}
.nav-tile:hover .nav-tile-icon { background: var(--color-primary); color: var(--color-primary-foreground); }
.nav-tile-label { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-primary); }
.nav-tile-sub   { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }

/* ── Bootstrap Overrides ──────────────────────────────────────────── */
.form-control, .form-select {
    /* background-color statt background: das Shorthand loeschte Bootstraps
       Chevron-Bild — Selects sahen aus wie Textfelder. */
    background-color: var(--bg-input) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
    min-height: var(--tap);
    font-size: 16px !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.18) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }

/* Ausnahme fuer schwebende Beschriftungen: Dort blendet Bootstrap den Platzhalter bewusst aus,
   weil das Label an seiner Stelle steht, solange das Feld leer ist. Die Regel darueber hat das mit
   ihrem `!important` geschlagen — auf Anmeldung und Registrierung lagen deshalb „E-Mail" und
   „name@example.com" uebereinander. */
.form-floating > .form-control::placeholder,
.form-floating > .form-control:focus::placeholder { color: transparent !important; }
.form-select option { background: var(--bg-elevated); color: var(--text-primary); }

.dropdown-menu {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 6px !important;
}
.dropdown-item { color: var(--text-secondary) !important; font-size: 14px !important; border-radius: var(--radius-sm); padding: 8px 12px !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover) !important; color: var(--text-primary) !important; }

.alert { border-radius: var(--radius-md); }
.alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info-text); }

/* ── Utility ──────────────────────────────────────────────────────── */
.gap-8 { gap: 8px; }
.text-accent { color: var(--color-primary-text); }
.font-display { font-family: var(--font-display); }
.divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.text-num { font-family: var(--font-display); font-weight: 700; font-size: 16px; }

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

/* Scrollbar (subtil) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Drawer-Backdrop ──────────────────────────────────────────────── */
#drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
@media (max-width: 900px) {
    body.sidebar-open #drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Bottom Tab-Bar (Mobile-Navigation) ───────────────────────────── */
.bottom-tabbar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: var(--bottombar-bg);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--topbar-border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .bottom-tabbar { box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.4); }

.tabbar-link {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--bottombar-h);
    padding: 6px 4px 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.15s, transform 0.1s;
    font-family: var(--font-body);
}
.tabbar-link i { font-size: 22px; line-height: 1; }
.tabbar-link span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tabbar-link:active { transform: scale(0.94); }
.tabbar-link.active { color: var(--color-primary-text); }
.tabbar-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28%;
    right: 28%;
    height: 3px;
    background: var(--color-primary);
    border-radius: 0 0 3px 3px;
}

/* ── Bootstrap Buttons (Touch-Targets) ────────────────────────────── */
.btn {
    min-height: 40px;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-sm { min-height: 34px; padding: 0.35rem 0.75rem; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 0.75rem 1.5rem; font-size: 15px; }

/* Bootstrap .form-label, .form-text in tokens */
.form-label { color: var(--text-secondary); font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.form-text  { color: var(--text-muted); font-size: 12.5px; }
.invalid-feedback { color: var(--danger-text); font-size: 12.5px; }

/* Context-Switcher kompakt */
.context-switcher { font-size: 13px; }
.context-switcher select { min-height: 36px; font-size: 14px !important; max-width: 200px; text-overflow: ellipsis; }
.context-switcher label { white-space: nowrap; }

/* ── Bottom-Sheet Modal auf Mobile ────────────────────────────────── */
@media (max-width: 700px) {
    .modal.fade .modal-dialog {
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .modal.show .modal-dialog { transform: translateY(0); }

    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh;
        display: flex !important;
        align-items: flex-end;
        pointer-events: none;
    }
    .modal-dialog > * { pointer-events: auto; }
    .modal-content {
        border-radius: 18px 18px 0 0 !important;
        border-bottom: none !important;
        max-height: 92vh;
        width: 100%;
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* Drag-Handle-Cue ganz oben */
    .modal-content::before {
        content: '';
        display: block;
        width: 42px;
        height: 4px;
        border-radius: 4px;
        background: var(--border-strong);
        margin: 10px auto 0;
        flex-shrink: 0;
    }
    .modal-header  { padding: 12px 18px !important; border-bottom-color: var(--border) !important; }
    .modal-body    { padding: 16px 18px !important; overflow-y: auto; }
    .modal-footer  { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)) !important; gap: 8px; }
    .modal-footer .btn { flex: 1 1 auto; min-height: 44px; }
}

/* ── Responsive: Mobile (<= 900px) ────────────────────────────────── */
@media (max-width: 900px) {
    /* Sidebar als Overlay, Default zu */
    #sidebar {
        transform: translateX(-100%);
        box-shadow: none;
        width: min(86vw, 320px);
    }
    #main-wrapper { margin-left: 0; }

    /* sidebar-open schiebt Content NICHT — Sidebar ist Overlay */
    body.sidebar-open #main-wrapper { margin-left: 0; }
    body.sidebar-open #sidebar { box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); }

    /* Bottom-Tab-Bar einblenden */
    .bottom-tabbar { display: flex; align-items: stretch; }

    /* Platz unten freihalten, damit Content nicht hinter Tab-Bar verschwindet */
    #main-wrapper {
        padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom));
    }

    /* Topbar kompakter auf Mobile */
    .topbar { padding: 0 10px; gap: 8px; }
    .topbar-breadcrumb { font-size: 13px; }
    .topbar-breadcrumb .breadcrumb-item:not(.active):not(:last-child) { display: none; }

    /* Auf Mobile: View-Toggle-Label hat eh kein Platz.
       Die Selektoren müssen die Icon-Umschaltung (.view-toggle .icon-show-table) übertreffen —
       mit `.view-toggle-label` allein verlor die Regel und das Wort „Tabelle" stand weiter in der
       Kopfzeile, während der Seitentitel daneben auf zwei Buchstaben zusammenschrumpfte. */
    .view-toggle { padding: 0 8px; }
    .view-toggle .view-toggle-label,
    .view-toggle .view-toggle-label.icon-show-table,
    .view-toggle .view-toggle-label.icon-show-cards { display: none; }

    /* ContextSwitcher schmal halten */
    .context-switcher label { display: none; }
    .context-switcher select { max-width: 130px; }
}

/* ── Mobile-Polish: Cards & Spacing (<= 640px) ────────────────────── */
@media (max-width: 640px) {
    /* Cards: weniger Radius, weniger Padding, näher an Edge-to-Edge */
    .sm-card {
        border-radius: var(--radius-md);
        box-shadow: none;
    }
    .sm-card-header { padding: 12px 14px; }
    .sm-card-body   { padding: 14px; }

    /* Stat-Cards kompakter */
    .stat-card  { padding: 14px 16px; }
    .stat-value { font-size: 26px; }

    /* Filter-Bar: Suchfeld nimmt volle Breite */
    .filter-bar { gap: 8px; }
    .search-input-wrap { flex-basis: 100%; max-width: 100%; }

    /* Page-Header: Subtitle eine Zeile tiefer, Titel etwas kleiner */
    .page-header { margin-bottom: 16px; }
    .page-title { font-size: 24px; }

    /* Action-Group in Listen: Wrap erlauben */
    .action-group { row-gap: 8px; }

    /* Bottom-Sheet-Footer-Buttons schon im Bootstrap-Footer */
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Mannschaften/Statistiken — Teilnahme-Matrix ──────────────────── */
.stat-filter .sm-form-label { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.stat-typ-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-surface);
    cursor: pointer; user-select: none;
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.stat-typ-pill:hover { background: var(--bg-hover); }
.stat-typ-pill input { display: none; }
.stat-typ-pill.active {
    background: rgba(var(--color-primary-rgb), 0.10);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}
.stat-typ-pill i { font-size: 14px; }

.stat-summary {
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
}
.stat-summary-item { color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.stat-summary-item i { color: var(--text-muted); }

.stat-matrix-wrap {
    overflow-x: auto;
    max-height: 70vh;
    overflow-y: auto;
}
.stat-matrix {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 13px;
}
.stat-matrix thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border);
    padding: 8px 6px;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
}
.stat-matrix tbody td {
    padding: 6px;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}
.stat-matrix tbody tr:hover td { background: var(--bg-hover); }

/* Sticky linke Spalten */
.stat-matrix .stat-col-name,
.stat-matrix .stat-col-quote {
    position: sticky;
    background: var(--bg-surface);
    text-align: left;
    z-index: 2;
}
.stat-matrix thead .stat-col-name,
.stat-matrix thead .stat-col-quote {
    background: var(--bg-secondary);
    z-index: 4;
}
.stat-matrix .stat-col-name  { left: 0;      min-width: 180px; max-width: 240px; }
.stat-matrix .stat-col-quote { left: 180px;  min-width: 140px; max-width: 180px; border-right: 1px solid var(--border); }

.stat-name-cell { display: flex; align-items: center; gap: 8px; }
.stat-avatar { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
.stat-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.stat-name-cell a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
.stat-name-cell a:hover { color: var(--color-primary-text); }

.stat-quote-cell {
    position: relative;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    overflow: hidden;
    min-height: 24px;
}
.stat-quote-bar {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: rgba(var(--color-primary-rgb), 0.18);
    transition: width 0.3s;
}
.stat-quote-text { position: relative; font-weight: 600; font-size: 12.5px; }
.stat-quote-text small { color: var(--text-muted); font-weight: 400; }
.stat-quote-cell.stat-quote-high .stat-quote-bar { background: rgba(16,185,129,0.22); }
.stat-quote-cell.stat-quote-mid  .stat-quote-bar { background: rgba(245,158,11,0.22); }
.stat-quote-cell.stat-quote-low  .stat-quote-bar { background: rgba(239,68,68,0.22); }

/* Event-Spalten — kompakt */
.stat-matrix .stat-col-event {
    min-width: 38px; max-width: 48px;
    font-size: 12px;
}
.stat-matrix thead .stat-col-event { padding: 8px 4px; }
.stat-matrix thead .stat-col-event i { font-size: 13px; color: var(--text-muted); }
.stat-col-date { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }

.stat-matrix tbody .stat-col-event i { font-size: 15px; }
.stat-cell-yes   i { color: #16a34a; }
.stat-cell-no    i { color: #dc2626; }
.stat-cell-maybe i { color: #d97706; }
.stat-cell-open  i { color: #94a3b8; }
.stat-cell-nn    i { color: #64748b; }
.stat-cell-other i { color: #0ea5e9; }

[data-theme="dark"] .stat-cell-yes   i { color: #4ade80; }
[data-theme="dark"] .stat-cell-no    i { color: #f87171; }
[data-theme="dark"] .stat-cell-maybe i { color: #fbbf24; }
[data-theme="dark"] .stat-cell-other i { color: #38bdf8; }

@media (max-width: 768px) {
    .stat-matrix .stat-col-name  { min-width: 140px; max-width: 160px; }
    .stat-matrix .stat-col-quote { left: 140px; min-width: 110px; max-width: 130px; }
    .stat-name-cell a { font-size: 12.5px; }
    .stat-quote-text { font-size: 11.5px; }
}

/* ── Events/Index — ausklappbare Roster-Zeile pro Event ─────────────── */
.event-roster-row td.event-roster-cell {
    padding: 0;
    background: var(--bg-secondary);
    border-top: none;
    cursor: default;
}
.event-roster-row:hover { background: transparent !important; }
.event-roster-inner {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.event-roster-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.event-roster-avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.event-roster-avatar-img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.event-roster-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Roster nach Status gruppiert — Status-Tabs im aufgeklappten Event-Roster */
.event-roster-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.event-roster-tabs .nav-item { margin: 0; }
.event-roster-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
}
.event-roster-tab i { font-size: 14px; }
.event-roster-tab .ert-tab-count {
    font-variant-numeric: tabular-nums;
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
}
.event-roster-tab.active { color: #fff; border-color: transparent; }
.event-roster-tab.active .ert-tab-count { background: rgba(255,255,255,0.25); color: #fff; }

/* Aktive Tab-Farbe je Status */
.event-roster-tab.ert-yes.active   { background: #059669; }
.event-roster-tab.ert-maybe.active { background: #d97706; }
.event-roster-tab.ert-open.active  { background: #64748b; }
.event-roster-tab.ert-no.active    { background: #dc2626; }
.event-roster-tab.ert-other.active { background: #0284c7; }
.event-roster-tab.ert-nn.active    { background: #475569; }

@media (max-width: 420px) { .event-roster-tab .ert-tab-label { display: none; } }

.event-roster-tabcontent { margin-top: 2px; }
.event-roster-tabcontent .tab-pane.active {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Card-View: Roster-Zeile spannt sich über die volle Grid-Breite */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr.event-roster-row {
    grid-column: 1 / -1;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: none;
    margin-top: -8px;
}
/* Eingeklappte Teilnehmer-Zeile belegt keinen Grid-Slot → erlaubt, dass
   mehrere Event-Cards je nach Breite nebeneinander liegen. Beim Ausklappen
   (.collapse.show / .collapsing) wird die Zeile wieder volle Breite sichtbar. */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr.event-roster-row:not(:has(.collapse.show)):not(:has(.collapsing)) {
    display: none;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tr.event-roster-row td.event-roster-cell {
    display: block;
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
}
body.data-view-cards:not(.admin-desktop) .page-content tr.event-roster-row td.event-roster-cell::before { content: none; }

/* ── Icon-Picker (wiederverwendbare Komponente) ───────────────────────── */
.icon-picker { position: relative; display: inline-block; min-width: 12rem; }
.icon-picker-trigger { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; cursor: pointer; }
.icon-picker-trigger > .bi:first-child { font-size: 1.15rem; }
.icon-picker-empty { color: var(--text-muted); display: inline-flex; align-items: center; gap: .4rem; }
.icon-picker-label { color: var(--text-secondary); }
.icon-picker-caret { margin-left: auto; color: var(--text-muted); }
.icon-picker-panel {
    /* Position/Breite werden inline als position:fixed gesetzt (icon-picker.js),
       damit das Panel nicht von Card-/Overflow-Containern abgeschnitten wird. */
    z-index: 1080; padding: .6rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.icon-picker-search { margin-bottom: .5rem; }
.icon-picker-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem;
    max-height: 14rem; overflow-y: auto;
}
.icon-picker-cell {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1; min-height: var(--tap);
    background: var(--bg-subtle); border: 1px solid transparent;
    border-radius: var(--radius-sm); cursor: pointer; font-size: 1.2rem; color: var(--text-primary);
}
.icon-picker-cell:hover { background: var(--bg-hover); }
.icon-picker-cell.active { border-color: var(--color-primary); color: var(--color-primary-text); }
.icon-picker-none { grid-column: 1 / -1; color: var(--text-muted); padding: .5rem; text-align: center; }
.icon-picker-clear { margin-top: .5rem; width: 100%; justify-content: center; }

/* ============================================================
   Stock-Bild-Auswahl (_StockBildPicker.cshtml / stock-picker.js)
   ============================================================ */
[x-cloak] { display: none !important; }

/* Betreuerstab und Angehoerige unter dem Kader — eine Zeile je Person, drei Ebenen:
   Name, Rolle, Kontakt. Bewusst keine Tabelle: Es sind selten mehr als eine Handvoll. */
.team-liste { list-style: none; margin: 0; padding: 0; }
.team-liste li { padding: .6rem .9rem; border-top: 1px solid var(--border-color); }
.team-liste li:first-child { border-top: 0; }
.team-liste-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.team-liste-rolle { font-size: 12px; color: var(--text-muted); }
.team-liste-kontakt { font-size: 12px; margin-top: .15rem; }
.team-liste-kontakt a { color: var(--text-secondary); }

/* ── Hashtag-Vorschläge zum fertigen Reel ─────────────────────────────── */
.reel-hashtags { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.reel-hashtags-titel {
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 6px;
}
.reel-hashtags-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.reel-hashtag {
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-muted); border-radius: 999px;
    padding: 4px 11px; font-size: 13px; line-height: 1.3; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.reel-hashtag:hover { border-color: rgba(var(--color-primary-rgb), .45); }
.reel-hashtag.aktiv {
    background: rgba(var(--color-primary-rgb), .12);
    border-color: rgba(var(--color-primary-rgb), .45);
    color: var(--color-primary);
}
/* #kaderheld gehoert immer dazu — sichtbar dabei, aber nicht abwaehlbar. */
.reel-hashtag.pflicht { cursor: default; opacity: 1; }
.reel-hashtag.pflicht:hover { border-color: rgba(var(--color-primary-rgb), .45); }
.reel-hashtags-zeile {
    margin-top: 8px; font-size: 12px; color: var(--text-muted);
    word-break: break-word;
}
.reel-hashtags-ok { border-color: var(--success, #22c55e) !important; color: var(--success, #22c55e) !important; }

/* Ein Link je Rolle — als eigene Einheit lesbar, sonst laufen Kopieren-Knopf und
   Abschalten-Knopf zweier Rollen ineinander. */
.rollen-link {
    padding: .85rem 0 1rem;
    border-top: 1px solid var(--border-color);
}
.rollen-link:first-of-type { border-top: 0; padding-top: .25rem; }

/* ── Reel-Hintergrund: eine Zeile, ein Panel ──────────────────────────────
   Vorher standen Datei-Knopf, zwei Kamera-Knoepfe und die aufklappbare Bildquelle
   gleichrangig untereinander. Jetzt zeigt die Zeile, was gilt, und erst „Aendern"
   oeffnet die Wege. */
.reel-hg-zeile {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--bg-elevated);
}
.reel-hg-thumb {
    flex: 0 0 auto; width: 38px; height: 50px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-subtle, rgba(127, 127, 127, .12));
    border: 1px solid var(--border-color);
    color: var(--text-muted); font-size: 18px; overflow: hidden;
}
.reel-hg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-hg-thumb.gewaehlt { border-color: var(--color-primary); }
.reel-hg-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.reel-hg-titel {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reel-hg-unter {
    font-size: 12px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reel-hg-oeffnen { flex: 0 0 auto; white-space: nowrap; }
.reel-hg-entfernen { flex: 0 0 auto; font-size: .7rem; }
.reel-hg-status { font-size: 13px; color: var(--text-muted); margin-top: 6px; }

.reel-hg-panel {
    margin-top: 8px; padding: 10px;
    border: 1px solid var(--border-color); border-radius: 8px;
    background: var(--bg-elevated);
}
/* Zugeklappt wird erst per Skript (Klasse „offen" fehlt dann); ohne JavaScript bleibt alles
   sichtbar — sonst waere der Datei-Weg nicht mehr erreichbar. */
.reel-hg-panel.reel-hg-panel-zu { display: none; }
.reel-hg-wege { display: none; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.reel-hg-wege.bereit { display: flex; }
.reel-hg-weg-knopf {
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-secondary); border-radius: 999px;
    padding: 5px 12px; font-size: 13px; line-height: 1.2; cursor: pointer;
}
.reel-hg-weg-knopf:hover { border-color: rgba(var(--color-primary-rgb), .4); }
.reel-hg-weg-knopf.active {
    background: var(--color-primary); border-color: var(--color-primary);
    color: var(--color-primary-foreground);
}
/* Eingebettet: der Picker steckt schon im Panel und braucht keinen zweiten Rahmen. */
.sm-stock-panel.sm-stock-panel-flach {
    border: 0; padding: 0; background: transparent; margin: 0;
}

.sm-stock-panel {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px;
}
.sm-stock-hinweis {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--primary-bg);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
}
.sm-stock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sm-chip {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-primary);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all .12s ease;
}
.sm-chip:hover { border-color: var(--color-primary); color: var(--color-primary-text); }

.sm-stock-controls { display: flex; gap: 6px; margin-bottom: 8px; }
.sm-stock-search { flex: 1; }
.sm-stock-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sm-toggle {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}
.sm-toggle:first-child { border-radius: 8px 0 0 8px; }
.sm-toggle:last-child { border-radius: 0 8px 8px 0; }
.sm-toggle.active { background: var(--color-primary); color: var(--color-primary-foreground); border-color: var(--color-primary); }

.sm-stock-status { font-size: 13px; color: var(--text-muted); padding: 6px 0; }

.sm-stock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
}
.sm-stock-item {
    position: relative;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3 / 4;
    background: var(--primary-bg);
}
.sm-stock-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-stock-item:hover { border-color: var(--color-primary); }
.sm-stock-item:disabled { opacity: .6; cursor: default; }
.sm-stock-badge {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,.6); color: #fff; border-radius: 6px;
    width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.sm-stock-cred {
    position: absolute; bottom: 0; left: 0; right: 0;
    font-size: 9px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7));
    padding: 8px 4px 3px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.sm-stock-lade {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35); color: #fff;
}
.sm-stock-mehr { text-align: center; margin-top: 10px; }

.sm-stock-gewaehlt { display: inline-flex; align-items: center; vertical-align: middle; }
.sm-stock-thumb-mini { width: 28px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border-color); }


/* ═══ Spieler-Karten: Team steht in der Meta-Zeile des Kopfs —
   die eigene TEAM-Zeile wuerde nur doppeln. ═══ */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.spieler-karten tbody tr > td[data-label="Team"] {
    display: none !important;
}


/* ═══ Events- & Mannschafts-Karten: Faktenzeile statt Label-Raster ═══════
   Ueberarbeitung 04.08.2026 ("zu gequetscht"): das Zwei-Spalten-Raster
   presste Werte in halbe Kartenbreiten. Jetzt gilt die Hierarchie der
   freigegebenen Spieler-Karte: Identitaet gross, darunter EINE ruhige
   Faktenzeile mit selbsterklaerenden Werten (Labels nur, wo der Wert
   allein nichts sagt), Aktionen im Fuss. */

/* --- Events --- */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody tr > td[data-label="Titel"] {
    padding: 2px 14px 6px;
    font-size: 15px;
    font-weight: 650;
    color: var(--text-primary);
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody tr > td[data-label="Titel"]::before {
    content: none;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody tr > td[data-label="Typ"],
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody tr > td[data-label="Mannschaft"],
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody tr > td[data-label="Ort"] {
    flex: 0 1 auto;
    min-width: 0;
    padding: 2px 0 2px 14px;
    align-items: center;
    font-size: 12.5px;
    color: var(--text-secondary);
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody tr > td[data-label="Typ"]::before,
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody tr > td[data-label="Mannschaft"]::before,
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody tr > td[data-label="Ort"]::before {
    content: none;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody tr > td[data-label="Mannschaft"] {
    text-align: left;
}

/* --- Mannschaften --- */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Saison"],
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Bewerb"],
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Spieler"],
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Trainer"] {
    flex: 0 1 auto;
    min-width: 0;
    padding: 2px 0 2px 14px;
    align-items: center;
    font-size: 12.5px;
    color: var(--text-secondary);
    text-align: left;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Saison"]::before,
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Bewerb"]::before,
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Spieler"]::before {
    content: none;
}
/* "6" allein sagt nichts — Einheit direkt an die Zahl haengen */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Spieler"] .text-num::after {
    content: " Spieler";
    font-weight: 400;
    color: var(--text-secondary);
}
/* Trainer behaelt sein kleines Label — ein Name allein sagt nicht, wer er ist */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Trainer"]::before {
    font-size: 9.5px;
}
/* Aktionen (Modal-Button ohne .action-group) als Fusszeile wie bei Spielern */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Aktionen"] {
    flex: 1 1 100%;
    min-width: 100%;
    margin-top: auto;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    padding: 5px 8px;
    justify-content: flex-end;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Aktionen"]::before {
    content: none;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Aktionen"] .btn-icon[title="Aktionen"] {
    width: auto;
    /* Zweite Fundstelle derselben 32px-Zeile: die Mannschaftskarte bringt ihre eigene
       Fusszeile mit (samt eigener Art, die Beschriftung anzuhaengen — ::after statt eines
       Spans). Wer die Hoehe nur an einer Stelle korrigiert, laesst die andere stehen. */
    min-height: var(--tap);
    padding: 0 10px;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--color-primary-text);
    border-radius: 8px;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Aktionen"] .btn-icon[title="Aktionen"]:hover {
    background: var(--primary-bg);
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.mannschafts-karten tbody tr > td[data-label="Aktionen"] .btn-icon[title="Aktionen"]::after {
    content: "Aktionen";
    font-size: 12.5px;
    font-weight: 600;
}


/* Karten sind umbruchfaehige Zeilen: normale Zellen behalten volle Breite,
   Fakt-Zellen (unten) koennen nebeneinander fliessen. cards-dense hat sein
   eigenes 45%-Raster und bleibt unangetastet. */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view):not(.cards-dense) tbody tr,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view):not(.cards-dense) tbody tr {
    flex-flow: row wrap;
    align-content: flex-start;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view):not(.cards-dense) tbody tr > td,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view):not(.cards-dense) tbody tr > td {
    flex: 1 1 100%;
    min-width: 100%;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view):not(.cards-dense) tbody tr > td:last-child:has(.action-group),
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view):not(.cards-dense) tbody tr > td:last-child:has(.action-group) {
    margin-top: auto;
}

/* ═══ Generische Faktenzeile fuer alle Karten-Tabellen ═══════════════════
   th.k-fakt bzw. th.k-fakt-label im thead markiert die Spalte; site.js
   uebertraegt die Klasse auf die Zellen. k-fakt = Wert spricht fuer sich
   (Label weg), k-fakt-label = Wert braucht sein kleines Label. Beide
   fliessen nebeneinander in einer ruhigen Zeile. */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td.k-fakt,
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td.k-fakt-label,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td.k-fakt,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td.k-fakt-label {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding: 2px 0 2px 14px;
    align-items: center;
    font-size: 12.5px;
    color: var(--text-secondary);
    text-align: left;
    word-break: normal;
    overflow-wrap: break-word;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td.k-fakt::before,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td.k-fakt::before {
    content: none;
}
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table:not(.no-card-view) tbody tr > td.k-fakt-label::before,
body.data-view-cards:not(.admin-desktop) .page-content table.table:not(.no-card-view) tbody tr > td.k-fakt-label::before {
    font-size: 9.5px;
}


/* ═══ Design-Audit 04.08.2026: Luecken im Button-/Card-System ════════════
   1) .sm-card-footer wurde auf 13 Seiten benutzt, war aber nie definiert —
      die Buttons klebten dadurch auf der unteren Kartenkante. */
.sm-card-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    gap: 10px;
}
/* 2) Rohe Bootstrap-Buttons (btn btn-primary, 18 Stellen) folgen jetzt den
      Design-Tokens, damit sie den Vereinsfarben und der btn-*-sm-Optik
      entsprechen statt Bootstrap-Standardblau. */
.btn.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-foreground);
    font-weight: 600;
    border-radius: var(--radius-sm);
}
.btn.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
/* 3) Nativer Datei-Input ("Choose Files") bekam nie das Button-Design. */
input[type="file"].form-control::file-selector-button,
input[type="file"]::file-selector-button {
    background: var(--primary-bg);
    color: var(--color-primary-text);
    border: 1px solid rgba(var(--color-primary-rgb), 0.30);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    margin-right: 10px;
    font-weight: 600;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: rgba(var(--color-primary-rgb), 0.16); }


/* Entscheidung 04.08.2026: EINE Akzentfarbe fuer Aktionen — gruene
   Bootstrap-Buttons folgen den Design-Tokens (Rot bleibt fuer Gefahr). */
.btn.btn-success {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-foreground);
}
.btn.btn-success:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn.btn-outline-success {
    color: var(--color-primary-text);
    border-color: rgba(var(--color-primary-rgb), 0.45);
    background: transparent;
}
.btn.btn-outline-success:hover {
    background: var(--primary-bg);
    color: var(--color-primary-text);
    border-color: var(--color-primary);
}


/* ═══ Positions-Chips (TW/AB/MF/ST) ══════════════════════════════════════
   04.08.2026: Klartext-Positionen wirkten wie Beiwerk und rohe Werte sagte
   niemandem etwas. Farbkonvention wie im Fussball ueblich: Torwart gelb,
   Abwehr blau, Mittelfeld gruen, Sturm rot. Voller Name im title. */
.pos-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.pos-chip.pos-tw { background: rgba(245, 179, 1, 0.18);  color: #9a6b00; border: 1px solid rgba(245, 179, 1, 0.45); }
.pos-chip.pos-ab { background: rgba(13, 110, 253, 0.14); color: #0b5ed7; border: 1px solid rgba(13, 110, 253, 0.40); }
.pos-chip.pos-mf { background: rgba(25, 135, 84, 0.14);  color: #157347; border: 1px solid rgba(25, 135, 84, 0.40); }
.pos-chip.pos-st { background: rgba(220, 53, 69, 0.12);  color: #bb2d3b; border: 1px solid rgba(220, 53, 69, 0.40); }
[data-theme="dark"] .pos-chip.pos-tw { color: #ffd75e; }
[data-theme="dark"] .pos-chip.pos-ab { color: #7ab3ff; }
[data-theme="dark"] .pos-chip.pos-mf { color: #63d9a0; }
[data-theme="dark"] .pos-chip.pos-st { color: #ff8b95; }

/* Legende zu den Positions-Chips (unter der Ersatzbank) */
.pos-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-secondary);
}
.pos-legende > span { display: inline-flex; align-items: center; gap: 5px; }


/* Schwebende Erfolgsmeldung (04.08.2026): ein vollbreiter gruener Banner
   schob die halbe Seite nach unten — eine Bestaetigung darf nicht stoeren. */
.sm-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: min(360px, calc(100vw - 40px));
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border);
    border-left: 3px solid #157347;
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.16);
    font-size: 13.5px;
    color: var(--text-primary);
}
.sm-toast i { color: #157347; font-size: 15px; }
@media (max-width: 700px) {
    .sm-toast { right: 12px; left: 12px; bottom: 76px; max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ADMIN-DESKTOP
   Der Adminbereich wird am Notebook bedient, nicht am Handy. Dort gilt
   deshalb durchgehend die dichte Tabellenansicht über die volle Breite —
   der globale Karten-Umschalter (body.data-view-cards) ist per
   :not(.admin-desktop) an allen Karten-Regeln ausgenommen. Die Klasse
   setzt _Layout.cshtml anhand des Pfad-Präfixes /Admin.
   ═════════════════════════════════════════════════════════════════════ */

/* Volle Breite statt der 1280px-Lesespalte. */
body.admin-desktop .page-content {
    max-width: none;
}

/* Der Umschalter in der Topbar hat hier keine Wirkung mehr — also weg damit. */
body.admin-desktop .view-toggle { display: none; }

/* Elemente, die nur die Kartenansicht braucht (Tabelle hat eigene Spalten). */
body.admin-desktop .nur-karten { display: none; }

/* ── Dichte Tabellen ──────────────────────────────────────────────── */
body.admin-desktop .sm-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-secondary);
    white-space: nowrap;
}
body.admin-desktop .sm-table td {
    padding: 9px 12px;
    font-size: 13.5px;
    vertical-align: middle;
}
body.admin-desktop .sm-table thead th { padding: 8px 12px; }
/* Zebra, wie in der Notenheld-Verwaltung — erleichtert das Zeilenlesen
   über die volle Bildschirmbreite. */
body.admin-desktop .sm-table tbody tr:nth-child(even) { background: var(--bg-secondary); }
body.admin-desktop .sm-table tbody tr:hover { background: var(--bg-hover); }

/* ── Toolbar über Listen (Suche, Filter, Zähler) ──────────────────── */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.admin-toolbar .admin-search { position: relative; flex: 1 1 240px; max-width: 340px; }
.admin-toolbar .admin-search input { width: 100%; padding-left: 32px; }
.admin-toolbar .admin-search > i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none; font-size: 14px;
}
.admin-toolbar .admin-count { margin-left: auto; font-size: 12.5px; color: var(--text-muted); }

/* ── KPI-Leiste (Haarlinien-Raster wie in Notenheld) ──────────────── */
.admin-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 16px;
}
.admin-kpi > div { background: var(--bg-surface); padding: 10px 14px; }
.admin-kpi .lbl {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}
.admin-kpi .lbl .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.admin-kpi .val {
    font-size: 21px; font-weight: 700; color: var(--text-primary);
    line-height: 1.1; margin-top: 3px;
}

/* ── Medien-Raster ────────────────────────────────────────────────── */
.medien-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}
.medien-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, box-shadow .15s;
}
.medien-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 14px rgba(17, 24, 39, .07); }
.medien-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--bg-secondary);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-in;
    overflow: hidden;
}
.medien-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.medien-thumb .fehlt {
    display: none; flex-direction: column; align-items: center; gap: 4px;
    color: var(--text-muted); font-size: 11.5px; text-align: center; padding: 8px;
}
.medien-thumb .fehlt i { font-size: 22px; }
.medien-badge {
    position: absolute; top: 6px; right: 6px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 2px 6px; border-radius: 5px;
    background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary);
}
.medien-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.medien-name {
    font-size: 12.5px; font-weight: 600; color: var(--text-primary);
    word-break: break-word; line-height: 1.3;
}
.medien-meta { font-size: 11.5px; color: var(--text-muted); }
.medien-pfad { display: flex; align-items: center; gap: 4px; }
.medien-pfad code {
    flex: 1; min-width: 0; font-size: 10.5px; color: var(--text-secondary);
    background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 5px;
    padding: 2px 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.medien-aktionen {
    display: flex; gap: 6px; margin-top: auto; padding-top: 8px;
    border-top: 1px solid var(--border);
}
.medien-aktionen > * { flex: 1; }

/* ── Lightbox ─────────────────────────────────────────────────────── */
.medien-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 23, 42, .88);
    display: none; align-items: center; justify-content: center; padding: 32px;
}
.medien-lightbox.offen { display: flex; }
.medien-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.medien-lightbox .schliessen {
    position: absolute; top: 12px; right: 18px;
    background: none; border: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.medien-lightbox .bildunterschrift {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    color: #e2e8f0; font-size: 12.5px; background: rgba(0, 0, 0, .45);
    padding: 5px 12px; border-radius: 8px; max-width: 80%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Baumansicht der Website-Beiträge ─────────────────────────────── */
.baum-tabelle tr.baum-ordner { background: var(--bg-secondary); }
.baum-tabelle tr.baum-toggle { cursor: pointer; }
.baum-tabelle .baum-pfeil { transition: transform .15s ease-in-out; color: var(--text-muted); }
.baum-tabelle tr.offen .baum-pfeil { transform: rotate(90deg); }
/* Zebra darf die Ordnerfarbe nicht überschreiben. */
body.admin-desktop .baum-tabelle tbody tr.baum-ordner:nth-child(even),
body.admin-desktop .baum-tabelle tbody tr.baum-ordner { background: var(--bg-secondary); }

/* ── Aufklappbare Sidebar-Gruppe (Website-Verwaltung) ─────────────── */
.sidebar-group > summary {
    list-style: none;           /* Firefox: Standard-Dreieck weg */
    cursor: pointer;
}
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group > summary::marker { content: ""; }
/* Der Pfeil sitzt rechts und dreht sich beim Aufklappen. */
.sidebar-group .sidebar-group-pfeil {
    margin-left: auto;
    font-size: 12px !important;
    width: auto !important;
    color: var(--text-muted);
    transition: transform 0.15s ease-in-out;
}
.sidebar-group[open] .sidebar-group-pfeil { transform: rotate(180deg); }

.sidebar-subnav {
    list-style: none;
    padding: 0;
    margin: 0 0 4px 0;
}
/* Einzug plus Führungslinie, damit die Zugehörigkeit auch bei
   aktivem Unterpunkt sichtbar bleibt. */
.sidebar-subnav > li { position: relative; padding-left: 26px; }
.sidebar-subnav > li::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 0;
    bottom: 2px;
    width: 1px;
    background: var(--sidebar-border, var(--border));
}
.sidebar-sublink {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13.5px;
}
.sidebar-sublink i { font-size: 15px !important; }

/* ── Helfer-Block auf der Terminseite ────────────────────────────────────────
   Bewusst hier und nicht als @section Styles in Details.cshtml: dort liegt der
   Style-Abschnitt innerhalb von "@if (OrtLatitude.HasValue)" und faellt bei
   jedem Termin ohne Koordinaten ersatzlos weg. */
.helfer-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.helfer-item { padding: .75rem 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.helfer-item:last-child { border-bottom: 0; padding-bottom: 0; }
.helfer-item.gedeckt { opacity: .72; }
.helfer-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.helfer-titel { font-weight: 650; }
.helfer-meta { font-size: .85rem; color: var(--text-secondary); margin-top: .15rem; }
.helfer-anfrage { margin-top: .5rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.helfer-fragen { margin-top: .5rem; display: flex; gap: .4rem; align-items: center; max-width: 26rem; }
.helfer-fragen .form-select { flex: 1 1 auto; }

/* ── Spieler-Wahl (Stimmzettel, Sieger) ──────────────────────────────────────
   Wie beim Helfer-Block bewusst hier und nicht als @section Styles in der
   Seite — Seiten-CSS ist dort doppelt bedingt und faellt still weg. */
.wahl-kandidat {
    padding: .6rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.wahl-kandidat:last-of-type { border-bottom: 0; }
/* Gesperrte Kandidaten bleiben sichtbar (mit Begruendung) — ein fehlender Name
   wirkt wie ein Fehler, nicht wie eine Regel. */
.wahl-kandidat.gesperrt { opacity: .55; }
.wahl-kandidat-kopf {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    margin: 0;
    cursor: pointer;
}
.wahl-kandidat.gesperrt .wahl-kandidat-kopf { cursor: default; }
.wahl-kandidat-name { flex: 1 1 auto; font-weight: 600; }
.wahl-nummer {
    display: inline-block;
    min-width: 1.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: 700;
}
.wahl-punkte { padding: .5rem 0 .25rem 3.4rem; display: flex; flex-direction: column; gap: .6rem; }
.wahl-kriterium .form-label { margin-bottom: .15rem; font-size: .9rem; }
.wahl-regler { display: flex; align-items: center; gap: .75rem; }
.wahl-regler .form-range { flex: 1 1 auto; }
.wahl-regler output {
    min-width: 2.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
@media (max-width: 575.98px) {
    .wahl-punkte { padding-left: 0; }
}

.wahl-sieger .wahl-pokal { font-size: 2.6rem; line-height: 1; color: var(--club-primary, #f0b429); }

/* Auszeichnung auf dem Dashboard */
.dash-auszeichnung { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.dash-auszeichnung-vorschau {
    width: 108px;
    flex: 0 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.dash-auszeichnung-vorschau img { width: 100%; display: block; }
.dash-auszeichnung-text { flex: 1 1 12rem; min-width: 0; }

/* Zugeklappter Kosten-Abschnitt im Event-Formular ──────────────────────────
   Kosten sind der Ausnahmefall; der Abschnitt soll erkennbar aufklappbar sein,
   ohne wie ein Fehler auszusehen, wenn er zu ist. */
.kosten-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.kosten-summary::-webkit-details-marker { display: none; }
.kosten-summary::after { content: "\F282"; font-family: "bootstrap-icons"; color: var(--text-muted); font-size: 14px; }
details[open] > .kosten-summary::after { content: "\F286"; }

/* ── Teilen: der zweite Schritt ───────────────────────────────────
   Ist die Datei geholt, aber die Geste des ersten Klicks abgelaufen, wartet der Knopf auf ein
   zweites Tippen (siehe _ReelListe.cshtml und Events/Medien.cshtml). Ohne sichtbare Hervorhebung
   sieht er aus wie vorher — und niemand tippt noch einmal. */
.teilen-bereit,
.reel-share-bereit {
    color: var(--color-primary-text) !important;
    animation: teilenBereit 1.2s ease-in-out infinite;
}
@keyframes teilenBereit {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

/* Der Reel-Knopf traegt nur ein Icon — dort darf es das kraeftigere Pochen sein. Bei einem
   beschrifteten Knopf würde dasselbe Skalieren die ganze Zeile verschieben. */
.reel-share-bereit {
    animation: reelShareBereit 1.2s ease-in-out infinite;
}
@keyframes reelShareBereit {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.28); }
}

/* ── Aufklappbare Formular-Abschnitte (/Vereine/Edit) ──────────────────
   Die Seite ist lang; aufgeklappt ist nur, was noch etwas braucht. Der Kopf ist
   ein <summary> und erbt deshalb die Optik von .sm-card-header — er zeigt
   zusätzlich, ob der Abschnitt schon befüllt ist. */
.klapp-karte > .klapp-kopf {
    cursor: pointer;
    list-style: none;              /* Firefox/Chrome: eigenes Dreieck weg */
    user-select: none;
}
.klapp-karte > .klapp-kopf::-webkit-details-marker { display: none; }
.klapp-karte:not([open]) > .klapp-kopf { border-bottom-color: transparent; }
.klapp-karte > .klapp-kopf:hover { background: var(--bg-subtle, rgba(0, 0, 0, 0.02)); }
.klapp-karte > .klapp-kopf:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Der Status schiebt sich zwischen Titel und Pfeil und darf umbrechen —
   „Ohne IBAN können Mitglieder …" ist auf dem Telefon länger als der Titel. */
.klapp-status {
    margin-left: auto;
    font-size: 12px;
    line-height: 1.3;
    text-align: right;
}
.klapp-fertig { color: var(--success, #198754); }
.klapp-offen  { color: var(--text-muted); }

.klapp-pfeil {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.klapp-karte[open] > .klapp-kopf .klapp-pfeil { transform: rotate(180deg); }

@media (max-width: 560px) {
    /* Auf schmalen Geräten wird der Hinweis sonst zur zweispaltigen Quetschung. */
    .klapp-karte > .klapp-kopf { flex-wrap: wrap; }
    .klapp-status { flex-basis: 100%; margin-left: 0; text-align: left; }
}

/* ── Wochentage einer Serie mit eigenem Ort ────────────────────────────
   Je Tag eine Zeile: Haken links, darunter (bzw. daneben) Ort und Platz. Sichtbar wird der
   Ort-Block erst, wenn der Tag angehakt ist — sieben Zeilen auf Vorrat wären eine Wand. */
.serie-tage { display: flex; flex-direction: column; gap: .5rem; }
.serie-tag {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
/* Feste Breite fuer den Haken, damit die Ortsfelder aller Tage in einer Flucht stehen. */
.serie-tag > .form-check { flex: 0 0 4.5rem; margin: 0; }
.serie-tag-ort { display: flex; gap: .5rem; flex: 1 1 20rem; min-width: 0; }
.serie-tag-ort select { flex: 1 1 0; min-width: 0; }

@media (max-width: 560px) {
    /* Nebeneinander bleibt vom Ortsnamen nichts uebrig — also untereinander. */
    .serie-tag { align-items: flex-start; }
    .serie-tag-ort { flex-basis: 100%; flex-direction: column; }
}

/* ── Serie ändern: die Vorschau, die zur Warnung wird ──────────────────
   Loeschende Aenderungen bekommen eine rote Oberkante statt der Vereinsfarbe — sonst sieht die
   Karte aus wie jede andere, und die Zeile „N Termine werden geloescht" geht darin unter. */
.serie-warnung { border-top-color: var(--danger, #dc3545); }
.serie-warnung .sm-card-title { color: var(--danger, #dc3545); }

/* Untergeordneter Sidebar-Eintrag (z. B. die Akquise-Anleitung unter „Akquise"): eingerückt und
   leiser, damit er als Beiwerk lesbar ist und nicht als eigener Bereich. */
.sidebar-link-sub {
    padding-left: 2.35rem;
    font-size: .86rem;
    opacity: .78;
}
.sidebar-link-sub:hover { opacity: 1; }

/* ═══ Spalten, die es nur in EINER Ansicht gibt ═══════════════════════════
   `.nur-karten` (weiter oben) blendet in der Tabellenansicht aus. Das
   Gegenstueck fehlte: eine Spalte, die in der Tabelle richtig steht, in der
   Karte aber nur stoert. Beispiel Spieleliste — dort sind Heim/Ergebnis/Gast
   drei Spalten, weil eine Tabelle Spalten hat; in der Karte werden daraus drei
   rechtsbuendige Zeilen, bei denen die Heimmannschaft ihren Namen VOR dem
   Wappen traegt und die Gastmannschaft dahinter. Die Karte zeigt stattdessen
   einen Begegnungs-Block (`.k-begegnung`). */
body.data-view-cards:not(.admin-desktop) .page-content table td.nur-tabelle,
body.data-view-cards:not(.admin-desktop) .page-content table th.nur-tabelle { display: none !important; }

/* ═══ Zeit-Tabs (Anstehend / Ergebnisse / Alle) ══════════════════════════ */
.zeit-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.zeit-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.zeit-tab:hover { color: var(--text-primary); }
.zeit-tab.active {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    box-shadow: 0 1px 2px rgba(17, 24, 39, .12);
}
.zeit-tab-count {
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

/* ═══ Begegnungs-Block (Kartenansicht der Spieleliste) ═══════════════════
   Zwei Zeilen, beide gleich gebaut: Wappen, Name, Tore. Dadurch stehen die
   Wappen untereinander in einer Flucht und die Tore ebenso — man liest die
   Paarung in einem Blick statt sie aus drei rechtsbuendigen Zeilen
   zusammenzusetzen. Die eigene Mannschaft ist fett, damit sofort klar ist,
   welche Seite man selbst ist. */
.k-begegnung { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.k-begegnung-zeile { display: flex; align-items: center; gap: 9px; min-width: 0; }
.k-begegnung-wappen {
    width: 26px; height: 26px; flex-shrink: 0;
    object-fit: contain;
}
.k-begegnung .avatar-circle.k-begegnung-wappen { font-size: 10px; font-weight: 700; }
.k-begegnung-name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 14px;
    line-height: 1.25;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.k-begegnung-zeile.ist-uns .k-begegnung-name { font-weight: 700; color: var(--text-primary); }
.k-begegnung-tore {
    flex-shrink: 0;
    min-width: 1.4em;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.k-begegnung-zeile.hat-verloren .k-begegnung-tore { color: var(--text-muted); font-weight: 600; }
.k-begegnung-satzliste { font-size: 11.5px; color: var(--text-muted); padding-left: 35px; }

/* Die Begegnung ist der Inhalt der Karte, nicht eine Zeile darin — kein Label,
   volle Breite, etwas Luft nach unten. */
body.data-view-cards:not(.admin-desktop) .page-content table tbody tr > td.k-begegnung-zelle {
    padding: 4px 14px 10px;
    justify-content: flex-start;
    text-align: left;
}
body.data-view-cards:not(.admin-desktop) .page-content table tbody tr > td.k-begegnung-zelle::before { content: none; }

/* ── Aktionen an einem fertigen Reel (Teilen · Herunterladen · Loeschen) ──────
   Sie standen als `btn-link p-0` in einer Zeile mit `font-size:.78rem` und erbten
   deren Groesse — gut zwoelf Pixel Icon, ohne Flaeche drumherum. Am Telefon war das
   kaum zu treffen, und getroffen werden muessen sie: Teilen ist die Handlung, fuer
   die das ganze Reel gemacht wurde. */
.reel-aktionen { display: inline-flex; align-items: center; gap: 2px; }
.reel-aktion {
    display: inline-flex; align-items: center; justify-content: center;
    /* 40 px: die uebliche Mindestgroesse fuer eine Tippflaeche. Der Rahmen bleibt
       unsichtbar, sichtbar ist er erst beim Beruehren. */
    width: 40px; height: 40px;
    padding: 0; border: none; background: transparent;
    border-radius: var(--radius-sm);
    color: var(--color-primary-text);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.reel-aktion i { font-size: 20px; line-height: 1; }
.reel-aktion:hover, .reel-aktion:focus-visible { background: var(--primary-bg); color: var(--color-primary-text); }
.reel-aktion-danger { color: var(--danger-text); }
.reel-aktion-danger:hover, .reel-aktion-danger:focus-visible { background: var(--danger-bg); color: var(--danger-text); }

/* ── Weg auf den Startbildschirm (PWA) ──────────────────────────────────────
   Ein Kasten, drei moegliche Texte; `pwa.js` blendet genau einen ein. Die Auswahl steckt im
   Attribut `data-art`, damit das Skript nur EINE Klasse setzen muss und nicht drei Bloecke
   einzeln schaltet. */
.pwa-hinweis {
    position: relative;
    margin: 1.25rem auto 0;
    max-width: 460px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border, #dfe3e8);
    border-left: 4px solid var(--marke-orange, #D96A24);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem 2.25rem 1rem 1rem;
    font-size: .92rem;
    text-align: left;
    box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.08));
    z-index: 2;
}
.pwa-hinweis strong { display: block; margin-bottom: .35rem; }
.pwa-hinweis p { margin: 0 0 .75rem; color: var(--text-secondary, #5a6672); }
.pwa-hinweis-versteckt { display: none !important; }
/* Die Reihenfolge ist der Satz, an dem es haengt — er darf nicht wie eine Fussnote aussehen. */
.pwa-hinweis .pwa-reihenfolge {
    margin: 0 0 .25rem;
    padding: .5rem .6rem;
    border-left: 3px solid var(--color-primary);
    background: rgba(var(--color-primary-rgb), .08);
    border-radius: 0 6px 6px 0;
    color: var(--text-primary);
}

/* Voreinstellung: alle drei Faelle aus. Sichtbar wird der, den `data-art` nennt. */
.pwa-nur-webview, .pwa-nur-android, .pwa-nur-ios { display: none; }
.pwa-hinweis[data-art="webview"] .pwa-nur-webview,
.pwa-hinweis[data-art="android"] .pwa-nur-android,
.pwa-hinweis[data-art="ios"]     .pwa-nur-ios { display: block; }

.pwa-knopf {
    font: inherit; font-weight: 600;
    background: var(--marke-gruen, #0F4230); color: #fff;
    border: 0; border-radius: var(--radius-sm, 8px);
    padding: .6rem 1.1rem;
    min-height: 44px;              /* Tippflaeche — dieselbe Mindestgroesse wie bei den Reel-Aktionen */
    cursor: pointer;
}
.pwa-knopf:hover { background: var(--color-primary-hover, #0D3A2A); }

.pwa-adresse {
    width: 100%; margin-top: .6rem;
    font-size: .82rem; padding: .5rem;
    border: 1px solid var(--border, #dfe3e8); border-radius: var(--radius-sm, 8px);
    background: var(--bg-base, #f7f8fa); color: var(--text-secondary, #5a6672);
}

.pwa-schliessen {
    position: absolute; top: .35rem; right: .5rem;
    background: none; border: 0;
    font-size: 1.5rem; line-height: 1;
    color: var(--text-muted, #98a2ad);
    cursor: pointer;
    width: 40px; height: 40px;     /* klein gezeichnet, aber treffbar */
}
.pwa-schliessen:hover { color: var(--text-primary, #1a2027); }

/* ── Trial-/Abo-Hinweis ──────────────────────────────────────────────────────────────────────
   Eine Zeile, keine Karte. Steht auf jeder Seite, darf also nicht um Aufmerksamkeit kämpfen —
   nur wenn wirklich etwas zu tun ist (Zahlung offen, Löschung vorgemerkt), bekommt sie die
   Signalfarbe. Der Knopf ist ein Textlink: Ein gefüllter Knopf über jedem Bildschirm liest sich
   als Haupt-Handlung der Seite, und das ist er nie. */
.trial-hinweis {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;   /* 27.08.2026: mit wrap standen Link und × zwischen 600 und 1100 px allein in einer dritten Zeile */
    padding: .45rem .9rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: .85rem;
}
.trial-hinweis > .bi { color: var(--text-muted); flex-shrink: 0; }
.trial-hinweis-text { min-width: 0; flex: 1 1 auto; }
.trial-hinweis-text strong { color: var(--text-primary); font-weight: 600; }
.trial-hinweis-link {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--color-primary-text);
    font-weight: 600;
    text-decoration: none;
}
.trial-hinweis-link:hover { color: var(--color-primary-hover); text-decoration: underline; }
.trial-hinweis-dringend {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}
.trial-hinweis-dringend > .bi,
.trial-hinweis-dringend .trial-hinweis-text strong { color: inherit; }
.trial-hinweis-dringend .trial-hinweis-link { color: inherit; text-decoration: underline; }

@media (max-width: 600px) {
    /* Auf schmalen Schirmen bricht die Flex-Zeile ohnehin um, und `margin-left:auto` setzte den
       Link dann allein in eine dritte Zeile — er sah abgeschnitten aus. Als Fliesstext gelesen
       endet der Hinweis einfach mit seinem Link. */
    .trial-hinweis { display: block; }
    .trial-hinweis > .bi { float: left; margin: .15rem .45rem 0 0; }
    .trial-hinweis-link { margin-left: .35rem; display: inline; }
}

/* ── Meine Beiträge ──────────────────────────────────────────────────────────────────────────
   IBAN und Verwendungszweck standen in <code> — Bootstrap färbt das rosarot. Zahlungsdaten in
   Fehlerfarbe zu setzen ist an genau der Stelle, an der jemand Geld überweist, die falsche
   Botschaft. Monospace bleibt (eine IBAN liest sich in gleichen Zeichenbreiten besser), die
   Farbe kommt aus dem Token-Satz. */
.zahl-wert {
    font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
    font-size: .92em;
    letter-spacing: .02em;
    color: var(--text-primary);
    word-break: break-all;
}
.zahl-kopieren { flex-shrink: 0; }

.beitrag-summe { margin-left: auto; font-weight: 700; color: var(--danger-text); font-size: .95rem; }

.bankdaten {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
    margin-bottom: 1rem;
}
.bankdaten-kopf { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; }
.bankdaten-liste { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; font-size: .9rem; }
.bankdaten-liste dt { color: var(--text-secondary); font-weight: 500; }
.bankdaten-liste dd { margin: 0; display: flex; align-items: center; gap: .4rem; min-width: 0; }

.beitrag-posten { border-top: 1px solid var(--border); padding: .85rem 0; }
.beitrag-posten:first-of-type { border-top: 0; padding-top: 0; }
.beitrag-posten-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.beitrag-posten-text { min-width: 0; }
.beitrag-posten-titel { font-weight: 600; }
.beitrag-posten-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .82rem; color: var(--text-secondary); margin-top: .2rem; }
.beitrag-posten-betrag { text-align: right; flex-shrink: 0; }
.beitrag-offen   { font-size: 1.15rem; font-weight: 700; color: var(--danger-text); }
.beitrag-bezahlt { font-size: 1.15rem; font-weight: 700; color: var(--success-text); }
.beitrag-zweck { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .85rem; margin-top: .5rem; }

@media (max-width: 600px) {
    /* Der Kommentar an .ses-chip sagte „daumen-tauglich" und stand daneben auf 32px — der
       Rest der App rechnet mit 44 (--tap). Betroffen ist ausgerechnet die haeufigste
       Handlung der ganzen App: zu- und absagen, auf dem Startbildschirm, am Telefon.
       Der Ueberlauf-Punkt war zusaetzlich nur 35px breit. */
    .ses-chip { min-height: var(--tap); }
    .ses-more  { min-width: var(--tap); justify-content: center; }
}

/* ── Live-Anzeigetafel ─────────────────────────────────────────────────────────────────────
   Dunkel mit Absicht — eine Anzeigetafel ist dunkel. Feste Werte sind hier deshalb richtig und
   nicht die uebliche Nachlaessigkeit: Die Flaeche wechselt ihre Farbe NICHT mit dem Hell-/
   Dunkelmodus, genau wie der gruene Rasen im Taktikfeld. Den Farbton steuert die Vereinsfarbe bei.
   Weiss auf diesem Grund ist deshalb auch keine Verletzung der Token-Regel: der Grund ist fest. */
.live-tafel {
    border: none;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(var(--color-primary-rgb), .38), rgba(var(--color-primary-rgb), .10)),
        linear-gradient(135deg, #141a24, #1d2735);
}
.live-tafel .sm-card-body { color: inherit; }

.live-tafel-stand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
/* Die Namen duerfen umbrechen. Vorher standen sie in `text-truncate` neben einem Kasten
   fester Breite — am Telefon blieb „KAMPFMA…" uebrig. Lieber zwei Zeilen als ein halbes Wort. */
.live-tafel-team {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .92;
    /* `anywhere` bricht auch MITTEN im Wort — „SV NACHBAROR / T" mit einem einzelnen
       Buchstaben in der zweiten Zeile. `break-word` bricht nur, wenn es wirklich nicht
       anders geht; damit es gar nicht so weit kommt, macht die Regel unten den Namen am
       Telefon kleiner und den Ergebniskasten schmaler. */
    overflow-wrap: break-word;
}
.live-tafel-ergebnis {
    flex: 0 0 auto;
    text-align: center;
    padding: .5rem .9rem;
    border-radius: .75rem;
    background: rgba(0, 0, 0, .45);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.live-tafel-ziffern {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    white-space: nowrap;
}
.live-tafel-doppelpunkt { opacity: .45; margin: 0 .35rem; }
.live-tafel-saetze { font-size: .8rem; opacity: .85; margin-top: .25rem; }
.live-tafel-saetze-liste { opacity: .6; }

.live-tafel-minute { text-align: center; margin-top: .5rem; font-size: .9rem; }
/* Drei Zustaende, drei feste Toene — auf dem dunklen Grund der Tafel, nicht auf einer
   Theme-Flaeche. Gruen laeuft, Gelb pausiert, gedaempft ist vorbei. */
.live-laeuft { color: #7fe3a0; }
.live-pause  { color: #ffce6b; }
.live-still  { opacity: .7; }

.live-uhr-knoepfe {
    display: flex;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Die Knoepfe dieser Seite werden am Spielfeldrand gedrueckt — im Stehen, oft im Regen, mit
   einer Hand. Sie standen als `btn-sm` da und waren gemessen 34px hoch. Von allen Seiten der
   App ist das die, auf der eine zu kleine Trefferflaeche am meisten kostet: ein verfehlter
   Knopf heisst, dass das Tor nicht mitgeschrieben wird. */
.live-knopf { min-height: var(--tap); }

@media (max-width: 430px) {
    /* Auf 390px teilen sich zwei Namen und der Ergebniskasten die Breite. Der Kasten hat
       Vorrang (die Ziffern muessen aus drei Metern lesbar bleiben), also geben die Namen
       nach: kleiner gesetzt und ohne die Sperrung, die Grossbuchstaben zusaetzlich breit
       macht. „SV Nachbarort" passt damit in eine Zeile. */
    .live-tafel-stand    { gap: .35rem; }
    /* Und die Versalien fallen weg. „KAMPFMANNSCHAFT" ist als Grossbuchstaben rund ein
       Fuenftel breiter und brach als „KAMPFMANNSCHA / FT". Die Sperrung ist Schmuck,
       der Name ist die Auskunft — im Zweifel gewinnt die Auskunft. */
    /* Feste Groesse traf es nicht: .76rem liess „SV Nachbarort" durch, .8rem brach
       „Kampfmannschaf / t" um einen Buchstaben. Der Platz haengt an der Bildschirm-
       breite, also auch die Schrift — clamp rechnet mit, statt zu raten. */
    .live-tafel-team     { font-size: clamp(.68rem, 2.85vw, .82rem); letter-spacing: 0; text-transform: none; }
    .live-tafel-ergebnis { padding: .45rem .6rem; }
    .live-tafel-ziffern  { font-size: 2.35rem; }
}

/* ── Kleine Knoepfe sind am Telefon keine kleinen Knoepfe ───────────────────────────────────
   Der Befund, nachdem alle Seiten einmal gemessen waren (25.08.2026): Bootstraps `btn-sm` ist
   34px hoch und steht auf 47 Seiten — „Teilen", „Stornieren", „Foto aufnehmen", die
   Zeit-Tabs der Spieleliste (30px). Jede Stelle einzeln anzufassen hiesse, die naechste zu
   uebersehen; die Live-Seite, die Aufstellung und die Karten-Fusszeile waren genau solche
   Einzelreparaturen. `btn-sm` heisst „wenig Platz einnehmen", und das ist am Schreibtisch
   richtig, wo geklickt wird. Am Telefon wird getippt, und dort gilt eine Untergrenze fuer
   alles, was einen Finger treffen muss — unabhaengig davon, wie die Klasse heisst. */
@media (max-width: 600px) {
    .btn-sm, .sm-btn.btn-sm, .zeit-tab {
        min-height: var(--tap);
        padding-top: 0;
        padding-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Startseite: Kopf ─────────────────────────────────────────────────────────────────────
   Die eine Stelle mit Persoenlichkeit: Display-Schrift, Vorname, Wochentag. Alles darunter
   ist ruhig, damit die Handlungen das Lauteste bleiben. */
.dash-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 22px;
}
.dash-gruss {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--text-primary);
    margin: 0;
}
.dash-datum { margin: 4px 0 0; font-size: 14px; color: var(--text-secondary); }
.dash-kopf-avatar {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    text-decoration: none;
    box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--border-strong);
}
.dash-kopf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-kopf-avatar .avatar-circle { width: 100%; height: 100%; font-size: 17px; }

/* Team-Karte: der Name ist ein Name, die Meta steht darunter. */
.dash-team { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-team-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.dash-team-meta { font-size: 12.5px; color: var(--text-secondary); }

/* Aufklapper in der Team-Karte: dieselbe Regel wie fuer Kartentitel — Textschrift,
   Satzschreibung. Der Versal-Stil kam ueber die Kader-Seite hierher. */
.kader-summary-title {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
}
.kader-summary-title i { color: var(--text-muted); }

/* Termin-Karten im Raster: gleich hoch. Die Fusszeile hat laengst `margin-top: auto`, aber
   die Zeile selbst wurde nie gestreckt — also endete jede Karte, wo ihr Inhalt endete, und
   nebeneinander sah das aus wie verrutscht. */
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody { align-items: stretch; }
body.data-view-cards:not(.admin-desktop) .page-content table.sm-table.event-karten tbody > tr { height: 100%; }

@media (max-width: 600px) {
    .dash-gruss { font-size: 26px; }
    .dash-kopf { margin-bottom: 16px; }
}

/* ── Kompakte Terminliste (Startseite) ───────────────────────────────────────────────────────
   Datum als Spalte links, Titel und Status in einer Zeile, rechts das Menue. Entwurf vom
   25.08.2026, vom Nutzer abgenommen: „minimalistisch, platzsparend". */
.termin-liste { display: flex; flex-direction: column; }
.termin-zeile {
    display: grid;
    grid-template-columns: 50px 1fr 40px;
    gap: 12px;
    align-items: center;
    padding: 9px 8px 9px 14px;
    min-height: 58px;
    cursor: pointer;
}
.termin-zeile + .termin-zeile { border-top: 1px solid var(--border); }
.termin-zeile:hover { background: var(--bg-hover); }
.termin-datum {
    text-align: center;
    line-height: 1.05;
    text-decoration: none;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.termin-datum b { display: block; font-size: 18px; font-weight: 700; }
.termin-datum i {
    font-style: normal; display: block;
    font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--text-muted); margin-top: 2px; white-space: nowrap;
}
.termin-text { min-width: 0; text-decoration: none; color: inherit; display: block; }
.termin-titel { display: block; font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--text-primary); }
.termin-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 4px; font-size: 12px; color: var(--text-secondary);
}
.termin-meta-ort { color: var(--text-muted); }
.termin-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 7px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.termin-pill-ok         { background: var(--success-bg); color: var(--success-text); }
.termin-pill-offen      { background: var(--bg-hover);   color: var(--text-secondary); }
.termin-pill-nein       { background: var(--danger-bg);  color: var(--danger-text); }
.termin-pill-vielleicht { background: var(--warning-bg); color: var(--warning-text); }
.termin-pill-typ        { background: var(--bg-hover);   color: var(--text-secondary); font-weight: 500; }
.termin-pill-spiel      { background: var(--primary-bg); color: var(--color-primary-text); }
.termin-mehr {
    width: 40px; height: var(--tap);
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: 16px; cursor: pointer; text-decoration: none;
}
.termin-mehr:hover { background: var(--primary-bg); color: var(--color-primary-text); }
.termin-mehr-leer { cursor: default; }
.termin-mehr-leer:hover { background: transparent; color: var(--text-muted); }
.dash-team-zeile { grid-template-columns: 1fr 40px; }

/* ── Glocke (Erinnerungen) ────────────────────────────────────────────────────────────────────
   Ein Zaehler am Symbol, ein Tipp oeffnet die Liste. Ersetzt den Block „Zu erledigen". */
.glocke { position: relative; }
.glocke-knopf { position: relative; }
.glocke-knopf.ist-offen { background: var(--primary-bg); color: var(--color-primary-text); }
.glocke-zahl {
    position: absolute; top: 4px; right: 4px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px;
    background: var(--danger-text); color: #fff;   /* fester Grund, feste Schrift — aus einer Quelle */
    font-size: 10.5px; font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--topbar-bg);
}
.glocke-liste {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: min(340px, calc(100vw - 24px));
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 1060;
    overflow: hidden;
}
.glocke-kopf {
    padding: 10px 14px;
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}
.glocke-kopf-leise { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); border-top: 1px solid var(--border); }
.glocke-leer { margin: 0; padding: 16px 14px; font-size: 13px; color: var(--text-secondary); }
.glocke-eintrag {
    display: grid; grid-template-columns: 20px 1fr 14px; gap: 10px; align-items: center;
    padding: 10px 14px;
    color: var(--text-primary); text-decoration: none; font-size: 13px;
    min-height: var(--tap);
}
.glocke-eintrag + .glocke-eintrag { border-top: 1px solid var(--border); }
a.glocke-eintrag:hover { background: var(--bg-hover); text-decoration: none; }
.glocke-eintrag-leise .glocke-titel { font-weight: 500; }
.glocke-icon { font-size: 16px; color: var(--text-muted); text-align: center; }
.glocke-icon-aktion   { color: var(--color-primary-text); }
.glocke-icon-dringend { color: var(--danger-text); }
.glocke-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.glocke-titel { font-weight: 600; line-height: 1.3; }
.glocke-sub { font-size: 12px; color: var(--text-secondary); }
.glocke-sub-dringend { color: var(--danger-text); }
.glocke-pfeil { color: var(--text-muted); font-size: 12px; }

@media (max-width: 600px) {
    /* Gemessen: rechtsbuendig an der Glocke ragte die Liste am Telefon 64px ueber den linken
       Rand hinaus — die Glocke sitzt nicht am Rand, rechts von ihr stehen noch zwei Knoepfe.
       Am Telefon haengt die Liste deshalb unter der ganzen Kopfleiste, mit Rand auf beiden
       Seiten. */
    .glocke-liste {
        position: fixed;
        top: calc(var(--topbar-h) + 8px);
        left: 12px; right: 12px;
        width: auto;
    }
}

/* ── Terminliste (/Events), Kompaktansicht ─────────────────────────────────────────────────── */
/* Gegenstueck zu .nur-karten: gab es bis 25.08.2026 nur als Klasse im Markup, nicht im CSS. */
body.data-view-cards:not(.admin-desktop) .nur-tabelle { display: none; }
body.data-view-table .nur-karten { display: none; }

.termin-monat {
    padding: 8px 14px 4px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border);
}
.termin-monat + .termin-zeile { border-top: none; }
.termin-titel:hover { text-decoration: underline; }
.termin-pill-knopf { border: none; cursor: pointer; font-family: inherit; }
.termin-pill-knopf .bi { font-size: 10px; transition: transform .15s; }
.termin-pill-knopf[aria-expanded="true"] .bi { transform: rotate(180deg); }
.termin-roster { border-top: 1px solid var(--border); background: var(--bg-subtle); padding: 8px 14px 12px; }
/* Die Zusage-Auswahl in der Kompaktzeile: eine Pille wie die anderen, mit Beschriftung — das
   Symbol allein (unter 480px war das Wort ausgeblendet) ist kein Bedienelement. */
.termin-meta .zusage-status-btn {
    min-height: 36px; padding: 1px 8px; font-size: 11.5px; font-weight: 600;
    border-radius: 999px; gap: 4px;
}
.termin-meta .zusage-status-btn i { font-size: 12px; }
.termin-meta .zusage-status-label { display: inline; }

.termin-filter {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    margin: 0 0 14px;
}
.termin-filter .sm-form-control { min-height: var(--tap); }
.filter-chip {
    min-height: var(--tap); padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-surface); color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; cursor: pointer; margin: 0; user-select: none;
}
.filter-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-chip.ist-an { background: var(--primary-bg); color: var(--color-primary-text); border-color: rgba(var(--color-primary-rgb), .35); }
@media (max-width: 600px) {
    .filter-chip-text { display: none; }
    /* Loop 2, Runde 10: ohne Text war der Chip 39 px breit — unter der Tippflaeche. */
    .filter-chip { padding: 0 12px; min-width: var(--tap, 44px); justify-content: center; }
    /* Der Seitentitel wurde zwischen Glocke, Umschalter und dem Knopf „Neuer Termin" auf eine
       Ziffer zusammengedrueckt. Am Telefon ist der Knopf nur noch sein Symbol — er steht in
       der Kopfleiste ganz rechts, das Plus reicht. */
    .topbar-actions .btn-primary-sm { font-size: 0; width: var(--tap); min-width: var(--tap); padding: 0; justify-content: center; }
    .topbar-actions .btn-primary-sm .bi { font-size: 18px; }
}

/* Gemessen: der Uhr-Chip ragte rechts aus dem Bild — ein <select> hat als Rasterkind eine
   Mindestbreite nach seinem laengsten Eintrag und drueckt die dritte Spalte hinaus. */
.termin-filter .sm-form-control { min-width: 0; width: 100%; }
/* Die Pille „6 dabei" ist 19px hoch und ein Knopf. Die Trefferflaeche waechst unsichtbar
   um sie herum (Innenabstand plus negativer Aussenabstand), statt die Pille selbst
   aufzublasen — 44px Pillen in einer Meta-Zeile waeren wieder die Karten, die wir gerade
   abgeschafft haben. Ein Pseudoelement dafuer meldete das Messwerkzeug als „abgeschnitten". */
.termin-pill-knopf { min-height: 36px; padding: 0 8px; margin: -8px 0; }

/* ── Termin-Details: Werteliste und Werkzeug-Zeilen ─────────────────────────────────────────── */
.detail-liste {
    display: grid; grid-template-columns: max-content 1fr;
    gap: 8px 16px; margin: 0; padding: 12px 16px; font-size: 13.5px;
}
.detail-liste dt { color: var(--text-muted); font-weight: 500; }
.detail-liste dd { margin: 0; min-width: 0; color: var(--text-primary); }
.detail-neben { display: block; color: var(--text-secondary); font-size: 12.5px; }
.detail-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; }
.detail-links a, .detail-link { color: var(--color-primary-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.detail-links a:hover, .detail-link:hover { text-decoration: underline; }
.detail-link { margin-left: 8px; }
.event-map { height: 220px; border-top: 1px solid var(--border); }
@media (max-width: 480px) { .detail-liste { grid-template-columns: 1fr; gap: 2px 0; } .detail-liste dt { margin-top: 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; } .detail-liste dt:first-child { margin-top: 0; } }

.werkzeug-liste { display: flex; flex-direction: column; }
.werkzeug {
    display: grid; grid-template-columns: 24px 1fr 16px; gap: 12px; align-items: center;
    padding: 11px 16px; min-height: var(--tap);
    color: var(--text-primary); text-decoration: none; font-size: 13.5px;
    cursor: pointer; list-style: none;
}
.werkzeug::-webkit-details-marker { display: none; }
.werkzeug + .werkzeug, .werkzeug-liste > * + * { border-top: 1px solid var(--border); }
.werkzeug:hover { background: var(--bg-hover); text-decoration: none; color: var(--text-primary); }
.werkzeug > .bi:first-child { font-size: 17px; color: var(--color-primary-text); text-align: center; }
.werkzeug b { display: block; font-weight: 600; }
.werkzeug small { display: block; color: var(--text-secondary); font-size: 12px; line-height: 1.35; }
.werkzeug-pfeil { color: var(--text-muted); font-size: 12px; transition: transform .15s; }
.werkzeug-klapp[open] > summary .werkzeug-pfeil { transform: rotate(180deg); }
.werkzeug-inhalt { padding: 4px 16px 14px; }
.werkzeug-vorschau { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 12px; border-top: none !important; }
.werkzeug-vorschau .event-foto-kachel { width: 64px; height: 64px; }

/* ── Team-Seite ─────────────────────────────────────────────────────────────────────────────── */
/* Bereiche als kleine Kacheln: Symbol und Name, kein Erklaertext. Der Text bleibt im Markup
   (Screenreader, Suche), er nimmt nur keinen Platz mehr. */
.bereiche-kompakt .nav-tile { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; min-height: var(--tap); text-align: left; }
.bereiche-kompakt .nav-tile-icon { width: 30px; height: 30px; font-size: 15px; margin: 0; flex-shrink: 0; }
.bereiche-kompakt .nav-tile-label { font-size: 13px; }
.bereiche-kompakt .nav-tile-sub { display: none; }
.bereiche-kompakt .nav-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 768px) { .bereiche-kompakt .nav-tile-grid { grid-template-columns: repeat(4, 1fr); } }
.bereiche-kompakt .bereiche-mehr { margin-top: 8px; }

/* Kader-Zeilen: der Termin-Kopf je Spieler faellt weg — er steht einmal ueber der Liste.
   Die Chips (die eigentliche Funktion: Status je Spieler setzen) bleiben. */
.kader-card .kader-item-event .spieler-event-link,
.kader-card .kader-item-event .spieler-event-meta { display: none; }
.kader-card .kader-item-event { padding-top: 0; }
.kader-card .kader-item { padding: 8px 12px; }
.kader-card .kader-avatar, .kader-card .kader-avatar .avatar-circle { width: 32px; height: 32px; font-size: 11px; }
/* „Spieler dazuholen" ist auf der Team-Seite der Haupt-Knopf im Kopf — dieselbe Kachel
   darunter ein zweites Mal waere Laerm. Die Kachel bleibt im geteilten Partial (die
   Startseite und /MeinVerein brauchen sie), hier wird sie ausgeblendet. */
.bereiche-kompakt .nav-tile[href$="/Beitritt"] { display: none; }

/* ── Zeilen mit Bild (Teams, Spieler) ─────────────────────────────────────────────────────── */
.zeile-avatar { grid-template-columns: 36px 1fr 40px; }
.zeile-bild { width: 36px; height: 36px; display: inline-flex; text-decoration: none; }
.zeile-bild img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.zeile-bild .avatar-circle { width: 36px; height: 36px; font-size: 12px; }
.termin-gruppe { display: flex; justify-content: space-between; gap: 10px; }
.termin-gruppe a { color: var(--color-primary-text); text-transform: none; letter-spacing: 0; text-decoration: none; font-weight: 600; }
.termin-gruppe .bi { margin-right: 4px; }
/* Der Status je Spieler in der Meta-Zeile: nur die Chips, nicht der Termin-Kopf — der steht
   einmal in der Gruppenzeile. */
.status-kompakt .spieler-event-link, .status-kompakt .spieler-event-meta { display: none; }
.status-kompakt .spieler-event-status { padding: 0; margin: 0; background: none; border: none; }
.status-kompakt { display: inline-flex; flex-basis: 100%; margin-top: 2px; }

/* Kopfleiste: EIN Knopf, dahinter ein kleines Menue. */
.topbar-menu { position: relative; }
.topbar-menu-liste {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); z-index: 1060; overflow: hidden;
}
.topbar-menu-liste a {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; min-height: var(--tap);
    color: var(--text-primary); text-decoration: none; font-size: 13.5px;
}
.topbar-menu-liste a + a { border-top: 1px solid var(--border); }
.topbar-menu-liste a:hover { background: var(--bg-hover); }
.topbar-menu-liste .bi { color: var(--color-primary-text); font-size: 16px; }

/* Kader (Matchday): Zeilen statt Karten; die Knoepfe sind Symbole mit Tooltip, 44px. */
.kader-leer { padding: 12px 16px; font-size: 13px; color: var(--text-secondary); }
#kader-content .kader-row {
    display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
    padding: 6px 10px 6px 14px; min-height: 52px; border-top: 1px solid var(--border);
}
#kader-content .kader-row-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
#kader-content .kader-avatar { width: 32px; height: 32px; font-size: 11px; flex-shrink: 0; }
#kader-content .kader-row-name { font-weight: 600; font-size: 13.5px; }
#kader-content .kader-row-meta { font-size: 12px; margin-top: 2px; }
.kader-aktionen { display: flex; gap: 6px; }
.kader-knopf {
    width: var(--tap); height: var(--tap); border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-surface);
    display: inline-flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer;
}
.kader-knopf-gruen { color: var(--success-text); }
.kader-knopf-gruen:hover { background: var(--success-bg); border-color: var(--success-border); }
.kader-knopf-rot { color: var(--danger-text); }
.kader-knopf-rot:hover { background: var(--danger-bg); border-color: var(--danger-border); }
.kader-knopf:disabled { opacity: .5; cursor: default; }

/* Teilen-Zeile */
.teilen-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; min-height: 56px; margin: 0; list-style: none; cursor: pointer; }
.teilen-zeile::-webkit-details-marker { display: none; }
.teilen-icon { color: var(--color-primary-text); font-size: 17px; flex-shrink: 0; }
.teilen-text { flex: 1; min-width: 0; font-size: 13.5px; }
.teilen-text b { display: block; font-weight: 600; } .teilen-text small { display: block; color: var(--text-secondary); font-size: 12px; }
.teilen-adresse { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text-secondary); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; text-overflow: ellipsis; }
.teilen-adresse:focus { outline: none; }
.teilen-klapp[open] .werkzeug-pfeil { transform: rotate(180deg); }
.teilen-inhalt { padding: 4px 16px 14px; border-top: 1px solid var(--border); }

/* Spielerprofil: Foto im Kopf */
.profil-kopf { align-items: center; }
.profil-kopf > div { min-width: 0; }
.page-header.profil-kopf { display: flex; gap: 14px; justify-content: flex-start; }
.profil-avatar { width: 56px; height: 56px; flex-shrink: 0; display: inline-flex; border-radius: 50%; overflow: hidden; text-decoration: none; box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--border-strong); }
.profil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profil-avatar .avatar-circle { width: 100%; height: 100%; font-size: 18px; }
.foto-klapp > summary { list-style: none; }
.foto-klapp > summary::-webkit-details-marker { display: none; }
.foto-klapp[open] > summary .werkzeug-pfeil { transform: rotate(180deg); }
.foto-klapp[open] > summary { border-bottom: 1px solid var(--border); }

/* Spielerliste: die Chips je Zeile eine Nummer kleiner — 36px statt 44, damit die Zeile eine
   Zeile bleibt. Unter 44 nur hier, wo je Spieler drei davon nebeneinander stehen. */
@media (max-width: 600px) { .status-kompakt .ses-chip { min-height: 36px; } }
.status-kompakt .ses-chip { padding: 4px 10px; font-size: 12px; }
/* Kader (Matchday): die alten Karten-Zeilen ohne Rahmen und Rundung — es ist eine Liste. */
#kader-content .kader-row { border-left: none; border-right: none; border-bottom: none; border-radius: 0; margin: 0; background: transparent; box-shadow: none; }

/* ── Konto (Identity/Manage) in der App-Huelle ────────────────────────────────────────────── */
.konto-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; padding: 0; list-style: none; }
.konto-nav .nav-link {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--border); background: var(--bg-surface);
    color: var(--text-secondary); font-size: 13px; font-weight: 500; text-decoration: none;
}
.konto-nav .nav-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.konto-nav .nav-link.active { background: var(--primary-bg); color: var(--color-primary-text); border-color: rgba(var(--color-primary-rgb), .35); font-weight: 600; }
.konto-inhalt { max-width: 560px; }
.konto-inhalt h3 { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.konto-inhalt .btn-lg { font-size: 14px; min-height: var(--tap); padding: 8px 16px; }

/* ── /Mehr: Zeilen-Kacheln ─────────────────────────────────────────────────────────────────── */
.mehr-kompakt .nav-tile-grid { grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 768px) { .mehr-kompakt .nav-tile-grid { grid-template-columns: repeat(2, 1fr); } }
.mehr-kompakt .nav-tile { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; align-items: center; padding: 9px 12px; min-height: var(--tap); text-align: left; }
.mehr-kompakt .nav-tile-icon { grid-row: 1 / span 2; width: 34px; height: 34px; font-size: 16px; margin: 0; }
.mehr-kompakt .nav-tile-label { font-size: 13.5px; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 600; }
.mehr-kompakt .nav-tile-sub { font-size: 12px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mehr-kompakt .sm-section-label { margin-top: 20px; }

/* Datei-Auswahl als Knopf statt Browser-Steuerelement */
.datei-versteckt { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.datei-knopf {
    display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
    background: var(--bg-subtle); color: var(--color-primary-text); font-weight: 600; font-size: 13.5px;
    cursor: pointer; margin: 0;
}
.datei-knopf:hover { background: var(--primary-bg); border-color: rgba(var(--color-primary-rgb), .4); }
.datei-anzahl { margin-left: 10px; font-size: 13px; color: var(--text-secondary); }

/* Reel-Seiten: „Vorschau aktualisieren" + „Reel erzeugen" liefen am Telefon ueber den Rand. */
.reel-knoepfe { flex-wrap: wrap; }
@media (max-width: 600px) { .reel-knoepfe > * { flex: 1 1 100%; justify-content: center; } }
/* Spiel-Seite: die Wege-Kacheln kompakt (Symbol + Wort in einer Zeile). */
.aktionen-kompakt .action-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 768px) { .aktionen-kompakt .action-tiles { grid-template-columns: repeat(4, 1fr); } }
.aktionen-kompakt .action-tile { flex-direction: row; gap: 10px; padding: 8px 12px; min-height: var(--tap); justify-content: flex-start; font-size: 13px; }
.aktionen-kompakt .action-tile i { font-size: 16px; margin: 0; }
.reel-texte { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 12px; }
.reel-texte > summary { list-style: none; }
.reel-texte > summary::-webkit-details-marker { display: none; }
.reel-texte[open] > summary { border-bottom: 1px solid var(--border); }
.reel-texte[open] > summary .werkzeug-pfeil { transform: rotate(180deg); }
.reel-texte > .row { padding: 8px 12px 12px; margin: 0; }

/* Der Validierungs-Sammler wird von ASP.NET immer gerendert — ohne Fehler als leerer roter
   Kasten (Vergabe, Sperre, Zuweisen, Website-Beitrag). Ohne Fehler: unsichtbar. */
.validation-summary-valid { display: none; }

/* Benutzer simulieren: Anmeldeadressen sind lang und kennen kein Leerzeichen — ohne Umbruch
   schob die erste Spalte den Knopf aus dem Bildschirm. */
.imp-tabelle .player-name { word-break: break-all; }
.imp-tabelle td:last-child .btn-ghost-sm { white-space: nowrap; }

/* ── Fotoalbum: Markierung entfernen ──
   Das „×" am Personen-Chip war ein Knopf ohne jede Regel — 11×16 px, am Telefon nicht zu treffen.
   Chip-Höhe bleibt, die Trefferfläche wächst über negative Ränder nach außen. */
.medien-tag-x {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; min-height: 36px; margin: -10px -8px -10px 2px;
    border: 0; background: transparent; color: var(--text-muted);
    border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1;
}
.medien-tag-x:hover, .medien-tag-x:focus-visible { color: var(--danger-text); background: var(--danger-bg); }

/* ── Trainer › Beiträge je Spieler ─────────────────────────────────────────
   Eine Klappzeile je Spieler statt einer Tabelle, die am Telefon zu Label/Wert-Paaren
   zerfällt (die alte Fassung war dort 14.000 px lang, weil jede Detailzeile mitgerendert wurde). */
.beitrag-summe { display: flex; flex-direction: column; gap: .15rem; }
.beitrag-summe-zahl { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.beitrag-spieler-liste, .beitrag-forderungen { list-style: none; margin: 0; padding: 0; }
.beitrag-spieler-liste > li + li { border-top: 1px solid var(--border); }
.beitrag-spieler > summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: var(--tap); padding: .55rem 1rem; cursor: pointer; list-style: none; }
.beitrag-spieler > summary::-webkit-details-marker { display: none; }
.beitrag-spieler > summary::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: .8rem; color: var(--text-muted); transition: transform .15s; flex: none; }
.beitrag-spieler[open] > summary::before { transform: rotate(90deg); }
.beitrag-spieler-name { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: .9375rem; }
.beitrag-spieler-name .text-muted-col { font-size: .8125rem; }
.beitrag-spieler-stand { display: flex; align-items: center; gap: .5rem; flex: none; font-variant-numeric: tabular-nums; }
.beitrag-offen { font-weight: 600; color: var(--warning-text); }
.beitrag-forderungen { background: var(--bg-base); border-top: 1px solid var(--border); padding: .25rem 1rem .25rem 2.4rem; }
.beitrag-forderungen > li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem 0; font-size: .875rem; }
.beitrag-forderungen > li + li { border-top: 1px dashed var(--border); }
.beitrag-forderung-titel { display: flex; flex-direction: column; min-width: 0; }
.beitrag-forderung-titel .text-muted-col { font-size: .8125rem; }
.beitrag-forderung-betrag { display: flex; align-items: center; gap: .5rem; flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 599px) {
  .beitrag-forderungen { padding-left: 1rem; }
  .beitrag-forderungen > li { flex-direction: column; align-items: flex-start; gap: .2rem; }
}


/* ── Konto › Benachrichtigungen & Kalender ───────────────────────────────────
   Zustandszeile fuer Push (an/aus/gesperrt) und der Feed-Link, der kopierbar bleiben muss. */
.push-status { font-size: .9375rem; color: var(--text-secondary); }
.push-status-an { color: var(--success-text); font-weight: 600; }
.push-status-aus { color: var(--danger-text); }
.feed-link { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.feed-link input { flex: 1 1 240px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }
.geraete-liste { list-style: none; margin: 0; padding: 0; }
.geraete-liste > li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: var(--tap); padding: .4rem 0; }
.geraete-liste > li + li { border-top: 1px solid var(--border); }
.geraete-liste .text-muted-col { font-size: .8125rem; }


/* ── Nachrichten: Ungelesen-Badge am Menuepunkt ─────────────────────────────── */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger-text); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; margin-left: auto; }
.nav-badge[hidden] { display: none; }
.tabbar-link { position: relative; }
.tabbar-badge { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; }

/* ── Nachrichten: Kanal-Liste ───────────────────────────────────────────────────
   Wie ein Posteingang: Symbol, Titel + letzte Zeile, rechts Zeit und Zaehler. */
.kanal-liste { list-style: none; margin: 0; padding: 0; }
.kanal-liste > li + li { border-top: 1px solid var(--border); }
.kanal-zeile { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; min-height: var(--tap); color: var(--text-primary); text-decoration: none; }
.kanal-zeile:hover { background: var(--bg-base); color: var(--text-primary); }
.kanal-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-bg); color: var(--color-primary); font-size: 1.25rem; overflow: hidden; }
.kanal-icon img { width: 100%; height: 100%; object-fit: cover; }
.kanal-icon .avatar-circle { width: 44px; height: 44px; font-size: .9rem; }
.kanal-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.kanal-titel { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9375rem; }
.kanal-titel > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanal-vorschau { color: var(--text-secondary); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanal-zeile.ist-neu .kanal-vorschau { color: var(--text-primary); font-weight: 500; }
.kanal-rechts { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.kanal-zeit { font-size: .75rem; color: var(--text-muted); }
.kanal-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--color-primary); color: var(--color-primary-foreground); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.kanal-neu { padding: 1rem; border-top: 1px solid var(--border); }

/* ── Nachrichten: Chat ──────────────────────────────────────────────────────────
   Der Verlauf fuellt die Hoehe zwischen Kopf und Eingabe; am Telefon bis zur Tab-Leiste. */
.chat-kopf { align-items: center; flex-wrap: nowrap; }
.chat-kopf .page-title { font-size: 1.25rem; margin-bottom: 0; }
.chat-kopf-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; font-size: .85rem; }
.chat-kopf-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-bg); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: none; }
.chat-einstellungen { position: relative; }
.chat-einstellungen > summary { list-style: none; cursor: pointer; }
.chat-einstellungen > summary::-webkit-details-marker { display: none; }
.chat-einstellungen-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 240px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: .35rem; display: flex; flex-direction: column; gap: .15rem; }
.chat { display: flex; flex-direction: column; height: calc(100dvh - 230px); min-height: 360px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.chat-verlauf { flex: 1 1 auto; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.chat-mehr { text-align: center; padding: .25rem 0 .75rem; }
.chat-leer { margin: auto; text-align: center; color: var(--text-muted); }
.chat-leer i { font-size: 2rem; display: block; margin-bottom: .5rem; }
.chat-tag { align-self: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--bg-base); padding: .15rem .6rem; border-radius: 999px; margin: .75rem 0 .5rem; }
.chat-zeile { display: flex; gap: .5rem; align-items: flex-end; max-width: min(85%, 640px); margin-top: .5rem; }
.chat-zeile.ist-folge { margin-top: .1rem; }
.chat-zeile.ist-folge .chat-avatar { visibility: hidden; }
.chat-zeile.ist-folge .chat-meta { display: none; }
.chat-zeile.ist-ich { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar { flex: none; width: 32px; height: 32px; }
.chat-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.chat-avatar .avatar-circle { width: 32px; height: 32px; font-size: .75rem; }
.chat-blase { background: var(--bg-base); color: var(--text-primary); border-radius: 14px 14px 14px 4px; padding: .5rem .75rem; min-width: 0; position: relative; }
.chat-zeile.ist-ich .chat-blase { background: var(--primary-bg); border-radius: 14px 14px 4px 14px; }
.chat-hervor .chat-blase { outline: 2px solid var(--color-primary); }
.chat-meta { display: flex; align-items: baseline; gap: .5rem; font-size: .75rem; margin-bottom: .15rem; }
.chat-autor { font-weight: 600; color: var(--color-primary); }
.chat-zeit { color: var(--text-muted); }
.chat-betreff { font-weight: 700; margin-bottom: .2rem; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.4; }
.chat-text a { color: var(--color-primary); }
.chat-geloescht { color: var(--text-muted); font-style: italic; }
.chat-zitat { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--color-primary); background: rgba(var(--color-primary-rgb), .08); color: var(--text-secondary); border-radius: 6px; padding: .3rem .5rem; margin-bottom: .35rem; font-size: .8125rem; cursor: pointer; overflow: hidden; }
.chat-zitat strong { display: block; color: var(--text-primary); font-size: .75rem; }
.chat-zitat span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-bilder { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.chat-bilder img { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; object-fit: cover; }
.chat-aktionen { display: flex; gap: .25rem; margin: 0 -.35rem; }
.chat-aktion { border: 0; background: none; padding: 0 .35rem; font-size: .75rem; color: var(--text-muted); min-height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; }
.chat-aktion:hover { color: var(--color-primary); }
.chat-neu { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 5; }
.chat-eingabe { flex: none; border-top: 1px solid var(--border); padding: .6rem .75rem; background: var(--bg-surface); }
.chat-antwort-auf { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--text-secondary); background: var(--bg-base); border-left: 3px solid var(--color-primary); border-radius: 6px; padding: .3rem .5rem; margin-bottom: .5rem; }
.chat-antwort-auf span { flex: 1 1 auto; min-width: 0; }
.chat-antwort-auf .btn-icon { margin-left: auto; }
.chat-eingabe-zeile { display: flex; align-items: flex-end; gap: .5rem; }
.chat-eingabe-zeile textarea { flex: 1 1 auto; resize: none; min-height: 44px; max-height: 160px; line-height: 1.4; }
.chat-bild-knopf { cursor: pointer; }
.chat-senden { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; }
.chat-optionen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; font-size: .8125rem; color: var(--text-secondary); }
.chat-bilder-vorschau { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.chat-bild-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--bg-base); border-radius: 999px; padding: .15rem .5rem .15rem .6rem; font-size: .8125rem; max-width: 100%; }
.chat-bild-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-nur-lesen { flex: none; border-top: 1px solid var(--border); padding: .75rem 1rem; margin: 0; font-size: .875rem; }
@media (max-width: 599px) {
  .chat { height: calc(100dvh - 210px); border-radius: var(--radius-md); }
  .chat-zeile { max-width: 92%; }
  .chat-bilder img { max-width: 160px; max-height: 160px; }
}

/* ── Dokumente: Liste je Bereich ────────────────────────────────────────────────
   Eine Zeile je Datei — Symbol nach Typ, Titel, Meta; Aktionen rechts, 44 px hoch. */
.dok-liste { list-style: none; margin: 0; padding: 0; }
.dok-liste > li { display: flex; align-items: center; gap: .25rem; }
.dok-liste > li + li { border-top: 1px solid var(--border); }
.dok-zeile { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; color: var(--text-primary); text-decoration: none; min-height: var(--tap); }
.dok-zeile:hover { background: var(--bg-base); color: var(--text-primary); }
.dok-symbol { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--primary-bg); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.dok-text { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.dok-titel { font-weight: 600; font-size: .9375rem; overflow-wrap: anywhere; }
.dok-meta { color: var(--text-secondary); font-size: .8125rem; overflow-wrap: anywhere; }
.dok-aktionen { flex: none; display: flex; align-items: center; gap: .1rem; padding-right: .5rem; }
.dok-aktionen form { margin: 0; }
details.sm-card > summary { list-style: none; cursor: pointer; }
details.sm-card > summary::-webkit-details-marker { display: none; }


/* ── Ladeskelette ──────────────────────────────────────────────────────────────
   Platzhalter, solange ein Teil der Seite nachlaedt (Kader beim Aufklappen, Chat-Verlauf).
   Schimmert leise; respektiert prefers-reduced-motion. */
.skeleton { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-base) 25%, var(--border) 50%, var(--bg-base) 75%); background-size: 200% 100%; animation: skeleton-schimmer 1.4s ease-in-out infinite; }
.skeleton-zeilen { display: flex; flex-direction: column; gap: .6rem; padding: .5rem 0; }
.skeleton-zeilen .skeleton:nth-child(1) { width: 70%; }
.skeleton-zeilen .skeleton:nth-child(2) { width: 55%; }
.skeleton-zeilen .skeleton:nth-child(3) { width: 62%; }
@keyframes skeleton-schimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }


/* ── Das Gefuehl: Seitenwechsel, Absenden, Antippen ─────────────────────────────
   Alles hier ist Rueckmeldung, kein Schmuck: Der Balken sagt „ich hab dich gehoert", das Raedchen
   „ich arbeite", der Uebergang nimmt dem Wechsel das Ruckeln. prefers-reduced-motion schaltet es ab. */
.seiten-fortschritt { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: var(--color-primary); opacity: 0; pointer-events: none; transition: width .3s ease, opacity .25s ease; }
.seiten-fortschritt.ist-aktiv { opacity: 1; width: 80%; transition: width 6s cubic-bezier(.1,.6,.2,1), opacity .15s ease; }
.seiten-fortschritt.ist-fertig { width: 100%; opacity: 0; transition: width .2s ease, opacity .4s ease .1s; }
.knopf-raedchen { display: inline-block; width: 1em; height: 1em; margin-right: .45em; vertical-align: -.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: knopf-dreh .7s linear infinite; }
.ist-am-arbeiten { opacity: .85; cursor: progress; }
@keyframes knopf-dreh { to { transform: rotate(360deg); } }
.btn, .btn-primary-sm, .btn-ghost-sm, .btn-icon, .nav-tile, .kanal-zeile, .dok-zeile, .sidebar-link, .tabbar-link { transition: background-color .15s ease, color .15s ease, transform .08s ease, box-shadow .15s ease; }
.btn:active, .btn-primary-sm:active, .btn-ghost-sm:active, .nav-tile:active { transform: scale(.98); }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 90ms ease-out both seite-raus; }
::view-transition-new(root) { animation: 160ms ease-in both seite-rein; }
@keyframes seite-raus { to { opacity: 0; } }
@keyframes seite-rein { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .seiten-fortschritt, .knopf-raedchen { animation: none; transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .btn:active, .btn-primary-sm:active, .btn-ghost-sm:active, .nav-tile:active { transform: none; }
}
/* Leerzustand: Symbol auf weicher Vereinsfarbe statt grauem Riesen-Icon */
.empty-state > i { width: 84px; height: 84px; line-height: 84px; border-radius: 50%; background: var(--primary-bg); color: var(--color-primary); opacity: 1; font-size: 36px; margin: 0 auto 16px; }
.empty-state h3 { color: var(--text-primary); }
.empty-state p { max-width: 36em; margin-left: auto; margin-right: auto; }


/* ── Spieltag: Karte auf der Startseite und LIVE-Marke in der Kopfzeile ─────────────
   Die Anzeigetafel ist bewusst dunkel und fest gefaerbt (wie auf der Live-Seite): eine Tafel
   sieht in beiden Modi gleich aus. Schrift darauf ist ebenfalls fest — beides aus einer Quelle. */
.spieltag-karte { border-radius: var(--radius-lg); padding: .85rem 1rem; margin-bottom: 1rem; background: #0f1b2d; color: #f4f6fa; box-shadow: var(--shadow-card); }
.spieltag-karte.ist-bald { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); box-shadow: none; }
.spieltag-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8125rem; margin-bottom: .5rem; }
.spieltag-status { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.spieltag-karte.ist-live .spieltag-status { color: #ff5a5a; }
.spieltag-team { opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spieltag-tafel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; margin: .25rem 0 .75rem; }
.spieltag-name { font-weight: 600; font-size: 1rem; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.spieltag-name:last-child { text-align: right; }
.spieltag-stand { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.spieltag-karte.ist-bald .spieltag-stand { font-size: 1.25rem; color: var(--text-muted); }
.spieltag-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.spieltag-karte:not(.ist-bald) .btn-ghost-sm { color: #f4f6fa; background: transparent; border-color: rgba(255,255,255,.35); }
.spieltag-karte:not(.ist-bald) .btn-ghost-sm:hover { color: #fff; background: rgba(255,255,255,.1); }
@media (max-width: 599px) { .spieltag-name { font-size: .9rem; } .spieltag-stand { font-size: 1.9rem; } }
.spieltag-karte:not(.ist-bald) .text-muted-col { color: rgba(244,246,250,.7) !important; }
.live-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 0 rgba(255,90,90,.6); animation: live-puls 1.6s ease-out infinite; }
@keyframes live-puls { 0% { box-shadow: 0 0 0 0 rgba(255,90,90,.6); } 100% { box-shadow: 0 0 0 8px rgba(255,90,90,0); } }
.live-marke { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .7rem; border-radius: 999px; background: #0f1b2d; color: #f4f6fa; text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.live-marke:hover { color: #fff; background: #17263d; }
.live-marke-stand { font-variant-numeric: tabular-nums; opacity: .9; }
@media (max-width: 599px) { .live-marke-text { display: none; } .live-marke { padding: 0 .55rem; } }
@media (prefers-reduced-motion: reduce) { .live-punkt { animation: none; } }

/* ── Anwesenheit abhaken (/Events/Anwesenheit) ──────────────────────────────
   Am Platz, mit dem Daumen: eine Zeile je Person, drei Chips in Tippgroesse, die Zusage als
   leise Zeile darunter — sie ist die Erwartung, der Chip die Tatsache. */
.anw-summe { margin-bottom: 1rem; }
.anw-zahlen { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .95rem; }
.anw-zahlen strong { font-size: 1.25rem; font-family: var(--font-display); }
.anw-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.anw-zeile { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .5rem .75rem; }
.anw-person { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.anw-foto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 36px; }
.anw-name { font-weight: 600; overflow-wrap: anywhere; }
.anw-zusage { font-size: .75rem; color: var(--text-muted); }
.anw-zusage.ist-zu { color: var(--success-text); }
.anw-zusage.ist-ab { color: var(--danger-text); }
.anw-chips { display: flex; gap: .35rem; flex: 0 0 auto; }
.anw-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: var(--tap); height: var(--tap); padding: 0 .45rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-base); color: var(--text-secondary); font-size: .65rem; line-height: 1; cursor: pointer; }
.anw-chip i { font-size: 1rem; }
.anw-chip.aktiv.ist-da  { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.anw-chip.aktiv.ist-weg { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-border); }
.anw-chip.aktiv.ist-ent { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-border); }
@media (max-width: 599px) { .anw-chip span { display: none; } .anw-chip { min-width: 44px; } }


/* ── Umfragen im Chat ───────────────────────────────────────────────────────
   Jede Antwort ist ein Knopf in Tippgroesse mit einem leisen Balken dahinter — das Ergebnis
   sieht man beim Abstimmen, ohne Umschalten. */
.chat-umfrage { margin-top: .35rem; display: flex; flex-direction: column; gap: .3rem; max-width: 28rem; }
.chat-umfrage-frage { font-weight: 600; margin-bottom: .1rem; }
.chat-umfrage-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: var(--tap); padding: .35rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-base); color: var(--text-primary); text-align: left; overflow: hidden; cursor: pointer; }
.chat-umfrage-option:disabled { cursor: default; opacity: .85; }
.chat-umfrage-option.ist-meine { border-color: var(--color-primary); }
.chat-umfrage-balken { position: absolute; inset: 0 auto 0 0; background: rgba(var(--color-primary-rgb), .12); transition: width .3s ease; pointer-events: none; }
.chat-umfrage-text, .chat-umfrage-zahl { position: relative; }
.chat-umfrage-text { display: inline-flex; align-items: center; gap: .4rem; overflow-wrap: anywhere; }
.chat-umfrage-option.ist-meine .chat-umfrage-text i { color: var(--color-primary); }
.chat-umfrage-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-secondary); font-size: .85rem; }
.chat-umfrage-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; font-size: .75rem; color: var(--text-muted); }
.chat-umfrage-neu { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .6rem; margin-bottom: .5rem; background: var(--bg-base); }


/* ── Kompakte Zusage in langen Spielerlisten: ein Chip zeigt den Status, ein Tipp klappt die Wahl auf ── */
.ses-kompakt { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.ses-kompakt-pfeil { font-size: .7em; opacity: .7; }
.ses-kompakt-auswahl { padding: .35rem 0; }

/* Trial-Zeile: am Handy nur der Kern, und für den Tag wegtippbar */
.trial-hinweis-weg { margin-left: auto; flex-shrink: 0; }
@media (max-width: 599px) { .trial-hinweis-mehr { display: none; } }

.teilnehmer-klapp > summary { list-style: none; display: inline-flex; margin: .5rem 0; cursor: pointer; }
.teilnehmer-klapp > summary::-webkit-details-marker { display: none; }
.teilnehmer-klapp[open] > summary { display: none; }

/* Team-Seite, Kader: der kompakte Zusage-Chip sitzt rechts IN der Zeile statt als eigenes Band darunter —
   23 Zeilen à 133 px waren drei Bildschirme; jetzt eine Zeile je Spieler. */
.kader-card .kader-item-event { flex-basis: auto; padding: 0 10px 0 0; background: none; display: flex; align-items: center; }
.kader-card .kader-item-event .ses-kompakt { align-items: flex-end; }
.kader-card .kader-item-event .ses-kompakt-auswahl { position: absolute; right: 8px; z-index: 5; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .5rem; box-shadow: var(--shadow-md); }
.kader-card .kader-item { position: relative; }

/* Kader-Status am Handy: eine Zeile je Person (Avatar, Name, kompakter Chip rechts) statt Karte mit
   Chip-Zeile darunter — 23 Karten à 140 px waren vier Bildschirme. */
@media (max-width: 599px) {
    .kader-row { flex-wrap: nowrap; padding: 8px 10px; gap: 8px; margin-bottom: 6px; }
    .kader-row-info { min-width: 0; flex: 1; }
    .kader-row .ses-kompakt { flex-shrink: 0; align-items: flex-end; }
    .kader-row .ses-kompakt-auswahl { position: absolute; right: 8px; z-index: 5; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .5rem; box-shadow: var(--shadow-md); }
    .kader-row { position: relative; }
}
/* Das aufgeklappte Chip-Menü hängt UNTER dem Chip, nicht über dem Namen daneben. */
.kader-row .ses-kompakt, .kader-card .kader-item-event .ses-kompakt { position: relative; }
.kader-row .ses-kompakt-auswahl, .kader-card .kader-item-event .ses-kompakt-auswahl { top: 100%; right: 0; margin-top: 4px; }

/* ── Tippflächen (Optik-Loop 27.08.2026): was man antippt, ist mindestens 36 px hoch — die
   Zusage-Pille und der „23 dabei"-Aufklapper waren 26 px, die Chat-Symbolknöpfe 27 px breit. */
.zusage-status-btn, .termin-pill-knopf { min-height: 36px; }
.chat-bild-knopf { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ── Optik-Loop 27.08.2026: Bootstraps graue Umriss-Knöpfe sehen aus wie aus einem anderen Produkt.
   `btn-outline-secondary` (45 Stellen) und `btn-outline-dark` bekommen die Ghost-Optik der App —
   dieselbe Fläche, dieselbe Schrift, derselbe Rand wie .btn-ghost-sm, ohne 45 Seiten anzufassen. */
.btn-outline-secondary, .btn-outline-dark {
    --bs-btn-color: var(--text-secondary); --bs-btn-border-color: var(--border-strong); --bs-btn-bg: var(--bg-surface);
    --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: var(--bg-hover); --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text-primary); --bs-btn-active-bg: var(--bg-hover); --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-border-color: var(--border);
    border-radius: var(--radius-sm); font-weight: 500;
}


/* ── Fehlerhafte Felder: der Validator setzt die Klasse, ohne Regel blieb das Feld unauffällig ── */
.sm-form-control.input-validation-error, .form-control.input-validation-error, .form-select.input-validation-error,
.sm-form-control.is-invalid, .form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--danger-border);
    box-shadow: 0 0 0 3px var(--danger-bg);
}
.field-validation-error { color: var(--danger-text); font-size: .85rem; }


/* ── Sprunglink für die Tastatur: erst sichtbar, wenn er den Fokus hat ── */
.skip-link { position: absolute; left: -999px; top: .5rem; z-index: 3000; padding: .5rem .85rem;
             background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-strong);
             border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-weight: 600; }
.skip-link:focus { left: .5rem; outline: 2px solid var(--color-primary); }
#hauptinhalt:focus { outline: none; }


/* ── Berechtigungs-Matrix am Telefon: eine Rolle ist eine zugeklappte Karte ──
   Sieben Rollen × zehn Rechte ergaben 3000 px Häkchen untereinander (Messung 27.08.2026).
   Zu sehen ist je Rolle nur der Name und „6 von 10 Rechten"; ein Tipp klappt die Häkchen auf. */
@media (max-width: 899px) {
    body.data-view-cards .berecht-matrix tbody tr:not(.offen) td:not(.berecht-rolle-col) { display: none !important; } /* die Karten-Regel der Tabellen hat mehr Gewicht */
    body.data-view-cards .berecht-matrix tbody td.berecht-rolle-col { cursor: pointer; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
    body.data-view-cards .berecht-matrix tbody td.berecht-rolle-col::after { content: "▾"; margin-left: auto; color: var(--text-muted); }
    body.data-view-cards .berecht-matrix tbody tr.offen td.berecht-rolle-col::after { content: "▴"; }
    .berecht-zaehler { display: inline; font-size: .8rem; color: var(--text-secondary); font-weight: 400; }
}
/* Am Desktop bleibt die Matrix eine Tabelle (site.js setzt no-card-view); der Zähler wäre dort nur Enge in der Namensspalte. */
.berecht-zaehler { display: none; }

/* ── Übungen & Trainingsplan ────────────────────────────────────────────────────────────────
   Das Regal (Bibliothek) als Karten-Raster, der Plan als nummerierte Liste. Beide teilen die
   zugeklappte Ablaufbeschreibung — auf dem Platz will man Titel und Minuten sehen, den Text nur bei Bedarf. */
.uebung-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }
.uebung-karte .sm-card-body { display: flex; flex-direction: column; gap: .35rem; }
.uebung-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.uebung-kat { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.uebung-titel { font-size: 1.05rem; font-weight: 650; margin: 0; color: var(--text-primary); }
.uebung-fakten { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .85rem; color: var(--text-secondary); }
.uebung-text summary { cursor: pointer; font-size: .85rem; color: var(--color-primary-text); }
.uebung-text p { font-size: .9rem; color: var(--text-secondary); white-space: pre-line; margin-top: .35rem; }
.uebung-material { font-size: .85rem; color: var(--text-secondary); }
.filter-chip-zahl { font-size: .75rem; opacity: .7; }
.plan-summe { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; font-size: .95rem; color: var(--text-secondary); }
.plan-zahl { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-right: .25rem; }
.plan-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.plan-zeile { padding: .75rem .9rem; }
.plan-zeile-kopf { display: flex; align-items: flex-start; gap: .75rem; }
.plan-nr { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary-bg); color: var(--color-primary); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.plan-zeile-text { flex: 1 1 auto; min-width: 0; }
.plan-titel { font-weight: 650; color: var(--text-primary); }
.plan-meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .82rem; color: var(--text-secondary); margin-top: .15rem; }
.plan-notiz { font-size: .875rem; color: var(--text-secondary); margin-top: .25rem; }
.plan-knoepfe { flex: none; display: flex; gap: .15rem; }
.plan-knoepfe .btn-icon[disabled] { opacity: .3; }
.plan-aendern { margin-top: .5rem; }
.plan-aendern summary { font-size: .8rem; color: var(--text-muted); cursor: pointer; }
.plan-aendern-form, .plan-frei { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-top: .5rem; }
.plan-aendern-form .sm-form-label, .plan-frei .sm-form-label { display: flex; flex-direction: column; gap: .25rem; margin: 0; }
.plan-aendern-form input[type=number], .plan-frei input[type=number] { width: 90px; }
.plan-regal { display: flex; flex-direction: column; gap: .25rem; max-height: 420px; overflow-y: auto; }
.plan-regal-zeile { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .5rem; border-radius: var(--radius-sm); }
.plan-regal-zeile:hover { background: var(--bg-hover); }
.plan-regal-text { min-width: 0; overflow-wrap: anywhere; }

/* Empfehlungstext: als Fließtext mit Umbrüchen, nicht als Code-Block */
/* Landingpage: Vereinstext und Team-Knöpfe auf der öffentlichen Seite */
.vs-text { white-space: pre-line; margin-bottom: 1rem; }
.vs-teams { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Empfehlungsprogramm: drei Schritte nebeneinander, am Telefon untereinander */
.empf-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1rem; }
.empf-schritte > div { display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem; align-items: start; }
.empf-schritte b { font-size: .95rem; }
.empf-schritte small { grid-column: 2; color: var(--text-muted); }
.empf-nr { grid-row: span 2; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-bg); color: var(--color-primary); font-weight: 700; font-size: .9rem; }
.empf-faq p b { color: var(--text-primary); }
.empfehlen-text { white-space: pre-wrap; font-family: inherit; font-size: .95rem; color: var(--text-primary); background: var(--bg-base); padding: .75rem; border-radius: var(--radius-sm); }

/* Übungs-Skizze: das Feld füllt die Kartenbreite, bleibt aber niedrig */
.uebung-skizze-wrap { margin: .35rem 0; }
.uebung-skizze { width: 100%; max-height: 260px; display: block; border-radius: 6px; }


/* ── Skizzen-Editor: Werkzeugleiste + Bühne. Tippen statt Zahlen (28.08.2026). ── */
.skizze-werkzeuge { display: flex; flex-wrap: wrap; gap: .35rem; }
.skizze-werkzeug { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .35rem .7rem; border-radius: 999px;
                   border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-secondary); font-size: .85rem; cursor: pointer; }
.skizze-werkzeug.active { border-color: var(--color-primary); background: var(--primary-bg); color: var(--color-primary-text); font-weight: 600; }
.sk-punkt { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.sk-spieler { background: #1d4ed8; } .sk-gegner { background: #d9342b; } .sk-tw { background: #f2c94c; } .sk-ball { background: #fff; }
.sk-huetchen { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid #ff8c1a; display: inline-block; }
.skizze-buehne { max-width: 420px; margin: 0 auto; }
.skizze-buehne .uebung-skizze { max-height: none; width: 100%; cursor: crosshair; user-select: none; -webkit-user-select: none; }

/* Öffentliche Vereinsseite */
.vs-liste { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .35rem; }
.vs-liste li { display: grid; grid-template-columns: 110px 1fr auto; gap: .5rem 1rem; align-items: baseline; padding: .45rem .6rem; border-radius: var(--radius-sm); background: var(--bg-base); font-size: .92rem; }
.vs-wann { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-meta { grid-column: 2; color: var(--text-muted); font-size: .8rem; }
.vs-stand { font-weight: 700; font-variant-numeric: tabular-nums; padding: .1rem .5rem; border-radius: 999px; }
.vs-sieg { background: var(--success-bg); color: var(--success-text); } .vs-remis { background: var(--warning-bg); color: var(--warning-text); } .vs-niederlage { background: var(--danger-bg); color: var(--danger-text); }
@media (max-width: 480px) { .vs-liste li { grid-template-columns: 1fr auto; } .vs-wann { grid-column: 1 / -1; } .vs-meta { grid-column: 1; } }

/* Sponsoren auf der oeffentlichen Vereinsseite: die Gegenleistung zeigen, dann die offene Bitte.
   Logos in einer ruhigen Reihe, ohne Logo steht der Name — dieselbe Regel wie im Reel. */
.vs-sponsoren { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.vs-sponsoren li { background: var(--bg-base); border-radius: var(--radius-sm); padding: .5rem .8rem; display: flex; align-items: center; }
.vs-sponsoren a { display: flex; align-items: center; text-decoration: none; color: var(--text-secondary); }
.vs-sponsoren a.vs-ohne-link { pointer-events: none; }
.vs-sponsoren img { max-height: 40px; max-width: 150px; display: block; }
.vs-sponsor-name { font-weight: 600; font-size: .9rem; }

.vs-suche { background: var(--bg-base); border: 1px dashed var(--border-color); border-radius: var(--radius-sm); padding: .9rem 1rem; margin-bottom: 1rem; }
.vs-suche > strong { display: block; margin-bottom: .35rem; }
.vs-suche ul { margin: 0 0 .8rem; padding-left: 1.1rem; font-size: .92rem; color: var(--text-secondary); }
.vs-suche-team { font-weight: 600; color: var(--text-primary); }
.vs-danke { margin: 0; font-weight: 600; color: var(--success-text); }
.vs-form { display: flex; flex-direction: column; gap: .6rem; }
.vs-form-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.vs-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--text-secondary); }
.vs-form input, .vs-form select, .vs-form textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-primary); }
.vs-form button { align-self: flex-start; font: inherit; font-weight: 600; padding: .5rem 1.1rem; border: 0; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-primary-foreground); cursor: pointer; }
.vs-optional { color: var(--text-muted); font-size: .8rem; margin: 0; font-weight: 400; }
@media (max-width: 480px) { .vs-form-zeile { grid-template-columns: 1fr; } }

/* Bitte um einen Sponsor unter den Hashtag-Chips — ein Satz fuer den Text des Posts. */
.reel-sponsorsuche { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border-color); font-size: .88rem; color: var(--text-secondary); }

/* Turniere */
.turnier-zeile { display: grid; grid-template-columns: 90px 1fr auto auto; gap: .75rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-primary); text-decoration: none; }
.turnier-zeile:last-child { border-bottom: 0; } .turnier-zeile:hover { background: var(--bg-hover); }
.turnier-datum { color: var(--text-secondary); font-variant-numeric: tabular-nums; } .turnier-name { font-weight: 600; }
.turnier-teams { list-style: none; padding: 0; margin: 0; } .turnier-teams li { display: flex; justify-content: space-between; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.turnier-spiele { display: flex; flex-direction: column; gap: .35rem; }
.turnier-spiel { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: .35rem .6rem; align-items: center; padding: .45rem .6rem; border-radius: var(--radius-sm); background: var(--bg-base); font-size: .92rem; }
.turnier-spiel .ts-zeit { font-size: .78rem; color: var(--text-muted); }
.ts-heim { text-align: right; font-weight: 600; } .ts-gast { font-weight: 600; } .ts-heim, .ts-gast { min-width: 0; overflow-wrap: break-word; }
.ts-form { display: inline-flex; align-items: center; gap: .25rem; } .ts-tor { width: 44px; min-height: 40px; text-align: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); }
.ts-stand { font-weight: 700; font-variant-numeric: tabular-nums; padding: .15rem .6rem; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border); }
.turnier-spiel.ist-gespielt .ts-stand { background: var(--primary-bg); color: var(--color-primary-text); border-color: transparent; }
.turnier-tabelle td, .turnier-tabelle th { text-align: center; } .turnier-tabelle td:nth-child(2), .turnier-tabelle th:nth-child(2) { text-align: left; }
/* Am Telefon zaehlt die Tabelle Punkte und Differenz — Sieg/Remis/Niederlage muessen weichen, sonst rutscht „Pkt" aus dem Bild. */
@media (max-width: 600px) { .turnier-tabelle .nur-breit { display: none; } .sm-table.turnier-tabelle thead th, .sm-table.turnier-tabelle tbody td { padding-left: .35rem; padding-right: .35rem; } }
/* Der Lösch-Knopf steht bei der Uhrzeit, nicht hinter dem Gast — sonst ist er am Telefon die fünfte Spalte und aus dem Bild. */
.turnier-spiel .ts-zeit { grid-column: 1 / -1; } .turnier-spiel:has(.ts-weg) { padding-right: 3rem; } .turnier-spiel .ts-weg { position: absolute; top: .15rem; right: .3rem; }
/* Am Telefon: Namen nebeneinander, das Ergebnisformular darunter — in einer Zeile bräche jeder Name mitten im Wort. */
@media (max-width: 600px) {
  .turnier-spiel:has(.ts-form) { grid-template-columns: 1fr 1fr; }
  .turnier-spiel:has(.ts-form) .ts-heim { grid-area: 2 / 1; } .turnier-spiel:has(.ts-form) .ts-gast { grid-area: 2 / 2; }
  .turnier-spiel .ts-form { grid-area: 3 / 1 / 4 / 3; justify-self: center; }
}
.turnier-qr { display: flex; gap: 1rem; align-items: center; } .turnier-qr img { flex: 0 0 auto; border-radius: var(--radius-sm); background: #fff; }

/* Tastatur: ein sichtbarer Fokus auf allem, was bedienbar ist — Bootstrap deckt nur .btn, die eigenen Knöpfe
   (.btn-ghost-sm, .btn-icon, .nav-tile, Chips) hatten keinen. Nur :focus-visible, damit Maus/Tipp keinen Ring zeigen. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible, .nav-tile:focus-visible, .btn-ghost-sm:focus-visible, .btn-icon:focus-visible, .ses-chip:focus-visible, .filter-chip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.teilen-adresse:focus-visible, .color-hex-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* Benachrichtigungs-Empfänger je Auslöser: eine Zeile, aufklappbar — statt fünf offener Häkchenwände. */
.empf-gruppe { border-bottom: 1px solid var(--border); } .empf-gruppe summary { cursor: pointer; list-style: none; min-height: var(--tap); }
.empf-gruppe summary::-webkit-details-marker { display: none; } .empf-gruppe[open] .werkzeug-pfeil { transform: rotate(180deg); }
.empf-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 1rem; padding: .25rem 0 .75rem; }
.empf-liste .form-check-input { width: 22px; height: 22px; }