/* Clubfans Reunited – Spielplan der 2. Bundesliga

   Kopf, Anmeldebalken, Werbebalken und Fusszeilen kommen aus tabelle.css.
   Hier steht nur, was den Spielplan ausmacht.

   Jeder Spieltag ist eine weisse Karte auf rotem Grund, mit dunkelgrauem
   Kopfband.
   Das Weiss traegt die Wappen besser als ein dunkler Grund und trennt die
   Spieltage deutlich voneinander – man sieht auf einen Blick, wo einer
   aufhoert und der naechste beginnt.

   Eine Partie ist eine Zeile aus vier Feldern – Anstoss, Heim, Ergebnis,
   Gast. Heim steht rechtsbuendig, Gast linksbuendig, damit die beiden
   Wappen das Ergebnis in der Mitte einrahmen und alle Ergebnisse
   untereinander stehen. */

:root {
    /* Auf Weiss braucht es eigene Werte: Die Seitenfarben sind fuer dunklen
       Grund gedacht und waeren hier entweder unsichtbar oder zu hart. */
    --karte-text:  #16181d;
    --karte-leise: #6b7280;
    --karte-linie: rgba(0, 0, 0, 0.09);
    /* Das Kopfband der Karten. Dunkelgrau statt Rot: Die Seite ist bereits
       rot, ein rotes Band auf weisser Karte auf rotem Grund liesse die
       Spieltage ineinanderlaufen. Grau trennt sie ruhiger. */
    --karte-kopf:  #2e3238;
}

/* ---- Ein Spieltag -------------------------------------------------------- */

.spieltag {
    /* 1.15rem waren es, dazu die 15px – als calc geschrieben, damit
       ersichtlich bleibt, woraus sich der Abstand ergibt. */
    margin: 0 0 calc(1.15rem + 15px);
    background: var(--weiss);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    /* Haelt das Kopfband in den runden Ecken. */
    overflow: hidden;
    color: var(--karte-text);
}

.spieltag-titel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.15rem 0.9rem;

    margin: 0;
    padding: 0.6rem 1rem;
    background: var(--karte-kopf);

    font-family: var(--schrift-akzent);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--weiss);
}

.spieltag-nummer {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.spieltag-datum {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.82);
}

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

/* ---- Eine Partie --------------------------------------------------------- */

.spiel {
    display: grid;
    /* Anstoss | Heim | Ergebnis | Gast. Die beiden Mannschaftsspalten teilen
       sich den Rest zu gleichen Teilen, damit das Ergebnis mittig steht –
       auch bei sehr verschieden langen Vereinsnamen. */
    grid-template-columns: 8.4rem 1fr 3.4rem 1fr;
    align-items: center;
    gap: 0.6rem;

    padding: 0.5rem 1rem;
    border-top: 1px solid var(--karte-linie);

    font-family: var(--schrift-akzent);
    font-size: 0.97rem;
}

/* Die erste Zeile grenzt schon an das Kopfband. */
.spiel:first-child { border-top: 0; }

/* Die eigenen Partien hinterlegt: hellgrau, dazu ein roter Streifen links.
   Der Streifen liegt innen, damit er die Zeile nicht breiter macht als
   die uebrigen. */
.spiel-fcn {
    background: #ecedf1;
    box-shadow: inset 4px 0 0 var(--rot);
}

.spiel-fcn .spiel-name { font-weight: 600; }

.spiel-zeit {
    font-size: 0.79rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: var(--karte-leise);
}

.spiel-team {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.spiel-heim { justify-content: flex-end; }
.spiel-gast { justify-content: flex-start; }

/* Lange Namen kuerzen statt umbrechen – sonst waeren die Zeilen eines
   Spieltags verschieden hoch. Der volle Name steht im title des Wappens. */
.spiel-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spiel-heim .spiel-name { text-align: right; }

.spiel-logo {
    flex: none;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

/* Das Ergebnis als kleine dunkle Tafel: So findet das Auge beim Blaettern
   sofort die Mittelspalte, statt jede Zeile lesen zu muessen. */
.spiel-stand {
    justify-self: center;
    min-width: 3.1rem;
    padding: 0.12rem 0.4rem;

    background: var(--karte-kopf);
    border-radius: 4px;

    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: var(--weiss);
}

/* Noch nicht gespielt: dieselbe Tafel, nur zurueckgenommen. Gleiche Groesse,
   damit die Spalte durchgehend fluchtet. */
.spiel-offen {
    background: rgba(0, 0, 0, 0.07);
    font-weight: 400;
    color: var(--karte-leise);
}

/* ---- Aufklappen ---------------------------------------------------------- */

.mehr-zeile {
    margin: 0 0 1.15rem;
    text-align: center;
}

.mehr-zeile[hidden] { display: none; }

/* Der untere Knopf schliesst an den letzten Spieltag an; darunter folgt der
   Werbebalken, der seinen eigenen Abstand mitbringt. */
#zeile-runter { margin: 0 0 1.6rem; }

/* Weiss wie die Karten, damit der Knopf dazugehoert und nicht wie ein
   Fremdkoerper zwischen ihnen sitzt. */
.mehr-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;

    /* anmeldung.css setzt fuer <button> width:100% – hier soll der Knopf
       seine eigene Breite behalten. */
    width: auto;
    margin: 0;

    background: var(--weiss);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);

    font-family: var(--schrift-akzent);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rot);
    cursor: pointer;

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

.mehr-knopf:hover,
.mehr-knopf:focus-visible {
    background: #ffe9ee;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

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

.mehr-knopf svg {
    flex: none;
    width: 1.1em;
    height: 1.1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Schmale Schirme ----------------------------------------------------- */
/* Unter 560px reicht die Breite fuer vier Spalten nicht mehr. Der Anstoss
   rueckt dann in eine eigene Zeile darueber, die Paarung darunter behaelt
   ihre Aufteilung. */
@media (max-width: 560px) {
    .spiel {
        grid-template-columns: 1fr 3.1rem 1fr;
        gap: 0.15rem 0.45rem;
        padding: 0.55rem 0.75rem;
        font-size: 0.9rem;
    }

    .spiel-zeit {
        grid-column: 1 / -1;
        text-align: center;
    }

    .spiel-team { gap: 0.4rem; }

    .spiel-logo {
        width: 22px;
        height: 22px;
    }

    .spiel-stand {
        min-width: 2.9rem;
        font-size: 0.9rem;
    }

    .spieltag-titel {
        padding: 0.55rem 0.75rem;
        font-size: 0.95rem;
    }
}