/* Frontend Styles */
/* == Dashboard == */
.dashboard h1 {
    font-size: 2.2rem; font-weight: var(--fw-black);
    letter-spacing: -.05em; margin-bottom: var(--space-1);
}
.dashboard-subtitle { color: var(--c-muted); margin-bottom: var(--space-6); }
.competition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
}
/* Grid-Kinder dürfen standardmäßig nicht unter ihre Inhaltsgröße schrumpfen (min-width:auto) -
   ein einzelner langer Wettbewerbsname/Badge kann dadurch die Spalte über minmax() hinaus
   aufblähen und das ganze Grid breiter machen als seinen Container. */
.competition-grid > * { min-width: 0; }
.comp-card-link      { text-decoration: none; color: inherit; }
.comp-card-dash {
    background: var(--c-surface); border: 1.5px solid var(--c-border);
    border-radius: var(--r-lg); padding: var(--space-5);
    transition: box-shadow .2s, border-color .2s, transform .15s;
    cursor: pointer;
}
.comp-card-dash:hover { box-shadow: var(--shadow-md); border-color: var(--c-primary); transform: translateY(-2px); }
.comp-card-dash__header {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-5); padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--c-border);
}
.comp-card-dash__header strong { font-weight: var(--fw-bold); font-size: .95rem; }
.comp-card-dash__stats { display: flex; gap: var(--space-6); }
.stat__value { display: block; font-size: 1.75rem; font-weight: var(--fw-black); color: var(--c-primary); letter-spacing: -.04em; line-height: 1; }
.stat__label { font-size: .7rem; color: var(--c-muted); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; margin-top: var(--space-1); }

/* == Tips Page == */
.tips-page {}
.comp-header {
    display: flex; align-items: center; gap: var(--space-4);
    margin-bottom: var(--space-3); flex-wrap: nowrap;
}
.comp-header h1 { font-size: clamp(1rem, 4vw, 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-header__left    { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
.comp-header h1       { font-size: 1.5rem; font-weight: var(--fw-black); letter-spacing: -.04em; }
.comp-logo            { width: 44px; height: 44px; object-fit: contain; }
.comp-logo-lg         { width: 60px; height: 60px; object-fit: contain; }
.comp-logo-md         { width: 36px; height: 36px; object-fit: contain; }
.fed-logo             { width: 32px; height: 32px; object-fit: contain; opacity: .8; }
.fed-logo-sm          { width: 22px; height: 22px; object-fit: contain; opacity: .7; margin-left: auto; }

/* Runden-Navigation: siehe .round-nav / .round-tab weiter unten (== Tips Runden-Nav ==) */

/* Deadline Banner */
.deadline-banner {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--c-amber-light); border: 1px solid #fcd34d;
    border-radius: var(--r-md); margin-bottom: 0;
    font-size: .88rem;
}
.deadline-banner--closed { background: var(--c-surface); border-color: var(--c-border); color: var(--c-muted); }
[data-theme="dark"] .deadline-banner { background: var(--c-amber-light); border-color: #92400e; color: var(--c-amber); }
.deadline-countdown { color: var(--c-muted); font-size: .82rem; }

/* Match Cards */
.match-list  { display: flex; flex-direction: column; }
/* == Match Row == */
.tips-page          { padding: 0; }
.tips-page form     { margin: 0; }
.match-list         { width: 100%; }
.match-day-header   {
    padding: .4rem 1rem;
    font-size: .72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--c-muted);
    background: var(--c-surface-2); border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 1;
}

.match-card {
    display: grid;
    grid-template-columns:
        clamp(1.4rem, 3.5vw, 2rem)     /* Badge */
        clamp(2.8rem, 5.5vw, 3.8rem)   /* Zeit  */
        minmax(0, 1fr)                  /* Heim  */
        clamp(.6rem, 1.4vw, .85rem)    /* :     */
        minmax(0, 1fr)                  /* Gast  */
        clamp(7.5rem, 16vw, 10rem)     /* Score */
        2rem;                           /* Qualität */
    align-items: stretch;
    border-bottom: 1px solid var(--c-border);
}
.match-card > * {
    display: flex;
    align-items: center;
    padding: clamp(.35rem,.9vw,.6rem) clamp(.2rem,.5vw,.35rem);
    min-width: 0;
    box-sizing: border-box;
    border-right: 1px solid var(--c-border);
}
/* Letzte Zelle kein Rahmen rechts */
.tip-quality-badge { border-right: none !important; padding: 0 !important; justify-content: center; }
.tip-quality-badge--empty { visibility: hidden; }
/* Badge und Zeit: kein Rahmen rechts, nur Trennung nach Zeit */
.group-badge     { border-right: none !important; }
.match-time      { border-right: 1px solid var(--c-border) !important; }
/* Trenner : kein Rahmen */
.match-sep       { border-right: none !important; }
/* Gast: Rahmen rechts = Trennung vor Score */
.match-team-cell--away { border-right: 1px solid var(--c-border) !important; }
/* Heim: kein eigener Rahmen, Trenner übernimmt */
.match-team-cell--home { border-right: none !important; }
.match-card--hit      { background: rgba(22,163,74,.07); }
.match-card--miss     { background: rgba(220,38,38,.05); }
[data-theme="dark"] .match-card--hit  { background: rgba(22,163,74,.11); }
[data-theme="dark"] .match-card--miss { background: rgba(220,38,38,.09); }

/* Badge */
.group-badge {
    justify-content: center; align-self: stretch;
    font-size: clamp(.6rem,1.5vw,.78rem); font-weight: 800;
    color: var(--c-muted); background: var(--c-surface-2);
    padding-left: 0 !important; padding-right: 0 !important;
}

/* Zeit */
.match-time {
    flex-direction: column; justify-content: center; align-items: center;
    font-size: clamp(.68rem,1.6vw,.84rem); font-weight: 600;
    line-height: 1.2; gap: 1px; align-self: stretch;
}
.match-time--ended  { background: var(--c-surface-2); color: var(--c-muted); }
.match-time--locked { background: var(--c-surface-2); color: var(--c-muted); opacity: .55; }
.match-time__label  { font-size: clamp(.54rem,1.2vw,.66rem); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

/* Teams */
.match-team-cell       { gap: clamp(.2rem,.5vw,.35rem); overflow: hidden; padding-left: 0 !important; padding-right: 0 !important; }
.match-team-cell--home { flex-direction: row-reverse; justify-content: flex-start; }
.match-team-cell--away { flex-direction: row;         justify-content: flex-start; }
.match-team-logo       { width: clamp(16px,3.5vw,22px); height: clamp(16px,3.5vw,22px); object-fit: contain; flex-shrink: 0; }
.match-team-name       { font-size: clamp(.76rem,1.9vw,.98rem); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.match-team-name--home { text-align: right; }
.match-team-name--away { text-align: left; }

/* Trenner */
.match-sep { justify-content: center; font-weight: 700; color: var(--c-muted); font-size: clamp(.78rem,1.9vw,1rem); padding: 0 !important; flex-shrink: 0; }

/* Score-Spalte: [Ergebnis] [Tipp:Tipp] in EINER Zeile */
.match-score-col {
    flex-direction: row; align-items: center; justify-content: flex-end;
    gap: clamp(.15rem,.4vw,.25rem);
    padding-left: clamp(.1rem,.3vw,.2rem) !important;
    padding-right: clamp(.25rem,.6vw,.4rem) !important;
    flex-wrap: nowrap; overflow: hidden;
}
.match-result {
    font-size: clamp(.76rem,1.9vw,.95rem); font-weight: 800;
    white-space: nowrap; color: var(--c-muted);
    flex-shrink: 0; min-width: clamp(2rem,5vw,2.8rem); text-align: center;
}
.match-result--hit  { color: var(--c-green); }
.match-result--miss { color: var(--c-danger); }

.match-tip-inputs {
    display: flex; flex-direction: row; align-items: center;
    gap: clamp(.08rem,.2vw,.14rem); flex-shrink: 0; flex-wrap: nowrap;
}
.score-input {
    width: clamp(2rem,5vw,2.6rem) !important;
    text-align: center; font-size: clamp(.8rem,2vw,1rem); font-weight: 700;
    padding: clamp(.1rem,.25vw,.2rem) .1rem !important;
    margin: 0 !important; border-radius: var(--r-sm) !important;
    min-width: 0 !important; flex-shrink: 0; box-sizing: border-box;
    -moz-appearance: textfield;
}
.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.score-input--disabled {
    background: var(--c-surface-2) !important;
    color: var(--c-muted) !important;
    border-color: transparent !important;
}
.score-sep {
    font-weight: 700; color: var(--c-muted);
    font-size: clamp(.74rem,1.8vw,.92rem);
    flex-shrink: 0; padding: 0 !important;
}
.tip-pts      { font-size: clamp(.58rem,1.3vw,.7rem); font-weight: 800; flex-shrink: 0; }
.tip-pts--hit  { color: var(--c-green); }
.tip-pts--miss { color: var(--c-danger); }

.match-card__all-tips { grid-column: 1/-1; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--c-border); }

/* Platzhalter */
.placeholder-name {
    color: var(--c-muted);
    cursor: pointer;
    white-space: nowrap;
    opacity: .6;
}
.placeholder-tooltip {
    position: absolute;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--space-2) var(--space-3);
    font-size: .82rem;
    box-shadow: var(--shadow-md);
    z-index: 100;
    max-width: 220px;
    color: var(--c-text);
}

.tips-submit {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-2); padding: var(--space-3) var(--space-4);
    position: sticky; bottom: 0;
    background: var(--c-surface); border-top: 1px solid var(--c-border);
}

.points-badge       { padding: .15rem .4rem; border-radius: var(--r-full); font-weight: 800; font-size: clamp(.62rem,1.4vw,.72rem); flex-shrink: 0; }
.points-badge--hit  { background: var(--c-green-light); color: #14532d; border: 1px solid var(--c-green); }
.points-badge--miss { background: var(--c-red-light);   color: #7f1d1d; border: 1px solid var(--c-danger); }
[data-theme="dark"] .points-badge--hit  { color: #86efac; }
[data-theme="dark"] .points-badge--miss { color: #fca5a5; }

/* == Profil Quoten == */
.profile-quotes      { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.profile-quote       { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) var(--space-1); background: var(--c-surface-2); }
.profile-quote__pct  { font-size: 1.1rem; font-weight: var(--fw-black); letter-spacing: -.04em; line-height: 1; }
.profile-quote__label { font-size: .62rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.profile-quote__count { font-size: .65rem; color: var(--c-muted); }
.profile-quote--exact    .profile-quote__pct { color: var(--c-green); }
.profile-quote--diff     .profile-quote__pct { color: var(--c-blue); }
.profile-quote--tendency .profile-quote__pct { color: var(--c-amber); }
.profile-quote--wrong    .profile-quote__pct { color: var(--c-danger); }

/* Tipp-Qualität-Balken (bisher komplett unstyled, siehe frontend.css-Historie) */
.profile-quality-bar { display: flex; height: 10px; border-radius: var(--r-full); overflow: hidden; background: var(--c-border); }
.pq-exact    { background: var(--c-green); }
.pq-diff     { background: var(--c-blue); }
.pq-tendency { background: var(--c-amber); }
.pq-wrong    { background: var(--c-danger); }
.profile-donut       { display: block; }

/* == Platform Stats == */
.platform-stats         { margin-top: var(--space-8); }
.platform-stats__title  { font-size: 1.1rem; font-weight: var(--fw-black); margin-bottom: var(--space-4); color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; }
.pstats-grid            { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.pstats-grid > *        { min-width: 0; }
.pstat-card             { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--space-4) var(--space-5); }
.pstat-card--wide       { margin-bottom: var(--space-3); }
.pstat-card__header     { font-size: .75rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); margin-bottom: var(--space-2); }
.pstat-card__main       { font-size: 2.2rem; font-weight: var(--fw-black); letter-spacing: -.05em; line-height: 1; margin-bottom: var(--space-1); }
.pstat-card__sub        { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; color: var(--c-muted); }
.pstat-card__sub-line   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pstats-row             { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.pstat-mini             { display: flex; flex-direction: column; gap: 2px; min-width: 50px; }
.pstat-mini__val        { font-size: 1.4rem; font-weight: var(--fw-black); letter-spacing: -.04em; line-height: 1; }
.pstat-mini__lbl        { font-size: .68rem; color: var(--c-muted); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; }

.pstat-bar-wrap         { margin-top: var(--space-2); }
.pstat-bar              { display: flex; height: 10px; border-radius: var(--r-full); overflow: hidden; background: var(--c-border); margin-bottom: var(--space-2); }
.pstat-bar__seg--win    { background: var(--c-green); }
.pstat-bar__seg--draw   { background: var(--c-amber); }
.pstat-bar__seg--loss   { background: var(--c-danger); }
.pstat-bar-legend       { display: flex; gap: var(--space-4); font-size: .78rem; flex-wrap: wrap; }

/* == Tips Runden-Nav == */
.round-nav-wrap     { margin-bottom: var(--space-2); }
.round-nav          { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-2); }
.round-tab          {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--space-3) var(--space-4);
    min-width: 4.2rem;
    border: 1px solid var(--c-border); border-radius: var(--r-sm);
    background: var(--c-surface);
    font-size: .85rem; font-weight: var(--fw-bold);
    color: var(--c-muted); text-decoration: none; text-align: center;
    transition: all .15s;
}
.round-tab:hover    { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.round-tab.is-active { border-color: var(--c-primary); outline: 1px solid var(--c-primary); color: var(--c-text); }

/* == Match Card Meta == */
.match-card__meta       { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.match-card__meta-left  { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.match-nr               { font-size: .75rem; font-weight: var(--fw-black); color: var(--c-primary); }
.badge--sm              { font-size: .68rem; padding: .1rem .4rem; }

/* == Competition Overview (show.php) == */
.comp-page          { }
.comp-hero          { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); border-bottom: 1px solid var(--c-border); }
.comp-hero__logos   { display: flex; align-items: center; gap: var(--space-3); }
.comp-hero__info h1 { font-size: clamp(1.4rem,5vw,2rem); font-weight: var(--fw-black); letter-spacing: -.04em; margin-bottom: var(--space-1); }
.comp-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.rules-accordion    { border-bottom: 1px solid var(--c-border); }
.rules-panel        { border-top: 1px solid var(--c-border); }
.rules-panel__toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); background: none; border: none; cursor: pointer; font-weight: var(--fw-semi); color: var(--c-text); font-size: .95rem; }
.rules-panel__toggle:hover { background: var(--c-surface-2); }
.rules-chevron      { transition: transform .2s; color: var(--c-muted); }
.rules-panel__body  { padding: 0 var(--space-6) var(--space-5); }
.rules-content      { font-size: .9rem; line-height: 1.7; color: var(--c-text); }
.comp-grid          { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5) var(--space-6); }
@media (min-width: 640px) { .comp-grid { grid-template-columns: 1fr 1fr; } }
.comp-card          { background: var(--c-surface); border: 1px solid var(--c-border); }
.comp-card__header  { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); font-weight: var(--fw-bold); }

/* Rangliste */
.leaderboard-list   { list-style: none; padding: 0; margin: 0; }
.leaderboard-row    { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); font-size: .88rem; }
.leaderboard-row--me { background: rgba(26,86,219,.06); font-weight: var(--fw-bold); }
.leaderboard-rank   { width: 1.5rem; text-align: center; font-weight: var(--fw-black); color: var(--c-muted); flex-shrink: 0; }
.leaderboard-name   { flex: 1; }
.leaderboard-pts    { font-weight: var(--fw-black); color: var(--c-primary); }
.leaderboard-detail { font-size: .78rem; }

/* Letzte Ergebnisse */
.results-preview    { display: flex; flex-direction: column; }
.result-row         { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--c-border); font-size: .85rem; }
.result-home        { flex: 1; display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.result-away        { flex: 1; display: flex; align-items: center; gap: var(--space-2); }
.result-score-badge { font-weight: var(--fw-black); font-size: .95rem; padding: .1rem .5rem; background: var(--c-surface-2); flex-shrink: 0; }
.team-logo-xs       { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.team-logo-sm       { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }

/* == Tabellen == */
.groups-tables-grid  { display: flex; flex-direction: column; gap: 0; }
.group-table-card    { border-bottom: 1px solid var(--c-border); }
.group-table-title   { padding: clamp(.4rem,1vw,.6rem) clamp(.5rem,2vw,1rem); font-weight: var(--fw-black); font-size: clamp(.85rem,2vw,1rem); border-bottom: 1px solid var(--c-border); margin: 0; background: var(--c-surface-2); }
.table-scroll-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-phase-toggle  { display: flex; gap: 0; border-bottom: 1px solid var(--c-border); }
.table-phase-toggle .btn { border-radius: 0; border: none; border-right: 1px solid var(--c-border); }

.standings-table     { width: 100%; border-collapse: collapse; font-size: clamp(.75rem,1.8vw,.88rem); }
.standings-table thead th {
    padding: clamp(.25rem,.6vw,.4rem) clamp(.3rem,.8vw,.5rem);
    text-align: center; font-weight: 700; color: var(--c-muted);
    font-size: clamp(.65rem,1.5vw,.75rem); text-transform: uppercase;
    border-bottom: 2px solid var(--c-border); white-space: nowrap;
}
.standings-table tbody td {
    padding: clamp(.3rem,.8vw,.5rem) clamp(.3rem,.8vw,.5rem);
    text-align: center; border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}
.standings-table .col-team { text-align: left; width: 100%; }
.standings-table .col-pos  { width: clamp(1.2rem,3vw,1.8rem); text-align: center; color: var(--c-muted); }
.standings-table .col-form { min-width: clamp(4rem,10vw,6rem); }

.standings-table tr.scores-row--me td     { background: var(--c-blue-light); font-weight: var(--fw-bold); }
.standings-table tr.scores-row--top td    { background: var(--c-green-light); }
.standings-table tr.scores-row--bottom td { background: var(--c-red-light); }

/* Team-Zelle: Logo + Kürzel in einer Zeile */
.standings-table .col-team td,
.standings-table td.col-team {
    display: flex !important; /* Nein, td kann kein flex sein - JS-Workaround nötig */
}
.team-cell-inner     { display: flex; align-items: center; gap: clamp(.2rem,.5vw,.35rem); }
.team-cell-inner img { width: clamp(14px,3vw,20px); height: clamp(14px,3vw,20px); object-fit: contain; flex-shrink: 0; }

/* Qualifikation */
.row-qualified td    { background: rgba(22,163,74,.06); }
.row-qualified:first-child td { background: rgba(22,163,74,.1); }
.row-playoff td      { background: rgba(234,179,8,.06); }
.row-eliminated td   { background: rgba(239,68,68,.05); opacity: .7; }
.row-third td        { border-bottom: 2px solid var(--c-amber); }

/* Tordifferenz */
.td-pos              { color: var(--c-green); font-weight: 700; }
.td-neg              { color: var(--c-danger); }

/* Form-Badges */
.form-badges         { display: flex; gap: 2px; justify-content: center; }
.form-badge          { width: clamp(14px,3vw,18px); height: clamp(14px,3vw,18px); display: flex; align-items: center; justify-content: center; font-size: clamp(.55rem,1.3vw,.65rem); font-weight: 800; color: #fff; flex-shrink: 0; }
.form-badge--win     { background: var(--c-green); }
.form-badge--draw    { background: var(--c-amber); }
.form-badge--loss    { background: var(--c-danger); }

/* Legende */
.table-legend        { padding: clamp(.3rem,.8vw,.5rem) clamp(.5rem,2vw,1rem); display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: .78rem; color: var(--c-muted); border-top: 1px solid var(--c-border); }
.legend-qualified    { color: var(--c-green); }
.legend-playoff      { color: var(--c-amber, #eab308); }
.legend-eliminated   { color: var(--c-danger, #ef4444); }
.legend-third        { color: var(--c-amber); }
/* ── Match Tabs (show.php) ──────────────────────────────────────────────── */
.match-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3);
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    color: var(--c-muted);
    font-family: inherit;
}
.match-tab.is-active {
    border-bottom-color: var(--c-primary);
    color: var(--c-text);
}

/* ── Results Preview Rows ───────────────────────────────────────────────── */
.match-preview-row {
    display: grid;
    grid-template-columns: 2rem 1fr 4rem 1fr 2rem;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--c-border);
    font-size: .88rem;
}
.match-preview-row:last-child { border-bottom: none; }
.match-preview-badge {
    display: flex;
    justify-content: center;
    align-items: center;
}
.match-preview-badge .badge { font-size: .7rem; }
.match-preview-home {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-weight: 600;
}
.match-preview-away {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.match-preview-mid {
    text-align: center;
    font-size: .85rem;
    line-height: 1.3;
    font-weight: 400;
}

/* ── Profile stat row ───────────────────────────────────────────────────── */
.profile-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--c-border);
    font-size: .9rem;
}
.profile-stat-row:last-child { border-bottom: none; }

/* ── Tip Quality Badge ──────────────────────────────────────────────────── */
.tip-quality-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.tip-quality-badge--exact   { background: rgba(34,197,94,.25);  color: #22c55e; }
.tip-quality-badge--tendency { background: rgba(234,179,8,.25);  color: #eab308; }
.tip-quality-badge--wrong   { background: rgba(239,68,68,.25);  color: #ef4444; }
.tip-quality-badge--none    { color: var(--c-muted); }
.tip-quality-badge--empty   { }

/* == Statistik-Center == */
.pstat-card--link { text-decoration: none; color: inherit; display: block; transition: box-shadow .2s, border-color .2s; }
.pstat-card--link:hover { border-color: var(--c-primary); box-shadow: var(--shadow-md); text-decoration: none; }

.stats-filter__section { margin-bottom: var(--space-5); }
.stats-filter__section:last-of-type { margin-bottom: var(--space-3); }
.stats-filter__section > label { margin-bottom: var(--space-2); }

.chip-group {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    max-height: 220px; overflow-y: auto; padding: 2px;
}
.chip {
    position: relative;
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--c-border);
    background: var(--c-surface);
    font-size: .82rem; font-weight: var(--fw-semi);
    color: var(--c-text);
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s;
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.chip:hover { border-color: var(--c-primary); }
.chip.is-selected { background: var(--c-blue-light); border-color: var(--c-primary); color: var(--c-primary); }

.stats-compare { margin-top: var(--space-5); }

.compare-table { width: 100%; border-collapse: collapse; font-size: .85rem; white-space: nowrap; }
.compare-table th, .compare-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--c-border); text-align: center; }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; }
.compare-table thead th {
    font-size: .68rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em;
    color: var(--c-muted); border-bottom: 2px solid var(--c-border);
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: var(--c-surface-2); }
.compare-table .col-sticky {
    position: sticky; left: 0; z-index: 1;
    background: var(--c-surface);
    box-shadow: 1px 0 0 var(--c-border);
    font-weight: var(--fw-semi);
}
.compare-table tbody tr:hover td.col-sticky { background: var(--c-surface-2); }
.compare-table tr.compare-row--me td { background: var(--c-blue-light); font-weight: var(--fw-bold); }
.compare-table tr.compare-row--me td.col-sticky { background: var(--c-blue-light); color: var(--c-primary); }
.compare-table tr.compare-row--me:hover td { background: var(--c-blue-light); }

/* == Spielübersicht (Matrix) == */
.matrix-table th { white-space: nowrap; }
.matrix-table th.matrix-player-col {
    max-width: 4.5rem; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; cursor: help;
}
.matrix-table .col-sticky { width: 9rem; min-width: 9rem; max-width: 9rem; white-space: normal; }
.matrix-match-row1 {
    display: grid; grid-template-columns: 14px 1fr 14px;
    align-items: center; column-gap: 4px;
}
.matrix-flag { display: flex; align-items: center; justify-content: center; }
.matrix-flag img { width: 14px; height: 14px; object-fit: contain; }
.matrix-teams { text-align: center; }
.matrix-match-row2 {
    display: grid; grid-template-columns: 2rem 2.4rem auto;
    column-gap: 4px; text-align: left;
    font-size: .7rem; font-weight: 400;
}
.matrix-table .col-sticky-2 {
    position: sticky; left: 9rem; z-index: 1;
    background: var(--c-surface); box-shadow: 1px 0 0 var(--c-border);
    text-align: center; font-weight: var(--fw-semi); white-space: nowrap;
}
.matrix-table tbody tr:hover td.col-sticky-2 { background: var(--c-surface-2); }
.matrix-round-header td.col-sticky-2 { background: var(--c-surface-2); }
.matrix-subtotal td.col-sticky-2 { background: var(--c-blue-light); }
.matrix-total td.col-sticky-2 { background: var(--c-surface-2); }
.matrix-table td.tip-q-e { color: var(--c-green) !important; }
.matrix-table td.tip-q-d { color: var(--c-blue, #3b82f6) !important; }
.matrix-table td.tip-q-t { color: var(--c-amber) !important; }
.matrix-table td.tip-q-f { color: var(--c-danger) !important; }
.matrix-round-header td {
    background: var(--c-surface-2); color: var(--c-muted);
    font-size: .75rem; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .03em;
    padding: var(--space-2) var(--space-3); position: sticky; left: 0;
}
.matrix-subtotal td { background: var(--c-blue-light); font-weight: var(--fw-semi); }
.matrix-subtotal td.col-sticky { background: var(--c-blue-light); }
.matrix-total td { background: var(--c-surface-2); border-top: 2px solid var(--c-border); }
.matrix-total td.col-sticky { background: var(--c-surface-2); }

/* == Landingpage == */
.landing { max-width: 900px; margin: 0 auto; padding: 0 var(--space-4); }
.landing-hero {
    text-align: center; padding: var(--space-8) var(--space-4) var(--space-6);
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.landing-hero__emoji { font-size: 3rem; line-height: 1; }
.landing-hero__title { font-size: 2.2rem; font-weight: var(--fw-black); margin: 0; letter-spacing: -.03em; }
.landing-hero__claim { color: var(--c-muted); font-size: 1rem; margin: 0 0 var(--space-3); }
.landing-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }
.landing-hero__forgot { margin-top: var(--space-2); font-size: .85rem; }

.tag-cloud {
    display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
    align-items: center; justify-content: center;
    padding: var(--space-5) var(--space-4);
}
.tag-cloud__item {
    display: inline-block; color: var(--c-primary); font-weight: var(--fw-bold);
    text-decoration: none; padding: var(--space-1) var(--space-2);
    border: 1px solid var(--c-border); border-radius: var(--r-lg);
    background: var(--c-surface); transition: transform .15s, box-shadow .15s;
    line-height: 1.3;
}
.tag-cloud__item:hover { box-shadow: var(--shadow-md); border-color: var(--c-primary); transform: scale(1.05) rotate(0deg) !important; }

/* == Statistik-Seite: Tabs == */
.stats-tabs {
    display: flex; gap: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-4); border-bottom: 1px solid var(--c-border);
}
.stats-tab {
    flex-shrink: 0; padding: var(--space-2) var(--space-4); font-size: .85rem; font-weight: var(--fw-semi);
    color: var(--c-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.stats-tab:hover { color: var(--c-text); }
.stats-tab.is-active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

.stats-comp-picker { margin-bottom: var(--space-4); }
.stats-comp-picker select {
    width: 100%; box-sizing: border-box; padding: var(--space-2) var(--space-3);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
    color: var(--c-text); font-size: .9rem;
}