/* ===========================================================================
   Late Summer Swing - oeffentlicher Anzeigebereich
   ---------------------------------------------------------------------------
   Andere Aufgabe als der Adminbereich: hier wird nicht gearbeitet, sondern
   gelesen - oft am Handy, oft im Vorbeigehen. Deshalb groessere Schrift,
   ruhige Flaechen und Tabellen, die auf einem schmalen Bildschirm noch
   funktionieren.
   =========================================================================== */

:root {
    /* Kopfbereich in der Turnierfarbe. Das Gruen ist sehr hell - darauf
       gehoert dunkle Schrift, weisse waere nicht lesbar. */
    --web-kopf: #0CE801;
    --web-kopf-text: #0b2e00;

    --web-text: #1e293b;
    --web-grau: #64748b;
    --web-linie: #d8dfe7;
    --web-flaeche: #f5f7fa;

    /*
     * Die Seite bleibt bewusst HELL: Die Listen laufen am Turniertag auf
     * Bildschirm und Leinwand, und dort ist dunkler Grund schlecht zu lesen -
     * ein Beamer kann Schwarz nicht darstellen, das Bild wird grau.
     * Der Bezug zur Turnierseite entsteht ueber die Farbe, nicht ueber den
     * dunklen Grund. Deshalb hier ein dunkles Gruen, das auf Weiss traegt.
     */
    --web-akzent: #0a7a02;

    /* Reiter in Grau - der aktive deutlich dunkler, damit man ihn erkennt */
    --web-knopf: #e2e8f0;
    --web-knopf-rand: #b6c2d0;
    --web-knopf-aktiv: #52606d;

    /* Ergebnisse ab dieser Grenze werden hervorgehoben */
    --web-hoch: #c81e1e;

    /* Stand in den Finalrunden - dieselben Toene wie im Adminbereich */
    --web-weiter: #15803d;
    --web-raus:   #b91c1c;
    --web-cut:    #d97706;

    --web-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /*
     * Eine Breite und ein Seitenabstand fuer ALLE Baender - Kopf,
     * Hauptnavigation und Inhalt. Nur so steht der erste Menuepunkt genau
     * ueber dem ersten Reiter und der wiederum genau ueber der Liste.
     */
    --web-breite: 1100px;
    --web-rand: 16px;
}

/*
 * Der gemeinsame Innenbereich jedes Bandes. Das Band selbst geht ueber die
 * ganze Breite (wegen Hintergrundfarbe und Trennlinie), sein Inhalt sitzt
 * mittig und ueberall an derselben Kante.
 */
.kopf-inhalt,
.hauptnavi-inhalt,
.inhalt {
    max-width: var(--web-breite);
    margin: 0 auto;
    padding-left: var(--web-rand);
    padding-right: var(--web-rand);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--web-font);
    color: var(--web-text);
    background: var(--web-flaeche);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --- Kopf --- */
.kopf {
    background: var(--web-kopf);
    color: var(--web-kopf-text);
    padding: 14px 0;
}
.kopf-inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Wie auf der Turnierseite: der Veranstalter steht klein ueber dem Titel */
.kopf-marke {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    opacity: 0.75;
}
.kopf-titel { font-size: 1.45rem; font-weight: 700; letter-spacing: 0.01em; }
.kopf-zusatz { font-size: 0.9rem; opacity: 0.8; margin-top: 2px; }

.kopf-zurueck {
    flex: none;
    padding: 8px 14px;
    border: 1px solid rgb(0 0 0 / 0.35);
    border-radius: 4px;
    color: var(--web-kopf-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.kopf-zurueck:hover { background: rgb(0 0 0 / 0.12); }

/* --- Hauptnavigation --- */
.hauptnavi {
    background: #fff;
    border-bottom: 1px solid var(--web-linie);
}

/*
 * Die Menuepunkte haben KEINEN seitlichen Innenabstand, sondern stehen ueber
 * `gap` auseinander. Dadurch beginnt "Vorrunde" genau an der Kante, an der
 * darunter der erste Reiter und die Liste beginnen.
 */
.hauptnavi-inhalt {
    display: flex;
    flex-wrap: wrap;
    gap: 0 26px;
}
.hauptnavi a {
    padding: 13px 0;
    color: var(--web-text);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}
.hauptnavi a:hover { color: var(--web-akzent); }
.hauptnavi a.aktiv {
    color: var(--web-akzent);
    border-bottom-color: var(--web-akzent);
}

/* --- Inhalt --- */
.inhalt {
    padding-top: 18px;
    padding-bottom: 40px;
}

/* --- Reiter der jeweiligen Seite --- */
.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.reiter-knopf {
    padding: 9px 16px;
    border: 1px solid var(--web-knopf-rand);
    border-radius: 4px;
    background: var(--web-knopf);
    color: var(--web-text);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.reiter-knopf:hover {
    background: #cfd8e3;
}
.reiter-knopf.aktiv {
    background: var(--web-knopf-aktiv);
    border-color: var(--web-knopf-aktiv);
    color: #fff;
}

/* --- Bereich, der nachgeladen wird --- */
#reiter { margin-bottom: 20px; }

.bereich { transition: opacity 0.15s ease; }
.bereich.laedt { opacity: 0.45; }

.wertung-titel { font-size: 1.3rem; margin: 0 0 4px; }
.wertung-hinweis { color: var(--web-grau); font-size: 0.9rem; margin: 0 0 14px; }

.leer {
    padding: 26px 18px;
    background: #fff;
    border: 1px solid var(--web-linie);
    border-radius: 10px;
    color: var(--web-grau);
    text-align: center;
}

.stand {
    margin-top: 14px;
    font-size: 0.8rem;
    color: var(--web-grau);
    text-align: right;
}

/* --- Rangliste --- */
table.rangliste {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}
table.rangliste th,
table.rangliste td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid var(--web-linie);
}
table.rangliste th {
    background: #eef2f6;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--web-grau);
}
table.rangliste tbody tr:last-child td { border-bottom: none; }

.sp-platz  { width: 58px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.sp-zahl   { text-align: right; width: 82px; font-variant-numeric: tabular-nums; }
.sp-gesamt { font-weight: 700; font-size: 1.05rem; }
.sp-verein { color: var(--web-grau); }

/*
 * Die Einzelspiele als eigener Block. Getrennt wird ausschliesslich durch
 * Striche - KEINE eigene Flaeche: Die Zeile behaelt durchgehend ihre Farbe,
 * sonst zerfaellt sie optisch und die Zeilenfarbe (Vergabe-Topf) waere in der
 * Mitte unterbrochen.
 */
table.rangliste th.sp-spiel,
table.rangliste td.sp-spiel {
    border-right: 1px solid var(--web-linie);
    width: 62px;
}
table.rangliste th.spiel-erst,
table.rangliste td.spiel-erst { border-left: 2px solid var(--web-knopf-rand); }
table.rangliste th.spiel-letzt,
table.rangliste td.spiel-letzt { border-right: 2px solid var(--web-knopf-rand); }

/*
 * Startplatz je Finalrunde - abgesetzt durch eine Linie, nicht durch Farbe.
 */
table.rangliste th.sp-einstieg,
table.rangliste td.sp-einstieg {
    width: 96px;
    border-left: 1px solid var(--web-linie);
    font-weight: 600;
}

/*
 * Eine Zeile, deren Ergebnis sich beim Nachladen geaendert hat. Die
 * Markierung blendet sich von selbst wieder aus - sie soll den Blick lenken,
 * nicht die Liste dauerhaft einfaerben.
 */
@keyframes zeile-neu-aus {
    from { background: #d9f7d2; }
    to   { background: transparent; }
}
table.rangliste tr.zeile-neu td {
    animation: zeile-neu-aus 4s ease-out forwards;
}

/* Wer Bewegung ausgeschaltet hat, bekommt keine Animation */
@media (prefers-reduced-motion: reduce) {
    table.rangliste tr.zeile-neu td { animation: none; }
}

/* Einzelspiel ab 200 Pins - faellt beim Ueberfliegen sofort auf */
.hohes-spiel { color: var(--web-hoch); font-weight: 700; }

.marke-platz {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    background: #eef2f6;
    color: var(--web-grau);
}

/* Herkunft des Finalplatzes - dieselben Toene wie im Adminbereich */
table.rangliste tr.farbe-blau    td { background: #eff5ff; }
table.rangliste tr.farbe-gruen   td { background: #eefbf2; }
table.rangliste tr.farbe-rot     td { background: #fef1f1; }
table.rangliste tr.farbe-orange1 td { background: #fff8ee; }
table.rangliste tr.farbe-orange2 td { background: #fff2e0; }
table.rangliste tr.farbe-orange3 td { background: #ffe9cf; }
table.rangliste tr.farbe-lila1   td { background: #f4f1fe; }
table.rangliste tr.farbe-lila2   td { background: #ece5fc; }
table.rangliste tr.farbe-gelb    td { background: #fefbe8; }
table.rangliste tr.farbe-grau    td { background: #f6f8fa; }

/*
 * Nach der Vorrunde ausgeschieden: die ganze Zeile grau, davor ein roter
 * Balken. Damit sieht man in den Wertungen auf einen Blick, wer keinen
 * Finalplatz hat - und damit, wer noch fuer den Desperado in Frage kommt.
 *
 * Die Zeile bleibt voll lesbar (kein Ausgrauen der Schrift bis zur
 * Unkenntlichkeit) - sie wird ja zum Arbeiten benutzt.
 */
table.rangliste tr.zeile-ausgeschieden td {
    background: #eef0f2;
    color: #55606b;
}
table.rangliste tr.zeile-ausgeschieden td:first-child {
    box-shadow: inset 4px 0 0 var(--web-raus);
}

/*
 * Stand in den Finalrunden - genauso wie im Adminbereich: ein farbiger
 * Balken links an der Zeile, kein Wort hinter dem Namen. Die Zeile bleibt
 * damit lesbar, und die Grenze zwischen "weiter" und "raus" sieht man an
 * der Linie darunter statt an einem Text.
 */
table.rangliste tr.zeile-sieger td { font-weight: 700; }
table.rangliste tr.zeile-sieger td:first-child,
table.rangliste tr.zeile-weiter td:first-child {
    box-shadow: inset 4px 0 0 var(--web-weiter);
}

table.rangliste tr.ist-raus td { opacity: 0.5; }
table.rangliste tr.ist-raus td.sp-name { text-decoration: line-through; }
table.rangliste tr.ist-raus td:first-child {
    box-shadow: inset 4px 0 0 var(--web-raus);
}

/* Der Cut: Trennlinie direkt unter dem letzten Aufsteiger */
table.rangliste tr.zeile-cut td { border-top: 3px solid var(--web-cut); }

/* Legende zu den Balken, steht im Hinweis unter der Ueberschrift */
.legende {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    white-space: nowrap;
}
.legende-balken {
    display: inline-block;
    width: 5px;
    height: 15px;
    border-radius: 2px;
}
.legende-balken.gruen { background: var(--web-weiter); }
.legende-balken.rot   { background: var(--web-raus); }

table.rangliste tr.gruppenzeile td {
    background: #eef2f6;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--web-grau);
}

/* --- Bahnverteilung als Karten --- */
.bahnen-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.bahn-karte {
    background: #fff;
    border: 1px solid var(--web-linie);
    border-radius: 10px;
    padding: 12px 14px;
}
.bahn-nummer {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--web-linie);
}
.bahn-platz {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.95rem;
}
.bahn-pos {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: var(--web-flaeche);
    color: var(--web-grau);
    font-size: 0.78rem;
    font-weight: 700;
}

.nur-mobil { display: none; }

/* --- Handy --- */
@media (max-width: 700px) {
    .kopf-titel { font-size: 1.2rem; }
    .kopf-marke { font-size: 0.7rem; letter-spacing: 0.1em; }
    .kopf-zurueck { padding: 6px 10px; font-size: 0.82rem; }

    /* Auf dem Handy braucht es weniger Rand - fuer alle Baender gemeinsam */
    :root { --web-rand: 10px; }
    .hauptnavi-inhalt { gap: 0 18px; }
    .hauptnavi a { padding: 12px 0; font-size: 0.92rem; }
    .inhalt { padding-top: 14px; padding-bottom: 30px; }

    /* Verein wandert unter den Namen, damit die Zahlen Platz behalten */
    table.rangliste th.sp-verein,
    table.rangliste td.sp-verein { display: none; }
    .nur-mobil {
        display: block;
        font-size: 0.8rem;
        color: var(--web-grau);
    }

    table.rangliste th,
    table.rangliste td { padding: 9px 5px; }
    .sp-platz { width: 34px; }
    .sp-zahl  { width: 46px; }
    table.rangliste th.sp-spiel,
    table.rangliste td.sp-spiel { width: 42px; }
    table.rangliste th.sp-einstieg,
    table.rangliste td.sp-einstieg { width: 58px; }
    table.rangliste th { font-size: 0.65rem; }

    /* Squad-Ansicht mit sechs Spielen wird sonst zu breit */
    .inhalt { overflow-x: auto; }
}

/* Bahn und Position - nur schmal, keine eigene Farbe. */
table.rangliste th.sp-bahn,
table.rangliste td.sp-bahn {
    width: 58px;
}

@media (max-width: 700px) {
    table.rangliste th.sp-bahn,
    table.rangliste td.sp-bahn { width: 40px; }
}

/* Senkrechter Strich hinter Platz/Bahn/Position - trennt "wo" von "wer" */
table.rangliste th.sp-trenn,
table.rangliste td.sp-trenn {
    border-right: 2px solid var(--web-knopf-rand);
}

/*
 * Zahlen im Feld-Kaestchen. Hier wird nichts eingegeben - die Optik ist aber
 * dieselbe wie bei den Eingabefeldern im Adminbereich: weiss, klarer Rahmen,
 * schwarze Schrift. Dadurch stehen die Zahlen sauber untereinander, statt in
 * der Zeile zu schwimmen, und beide Seiten sehen gleich aus.
 */
table.rangliste .zahl-feld {
    display: inline-block;
    min-width: 44px;
    padding: 3px 7px;
    background: #fff;
    border: 1px solid #94a3b8;
    border-radius: 2px;
    color: #000;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Ein Spiel ab 200 Pins bleibt hervorgehoben - im Kaestchen die Schrift rot */
table.rangliste td.hohes-spiel .zahl-feld {
    color: var(--web-hoch);
    border-color: var(--web-hoch);
}

@media (max-width: 700px) {
    table.rangliste .zahl-feld { min-width: 32px; padding: 2px 4px; }
}

/*
 * Ein Startplatz, der noch keinem Spieler gehoert. Bewusst zurueckhaltend:
 * Die Zeile soll die Liste vollstaendig zeigen, aber nicht mit den bereits
 * feststehenden Teilnehmern um Aufmerksamkeit streiten.
 */
table.rangliste tr.platz-offen td { color: var(--web-grau); }
table.rangliste tr.platz-offen td.sp-name { font-style: italic; }

/* =========================================================================
 * Fotoalbum
 * ========================================================================= */

/*
 * Das Raster fuellt sich selbst: So viele Bilder je Zeile, wie hineinpassen,
 * mindestens 200 px breit. Damit stimmt es vom Handy bis zum Beamer, ohne
 * dass irgendwo eine feste Spaltenzahl steht.
 */
.foto-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.foto-knopf {
    display: block;
    padding: 0;
    border: 1px solid var(--web-knopf-rand);
    border-radius: 6px;
    background: #fff;
    cursor: zoom-in;
    overflow: hidden;
    text-align: left;
    font: inherit;
}

.foto-knopf:hover { border-color: var(--web-knopf-aktiv); }

/*
 * Feste Hoehe mit object-fit: Sonst springt das Raster, weil Hoch- und
 * Querformat unterschiedlich hoch sind. Das ganze Bild sieht man beim
 * Vergroessern.
 */
.foto-knopf img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.foto-unterschrift {
    display: block;
    padding: 6px 8px;
    font-size: 0.85rem;
    color: var(--web-grau);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Grossansicht ueber der Seite --- */
.foto-buehne {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.88);
}

.foto-buehne[hidden] { display: none; }

/* Hinter der Grossansicht wird nicht gescrollt. */
body.foto-offen { overflow: hidden; }

.foto-buehne-inhalt {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.foto-buehne-inhalt img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 4px;
    background: #fff;
}

.foto-buehne-inhalt figcaption {
    margin-top: 10px;
    color: #fff;
    font-size: 1rem;
}

.foto-buehne button {
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.foto-buehne button:hover { background: rgba(255, 255, 255, 0.3); }

.foto-blaettern {
    flex: 0 0 auto;
    padding: 16px 20px;
    font-size: 2.2rem;
}

.foto-schliessen {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 6px 14px;
    font-size: 2rem;
}

@media (max-width: 700px) {
    .foto-knopf img { height: 120px; }

    /* Auf dem Handy wird gewischt - die Pfeile nehmen nur Platz weg. */
    .foto-blaettern { display: none; }
    .foto-buehne { padding: 10px; }
}