/* ---------------------------------------------------------------------
   Fussball-Tipp - Ergaenzung zu portal.css

   In der base.html.twig zusaetzlich einbinden:
     <link rel="stylesheet" href="{{ asset('assets/fussball.css') }}">
   oder den Inhalt ans Ende von portal.css haengen.
   --------------------------------------------------------------------- */

.formular--breit { max-width: 52rem; }

/* --- Spieltagaufbau --- */

.aufbau { margin: calc(var(--raster) * 3) 0; }

.aufbau__offen {
    background: #fdf6e3;
    border-left: 4px solid #b08900;
    padding: calc(var(--raster) * 1.5) calc(var(--raster) * 2);
    font-size: 0.9rem;
    margin-bottom: calc(var(--raster) * 2);
}

.aufbau__offen--fertig {
    background: #eef3f0;
    border-left-color: var(--akzent);
}

.aufbau__tabelle {
    width: 100%;
    border-collapse: collapse;
}

.aufbau__tabelle th {
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
    padding-bottom: calc(var(--raster));
}

.aufbau__tabelle td {
    padding: calc(var(--raster) * 0.5) calc(var(--raster) * 0.5);
    vertical-align: top;
}

.aufbau__tabelle select {
    width: 100%;
    font: inherit;
    padding: calc(var(--raster));
    border: 1px solid var(--linie);
    background: #fbfcfa;
}

.aufbau__tabelle select:focus { border-color: var(--akzent); }

.aufbau__nr {
    font-family: var(--schrift-mono);
    font-size: 0.85rem;
    color: var(--ink-weich);
    width: 2rem;
    padding-top: calc(var(--raster) * 1.5);
}

.aufbau__gegen {
    text-align: center;
    width: 1.5rem;
    padding-top: calc(var(--raster) * 1.5);
    color: var(--ink-weich);
}

.knopf:disabled {
    background: var(--linie);
    border-color: var(--linie);
    color: var(--ink-weich);
    cursor: not-allowed;
}

@media (max-width: 34rem) {
    .aufbau__tabelle, .aufbau__tabelle tbody, .aufbau__tabelle tr, .aufbau__tabelle td { display: block; width: 100%; }
    .aufbau__tabelle thead { display: none; }
    .aufbau__tabelle tr {
        border-bottom: 1px solid var(--linie);
        padding-bottom: var(--raster);
        margin-bottom: var(--raster);
    }
    .aufbau__nr { padding-top: 0; font-weight: 600; }
    .aufbau__gegen { display: none; }
}

/* --- Kacheln auf der Startseite --- */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 2px;
    background: var(--linie);
    border: 1px solid var(--linie);
    margin-bottom: calc(var(--raster) * 4);
}

.kachel {
    background: var(--flaeche);
    padding: calc(var(--raster) * 2.5);
    display: flex;
    flex-direction: column;
    gap: calc(var(--raster) * 0.5);
}

.kachel__wert {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--akzent-tief);
}

.kachel__zusatz {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ink-weich);
    margin-left: 2px;
}

.kachel__label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
}

.naechster {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--akzent);
    padding: calc(var(--raster) * 3);
    margin-bottom: calc(var(--raster) * 4);
}

.naechster h2 { margin: 0 0 var(--raster) 0; font-size: 1.1rem; }
.naechster p { margin: 0 0 calc(var(--raster) * 2) 0; }

/* --- Tippmaske --- */

.tippen { width: 100%; border-collapse: collapse; }

.tippen th {
    text-align: left;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
    padding-bottom: var(--raster);
}

.tippen td {
    padding: calc(var(--raster) * 0.75) calc(var(--raster) * 0.5);
    border-bottom: 1px solid var(--linie);
}

.tippen__mannschaft { min-width: 9rem; }
.tippen__platz { color: var(--ink-weich); font-size: 0.8rem; }
.tippen__gegen { text-align: center; color: var(--ink-weich); width: 1rem; }
.tippen__eingabe { width: 3.5rem; }

.tippen input.tippfeld {
    width: 3rem;
    font: inherit;
    text-align: center;
    padding: calc(var(--raster) * 0.75);
    border: 1px solid var(--linie);
    background: #fbfcfa;
}

.tippen input.tippfeld:focus { border-color: var(--akzent); }

/* --- Ranglisten --- */

.tabelle tr.imgeld { background: #f2f7f4; }
.tabelle tr.imgeld td:first-child { border-left: 3px solid var(--akzent); }

@media (max-width: 34rem) {
    .tippen__mannschaft { min-width: 0; font-size: 0.9rem; }
    .kachel { padding: calc(var(--raster) * 1.5); }
    .kachel__wert { font-size: 1.3rem; }
}

/* --- Kasse und Abrechnung: ans Ende von fussball.css anhaengen --- */

.tabelle tr.klamm { background: #fdf4f2; }
.tabelle tr.storniert { color: var(--ink-weich); text-decoration: line-through; }

.tabelle tfoot td {
    border-top: 2px solid var(--linie);
    font-weight: 600;
    background: #f7f9f7;
}

.bestaetigung {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--warnung);
    padding: calc(var(--raster) * 3);
    margin-top: calc(var(--raster) * 4);
    max-width: 42rem;
}

.bestaetigung p:first-child { margin-top: 0; }

details summary { cursor: pointer; }

details form {
    display: flex;
    gap: var(--raster);
    margin-top: var(--raster);
}

details input[type="text"] {
    font: inherit;
    padding: calc(var(--raster) * 0.75);
    border: 1px solid var(--linie);
    background: #fbfcfa;
}

/* ---------------------------------------------------------------------
   Fussball-Menue, zweizeilig - ersetzt .fussballmenue

   Oben die Punkte fuer alle Mitspieler, darunter abgesetzt die
   Verwaltung, sichtbar nur fuer Administratoren.

   Die untere Zeile ist bewusst leiser: kleinere Schrift,
   zurueckgenommene Farbe, ein Etikett davor. Sie soll erreichbar sein,
   aber nicht mit dem konkurrieren, weswegen die meisten hier sind.
   --------------------------------------------------------------------- */

.fbmenue {
    margin-bottom: calc(var(--raster) * 4);
    border-bottom: 1px solid var(--linie);
}

.fbmenue__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: calc(var(--raster) * 3);
}

.fbmenue__punkt {
    display: inline-block;
    padding: calc(var(--raster) * 1.25) 0;
    text-decoration: none;
    color: var(--akzent-tief);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.fbmenue__punkt:hover { border-bottom-color: var(--linie); }

.fbmenue__punkt--aktiv {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--akzent);
}

.fbmenue__zeile--verwaltung {
    gap: calc(var(--raster) * 2.5);
    border-top: 1px dashed var(--linie);
    padding-top: calc(var(--raster) * 0.5);
}

.fbmenue__zeile--verwaltung .fbmenue__punkt {
    font-size: 0.85rem;
    color: var(--ink-weich);
    padding: calc(var(--raster) * 0.9) 0;
}

.fbmenue__zeile--verwaltung .fbmenue__punkt:hover { color: var(--ink); }

.fbmenue__zeile--verwaltung .fbmenue__punkt--aktiv {
    color: var(--ink);
    border-bottom-color: var(--ink-weich);
}

.fbmenue__marke {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-weich);
    border: 1px solid var(--linie);
    padding: 1px 6px;
    align-self: center;
}

@media (max-width: 34rem) {
    .fbmenue__zeile { gap: calc(var(--raster) * 2); }
    .fbmenue__zeile--verwaltung { gap: calc(var(--raster) * 1.5); }
    .fbmenue__marke { display: none; }
}

/* =====================================================================
   Fussball-Tipp auf schmalen Bildschirmen

   Ans Ende von fussball.css anhaengen.

   Drei Masken werden unterwegs benutzt: Tippen, Spielstand und die
   Ergebnisansicht eines Spieltags. Sie sind hier von schmal nach breit
   gebaut - die Handyansicht ist der Normalfall, die Schreibtischansicht
   die Erweiterung.

   Antippflaechen sind mindestens 44 Pixel hoch. Darunter trifft man
   mit dem Finger daneben, und bei einem Tippspiel tippt man neun Mal
   hintereinander.
   ===================================================================== */

/* --- Tippmaske ----------------------------------------------------- */

.tippliste {
    list-style: none;
    margin: calc(var(--raster) * 3) 0;
    padding: 0;
    display: grid;
    gap: 2px;
    background: var(--linie);
    border: 1px solid var(--linie);
}

.tippzeile {
    background: var(--flaeche);
    padding: calc(var(--raster) * 2);
    display: grid;
    gap: calc(var(--raster) * 1.5);
}

.tippzeile__paarung {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--raster);
    align-items: baseline;
}

.tippzeile__team {
    font-weight: 600;
    line-height: 1.25;
}

.tippzeile__team--gast { text-align: right; }

.tippzeile__team em {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ink-weich);
    margin-left: 3px;
}

.tippzeile__gegen { color: var(--ink-weich); }

.tippzeile__eingabe {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--raster);
}

.tippzeile__doppelpunkt {
    font-size: 1.2rem;
    color: var(--ink-weich);
}

/* Grosse Felder: bequem zu treffen, gut lesbar */
.tippzeile input[type="number"],
.tippzeile input[type="text"] {
    width: 4rem;
    min-height: 3rem;
    font: inherit;
    font-size: 1.35rem;
    text-align: center;
    padding: calc(var(--raster) * 0.5);
    border: 1px solid var(--linie);
    background: #fbfcfa;
    /* Die Pfeilchen der Zahlenfelder sind auf dem Handy nutzlos und
       schmaelern die Trefferflaeche. */
    -moz-appearance: textfield;
}

.tippzeile input::-webkit-outer-spin-button,
.tippzeile input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tippzeile input:focus {
    border-color: var(--akzent);
    outline: 2px solid var(--akzent);
    outline-offset: -2px;
}

.tippzeile__fehler {
    font-size: 0.85rem;
    color: var(--warnung);
}

.tippzeile__fehler ul { margin: 0; padding-left: 1.2em; }

/* Speichern-Knopf bleibt unten stehen. Bei neun Begegnungen muesste
   man sonst erst ans Ende scrollen. */
.tippform__fuss {
    position: sticky;
    bottom: 0;
    background: var(--papier);
    padding: calc(var(--raster) * 1.5) 0;
    border-top: 1px solid var(--linie);
    margin-top: calc(var(--raster) * 2);
}

.tippform__fuss .knopf { min-height: 3rem; }

/* --- Ergebnisansicht eines Spieltags -------------------------------- */

.ergebnisliste {
    list-style: none;
    margin: calc(var(--raster) * 3) 0;
    padding: 0;
    display: grid;
    gap: 2px;
    background: var(--linie);
    border: 1px solid var(--linie);
}

.ergebniszeile {
    background: var(--flaeche);
    padding: calc(var(--raster) * 2);
    display: grid;
    gap: var(--raster);
}

.ergebniszeile--treffer { background: #eef5f1; }

/* Oben ausrichten statt an der Schriftlinie.

   An der Schriftlinie ging es schief, seit Wappen und Name in
   einem Flexelement stecken: Ein Flexelement leitet seine
   Schriftlinie vom ersten darin angezeigten Kind ab. Beim Gast
   ist das das Wappen - und ein Bild hat keine Schriftlinie, also
   nahm der Browser dessen Unterkante. Die Gastmannschaft sass
   dadurch ein paar Pixel hoeher.

   Die Reihenfolge im Quelltext zu drehen half nicht: Massgeblich
   ist die ANGEZEIGTE Reihenfolge, nicht die im Quelltext.

   Mit start entfaellt die Frage. Beide Mannschaftsfelder sind
   gleich hoch und beginnen an derselben Oberkante. */
.ergebniszeile__paarung {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--raster);
    align-items: start;
}

/* Wappen und Name nebeneinander, das Wappen innen zum Spielstand
   hin. Der Name schrumpft und wird notfalls gekuerzt, das Wappen
   bleibt vollstaendig. */
.ergebniszeile__team {
    font-weight: 600;
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    justify-content: flex-end;
}

.ergebniszeile__team--gast {
    text-align: left;
    justify-content: flex-start;
}

.ergebniszeile__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Feste Zeilenhoehe, damit Heim und Gast unabhaengig vom
       Wappen gleich hoch sind. */
    line-height: 1.6;
}

.ergebniszeile__team .wappen { flex: 0 0 auto; margin: 0; }

/* Am Rechner der volle Name; die Umschaltung steht in der
   Telefonansicht weiter unten. Gilt fuer Spieltagsansicht und
   Startseite gleichermassen. */
.teamname__kurz { display: none; }

.ergebniszeile__ergebnis {
    font-family: var(--schrift-mono);
    font-size: 1.1rem;
    font-weight: 700;
    /* Mittig, nicht linksbuendig.

       Die Spalte ist so breit wie ihr breitester Inhalt - und das
       ist seit v67 der Zustandstext darunter, nicht die Torzahl.
       Linksbuendig rutschte die Torzahl damit an den linken Rand
       der Spalte und klebte am Heimwappen, waehrend zum Gastwappen
       eine Luecke blieb. */
    text-align: center;
}

/* Feste Spalten statt Flex: Tipp und Punkte sollen in allen
   Zeilen auf gleicher Hoehe stehen, auch wenn erst ein Teil der
   Spiele ein Ergebnis hat. Die fuenfte Spalte nimmt den Hinweis
   auf - Volltreffer oder "nicht gewertet". */
.ergebniszeile__tipp {
    display: grid;
    grid-template-columns: max-content 3.2rem max-content 2.2rem 1fr;
    justify-content: start;
    align-items: baseline;
    gap: calc(var(--raster) * 0.75);
    font-size: 0.9rem;
    padding-top: var(--raster);
    border-top: 1px dashed var(--linie);
}

/* Auf schmalen Anzeigen bricht das Raster um, statt zu quetschen. */
@media (max-width: 24rem) {
    .ergebniszeile__tipp {
        grid-template-columns: max-content 1fr;
    }
    .ergebniszeile__tipp > .marker { grid-column: 1 / -1; }
}

.ergebniszeile__marke {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
}

.ergebniszeile__wert { font-family: var(--schrift-mono); }

.ergebniszeile__punkte {
    font-weight: 700;
    color: var(--akzent-tief);
}

/* --- Rangliste ------------------------------------------------------ */

.rangliste {
    list-style: none;
    margin: calc(var(--raster) * 2) 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: var(--linie);
    border: 1px solid var(--linie);
}

.rangzeile {
    background: var(--flaeche);
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    grid-template-areas:
        "platz name  punkte"
        "platz neben punkte";
    gap: 0 var(--raster);
    align-items: center;
    padding: calc(var(--raster) * 1.5);
}

.rangzeile--imgeld { background: #f2f7f4; }

/* Die eigene Zeile - unterwegs das Wichtigste. Wer den Spielstand auf
   dem Handy aufruft, will zuerst wissen, wo er selbst steht. */
.rangzeile--eigen {
    background: #e6f0ea;
    box-shadow: inset 4px 0 0 var(--akzent);
}

.rangzeile__platz {
    grid-area: platz;
    font-family: var(--schrift-mono);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-weich);
    text-align: center;
}

.rangzeile--imgeld .rangzeile__platz,
.rangzeile--eigen .rangzeile__platz { color: var(--akzent-tief); }

.rangzeile__name {
    grid-area: name;
    font-weight: 600;
    line-height: 1.2;
}

.rangzeile__sie {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--akzent);
    color: #fff;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: 2px;
}

.rangzeile__neben {
    grid-area: neben;
    font-size: 0.78rem;
    color: var(--ink-weich);
    line-height: 1.3;
}

.rangzeile__neben:empty { display: none; }

.rangzeile__punkte {
    grid-area: punkte;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.rangzeile__einheit {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--ink-weich);
    margin-left: 3px;
}

/* --- Ab Tablet: mehr Luft, Paarung und Eingabe nebeneinander -------- */

@media (min-width: 40rem) {
    .tippzeile {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: calc(var(--raster) * 3);
    }

    .tippzeile__paarung { grid-template-columns: 1fr 1.5rem 1fr; }

    .tippzeile__fehler { grid-column: 1 / -1; }

    .tippzeile input[type="number"],
    .tippzeile input[type="text"] {
        width: 3.25rem;
        min-height: 2.5rem;
        font-size: 1.1rem;
    }

    .tippform__fuss {
        position: static;
        border-top: none;
        padding: 0;
    }

    .tippform__fuss .knopf { width: auto; padding-left: 3rem; padding-right: 3rem; }

    .ergebniszeile {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: calc(var(--raster) * 3);
    }

    .ergebniszeile__tipp {
        border-top: none;
        padding-top: 0;
        justify-content: flex-end;
    }

    .rangzeile { padding: calc(var(--raster) * 1.25) calc(var(--raster) * 2); }
}

/* --- Sehr schmal: Namen umbrechen lassen ---------------------------- */

@media (max-width: 22rem) {
    .tippzeile__paarung,
    .ergebniszeile__paarung {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .tippzeile__team--gast,
    .ergebniszeile__team--gast { text-align: left; }

    .tippzeile__gegen { display: none; }

    .ergebniszeile__ergebnis { justify-self: start; }
}

/* --- Formkurve ------------------------------------------------------
   Ans Ende von fussball.css anhaengen.
   -------------------------------------------------------------------- */

/* Der Mannschaftsname als Knopf - soll aber nicht wie einer aussehen */
button.tippzeile__team {
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px dotted var(--linie);
    padding: calc(var(--raster) * 0.5) 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    /* Bequem zu treffen, ohne die Zeile aufzublaehen */
    min-height: 2.75rem;
}

button.tippzeile__team--gast { text-align: right; }

button.tippzeile__team:hover { border-bottom-color: var(--akzent); }

button.tippzeile__team[aria-expanded="true"] {
    border-bottom: 2px solid var(--akzent);
    color: var(--akzent-tief);
}

button.tippzeile__team:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

/* Die aufklappende Tafel */
.formtafel {
    grid-column: 1 / -1;
    background: #f4f7f5;
    border: 1px solid var(--linie);
    border-left: 3px solid var(--akzent);
    padding: calc(var(--raster) * 1.5);
    margin-top: calc(var(--raster) * -0.5);
}

.formtafel[hidden] { display: none; }

.form__kopf {
    margin: 0 0 var(--raster) 0;
    font-size: 0.85rem;
    color: var(--ink-weich);
}

.form__kopf strong { color: var(--ink); }

.form__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.form__spiel {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto auto;
    gap: var(--raster);
    align-items: baseline;
    font-size: 0.85rem;
    padding: calc(var(--raster) * 0.5) 0;
}

.form__zeichen {
    font-family: var(--schrift-mono);
    font-weight: 700;
    font-size: 0.8rem;
    text-align: center;
    color: #fff;
    background: var(--ink-weich);
    line-height: 1.5rem;
    height: 1.5rem;
}

.form__spiel--sieg       .form__zeichen { background: var(--akzent); }
.form__spiel--remis      .form__zeichen { background: #b08900; }
.form__spiel--niederlage .form__zeichen { background: var(--warnung); }

.form__gegner { color: var(--ink); }

.form__ergebnis {
    font-family: var(--schrift-mono);
    font-weight: 600;
}

.form__spieltag {
    font-size: 0.75rem;
    color: var(--ink-weich);
    min-width: 1.8rem;
    text-align: right;
}

.form__hinweis,
.form__leer,
.form__laedt {
    margin: var(--raster) 0 0 0;
    font-size: 0.75rem;
    color: var(--ink-weich);
}

@media (max-width: 22rem) {
    button.tippzeile__team--gast { text-align: left; }
    .form__spiel { grid-template-columns: 1.5rem 1fr auto; }
    .form__spieltag { display: none; }
}

/* --- Bilanzknopf zwischen den Mannschaften ---------------------------
   Ans Ende von fussball.css anhaengen, nach formkurve.css.
   -------------------------------------------------------------------- */

button.tippzeile__gegen {
    font: inherit;
    background: none;
    border: none;
    padding: calc(var(--raster) * 0.5) calc(var(--raster) * 0.75);
    margin: 0;
    color: var(--ink-weich);
    cursor: pointer;
    display: grid;
    justify-items: center;
    gap: 1px;
    min-height: 2.75rem;
    align-content: center;
}

.tippzeile__gegen__text {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

button.tippzeile__gegen:hover { color: var(--akzent-tief); }

button.tippzeile__gegen[aria-expanded="true"] {
    color: var(--akzent-tief);
    background: #eef3f0;
}

button.tippzeile__gegen:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 1px;
}

/* Liganame im Direktvergleich - tritt zurueck, weil meistens
   Bundesliga dasteht und nur die Ausnahme interessiert */
.form__liga {
    display: block;
    font-size: 0.7rem;
    color: var(--ink-weich);
}

@media (max-width: 22rem) {
    /* Bei gestapelten Mannschaften sitzt der Knopf nicht mehr
       dazwischen, sondern darunter - dann linksbuendig. */
    button.tippzeile__gegen {
        justify-items: start;
        justify-self: start;
    }
}

/* --- Spieltagsnavigation in der Tippmaske ---------------------------
   Ans Ende von fussball.css anhaengen.
   -------------------------------------------------------------------- */

.spieltagsnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raster);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    padding: calc(var(--raster) * 1.25) calc(var(--raster) * 1.5);
    margin-bottom: calc(var(--raster) * 3);
}

.spieltagsnav__pfeil {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 calc(var(--raster) * 1.25);
    border: 1px solid var(--linie);
    text-decoration: none;
    color: var(--akzent-tief);
    font-weight: 600;
    white-space: nowrap;
}

.spieltagsnav__pfeil:hover {
    background: #eef3f0;
    border-color: var(--akzent);
}

.spieltagsnav__pfeil--aus {
    color: var(--linie);
    border-color: var(--linie);
    cursor: default;
}

.spieltagsnav__wahl {
    display: flex;
    align-items: center;
    gap: var(--raster);
    flex: 1 1 12rem;
}

.spieltagsnav__label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
}

.spieltagsnav select {
    flex: 1 1 auto;
    font: inherit;
    min-height: 2.75rem;
    padding: 0 calc(var(--raster));
    border: 1px solid var(--linie);
    background: #fbfcfa;
}

.spieltagsnav select:focus { border-color: var(--akzent); }

/* --- Aufklappende Tafeln kompakter ----------------------------------
   Vorher schoben sie die Zeilen darunter stark nach unten. Jetzt
   flacher, mit eigener Bildlaufleiste bei viel Inhalt - die Liste
   bleibt an Ort und Stelle.
   -------------------------------------------------------------------- */

.formtafel {
    max-height: 13rem;
    overflow-y: auto;
    padding: calc(var(--raster) * 1.25);
    font-size: 0.9rem;
}

.formtafel .form__spiel {
    padding: 2px 0;
    font-size: 0.8rem;
}

.formtafel .form__zeichen {
    line-height: 1.25rem;
    height: 1.25rem;
    font-size: 0.72rem;
}

.formtafel .form__kopf { font-size: 0.8rem; margin-bottom: calc(var(--raster) * 0.75); }
.formtafel .form__hinweis { margin-top: calc(var(--raster) * 0.75); }

@media (max-width: 34rem) {
    .spieltagsnav { gap: calc(var(--raster) * 0.75); }
    .spieltagsnav__label { display: none; }
    .spieltagsnav__wahl { flex: 1 1 100%; order: -1; }
}

/* --- Vereinswappen und Feinschliff ----------------------------------
   Ans Ende von fussball.css anhaengen.
   -------------------------------------------------------------------- */

.wappen {
    height: 1.1em;
    width: auto;
    max-width: 1.4em;
    vertical-align: -0.15em;
    margin-right: 0.35em;
    /* Dezent: die Wappen sollen die Namen begleiten, nicht
       ueberstrahlen. Beim Ueberfahren volle Farbe. */
    opacity: 0.85;
}

.tippzeile__team:hover .wappen,
.ergebniszeile__team .wappen { opacity: 1; }

.tippzeile__team--gast .wappen { margin-right: 0; margin-left: 0.35em; }

/* --- Abstand zwischen Text und Knopf auf der Startseite --- */

.naechster p { margin: 0 0 calc(var(--raster) * 2) 0; }

.naechster .knopf,
.naechster .knopf--klein {
    margin-top: calc(var(--raster));
    margin-bottom: calc(var(--raster) * 1.5);
}

.naechster .fussnote { margin-top: calc(var(--raster) * 2); }

/* --- Vorspann darf am Schreibtisch breiter laufen ---------------------
   46 Zeichen sind fuer einen Handybildschirm richtig, am PC brechen
   zwei Saetze dadurch auf vier Zeilen um.
   -------------------------------------------------------------------- */

@media (min-width: 48rem) {
    .vorspann { max-width: 72ch; }
}

.vorspann .fussnote {
    display: block;
    margin-top: calc(var(--raster) * 0.75);
}

/* --- Feinschliff -----------------------------------------------------
   Ans Ende von fussball.css anhaengen. Ersetzt die entsprechenden
   Regeln aus wappen.css - haengen Sie diese Datei danach an, dann
   gewinnt sie.
   -------------------------------------------------------------------- */

/* Vorspann laeuft am Schreibtisch fast ueber die volle Breite.
   Die Begrenzung auf wenige Zeichen ist fuer Fliesstext richtig, hier
   stehen aber zwei kurze Hinweise nebeneinander. */
@media (min-width: 48rem) {
    .vorspann { max-width: none; }
}

/* --- Wappen, halb so gross wieder drauf ----------------------------- */

.wappen {
    height: 1.65em;
    width: auto;
    max-width: 2.1em;
    vertical-align: -0.45em;
    margin-right: 0.4em;
    opacity: 0.9;
}

.tippzeile__team:hover .wappen { opacity: 1; }
.tippzeile__team--gast .wappen { margin-right: 0; margin-left: 0.4em; }

/* In der Bundesligatabelle: eigene schmale Spalte, damit die Namen
   untereinander buendig bleiben. */
.tabelle__wappen {
    width: 2.4rem;
    text-align: center;
    padding-right: 0 !important;
}

.tabelle__wappen .wappen {
    margin: 0;
    height: 1.5rem;
    max-width: 1.9rem;
    vertical-align: middle;
}

/* --- Navigationsleiste auch im Import ------------------------------- */

.spieltagsnav--import { margin-bottom: calc(var(--raster) * 3); }

/* --- Anzeige der letzten Aktualisierung ----------------------------- */

.aktualisierung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--raster);
    font-size: 0.8rem;
    color: var(--ink-weich);
    margin: calc(var(--raster) * 2) 0;
}

.aktualisierung__punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--akzent);
    display: inline-block;
}

.aktualisierung__punkt--ruht { background: var(--linie); }

.aktualisierung--laeuft .aktualisierung__punkt {
    animation: pulsieren 2s ease-in-out infinite;
}

@keyframes pulsieren {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
    .aktualisierung--laeuft .aktualisierung__punkt { animation: none; }
}

/* Kurzes Aufleuchten, wenn sich ein Ergebnis geaendert hat */
.frisch { animation: aufleuchten 2.5s ease-out 1; }

@keyframes aufleuchten {
    0%   { background: #d8ebe0; }
    100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .frisch { animation: none; }
}

/* --- Kassenbuch -----------------------------------------------------
   Ans Ende von fussball.css anhaengen.
   -------------------------------------------------------------------- */

.tabelle tr.bargeld td:first-child { border-left: 3px solid var(--akzent); }
.tabelle tr.bargeld { background: #f7faf8; }

.zaehlung {
    margin: calc(var(--raster) * 3) 0;
    max-width: 40rem;
}

.zaehlung > summary {
    cursor: pointer;
    font-weight: 600;
    padding: calc(var(--raster) * 1.25) calc(var(--raster) * 2);
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--akzent);
}

.zaehlung > summary:hover { background: #eef3f0; }

.zaehlung[open] > summary { margin-bottom: 0; border-bottom: none; }

.zaehlung .formular { border-top: none; }

/* --- Alle Tipps eines Spieltags --------------------------------------
   Ans Ende von fussball.css anhaengen.

   Bei neun Begegnungen und dreissig Mitspielern ist das eine breite
   Tabelle. Statt sie zu stapeln - dann waere die Zuordnung weg -
   laeuft sie waagerecht, mit stehenbleibender Namensspalte. So sieht
   man auf jedem Geraet, wessen Tipp man gerade liest.
   -------------------------------------------------------------------- */

.tippmatrix__rahmen {
    overflow-x: auto;
    border: 1px solid var(--linie);
    background: var(--flaeche);
    margin: calc(var(--raster) * 2) 0;
    /* Randanzeige beim Scrollen */
    background-image:
        linear-gradient(to right, var(--flaeche) 30%, rgba(255,255,255,0)),
        linear-gradient(to left,  var(--flaeche) 30%, rgba(255,255,255,0));
    background-position: left center, right center;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%;
    background-attachment: local, local;
}

.tippmatrix {
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 100%;
}

.tippmatrix th,
.tippmatrix td {
    padding: calc(var(--raster) * 0.6) calc(var(--raster) * 0.75);
    border-bottom: 1px solid var(--linie);
    text-align: center;
    white-space: nowrap;
}

.tippmatrix thead th {
    background: #eceee9;
    border-bottom: 2px solid var(--linie);
    vertical-align: bottom;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Namensspalte bleibt beim waagerechten Scrollen stehen */
.tippmatrix__name {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--flaeche);
    text-align: left;
    min-width: 11rem;
    border-right: 2px solid var(--linie);
}

.tippmatrix thead .tippmatrix__name { background: #eceee9; z-index: 3; }

.tippmatrix__kurz {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink-weich);
}

.tippmatrix__ergebnis {
    display: block;
    font-family: var(--schrift-mono);
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 2px;
}

.tippmatrix__zelle { font-family: var(--schrift-mono); }

.tippmatrix__tipp { display: block; }

.tippmatrix__p {
    display: block;
    font-family: var(--schrift);
    font-size: 0.68rem;
    color: var(--ink-weich);
}

.tippmatrix__zelle--treffer { background: #d8ebe0; }
.tippmatrix__zelle--treffer .tippmatrix__p { color: var(--akzent-tief); font-weight: 700; }
.tippmatrix__zelle--nah     { background: #f2f7f4; }
.tippmatrix__zelle--daneben { color: var(--ink-weich); }

.tippmatrix__punkte {
    font-size: 1rem;
    border-left: 2px solid var(--linie);
    min-width: 3rem;
}

/* Die Punktespalte steht zweimal in der Tabelle - vorn und
   hinten. Sichtbar ist immer nur eine; welche, entscheidet die
   Breite. Eine Tabellenspalte laesst sich mit dem Stilblatt
   nicht verschieben, deshalb dieser Weg. */
.tippmatrix__punkte--vorn { display: none; }

.tippmatrix tbody tr:hover td { background: #f7f9f7; }
.tippmatrix tbody tr:hover .tippmatrix__name { background: #f7f9f7; }

.tippmatrix--eigen td { background: #e6f0ea; }
.tippmatrix--eigen .tippmatrix__name {
    background: #e6f0ea;
    box-shadow: inset 4px 0 0 var(--akzent);
    font-weight: 600;
}

.tippmatrix--ungewertet { opacity: 0.6; }

@media (max-width: 34rem) {
    /* Die Namensspalte stand fest auf 8rem und nahm damit fast
       die halbe Anzeige ein - fuer die Tipps blieb kaum etwas
       uebrig. Jetzt schmaler, und lange Namen werden gekuerzt
       statt die Spalte aufzublaehen. */
    /* Feste Breite statt Hoechstbreite: Die Punktespalte haengt
       sich gleich daneben und braucht dafuer einen verlaesslichen
       Abstand vom linken Rand. */
    .tippmatrix__name {
        min-width: 6rem;
        max-width: 6rem;
        width: 6rem;
        font-size: 0.75rem;
    }

    /* Auf dem Telefon die vordere Punktespalte zeigen und die
       hintere weglassen. Damit stehen die Gesamtpunkte gleich
       neben dem Namen, ohne dass man durch neun Spiele
       scrollen muss. */
    .tippmatrix__punkte--vorn   { display: table-cell; }
    .tippmatrix__punkte--hinten { display: none; }

    .tippmatrix__punkte {
        min-width: 2.4rem;
        width: 2.4rem;
        font-size: 0.9rem;
        border-left: none;
        border-right: 2px solid var(--linie);
    }

    /* Die Punktespalte bleibt beim seitlichen Scrollen stehen,
       genau wie die Namensspalte. Der Abstand von 6rem entspricht
       deren Breite - beide Werte gehoeren zusammen. Wird die
       Namensspalte breiter, muss dieser Wert mitwandern. */
    .tippmatrix__punkte--vorn {
        position: sticky;
        left: 6rem;
        z-index: 1;
        background: var(--flaeche);
    }

    .tippmatrix thead .tippmatrix__punkte--vorn {
        background: #eceee9;
        z-index: 3;
    }

    /* Die Hervorhebungen der Zeile muessen mitgehen, sonst steht
       die stehende Spalte als heller Streifen in einer sonst
       eingefaerbten Zeile. */
    .tippmatrix tbody tr:hover .tippmatrix__punkte--vorn { background: #f7f9f7; }
    .tippmatrix--eigen .tippmatrix__punkte--vorn { background: #e6f0ea; }

    /* Der Trennstrich sitzt jetzt rechts von den Punkten. */
    .tippmatrix__name { border-right: none; }

    /* Die Punkte je Spiel kleiner - in den Zellen ist auf dem
       Telefon wenig Platz, und der Tipp ist die wichtigere
       Angabe. */
    .tippmatrix__p { font-size: 0.62rem; }

    .tippmatrix__mitspieler {
        display: block;
        max-width: 5.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Die Marken darunter, nicht daneben - sonst schieben sie
       die Spalte wieder auf. */
    .tippmatrix__name .rangzeile__sie,
    .tippmatrix__name .marker {
        display: block;
        margin-top: 2px;
        font-size: 0.6rem;
    }

    .tippmatrix th, .tippmatrix td { padding: calc(var(--raster) * 0.4); }

    /* Auf dem Telefon der Kurzname - in der Ergebnisliste wie
       in der Kachel auf der Startseite. */
    .teamname__lang { display: none; }
    .teamname__kurz { display: inline; }
}

/* --- Hauptkachel der Startseite --------------------------------------
   Ans Ende von fussball.css anhaengen.

   Sie zeigt, was gerade dran ist. Waehrend der Spiele ist das der
   laufende Spieltag - der Moment, in dem alle auf die Seite schauen.
   Deshalb bekommt sie den meisten Platz und den kraeftigsten Rahmen.
   -------------------------------------------------------------------- */

.hauptkachel {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-top: 5px solid var(--linie);
    padding: calc(var(--raster) * 3);
    margin-bottom: calc(var(--raster) * 5);
}

.hauptkachel--live  { border-top-color: var(--akzent); }
.hauptkachel--offen { border-top-color: #b08900; }

.hauptkachel__kopf { margin-bottom: calc(var(--raster) * 2.5); }

.hauptkachel__marke {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--raster) * 0.75);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-weich);
}

.hauptkachel--live .hauptkachel__marke { color: var(--akzent-tief); font-weight: 600; }
.hauptkachel--live .aktualisierung__punkt { animation: pulsieren 2s ease-in-out infinite; }

.hauptkachel__kopf h2 {
    font-size: 1.6rem;
    letter-spacing: -0.01em;
    margin: calc(var(--raster) * 0.5) 0 0 0;
}

.hauptkachel__unter {
    margin: calc(var(--raster) * 0.5) 0 0 0;
    color: var(--ink-weich);
    font-size: 0.9rem;
}

.hauptkachel__lage {
    font-size: 1.05rem;
    margin: 0 0 calc(var(--raster) * 2) 0;
}

.hauptkachel__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--raster) * 1.5);
    margin: calc(var(--raster) * 3) 0 0 0;
    padding-top: calc(var(--raster) * 2);
    border-top: 1px solid var(--linie);
}

.hauptkachel__fuss .knopf { width: auto; padding-left: 2rem; padding-right: 2rem; }

/* --- Eigene Zahlen in der Kachel ------------------------------------ */

.hauptkachel__zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--raster) * 4);
    padding-bottom: calc(var(--raster) * 2);
    margin-bottom: calc(var(--raster) * 2);
    border-bottom: 1px solid var(--linie);
}

.hauptkachel__zahl { display: flex; flex-direction: column; }

.hauptkachel__zahl strong {
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--akzent-tief);
}

.hauptkachel__von {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ink-weich);
    margin-left: 3px;
}

.hauptkachel__zahl span:last-child {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-weich);
    margin-top: 2px;
}

/* --- Kompakte Ergebnisliste ----------------------------------------- */

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

.kurzzeile {
    display: grid;
    grid-template-columns: 1fr 5rem 1fr 2.2rem;
    grid-template-areas: "heim ergebnis gast punkte";
    gap: var(--raster);
    /* Oben ausrichten, nicht mittig: Die Ergebniszelle ist durch
       den Zustandstext zwei Zeilen hoch. Mittig sasse der
       Spielstand hoeher als die Mannschaftsnamen. */
    align-items: start;
    padding: calc(var(--raster) * 0.9) 0;
    border-bottom: 1px solid var(--linie);
    font-size: 0.92rem;
}

.kurzzeile:last-child { border-bottom: none; }
.kurzzeile--treffer { background: #eef5f1; }

/* Wappen und Name nebeneinander. Der Name schrumpft und wird
   notfalls mit Auslassungspunkten gekuerzt - das Wappen bleibt
   dabei stehen und die Zeile bricht nicht um.

   min-width: 0 ist noetig, weil Raster- und Flexelemente sonst
   nicht unter ihre Inhaltsbreite schrumpfen und stattdessen
   ueberlaufen. */
.kurzzeile__heim,
.kurzzeile__gast {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}

.kurzzeile__heim { grid-area: heim; justify-content: flex-end;  text-align: right; }
.kurzzeile__gast { grid-area: gast; justify-content: flex-start; text-align: left; }

.kurzzeile__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Das Wappen darf nicht schrumpfen - sonst wird es zur Linie,
   bevor der Name gekuerzt wird. Der eigene Abstand entfaellt,
   das erledigt jetzt der Zwischenraum des Flexrasters. */
.kurzzeile .wappen {
    flex: 0 0 auto;
    margin: 0;
}
.kurzzeile__ergebnis { grid-area: ergebnis; }

/* Der eigene Tipp steht klein unter dem Spielstand, gleich neben
   dem Zustand. Damit braucht er keine eigene Spalte mehr - auf
   einem Telefon war dafuer schlicht kein Platz. */
.kurzzeile__tipp {
    display: block;
    font-family: var(--schrift-mono);
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--ink-weich);
    line-height: 1.3;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Punktmarke

   Die erreichten Punkte als runde Marke am rechten Zeilenrand.
   Eine hervorgehobene Zahl dort wird als Wertung gelesen und
   braucht keine Beschriftung - was sie bedeutet, steht im
   title-Attribut fuer alle, die es genauer wissen wollen.
   --------------------------------------------------------------------- */
.punktmarke {
    grid-area: punkte;
    align-self: center;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    border: 1px solid var(--linie);
    background: var(--flaeche);
    font-family: var(--schrift);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--akzent-tief);
    line-height: 1;
}

/* Volltreffer: gefuellt. Das ist der Blickpunkt der Kachel. */
.punktmarke--treffer {
    background: var(--akzent-tief);
    border-color: var(--akzent-tief);
    color: #fff;
}

/* Noch keine Wertung: blass und ohne Rahmen, damit die leeren
   Marken vor dem Anpfiff die Liste nicht zerstueckeln. */
.punktmarke--leer {
    border-color: transparent;
    background: transparent;
    color: var(--ink-weich);
    font-weight: 400;
}

.kurzzeile__ergebnis {
    font-family: var(--schrift-mono);
    font-weight: 700;
    text-align: center;
    font-size: 1rem;
    line-height: 1.2;
}

/* In der Kurzliste ist weniger Platz als in der Spieltagsansicht:
   kleiner setzen und den Zeilenabstand eng halten, damit die
   Zeilenhoehe nicht waechst. */
.kurzzeile__ergebnis .spielstatus {
    font-size: 0.55rem;
    line-height: 1.2;
    letter-spacing: 0.04em;
    /* Die Ergebniszelle steht auf fett und in Schwarz - der
       Zustandstext erbt das sonst und draengt sich vor. */
    font-weight: 400;
    color: var(--ink-weich);
}


@media (max-width: 34rem) {
    .hauptkachel { padding: calc(var(--raster) * 2); }
    .hauptkachel__kopf h2 { font-size: 1.3rem; }
    .hauptkachel__zahlen { gap: calc(var(--raster) * 2.5); }
    .hauptkachel__zahl strong { font-size: 1.5rem; }
    .hauptkachel__fuss .knopf { width: 100%; }

    /* Auf dem Telefon bleibt es bei einer Zeile - es sind ja nur
       noch vier Spalten. Die Mitte wird etwas schmaler, die
       Punktmarke kleiner. */
    .kurzzeile {
        grid-template-columns: 1fr 4.4rem 1fr 1.8rem;
        gap: calc(var(--raster) * 0.6);
    }

    .punktmarke {
        min-width: 1.6rem;
        height: 1.6rem;
        font-size: 0.78rem;
    }
}

/* --- Zustand des Spieltags in der Ergebnismaske ----------------------
   Ans Ende von fussball.css anhaengen.
   -------------------------------------------------------------------- */

.spieltagszustand {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-left: 4px solid var(--linie);
    padding: calc(var(--raster) * 2);
    margin: calc(var(--raster) * 3) 0;
    max-width: 46rem;
}

.spieltagszustand p { margin: 0 0 var(--raster) 0; }
.spieltagszustand p:last-of-type { margin-bottom: calc(var(--raster) * 1.5); }
.spieltagszustand form { margin: 0; }

/* --- Aufleuchten nur dort, wo sich etwas geaendert hat ---------------
   Ans Ende von fussball.css anhaengen.

   Vorher leuchtete der ganze nachgeladene Bereich auf - bei einer
   grossen Tippmatrix ist das unruhig. Jetzt nur noch die Ergebnisse
   und der eigene Stand.
   -------------------------------------------------------------------- */

.frisch .ergebnisliste,
.frisch .kurzliste,
.frisch .hauptkachel__zahlen {
    animation: aufleuchten 2.5s ease-out 1;
}

.frisch { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .frisch .ergebnisliste,
    .frisch .kurzliste,
    .frisch .hauptkachel__zahlen { animation: none; }
}

/* --- Tippmaske: Paarung und Bilanzknopf ------------------------------
   Ans Ende von fussball.css anhaengen. Ersetzt die frueheren Regeln zu
   button.tippzeile__team und button.tippzeile__gegen.

   ZWEI PROBLEME, DIE HIER BEHOBEN WERDEN

   1. Der Strich mittendurch
      Die Mannschaftsnamen hatten eine gepunktete Unterlinie ueber die
      volle Breite. Zusammen mit dem Bindestrich in der Mitte sah das
      aus wie eine durchgestrichene Zeile.

      Jetzt ohne Unterlinie. Dass die Namen anklickbar sind, zeigt der
      Zeiger und - beim Ueberfahren - eine kurze Unterstreichung
      genau unter dem Text.

   2. Der Bilanzknopf war schwer zu treffen
      Er sass ohne Abstand zwischen zwei grossen Flaechen. Wer knapp
      danebentippte, oeffnete die Formkurve einer Mannschaft.

      Jetzt mit eigenem Rahmen, fester Breite und Abstand nach beiden
      Seiten.
   -------------------------------------------------------------------- */

.tippzeile__paarung {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: calc(var(--raster) * 1.5);
    align-items: center;
}

/* --- Mannschaftsnamen ------------------------------------------------ */

button.tippzeile__team {
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    background: none;
    border: none;              /* kein Strich mehr durch die Zeile */
    padding: calc(var(--raster) * 0.75) 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 0;
}

button.tippzeile__team--gast {
    text-align: right;
    justify-content: flex-end;
}

/* Anklickbarkeit zeigt sich beim Ueberfahren - nur unter dem Text,
   nicht ueber die ganze Zeile */
button.tippzeile__team:hover { text-decoration: underline; text-underline-offset: 3px; }

button.tippzeile__team[aria-expanded="true"] {
    color: var(--akzent-tief);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

button.tippzeile__team:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

/* --- Bilanzknopf ----------------------------------------------------- */

.bilanzknopf {
    font: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink-weich);
    background: var(--papier);
    border: 1px solid var(--linie);
    padding: 0 calc(var(--raster) * 0.75);
    margin: 0;
    cursor: pointer;
    /* Feste Groesse und bequeme Trefferflaeche */
    min-width: 3.9rem;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.bilanzknopf:hover {
    color: var(--akzent-tief);
    border-color: var(--akzent);
    background: #eef3f0;
}

.bilanzknopf[aria-expanded="true"] {
    color: #fff;
    background: var(--akzent);
    border-color: var(--akzent-tief);
}

.bilanzknopf:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 2px;
}

/* --- Schmale Bildschirme --------------------------------------------
   Heim und Gast untereinander, der Bilanzknopf rechts daneben. So ist
   er weit von beiden Namen entfernt und leicht zu treffen.
   -------------------------------------------------------------------- */

@media (max-width: 30rem) {
    .tippzeile__paarung {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "heim   bilanz"
            "gast   bilanz";
        gap: 0 var(--raster);
        align-items: center;
    }

    button.tippzeile__team--heim { grid-area: heim; }
    button.tippzeile__team--gast {
        grid-area: gast;
        text-align: left;
        justify-content: flex-start;
    }

    .bilanzknopf {
        grid-area: bilanz;
        align-self: center;
        min-height: 3.25rem;
    }

    button.tippzeile__team { min-height: 2.25rem; }
}

/* ---------------------------------------------------------------------
   Spiele ausserhalb der Wertung

   Ein verlegtes Spiel bleibt sichtbar und behaelt sein Ergebnis, wird
   aber durchgestrichen dargestellt. So sieht man auf einen Blick,
   warum die Punktzahl nicht zu den angezeigten Partien passt.
   --------------------------------------------------------------------- */

.ausgefallen {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: 0.55;
}

/* Der Hinweis daneben darf nicht mit durchgestrichen werden. */
.ausgefallen .marker,
.ausgefallen input,
.ausgefallen .knopf {
    text-decoration: none;
    opacity: 1;
}

/* Liste der verlegten Partien in der Ergebniserfassung */
.verlegung {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
}

.verlegung li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--linie);
}

.verlegung li > span:first-child { font-weight: 600; }
.verlegung form { margin-left: auto; }

/* ---------------------------------------------------------------------
   Wechsellicht

   Zwei Punkte, die abwechselnd aufleuchten - wie die Blitzfolge an
   einer Landebahn. Es blinkt nur, solange tatsaechlich ein Spiel
   laeuft. Ausserhalb der Spielzeiten stehen beide Punkte still und
   blass: Die Seite sieht weiterhin nach, aber es gibt nichts zu
   sehen, und ein dauerndes Blinken waere eine falsche Behauptung.
   --------------------------------------------------------------------- */

.wechsellicht {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

.wechsellicht__punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--akzent);
    display: inline-block;
    animation: wechsellicht 1.4s steps(1, end) infinite;
}

/* Der zweite Punkt laeuft eine halbe Runde versetzt - dadurch ist
   immer genau einer von beiden hell. */
.wechsellicht__punkt:nth-child(2) { animation-delay: 0.7s; }

@keyframes wechsellicht {
    0%, 50%   { opacity: 1; }
    50.01%, 100% { opacity: 0.2; }
}

/* Ausserhalb der Spielzeiten: beide still und blass. */
.wechsellicht--ruht .wechsellicht__punkt {
    animation: none;
    background: var(--linie);
    opacity: 1;
}

/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt kein
   Blinken - stattdessen leuchten beide Punkte ruhig. */
@media (prefers-reduced-motion: reduce) {
    .wechsellicht__punkt {
        animation: none;
        opacity: 1;
    }
}

/* Die Zustandszeile tritt in der Pause zurueck. */
.aktualisierung--pause { opacity: 0.7; }

/* ---------------------------------------------------------------------
   Spielzustand unter dem Ergebnis

   Vor dem Anpfiff die Anstosszeit, waehrend des Spiels "laeuft",
   danach "Endstand". Ein 2:1 nach zwanzig Minuten ist etwas anderes
   als ein 2:1 nach dem Schlusspfiff.
   --------------------------------------------------------------------- */

.spielstatus {
    display: block;
    font-family: var(--schrift);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-weich);
    line-height: 1.4;
    font-weight: 400;
}

/* Laufende Partien treten hervor - dort aendert sich noch etwas. */
.spielstatus--laeuft {
    color: var(--akzent-tief);
    font-weight: 700;
}

/* Vor dem Anpfiff bleibt es eine blasse Randangabe. */
.spielstatus--vor { opacity: 0.75; }