/* =========================================================
   LEADERBOARD -- Screen-spezifische Praezisierung fuer #view-leaderboard, gegen
   dieselbe Designgrammatik gebaut, die sich beim Profil bewaehrt hat: Panel-Kopf-
   zeile bleedet bis zum Rand mit fester Hoehe + Trennlinie, Kacheln in einer Gruppe
   teilen sich EINEN Rahmen mit Trennlinien statt einzeln umrandet zu sein.
   ========================================================= */

/* Kopfzeile wie .panel h3 (siehe css/components.css) -- dieselbe Optik auf jeder
   Karte im Produkt, nicht nur im Profil. */
.lb-card-title {
    height: 40px; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) var(--space-4);
    padding: 0 var(--space-5); border-bottom: 1px solid var(--ec-border-white);
    display: flex; align-items: center;
}

/* Durchgehende Stat-Leiste statt einzeln umrandeter Kacheln -- gleiches Prinzip wie
   .profile-stat-tiles-row. */
.lb-stats-grid {
    gap: 0; border: 1px solid var(--ec-border-white); border-radius: var(--radius-sm);
    overflow: hidden; background: var(--ec-panel-elevated);
}
.lb-stats-grid .header-stat-tile {
    border: 0; border-bottom: 1px solid var(--ec-border-white); border-radius: 0; background: transparent;
}
.lb-stats-grid .header-stat-tile:last-child { border-bottom: 0; }

/* Tab-Leiste bekommt dieselbe umrandete Flaeche wie im Profil -- Unterstrich fuer den
   aktiven Tab bleibt (kein gefuelltes Pill-Design, Master Brief Abschnitt 13/19). */
.leaderboard-tabs {
    gap: 2px; padding: 0 var(--space-2); border: 1px solid var(--ec-border-white); border-bottom: 1px solid var(--ec-border-white);
    border-radius: var(--radius-sm); background: var(--ec-panel-elevated); min-height: 48px; align-items: center;
}
.leaderboard-tab.is-active { border-bottom-color: transparent; }
.leaderboard-tab { position: relative; }
.leaderboard-tab.is-active::after {
    content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px;
    background: var(--ec-cyan); box-shadow: 0 0 8px rgba(0,240,255,.30);
}

/* Ehren-Klassen-Legende: dieselbe Trennlinien-Logik zwischen den Zeilen statt Luecken,
   damit sie sich wie EIN Baustein liest, nicht wie lose gestapelte Zeilen. */
.lb-tier-legend { gap: 0; border: 1px solid var(--ec-border-white); border-radius: var(--radius-sm); overflow: hidden; }
.lb-tier-row { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ec-border-white); }
.lb-tier-row:last-child { border-bottom: 0; }
.lb-tier-row.is-current { margin: 0; background: rgba(0,240,255,0.08); }

/* Linke Spalte (DEINE POSITION) reserviert per Grid-Spur immer 160px, auch wenn die
   Karte (noch) keine Daten hat -- z.B. auf GESAMT bevor ein Lifetime-Rang existiert.
   .lb-no-position wird von setLeaderboardPositionCardVisible() in app.js gesetzt und
   klappt die Spur ein, statt Platz fuer nicht vorhandene Daten leer stehen zu lassen
   (Nutzer-Feedback 2026-09-08: "warum ist im Container links soviel Platz?"). */
/* WICHTIG: .lb-col-left/-main/-right OHNE display:none auf dem Grid-Item selbst,
   und mit fest zugewiesener grid-column -- sonst rueckt CSS Grid beim Entfernen
   eines Items die uebrigen Items eine Spur nach vorne (genau das ist der Bug, der
   gerade die Statistik-Karte auf volle Seitenbreite gesprengt hat: .lb-col-main
   rutschte in die 0px-Spur, .lb-col-right in die 1fr-Spur). Nur die Spurbreite
   selbst wird auf 0 gesetzt, das Grid-Item bleibt (leer) an Position 1 stehen. */
.lb-col-left { grid-column: 1; }
.lb-col-main { grid-column: 2; }
.lb-col-right { grid-column: 3; }
.leaderboard-layout.lb-no-position { grid-template-columns: 0 minmax(0, 1fr) 200px; }
.leaderboard-layout.lb-no-position .lb-col-left { padding: 0; overflow: hidden; }
/* Unterhalb 1050px stapelt style.css die Spalten wieder auf EINE Spur (grid-
   template-columns:1fr) -- die festen grid-column-Zuweisungen oben muessen hier
   zurueckgesetzt werden, sonst wuerde Grid dafuer implizite Zusatzspuren anlegen
   und die Spalten laegen nebeneinander statt gestapelt. */
@media (max-width: 1050px) {
    .lb-col-left, .lb-col-main, .lb-col-right { grid-column: auto; }
    /* .leaderboard-layout.lb-no-position (oben, zwei Klassen) ist spezifischer als
       style.css's "@media (max-width:1050px) .leaderboard-layout{grid-template-
       columns:1fr}" (eine Klasse) -- Media Queries erhoehen KEINE Spezifitaet, daher
       gewann die feste 3-Spalten-Aufteilung (0/1fr/200px) bisher auch auf Mobile,
       obwohl "DEINE POSITION" leer war. Ergebnis: die 200px-Spalte (Statistiken)
       blieb fix breit und quetschte die Hauptspalte auf ein Minimum zusammen --
       sah aus wie ein Overlay ueber dem Rest der Seite (Nutzer-Feedback 2026-09-11,
       Screenshot). Hier explizit denselben Reset wie fuer den Normalfall erzwingen. */
    .leaderboard-layout.lb-no-position { grid-template-columns: 1fr; }
}

/* Tabs: horizontal scrollbar statt Abschneiden, wenn nicht alle 6 Tabs (inkl. langer
   Labels wie WOCHEN-CHALLENGE) in die Breite passen -- ohne sichtbare Scrollbar,
   gleiche Technik wie .profile-tabs (Master Brief Abschnitt 44). */
.leaderboard-view-wide .leaderboard-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.leaderboard-view-wide .leaderboard-tabs::-webkit-scrollbar { display: none; }
.leaderboard-tab { flex-shrink: 0; }

/* Tier-Badge ("ABSOLUTER EHRENCHECKER I"): kein Rahmen mehr, nur Flaeche+Text --
   Nutzer-Feedback 2026-09-08, wirkte mit Rand wie ein zusaetzlicher Button/Kasten. */
.lb-row-tier { border: none; }