/* Clubfans Reunited – "Deine Tipps"
   Einfarbig rot wie die Passwortseite. Die Liste soll sich schnell ueberfliegen
   lassen: links die Paarung, rechts die Punkte. */

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

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

/* Die Zeile ueber der Ueberschrift. Klein und in klarem Weiss: Sie ordnet
   die Seite ein, ohne der Ueberschrift die Aufmerksamkeit zu nehmen.
   Nicht in Grossbuchstaben - die traegt schon die Zeile darunter. */
.liste-marke {
    margin: 0 0 0.25rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.1;
    color: var(--weiss);
}

.seite-liste h1 {
    /* Den Abstand nach unten setzt die Liste selbst – so sind es auch dann
       genau 40px, wenn die Aliaszeile darunter leer bleibt. */
    margin: 0;
    text-align: center;
    font-family: var(--schrift-schlag);
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--weiss);
}

/* Der Wahlspruch unter der Ueberschrift. Gleiche Groesse und Staerke wie
   die Zeile "Clubfans" darueber - die beiden rahmen die Ueberschrift
   dadurch symmetrisch ein.

   Steht fest im HTML und nicht im Skript: Er haengt an keinem Datum und
   soll auch dann dastehen, wenn der Server nicht antwortet. */
.liste-spruch {
    margin: 0.35rem 0 0;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.1;
    color: var(--weiss);
}

.liste-alias {
    margin: 0.3rem 0 0;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
}

.liste-alias:empty { display: none; }

/* ---- Die Liste ---------------------------------------------------------- */

.tipp-liste {
    /* 40px unter dem Kopfbereich – gilt mit und ohne Aliaszeile. */
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.7rem;
}

.tipp-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1.1rem;

    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius);
}

/* Ueberschrift ueber der Partie, die als naechstes gespielt wird.
   flex-basis 100% gibt ihr eine eigene Zeile ueber der vollen Breite des
   Kastens - ohne das stuende sie neben der Paarung. */
.naechstes-match {
    flex: 0 0 100%;

    /* Zugleich Flexkasten, damit Zeichen und Wort mit festem Abstand
       nebeneinander in der Mitte stehen. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    /* Je 5px weniger als der Kasten von sich aus gaebe: oben zieht der
       negative Rand in das Innenmass des Kastens hinein, unten bleiben
       von 4.8px noch die 8px Zeilenabstand des Kastens uebrig. */
    margin: -5px 0 -0.2px;

    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1.1rem;
    font-weight: 700;
    /* Versalien stehen dichter beieinander als gemischte Schrift - die
       etwas weitere Sperrung gleicht das aus. Dieselben 0.06em wie bei
       den uebrigen Versalzeilen der Seite. */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--weiss);
}

/* Strichzeichnung im selben Stil wie die uebrigen Zeichen der Seite. */
.naechstes-match svg {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Ausgewertete Spieltage bekommen einen weissen Balken, offene bleiben
   zurueckgenommen – so sieht man auf einen Blick, was schon gezaehlt hat.

   Frueher stand hier zusaetzlich opacity: 0.85. Deckkraft wirkt aber auf
   alles Enthaltene, ein Kind kann sie nicht zuruecknehmen - "Naechstes
   Match" waere damit nie reines Weiss geworden. Der blasse Balken links
   sagt ohnehin schon, dass die Partie noch offen ist. */
.tipp-zeile.offen {
    border-left-color: rgba(255, 255, 255, 0.14);
}

/* Linke Spalte: Datum, Paarung, Tipp */
.zeile-inhalt {
    flex: 1 1 15rem;
    min-width: 0;
}

/* Kopfzeile: Datum links, der Wettbewerb rechts daneben. Umbrechen darf sie
   auf schmalen Geraeten – dann rutscht das Kennzeichen unter das Datum. */
.zeile-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.zeile-datum {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.62);
}

.zeile-paarung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.55rem;
    margin: 0.25rem 0 0.4rem;
    font-family: var(--schrift-akzent);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--weiss);
}

/* Name und Wappen bleiben zusammen – der Umbruch faellt zwischen die beiden
   Mannschaften, nicht zwischen Name und Wappen. */
.paarung-team {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    /* lange Vereinsnamen duerfen umbrechen, statt die Zeile zu sprengen */
    overflow-wrap: anywhere;
}

.paarung-strich { color: rgba(255, 255, 255, 0.5); }

.liste-logo {
    height: 31px;
    width: auto;
    flex: none;
}

.zeile-tipp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.8rem;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.8);
}

.zeile-tipp b {
    font-family: var(--schrift-akzent);
    font-weight: 700;
    color: var(--weiss);
}

/* ---- Getippte Torschuetzen ---------------------------------------------- */
/* Eine eigene Zeile unter dem Tipp. Das Wort steht als Abzeichen davor,
   wie Joker und Frankenderby eine Zeile hoeher - so liest sich beides als
   dieselbe Art von Angabe. */
.zeile-schuetzen {
    display: flex;
    flex-wrap: wrap;
    /* Mittig statt an der Grundlinie: Seit vor jedem Namen ein Bild steht,
       laege die Grundlinie am unteren Bildrand, und Abzeichen und Namen
       rutschten gegeneinander. */
    align-items: center;
    gap: 0.3rem 0.7rem;

    /* Abstand zur Tippzeile darueber. Die beiden Zeilen gehoeren
       zusammen, sollen sich aber nicht beruehren - der Container darf
       dafuer hoeher werden.
       Der Rand steht oben und nicht unten an der Tippzeile: Ohne
       getippte Schuetzen gibt es diese Zeile gar nicht, und dann soll
       auch kein Abstand uebrig bleiben. */
    margin-top: 10px;

    font-size: 0.9rem;
}

/* Blau: Es ist das einzige Blau in der Zeile und hebt sich damit sowohl
   vom Lila des Jokers als auch vom Rot der Seite ab. Dasselbe Blau wie
   der Login-Knopf und der Balken auf der Startseite. */
.schuetzen-wort {
    display: inline-block;
    padding: 0.1rem 0.5rem;

    background: #0070ba;
    border-radius: 999px;

    font-family: var(--schrift-akzent);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--weiss);
}

/* Klares Weiss, nicht abgeschwaecht: Die Namen sind die Aussage der
   Zeile. Als Einheit umbrechend, damit kein Name mitten im Wort reisst. */
.schuetze {
    /* Bild, Nummer, Name und Haekchen als eine Einheit, mittig zueinander.
       Umbrechen darf nur zwischen zwei Schuetzen, nie mitten in einem. */
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    color: var(--weiss);
}

/* Das Spielerbild vor der Nummer, 24px und quadratisch - wie die Bilder
   in der Elf, nur klein genug fuer die Zeile. object-fit haelt das Gesicht
   unverzerrt, auch wenn eine Datei nicht quadratisch ist. Leicht
   abgerundet, damit die Ecken nicht hart gegen die Schrift stehen. */
.schuetze-bild {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    object-fit: cover;
    object-position: top;
    background: rgba(255, 255, 255, 0.12);
}

/* Das Haekchen hinter einem Schuetzen, der wirklich getroffen hat. Dasselbe
   Gruen wie der Pfeil nach oben im Leaderboard - beides heisst "richtig". */
.schuetze-haken {
    flex: none;
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: #35b95f;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Die Trikotnummer traegt die Zuordnung - dieselbe Nummer steht spaeter
   im Ergebnis. */
.zeile-schuetzen b {
    font-family: var(--schrift-akzent);
    font-weight: 700;
    color: var(--weiss);
}

/* ---- Tagessieger --------------------------------------------------------- */
/* Die beste Punktzahl eines Spieltags. Gold wie die Punktzahlen selbst -
   es geht ja um genau die.

   Steht direkt unter dem Datum und nicht als Abzeichen zwischen den
   anderen: Es ist kein Merkmal des Tipps wie Joker oder Derby, sondern das
   Ergebnis daraus.

   Der Abstand nach unten faellt weg - die Paarung darunter bringt mit
   0.25rem ihren eigenen mit. */
.zeile-sieger {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.3rem 0 0;

    font-family: var(--schrift-akzent);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #f0b429;
}

/* Strichzeichnung wie die Fahne bei "Naechstes Match" - currentColor
   nimmt das Gold der Zeile mit. */
.zeile-sieger svg {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Kennzeichen fuer Joker, Topspiel und Frankenderby */
.marke {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-family: var(--schrift-akzent);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Der Joker hebt sich als einziges Kennzeichen farblich ab – er ist auch
   das einzige, das der Mitspieler selbst gesetzt hat. */
.marke-joker { background: #6b2fb5; }

/* Der Wettbewerb – weisses Feld mit dunkler Schrift, damit er sich von den
   Wertungskennzeichen daneben unterscheidet. */
.marke-pokal {
    background: var(--weiss);
    color: var(--schwarz);
}

/* Rechte Spalte: die Punkte */
.zeile-punkte {
    flex: none;
    margin-left: auto;
    text-align: right;
    /* feste Breite, damit die Zahlen aller Zeilen untereinander stehen */
    min-width: 4.5rem;
}

.punkte-zahl {
    display: block;
    font-family: var(--schrift-schlag);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--weiss);
}

.punkte-wort {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

/* Noch nicht ausgewertet: statt einer Null ein Strich, sonst laese es sich
   wie "null Punkte bekommen". */
.punkte-offen .punkte-zahl { color: rgba(255, 255, 255, 0.45); }

/* Gar nicht getippt. Steht allein in der Spalte, ohne Zahl darueber -
   deshalb muss es die Hoehe von Zahl und Wort zusammen tragen, sonst
   saesse es am oberen Rand statt in der Mitte der Zeile. */
.punkte-keiner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Volles Weiss und etwas fetter: Die Angabe soll auffallen - sie ist die
   einzige in der Zeile, und wer seine Liste durchgeht, sucht genau
   danach. */
.punkte-keiner .punkte-wort {
    margin: 0;
    white-space: nowrap;
    font-family: var(--schrift-akzent);
    font-weight: 700;
    color: var(--weiss);
}

/* ---- Summe -------------------------------------------------------------- */

.liste-summe {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.8rem;
    margin: 1.4rem 0 0;
    padding: 0.8rem 1.1rem;
    background: var(--schwarz);
    border-radius: var(--radius);
}

.liste-summe[hidden] { display: none; }

.summe-wort {
    font-family: var(--schrift-akzent);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.summe-zahl {
    font-family: var(--schrift-schlag);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--weiss);
}

/* ---- Meldungen und Fuss ------------------------------------------------- */

.seite-liste .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;
}

.seite-liste .meldung a {
    color: var(--weiss);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Weisser Knopf zur Startseite – dieselbe Form wie der rote im Kopfbereich
   der Spieltagseite, nur umgekehrt eingefaerbt: Auf dem roten Grund ist
   Weiss der staerkste verfuegbare Kontrast. */

.start-zeile {
    margin: 2.2rem 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;
}

.liste-zurueck {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.8rem;
    margin: 1.2rem 0 0;
    font-size: 0.92rem;
}

/* ---- Werbevideo ganz unten ---------------------------------------------- */

.werbe-video {
    display: block;
    /* 60px Abstand nach oben, mittig. */
    margin: 60px auto 0;
    width: 100%;
    /* 460px. max-width statt einer festen Breite, damit es auf schmalen
       Geraeten mitschrumpft statt hinauszuragen. */
    max-width: 460px;
    height: auto;
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
    /* Bis das Bild da ist, steht dort eine dunkle Flaeche statt eines
       weissen Lochs. */
    background: var(--schwarz);
}

.liste-zurueck a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.liste-zurueck a:hover,
.liste-zurueck a:focus-visible { color: var(--weiss); }

/* ---- Platzverlauf -------------------------------------------------------- */
/* Weisse Karte auf dem roten Grund. Eine Kurve braucht Ruhe um sich herum;
   auf Weiss lesen sich duenne Linien und kleine Zahlen deutlich besser als
   auf Schwarz.

   Alle Farben darin sind deshalb umgedreht: dunkle Schrift, helle
   Hilfslinien, und die Kurve im Clubrot statt im Gold der Punktzahlen -
   Gold auf Weiss waere kaum zu erkennen. */

.verlauf {
    margin: 1.4rem 0 0;
    padding: 1.1rem 1.2rem 1.3rem;

    background: var(--weiss);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.verlauf[hidden] { display: none; }

.verlauf-titel {
    margin: 0;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #16181d;
}

.verlauf-unter {
    margin: 0.2rem 0 0.9rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    color: #6b7280;
}

/* Das SVG passt sich der Breite an; die Hoehe folgt ueber das
   Seitenverhaeltnis des viewBox. */
.verlauf-svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Die Kurve im Clubrot. Runde Ecken und Enden, damit ein Zickzack nicht
   spitz wirkt. */
.verlauf-linie {
    fill: none;
    stroke: var(--rot);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Weisser Rand um die Punkte: Wo die Linie steil verlaeuft, heben sie sich
   dadurch von ihr ab. */
.verlauf-punkt {
    fill: var(--rot);
    stroke: var(--weiss);
    stroke-width: 2;
}

/* Nur zwei Linien: bester und schlechtester Platz. Mehr waere Gitter,
   nicht Hilfe. */
.verlauf-hilfslinie {
    stroke: rgba(0, 0, 0, 0.14);
    stroke-width: 1;
}

.verlauf-achse {
    fill: #6b7280;
    font-family: var(--schrift-akzent);
    font-size: 13px;
}

/* Der aktuelle Platz am Ende der Kurve - der Wert, der zaehlt. */
.verlauf-marke {
    fill: #16181d;
    font-family: var(--schrift-schlag);
    font-size: 19px;
}

/* ---- Die abgegebene Elf ------------------------------------------------- */
/* Gestaltet wird sie von profianlegen.css, damit sie hier genauso aussieht
   wie auf aufstellung.html. Hier steht nur der Abstand zum schwarzen Balken
   darueber. */

.seite-liste .elf { margin-top: 30px; }