/* Clubfans Reunited – Tabelle der 2. Bundesliga
   Aufgebaut wie das Leaderboard: schwarze Tafel auf rotem Grund, feste
   Spalten, schmale Zeilen, Zahlen rechtsbuendig untereinander. Wer von dort
   kommt, findet sich sofort zurecht.

   Die Spaltenbreiten stehen an einer Stelle, damit Kopfzeile und Daten nicht
   auseinanderlaufen koennen. */

:root {
    --spalten:    2.8rem 1fr 2.4rem 3rem 3.4rem;
    --gold:       #f0b429;
    --auf:        #2f9e4f;
    --relegation: #e0a020;
    --ab:         #d33a4b;
}

body {
    background: var(--rot);
    color: var(--weiss);
    padding: 1.75rem 1rem 3rem;
}

.seite-tabelle main {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: 0;
    flex: none;
}

.seite-tabelle h1 {
    margin: 0 0 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;

    font-family: var(--schrift-schlag);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--weiss);
}

/* Dieselben Masse wie .hero-logo in anmeldung.css. */
.tafel-logo {
    flex: none;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}

.tafel-titel {
    margin: 0.45rem 0 0.25rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: clamp(1.45rem, 5.2vw, 1.95rem);
    /* Oswald deckt 200 bis 700 ab – die Kontur legt das fehlende Stueck
       drauf und verdickt die Buchstaben gleichmaessig. */
    font-weight: 800;
    -webkit-text-stroke: 0.4px currentColor;
    letter-spacing: 0.08em;
    color: var(--weiss);
}

.tafel-zeile {
    margin: 0 0 1.5rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Balken zur Anmeldung ----------------------------------------------- */

.test-hinweis {
    text-decoration: none;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    margin: 0 0 1.2rem;
    padding: 0.6rem 1rem;

    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(240, 180, 41, 0.55);
    border-radius: var(--radius);

    font-family: var(--schrift-akzent);
    font-size: clamp(0.86rem, 3vw, 0.98rem);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
}

.test-hinweis:hover,
.test-hinweis:focus-visible {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(240, 180, 41, 0.9);
    color: var(--weiss);
}

.test-hinweis svg {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: var(--gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Die Tafel ---------------------------------------------------------- */

.tafel {
    background: var(--schwarz);
    border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.tafel-kopf {
    display: grid;
    grid-template-columns: var(--spalten);
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;

    background: rgba(255, 255, 255, 0.07);
    border-bottom: 2px solid var(--rot);

    font-family: var(--schrift-akzent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.spalte-sp,
.spalte-tore,
.spalte-diff,
.spalte-punkte { text-align: right; }

/* Das Torverhaeltnis gibt es erst ab 700px – darunter waeren sechs Spalten
   zu eng, und in der Bilanz unter dem Namen wuerde es abgeschnitten. */
.spalte-tore,
.rang-tore { display: none; }

.rang-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- Eine Zeile --------------------------------------------------------- */

.rang-zeile {
    display: grid;
    grid-template-columns: var(--spalten);
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    /* Duenne Linie statt Abstand zwischen den Zeilen – so wirkt es wie eine
       Tafel und nicht wie einzelne Karten. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.rang-zeile:last-child { border-bottom: 0; }

/* Farbiger Streifen ganz links fuer Auf- und Abstiegsraenge.
   box-shadow statt border: veraendert die Spaltenbreite nicht. */
.bereich-auf        { box-shadow: inset 3px 0 0 var(--auf); }
.bereich-relegation { box-shadow: inset 3px 0 0 var(--relegation); }
.bereich-ab         { box-shadow: inset 3px 0 0 var(--ab); }

/* Der Club. Der Streifen bleibt erhalten, der Grund wird aufgehellt. */
.rang-zeile.unser {
    background: rgba(255, 255, 255, 0.09);
}

.rang-zeile.unser .rang-verein {
    font-weight: 700;
    color: var(--gold);
}

.rang-platz {
    font-family: var(--schrift-schlag);
    font-size: 1.2rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Verein ------------------------------------------------------------- */

.rang-name {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.rang-oben {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.tabellen-logo {
    flex: none;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.rang-verein {
    font-family: var(--schrift-akzent);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--weiss);
    /* Lange Namen kuerzen statt die Spalte zu sprengen – die Zahlen rechts
       muessen untereinander bleiben. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rang-bilanz {
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Zahlen ------------------------------------------------------------- */

.rang-sp,
.rang-tore,
.rang-diff {
    justify-self: end;
    font-family: var(--schrift-akzent);
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.rang-punkte {
    justify-self: end;
    font-family: var(--schrift-schlag);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gold);
}

/* ---- Abschlussbalken ---------------------------------------------------- */
/* Schliesst die Tafel nach unten ab und fuehrt zur Anmeldung. Volles Schwarz,
   etwas tiefer als der Grund der Tafel, dazu die rote Kante wie unter der
   Kopfzeile: So setzt er sich ab, ohne aus der Tafel zu fallen. */

.tafel-balken {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 3.4rem;
    padding: 0.55rem 1rem;

    background: #000;
    border-top: 2px solid var(--rot);

    font-family: var(--schrift-akzent);
    font-size: clamp(0.95rem, 3.4vw, 1.12rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    color: var(--weiss);
}

.tafel-balken:hover,
.tafel-balken:focus-visible {
    background: #131316;
    color: var(--weiss);
}

/* ---- Stand, Legende, Quelle --------------------------------------------- */

.tabelle-stand {
    margin: 0.9rem 0 0;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.7);
}

.legende {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.4rem;

    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;

    font-family: var(--schrift-akzent);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.82);
}

.legende li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.legende-farbe {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 2px;
}

.farbe-auf        { background: var(--auf); }
.farbe-relegation { background: var(--relegation); }
.farbe-ab         { background: var(--ab); }

/* Der Dienst verlangt keine Nennung, sie gehoert sich aber. */
.quelle {
    margin: 1.2rem 0 0;
    text-align: center;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.5);
}

.seite-tabelle .meldung {
    margin: 1.2rem 0 0;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    text-align: center;
}

.start-zeile {
    margin: 1.6rem 0 0;
    text-align: center;
}

.weiss-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.9rem;

    background: var(--weiss);
    border-radius: 999px;

    font-family: var(--schrift-akzent);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--rot);
}

.weiss-knopf svg {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: var(--rot);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Grosse Bildschirme -------------------------------------------------- */

@media (min-width: 700px) {
    /* Eine Spalte mehr: das Torverhaeltnis zwischen Spielen und Differenz. */
    :root { --spalten: 2.8rem 1fr 2.4rem 3.4rem 3rem 3.4rem; }

    .spalte-tore,
    .rang-tore { display: block; }

    .seite-tabelle h1 { font-size: 3.9rem; gap: 1.2rem; }

    .tafel-logo { width: 92px; height: 92px; }

    .tafel-zeile { font-size: 1.05rem; }

    .rang-zeile { padding: 0.6rem 1.2rem; }

    .tabellen-logo { width: 28px; height: 28px; }
}

/* ---- Schmale Bildschirme ------------------------------------------------ */

@media (max-width: 420px) {
    :root { --spalten: 2.2rem 1fr 1.9rem 2.5rem 2.8rem; }

    .tafel-kopf,
    .rang-zeile { padding-left: 0.7rem; padding-right: 0.7rem; gap: 0.45rem; }

    .rang-platz    { font-size: 1.05rem; }
    .rang-punkte   { font-size: 1.25rem; }
    .rang-verein   { font-size: 0.88rem; }
    .rang-bilanz   { font-size: 0.68rem; }
    .tabellen-logo { width: 20px; height: 20px; }
}