/* =============================================================================
   Phase 2 — Design System Layer
   Dunkel, präzise, wertig, ruhig — starke Hierarchie.
   Lädt NACH style.css und überschreibt gezielt die wichtigsten Flächen.
   Neue Komponenten werden als .p2-* Klassen eingeführt.
   ========================================================================== */

/* --- 1. Tokens -------------------------------------------------------- */
:root {
    /* Surfaces (kühle Slate-Range, präziser gestaffelt) */
    --p2-bg-base:      #060a14;
    --p2-bg-deep:      #0a1220;
    --p2-bg-panel:     #0e1626;
    --p2-bg-raised:    #131d30;
    --p2-bg-sunken:    #080f1c;
    --p2-bg-hover:     #182337;

    /* Borders */
    --p2-border:       rgba(148, 163, 184, 0.14);
    --p2-border-strong: rgba(148, 163, 184, 0.28);
    --p2-border-focus: rgba(96, 165, 250, 0.55);
    --p2-border-accent: rgba(96, 165, 250, 0.28);

    /* Text */
    --p2-text:         #f1f5f9;
    --p2-text-dim:     #cbd5e1;
    --p2-text-muted:   #94a3b8;
    --p2-text-faint:   #64748b;

    /* Akzente — sparsam einsetzen */
    --p2-accent:       #60a5fa;
    --p2-accent-hot:   #3b82f6;
    --p2-accent-soft:  rgba(96, 165, 250, 0.14);
    --p2-accent-ring:  rgba(96, 165, 250, 0.36);

    /* Status-Paletten (Dot + Soft-Bg + Text) */
    --p2-ok:           #34d399;
    --p2-ok-bg:        rgba(52, 211, 153, 0.12);
    --p2-ok-border:    rgba(52, 211, 153, 0.3);

    --p2-warn:         #fbbf24;
    --p2-warn-bg:      rgba(251, 191, 36, 0.12);
    --p2-warn-border:  rgba(251, 191, 36, 0.32);

    --p2-danger:       #f87171;
    --p2-danger-bg:    rgba(248, 113, 113, 0.12);
    --p2-danger-border: rgba(248, 113, 113, 0.32);

    --p2-info:         #60a5fa;
    --p2-info-bg:      rgba(96, 165, 250, 0.12);
    --p2-info-border:  rgba(96, 165, 250, 0.3);

    --p2-neutral:      #94a3b8;
    --p2-neutral-bg:   rgba(148, 163, 184, 0.12);
    --p2-neutral-border: rgba(148, 163, 184, 0.24);

    /* Radius — Cockpit-Gefühl: harte, aber nicht kantige Kanten */
    --p2-r-xs: 4px;
    --p2-r-sm: 6px;
    --p2-r-md: 10px;
    --p2-r-lg: 14px;
    --p2-r-xl: 20px;
    --p2-r-pill: 999px;

    /* Spacing */
    --p2-s-1: 4px;
    --p2-s-2: 8px;
    --p2-s-3: 12px;
    --p2-s-4: 16px;
    --p2-s-5: 20px;
    --p2-s-6: 24px;
    --p2-s-7: 32px;
    --p2-s-8: 40px;
    --p2-s-9: 56px;

    /* Typografie */
    --p2-font-sans: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --p2-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

    --p2-fs-display: clamp(2rem, 2.4vw + 1rem, 2.75rem);
    --p2-fs-h1: clamp(1.5rem, 1.1vw + 1rem, 1.875rem);
    --p2-fs-h2: 1.375rem;
    --p2-fs-h3: 1.125rem;
    --p2-fs-body: 0.9375rem;
    --p2-fs-small: 0.8125rem;
    --p2-fs-micro: 0.75rem;

    --p2-fw-regular: 400;
    --p2-fw-medium: 500;
    --p2-fw-semibold: 600;
    --p2-fw-bold: 700;

    --p2-lh-tight: 1.15;
    --p2-lh-snug: 1.35;
    --p2-lh-normal: 1.55;

    --p2-tracking-wide: 0.06em;
    --p2-tracking-meta: 0.12em;

    /* Shadows — dezent, nicht verspielt */
    --p2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --p2-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --p2-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
    --p2-shadow-focus: 0 0 0 3px var(--p2-accent-ring);

    /* Motion */
    --p2-dur-fast: 120ms;
    --p2-dur: 180ms;
    --p2-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. Inter über bundled font, mit Google-Fallback ------------------ */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: local("Inter"), local("Inter var");
}

/* --- 3. Reset der bestehenden Grundfläche ----------------------------- */
body {
    font-family: var(--p2-font-sans);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
    font-size: var(--p2-fs-body);
    line-height: var(--p2-lh-normal);
    color: var(--p2-text);
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(59, 130, 246, 0.08), transparent 60%),
        radial-gradient(900px 500px at 100% 20%, rgba(14, 165, 233, 0.06), transparent 60%),
        linear-gradient(180deg, var(--p2-bg-base) 0%, var(--p2-bg-deep) 100%);
}

body::before {
    /* Subtile Grid-Textur für das Cockpit-Gefühl, praktisch unsichtbar aber strukturgebend */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
}

.app-shell { position: relative; z-index: 1; }

h1, h2, h3, h4 {
    font-family: var(--p2-font-sans);
    letter-spacing: -0.01em;
    line-height: var(--p2-lh-tight);
    color: var(--p2-text);
}

h2 { font-size: var(--p2-fs-h1); font-weight: var(--p2-fw-bold); }
h3 { font-size: var(--p2-fs-h2); font-weight: var(--p2-fw-semibold); }

/* Labels, Metadaten */
.section-label,
.header-eyebrow,
.feature-tag,
.form-label {
    font-family: var(--p2-font-sans);
    font-size: 0.6875rem;
    font-weight: var(--p2-fw-semibold);
    letter-spacing: var(--p2-tracking-meta);
    text-transform: uppercase;
    color: var(--p2-text-muted);
}

/* Tabellarische Zahlen */
.p2-num,
.archiv-col-penalties,
.archiv-col-load,
.archiv-col-days,
.archiv-rcol-pen,
.archiv-rcol-cash,
.game-active-header-cash-value,
.game-info-line-value strong,
.game-player-rail-load,
.archiv-mini-rank .archiv-rank-load {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- 4. Panel-System -------------------------------------------------- */
.p2-panel {
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-lg);
    box-shadow: var(--p2-shadow-md);
}

.p2-panel--raised {
    background: var(--p2-bg-raised);
    border-color: var(--p2-border-strong);
    box-shadow: var(--p2-shadow-lg);
}

.p2-panel--sunken {
    background: var(--p2-bg-sunken);
    border-color: var(--p2-border);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3);
}

.p2-panel--accent {
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-panel);
    border-color: var(--p2-border-accent);
}

.p2-panel--flush {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

/* Bestehende page-panels auf die neue Optik heben (weniger Blur, klarer) */
.app-shell {
    padding: var(--p2-s-5) var(--p2-s-6) var(--p2-s-6);
    gap: var(--p2-s-4);
}

.page-panel,
.section-block,
.continue-panel,
.hero-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-lg);
    box-shadow: var(--p2-shadow-md);
}

.section-block-soft {
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}

/* Ruhige Section-Abstände */
.section-block,
.section-block-soft {
    padding: var(--p2-s-5);
}

.section-block + .section-block,
.section-block + .section-block-soft,
.section-block-soft + .section-block,
.section-block-soft + .section-block-soft {
    margin-top: var(--p2-s-4);
}

.section-block-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--p2-s-4);
    padding-bottom: var(--p2-s-3);
    margin-bottom: var(--p2-s-4);
    border-bottom: 1px solid var(--p2-border);
}

.section-block-head h3 {
    font-size: var(--p2-fs-h2);
    font-weight: var(--p2-fw-semibold);
    line-height: 1.2;
}

.section-block-head p {
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
    max-width: 60ch;
}

/* --- 5. App-Chrome ---------------------------------------------------- */
.app-shell {
    grid-template-rows: auto 1fr;
}

.app-overlay-nav {
    position: sticky;
    top: 0;
    /* Legacy-Reset: ältere Regeln in style.css setzen left:50% + translateX(-50%)
       für position:fixed. Unter sticky würde das die Pill off-screen schieben
       und den Home-Button verdecken. */
    left: auto;
    right: auto;
    transform: none;
    width: auto;
    max-width: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-bottom: var(--p2-s-3);
    pointer-events: auto;
}

.utility-pill {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 4px;
    border-radius: var(--p2-r-pill);
    background: rgba(10, 18, 31, 0.78);
    border: 1px solid var(--p2-border);
    box-shadow: var(--p2-shadow-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.utility-pill form {
    display: inline-flex;
    margin: 0;
}

.utility-pill-button {
    display: inline-flex;
    align-items: center;
    gap: var(--p2-s-2);
    min-height: 40px;
    padding: 0 var(--p2-s-4);
    border-radius: var(--p2-r-pill);
    background: transparent;
    border: 0;
    color: var(--p2-text-dim);
    font-family: var(--p2-font-sans);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--p2-dur) var(--p2-ease), color var(--p2-dur) var(--p2-ease);
}

.utility-pill-button:hover,
.utility-pill-button:focus-visible {
    background: var(--p2-bg-hover);
    color: var(--p2-text);
    outline: 0;
}

.utility-pill-button-accent {
    background: var(--p2-accent-hot);
    color: #0a1220;
    font-weight: var(--p2-fw-semibold);
}

.utility-pill-button-accent:hover,
.utility-pill-button-accent:focus-visible {
    background: var(--p2-accent);
    color: #0a1220;
}

.utility-pill-button-muted { color: var(--p2-text-muted); }
.utility-pill-icon { font-size: 0.95rem; line-height: 1; }

/* Page-Shell — schmaleres, klareres Content-Maß */
.page-shell {
    display: grid;
    gap: var(--p2-s-4);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* Page-Header mit echter Hierarchie */
.page-header,
.page-header-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--p2-s-5);
    padding-bottom: var(--p2-s-4);
    margin-bottom: var(--p2-s-4);
    border-bottom: 1px solid var(--p2-border);
}

.page-header h2,
.page-header-inline h2 {
    font-size: var(--p2-fs-h1);
    line-height: 1.15;
    margin-top: var(--p2-s-1);
}

.page-header p,
.page-header-inline p {
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
    margin-top: var(--p2-s-2);
}

.page-header-actions {
    display: flex;
    gap: var(--p2-s-2);
    align-items: center;
    flex-wrap: wrap;
}

/* --- 6. Buttons ------------------------------------------------------- */
/* Neue Klassen */
.p2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--p2-s-2);
    min-height: 40px;
    padding: 0 var(--p2-s-4);
    border-radius: var(--p2-r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--p2-text);
    font-family: var(--p2-font-sans);
    font-size: var(--p2-fs-body);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: background var(--p2-dur) var(--p2-ease),
                border-color var(--p2-dur) var(--p2-ease),
                box-shadow var(--p2-dur) var(--p2-ease),
                transform var(--p2-dur-fast) var(--p2-ease);
    text-decoration: none;
}

.p2-btn:focus-visible { outline: 0; box-shadow: var(--p2-shadow-focus); }
.p2-btn:active { transform: translateY(1px); }
.p2-btn[disabled], .p2-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.p2-btn--primary {
    background: var(--p2-accent-hot);
    color: #0a1220;
    border-color: var(--p2-accent-hot);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}
.p2-btn--primary:hover:not([disabled]) { background: var(--p2-accent); border-color: var(--p2-accent); }

.p2-btn--secondary {
    background: var(--p2-bg-raised);
    border-color: var(--p2-border-strong);
    color: var(--p2-text);
}
.p2-btn--secondary:hover:not([disabled]) { background: var(--p2-bg-hover); border-color: var(--p2-border-focus); }

.p2-btn--ghost {
    background: transparent;
    border-color: var(--p2-border);
    color: var(--p2-text-dim);
}
.p2-btn--ghost:hover:not([disabled]) { background: var(--p2-bg-panel); color: var(--p2-text); }

.p2-btn--danger {
    background: #b91c1c;
    color: #fef2f2;
    border-color: #b91c1c;
}
.p2-btn--danger:hover:not([disabled]) { background: #991b1b; border-color: #991b1b; }

.p2-btn--lg { min-height: 52px; padding: 0 var(--p2-s-6); font-size: 1rem; }
.p2-btn--sm { min-height: 32px; padding: 0 var(--p2-s-3); font-size: var(--p2-fs-small); }
.p2-btn--block { width: 100%; }

/* Bestehende Buttons präziser machen (ohne Umbenennung) */
.primary-action,
.secondary-action,
.danger-action,
.continue-action,
.compact-action {
    border-radius: var(--p2-r-md);
    font-family: var(--p2-font-sans);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.005em;
    transition: background var(--p2-dur) var(--p2-ease),
                border-color var(--p2-dur) var(--p2-ease),
                box-shadow var(--p2-dur) var(--p2-ease);
}

.primary-action {
    background: var(--p2-accent-hot);
    color: #0a1220;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.28);
    border: 1px solid var(--p2-accent-hot);
}
.primary-action:hover { background: var(--p2-accent); border-color: var(--p2-accent); }

.secondary-action {
    background: var(--p2-bg-raised);
    border: 1px solid var(--p2-border-strong);
    color: var(--p2-text);
}
.secondary-action:hover { background: var(--p2-bg-hover); border-color: var(--p2-border-focus); }

.danger-action {
    background: #b91c1c;
    color: #fef2f2;
    border: 1px solid #b91c1c;
    box-shadow: 0 6px 16px rgba(185, 28, 28, 0.28);
}
.danger-action:hover { background: #991b1b; border-color: #991b1b; }

.compact-action {
    min-height: 40px;
    min-width: auto;
    padding: 0 var(--p2-s-4);
    font-size: var(--p2-fs-small);
}

/* --- 7. Badge / Status-System ---------------------------------------- */
.p2-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--p2-s-2);
    padding: 2px 10px;
    min-height: 24px;
    border-radius: var(--p2-r-sm);
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    color: var(--p2-text-dim);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
    text-transform: none;
}

.p2-badge--ok     { background: var(--p2-ok-bg);     border-color: var(--p2-ok-border);     color: var(--p2-ok); }
.p2-badge--warn   { background: var(--p2-warn-bg);   border-color: var(--p2-warn-border);   color: var(--p2-warn); }
.p2-badge--danger { background: var(--p2-danger-bg); border-color: var(--p2-danger-border); color: var(--p2-danger); }
.p2-badge--info   { background: var(--p2-info-bg);   border-color: var(--p2-info-border);   color: var(--p2-info); }
.p2-badge--accent { background: var(--p2-accent-soft); border-color: var(--p2-border-accent); color: var(--p2-accent); }

.p2-badge .p2-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: currentColor; flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.05);
}

/* Bestehende Pills modernisieren */
.round-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    min-height: 24px;
    min-width: auto;
    border-radius: var(--p2-r-sm);
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    color: var(--p2-text-dim);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.02em;
    text-transform: none;
}

.archiv-status-pill-current,
.round-status-ready {
    background: var(--p2-ok-bg);
    border-color: var(--p2-ok-border);
    color: var(--p2-ok);
}

/* --- 8. Data-Table System -------------------------------------------- */
.p2-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.p2-table th,
.p2-table td {
    padding: 10px var(--p2-s-3);
    text-align: left;
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
}
.p2-table th {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
    background: var(--p2-bg-sunken);
}
.p2-table tbody tr:hover td { background: rgba(96, 165, 250, 0.04); }
.p2-table tbody tr:last-child td { border-bottom: 0; }
.p2-table td.p2-num, .p2-table th.p2-num { text-align: right; font-family: var(--p2-font-mono); }
.p2-table--compact th, .p2-table--compact td { padding: 6px var(--p2-s-3); }

/* --- 9. Input-/Form-Controls ----------------------------------------- */
.touch-input,
.p2-input {
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    color: var(--p2-text);
    font-family: var(--p2-font-sans);
    font-size: var(--p2-fs-body);
    min-height: 44px;
    padding: 10px 12px;
    transition: border-color var(--p2-dur) var(--p2-ease), background var(--p2-dur) var(--p2-ease), box-shadow var(--p2-dur) var(--p2-ease);
}
.touch-input:focus,
.p2-input:focus {
    outline: 0;
    border-color: var(--p2-border-focus);
    box-shadow: var(--p2-shadow-focus);
    background: var(--p2-bg-panel);
}

.input-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}

.message-card {
    border-radius: var(--p2-r-md);
    padding: var(--p2-s-3) var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border: 1px solid var(--p2-border);
    background: var(--p2-bg-sunken);
}
.message-card.message-info { border-color: var(--p2-info-border); background: var(--p2-info-bg); color: var(--p2-info); }
.message-card.message-warning { border-color: var(--p2-warn-border); background: var(--p2-warn-bg); color: var(--p2-warn); }
.message-card.message-error { border-color: var(--p2-danger-border); background: var(--p2-danger-bg); color: var(--p2-danger); }

/* Praxis-Feinschliff: Hinweis auf offenen Kassenbetrag direkt vor dem
   Löschen-Button eines Profils. Minimaler Abstand, damit die Warnung
   klar zum Formular gehört. */
.player-delete-cash-note {
    margin: 0 0 8px;
}

/* --- 10. KPI + Section Header ---------------------------------------- */
.p2-kpi {
    display: grid;
    gap: 4px;
    padding: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}
.p2-kpi-label {
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: var(--p2-tracking-meta);
    text-transform: uppercase;
    color: var(--p2-text-muted);
}
.p2-kpi-value {
    font-family: var(--p2-font-mono);
    font-size: 1.75rem;
    font-weight: var(--p2-fw-semibold);
    line-height: 1.1;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.p2-kpi-delta { font-size: var(--p2-fs-small); color: var(--p2-text-muted); }
.p2-kpi-delta--pos { color: var(--p2-ok); }
.p2-kpi-delta--neg { color: var(--p2-danger); }

.p2-section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: var(--p2-s-4);
    padding: 0 0 var(--p2-s-3);
    border-bottom: 1px solid var(--p2-border);
    margin-bottom: var(--p2-s-4);
}
.p2-section-header .eyebrow {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.p2-section-header h3 { margin-top: 2px; }

/* --- 11. Toolbar ----------------------------------------------------- */
.p2-toolbar {
    display: flex;
    align-items: center;
    gap: var(--p2-s-3);
    padding: var(--p2-s-2) var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}
.p2-toolbar--spread { justify-content: space-between; }

/* --- 12. Empty State ------------------------------------------------- */
.p2-empty {
    display: grid;
    justify-items: center;
    gap: var(--p2-s-2);
    padding: var(--p2-s-7) var(--p2-s-4);
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
    text-align: center;
    background: var(--p2-bg-sunken);
    border: 1px dashed var(--p2-border);
    border-radius: var(--p2-r-md);
}

/* =============================================================================
   Screen-spezifische Härtung
   ========================================================================== */

/* --- Archiv — Season-Grid als ruhigere Panels ------------------------ */
.archiv-season-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--p2-s-3);
}

.archiv-season-card {
    display: grid;
    gap: var(--p2-s-3);
    padding: var(--p2-s-4);
    background: var(--p2-bg-raised);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    box-shadow: var(--p2-shadow-sm);
    text-decoration: none;
    color: var(--p2-text);
    transition: border-color var(--p2-dur) var(--p2-ease), transform var(--p2-dur) var(--p2-ease), box-shadow var(--p2-dur) var(--p2-ease);
    backdrop-filter: none;
}
.archiv-season-card:hover {
    border-color: var(--p2-border-accent);
    transform: translateY(-1px);
    box-shadow: var(--p2-shadow-md);
}

.archiv-season-card-current {
    border-color: var(--p2-border-accent);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-raised);
}

.archiv-season-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--p2-s-3);
}
.archiv-season-label {
    font-family: var(--p2-font-sans);
    font-size: 1.0625rem;
    font-weight: var(--p2-fw-bold);
    letter-spacing: -0.01em;
    color: var(--p2-text);
}
.archiv-season-card-meta {
    display: flex;
    gap: var(--p2-s-2);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.archiv-dot { color: var(--p2-text-faint); }

.archiv-season-card-ranking {
    display: grid;
    gap: 6px;
    padding: var(--p2-s-3) 0;
    border-top: 1px solid var(--p2-border);
    border-bottom: 1px solid var(--p2-border);
}
.archiv-mini-rank {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--p2-s-2);
    align-items: baseline;
    font-size: var(--p2-fs-small);
}
.archiv-mini-rank .archiv-rank-num {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-faint);
    font-weight: var(--p2-fw-medium);
}
.archiv-mini-rank .archiv-rank-name {
    color: var(--p2-text);
    font-weight: var(--p2-fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archiv-mini-rank .archiv-rank-load {
    color: var(--p2-text-dim);
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-micro);
}

.archiv-season-card-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
}
.archiv-cta {
    font-size: var(--p2-fs-small);
    color: var(--p2-accent);
    font-weight: var(--p2-fw-medium);
}
.archiv-season-card:hover .archiv-cta { color: #93c5fd; }

/* --- Archiv-Saison — Ranking-Table ----------------------------------- */
.archiv-ranking-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
}

.archiv-ranking-header,
.archiv-ranking-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.5fr) 80px 110px 80px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 10px var(--p2-s-4);
    font-size: var(--p2-fs-small);
}
.archiv-ranking-header {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.archiv-ranking-row {
    border-top: 1px solid var(--p2-border);
    transition: background var(--p2-dur) var(--p2-ease);
}
.archiv-ranking-row:first-of-type { border-top: 0; }
.archiv-ranking-row:hover { background: rgba(96, 165, 250, 0.04); }

.archiv-col-rank {
    font-family: var(--p2-font-mono);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.archiv-col-name {
    color: var(--p2-text);
    font-weight: var(--p2-fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archiv-col-penalties,
.archiv-col-load,
.archiv-col-days {
    text-align: right;
    font-family: var(--p2-font-mono);
    color: var(--p2-text-dim);
    font-variant-numeric: tabular-nums;
}

.archiv-ranking-winner {
    background: linear-gradient(90deg, var(--p2-ok-bg), transparent 60%);
    border-left: 2px solid var(--p2-ok);
}
.archiv-ranking-loser {
    background: linear-gradient(90deg, var(--p2-danger-bg), transparent 60%);
    border-left: 2px solid var(--p2-danger);
}

/* --- Archiv-Saison — Spieltag-Blöcke --------------------------------- */
.archiv-gameday-block {
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    margin-bottom: var(--p2-s-3);
    overflow: hidden;
}
.archiv-gameday-block[open] {
    border-color: var(--p2-border-strong);
    background: var(--p2-bg-panel);
}

.archiv-gameday-summary {
    list-style: none;
    cursor: pointer;
    padding: var(--p2-s-3) var(--p2-s-4);
    position: relative;
    user-select: none;
}
.archiv-gameday-summary::-webkit-details-marker { display: none; }
.archiv-gameday-summary::before {
    content: "";
    position: absolute;
    right: var(--p2-s-4);
    top: 50%;
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--p2-text-muted);
    border-bottom: 1.5px solid var(--p2-text-muted);
    transform: translateY(-65%) rotate(45deg);
    transition: transform var(--p2-dur) var(--p2-ease);
}
.archiv-gameday-block[open] .archiv-gameday-summary::before {
    transform: translateY(-30%) rotate(-135deg);
}

.archiv-gameday-summary-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--p2-s-4);
    padding-right: var(--p2-s-5);
}
.archiv-gameday-summary-left {
    display: flex;
    align-items: center;
    gap: var(--p2-s-3);
    flex-wrap: wrap;
}
.archiv-gameday-label {
    font-family: var(--p2-font-sans);
    font-size: 0.9375rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    letter-spacing: -0.005em;
}
.archiv-gameday-summary-right {
    display: flex;
    gap: var(--p2-s-4);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.archiv-gameday-date,
.archiv-gameday-host,
.archiv-gameday-players { white-space: nowrap; }

.archiv-gameday-detail {
    padding: 0 var(--p2-s-4) var(--p2-s-4);
    border-top: 1px solid var(--p2-border);
}

.archiv-gameday-results {
    margin-top: var(--p2-s-3);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    overflow: hidden;
    background: var(--p2-bg-sunken);
}
.archiv-result-header,
.archiv-result-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1.5fr) 80px 120px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 8px var(--p2-s-3);
    font-size: var(--p2-fs-small);
}
.archiv-result-header {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.archiv-result-row {
    border-top: 1px solid var(--p2-border);
}
.archiv-result-row:first-of-type { border-top: 0; }
.archiv-result-winner {
    background: var(--p2-ok-bg);
    border-left: 2px solid var(--p2-ok);
}
.archiv-rcol-rank { font-family: var(--p2-font-mono); color: var(--p2-text-muted); }
.archiv-rcol-name { color: var(--p2-text); font-weight: var(--p2-fw-medium); }
.archiv-rcol-pen, .archiv-rcol-cash {
    text-align: right;
    font-family: var(--p2-font-mono);
    color: var(--p2-text-dim);
    font-variant-numeric: tabular-nums;
}

.archiv-gameday-notizen {
    margin-top: var(--p2-s-3);
    padding: var(--p2-s-3);
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
}

/* --- spiel_aktiv — Header-Band präziser ------------------------------ */
.game-active-header-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--p2-s-3) var(--p2-s-4);
    margin-bottom: var(--p2-s-3);
    background: var(--p2-bg-raised);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    font-size: var(--p2-fs-small);
    gap: var(--p2-s-4);
}
.game-active-header-left { display: flex; gap: var(--p2-s-4); }
.game-active-header-meta {
    font-family: var(--p2-font-sans);
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-micro);
    letter-spacing: var(--p2-tracking-meta);
    text-transform: uppercase;
    font-weight: var(--p2-fw-semibold);
}
.game-active-header-right {
    display: flex;
    gap: var(--p2-s-3);
    align-items: baseline;
}
.game-active-header-cash-label {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
}
.game-active-header-cash-value {
    font-family: var(--p2-font-mono);
    font-size: 1.0625rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-accent);
    font-variant-numeric: tabular-nums;
}

/* Player-Rail präziser */
.game-active-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 280px;
    gap: var(--p2-s-3);
    align-items: start;
}

.game-player-rail,
.game-info-rail {
    padding: var(--p2-s-4);
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    box-shadow: var(--p2-shadow-sm);
}

.game-rail-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: var(--p2-s-3);
    margin-bottom: var(--p2-s-3);
    border-bottom: 1px solid var(--p2-border);
}
.game-rail-head strong {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    font-weight: var(--p2-fw-semibold);
}

.game-player-rail-list {
    display: grid;
    gap: 6px;
}

/* ── Spielerkarte (Live-Rail) — Phase 11 Feinschliff ─────────────────────
   Entschlackte Struktur: Grid 3-spaltig, keine Overlays, ein primärer
   Badge (Aktiv) als einziger auffälliger Status. Host/Gast dezent in der
   Meta-Zeile unterhalb des Namens. Ziel: Karte in unter 1 Sekunde lesbar,
   keine abgeschnittenen Werte, keine gestapelten Badge-Ebenen. */
.game-player-rail-button {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    column-gap: var(--p2-s-3);
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transition: border-color var(--p2-dur) var(--p2-ease), background var(--p2-dur) var(--p2-ease);
}
.game-player-rail-button:hover { border-color: var(--p2-border-strong); background: var(--p2-bg-hover); }
.game-player-rail-button-active {
    border-color: var(--p2-accent);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-raised);
    box-shadow: inset 0 0 0 1px var(--p2-border-accent);
}

/* Hintergrund-Fill als relative Straflast-Indikation — bleibt hinter allem. */
.game-player-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.12) calc(var(--player-fill, 0) * 100%), transparent 0);
    pointer-events: none;
    z-index: 0;
}
.game-player-rail-button > * { position: relative; z-index: 1; }

/* Spalte 1: Avatar — prominent, fest dimensioniert. */
.game-player-rail-avatar-wrap {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.game-player-rail-avatar {
    width: 40px; height: 40px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--p2-bg-raised);
    border: 1px solid var(--p2-border);
}
.game-player-rail-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--p2-font-mono);
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text-dim);
    font-size: var(--p2-fs-small);
}

/* Spalte 2: Name oben, Meta-Zeile darunter — gestapelt, kein Overlap. */
.game-player-rail-main {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.game-player-rail-name {
    font-weight: var(--p2-fw-semibold);
    font-size: 0.95rem;
    color: var(--p2-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.game-player-rail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--p2-text-muted);
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.3;
    min-width: 0;
}
.game-player-rail-role {
    font-size: 0.62rem;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
}
.game-player-rail-role-host {
    background: var(--p2-warn-bg);
    color: var(--p2-warn);
    border: 1px solid var(--p2-warn-border);
}
.game-player-rail-role-guest {
    background: var(--p2-info-bg);
    color: var(--p2-info);
    border: 1px solid var(--p2-info-border);
}
.game-player-rail-load {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--p2-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Spalte 3: primärer Status — maximal ein Badge (Aktiv). Leerer Slot, wenn
   nicht ausgewählt. Layout bleibt stabil. align-items: center überschreibt
   die ältere Rule in style.css (align-items: flex-start). */
.game-player-rail-status {
    grid-column: 3;
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: 20px;
    min-width: 0;
}
.game-player-rail-badge-active {
    font-size: 0.68rem;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--p2-accent);
    color: #ffffff;
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0;
}
/* Die Offline-JS-Logik (game-intercept.js) setzt beim Hinzufügen des
   Aktiv-Badges additiv die Klasse .game-player-rail-badge. Absichtlich
   keine eigene Dekoration mehr – die Kombination mit -badge-active liefert
   alle visuellen Eigenschaften oben. */
.game-player-rail-badge { display: inline-flex; }

/* Penalty-Grid als harte Daten-Tiles */
.game-center-stage,
.game-panel {
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    padding: var(--p2-s-4);
}

.game-penalty-grid,
.game-penalty-grid-dominant {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--p2-s-2);
}

.action-tile,
.game-penalty-button {
    display: grid;
    gap: 4px;
    padding: var(--p2-s-3) var(--p2-s-4);
    background: var(--p2-bg-raised);
    border: 1px solid var(--p2-border-strong);
    border-radius: var(--p2-r-md);
    color: var(--p2-text);
    text-align: left;
    cursor: pointer;
    min-height: 72px;
    transition: background var(--p2-dur) var(--p2-ease), border-color var(--p2-dur) var(--p2-ease), transform var(--p2-dur-fast) var(--p2-ease);
    backdrop-filter: none;
}
.action-tile:hover,
.game-penalty-button:hover:not([disabled]) {
    background: var(--p2-bg-hover);
    border-color: var(--p2-border-focus);
}
.action-tile:active:not([disabled]),
.game-penalty-button:active:not([disabled]) { transform: translateY(1px); }
.action-tile-label {
    font-weight: var(--p2-fw-semibold);
    font-size: 0.9375rem;
    color: var(--p2-text);
}
.game-penalty-meta {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.game-penalty-state {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-faint);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-wide);
}
.game-penalty-button-danger {
    border-color: var(--p2-danger-border);
    background: linear-gradient(180deg, var(--p2-danger-bg), transparent 150%), var(--p2-bg-raised);
}
.game-penalty-button-danger:hover:not([disabled]) {
    border-color: var(--p2-danger);
    background: linear-gradient(180deg, var(--p2-danger-bg), transparent 100%), var(--p2-bg-hover);
}
.game-penalty-button-blocked {
    opacity: 0.45;
    cursor: not-allowed;
}

.game-stage-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--p2-s-2) var(--p2-s-3);
    margin-bottom: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
}
.game-penalty-help { color: var(--p2-text-muted); margin: 0; }
.game-stage-player-chip {
    padding: 4px 10px;
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-wide);
    font-weight: var(--p2-fw-semibold);
}
.game-stage-player-chip-active {
    background: var(--p2-accent-soft);
    border-color: var(--p2-border-accent);
    color: var(--p2-accent);
}

/* Info Rail */
.game-info-block { padding-bottom: var(--p2-s-3); border-bottom: 1px solid var(--p2-border); margin-bottom: var(--p2-s-3); }
.game-info-block h3 { font-size: 1.0625rem; }
.game-info-block > p { color: var(--p2-text-muted); font-size: var(--p2-fs-small); margin-top: 4px; }
.game-info-round-pills { display: flex; gap: 6px; margin-top: var(--p2-s-3); flex-wrap: wrap; }

.game-status-chip {
    padding: 2px 8px;
    font-size: var(--p2-fs-micro);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text-dim);
    font-weight: var(--p2-fw-medium);
}

.game-info-stack { display: grid; gap: var(--p2-s-2); }
.game-info-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--p2-s-2) var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
}
.game-info-line > span:first-child { color: var(--p2-text-muted); }
.game-info-line-value { display: flex; gap: 6px; align-items: baseline; }
.game-info-line-value strong {
    font-family: var(--p2-font-mono);
    font-size: 0.95rem;
    color: var(--p2-text);
}

.game-info-note {
    margin-top: var(--p2-s-3);
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
}
.game-info-note strong { color: var(--p2-text-muted); font-size: var(--p2-fs-micro); text-transform: uppercase; letter-spacing: var(--p2-tracking-meta); display: block; margin-bottom: 4px; }
.game-info-actions { display: grid; gap: var(--p2-s-2); margin-top: var(--p2-s-3); }
.game-utility-bar {
    display: flex;
    gap: var(--p2-s-2);
    margin-top: var(--p2-s-3);
    padding-top: var(--p2-s-3);
    border-top: 1px solid var(--p2-border);
}
.game-utility-bar > * { flex: 1; }

.game-feedback-inline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--p2-s-3) var(--p2-s-4);
    margin-bottom: var(--p2-s-3);
    border-radius: var(--p2-r-sm);
    border: 1px solid var(--p2-border);
    background: var(--p2-bg-sunken);
    font-size: var(--p2-fs-small);
}
.game-feedback-inline strong { font-size: var(--p2-fs-micro); text-transform: uppercase; letter-spacing: var(--p2-tracking-meta); color: var(--p2-text-muted); }
.game-feedback-success { border-color: var(--p2-ok-border); background: var(--p2-ok-bg); }
.game-feedback-success strong { color: var(--p2-ok); }
.game-feedback-warning { border-color: var(--p2-warn-border); background: var(--p2-warn-bg); }
.game-feedback-warning strong { color: var(--p2-warn); }

/* --- spieltag_neu — Stepper / ruhige Formular-Optik ------------------ */
.p2-stepper {
    display: flex;
    gap: var(--p2-s-2);
    padding: var(--p2-s-2);
    margin-bottom: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow-x: auto;
}
.p2-stepper a,
.p2-stepper > span {
    display: inline-flex;
    align-items: center;
    gap: var(--p2-s-2);
    padding: 8px 14px;
    border-radius: var(--p2-r-sm);
    background: transparent;
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--p2-dur) var(--p2-ease), background var(--p2-dur) var(--p2-ease);
}
.p2-stepper a:hover { background: var(--p2-bg-hover); color: var(--p2-text); }
.p2-stepper .p2-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    background: var(--p2-bg-raised);
    border-radius: 999px;
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-bold);
    color: var(--p2-text-dim);
}
.p2-stepper .is-active { background: var(--p2-accent-soft); color: var(--p2-accent); }
.p2-stepper .is-active .p2-step-num { background: var(--p2-accent-hot); color: #0a1220; }

.quick-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--p2-s-2);
}
.quick-pick {
    display: flex;
    align-items: center;
    gap: var(--p2-s-3);
    padding: 10px 14px;
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text-dim);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
    cursor: pointer;
    transition: border-color var(--p2-dur) var(--p2-ease), background var(--p2-dur) var(--p2-ease);
}
.quick-pick:hover { border-color: var(--p2-border-strong); background: var(--p2-bg-hover); }
.quick-pick:has(input:checked) {
    border-color: var(--p2-border-accent);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-raised);
    color: var(--p2-text);
}
.quick-pick input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--p2-accent-hot); }

.name-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--p2-s-3);
}

.snt-result-row {
    padding: var(--p2-s-4) !important;
    margin-bottom: var(--p2-s-3) !important;
    border: 1px solid var(--p2-border) !important;
    border-radius: var(--p2-r-md) !important;
    background: var(--p2-bg-panel) !important;
}
.snt-player-header {
    display: flex !important;
    align-items: center;
    gap: var(--p2-s-3);
    margin-bottom: var(--p2-s-3) !important;
    padding-bottom: var(--p2-s-2);
    border-bottom: 1px solid var(--p2-border);
}
.snt-player-header strong {
    font-size: 1rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.snt-live-bar {
    display: flex !important;
    gap: var(--p2-s-4) !important;
    padding: var(--p2-s-2) var(--p2-s-3) !important;
    background: var(--p2-bg-sunken) !important;
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm) !important;
    font-size: var(--p2-fs-micro) !important;
    color: var(--p2-text-muted);
    margin-bottom: var(--p2-s-3) !important;
}
.snt-live-bar strong {
    font-family: var(--p2-font-mono);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.snt-pen-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 6px;
}
.snt-pen-row {
    display: flex;
    align-items: center;
    gap: var(--p2-s-2);
    padding: 8px 10px;
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
}
.snt-pen-row:nth-child(even) { background: var(--p2-bg-sunken); }
.snt-pen-label { font-size: var(--p2-fs-small); color: var(--p2-text-dim); flex: 1; }
.snt-pen-meta { font-family: var(--p2-font-mono); font-size: var(--p2-fs-micro); color: var(--p2-text-muted); }
.snt-pen-input {
    width: 64px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    background: var(--p2-bg-panel) !important;
    border: 1px solid var(--p2-border) !important;
    border-radius: var(--p2-r-sm) !important;
    text-align: center;
    font-family: var(--p2-font-mono);
}

.inline-add-row {
    display: flex;
    gap: var(--p2-s-2);
    align-items: center;
    flex-wrap: wrap;
}

/* Sticky Summary im Spieltag-neu */
.p2-sticky-summary {
    position: sticky;
    bottom: var(--p2-s-4);
    padding: var(--p2-s-3) var(--p2-s-4);
    background: var(--p2-bg-raised);
    border: 1px solid var(--p2-border-strong);
    border-radius: var(--p2-r-md);
    box-shadow: var(--p2-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--p2-s-4);
    z-index: 5;
}
.p2-sticky-summary .p2-summary-data {
    display: flex; gap: var(--p2-s-5);
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}
.p2-sticky-summary .p2-summary-label {
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    margin-right: 6px;
    font-family: var(--p2-font-sans);
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 1180px) {
    .game-active-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }
    .game-info-rail { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .app-shell { padding: var(--p2-s-3); }
    .game-active-layout { grid-template-columns: 1fr; }
    .page-header, .page-header-inline { grid-template-columns: 1fr; }
    .page-header-actions { justify-content: flex-start; }
    .archiv-ranking-header,
    .archiv-ranking-row { grid-template-columns: 44px minmax(0, 1fr) 56px 80px; }
    .archiv-ranking-header .archiv-col-days,
    .archiv-ranking-row .archiv-col-days { display: none; }
    .archiv-gameday-summary-right { gap: var(--p2-s-3); font-size: var(--p2-fs-micro); }
    .game-penalty-grid,
    .game-penalty-grid-dominant { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 640px) {
    .archiv-season-grid { grid-template-columns: 1fr; }
    .archiv-gameday-summary-right { flex-direction: column; align-items: flex-end; gap: 4px; }
    .archiv-result-header,
    .archiv-result-row { grid-template-columns: 36px minmax(0, 1fr) 60px 80px; padding: 6px 10px; }
}

/* --- Utility-Klassen -------------------------------------------------- */
.p2-mono { font-family: var(--p2-font-mono); font-variant-numeric: tabular-nums; }
.p2-meta { color: var(--p2-text-muted); font-size: var(--p2-fs-small); }
.p2-divider { height: 1px; background: var(--p2-border); margin: var(--p2-s-4) 0; }
.p2-row { display: flex; gap: var(--p2-s-3); align-items: center; flex-wrap: wrap; }
.p2-stack { display: grid; gap: var(--p2-s-2); }
.p2-stack-lg { display: grid; gap: var(--p2-s-4); }

/* =============================================================================
   PHASE 3 – Enthybridisierung
   Neutralisiert Alt-Geometrie in style.css (Viewport-Locks, fixed-Header) und
   ersetzt sie durch robustes, normal scrollendes Layout. Ausserdem: zentrale
   Styles fuer alle snt-* Zonen aus spieltag_neu.html sowie Chip-/Finance-
   Helferklassen. Nach Phase 3 sind die beiden Kernscreens nicht mehr Hybrid.
   ========================================================================== */

/* --- 1. spiel_aktiv: Viewport-Lock + fixed-Header entschaerfen -------- */
/* Die alte 2026-04-panel-Layoutlogik (body:has(.game-active-page-shell))
   ist im Template durch das Entfernen der Shell-Klasse deaktiviert. Die
   Regeln hier setzen verbleibende Geometrie-Artefakte konservativ zurueck,
   damit keine versteckten Locks mehr durchgreifen, falls Altklassen wieder
   in die Seite geraten. */
.game-active-header-band {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    z-index: auto !important;
    pointer-events: auto !important;
}

.game-active-page-shell,
.game-active-layout,
.game-player-rail,
.game-info-rail,
.game-center-stage {
    overflow: visible;
    max-height: none;
    height: auto;
}

.game-active-page-shell { padding: 0; gap: var(--p2-s-3); }

.game-player-rail-list {
    display: grid;
    gap: 6px;
    overflow: visible;
    padding-right: 0;
}

.game-player-rail-list form {
    display: block;
    min-height: 0;
}

.game-player-rail-button {
    min-height: 64px;
    /* Container-Query-Artefakte aus style.css neutralisieren, damit das
       Layout vorhersehbar ist */
    container-type: normal !important;
    container-name: none !important;
}

.game-center-stage {
    display: flex;
    flex-direction: column;
    gap: var(--p2-s-3);
    min-height: 0;
    padding: var(--p2-s-4);
}
.game-center-stage > .setup-card,
.game-center-stage > .game-work-card,
.game-center-stage > .game-penalty-stage-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.game-penalty-stage-card {
    display: flex;
    flex-direction: column;
    gap: var(--p2-s-3);
}
.game-penalty-stage-card .game-penalty-grid-dominant {
    grid-auto-rows: auto;
    align-content: start;
}
.game-penalty-stage-card .game-penalty-button {
    container-type: normal !important;
    container-name: none !important;
    height: auto;
    min-height: 72px;
}

.game-info-rail {
    display: flex;
    flex-direction: column;
    gap: var(--p2-s-3);
}
.game-info-rail > .game-utility-bar { margin-top: auto; }

/* Viewport-Lock (body:has(.game-active-page-shell)) endgueltig stilllegen,
   auch falls das Template die Klasse irgendwo wiederbekommt. */
body:has(.game-active-page-shell),
body:has(.game-active-page-shell) .app-shell,
body:has(.game-active-page-shell) .content {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Header-Band responsive: auf schmalen Screens einfach mitscrollen lassen,
   statt wie frueher display:none zu forcieren */
@media (max-width: 820px) {
    .game-active-header-band { display: flex !important; flex-wrap: wrap; }
}

/* Delta-Badges aus der Info-Rail konsistent wie die restlichen Status-Dots */
.game-info-delta {
    font-family: var(--p2-font-sans);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    padding: 2px 8px;
    border-radius: var(--p2-r-sm);
    background: var(--p2-neutral-bg);
    color: var(--p2-text-muted);
    border: 1px solid var(--p2-neutral-border);
    white-space: nowrap;
}
.game-info-delta-pos { color: var(--p2-ok); background: var(--p2-ok-bg); border-color: var(--p2-ok-border); }
.game-info-delta-neg { color: var(--p2-danger); background: var(--p2-danger-bg); border-color: var(--p2-danger-border); }

/* End-Confirm-Strip im Info-Rail ruhig einbetten */
.game-end-confirm-strip {
    padding: var(--p2-s-3);
    background: var(--p2-danger-bg);
    border: 1px solid var(--p2-danger-border);
    border-radius: var(--p2-r-sm);
    display: grid;
    gap: var(--p2-s-2);
}
.game-end-confirm-strip .game-end-confirm-text {
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-danger);
    margin: 0;
}
.game-end-confirm-actions { display: grid; gap: var(--p2-s-2); }

/* --- 2. spieltag_neu: zentrale snt-* Basis --------------------------- */
/* Diese Regeln wandern aus dem Template-<style>-Block und aus den JS-
   style.cssText-Zuweisungen ins Designsystem. */

/* Result-Row */
.snt-result-row {
    padding: var(--p2-s-4) !important;
    margin: 0 0 var(--p2-s-3) !important;
    background: var(--p2-bg-panel) !important;
    border: 1px solid var(--p2-border) !important;
    border-radius: var(--p2-r-md) !important;
    box-shadow: none;
}
.snt-result-row[data-player] { display: none; }
.snt-result-row.is-visible { display: block; }

.snt-player-header {
    display: flex;
    align-items: center;
    gap: var(--p2-s-3);
    padding-bottom: var(--p2-s-2);
    margin-bottom: var(--p2-s-3);
    border-bottom: 1px solid var(--p2-border);
    flex-wrap: wrap;
}
.snt-player-header strong {
    font-size: 1rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}

/* Live-Bar: Platz / Last / Strafen / Kasse in tabellarischer Zahlen-Optik */
.snt-live-bar {
    display: flex;
    gap: var(--p2-s-4);
    flex-wrap: wrap;
    padding: var(--p2-s-2) var(--p2-s-3);
    margin-bottom: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    letter-spacing: 0.02em;
}
.snt-live-bar strong {
    font-family: var(--p2-font-mono);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
    font-weight: var(--p2-fw-semibold);
    margin-left: 4px;
}

/* Strafenraster pro Spieler */
.snt-pen-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 6px;
}
.snt-pen-row {
    display: flex;
    align-items: center;
    gap: var(--p2-s-2);
    padding: 8px 10px;
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
}
.snt-pen-row:nth-child(even) { background: var(--p2-bg-sunken); }
.snt-pen-label {
    flex: 1;
    min-width: 0;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.snt-pen-meta {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
.snt-pen-input {
    width: 64px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;
    background: var(--p2-bg-panel) !important;
    border: 1px solid var(--p2-border) !important;
    border-radius: var(--p2-r-sm) !important;
    text-align: center;
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Teilnehmer-Stepper: Bereich fuer Stammspieler + Gast-Add */
.snt-participants-grid { display: grid; gap: var(--p2-s-4); }
.snt-guest-block { display: grid; gap: var(--p2-s-3); margin-top: var(--p2-s-4); }
.snt-guest-select { flex: 1; min-width: 180px; }

.snt-new-guest-input-wrap { display: none; }
.snt-new-guest-input-wrap.is-visible { display: block; margin-top: var(--p2-s-2); }
.snt-new-guest-input-wrap .touch-input { flex: 1; min-width: 200px; }

.snt-subtle-note { font-size: var(--p2-fs-micro); color: var(--p2-text-muted); letter-spacing: 0.02em; }

/* Gast-Chips: einheitliche Optik fuer normale Gaeste und Saison-Gaeste */
.snt-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--p2-s-2);
}
.snt-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--p2-s-2);
    padding: 4px 6px 4px 10px;
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text);
    font-size: var(--p2-fs-small);
    line-height: 1.3;
}
.snt-chip--season {
    background: var(--p2-accent-soft);
    border-color: var(--p2-border-accent);
    color: var(--p2-accent);
}
.snt-chip-remove {
    background: transparent;
    border: 0;
    color: var(--p2-text-muted);
    font-size: 0.95rem;
    padding: 2px 6px;
    border-radius: var(--p2-r-xs);
    cursor: pointer;
    line-height: 1;
}
.snt-chip-remove:hover { color: var(--p2-danger); background: var(--p2-danger-bg); }
.snt-chip-remove:focus-visible { outline: 0; box-shadow: var(--p2-shadow-focus); }

/* Finanz-Zeilen: klare horizontale Grid-Optik statt Inline-Flex */
.snt-finance-row {
    display: grid;
    grid-template-columns: 140px minmax(180px, 1fr) auto;
    gap: var(--p2-s-2);
    align-items: end;
    margin-bottom: var(--p2-s-2);
}
.snt-finance-row .input-card { margin: 0; }
.snt-finance-row .snt-finance-remove {
    align-self: end;
    margin: 0;
    min-height: 40px;
    padding: 0 12px;
}
@media (max-width: 640px) {
    .snt-finance-row { grid-template-columns: 120px 1fr auto; }
}

.snt-finance-group-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--p2-s-2);
}
.snt-finance-group-head .form-label { margin: 0; }
.snt-finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--p2-s-5);
}

/* Notizen-Checkbox als ruhige Toggle-Cards */
.snt-option-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: var(--p2-s-3) !important;
    cursor: pointer;
}
.snt-option-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--p2-accent-hot);
    flex-shrink: 0;
}
.snt-option-toggle--highlight {
    border: 1px solid var(--p2-warn-border) !important;
    background: var(--p2-warn-bg) !important;
}
.snt-option-toggle .form-label { margin: 0; }

/* Submit-Leiste: geordnet, nicht per Inline-Stil */
.snt-submit-bar {
    display: grid;
    gap: var(--p2-s-3);
    padding: var(--p2-s-5) 0 var(--p2-s-6);
}
.snt-submit-bar .secondary-action { text-align: center; text-decoration: none; }

/* Header-Pflichtmarkierung (war Inline: color:#c0392b;) */
.p2-required { color: var(--p2-danger); font-weight: var(--p2-fw-bold); }

/* Startflow: konsistente Meta-Abstaende ohne Inline-Styles */
.game-start-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--p2-s-2);
}

/* Sticky-Footer fuer spieltag_neu: koennte spaeter Summary aufnehmen,
   stellt aktuell nur sicher, dass die Submit-Leiste nicht an den Rand knallt */
.snt-results-empty {
    padding: var(--p2-s-5);
    text-align: center;
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
    border: 1px dashed var(--p2-border);
    border-radius: var(--p2-r-md);
    background: var(--p2-bg-sunken);
}

/* =============================================================================
   PHASE 4 – Startflow + Hub-Screen Konsolidierung
   Hebt die verbleibenden Alt-Primitiven in spiel_start.html und
   rundenuebersicht.html auf die Produktsprache von Phase 2/3.
   Kein Komplettumbau – Overrides auf bestehende Klassennamen.
   ========================================================================== */

/* --- spiel_start.html: Master-/Side-Layout ---------------------------- */
.game-day-shell {
    /* Panel-Chrome vom phase2-System \u00fcbernehmen; eigene Styles bleiben zur\u00fcck */
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-4);
}

.game-day-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.82fr);
    gap: var(--p2-s-5);
    align-items: start;
}

.game-day-main {
    display: grid;
    gap: var(--p2-s-4);
    min-width: 0;
}

.game-day-side {
    display: grid;
    gap: var(--p2-s-4);
    position: sticky;
    top: var(--p2-s-4);
    min-width: 0;
}

/* game-day-card: nutzt setup-card als Panel; hier nur interne Rhythmik */
.setup-card.game-day-card,
.info-card.game-day-summary-card {
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    box-shadow: var(--p2-shadow-sm);
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-3);
    backdrop-filter: none;
}

.setup-card.game-day-card h3,
.info-card.game-day-summary-card h3 {
    font-size: var(--p2-fs-h2);
    font-weight: var(--p2-fw-semibold);
    margin: 0;
}

.setup-card.game-day-card > p,
.info-card.game-day-summary-card > p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    margin: 0;
}

.setup-card.game-day-card p.choice-card-text,
.info-card.game-day-summary-card p.choice-card-text {
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
}

.setup-card.game-day-card .feature-tag,
.info-card.game-day-summary-card .feature-tag {
    margin-bottom: -4px;
}

/* Stammspieler-Auswahl: checkbox-card als echter Phase-2 Selector */
.game-day-player-toggle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--p2-s-2);
}

.checkbox-card.game-day-toggle-card {
    display: flex;
    align-items: center;
    gap: var(--p2-s-3);
    padding: 10px 14px;
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text-dim);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
    cursor: pointer;
    transition: border-color var(--p2-dur) var(--p2-ease), background var(--p2-dur) var(--p2-ease);
}
.checkbox-card.game-day-toggle-card:hover {
    border-color: var(--p2-border-strong);
    background: var(--p2-bg-hover);
}
.checkbox-card.game-day-toggle-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--p2-accent-hot);
    margin: 0;
    flex-shrink: 0;
}
.checkbox-card.game-day-toggle-card.game-day-toggle-card-active,
.checkbox-card.game-day-toggle-card:has(input[type="checkbox"]:checked) {
    border-color: var(--p2-border-accent);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-raised);
    color: var(--p2-text);
}

/* Gast-Inline-Add-Zeile */
.inline-add-row {
    display: flex;
    gap: var(--p2-s-2);
    align-items: flex-end;
    flex-wrap: wrap;
}
.inline-add-row > .input-card,
.inline-add-row > .touch-input { flex: 1 1 180px; min-width: 160px; }
.game-day-inline-card { min-width: 220px; }

.game-day-guest-actions { display: grid; gap: var(--p2-s-3); }

.game-day-guest-name-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--p2-s-2);
}
.game-day-guest-name-grid .input-card { min-width: 0; }
.game-day-guest-name-grid .game-day-guest-email-field { grid-column: 1 / -1; }
.game-day-guest-name-grid button { grid-column: 1 / -1; justify-self: start; }

@media (max-width: 540px) {
    .game-day-guest-name-grid { grid-template-columns: 1fr; }
    .game-day-guest-name-grid .game-day-guest-email-field { grid-column: auto; }
}

/* Gast-Chip-Liste (bestehende Klassen .chip-list / .list-chip) */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--p2-s-2);
}
.list-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--p2-s-2);
    padding: 4px 10px;
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
    cursor: pointer;
    transition: border-color var(--p2-dur) var(--p2-ease), background var(--p2-dur) var(--p2-ease), color var(--p2-dur) var(--p2-ease);
}
.list-chip:hover {
    background: var(--p2-danger-bg);
    border-color: var(--p2-danger-border);
    color: var(--p2-danger);
}
.list-chip > span:last-child {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-wide);
    opacity: 0.7;
}
.list-chip .chip-email-badge {
    font-size: var(--p2-fs-micro);
    opacity: 0.7;
    text-transform: none;
    letter-spacing: 0;
}

/* Summary-Bar (KPI-\u00e4hnlich) */
.protocol-summary-bar.game-start-summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--p2-s-2);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.protocol-summary-bar.game-start-summary-bar .protocol-summary-item {
    display: grid;
    gap: 2px;
    padding: 10px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    min-width: 0;
}
.protocol-summary-bar.game-start-summary-bar .protocol-summary-item span {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.protocol-summary-bar.game-start-summary-bar .protocol-summary-item strong {
    font-family: var(--p2-font-mono);
    font-size: 1.0625rem;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
    font-weight: var(--p2-fw-semibold);
}
.protocol-summary-bar.game-start-summary-bar .protocol-summary-item small {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-faint);
}

/* Startscreen-Layout: auf schmaleren Breiten einspaltig; der einzige Start-
   Button sitzt am Ende der Sidebar und rutscht damit ans Seitenende. */
@media (max-width: 960px) {
    .game-day-layout { grid-template-columns: 1fr; }
    .game-day-side { position: static; }
}

/* --- rundenuebersicht.html: Hub-Screen Overrides --------------------- */
.season-overview-panel {
    display: grid;
    gap: var(--p2-s-4);
    padding: var(--p2-s-5);
}

.season-overview-header { align-items: start; }

.season-overview-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--p2-s-3);
}
.season-closing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--p2-s-2);
}

.season-overview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p2-s-2);
    align-items: center;
}

/* Saison-Status-Pill: Farb-Varianten via Status-Token */
.season-status-pill.season-status-ready,
.season-status-pill.season-status-can_close {
    background: var(--p2-ok-bg);
    border-color: var(--p2-ok-border);
    color: var(--p2-ok);
}
.season-status-pill.season-status-in_progress,
.season-status-pill.season-status-active {
    background: var(--p2-accent-soft);
    border-color: var(--p2-border-accent);
    color: var(--p2-accent);
}
.season-status-pill.season-status-empty {
    background: var(--p2-warn-bg);
    border-color: var(--p2-warn-border);
    color: var(--p2-warn);
}

.season-status-hint {
    padding: var(--p2-s-3) var(--p2-s-4);
    background: var(--p2-info-bg);
    border: 1px solid var(--p2-info-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-info);
    font-size: var(--p2-fs-small);
}
.season-status-hint p { margin: 0; }

/* Gastgeber-Fortschrittsblock */
.season-host-block { padding: var(--p2-s-5); }

.season-progress-bar-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--p2-s-3);
    align-items: center;
    margin-top: var(--p2-s-2);
    margin-bottom: var(--p2-s-4);
}
.season-progress-bar {
    height: 6px;
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-pill);
    overflow: hidden;
}
.season-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--p2-accent-hot), var(--p2-accent));
    border-radius: var(--p2-r-pill);
    transition: width var(--p2-dur) var(--p2-ease);
}
.season-progress-label {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text-dim);
    font-variant-numeric: tabular-nums;
}

.season-host-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--p2-s-4);
}
@media (max-width: 720px) {
    .season-host-grid { grid-template-columns: 1fr; }
}

.season-host-column {
    display: grid;
    gap: var(--p2-s-2);
}

.season-host-column-label {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}

.season-host-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.season-host-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--p2-s-2);
    padding: 4px 10px;
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    color: var(--p2-text-dim);
    letter-spacing: 0.005em;
}
.season-host-chip-complete {
    background: var(--p2-ok-bg);
    border-color: var(--p2-ok-border);
    color: var(--p2-ok);
}
.season-host-chip-open { color: var(--p2-text); }
.season-host-chip-next {
    background: var(--p2-accent-soft);
    border-color: var(--p2-border-accent);
    color: var(--p2-accent);
    font-weight: var(--p2-fw-semibold);
}
.season-host-chip-last,
.season-host-chip-badge {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-wide);
    opacity: 0.85;
    font-weight: var(--p2-fw-semibold);
}
.season-host-chip-last .season-host-chip-badge { opacity: 1; }
.season-host-empty { color: var(--p2-text-muted); font-size: var(--p2-fs-small); margin: 0; }

/* Saisonranking-Tabelle: identisch zur archiv_saison-Optik */
.season-ranking-block { padding: var(--p2-s-5); }

.season-ranking-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.season-ranking-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.5fr) 80px 110px 80px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 10px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
}
.season-ranking-row:first-child { border-top: 0; }
.season-ranking-row-head {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.season-ranking-row strong { color: var(--p2-text); font-weight: var(--p2-fw-semibold); }
.season-ranking-row span:nth-child(1),
.season-ranking-row span:nth-child(3),
.season-ranking-row span:nth-child(4),
.season-ranking-row span:nth-child(5) {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-dim);
}
.season-ranking-row:not(.season-ranking-row-head) span:nth-child(1) {
    color: var(--p2-text-muted);
}
.season-ranking-row:not(.season-ranking-row-head) span:nth-child(3),
.season-ranking-row:not(.season-ranking-row-head) span:nth-child(4),
.season-ranking-row:not(.season-ranking-row-head) span:nth-child(5) {
    text-align: right;
}
.season-ranking-row-leader {
    background: linear-gradient(90deg, var(--p2-ok-bg), transparent 60%);
    border-left: 2px solid var(--p2-ok);
}
.season-ranking-row-trailing {
    background: linear-gradient(90deg, var(--p2-danger-bg), transparent 60%);
    border-left: 2px solid var(--p2-danger);
}

.season-player-type-badge {
    display: inline-flex;
    /* Kompakteres Badge: weniger horizontale Polsterung und knapperer
       Abstand zum Spielernamen. Verhindert, dass das "Gast"-Badge die
       Namensspalte in schmalen Tabellen unnoetig breit wirken laesst. */
    padding: 0 5px;
    margin-left: 4px;
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.02em;
    border-radius: var(--p2-r-xs);
    border: 1px solid var(--p2-neutral-border);
    background: var(--p2-neutral-bg);
    color: var(--p2-text-muted);
    vertical-align: middle;
    text-transform: none;
    white-space: nowrap;
    line-height: 1.5;
}
.season-player-type-guest {
    background: var(--p2-info-bg);
    border-color: var(--p2-info-border);
    color: var(--p2-info);
}

@media (max-width: 900px) {
    .season-ranking-row { grid-template-columns: 44px minmax(0, 1fr) 56px 80px; }
    .season-ranking-row > span:nth-child(5) { display: none; }
}

/* Spieltag-Liste (Hub) + Archivliste (Hub) */
.season-gameday-list,
.season-archive-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-2);
}
.season-gameday-item,
.season-archive-item {
    padding: var(--p2-s-4);
    background: var(--p2-bg-raised);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    box-shadow: var(--p2-shadow-sm);
    display: grid;
    gap: var(--p2-s-2);
}
.season-gameday-item > p { font-size: var(--p2-fs-small); color: var(--p2-text-muted); margin: 0; }
.season-gameday-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--p2-s-3);
    flex-wrap: wrap;
}
.season-gameday-head strong {
    font-size: 0.9375rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.season-gameday-head p {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin-top: 2px;
}
.season-gameday-meta {
    display: flex;
    gap: var(--p2-s-2);
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.season-gameday-photo {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: var(--p2-r-sm);
    border: 1px solid var(--p2-border);
    margin-bottom: var(--p2-s-2);
}

/* Manuell-Badge (war als Inline-Style in rundenuebersicht) */
.season-manual-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-left: 6px;
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.02em;
    border-radius: var(--p2-r-xs);
    background: var(--p2-accent-soft);
    border: 1px solid var(--p2-border-accent);
    color: var(--p2-accent);
    vertical-align: middle;
}

/* Inline-Delete-Form fuer manuell angelegte Spieltage */
.season-gameday-delete-form { margin: var(--p2-s-2) 0 0; }
.season-gameday-delete-form button { min-height: 36px; padding: 0 var(--p2-s-3); font-size: var(--p2-fs-micro); }

/* =============================================================================
   PHASE 5 – Kassenbereich (kasse / kasse_details / kasse_verlauf)
   Ziel: ruhige, seriöse Finanzoberfläche mit klarer Hierarchie.
   Setzt auf den bestehenden Markup-Klassen auf (.cash-*, .maintenance-card,
   .audit-*), hebt sie aber konsequent auf das Phase-2-Token-System.
   ========================================================================== */

/* --- 1. Seite + Header ------------------------------------------------ */
.cash-page-shell { display: grid; gap: var(--p2-s-4); }
.cash-phase-panel {
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-4);
}

.cash-phase-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--p2-s-4);
}
@media (max-width: 720px) {
    .cash-phase-header { grid-template-columns: 1fr; }
    .cash-phase-header .cash-page-total-card { justify-self: start; min-width: 0; width: 100%; }
}

/* Haupt-KPI-Karte oben rechts (aktueller Kassenstand) */
.cash-page-total-card {
    display: grid;
    gap: 4px;
    padding: var(--p2-s-4) var(--p2-s-5);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-raised);
    border: 1px solid var(--p2-border-accent);
    border-radius: var(--p2-r-md);
    min-width: 200px;
    justify-items: start;
    backdrop-filter: none;
}
.cash-page-total-card .feature-tag {
    color: var(--p2-accent);
    margin: 0;
}
.cash-page-total-card strong {
    font-family: var(--p2-font-mono);
    font-size: 1.75rem;
    font-weight: var(--p2-fw-semibold);
    line-height: 1.1;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.cash-page-total-card small {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    letter-spacing: 0.02em;
}

/* --- 2. KPI-Streifen -------------------------------------------------- */
.cash-summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--p2-s-3);
}
.cash-summary-metric {
    display: grid;
    gap: 4px;
    padding: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    position: relative;
}
.cash-metric-label {
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: var(--p2-tracking-meta);
    text-transform: uppercase;
    color: var(--p2-text-muted);
}
.cash-metric-value {
    font-family: var(--p2-font-mono);
    font-size: 1.5rem;
    font-weight: var(--p2-fw-semibold);
    line-height: 1.1;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.cash-metric-sub {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-faint);
}

/* Farbiger Left-Accent pro Status, statt Hintergrund-Tint */
.cash-summary-metric-open::before,
.cash-summary-metric-partial::before,
.cash-summary-metric-paid::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: var(--p2-r-md) 0 0 var(--p2-r-md);
}
.cash-summary-metric-open::before    { background: var(--p2-warn); }
.cash-summary-metric-partial::before { background: var(--p2-info); }
.cash-summary-metric-paid::before    { background: var(--p2-ok); }

.cash-summary-metric-open .cash-metric-value    { color: var(--p2-warn); }
.cash-summary-metric-paid .cash-metric-value    { color: var(--p2-ok); }

/* --- 3. Kassenwart-Status-Band --------------------------------------- */
.cash-status-band {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--p2-s-4);
    padding: var(--p2-s-4);
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}
@media (max-width: 820px) {
    .cash-status-band { grid-template-columns: 1fr; }
}
.cash-status-band-main { display: grid; gap: 4px; }
.cash-status-band-main h3 {
    font-size: 1.0625rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.cash-status-band-main > p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}
.cash-status-band-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--p2-s-2);
    align-content: start;
}
.cash-status-line {
    display: grid;
    gap: 2px;
    padding: 8px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    min-width: 0;
}
.cash-status-line span {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.cash-status-line strong {
    font-family: var(--p2-font-mono);
    font-size: 0.9375rem;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
    font-weight: var(--p2-fw-semibold);
}

/* --- 4. Kassen-Section-Blocks / Maintenance-Cards -------------------- */
.cash-section-block {
    padding: var(--p2-s-5);
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    box-shadow: var(--p2-shadow-sm);
    backdrop-filter: none;
}

.maintenance-card {
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    box-shadow: var(--p2-shadow-sm);
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-3);
    backdrop-filter: none;
}
.maintenance-card h3 {
    font-size: var(--p2-fs-h2);
    font-weight: var(--p2-fw-semibold);
}
.maintenance-card > p { font-size: var(--p2-fs-small); color: var(--p2-text-muted); margin: 0; }

.maintenance-form { display: grid; gap: var(--p2-s-3); }
.maintenance-form-compact { gap: var(--p2-s-2); }

.cash-manager-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--p2-s-3);
}
.cash-manager-grid-single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
    .cash-manager-grid { grid-template-columns: 1fr; }
}

.cash-readonly-card {
    background: linear-gradient(180deg, var(--p2-warn-bg), transparent 140%), var(--p2-bg-panel);
    border-color: var(--p2-warn-border);
}
.cash-readonly-card h3 { color: var(--p2-warn); }
.cash-readonly-note {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    line-height: 1.5;
}

.cash-inline-form { display: grid; gap: var(--p2-s-2); }

/* Manuelle Buchung: Form-Grid */
.cash-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--p2-s-2);
    align-items: end;
}
.cash-form-grid .cash-description-card { grid-column: 1 / -1; }
.cash-form-grid > button { align-self: end; min-height: 44px; }
@media (max-width: 640px) {
    .cash-form-grid { grid-template-columns: 1fr; }
}

/* --- 5. Filter-Leiste ------------------------------------------------ */
.cash-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--p2-s-2);
    align-items: end;
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    margin: var(--p2-s-3) 0;
}
.cash-filter-form .input-card { margin: 0; }
.cash-filter-form .cash-filter-search { grid-column: span 2; min-width: 220px; }
.cash-filter-form > button,
.cash-filter-form > a.secondary-action {
    min-height: 44px;
    align-self: end;
}
@media (max-width: 640px) {
    .cash-filter-form { grid-template-columns: 1fr; }
    .cash-filter-form .cash-filter-search { grid-column: auto; }
}

/* --- 6. Cash-Tabelle ------------------------------------------------- */
.cash-table-wrap {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow-x: auto;
    background: var(--p2-bg-sunken);
}
.cash-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--p2-fs-small);
    font-variant-numeric: tabular-nums;
    min-width: 640px;
}
.cash-table th {
    padding: 10px var(--p2-s-3);
    text-align: left;
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.cash-table td {
    padding: 10px var(--p2-s-3);
    border-top: 1px solid var(--p2-border);
    vertical-align: top;
    color: var(--p2-text-dim);
}
.cash-table tbody tr:first-child td { border-top: 0; }
.cash-table tbody tr:hover td { background: rgba(96, 165, 250, 0.04); }
.cash-table td strong {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
    display: block;
    margin-bottom: 2px;
}
.cash-table td small {
    display: block;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    letter-spacing: 0.01em;
}
.cash-table td small.cash-person-email {
    color: var(--p2-text-faint);
    margin-top: 2px;
}

.cash-amount-cell {
    text-align: right;
    font-family: var(--p2-font-mono);
    white-space: nowrap;
}
.cash-amount-cell strong {
    text-align: right;
    font-family: var(--p2-font-mono);
    font-size: 0.95rem;
    color: var(--p2-text);
}
.cash-amount-cell small { text-align: right; color: var(--p2-text-muted); }
.cash-amount-voided { text-decoration: line-through; opacity: 0.6; color: var(--p2-text-muted); }

.cash-row-current-game td:first-child {
    border-left: 2px solid var(--p2-accent);
}

/* Status-Form-Zelle (Inline-Update) */
.cash-status-form {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 4px;
    align-items: center;
    min-width: 0;
}
.cash-status-form .touch-input { min-height: 36px; padding: 4px 8px; font-size: var(--p2-fs-small); min-width: 0; }
.cash-status-form button { min-height: 36px; padding: 0 var(--p2-s-3); font-size: var(--p2-fs-micro); }
@media (max-width: 1100px) {
    .cash-status-form { grid-template-columns: 1fr; gap: 4px; }
}

/* --- 7. Status-Pills (Cash-spezifisch) ------------------------------- */
.cash-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    min-height: 22px;
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.02em;
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    color: var(--p2-text-dim);
    white-space: nowrap;
    text-transform: none;
}
.cash-status-pill-bezahlt,
.cash-status-pill-ready,
.cash-status-pill-sent {
    background: var(--p2-ok-bg);
    border-color: var(--p2-ok-border);
    color: var(--p2-ok);
}
.cash-status-pill-teilweise_bezahlt {
    background: var(--p2-info-bg);
    border-color: var(--p2-info-border);
    color: var(--p2-info);
}
.cash-status-pill-offen {
    background: var(--p2-warn-bg);
    border-color: var(--p2-warn-border);
    color: var(--p2-warn);
}
.cash-status-pill-storniert,
.cash-status-pill-erlassen,
.cash-status-pill-missing,
.cash-status-pill-error {
    background: var(--p2-danger-bg);
    border-color: var(--p2-danger-border);
    color: var(--p2-danger);
}
.cash-status-pill-resend { background: var(--p2-warn-bg); border-color: var(--p2-warn-border); color: var(--p2-warn); }
.cash-status-pill-stable { background: var(--p2-neutral-bg); border-color: var(--p2-neutral-border); color: var(--p2-text-muted); }
.cash-status-pill-new { background: var(--p2-accent-soft); border-color: var(--p2-border-accent); color: var(--p2-accent); }
.cash-status-pill-readiness,
.cash-status-pill-delivery,
.cash-status-pill-delivery-note { font-weight: var(--p2-fw-semibold); }

.cash-status-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* Aktuelle-Spiel-Badge */
.cash-current-game-badge {
    display: inline-flex;
    padding: 1px 8px;
    margin-left: var(--p2-s-2);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    background: var(--p2-accent-soft);
    border: 1px solid var(--p2-border-accent);
    color: var(--p2-accent);
    border-radius: var(--p2-r-xs);
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* --- 8. Personenübersicht kompakt (kasse.html) ----------------------- */
.cash-person-compact-list {
    display: grid;
    gap: 6px;
    margin-top: var(--p2-s-2);
}
.cash-person-compact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--p2-s-3);
    padding: 10px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    align-items: center;
}
.cash-person-compact-row:hover { border-color: var(--p2-border-strong); background: var(--p2-bg-hover); }
.cash-person-compact-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.cash-person-compact-info strong {
    font-size: var(--p2-fs-body);
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cash-person-compact-info small {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
}
.cash-person-compact-meta {
    display: flex;
    gap: var(--p2-s-3);
    align-items: center;
}
.cash-person-compact-meta strong {
    font-family: var(--p2-font-mono);
    font-size: 0.95rem;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.cash-person-compact-meta small {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Person-Status-Badge */
.cash-person-status-badge {
    display: inline-flex;
    padding: 2px 10px;
    min-height: 22px;
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.02em;
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    color: var(--p2-text-dim);
    align-items: center;
}
.cash-person-status-erledigt {
    background: var(--p2-ok-bg); border-color: var(--p2-ok-border); color: var(--p2-ok);
}
.cash-person-status-teilweise {
    background: var(--p2-info-bg); border-color: var(--p2-info-border); color: var(--p2-info);
}
.cash-person-status-offen {
    background: var(--p2-warn-bg); border-color: var(--p2-warn-border); color: var(--p2-warn);
}

/* --- 9. Person-Summary-Cards (kasse_details.html) -------------------- */
.cash-person-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-2);
}
.cash-person-summary-card {
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    padding: 0;
    display: block;
    overflow: hidden;
    transition: border-color var(--p2-dur) var(--p2-ease);
}
.cash-person-summary-card[open] { border-color: var(--p2-border-strong); }

.cash-person-summary-head {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--p2-s-3);
    padding: var(--p2-s-3) var(--p2-s-4);
    align-items: center;
    user-select: none;
}
.cash-person-summary-head::-webkit-details-marker { display: none; }
.cash-person-summary-head > div:first-child { min-width: 0; }
.cash-person-summary-head h3 {
    font-size: 1rem;
    font-weight: var(--p2-fw-semibold);
    margin: 2px 0 0;
}
.cash-person-summary-head p {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin: 0;
}
.cash-person-summary-head .feature-tag { margin: 0; }
.cash-person-summary-totals {
    display: grid;
    gap: 2px;
    text-align: right;
    justify-items: end;
}
.cash-person-summary-totals strong {
    font-family: var(--p2-font-mono);
    font-size: 1.0625rem;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
    font-weight: var(--p2-fw-semibold);
}
.cash-person-summary-totals small {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}

.cash-person-summary-body {
    padding: var(--p2-s-3) var(--p2-s-4) var(--p2-s-4);
    border-top: 1px solid var(--p2-border);
    background: var(--p2-bg-sunken);
    display: grid;
    gap: var(--p2-s-2);
}
.cash-person-summary-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--p2-s-3);
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--p2-border);
}
.cash-person-summary-line:last-of-type { border-bottom: 0; }
.cash-person-summary-line > span:first-child {
    display: grid;
    min-width: 0;
}
.cash-person-summary-line > span:first-child strong {
    color: var(--p2-text);
    font-weight: var(--p2-fw-medium);
    font-size: var(--p2-fs-small);
}
.cash-person-summary-line > span:nth-child(2) {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    font-variant-numeric: tabular-nums;
}
.cash-person-summary-line small {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    grid-column: 1 / -1;
}

.cash-entry-current-game > span:first-child {
    border-left: 2px solid var(--p2-accent);
    padding-left: var(--p2-s-2);
}

.cash-abrechnung-form { margin-top: var(--p2-s-2); }

/* --- 10. Audit/History-Liste ---------------------------------------- */
.audit-list.cash-history-list {
    display: grid;
    gap: var(--p2-s-2);
    margin-top: var(--p2-s-2);
}
.audit-item.cash-history-item {
    padding: 10px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    display: grid;
    gap: 4px;
}
.cash-history-item p {
    margin: 0;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}
.cash-history-item p strong {
    font-family: var(--p2-font-mono);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.cash-history-item-current { border-left: 2px solid var(--p2-accent); }
.cash-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--p2-s-3);
    flex-wrap: wrap;
}
.cash-history-head strong {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
    font-size: var(--p2-fs-small);
}

/* Verlaufsarchiv */
.cash-verlauf-list { display: grid; gap: var(--p2-s-2); }

/* --- 11. Grids für Master-Detail ------------------------------------ */
.cash-secondary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--p2-s-3);
}
.cash-secondary-grid-calm { align-items: start; }
@media (max-width: 1080px) {
    .cash-secondary-grid { grid-template-columns: 1fr; }
}

.cash-detail-link-strip {
    display: flex;
    gap: var(--p2-s-2);
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: var(--p2-s-2);
}

/* --- 12. Persönliche Auswertung (selected_person) -------------------- */
.cash-personal-report-block { padding: var(--p2-s-5); }
.cash-personal-summary-grid,
.cash-personal-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-3);
}
.info-card.compact-card {
    padding: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: 4px;
}
.info-card.compact-card h3 {
    font-family: var(--p2-font-mono);
    font-size: 1.5rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.info-card.compact-card .feature-tag { margin: 0; }
.info-card.compact-card > p { font-size: var(--p2-fs-small); color: var(--p2-text-muted); margin: 0; }

.cash-personal-entry-list { display: grid; gap: 6px; margin-top: var(--p2-s-2); }
.cash-personal-entry-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--p2-s-3);
    padding: 8px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    align-items: baseline;
}
.cash-personal-entry-line strong {
    color: var(--p2-text);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
}
.cash-personal-entry-line > span {
    font-family: var(--p2-font-mono);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
    font-size: var(--p2-fs-small);
}
.cash-personal-entry-line small {
    grid-column: 1 / -1;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
}

/* Mail-Liste als ruhige UL */
ul.cash-mail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 4px;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    font-variant-numeric: tabular-nums;
}
ul.cash-mail-list li {
    padding: 6px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
}

/* --- 13. Mail-Status-Listen / Kontakt-Queue ------------------------- */
.cash-recipient-list,
.cash-contact-list {
    display: grid;
    gap: var(--p2-s-2);
    margin-top: var(--p2-s-2);
}
.cash-contact-form {
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    display: grid;
    gap: var(--p2-s-2);
}
.cash-contact-form-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--p2-s-3);
    flex-wrap: wrap;
}
.cash-contact-form-head strong {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
}
.cash-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--p2-s-2);
}
.cash-contact-grid .cash-contact-email { grid-column: 1 / -1; }
.cash-contact-grid button { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 640px) {
    .cash-contact-grid { grid-template-columns: 1fr; }
}

/* --- 14. Mail-Preview-Cards ----------------------------------------- */
.cash-mail-preview-list { display: grid; gap: var(--p2-s-3); margin-top: var(--p2-s-2); }
.cash-mail-preview-card {
    padding: var(--p2-s-4);
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: var(--p2-s-2);
}
.cash-mail-preview-card .round-overview-head {
    display: flex;
    justify-content: space-between;
    gap: var(--p2-s-3);
    align-items: flex-start;
    flex-wrap: wrap;
}
.cash-mail-preview-card h3 {
    font-size: 1rem;
    font-weight: var(--p2-fw-semibold);
    margin: 2px 0 0;
}
.cash-mail-preview-card p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
}
.cash-preview-status {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cash-person-mail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p2-s-3);
    padding: var(--p2-s-2) var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-dim);
}

.cash-mail-preview-body {
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    display: grid;
    gap: var(--p2-s-2);
}
.cash-mail-preview-body strong {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}

.cash-mail-template-details { border: 1px solid var(--p2-border); border-radius: var(--p2-r-sm); overflow: hidden; }
.cash-mail-template-details > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--p2-s-2) var(--p2-s-3);
    background: var(--p2-bg-panel);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    font-weight: var(--p2-fw-medium);
}
.cash-mail-template-details > summary::-webkit-details-marker { display: none; }
.cash-mail-template-details[open] > summary { border-bottom: 1px solid var(--p2-border); }
.cash-mail-preview-text {
    margin: 0;
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    white-space: pre-wrap;
    overflow-x: auto;
}

.cash-send-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p2-s-2);
    align-items: center;
    margin-top: var(--p2-s-2);
}

.cash-change-indicator,
.cash-resend-guidance {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin: 0;
}
.cash-change-indicator-warning,
.cash-resend-guidance-warning { color: var(--p2-warn); }

.cash-status-error-copy {
    font-size: var(--p2-fs-small);
    color: var(--p2-danger);
    margin: 0;
}
.cash-last-delivery-action {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin: 0;
}

/* Round-Overview-Head (aus bestehenden Audit-Items) – knackig */
.audit-item .round-overview-head {
    display: flex;
    justify-content: space-between;
    gap: var(--p2-s-3);
    align-items: center;
    flex-wrap: wrap;
}
.audit-item .round-overview-head strong {
    font-size: var(--p2-fs-body);
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
}
.audit-item p {
    margin: 0;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}

/* --- 15. Sonderfälle / Utility (Kasse) ------------------------------- */
.cash-report-card,
.cash-contact-card {
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-3);
}
.cash-report-card h3,
.cash-contact-card h3 {
    font-size: var(--p2-fs-h2);
    font-weight: var(--p2-fw-semibold);
}
.cash-report-card p,
.cash-contact-card p { font-size: var(--p2-fs-small); color: var(--p2-text-muted); margin: 0; }

/* History-More-Link (war Inline-Style margin-top:8px) */
.cash-history-more { margin-top: var(--p2-s-2); align-self: start; }

/* =============================================================================
   PHASE 6 – Analyse-/Statistik-Bereich (statistik_hub + statistik + insights)
   Ziel: ruhige Datenflächen mit klarer Hierarchie, einheitliche Tabellen-DNA,
   Charts als Teil des Produkts (nicht als Widgets), konsistente KPI-Sprache.
   ========================================================================== */

/* --- 1. Hub-Panel + Sections ---------------------------------------- */
.insights-shell { display: grid; gap: var(--p2-s-4); }
.insights-panel {
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-4);
}
.insights-section { padding: var(--p2-s-5); }
.insights-section .section-block-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--p2-s-4);
    flex-wrap: wrap;
}
.insights-section .section-block-head > p {
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
}

/* --- 2. KPI-Karten (Hub Overview) ----------------------------------- */
.insights-overview-grid,
.stat-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-2);
}
.insights-kpi-card,
.stat-overview-card {
    padding: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: 4px;
    backdrop-filter: none;
    box-shadow: none;
}
.insights-kpi-card .feature-tag,
.stat-overview-card .feature-tag { margin: 0; }
.insights-kpi-card h3,
.stat-overview-card h3 {
    font-family: var(--p2-font-mono);
    font-size: 1.5rem;
    font-weight: var(--p2-fw-semibold);
    line-height: 1.1;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.insights-kpi-card > p,
.stat-overview-card > p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
}

/* --- 3. Highlight-Karten (aktivster Spieler etc.) ------------------- */
.insights-highlight-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-3);
}
.insights-highlight-card {
    padding: var(--p2-s-4);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-panel);
    border: 1px solid var(--p2-border-accent);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: 4px;
}
.insights-highlight-card .feature-tag {
    margin: 0;
    color: var(--p2-accent);
}
.insights-highlight-card strong {
    font-size: 1.125rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.insights-highlight-card p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* --- 4. Fun-Facts-Liste --------------------------------------------- */
.insights-facts-list,
.stat-funfacts-list {
    list-style: none;
    padding: 0;
    margin: var(--p2-s-3) 0 0;
    display: grid;
    gap: 6px;
}
.insights-fact-item,
.stat-funfact-item {
    display: flex;
    align-items: baseline;
    gap: var(--p2-s-2);
    padding: 8px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-left: 2px solid var(--p2-accent);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    line-height: 1.45;
}
.stat-funfact-item p { margin: 0; }
.stat-funfact-icon {
    color: var(--p2-accent);
    font-weight: var(--p2-fw-bold);
    font-family: var(--p2-font-mono);
}
.stat-funfacts-list-spaced { margin-top: var(--p2-s-4); }

/* --- 5. Saison-Block (Hub) ------------------------------------------ */
.insights-season-row { display: grid; gap: var(--p2-s-3); margin-top: var(--p2-s-3); }
.insights-season-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--p2-s-2);
}
.insights-season-stat {
    padding: 10px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    display: grid;
    gap: 2px;
}
.insights-season-stat .feature-tag { margin: 0; }
.insights-season-stat strong {
    font-family: var(--p2-font-mono);
    font-size: 1.25rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}

.insights-season-standings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--p2-s-2);
}
.insights-standing-card {
    padding: var(--p2-s-3) var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: 2px;
}
.insights-standing-card .feature-tag { margin: 0; }
.insights-standing-card strong {
    font-size: 1.0625rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.insights-standing-card p {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.insights-standing-leader {
    border-left: 2px solid var(--p2-ok);
    background: linear-gradient(90deg, var(--p2-ok-bg), transparent 60%), var(--p2-bg-sunken);
}
.insights-standing-trailer {
    border-left: 2px solid var(--p2-danger);
    background: linear-gradient(90deg, var(--p2-danger-bg), transparent 60%), var(--p2-bg-sunken);
}

/* Mini-Ranking (Hub) */
.insights-mini-ranking {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.insights-mini-ranking-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 80px 56px;
    gap: var(--p2-s-3);
    align-items: baseline;
    padding: 8px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
}
.insights-mini-ranking-row:first-of-type { border-top: 0; }
.insights-mini-rank {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-medium);
}
.insights-rank-first { color: var(--p2-ok); font-weight: var(--p2-fw-bold); }
.insights-rank-last { color: var(--p2-danger); font-weight: var(--p2-fw-bold); }
.insights-mini-name {
    color: var(--p2-text);
    font-weight: var(--p2-fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.insights-mini-load,
.insights-mini-days {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-dim);
    text-align: right;
    font-size: var(--p2-fs-small);
}
.insights-mini-days { color: var(--p2-text-muted); }
.insights-mini-more {
    padding: 8px var(--p2-s-4);
    margin: 0;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    border-top: 1px solid var(--p2-border);
}
.insights-mini-more a { color: var(--p2-accent); }

/* --- 6. Spieler-Trend-Karten (Hub) ---------------------------------- */
.insights-trends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-3);
}
.insights-trend-card {
    padding: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: var(--p2-s-2);
}
.insights-trend-up { border-left: 2px solid var(--p2-ok); }
.insights-trend-down { border-left: 2px solid var(--p2-danger); }
.insights-trend-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--p2-s-2);
}
.insights-trend-header strong {
    font-size: 1rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.insights-trend-arrow {
    font-family: var(--p2-font-mono);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-bold);
}
.insights-trend-up .insights-trend-arrow { color: var(--p2-ok); }
.insights-trend-down .insights-trend-arrow { color: var(--p2-danger); }
.insights-trend-label {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
    margin: 0;
}
.insights-trend-meta {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-faint);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.insights-sparkline,
.stat-sparkline {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 36px;
    padding: 2px 0;
}
.insights-sparkline-bar,
.stat-sparkline-bar {
    flex: 1;
    min-width: 3px;
    background: linear-gradient(180deg, var(--p2-accent), var(--p2-accent-hot));
    border-radius: 2px 2px 0 0;
    opacity: 0.85;
}
.insights-trend-up .insights-sparkline-bar { background: linear-gradient(180deg, var(--p2-ok), #10b981); }
.insights-trend-down .insights-sparkline-bar { background: linear-gradient(180deg, var(--p2-danger), #dc2626); }

/* --- 7. Lieblings- & Angstgegner (Hub) ------------------------------ */
.insights-duel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-3);
}
.insights-duel-card {
    padding: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: var(--p2-s-3);
}
.insights-duel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--p2-s-2);
    padding-bottom: var(--p2-s-2);
    border-bottom: 1px solid var(--p2-border);
}
.insights-duel-player {
    font-size: 1.125rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    letter-spacing: 0.01em;
}
.insights-duel-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: var(--p2-s-3);
    row-gap: 2px;
}
.insights-duel-row-favorite { --duel-accent: var(--p2-ok, #16a34a); }
.insights-duel-row-nemesis  { --duel-accent: var(--p2-danger, #dc2626); }

.insights-duel-tag {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    font-weight: var(--p2-fw-semibold);
    padding: 4px 10px;
    border-radius: var(--p2-r-sm);
    border: 1px solid var(--duel-accent);
    color: var(--duel-accent);
    background: color-mix(in srgb, var(--duel-accent) 10%, transparent);
    white-space: nowrap;
}
.insights-duel-opponent {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.0625rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.insights-duel-score {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: var(--p2-fw-semibold);
    justify-self: end;
}
.insights-duel-score-win { color: var(--duel-accent); }
.insights-duel-score-loss { color: var(--p2-text-muted); }
.insights-duel-score-sep { color: var(--p2-text-faint); }
.insights-duel-meetings {
    grid-column: 2 / span 2;
    grid-row: 2;
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
    justify-self: start;
}

/* --- 8. Tendenzen (Hub) --------------------------------------------- */
.insights-tendenz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-3);
}
.insights-tendenz-card {
    padding: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: 4px;
}
.insights-tendenz-card .feature-tag { margin: 0; }
.insights-tendenz-card strong {
    font-family: var(--p2-font-mono);
    font-size: 1.25rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.insights-tendenz-card p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
}

/* --- 9. Hub-Nav-Links (Footer) -------------------------------------- */
.insights-nav-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-3);
}
.insights-nav-link {
    display: grid;
    gap: 4px;
    padding: var(--p2-s-4);
    background: var(--p2-bg-raised);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    color: var(--p2-text);
    text-decoration: none;
    transition: border-color var(--p2-dur) var(--p2-ease), transform var(--p2-dur) var(--p2-ease);
}
.insights-nav-link:hover {
    border-color: var(--p2-border-accent);
    transform: translateY(-1px);
}
.insights-nav-link strong {
    font-size: 1rem;
    font-weight: var(--p2-fw-semibold);
}
.insights-nav-link span {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}

/* --- 10. statistik.html: Ranking-Tabelle ---------------------------- */
.stat-ranking-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.stat-ranking-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1.5fr) 80px 70px 70px 110px 90px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 10px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
}
.stat-ranking-row:first-child { border-top: 0; }
.stat-ranking-row-head {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.stat-ranking-row:not(.stat-ranking-row-head) span:nth-child(1) {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-muted);
}
.stat-ranking-row strong {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
}
.stat-ranking-row:not(.stat-ranking-row-head) span:nth-child(n+3) {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--p2-text-dim);
}
.stat-ranking-row-head span:nth-child(n+3) { text-align: right; }
.stat-ranking-row-core { background: transparent; }
.stat-ranking-row-guest { background: rgba(96, 165, 250, 0.02); }
.stat-ranking-row-top {
    background: linear-gradient(90deg, var(--p2-ok-bg), transparent 60%);
    border-left: 2px solid var(--p2-ok);
}
.stat-ranking-row-last {
    background: linear-gradient(90deg, var(--p2-danger-bg), transparent 60%);
    border-left: 2px solid var(--p2-danger);
}

/* Für Saisontabelle (nur 5 Spalten) */
.stat-current-section .stat-ranking-row {
    grid-template-columns: 56px minmax(0, 1.5fr) 80px 110px 80px;
}

@media (max-width: 900px) {
    .stat-overview-section .stat-ranking-row { grid-template-columns: 40px minmax(0, 1fr) 60px 60px 90px; }
    .stat-overview-section .stat-ranking-row span:nth-child(5),
    .stat-overview-section .stat-ranking-row span:nth-child(7) { display: none; }
    .stat-current-section .stat-ranking-row { grid-template-columns: 44px minmax(0, 1fr) 60px 90px; }
    .stat-current-section .stat-ranking-row span:nth-child(5) { display: none; }
}

/* --- 11. Charts: ruhige Container ----------------------------------- */
.echarts-chart {
    width: 100%;
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    padding: var(--p2-s-3);
    margin-top: var(--p2-s-2);
    min-height: 220px;
}
.echarts-chart-bar-player { height: 340px; }
.echarts-chart-line { height: 320px; }

/* CSS-Fallback-Bars (ohne ECharts) */
.stat-bar-chart {
    display: grid;
    gap: 6px;
    margin-top: var(--p2-s-2);
}
.stat-bar-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 56px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 6px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
}
.stat-bar-label {
    color: var(--p2-text);
    font-weight: var(--p2-fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stat-bar-track {
    height: 8px;
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-pill);
    overflow: hidden;
}
.stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--p2-accent-hot), var(--p2-accent));
    border-radius: var(--p2-r-pill);
    transition: width var(--p2-dur) var(--p2-ease);
}
.stat-bar-count {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* --- 12. Spieler-Entwicklung (Trend-Tabelle) ------------------------ */
.stat-trend-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.stat-trend-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(120px, 1.5fr) 90px 40px minmax(0, 1fr);
    gap: var(--p2-s-3);
    align-items: center;
    padding: 8px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
}
.stat-trend-row:first-child { border-top: 0; }
.stat-trend-row-head {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.stat-trend-name {
    color: var(--p2-text);
    font-weight: var(--p2-fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stat-trend-avg {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-dim);
    text-align: right;
}
.stat-trend-arrow {
    font-family: var(--p2-font-mono);
    font-size: 1.125rem;
    font-weight: var(--p2-fw-bold);
    text-align: center;
    color: var(--p2-text-muted);
}
.stat-trend-arrow-up { color: var(--p2-ok); }
.stat-trend-arrow-down { color: var(--p2-danger); }
.stat-trend-arrow-flat { color: var(--p2-text-muted); }
.stat-trend-label {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-wide);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-medium);
}

@media (max-width: 720px) {
    .stat-trend-row { grid-template-columns: minmax(0, 1fr) 80px 40px; gap: var(--p2-s-2); }
    .stat-trend-row > .stat-sparkline,
    .stat-trend-row > .stat-trend-label { display: none; }
    .stat-trend-row-head > span:nth-child(2),
    .stat-trend-row-head > span:nth-child(5) { display: none; }
}

/* --- 13. Saisonvergleich -------------------------------------------- */
.stat-season-compare-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.stat-season-compare-row {
    display: grid;
    grid-template-columns: 80px minmax(160px, 1.5fr) 100px 100px 60px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 8px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
}
.stat-season-compare-row:first-child { border-top: 0; }
.stat-season-compare-row-head {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.stat-season-compare-label {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
}
.stat-season-compare-value {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-dim);
    text-align: right;
}
.stat-season-bar-wrap {
    height: 8px;
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-pill);
    overflow: hidden;
}
.stat-season-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--p2-accent-hot), var(--p2-accent));
    border-radius: var(--p2-r-pill);
    transition: width var(--p2-dur) var(--p2-ease);
}
@media (max-width: 720px) {
    .stat-season-compare-row { grid-template-columns: 60px minmax(0, 1fr) 90px; }
    .stat-season-compare-row > :nth-child(4),
    .stat-season-compare-row > :nth-child(5) { display: none; }
}

/* --- 14. Spielerprofile --------------------------------------------- */
.stat-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-2);
}
.stat-profile-card {
    padding: var(--p2-s-4);
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: var(--p2-s-3);
}
.stat-profile-card-reduced {
    background: var(--p2-bg-sunken);
    opacity: 0.85;
}
.stat-profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--p2-s-3);
}
.stat-profile-name {
    font-size: 1.0625rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    margin: 0;
}
.stat-profile-meta {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin: 2px 0 0;
    font-variant-numeric: tabular-nums;
}
.stat-profile-trend {
    font-family: var(--p2-font-mono);
    font-size: 1.25rem;
    font-weight: var(--p2-fw-bold);
    line-height: 1;
}
.stat-profile-trend-up { color: var(--p2-ok); }
.stat-profile-trend-down { color: var(--p2-danger); }
.stat-profile-trend-flat { color: var(--p2-text-muted); }

.stat-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--p2-s-2);
}
.stat-profile-stat {
    display: grid;
    gap: 2px;
    padding: 8px var(--p2-s-2);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    text-align: center;
}
.stat-profile-stat-value {
    font-family: var(--p2-font-mono);
    font-size: 1.0625rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.stat-profile-stat-label {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    letter-spacing: 0.02em;
}

.stat-profile-sparkline { height: 40px; }

.stat-profile-footer { display: grid; gap: var(--p2-s-2); }
.stat-profile-badge {
    display: inline-flex;
    padding: 2px 10px;
    background: var(--p2-accent-soft);
    border: 1px solid var(--p2-border-accent);
    color: var(--p2-accent);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.02em;
    justify-self: start;
}
.stat-profile-fact {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
    line-height: 1.4;
}
.stat-profile-fact em { color: var(--p2-text); font-style: normal; font-weight: var(--p2-fw-medium); }
.stat-profile-note {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
}
.stat-achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}
.stat-achievement {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 8px;
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.02em;
    border-radius: var(--p2-r-xs);
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    color: var(--p2-text-dim);
    cursor: help;
}
.stat-achievement::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}
/* Leistung — gold/bernstein */
.stat-achievement-leistung {
    background: rgba(234, 179, 8, 0.14);
    border-color: rgba(234, 179, 8, 0.32);
    color: #fcd34d;
}
/* Gastgeber — violett */
.stat-achievement-gastgeber {
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(139, 92, 246, 0.32);
    color: #c4b5fd;
}
/* Gäste — türkis */
.stat-achievement-gaeste {
    background: rgba(20, 184, 166, 0.14);
    border-color: rgba(20, 184, 166, 0.32);
    color: #5eead4;
}
/* Langzeit — blau */
.stat-achievement-langzeit {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.32);
    color: #bfdbfe;
}
/* Kurios — grün */
.stat-achievement-kurios {
    background: rgba(52, 211, 153, 0.14);
    border-color: rgba(52, 211, 153, 0.32);
    color: #a7f3d0;
}
/* Pech — rot */
.stat-achievement-pech {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.32);
    color: #fca5a5;
}

@media (max-width: 520px) {
    .stat-profile-stats { grid-template-columns: repeat(2, 1fr); }
}

/* --- 15. Gäste-Stats ------------------------------------------------ */
.stat-guest-extended-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--p2-s-2);
    margin-top: var(--p2-s-2);
}
.stat-guest-meta-card {
    padding: 10px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    display: grid;
    gap: 2px;
}
.stat-guest-meta-card p {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
    margin: 0;
}
.stat-guest-meta-card strong {
    font-family: var(--p2-font-mono);
    font-size: 1.0625rem;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.stat-data-note {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin: var(--p2-s-2) 0 0;
}

.stat-guest-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.stat-guest-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 80px 100px 100px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 8px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
}
.stat-guest-row:first-child { border-top: 0; }
.stat-guest-row-head {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.stat-guest-row span:first-child { color: var(--p2-text); font-weight: var(--p2-fw-medium); }
.stat-guest-row:not(.stat-guest-row-head) span:nth-child(n+2) {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-dim);
    text-align: right;
}
.stat-guest-row-head span:nth-child(n+2) { text-align: right; }

/* --- 16. Archiv-Filter + Archivtabelle ------------------------------ */
.archive-page-shell { display: grid; gap: var(--p2-s-4); }
.archive-page-panel {
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-4);
}
.archive-filter-bar { padding: var(--p2-s-5); }

.archive-filter-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--p2-s-2);
    align-items: end;
    margin-top: var(--p2-s-2);
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}
.archive-filter-form .form-field-group {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.archive-filter-form .form-field-group > span {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.archive-filter-form select {
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text);
    padding: 8px 10px;
    font-family: var(--p2-font-sans);
    font-size: var(--p2-fs-small);
    min-height: 40px;
}
.archive-filter-form select:focus { outline: 0; border-color: var(--p2-border-focus); box-shadow: var(--p2-shadow-focus); }
.archive-filter-form button { min-height: 40px; align-self: end; }

/* Archiv-Saison-Tabelle */
.archive-season-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.archive-season-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1fr) 70px 110px 100px 110px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 10px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
    color: var(--p2-text-dim);
    text-decoration: none;
    transition: background var(--p2-dur) var(--p2-ease);
}
.archive-season-body .archive-season-row:first-child { border-top: 0; }
.archive-season-row-head {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
    border-top: 0;
}
.archive-season-row:not(.archive-season-row-head):hover { background: rgba(96, 165, 250, 0.06); color: var(--p2-text); }
.archive-season-row-selected {
    background: linear-gradient(90deg, var(--p2-accent-soft), transparent 60%);
    border-left: 2px solid var(--p2-accent);
}
.archive-season-row > span:first-child {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
    font-family: var(--p2-font-mono);
}
.archive-season-row:not(.archive-season-row-head) > span:nth-child(n+4) {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.archive-season-row-head > span:nth-child(n+4) { text-align: right; }

@media (max-width: 1100px) {
    .archive-season-row { grid-template-columns: 80px minmax(0, 1fr) 90px 100px; }
    .archive-season-row > :nth-child(3),
    .archive-season-row > :nth-child(6),
    .archive-season-row > :nth-child(7) { display: none; }
}

/* Archiv-Detail-Grid (Saisondetail + Side-Stack) */
.archive-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: var(--p2-s-3);
}
.archive-side-stack { display: grid; gap: var(--p2-s-3); }
@media (max-width: 1080px) {
    .archive-detail-grid { grid-template-columns: 1fr; }
}

/* Metric-Strip */
.archive-metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--p2-s-2);
    margin-top: var(--p2-s-2);
}
.archive-metric-card {
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    display: grid;
    gap: 2px;
    backdrop-filter: none;
    box-shadow: none;
}
.archive-metric-card .feature-tag { margin: 0; }
.archive-metric-card h3 {
    font-family: var(--p2-font-mono);
    font-size: 1.125rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.archive-metric-card > p {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin: 0;
}

/* Archiv-Ranking-Table (5 Spalten) */
.archive-ranking-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.archive-ranking-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1.5fr) 80px 110px 80px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 10px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
    text-decoration: none;
    color: var(--p2-text-dim);
}
.archive-ranking-body .archive-ranking-row:first-child { border-top: 0; }
.archive-ranking-row-head {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
    border-top: 0;
}
.archive-ranking-row:not(.archive-ranking-row-head) span:nth-child(1) {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-muted);
}
.archive-ranking-row:not(.archive-ranking-row-head) span:nth-child(n+3) {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--p2-text-dim);
}
.archive-ranking-row-head span:nth-child(n+3) { text-align: right; }
.archive-ranking-row-winner {
    background: linear-gradient(90deg, var(--p2-ok-bg), transparent 60%);
    border-left: 2px solid var(--p2-ok);
}
.archive-ranking-row-loser {
    background: linear-gradient(90deg, var(--p2-danger-bg), transparent 60%);
    border-left: 2px solid var(--p2-danger);
}
.archive-inline-link { color: var(--p2-accent); }
.archive-inline-link:hover { color: #93c5fd; }

@media (max-width: 900px) {
    .archive-ranking-row { grid-template-columns: 44px minmax(0, 1fr) 56px 90px; }
    .archive-ranking-row > :nth-child(5) { display: none; }
}

/* Gastgeberlauf + Game-Day-List (Side) */
.archive-host-track {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--p2-s-2);
}
.archive-game-day-list { display: grid; gap: 6px; margin-top: var(--p2-s-2); }
.archive-game-day-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 10px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    text-decoration: none;
    color: var(--p2-text);
    transition: border-color var(--p2-dur) var(--p2-ease);
}
.archive-game-day-item:hover { border-color: var(--p2-border-strong); }
.archive-game-day-item-active {
    border-color: var(--p2-border-accent);
    background: linear-gradient(90deg, var(--p2-accent-soft), transparent 60%), var(--p2-bg-sunken);
}
.archive-game-day-item strong {
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-semibold);
}
.archive-game-day-item p {
    margin: 0;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
}
.archive-game-day-meta {
    display: grid;
    gap: 2px;
    text-align: right;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
    font-family: var(--p2-font-mono);
}
.archive-game-day-meta span:last-child { color: var(--p2-text); font-weight: var(--p2-fw-semibold); }

/* Archiv-Person-Section + -Game-Day-Detail */
.archive-person-section,
.archive-game-day-detail-block { padding: var(--p2-s-5); }
.archive-person-summary-note {
    padding: var(--p2-s-2) var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    margin: var(--p2-s-2) 0;
    font-variant-numeric: tabular-nums;
}
.archive-person-summary-note p { margin: 0; }
.archive-person-history-table { margin-top: var(--p2-s-3); }
.archive-person-history-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 100px 80px 70px; }
.archive-person-history-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 100px 80px 70px; }
.archive-person-history-row span:nth-child(1),
.archive-person-history-row span:nth-child(2) {
    font-family: var(--p2-font-sans);
    text-align: left;
    color: var(--p2-text-dim);
}
.archive-game-day-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--p2-s-2); margin-top: var(--p2-s-2); }

@media (max-width: 720px) {
    .archive-person-history-row,
    .archive-person-history-head { grid-template-columns: minmax(0, 1fr) 80px 60px; }
    .archive-person-history-row > :nth-child(2),
    .archive-person-history-head > :nth-child(2),
    .archive-person-history-row > :nth-child(5),
    .archive-person-history-head > :nth-child(5) { display: none; }
}

/* Utility für Inline-Styles: margin-top 14px war 3x eingesetzt */
.stat-funfacts-list--spaced { margin-top: var(--p2-s-4); }

/* =============================================================================
   PHASE 7 – Verwaltung / Protokoll / Audit / Strafenkatalog
   Ziel: Timeline-Sicherheit + konsolidierte Verwaltungsflächen mit derselben
   DNA wie Kasse/Statistik. Alles über bestehende Klassennamen, ohne Markup-Umbau.
   ========================================================================== */

/* --- 1. protokoll.html: Timeline als Audit-Tabelle ------------------- */
.protocol-page-shell { display: grid; gap: var(--p2-s-4); }
.protocol-page-panel {
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-4);
}

/* Summary-Bar oben als KPI-artige Strip */
.protocol-summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--p2-s-2);
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
}
.protocol-summary-bar .protocol-summary-item {
    display: grid;
    gap: 2px;
    padding: 10px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
}
.protocol-summary-item span {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.protocol-summary-item strong {
    font-family: var(--p2-font-mono);
    font-size: 1.0625rem;
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.protocol-summary-item small {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-faint);
}
.protocol-summary-item-wide { grid-column: span 2; }
@media (max-width: 560px) {
    .protocol-summary-item-wide { grid-column: auto; }
}

.protocol-photo-bar {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--p2-s-3);
    align-items: center;
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}
@media (max-width: 640px) {
    .protocol-photo-bar { grid-template-columns: 1fr; }
}
.protocol-photo-bar .game-day-photo-wrap-compact {
    width: 140px;
    height: 96px;
    border-radius: var(--p2-r-sm);
    overflow: hidden;
    border: 1px solid var(--p2-border);
}
.protocol-photo-bar .game-day-photo-wrap-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.protocol-photo-bar .game-day-photo-upload-inline {
    display: flex;
    gap: var(--p2-s-2);
    flex-wrap: wrap;
    align-items: flex-end;
}
.protocol-photo-bar .input-card { flex: 1 1 240px; margin: 0; }

/* Filter-Chips + Suche */
.protocol-filter-bar { padding: 0; }
.protocol-filter-form { display: grid; gap: var(--p2-s-2); }
.protocol-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.protocol-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    text-decoration: none;
    font-weight: var(--p2-fw-medium);
    transition: border-color var(--p2-dur) var(--p2-ease), background var(--p2-dur) var(--p2-ease), color var(--p2-dur) var(--p2-ease);
}
.protocol-filter-chip:hover {
    border-color: var(--p2-border-strong);
    background: var(--p2-bg-hover);
    color: var(--p2-text);
}
.protocol-filter-chip span {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.protocol-filter-chip-active {
    background: var(--p2-accent-soft);
    border-color: var(--p2-border-accent);
    color: var(--p2-accent);
}
.protocol-filter-chip-active span { color: var(--p2-accent); }

.protocol-search-row {
    display: flex;
    gap: var(--p2-s-2);
    align-items: stretch;
    flex-wrap: wrap;
}
.protocol-search-input { flex: 1; min-width: 200px; }

/* Group-Strip */
.protocol-group-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p2-s-2);
}
.protocol-group-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}
.protocol-group-pill strong {
    font-family: var(--p2-font-mono);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
    font-weight: var(--p2-fw-semibold);
}

/* Timeline-/Tabellenauftritt */
.protocol-list-block { padding: var(--p2-s-5); }
.protocol-list-head { align-items: start; }

.protocol-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.protocol-table-row {
    display: grid;
    grid-template-columns: 100px 140px 130px minmax(0, 1fr) 90px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 10px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
}
.protocol-table-row:first-child { border-top: 0; }
.protocol-table-row-head {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
    border-top: 0;
}
.protocol-cell { display: grid; gap: 2px; min-width: 0; }
.protocol-cell-time strong {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-small);
    color: var(--p2-text);
    font-variant-numeric: tabular-nums;
}
.protocol-cell-time small {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.protocol-cell strong {
    color: var(--p2-text);
    font-weight: var(--p2-fw-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.protocol-cell .feature-tag { margin: 0; color: var(--p2-text-faint); font-size: 0.65rem; }
.protocol-cell-description span {
    color: var(--p2-text-dim);
    white-space: normal;
    line-height: 1.45;
}
.protocol-cell-amount {
    text-align: right;
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
}
.protocol-cell-amount strong {
    font-family: var(--p2-font-mono);
    color: var(--p2-text);
    text-align: right;
}

.protocol-entry-undone { opacity: 0.55; }
.protocol-entry-undone .protocol-cell-description span { text-decoration: line-through; }
.protocol-undone-label {
    font-size: var(--p2-fs-micro);
    color: var(--p2-danger);
    font-weight: var(--p2-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Type-Badges: Farbe nach group_key */
.protocol-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    color: var(--p2-text-dim);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.protocol-type-strafe,
.protocol-type-kasse { background: var(--p2-warn-bg); border-color: var(--p2-warn-border); color: var(--p2-warn); }
.protocol-type-rueckgaengig,
.protocol-type-rueckgaengig_gemacht { background: var(--p2-danger-bg); border-color: var(--p2-danger-border); color: var(--p2-danger); }
.protocol-type-spielrunde_beendet,
.protocol-type-spielrunde,
.protocol-type-system { background: var(--p2-accent-soft); border-color: var(--p2-border-accent); color: var(--p2-accent); }
.protocol-type-spiel_beendet,
.protocol-type-meilenstein,
.protocol-type-abschluss { background: var(--p2-ok-bg); border-color: var(--p2-ok-border); color: var(--p2-ok); }

/* Undo-Button */
.protocol-undo-form { margin: 0; }
.protocol-undo-btn {
    background: transparent;
    border: 1px solid var(--p2-border);
    color: var(--p2-danger);
    width: 36px;
    height: 36px;
    border-radius: var(--p2-r-sm);
    cursor: pointer;
    font-size: 1.125rem;
    line-height: 1;
    transition: border-color var(--p2-dur) var(--p2-ease), background var(--p2-dur) var(--p2-ease);
}
.protocol-undo-btn:hover {
    border-color: var(--p2-danger);
    background: var(--p2-danger-bg);
}

/* Notice-Card (Undo-Feedback) */
.protocol-notice { border-left: 2px solid var(--p2-info); }
.protocol-notice-ok { border-left-color: var(--p2-ok); background: var(--p2-ok-bg); color: var(--p2-ok); border-color: var(--p2-ok-border); }
.protocol-notice-err { border-left-color: var(--p2-danger); background: var(--p2-danger-bg); color: var(--p2-danger); border-color: var(--p2-danger-border); }

/* Responsive: Tabelle klappt */
@media (max-width: 900px) {
    .protocol-table-row { grid-template-columns: 90px 110px minmax(0, 1fr) 70px; }
    .protocol-table-row > :nth-child(3) { display: none; }
}
@media (max-width: 560px) {
    .protocol-table-row { grid-template-columns: 80px minmax(0, 1fr) 60px; }
    .protocol-table-row > :nth-child(2) { display: none; }
}

/* --- 2. einstellungen.html: Verwaltungs-Layout ---------------------- */
.settings-page-panel {
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-5);
}
.settings-page-header { align-items: start; }

/* Anchor-Nav als ruhige Pill-Reihe */
.settings-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--p2-s-2);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}
.settings-anchor-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--p2-r-sm);
    background: transparent;
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
    text-decoration: none;
    transition: background var(--p2-dur) var(--p2-ease), color var(--p2-dur) var(--p2-ease);
}
.settings-anchor-link:hover {
    background: var(--p2-bg-hover);
    color: var(--p2-text);
}

/* Status/Info-Grids */
.status-grid,
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--p2-s-3);
}
.info-card {
    padding: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: var(--p2-s-2);
    box-shadow: none;
    backdrop-filter: none;
}
.info-card h3 {
    font-size: 1rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.info-card > p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
}
.info-card.compact-card h3 {
    font-family: var(--p2-font-mono);
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
}

/* Settings-Section-Grids */
.settings-section-grid,
.settings-maintenance-grid,
.settings-person-grid,
.settings-pill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-3);
}
.settings-maintenance-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Single-Secondary-Link (Quick-Jumps) */
.single-secondary-link {
    display: grid;
    gap: 2px;
    padding: var(--p2-s-3) var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    color: var(--p2-text);
    text-decoration: none;
    transition: border-color var(--p2-dur) var(--p2-ease), background var(--p2-dur) var(--p2-ease);
}
.single-secondary-link:hover {
    border-color: var(--p2-border-accent);
    background: var(--p2-bg-hover);
}
.single-secondary-link strong { font-weight: var(--p2-fw-semibold); }
.single-secondary-link span {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}

/* Maintenance-Cards (Danger + Form) */
.maintenance-form-spaced { margin-top: var(--p2-s-3); }
.settings-meta {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.settings-meta--dim { opacity: 0.6; }

/* Inline-Hinweis */
.settings-mini-note {
    margin: var(--p2-s-2) 0 0;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}

/* Checkbox-Card */
.checkbox-card {
    display: flex;
    align-items: center;
    gap: var(--p2-s-2);
    padding: 8px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text-dim);
    font-size: var(--p2-fs-small);
    cursor: pointer;
    min-height: 40px;
}
.checkbox-card input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--p2-accent-hot);
    flex-shrink: 0;
}
.checkbox-card-inline { background: var(--p2-bg-sunken); }
.checkbox-card-danger {
    border-color: var(--p2-danger-border);
    background: var(--p2-danger-bg);
    color: var(--p2-danger);
}
.checkbox-card-danger input[type="checkbox"] { accent-color: var(--p2-danger); }

/* Person-Tile (Settings) */
.person-compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--p2-s-3);
}
.person-tile {
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: var(--p2-s-2);
}
.person-tile-copy { display: grid; gap: 2px; }
.person-tile-copy h3 { font-size: 1rem; font-weight: var(--p2-fw-semibold); color: var(--p2-text); }
.person-tile-copy .feature-tag { margin: 0; font-size: 0.65rem; }
.person-tile-meta {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin: 0;
}
.person-card-photo {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    object-fit: cover;
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
}
.person-card-photo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--p2-font-mono);
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text-dim);
    font-size: var(--p2-fs-small);
}

/* Player-Create / Profile-Form-Grid */
.player-create-grid,
.settings-player-create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-2);
}
.player-profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--p2-s-2);
}
.player-profile-form-grid .player-form-span-2 { grid-column: 1 / -1; }
@media (max-width: 540px) {
    .player-profile-form-grid { grid-template-columns: 1fr; }
    .player-profile-form-grid .player-form-span-2 { grid-column: auto; }
}
.player-inline-form { margin: 0; }

/* --- 3. stammtisch.html: Verwaltungs-Hub ---------------------------- */
.stammtisch-detail-shell {
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-4);
}
.stammtisch-overview-grid {
    display: grid;
    gap: var(--p2-s-4);
}
.stammtisch-hero-card {
    padding: var(--p2-s-5);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-panel);
    border: 1px solid var(--p2-border-accent);
    border-radius: var(--p2-r-md);
}
.stammtisch-hero-card h3 {
    font-size: var(--p2-fs-h1);
    font-weight: var(--p2-fw-bold);
    color: var(--p2-text);
}
.stammtisch-hero-card p { font-size: var(--p2-fs-small); color: var(--p2-text-dim); }
.status-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--p2-s-2) 0;
}
.round-status-open {
    background: var(--p2-warn-bg);
    border-color: var(--p2-warn-border);
    color: var(--p2-warn);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--p2-s-3);
}
.stammtisch-action-card h3 {
    font-size: 1rem;
    font-weight: var(--p2-fw-semibold);
}
.stammtisch-action-card p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
}
.disabled-chip {
    display: inline-flex;
    padding: 6px 12px;
    background: var(--p2-neutral-bg);
    border: 1px solid var(--p2-neutral-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
}

.stammtisch-person-grid,
.stammtisch-rules-grid,
.stammtisch-cash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--p2-s-3);
}
@media (max-width: 960px) {
    .stammtisch-person-grid,
    .stammtisch-rules-grid,
    .stammtisch-cash-grid { grid-template-columns: 1fr; }
}

/* Person-List-Grid in Stammtisch */
.person-list-grid {
    display: grid;
    gap: 6px;
    margin-top: var(--p2-s-2);
}
.person-card-link {
    display: grid;
    gap: 4px;
    padding: 10px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    color: var(--p2-text);
    text-decoration: none;
    transition: border-color var(--p2-dur) var(--p2-ease);
}
.person-card-link:hover { border-color: var(--p2-border-strong); }
.person-card-active {
    border-color: var(--p2-border-accent);
    background: linear-gradient(90deg, var(--p2-accent-soft), transparent 60%), var(--p2-bg-sunken);
}
.person-card-link h3 {
    font-size: 0.9375rem;
    font-weight: var(--p2-fw-semibold);
}
.person-card-link p {
    margin: 0;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    font-family: var(--p2-font-mono);
}
.person-card-link .feature-tag { margin: 0; font-size: 0.65rem; }
.person-card-link .secondary-action {
    justify-self: start;
    margin-top: 4px;
    min-height: 32px;
}

.round-overview-head {
    display: flex;
    justify-content: space-between;
    gap: var(--p2-s-3);
    align-items: flex-start;
    flex-wrap: wrap;
}

.selected-profile-card {
    margin-top: var(--p2-s-3);
    border-color: var(--p2-border-accent);
}
.name-entry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--p2-s-2);
    align-items: end;
}
@media (max-width: 720px) {
    .name-entry-grid { grid-template-columns: 1fr; }
}

/* Penalty-Editor-Grid (Katalog + Stammtisch) */
.penalty-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--p2-s-2);
    align-items: end;
}
.penalty-editor-grid > button { min-height: 44px; align-self: end; }

/* Penalty-Cards in Stammtisch/Katalog */
.penalty-list {
    display: grid;
    gap: 6px;
    margin-top: var(--p2-s-2);
}
.penalty-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--p2-s-3);
    padding: var(--p2-s-3) var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    flex-wrap: wrap;
}
.penalty-card > div:first-child { flex: 1 1 240px; min-width: 0; }
.penalty-card strong {
    color: var(--p2-text);
    font-size: var(--p2-fs-body);
    font-weight: var(--p2-fw-semibold);
}
.penalty-card p {
    margin: 0;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
    font-family: var(--p2-font-mono);
}
.penalty-card-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}
.penalty-card-actions form { margin: 0; }

/* Archiv-Mini-Liste (Stammtisch) */
.archive-mini-list {
    display: grid;
    gap: 6px;
    margin-top: var(--p2-s-2);
}
.archive-mini-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--p2-s-3);
    align-items: baseline;
    padding: 8px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
}
.archive-mini-item strong {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
}
.archive-mini-item span {
    color: var(--p2-text-muted);
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--p2-fs-micro);
}

/* --- 4. Audit-List (einstellungen + stammtisch_auditlog) ------------ */
.audit-list {
    display: grid;
    gap: var(--p2-s-2);
    margin-top: var(--p2-s-2);
}
.audit-item {
    padding: 10px var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-left: 2px solid var(--p2-accent);
    border-radius: var(--p2-r-sm);
    display: grid;
    gap: 4px;
}
.audit-item .round-overview-head strong {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
    font-size: var(--p2-fs-small);
}
.audit-item p {
    margin: 0;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}
.audit-item p:nth-of-type(2),
.audit-item p:nth-of-type(3) {
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-dim);
}

/* --- 5. strafenkatalog.html: Katalog-Verwaltung --------------------- */
.penalty-page-shell { display: grid; gap: var(--p2-s-4); }
.penalty-page-panel {
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-4);
}
.penalty-page-header { align-items: start; }

.penalty-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--p2-s-3);
}
.penalty-page-grid--spaced { margin-bottom: var(--p2-s-7); }

/* Katalog-Card (Overview) */
.catalog-card-default {
    border-color: var(--p2-border-accent);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-panel);
}
.catalog-card-default-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--p2-accent-hot);
    color: #0a1220;
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    letter-spacing: 0.02em;
}
.catalog-card-actions {
    display: flex;
    gap: var(--p2-s-2);
    flex-wrap: wrap;
    margin-top: var(--p2-s-2);
}
.catalog-card-actions form { margin: 0; }
.catalog-card-meta {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.catalog-card-default-note {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    align-self: center;
}

/* Active-Catalog-Section */
.penalty-editor-section {
    border-top: 1px solid var(--p2-border);
    padding-top: var(--p2-s-5);
    margin-top: var(--p2-s-3);
    display: grid;
    gap: var(--p2-s-4);
}
.penalty-editor-section header { display: grid; gap: 2px; }
.penalty-editor-section h3 { font-size: var(--p2-fs-h1); font-weight: var(--p2-fw-bold); }
.penalty-editor-section .active-catalog-version {
    font-weight: var(--p2-fw-regular);
    color: var(--p2-text-muted);
    font-size: 0.9rem;
    font-family: var(--p2-font-mono);
}

.penalty-card-order-form,
.penalty-row-form { margin: 0; }
.penalty-card-actions-block { align-items: flex-start; gap: 4px; }
.penalty-card-actions-block form { margin: 0; }
.penalty-card-actions-block button[disabled] { opacity: 0.35; cursor: not-allowed; }

.penalty-status-flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.penalty-status-flag-row strong {
    font-size: var(--p2-fs-body);
    font-weight: var(--p2-fw-semibold);
}

.penalty-status-pill-active {
    background: var(--p2-ok-bg);
    border-color: var(--p2-ok-border);
    color: var(--p2-ok);
}
.penalty-status-pill-inactive {
    background: var(--p2-neutral-bg);
    border-color: var(--p2-neutral-border);
    color: var(--p2-text-muted);
}
.penalty-status-pill-ends-round {
    background: var(--p2-warn-bg);
    border-color: var(--p2-warn-border);
    color: var(--p2-warn);
}

.penalty-meta-row {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 2px 0 0;
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
}

.penalty-list-hint {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0 0 var(--p2-s-2);
}

/* Utility: form-inline (war style="margin:0;") */
.form-inline { margin: 0; }

/* Catalog-Create-Grid (war style="grid-column:1/-1") */
.catalog-create-grid { grid-template-columns: 1fr; }
.catalog-create-full { grid-column: 1 / -1; }
.catalog-create-card { margin-bottom: 0; }
.catalog-card { position: relative; }
.catalog-card h3 { margin-bottom: 0; }

/* Catalog-Default-Badge (positioniert) */
.p2-badge.catalog-card-default-badge {
    position: absolute;
    top: var(--p2-s-3);
    right: var(--p2-s-3);
    font-size: 0.65rem;
}

/* =============================================================================
   PHASE 9 – Konsolidierung / Inline-Style-Reduktion
   Kleine Utility-Klassen, die die letzten kosmetischen Inline-Styles in
   archiv / archiv_saison / statistik ersetzen. Keine neuen Komponenten,
   nur Ersatz für bereits vorhandene style="..."-Attribute.
   ========================================================================== */

/* Meta-Pill-Reihe mit Abstand oben (war div mit display:flex;gap:8px;margin-top:6px) */
.archiv-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p2-s-2);
    margin-top: 6px;
}

/* Saison-Gesamt-Zeile unter Ranking (Kassengesamt / Sieger / Letzter) */
.archiv-season-totals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p2-s-6);
    margin-top: var(--p2-s-3);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}
.archiv-season-totals strong { color: var(--p2-text); font-weight: var(--p2-fw-semibold); }
.archiv-season-totals .archiv-season-totals-winner { color: var(--p2-ok); }
.archiv-season-totals .archiv-season-totals-loser  { color: var(--p2-text-dim); }

/* Spieltag-Kopf-Badge-Overrides (Nachgetragen / Kein-Statistik / sonstige) */
.archiv-pill-small { font-size: var(--p2-fs-micro); }
.archiv-pill-manual {
    background: var(--p2-warn-bg);
    border-color: var(--p2-warn-border);
    color: var(--p2-warn);
}
.archiv-pill-offen {
    background: var(--p2-warn-bg);
    border-color: var(--p2-warn-border);
    color: var(--p2-warn);
}
.archiv-pill-nostat {
    background: var(--p2-danger-bg);
    border-color: var(--p2-danger-border);
    color: var(--p2-danger);
}

/* Empty-/Meta-Notes innerhalb von Archiv-Spieltagblöcken */
.archiv-note-muted {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    font-style: italic;
}
.archiv-host-marker {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
}

.archiv-gameday-totalline {
    margin-top: 10px;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}
.archiv-gameday-totalline strong { color: var(--p2-text); font-weight: var(--p2-fw-semibold); }

.archiv-gameday-notes-line {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
}
.archiv-gameday-notes-body {
    margin: 4px 0 0;
    font-size: var(--p2-fs-small);
}

.archiv-edit-wrap { margin-top: var(--p2-s-3); }
.archiv-edit-link { font-size: var(--p2-fs-small); }

.archiv-footer-nav {
    padding: var(--p2-s-4) 0 var(--p2-s-2);
    display: flex;
    gap: var(--p2-s-3);
    flex-wrap: wrap;
}
.archiv-footer-nav a { text-decoration: none; }

/* Archivüberschrift: Meta-Sekundärtext hinter der Saisonzahl */
.archiv-heading-meta {
    font-weight: var(--p2-fw-regular);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}

/* Archiv-Saisonkarte: Empty-Notiz unter Mini-Ranking */
.archiv-season-empty-note {
    margin-top: var(--p2-s-2);
}

/* =============================================================================
   PHASE 10 – Abschluss-/Auth-Screens angleichen
   Ziel: Closing-Flows (spiel_abschluss, saison_abschluss) und die Auth-Utility-
   Screens (login, kasse_pin_setzen) nutzen dieselbe Panel-/Typo-/Pill-DNA wie
   der modernisierte Hauptflow, ohne dass Markup komplett umgebaut werden muss.
   Alles additiv: Overrides auf vorhandene .closing-*, .season-closing-*,
   .login-* Klassen.
   ========================================================================== */

/* --- Spiel-Abschluss ------------------------------------------------- */
.closing-page-shell { display: grid; gap: var(--p2-s-4); }
.closing-page-panel {
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-4);
}
.closing-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    gap: var(--p2-s-4);
    align-items: start;
}
@media (max-width: 900px) {
    .closing-hero { grid-template-columns: 1fr; }
}
.closing-hero-copy { display: grid; gap: var(--p2-s-2); min-width: 0; }
.closing-hero-copy h2 { font-size: var(--p2-fs-display); line-height: 1.1; }
.closing-hero-copy > p {
    font-size: var(--p2-fs-body);
    color: var(--p2-text-dim);
    max-width: 65ch;
}
.closing-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--p2-s-2);
}

.closing-hero-spotlight {
    padding: var(--p2-s-5);
    background: linear-gradient(180deg, var(--p2-ok-bg), transparent 140%), var(--p2-bg-raised);
    border: 1px solid var(--p2-ok-border);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: 4px;
}
.closing-hero-spotlight-winner { border-left: 3px solid var(--p2-ok); }
.closing-hero-spotlight h3 {
    font-size: 1.375rem;
    font-weight: var(--p2-fw-bold);
    color: var(--p2-text);
}
.closing-hero-spotlight p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
.closing-hero-spotlight .feature-tag,
.closing-hero-spotlight .closing-winner-tag {
    margin: 0;
    color: var(--p2-ok);
    font-weight: var(--p2-fw-semibold);
}

.report-block { padding: var(--p2-s-5); }
.report-summary {
    font-size: var(--p2-fs-body);
    line-height: var(--p2-lh-normal);
    color: var(--p2-text);
    padding: var(--p2-s-3) var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-left: 2px solid var(--p2-accent);
    border-radius: var(--p2-r-sm);
    margin: var(--p2-s-2) 0;
}
.report-bullets {
    list-style: none;
    padding: 0;
    margin: var(--p2-s-2) 0 0;
    display: grid;
    gap: 6px;
}
.report-bullets li {
    padding: 6px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    font-size: var(--p2-fs-small);
    color: var(--p2-text-dim);
}
.report-actions {
    display: flex;
    gap: var(--p2-s-2);
    flex-wrap: wrap;
    margin-top: var(--p2-s-3);
}
.report-hidden-text {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.closing-quick-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p2-s-2);
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}

.closing-top-grid,
.closing-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--p2-s-3);
}
@media (max-width: 1080px) {
    .closing-top-grid,
    .closing-bottom-grid { grid-template-columns: 1fr; }
}

.closing-results-block,
.closing-cash-block,
.closing-photo-block,
.closing-timeline-block,
.closing-actions-block { padding: var(--p2-s-5); }

.closing-ranking-list { display: grid; gap: 6px; margin-top: var(--p2-s-2); }
.closing-ranking-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--p2-s-3);
    padding: 10px var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    flex-wrap: wrap;
}
.closing-ranking-row-leader {
    background: linear-gradient(90deg, var(--p2-ok-bg), transparent 70%), var(--p2-bg-sunken);
    border-left: 2px solid var(--p2-ok);
}
.closing-ranking-row-trailing {
    background: linear-gradient(90deg, var(--p2-danger-bg), transparent 70%), var(--p2-bg-sunken);
    border-left: 2px solid var(--p2-danger);
}
.closing-ranking-person {
    display: flex;
    align-items: center;
    gap: var(--p2-s-3);
    min-width: 0;
}
.closing-ranking-rank {
    font-family: var(--p2-font-mono);
    font-size: 1.25rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}
.closing-ranking-row-leader .closing-ranking-rank { color: var(--p2-ok); }
.closing-ranking-row-trailing .closing-ranking-rank { color: var(--p2-danger); }
.closing-ranking-person strong {
    font-size: 1rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.closing-ranking-person p {
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
    margin: 0;
}
.closing-ranking-metrics {
    display: flex;
    gap: var(--p2-s-3);
    flex-wrap: wrap;
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-small);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-dim);
}

.closing-cash-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--p2-s-2);
    margin-top: var(--p2-s-2);
}

.closing-open-list { display: grid; gap: 6px; margin-top: var(--p2-s-3); }
.closing-open-item {
    display: flex;
    justify-content: space-between;
    gap: var(--p2-s-3);
    padding: 8px var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    align-items: flex-start;
}
.closing-open-item strong {
    font-size: var(--p2-fs-small);
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
}
.closing-open-item p {
    margin: 0;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
}
.closing-open-meta {
    display: grid;
    gap: 2px;
    text-align: right;
    font-size: var(--p2-fs-micro);
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-dim);
}

.closing-muted-note {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: var(--p2-s-2) 0 0;
}

.closing-highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--p2-s-2);
    margin-top: var(--p2-s-2);
}
.closing-highlight-card { padding: var(--p2-s-3); }

.closing-actions { display: flex; flex-wrap: wrap; gap: var(--p2-s-2); }
.gd-highlights-spaced { margin-top: var(--p2-s-4); }

/* --- Saison-Abschluss ------------------------------------------------ */
.season-closing-shell { display: grid; gap: var(--p2-s-4); }
.season-closing-panel {
    padding: var(--p2-s-5);
    display: grid;
    gap: var(--p2-s-4);
}
.season-closing-hero {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: var(--p2-s-4);
}
@media (max-width: 900px) {
    .season-closing-hero { grid-template-columns: 1fr; }
}
.season-closing-copy { display: grid; gap: var(--p2-s-2); min-width: 0; }
.season-closing-copy h2 { font-size: var(--p2-fs-display); line-height: 1.1; }
.season-closing-copy > p { color: var(--p2-text-dim); }

.season-closing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--p2-s-2);
}

.season-closing-result-card {
    padding: var(--p2-s-5);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 140%), var(--p2-bg-panel);
    border: 1px solid var(--p2-border-accent);
    border-radius: var(--p2-r-md);
    display: grid;
    gap: var(--p2-s-3);
}

.season-podium-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--p2-s-2);
}
.season-podium-item {
    display: grid;
    gap: 2px;
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
}
.season-podium-item span {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}
.season-podium-item strong {
    font-size: 1.125rem;
    font-weight: var(--p2-fw-bold);
    color: var(--p2-text);
}
.season-podium-item-winner { border-left: 2px solid var(--p2-ok); }
.season-podium-item-winner strong { color: var(--p2-ok); }
.season-podium-item-loser { border-left: 2px solid var(--p2-danger); }
.season-podium-item-loser strong { color: var(--p2-danger); }

.season-result-note {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
}

.season-closing-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--p2-s-2);
}
.season-metric-card { padding: var(--p2-s-4); }

.season-closing-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    gap: var(--p2-s-3);
}
@media (max-width: 1080px) {
    .season-closing-main-grid { grid-template-columns: 1fr; }
}
.season-closing-side-stack { display: grid; gap: var(--p2-s-3); }
.season-closing-actions { display: flex; flex-wrap: wrap; gap: var(--p2-s-2); }

/* Saison-Game-Day-Table */
.season-game-day-block { padding: var(--p2-s-5); }
.season-game-day-table {
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    overflow: hidden;
    background: var(--p2-bg-sunken);
    margin-top: var(--p2-s-2);
}
.season-game-day-row {
    display: grid;
    grid-template-columns: 50px minmax(0, 1.4fr) minmax(0, 1fr) 110px 70px 70px 100px;
    gap: var(--p2-s-3);
    align-items: center;
    padding: 10px var(--p2-s-4);
    font-size: var(--p2-fs-small);
    border-top: 1px solid var(--p2-border);
}
.season-game-day-body .season-game-day-row:first-child { border-top: 0; }
.season-game-day-row-head {
    background: rgba(148, 163, 184, 0.04);
    border-bottom: 1px solid var(--p2-border);
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
    border-top: 0;
}
.season-game-day-row span:nth-child(1),
.season-game-day-row span:nth-child(4),
.season-game-day-row span:nth-child(5),
.season-game-day-row span:nth-child(6),
.season-game-day-row span:nth-child(7) {
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--p2-text-muted);
}
.season-game-day-body .season-game-day-row span:nth-child(7) {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
    text-align: right;
}
.season-game-day-row-head span:nth-child(n+4) { text-align: right; }
@media (max-width: 900px) {
    .season-game-day-row { grid-template-columns: 40px minmax(0, 1fr) 70px 80px; }
    .season-game-day-row > :nth-child(3),
    .season-game-day-row > :nth-child(4),
    .season-game-day-row > :nth-child(6) { display: none; }
}

/* --- login.html / kasse_pin_setzen.html: Auth-Screens ---------------- */
.login-scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    gap: 0;
    min-height: 100vh;
    background:
        radial-gradient(900px 500px at 15% 20%, rgba(59, 130, 246, 0.12), transparent 60%),
        linear-gradient(180deg, var(--p2-bg-base) 0%, var(--p2-bg-deep) 100%);
}
@media (max-width: 900px) {
    .login-scene { grid-template-columns: 1fr; min-height: auto; }
}

.login-hero {
    display: grid;
    align-content: center;
    gap: var(--p2-s-4);
    padding: var(--p2-s-8) var(--p2-s-7);
    position: relative;
    overflow: hidden;
}
.login-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.4), transparent 70%);
    pointer-events: none;
}
.login-hero > * { position: relative; z-index: 1; }

.login-hero-eyebrow {
    font-size: var(--p2-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--p2-tracking-meta);
    color: var(--p2-accent);
    font-weight: var(--p2-fw-semibold);
}
.login-hero-headline {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: var(--p2-fw-bold);
    line-height: 1.05;
    color: var(--p2-text);
    margin: 0;
    letter-spacing: -0.02em;
}
.login-hero-sub {
    font-size: 1.0625rem;
    color: var(--p2-text-dim);
    max-width: 40ch;
    margin: 0;
    line-height: 1.4;
}
@media (max-width: 900px) {
    .login-hero { padding: var(--p2-s-6) var(--p2-s-5); }
    .login-hero-headline { font-size: 2rem; }
}

.login-panel-zone {
    display: grid;
    align-items: center;
    padding: var(--p2-s-6);
}
.login-panel {
    padding: var(--p2-s-6);
    background: var(--p2-bg-panel);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-lg);
    box-shadow: var(--p2-shadow-lg);
    display: grid;
    gap: var(--p2-s-4);
}
.login-panel-head { display: grid; gap: 4px; }
.login-panel-title {
    font-size: var(--p2-fs-h1);
    font-weight: var(--p2-fw-bold);
    color: var(--p2-text);
    letter-spacing: -0.01em;
}
.login-panel-subline {
    margin: 4px 0 0;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
}
.login-panel-hint {
    margin: var(--p2-s-3) 0 0;
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    line-height: 1.5;
}

.login-form { display: grid; gap: var(--p2-s-3); }
.login-field { display: grid; gap: 6px; }
.login-input {
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    color: var(--p2-text);
    min-height: 48px;
    padding: 12px 14px;
    font-size: var(--p2-fs-body);
    transition: border-color var(--p2-dur) var(--p2-ease), box-shadow var(--p2-dur) var(--p2-ease);
}
.login-input:focus {
    outline: 0;
    border-color: var(--p2-border-focus);
    box-shadow: var(--p2-shadow-focus);
}

.login-submit { min-height: 52px; font-size: 1rem; margin-top: var(--p2-s-2); }
.login-error { border-left: 2px solid var(--p2-danger); }
.login-followup-action {
    margin-top: var(--p2-s-4);
    text-align: center;
}

/* --- setup.html: Wizard-Shell ---------------------------------------- */
.setup-shell { padding: var(--p2-s-5); display: grid; gap: var(--p2-s-4); }
.wizard-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--p2-s-2);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    margin-bottom: var(--p2-s-3);
}
.wizard-step-button {
    display: inline-flex;
    align-items: center;
    gap: var(--p2-s-2);
    padding: 8px 12px;
    border-radius: var(--p2-r-sm);
    background: transparent;
    border: 0;
    color: var(--p2-text-muted);
    font-family: var(--p2-font-sans);
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-medium);
    cursor: pointer;
    transition: background var(--p2-dur) var(--p2-ease), color var(--p2-dur) var(--p2-ease);
}
.wizard-step-button:hover:not(:disabled) {
    background: var(--p2-bg-hover);
    color: var(--p2-text);
}
.wizard-step-button > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: var(--p2-bg-raised);
    border-radius: 999px;
    font-family: var(--p2-font-mono);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-bold);
    color: var(--p2-text-dim);
}
.wizard-step-button strong { font-weight: var(--p2-fw-medium); }
.wizard-step-active {
    background: var(--p2-accent-soft);
    color: var(--p2-accent);
}
.wizard-step-active > span {
    background: var(--p2-accent-hot);
    color: #0a1220;
}
.wizard-step-done > span {
    background: var(--p2-ok-bg);
    color: var(--p2-ok);
}
.wizard-step-disabled { opacity: 0.5; cursor: not-allowed; }

.wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: var(--p2-s-4);
}
@media (max-width: 980px) {
    .wizard-layout { grid-template-columns: 1fr; }
    .wizard-progress { order: -1; }
}
.wizard-main { display: grid; gap: var(--p2-s-4); min-width: 0; }
.wizard-side { display: grid; gap: var(--p2-s-3); align-content: start; }
.wizard-side-card { padding: var(--p2-s-4); }
.wizard-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--p2-s-3);
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: var(--p2-s-3);
    border-top: 1px solid var(--p2-border);
}
.wizard-list-block { display: grid; gap: var(--p2-s-3); }
.wizard-list-head { display: grid; gap: 4px; }
.wizard-list-head h3 {
    font-size: var(--p2-fs-h2);
    font-weight: var(--p2-fw-semibold);
}
.wizard-list-head > p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
}

.stack-form { display: grid; gap: var(--p2-s-3); }

.setup-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--p2-s-2);
}
@media (max-width: 640px) { .setup-media-grid { grid-template-columns: 1fr; } }
.setup-media-preview {
    max-width: 100%;
    border-radius: var(--p2-r-sm);
    border: 1px solid var(--p2-border);
    margin-top: var(--p2-s-2);
}

.setup-player-entry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: var(--p2-s-2);
    align-items: end;
}
@media (max-width: 720px) { .setup-player-entry-grid { grid-template-columns: 1fr; } }

.setup-player-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--p2-s-2);
}
.setup-player-photo-card {
    display: flex;
    gap: var(--p2-s-3);
    align-items: center;
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
}
.setup-player-photo-card > div:first-child { flex: 1; min-width: 0; }
.setup-player-photo-card strong {
    font-size: var(--p2-fs-small);
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.setup-player-photo-card p {
    margin: 0;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
}
.setup-player-photo-preview {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--p2-border);
}
.setup-player-photo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--p2-bg-raised);
    border: 1px solid var(--p2-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--p2-font-mono);
    color: var(--p2-text-muted);
    font-weight: var(--p2-fw-semibold);
}

.order-list { display: grid; gap: var(--p2-s-2); }
.order-row {
    display: flex;
    gap: var(--p2-s-3);
    padding: var(--p2-s-3);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-sm);
    align-items: center;
    flex-wrap: wrap;
}
.order-row-copy {
    display: flex;
    align-items: center;
    gap: var(--p2-s-3);
    flex: 1;
    min-width: 0;
}
.order-number {
    font-family: var(--p2-font-mono);
    font-size: 1.25rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.order-row strong { font-size: var(--p2-fs-body); color: var(--p2-text); }
.order-row-copy p {
    margin: 0;
    font-size: var(--p2-fs-micro);
    color: var(--p2-text-muted);
}
.order-row-actions { display: flex; gap: var(--p2-s-2); flex-wrap: wrap; }

.summary-grid,
.setup-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--p2-s-2);
}

.penalty-editor {
    display: grid;
    gap: var(--p2-s-3);
    padding: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
}

/* ─────────── Prognose / Forecast ─────────── */
.forecast-meta .forecast-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--p2-s-3);
    align-items: center;
}
.forecast-meta-item {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    font-variant-numeric: tabular-nums;
}
.forecast-meta-item strong {
    color: var(--p2-text);
    font-weight: var(--p2-fw-semibold);
    margin-right: 4px;
}
.forecast-meta-note {
    margin-left: auto;
    font-style: italic;
}
.forecast-disclaimer {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 4px 0 0;
}
.forecast-highlight-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--p2-s-3);
    margin-top: var(--p2-s-3);
}
.forecast-highlight-card {
    padding: var(--p2-s-4);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    background: var(--p2-bg-panel);
    display: grid;
    gap: 4px;
}
.forecast-highlight-card .feature-tag { margin: 0; }
.forecast-highlight-card strong {
    font-size: 1.125rem;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.forecast-highlight-card p {
    font-size: var(--p2-fs-small);
    color: var(--p2-text-muted);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.forecast-highlight-positive {
    border-color: var(--p2-border-accent);
    background: linear-gradient(180deg, var(--p2-accent-soft), transparent 160%), var(--p2-bg-panel);
}
.forecast-highlight-positive .feature-tag { color: var(--p2-accent); }
.forecast-highlight-negative {
    border-color: rgba(200, 85, 70, 0.38);
    background: linear-gradient(180deg, rgba(200, 85, 70, 0.08), transparent 160%), var(--p2-bg-panel);
}
.forecast-highlight-negative .feature-tag { color: #c85546; }

.forecast-table-wrap {
    margin-top: var(--p2-s-3);
    overflow-x: auto;
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    background: var(--p2-bg-panel);
}
.forecast-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--p2-fs-small);
    font-variant-numeric: tabular-nums;
}
.forecast-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text-muted);
    background: var(--p2-bg-sunken);
    border-bottom: 1px solid var(--p2-border);
    white-space: nowrap;
}
.forecast-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--p2-border);
    vertical-align: middle;
    color: var(--p2-text);
}
.forecast-table tbody tr:last-child td { border-bottom: 0; }
.forecast-table th.num,
.forecast-table td.num { text-align: right; }
.forecast-player-name {
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
}
.forecast-subtle {
    color: var(--p2-text-muted);
    font-weight: 400;
    margin-left: 4px;
    font-size: 0.82em;
}
.forecast-row-thin td { color: var(--p2-text-muted); }

.forecast-badge {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: var(--p2-fw-semibold);
    vertical-align: middle;
    white-space: nowrap;
}
.forecast-badge-host {
    background: var(--p2-accent-soft);
    color: var(--p2-accent);
    border: 1px solid var(--p2-border-accent);
}
.forecast-badge-thin {
    background: var(--p2-bg-sunken);
    color: var(--p2-text-muted);
    border: 1px solid var(--p2-border);
}

.forecast-trend { white-space: nowrap; }
.forecast-trend-arrow { margin: 0 4px; font-weight: var(--p2-fw-semibold); }
.forecast-trend-besser .forecast-trend-arrow { color: #3a8f5c; }
.forecast-trend-schlechter .forecast-trend-arrow { color: #c85546; }
.forecast-trend-konstant .forecast-trend-arrow { color: var(--p2-text-muted); }

.forecast-host-note {
    font-size: 0.82rem;
    color: var(--p2-text-muted);
}
.forecast-host-positive { color: #3a8f5c; }
.forecast-host-negative { color: #c85546; }

.forecast-bar-col { min-width: 96px; }
.forecast-bar {
    display: inline-block;
    width: 100%;
    height: 6px;
    background: var(--p2-bg-sunken);
    border-radius: 999px;
    overflow: hidden;
    vertical-align: middle;
}
.forecast-bar-fill {
    display: block;
    height: 100%;
    background: var(--p2-accent);
    border-radius: 999px;
}

.forecast-table-hint { color: var(--p2-text-muted); font-size: 0.82rem; }

.forecast-method {
    margin-top: var(--p2-s-4);
    background: var(--p2-bg-sunken);
    border: 1px solid var(--p2-border);
    border-radius: var(--p2-r-md);
    padding: var(--p2-s-3) var(--p2-s-4);
}
.forecast-method > summary {
    cursor: pointer;
    font-weight: var(--p2-fw-semibold);
    color: var(--p2-text);
    list-style: none;
}
.forecast-method > summary::-webkit-details-marker { display: none; }
.forecast-method > summary::before {
    content: "▸ ";
    color: var(--p2-text-muted);
    margin-right: 4px;
}
.forecast-method[open] > summary::before { content: "▾ "; }
.forecast-method-list {
    margin: var(--p2-s-3) 0 0;
    padding-left: 1.1em;
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
    display: grid;
    gap: 6px;
}

@media (max-width: 640px) {
    .forecast-meta-note { margin-left: 0; }
    .forecast-table { font-size: 0.82rem; }
    .forecast-table thead th,
    .forecast-table tbody td { padding: 8px 8px; }
}

/* ── Personenbereich: neue Tabelle (Phase 11) ──────────────────────────── */
.person-directory {
    display: grid;
    gap: 16px;
}

.person-directory-card {
    display: grid;
    gap: 14px;
}

.person-table-wrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(8, 15, 28, 0.46);
}

.person-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 520px;
}

.person-table thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.55);
}

.person-table tbody tr {
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    transition: background 0.12s ease;
}

.person-table tbody tr:last-child {
    border-bottom: 0;
}

.person-table tbody tr:hover,
.person-table tbody tr:focus-within {
    background: rgba(30, 41, 59, 0.55);
}

.person-table td {
    padding: 10px 14px;
    vertical-align: middle;
    color: var(--text-primary);
}

.person-table-col-photo {
    width: 64px;
}

.person-table-col-action {
    width: 90px;
    text-align: right;
}

.person-table-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.75);
    overflow: hidden;
    cursor: zoom-in;
}

.person-table-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.person-table-photo-fallback {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 13px;
    cursor: default;
}

.person-row-link {
    display: inline-block;
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}

.person-row-link.person-row-meta {
    color: var(--text-secondary);
    font-weight: 500;
    word-break: break-word;
}

.person-row-link:hover,
.person-row-link:focus-visible {
    color: #93c5fd;
    text-decoration: underline;
}

.person-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: #bfdbfe;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    background: rgba(30, 58, 138, 0.18);
}

.person-row-action:hover,
.person-row-action:focus-visible {
    border-color: rgba(96, 165, 250, 0.6);
    background: rgba(30, 58, 138, 0.34);
    color: #ffffff;
}

.player-profile-photo-trigger {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 24px;
    cursor: zoom-in;
}

/* ── Foto-Zoom-Modal ──────────────────────────────────────────────────── */
body.photo-zoom-open {
    overflow: hidden;
}

.photo-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(2, 6, 23, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.photo-zoom-modal[hidden] {
    display: none;
}

.photo-zoom-modal-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: grid;
    gap: 12px;
    justify-items: center;
}

.photo-zoom-modal-img {
    max-width: min(92vw, 780px);
    max-height: 80vh;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.6);
}

.photo-zoom-modal-caption {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.photo-zoom-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.photo-zoom-modal-close:hover,
.photo-zoom-modal-close:focus-visible {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(148, 163, 184, 0.6);
}

@media (max-width: 640px) {
    .person-table {
        font-size: 13px;
        min-width: 460px;
    }
    .person-table thead th,
    .person-table td {
        padding: 8px 10px;
    }
    .person-row-action {
        padding: 4px 10px;
        min-height: 32px;
        font-size: 12px;
    }
}

/* ── Rangliste mit Profilbild-Spalte (Phase 11) ──────────────────────── */
.stat-ranking-table-with-photo .stat-ranking-row {
    grid-template-columns: 2rem 44px 1fr 4rem 4rem 4rem 5rem 4rem;
}

.stat-ranking-col-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

.stat-ranking-photo {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.6);
}

.stat-ranking-photo-fallback {
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: rgba(203, 213, 225, 0.8);
    font-size: 12px;
    letter-spacing: 0.02em;
}

/* ── Gäste-Rangliste 9-Spalten-Layout (Phase 11) ─────────────────────── */
.stat-guest-ranking-intro {
    margin: 0 0 10px 0;
    color: rgba(148, 163, 184, 0.9);
    line-height: 1.5;
}

.stat-guest-table-wide .stat-guest-row {
    grid-template-columns: 2rem 44px 1fr 4rem 3.5rem 3.5rem 5rem 4rem 5rem;
}

.stat-guest-col-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

.stat-guest-row-top {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.18);
}

.stat-guest-row-unqualified {
    opacity: 0.68;
}

@media (max-width: 900px) {
    .stat-ranking-table-with-photo {
        overflow-x: auto;
    }
    .stat-ranking-table-with-photo .stat-ranking-row {
        min-width: 640px;
    }
    .stat-guest-table-wide {
        overflow-x: auto;
    }
    .stat-guest-table-wide .stat-guest-row {
        min-width: 720px;
    }
}

@media (max-width: 640px) {
    .stat-ranking-photo {
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }
    .stat-ranking-table-with-photo .stat-ranking-row {
        grid-template-columns: 1.6rem 40px 1fr 3rem 3rem 3rem 4.4rem 3rem;
    }
    .stat-guest-table-wide .stat-guest-row {
        grid-template-columns: 1.6rem 40px 1fr 3rem 2.6rem 2.6rem 4rem 3rem 4rem;
    }
}

/* ── Aktuelle Saison (Phase 11): Foto-Spalte ─────────────────────────── */
.stat-ranking-table-with-photo.stat-ranking-table-season .stat-ranking-row {
    grid-template-columns: 3rem 44px 1fr 4rem 5rem 4rem;
}

@media (max-width: 900px) {
    .stat-ranking-table-with-photo.stat-ranking-table-season {
        overflow-x: auto;
    }
    .stat-ranking-table-with-photo.stat-ranking-table-season .stat-ranking-row {
        min-width: 520px;
    }
}

@media (max-width: 640px) {
    .stat-ranking-table-with-photo.stat-ranking-table-season .stat-ranking-row {
        grid-template-columns: 2.4rem 40px 1fr 3rem 4.4rem 3rem;
    }
}

/* Statistik-Tabellen: Foto, Name und Badges enger und ruhiger fuehren. */
.stat-table-note-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 var(--p2-s-2);
    color: var(--p2-text-muted);
    font-size: var(--p2-fs-small);
}

.stat-qualification-pill {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 1px 7px;
    border-radius: var(--p2-r-xs);
    border: 1px solid var(--p2-border);
    background: rgba(15, 23, 42, 0.42);
    color: var(--p2-text);
    font-size: var(--p2-fs-micro);
    font-weight: var(--p2-fw-semibold);
    line-height: 1.3;
    white-space: nowrap;
}

.stat-qualification-pill-muted {
    color: var(--p2-text-muted);
    background: var(--p2-neutral-bg);
    border-color: var(--p2-neutral-border);
}

.stat-ranking-row-unqualified {
    opacity: 0.72;
}

.stat-ranking-table-with-photo .stat-ranking-row,
.stat-guest-table-wide .stat-guest-row {
    column-gap: 8px;
}

.stat-ranking-table-with-photo .stat-ranking-row {
    grid-template-columns: 2rem 38px minmax(0, 1fr) 4rem 4rem 4rem 5rem 4rem;
}

.stat-ranking-table-with-photo.stat-ranking-table-season .stat-ranking-row {
    grid-template-columns: 3rem 38px minmax(0, 1fr) 4rem 5rem 4rem;
}

.stat-guest-table-wide .stat-guest-row {
    grid-template-columns: 2rem 38px minmax(0, 1fr) 4rem 3.5rem 3.5rem 5rem 4rem 5rem;
}

.stat-ranking-name-cell,
.stat-ranking-table-with-photo .stat-ranking-row > span:nth-child(3),
.stat-ranking-table-with-photo .stat-ranking-row-head > span:nth-child(3),
.stat-guest-table-wide .stat-guest-row > span:nth-child(3),
.stat-guest-table-wide .stat-guest-row-head > span:nth-child(3) {
    min-width: 0;
    text-align: left;
    justify-self: stretch;
}

.stat-ranking-table-with-photo .stat-ranking-row .stat-ranking-name-cell,
.stat-guest-table-wide .stat-guest-row .stat-ranking-name-cell {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 5px;
    font-family: var(--p2-font-sans);
    font-variant-numeric: normal;
    color: var(--p2-text);
}

.stat-ranking-table-with-photo .stat-ranking-row .stat-ranking-name-cell strong,
.stat-guest-table-wide .stat-guest-row .stat-ranking-name-cell strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-ranking-name-cell .season-player-type-badge {
    margin-left: 0;
    padding: 0 4px;
    line-height: 1.35;
}

.stat-ranking-table-with-photo .stat-ranking-row:not(.stat-ranking-row-head) > span:nth-child(n+4),
.stat-guest-table-wide .stat-guest-row:not(.stat-guest-row-head) > span:nth-child(n+4) {
    text-align: right;
    font-family: var(--p2-font-mono);
    font-variant-numeric: tabular-nums;
}

.stat-ranking-table-with-photo .stat-ranking-row-head > span:nth-child(n+4),
.stat-guest-table-wide .stat-guest-row-head > span:nth-child(n+4) {
    text-align: right;
}

@media (max-width: 900px) {
    .stat-ranking-table-with-photo .stat-ranking-row {
        min-width: 620px;
    }
    .stat-ranking-table-with-photo.stat-ranking-table-season .stat-ranking-row {
        min-width: 500px;
    }
    .stat-guest-table-wide .stat-guest-row {
        min-width: 700px;
    }
}

@media (max-width: 640px) {
    .stat-ranking-table-with-photo .stat-ranking-row {
        grid-template-columns: 1.6rem 34px minmax(0, 1fr) 3rem 3rem 3rem 4.4rem 3rem;
    }
    .stat-ranking-table-with-photo.stat-ranking-table-season .stat-ranking-row {
        grid-template-columns: 2.4rem 34px minmax(0, 1fr) 3rem 4.4rem 3rem;
    }
    .stat-guest-table-wide .stat-guest-row {
        grid-template-columns: 1.6rem 34px minmax(0, 1fr) 3rem 2.6rem 2.6rem 4rem 3rem 4rem;
    }
}

/* ── Archiv-Ranking (Phase 11): Foto-Spalte ──────────────────────────── */
.archive-ranking-table-with-photo .archive-ranking-row {
    display: grid;
    grid-template-columns: 3rem 44px 1fr 4rem 5rem 4rem;
    align-items: center;
    gap: 8px;
}

.archive-ranking-col-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

@media (max-width: 900px) {
    .archive-ranking-table-with-photo {
        overflow-x: auto;
    }
    .archive-ranking-table-with-photo .archive-ranking-row {
        min-width: 520px;
    }
}

@media (max-width: 640px) {
    .archive-ranking-table-with-photo .archive-ranking-row {
        grid-template-columns: 2.4rem 40px 1fr 3rem 4.4rem 3rem;
    }
}

/* ── Archiv-Spieltag-Detail (archiv_saison.html): Foto-Spalte ────────── */
.archiv-ranking-table-with-photo .archiv-ranking-header,
.archiv-ranking-table-with-photo .archiv-ranking-row {
    display: grid;
    grid-template-columns: 3rem 44px 1fr 4.4rem 5rem 4rem;
    align-items: center;
    gap: 8px;
}

.archiv-gameday-results-with-photo .archiv-result-header,
.archiv-gameday-results-with-photo .archiv-result-row {
    display: grid;
    grid-template-columns: 3rem 40px 1fr 4rem 5rem;
    align-items: center;
    gap: 8px;
}

.archiv-col-photo,
.archiv-rcol-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

@media (max-width: 900px) {
    .archiv-ranking-table-with-photo {
        overflow-x: auto;
    }
    .archiv-ranking-table-with-photo .archiv-ranking-row,
    .archiv-ranking-table-with-photo .archiv-ranking-header {
        min-width: 560px;
    }
    .archiv-gameday-results-with-photo .archiv-result-row,
    .archiv-gameday-results-with-photo .archiv-result-header {
        min-width: 480px;
    }
}

@media (max-width: 640px) {
    .archiv-ranking-table-with-photo .archiv-ranking-header,
    .archiv-ranking-table-with-photo .archiv-ranking-row {
        grid-template-columns: 2.4rem 36px 1fr 3rem 4rem 3rem;
    }
    .archiv-gameday-results-with-photo .archiv-result-header,
    .archiv-gameday-results-with-photo .archiv-result-row {
        grid-template-columns: 2.4rem 36px 1fr 3rem 4rem;
    }
}

/* ── Spielerprofil-Karten: Avatar links im Header (Phase 11) ─────────── */
.stat-profile-header-with-photo {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
}

.stat-profile-photo {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.6);
    align-items: center;
    justify-content: center;
}

.stat-profile-photo-fallback {
    font-weight: 700;
    font-size: 14px;
    color: rgba(203, 213, 225, 0.85);
    letter-spacing: 0.04em;
}

.stat-profile-header-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

/* ── Badge-Legende (Phase 11) ────────────────────────────────────────── */
.stat-badge-legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.stat-badge-legend-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(8, 15, 28, 0.46);
    align-items: start;
}

.stat-badge-legend-item .stat-achievement {
    white-space: nowrap;
    align-self: start;
}

.stat-badge-legend-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.stat-badge-legend-category {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
    margin: 0;
    font-weight: 600;
}

.stat-badge-legend-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(203, 213, 225, 0.9);
}

@media (max-width: 520px) {
    .stat-badge-legend-grid {
        grid-template-columns: 1fr;
    }
    .stat-badge-legend-item {
        grid-template-columns: 1fr;
    }
}

/* ── Abwesenheits-Block (Phase 11) ──────────────────────────────────── */
/* Ziel: fachlich klar getrennt von Strafe-Tabellen.
   - anderer Rahmen / warmer Ton, damit der Leser sofort sieht,
     dass das KEIN Strafblock ist.
   - kompakt, aber deutlich. */
.absence-block {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, 0.22);
    background: rgba(120, 53, 15, 0.10);
    display: grid;
    gap: 10px;
}

.absence-block-season {
    margin-top: 12px;
}

.absence-block-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.absence-block-head h3,
.absence-block-head h4 {
    margin: 2px 0 0 0;
    font-size: 16px;
    font-weight: 700;
    color: #fde68a;
    letter-spacing: 0.01em;
}

.absence-block-head .section-label {
    color: rgba(253, 224, 71, 0.9);
}

.absence-block-note {
    margin: 0;
    font-size: 12px;
    color: rgba(253, 230, 138, 0.85);
    max-width: 420px;
    line-height: 1.45;
}

.absence-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.absence-row {
    display: grid;
    grid-template-columns: 40px 1fr auto 6rem;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(251, 191, 36, 0.10);
}

.absence-photo-col {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.absence-name {
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
}

.absence-label {
    font-size: 12px;
    letter-spacing: 0.02em;
    color: rgba(253, 224, 71, 0.85);
}

.absence-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #fde68a;
}

@media (max-width: 560px) {
    .absence-row {
        grid-template-columns: 36px 1fr auto;
    }
    .absence-label {
        grid-column: 2 / 4;
        order: 3;
        margin-top: 2px;
    }
    .absence-amount {
        grid-row: 1;
        grid-column: 3;
    }
}

/* ── Profil: Teilnahme + Finanzen (Phase 11) ─────────────────────────── */
.profile-teilnahme-finanzen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.profile-tf-group {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(8, 15, 28, 0.46);
    display: grid;
    gap: 8px;
}

.profile-tf-head {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.7);
    font-weight: 600;
}

.profile-tf-rows {
    display: grid;
    gap: 6px;
}

.profile-tf-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
    font-size: 13px;
    color: rgba(203, 213, 225, 0.9);
}

.profile-tf-rows > div strong {
    color: var(--text-primary, #e2e8f0);
    font-variant-numeric: tabular-nums;
}

.profile-tf-total {
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    margin-top: 2px;
}

.profile-tf-total strong {
    color: #fde68a;
}

.profile-teilnahme-finanzen-card {
    display: grid;
    gap: 10px;
}

/* Dezente Status-Pille im Header-Bereich. */
.utility-pill-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #e0e7ff;
    background: rgba(67, 56, 202, 0.25);
    border: 1px solid rgba(129, 140, 248, 0.28);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.utility-pill-status:hover,
.utility-pill-status:focus-visible {
    background: rgba(79, 70, 229, 0.38);
    border-color: rgba(129, 140, 248, 0.55);
    color: #ffffff;
}

@media (max-width: 640px) {
    .utility-pill-status {
        max-width: 150px;
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ── Host-Gast-Listen: Foto-Spalte (Phase 11 Feinschliff) ────────────── */
.host-guest-list-with-photo .host-guest-row {
    display: grid;
    grid-template-columns: 2rem 36px 1fr auto;
    gap: 10px;
    align-items: center;
}

.host-guest-photo-col {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.host-guest-list-with-photo .host-guest-photo-col .stat-ranking-photo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

/* ── Trend-Tabelle: Foto-Spalte (Phase 11 Feinschliff) ───────────────── */
.stat-trend-table-with-photo .stat-trend-row {
    grid-template-columns: 40px 1fr 1.5fr 4rem 2.5rem 5rem;
}

.stat-trend-col-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.stat-trend-table-with-photo .stat-trend-col-photo .stat-ranking-photo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
}

@media (max-width: 900px) {
    .stat-trend-table-with-photo .stat-trend-row {
        grid-template-columns: 36px 1fr 1.2fr 3rem 2rem 4rem;
    }
}

@media (max-width: 640px) {
    .stat-trend-table-with-photo .stat-trend-row {
        grid-template-columns: 32px 1fr 3rem 2rem 3.5rem;
    }
    .stat-trend-table-with-photo .stat-trend-row > *:nth-child(3) {
        display: none;
    }
    .host-guest-list-with-photo .host-guest-row {
        grid-template-columns: 1.6rem 30px 1fr auto;
    }
}

/* ── /spiel/aktiv: Pending-Bestätigungsdialoge mit Avatar ─────────────── */
.pending-player-list {
    list-style: none;
    margin: 6px 0 12px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pending-player-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.pending-player-row .stat-ranking-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.pending-player-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #e2e8f0);
}

/* ── /spiel/aktiv: dezente Gastgeber-Kachel in der Sidebar ───────────── */
.game-host-card {
    margin-top: 14px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background: rgba(30, 58, 138, 0.14);
}

.game-host-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.game-host-avatar-fallback {
    font-weight: 700;
    font-size: 14px;
    color: rgba(203, 213, 225, 0.9);
    letter-spacing: 0.04em;
}

.game-host-card-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.game-host-card-label {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
    font-weight: 600;
}

.game-host-card-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Protokoll: kleiner Avatar in der Personen-Spalte ─────────────────── */
.protocol-cell-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.protocol-person-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.protocol-person-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.protocol-person-avatar-fallback {
    font-weight: 700;
    font-size: 11px;
    color: rgba(203, 213, 225, 0.85);
    letter-spacing: 0.02em;
}

/* ── Spielabschluss: Leader-Avatar + Rang-Zeilen-Avatar ───────────────── */
.closing-hero-spotlight-head {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: center;
}

.closing-hero-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.closing-hero-avatar-fallback {
    font-weight: 700;
    font-size: 18px;
    color: rgba(203, 213, 225, 0.9);
    letter-spacing: 0.04em;
}

.closing-ranking-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.closing-ranking-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.closing-ranking-avatar-fallback {
    font-weight: 700;
    font-size: 13px;
    color: rgba(203, 213, 225, 0.85);
    letter-spacing: 0.04em;
}

/* ── Saisonabschluss: Ranking-Photo + Host-Chips mit Avatar ──────────── */
.season-ranking-table-with-photo .season-ranking-row {
    grid-template-columns: 3rem 40px 1fr 4rem 5rem 4rem;
}

.season-ranking-col-photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.season-ranking-table-with-photo .stat-ranking-photo {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.season-host-track-with-photo .season-host-chip-complete {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 4px;
}

.season-host-chip-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.season-host-chip-avatar-fallback {
    font-weight: 700;
    font-size: 10px;
    color: rgba(203, 213, 225, 0.85);
    letter-spacing: 0.02em;
}

.season-game-day-host-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.season-game-day-host-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.season-game-day-host-avatar-fallback {
    font-weight: 700;
    font-size: 10px;
    color: rgba(203, 213, 225, 0.85);
    letter-spacing: 0.02em;
}

@media (max-width: 900px) {
    .season-ranking-table-with-photo {
        overflow-x: auto;
    }
    .season-ranking-table-with-photo .season-ranking-row {
        min-width: 520px;
    }
}

@media (max-width: 640px) {
    .season-ranking-table-with-photo .season-ranking-row {
        grid-template-columns: 2.4rem 36px 1fr 3rem 4rem 3rem;
    }
}

/* ── Kasse: Avatar in der Personenübersicht ──────────────────────────── */
.cash-person-compact-list-with-photo .cash-person-compact-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    align-items: center;
}

.cash-person-compact-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cash-person-compact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cash-person-compact-avatar-fallback {
    font-weight: 700;
    font-size: 13px;
    color: rgba(203, 213, 225, 0.85);
    letter-spacing: 0.04em;
}

/* ── Badge-Popover (Phase 11 Feinschliff) ────────────────────────────── */
.badge-info-trigger {
    cursor: pointer;
    border: 0;
    font: inherit;
    text-align: left;
    padding: 0;
    background: transparent;
}

.badge-info-trigger:focus-visible {
    outline: 2px solid rgba(96, 165, 250, 0.7);
    outline-offset: 2px;
}

.badge-info-popover {
    position: absolute;
    z-index: 9998;
    max-width: 320px;
    min-width: 220px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(12, 22, 38, 0.96);
    box-shadow: 0 20px 60px rgba(2, 6, 23, 0.55);
    color: var(--text-primary, #e2e8f0);
    display: grid;
    gap: 4px;
}

.badge-info-popover[hidden] {
    display: none;
}

.badge-info-popover-category {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.75);
    font-weight: 600;
}

.badge-info-popover-category[hidden] {
    display: none;
}

.badge-info-popover-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #fde68a;
}

.badge-info-popover-desc {
    margin: 2px 0 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(203, 213, 225, 0.95);
}

/* ── Statistik-Hub: Avatare (Phase 11 Feinschliff) ───────────────────── */
.insights-highlight-card-with-photo {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
}

.insights-highlight-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.insights-highlight-avatar-fallback {
    font-weight: 700;
    font-size: 14px;
    color: rgba(203, 213, 225, 0.9);
    letter-spacing: 0.04em;
}

.insights-highlight-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.insights-standing-card-with-photo {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: center;
}

.insights-standing-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.insights-standing-avatar-fallback {
    font-weight: 700;
    font-size: 13px;
    color: rgba(203, 213, 225, 0.9);
    letter-spacing: 0.04em;
}

.insights-standing-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.insights-mini-ranking-with-photo .insights-mini-ranking-row {
    display: grid;
    grid-template-columns: 1.6rem 28px 1fr 3rem 3rem;
    gap: 8px;
    align-items: center;
}

.insights-mini-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.insights-mini-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.insights-mini-avatar-fallback {
    font-weight: 700;
    font-size: 10px;
    color: rgba(203, 213, 225, 0.85);
    letter-spacing: 0.02em;
}

.insights-trend-card-with-photo .insights-trend-header {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
}

.insights-trend-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.insights-trend-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.insights-trend-avatar-fallback {
    font-weight: 700;
    font-size: 12px;
    color: rgba(203, 213, 225, 0.9);
    letter-spacing: 0.04em;
}

.insights-tendenz-card-with-photo {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: center;
}

.insights-tendenz-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.insights-tendenz-avatar-fallback {
    font-weight: 700;
    font-size: 13px;
    color: rgba(203, 213, 225, 0.9);
    letter-spacing: 0.04em;
}

.insights-tendenz-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

@media (max-width: 640px) {
    .insights-mini-ranking-with-photo .insights-mini-ranking-row {
        grid-template-columns: 1.4rem 24px 1fr 2.6rem 2.6rem;
    }
    .badge-info-popover {
        max-width: 260px;
    }
}

/* ── Freigaben & Status (Einstellungen) ──
   Konsolidierte Lese-Anzeige der beiden Schutz-Ebenen (Login, Kassenwart).
   Reine Sichtbarkeitshilfe – keine Schutzlogik. */
.auth-status-card {
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.40);
}

.auth-status-card h3 {
    color: #e2e8f0;
}

.auth-status-card .feature-tag {
    color: rgba(203, 213, 225, 0.85);
}

.auth-status-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.auth-status-row {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    background: rgba(15, 23, 42, 0.45);
    display: grid;
    gap: 4px;
}

.auth-status-row-on {
    border-color: rgba(74, 222, 128, 0.35);
    background: rgba(22, 101, 52, 0.18);
}

.auth-status-row-off {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.45);
}

.auth-status-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-status-head strong {
    color: #f1f5f9;
    font-size: 15px;
    letter-spacing: 0.01em;
}

.auth-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(51, 65, 85, 0.55);
    color: #e2e8f0;
    white-space: nowrap;
}

.auth-status-row-on .auth-status-pill {
    border-color: rgba(74, 222, 128, 0.55);
    background: rgba(22, 101, 52, 0.35);
    color: #bbf7d0;
}

.auth-status-row-off .auth-status-pill {
    border-color: rgba(148, 163, 184, 0.30);
    background: rgba(51, 65, 85, 0.45);
    color: rgba(226, 232, 240, 0.75);
}

.auth-status-row .settings-meta {
    margin: 2px 0 0;
    color: rgba(226, 232, 240, 0.85);
}

.auth-status-row .settings-mini-note {
    margin: 2px 0 0;
    color: rgba(203, 213, 225, 0.75);
}

@media (max-width: 640px) {
    .auth-status-row {
        padding: 10px 12px;
    }
    .auth-status-head strong {
        font-size: 14px;
    }
}

/* =============================================================================
   /spiel/aktiv — Layout-Stabilisierung (Phase 11, korrigierte Fassung)
   ---------------------------------------------------------------------------
   Nach einem ersten, zu breit gefassten Stabilisierungs-Versuch hatte die
   Spielerleiste sichtbare Regressionen (Name oben, Avatar unten, Karte
   wirkte kollabiert). Ursache war NICHT mein zusätzlicher Button-Override
   selbst, sondern eine frühere Regel in phase2.css:

       .game-player-rail-button > * { position: relative; z-index: 1; }   (Zeile 1122)

   Dieser Universal-Selector überschreibt mit gleicher Specificity das
   `position: absolute` von `.game-player-fill` (Zeile 1115), weil beide
   Regeln eine Klasse enthalten und `> *` später im Quell-Platz liegt.
   Ergebnis: `.game-player-fill` wird als erstes Child zum echten
   Grid-Item in Spalte 1 Zeile 1, der Avatar (`grid-column: 1`, Auto-Row)
   rutscht in Zeile 2, Name/Meta/Status bleiben in Zeile 1 ohne Avatar
   daneben. "Fragmente von Text/Avatar" entsteht.

   Dieser korrigierte Block hält sich bewusst klein:
     (1) Single-Column-Override für die Leiste (war und bleibt gewollt).
     (2) Gezielte Re-Assertion von `.game-player-fill` als absolut positioniert
         mit höherer Specificity (zwei Klassen = 0,0,2,0 schlägt Klasse+Universal).
     (3) Touch-Mindesthöhe für Utility-Buttons rechts.

   Alle spekulativen Zusatzregeln aus der ersten Version (align-content,
   justify-items, isolation, eigener Status-Override, Penalty-Button-
   Breakpoints, Button-Padding-Breakpoints) wurden entfernt — sie waren
   weder Ursache noch Lösung, aber Quelle von Seiteneffekten.
   ========================================================================= */

/* (1) Spielerleiste: Single-Column an allen Breiten — Override der
       style.css-Media-Queries bei ≤820px (repeat(auto-fit, minmax(96px, 1fr)))
       und ≤640px (repeat(3, minmax(0, 1fr))). */
.game-player-rail-list {
    grid-template-columns: 1fr;
    /* Kritischer Fix für breite Viewports: style.css:4994 setzt (ohne Media-
       Wrapper, also an ALLEN Breiten) `flex: 1 1 0` auf diese Liste. phase2
       überschreibt zwar die Rail-Höhe auf `height: auto`, lässt aber die
       Flex-Struktur (display: flex; flex-direction: column von style.css:4979)
       bestehen. Ergebnis: `flex: 1 1 0` heißt basis=0, grow=1 — ohne freien
       Raum in einem height:auto-Parent kollabiert die Liste auf 0 Höhe und
       die Karten werden optisch zu "Fragmenten übereinander".
       Fix: Content-basiertes Flex-Sizing (basis auto, grow 0). */
    flex: 0 1 auto;
}
@media (max-width: 820px) {
    .game-player-rail-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .game-player-rail-list { grid-template-columns: 1fr; }
}

/* (2) Der eigentliche Bug-Fix: `.game-player-fill` muss aus dem Grid-Fluss
       heraus. Specificity (0,0,2,0) schlägt den früheren
       `.game-player-rail-button > *`-Selector (0,0,1,0), ohne dass wir die
       existierenden Regeln (Zeile 1115 + 1122) anfassen müssen. */
.game-player-rail-button .game-player-fill {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* (3) Touch-Mindesthöhe für Utility-Buttons rechts (Protokoll-Link,
       Spieltag-beenden-Button). Nur Info-Rail, damit keine anderen
       Buttons der Seite betroffen sind. */
.game-info-rail .compact-action,
.game-info-rail .wide-action,
.game-info-rail button,
.game-info-rail a.secondary-action,
.game-info-rail a.primary-action {
    min-height: 44px;
}

/* ── Hauptmenue-Kachel: Saison-Backdrop + Spieltag-Headline ─────────────
   "Saison N" liegt gross, dezent und leicht verblasst hinter dem Haupt-
   Text der Tile; "Spieltag X" ist als kleinere, prominente Headline ganz
   oben rechts ueberlagert. Keine Klickflaechen: aria-hidden, pointer-events
   off. Passt zum dunklen Panel-Stil (radial + linear gradients wie der
   Rest der Kachel). */
.single-main-tile.single-main-tile-with-context {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.single-main-tile-context {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 18px 24px 0 0;
}
.single-main-tile-context-backdrop {
    position: absolute;
    right: -0.08em;
    bottom: -0.18em;
    font-size: clamp(6rem, 14vw, 12rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.85;
    color: rgba(96, 165, 250, 0.08);
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}
.single-main-tile-context-headline {
    position: relative;
    z-index: 1;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.22);
    border: 1px solid rgba(96, 165, 250, 0.28);
    color: var(--p2-text, #e2e8f0);
}
.single-main-tile.single-main-tile-with-context > .single-main-tile-copy,
.single-main-tile.single-main-tile-with-context > .single-main-support,
.single-main-tile.single-main-tile-with-context > .single-main-cta {
    position: relative;
    z-index: 1;
}
@media (max-width: 640px) {
    .single-main-tile-context {
        padding: 14px 16px 0 0;
    }
    .single-main-tile-context-headline {
        font-size: 0.82rem;
        padding: 4px 10px;
    }
    .single-main-tile-context-backdrop {
        font-size: clamp(4.2rem, 24vw, 7rem);
    }
}