/* ==========================================================================
   Öffentliche Rangliste – eigenes Stylesheet für die iFrame-Ansicht
   --------------------------------------------------------------------------
   Die Seite läuft ohne Portalrahmen in einem iFrame auf wkbv-bowling.de und
   lädt deshalb NICHT assets/style.css: Von dort käme die halbe Portaloptik
   (Kopfleiste, Menü, Karten) mit, die hier nichts zu suchen hat.

   Die Farb- und Abstandswerte sind aber bewusst dieselben wie im Portal, damit
   die Tabelle nicht wie ein Fremdkörper wirkt.

   Ersetzt wkbv.css aus /_scripts/ – das band die Schrift über ../templates/
   an einen Joomla-Pfad, der von hier aus gar nicht existiert.
   ========================================================================== */

:root {
    --rl-blue:      #163a8a;
    --rl-blue-dark: #0f2a66;
    --rl-ink:       #1f2733;
    --rl-muted:     #5a6675;
    --rl-line:      #e3e8ef;
    --rl-line-2:    #cfd7e3;
    --rl-card:      #ffffff;
    --rl-zebra:     #f6f8fb;
    --rl-info:      #e9f0fb;
    --rl-warn:      #8a5a00;
    --rl-warn-bg:   #fff4e0;
    --rl-warn-line: #e8d19a;
    --rl-bar:       #5f82c6;
    --rl-bar-track: #e7ecf5;
    --rl-radius:    10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* Dieselbe Schriftfamilie wie das Portal – keine nachzuladende Webfont.
       Im iFrame zählt jede eingesparte Anfrage. */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rl-ink);
    background: var(--rl-card);
    -webkit-text-size-adjust: 100%;
}

.rl-seite { padding: 14px 16px 18px; }

/* ---------- Kopf ---------- */
.rl-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.rl-titel {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--rl-blue-dark);
    line-height: 1.2;
}
.rl-unterzeile { margin: 3px 0 0; font-size: .8rem; color: var(--rl-muted); }
.rl-stand { margin: 0; font-size: .78rem; color: var(--rl-muted); text-align: right; line-height: 1.45; }
.rl-stand b { color: var(--rl-ink); font-weight: 600; }
.rl-marke {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--rl-blue);
    background: var(--rl-info);
    border-radius: 5px;
    padding: 1px 7px;
    vertical-align: 3px;
}
.rl-notiz {
    margin: 0 0 12px;
    font-size: .8rem;
    color: var(--rl-warn);
    background: var(--rl-warn-bg);
    border: 1px solid var(--rl-warn-line);
    border-radius: 8px;
    padding: 8px 11px;
}

/* ---------- Steuerleiste ---------- */
.rl-steuer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.rl-zeile { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* Sportjahr (nur im Archiv) */
.rl-jahr { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rl-jahr__lab {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--rl-muted);
}
#rl-saison {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--rl-ink);
    background: var(--rl-card);
    border: 1px solid var(--rl-line-2);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}
.rl-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    color: var(--rl-muted);
    text-decoration: none;
    background: var(--rl-card);
    border: 1px solid var(--rl-line-2);
    border-radius: 8px;
}
.rl-step:hover { color: var(--rl-blue); border-color: var(--rl-blue); }
.rl-step--aus { opacity: .35; }

/* Ansicht Gesamt / Damen / Herren */
.rl-seg {
    display: inline-flex;
    border: 1px solid var(--rl-line-2);
    border-radius: 8px;
    overflow: hidden;
}
.rl-seg a {
    padding: 6px 13px;
    font-size: .82rem;
    color: var(--rl-muted);
    text-decoration: none;
    background: var(--rl-card);
    border-left: 1px solid var(--rl-line);
}
.rl-seg a:first-child { border-left: 0; }
.rl-seg a:hover { color: var(--rl-ink); background: var(--rl-zebra); }
.rl-seg a.ist-an { background: var(--rl-blue); color: #fff; font-weight: 600; }

/* Nur Liga */
.rl-schalter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    font-size: .82rem;
    color: var(--rl-ink);
    text-decoration: none;
    background: var(--rl-card);
    border: 1px solid var(--rl-line-2);
    border-radius: 8px;
}
.rl-schalter:hover { border-color: var(--rl-blue); }
.rl-schalter__sw {
    width: 30px;
    height: 17px;
    border-radius: 999px;
    background: var(--rl-line-2);
    position: relative;
    flex: none;
}
.rl-schalter__sw::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
}
.rl-schalter.ist-an .rl-schalter__sw { background: var(--rl-blue); }
.rl-schalter.ist-an .rl-schalter__sw::after { left: 15px; }

/* Suche und Auswahllisten */
.rl-suche {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 150px;
    min-width: 140px;
    padding: 4px 10px;
    background: var(--rl-card);
    border: 1px solid var(--rl-line-2);
    border-radius: 8px;
    color: var(--rl-muted);
}
.rl-suche input {
    flex: 1;
    border: 0;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: .82rem;
    color: var(--rl-ink);
    min-width: 0;
}
.rl-filter {
    font-family: inherit;
    font-size: .8rem;
    color: var(--rl-ink);
    background: var(--rl-card);
    border: 1px solid var(--rl-line-2);
    border-radius: 8px;
    padding: 5px 9px;
    max-width: 15rem;
}
.rl-reset {
    font-family: inherit;
    font-size: .8rem;
    color: var(--rl-blue);
    background: var(--rl-card);
    border: 1px solid var(--rl-blue);
    border-radius: 8px;
    padding: 5px 11px;
    cursor: pointer;
}
.rl-reset:hover { background: var(--rl-info); }
.rl-zaehler { margin-left: auto; font-size: .78rem; color: var(--rl-muted); white-space: nowrap; }
.rl-zaehler b { color: var(--rl-ink); }

/* ---------- Tabelle ---------- */
/* Waagerecht rollt die Tabelle in IHREM Kasten – die Seite selbst nie. */
.rl-scroll {
    overflow-x: auto;
    border: 1px solid var(--rl-line);
    border-radius: var(--rl-radius);
    -webkit-overflow-scrolling: touch;
}
.rl-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
}
/* Überschriften zentriert – unabhängig davon, wie die Zellen darunter
   ausgerichtet sind. Deshalb tragen die th nicht mehr rl-c/rl-r; diese gelten
   nur noch für die Zellen (siehe unten).
   Ausnahme sind die Textspalten (Name, Verein/Club, Datum, Spielart,
   Spielort): Über linksbündigem Text wirkt ein zentrierter Kopf verrutscht,
   sie bekommen rl-th-links. */
.rl-tabelle th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: center;
    white-space: nowrap;
    padding: 8px 10px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--rl-muted);
    background: var(--rl-card);
    border-bottom: 1px solid var(--rl-line-2);
}
/* Textspalten: Kopf linksbündig wie die Zellen darunter. */
.rl-tabelle th.rl-th-links { text-align: left; }
.rl-tabelle th[data-sort] { cursor: pointer; user-select: none; }
.rl-tabelle th[data-sort]:hover { color: var(--rl-blue); }
.rl-tabelle th.ist-sortiert { color: var(--rl-blue); }
.rl-tabelle th.ist-sortiert::after { content: " \2193"; font-weight: 700; }
.rl-tabelle th.ist-sortiert.ist-auf::after { content: " \2191"; }

.rl-tabelle td { padding: 8px 10px; vertical-align: middle; }
/* Zebra statt Trennlinien: bei acht Spalten führt der Streifen das Auge
   zuverlässiger über die Zeile als eine Haarlinie. */
.rl-tabelle tbody tr:nth-child(odd) { background: var(--rl-zebra); }
.rl-tabelle tbody tr:hover { background: var(--rl-info); }

/* Ausrichtung der Zellen. Bewusst an td gebunden: Stünde hier nur .rl-r,
   schlüge die Regel für th (höhere Spezifität) sie ohnehin – die enge Bindung
   macht sichtbar, dass Kopf und Zelle getrennt ausgerichtet werden. */
.rl-tabelle td.rl-r { text-align: right; }
.rl-tabelle td.rl-c { text-align: center; }
.rl-platz { color: var(--rl-muted); width: 2.4rem; text-align: center; }
.rl-gedaempft { color: var(--rl-muted); }
.rl-name { color: var(--rl-blue); font-weight: 500; text-decoration: none; }
.rl-name:hover { text-decoration: underline; }
.rl-unter {
    display: block;
    margin-top: 1px;
    font-size: .82em;
    font-weight: 400;
    color: var(--rl-muted);
}
.rl-klasse { font-weight: 700; }

/* Schnitt: fett, darunter der Balken auf der Skala 0–300 */
.rl-schnittzelle { min-width: 6.5rem; }
.rl-schnitt { display: block; font-weight: 700; }
.rl-balken {
    display: block;
    width: 4.8rem;
    height: 4px;
    margin: 4px 0 0 auto;
    border-radius: 2px;
    background: var(--rl-bar-track);
    overflow: hidden;
}
.rl-balken__f {
    display: block;
    height: 100%;
    background: var(--rl-bar);
    border-radius: 0 2px 2px 0;
}

/* ---------- Einzelansicht ---------- */
.rl-zurueck { margin: 0 0 10px; font-size: .82rem; }
.rl-zurueck a { color: var(--rl-blue); text-decoration: none; }
.rl-zurueck a:hover { text-decoration: underline; }
.rl-einzel__titel { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.rl-einzel__titel .rl-gedaempft { font-weight: 400; font-size: .82rem; }
.rl-tabelle tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--rl-line-2);
    background: var(--rl-card);
}

/* ---------- Rest ---------- */
.rl-hinweis { margin: 9px 2px 0; font-size: .72rem; color: var(--rl-muted); }
.rl-leer {
    margin: 16px 0;
    padding: 16px;
    font-size: .88rem;
    color: var(--rl-muted);
    background: var(--rl-zebra);
    border: 1px solid var(--rl-line);
    border-radius: var(--rl-radius);
    text-align: center;
}
.rl-fuss { margin: 16px 0 0; font-size: .68rem; color: var(--rl-muted); text-align: right; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
th:focus-visible {
    outline: 2px solid var(--rl-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 34rem) {
    .rl-seite { padding: 12px 12px 16px; }
    .rl-stand { text-align: left; }
    .rl-zaehler { margin-left: 0; }
    .rl-filter { max-width: 100%; flex: 1 1 auto; }
}