/* Clubfans Reunited – Kader pflegen
   Formular und Farben kommen aus adminxy.css. Hier steht nur die Liste des
   bereits eingetragenen Kaders. */

:root {
    /* Ein Ton unter dem --gruen aus anmeldung.css (#1f7a3d). Gebraucht
       auf community.html, wo die ganze Seite gruen ist und die Kaesten
       sich davon abheben muessen. */
    --gruen-tief: #14522f;
}

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

.kader {
    width: 100%;
    max-width: 640px;
    margin: 2rem auto 0;
}

.kader-titel {
    margin: 0 0 1rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--weiss);
}

.kader-gruppe { margin-bottom: 1.4rem; }

.gruppen-titel {
    margin: 0 0 0.5rem;
    font-family: var(--schrift-akzent);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.kader-liste {
    margin: 0;
    padding: 0;
    list-style: none;

    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    overflow: hidden;
}

/* ---- Eine Zeile --------------------------------------------------------- */

.kader-zeile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.7rem;
    /* Duenne Linie statt Abstand – so wirkt es wie eine Liste und nicht wie
       einzelne Karten. */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.kader-zeile:last-child { border-bottom: 0; }

/* Die Rueckennummer im Trikotfeld – feste Breite, damit die Namen
   untereinander beginnen. */
.kader-nummer {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;

    background: var(--rot);
    border-radius: 4px;

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

/* Spielerbild vor dem Namen, Kantenlaenge 50px. Die Dateien sind
   quadratisch (400 x 400), object-fit haelt sie auch dann unverzerrt, wenn
   einmal ein anderes Format dazwischenkommt. */
.kader-bild {
    flex: none;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
}

/* Verletzte oder gesperrte treten auch im Bild zurueck. */
.kader-zeile.verletzt .kader-bild { filter: grayscale(1); opacity: 0.5; }

.kader-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kader-person {
    font-family: var(--schrift-akzent);
    font-size: 1rem;
    font-weight: 500;
    color: var(--weiss);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Verletzte oder gesperrte Spieler bleiben stehen, treten aber zurueck –
   sie sollen beim Aufstellen nicht mitgewaehlt werden. */
.kader-zeile.verletzt .kader-person {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: line-through;
}

.kader-zeile.verletzt .kader-nummer { background: rgba(255, 255, 255, 0.16); }

.kader-marke {
    flex: none;
    padding: 0.1rem 0.4rem;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    font-family: var(--schrift-akzent);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

/* Das Kreuz zum Entfernen. anmeldung.css setzt Knoepfe auf volle Breite und
   gibt ihnen einen roten Verlauf – beides muss hier zurueckgenommen werden. */
.kader-weg {
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;

    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
}

.kader-weg:hover:not(:disabled) {
    filter: none;
    background: var(--rot);
    border-color: var(--rot);
    color: var(--weiss);
}

/* ---- Sperre ohne Anmeldung ---------------------------------------------- */

.seite-profis #sperre {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.seite-profis #sperre a {
    color: var(--rot-tief);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Angezeigter Bildpfad ----------------------------------------------- */
/* An der Stelle, an der frueher ein Eingabefeld stand: Der Pfad entsteht von
   selbst, hier steht nur, wie die Datei heissen muss. Gestrichelte Kante
   statt durchgezogener – so sieht man, dass es nichts einzutippen gibt.

   Die Farben richten sich nach der weissen Karte, nicht nach dem roten
   Grund der Seite: Der Block steht im Formular. */

.feld-beschriftung {
    display: block;
    font-family: var(--schrift-akzent);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-leise);
    margin-bottom: 0.35rem;
}

.bild-vorschau {
    margin: 0;
    padding: 0.72rem 0.9rem;

    background: var(--flaeche);
    border: 1px dashed var(--linie);
    border-radius: var(--radius);

    font-family: "Consolas", "SF Mono", monospace;
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--text-leise);
    /* Lange Namen kuerzen statt das Feld zu sprengen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Aufstellung -------------------------------------------------------- */
/* Dieselbe Kaderliste wie im Adminbereich, nur ohne Formular darueber. Die
   Liste braucht deshalb etwas mehr Luft nach oben. */

.seite-aufstellung .kader { margin-top: 0; }

.seite-aufstellung .meldung:empty { display: none; }

/* ---- Die anstehende Paarung --------------------------------------------- */
/* Aufbau und Schriften bringt adminxy.css mit. Hier bekommt der Block einen
   eigenen gruenen Grund, damit er sich vom roten Seitengrund abhebt und mit
   den Kaderlisten darunter eine Familie bildet. */

.seite-aufstellung .ausgang {
    width: 100%;
    max-width: 640px;
    margin: 0 auto 2rem;
    padding: 1.2rem 1rem;

    background: var(--gruen);
    border: 1px solid rgba(255, 255, 255, 0.14);
    /* Schwarze Kante links, 3px. box-shadow statt border-left: Der Rahmen
       ringsum bleibt dadurch gleichmaessig duenn, und die Breite des Kastens
       aendert sich nicht. */
    box-shadow: inset 3px 0 0 #000,
                0 14px 34px rgba(0, 0, 0, 0.4);
    border-radius: var(--radius);
}

/* ---- Auswahl der Elf ---------------------------------------------------- */
/* Das Kaestchen sitzt ganz links in der Zeile. Die Huelle ist ein Label rund
   um die ganze Zeile – ein Klick auf Bild oder Namen waehlt mit aus, nicht
   nur der Treffer ins Kaestchen selbst. */

.wahl-huelle {
    flex: none;
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.wahl-haken {
    width: 22px;
    height: 22px;
    margin: 0;
    /* Das Kaestchen in Clubrot statt im Blau des Systems. */
    accent-color: var(--rot);
    cursor: pointer;
}

.wahl-haken:disabled { cursor: default; opacity: 0.4; }

/* Gewaehlte Zeilen heben sich ab – so sieht man die Elf auf einen Blick,
   ohne die Kaestchen einzeln abzusuchen.
   :has() ist noetig, weil das Kaestchen im Kind steht, die Zeile aber
   gefaerbt werden soll; Browser ohne :has() zeigen die Auswahl nur am
   Kaestchen selbst, waehlen laesst sich trotzdem. */
.kader-zeile:has(.wahl-haken:checked) {
    background: rgba(173, 23, 50, 0.35);
    box-shadow: inset 3px 0 0 var(--rot);
}

/* ---- Zaehler, Warnung, Knopf -------------------------------------------- */

.wahl-stand {
    margin: 0 0 0.6rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
}

/* Vollzaehlig: Jetzt darf gespeichert werden. */
.wahl-stand.voll { color: var(--weiss); }

.wahl-warnung {
    margin: 0 0 0.8rem;
    padding: 0.6rem 1rem;

    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(240, 180, 41, 0.55);
    border-radius: var(--radius);

    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--weiss);
}

/* Ohne Warnung kein Kasten – sonst stuende dort dauerhaft ein leerer Rahmen. */
.wahl-warnung:empty { display: none; }

/* Der Verweis in der Warnung. Weiss und unterstrichen, damit er sich vom
   uebrigen Satz abhebt – die Warnung selbst steht schon in Weiss. */
.warnung-link {
    color: var(--weiss);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.warnung-link:hover,
.warnung-link:focus-visible { color: #f0b429; }

.wahl-zeile {
    margin: 0;
    text-align: center;
}

/* anmeldung.css setzt Knoepfe auf volle Breite; hier soll er nur so breit
   sein wie noetig. */
.wahl-knopf {
    width: auto;
    margin: 0;
    padding: 0.75rem 2rem;
    border-radius: 999px;
}

/* ---- Die abgegebene Elf ------------------------------------------------- */
/* Steht unter dem Knopf, sobald gespeichert wurde – und beim naechsten
   Aufruf der Seite gleich mit. */

.elf {
    /* Die bisherigen 25.6px plus 35. */
    margin-top: 60.6px;
}

.elf-titel {
    margin: 0 0 0.2rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--weiss);
}

.elf-liste {
    margin: 0;
    padding: 0;
    list-style: none;

    /* Gruen wie der Kasten mit der Paarung – die abgegebene Elf gehoert
       sichtbar zusammen mit der Partie, um die es geht. */
    background: var(--gruen);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    overflow: hidden;
}

.elf-zeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.elf-zeile:last-child { border-bottom: 0; }

/* Feste Breite, damit die Nummern untereinander stehen. */
.elf-position {
    flex: none;
    width: 5.4rem;
    font-family: var(--schrift-akzent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.elf-name {
    font-family: var(--schrift-akzent);
    font-size: 1rem;
    font-weight: 600;
    color: var(--weiss);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elf-fuss {
    margin: 0.7rem 0 0;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 0.86rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 420px) {
    .elf-position { width: 4.4rem; font-size: 0.66rem; }
    .elf-name     { font-size: 0.92rem; }
}

/* ---- Startknopf am Fuss der Seite --------------------------------------- */
/* anmeldung.css richtet die Zeile im Footer aus; auf aufstellung.html und
   community.html steht sie im Hauptbereich und braucht deshalb ihre eigene
   Mitte und Luft nach oben. */

.seite-aufstellung main .start-zeile,
.seite-community main .start-zeile {
    margin: 40px 0 0;
    text-align: center;
}

/* Je Mannschaftsteil eine eigene Liste, dazwischen 10px – so sieht man
   Tor, Abwehr, Mittelfeld und Sturm auf einen Blick getrennt. */
.elf-gruppen {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Zeile unter der Ueberschrift – gleiche Groesse und Farbe, damit beide
   zusammen als Ansage wirken. */
.elf-ruf {
    margin: 0 0 0.7rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--weiss);
}

/* Ueberschrift ueber dem gruenen Kasten mit der Paarung. */
.seite-aufstellung .partie-titel {
    max-width: 640px;
    margin: 0 auto 0.6rem;
    text-align: center;

    font-family: var(--schrift-akzent);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--weiss);
}

/* Hinweis, wenn niemand aufgestellt hat. Derselbe schwarze Kasten wie die
   uebrigen Meldungen der Seite – gruen waere hier irrefuehrend, es steht ja
   keine Elf darin. */
.elf-leer {
    margin: 0;
    padding: 0.8rem 1rem;

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

    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.8);
}

/* ---- community.html: gruene Seite --------------------------------------- */
/* Die ganze Seite steht im Gruen der Aufstellungen. Der Kasten mit der
   Partie und die vier Reihen bekommen deshalb den dunkleren Ton - auf
   gleichem Gruen waeren sie nicht zu erkennen.

   Der rote Grund kommt aus adminxy.css; ueberschrieben wird er nur fuer
   diese eine Seite, die uebrigen bleiben unberuehrt. */

.seite-community { background: var(--gruen); }

/* Die Zeile unter dem roten Strich im Kopf. anmeldung.css setzt sie auf
   lightgrey und Staerke 600 - hier soll sie weiss und fett stehen, und
   etwas kleiner als die Schlagzeile darueber. */
.seite-community .hero-unterzeile {
    margin: 15px auto 0;
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--weiss);
}

/* 20px weniger Luft unter der Unterzeile. Der Wert steckt im unteren
   Innenabstand des Kopfbereichs (64px aus anmeldung.css), nicht an der
   Zeile selbst - deshalb wird er hier gesetzt und nicht dort. */
.seite-community .hero { padding-bottom: 44px; }

/* adminxy.css legt ein diagonales Muster in Rot ueber die Seite. Auf
   Gruen passt es nicht, deshalb hier weg. */
.seite-community::before { display: none; }

.seite-community .ausgang {
    width: 100%;
    max-width: 640px;
    margin: 0 auto 2rem;
    padding: 1.2rem 1rem;

    background: var(--gruen-tief);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 3px 0 0 var(--schwarz);
    border-radius: var(--radius);
}

/* ---- Die Elf der Clubfans (community.html) ------------------------------ */
/* Keine Liste, sondern vier Reihen wie auf einem Platz: Torwart, Abwehr,
   Mittelfeld, Sturm. Die Formation 1-4-4-2 ist damit auf einen Blick zu
   sehen, statt aus elf gleich aussehenden Zeilen erschlossen zu werden. */

.fanelf { margin-top: 1.6rem; }

.fanelf[hidden] { display: none; }

/* Woraus die Elf gebildet wurde. Ohne diese Zahl waeren die Votes nicht
   einzuschaetzen - 10 Votes aus 10 Aufstellungen sind etwas anderes als
   10 aus 40. Deshalb steht sie gross und in vollem Weiss da und nicht
   als Fussnote. */
.fanelf-unter {
    margin: 0 0 1.2rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--weiss);
}

/* Die Namen derer, die aufgestellt haben. Klein und auf 80 Prozent
   Deckkraft: Sie belegen die Zahl darueber, sollen ihr aber nicht die
   Aufmerksamkeit nehmen.

   Bei vielen Mitspielern wird die Zeile lang - deshalb darf sie umbrechen
   und bekommt eine Hoechstbreite, damit sie nicht ueber die ganze Seite
   laeuft. */
.fanelf-namen {
    max-width: 34rem;
    margin: -0.9rem auto 1.2rem;

    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.8);
}

/* Ohne Namen keine Zeile - sonst bliebe der Abstand darunter stehen. */
.fanelf-namen:empty { display: none; }

.fan-block { margin-bottom: 0.9rem; }

.fan-block:last-child { margin-bottom: 0; }

/* Der Mannschaftsteil ueber der Reihe. In vollem Weiss und fett: Er
   gliedert die Seite und soll beim Ueberfliegen sofort zu finden sein. */
.fan-teil {
    margin: 0 0 0.4rem;
    text-align: center;
    font-family: var(--schrift-akzent);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--weiss);
}

/* Eine Reihe je Mannschaftsteil. Gruen wie die uebrigen Aufstellungen im
   Tippspiel. flex-wrap faengt schmale Schirme ab: Dort rutschen die
   Karten um, statt aus dem Kasten zu ragen. */
.fan-reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.6rem 0.4rem;

    margin: 0;
    padding: 0.8rem 0.6rem;
    list-style: none;

    background: var(--gruen-tief);
    border-radius: var(--radius);
    box-shadow: inset 3px 0 0 var(--schwarz);
}

/* Eine Karte je Spieler. Feste Breite, damit vier nebeneinander gleich
   breit sind und die Reihe ruhig steht - ohne sie zoege ein langer Name
   seine Karte auseinander. */
.fan-karte {
    flex: none;
    width: 6.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

/* Traegt Bild und Nummer. position: relative, damit die Nummer darauf
   sitzen kann.

   73.6px sind 64px plus 15 Prozent. Der krumme Wert steht so da, weil
   ersichtlich bleiben soll, woraus er sich ergibt. */
.fan-bildrahmen {
    position: relative;
    display: block;
    width: 73.6px;
    height: 73.6px;
}

.fan-bild {
    width: 73.6px;
    height: 73.6px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.25);
}

/* Die Rueckennummer sitzt unten links auf dem Bild - bei vier Karten
   nebeneinander ist der Platz knapp, und daneben braeuchte sie eine
   eigene Spalte. */
.fan-nummer {
    position: absolute;
    left: -4px;
    bottom: -2px;
    min-width: 1.35rem;
    padding: 0.02rem 0.28rem;

    background: var(--rot);
    border-radius: 4px;

    font-family: var(--schrift-akzent);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    color: var(--weiss);
}

/* Nur der Nachname, und lange Namen werden gekuerzt: Sonst waeren die
   Karten verschieden hoch. Der volle Name steht im title des Bildes. */
.fan-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--schrift-akzent);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--weiss);
}

/* Der Anteil - die eigentliche Aussage der Seite, deshalb hervorgehoben. */
.fan-anteil {
    font-family: var(--schrift-akzent);
    font-size: 0.92rem;
    font-weight: 700;
    -webkit-text-stroke: 0.3px currentColor;
    white-space: nowrap;
    color: var(--weiss);
}

/* Der Anteil unter den Votes. Duenn und zurueckgenommen: Er ordnet die
   Zahl darueber ein, soll ihr aber nicht die Aufmerksamkeit nehmen.
   Der negative Rand nimmt die 0.25rem Luecke der Karte zurueck - Votes
   und Anteil gehoeren zusammen und sollen dichter stehen als der Abstand
   zum Namen darueber. */
.fan-prozent {
    margin-top: -0.18rem;
    font-family: var(--schrift-akzent);
    font-size: 0.76rem;
    font-weight: 300;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.62);
}

/* Der Weg zur eigenen Aufstellung. Blau wie der Login-Knopf und der
   Balken auf der Startseite - auf dem Gruen der Seite ist es die einzige
   Farbe, die nicht schon vergeben ist. */
.mitmach-zeile {
    margin: 2rem 0 0;
    text-align: center;
}

.mitmach-knopf {
    display: inline-block;
    padding: 0.8rem 1.9rem;

    background: #0070ba;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);

    font-family: var(--schrift-akzent);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--weiss);

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

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

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

.fanelf-fuss {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

/* Auf schmalen Schirmen zwei Karten je Zeile. Vier nebeneinander waeren
   nur mit sehr kleinen Bildern moeglich; so bleiben sie lesbar, und die
   Abwehr steht als 2x2 immer noch als ein Block da.

   Die halbe Breite ueber calc statt einer festen Zahl: Der Kasten ist
   je nach Geraet verschieden breit, zwei Karten sollen ihn aber immer
   genau fuellen. Abgezogen wird die halbe Luecke zwischen ihnen.

   flex mit justify-content: center statt eines Rasters mit zwei
   Spalten: So steht der Torwart als einzige Karte in der Mitte und
   nicht links. */
@media (max-width: 480px) {
    .fan-karte { width: calc(50% - 0.13rem); }
    /* 48px plus dieselben 15 Prozent. */
    .fan-bildrahmen,
    .fan-bild { width: 55.2px; height: 55.2px; }
    .fan-name { font-size: 0.76rem; }
    .fan-anteil { font-size: 0.84rem; }
    .fan-prozent { font-size: 0.7rem; }
    .fan-reihe { gap: 0.5rem 0.25rem; padding: 0.7rem 0.4rem; }
}