/* ballermann.ch — CSS P0.2: Stadion-Look, dunkler Rasen über alles.
   Mobile-first. Schweizer-Rot bleibt Akzent für Action/Live. */

:root {
    --c-fg: #f0f5f1;
    --c-fg-dim: #a8c2b3;
    --c-accent: #ff3a55;             /* Schweizer-Rot, lebendiger */
    --c-accent-fg: #ffffff;
    --c-accent-2: #7ee29a;            /* Rasen-Grün, frisch */
    --c-accent-2-soft: #3d7551;

    /* Stadion-Rasen, saftig statt schwarz */
    --c-grass-deep: #08260f;
    --c-grass-1: #0f3a1f;
    --c-grass-2: #195030;
    --c-grass-line: rgba(170, 240, 195, 0.32);
    --c-card-bg: #154f2c;
    --c-card-border: #2f7549;
    --c-nav-bg: #0c2e16;

    --c-link: #b4ebc5;
    --c-link-hover: #d5f3df;

    --r: 12px;
    --maxw: 1100px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: ui-rounded, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
    --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    color: var(--c-fg);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background-color: var(--c-grass-deep);
    background-image:
        /* Vignette für Tiefe von allen Rändern */
        radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%),
        /* Subtile horizontale „Field-Lines" für Stadion-Feeling */
        repeating-linear-gradient(180deg,
            rgba(255,255,255,0)       0,
            rgba(255,255,255,0)       119px,
            rgba(150,215,175,0.025)   120px,
            rgba(255,255,255,0)       121px),
        /* Mähstreifen */
        repeating-linear-gradient(180deg,
            var(--c-grass-1) 0,
            var(--c-grass-1) 38px,
            var(--c-grass-2) 38px,
            var(--c-grass-2) 76px);
    background-attachment: fixed;
}

a { color: var(--c-link); text-decoration: none; }
a:hover { color: var(--c-link-hover); text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }

/* --- Nav ----------------------------------------------------------------- */
.nav {
    background: linear-gradient(180deg, rgba(8,24,14,0.92) 0%, rgba(8,24,14,0.85) 100%);
    border-bottom: 1px solid var(--c-accent-2-soft);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 10;
}
.nav__inner { display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem 1rem; flex-wrap: wrap; }
.nav__brand { display: flex; align-items: center; gap: 0.7rem; font-weight: 800; color: var(--c-fg); font-family: var(--font-display); }
.nav__brand:hover { text-decoration: none; color: var(--c-fg); }
.nav__name { letter-spacing: 0.005em; font-size: 1.2rem; font-weight: 900; font-style: normal; }
.nav__accent { color: #facc15; font-style: normal; }

.nav__logo {
    height: 48px;
    width: auto;
    flex-shrink: 0;
    display: block;
    overflow: visible;
}
/* Speedlines pulsieren dauerhaft, der Ball ruht. */
.nav__logo .logo-trail line {
    animation: trail-pulse 1.8s ease-in-out infinite;
}
.nav__logo .logo-trail line:nth-child(1) { animation-delay: -0.6s; }
.nav__logo .logo-trail line:nth-child(2) { animation-delay: -0.3s; }
.nav__logo .logo-trail line:nth-child(3) { animation-delay: 0s; }
@keyframes trail-pulse {
    0%, 100% { opacity: 0.45; transform: translateX(0); }
    50%      { opacity: 1;    transform: translateX(2px); }
}
/* Ball rotiert beim Hover (Origin = Ballmitte) */
.nav__logo .logo-ball {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 950ms cubic-bezier(.45, .05, .25, 1);
}
.nav__brand:hover .nav__logo .logo-ball,
.nav__brand:focus-visible .nav__logo .logo-ball {
    transform: rotate(720deg);
}
.nav__brand:hover .nav__logo .logo-trail line,
.nav__brand:focus-visible .nav__logo .logo-trail line {
    animation-duration: 0.35s;
}

.nav__links { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-left: auto; }
.nav__links a { color: var(--c-fg-dim); font-weight: 600; padding: 0.3rem 0.1rem; border-bottom: 2px solid transparent; letter-spacing: 0.01em; }
.nav__links a:hover { color: var(--c-fg); text-decoration: none; border-bottom-color: var(--c-accent-2-soft); }
.nav__links a.is-active { color: var(--c-fg); border-bottom-color: var(--c-accent); }

/* Mobile: User-Link / CTA ganz rechts neben dem Logo (Zeile 1), Links wrappen in Zeile 2 */
@media (max-width: 720px) {
    .nav__inner { gap: 0.55rem 0.85rem; padding: 0.65rem 0.85rem; row-gap: 0.6rem; }
    .nav__user, .nav__cta { order: 2; margin-left: auto !important; }
    .nav__links { order: 3; width: 100%; margin-left: 0; gap: 0.55rem 0.95rem; justify-content: flex-start; flex-wrap: wrap; }
    .nav__links a { font-size: 0.92rem; padding: 0.25rem 0.05rem; }
    .nav__name { font-size: 1.05rem; }
    .nav__logo { height: 38px; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    padding: 4.5rem 1rem 4rem;
    text-align: center;
    border-bottom: 1px solid var(--c-accent-2-soft);
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(110,201,133,0.06) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, rgba(6,21,9,0.25) 0%, rgba(6,21,9,0) 28%, rgba(6,21,9,0) 72%, rgba(6,21,9,0.75) 100%);
}
/* Mittelkreis Stadion-Center */
.hero::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: clamp(280px, 50vw, 460px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border: 1.5px solid var(--c-grass-line);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 80px rgba(110,201,133,0.05) inset;
}
/* Mittellinie horizontal */
.hero::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1.5px;
    background: var(--c-grass-line);
    pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__slogan {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 6.5vw, 4.8rem);
    font-weight: 900;
    margin: 0 0 0.85rem;
    color: var(--c-fg);
    letter-spacing: -0.025em;
    text-shadow: 0 3px 20px rgba(0,0,0,0.55), 0 0 1px rgba(110,201,133,0.2);
}
.hero__sub {
    max-width: 38rem;
    margin: 0 auto 1.8rem;
    color: var(--c-fg);
    opacity: 0.92;
    font-size: 1.1rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
html.theme-light .hero__sub { text-shadow: 0 1px 4px rgba(255,255,255,0.6); opacity: 0.85; }
.hero__countdown-label {
    color: var(--c-fg-dim);
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    font-weight: 700;
}
.hero__countdown-live {
    display: inline-block;
    margin: 0;
    padding: 0.7rem 1.4rem;
    border-radius: var(--r);
    background: var(--c-accent);
    color: var(--c-accent-fg);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 1px var(--c-accent), 0 0 30px rgba(215,37,63,0.5);
}

/* --- Countdown (Tage : Std : Min : Sek) --------------------------------- */
.countdown {
    display: inline-flex;
    align-items: flex-end;
    gap: clamp(0.5rem, 2vw, 1.1rem);
    padding: 0.9rem 1.2rem;
    background: rgba(8, 24, 14, 0.7);
    border: 1px solid var(--c-accent-2-soft);
    border-radius: var(--r);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(110,201,133,0.08) inset;
}
.countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: clamp(2.5rem, 8vw, 4rem);
}
.countdown__value {
    font-family: var(--font-mono);
    font-size: clamp(2.2rem, 7vw, 3.8rem);
    font-weight: 800;
    color: var(--c-fg);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.countdown__label {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color: var(--c-fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
}
.countdown__sep {
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 5.5vw, 2.6rem);
    font-weight: 700;
    color: var(--c-accent-2);
    padding-bottom: 1.4rem;
    line-height: 1;
    animation: sep-blink 1s ease-in-out infinite;
}
@keyframes sep-blink {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* --- Main + Grid + Cards ------------------------------------------------ */
main { padding: 2.5rem 0 3rem; }

.grid { display: grid; gap: 1rem; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
    position: relative;
    display: block;
    padding: 1.35rem 1.35rem 1.2rem;
    background: linear-gradient(180deg, var(--c-card-bg) 0%, #0c1b13 100%);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    color: var(--c-fg);
    overflow: hidden;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent-2), transparent 75%);
    opacity: 0;
    transition: opacity 180ms ease;
}
.card:hover {
    border-color: var(--c-accent-2);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(110, 201, 133, 0.3);
}
.card:hover::before { opacity: 1; }
.card__title { margin: 0 0 0.35rem; font-size: 1.18rem; font-weight: 700; }
.card__lead  { margin: 0; color: var(--c-fg-dim); font-size: 0.97rem; }

/* --- Page / Note -------------------------------------------------------- */
.page { padding: 2rem 0; }
.page--narrow { max-width: 38rem; }
.page h1 { font-size: 2rem; margin: 0 0 1rem; }
.page h2 { font-size: 1.25rem; margin: 1.75rem 0 0.5rem; color: var(--c-accent-2); }
.page p  { margin: 0 0 0.9rem; color: var(--c-fg); }

.note {
    margin-top: 2.5rem;
    padding: 1.1rem 1.35rem;
    background: rgba(8, 24, 14, 0.6);
    border: 1px solid var(--c-card-border);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--r);
    color: var(--c-fg-dim);
    font-size: 0.95rem;
}

.contact-mail { font-size: 1.15rem; font-weight: 600; margin: 1rem 0 1.5rem; }

.btn {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    background: var(--c-accent);
    color: var(--c-accent-fg);
    border-radius: var(--r);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }

.error__code {
    font-family: var(--font-display);
    font-size: 4rem; font-weight: 900;
    color: var(--c-accent);
    margin: 0 0 0.25rem;
}

/* --- Footer ------------------------------------------------------------- */
.footer {
    margin-top: 3rem;
    padding: 1.75rem 0 2.25rem;
    border-top: 1px solid var(--c-accent-2-soft);
    background: rgba(6, 21, 9, 0.85);
}
.footer__inner { color: var(--c-fg-dim); font-size: 0.87rem; text-align: center; }
.footer__disclaimer { margin: 0 0 0.4rem; max-width: 56rem; margin-left: auto; margin-right: auto; }
.footer__meta { margin: 0; }
.footer__meta a, .footer__disclaimer a { color: var(--c-fg-dim); }
.footer__meta a:hover { color: var(--c-fg); }

/* --- Match-Listen (P1) -------------------------------------------------- */
.match-list { display: grid; gap: 0.75rem; margin: 1.5rem 0 0; }

.match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    background: rgba(15, 40, 24, 0.45);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    transition: border-color 140ms ease, background 140ms ease;
}
.match:hover { border-color: var(--c-accent-2); background: rgba(15, 40, 24, 0.7); }
.match__team { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.match__team--right { justify-content: flex-end; }
.match__flag { font-size: 1.5rem; line-height: 1; }
.match__name { font-weight: 700; font-size: 1.02rem; }
.match__name--placeholder { font-weight: 500; color: var(--c-fg-dim); font-style: italic; }
.match__center { text-align: center; min-width: 8rem; }
.match__kickoff { font-family: var(--font-mono); color: var(--c-fg); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.match__date { display: block; color: var(--c-fg-dim); font-size: 0.8rem; margin-top: 0.15rem; }
.match__meta { display: block; color: var(--c-fg-dim); font-size: 0.78rem; margin-top: 0.2rem; }

/* Schweiz-Highlight */
.match--swiss {
    background:
        linear-gradient(180deg, rgba(215,37,63,0.16) 0%, rgba(215,37,63,0.06) 100%),
        rgba(15, 40, 24, 0.45);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px rgba(215,37,63,0.25), 0 8px 30px -10px rgba(215,37,63,0.35);
    position: relative;
}
.match--swiss::before {
    content: 'Hopp Schwiiz';
    position: absolute;
    top: -10px; left: 14px;
    padding: 0.15rem 0.55rem;
    background: var(--c-accent);
    color: var(--c-accent-fg);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 999px;
}
.match--swiss .match__kickoff { color: #ffd1d8; }
.match--swiss:hover { border-color: var(--c-accent); background: linear-gradient(180deg, rgba(215,37,63,0.22) 0%, rgba(215,37,63,0.1) 100%), rgba(15, 40, 24, 0.6); }

/* Section-Titles */
.section-title {
    margin: 2.5rem 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-fg-dim);
}
.section-title--swiss { color: var(--c-accent); }

/* ====================================================================== */
/* P2 — Spielplan, Gruppen, Tabellen, Team-Detail                         */
/* ====================================================================== */

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { margin: 0 0 0.5rem; font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
.page-header__lead { color: var(--c-fg-dim); margin: 0; }
.page-header__lead .reset { margin-left: 0.5rem; color: var(--c-accent-2); }

.breadcrumb { margin: 0 0 0.4rem; color: var(--c-fg-dim); font-size: 0.9rem; }
.breadcrumb a { color: var(--c-fg-dim); }
.breadcrumb a:hover { color: var(--c-fg); }

/* --- Filter-Form -------------------------------------------------------- */
.filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 1rem;
    background: rgba(8, 24, 14, 0.65);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    margin-bottom: 1.75rem;
}
@media (min-width: 640px) {
    .filters {
        grid-template-columns: repeat(2, 1fr) auto;
        gap: 0.85rem;
        align-items: end;
    }
    .filters__field:nth-child(n+3) { grid-column: span 1; }
    .filters .btn--filter { grid-column: 3; grid-row: 1 / span 2; align-self: stretch; }
}
@media (min-width: 900px) {
    .filters {
        grid-template-columns: repeat(4, 1fr) auto;
    }
    .filters .btn--filter { grid-column: 5; grid-row: 1; }
}
.filters__field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.filters__field > span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--c-fg-dim);
    font-weight: 700;
}
.filters select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(15, 40, 24, 0.85);
    color: var(--c-fg);
    border: 1px solid var(--c-card-border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font: inherit;
    font-size: 0.96rem;
    width: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8"><path fill="%239eb3a4" d="M6 8L0 0h12z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 9px;
    padding-right: 2rem;
}
.filters select:focus {
    outline: 2px solid var(--c-accent-2);
    outline-offset: 1px;
}
.btn--filter { padding: 0.65rem 1.2rem; }

/* --- Tages-Überschriften (Spielplan) ----------------------------------- */
.day-title {
    margin: 1.5rem 0 0.6rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent-2);
    border-bottom: 1px solid var(--c-card-border);
    padding-bottom: 0.4rem;
}

.empty-state {
    margin: 2rem 0;
    padding: 1.25rem;
    text-align: center;
    color: var(--c-fg-dim);
    background: rgba(8, 24, 14, 0.5);
    border: 1px dashed var(--c-card-border);
    border-radius: var(--r);
}

/* --- Gruppen-Übersicht ------------------------------------------------- */
.groups-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) { .groups-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .groups-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .groups-grid { grid-template-columns: repeat(4, 1fr); } }

.group-card {
    display: block;
    background: linear-gradient(180deg, var(--c-card-bg) 0%, #0c1b13 100%);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    padding: 1rem 1.1rem 0.75rem;
    color: var(--c-fg);
    transition: border-color 160ms ease, transform 160ms ease;
}
.group-card:hover { border-color: var(--c-accent-2); text-decoration: none; transform: translateY(-1px); }
.group-card__title {
    margin: 0 0 0.65rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--c-accent-2);
}

/* --- Standings-Tabelle ------------------------------------------------- */
.standings {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.94rem;
}
.standings th,
.standings td {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid rgba(36, 60, 44, 0.5);
    text-align: left;
    vertical-align: middle;
}
.standings th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-fg-dim);
    font-weight: 700;
    border-bottom-color: var(--c-card-border);
}
.standings td.num, .standings th.num { text-align: right; font-variant-numeric: tabular-nums; }
.standings td.pts { font-weight: 800; color: var(--c-fg); }
.standings__rank { color: var(--c-fg-dim); width: 1.5rem; font-variant-numeric: tabular-nums; }
.standings__flag { font-size: 1.15rem; margin-right: 0.35rem; }
.standings__team { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.standings__name { font-weight: 600; }
.standings__pts { text-align: right; font-weight: 800; }
.standings a { color: var(--c-fg); }
.standings a:hover { color: var(--c-accent-2); }

/* Qualifikations-Markierung */
.standings tr.is-qualified td { background: rgba(95, 168, 114, 0.07); }
.standings tr.is-qualified .standings__rank { color: var(--c-accent-2); font-weight: 800; }
.standings tr.is-third td { background: rgba(255, 200, 60, 0.05); }
.standings tr.is-third .standings__rank { color: #f5c563; font-weight: 800; }

/* Mini-Standings (in Gruppen-Übersicht) — kompakter, ohne Stats-Spalten */
.standings--mini { font-size: 0.92rem; }
.standings--mini td { padding: 0.4rem 0.3rem; }
.standings--mini .standings__flag { font-size: 1.05rem; }

/* Full Standings auf Mobile: horizontal scrollbar */
@media (max-width: 720px) {
    .page > .standings:not(.standings--mini) {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

.team-flag { font-size: 1.3em; margin-right: 0.3rem; }

/* ====================================================================== */
/* P3 — Schweiz-Hub /nati                                                 */
/* ====================================================================== */

.nati-hero {
    position: relative;
    text-align: center;
    padding: 3rem 1rem 2.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--r);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(215,37,63,0.18) 0%, rgba(215,37,63,0) 60%),
        linear-gradient(180deg, rgba(8, 24, 14, 0.85) 0%, rgba(10, 29, 16, 0.85) 100%);
    border: 1px solid rgba(215, 37, 63, 0.4);
    box-shadow: 0 0 0 1px rgba(215,37,63,0.15), 0 12px 40px -16px rgba(215,37,63,0.4);
    overflow: hidden;
}
.nati-hero::before {
    /* dezenter Schweizer-Kreuz-Andeutung (Plus-Form via two rectangles, NICHT als SFV-Logo!) */
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 220px; height: 220px;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(90deg, transparent calc(50% - 30px), rgba(215,37,63,0.06) calc(50% - 30px), rgba(215,37,63,0.06) calc(50% + 30px), transparent calc(50% + 30px)),
        linear-gradient(0deg,  transparent calc(50% - 30px), rgba(215,37,63,0.06) calc(50% - 30px), rgba(215,37,63,0.06) calc(50% + 30px), transparent calc(50% + 30px));
    border-radius: 28px;
    pointer-events: none;
}
.nati-hero > * { position: relative; z-index: 1; }
.nati-hero__flag { font-size: 3.5rem; line-height: 1; margin-bottom: 0.4rem; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5)); }
.nati-hero__title {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    font-weight: 900;
    color: var(--c-accent-fg);
    text-shadow: 0 2px 16px rgba(0,0,0,0.55), 0 0 30px rgba(215,37,63,0.5);
}
.nati-hero__sub {
    color: #d6dee2; max-width: 36rem; margin: 0 auto 1.5rem; font-size: 1.05rem;
}
.nati-hero__matchline { margin: 1rem 0 0; color: #f5d4d9; font-size: 1.05rem; }
.nati-hero__matchline strong { color: var(--c-accent-fg); }

.countdown--swiss { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent) inset, 0 0 30px rgba(215,37,63,0.25); }
.countdown--swiss .countdown__sep { color: var(--c-accent); }

/* Hervorhebung der Schweiz-Zeile in der Tabelle (Nati-Seite) */
.standings tr.is-highlight td { background: linear-gradient(90deg, rgba(215,37,63,0.18), rgba(215,37,63,0.04)); }
.standings tr.is-highlight .standings__rank { color: var(--c-accent); }
.standings tr.is-highlight.is-qualified td { background: linear-gradient(90deg, rgba(215,37,63,0.18), rgba(95,168,114,0.08)); }

/* ====================================================================== */
/* Stadien-Seite                                                          */
/* ====================================================================== */

.venues-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 1rem 0 2.5rem;
}
@media (min-width: 640px)  { .venues-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .venues-grid { grid-template-columns: repeat(3, 1fr); } }

.venue-card {
    display: block;
    padding: 1.1rem 1.25rem 1rem;
    background: linear-gradient(180deg, var(--c-card-bg) 0%, #0c1b13 100%);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    color: var(--c-fg);
    transition: border-color 160ms ease, transform 160ms ease;
}
.venue-card:hover { border-color: var(--c-accent-2); text-decoration: none; transform: translateY(-2px); }
.venue-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.venue-card__stadium { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.venue-card__country { font-size: 1.5rem; flex-shrink: 0; }
.venue-card__city { margin: 0.2rem 0 0.85rem; color: var(--c-fg-dim); font-size: 0.92rem; }
.venue-card__stats { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; font-size: 0.85rem; color: var(--c-fg-dim); }
.venue-card__stat strong { color: var(--c-fg); font-weight: 700; }

.venue-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1.25rem 0 1.5rem;
}
.venue-stat {
    padding: 1rem 0.5rem;
    background: rgba(8, 24, 14, 0.6);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    text-align: center;
}
.venue-stat__label { display: block; font-size: 0.72rem; color: var(--c-fg-dim); text-transform: uppercase; letter-spacing: 0.13em; font-weight: 700; }
.venue-stat__value { display: block; font-family: var(--font-mono); font-size: 1.45rem; font-weight: 800; color: var(--c-accent-2); margin-top: 0.3rem; font-variant-numeric: tabular-nums; }

.venue-note { color: var(--c-fg-dim); margin: 0 0 1rem; line-height: 1.55; }
.venue-flag { font-size: 1.3em; margin-right: 0.3rem; }

.venue-extra { margin: 1.5rem 0; padding: 1rem 1.25rem; background: rgba(8, 24, 14, 0.5); border: 1px solid var(--c-card-border); border-radius: var(--r); }
.venue-extra h3 { margin: 0 0 0.65rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--c-fg-dim); font-weight: 700; }
.venue-extra__teams { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.venue-extra__teams li { padding: 0.3rem 0.65rem; background: rgba(15, 40, 24, 0.7); border: 1px solid var(--c-card-border); border-radius: 999px; font-size: 0.88rem; }

.sources { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--c-card-border); font-size: 0.82rem; color: var(--c-fg-dim); }
.sources strong { color: var(--c-fg); }
.sources a { color: var(--c-fg-dim); text-decoration: underline; }
.sources a:hover { color: var(--c-fg); }

/* ====================================================================== */
/* /nati — noch röter                                                     */
/* ====================================================================== */

/* Body-Variante: rotes Field-Ambiente, wenn Body-Class gesetzt */
body.page-nati {
    background-color: #1a0710;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(215,37,63,0.20) 0%, rgba(0,0,0,0) 60%),
        repeating-linear-gradient(180deg,
            rgba(255,255,255,0)     0,
            rgba(255,255,255,0)     119px,
            rgba(215,37,63,0.04)    120px,
            rgba(255,255,255,0)     121px),
        repeating-linear-gradient(180deg,
            #160512 0,
            #160512 38px,
            #1d0816 38px,
            #1d0816 76px);
}
body.page-nati .nav        { background: linear-gradient(180deg, rgba(20,5,15,0.95) 0%, rgba(20,5,15,0.88) 100%); border-bottom-color: rgba(215,37,63,0.5); }
body.page-nati .footer     { background: rgba(20, 5, 15, 0.9); border-top-color: rgba(215,37,63,0.4); }

/* nati-hero: jetzt sattes Rot statt rot-Glow-auf-dunkel */
body.page-nati .nati-hero {
    background:
        linear-gradient(135deg, #d7253f 0%, #a01a2d 55%, #6e1020 100%),
        url('/assets/img/nati-noise.svg');   /* (Fallback: kein Bild = nur Gradient) */
    border: 1px solid rgba(255, 220, 225, 0.25);
    box-shadow: 0 0 0 1px rgba(215,37,63,0.4), 0 14px 50px -10px rgba(215,37,63,0.55);
    color: var(--c-accent-fg);
}
body.page-nati .nati-hero::before {
    background:
        linear-gradient(90deg, transparent calc(50% - 34px), rgba(255,255,255,0.18) calc(50% - 34px), rgba(255,255,255,0.18) calc(50% + 34px), transparent calc(50% + 34px)),
        linear-gradient(0deg,  transparent calc(50% - 34px), rgba(255,255,255,0.18) calc(50% - 34px), rgba(255,255,255,0.18) calc(50% + 34px), transparent calc(50% + 34px));
    width: 240px; height: 240px;
    opacity: 0.55;
}
body.page-nati .nati-hero__title       { color: #fff; text-shadow: 0 3px 18px rgba(0,0,0,0.45), 0 0 30px rgba(0,0,0,0.25); }
body.page-nati .nati-hero__sub         { color: #f4d2d8; }
body.page-nati .nati-hero__matchline   { color: #ffd9de; }
body.page-nati .countdown--swiss       { background: rgba(0,0,0,0.42); border-color: rgba(255,255,255,0.4); }
body.page-nati .countdown--swiss .countdown__value { color: #fff; }
body.page-nati .countdown--swiss .countdown__label { color: #ffd9de; }
body.page-nati .countdown--swiss .countdown__sep   { color: #fff; }

/* Section-Titles auf /nati alle in Rot — auch der „neutrale" */
body.page-nati .section-title { color: var(--c-accent); }

/* Match-Cards auf /nati ganz in rot-getintet */
body.page-nati .match {
    background: linear-gradient(180deg, rgba(215,37,63,0.10) 0%, rgba(215,37,63,0.04) 100%);
    border-color: rgba(215,37,63,0.35);
}
body.page-nati .match:hover { border-color: var(--c-accent); background: linear-gradient(180deg, rgba(215,37,63,0.18) 0%, rgba(215,37,63,0.08) 100%); }
body.page-nati .match--swiss { box-shadow: 0 0 0 1px var(--c-accent), 0 8px 30px -10px rgba(215,37,63,0.45); }

/* Standings: Hover + Rank-Highlight auf /nati in Rot */
body.page-nati .standings tr.is-qualified td { background: rgba(215,37,63,0.10); }
body.page-nati .standings tr.is-qualified .standings__rank { color: var(--c-accent); }

/* ====================================================================== */
/* SVG-Flaggen (Ersatz für Emojis, damit Windows-Browser Flaggen zeigen)  */
/* ====================================================================== */

.flag-img {
    display: inline-block;
    width: 1.4em;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
    flex-shrink: 0;
}
.flag-img.match__flag       { width: 1.8em; margin: 0 0.1rem; }
.flag-img.standings__flag   { width: 1.5em; margin-right: 0.45rem; }
.flag-img.team-flag         { width: 1.6em; margin-right: 0.4rem; }
.flag-img.inline-flag       { width: 1.2em; vertical-align: -0.18em; }
.flag-img.inline-flag--lg   { width: 1.5em; }
.flag-img.venue-flag        { width: 1.5em; margin-right: 0.4rem; }
.flag-img.venue-card__country { width: 2em; }
.flag-img.nati-hero__flag-img { width: 4.5em; height: auto; aspect-ratio: 3 / 2; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); }

/* Schweizerkreuz ist offiziell quadratisch (1:1) — überschreibt 3:2-Default. */
.flag-img--square,
.flag-img--square.nati-hero__flag-img { aspect-ratio: 1 / 1; }

/* Old emoji-span-Fallback weg-stylen (alte Klassen-Reste) */
.standings__flag { display: inline-block; }
.match__flag { font-size: 1rem; }

/* ====================================================================== */
/* Polish-Pass: Abstände + bedingte Header-Styles                         */
/* ====================================================================== */

.hero__countdown-label { margin: 0 0 0.7rem; }
.hero .countdown,
.hero .hero__countdown-live { margin-bottom: 1rem; }
.hero { padding-bottom: 2.1rem; }
.section-title:first-of-type { margin-top: 0.5rem; }

/* Datumsformat im Filter etwas freundlicher */
.filters select option { font-family: inherit; }

/* ====================================================================== */
/* Match-Card als Link (klickbar)                                         */
/* ====================================================================== */

a.match {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
a.match:hover { text-decoration: none; }
.match--link { transition: border-color 140ms ease, transform 140ms ease, background 140ms ease; }
.match--link:hover { transform: translateY(-1px); }

/* ====================================================================== */
/* Match-Detail-Seite                                                     */
/* ====================================================================== */

.spiel-page { padding-bottom: 3rem; }

.spiel-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    background: var(--c-accent);
    color: var(--c-accent-fg);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.spiel-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.25rem;
    background: linear-gradient(180deg, rgba(15, 40, 24, 0.55) 0%, rgba(8, 24, 14, 0.6) 100%);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    margin-bottom: 1.5rem;
}
.spiel-page--swiss .spiel-hero {
    background: linear-gradient(180deg, rgba(215, 37, 63, 0.16) 0%, rgba(215, 37, 63, 0.05) 100%);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px rgba(215, 37, 63, 0.25), 0 8px 30px -10px rgba(215, 37, 63, 0.35);
}
.spiel-hero__team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
    min-width: 0;
}
@media (min-width: 640px) {
    .spiel-hero__team { flex-direction: row; }
    .spiel-hero__team--right { justify-content: flex-end; }
}
.flag-img.spiel-hero__flag { width: 2.5em; }
.spiel-hero__name {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.5vw, 1.9rem);
    font-weight: 800;
    color: var(--c-fg);
    letter-spacing: -0.01em;
}
.spiel-hero__name:hover { color: var(--c-accent-2); text-decoration: none; }
.spiel-hero__name--placeholder { font-style: italic; font-weight: 500; color: var(--c-fg-dim); }

.spiel-hero__score { text-align: center; min-width: 4.5rem; }
.spiel-hero__score-num {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 800;
    color: var(--c-fg);
    line-height: 1;
    letter-spacing: 0.02em;
}
.spiel-hero__minute { display: block; font-size: 0.85rem; color: var(--c-accent); font-weight: 700; margin-top: 0.3rem; }
.spiel-hero__ht     { display: block; font-size: 0.7rem; color: var(--c-fg-dim); margin-top: 0.2rem; }
.spiel-hero__vs     { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--c-fg-dim); }

.spiel-facts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (min-width: 640px) {
    .spiel-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .spiel-facts { grid-template-columns: repeat(3, 1fr); }
}
.spiel-fact {
    padding: 0.85rem 1rem;
    background: rgba(8, 24, 14, 0.55);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
}
.spiel-fact__label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--c-fg-dim); font-weight: 700; }
.spiel-fact__value { display: block; margin-top: 0.3rem; font-weight: 600; color: var(--c-fg); }
.spiel-fact__value a { color: var(--c-accent-2); }
.spiel-fact__value a:hover { color: var(--c-fg); }

/* Match-Card: Team-Links + Center-Link statt globalem Card-Link */
.match__name--link, .match__center--link {
    color: inherit;
    text-decoration: none;
    transition: color 140ms ease;
}
.match__name--link:hover { color: var(--c-accent-2); text-decoration: none; }
.match__center--link { display: block; }
.match__center--link:hover { color: var(--c-accent-2); }
.match__center--link:hover .match__kickoff { color: var(--c-accent-2); }
body.page-nati .match__name--link:hover,
body.page-nati .match__center--link:hover { color: var(--c-accent); }
body.page-nati .match__center--link:hover .match__kickoff { color: var(--c-accent); }

/* Article hat keinen Hover-Border mehr (kein globaler Card-Link), aber subtiler Hover-Effekt */
article.match { transition: border-color 160ms ease, background 160ms ease; }
article.match:hover { border-color: var(--c-accent-2); }
body.page-nati article.match:hover { border-color: var(--c-accent); }

/* a.match (legacy aus früherer Iteration) bleibt unterstützt, falls noch irgendwo verwendet */

/* Desktop: mehr Atem nach dem Countdown im Hero */
@media (min-width: 720px) {
    .hero { padding-bottom: 3rem; }
    .hero .countdown,
    .hero .hero__countdown-live { margin-bottom: 1.8rem; }
}
@media (min-width: 1024px) {
    .hero { padding-bottom: 3.5rem; }
}

/* ====================================================================== */
/* P5 — Auth + Tippspiel + Rangliste                                      */
/* ====================================================================== */

/* --- Auth-Forms --------------------------------------------------------- */
.auth-page { max-width: 30rem; }
.auth-form { display: flex; flex-direction: column; gap: 0.85rem; margin: 1.5rem 0 1rem; }
.auth-form__field { display: flex; flex-direction: column; gap: 0.3rem; }
.auth-form__field > span {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.13em;
    color: var(--c-fg-dim); font-weight: 700;
}
.auth-form input[type="email"],
.auth-form input[type="text"] {
    background: rgba(15, 40, 24, 0.85);
    color: var(--c-fg);
    border: 1px solid var(--c-card-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font: inherit;
    font-size: 1rem;
    width: 100%;
}
.auth-form input:focus { outline: 2px solid var(--c-accent-2); outline-offset: 1px; }
.auth-form .btn { align-self: flex-start; margin-top: 0.4rem; }
.auth-foot { color: var(--c-fg-dim); font-size: 0.88rem; margin-top: 1rem; }
.auth-league {
    padding: 0.9rem 1.1rem; margin-bottom: 1rem;
    background: rgba(215, 37, 63, 0.10);
    border: 1px solid rgba(215, 37, 63, 0.4);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--r);
    color: var(--c-fg);
}

/* Honeypot — visually hidden aber bedienbar für Bots */
.hp { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 1px; width: 1px; overflow: hidden; }

/* Form-Messages */
.form-error {
    padding: 0.65rem 1rem; margin: 0 0 1rem;
    background: rgba(215, 37, 63, 0.13);
    border: 1px solid var(--c-accent);
    border-radius: 8px;
    color: #ffd6dc;
}
.form-success {
    padding: 0.65rem 1rem; margin: 0 0 1rem;
    background: rgba(95, 168, 114, 0.15);
    border: 1px solid var(--c-accent-2);
    border-radius: 8px;
    color: #d8f3df;
}

/* --- Tipp-Form --------------------------------------------------------- */
.tipp-form { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.5rem; }
.tipp-row {
    padding: 1rem 1.1rem;
    background: rgba(15, 40, 24, 0.5);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
}
.tipp-row__match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.6rem;
}
.tipp-row__teamname {
    display: flex; align-items: center; gap: 0.45rem;
    min-width: 0;
    font-weight: 700;
}
.tipp-row__teamname--right { justify-content: flex-end; }
.flag-img.tipp-row__flag { width: 1.5em; }
.tipp-row__inputs {
    display: flex; align-items: center; gap: 0.35rem;
}
.tipp-row__inputs input {
    width: 3.5rem; text-align: center;
    padding: 0.55rem 0.4rem;
    background: rgba(8, 24, 14, 0.85);
    color: var(--c-fg);
    border: 1px solid var(--c-card-border);
    border-radius: 8px;
    font: inherit; font-size: 1.2rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.tipp-row__inputs input:focus { outline: 2px solid var(--c-accent-2); border-color: transparent; }
.tipp-row__inputs input::-webkit-outer-spin-button,
.tipp-row__inputs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tipp-row__sep { font-family: var(--font-mono); font-weight: 800; color: var(--c-fg-dim); }
.tipp-row__meta { margin-top: 0.6rem; font-size: 0.85rem; color: var(--c-fg-dim); text-align: center; }
.tipp-row__meta a { color: var(--c-fg-dim); }
.tipp-row__meta a:hover { color: var(--c-fg); }
.tipp-form > .btn { align-self: flex-start; margin-top: 0.4rem; }

/* Mobile: Flagge über dem Namen stacken — verhindert dass lange Ländernamen
   ins Score-Eingabefeld reinlaufen */
@media (max-width: 540px) {
    .tipp-row { padding: 0.85rem 0.7rem; }
    .tipp-row__match { gap: 0.4rem; }
    .tipp-row__teamname {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.25rem;
        font-size: 0.88rem;
        line-height: 1.15;
        word-break: break-word;
    }
    .tipp-row__teamname--right { align-items: center; justify-content: center; }
    .flag-img.tipp-row__flag { width: 2em; }
    .tipp-row__inputs { gap: 0.25rem; }
    .tipp-row__inputs input {
        width: 2.8rem;
        padding: 0.5rem 0.3rem;
        font-size: 1.1rem;
    }
    /* Share-Link auf eigener Zeile unter Datum/Gruppe/Stadion */
    .tipp-row__share-sep { display: none; }
    .tipp-row__share { display: block; margin-top: 0.4rem; }
}

/* --- Logout-Button ----------------------------------------------------- */
.btn-logout {
    background: transparent;
    color: var(--c-fg-dim);
    border: 1px solid var(--c-card-border);
    padding: 0.45rem 0.9rem;
    border-radius: var(--r);
    font: inherit;
    cursor: pointer;
}
.btn-logout:hover { color: var(--c-fg); border-color: var(--c-accent-2); }

/* Wichtig: hidden-Attribut respektieren (überschreibt explizite display-Regeln) */
[hidden] { display: none !important; }

/* ====================================================================== */
/* Liga-Selbstverwaltung                                                  */
/* ====================================================================== */

.league-card {
    padding: 1.5rem 1.6rem;
    background: linear-gradient(180deg, var(--c-card-bg) 0%, #0c1b13 100%);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    margin-top: 1rem;
}
.league-card__title {
    margin: 0 0 0.3rem;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--c-fg);
}
.league-card__role {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: rgba(95, 168, 114, 0.18);
    color: var(--c-accent-2);
    border: 1px solid var(--c-accent-2);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.league-invite {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1rem 0 0;
}
@media (min-width: 640px) {
    .league-invite { flex-direction: row; align-items: flex-end; }
    .league-invite .auth-form__field { flex: 1; }
}
.league-invite__url {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    background: rgba(8, 24, 14, 0.85);
    color: var(--c-fg-dim);
    border: 1px solid var(--c-card-border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    width: 100%;
    cursor: copy;
}
.league-invite__url:focus { outline: 2px solid var(--c-accent-2); color: var(--c-fg); }

.league-members {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.league-members li {
    padding: 0.55rem 0.85rem;
    background: rgba(8, 24, 14, 0.5);
    border: 1px solid var(--c-card-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.league-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: rgba(95, 168, 114, 0.2);
    color: var(--c-accent-2);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.league-badge--me {
    background: rgba(215, 37, 63, 0.18);
    color: var(--c-accent);
}

.league-admin-actions { margin-top: 1.5rem; }

/* ====================================================================== */
/* Theme: Light-Variante (Default = Dark via :root)                       */
/* ====================================================================== */

html.theme-light {
    --c-fg:           #1c2820;
    --c-fg-dim:       #5d6e63;
    --c-accent:       #c81f37;
    --c-accent-fg:    #ffffff;
    --c-accent-2:     #2f7a4b;
    --c-accent-2-soft:#a6cdb3;
    --c-grass-deep:   #eef3ea;
    --c-grass-1:      #e1ecdc;
    --c-grass-2:      #d6e4d0;
    --c-grass-line:   rgba(80, 130, 95, 0.30);
    --c-card-bg:      #ffffff;
    --c-card-border:  #d8e0d2;
    --c-nav-bg:       #f6f8f2;
    --c-link:         #2a8052;
    --c-link-hover:   #1a5d3a;
}

/* Light-Mode: einige hardcoded dunkle Overlays explizit umstellen */
html.theme-light body {
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 30%, rgba(80,130,95,0.12) 100%),
        repeating-linear-gradient(180deg,
            rgba(0,0,0,0)             0,
            rgba(0,0,0,0)             119px,
            rgba(80, 130, 95, 0.05)   120px,
            rgba(0,0,0,0)             121px),
        repeating-linear-gradient(180deg,
            var(--c-grass-1) 0,
            var(--c-grass-1) 38px,
            var(--c-grass-2) 38px,
            var(--c-grass-2) 76px);
}
html.theme-light .nav {
    background: linear-gradient(180deg, rgba(246,248,242,0.96) 0%, rgba(246,248,242,0.92) 100%);
    border-bottom-color: var(--c-accent-2-soft);
}
html.theme-light .hero {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(47,122,75,0.08) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, rgba(238,243,234,0.4) 0%, rgba(238,243,234,0) 28%, rgba(238,243,234,0) 72%, rgba(238,243,234,0.85) 100%);
}
html.theme-light .hero__slogan,
html.theme-light .hero__sub { text-shadow: none; }
html.theme-light .hero__countdown,
html.theme-light .countdown { background: rgba(255,255,255,0.85); border-color: var(--c-card-border); }
html.theme-light .card,
html.theme-light .group-card,
html.theme-light .venue-card { background: var(--c-card-bg); }
html.theme-light .match,
html.theme-light .spiel-hero,
html.theme-light .league-card,
html.theme-light .tipp-row,
html.theme-light .spiel-fact,
html.theme-light .venue-stat,
html.theme-light .venue-extra,
html.theme-light .filters,
html.theme-light .note,
html.theme-light .empty-state {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--c-card-border);
}
html.theme-light .footer { background: rgba(238, 243, 234, 0.85); border-top-color: var(--c-accent-2-soft); }
html.theme-light .auth-form input[type="email"],
html.theme-light .auth-form input[type="text"],
html.theme-light .league-invite__url,
html.theme-light .filters select,
html.theme-light .tipp-row__inputs input {
    background: #ffffff; color: var(--c-fg); border-color: var(--c-card-border);
}
html.theme-light .standings tr.is-qualified td { background: rgba(47,122,75,0.10); }
html.theme-light .standings tr.is-third td { background: rgba(255, 200, 60, 0.15); }
html.theme-light .standings tr.is-highlight td { background: rgba(200, 31, 55, 0.10); }

/* /nati behält in beiden Themes seine sehr rote Eigenoptik */
html.theme-light body.page-nati { color: var(--c-fg); }

/* ====================================================================== */
/* Theme-Toggle-Button im Footer                                          */
/* ====================================================================== */

.theme-toggle {
    background: transparent;
    border: 1px solid var(--c-card-border);
    color: var(--c-fg-dim);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.4rem;
    vertical-align: middle;
    transition: color 140ms ease, border-color 140ms ease;
}
.theme-toggle:hover { color: var(--c-fg); border-color: var(--c-accent-2); }
.theme-toggle__icon { font-size: 1rem; line-height: 1; }
.theme-toggle__icon--light { display: none; }
html.theme-light .theme-toggle__icon--dark  { display: none; }
html.theme-light .theme-toggle__icon--light { display: inline; }
.theme-toggle__label { font-weight: 600; }

/* ====================================================================== */
/* Form-Warning (Hinweis bei Liga-Beitritt etc.)                          */
/* ====================================================================== */

.form-warning {
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: rgba(255, 200, 60, 0.10);
    border: 1px solid rgba(255, 200, 60, 0.4);
    border-left: 3px solid #f5c563;
    border-radius: 8px;
    color: #f5e3b8;
    font-size: 0.95rem;
}
html.theme-light .form-warning { background: rgba(255, 200, 60, 0.15); color: #6b5a25; border-color: rgba(180, 140, 30, 0.4); border-left-color: #c79b30; }

/* Liga-Member-Email (Admin-Sicht) */
.league-member-mail { font-size: 0.85rem; color: var(--c-fg-dim); margin-left: auto; word-break: break-all; }
.league-member-mail:hover { color: var(--c-accent-2); }
.league-admin-hint { color: var(--c-fg-dim); font-size: 0.85rem; margin: 0.75rem 0 0; font-style: italic; }

/* ====================================================================== */
/* Polish-Pass-2: Theme-Button, mehr Grün, Light-Mode-Fixes, Animationen  */
/* ====================================================================== */

/* --- Theme-Toggle Button: klar Kontrast in beiden Modes ---------------- */
.theme-toggle {
    background: rgba(238, 240, 244, 0.95);
    color: #1c2820;
    border: 1px solid rgba(238, 240, 244, 0.4);
}
.theme-toggle:hover { background: #ffffff; color: #000; border-color: var(--c-accent-2); }
html.theme-light .theme-toggle {
    background: #1c2820;
    color: #ffffff;
    border: 1px solid rgba(28, 40, 32, 0.6);
}
html.theme-light .theme-toggle:hover { background: #0a1410; color: #fff; border-color: var(--c-accent-2); }

/* --- Dark-Mode Hero: spürbar grüner --------------------------------- */
.hero {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(110,201,133,0.18) 0%, rgba(0,0,0,0) 65%),
        radial-gradient(ellipse at  5%  5%, rgba(95,168,114,0.14) 0%, rgba(0,0,0,0) 50%),
        radial-gradient(ellipse at 95% 95%, rgba(95,168,114,0.12) 0%, rgba(0,0,0,0) 50%),
        repeating-linear-gradient(180deg,
            #0c2316 0,
            #0c2316 36px,
            #143020 36px,
            #143020 72px);
}
html.theme-light .hero {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(47,122,75,0.10) 0%, rgba(0,0,0,0) 65%),
        radial-gradient(ellipse at  5%  5%, rgba(47,122,75,0.07) 0%, rgba(0,0,0,0) 50%),
        radial-gradient(ellipse at 95% 95%, rgba(47,122,75,0.07) 0%, rgba(0,0,0,0) 50%),
        repeating-linear-gradient(180deg,
            #cce0bf 0,
            #cce0bf 36px,
            #bdd5ad 36px,
            #bdd5ad 72px);
}

/* --- Light-Mode: kräftigere Rasen-Vars (Saftiger statt blass) --------- */
html.theme-light {
    --c-grass-deep:   #d6e8c6;
    --c-grass-1:      #cce0bf;
    --c-grass-2:      #bdd5ad;
    --c-grass-line:   rgba(60, 110, 75, 0.35);
    --c-card-border:  #bcc9b1;
}

/* --- Light-Mode /nati countdown lesbar: explizit white-on-rot ------- */
html.theme-light body.page-nati .countdown--swiss { background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.45); }
html.theme-light body.page-nati .countdown--swiss .countdown__value { color: #ffffff; }
html.theme-light body.page-nati .countdown--swiss .countdown__label { color: #ffd9de; }
html.theme-light body.page-nati .countdown--swiss .countdown__sep   { color: #ffd9de; }
html.theme-light body.page-nati .hero__countdown-label { color: #ffd9de; }

/* --- Animationen ----------------------------------------------------- */

/* Mittelkreis im Hero pulsiert sehr langsam */
.hero::before { animation: hero-pulse 7s ease-in-out infinite; }
@keyframes hero-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; }
    50%      { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

/* Body-Rasen-Streifen scrollen ganz langsam vertikal (subtile Stadion-Bewegung) */
body { background-position: 0 0; animation: grass-scroll 28s linear infinite; }
@keyframes grass-scroll {
    from { background-position: 0 0,         0 0,         0 0; }
    to   { background-position: 0 0,         0 240px,     0 76px; }
}

/* Match-Cards staggered fade-in beim Laden */
.match-list .match {
    opacity: 0;
    animation: card-in 380ms ease-out forwards;
}
.match-list .match:nth-child(1) { animation-delay: 0ms; }
.match-list .match:nth-child(2) { animation-delay: 70ms; }
.match-list .match:nth-child(3) { animation-delay: 140ms; }
.match-list .match:nth-child(4) { animation-delay: 210ms; }
.match-list .match:nth-child(5) { animation-delay: 280ms; }
.match-list .match:nth-child(6) { animation-delay: 350ms; }
.match-list .match:nth-child(7) { animation-delay: 420ms; }
.match-list .match:nth-child(8) { animation-delay: 490ms; }
@keyframes card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sekunden-Tick: Wert poppt kurz */
.countdown__value.is-tick {
    animation: tick-pop 250ms ease-out;
}
@keyframes tick-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.18); color: var(--c-accent); }
    100% { transform: scale(1); }
}

/* Logo: Ball wackelt subtil im Idle (zusätzlich zur hover-rotation) */
.nav__logo .logo-ball {
    transform-box: fill-box;
    transform-origin: center;
    animation: logo-idle 9s ease-in-out infinite;
}
@keyframes logo-idle {
    0%, 100% { transform: rotate(0); }
    50%      { transform: rotate(15deg); }
}
/* Hover-Rotation gewinnt durch transition + transform-Override */
.nav__brand:hover .nav__logo .logo-ball,
.nav__brand:focus-visible .nav__logo .logo-ball { animation: none; transform: rotate(720deg); }

/* Score-Update auf Match-Detail: kurzer Flash */
.spiel-hero__score-num { transition: color 220ms ease, transform 220ms ease; }
.spiel-hero__score-num.is-flash {
    animation: score-flash 600ms ease-out;
}
@keyframes score-flash {
    0%   { color: var(--c-fg); transform: scale(1); }
    30%  { color: var(--c-accent); transform: scale(1.15); }
    100% { color: var(--c-fg); transform: scale(1); }
}

/* Accessibility: respektiere Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ====================================================================== */
/* "Erfrischend": saftige Farben + Floating Background-Bälle + lebendige  */
/* Animationen                                                            */
/* ====================================================================== */

/* Floating-Bälle hinter dem Content für Stadion-Glow-Atmosphäre */
.floating-elements {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.floater {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(126, 226, 154, 0.20), transparent 70%);
    filter: blur(20px);
    will-change: transform;
}
.floater--red { background: radial-gradient(circle at 40% 40%, rgba(255, 58, 85, 0.16), transparent 70%); }
.floater--1 { top: -10%; left: -15%; animation: float-1 32s linear infinite; }
.floater--2 { top: 40%;  right: -20%; animation: float-2 38s linear infinite; }
.floater--3 { bottom: -10%; left: 30%; animation: float-3 44s linear infinite; }
@keyframes float-1 { 0%, 100% { transform: translate(0, 0); }    50% { transform: translate(40vw, 20vh); } }
@keyframes float-2 { 0%, 100% { transform: translate(0, 0); }    50% { transform: translate(-30vw, -25vh); } }
@keyframes float-3 { 0%, 100% { transform: translate(0, 0); }    50% { transform: translate(25vw, -45vh); } }
html.theme-light .floater    { background: radial-gradient(circle at 30% 30%, rgba(60, 140, 90, 0.18), transparent 70%); }
html.theme-light .floater--red { background: radial-gradient(circle at 40% 40%, rgba(255, 58, 85, 0.10), transparent 70%); }

main.wrap, .nav, .footer { position: relative; z-index: 1; }

/* Lebendigere Hero-Mittelkreis + Mittellinie */
.hero::before {
    border-color: var(--c-grass-line);
    box-shadow: 0 0 80px rgba(126, 226, 154, 0.18) inset, 0 0 60px rgba(126, 226, 154, 0.10);
    animation: hero-pulse 5s ease-in-out infinite;
}
@keyframes hero-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; box-shadow: 0 0 80px rgba(126, 226, 154, 0.18) inset, 0 0 40px rgba(126, 226, 154, 0.05); }
    50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1;    box-shadow: 0 0 100px rgba(126, 226, 154, 0.28) inset, 0 0 80px rgba(126, 226, 154, 0.18); }
}

/* Hero radial-Glows pulsieren */
.hero {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(126,226,154,0.18) 0%, rgba(0,0,0,0) 65%),
        radial-gradient(ellipse at  5%  5%, rgba(126,226,154,0.14) 0%, rgba(0,0,0,0) 50%),
        radial-gradient(ellipse at 95% 95%, rgba(126,226,154,0.12) 0%, rgba(0,0,0,0) 50%),
        repeating-linear-gradient(180deg,
            #103820 0,
            #103820 36px,
            #195030 36px,
            #195030 72px);
    animation: hero-glow 8s ease-in-out infinite;
}
@keyframes hero-glow {
    0%, 100% { filter: brightness(1)    saturate(1); }
    50%      { filter: brightness(1.08) saturate(1.1); }
}

/* Slogan glow-Pulse */
.hero__slogan {
    color: var(--c-fg);
    text-shadow: 0 3px 20px rgba(0,0,0,0.55), 0 0 30px rgba(126,226,154,0.20);
    animation: slogan-glow 4s ease-in-out infinite;
}
@keyframes slogan-glow {
    0%, 100% { text-shadow: 0 3px 20px rgba(0,0,0,0.55), 0 0 20px rgba(126,226,154,0.15); }
    50%      { text-shadow: 0 3px 24px rgba(0,0,0,0.65), 0 0 50px rgba(126,226,154,0.40); }
}
html.theme-light .hero__slogan {
    text-shadow: 0 2px 8px rgba(255,255,255,0.5), 0 0 24px rgba(80,180,110,0.25);
    animation-name: slogan-glow-light;
}
@keyframes slogan-glow-light {
    0%, 100% { text-shadow: 0 2px 8px rgba(255,255,255,0.5), 0 0 16px rgba(80,180,110,0.20); }
    50%      { text-shadow: 0 2px 8px rgba(255,255,255,0.55), 0 0 40px rgba(80,180,110,0.55); }
}

/* Schnellerer Rasen-Scroll, sichtbarer */
body { animation: grass-scroll 18s linear infinite; }

/* Cards lebendiger: hover bouncier, glow */
.card, .group-card, .venue-card {
    transition: border-color 200ms ease, transform 240ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 240ms ease;
}
.card:hover, .group-card:hover, .venue-card:hover {
    transform: translateY(-4px) scale(1.012);
    box-shadow: 0 16px 40px -12px rgba(126, 226, 154, 0.4), 0 0 0 1px var(--c-accent-2);
}

/* Logo-Ball kontinuierlich rotieren statt Wackeln */
.nav__logo .logo-ball {
    transform-box: fill-box;
    transform-origin: center;
    animation: logo-roll 14s linear infinite;
}
@keyframes logo-roll { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.nav__brand:hover .nav__logo .logo-ball,
.nav__brand:focus-visible .nav__logo .logo-ball { animation: logo-roll-fast 1.4s linear infinite; }
@keyframes logo-roll-fast { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Aktive Nav-Links: rotes Glow-Pulse */
.nav__links a.is-active {
    animation: active-link-pulse 2.4s ease-in-out infinite;
}
@keyframes active-link-pulse {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50%      { text-shadow: 0 0 12px rgba(255, 58, 85, 0.6); }
}

/* Hopp-Schwiiz-Badge auf Match-Cards pulsiert */
.match--swiss::before {
    animation: badge-pulse 1.8s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 58, 85, 0.7); }
    50%      { box-shadow: 0 0 14px 4px rgba(255, 58, 85, 0); }
}

/* Hopp-Schwiiz-Section-Title bekommt subtle scale-Pulse */
.section-title--swiss {
    animation: swiss-title-pulse 3s ease-in-out infinite;
    transform-origin: left center;
}
@keyframes swiss-title-pulse {
    0%, 100% { letter-spacing: 0.12em; }
    50%      { letter-spacing: 0.16em; }
}

/* Hero-Countdown__value: subtle constant glow */
.countdown__value {
    text-shadow: 0 0 12px rgba(126, 226, 154, 0.20);
}

/* Buttons: bouncier */
.btn {
    transition: background 160ms ease, transform 200ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 160ms ease, filter 160ms ease;
}
.btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 24px -8px rgba(255, 58, 85, 0.5);
}

/* ====================================================================== */
/* CTA-Banner für Tippspiel auf Home                                       */
/* ====================================================================== */

.cta-banner {
    margin: 2rem 0 1rem;
    padding: 1.75rem 1.75rem 1.5rem;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(255, 58, 85, 0.15) 0%, rgba(255, 58, 85, 0) 60%),
        linear-gradient(135deg, var(--c-card-bg) 0%, #0c2e16 100%);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::after {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(255, 58, 85, 0.18) 0%, transparent 60%);
    pointer-events: none;
    animation: cta-pulse 4s ease-in-out infinite;
}
@keyframes cta-pulse {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.6; }
    50%      { transform: scale(1.15) translate(-10%, 10%); opacity: 1; }
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { margin: 0 0 0.5rem; font-size: clamp(1.4rem, 4vw, 1.9rem); color: var(--c-fg); }
.cta-banner p  { margin: 0 0 1.2rem; color: var(--c-fg-dim); }

/* ====================================================================== */
/* Tipps auf Match-Detail (P5)                                             */
/* ====================================================================== */

.tipps-section { margin-top: 2rem; }
.tipps-section__hint { color: var(--c-fg-dim); font-style: italic; margin-bottom: 1rem; }

.my-tipp {
    padding: 1rem 1.2rem;
    background: rgba(255, 58, 85, 0.12);
    border: 1px solid var(--c-accent);
    border-radius: var(--r);
    margin-bottom: 1rem;
}
.my-tipp strong { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 800; color: var(--c-fg); margin-left: 0.4rem; }
.my-tipp__pts   { display: inline-block; margin-left: 0.6rem; padding: 0.1rem 0.55rem; background: var(--c-accent); color: var(--c-accent-fg); border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; }

.tipps-table .pts-badge {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.1rem 0.4rem;
    background: rgba(126, 226, 154, 0.18);
    color: var(--c-accent-2);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.tipps-table .pts-badge--5 { background: rgba(255, 58, 85, 0.20); color: var(--c-accent); }
.tipps-table tr.is-me td { background: rgba(255, 58, 85, 0.08); }

/* ====================================================================== */
/* Light-Mode Fixes (hardcoded Dark-Values überschrieben)                 */
/* ====================================================================== */

/* CTA-Banner: im Light-Mode klares helles Hintergrund-Setup */
html.theme-light .cta-banner {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(255, 58, 85, 0.12) 0%, rgba(255, 58, 85, 0) 60%),
        linear-gradient(135deg, #ffffff 0%, #eef5ea 100%);
    border: 1px solid var(--c-card-border);
}
html.theme-light .cta-banner h2 { color: var(--c-fg); }
html.theme-light .cta-banner p  { color: var(--c-fg-dim); }

/* Schweiz-Match-Card: im Light-Mode hellem Rot-Tint, dunkler Text */
html.theme-light .match--swiss {
    background:
        linear-gradient(180deg, rgba(255, 58, 85, 0.12) 0%, rgba(255, 58, 85, 0.04) 100%),
        rgba(255, 255, 255, 0.85);
    border-color: var(--c-accent);
}
html.theme-light .match--swiss:hover {
    background:
        linear-gradient(180deg, rgba(255, 58, 85, 0.20) 0%, rgba(255, 58, 85, 0.08) 100%),
        rgba(255, 255, 255, 0.95);
}
html.theme-light .match--swiss .match__kickoff      { color: #b81f37; }
html.theme-light .match--swiss .match__name--link   { color: var(--c-fg); }
html.theme-light .match--swiss .match__date,
html.theme-light .match--swiss .match__meta         { color: var(--c-fg-dim); }

/* Match-Card Hover allgemein im Light-Mode */
html.theme-light article.match:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--c-accent-2);
}

/* Group-Cards / Venue-Cards Hover im Light-Mode */
html.theme-light .group-card,
html.theme-light .venue-card {
    background: rgba(255, 255, 255, 0.85);
}
html.theme-light .group-card:hover,
html.theme-light .venue-card:hover {
    background: #ffffff;
    box-shadow: 0 16px 40px -12px rgba(60, 140, 90, 0.25), 0 0 0 1px var(--c-accent-2);
}

/* Body-Hintergrund-Floating-Bälle im Light-Mode dezenter */
html.theme-light .floater { opacity: 0.6; }

/* Card-Standard-Background im Light-Mode klar */
html.theme-light .card { background: rgba(255, 255, 255, 0.9); }
html.theme-light .card:hover { background: #ffffff; box-shadow: 0 16px 40px -12px rgba(60, 140, 90, 0.25), 0 0 0 1px var(--c-accent-2); }

/* Hero-Slogan im Light-Mode: stärkerer Kontrast (Slogan-Glow war zu hell) */
html.theme-light .hero__slogan { color: #0e2a17; }

/* ====================================================================== */
/* Sales-Pitch-Layouts: How-it-works Steps + Punkte-System                 */
/* ====================================================================== */

.steps {
    list-style: none;
    margin: 2rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    counter-reset: step;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
    counter-increment: step;
    position: relative;
    padding: 1.5rem 1.5rem 1.4rem;
    background: rgba(15, 40, 24, 0.6);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
    overflow: hidden;
}
.step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -0.4rem; right: 0.6rem;
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 900;
    color: rgba(126, 226, 154, 0.18);
    line-height: 1;
}
.step h3 { margin: 0 0 0.45rem; font-size: 1.2rem; font-weight: 800; color: var(--c-fg); position: relative; }
.step p  { margin: 0; color: var(--c-fg-dim); position: relative; }
html.theme-light .step { background: rgba(255, 255, 255, 0.85); }
html.theme-light .step::before { color: rgba(60, 140, 90, 0.18); }

.point-system {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.25rem 0;
}
.point-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(15, 40, 24, 0.55);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
}
html.theme-light .point-row { background: rgba(255, 255, 255, 0.9); }
.point-row__pts {
    flex-shrink: 0;
    width: 3.5rem; height: 3.5rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(126, 226, 154, 0.18);
    color: var(--c-accent-2);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: 900;
}
.point-row--top  .point-row__pts { background: var(--c-accent); color: var(--c-accent-fg); }
.point-row--zero .point-row__pts { background: rgba(168, 194, 179, 0.18); color: var(--c-fg-dim); }
.point-row strong { display: block; color: var(--c-fg); font-size: 1.08rem; }
.point-row__hint  { display: block; color: var(--c-fg-dim); font-size: 0.9rem; margin-top: 0.2rem; }

.ranking-criteria {
    margin: 1rem 0 1.5rem 1.2rem;
    padding: 0;
    color: var(--c-fg);
}
.ranking-criteria li { margin-bottom: 0.6rem; line-height: 1.5; }
.ranking-criteria strong { color: var(--c-accent-2); }

.ranking-preview { opacity: 0.7; pointer-events: none; }
.ranking-preview .tipps-section__hint { pointer-events: auto; }

/* ====================================================================== */
/* Header: Anmelden-CTA + Username-Indikator                              */
/* ====================================================================== */

.nav__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    margin-left: 0.5rem;
    background: var(--c-accent);
    color: var(--c-accent-fg) !important;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px -4px rgba(255, 58, 85, 0.5);
    transition: transform 200ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 200ms ease, filter 160ms ease;
}
.nav__cta:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 22px -6px rgba(255, 58, 85, 0.65);
    text-decoration: none;
    filter: brightness(1.08);
    color: var(--c-accent-fg) !important;
}

.nav__user {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    margin-left: 0.5rem;
    background: rgba(126, 226, 154, 0.12);
    color: var(--c-fg) !important;
    border: 1px solid var(--c-accent-2-soft);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    transition: border-color 160ms ease, background 160ms ease, transform 200ms ease;
}
.nav__user::before {
    content: '👤';
    font-size: 0.9rem;
    filter: grayscale(1) opacity(0.8);
}
.nav__user:hover {
    text-decoration: none;
    border-color: var(--c-accent-2);
    background: rgba(126, 226, 154, 0.22);
    transform: translateY(-1px);
}
html.theme-light .nav__user {
    background: rgba(60, 140, 90, 0.12);
    border-color: rgba(60, 140, 90, 0.4);
}

/* ====================================================================== */
/* Admin-Bereich                                                          */
/* ====================================================================== */

.admin-page { padding-bottom: 4rem; }

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 2rem;
    padding: 0.5rem;
    background: rgba(15, 40, 24, 0.55);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
}
.admin-nav a {
    padding: 0.5rem 0.95rem;
    border-radius: 8px;
    color: var(--c-fg-dim);
    font-weight: 700;
    font-size: 0.92rem;
    transition: background 140ms ease, color 140ms ease;
}
.admin-nav a:hover { background: rgba(126, 226, 154, 0.10); color: var(--c-fg); text-decoration: none; }
.admin-nav a.is-active { background: var(--c-accent); color: var(--c-accent-fg); }
html.theme-light .admin-nav { background: rgba(255, 255, 255, 0.85); }

.admin-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 0 0 2rem;
}
@media (min-width: 720px) { .admin-stats { grid-template-columns: repeat(4, 1fr); } }
.admin-stat {
    padding: 1rem 1.1rem;
    background: rgba(15, 40, 24, 0.55);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
}
html.theme-light .admin-stat { background: rgba(255, 255, 255, 0.85); }
.admin-stat__label { display: block; font-size: 0.72rem; color: var(--c-fg-dim); text-transform: uppercase; letter-spacing: 0.13em; font-weight: 700; }
.admin-stat__value { display: block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: 1.8rem; font-weight: 800; color: var(--c-accent-2); font-variant-numeric: tabular-nums; }
.admin-stat__hint  { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--c-fg-dim); }

.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { font-size: 0.9rem; min-width: 100%; }
.admin-table th, .admin-table td { padding: 0.5rem 0.5rem; white-space: nowrap; }
.admin-token { font-family: var(--font-mono); font-size: 0.78rem; color: var(--c-fg-dim); user-select: all; }

.footer__admin { color: var(--c-accent) !important; font-weight: 700; }

/* ====================================================================== */
/* Share-Buttons (Marketing)                                              */
/* ====================================================================== */

.share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
    padding: 0.85rem 1rem;
    background: rgba(15, 40, 24, 0.55);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
}
html.theme-light .share-bar { background: rgba(255, 255, 255, 0.85); }
.share-bar__label { font-size: 0.78rem; color: var(--c-fg-dim); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; margin-right: 0.25rem; }

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: rgba(126, 226, 154, 0.10);
    color: var(--c-fg);
    border: 1px solid var(--c-card-border);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 160ms cubic-bezier(.34, 1.56, .64, 1);
}
.share-btn:hover { transform: translateY(-2px); border-color: var(--c-accent-2); background: rgba(126, 226, 154, 0.22); text-decoration: none; }
.share-btn--whatsapp:hover { border-color: #25d366; background: rgba(37, 211, 102, 0.18); }
.share-btn--telegram:hover { border-color: #229ed9; background: rgba(34, 158, 217, 0.18); }
.share-btn--x:hover        { border-color: #ffffff; background: rgba(255, 255, 255, 0.10); }
.share-btn--mail:hover     { border-color: var(--c-accent); background: rgba(255, 58, 85, 0.14); }
.share-btn--copy:hover     { border-color: var(--c-fg); }

.tipp-row__share {
    display: inline-block;
    margin-left: 0.3rem;
    color: var(--c-accent-2);
    font-weight: 700;
}
.tipp-row__share:hover { color: var(--c-fg); text-decoration: none; }

/* ====================================================================== */
/* Invite-Template (Liga-Admin)                                            */
/* ====================================================================== */

.invite-template {
    margin-top: 1.25rem;
    padding: 1rem 1.2rem;
    background: rgba(15, 40, 24, 0.4);
    border: 1px solid var(--c-card-border);
    border-radius: var(--r);
}
html.theme-light .invite-template { background: rgba(255, 255, 255, 0.7); }
.invite-template > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--c-accent-2);
    list-style: none;
    padding: 0.2rem 0;
    user-select: none;
}
.invite-template > summary::before { content: '▸ '; transition: transform 160ms ease; display: inline-block; }
.invite-template[open] > summary::before { transform: rotate(90deg); }
.invite-template__hint { margin: 0.6rem 0 1rem; color: var(--c-fg-dim); font-size: 0.9rem; }
.invite-template__body {
    width: 100%;
    background: rgba(8, 24, 14, 0.85);
    color: var(--c-fg);
    border: 1px solid var(--c-card-border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    line-height: 1.5;
    resize: vertical;
    cursor: copy;
}
html.theme-light .invite-template__body { background: #ffffff; color: var(--c-fg); }
.invite-template__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.btn--secondary {
    background: transparent;
    color: var(--c-fg);
    border: 1px solid var(--c-card-border);
}
.btn--secondary:hover { background: rgba(126, 226, 154, 0.12); border-color: var(--c-accent-2); filter: none; }