/* ==========================================================================
   Viererkette - Modern Dark UI Theme Stylesheet
   ========================================================================== */

:root {
    /* Flutlicht: Graphit statt Nachtblau, Rasen-Limette als einzige
       Markenfarbe. Die Komponenten stehen in css/design.css. */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Ohne Netz greifen die schmalen Systemschriften: Bahnschrift (Windows),
       Avenir Next Condensed (Apple), sans-serif-condensed (Android) */
    --font-display: 'Barlow Condensed', 'Bahnschrift SemiCondensed', 'Avenir Next Condensed', 'Roboto Condensed', sans-serif-condensed, 'Arial Narrow', sans-serif;

    --accent-rgb: 182, 242, 61;
    --info-rgb: 96, 196, 255;

    --bg-main: #090c11;
    --bg-elevated: #10151c;
    --bg-card: #10151c;
    --bg-card-hover: #161c25;
    --bg-sidebar: #0b0f14;
    --bg-header: rgba(9, 12, 17, 0.86);
    --bg-input: #0c1016;

    --border-color: rgba(255, 255, 255, 0.07);
    --border-light: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(var(--accent-rgb), 0.45);

    --accent-primary: rgb(var(--accent-rgb));
    --accent-primary-hover: #c9f771;
    --accent-ink: #0b1004;
    --accent-secondary: #34d399;
    --accent-gold: #fbbf24;
    --accent-danger: #f87171;
    --accent-red: #f87171;
    --accent-purple: #a78bfa;
    --accent-info: rgb(var(--info-rgb));

    --text-main: #eef2f6;
    --text-soft: #c3ccd7;
    /* Kontrast gegen die dunkelste Kartenfläche (surface-3) mindestens 4,5:1:
       muted 6,2:1, dim 4,6:1 - vorher lag dim bei 2,7:1 */
    --text-muted: #9aa5b4;
    --text-dim: #838e9e;

    --pitch-bg: #15803d;
    --pitch-line: rgba(255, 255, 255, 0.45);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 30px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 0 1px rgba(var(--accent-rgb), 0.35), 0 8px 28px rgba(var(--accent-rgb), 0.16);
    --shadow-glow-gold: 0 0 28px rgba(251, 191, 36, 0.22);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.dash-card,
.inbox-item,
.inbox-detail,
.calendar-timeline-item,
.calendar-day-card,
.finance-stat-row,
.club-stat-line,
.player-role-summary-card,
.player-role-box {
    min-width: 0;
}

.text-muted,
.inbox-item-title,
.cal-day-title,
.cal-day-desc,
.role-card-title,
.role-card-subtitle,
.role-name,
.role-box-sub {
    overflow-wrap: anywhere;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-main);
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(var(--accent-rgb), 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(34, 197, 94, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, #090c11 0%, #080a0e 100%);
    background-attachment: fixed;
    color: var(--text-main);
    line-height: 1.5;
    overflow-x: hidden;
    user-select: none;
}

/* App Container */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================================================================
   Header Bar
   ========================================================================== */
.app-header {
    height: 70px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.brand-icon {
    font-size: 24px;
}

.brand-accent {
    color: var(--accent-primary);
    font-family: var(--font-display);
    font-size: 26px;
}

.club-badge-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.club-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-primary);
    border: 2px solid rgba(255,255,255,0.8);
}

.club-name {
    font-weight: 600;
    font-size: 15px;
}

.header-tag {
    font-size: 11px;
    text-transform: uppercase;
    background: var(--border-color);
    color: var(--text-muted);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.season-info-pill {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 8px 18px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.info-label {
    color: var(--text-muted);
}

.info-val {
    font-weight: 700;
    color: var(--text-main);
}

.divider {
    color: var(--text-dim);
}

.finance-pill {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 6px 14px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 13px;
    cursor: default;
}

.fin-val {
    font-weight: 700;
    color: #34d399;
}

.fin-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.confidence-pill {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
}

.conf-bar-wrap {
    width: 50px;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.conf-bar-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.3s;
}

.conf-val {
    font-size: 12px;
    font-weight: 700;
}

/* ==========================================================================
   Main Layout & Sidebar
   ========================================================================== */
.main-wrapper {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 240px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
    position: relative;
}

.nav-item:hover {
    background: var(--bg-card);
    color: var(--text-main);
}

.nav-item.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-primary);
    font-weight: 600;
    border-left: 3px solid var(--accent-primary);
}

.nav-icon {
    font-size: 18px;
}

/*
 * Badges
 * -------------------------------------------------------------------------
 * ".badge" war ursprünglich nur als absolut positionierte Zählerblase in der
 * Navigation gedacht. Dieselbe Klasse wird aber auch inline verwendet (Beste
 * Rolle und Scout-Wissen im Transfermarkt, Datumsanzeigen, Wechselzähler).
 * Dort riss "position: absolute" die Badges aus ihrer Tabellenzelle heraus.
 * Grundform ist deshalb jetzt eine Inline-Pille; nur die Zähler in der
 * Navigation werden weiterhin am rechten Rand verankert.
 */
.badge {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.32);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zählerblasen in der Seiten- und Mobilnavigation */
.nav-item > .badge,
.mobile-nav-item > .badge,
.mobile-drawer-item > .badge {
    position: absolute;
    right: 12px;
    background: var(--accent-red);
    border-color: transparent;
    color: #ffffff;
    min-width: 20px;
    text-align: center;
    padding: 2px 6px;
}

/* Farbvarianten */
.badge-neutral {
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.32);
    color: var(--text-main);
}

.badge-info {
    background: rgba(56, 189, 248, 0.16);
    border-color: rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
}

.badge-success {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.42);
    color: #86efac;
}

.badge-warning {
    background: rgba(250, 204, 21, 0.16);
    border-color: rgba(250, 204, 21, 0.42);
    color: #fde047;
}

.badge-danger {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}

/* Statuskennzeichnungen im Kader (bisher komplett ungestylt) */
.badge-status-fit,
.badge-status-inj,
.badge-status-susp,
.badge-status-lineup,
.badge-status-bench {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.badge-status-fit {
    background: rgba(34, 197, 94, 0.16);
    border-color: rgba(34, 197, 94, 0.42);
    color: #86efac;
}

.badge-status-inj {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}

.badge-status-susp {
    background: rgba(248, 113, 113, 0.2);
    border-color: rgba(248, 113, 113, 0.5);
    color: #fecaca;
}

.badge-status-lineup {
    background: rgba(56, 189, 248, 0.16);
    border-color: rgba(56, 189, 248, 0.4);
    color: #7dd3fc;
}

.badge-status-bench {
    background: rgba(148, 163, 184, 0.18);
    border-color: rgba(148, 163, 184, 0.32);
    color: #cbd5e1;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.quick-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.qs-label {
    color: var(--text-muted);
}

.qs-val {
    font-weight: 700;
}

.form-indicators {
    display: flex;
    gap: 4px;
}

.form-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
}

.form-dot.w { background: #10b981; color: white; }
.form-dot.d { background: #64748b; color: white; }
.form-dot.l { background: #ef4444; color: white; }

/* ==========================================================================
   Content Area & Tab Panes
   ========================================================================== */
.content-area {
    flex: 1;
    padding: 28px;
    background: var(--bg-main);
    overflow-y: auto;
    max-height: calc(100vh - 70px);
}

.tab-pane {
    display: none;
    animation: fadeIn 0.25s ease-in-out;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.pane-header h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* ==========================================================================
   Buttons & Controls
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    outline: none;
    letter-spacing: 0.2px;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    color: #ffffff;
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
    color: #ffffff;
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.btn-advance {
    padding: 11px 24px;
    font-size: 15px;
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    color: #ffffff;
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
}

.btn-advance:hover:not(:disabled) {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
    box-shadow: 0 0 24px rgba(34, 197, 94, 0.45);
    transform: translateY(-2px);
}

.btn-advance .btn-arrow {
    transition: transform 0.2s ease;
}

.btn-advance:hover .btn-arrow {
    transform: translateX(4px);
}

.btn-secondary {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.22);
    border-color: var(--border-light);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    color: white;
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.btn-link {
    background: transparent;
    color: var(--accent-primary);
    padding: 4px 8px;
    border: none;
}

.btn-link:hover {
    text-decoration: underline;
    color: #7dd3fc;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 14px 30px;
    font-size: 16px;
    border-radius: var(--radius-md);
}

.styled-select, .styled-input {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.styled-select:focus, .styled-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);
}

/* ==========================================================================
   Dashboard Grid
   ========================================================================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}

/*
 * Standardbreite im 12-Spalten-Raster: ein Drittel.
 * Ohne diese Vorgabe belegte jede Karte ohne eigene Spannweiten-Klasse nur
 * eine einzige Rasterspalte (rund 90 px) - im Verein-Reiter führte das zu
 * überlappenden, unlesbar schmalen Karten. Die Karten des Dashboards
 * definieren ihre Breite weiter unten selbst und überschreiben diesen Wert.
 */
.dashboard-grid > .dash-card {
    grid-column: span 4;
    min-width: 0;
}

.dash-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

/* Signatur-Eigenschaft eines Topspielers */
.signatur-karte {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-md, 8px);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.04));
    border: 1px solid rgba(245, 158, 11, 0.45);
}
.signatur-icon { font-size: 24px; line-height: 1; }
.signatur-name { font-weight: 700; font-size: 13px; color: #fbbf24; }
.signatur-marke {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 1px 6px; margin-left: 4px; border-radius: 999px;
    background: rgba(245, 158, 11, 0.2); color: #f59e0b; vertical-align: middle;
}
.signatur-text { font-size: 12px; color: var(--text-secondary, #cbd5e1); line-height: 1.5; margin-top: 2px; }
.signatur-mini { font-size: 12px; cursor: help; }

.dash-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dash-card .card-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

.matchday-tag {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-primary);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
}

.dashboard-grid > .next-match-card {
    grid-column: span 6;
}

.dashboard-grid > .calendar-snapshot-card {
    grid-column: span 6;
}

.dashboard-grid > .table-snapshot-card {
    grid-column: span 4;
}

.dashboard-grid > .board-card {
    grid-column: span 4;
}

.dashboard-grid > .squad-status-card {
    grid-column: span 4;
}

.full-width,
.dashboard-grid > .full-width {
    grid-column: span 12;
}

/* Match Preview */
.match-preview-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 24px 0;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.preview-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 35%;
    text-align: center;
}

.preview-crest {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: white;
}

.preview-rank {
    font-size: 12px;
    color: var(--text-muted);
}

.preview-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.vs-text {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--accent-gold);
}

.preview-venue {
    font-size: 11px;
    color: var(--text-dim);
}

.match-action-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

/* Board Card */
.goal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

.progress-bar-lg {
    flex: 1;
    margin: 0 14px;
    height: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 5px;
}

.board-msg-box {
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--accent-primary);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text-muted);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-top: 14px;
}

/* Medical List */
.medical-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.medical-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.medical-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

/* News List */
.news-list-dash {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-item-dash {
    padding: 10px 14px;
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news-item-dash h5 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

.news-item-dash p {
    font-size: 12px;
    color: var(--text-muted);
}

.news-date {
    font-size: 11px;
    color: var(--text-dim);
}

/* ==========================================================================
   Data Tables
   ========================================================================== */
.table-container {
    overflow-x: auto;
}

.data-table, .compact-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th, .compact-table th {
    text-align: left;
    padding: 12px 14px;
    background: rgba(0,0,0,0.25);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
}

.data-table td, .compact-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.data-table tbody tr:hover, .compact-table tbody tr:hover {
    background: var(--bg-card-hover);
}

.row-user-club {
    background: rgba(16, 185, 129, 0.1) !important;
    font-weight: 600;
}

.row-user-club td:first-child {
    border-left: 3px solid var(--accent-primary);
}

/* Rating / OVR Badge */
.ovr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 14px;
}

.ovr-high { background: #065f46; color: #34d399; }
.ovr-mid { background: #1e3a8a; color: #60a5fa; }
.ovr-low { background: #334155; color: #cbd5e1; }

.pos-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.pos-tw { background: #d97706; color: white; }
.pos-def { background: #2563eb; color: white; }
.pos-mid { background: #059669; color: white; }
.pos-att { background: #dc2626; color: white; }

/* Nebenposition: gedämpft, damit die Hauptposition führend bleibt */
.pos-tag.pos-secondary {
    background: transparent;
    border: 1px dashed rgba(148, 163, 184, 0.55);
    color: var(--text-muted);
    font-weight: 600;
    margin-left: 3px;
}

/* Mini Progress Bar in Tables */
.mini-bar {
    width: 60px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}

.mini-bar-fill {
    /* Ein span ist inline - Breite und Höhe griffen nicht, und jeder
       Balken der App (Fitness, Spielschärfe, Trainerstab) blieb leer. */
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: var(--accent-primary);
}

/* ==========================================================================
   Tactics & Pitch Layout
   ========================================================================== */
.tactics-layout {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 24px;
}

/*
 * Rasterkinder duerfen unter ihre Inhaltsbreite schrumpfen. Ohne min-width: 0
 * behaelt ein Grid-Item seine intrinsische Mindestbreite - auf schmalen
 * Displays ragte die Aufstellungskarte dadurch ueber den Bildschirmrand
 * hinaus und wurde abgeschnitten.
 */
.tactics-layout > * {
    min-width: 0;
}

.pitch-container-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.pitch-header-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.pitch-header-bar .styled-select {
    flex: 1 1 160px;
    min-width: 0;
}

.soccer-pitch {
    width: 100%;
    height: 520px;
    background: radial-gradient(circle, #166534 0%, #14532d 100%);
    border: 3px solid rgba(255,255,255,0.6);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
}

.pitch-marking {
    position: absolute;
    border: 2px solid var(--pitch-line);
}

.pitch-marking.center-line {
    top: 50%;
    left: 0;
    right: 0;
    border-top: 2px solid var(--pitch-line);
}

.pitch-marking.center-circle {
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    border-radius: 50%;
}

.pitch-marking.penalty-box.top {
    top: 0;
    left: 50%;
    width: 220px;
    height: 90px;
    margin-left: -110px;
    border-top: none;
}

.pitch-marking.penalty-box.bottom {
    bottom: 0;
    left: 50%;
    width: 220px;
    height: 90px;
    margin-left: -110px;
    border-bottom: none;
}

.pitch-players-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 25;
}

/* ---------------------------------------------------------------
   Formations-Editor: Raster, Bearbeitungsleiste und Eignungsanzeige
   --------------------------------------------------------------- */

.pitch-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    background-image:
        repeating-linear-gradient(to right, rgba(255,255,255,0.16) 0 1px, transparent 1px 10%),
        repeating-linear-gradient(to bottom, rgba(255,255,255,0.16) 0 1px, transparent 1px 8.3333%);
}

.soccer-pitch.editing .pitch-grid-overlay {
    opacity: 1;
}

/* Zonenbänder als Orientierung: Abwehr, Mittelfeld, Angriff */
.soccer-pitch.editing::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(var(--accent-rgb), 0.10) 0 26%,
            rgba(250, 204, 21, 0.07) 26% 51%,
            rgba(239, 68, 68, 0.09) 51% 86%,
            rgba(148, 163, 184, 0.16) 86% 100%);
}

.soccer-pitch.editing .pitch-node {
    cursor: grab;
    touch-action: none;
}

.soccer-pitch.editing .pitch-node.dragging {
    cursor: grabbing;
    z-index: 40;
}

.soccer-pitch.editing .pitch-node.dragging .pitch-node-shirt {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.8), 0 8px 16px rgba(0,0,0,0.5);
}

.formation-editor-bar {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formation-editor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
}

.formation-editor-row .styled-select,
.formation-editor-row .styled-input {
    flex: 0 1 200px;
    min-width: 130px;
}

.formation-shape-badge {
    background: var(--accent-primary, #2563eb);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 999px;
}

.formation-editor-hint {
    color: var(--text-muted);
    font-size: 12px;
}

.formation-snap-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}

/* Positionskürzel und Eignung am Spielerknoten */
.pitch-node-pos {
    position: absolute;
    top: -9px;
    right: -12px;
    background: rgba(16, 21, 28, 0.95);
    border: 1px solid rgba(255,255,255,0.35);
    color: #f8fafc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 1px 5px;
    border-radius: 999px;
    pointer-events: none;
}

.pitch-node-fit {
    display: block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 1px;
    opacity: 0.95;
}

.pitch-node-shirt.fit-natural { border-color: #22c55e; }
.pitch-node-shirt.fit-accomplished { border-color: #4ade80; }
.pitch-node-shirt.fit-competent { border-color: #a3e635; }
.pitch-node-shirt.fit-unconvincing { border-color: #facc15; }
.pitch-node-shirt.fit-awkward { border-color: #fb923c; box-shadow: 0 0 0 2px rgba(251,146,60,0.35), 0 4px 8px rgba(0,0,0,0.4); }
.pitch-node-shirt.fit-makeshift { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.45), 0 4px 8px rgba(0,0,0,0.4); }

.bench-node .bench-fit {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(148, 163, 184, 0.15);
}

/* Sternebewertungen mit Unsicherheitsspanne */
.star-rating {
    font-size: 13px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.star-uncertain {
    opacity: 0.32;
}

.star-empty {
    opacity: 0.22;
}

/* Kompakte Sternewertung dort, wo eine ganze Reihe nicht hinpasst */
.star-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.pitch-node-shirt .star-chip {
    font-size: 12px;
    gap: 1px;
}

.bench-node .star-chip,
.cd-tag .star-chip {
    font-size: 11px;
}

.club-item-ovr .star-chip {
    font-size: 13px;
}

.position-map-value .star-chip {
    font-size: 11px;
}

/* Werte, die nur geschätzt sind */
.estimated-value {
    font-style: italic;
    opacity: 0.9;
}

.scout-confidence-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--border-color);
    margin-bottom: 14px;
    font-size: 12px;
}

.scout-confidence-bar > span:first-child {
    white-space: nowrap;
}

.scout-confidence-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
    min-width: 60px;
}

.scout-confidence-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Anklickbare Tabellenzeilen (Transfermarkt, Kader) */
.data-table tbody tr.row-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.data-table tbody tr.row-clickable:hover {
    background: rgba(var(--accent-rgb), 0.08);
}

.stats-grid > * {
    min-width: 0;
}

.position-map {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.position-map-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 62px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--border-color);
}

.position-map-code {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #f1f5f9;
    border-bottom: 2px solid transparent;
    padding-bottom: 1px;
}

.position-map-value {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

.position-map-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lineup-warning {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(251, 146, 60, 0.12);
    border: 1px solid rgba(251, 146, 60, 0.4);
    color: #fdba74;
    font-size: 12px;
    line-height: 1.5;
}

.pitch-node {
    position: absolute;
    z-index: 20;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
    z-index: 10;
}

.pitch-node:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.pitch-node-shirt {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #dc2626;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.pitch-node-name {
    background: rgba(0,0,0,0.85);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bench-section {
    margin-top: 18px;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}

.bench-section h4 {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.bench-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bench-node {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.bench-node:hover {
    background: var(--bg-card-hover);
    border-color: var(--accent-primary);
}

.tactics-sidebar-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tactics-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.tactics-card h3 {
    font-size: 16px;
    margin-bottom: 16px;
}

.tactic-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.tactic-field label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Taktik nach Phasen: Hilfetexte, Ansicht, Rollen, Anweisungen, Check */
.taktik-hilfe {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0 0 12px;
}

.taktik-ansicht {
    display: flex;
    gap: 6px;
    margin: -4px 0 12px;
    flex-wrap: wrap;
}

.taktik-ansicht-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--line, var(--border-color));
    border-radius: 999px;
    cursor: pointer;
}

.taktik-ansicht-btn.active {
    color: #fff;
    background: var(--accent-soft, rgba(52,211,153,0.15));
    border-color: var(--accent-line, var(--accent-primary));
}

.soccer-pitch.ansicht-mit .pitch-node,
.soccer-pitch.ansicht-gegen .pitch-node {
    transition: left 0.35s ease, top 0.35s ease;
}

.pitch-node-rolle {
    display: block;
    font-size: 10px;
    line-height: 1.1;
    color: rgba(255,255,255,0.78);
    max-width: 86px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Taktiktafel im Stil des Vorbilds: Ansichten, Rollenkuerzel, Verbindungen */
.taktik-ansicht-leiste {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: -4px 0 12px;
}

.taktik-ansicht-leiste .taktik-ansicht { flex: 1 1 auto; margin: 0; }

.taktik-auge { position: relative; flex: none; }

.taktik-auge > summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 34px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid var(--line, var(--border-color));
    background: var(--surface-2, rgba(255,255,255,0.03));
    color: var(--text-muted);
}

.taktik-auge > summary::-webkit-details-marker { display: none; }
.taktik-auge[open] > summary { color: #fff; border-color: var(--accent-line, var(--accent-primary)); }

.taktik-auge-menu {
    position: absolute;
    right: 0;
    top: 38px;
    z-index: 30;
    min-width: 170px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface-3, #1d2530);
    border: 1px solid var(--line-strong, var(--border-color));
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.taktik-auge-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.taktik-auge-menu label:hover { background: rgba(255,255,255,0.05); }

.taktik-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.taktik-links line { vector-effect: non-scaling-stroke; stroke-linecap: round; }
/* Farbe: wie gut die Rollen passen - Dicke (inline): wie eingespielt die beiden sind */
.taktik-links .link-stark { stroke: #facc15; stroke-width: 4; opacity: 0.95; }
.taktik-links .link-gut { stroke: #f8fafc; stroke-width: 2.5; opacity: 0.6; }
.taktik-links .link-schwach { stroke: #f87171; stroke-width: 2.5; stroke-dasharray: 6 5; opacity: 0.95; }
.taktik-links .gedimmt { opacity: 0.12; }
.taktik-links .weg { stroke: rgba(255,255,255,0.55); stroke-width: 1.5; stroke-dasharray: 3 4; }
.taktik-links .geist { fill: rgba(255,255,255,0.14); stroke: rgba(255,255,255,0.55); stroke-width: 1; vector-effect: non-scaling-stroke; }

.pitch-players-layer { z-index: 2; }

.rolle-badges {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin: 2px 0 1px;
}

.rolle-badge {
    display: inline-block;
    min-width: 30px;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.rolle-badge.kat-tor { background: #475569; }
.rolle-badge.kat-abwehr { background: #0f766e; }
.rolle-badge.kat-aufbau { background: #15803d; }
.rolle-badge.kat-kreativ { background: #1d4ed8; }
.rolle-badge.kat-angriff { background: #7e22ce; }
.rolle-badge.kat-standard { background: #0e7490; }
.rolle-badge.kat-pressend { background: #b91c1c; }
.rolle-badge.kat-zurueck { background: #047857; }
.rolle-badge.kat-absichernd { background: #1e40af; }
.rolle-badge.kat-konter { background: #7e22ce; }
.rolle-badge.gegen { opacity: 0.92; outline: 1px dashed rgba(255,255,255,0.45); outline-offset: -1px; }

.soccer-pitch.ohne-sterne .shirt-wert { visibility: hidden; }
.soccer-pitch.ohne-namen .pitch-node-name > .spielername { display: none; }
.soccer-pitch.ohne-rollen .rolle-badges { display: none; }
.soccer-pitch.ohne-eignung .pitch-node-fit { display: none; }

.link-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.link-legende span { display: inline-flex; align-items: center; gap: 6px; }

.link-muster { display: inline-block; width: 22px; height: 0; border-top: 3px solid #facc15; }
.link-muster.gut { border-top: 2px solid rgba(248, 250, 252, 0.7); }
.link-muster.schwach { border-top: 2px dashed #f87171; }
.link-muster.dick { border-top: 5px solid rgba(248, 250, 252, 0.7); position: relative; }
.link-muster.dick::after { content: ""; position: absolute; left: 28px; top: -3px; width: 22px; border-top: 1px solid rgba(248, 250, 252, 0.7); }
.zs-legende .link-muster.dick { margin-right: 30px; }

/* Zusammenspiel unter der Taktiktafel */
.tac-zusammenspiel { margin-top: 12px; }
.tac-zusammenspiel:empty { display: none; }
.zs-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.zs-kopf > span:first-child { font-weight: 600; }
.zs-kopf strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.zs-schnitt { color: var(--text-muted); font-size: 13px; }
.zs-legende { margin-bottom: 6px; }
.zs-spieler {
    margin-top: 10px; padding: 12px; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}
.zs-spieler-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.zs-spieler-kopf strong { font-size: 16px; }
.zs-schliessen { margin-left: auto; min-width: 36px; }
.zs-rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.zs-rollen label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.zs-liste { margin: 0; }
.zs-eingespielt { color: var(--text-muted); }
.formation-feinjustage { align-items: center; }
.feinjustage-tasten { display: inline-flex; gap: 4px; }
.feinjustage-tasten .btn { min-width: 40px; min-height: 40px; font-size: 16px; }
@media (max-width: 600px) {
    .zs-rollen { grid-template-columns: 1fr; }
}

.taktik-check li.stark { border-left-color: #facc15; }
.taktik-check li.schwach { border-left-color: var(--bad, #f87171); }

@media (max-width: 600px) {
    .pitch-node-rolle { display: none; }
    .taktik-ansicht-btn { padding: 6px 6px; font-size: 11px; }
    .rolle-badge { font-size: 9px; min-width: 24px; padding: 0 4px; }
}

.rollen-liste {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
}

/* Aufstellung wie im Vorbild: eine dichte Tabelle statt einzelner Kaesten */
.aufstellung-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.aufstellung-kopf h3 { margin: 0; }
.aufstellung-kopf .taktik-ansicht { margin: 0; flex: 1 1 200px; max-width: 280px; }
#btnRollenAbstimmen { margin-top: 8px; }

.aufst-kopfzeile,
.rollen-zeile {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.25fr) 48px;
    gap: 4px 10px;
    align-items: center;
}

.aufst-kopfzeile {
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid var(--border-color);
}

.rollen-zeile {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.rollen-zeile:last-child { border-bottom: 0; }
.rollen-zeile:nth-child(odd) { background: rgba(255, 255, 255, 0.015); }
.rollen-zeile:hover { background: rgba(255, 255, 255, 0.04); }

.aufst-spieler { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.aufst-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aufst-name small { font-weight: 500; color: var(--text-muted); font-size: 12px; }
.aufst-sterne { display: flex; line-height: 1; transform: scale(0.82); transform-origin: left center; }

.aufst-rolle { display: flex; align-items: center; gap: 6px; min-width: 0; }
.aufst-rolle .rolle-badge { flex: 0 0 auto; }
.aufst-rolle .styled-select {
    width: 100%;
    min-width: 0;
    font-size: 12px;
    padding: 5px 24px 5px 8px;
    background-position: right 6px center;
}

.aufst-kond {
    position: relative;
    height: 18px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.aufst-kond i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.aufst-kond.gut i { background: rgba(52, 211, 153, 0.55); }
.aufst-kond.mittel i { background: rgba(251, 191, 36, 0.55); }
.aufst-kond.schwach i { background: rgba(248, 113, 113, 0.6); }
.aufst-kond b {
    position: relative;
    display: block;
    text-align: center;
    font-size: 11px;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .aufst-kopfzeile, .rollen-zeile { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1.3fr) 40px; gap: 4px 6px; padding: 7px 8px; }
    .aufst-rolle .rolle-badge { display: none; }
}

.rollen-zeile.aktiv {
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow: inset 3px 0 0 var(--accent-primary);
}

.rollen-zeile .pos-tag { justify-self: start; }

.rollen-name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rollen-selects {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.rollen-selects label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: var(--text-muted);
    min-width: 0;
}

.rollen-selects .styled-select { width: 100%; min-width: 0; font-size: 12px; padding: 6px 8px; }

.rollen-text {
    grid-column: 1 / -1;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

.taktik-gruppe {
    border: 1px solid var(--line, var(--border-color));
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.taktik-gruppe > summary {
    cursor: pointer;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.taktik-gruppe > summary::-webkit-details-marker { display: none; }
.taktik-gruppe > summary::after { content: "▾"; color: var(--text-muted); }
.taktik-gruppe[open] > summary::after { content: "▴"; }

.taktik-gruppe-inhalt {
    padding: 4px 12px 8px;
}

.taktik-gruppe-inhalt h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 10px 0 8px;
}

.taktik-gruppe-inhalt .tactic-field { margin-bottom: 10px; }

.taktik-check {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
}

.taktik-check li {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--ok, #34d399);
}

.taktik-check li.warn { border-left-color: var(--warn, #fbbf24); }

/* ==========================================================================
   Fixtures & Schedule
   ========================================================================== */
.fixtures-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.matchday-display-title {
    font-size: 18px;
    font-weight: 700;
}

.fixtures-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.fixture-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fixture-card.user-match {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.05);
}

.fixture-team {
    font-size: 14px;
    font-weight: 600;
    width: 40%;
}

.fixture-team.away {
    text-align: right;
}

.fixture-score-badge {
    background: var(--bg-input);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-weight: 800;
    font-size: 16px;
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   Training Grid
   ========================================================================== */
.training-grid, .finances-grid, .stats-grid, .settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 20px;
}

/*
 * Der Trainingsbereich besteht aus vier Karten: oben Schwerpunkt und
 * Intensität nebeneinander, darunter zwei über die volle Breite.
 *
 * Mit "auto-fit, minmax(360px, 1fr)" stellte ein breiter Monitor daraus drei
 * Spalten - die beiden Auswahlkarten oben bekamen dann nur ein Drittel der
 * Breite, und in den Optionen brach jede Beschreibung über mehrere Zeilen um.
 * Zwei Spalten sind hier die richtige Aufteilung, egal wie breit der
 * Bildschirm ist.
 */
@media (min-width: 900px) {
    .training-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.training-focus-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.focus-option-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

.focus-option-card:hover {
    background: var(--bg-card-hover);
}

.focus-option-card input:checked ~ .focus-card-content h4 {
    color: var(--accent-primary);
}

.focus-card-content h4 {
    font-size: 14px;
    margin-bottom: 2px;
}

.focus-card-content p {
    font-size: 12px;
    color: var(--text-muted);
}

.intensity-picker {
    display: flex;
    gap: 10px;
    margin: 16px 0;
}

.intensity-btn {
    flex: 1;
    padding: 10px;
    text-align: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.intensity-btn input {
    display: none;
}

/* Ohne :has (ältere Browser) wenigstens die Schrift hervorheben */
.intensity-btn input:checked + span {
    font-weight: 800;
}

.intensity-btn:has(input:checked) {
    background: var(--accent-primary);
    color: #042f2e;
    border-color: var(--accent-primary);
}

.training-info-alert {
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ==========================================================================
   Finances
   ========================================================================== */
.finance-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

/* ==========================================================================
   Leaderboards (Stats)
   ========================================================================== */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.lb-rank {
    font-weight: 800;
    color: var(--text-muted);
    width: 24px;
}

.lb-name {
    flex: 1;
    font-weight: 600;
}

.lb-club {
    color: var(--text-dim);
    font-size: 11px;
    margin-right: 12px;
}

.lb-val {
    font-weight: 800;
    color: var(--accent-gold);
    font-size: 15px;
}

/* ==========================================================================
   Inbox & Messaging
   ========================================================================== */
.inbox-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    min-height: 520px;
}

.filter-chip {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-main);
}

.filter-chip.active {
    background: var(--accent-primary);
    color: #ffffff;
    border-color: var(--accent-primary);
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.3);
}

.inbox-list {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 650px;
    overflow-y: auto;
    padding-right: 4px;
}

.inbox-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: rgba(16, 21, 28, 0.72);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
    min-width: 0;
    position: relative;
}

.inbox-item:hover {
    background: rgba(29, 37, 48, 0.88);
    border-color: rgba(var(--accent-rgb), 0.35);
    transform: translateY(-1px);
}

.inbox-item.selected {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.10);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.2);
}

.inbox-item.unread {
    border-left: 4px solid var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.06);
}

.inbox-item-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.inbox-sender-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.inbox-icon {
    flex: 0 0 auto;
}

.inbox-sender {
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-date {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap;
}

.inbox-item-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.inbox-item-title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.inbox-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.inbox-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 6px;
}

.msg-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.14);
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.30);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
}

.inbox-detail {
    min-width: 0;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: rgba(16, 21, 28, 0.82);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    min-height: 400px;
}

.inbox-detail-header {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.inbox-detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inbox-detail-title-row h2 {
    min-width: 0;
    margin: 0;
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.25;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.inbox-detail-date {
    flex: 0 0 auto;
    white-space: nowrap;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-gold);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.30);
}

.inbox-detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.meta-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin-bottom: 3px;
    font-weight: 700;
}

.inbox-detail-body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Calendar & Timeline Styles
   ========================================================================== */
.calendar-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calendar-timeline-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(16, 21, 28, 0.72);
    border: 1px solid var(--border-color);
    min-width: 0;
    transition: all 0.2s ease;
}

.calendar-timeline-item:hover {
    background: rgba(29, 37, 48, 0.88);
    border-color: rgba(var(--accent-rgb), 0.3);
}

.calendar-timeline-item.current-day {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.18);
}

.calendar-timeline-item .badge {
    justify-self: end;
    align-self: center;
    white-space: nowrap;
}

.cal-day-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 12px;
    padding: 8px 6px;
    background: rgba(255, 255, 255, 0.05);
    min-width: 64px;
}

.cal-day-date strong {
    font-size: 12px;
    color: var(--accent-primary);
}

.cal-day-date span {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.cal-day-info {
    min-width: 0;
}

.cal-day-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-day-desc {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.calendar-action-bar {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.calendar-action-bar .btn {
    flex: 1 1 180px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.calendar-grid-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.calendar-day-card {
    position: relative;
    min-width: 0;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: rgba(16, 21, 28, 0.74);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.calendar-day-card.active-today {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.10);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.22);
    transform: translateY(-2px);
}

.cal-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.cal-dow,
.cal-date {
    white-space: nowrap;
    font-size: 11px;
}

.cal-dow {
    font-weight: 800;
    color: var(--accent-primary);
}

.cal-date {
    color: var(--text-muted);
}

.cal-card-icon {
    font-size: 26px;
    margin: 2px 0;
}

.cal-card-title {
    font-weight: 800;
    font-size: 13px;
    color: var(--text-main);
    line-height: 1.25;
}

.cal-card-desc {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cal-status-badge {
    margin-top: auto;
    align-self: flex-start;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 800;
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.30);
    white-space: nowrap;
}

/* ==========================================================================
   Player Role & Detail Cards
   ========================================================================== */
/* Spielerakte in Reitern */
.pd-tabs { position: sticky; top: -24px; z-index: 3; display: flex; gap: 4px; margin: 0 -4px 14px; padding: 8px 4px; background: var(--bg-card, var(--surface-1, #111827)); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pd-tabs::-webkit-scrollbar { display: none; }
.pd-tab-knopf { flex: 1 0 auto; min-height: 40px; padding: 8px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pd-tab-knopf.aktiv { background: var(--accent-primary, #a3e635); border-color: transparent; color: var(--bg-main, #0b1220); }
.pd-tab[hidden] { display: none; }
.pd-saison { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, rgba(255, 255, 255, 0.03)); border: 1px solid var(--line); font-size: 13px; }
.pd-saison span { color: var(--text-muted); }

.player-detail-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.player-detail-meta {
    min-width: 0;
}

.player-detail-rating {
    flex: 0 0 auto;
    text-align: right;
}

.player-detail-stars {
    color: var(--accent-gold);
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}

.player-detail-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.player-role-summary-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border-color);
}

.player-role-box {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.role-box-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
}

.role-box-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.role-name {
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--accent-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-stars {
    flex: 0 0 auto;
    color: var(--accent-gold);
    font-size: 12px;
    white-space: nowrap;
}

.role-stars-potential {
    color: #38bdf8;
    font-size: 14px;
}

.role-box-sub {
    min-width: 0;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    max-width: 160px;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.role-chip:hover {
    max-width: none;
}

.calendar-full-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
}

.cal-full-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.cal-full-item.past {
    opacity: 0.6;
}

.cal-full-item.current {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.08);
    font-weight: 700;
}

.cal-full-date {
    color: var(--text-muted);
    min-width: 130px;
}

.cal-full-title {
    flex: 1;
    color: var(--text-main);
}

.cal-full-status {
    font-size: 12px;
    color: var(--text-muted);
}

/* ==========================================================================
   Modals
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    padding: 20px;
}

/*
 * Live-Spiel: Der Weichzeichner des Overlays musste bei jedem Animationsframe
 * über den gesamten Bildschirm neu berechnet werden - das war die Ursache für
 * das Ruckeln der 2D-Simulation (ca. 16 statt 60 Bilder pro Sekunde).
 * Das Vollbild-Modal verdeckt den Hintergrund ohnehin komplett, deshalb wird
 * hier auf den Effekt verzichtet und stattdessen deckend gefüllt.
 */
#modalLiveMatch {
    background: #07090d;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

/* Auch die Buttons im Live-Modal erzeugen sonst je eine eigene Blur-Ebene */
#modalLiveMatch .btn,
#modalLiveMatch .btn-secondary,
#modalLiveMatch .modal-box {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Der Canvas bekommt eine eigene Compositing-Ebene */
#livePitchCanvas {
    will-change: transform;
    contain: paint;
}

.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: zoomIn 0.2s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-sm { max-width: 420px; }
.modal-md { max-width: 600px; }
.modal-lg { max-width: 900px; }
.modal-fullscreen { max-width: 1200px; height: 85vh; }

.modal-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.modal-footer.center {
    justify-content: center;
}

/* Club Selection Grid */
.club-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 16px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
}

.club-select-card {
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.club-select-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.club-select-card.selected {
    border-color: var(--accent-primary);
    background: rgba(16, 185, 129, 0.1);
}

.club-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.club-card-crest {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: white;
}

.club-stat-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* ==========================================================================
   Live 2D Match Modal Styles
   ========================================================================== */
.live-match-header {
    background: #090d16;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.live-scoreboard {
    display: flex;
    align-items: center;
    gap: 24px;
}

.team-score {
    display: flex;
    align-items: center;
    gap: 12px;
}

.team-name {
    font-size: 18px;
    font-weight: 700;
}

.score-digit {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    background: rgba(255,255,255,0.08);
    padding: 2px 14px;
    border-radius: var(--radius-sm);
    color: var(--accent-gold);
}

.match-time-badge {
    background: #dc2626;
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-xl);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.live-match-body {
    display: grid;
    grid-template-columns: 8fr 4fr;
    flex: 1;
    overflow: hidden;
}

.live-pitch-wrapper {
    background: #041d13;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    position: relative;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

#livePitchCanvas {
    background: #0b4227;
    border: 2px solid rgba(255,255,255,0.55);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    /* Größe wird per JS (DPR-korrekt) gesetzt - hier nur eine Obergrenze */
    max-width: 100%;
    display: block;
}

.live-clock {
    display: inline-block;
    margin-left: 8px;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.72);
    letter-spacing: 0.5px;
}

/* Farbcodierung der Ticker-Ereignisse */
.ticker-event {
    border-left: 3px solid transparent;
    padding-left: 8px;
}
.ticker-event.ticker-goal { border-left-color: #22c55e; color: #bbf7d0; font-weight: 700; }
.ticker-event.ticker-save { border-left-color: #38bdf8; }
.ticker-event.ticker-shot_miss { border-left-color: #94a3b8; }
.ticker-event.ticker-corner { border-left-color: #a78bfa; }
.ticker-event.ticker-foul { border-left-color: #fb923c; }
.ticker-event.ticker-yellow_card { border-left-color: #facc15; }
.ticker-event.ticker-red_card { border-left-color: #ef4444; font-weight: 600; }
.ticker-event.ticker-injury { border-left-color: #f87171; }
.ticker-event.ticker-sub { border-left-color: #34d399; }
.ticker-event.ticker-tactics { border-left-color: #60a5fa; }

.live-commentary-bar {
    width: 100%;
    margin-top: 12px;
    background: rgba(0,0,0,0.85);
    border: 1px solid var(--border-color);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    color: #34d399;
    text-align: center;
}

.live-match-sidebar {
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow-y: auto;
}

.live-tab-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.live-subtab-pane {
    display: none;
}

.live-subtab-pane.active {
    display: block;
}

.live-stat-bar-item {
    margin-bottom: 14px;
}

.stat-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}

.dual-bar {
    display: flex;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.dual-bar-left {
    background: var(--accent-primary);
}

.dual-bar-right {
    background: var(--accent-secondary);
}

.event-ticker-feed {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.ticker-event {
    background: rgba(0,0,0,0.25);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}

/* Trophy animation */
.trophy-anim {
    font-size: 72px;
    animation: bounce 1s infinite alternate;
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-12px); }
}

/* ==========================================================================
   Start Screen / Title Overlay
   ========================================================================== */
.start-screen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb), 0.15) 0%, transparent 60%),
        radial-gradient(circle at 80% 80%, rgba(34, 197, 94, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 20% 90%, rgba(245, 158, 11, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #090c11 0%, #07090d 100%);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.start-screen-container {
    max-width: 1080px;
    width: 100%;
    margin: auto;
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.start-hero-header {
    text-align: center;
    margin-bottom: 36px;
}

.start-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 10px;
}

.start-logo-icon {
    font-size: 46px;
    filter: drop-shadow(0 4px 12px rgba(var(--accent-rgb), 0.4));
    animation: bounce 2.5s infinite ease-in-out;
}

.start-logo-title {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0;
    color: #f8fafc;
    text-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

.start-pro-tag {
    background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
    padding: 3px 12px;
    border-radius: var(--radius-sm);
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
    letter-spacing: 1px;
}

.start-subtitle {
    color: var(--text-muted);
    font-size: 16px;
    margin: 0;
    letter-spacing: 0.3px;
}

.start-screen-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
}

.start-actions-card, .start-saveinfo-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 30px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.start-actions-card:hover, .start-saveinfo-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.start-card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 10px;
}

.start-menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.start-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    text-align: left;
    border-radius: var(--radius-lg);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.start-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.4);
}

.start-btn .btn-icon {
    font-size: 28px;
}

.start-btn .btn-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.start-btn .btn-main-text {
    font-size: 17px;
    font-weight: 700;
}

.start-btn .btn-sub-text {
    font-size: 12px;
    opacity: 0.82;
}

.start-btn-row {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.start-btn-half {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    border-radius: var(--radius-md);
}

.no-save-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 220px;
    text-align: center;
    color: var(--text-muted);
}

.no-save-placeholder .placeholder-icon {
    font-size: 52px;
    margin-bottom: 14px;
    opacity: 0.35;
}

.no-save-placeholder p {
    font-size: 15px;
    margin-bottom: 6px;
    color: #cbd5e1;
}

.no-save-placeholder .placeholder-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* Save Details Card */
.save-card-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.save-club-badge {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.save-club-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,255,255,0.3);
}

.save-club-name {
    font-size: 18px;
    font-weight: 700;
}

.save-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.save-meta-item {
    background: rgba(0,0,0,0.3);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.save-meta-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.save-meta-val {
    font-size: 15px;
    font-weight: 700;
    color: #f1f5f9;
}

.save-timestamp {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ==========================================================================
   Wizard Modal (Setup Assistent)
   ========================================================================== */
.wizard-modal-box {
    max-width: 1200px;
    height: 90vh;
    border-radius: var(--radius-xl);
    background: rgba(11, 15, 20, 0.96);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--border-color);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
}

.wizard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 30px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(11, 15, 20, 0.85);
}

.wizard-steps-indicator {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wizard-step-node {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.45;
    transition: opacity 0.25s ease;
}

.wizard-step-node.active {
    opacity: 1;
}

.wizard-step-node .step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.25s ease;
}

.wizard-step-node.active .step-num {
    background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.5);
}

.wizard-step-node .step-label {
    font-size: 14px;
    font-weight: 600;
}

.step-line {
    width: 40px;
    height: 2px;
    background: var(--border-color);
}

.wizard-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px 34px;
}

.wizard-card-center {
    max-width: 720px;
    margin: 20px auto;
}

.wizard-desc {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.wizard-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.league-selection-container {
    margin-top: 20px;
}

.league-option-card {
    /* --bg-dark gibt es nicht, die Karte war deshalb durchsichtig */
    background: var(--bg-elevated);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-xl);
    padding: 24px;
    display: flex;
    gap: 20px;
}

/* Ligaauswahl: alle Ligen der Spielwelt, nach Ländern gruppiert */
.league-pick-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.league-country-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.league-country-title .lc-flag {
    font-size: 18px;
}

.league-country-title .lc-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.7;
}

.league-pick-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.league-pick-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.league-pick-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.league-pick-card.selected {
    border-color: var(--accent-primary);
    background: rgba(59, 130, 246, 0.12);
}

.league-pick-card .lp-level {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.league-pick-card .lp-name {
    font-size: 15px;
    font-weight: 700;
}

.league-pick-card .lp-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.league-badge-big {
    font-size: 48px;
}

.league-info {
    flex: 1;
}

.league-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.league-sub {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}

.league-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.l-meta-item {
    background: rgba(255,255,255,0.03);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.l-meta-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.l-meta-val {
    font-size: 14px;
    font-weight: 600;
}

/* Club Select Layout (Step 3) */
.club-select-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 24px;
    height: 100%;
    min-height: 540px;
}

.club-select-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.club-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(16, 21, 28, 0.7);
    padding: 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.filter-controls-row {
    display: flex;
    gap: 10px;
}

.club-selection-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 460px;
    overflow-y: auto;
    padding-right: 8px;
}

.club-selection-list::-webkit-scrollbar {
    width: 6px;
}

.club-selection-list::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}

.club-list-item {
    background: rgba(16, 21, 28, 0.85);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.club-list-item:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(22, 28, 37, 0.95);
    transform: translateX(4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

.club-list-item.selected {
    border-color: #38bdf8;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18) 0%, rgba(16, 21, 28, 0.95) 100%);
    box-shadow: 0 0 0 1px #38bdf8, 0 8px 24px rgba(var(--accent-rgb), 0.25);
}

.club-item-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.club-color-badge {
    width: 16px;
    height: 42px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.club-item-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 3px;
    color: #f8fafc;
}

.club-item-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.club-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.club-item-ovr {
    font-size: 15px;
    font-weight: 800;
    background: rgba(var(--accent-rgb), 0.12);
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}

/* Kaderstärke in der Vereinsakte des Karrierestarts */
.cd-squad-rating {
    font-size: 17px;
    font-weight: 800;
    background: rgba(245, 158, 11, 0.12);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(245, 158, 11, 0.28);
}

/* Club Detail Panel */
.club-select-right {
    background: rgba(16, 21, 28, 0.9);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 26px;
    overflow-y: auto;
    max-height: 560px;
    box-shadow: var(--shadow-card);
}

.club-detail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    padding: 40px;
    font-size: 15px;
}

.club-detail-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

.cd-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cd-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.cd-name {
    font-size: 24px;
    font-weight: 800;
    color: #f8fafc;
}

.cd-city {
    font-size: 13px;
    color: var(--text-muted);
}

.cd-grid-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cd-box {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.cd-box-title {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cd-box-val {
    font-size: 17px;
    font-weight: 700;
    color: #f8fafc;
}

.cd-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 10px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cd-player-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cd-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.25);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.03);
}

.cd-player-row .cd-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.15);
    color: #38bdf8;
    font-weight: 600;
}

.cd-action-btn-wrap {
    margin-top: 16px;
}

.wizard-footer {
    padding: 18px 32px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(11, 15, 20, 0.9);
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 3500;
}

.toast-item {
    background: rgba(16, 21, 28, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-left: 5px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 14px 22px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    font-weight: 500;
    color: #f8fafc;
    animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-item.success { 
    border-left-color: #22c55e; 
    box-shadow: 0 12px 36px rgba(34, 197, 94, 0.25);
}
.toast-item.error { 
    border-left-color: #ef4444; 
    box-shadow: 0 12px 36px rgba(239, 68, 68, 0.25);
}
.toast-item.warning { 
    border-left-color: #f59e0b; 
    box-shadow: 0 12px 36px rgba(245, 158, 11, 0.25);
}

@keyframes slideInRight {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   Mobile Bottom Navigation & Drawer Styles
   ========================================================================== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(11, 15, 20, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-color);
    z-index: 2000;
    justify-content: space-around;
    align-items: center;
    padding: 0 4px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

.mobile-nav-item {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    flex: 1;
    min-height: 48px;
    transition: all 0.2s ease;
    position: relative;
    user-select: none;
}

.mobile-nav-item .nav-icon {
    font-size: 18px;
    line-height: 1;
}

.mobile-nav-item .nav-label {
    letter-spacing: 0.2px;
}

.mobile-nav-item:hover {
    color: var(--text-main);
}

.mobile-nav-item.active {
    color: var(--accent-primary);
}

.mobile-nav-item.active .nav-icon {
    transform: scale(1.1);
}

.badge-dot {
    position: absolute;
    top: 6px;
    right: 18px;
    width: 8px;
    height: 8px;
    background: var(--accent-danger);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--accent-danger);
}

/* Mobile Drawer Overlay ("Mehr") */
.mobile-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2600;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    animation: fadeIn 0.2s ease-out;
}

.mobile-drawer {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    border-radius: 24px 24px 0 0;
    padding: 20px 18px 34px 18px;
    box-shadow: var(--shadow-card);
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.mobile-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.mobile-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-drawer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.mobile-drawer-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 52px;
    transition: all 0.2s ease;
    text-align: left;
    position: relative;
}

.mobile-drawer-item:hover,
.mobile-drawer-item:active {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.mobile-drawer-item.active {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.drawer-icon {
    font-size: 20px;
}

.drawer-text {
    flex: 1;
}

/* ==========================================================================
   Responsive Breakpoints & Mobile Optimization
   ========================================================================== */

/* 1. Large Screens & Tablets Landscape (<= 1200px) */
@media (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-grid > .dash-card { grid-column: 1 / -1; }
    .dashboard-grid > .next-match-card,
    .dashboard-grid > .calendar-snapshot-card,
    .dashboard-grid > .table-snapshot-card,
    .dashboard-grid > .board-card,
    .dashboard-grid > .squad-status-card { grid-column: 1 / -1; }
    .tactics-layout { grid-template-columns: 1fr; }
    .inbox-layout { grid-template-columns: 1fr; }
    .live-match-body { grid-template-columns: 1fr; }
    .start-screen-grid { grid-template-columns: 1fr; }
    .club-select-layout { grid-template-columns: 1fr; }
    .wizard-form-grid { grid-template-columns: 1fr; }
}

/* 2. Tablets Portrait & Mobile Landscape (<= 900px) */
@media (max-width: 900px) {
    .main-wrapper { 
        display: block; 
    }
    .sidebar { 
        display: none !important; 
    }
    .mobile-bottom-nav { 
        display: flex; 
    }
    .content-area { 
        width: 100%; 
        padding: 14px; 
        padding-bottom: 84px; /* Freiraum für Bottom Navigation */
    }

    /* Header Anpassung */
    .app-header {
        flex-wrap: wrap;
        height: auto;
        padding: 10px 14px;
        gap: 10px;
    }
    .header-left {
        order: 1;
        flex: 1;
        min-width: 200px;
    }
    .header-center {
        order: 2;
        width: auto;
    }
    .header-right {
        order: 3;
        width: 100%;
        justify-content: space-between;
        margin-top: 4px;
        gap: 8px;
    }
    .btn-advance {
        flex: 1;
        min-height: 44px;
    }
    .finance-pill, .confidence-pill {
        min-height: 44px;
    }

    /* Tabellen Scrollbarkeit */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 14px;
    }
    .data-table {
        min-width: 600px;
    }

    /* Modals auf Tablets */
    .modal-box {
        max-width: 95vw;
        max-height: 90vh;
    }
    .modal-lg, .modal-fullscreen {
        max-width: 96vw;
    }
}

/* 3. Smartphones Standard (<= 640px) */
@media (max-width: 640px) {
    /* Touch Targets min. 44px */
    .btn, 
    .styled-input, 
    .styled-select, 
    .filter-chip, 
    .mobile-nav-item, 
    .mobile-drawer-item {
        min-height: 44px;
    }

    /* Header Compact */
    .app-header {
        padding: 8px 12px;
        gap: 8px;
    }
    .brand-title {
        font-size: 18px;
    }
    .club-badge-container {
        padding: 4px 10px;
    }
    .club-name {
        font-size: 13px;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .season-info-pill {
        font-size: 11px;
        padding: 4px 8px;
    }

    /* Startscreen */
    .start-screen-overlay {
        padding: 10px;
    }
    .start-screen-container {
        padding: 16px 12px;
        gap: 16px;
    }
    .start-hero-header .start-logo-title {
        font-size: 28px;
    }
    .start-actions-card, .start-saveinfo-card {
        padding: 16px 14px;
    }

    /* Setup Wizard Fullscreen Mobile */
    .wizard-modal-box {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
    }
    .wizard-header {
        padding: 12px 14px;
    }
    .wizard-body {
        padding: 12px;
        overflow-y: auto;
    }
    .wizard-footer {
        padding: 12px 14px;
        position: sticky;
        bottom: 0;
        background: rgba(11, 15, 20, 0.98);
        z-index: 20;
    }
    .wizard-steps-indicator {
        gap: 6px;
    }
    .wizard-step-node {
        padding: 6px 10px;
        font-size: 11px;
    }
    .filter-controls-row {
        flex-direction: column;
        gap: 8px;
    }
    .club-select-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .club-selection-list {
        max-height: 280px;
    }
    .cd-grid-meta {
        grid-template-columns: 1fr;
    }

    /* Dashboard Mobile */
    .dash-card {
        padding: 16px 14px;
    }
    .match-preview-content {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .preview-team {
        width: 100%;
    }
    .match-action-row {
        flex-direction: column;
        gap: 8px;
    }
    .match-action-row .btn {
        width: 100%;
    }
    .calendar-grid-week {
        grid-template-columns: repeat(2, 1fr);
    }
    .calendar-action-bar, .pane-actions {
        flex-direction: column;
        gap: 8px;
    }
    .calendar-action-bar .btn, .pane-actions .btn {
        width: 100%;
    }

    /* Taktik & Spielfeld */
    .soccer-pitch {
        width: 100%;
        min-height: 420px;
        max-height: 520px;
    }
    .pitch-node {
        min-width: 44px;
        min-height: 44px;
    }
    .tactics-sidebar {
        padding: 14px;
    }

    /* Live Match Simulation Mobile */
    .live-match-box {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .live-match-header {
        padding: 10px 14px;
        flex-direction: column;
        gap: 6px;
    }
    .lm-scoreboard {
        gap: 10px;
    }
    .lm-score-big {
        font-size: 26px;
    }
    .live-pitch-wrapper {
        padding: 6px;
    }
    #livePitchCanvas {
        border-radius: var(--radius-sm);
        border-width: 1px;
    }
    .live-match-controls {
        flex-wrap: wrap;
        gap: 6px;
    }
    .live-match-controls .btn {
        flex: 1;
        min-width: 80px;
    }

    /* Postfach Mobile */
    .inbox-layout {
        grid-template-columns: 1fr;
    }
    .inbox-filter-tags {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .filter-chip {
        white-space: nowrap;
    }
    .inbox-detail {
        min-height: 280px;
        padding: 16px 14px;
    }

    /* Modals Allgemein */
    .modal-box {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .modal-header, .modal-footer {
        padding: 12px 16px;
    }
    .modal-body {
        padding: 14px;
    }

    /* Toasts */
    .toast-container {
        bottom: 74px; /* Über Bottom Nav */
        right: 12px;
        left: 12px;
    }
    .toast-item {
        padding: 12px 14px;
        font-size: 13px;
    }
}

/* 4. Small Smartphones (<= 420px) */
@media (max-width: 420px) {
    .calendar-grid-week {
        grid-template-columns: 1fr;
    }
    .mobile-drawer-grid {
        grid-template-columns: 1fr;
    }
    .start-hero-header .start-logo-title {
        font-size: 24px;
    }
    .lm-score-big {
        font-size: 22px;
    }
    .brand-accent {
        display: inline;
    }
}

/* ============================================================
   Verhandlungen, Trainingsbericht & Positionsprofil
   ============================================================ */

.hint-box {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.negotiation-card {
    background: rgba(29, 37, 48, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid #475569;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

/* Wir sind am Zug: die Karte hebt sich deutlich ab */
.negotiation-card.our-turn {
    border-left-color: var(--accent-gold, #f59e0b);
    background: rgba(245, 158, 11, 0.07);
}

.negotiation-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.negotiation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.negotiation-log {
    font-size: 12px;
    font-style: italic;
    color: #cbd5e1;
    border-left: 2px solid rgba(148, 163, 184, 0.4);
    padding-left: 10px;
    margin-bottom: 10px;
}

.negotiation-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.negotiation-inputs > * { min-width: 0; }

.negotiation-inputs label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.negotiation-inputs input,
.negotiation-inputs select {
    width: 100%;
}

.negotiation-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Erlernte Nebenposition im Positionsprofil */
.position-map .pos-learned {
    border-style: dashed;
}

/* ============================================================
   Kabinenansprache, Pressekonferenz & Schreibtisch
   ============================================================ */

.team-talk-situation {
    font-size: 14px;
    color: #e2e8f0;
    background: rgba(var(--accent-rgb), 0.08);
    border-left: 3px solid #38bdf8;
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 14px;
}

.team-talk-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-talk-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(29, 37, 48, 0.7);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.team-talk-option:hover:not(:disabled) {
    border-color: var(--accent-gold, #f59e0b);
    background: rgba(245, 158, 11, 0.09);
    transform: translateX(2px);
}

.team-talk-option:disabled { opacity: 0.45; cursor: default; }

.tt-icon { font-size: 22px; line-height: 1.2; }
.tt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tt-line { font-size: 12px; font-style: italic; color: #cbd5e1; }
.tt-hint { font-size: 11px; color: var(--text-muted); }

.team-talk-result,
.press-result {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(16, 21, 28, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tt-delta { font-size: 12px; color: var(--text-muted); margin: 4px 0 8px; }

/* Taktische Vertrautheit */
.vertrautheit-leiste { margin: 4px 0 12px; font-size: 12px; }
.vertrautheit-leiste:empty { display: none; }
.vertrautheit-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.vertrautheit-balken { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.vertrautheit-balken span { display: block; height: 100%; border-radius: 3px; }
.vertrautheit-text { color: var(--text-muted); margin-top: 5px; line-height: 1.45; }

/* Taktikbesprechung */
.tt-plan { font-size: 12px; color: #cbd5e1; margin: -6px 0 12px; }
.mp-analyse {
    background: rgba(16, 21, 28, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 13px;
}
.mp-lage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.mp-analyst { font-size: 12px; margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-trend { margin: 0 0 8px; color: #cbd5e1; font-style: italic; }
.mp-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-spalten h5 { font-size: 12px; margin: 0 0 4px; }
.mp-spalten ul { margin: 0; padding-left: 16px; font-size: 12px; color: #cbd5e1; }
.mp-plus { color: #22c55e; }
.mp-minus { color: #ef4444; }
.mp-schwach {
    margin-top: 8px;
    padding: 6px 10px;
    border-left: 3px solid var(--accent-gold, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    border-radius: 0 6px 6px 0;
    font-size: 12px;
}
.mp-schluessel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; }
.mp-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
}
.mp-kopfzeile { display: flex; justify-content: space-between; align-items: baseline; }
.mp-kopfzeile h4 { margin: 0; }
.mp-zaehler { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mp-hinweis { font-size: 12px; color: var(--text-muted); margin: 4px 0 10px; }
.mp-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mp-karte {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(29, 37, 48, 0.7);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.mp-karte:hover:not(:disabled) { border-color: rgba(56, 189, 248, 0.6); }
.mp-karte.aktiv {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    box-shadow: inset 0 0 0 1px #38bdf8;
}
.mp-karte:disabled { opacity: 0.45; cursor: default; }
.mp-icon { font-size: 20px; line-height: 1.2; }
.mp-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp-beschreibung { font-size: 12px; color: #cbd5e1; }
.mp-empfehlung { font-size: 11px; color: #4ade80; }
.mp-grund { font-size: 11px; color: var(--text-muted); }
.mp-ziel { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; }
.mp-ziel select { flex: 1; }
.mp-aktionen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.tt-reaction {
    font-size: 12px;
    padding: 3px 0 3px 10px;
    border-left: 2px solid rgba(148, 163, 184, 0.4);
}
.tt-reaction.positive { border-left-color: #34d399; }
.tt-reaction.negative { border-left-color: #f87171; }

.press-question {
    font-size: 15px;
    font-style: italic;
    color: #e2e8f0;
    margin-bottom: 14px;
}

.press-answers { display: flex; flex-direction: column; gap: 8px; }

.press-answer {
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(29, 37, 48, 0.7);
    color: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.press-answer:hover:not(:disabled) {
    border-color: #38bdf8;
    background: rgba(var(--accent-rgb), 0.09);
}
.press-answer:disabled { opacity: 0.45; cursor: default; }

.press-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.press-player { font-size: 12px; color: #cbd5e1; margin-top: 6px; }
.press-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.press-journalist { display: flex; align-items: center; gap: 10px; }
.press-journalist > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.press-journalist small { font-size: 11px; color: var(--text-muted); }
.press-medium-icon {
    font-size: 20px;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}
.press-fortschritt { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.press-answer.gewaehlt { border-color: #38bdf8; opacity: 1; }
.press-bilanz { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; }

/* Schreibtisch: Was heute ansteht */
.attention-card { grid-column: span 4; min-width: 0; }

.attention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    margin-bottom: 6px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(29, 37, 48, 0.55);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.attention-item:hover {
    border-color: var(--accent-gold, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
}

.attention-icon { font-size: 18px; }

.attention-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.attention-text strong { font-size: 13px; }
.attention-text span { font-size: 11px; color: var(--text-muted); }

.attention-arrow { color: var(--text-muted); font-size: 18px; }

.attention-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 14px 4px;
    text-align: center;
}

/* ============================================================
   Filterleisten & Handy-Tauglichkeit der Tabellen
   ============================================================ */

/* Positionsfilter im Kader: Chips statt weißer Standardknöpfe */
.filter-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.btn.filter-btn {
    background: rgba(29, 37, 48, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

.btn.filter-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    color: #e2e8f0;
}

.btn.filter-btn.active {
    background: var(--accent-primary, #38bdf8);
    border-color: var(--accent-primary, #38bdf8);
    color: #04121f;
}

@media (max-width: 900px) {
    /* Überschrift und Filter untereinander statt nebeneinander */
    .pane-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 16px;
    }
    .pane-header h2 { font-size: 20px; }

    .pane-actions { width: 100%; }

    /* Filterchips wandern in eine wischbare Zeile */
    .filter-group {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .filter-group::-webkit-scrollbar { display: none; }
}

@media (max-width: 768px) {
    /*
     * Auf dem Telefon zeigen die großen Tabellen nur die Spalten, die man
     * unterwegs wirklich braucht. Alles Weitere steht in den Spielerdetails,
     * die ein Tippen auf die Zeile öffnet.
     *
     * Kader: Status, Name, Position, Qualität, Fitness
     */
    /* Kader: siehe "UI-Rundgang: Kader" - dort nach Spaltenklassen statt
       nach Position, die bei jeder neuen Spalte verrutschte. */

    /* Tabelle: Spieltag, Siege, Unentschieden, Niederlagen und Form ausblenden */
    #viewStandings .data-table th:nth-child(4),
    #viewStandings .data-table td:nth-child(4),
    #viewStandings .data-table th:nth-child(5),
    #viewStandings .data-table td:nth-child(5),
    #viewStandings .data-table th:nth-child(6),
    #viewStandings .data-table td:nth-child(6),
    #viewStandings .data-table th:nth-child(10),
    #viewStandings .data-table td:nth-child(10) {
        display: none;
    }

    /* Trainingsbericht: Tageslast und Entwicklung sind Feinheiten für den PC */
    #trainingReportBody tr td:nth-child(5),
    #pane-training .compact-table th:nth-child(5),
    #trainingReportBody tr td:nth-child(8),
    #pane-training .compact-table th:nth-child(8) {
        display: none;
    }

    /* Tabellen dürfen notfalls waagerecht gescrollt werden statt zu brechen */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table, .compact-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 8px 6px; }

    /* Ein Hinweis, dass hinter der Zeile mehr steckt */
    .data-table tbody tr.row-clickable td:first-child { position: relative; }
}

@media (max-width: 640px) {
    /* Kopfzeile kompakter: auf dem Telefon zählt jeder Pixel Höhe */
    .app-header { padding: 6px 10px; }
    .header-stats-group { gap: 6px; }
    .header-stat-box { padding: 4px 8px; font-size: 11px; }
    .header-advance-btn { padding: 8px 12px; font-size: 13px; }

    /* Verhandlungen und Ansprachen bleiben bedienbar */
    .negotiation-inputs { grid-template-columns: 1fr; }
    .team-talk-option { padding: 10px 12px; }
    .mp-karten, .mp-spalten { grid-template-columns: 1fr; }
    .mp-aktionen { flex-direction: column-reverse; }
    .mp-aktionen .btn { width: 100%; }
    .tt-icon { font-size: 19px; }
    .attention-card { grid-column: 1 / -1; }
}

.squad-role-hint { font-size: 11px; color: var(--text-muted); }
.squad-ability-hint { font-size: 10px; color: var(--text-muted); }

@media (max-width: 768px) {
    /*
     * Auf dem Telefon zählt jede Spalte. Zusatzangaben, die auch in den
     * Spielerdetails stehen, treten hier zurück, damit die fünf wichtigen
     * Spalten ohne Wischen nebeneinander passen.
     */
    .squad-role-hint,
    .squad-ability-hint { display: none; }

    #pane-squad .data-table .mini-bar { display: none; }

    #pane-squad .data-table td {
        padding: 8px 4px;
        white-space: nowrap;
    }
    /* Überschriften dürfen umbrechen - sonst diktiert "Aktuelle Qualität"
       die Spaltenbreite und die Tabelle passt nie auf den Bildschirm. */
    #pane-squad .data-table th {
        padding: 8px 4px;
        white-space: normal;
        line-height: 1.2;
        font-size: 10px;
    }

    #pane-squad .data-table td.sq-name {
        white-space: normal;
        line-height: 1.25;
    }
}

@media (max-width: 768px) {
    /*
     * Die allgemeine Mindestbreite von 600px erzwang auch dort Wischen, wo
     * die Tabelle längst auf den Bildschirm passt. Wo Spalten ausgeblendet
     * sind, darf sie sich wieder auf die Bildschirmbreite legen.
     */
    #pane-squad .data-table,
    #viewStandings .data-table,
    #pane-training .compact-table {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    /* Kader: kompaktere Statusmarke schafft den letzten Platz */
    #pane-squad .data-table td:first-child span {
        font-size: 10px;
        padding: 3px 7px;
    }
    #pane-squad .data-table .pos-tag { padding: 2px 4px; font-size: 10px; }

    /* Trainingsbericht: auch die Spielschärfe tritt zurück, die
       Einschätzung darf umbrechen statt die Tabelle zu sprengen */
    #trainingReportBody tr td:nth-child(6),
    #pane-training .compact-table th:nth-child(6) {
        display: none;
    }
    #pane-training .compact-table th,
    #pane-training .compact-table td {
        padding: 7px 4px;
        font-size: 11px;
    }
    #trainingReportBody tr td:last-child {
        white-space: normal;
        line-height: 1.25;
        min-width: 90px;
    }
    #pane-training .compact-table .mini-bar { display: none; }
}

@media (max-width: 768px) {
    /* Die Sternebewertung ist die breiteste Spalte. Kleiner gesetzt bleibt
       sie lesbar, gibt aber dem Namen den Platz zurück. */
    #pane-squad .data-table td.sq-name { min-width: 92px; }
}

@media (max-width: 640px) {
    /*
     * Die Kopfzeile belegte auf dem Telefon fast ein Drittel des Bildschirms,
     * weil Kontostand, Vorstandsbalken und Spieltagsknopf in zwei Reihen
     * umbrachen. Auf dem Handy zählt jede Zeile für das Spiel selbst.
     */
    .header-right {
        gap: 6px;
        flex-wrap: nowrap;
    }

    .finance-pill {
        padding: 4px 8px;
        gap: 4px;
    }
    .finance-pill .fin-val { font-size: 12px; white-space: nowrap; }
    .finance-pill .fin-sub { display: none; }   /* Transferbudget steht im Finanzreiter */

    .confidence-pill { padding: 4px 8px; gap: 5px; }
    .confidence-pill .conf-bar-wrap { width: 42px; }
    .confidence-pill .conf-val { font-size: 11px; }

    .btn-advance {
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
        min-height: 40px;
    }
    /* Der Pfeil trägt die Aussage, der lange Text darf weichen */
    .btn-advance .btn-arrow { font-size: 14px; }
}

@media (max-width: 420px) {
    .finance-pill .fin-icon,
    .confidence-pill .conf-icon { display: none; }
    /* Auf dem Handy nur die Kurzfassung - aber die echte. Vorher stand hier
       fest "Spieltag", auch wenn der Knopf zur Pressekonferenz sprang. */
    .btn-advance span:not(.btn-arrow) { display: none; }
    .btn-advance::after {
        content: attr(data-kurz);
        font-weight: 700;
    }
}

@media (max-width: 420px) {
    /* Auf sehr schmalen Geräten steht der Schwierigkeitsgrad über den
       rechten Rand hinaus - er steht ohnehin im Spielstand-Reiter. */
    .difficulty-tag,
    #headerDifficulty { display: none; }
}

/* Tagesbericht im Kalender: was der Verein an einem Tag erlebt hat */
.day-report-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.day-report-list li {
    font-size: 13px;
    line-height: 1.5;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: rgba(148, 163, 184, 0.08);
    border-left: 3px solid rgba(148, 163, 184, 0.35);
}

/* ==========================================================================
   Sternereihe nach dem Vorbild

   Fünf Sterne, jeder aus zwei Hälften. Jede Hälfte kennt vier Zustände:
   golden gefüllt (gesicherte Stärke), blass (mögliche Stärke, noch nicht
   gescoutet), umrandet (Entwicklungspotenzial) und leer.
   ========================================================================== */
.ability-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

.ability-star {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
}

.ability-stars-sm .ability-star {
    width: 11px;
    height: 11px;
}

.ability-star-half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    /* Sternform als Maske: so lässt sich jede Hälfte einzeln einfärben */
    -webkit-mask-image: var(--star-shape);
    mask-image: var(--star-shape);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
}

.ability-star-left {
    left: 0;
    -webkit-mask-position: left center;
    mask-position: left center;
}

.ability-star-right {
    right: 0;
    -webkit-mask-position: right center;
    mask-position: right center;
}

:root {
    --star-shape: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.6l3.1 6.9 7.4.8-5.5 5 1.5 7.3-6.5-3.7-6.5 3.7 1.5-7.3-5.5-5 7.4-.8z'/></svg>");
}

/* Gesicherte heutige Stärke */
.ability-star-half.star-solid {
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}

/* Könnte er heute schon sein - das Scoutwissen reicht nicht aus */
.ability-star-half.star-maybe {
    background: #f59e0b;
    opacity: 0.42;
}

/* Dahin kann er sich noch entwickeln */
.ability-star-half.star-growth {
    background: repeating-linear-gradient(
        135deg,
        rgba(56, 189, 248, 0.85) 0 2px,
        rgba(56, 189, 248, 0.18) 2px 4px
    );
}

/* Außerhalb seiner Möglichkeiten */
.ability-star-half.star-none {
    background: rgba(148, 163, 184, 0.22);
}

/* Legende, damit die vier Zustände nicht erraten werden müssen */
.star-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
}

.star-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.star-legend i {
    width: 11px;
    height: 11px;
    display: inline-block;
    -webkit-mask-image: var(--star-shape);
    mask-image: var(--star-shape);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.star-legend i.star-solid { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.star-legend i.star-maybe { background: #f59e0b; opacity: 0.42; }
.star-legend i.star-growth {
    background: repeating-linear-gradient(135deg, rgba(56,189,248,0.85) 0 2px, rgba(56,189,248,0.18) 2px 4px);
}
.star-legend i.star-none { background: rgba(148, 163, 184, 0.22); }

/* Mannschaftsstärke: dieselbe Sprache, nur größer */
.team-strength-stars .ability-star {
    width: 19px;
    height: 19px;
}

/* Mannschaftsvergleich: eigene Elf links, Gegner rechts */
.team-compare-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 13px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.team-compare-head span:first-child { text-align: right; }
.team-compare-head span:last-child { text-align: left; }
.team-compare-head .text-muted {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.team-compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
}

.team-compare-side { display: flex; }
.team-compare-row .team-compare-side:first-child { justify-content: flex-end; }
.team-compare-row .team-compare-side:last-child { justify-content: flex-start; }

.team-compare-label {
    min-width: 92px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.team-compare-total {
    padding: 9px 0;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.team-compare-total .team-compare-label {
    color: var(--text-primary);
    font-size: 12px;
}

@media (max-width: 600px) {
    .team-compare-label { min-width: 62px; font-size: 10px; }
}

/* Derbys im Spielplan hervorheben */
.fixture-card.derby-match {
    border-color: rgba(239, 68, 68, 0.45);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), transparent 60%);
}

.fixture-derby {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #f87171;
    margin-bottom: 4px;
}

.fixture-crowd {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ---------------------------------------------------------- Vorbereitung
 * Der Reiter vor dem ersten Spieltag: Trainerstab, Sponsoren, Testspiele.
 * Jede Zeile stellt eine Entscheidung dar - links steht, worum es geht,
 * rechts die Handlung. */
.card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.muted-note {
    color: var(--text-muted, #94a3b8);
    font-size: 12.5px;
    line-height: 1.55;
}

.pre-area {
    border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.pre-area-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    margin-bottom: 4px;
}

.pre-area-head > span:first-child {
    font-weight: 700;
}

.pre-candidate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid var(--border, rgba(148, 163, 184, 0.16));
    font-size: 13px;
    flex-wrap: wrap;
}

.pre-candidate:first-child {
    border-top: none;
}

.pre-candidate button {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Kalender: Das naechste Spiel und Tage, die etwas aussagen
   --------------------------------------------------------------- */

.next-match-card {
    border-left: 3px solid var(--accent-primary);
}

.next-match-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.next-match-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.next-match-when {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
}

.next-match-body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}

.next-match-vs {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-muted);
}

.nm-club {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.next-match-body > div:last-child .nm-club {
    align-items: flex-end;
    text-align: right;
}

.nm-name {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.nm-club.nm-own .nm-name {
    color: var(--accent-primary);
}

.nm-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.next-match-meta {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
}

/* Kurze Hinweise auf einer Tageskarte */
.cal-marks {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.cal-mark {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Ein Spieltag hebt sich ab - man soll die Woche auf einen Blick lesen */
.calendar-day-card.cal-type-matchday {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.06);
}

.calendar-day-card.cal-type-friendly {
    border-color: rgba(168, 162, 158, 0.4);
}

.calendar-day-card.cal-type-media {
    border-color: rgba(245, 158, 11, 0.35);
}

/* Terminliste: Titel und Zeile darunter */
.cal-full-item .cal-full-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    padding: 0 12px;
}

.cal-full-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.cal-full-item.wichtig {
    background: rgba(var(--accent-rgb), 0.05);
}

.cal-full-item.wichtig .cal-full-title {
    font-weight: 700;
}

.calendar-full-list {
    max-height: 520px;
}

/* ------------------------------------------------------------------
   Pokal- und Europapokalabende im Kalender
   ------------------------------------------------------------------ */

.calendar-day-card.cal-type-cup,
.calendar-day-card.cal-type-euro {
    border-color: rgba(250, 204, 21, 0.45);
    background: linear-gradient(180deg, rgba(250, 204, 21, 0.10), transparent 70%);
}

.calendar-day-card.cal-type-euro {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), transparent 70%);
}

/* ------------------------------------------------------------------
   Entlassung und Karriereende
   ------------------------------------------------------------------ */

.dismissal-head {
    text-align: center;
    padding-bottom: 8px;
}

.dismissal-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 6px;
}

.dismissal-head h1 {
    font-size: 22px;
    margin: 0 0 6px;
}

.dismiss-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.dismiss-stats > div {
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 8px 4px;
}

.dismiss-stats span {
    display: block;
    font-size: 18px;
    font-weight: 800;
}

.dismiss-stats small {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dismiss-offers-title {
    margin: 16px 0 8px;
    font-size: 14px;
}

.dismiss-offer {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 11px 13px;
    margin-bottom: 8px;
    cursor: pointer;
    color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dismiss-offer:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    background: rgba(var(--accent-rgb), 0.08);
}

.dismiss-offer-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.dismiss-offer-league {
    font-size: 11px;
    color: var(--text-muted);
}

.dismiss-offer-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.career-station {
    border-left: 2px solid rgba(var(--accent-rgb), 0.5);
    padding: 4px 0 4px 10px;
    margin-bottom: 8px;
}

.career-station-club {
    font-weight: 700;
}

.career-station-time,
.career-title-row {
    font-size: 11px;
    color: var(--text-muted);
}

.career-title-row {
    padding: 2px 0;
}

@media (max-width: 560px) {
    .dismiss-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ------------------------------------------------------------------
   Wettbewerbs-Themen: jeder Pokal hat sein eigenes Gesicht
   ------------------------------------------------------------------ */

[data-comp] {
    --comp-accent: #38bdf8;
    --comp-accent-2: #7dd3fc;
    --comp-flaeche: rgba(16, 21, 28, 0.92);
}

.live-comp-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--comp-accent-2);
    background: linear-gradient(90deg, transparent, var(--comp-flaeche) 22%, var(--comp-flaeche) 78%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--comp-accent) 45%, transparent);
}

.live-comp-icon {
    font-size: 15px;
    letter-spacing: 0;
}

.live-comp-round {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    letter-spacing: 0.6px;
}

/* Die Anzeigetafel nimmt die Farbe des Wettbewerbs auf */
#modalLiveMatch[data-comp] .live-match-header {
    background: linear-gradient(180deg, var(--comp-flaeche), rgba(9, 12, 20, 0.96));
    border-bottom: 2px solid var(--comp-accent);
}

#modalLiveMatch[data-comp] .match-time-badge {
    border-color: color-mix(in srgb, var(--comp-accent) 60%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--comp-accent) 28%, transparent);
}

#modalLiveMatch[data-comp] .time-label {
    color: var(--comp-accent);
}

/* Champions-League-Nächte bekommen ihr Sternenlicht */
#modalLiveMatch[data-comp="ucl"] .live-comp-banner {
    text-shadow: 0 0 12px color-mix(in srgb, var(--comp-accent) 70%, transparent);
}

/* Der Wettbewerbsreiter zieht mit */
#pane-fixtures[data-comp] .pane-header h2 {
    border-left: 4px solid var(--comp-accent);
    padding-left: 10px;
}

#pane-fixtures[data-comp] .fixture-card.user-match {
    border-color: var(--comp-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--comp-accent) 40%, transparent);
}

#pane-fixtures[data-comp] .row-user-club {
    box-shadow: inset 3px 0 0 var(--comp-accent);
}

/* Ältere Browser ohne color-mix bekommen wenigstens die Grundfarbe */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .live-comp-banner {
        border-bottom-color: var(--comp-accent);
    }
    #modalLiveMatch[data-comp] .match-time-badge {
        border-color: var(--comp-accent);
    }
}

/* ------------------------------------------------------------------
   Tagesleiste und "Als Nächstes" - der Weg durch die Zeit
   ------------------------------------------------------------------ */

.day-rail {
    display: flex;
    gap: 5px;
    padding: 4px 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.day-rail::-webkit-scrollbar { display: none; }

.rail-day {
    flex: 1 1 0;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid transparent;
    font-size: 10px;
    color: var(--text-muted);
    transition: background 0.15s ease;
}

.rail-dow {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}

.rail-icon { font-size: 15px; line-height: 1.1; }
.rail-num { font-weight: 600; }

.rail-day.is-today {
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.55);
    color: #e2e8f0;
}

.rail-day.is-target {
    border-color: rgba(250, 204, 21, 0.7);
    background: rgba(250, 204, 21, 0.12);
    color: #fde68a;
}

.rail-day.rail-matchday .rail-icon,
.rail-day.rail-cup .rail-icon,
.rail-day.rail-euro .rail-icon,
.rail-day.rail-friendly .rail-icon {
    filter: none;
}

.rail-day.rail-training,
.rail-day.rail-recovery,
.rail-day.rail-tactics,
.rail-day.rail-opponent_analysis {
    opacity: 0.72;
}

/* Der Countdown zwischen den Wappen */
.vs-countdown {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--comp-accent, #38bdf8);
    margin-bottom: 2px;
}

/* Die Zeile, die erklärt, warum heute nicht gespielt wird */
.next-note {
    display: none;
    padding: 11px 13px;
    margin-top: 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    font-size: 13px;
    line-height: 1.5;
}

.next-note strong { display: block; }

.next-note span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 560px) {
    .rail-day { min-width: 34px; padding: 5px 1px; }
    .rail-icon { font-size: 13px; }
}

/* ============================================================
   Infrastruktur - Anlagen mit Stufe, Zustand und Baustelle
   ============================================================ */

.facility-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.fac-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.fac-card.is-building {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.06);
}

.fac-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fac-head h4 {
    font-size: 14px;
    margin: 0;
}

.fac-stufe {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}

.fac-stufe strong { color: var(--text-color, #fff); }

.fac-pips {
    display: flex;
    gap: 3px;
}

.fac-pip {
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.10);
}

.fac-pip.on { background: #3b82f6; }
.fac-pip.part { background: linear-gradient(90deg, #3b82f6 50%, rgba(255,255,255,0.10) 50%); }

.fac-bar {
    height: 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.fac-bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.fac-zustand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    gap: 8px;
}

.fac-note {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
    margin: 0;
}

.fac-profil {
    font-size: 12px;
    line-height: 1.45;
    padding: 7px 9px;
    border-radius: 7px;
    background: rgba(59, 130, 246, 0.10);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.fac-bau {
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 9px;
    border-radius: 7px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.30);
}

.fac-bau-fortschritt {
    height: 5px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.30);
    margin-top: 6px;
    overflow: hidden;
}

.fac-bau-fortschritt > span {
    display: block;
    height: 100%;
    background: #f59e0b;
}

.fac-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}

.fac-actions .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    line-height: 1.25;
    padding: 7px 6px;
}

.fac-actions .btn small {
    font-size: 10px;
    opacity: 0.78;
    font-weight: 400;
}

.fac-actions .btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .facility-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Seitenlinie: Wechsel, Taktik und Co-Trainer im Livespiel.
   Das Fenster liegt über dem Livespiel und hält es an. Auf dem Handy
   füllt es den Bildschirm, damit jede Zeile mit dem Daumen erreichbar ist.
   ------------------------------------------------------------------ */

.coaching-overlay {
    z-index: 2600;
    background: rgba(5, 7, 10, 0.82);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.coaching-box {
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: zoomIn 0.18s ease-out;
}

.coaching-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: #090d16;
}

.coaching-title { font-size: 17px; font-weight: 800; }
.coaching-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.coaching-paused {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-gold);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.coaching-alert {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    background: rgba(var(--accent-rgb), 0.12);
    border-bottom: 1px solid var(--border-color);
}
.coaching-alert-verletzung { background: rgba(239, 68, 68, 0.16); }
.coaching-alert-platzverweis { background: rgba(127, 29, 29, 0.35); }
.coaching-alert-halbzeit { background: rgba(245, 158, 11, 0.14); }

.coaching-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--border-color);
}

.coaching-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 6px;
    min-height: 46px;
    cursor: pointer;
}
.coaching-tab.active {
    color: var(--text-main);
    border-bottom-color: var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.06);
}

.coach-tab-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-danger);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
}
.coach-tab-badge:empty { display: none; }

.coaching-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 16px;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.coaching-pane { display: none; }
.coaching-pane.active { display: block; }

.coaching-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    background: #090d16;
}
.coaching-foot-info { font-size: 12px; color: var(--text-muted); }
.coaching-foot-actions { display: flex; gap: 8px; }

.coach-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--text-soft);
}
.coach-hint { font-size: 13px; color: var(--accent-primary); margin: 8px 0 4px; }
.coach-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin: 14px 0 6px; }
.coach-muted { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.coach-empty { font-size: 13px; color: var(--text-muted); padding: 8px 0; }

.coach-list { display: flex; flex-direction: column; gap: 4px; }

.coach-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
    font-size: 14px;
}
.coach-row.tappable { cursor: pointer; }
.coach-row.tappable:hover,
.coach-row.tappable:focus-visible { border-color: var(--border-strong); outline: none; }
.coach-row.selected { border-color: var(--accent-gold); background: rgba(245, 158, 11, 0.12); }
.coach-row.off { opacity: 0.5; }
.coach-row.dim { opacity: 0.6; }

.coach-pos {
    flex: 0 0 38px;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    color: var(--text-soft);
    background: rgba(148, 163, 184, 0.14);
    border-radius: 6px;
    padding: 3px 0;
}
.coach-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-stars { color: var(--accent-gold); font-size: 12px; }
.coach-eignung { font-size: 12px; font-weight: 700; white-space: nowrap; }

.coach-fit {
    flex: 0 0 54px;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.coach-fit-bar { display: block; height: 100%; }
.coach-fit-num { flex: 0 0 34px; font-size: 12px; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

.coach-tag {
    font-size: 12px;
    color: var(--accent-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40%;
}
.coach-tag-rot { color: #fca5a5; }

.coach-x {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-soft);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    cursor: pointer;
}

.coach-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 12px 0 6px; }
.coach-chips, .coach-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.coach-quick { margin: 10px 0 4px; }

.coach-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-light);
    color: var(--text-soft);
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    min-height: 38px;
    cursor: pointer;
}
.coach-chip.active { background: var(--accent-primary); border-color: var(--accent-primary); color: #04121f; }
.coach-quick-btn { border-style: dashed; }

.coach-tips { display: flex; flex-direction: column; gap: 6px; }
.coach-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    font-size: 14px;
}
.coach-tip.wichtig { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); }
.coach-tip-icon { flex: 0 0 auto; font-size: 18px; }
.coach-tip-text { flex: 1; }

.coach-switch {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 14px;
}
.coach-switch input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 20px; accent-color: var(--accent-primary); }

/* Knopf der Seitenlinie in der Steuerleiste und die Leiste der angemeldeten Wechsel */
.lm-coach-btn { position: relative; }
.lm-coach-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-danger);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
}

.lm-pending-strip {
    width: 100%;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #bbf7d0;
    background: rgba(6, 78, 59, 0.55);
    border-top: 1px solid rgba(34, 197, 94, 0.35);
    text-align: center;
}
.lm-pending-note { color: var(--text-muted); font-weight: 500; }

.live-controls-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Handy: Die Anzeigetafel wird kompakt, die Steuerung eine Zeile aus
   Symbolen, und das Seitenlinienfenster füllt den Bildschirm. Vorher
   zielten die Handy-Regeln auf Klassen, die es im Livespiel gar nicht gibt
   (.lm-scoreboard, .live-match-controls) - die Vereinsnamen liefen aus dem
   Bild, und die Knöpfe stapelten sich über drei Zeilen. */
@media (max-width: 640px) {
    #modalLiveMatch .modal-box {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }
    #modalLiveMatch .live-match-header {
        flex-direction: column;
        gap: 6px;
        padding: 8px 10px;
    }
    #modalLiveMatch .live-scoreboard {
        width: 100%;
        gap: 6px;
        justify-content: space-between;
    }
    #modalLiveMatch .team-score {
        flex: 1;
        min-width: 0;
        gap: 6px;
    }
    #modalLiveMatch .team-score.away { justify-content: flex-end; }
    #modalLiveMatch .team-name {
        font-size: 13px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #modalLiveMatch .score-digit { font-size: 24px; padding: 0 8px; }
    #modalLiveMatch .match-time-badge { padding: 3px 8px; font-size: 12px; gap: 4px; }
    #modalLiveMatch .live-clock { margin-left: 2px; font-size: 11px; }
    #modalLiveMatch .time-label { display: none; }
    #modalLiveMatch .live-controls-bar {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    #modalLiveMatch .live-controls-bar .btn { min-height: 40px; padding: 6px 10px; }
    #modalLiveMatch .speed-selector { display: flex; gap: 4px; }
    #modalLiveMatch .speed-btn { padding: 6px 8px; font-size: 12px; }
    #modalLiveMatch .lm-btn-text { display: none; }
    #modalLiveMatch .lm-coach-btn .lm-btn-text { display: inline; }
    #modalLiveMatch .live-comp-banner { padding: 4px 8px; font-size: 11px; }
    #modalLiveMatch .live-pitch-wrapper { padding: 6px; }
    #modalLiveMatch .live-commentary-bar { margin-top: 6px; font-size: 13px; padding: 8px 10px; }
    #modalLiveMatch .live-match-sidebar { padding: 10px; }

    .coaching-overlay { padding: 0; align-items: stretch; }
    .coaching-box {
        max-width: none;
        max-height: none;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border: none;
    }
    .coaching-head { padding: 12px 14px; }
    .coaching-body { padding: 10px 12px 14px; }
    .coaching-foot { flex-direction: column; align-items: stretch; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
    .coaching-foot-actions { display: grid; grid-template-columns: 1fr 2fr; }
    .coaching-foot-actions .btn { min-height: 46px; }
    .coach-fit { flex-basis: 40px; }
}

@media (max-width: 380px) {
    #modalLiveMatch .speed-btn { padding: 6px 6px; font-size: 11px; }
    #modalLiveMatch .lm-coach-btn .lm-btn-text { display: none; }
}

/* Solange die Vorbereitung läuft, steht sie hervorgehoben oben im Handymenü */
.mobile-drawer-item.drawer-item-highlight {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.1);
}
.mobile-drawer-item { position: relative; }

/* Tempoknöpfe: am Handy die Abspielgeschwindigkeit statt des Wortes */
.lm-speed-kurz { display: none; }
@media (max-width: 640px) {
    #modalLiveMatch .lm-speed-lang { display: none; }
    #modalLiveMatch .lm-speed-kurz { display: inline; }
    #modalLiveMatch .speed-btn { min-width: 40px; }
}

/* Tablet und Desktop: Wettbewerb über die volle Breite, darunter Anzeigetafel
   und Steuerung - jede in sich ohne Umbruch. Vorher teilten sich drei Blöcke
   eine Zeile: Die Vereinsnamen brachen in zwei Zeilen, und die Knöpfe
   stapelten sich auf dem Tablet senkrecht übereinander. */
@media (min-width: 641px) {
    #modalLiveMatch .live-match-header {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 28px;
        row-gap: 8px;
        padding: 10px 20px 12px;
    }
    #modalLiveMatch .live-comp-banner { flex: 1 1 100%; }
    #modalLiveMatch .live-scoreboard { flex: 0 1 auto; min-width: 0; }
    #modalLiveMatch .team-name {
        white-space: nowrap;
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #modalLiveMatch .live-controls-bar { flex-wrap: nowrap; }
    #modalLiveMatch .lm-pending-strip { flex: 1 1 100%; border-radius: var(--radius-sm); }
}
@media (max-width: 640px) {
    #modalLiveMatch .lm-pending-strip { margin: 0 -10px -8px; width: calc(100% + 20px); }
}

/* ==========================================================================
   Match-Center im Livespiel: Vereinsfarben, Zeitleiste, Duell-Statistik,
   Druckphasen, Aufstellungen. Die Tafel war vorher einfarbig, die Statistik
   eine Zahlenliste, und im Ticker war nicht zu erkennen, wen ein Ereignis
   betraf. --lm-home und --lm-away setzt das Livespiel aus den Trikots.
   ========================================================================== */
#modalLiveMatch {
    --lm-home: #38bdf8;
    --lm-away: #f59e0b;
}

/* Farbchip im Trikotschnitt, Zweitfarbe als Mittelstreifen */
.lm-kit {
    flex: none;
    display: inline-block;
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.95)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
.lm-kit::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--kit, #64748b) 0 41%, var(--kit-2, #ffffff) 41% 59%, var(--kit, #64748b) 59%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.2 2.5 3 5.2 1.3 10l3.6 1.5 1.3-2.2V21.5h11.6V9.3l1.3 2.2 3.6-1.5L21 5.2l-5.2-2.7c-.6 1.6-2 2.5-3.8 2.5S8.8 4.1 8.2 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.2 2.5 3 5.2 1.3 10l3.6 1.5 1.3-2.2V21.5h11.6V9.3l1.3 2.2 3.6-1.5L21 5.2l-5.2-2.7c-.6 1.6-2 2.5-3.8 2.5S8.8 4.1 8.2 2.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.lm-kit.klein { width: 16px; height: 16px; }

/* ---- Anzeigetafel ---- */
#modalLiveMatch .live-scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}
#modalLiveMatch .team-score { display: flex; align-items: center; gap: 12px; min-width: 0; }
#modalLiveMatch .team-score.home { justify-content: flex-end; }
#modalLiveMatch .team-score.away { justify-content: flex-start; }
#modalLiveMatch .lm-team-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
#modalLiveMatch .team-score.home .lm-team-block { align-items: flex-end; text-align: right; }
#modalLiveMatch .team-score.away .lm-team-block { align-items: flex-start; text-align: left; }
#modalLiveMatch .team-name { font-size: 18px; font-weight: 800; letter-spacing: 0.1px; color: var(--text-main); }
#modalLiveMatch .lm-scorers {
    display: block;
    max-width: 280px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#modalLiveMatch .lm-scorers:empty { display: none; }
#modalLiveMatch .lm-scorer + .lm-scorer::before { content: " · "; color: var(--text-dim); }
#modalLiveMatch .lm-scorer.rot { color: #fca5a5; }
.lm-card {
    display: inline-block;
    width: 8px;
    height: 11px;
    border-radius: 2px;
    margin-right: 3px;
    vertical-align: -1px;
    background: #facc15;
}
.lm-card.rot { background: #ef4444; }
.lm-card.gelbrot { background: linear-gradient(135deg, #facc15 0 50%, #ef4444 50%); }

#modalLiveMatch .score-digit {
    min-width: 50px;
    text-align: center;
    font-size: 36px;
    line-height: 1.15;
    color: #f8fafc;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 2px 10px;
    font-variant-numeric: tabular-nums;
}
#modalLiveMatch .team-score.home .score-digit { box-shadow: inset 0 -3px 0 var(--lm-home); }
#modalLiveMatch .team-score.away .score-digit { box-shadow: inset 0 -3px 0 var(--lm-away); }

#modalLiveMatch .match-time-badge {
    flex-direction: column;
    gap: 1px;
    min-width: 84px;
    padding: 5px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    animation: none;
}
#modalLiveMatch .live-clock {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.5px;
}
#modalLiveMatch .time-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fca5a5;
}
#modalLiveMatch .time-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
#modalLiveMatch .match-time-badge[data-phase="live"] .time-label { color: #f87171; }
#modalLiveMatch .match-time-badge[data-phase="live"] .time-label::before { animation: lmPuls 1.4s ease-in-out infinite; }
#modalLiveMatch .match-time-badge[data-phase="pause"] .time-label,
#modalLiveMatch .match-time-badge[data-phase="halbzeit"] .time-label { color: #fbbf24; }
#modalLiveMatch .match-time-badge[data-phase="abpfiff"] .time-label { color: var(--text-muted); }
@keyframes lmPuls {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.75); }
}

/* ---- Steuerung ---- */
#modalLiveMatch .live-controls-bar .btn:not(.btn-primary) {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-soft);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#modalLiveMatch .live-controls-bar .btn:not(.btn-primary):hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}
#modalLiveMatch .live-controls-bar .btn {
    border-radius: 999px;
    min-height: 36px;
    padding: 6px 14px;
    font-size: 13px;
    gap: 6px;
}
.lm-ico { width: 13px; height: 13px; fill: currentColor; flex: none; }
#modalLiveMatch .live-controls-bar .lm-pause-btn.is-paused {
    background: #22c55e;
    border-color: transparent;
    color: #052e16;
}
#modalLiveMatch .speed-selector {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
#modalLiveMatch .live-controls-bar .speed-selector .speed-btn {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
    min-height: 30px;
    padding: 4px 12px;
}
#modalLiveMatch .live-controls-bar .speed-selector .speed-btn.active,
#modalLiveMatch .live-controls-bar .speed-selector .speed-btn.active:hover {
    background: #f8fafc;
    color: #0b1220;
}

/* ---- Zeitleiste 0'-90' ---- */
.lm-timeline {
    position: relative;
    height: 34px;
    min-width: 0;
}
.lm-tl-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
}
.lm-tl-fill {
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.25), rgba(248, 250, 252, 0.75));
    transition: width 0.8s linear;
}
.lm-tl-ht {
    position: absolute;
    left: 50%;
    top: -5px;
    bottom: -5px;
    width: 1px;
    background: rgba(255, 255, 255, 0.35);
}
.lm-tl-marks { position: absolute; inset: 0; pointer-events: none; }
.lm-tl-m { position: absolute; transform: translateX(-50%); display: block; }
.lm-tl-m.home { bottom: calc(50% + 5px); }
.lm-tl-m.away { top: calc(50% + 5px); }
.lm-tl-m.tor {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--lm-home), 0 0 6px rgba(0, 0, 0, 0.6);
}
.lm-tl-m.tor.away { box-shadow: 0 0 0 2px var(--lm-away), 0 0 6px rgba(0, 0, 0, 0.6); }
.lm-tl-m.karte { width: 6px; height: 9px; border-radius: 1px; background: #facc15; }
.lm-tl-m.karte.rot { background: #ef4444; }
.lm-tl-m.karte.gelbrot { background: linear-gradient(135deg, #facc15 0 50%, #ef4444 50%); }
.lm-tl-m.wechsel {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid #34d399;
}
.lm-tl-m.wechsel.away { border-bottom: none; border-top: 7px solid #34d399; }
.lm-tl-m.verletzt {
    width: 8px;
    height: 8px;
    background: #f87171;
    clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
}

/* ---- Kommentar unter dem Feld ---- */
#modalLiveMatch .live-commentary-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    color: var(--text-main);
    background: rgba(5, 7, 10, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 600;
}
.lm-min {
    flex: none;
    min-width: 32px;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #0b1220;
    background: rgba(248, 250, 252, 0.88);
}
.lm-zeile { min-width: 0; }

/* ---- Seitenleiste: Reiter als Segmentschalter ---- */
#modalLiveMatch .lm-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 3px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
#modalLiveMatch .lm-seg .live-subtab {
    padding: 8px 6px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
#modalLiveMatch .lm-seg .live-subtab:hover { color: var(--text-main); }
#modalLiveMatch .lm-seg .live-subtab.active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* ---- Duell-Statistik ---- */
.lm-stats-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-main);
}
.lm-stats-team {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.lm-stats-team::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--lm-home);
}
.lm-stats-team.away { flex-direction: row-reverse; }
.lm-stats-team.away::before { background: var(--lm-away); }
.lm-stat { margin-bottom: 11px; }
.lm-stat-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.lm-stat-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: center; }
.lm-stat-val {
    min-width: 36px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}
.lm-stat-val.away { text-align: right; }
.lm-stat-val.lead { color: #ffffff; font-weight: 800; }
.lm-stat-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.lm-stat-half {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.07);
}
.lm-stat-half.home { justify-content: flex-end; }
.lm-stat-half i { display: block; height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.lm-stat-half.home i { background: var(--lm-home); }
.lm-stat-half.away i { background: var(--lm-away); }

/* ---- Druckphasen ---- */
.lm-momentum-block {
    margin-top: 16px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.lm-block-title { font-size: 12px; font-weight: 800; color: var(--text-main); margin-bottom: 8px; }
.lm-block-sub { font-weight: 500; color: var(--text-dim); margin-left: 4px; }
.lm-momentum {
    display: flex;
    gap: 2px;
    height: 84px;
    background:
        linear-gradient(to right, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.25) calc(50% - 0.5px), rgba(255, 255, 255, 0.25) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.18) calc(50% - 0.5px), rgba(255, 255, 255, 0.18) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.lm-mom-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lm-mom-up, .lm-mom-down { flex: 1; display: flex; }
.lm-mom-up { align-items: flex-end; padding-bottom: 1px; }
.lm-mom-down { align-items: flex-start; padding-top: 1px; }
.lm-mom-up i, .lm-mom-down i { display: block; width: 100%; transition: height 0.5s ease; }
.lm-mom-up i { background: var(--lm-home); border-radius: 2px 2px 0 0; }
.lm-mom-down i { background: var(--lm-away); border-radius: 0 0 2px 2px; }
.lm-mom-col.offen { opacity: 0.2; }
.lm-mom-col.jetzt i { opacity: 0.75; }
.lm-momentum-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
}

/* ---- Ticker ---- */
#modalLiveMatch .event-ticker-feed { max-height: none; gap: 6px; }
#modalLiveMatch .ticker-event {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border-left: 3px solid rgba(148, 163, 184, 0.4);
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.4;
}
#modalLiveMatch .ticker-event .lm-min { margin-top: 1px; }
#modalLiveMatch .ticker-event.ticker-home { border-left-color: var(--lm-home); }
#modalLiveMatch .ticker-event.ticker-away { border-left-color: var(--lm-away); }
#modalLiveMatch .ticker-event.ticker-goal { background: rgba(34, 197, 94, 0.14); color: #ffffff; font-weight: 700; }
#modalLiveMatch .ticker-event.ticker-goal .lm-min { background: #22c55e; color: #052e16; }
#modalLiveMatch .ticker-event.ticker-red_card { background: rgba(239, 68, 68, 0.12); }
#modalLiveMatch .ticker-event.ticker-yellow_card .lm-min { background: #facc15; }
#modalLiveMatch .ticker-event.ticker-red_card .lm-min { background: #ef4444; color: #ffffff; }

/* ---- Aufstellungen ---- */
.lm-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lm-lu-team { min-width: 0; }
.lm-lu-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--lm-home);
    min-width: 0;
}
.lm-lu-team.away .lm-lu-head { border-bottom-color: var(--lm-away); }
.lm-lu-club {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lm-lu-form { flex: none; font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.lm-lu-list { display: flex; flex-direction: column; gap: 2px; }
.lm-lu-row {
    display: grid;
    grid-template-columns: 18px 26px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 4px;
    row-gap: 2px;
    padding: 4px 4px 3px;
    border-radius: 6px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.03);
}
.lm-lu-row.off { opacity: 0.45; }
.lm-lu-row.off .lm-lu-name { text-decoration: line-through; }
.lm-lu-row.klein { grid-template-columns: auto minmax(0, 1fr) auto; background: none; color: var(--text-muted); padding: 2px 4px; }
.lm-lu-nr { font-size: 11px; font-weight: 800; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }
.lm-lu-pos { font-size: 10px; font-weight: 800; color: var(--text-dim); }
.lm-lu-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lm-lu-icons { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }
.lm-lu-icons .lm-card { margin: 0; }
.lm-lu-ico sub { font-size: 9px; }
.lm-lu-sub { font-size: 10px; font-weight: 800; }
.lm-lu-sub.rein { color: #34d399; }
.lm-lu-sub.raus { color: #f87171; }
.lm-lu-fit {
    grid-column: 1 / -1;
    height: 2px;
    border-radius: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}
.lm-lu-fit.leer { background: none; }
.lm-lu-fit i { display: block; height: 100%; }
.lm-lu-h {
    margin: 10px 0 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
}
.lm-lu-leer { font-size: 11px; color: var(--text-dim); padding: 2px 4px; }

/* ---- Tablet und Desktop: Tafel oben, darunter Steuerung und Zeitleiste ---- */
@media (min-width: 641px) {
    /* Mehr Fläche für das Spielfeld - vorher blieb auf großen Bildschirmen
       ringsum ein breiter Rand, und das Feld war kaum größer als am Tablet */
    #modalLiveMatch .modal-fullscreen { width: 96vw; max-width: 1600px; height: 92vh; max-height: 92vh; }
    #modalLiveMatch .live-scoreboard { flex: 1 1 100%; }
    #modalLiveMatch .team-name { max-width: 300px; }
    #modalLiveMatch .live-controls-bar { flex: 0 0 auto; }
    #modalLiveMatch .lm-timeline { flex: 1 1 240px; max-width: 640px; }
}

/* Spielfeld und Seitenleiste teilen sich die Höhe fest. Vorher richteten
   sich die Zeilen nach dem Inhalt: Mit längerer Statistik schrumpfte das
   Feld, der Canvas ragte über seinen Rahmen, und die Kommentarzeile
   verschwand darunter. Ab 900 Pixel Breite passt die Seitenleiste daneben. */
@media (min-width: 901px) and (max-width: 1200px) {
    #modalLiveMatch .live-match-body { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
}
@media (max-width: 900px) and (orientation: portrait) {
    #modalLiveMatch .live-match-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
    }
    #modalLiveMatch .live-match-sidebar { min-height: 0; }
}

/* ---- Handy ---- */
@media (max-width: 640px) {
    /* Tafel dreispaltig: Trikot über dem Namen, der Stand in der Mitte */
    #modalLiveMatch .live-scoreboard { gap: 6px; align-items: start; }
    #modalLiveMatch .team-score {
        display: grid;
        align-items: center;
        column-gap: 6px;
        row-gap: 2px;
    }
    #modalLiveMatch .team-score.home { grid-template-columns: minmax(0, 1fr) auto; }
    #modalLiveMatch .team-score.away { grid-template-columns: auto minmax(0, 1fr); }
    #modalLiveMatch .team-score .lm-kit { grid-row: 1; justify-self: center; width: 22px; height: 22px; }
    #modalLiveMatch .team-score.home .lm-kit { grid-column: 1; }
    #modalLiveMatch .team-score.away .lm-kit { grid-column: 2; }
    #modalLiveMatch .team-score .lm-team-block { grid-row: 2; align-items: center !important; text-align: center !important; }
    #modalLiveMatch .team-score.home .lm-team-block { grid-column: 1; }
    #modalLiveMatch .team-score.away .lm-team-block { grid-column: 2; }
    /* Beide Spielstände auf einer Höhe, egal wie lang Name und Torschützen sind */
    #modalLiveMatch .team-score .score-digit { grid-row: 1 / span 2; align-self: start; margin-top: 8px; }
    #modalLiveMatch .team-score.home .score-digit { grid-column: 2; }
    #modalLiveMatch .team-score.away .score-digit { grid-column: 1; }
    #modalLiveMatch .team-name {
        font-size: 12.5px;
        line-height: 1.2;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    #modalLiveMatch .lm-scorers {
        max-width: 100%;
        font-size: 10px;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    #modalLiveMatch .lm-scorers:empty { display: none; }
    #modalLiveMatch .score-digit { font-size: 28px; min-width: 38px; padding: 2px 6px; }
    #modalLiveMatch .match-time-badge { min-width: 60px; padding: 4px 6px; align-self: start; margin-top: 8px; }
    #modalLiveMatch .live-clock { font-size: 15px; }
    #modalLiveMatch .time-label { display: inline-flex; font-size: 9px; letter-spacing: 0.8px; }

    #modalLiveMatch .live-controls-bar .btn { min-height: 40px; padding: 6px 10px; }
    #modalLiveMatch .lm-pause-btn { width: 40px; padding: 0 !important; }
    #modalLiveMatch .live-controls-bar .speed-selector .speed-btn { min-height: 34px; padding: 4px 9px; min-width: 38px; }
    #modalLiveMatch .lm-timeline { width: 100%; height: 28px; }
    #modalLiveMatch .live-commentary-bar { font-size: 12.5px; }
    #modalLiveMatch .lm-seg .live-subtab { font-size: 12.5px; padding: 9px 4px; }
    .lm-lineups { gap: 8px; }
    .lm-lu-row { grid-template-columns: 16px 24px minmax(0, 1fr) auto; font-size: 11.5px; }
}

/* ==========================================================================
   Seitenlinie, Teil zwei: Zurufe, Live-Noten, Positionstausch,
   Standardschützen, Gegneranalyse und Co-Trainer
   ========================================================================== */

/* Zurufleiste unter dem Spielfeld */
.lm-zurufe {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    flex-wrap: wrap;
}
.lm-zuruf-titel {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    white-space: nowrap;
}
.lm-zuruf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-soft);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.lm-zuruf-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.13); color: #ffffff; }
.lm-zuruf-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.lm-zuruf-btn.aktiv {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.7);
    color: #fde68a;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}
.lm-zuruf-kurz { display: none; }
.lm-zuruf-status {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lm-zuruf-status:empty { display: none; }

/* Live-Note als Plakette */
.coach-note {
    flex: none;
    display: inline-block;
    min-width: 32px;
    padding: 1px 5px;
    border-radius: 6px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-soft);
}
.coach-note.gut { background: rgba(34, 197, 94, 0.22); color: #86efac; }
.coach-note.ok { background: rgba(255, 255, 255, 0.1); color: #e2e8f0; }
.coach-note.mau { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
.coach-note.schwach { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.coach-note.leer { background: transparent; color: var(--text-dim); }

/* Aufstellungen im Match-Center: Spalte für die Note */
.lm-lu-row { grid-template-columns: 18px 26px minmax(0, 1fr) auto auto; }
.lm-lu-row .coach-note { min-width: 28px; font-size: 10.5px; padding: 0 4px; }

/* Vier Reiter im Seitenlinien-Fenster */
#modalCoaching .coaching-tabs { grid-template-columns: repeat(4, 1fr); }
.coach-tab-kurz { display: none; }

/* Standardschützen */
.coach-std { display: flex; flex-direction: column; gap: 8px; }
.coach-std-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}
.coach-std-titel { font-size: 13px; font-weight: 700; }
.coach-std-row select { width: 100%; min-width: 0; }
.coach-reset { margin-top: 8px; }

/* Co-Trainer-Karte */
.coach-co-card {
    padding: 12px;
    margin-bottom: 4px;
    border-radius: 12px;
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.06);
}
.coach-co-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.coach-co-ruf { font-size: 12px; font-weight: 800; color: var(--accent-primary); white-space: nowrap; }
.coach-co-bar {
    display: block;
    height: 5px;
    border-radius: 3px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.coach-co-bar i { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #22c55e); }

/* Gegneranalyse: Angriffsseiten */
.coach-seiten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.coach-seite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
}
.coach-seite.haupt { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.08); }
.coach-seite-wert { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coach-seite-bar {
    display: flex;
    align-items: flex-end;
    width: 22px;
    height: 54px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.coach-seite-bar i { display: block; width: 100%; background: #f87171; }
.coach-seite-name { font-size: 12px; font-weight: 700; }
.coach-chip.statisch { cursor: default; }

@media (max-width: 640px) {
    .lm-zuruf-lang { display: none; }
    .lm-zuruf-kurz { display: inline; }
    .lm-zurufe { gap: 5px; margin-top: 6px; flex-wrap: nowrap; }
    .lm-zuruf-btn { padding: 5px 10px; font-size: 12.5px; min-height: 36px; }
    .coach-tab-lang { display: none; }
    .coach-tab-kurz { display: inline; }
    #modalCoaching .coaching-tab { font-size: 12.5px; padding: 10px 2px; }
    .coach-std-row { grid-template-columns: 92px minmax(0, 1fr); }
    .lm-lu-row { grid-template-columns: 16px 24px minmax(0, 1fr) auto auto; }
}

/* Die Kommentarzeile hat immer Platz für zwei Zeilen. Sie wechselt mit
   jedem Ereignis ihre Länge - richtete sich das Feld danach, spränge es
   ständig; ohne feste Höhe ragte der zweizeilige Text am Handy unten aus
   dem Rahmen. */
#modalLiveMatch .live-commentary-bar {
    box-sizing: border-box;
    line-height: 1.35;
    height: calc(2.7em + 20px);
    overflow: hidden;
}
#modalLiveMatch .live-commentary-bar .lm-zeile {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 640px) {
    #modalLiveMatch .live-commentary-bar { height: calc(2.7em + 16px); }
}

/* ==========================================================================
   UI-Rundgang: Kopfleiste
   Am Desktop standen die drei Kästen unterschiedlich hoch (das Geld-Kästchen
   stieß oben an), und der Vorstandsbalken hatte keine Beschriftung. Am Handy
   belegte die Kopfleiste drei Zeilen - rund 200 Pixel.
   ========================================================================== */
.finance-pill {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.fin-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.conf-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.finance-pill,
.confidence-pill,
.season-info-pill {
    box-sizing: border-box;
    min-height: 42px;
}

@media (max-width: 640px) {
    .app-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "links mitte"
            "rechts rechts";
        align-items: center;
        column-gap: 8px;
        row-gap: 8px;
        padding: 8px 12px;
    }
    .app-header .header-left { grid-area: links; min-width: 0; gap: 8px; flex: none; }
    .app-header .header-center { grid-area: mitte; }
    .app-header .header-right {
        grid-area: rechts;
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        gap: 6px;
    }
    .brand-title { display: none; }
    .club-badge-container { min-width: 0; flex: 1; }
    .club-name { max-width: none; }
    /* "Saison 1 •" weglassen - der Spieltag ist die Information */
    .season-info-pill > :nth-child(-n+3) { display: none; }
    .season-info-pill { min-height: 36px; padding: 4px 10px; }
    .conf-label { display: none; }
    .finance-pill,
    .confidence-pill,
    .app-header .btn-advance { min-height: 40px; height: 40px; }
    .app-header .btn-advance { width: 100%; min-width: 0; overflow: hidden; }
}

/* ==========================================================================
   UI-Rundgang: Tabellen allgemein und Kader
   ========================================================================== */
.data-table td.nowrap,
.compact-table td.nowrap,
td.nowrap { white-space: nowrap; }

#pane-squad .sq-meta,
#pane-squad .sq-alter { display: none; }
#pane-squad .squad-role-hint {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 1px;
}
#pane-squad .sq-name strong { white-space: nowrap; }
#pane-squad .sq-pos .pos-tag + .pos-tag { margin-left: 3px; }
#pane-squad .sq-aktion .btn { min-width: 32px; padding: 4px 10px; font-size: 16px; line-height: 1; }
#pane-squad .data-table td { vertical-align: middle; }
#pane-squad .squad-ability-hint { font-size: 10.5px; }

/* Positionsfilter: am Handy wischen statt abschneiden */
#pane-squad .filter-group {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
#pane-squad .filter-group .filter-btn { flex: none; }

@media (max-width: 1500px) {
    #pane-squad .sq-gehalt,
    #pane-squad .sq-moral { display: none; }
}
@media (max-width: 1200px) {
    #pane-squad .sq-rolle { display: none; }
}

/* Handy: jede Zeile eine Karte - Position, Name, Status, Sterne, Fitness,
   darunter Form, Marktwert, Gehalt und Vertrag. Vorher war die Tabelle
   rechts abgeschnitten, Moral und alles danach unerreichbar. */
@media (max-width: 640px) {
    #pane-squad .pane-header { flex-wrap: wrap; gap: 10px; }
    #pane-squad .pane-actions { width: 100%; min-width: 0; }
    #pane-squad .table-container { overflow: visible; }
    #pane-squad .data-table { min-width: 0; width: 100%; display: block; }
    #pane-squad .data-table thead { display: none; }
    #pane-squad .data-table tbody { display: block; }
    #pane-squad .data-table tr {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        grid-template-areas:
            "pos name status"
            "pos staerke fit"
            "pos meta meta";
        column-gap: 10px;
        row-gap: 4px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-color);
    }
    #pane-squad .data-table td { display: none; padding: 0; border: 0; white-space: normal; }
    #pane-squad .data-table td.sq-pos { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; grid-area: pos; }
    #pane-squad .sq-pos .pos-tag + .pos-tag { margin-left: 0; }
    #pane-squad .data-table td.sq-name { display: block; grid-area: name; min-width: 0; }
    #pane-squad .data-table td.sq-status { display: block; grid-area: status; justify-self: end; }
    #pane-squad .data-table td.sq-staerke { display: block; grid-area: staerke; }
    #pane-squad .data-table td.sq-fit { display: flex; align-items: center; gap: 6px; grid-area: fit; justify-self: end; white-space: nowrap; }
    #pane-squad .data-table td.sq-meta { display: block; grid-area: meta; font-size: 12px; color: var(--text-muted); }
    #pane-squad .data-table .mini-bar { display: inline-block; width: 44px; margin: 0; }
    #pane-squad .squad-role-hint { display: block; }
    #pane-squad .squad-ability-hint { display: none; }
}

/* ==========================================================================
   UI-Rundgang: Transfermarkt
   Die Tabelle ragte rechts aus dem Bild - "Verhandeln" und der Reiter
   "Scouting-Zentrale" waren abgeschnitten, am Handy war gar kein Knopf
   erreichbar.
   ========================================================================== */
.data-table th, .data-table td { padding: 10px 12px; }

#pane-transfers .pane-header { flex-wrap: wrap; gap: 10px; }
#pane-transfers .view-switch-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.transfer-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.transfer-filters .styled-input { flex: 1 1 220px; min-width: 0; }
.transfer-filters .styled-select { flex: 0 1 210px; min-width: 0; }

#pane-transfers .tm-meta,
#pane-transfers .tm-alter { display: none; }
.tm-sub { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-muted); margin-top: 1px; }
#pane-transfers .tm-name strong,
#pane-transfers .tm-verein { white-space: nowrap; }
.tm-knoepfe { display: flex; gap: 6px; justify-content: flex-end; }
.tm-knoepfe .btn { white-space: nowrap; }

@media (max-width: 1500px) {
    #pane-transfers .tm-gehalt,
    #pane-transfers .tm-vertrag { display: none; }
}
@media (max-width: 1250px) {
    #pane-transfers .tm-rolle,
    #pane-transfers .tm-knopf-text { display: none; }
}

@media (max-width: 640px) {
    #pane-transfers .table-container { overflow: visible; }
    #pane-transfers .data-table { min-width: 0; width: 100%; display: block; }
    #pane-transfers .data-table thead { display: none; }
    #pane-transfers .data-table tbody { display: block; }
    #pane-transfers .data-table tr.row-clickable {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas:
            "pos name aktion"
            "pos staerke aktion"
            "pos meta meta";
        column-gap: 10px;
        row-gap: 3px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-color);
    }
    #pane-transfers .data-table tr.row-clickable td { display: none; padding: 0; border: 0; }
    #pane-transfers .data-table tr.row-clickable td.tm-pos { display: block; grid-area: pos; }
    #pane-transfers .data-table tr.row-clickable td.tm-name { display: block; grid-area: name; min-width: 0; }
    #pane-transfers .data-table tr.row-clickable td.tm-name strong { white-space: normal; }
    #pane-transfers .data-table tr.row-clickable td.tm-staerke { display: block; grid-area: staerke; }
    #pane-transfers .data-table tr.row-clickable td.tm-meta { display: block; grid-area: meta; font-size: 12px; color: var(--text-muted); }
    #pane-transfers .data-table tr.row-clickable td.tm-aktion { display: block; grid-area: aktion; align-self: center; }
    #pane-transfers .tm-knoepfe { flex-direction: column; gap: 6px; }
    #pane-transfers .tm-knoepfe .btn { min-height: 38px; padding: 6px 10px; }
    #pane-transfers .tm-mehr-zeile { display: block; }
    #pane-transfers .tm-mehr-zeile td { display: block; }
    .transfer-filters .styled-input,
    .transfer-filters .styled-select { flex: 1 1 100%; }
}

/* Filterchips sind Chips, keine Vollbreiten-Knöpfe. Die allgemeine Regel
   ".pane-actions .btn { width: 100% }" machte "Alle" bildschirmbreit und
   schob die übrigen Filter aus dem Bild. */
@media (max-width: 640px) {
    .pane-actions .filter-group .btn.filter-btn { width: auto; flex: none; min-height: 38px; }
}

/* Eingehende Angebote: Text links, Knöpfe rechts - am Handy untereinander */
.ai-offers-container { margin-bottom: 16px; }
.ai-offers-container h3 { font-size: 16px; margin-bottom: 8px; }
.ai-offers-list { display: flex; flex-direction: column; gap: 8px; }
.angebot-zeile { gap: 12px; flex-wrap: wrap; }
.angebot-text { flex: 1 1 260px; min-width: 0; font-size: 14px; line-height: 1.45; }
.angebot-wert { display: block; font-size: 12px; color: var(--text-muted); }
.angebot-knoepfe { display: flex; gap: 8px; flex: none; }
@media (max-width: 640px) {
    .angebot-knoepfe { width: 100%; }
    .angebot-knoepfe .btn { flex: 1; min-height: 40px; }
}

/* ==========================================================================
   UI-Rundgang: Wettbewerbe & Tabelle
   Tabellenzonen wie im Fernsehen: Europapokal, Aufstieg, Abstieg. Am Handy
   war die Spalte "Punkte" abgeschnitten und die Ligaauswahl ragte rechts
   aus dem Bild.
   ========================================================================== */
.wettbewerb-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.wettbewerb-kopf .styled-select { min-width: 230px; padding: 6px 12px; font-weight: 700; }

.rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border-radius: 7px;
    font-weight: 800;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.rang-ucl  { background: #2563eb; color: #fff; }
.rang-uel  { background: #ea580c; color: #fff; }
.rang-uecl { background: #16a34a; color: #fff; }
.rang-auf  { background: #0d9488; color: #fff; }
.rang-ab   { background: #dc2626; color: #fff; }
.rang-po   { background: #ca8a04; color: #fff; }
.rang-rel  { background: #be185d; color: #fff; }

.tabelle-liga tr.zonen-grenze td { border-bottom: 2px dashed rgba(148, 163, 184, 0.35); }
.tabelle-liga .tb-platz { width: 44px; }
.tabelle-liga td.tb-pkt { font-size: 15px; }
.tabelle-liga .tb-sp, .tabelle-liga .tb-s, .tabelle-liga .tb-u, .tabelle-liga .tb-n,
.tabelle-liga .tb-tore, .tabelle-liga .tb-diff, .tabelle-liga .tb-pkt { text-align: center; font-variant-numeric: tabular-nums; }
.tb-verein-inhalt { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.mini-wappen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    background: var(--bg-card-hover);
}
.tabelle-runden thead { display: none; }

.tabellen-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 6px 4px; font-size: 12px; color: var(--text-muted); }
.tabellen-legende:empty { display: none; }
.legende-eintrag { display: inline-flex; align-items: center; gap: 7px; }
.legende-eintrag .rang { min-width: 12px; width: 12px; height: 12px; padding: 0; border-radius: 3px; }

@media (max-width: 640px) {
    #pane-fixtures .pane-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .wettbewerb-kopf { flex-direction: column; align-items: stretch; gap: 10px; }
    .wettbewerb-kopf .styled-select { min-width: 0; width: 100%; }
    #pane-fixtures .view-switch-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    #pane-fixtures .view-switch-buttons .btn { width: 100%; white-space: normal; min-height: 42px; }
    #viewStandings.table-container { overflow: visible; }
    .tabelle-liga { min-width: 0 !important; width: 100%; }
    .tabelle-liga th, .tabelle-liga td { padding: 9px 6px; }
    .tabelle-liga .tb-s, .tabelle-liga .tb-u, .tabelle-liga .tb-n,
    .tabelle-liga .tb-tore, .tabelle-liga .tb-form { display: none; }
    .tabelle-liga .tb-platz { width: 36px; }
    .tabelle-liga .tb-verein strong { font-size: 14px; line-height: 1.25; }
    .tb-verein-inhalt { gap: 8px; }
    .mini-wappen { width: 20px; height: 20px; font-size: 10px; }
    .fixtures-nav-bar { padding: 10px 12px; gap: 8px; }
    .fixtures-nav-bar .matchday-display-title { font-size: 15px; text-align: center; }
}

/* ==========================================================================
   UI-Rundgang: Dashboard
   Die Karten füllten nur zehn der zwölf Rasterspalten - rechts blieb ein
   leerer Streifen. Jetzt geht jede Reihe auf.
   ========================================================================== */
@media (min-width: 1201px) {
    .dashboard-grid > .next-match-card { grid-column: span 7; }
    .dashboard-grid > .attention-card { grid-column: span 5; }
    .dashboard-grid > .calendar-snapshot-card { grid-column: span 7; }
    .dashboard-grid > .table-snapshot-card { grid-column: span 5; }
    .dashboard-grid > .board-card { grid-column: span 6; }
    .dashboard-grid > .squad-status-card { grid-column: span 6; }
}
/* Zwischen Tablet und kleinem Laptop: zwei Spalten statt einer langen */
@media (min-width: 901px) and (max-width: 1200px) {
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-grid > .next-match-card,
    .dashboard-grid > .calendar-snapshot-card,
    .dashboard-grid > .news-ticker-card { grid-column: 1 / -1; }
    .dashboard-grid > .attention-card,
    .dashboard-grid > .table-snapshot-card,
    .dashboard-grid > .board-card,
    .dashboard-grid > .squad-status-card { grid-column: span 1; }
}

#dashStandingsTable { width: 100%; }
#dashStandingsTable td { vertical-align: middle; }
#dashStandingsTable .tb-verein { max-width: 0; width: 100%; }
#dashStandingsTable .tb-verein-inhalt { display: flex; }
#dashStandingsTable .tb-verein-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#dashStandingsTable .rang { min-width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
#dashStandingsTable .mini-wappen { width: 20px; height: 20px; font-size: 10px; }
.tabelle-luecke td { text-align: center; color: var(--text-muted); padding: 2px 0 !important; letter-spacing: 3px; line-height: 1; }

/* Handy: Heim - VS - Gast nebeneinander statt drei Stockwerke. Die
   Kalender-Knöpfe erbten ihre 180px-Basis in der Spaltenrichtung als Höhe. */
@media (max-width: 768px) {
    .calendar-action-bar .btn { flex: none; }
    .match-preview-content {
        flex-direction: row;
        align-items: flex-start;
        gap: 6px;
        padding: 16px 8px;
    }
    .preview-team { width: auto; flex: 1 1 0; min-width: 0; gap: 6px; }
    .preview-team h4 { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
    .preview-crest { width: 46px; height: 46px; font-size: 18px; }
    .preview-vs { flex: none; padding-top: 4px; max-width: 96px; text-align: center; }
    .vs-text { font-size: 20px; }
    .preview-venue { font-size: 10.5px; line-height: 1.25; }
    .news-ticker-card .card-header { flex-wrap: wrap; gap: 6px; }
    .news-ticker-card .card-header .btn-link { white-space: nowrap; padding-left: 0; padding-right: 0; }
}

.news-zeile {
    width: 100%;
    border: 1px solid transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    gap: 14px;
    align-items: flex-start;
}
.news-zeile:hover { border-color: var(--border-color); background: rgba(255, 255, 255, 0.04); }
.news-zeile.ungelesen .news-titel::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-secondary, #38bdf8); margin-right: 7px; vertical-align: middle; }
.news-zeile-text { flex: 1; min-width: 0; }
.news-titel { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.news-vorschau {
    font-size: 12px;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-zeile .news-date { flex: none; white-space: nowrap; padding-top: 2px; }
@media (max-width: 640px) {
    #dashStandingsTable th, #dashStandingsTable td { padding: 8px 5px; }
    #dashStandingsTable th:nth-child(3), #dashStandingsTable td:nth-child(3) { display: none; }
}

/* ==========================================================================
   Abstands-Hilfsklassen. index.html und uiManager setzen mb-2, mb-3, mt-2
   und mt-3 seit langem - definiert waren sie nie, deshalb klebten etwa im
   Kalender die Spielkarte und die Saisonwoche aneinander.
   ========================================================================== */
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 16px; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 16px; }

/* Vorbereitung: Bilanz nach dem Saisonstart */
.pre-fazit-kopf { font-weight: 700; color: var(--success, #22c55e); margin-bottom: 12px; }
.pre-fazit { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pre-fazit-kachel {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border-color);
    line-height: 1.35;
    min-width: 0;
}
.pre-fazit-titel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pre-fazit-kachel strong { font-size: 15px; }

/* Training: Güte des Stabs als saubere Balkenliste */
.stab-faecher { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 22px; }
.stab-fach { display: grid; grid-template-columns: minmax(0, 1fr) 80px 28px; align-items: center; gap: 10px; font-size: 13px; }
.stab-fach-name { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stab-fach .mini-bar { width: 100%; }
.stab-fach strong { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   UI-Rundgang: Statistiken
   ========================================================================== */
#pane-stats .pane-header { flex-wrap: wrap; gap: 12px; }
.stats-liga-wahl { min-width: 240px; font-weight: 700; padding: 6px 12px; }
#pane-stats .stats-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
    #pane-stats .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1750px) {
    #pane-stats .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#pane-stats .dash-card h3 { margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stats-hinweis { font-size: 11px; font-weight: 500; }
.leaderboard-list { gap: 6px; }
.leaderboard-item { gap: 10px; justify-content: flex-start; padding: 7px 10px; }
.leaderboard-item .lb-rank { width: 18px; flex: none; text-align: right; }
.leaderboard-item .mini-wappen { width: 22px; height: 22px; font-size: 10px; }
.lb-person { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.lb-person .lb-name, .lb-person .lb-club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.lb-val { flex: none; font-variant-numeric: tabular-nums; }
.lb-val small { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.leaderboard-item.lb-eigen { box-shadow: inset 3px 0 0 var(--accent-primary); background: rgba(16, 185, 129, 0.1); }
@media (max-width: 640px) {
    .stats-liga-wahl { width: 100%; min-width: 0; }
}

/* ==========================================================================
   UI-Rundgang: Einstellungen
   "btn-group-column" war nie definiert - die Knöpfe klebten untereinander.
   ========================================================================== */
.btn-group-column { display: flex; flex-direction: column; gap: 10px; }
.btn-group-column .btn, .btn-group-column .file-upload-btn { width: 100%; justify-content: center; }
#pane-settings .dash-card > p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 6px 0 14px; }
#pane-settings .dash-card > h3 { margin-bottom: 4px; }
#pane-settings .dash-card > .btn { width: 100%; }
.einstellungen-live { grid-column: 1 / -1; }
.einstellung-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 2px; }
.einstellung-h:first-child { margin-top: 0; }
.speicher-info { margin: 12px 0 0; font-size: 12.5px; color: var(--text-muted); }
/* Spielstände: Plätze und Sicherungen als Zeilen */
.speicher-karte { grid-column: 1 / -1; }
.speicher-karte .btn-group-column { max-width: 320px; }
.platz-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.platz-liste > .btn { align-self: flex-start; margin-top: 4px; }
.platz-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.platz-zeile.platz-laeuft { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.platz-zeile.platz-frei { border-style: dashed; background: transparent; }
.platz-nr { flex: 0 0 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--text-dim); background: var(--surface-3, rgba(255, 255, 255, .06)); }
.platz-nr .ico { width: 14px; height: 14px; }
.platz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.platz-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.platz-text span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.platz-knoepfe { display: flex; gap: 6px; flex-shrink: 0; }
.platz-knoepfe .btn-icon-only { width: 32px; padding: 6px; justify-content: center; }
.platz-aktiv { font-size: 12px; font-weight: 700; color: var(--accent); }
.speicher-hinweis { margin: 4px 0; font-size: 12.5px; color: var(--text-muted); }
.save-weitere { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.save-weitere .save-card-kicker { margin-bottom: 2px; }
@media (max-width: 560px) {
    .platz-zeile { gap: 10px; padding: 8px; }
    .platz-text span { white-space: normal; }
    /* Das Abspielzeichen reicht - so bleibt Platz für den Text */
    .platz-knoepfe [data-platz-laden] span { display: none; }
    .platz-knoepfe [data-platz-laden] { width: 32px; padding: 6px; justify-content: center; }
}
.einstellung-schalter:last-child { border-bottom: 0; }
.einstellung-schalter .coach-muted { font-size: 12px; color: var(--text-muted); }
@media (min-width: 900px) {
    #settingsLiveBody { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
    #settingsLiveBody .einstellung-h { grid-column: 1 / -1; }
}

/* Finanzen: Unterhalt als zweizeilige Posten statt gequetschter Einzeiler */
.unterhalt-zeile { align-items: flex-start; gap: 12px; }
.unterhalt-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.unterhalt-sub { font-size: 11px; color: var(--text-muted); }
.unterhalt-betrag { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; flex: none; }
.unterhalt-aufschlag { font-size: 11px; color: #f59e0b; white-space: nowrap; }
.finance-stat-row strong { white-space: nowrap; }
@media (min-width: 900px) {
    #pane-settings .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Die Seitenleiste bricht Beschriftungen nicht um - fett gesetzt passte
   "Spielstand & Optionen" nicht mehr in eine Zeile. */
.nav-item { white-space: nowrap; }
.nav-item.active { letter-spacing: -0.01em; }

/* ==========================================================================
   UI-Rundgang: Kalender am Handy
   Sieben Tageskarten mit je 220 px Höhe ergaben eine endlose Rolle. Jetzt
   ist jeder Tag eine kompakte Zeile: Tag links, Symbol, Titel und Text.
   ========================================================================== */
@media (max-width: 640px) {
    .calendar-grid-week { grid-template-columns: 1fr !important; gap: 8px; }
    .calendar-day-card {
        display: grid;
        grid-template-columns: 52px 30px minmax(0, 1fr);
        grid-template-areas:
            "top icon title"
            "top icon desc"
            "top icon marks";
        column-gap: 10px;
        row-gap: 2px;
        min-height: 0;
        padding: 10px 12px;
        align-items: start;
    }
    .calendar-day-card .cal-card-top {
        grid-area: top;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }
    .calendar-day-card .cal-date { font-size: 11px; }
    .calendar-day-card .cal-card-icon { grid-area: icon; font-size: 22px; line-height: 1; margin: 0; }
    .calendar-day-card .cal-card-title { grid-area: title; font-size: 14px; margin: 0; }
    .calendar-day-card .cal-card-desc { grid-area: desc; font-size: 12px; margin: 0; }
    .calendar-day-card .cal-marks { grid-area: marks; margin-top: 4px; }
    .calendar-day-card .cal-status-badge { position: absolute; top: 8px; right: 10px; }
    .calendar-day-card.active-today .cal-card-title { padding-right: 62px; }
}
@media (max-width: 640px) {
    .cal-full-item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "datum status" "titel titel";
        row-gap: 4px;
        align-items: center;
    }
    .cal-full-item .cal-full-date { grid-area: datum; min-width: 0; font-size: 12px; }
    .cal-full-item .cal-full-title { grid-area: titel; min-width: 0; }
    .cal-full-item .cal-full-status { grid-area: status; font-size: 12px; }
    #pane-calendar .card-header { flex-wrap: wrap; gap: 6px; }
}

/* ------------------------------------------------------------------
   Mannschaftsanweisungen als Kacheln (nach dem Vorbild)
   Jede Kachel zeigt Symbol, Anweisung und Wert; ein unsichtbares
   Auswahlfeld liegt darüber - so öffnet sich auf dem Handy die
   gewohnte Auswahl des Systems.
   ------------------------------------------------------------------ */
.anweisungen-flaeche {
    margin-top: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 20px 14px;
}

.anweisungen-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.anweisungen-kopf h3 {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.02em;
    margin: 0;
}

.anweisungen-kopf .taktik-ansicht { margin: 0; flex: 0 1 340px; }

.anweisungs-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.anw-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 96px;
    padding: 12px 12px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.anw-kachel:hover { background: var(--bg-card-hover); border-color: var(--border-light); }
.anw-kachel:focus-within { outline: 2px solid rgba(var(--accent-rgb), 0.55); outline-offset: 1px; }

.anw-kachel.geaendert {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), transparent 70%), var(--bg-elevated);
}

.anw-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
}

.anw-kopf .ico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--text-soft); }
.anw-kachel.geaendert .anw-kopf .ico { color: var(--accent-primary); }

.anw-titel {
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.25;
}

.anw-wert {
    margin-top: auto;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text-main);
}

.anw-skala {
    display: flex;
    gap: 3px;
}

.anw-skala i {
    flex: 1 1 0;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.anw-skala i.an { background: var(--text-soft); }
.anw-kachel.geaendert .anw-skala i.an { background: var(--accent-primary); }

.anw-kachel select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 16px; /* verhindert das Zoomen auf iOS */
}

@media (max-width: 600px) {
    .anweisungen-flaeche { padding: 14px 12px 10px; margin-top: 14px; }
    .anweisungen-kopf .taktik-ansicht { flex: 1 1 100%; }
    .anweisungs-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .anw-kachel { min-height: 84px; padding: 10px; }
    .anw-wert { font-size: 17px; }
}

/* Anzeige des 2D-Felds: Namen und Formationslinien einblenden */
.live-pitch-wrapper { position: relative; }
/* Sofort-Ergebnis: das Spiel läuft ohne Bild weiter */
.lm-ohnebild { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(6, 10, 14, 0.82); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 6; border-radius: inherit; }
.lm-ohnebild-box { width: min(360px, 86%); text-align: center; padding: 22px 20px; border-radius: 14px; background: var(--surface-2, #161c25); border: 1px solid var(--line-strong, rgba(255,255,255,.12)); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.lm-ohnebild-titel { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; color: var(--accent, #bef264); }
.lm-ohnebild-stand { font-family: var(--font-display, inherit); font-size: 44px; font-weight: 800; margin: 10px 0 12px; font-variant-numeric: tabular-nums; color: var(--text-main); }
.lm-ohnebild-balken { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.lm-ohnebild-balken span { display: block; height: 100%; background: var(--accent, #bef264); transition: width .12s linear; }
.lm-ohnebild-text { margin-top: 10px; font-size: 13px; color: var(--text-muted); }
/* 3D-Ansicht */
.live-pitch-3d { display: block; margin: 0 auto; border-radius: 10px; background: #0a1018; }
.lm-3d-kamera { position: absolute; top: 10px; left: 10px; z-index: 5; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(6,10,14,.72); border: 1px solid rgba(255,255,255,.1); }
.lm-3d-kamera button { border: 0; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.lm-3d-kamera button.aktiv { background: var(--accent, #bef264); color: #0a1018; }
.lm-3d-banner { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 5; max-width: 86%; padding: 7px 16px; border-radius: 10px; background: rgba(6,10,14,.82); border: 1px solid rgba(255,255,255,.12); color: #f8fafc; font-weight: 700; font-size: 15px; text-align: center; pointer-events: none; }

.lm-ansicht {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
}

.lm-ansicht > summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(9, 12, 17, 0.72);
    border: 1px solid var(--border-light);
    color: var(--text-soft);
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.lm-ansicht > summary::-webkit-details-marker { display: none; }
.lm-ansicht[open] > summary { color: var(--accent-primary); border-color: rgba(var(--accent-rgb), 0.5); }
.lm-ansicht > summary .ico { width: 18px; height: 18px; }

.lm-ansicht-menu {
    position: absolute;
    right: 0;
    top: 40px;
    min-width: 210px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(12, 16, 22, 0.95);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.lm-ansicht-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    font-size: 13px;
    color: var(--text-soft);
    border-radius: 8px;
    cursor: pointer;
}

.lm-ansicht-menu label:hover { background: rgba(255, 255, 255, 0.05); }
.lm-ansicht-menu input { accent-color: var(--accent-primary); width: 16px; height: 16px; }
.lm-ansicht-menu .lm-ansicht-wahl { justify-content: space-between; gap: 10px; }
.lm-ansicht-menu select { background: var(--surface-2, #161c25); color: inherit; border: 1px solid var(--border-light); border-radius: 8px; padding: 4px 6px; font: inherit; font-size: 12.5px; }

/* Kopf der Vereinsseite (nach dem Vorbild): Wappen, Liga, Kennzahlen */
.vereins-kopf {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px 20px;
    align-items: center;
    padding: 20px 22px;
    margin-bottom: 20px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    background:
        radial-gradient(120% 140% at 0% 0%, var(--vk-farbe, rgba(var(--accent-rgb), 0.18)) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent),
        var(--bg-card);
}

.vk-wappen {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.vk-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vk-titel h2 {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1.05;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vk-liga {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-primary);
}
.vk-ort { font-size: 13px; color: var(--text-muted); }

.vk-kacheln {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.vk-kachel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: rgba(9, 12, 17, 0.55);
    border: 1px solid var(--border-color);
    min-width: 0;
}

.vk-kachel span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.vk-kachel strong {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vk-kachel .vk-balken {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.vk-kachel .vk-balken i { display: block; height: 100%; background: var(--accent-primary); border-radius: 2px; }
.vk-kachel small { font-size: 11px; color: var(--text-muted); }

@media (max-width: 1100px) {
    .vk-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .vereins-kopf { padding: 16px; gap: 12px 14px; }
    .vk-wappen { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; }
    .vk-titel h2 { font-size: 24px; white-space: normal; }
    .vk-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .vk-kachel strong { font-size: 20px; }
}

/* Werteliste: Bezeichnung links, Wert rechts - wie die Profilkarten im Vorbild */
.kv-liste { display: flex; flex-direction: column; }
.kv-liste > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}
.kv-liste > div:last-child { border-bottom: 0; }
.kv-liste > div > span { color: var(--text-muted); font-size: 13px; }
.kv-liste > div > strong { text-align: right; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.kv-liste > div > strong b { font-weight: 700; }

/* Kennzahlenleiste oben in den Reitern - dieselben Kacheln wie im Vereinskopf */
.kz-leiste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.kz-leiste:empty { display: none; }
.kz-leiste .vk-kachel { background: var(--bg-card); }
.vk-kachel.warnung strong { color: var(--accent-gold); }
.vk-kachel.gefahr strong { color: var(--accent-danger); }
.vk-kachel.gut strong { color: var(--accent-secondary); }
@media (max-width: 600px) {
    .kz-leiste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Stabsmitglied in einer Zeile: wer, wie gut, was das bedeutet */
.stab-info {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-info);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.stab-info:empty { display: none; }
.stab-info-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.stab-info-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.stab-info-text { margin-top: 4px; font-size: 13px; color: var(--text-soft); }
.stab-sterne { display: inline-flex; align-items: center; vertical-align: middle; }

/* Scoutbericht als Karte */
#scoutReportsList { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
#scoutReportsList .empty-state-sm { grid-column: 1 / -1; }
.scout-bericht {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    min-width: 0;
}
.sb-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.sb-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.sb-name strong { font-size: 15px; }
.sb-meta { font-size: 12px; color: var(--text-muted); }
.sb-zuv {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--zuv);
    border: 1px solid var(--zuv);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}
.sb-sterne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sb-label { font-size: 12px; color: var(--text-muted); }
.sb-empf { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.04); }
.sb-empf .sb-rolle { font-weight: 500; color: var(--text-soft); }
.sb-empf-top { color: var(--accent-primary); background: rgba(var(--accent-rgb), 0.10); }
.sb-empf-talent { color: var(--accent-info); background: rgba(var(--info-rgb), 0.10); }
.sb-empf-gut { color: var(--accent-secondary); background: rgba(52, 211, 153, 0.08); }
.sb-empf-nein { color: var(--accent-danger); background: rgba(248, 113, 113, 0.08); }
.sb-empf-offen { color: var(--accent-gold); background: rgba(251, 191, 36, 0.08); }
.sb-listen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-listen ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.sb-plus li::before { content: "+ "; color: var(--accent-secondary); font-weight: 700; }
.sb-minus li::before { content: "− "; color: var(--accent-danger); font-weight: 700; }
.sb-charakter { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-soft); font-style: italic; }
.sb-fazit { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.sb-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; border-top: 1px solid var(--border-color); padding-top: 8px; font-size: 12px; color: var(--text-muted); }
.sb-scout { display: inline-flex; align-items: center; gap: 6px; }
.sb-knoepfe { margin-left: auto; display: inline-flex; gap: 6px; }
@media (max-width: 600px) {
    #scoutReportsList { grid-template-columns: minmax(0, 1fr); }
    .sb-listen { grid-template-columns: minmax(0, 1fr); }
}

/* Schwerpunkte der Jugendakademie */
.akademie-sp {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px 18px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.akademie-sp:empty { display: none; }
.akademie-leiter, .sp-fazit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.sp-fazit { color: var(--text-soft); border-top: 1px solid var(--border-color); padding-top: 10px; display: block; }
.sp-titel { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px; }
.sp-hinweis { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-dim); margin-left: 6px; }
.sp-reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--border-color);
    color: var(--text-soft);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    min-height: 32px;
}
.sp-chip:hover:not(:disabled) { background: rgba(148, 163, 184, 0.18); color: var(--text-main); }
.sp-chip.aktiv { background: var(--accent-primary); color: var(--accent-ink); border-color: var(--accent-primary); }
.sp-chip:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 600px) {
    .akademie-sp { grid-template-columns: minmax(0, 1fr); padding: 10px; }
}

/* Vorbereitung: Stab-Etat, Pflichtposten, Bewerber */
.stab-etat {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--bg-elevated);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.stab-etat-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 13px; }
.stab-etat-zeile > span:first-child { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.stab-etat-balken { height: 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.15); overflow: hidden; }
.stab-etat-balken i { display: block; height: 100%; border-radius: inherit; background: var(--accent-primary); transition: width .3s ease; }
.stab-etat.warnung .stab-etat-balken i { background: var(--accent-gold); }
.stab-etat.gefahr .stab-etat-balken i { background: var(--accent-danger); }
.stab-pflicht {
    font-size: 11px; font-weight: 700; color: var(--accent-danger);
    border: 1px solid var(--accent-danger); border-radius: 999px; padding: 1px 7px;
}
.pre-area.pflicht-offen { border-color: rgba(248, 113, 113, 0.45); }
.pre-area-stand { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pre-cand-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.pre-cand-info > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pre-cand-warn { font-size: 11.5px; color: var(--accent-gold); }
.pre-cand-knoepfe { display: inline-flex; gap: 6px; flex-shrink: 0; }
.pre-candidate.zu-teuer .pre-cand-info { opacity: .8; }

/* Entscheidungsdialog */
.ent-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ent-knoepfe:empty { display: none; }
.verh-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 12px; }
.verh-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
.verh-zahlen > div, .angebot-zahlen > div {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px 10px;
}
.verh-zahlen span, .angebot-zahlen span { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.verh-eingabe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.verh-eingabe label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-soft); }
.verh-antwort { margin-top: 12px; font-size: 13px; color: var(--text-soft); min-height: 1.4em; }
.pflicht-liste { margin: 8px 0 12px 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }

/* Angebote für eigene Spieler: nicht zu übersehen */
#aiOffersContainer {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.02));
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}
#aiOffersContainer h3 { color: var(--accent-gold); }
#aiOffersList.ai-offers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.angebot-karte {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    min-width: 0;
}
.angebot-karte.dringend { border-color: var(--accent-danger); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25); }
.ak-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ak-verein { font-weight: 700; font-size: 14px; }
.ak-frist { font-size: 11.5px; font-weight: 700; color: var(--accent-gold); border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.angebot-karte.dringend .ak-frist { color: var(--accent-danger); }
.ak-spieler { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ak-spieler[data-player-id] { cursor: pointer; }
.ak-spieler[data-player-id]:hover strong { text-decoration: underline; }
.angebot-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.angebot-zahlen strong { font-size: 14px; }
.ak-quote.gut { color: var(--accent-secondary); }
.ak-quote.schlecht { color: var(--accent-danger); }
.ak-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-knoepfe .btn { flex: 1 1 auto; }
.angebot-dialog .angebot-karte { border-color: rgba(251, 191, 36, 0.45); }
@media (max-width: 600px) {
    #aiOffersList.ai-offers-list { grid-template-columns: minmax(0, 1fr); }
    .ak-knoepfe .btn { min-height: 40px; }
}
#navOffersBadge, .badge-angebot { background: var(--accent-gold); color: #1a1204; font-weight: 800; }
@media (max-width: 600px) {
    .ent-knoepfe .btn { flex: 1 1 calc(50% - 4px); min-height: 42px; }
    .ent-knoepfe .btn-primary { flex-basis: 100%; order: -1; }
}
.stab-etat-zeile.stab-etat-kosten { border-top: 1px dashed var(--border-color); padding-top: 6px; }

/* Baudialog: Rechnung mit hervorgehobenem Eigenanteil */
.bau-rechnung .bau-eigen { border-color: rgba(var(--accent-rgb), 0.55); }
.bau-rechnung .bau-eigen strong { color: var(--accent-primary); }

/* Vereinsdetails aus Tabelle und Dashboard */
.compact-table tbody tr.row-clickable,
.vd-kader tbody tr.row-clickable { cursor: pointer; transition: background 0.15s ease; }
.compact-table tbody tr.row-clickable:hover { background: rgba(var(--accent-rgb), 0.08); }
.vd-box { max-width: 980px; }
.vd-kopf { margin-bottom: 14px; }
.vd-kopf .vk-kachel .vd-sterne { min-height: 24px; display: flex; align-items: center; }
.vd-derby { margin: 0 0 14px; }
.vd-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.vd-karte { padding: 16px; }
.vd-karte h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.vd-karte h4:not(:first-child) { margin-top: 16px; }
.vd-karte h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.vd-spiele { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vd-spiele li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.vd-spiele .vd-gegner { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-spiele .vd-st { color: var(--text-muted); min-width: 28px; }
.vd-spiele small { color: var(--text-muted); }
.vd-spiele .vd-gegen-uns { color: var(--accent-primary); font-weight: 700; }
.vd-kader .vd-gruppe td { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding-top: 12px; background: transparent; }
.vd-kader .tm-sub { display: block; font-size: 11px; color: var(--text-muted); }
.vd-kader .vd-wert { text-align: right; }

@media (max-width: 700px) {
    .vd-raster { grid-template-columns: 1fr; }
    .vd-kader th:nth-child(5), .vd-kader td:nth-child(5) { display: none; }
}
.fixture-team.vd-link { cursor: pointer; }
.fixture-team.vd-link:hover { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 3px; }
.inbox-detail-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.scout-beobachtung { color: var(--text-muted); }

/* Länderwissen im Scouting: Name, Balken, Wert, bekannte Spieler */
.land-wissen-hinweis { font-size: 13px; margin-bottom: 10px; }
.land-wissen-liste { display: grid; gap: 6px; }
.land-wissen-zeile {
    display: grid; grid-template-columns: minmax(130px, 180px) 1fr 56px; gap: 4px 10px; align-items: center;
}
.land-wissen-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.land-wissen-balken { height: 8px; border-radius: 4px; background: var(--bg-input); overflow: hidden; }
.land-wissen-balken > span { display: block; height: 100%; border-radius: 4px; }
.land-wissen-wert { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.land-wissen-zahl { grid-column: 1 / -1; font-size: 12px; margin-top: -2px; }
.tf-landwissen { margin-top: 4px; font-size: 13px; }
@media (max-width: 600px) {
    .land-wissen-zeile { grid-template-columns: minmax(120px, 1fr) 1fr 52px; }
}

/* Einzelne Tage wie im Vorbild: der kleine Bruder des Weiter-Knopfs */
.btn-ein-tag { padding: 10px 14px; font-size: 13.5px; white-space: nowrap; }
@media (max-width: 1100px) { .btn-ein-tag { padding: 8px 10px; font-size: 12px; min-height: 40px; } }
@media (max-width: 420px) { .btn-ein-tag { padding: 8px 8px; } .btn-ein-tag-text { font-size: 11.5px; } }
@media (max-width: 640px) {
    /* Mit dem +1-Tag-Knopf sind es vier Elemente: als Reihe statt Raster,
       der Weiter-Knopf nimmt den Rest */
    .app-header .header-right { display: flex; flex-wrap: nowrap; align-items: stretch; }
    .app-header .header-right > .finance-pill,
    .app-header .header-right > .confidence-pill,
    .app-header .header-right > .btn-ein-tag { flex: none; }
    .app-header .header-right > .btn-advance { flex: 1 1 auto; }
    .app-header .btn-ein-tag { min-height: 40px; height: 40px; padding: 0 9px; }
}

/* Gespräch unter vier Augen (Spielerakte) */
.gs-karte { padding: 14px; }
.gs-titel { font-size: 13px; margin-bottom: 4px; color: var(--accent-primary); display: flex; align-items: center; gap: 6px; }
.gs-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.gs-lage { font-size: 12px; padding: 7px 10px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--line, rgba(255,255,255,0.08)); }
.gs-lage.gs-bad { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.3); }
.gs-lage.gs-warn { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.3); }
.gs-lage.gs-info { background: rgba(56, 189, 248, 0.07); border-color: rgba(56, 189, 248, 0.25); }
.gs-antwort { font-size: 13px; font-style: italic; padding: 9px 12px; border-radius: 8px; margin-bottom: 10px; border-left: 3px solid var(--text-muted); background: var(--surface-2, rgba(255,255,255,0.03)); }
.gs-antwort.gs-gut { border-left-color: #34d399; }
.gs-antwort.gs-schlecht { border-left-color: #ef4444; }
.gs-antwort span { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.gs-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.gs-option { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; padding: 10px 12px; height: auto; min-height: 0; white-space: normal; }
.gs-option strong { font-size: 13px; }
.gs-option span { font-size: 11.5px; color: var(--text-muted); font-weight: 400; line-height: 1.4; }
.gs-option:disabled { opacity: 0.55; cursor: not-allowed; }

/* Entwicklungsplan (Spielerakte) */
.ep-karte { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ep-karte .gs-titel { margin-bottom: 0; }
.ep-feld { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.ep-feld > span { font-weight: 600; color: var(--text-primary, #e2e8f0); }
.ep-feld small { color: var(--text-muted); font-size: 11.5px; line-height: 1.4; }
.ep-feld select { width: 100%; }
.ep-balken { height: 6px; border-radius: 4px; background: var(--surface-2, rgba(255,255,255,0.06)); overflow: hidden; }
.ep-balken span { display: block; height: 100%; background: var(--accent-primary); border-radius: 4px; }
#trainingPlaeneBody tr[data-player-id] { cursor: pointer; }
#trainingPlaeneBody tr[data-player-id]:hover td { background: var(--surface-2, rgba(255,255,255,0.03)); }
#trainingPlaeneBody .text-warning { color: #f59e0b; font-weight: 600; }

/* Leihen */
.leih-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,0.06)); font-size: 13px; cursor: pointer; }
.leih-zeile:last-child { border-bottom: none; }
.leih-text { color: var(--text-muted); font-size: 12.5px; }
.leih-angebote { margin-top: 10px; }
@media (max-width: 640px) {
    .leih-zeile { grid-template-columns: 1fr auto; }
    .leih-text { grid-column: 1 / -1; grid-row: 2; }
}

/* Spielanalyse im Spielbericht */
.sa-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 12px; margin-bottom: 10px; }
.sa-team { display: inline-flex; align-items: center; gap: 6px; }
.sa-team i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sa-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.sa-feld { width: 100%; height: auto; display: block; border-radius: 6px; }
.sa-verlauf { width: 100%; height: auto; display: block; }
.sa-achse { font-size: 6px; fill: var(--text-muted); }
.sa-untertitel { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.sa-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.sa-legende span { display: inline-flex; align-items: center; gap: 5px; }
.sa-l { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1.5px solid var(--text-muted); }
.sa-l.sa-tor { background: var(--text-muted); border-color: #fff; }
.sa-l.sa-gehalten { background: rgba(139, 151, 167, 0.5); }
.sa-l.sa-geblockt { border-style: dashed; }
@media (max-width: 760px) { .sa-raster { grid-template-columns: 1fr; } }
.ak-wv { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-muted); margin: 8px 0; }
.ak-wv select { width: auto; min-width: 0; font-size: 12px; padding: 4px 8px; }
.ak-raten { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; padding: 6px 8px; border-left: 2px solid var(--accent-warning, #f59e0b); background: rgba(245, 158, 11, 0.06); border-radius: 4px; }
.tf-fenster { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.tf-fenster.offen { color: #34d399; }
.tf-fenster.zu { color: #f59e0b; }

/* Nationalität und Länderspiele in der Spielerakte */
.pd-national { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.pd-national .pd-nation { font-weight: 600; color: var(--text-soft); }
.pd-national .pd-caps { display: inline-flex; align-items: center; gap: 4px; }
.pd-national .pd-caps .ico { width: 14px; height: 14px; }
.pd-national .pd-abgestellt { color: var(--accent-info); font-weight: 600; }

/* Kabine: Kapitän, Führungsspieler, Grüppchen */
.kabine-card { padding: 16px; }
.kabine-card .kb-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.kabine-card .kb-kopf h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.kabine-card .kb-kopf h3 .ico { width: 18px; height: 18px; }
.kabine-card .kb-kapitaen { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); }
.kabine-card .kb-kapitaen select { max-width: 240px; }
.kabine-card .kb-stufen { display: grid; gap: 6px; font-size: 14px; margin-bottom: 12px; }
.kabine-card .kb-label { display: inline-block; min-width: 120px; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-right: 8px; }
.kabine-card .kb-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.kabine-card .kb-gruppe { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 12px; display: grid; gap: 6px; font-size: 14px; }
.kabine-card .kb-gruppe-kopf { display: flex; justify-content: space-between; gap: 8px; }
.kabine-card .kb-zeile { display: flex; align-items: center; gap: 6px; }
.kabine-card .kb-zeile .kb-label { min-width: 84px; }
.kabine-card .kb-balken { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.kabine-card .kb-balken i { display: block; height: 100%; }
.kabine-card .kb-gut { background: var(--accent-secondary); }
.kabine-card .kb-mittel { background: var(--accent-gold); }
.kabine-card .kb-schlecht { background: var(--accent-danger); }
.kabine-card .kb-wert { font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; color: var(--text-soft); }
.kabine-card .kb-hinweis { font-size: 12px; margin-top: 10px; }
/* Zweite Mannschaft (U23) */
.u23-letzte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.u23-ergebnis { display: inline-block; min-width: 38px; text-align: center; padding: 2px 6px; border-radius: 6px; font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.u23-s { background: rgba(34, 197, 94, .18); color: var(--success, #22c55e); }
.u23-u { background: rgba(148, 163, 184, .2); color: var(--text-muted); }
.u23-n { background: rgba(239, 68, 68, .18); color: var(--danger, #ef4444); }
.u23-tabelle tr { cursor: pointer; }
.u23-tabelle td, .u23-tabelle th { padding: 6px 8px; }
@media (max-width: 600px) {
    .kabine-card .kb-label { min-width: 0; display: block; margin-bottom: 2px; }
    .kabine-card .kb-zeile .kb-label { display: inline-block; min-width: 70px; }
}

.negotiation-inputs .neg-hinweis { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); margin: 0; }

.leih-option label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; cursor: pointer; }

/* Wetter im Livespiel und in der Taktikbesprechung */
.lm-wetter { font-size: 12px; color: var(--text-soft); text-align: center; padding: 2px 8px 0; }
.wetter-zeile strong { color: var(--text-main); }

/* Heatmap und Passnetz */
.pa-raster { grid-template-columns: 1fr 1fr; }
.sa-feld .pa-name { font-size: 2.6px; fill: rgba(255, 255, 255, 0.85); font-weight: 600; }
.pa-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
@media (max-width: 700px) { .pa-raster { grid-template-columns: 1fr; } }

/* Trainerprofil */
.tp-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.tp-werte { display: grid; gap: 8px; }
.tp-zeile { display: grid; grid-template-columns: 130px 1fr 28px; align-items: center; gap: 8px; font-size: 14px; }
.tp-zeile b { text-align: right; font-variant-numeric: tabular-nums; }
.tp-balken { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.tp-balken i { display: block; height: 100%; background: var(--accent-primary); }
.tp-seite { display: grid; gap: 8px; }
.tp-kennzahl { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.tp-kennzahl span { color: var(--text-muted); }
.tp-hinweis { font-size: 12px; margin-top: 12px; }
@media (max-width: 700px) { .tp-raster { grid-template-columns: 1fr; } .tp-zeile { grid-template-columns: 110px 1fr 24px; } }

.text-danger { color: var(--accent-danger); }

/* ---------------------------------------------------------- Einstieg
   Erste Schritte auf der Übersicht, Erklärkasten je Bereich,
   Kurzanleitung mit Begriffen (js/ui/uiEinstieg.js) */
#dashEinstieg { margin-bottom: 16px; }
.einstieg-karte { border-color: var(--border-strong); }
.einstieg-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.einstieg-kopf h3 { margin-bottom: 2px; }
.einstieg-unter { color: var(--text-muted); font-size: 13px; }
.einstieg-balken { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); margin: 12px 0 6px; overflow: hidden; }
.einstieg-balken i { display: block; height: 100%; background: var(--accent-primary); border-radius: 3px; transition: width .3s ease; }
.einstieg-liste { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 10px; }
.einstieg-schritt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border-color); }
.einstieg-schritt.naechster { border-color: var(--border-strong); background: rgba(var(--accent-rgb), 0.06); }
.einstieg-schritt.erledigt { opacity: .62; }
.einstieg-haken { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-light); display: grid; place-items: center; color: var(--accent-ink); margin-top: 1px; }
.einstieg-schritt.erledigt .einstieg-haken { background: var(--accent-primary); border-color: var(--accent-primary); }
.einstieg-haken .ico { width: 14px; height: 14px; }
.einstieg-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-soft); min-width: 0; }
.einstieg-text strong { color: var(--text-main); font-size: 14px; }
.einstieg-schritt .btn { flex: 0 0 auto; align-self: center; }

.einstieg-erklaerung { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid rgba(var(--info-rgb), 0.35); background: rgba(var(--info-rgb), 0.07); }
.einstieg-erklaerung strong { color: var(--text-main); }
.einstieg-erklaerung ul { margin: 6px 0 0 18px; display: grid; gap: 3px; color: var(--text-soft); font-size: 13.5px; line-height: 1.45; }
.einstieg-erklaerung-knoepfe { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }

.anleitung-abschnitt + .anleitung-abschnitt { margin-top: 18px; }
.anleitung-abschnitt h3 { font-size: 15px; margin-bottom: 6px; }
.anleitung-abschnitt p, .anleitung-liste { color: var(--text-soft); line-height: 1.5; font-size: 14px; }
.anleitung-liste { margin-left: 18px; display: grid; gap: 4px; }
.anleitung-begriffe { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13.5px; }
.anleitung-begriffe dt { font-weight: 600; color: var(--text-main); }
.anleitung-begriffe dd { color: var(--text-soft); line-height: 1.45; }

.wizard-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; color: var(--text-soft); line-height: 1.45; }
.wizard-check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 18px; accent-color: var(--accent-primary); }
.wizard-check strong { color: var(--text-main); }

@media (max-width: 640px) {
    .einstieg-erklaerung { flex-direction: column; gap: 10px; }
    .einstieg-erklaerung-knoepfe { flex-direction: row; }
    .anleitung-begriffe { grid-template-columns: 1fr; gap: 2px; }
    .anleitung-begriffe dd { margin-bottom: 8px; }
}

/* ---------------------------------------------------------- Nationalteam
   Freie Posten, Kader, Ergebnisse (js/ui/uiNational.js) */
#nationalInhalt { display: grid; gap: 16px; }
.nat-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.nat-kopf h3 { margin-bottom: 2px; }
.nat-unter { color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.nat-hinweis { color: var(--text-muted); font-size: 12.5px; margin-top: 10px; line-height: 1.45; }
.nat-ruf { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.nat-ruf span { font-size: 12px; color: var(--text-muted); }
.nat-ruf strong { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--accent-primary); }
.nat-angebot { border-color: var(--border-strong); background: rgba(var(--accent-rgb), 0.05); }
.nat-angebot p { color: var(--text-soft); margin: 4px 0 12px; }
.nat-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nat-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nat-tabelle td.num, .nat-tabelle th.num { text-align: right; }
.nat-aktion { text-align: right; white-space: nowrap; }
.nat-fehlt { color: var(--text-dim); font-size: 12.5px; }
.nat-vertrauen { display: flex; align-items: center; gap: 0; font-size: 14px; margin: 8px 0 4px; }
.nat-vertrauen .progress-fill.nat-knapp { background: var(--accent-danger); }
.nat-ausrichtung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 14px; }
.nat-ausrichtung .styled-select { width: auto; min-width: 150px; }
.nat-zaehler { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; font-size: 12.5px; color: var(--text-soft); }
.nat-zaehler strong { font-size: 14px; color: var(--text-main); }
.nat-zaehler .nat-zuwenig { color: var(--accent-gold); }
.nat-zaehler .nat-zuviel { color: var(--accent-danger); }
.nat-kader tr.nat-gewaehlt td { background: rgba(var(--accent-rgb), 0.05); }
.nat-kader input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-primary); }
.nat-verein { color: var(--text-muted); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.nat-fit { color: var(--accent-secondary); font-size: 12.5px; }
.nat-verletzt { color: var(--accent-danger); font-size: 12.5px; white-space: nowrap; }
.nat-spiele { display: grid; gap: 6px; }
.nat-spiel { display: grid; grid-template-columns: 56px 1fr; gap: 2px 12px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.025); border-left: 3px solid var(--border-light); }
.nat-spiel .nat-unter { grid-column: 2; }
.nat-sieg { border-left-color: var(--accent-secondary); }
.nat-niederlage { border-left-color: var(--accent-danger); }
.nat-ergebnis { grid-row: span 2; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-main); }
.nat-station { color: var(--text-soft); font-size: 13.5px; padding: 4px 0; }

@media (max-width: 640px) {
    .nat-kopf { flex-direction: column; }
    .nat-ruf, .nat-zaehler { align-items: flex-start; justify-content: flex-start; }
    .nat-kader .nat-verein { max-width: 110px; }
}

/* ---------------------------------------------------------- Postfach schmal
   Einspaltig klappt die Nachricht unter ihrem Eintrag auf (platziereInboxDetail) */
.inbox-detail.inbox-detail-zu { display: none; }
.inbox-item { scroll-margin-top: 82px; }
@media (max-width: 1200px) {
    .inbox-list { max-height: none; overflow: visible; padding-right: 0; }
    .inbox-layout { min-height: 0; }
    .inbox-item.offen { border-color: var(--accent-primary); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
    .inbox-detail.inbox-detail-inline {
        min-height: 0;
        margin-top: -6px;
        border-color: rgba(var(--accent-rgb), 0.45);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
}

/* Schreibtisch: mehrere Spieler unter einem Punkt, jeder ein Sprung in seine Akte */
.attention-gruppe { margin-bottom: 6px; }
.attention-gruppe .attention-item { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.attention-namen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: rgba(29, 37, 48, 0.35);
}
.attention-name {
    font: inherit;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(29, 37, 48, 0.85);
    color: #e2e8f0;
    cursor: pointer;
}
.attention-name small { color: var(--text-muted); margin-left: 2px; }
.attention-name:hover { border-color: var(--accent-gold, #f59e0b); }

/* Sprungziel: kurz aufleuchten, damit das Auge weiß, wohin es geführt wurde */
.sprung-ziel { animation: sprung-ziel 2.4s ease-out; }
@keyframes sprung-ziel {
    0%, 30% { box-shadow: 0 0 0 2px var(--accent-gold, #f59e0b); }
    100% { box-shadow: 0 0 0 2px transparent; }
}
/* Die Kopfleiste steht fest - ein Sprungziel hält Abstand zu ihr */
.negotiation-card, #pdVertrag { scroll-margin-top: 120px; }
@media (min-width: 1201px) { .negotiation-card, #pdVertrag { scroll-margin-top: 24px; } }

/* Sommerpause: Wer verlängert werden muss, steht im Saisonabschluss mit Namen */
.se-pause { margin-top: 12px; text-align: left; }
.se-pause h4 { margin-bottom: 6px; }
.se-pause p { font-size: 13px; color: var(--text-muted); margin: 0 0 8px; }
.se-namen { border: none; padding: 0; background: none; }
#modalSeasonEnd .modal-footer { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.vertrag-endet {
    font-size: 12px;
    color: #fbbf24;
    margin: -6px 0 12px;
}
/* Vertragsverlängerung: gewünschte Rolle */
.ext-rolle { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; }
.ext-rolle.warnung { color: #fbbf24; }
/* Vorvertrag in der Akte eines fremden Spielers */
.vv-hinweis { margin: 10px 0 0; }
.vv-zeile { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
/* Kopfwerte in der Akte: über beide Spalten, innen zweispaltig */
/* Arbeitserlaubnis (England) in Akte und Transferdialog */
.ae-hinweis { margin: 10px 0 0; font-size: 13px; }
.ae-hinweis summary { cursor: pointer; font-weight: 600; }
.ae-hinweis.ae-nein { border-color: var(--accent-danger); }
.ae-teile { margin: 8px 0 6px 18px; padding: 0; font-size: 12px; }
.ae-teile li { margin: 2px 0; }

/* Entwicklungsbericht im Postfach */
.entwicklungsbericht .eb-titel { font-size: 13px; margin: 14px 0 6px; }
.entwicklungsbericht .eb-titel:first-child { margin-top: 0; }
.eb-liste { display: flex; flex-direction: column; gap: 4px; }
.eb-zeile {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(29, 37, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.eb-zeile.row-clickable { cursor: pointer; }
.eb-zeile.row-clickable:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.eb-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 13px; }
.eb-name { min-width: 0; }
.eb-zahl { white-space: nowrap; font-size: 12px; }
.eb-werte { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 11px; }
.eb-werte span { white-space: nowrap; }
.eb-plus { color: #34d399; }
.eb-minus { color: #f87171; }
.eb-gleich { font-size: 12px; margin-top: 8px; }

/* Akademie: Plätze, Probetrainings und Sichtungstag */
.akademie-zugang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(29, 37, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.akademie-zugang-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.akademie-zugang-text span { font-size: 11px; color: var(--text-muted); }
.talent-quelle {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    color: #7dd3fc;
    margin-left: 4px;
    white-space: nowrap;
}

/* Akademie: Jugendvertrag, Werber und die Knöpfe je Talent */
.talent-profis { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; }
.talent-vertrag { font-size: 12px; }
.talent-anfrage {
    margin-top: 4px;
    font-size: 11px;
    color: #fbbf24;
}
.talent-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }

/* Talente anderer Akademien */
.fremde-kopf { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.fremde-kopf span { font-size: 11px; }
.fremde-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fremde-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fremde-name { font-size: 13px; min-width: 0; }
.fremde-name .text-muted { font-size: 11px; margin-left: 4px; }
.fremde-urteil { grid-column: 1; font-size: 11px; color: var(--text-muted); }
.fremde-aktion { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; }
.fremde-leer { font-size: 12px; margin: 8px 0 0; }

/* Akademie am Handy: jedes Talent als Karte statt als zerquetschte Zeile */
@media (max-width: 760px) {
    .akademie-tabelle thead { display: none; }
    .akademie-tabelle, .akademie-tabelle tbody { display: block; width: 100%; }
    .akademie-tabelle tr {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 10px;
        row-gap: 6px;
        padding: 10px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .akademie-tabelle td { display: block; padding: 0 !important; border: none !important; }
    .akademie-tabelle td:nth-child(1), .akademie-tabelle td:nth-child(3) { grid-column: 1; }
    .akademie-tabelle td:nth-child(2), .akademie-tabelle td:nth-child(4) { grid-column: 2; justify-self: end; }
    .akademie-tabelle td:nth-child(5), .akademie-tabelle td:nth-child(6), .akademie-tabelle td[colspan] { grid-column: 1 / -1; }
    .akademie-tabelle td:nth-child(6) { display: flex; gap: 8px; flex-wrap: wrap; }
    .akademie-tabelle td:nth-child(4)[colspan] { grid-column: 2; }
}

/* Sportdirektor: Baustellen, Beratung und Vorschläge */
.sd-text { font-size: 13px; margin: 0 0 8px; }
.sd-baustellen { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.sd-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 10px 0; }
.sd-form label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); }
.sd-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-auftrag { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.sd-auftrag .btn { margin-left: 6px; }
.sd-liste { display: flex; flex-direction: column; gap: 8px; }
.sd-karte {
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(29, 37, 48, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.sd-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.sd-kopf strong { font-size: 14px; margin-right: 6px; }
.sd-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sd-sterne { white-space: nowrap; }
.sd-grund { font-size: 12px; margin: 6px 0 8px; line-height: 1.5; }
.sd-aktionen { display: flex; gap: 8px; align-items: center; }

/* Saisonziel in der Vorbereitung */
.ziel-kopf { font-size: 14px; margin-bottom: 4px; }
.ziel-prognose { font-size: 13px; margin: 8px 0; }
.ziel-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }

/* Budget umschichten in den Finanzen */
.budget-umschichten { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.budget-umschichten h4 { font-size: 13px; margin: 0 0 6px; }
.fin-raten:empty { display: none; }
.fin-raten { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fin-raten h4 { font-size: 13px; margin: 0 0 6px; }
.raten-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.raten-liste li { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; padding: 6px 8px; border-radius: 6px; background: var(--bg-elevated, rgba(255, 255, 255, 0.03)); border-left: 2px solid var(--line); }
.raten-liste li.raten-zahlen { border-left-color: var(--accent-danger, #f87171); }
.raten-liste li.raten-erhalten { border-left-color: var(--accent-success, #34d399); }
.raten-liste small { color: var(--text-muted); margin-left: 4px; }
.tt-ohne { display: block; margin: 10px auto 0; }
.fin-regeln { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fin-regeln h4 { font-size: 13px; margin: 0 0 6px; }
.fr-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fr-kopf strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.fr-kopf span { font-size: 13px; color: var(--text-secondary, var(--text-muted)); }
.fr-balken { position: relative; height: 8px; border-radius: 4px; background: var(--bg-elevated, rgba(255, 255, 255, 0.06)); margin-bottom: 10px; }
.fr-balken i { display: block; height: 100%; border-radius: 4px; background: var(--accent-success, #34d399); }
.fr-balken i.fr-gelb { background: var(--accent-warning, #fbbf24); }
.fr-balken i.fr-rot { background: var(--accent-danger, #f87171); }
.fr-balken b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-primary, #e5e7eb); opacity: 0.7; }
.fr-balken b.fr-straf { background: var(--accent-danger, #f87171); }
.fr-auflage { font-size: 13px; margin: 8px 0; padding: 6px 8px; border-radius: 6px; border-left: 2px solid var(--accent-danger, #f87171); background: var(--bg-elevated, rgba(255, 255, 255, 0.03)); }
.fr-verlauf li.fr-folge-ok { border-left-color: var(--accent-success, #34d399); }
.fr-verlauf li.fr-folge-verwarnung { border-left-color: var(--accent-warning, #fbbf24); }
.fr-verlauf li.fr-folge-strafe, .fr-verlauf li.fr-folge-abzug { border-left-color: var(--accent-danger, #f87171); }
.umschichten-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 8px 0; }
.umschichten-zeile label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.umschichten-zeile input { width: 150px; }
.umschichten-vorschau { font-size: 12px; color: var(--text-muted); padding-bottom: 8px; }
.umschichten-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

/* Mannschaftsbesprechung in der Kabinen-Karte */
.kb-besprechung { margin: 10px 0 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kb-besprechung-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.kb-antwort { font-size: 13px; margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.kb-antwort.kba-gut { border-left: 3px solid #22c55e; }
.kb-antwort.kba-gemischt { border-left: 3px solid #f59e0b; }
.kb-antwort.kba-schlecht { border-left: 3px solid #ef4444; }
.kb-antwort .text-muted { display: block; font-size: 12px; margin-top: 2px; }
.cd-sterne-hinweis { font-size: 11.5px; color: var(--text-muted); margin: -2px 0 6px; }
.player-detail-ziel { font-size: 11.5px; color: var(--accent, #38bdf8); margin-top: 2px; }

/* Anfrage an den Vorstand (Dashboard) */
.board-anfrage { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.board-anfrage .ba-kopf { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }
.board-anfrage .ba-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.board-anfrage select { flex: 1 1 200px; min-width: 0; }

/* Auszeichnungen */
.preise-karte { margin-bottom: 16px; }
.preise-karte h4 { font-size: 13px; color: var(--text-muted); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.preis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.preis-liste li { display: grid; grid-template-columns: 86px 1fr; gap: 3px 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(255, 255, 255, 0.03)); font-size: 13px; }
.preis-liste li > span:not(.preis-monat) { grid-column: 2; min-width: 0; }
.preis-monat { grid-column: 1; grid-row: 1 / span 3; font-weight: 700; color: var(--text-muted); }
.preis-name { background: none; border: 0; padding: 0; color: var(--text-main, inherit); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.preis-name.eigen { color: var(--accent-primary); }
.preis-liste small, .elf-spieler small { color: var(--text-muted); }
.elf-saison { margin-top: 12px; padding: 12px 8px; border-radius: 12px; background: linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(34, 197, 94, 0.05)); border: 1px solid rgba(34, 197, 94, 0.25); display: grid; gap: 10px; }
.elf-reihe { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.elf-spieler { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 12px; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.elf-spieler small { font-size: 10.5px; }
.akte-preise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.akte-preise small { color: var(--text-muted); }

/* Vereinschronik */
.chronik-karte h4 { font-size: 13px; color: var(--text-muted); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.chronik-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 20px; }
.chronik-zeile { display: grid; grid-template-columns: 128px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.chronik-zeile span { color: var(--text-muted); }
.chronik-zeile strong { font-weight: 600; min-width: 0; }
.chronik-zeile small, .chronik-liste small, .chronik-titel small { color: var(--text-muted); font-weight: 400; }
.chronik-liste { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.chronik-liste li { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: baseline; }
.chronik-liste b { font-weight: 700; white-space: nowrap; }
.chronik-liste .preis-name[disabled] { cursor: default; color: var(--text-muted); }
.chronik-titel { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.chronik-titel span { padding: 6px 10px; border-radius: 999px; background: rgba(250, 204, 21, 0.12); border: 1px solid rgba(250, 204, 21, 0.3); font-size: 13px; font-weight: 600; }
.chronik-leer { font-size: 13px; margin: 6px 0; }
.pd-verein strong { white-space: nowrap; }
.karussell-karte { margin-bottom: 16px; }

/* Spielvorschau auf der Karte "Nächstes Spiel" */
.nm-vorschau { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.nm-vorschau summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); list-style-position: inside; padding: 4px 0; }
.nm-vorschau[open] summary { color: var(--text-main, inherit); }
.sv-raster { display: grid; gap: 2px; margin-top: 6px; }
.sv-zeile { display: grid; grid-template-columns: 128px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.sv-zeile span { color: var(--text-muted); }
.sv-zeile strong { font-weight: 600; min-width: 0; }
.sv-zeile small { color: var(--text-muted); font-weight: 400; }

/* Partnervereine */
.partner-karte h4 { font-size: 13px; color: var(--text-muted); margin: 10px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.partner-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 20px; }
.partner-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.partner-liste li, .partner-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(255, 255, 255, 0.03)); font-size: 13px; margin-bottom: 6px; }
.partner-liste small, .partner-zeile small, .partner-kopf small { color: var(--text-muted); }
.partner-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.partner-zeile .styled-select { flex: 1 1 160px; min-width: 0; }
.inv-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; margin: 8px 0; }
.inv-werte div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(255, 255, 255, 0.03)); }
.inv-werte span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.inv-werte strong { font-size: 14px; }
.inv-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.inv-auflagen, .inv-historie { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.inv-auflagen li { padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(255, 255, 255, 0.03)); }
.inv-auflagen small, .inv-historie li { color: var(--text-muted); }
.inv-balken { height: 6px; border-radius: 3px; background: rgba(127, 127, 127, 0.2); margin: 6px 0 4px; overflow: hidden; }
.inv-balken span { display: block; height: 100%; background: var(--primary, #3b82f6); }
.inv-abzug { color: var(--danger, #ef4444); font-weight: 600; font-size: 13px; }
.tb-abzug { color: var(--danger, #ef4444); font-size: 10px; margin-left: 2px; }
.ehem-abschied { border: 1px solid var(--primary, #3b82f6); }
.pre-cand-ehem { display: block; font-size: 12px; color: var(--primary, #3b82f6); font-weight: 600; margin: 2px 0; }
.vis-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; background: var(--surface-2, rgba(255, 255, 255, 0.03)); margin-bottom: 6px; font-size: 13px; }
.vis-zeile > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vis-zeile small { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.vis-zeile em { font-style: normal; font-size: 12px; color: var(--text-muted); }
.vis-fern { border: 1px solid var(--primary, #3b82f6); }
.vis-marke { flex-shrink: 0; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.vis-marke.gut { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.vis-marke.schlecht { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.vis-marke.offen { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); }
.kp-karte > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
.kp-karte > summary::-webkit-details-marker { display: none; }
.kp-karte > summary h3 { margin: 0; }
.kp-hinweise { margin: 10px 0 6px; }
.kp-raster { display: grid; grid-template-columns: minmax(70px, 0.8fr) repeat(3, minmax(0, 1fr)); gap: 4px; font-size: 12px; }
.kp-kopf { font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 2px 4px; }
.kp-teil { font-weight: 600; padding: 6px 4px; font-size: 11.5px; hyphens: auto; overflow-wrap: anywhere; }
.kp-zelle { border-radius: 6px; padding: 5px 6px; background: var(--surface-2, rgba(255, 255, 255, 0.03)); min-width: 0; }
.kp-zelle.kp-luecke { border-left: 3px solid #ef4444; }
.kp-zelle.kp-duenn { border-left: 3px solid #f59e0b; }
.kp-zelle.kp-gut { border-left: 3px solid #22c55e; }
.kp-zahl { font-weight: 700; margin-bottom: 2px; }
.kp-zahl small { font-weight: 400; color: var(--text-muted); }
.kp-spieler { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
.kp-spieler.stamm { color: var(--text-primary, inherit); font-weight: 600; }
.kp-spieler small { color: var(--text-muted); font-weight: 400; }

/* Weitere Vertragsklauseln (Verlängerung und Verhandlung) */
.klausel-felder { grid-column: 1 / -1; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.klausel-felder summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.klausel-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.klausel-raster > * { min-width: 0; }
.klausel-raster label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted); }
.klausel-raster select, .klausel-raster input[type="number"] { width: 100%; }
.klausel-raster .kl-option { flex-direction: row; align-items: center; gap: 6px; grid-column: 1 / -1; font-size: 12px; cursor: pointer; }
.klausel-felder .kl-wert { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; }
.klausel-felder .kl-option input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.finance-stat-row.kl-zeile { gap: 12px; align-items: flex-start; }
.finance-stat-row.kl-zeile strong { white-space: normal; text-align: right; min-width: 0; font-size: 13px; line-height: 1.45; }

/* Gegneranweisungen in der Taktikbesprechung */
.mp-anweisungen { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.mp-anweisungen summary { cursor: pointer; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mp-anweisungen #btnAnwEmpfehlung { margin-bottom: 8px; }
.ga-liste { display: grid; gap: 8px; }
.ga-zeile { border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: grid; gap: 6px; min-width: 0; }
.ga-zeile.aktiv { border-color: #38bdf8; background: rgba(56, 189, 248, 0.08); }
.ga-kopf { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; flex-wrap: wrap; }
.ga-kopf .text-muted { font-size: 11px; }
.ga-empfehlung { font-size: 11px; color: #4ade80; }
.ga-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: end; }
.ga-feld { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11px; color: var(--text-muted); }
.ga-wahl select { width: 100%; min-width: 0; font-size: 12px; }
.ga-fuss { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.ga-fuss input { width: auto; margin: 0; }

/* Jugendvorschau des Nachwuchsleiters */
.jugend-vorschau { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.jugend-vorschau.jv-golden { border-color: #facc15; background: rgba(250, 204, 21, 0.08); }
.jugend-vorschau.jv-gut { border-color: #4ade80; background: rgba(74, 222, 128, 0.06); }
.jv-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; }
.jv-kopf .text-muted { font-size: 11px; }
.jv-text { margin: 0; font-size: 13px; line-height: 1.45; }
.jv-pos { display: flex; flex-wrap: wrap; gap: 4px; }
.jv-hinweis { margin: 0; font-size: 11px; color: var(--text-muted); }

/* Datenzentrale und Spielervergleich. Reihenfarben auf der dunklen Fläche
   geprüft: Blau = eigene Seite / Spieler A, Orange = Gegner / Spieler B */
:root { --reihe-a: #3987e5; --reihe-b: #d95926; }
.dz-karte { display: grid; gap: 10px; min-width: 0; }
.dz-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dz-kopf h3 { margin: 0; }
.dz-wahl { display: flex; gap: 6px; }
.dz-leer, .dz-fazit { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.dz-fazit strong { color: var(--text-main); }
.dz-tabelle { max-width: 100%; overflow-x: auto; }
.dz-tabelle th { cursor: pointer; white-space: nowrap; user-select: none; text-transform: none; letter-spacing: 0; }
.dz-tabelle th, .dz-tabelle td { padding: 6px 8px; font-size: 12px; }
.dz-tabelle th.dz-sortiert { color: var(--text-main); }
.dz-tabelle td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dz-tabelle td.dz-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.dz-tabelle tr.dz-eigen td { background: rgba(var(--accent-rgb), 0.08); font-weight: 600; }
.dz-link { background: none; border: 0; padding: 0; color: var(--text-main); font: inherit; cursor: pointer; text-align: left; text-decoration: underline dotted; }
.dz-legende { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); }
.dz-legende span { display: inline-flex; align-items: center; gap: 6px; }
.dz-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dz-punkt.dz-fuer, rect.dz-fuer, .vg-balken.dz-fuer { background: var(--reihe-a); fill: var(--reihe-a); }
.dz-punkt.dz-gegen, rect.dz-gegen, .vg-balken.dz-gegen { background: var(--reihe-b); fill: var(--reihe-b); }
.dz-form { width: 100%; height: auto; display: block; }
.dz-form rect:hover { opacity: 0.8; }
.dz-grundlinie { stroke: var(--border-light); stroke-width: 1; }
.dz-achse { fill: var(--text-muted); font-size: 8px; }
.dz-erg { fill: var(--text-main); font-size: 9px; font-weight: 600; }
.dz-erg-N { fill: var(--text-muted); }
.pd-vergleich { width: 100%; margin: -6px 0 14px; }
.vg-auswahl { display: grid; gap: 6px; margin-bottom: 12px; font-size: 12px; color: var(--text-muted); }
.vg-auswahl select, .vg-auswahl input { width: 100%; }
.vg-treffer { display: grid; gap: 4px; }
.vg-koepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.vg-person { display: grid; gap: 2px; font-size: 12px; color: var(--text-muted); min-width: 0; }
.vg-person strong { color: var(--text-main); font-size: 14px; overflow-wrap: anywhere; }
.vg-person.vg-b { text-align: right; justify-items: end; }
.vg-titel { margin: 12px 0 6px; font-size: 13px; color: var(--text-muted); }
.vg-werte { display: grid; gap: 4px; }
.vg-zeile { display: grid; grid-template-columns: 52px 1fr 92px 1fr 52px; align-items: center; gap: 6px; font-size: 12px; }
.vg-zeile.vg-zahlen { grid-template-columns: 1fr 120px 1fr; }
.vg-wert { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.vg-wa { text-align: right; }
.vg-wb { text-align: left; }
.vg-zahlen .vg-wa, .vg-zahlen .vg-wb { text-align: center; }
.vg-besser { color: var(--text-main); font-weight: 700; }
.vg-label { text-align: center; color: var(--text-main); }
.vg-spur { position: relative; height: 10px; background: rgba(148, 163, 184, 0.12); border-radius: 3px; overflow: hidden; }
.vg-spur .vg-balken { position: absolute; top: 0; bottom: 0; }
.vg-links .vg-balken { right: 0; border-radius: 3px 0 0 3px; }
.vg-rechts .vg-balken { left: 0; border-radius: 0 3px 3px 0; }
.vg-spanne { position: absolute; top: 3px; bottom: 3px; background: rgba(255, 255, 255, 0.45); border-radius: 2px; }

/* Jobmarkt des Trainers */
.jm-liste { display: grid; gap: 8px; }
.jm-angebot, .jm-stelle { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; flex-wrap: wrap; }
.jm-angebot { border-color: rgba(var(--accent-rgb), 0.6); background: rgba(var(--accent-rgb), 0.06); }
.jm-angebot > div:first-child, .jm-stelle > div:first-child { min-width: 0; flex: 1 1 180px; font-size: 13px; }
.jm-knoepfe { display: flex; gap: 6px; }
.jm-klein { font-size: 11px; }
.jm-titel { margin: 12px 0 6px; font-size: 13px; color: var(--text-muted); }
.jm-fuss { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* Laufbahn in der Spielerakte */
.pd-laufbahn { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.pd-laufbahn summary { cursor: pointer; font-weight: 600; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.pd-laufbahn summary .text-muted { font-weight: 400; font-size: 11px; }
.pd-laufbahn .lb-tabelle th, .pd-laufbahn .lb-tabelle td { padding: 5px 6px; font-size: 12px; white-space: nowrap; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lb-tabelle td.lb-verein { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.lb-tabelle tr.lb-laufend td { font-style: italic; }
.lb-tabelle tr.lb-eigen td { background: rgba(var(--accent-rgb), 0.06); }
.lb-tabelle tr.lb-summe td { font-weight: 700; border-top: 1px solid var(--line); }
.lb-hinweis { font-size: 11px; margin: 6px 0 0; }

/* Urlaub: Ziel wählen */
.ul-text { font-size: 13px; margin: 0 0 12px; }
.ul-ziele { display: grid; gap: 8px; }
.ul-ziel { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-card-hover); color: var(--text-main); cursor: pointer; text-align: left; font: inherit; }
.ul-ziel:hover { border-color: rgba(var(--accent-rgb), 0.7); }
.ul-ziel span { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ul-anhalten { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.ul-anhalten input { margin-top: 2px; }

/* Gala des Jahres */
#statsJahrespreise .preis-liste + .preis-liste { margin-top: 8px; }
#statsJahrespreise .preis-liste li { grid-template-columns: 96px 1fr; }
.jp-titel { display: block; margin-top: 2px; font-size: 11px; }

/* Saisonbilanz je Wettbewerb in der Akte */
.pd-saison-teile { display: block; flex-basis: 100%; margin-top: 2px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }

/* Meldeliste */
.ml-teil { margin-top: 12px; }
.ml-teil h4 { margin: 0 0 4px; }
.ml-teil h4 small { color: var(--text-muted); font-weight: 400; }
.ml-zahlen { margin: 0 0 6px; font-size: 13px; color: var(--text-muted); }
.ml-fehler { color: var(--status-critical, #f87171); font-size: 13px; margin: 2px 0; }
.ml-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ml-liste li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface-2, rgba(255, 255, 255, 0.03)); font-size: 13px; }
.ml-wahl { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.ml-wahl input, .ml-b input { width: auto; margin: 0; }
.ml-pos { display: inline-block; min-width: 26px; font-weight: 700; color: var(--text-muted); }
.ml-wahl small { color: var(--text-muted); white-space: nowrap; }
.ml-marken { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ml-marke { font-size: 11px; color: var(--text-muted); }
.ml-b { display: flex; align-items: center; gap: 3px; font-size: 12px; }
.ml-knoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* Fünfjahreswertung */
#statsKoeffizient .kf-tabelle { width: 100%; min-width: 0; }
#statsKoeffizient .kf-tabelle th, #statsKoeffizient .kf-tabelle td { padding: 6px 4px; text-align: right; font-size: 12px; text-transform: none; letter-spacing: 0; }
#statsKoeffizient .kf-tabelle th:nth-child(2), #statsKoeffizient .kf-tabelle td:nth-child(2) { text-align: left; }
#statsKoeffizient .kf-tabelle th small { font-weight: 400; color: var(--text-muted); }
.kf-reihe { display: block; color: var(--text-muted); font-size: 11px; }
#statsKoeffizient .kf-tabelle .eigene-zeile td { color: var(--accent-primary, #a3e635); }

/* EM und WM */
.tu-ko, .tu-raster { display: grid; gap: 10px; margin-top: 8px; }
.tu-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tu-gruppe h5, .tu-runde h5 { margin: 0 0 4px; font-size: 12px; color: var(--text-muted); text-transform: none; }
.tu-zeile { display: flex; justify-content: space-between; gap: 6px; padding: 4px 8px; border-radius: 6px; background: var(--surface-2, rgba(255, 255, 255, 0.03)); font-size: 12.5px; margin-bottom: 2px; }
.tu-zeile small { color: var(--text-muted); }
.tu-zeile.weiter span:first-child { font-weight: 700; }
.tu-zeile.eigen { outline: 1px solid var(--accent-primary, #a3e635); }
.tu-gruppen summary { cursor: pointer; margin-top: 10px; font-weight: 600; }

/* Taktik am Handy: Bereiche statt einer endlosen Seite. Am großen
   Bildschirm steht alles nebeneinander, die Reiter bleiben aus. */
.taktik-bereiche { display: none; }
@media (max-width: 768px) {
    .taktik-bereiche {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        margin: 14px 0 4px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .taktik-bereiche::-webkit-scrollbar { display: none; }
    .taktik-bereich-btn {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid var(--border-color);
        background: transparent;
        color: var(--text-secondary, #cbd5e1);
        font-weight: 600;
        font-size: 13px;
    }
    .taktik-bereich-btn.active {
        background: var(--accent-color, #a3e635);
        border-color: transparent;
        color: #0b1210;
    }
    #pane-tactics:not([data-bereich="aufstellung"]) [data-taktik-bereich="aufstellung"],
    #pane-tactics:not([data-bereich="anweisungen"]) [data-taktik-bereich="anweisungen"],
    #pane-tactics:not([data-bereich="stil"]) [data-taktik-bereich="stil"],
    #pane-tactics:not([data-bereich="linien"]) [data-taktik-bereich="linien"],
    #pane-tactics:not([data-bereich="standards"]) [data-taktik-bereich="standards"] { display: none !important; }
    /* Die Anweisungen stehen außerhalb der Seitenleiste - die leere Leiste nicht zeigen */
    #pane-tactics[data-bereich="anweisungen"] .tactics-sidebar-controls { display: none; }
    /* Fünf Spieler nebeneinander passen nur mit kürzeren Namensschildern */
    .pitch-node-name { max-width: 66px; font-size: 10px; padding: 2px 4px; }
}

/* Regionalscouts in der Länderwissen-Übersicht */
.region-kopf { margin: 18px 0 6px; font-size: 15px; display: flex; gap: 8px; align-items: baseline; }
.region-liste { display: flex; flex-direction: column; gap: 6px; }
.region-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 10px; }
.region-zeile.aktiv { border-color: rgba(163, 230, 53, 0.45); background: rgba(163, 230, 53, 0.06); }
.region-name { flex: 1; font-weight: 600; }
.region-status { font-size: 12px; white-space: nowrap; }

/* Trainingslager und Eingewöhnung */
.lager-optionen { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lager-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; }
.lager-gebucht { color: #a3e635; font-weight: 600; margin: 6px 0; }
.eingewoehnung-karte { padding: 14px; background: rgba(163, 230, 53, 0.05); border: 1px solid rgba(163, 230, 53, 0.25); }
.eingewoehnung-karte h4 { font-size: 13px; margin-bottom: 8px; color: #a3e635; display: flex; align-items: center; gap: 6px; }
.eingewoehnung-karte .eingewoehnung-wert { margin-left: auto; color: #f8fafc; }
.eingewoehnung-karte p { font-size: 12px; color: #e2e8f0; line-height: 1.5; margin: 8px 0 0; }
.eingewoehnung-karte .kb-balken { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.eingewoehnung-karte .kb-balken i { display: block; height: 100%; }
.eingewoehnung-karte .kb-gut { background: var(--accent-secondary); }
.eingewoehnung-karte .kb-mittel { background: var(--accent-gold); }
.eingewoehnung-karte .kb-schlecht { background: var(--accent-danger); }
.sp-erklaerung { font-size: 12px; line-height: 1.5; color: #cbd5e1; margin: 6px 0 10px; padding: 8px 10px; border-left: 3px solid #38bdf8; background: rgba(56, 189, 248, 0.06); border-radius: 6px; }
.talent-quelle.talent-ausnahme { background: rgba(250, 204, 21, 0.15); color: #facc15; border-color: rgba(250, 204, 21, 0.4); }

/* Einstellungen: Sound und Musik */
.ton-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.ton-regler { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.ton-regler input[type="range"] { width: 100%; max-width: 320px; accent-color: var(--accent, #b8f135); }

/* Reiter Jugend: Akademie und Talente über die volle Breite, darunter
   Talente anderer Akademien und Schwerpunkte nebeneinander, dann die U19 */
.jugend-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1100px) {
    .jugend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jugend-grid > .jugend-breit { grid-column: 1 / -1; }
}
.header-tag.header-tag-warnung { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.1); }
.fremde-hinweis { font-size: 12px; margin: 4px 0 0; }

/* Vorstand, Fans & Medien: Ziel und Balken teilen sich ein Raster. Vorher
   nahm jede Beschriftung so viel Platz, wie sie brauchte - neben
   "Vorstandszufriedenheit" blieb der kürzeste Balken. Am Handy steht die
   Beschriftung über dem Balken. */
.goal-balken {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 3.2em;
    align-items: center;
    column-gap: 14px;
    row-gap: 12px;
    font-size: 14px;
}
.goal-balken > .goal-item { display: contents; }
.goal-balken .progress-bar-lg { margin: 0; }
.goal-balken .goal-val { grid-column: 2 / -1; }
.goal-balken .goal-pct { text-align: right; font-variant-numeric: tabular-nums; }
.goal-balken > .fan-stimmen { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) {
    .goal-balken { grid-template-columns: minmax(0, 1fr) 3.2em; row-gap: 4px; }
    .goal-balken .goal-label { grid-column: 1 / -1; margin-top: 8px; }
    .goal-balken > .goal-item:first-child .goal-label { margin-top: 0; }
    .goal-balken .goal-val { grid-column: 1 / -1; }
}

/* Die Spielerakte: Auf breiten Bildschirmen war sie auf 600 Pixel
   beschränkt - eine schmale Spalte mitten im Bild, in der man weit scrollen
   musste. Jetzt nutzt sie die Breite: Im Überblick stehen links Werte und
   Laufbahn, rechts Positionen, Eigenheiten und Bilanz; unter "Vertrag" die
   Lage links und die Verhandlung rechts. Am Handy bleibt alles untereinander. */
.modal-akte { max-width: 1180px; }
.pd-spalten { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 22px; }
.pd-spalte { min-width: 0; }
.pd-werte { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 10px; }
.pd-werte > * { min-width: 0; }
@media (min-width: 1000px) {
    .pd-spalten { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
    .pd-spalten.pd-eine-spalte { grid-template-columns: minmax(0, 1fr); }
    [data-pd-tab="vertrag"] .pd-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-pd-tab="vertrag"] .pd-spalte > #pdVertrag { margin-top: 0 !important; }
    .pd-werte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pd-werte .pd-wertliste { grid-template-columns: minmax(0, 1fr); }
}

/* Die Wertetafel: Technik (beim Torwart die Torwartwerte), Kopf und Körper.
   Breit drei Spalten nebeneinander, schmal jede Karte über die volle Breite
   mit zwei Spalten Werten. Farbe nach Höhe, wie im Vorbild. */
.pd-wertkarte { padding: 12px 14px; }
.pd-wertkarte h4 { font-size: 13px; margin-bottom: 8px; color: var(--text-muted); }
.pd-wertliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.pd-wert { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.06)); font-size: 12.5px; color: var(--text-muted); }
.pd-wert span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-wert strong { flex: 0 0 auto; color: var(--text-main, #e5e7eb); font-variant-numeric: tabular-nums; }
.pd-wert strong.wert-top { color: #a3e635; }
.pd-wert strong.wert-gut { color: #86efac; }
.pd-wert strong.wert-schwach { color: #f87171; }
.pd-grundwerte { font-size: 11.5px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
.pd-grundwerte strong { color: var(--text-main, #e5e7eb); }
@media (max-width: 360px) { .pd-wertliste { grid-template-columns: minmax(0, 1fr); } }

/* Unterbau: U23 und U19 mit Bilanz, die Kandidaten für die Profis */
.unterbau-titel { font-size: 13px; margin: 14px 0 6px; color: var(--text-muted); }
.u-form-top { color: #a3e635; font-weight: 700; }
.gs-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.unterbau-knoepfe { display: flex; gap: 6px; justify-content: flex-end; }
.unterbau-nominiert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin: 8px 0 4px;
    border: 1px solid var(--border-color); border-left: 3px solid var(--accent-info); border-radius: var(--radius-sm); background: var(--bg-card); }
.unterbau-nominiert small { flex-basis: 100%; }
.unterbau-nom { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; flex-basis: 100%; }
/* Personalnot über der Aufstellung */
.taktik-unterbau { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin: 0 0 12px;
    border: 1px solid var(--border-color); border-left: 3px solid var(--accent-danger); border-radius: var(--radius-sm); background: var(--bg-card); }
.taktik-unterbau[hidden] { display: none; }
.tu-titel { font-weight: 600; margin-bottom: 4px; }
.tu-liste { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.tu-spieler { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.unterbau-nominiert, .unterbau-nom { font-size: 13px; }
.unterbau-nominiert strong { flex-basis: 100%; }
.taktik-unterbau .btn-sm, .unterbau-nominiert .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.2; }
.pd-unterbau-bilanz { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; }
.u19-kader td, .u23-tabelle td { white-space: nowrap; }
.u19-kader td:first-child, .u23-tabelle td:first-child { white-space: normal; }
/* Am Handy: Alter, Stärke und Tore weg (stehen in der Akte), kleinere Knöpfe -
   und wird es doch zu breit, scrollt die Tabelle für sich */
@media (max-width: 640px) {
    .u23-tabelle th:nth-child(3), .u23-tabelle td:nth-child(3),
    .u23-tabelle th:nth-child(4), .u23-tabelle td:nth-child(4),
    .u23-tabelle th:nth-child(6), .u23-tabelle td:nth-child(6),
    .u19-kader th:nth-child(3), .u19-kader td:nth-child(3),
    .u19-kader th:nth-child(4), .u19-kader td:nth-child(4),
    .u19-kader th:nth-child(6), .u19-kader td:nth-child(6) { display: none; }
    .u23-tabelle td, .u23-tabelle th, .u19-kader td, .u19-kader th { padding: 6px 5px; font-size: 12px; }
    .u23-tabelle .btn-sm, .u19-kader .btn-sm { padding: 5px 8px; font-size: 11px; }
    #pane-squad #squadReserve .table-container, #jugendligaKarte .table-container { overflow-x: auto; }
}

/* Mehr Filter im Transfermarkt, Filter im Leihmarkt */
.tf-mehr { flex: 1 1 100%; }
.tf-mehr > summary { cursor: pointer; font-size: 13px; color: var(--text-soft); padding: 6px 2px; list-style: none; }
.tf-mehr > summary::-webkit-details-marker { display: none; }
.tf-mehr > summary::before { content: "▸ "; color: var(--text-muted); }
.tf-mehr[open] > summary::before { content: "▾ "; }
.tf-zahl { color: var(--accent-primary); font-weight: 600; }
.tf-mehr-felder { margin-top: 6px; }
@media (max-width: 640px) {
    .tf-mehr-felder .styled-select, .lm-filter .styled-select { flex: 1 1 calc(50% - 4px); }
    .tf-mehr-felder .btn { flex: 1 1 100%; }
}
/* Verhandlung: Ankreuzfelder und Deadline Day */
.negotiation-inputs .neg-check { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: 13px; }
.negotiation-inputs .neg-check input { width: auto; flex: 0 0 auto; }
.neg-deadline { color: var(--accent-gold); }