/* Clubfans Reunited – Leaderboard
   Aufgebaut wie eine Anzeigetafel beim Golf: feste Spalten, schmale Zeilen,
   duenne Trennlinien, Zahlen rechtsbuendig untereinander. Kein Kopf- und kein
   Fussbereich – die Tafel steht fuer sich auf rotem Grund.

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

:root {
    --spalten: 3.4rem 1fr 3.2rem 4rem;
    --gold:    #f0b429;
    --silber:  #cfd4da;
    --bronze:  #cd8032;
}

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

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

.seite-leaderboard h1 {
    margin: 0 0 0.25rem;
    /* Logo und Schriftzug nebeneinander, mittig – wie in den Kopfbereichen
       der uebrigen Seiten. flex-wrap: auf sehr schmalen Geraeten rutscht der
       Schriftzug unter das Logo, statt hinauszulaufen. */
    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 – 70px, rund, mit
   weichem Schatten. Eigene Klasse, weil hier kein Hero drumherum ist. */
.tafel-logo {
    flex: none;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
}

/* Zeile direkt unter der Ueberschrift. Groesser und heller als die
   Saisonangabe darunter – sie gehoert noch zum Titel. */
.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 – 800 wird auf 700 begrenzt, mehr gibt die
       Schrift nicht her. 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);
}

/* ---- Hinweis waehrend der Testphase ------------------------------------- */
/* Warnfarben waeren hier zu laut – es ist kein Fehler, sondern eine
   Ansage. Deshalb dunkel hinterlegt mit gelbem Zeichen und gelbem Rand. */

.test-hinweis {
    /* Fuehrt zur Anmeldung – die Unterstreichung waere hier zu unruhig,
       der Kasten zeigt schon, dass etwas dahintersteckt. */
    text-decoration: none;

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

    margin: 0 0 1rem;
    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);
}

/* Beim Zeigen etwas heller, damit man merkt, dass der Balken fuehrt. */
.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);
}

/* Strichzeichnung im selben Stil wie die uebrigen Zeichen der Seite */
.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 aktuelle Paarung ----------------------------------------------- */
/* Steht zwischen Hinweis und Tafel. Dunkel hinterlegt wie der Hinweis
   darueber, aber ohne farbigen Rand – sie soll der Rangliste nicht die
   Aufmerksamkeit nehmen. */

/* Ankuendigung ueber dem Kasten – ohne eigenen Grund, also weiss direkt auf
   dem Rot der Seite. */
.partie-titel {
    margin: 0 auto 0.35rem;
    max-width: 27rem;
    text-align: center;

    font-family: var(--schrift-akzent);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--weiss);
}

.partie-tafel {
    margin: 0 auto 1rem;
    max-width: 27rem;
    padding: 0.7rem 0.9rem 0.6rem;

    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);

    text-align: center;
}

/* Wettbewerb ueber der Paarung. Weisses Feld, damit es sich vom Kasten und
   von der Faktorzeile darunter unterscheidet.
   :empty faengt den Ligaspieltag ab: Ohne die Regel bliebe der Abstand
   stehen, obwohl nichts dasteht. */
.pt-runde {
    display: block;
    width: fit-content;
    margin: 0 auto 0.55rem;
    padding: 0.1rem 0.55rem;

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

    font-family: var(--schrift-akzent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--schwarz);
}

.pt-runde:empty { display: none; }

.partie-reihe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

/* Beide Haelften gleich breit, damit das VS. genau in der Mitte steht –
   auch wenn ein Vereinsname deutlich laenger ist als der andere.
   min-width: 0 erlaubt das Schrumpfen; ohne die Angabe kann ein Kind seine
   Spalte von innen auseinanderdruecken. */
.pt-team {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 0;
    min-width: 0;
}

/* Die Wappen aussen, die Namen zur Mitte hin – so ruecken beide Mannschaften
   ans VS. heran. */
.pt-team.heim { justify-content: flex-end; }
.pt-team.gast { justify-content: flex-start; }

.pt-logo {
    flex: none;
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.pt-name {
    font-family: var(--schrift-akzent);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--weiss);
}

/* Der Endstand steht an derselben Stelle wie sonst das VS. – groesser und
   heller, weil er die eigentliche Aussage des Kastens ist. */
.pt-ergebnis {
    flex: none;
    font-family: var(--schrift-akzent);
    font-size: 1.15rem;
    /* Oswald reicht nur bis 700 – die Kontur legt das fehlende Stueck drauf
       und verdickt die Ziffern gleichmaessig. */
    font-weight: 900;
    -webkit-text-stroke: 0.5px currentColor;
    letter-spacing: 0.02em;
    color: var(--weiss);
}

.pt-vs {
    flex: none;
    font-family: var(--schrift-akzent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.62);
}

/* Faktor direkt unter der Paarung, im selben Kasten.
   :empty faengt den Fall ab, dass weder Derby noch Topspiel vorliegt: Ohne
   die Regel bliebe der Abstand stehen, obwohl nichts dasteht. */
.pt-faktor {
    display: block;
    margin-top: 0.45rem;
    font-family: var(--schrift-akzent);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--weiss);
}

.pt-faktor:empty { display: none; }

.pt-termin {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--schrift-akzent);
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.78);
}

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

/* ---- Hinweis ueber der Tafel -------------------------------------------- */
/* Ohne Kasten, weiss direkt auf dem Rot: Der Anmeldebalken weiter oben ist
   umrandet und soll das auffaelligste auf der Seite bleiben. Diese Zeile
   erklaert nur, was man mit der Tafel machen kann. */

.klick-hinweis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    margin: 0 0 0.55rem;

    font-family: var(--schrift-akzent);
    /* Feste 20px statt eines clamp: So steht die Zeile auf jedem Schirm
       gleich gross da. Sie bricht auf schmalen Geraeten dann zwar um,
       das faengt flex-wrap oben ab. Das Zeichen davor ist in em bemessen
       und zieht von selbst mit. */
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-align: center;
    color: var(--weiss);
}

.klick-hinweis svg {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

/* Kopfzeile mit den Spaltenbezeichnungen */
.tafel-kopf {
    display: grid;
    grid-template-columns: var(--spalten);
    align-items: center;
    gap: 0.75rem;
    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-tage,
.spalte-punkte { text-align: right; }

.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.75rem;
    padding: 0.55rem 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; }

/* ---- Abschlussbalken ---------------------------------------------------- */
/* Schliesst die Tafel nach unten ab. Enthaelt den Knopf zur Ligatabelle und
   darunter den Schriftzug – deshalb untereinander statt nebeneinander. */

.werbe-balken {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;

    margin: 0;
    min-height: 4rem;
    padding: 1rem;

    /* Voelliges 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
       herauszufallen. */
    background: #000;
    border-top: 2px solid var(--rot);

    font-family: var(--schrift-akzent);
    font-size: clamp(0.95rem, 3.4vw, 1.15rem);
    /* Oswald reicht nur bis 700 – 900 wird darauf begrenzt. Die Kontur legt
       das fehlende Stueck drauf, wie bei .tafel-titel. Sie faellt hier etwas
       staerker aus, weil der Satz kleiner ist. */
    font-weight: 900;
    -webkit-text-stroke: 0.5px currentColor;
    /* Eine echte kursive Schnittstelle bringt Oswald nicht mit; der Browser
       neigt die Buchstaben selbst. */
    font-style: italic;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    color: var(--weiss);
}

/* Der Schriftzug erbt die kursive Schrift vom Balken – die Angaben stehen
   dort, damit sie nicht doppelt gepflegt werden muessen. */
.werbe-satz { display: block; }

/* Knopf zur Ligatabelle. Erhaben durch eine harte weisse Kante unter dem
   Rahmen: Ein weicher Schatten waere auf dem schwarzen Grund nicht zu sehen,
   die Kante gibt dem Knopf sichtbar Hoehe.
   Die kursive Schrift des Balkens wird hier zurueckgenommen – ein geneigter
   Knopf saehe schief aus. */
.tabellen-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.3rem;

    background: #000;
    border: 2px solid var(--weiss);
    border-radius: 8px;
    box-shadow: 0 4px 0 rgba(255, 255, 255, 0.85),
                0 9px 16px rgba(0, 0, 0, 0.75);

    font-family: var(--schrift-akzent);
    font-size: clamp(0.85rem, 3vw, 0.98rem);
    font-weight: 700;
    font-style: normal;
    -webkit-text-stroke: 0;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--weiss);

    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Beim Druecken sinkt der Knopf auf seine Kante herab. */
.tabellen-knopf:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85),
                0 3px 8px rgba(0, 0, 0, 0.75);
}

/* ---- Platz -------------------------------------------------------------- */

.platz-huelle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

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

/* Der Trendpfeil neben der Platznummer. Klein und farbig: Gruen hinauf,
   rot hinunter - die beiden Bedeutungen, die im Sport jeder ohne
   Beschriftung versteht.

   Wer sich nicht bewegt hat, bekommt gar nichts. Ein Strich fuer
   "gleich geblieben" stuende in fast jeder Zeile und verstellte den Blick
   auf die, bei denen sich etwas getan hat. */
.rang-trend {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    /* Auf die Mitte der Ziffer daneben gehoben. */
    margin-top: -0.02rem;
}

/* Gefuellt statt gestrichelt: Bei dieser Groesse traegt eine Flaeche
   besser als eine Linie. */
.trend-hoch   { fill: #35b95f; }
.trend-runter { fill: #e0243f; }

/* Die vorderen drei Plaetze in Metallfarben – wie auf einer Anzeigetafel,
   wo die Spitze sofort ins Auge fallen soll. */
.platz-1 .rang-platz { color: var(--gold); }
.platz-2 .rang-platz { color: var(--silber); }
.platz-3 .rang-platz { color: var(--bronze); }

/* Farbiger Streifen ganz links, damit die Spitze auch beim Ueberfliegen
   auffaellt. box-shadow statt border: veraendert die Spaltenbreite nicht. */
.platz-1 { box-shadow: inset 3px 0 0 var(--gold); }
.platz-2 { box-shadow: inset 3px 0 0 var(--silber); }
.platz-3 { box-shadow: inset 3px 0 0 var(--bronze); }

/* Krone neben der Eins, rote Laterne neben dem letzten Platz. */
.rang-krone,
.rang-laterne {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.rang-krone   { fill: var(--gold); }

/* Das helle Clubrot – auf dem schwarzen Grund der Tafel gut zu sehen,
   das dunklere waere dort kaum vom Hintergrund zu unterscheiden. */
.rang-laterne { fill: var(--rot-hell); }

/* ---- Name --------------------------------------------------------------- */

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

/* Obere Zeile der Namensspalte: Alias, beim Fuehrenden das Kennzeichen
   daneben. min-width: 0 erlaubt dem Alias zu schrumpfen; ohne die Angabe
   koennte er seine Spalte von innen auseinanderdruecken. */
.rang-oben {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

/* Titel des Fuehrenden. Weisses Feld auf der schwarzen Tafel – die einzige
   helle Flaeche dort und deshalb sofort zu sehen. Ein Rahmen eruebrigt sich. */
.drball-marke {
    flex: none;
    padding: 0.1rem 0.42rem;
    background: var(--weiss);
    border-radius: 3px;
    font-family: var(--schrift-akzent);
    font-size: 0.72rem;
    /* Oswald reicht nur bis 700 – 900 wird darauf begrenzt. Die Kontur legt
       das fehlende Stueck drauf und verdickt die Buchstaben gleichmaessig. */
    font-weight: 900;
    -webkit-text-stroke: 0.4px currentColor;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: var(--schwarz);
}

/* Sieger des letzten Spieltags: "Matchday Winner" in Gold neben dem Alias.
   Kein Feld darum - Gold auf Schwarz traegt von allein.

   Kleiner als der Alias daneben: Zwei Woerter wiegen schwerer als eine
   Abkuerzung und wuerden ihm sonst die Zeile streitig machen. */
.tag-marke {
    flex: none;
    font-family: var(--schrift-akzent);
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    /* Oswald reicht nur bis 700 - die Kontur legt das fehlende Stueck
       drauf, wie beim Titel des Fuehrenden daneben. */
    font-weight: 900;
    -webkit-text-stroke: 0.4px currentColor;
    line-height: 1;
    color: #f0b429;
}

/* Der Alias ist ein Link auf die Tipps dieses Mitspielers. Unterstrichen,
   damit man es sieht – die Farbe bleibt aber Weiss wie der uebrige Text der
   Tafel, sonst faerbte sich die ganze Spalte anders ein. */
.rang-alias {
    display: block;
    font-family: var(--schrift-akzent);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--weiss);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    /* Lange Namen kuerzen statt die Spalte zu sprengen – die Zahlen rechts
       muessen untereinander bleiben. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rang-alias:hover,
.rang-alias:focus-visible {
    color: var(--weiss);
    text-decoration-thickness: 2px;
}

/* Untere Zeile der Namensspalte: Person links, Jokerstand daneben. */
.rang-unten {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.rang-person {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    /* Bei langen Namen wird gekuerzt – das Badge daneben soll nicht
       verdraengt werden. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Verbleibende Joker ------------------------------------------------- */
/* Lila wie auf der Tippliste – dort steht dasselbe Kennzeichen. */

.joker-marke {
    flex: none;
    padding: 0.05rem 0.42rem;
    border-radius: 999px;
    background: #6b2fb5;

    font-family: var(--schrift-akzent);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.92);
}

/* Alle verbraucht: bleibt sichtbar, tritt aber zurueck. */
.joker-marke.leer {
    background: rgba(107, 47, 181, 0.35);
    color: rgba(255, 255, 255, 0.55);
}

/* ---- Startelf ------------------------------------------------------------ */
/* Gruenes Quadrat fuer eine abgegebene Startelf – ganz rechts in der Zeile.
   Ohne Aufschrift: Gruen ist im Tippspiel die Farbe der Aufstellung.
   1.025rem sind 16.4px – zwei Pixel unter der Hoehe der Kennzeichen daneben,
   damit das randlose Quadrat neben den runden Pillen nicht groesser wirkt,
   als es ist.
   Spitze Ecken statt Radius: so liest es sich als Fahne, nicht als drittes
   Abzeichen.
   Eigener, hellerer Gruenton als der der Container – ein kleines Quadrat auf
   dunklem Grund braucht mehr Leuchtkraft, um ueberhaupt aufzufallen. */

.elf-marke {
    flex: none;
    width: 1.025rem;
    height: 1.025rem;
    background: #06fb57;
}

/* ---- "Tipp da" ---------------------------------------------------------- */
/* Ockerfarben, damit es sich sowohl vom Lila des Jokers als auch vom Gold
   der Spitzenplaetze unterscheidet. Erscheint nur, solange eine Partie
   offen ist – wer noch nicht getippt hat, bekommt gar nichts. */

.tipp-marke {
    flex: none;
    padding: 0.05rem 0.42rem;
    border-radius: 999px;
    background: #b07d2b;

    font-family: var(--schrift-akzent);
    /* Etwas groesser als die uebrigen Kennzeichen: In normaler Schreibweise
       wirken Buchstaben kleiner als in Versalien. */
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* Normale Schreibweise – die anderen Kennzeichen stehen in Versalien. */
    text-transform: none;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.95);
}

/* ---- Zahlenspalten ------------------------------------------------------ */

/* Die getippten Spieltage als rotes Quadrat mit weisser Zahl. justify-self
   statt text-align: Das Element ist jetzt selbst der Kasten und wird als
   Ganzes an den rechten Rand der Spalte gesetzt. */
.rang-tage {
    justify-self: end;
    width: 1.95rem;
    height: 1.95rem;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--rot);
    /* Nur eine Spur gebrochen – es soll ein Quadrat bleiben, kein Kreis. */
    border-radius: 3px;

    font-family: var(--schrift-akzent);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--weiss);
}

.rang-punkte {
    text-align: right;
    font-family: var(--schrift-schlag);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--weiss);
}

.platz-1 .rang-punkte { color: var(--gold); }

/* ---- Eigene Zeile hervorheben ------------------------------------------- */

.rang-zeile.ich {
    background: rgba(255, 255, 255, 0.09);
}

.rang-zeile.ich .rang-alias::after {
    content: "du";
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--rot);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--weiss);
    vertical-align: 0.12em;
}

/* ---- Meldung und Knopf -------------------------------------------------- */

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

/* ---- Weg zur Community-Elf ---------------------------------------------- */
/* Steht zwischen Tafel und Bild. Blau wie der Login-Knopf und der Balken
   auf der Startseite - es ist der einzige Weg von dieser Seite, der nicht
   zur Anmeldung fuehrt, und soll sich davon unterscheiden. */

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

.community-knopf {
    /* Zwei Zeilen untereinander, mittig: die Beschriftung, darunter
       die Zahl der Votes. */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;

    padding: 0.6rem 1.8rem 0.65rem;

    background: #0070ba;
    /* 999px statt eines Prozentwerts: So sind die Enden immer Halbkreise,
       gleich wie lang die Beschriftung ist. */
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);

    font-family: var(--schrift-akzent);
    font-size: clamp(0.92rem, 3.2vw, 1.02rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--weiss);

    transition: background 0.18s, box-shadow 0.18s, transform 0.08s;
}

.community-knopf:hover,
.community-knopf:focus-visible {
    background: #005a94;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
    color: var(--weiss);
}

.community-knopf:active { transform: translateY(1px); }

/* Die Zahl der Votes. Helles Rot auf dem Blau: der einzige Farbwechsel
   im Knopf, und damit das, was zuerst auffaellt. Ein dunkles Rot waere
   auf diesem Grund kaum zu lesen. */
.community-votes {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffb3bd;
}

/* Ohne abgegebene Elf bleibt die Zeile leer - dann soll auch ihr
   Abstand nicht dastehen. */
.community-votes:empty { display: none; }

/* ---- Bild unter der Tafel ----------------------------------------------- */

.leader-bild {
    display: block;
    /* So breit wie die Tafel darueber. Beide sind Kinder von <main> und
       ohne eigene Hoechstbreite - dadurch fuellen sie denselben Raum,
       und zwar auf jedem Schirm, ohne dass eine Zahl gepflegt werden
       muesste. */
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

/* Der Rahmen um das Bild. Als Block, damit er genau so breit und hoch ist
   wie das Bild darin - als Zeilenelement bliebe darunter ein schmaler
   Streifen fuer die Schriftlinie stehen. */
.leader-bild-link {
    display: block;
    /* Die Raender trug bisher das Bild selbst; sie gehoeren jetzt hierher,
       sonst laegen sie innerhalb des anklickbaren Bereichs. */
    margin: 20px auto;
}

/* Beim Zeigen leicht aufgehellt - der einzige Hinweis darauf, dass das
   Bild irgendwohin fuehrt. */
.leader-bild-link:hover .leader-bild,
.leader-bild-link:focus-visible .leader-bild {
    filter: brightness(1.08);
}

/* Der Aufruf darunter bringt einen eigenen Abstand mit. Zwei aneinander
   grenzende Abstaende fallen zusammen, es zaehlt der groessere – die 1.8rem
   wuerden die 20px also verschlucken. Deshalb hier auf null. */
.leader-bild-link + .mitmachen { margin-top: 0; }

/* ---- Aufruf zum Mitmachen ----------------------------------------------- */
/* Steht zwischen Tafel und Startknopf. Wer hier auf der Rangliste landet und
   noch nicht dabei ist, soll den Weg hinein sofort sehen – deshalb bewusst
   auffaellig und nicht als beilaeufiger Textlink. */

.mitmachen {
    margin: 1.8rem 0 0;
    text-align: center;
}

.mitmachen a {
    display: inline-block;
    padding: 0.55rem 1.4rem;

    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);

    font-family: var(--schrift-akzent);
    font-size: clamp(1rem, 3.6vw, 1.18rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: var(--weiss);

    transition: background 0.15s, border-color 0.15s, transform 0.06s;
}

.mitmachen a:hover,
.mitmachen a:focus-visible {
    background: var(--schwarz);
    border-color: rgba(255, 255, 255, 0.55);
}

.mitmachen a:active { transform: translateY(1px); }

.start-zeile {
    margin: 1.4rem 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: 0;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);

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

    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.06s;
}

.weiss-knopf:hover,
.weiss-knopf:focus-visible {
    background: var(--schwarz);
    color: var(--weiss);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

.weiss-knopf:active { transform: translateY(1px); }

.weiss-knopf svg {
    width: 1.1em;
    height: 1.1em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Grosse Bildschirme ------------------------------------------------- */
/* Am Schreibtisch ist Platz – dort duerfen Ueberschrift und Logo groesser
   ausfallen. Auf dem Handy bliebe dafuer kein Raum, deshalb nur hier. */

@media (min-width: 700px) {
    .seite-leaderboard h1 { font-size: 3.9rem; gap: 1.2rem; }

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

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

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

@media (max-width: 420px) {
    :root { --spalten: 2.9rem 1fr 2.6rem 3.2rem; }

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

    .rang-platz  { font-size: 1.15rem; }
    .rang-punkte { font-size: 1.3rem; }
    .rang-krone  { width: 0.95rem; height: 0.95rem; }

    /* Zwei lange Vereinsnamen nebeneinander sind hier zu viel – Wappen und
       Schrift etwas kleiner, damit die Zeile nicht umbricht. */
    .partie-reihe { gap: 0.4rem; }
    .pt-team      { gap: 0.35rem; }
    .pt-logo      { width: 26px; height: 26px; }
    .pt-name      { font-size: 0.88rem; }
    .pt-termin    { font-size: 0.78rem; }
}