/*
   HG.HGWebsite - öffentliche Seite. Eigenes schlankes Stylesheet, mobil zuerst (ADR-005, ADR-007).

   Formensprache nach dem CI-Handbuch (CC_HG Kaarst-Büttgen/10_Logo/CI/): Wappen über Balken,
   Abschnittskopf mit Balken und gelbem Segment, Akzent-Strich, Karten, Verlaufsflächen mit dem
   Wappen im Hintergrund. Dort liegt die SSOT - Werte werden hier nur gespiegelt.
*/

/* Überschriften: Epunda Slab (SIL Open Font License) statt der URW Egyptienne des CI-Handbuchs,
   vorläufig bis zur Klärung der Webfont-Lizenz (ADR-010). Die beiden Dateien sind feste Schnitte
   aus der variablen Schrift: "fett" mit Stärke 750, "normal" mit Stärke 500 - wer die Schrift neu
   lädt, muss diese Stärken wieder ziehen. */

@font-face {
    font-family: "HG Kopf";
    src: url("schrift/epunda-slab-750.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HG Kopf";
    src: url("schrift/epunda-slab-500.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("schrift/inter.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("schrift/jetbrains-mono-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --hg-blue: #0E55A1;
    --hg-yellow: #FFD000;
    --hg-navy: #082B54;
    --hg-ink: #0B1424;
    --ink: #14181F;
    --ink-soft: #4a5160;
    --paper: #ffffff;
    --paper-2: #F4F6FA;
    --line: rgba(14, 85, 161, 0.14);
    --line-strong: rgba(14, 85, 161, 0.35);
    --line-dunkel: rgba(255, 255, 255, 0.14);

    --schrift-kopf: "HG Kopf", Rockwell, "Roboto Slab", Georgia, serif;
    --schrift-text: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --schrift-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

    /* Kopfgeometrie nach CI: Wappen = 3 x Balkenhöhe, 0.85 H oberhalb der Balken-Oberkante,
       1.15 H unterhalb der Balken-Unterkante. Seitenverhältnis des Wappens 0.836. */
    --balken: 44px;
    --wappen-hoehe: calc(var(--balken) * 3);
    --wappen-breite: calc(var(--balken) * 3 * 0.836);
    --wappen-luft: 0.5rem;
    --wappen-ueberstand: calc(var(--balken) * 1.15);
    /* Am Bildschirm steht das Wappen etwas eingerückt, nicht bündig an der Inhaltskante. */
    --wappen-einzug: 0rem;

    --rand: 1.25rem;
    --spalte: 77.5rem;
    --abstand: 2.5rem;
    --radius: 4px;
    --schatten: 0 1px 2px rgba(8, 43, 84, 0.06), 0 14px 28px -20px rgba(8, 43, 84, 0.4);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* Sprünge innerhalb der Seite (Menüpunkt "Mannschaften", Reiter) gleiten statt zu springen. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Der Fuß steht auch auf kurzen Seiten am unteren Rand des Fensters: Die Seite füllt mindestens
   die Fensterhöhe, der Inhalt nimmt den Platz dazwischen. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--schrift-text);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

main {
    flex: 1 0 auto;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

picture {
    display: block;
}

a {
    color: var(--hg-blue);
    text-underline-offset: 0.2em;
}

:focus-visible {
    outline: 3px solid var(--hg-yellow);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--hg-navy);
}

h1,
h2,
h3,
p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.spalte {
    max-width: var(--spalte);
    margin-inline: auto;
    padding-inline: var(--rand);
}

.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sprung {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -4rem;
    z-index: 40;
    padding: 0.6rem 0.9rem;
    background: var(--hg-yellow);
    color: var(--hg-navy);
    font-weight: 600;
}

.sprung:focus {
    top: 0.5rem;
}

/* Angabenzeile in der Mono-Schrift des CI: Datum, Thema, Halle, Zeitraum. */
.zeile {
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hg-blue);
}

.marke {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    background: var(--hg-yellow);
    color: var(--hg-navy);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.625rem;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.karte {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

/* ---------- Kopf: Wappen über Balken ---------- */

.kopf {
    position: relative;
    z-index: 20;
    background: var(--paper);
}

.kopf-weiss {
    height: calc(var(--balken) * 0.85 + var(--wappen-luft));
}

/* Soziale Kanäle rechts über dem Balken, bündig mit der Inhaltsbreite. */
.kopf-sozial {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    height: 100%;
}

.kopf-sozial a {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    align-self: stretch;
    justify-content: center;
    min-width: 2.75rem;
    color: var(--ink-soft);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

.kopf-sozial a:hover {
    color: var(--hg-blue);
}

.kopf-sozial img {
    width: 1.375rem;
    height: 1.375rem;
}

/* Am Handy nur die Zeichen - neben dem Wappen ist kein Platz für die Beschriftung. */
.kopf-sozial span {
    display: none;
}

/* Der Kanal der Mannschaft trägt ihren Namen auch am Handy - sonst stünden zwei gleiche Zeichen
   ohne Unterschied nebeneinander. */
.kopf-sozial .kopf-sozial-eigen span {
    display: inline;
}

/* Der Balken bleibt oben stehen. Er liegt unter dem Kopf, damit das große Wappen ihn überlagert,
   solange es zu sehen ist - und über allem, sobald das Menü am Handy offen ist. */
.kopf-balken {
    position: sticky;
    top: 0;
    z-index: 19;
    height: var(--balken);
    background: var(--hg-blue);
}

.kopf-balken:has(.menue[open]) {
    z-index: 40;
}

.kopf-balken-inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Kleines Wappen mit Namen: erscheint im Balken, sobald das große aus dem Bild gescrollt ist. */
.balken-marke {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    color: #fff;
    /* Dieselbe Schrift wie die Menüpunkte. */
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.balken-marke img {
    flex: none;
    width: auto;
    height: calc(var(--balken) - 10px);
}

.balken-marke span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.gescrollt .balken-marke {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .balken-marke {
        transition: none;
    }
}

.kopf-wappen-link {
    position: absolute;
    top: var(--wappen-luft);
    left: calc(max(var(--rand), 50% - var(--spalte) / 2 + var(--rand)) + var(--wappen-einzug));
    z-index: 22;
    display: block;
}

.kopf-wappen {
    height: var(--wappen-hoehe);
    width: auto;
}

/* Menü am Handy: helle Leiste, die von rechts hereinfährt - ohne Skript, über <details>.
   Abdunklung und Schließen-Kreuz sind Teile des <summary>: Wer daneben oder auf das Kreuz
   tippt, schließt das Menü. */

.menue-breit {
    display: none;
}

.menue summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    height: var(--balken);
    padding-inline: 0.5rem;
    margin-right: -0.5rem;
    color: #fff;
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.menue summary::-webkit-details-marker {
    display: none;
}

.menue-striche,
.menue-striche::before,
.menue-striche::after {
    display: block;
    width: 1.375rem;
    height: 2px;
    background: currentColor;
}

.menue-striche {
    position: relative;
}

.menue-striche::before,
.menue-striche::after {
    content: "";
    position: absolute;
    left: 0;
}

.menue-striche::before {
    top: -7px;
}

.menue-striche::after {
    top: 7px;
}

.menue[open] summary::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(8, 43, 84, 0.45);
    cursor: default;
}

.menue[open] summary::after {
    content: "\00d7";
    position: fixed;
    top: 0.5rem;
    right: calc(var(--rand) - 0.75rem);
    z-index: 32;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--ink-soft);
    font-family: var(--schrift-text);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
}

.menue:not([open]) .menue-liste {
    display: none;
}

.menue-liste {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    width: min(19rem, 82vw);
    display: flex;
    flex-direction: column;
    padding-top: 4rem;
    overflow: hidden;
    background: var(--paper);
    box-shadow: -18px 0 40px -18px rgba(8, 43, 84, 0.45);
}

.menue-liste a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}

.menue-liste > ul > li:first-child > a {
    border-top: 1px solid var(--line);
}

/* "Mannschaften" fächert im Menü auf: je Bereich eine Zeile, darunter die Mannschaften zweispaltig. */
/* Zugeklappt ist der Eintrag genauso hoch wie die übrigen Menüpunkte. */
.menue-faecher {
    border-bottom: 1px solid var(--line);
}

.menue-faecher[open] {
    padding-bottom: 0.9rem;
}

.menue .menue-faecher summary {
    justify-content: space-between;
    height: auto;
    min-height: calc(3.25rem - 1px);
    margin: 0;
    padding: 0;
    color: var(--ink);
}

.menue .menue-faecher summary::before {
    content: none;
}

.menue .menue-faecher summary::after {
    content: "";
    position: static;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.3rem;
    border-right: 2px solid var(--hg-blue);
    border-bottom: 2px solid var(--hg-blue);
    transform: rotate(45deg);
}

.menue .menue-faecher[open] summary::after {
    transform: rotate(-135deg);
}

.menue-faecher .zeile {
    margin: 0.5rem 0 0.15rem;
    font-size: 0.6875rem;
}

.menue-faecher ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
}

.menue-faecher li a {
    min-height: 2.5rem;
    border: 0;
    font-family: var(--schrift-text);
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
}

.menue-liste a:hover,
.menue-liste a:active,
.menue-liste .aktiv,
.menue .menue-faecher summary.aktiv {
    color: var(--hg-blue);
}

@media (prefers-reduced-motion: no-preference) {
    .menue[open] .menue-liste {
        animation: menue-herein 0.22s ease-out;
    }

    .menue[open] summary::before {
        animation: menue-abdunkeln 0.22s ease-out;
    }
}

@keyframes menue-herein {
    from {
        transform: translateX(100%);
    }
}

@keyframes menue-abdunkeln {
    from {
        opacity: 0;
    }
}

/* ---------- Bühne: ein großer Beitrag, zwei kleine ----------
   Am Handy stehen Bild und Text untereinander, damit der Titel keine Gesichter verdeckt.
   Ab Tablet liegt die Schrift auf dem Bild (siehe unten). */

.buehne {
    background: var(--paper);
}

.buehne-raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0 var(--rand) 1.75rem;
}

.kachel-gross {
    grid-column: 1 / -1;
    margin-inline: calc(var(--rand) * -1);
}

.kachel a {
    display: block;
    height: 100%;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
}

.kachel-gross a {
    background: var(--hg-blue);
    border: 0;
    border-radius: 0;
    color: #fff;
}

.kachel picture {
    overflow: hidden;
}

.kachel img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.kachel-gross img {
    aspect-ratio: 16 / 9;
}

.kachel-text {
    padding: 0.7rem 0.8rem 0.9rem;
}

.kachel-gross .kachel-text {
    padding: 1.1rem var(--rand) 1.35rem;
}

.kachel .zeile {
    margin-bottom: 0.4rem;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
}

.kachel-gross .zeile {
    color: var(--hg-yellow);
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
}

/* Beitragstitel erscheinen so, wie die Redaktion sie schreibt - keine Versalien. */
.kachel-titel {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.12;
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
    text-wrap: balance;
}

.kachel-gross .kachel-titel {
    font-size: clamp(1.625rem, 7.2vw, 2.25rem);
    line-height: 1.08;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .kachel a:hover img {
        transform: scale(1.03);
    }
}

/* ---------- Abschnitte ---------- */

.abschnitt {
    padding-block: var(--abstand);
}

/* Weiß und helles Grau wechseln sich ab, in welcher Reihenfolge die Redaktion die Blöcke auch
   stellt: Die Bühne ist der erste Abschnitt (weiß), jeder zweite danach steht auf Grau. */
main > section:nth-of-type(even) {
    background: var(--paper-2);
}

.abschnittskopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.abschnittskopf .zeile {
    margin-bottom: 0.35rem;
}

/* Akzent-Strich des CI: blau auf Hell, gelb auf Dunkel. */
.abschnittskopf .zeile::before,
.fuss .zeile::before {
    content: "";
    display: inline-block;
    width: 0.22em;
    height: 1em;
    margin-right: 0.55em;
    vertical-align: -0.12em;
    background: currentColor;
}

.titel {
    /* Angesprungen bleibt die Überschrift samt Angabenzeile unter dem stehenden Balken frei. */
    scroll-margin-top: calc(var(--balken) + 3.5rem);
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: clamp(2rem, 8.5vw, 3rem);
    line-height: 1;
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
    text-wrap: balance;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
}

/* Balken mit gelbem Anfangssegment. */
.linie {
    position: relative;
    flex: 0 0 100%;
    height: 6px;
    background: var(--hg-blue);
}

.linie::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4rem;
    background: var(--hg-yellow);
}

.mehr {
    order: 3;
    margin-left: auto;
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-underline-offset: 0.4em;
    white-space: nowrap;
}

/* ---------- Spiele ----------
   Dunkel ist nur die Tafel des Heimspieltags - sie ist der Blickfang; Auswärts und Ergebnisse
   stehen als helle Karten daneben. */

.tafeln {
    display: grid;
    gap: 1rem;
}

.tafel {
    --tafel-text: var(--ink);
    --tafel-leise: var(--ink-soft);
    --tafel-linie: var(--line);
    --tafel-akzent: var(--hg-blue);

    position: relative;
    padding: 1.25rem 1.25rem 0.4rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    color: var(--tafel-text);
}

.tafel-heim {
    --tafel-text: #fff;
    --tafel-leise: rgba(255, 255, 255, 0.8);
    --tafel-linie: var(--line-dunkel);
    --tafel-akzent: var(--hg-yellow);

    background: linear-gradient(180deg, var(--hg-navy) 0%, var(--hg-blue) 100%);
    border-color: var(--hg-navy);
}

.band {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 0.35rem 0.8rem 0.3rem;
    border-radius: 0 var(--radius) 0 0;
    background: var(--hg-yellow);
    color: var(--hg-navy);
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tafel-titel {
    margin-bottom: 0.3rem;
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Der Titel steht unter dem Band "Heimspiel" und hat damit die volle Breite - neben dem Band brach
   der Monat in schmalen Tafeln in eine zweite Zeile um.
   Beides gilt nur für Tafeln mit Band. Die blaue Tafel gibt es auch anderswo (Trainingszeiten, Eckdaten,
   Termin) - dort ließe "container-type" sie auf Breite null zusammenfallen, wo der Inhalt die Breite bestimmt. */
.tafel-heim:has(> .band) {
    padding-top: 2.15rem;
}

/* In schmalen Tafeln (Handy) wird der Titel etwas kleiner, damit auch "Donnerstag, 12. November" in einer
   Zeile bleibt. Maß ist die Breite der Tafel, nicht die des Bildschirms. */
.tafel-heim:has(> .band) {
    container-type: inline-size;
}

.tafel-heim:has(> .band) .tafel-titel {
    font-size: clamp(1.0625rem, 6.5cqi, 1.5rem);
}

.tafel .zeile {
    color: var(--tafel-akzent);
}

.spiele {
    margin-top: 1rem;
}

.spiel,
.ergebnis {
    display: grid;
    align-items: center;
    column-gap: 0.9rem;
    min-height: 4rem;
    padding-block: 0.7rem;
    border-top: 1px solid var(--tafel-linie);
}

.spiel {
    grid-template-columns: 4.5rem minmax(0, 1fr);
}

.ergebnis {
    grid-template-columns: minmax(0, 1fr) auto 1.75rem;
}

.spiel-zeit,
.ergebnis-tore {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}

.spiel-tag {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tafel-akzent);
}

.spiel-mannschaft {
    display: block;
    color: var(--tafel-text);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.spiel-mannschaft:hover {
    text-decoration: underline;
}

.spiel-gegner,
.spiel-ort {
    display: block;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--tafel-leise);
}

.spiel-ort {
    font-size: 0.75rem;
}

/* Ausgang eines Spiels: drei gleich geformte, gefüllte Marken. Unterschieden werden sie durch den
   Buchstaben und die Helligkeit - nie nur durch die Farbe (Grobkonzept 6a). */
.ausgang {
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 3px;
    font-family: var(--schrift-text);
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1;
}

.ausgang-sieg {
    background: var(--hg-yellow);
    color: var(--hg-navy);
}

.ausgang-unentschieden {
    background: #c7d0de;
    color: var(--ink);
}

.ausgang-niederlage {
    background: var(--ink);
    color: #fff;
}

/* Auf der dunklen Tafel: Unentschieden hell, Niederlage dunkel mit feinem Rand. */
.tafel-heim .ausgang-unentschieden {
    background: rgba(255, 255, 255, 0.85);
    color: var(--hg-navy);
}

.tafel-heim .ausgang-niederlage {
    background: var(--hg-ink);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.stand {
    margin-top: 1.25rem;
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: right;
    color: var(--ink-soft);
}

/* ---------- Aktuelles ---------- */

.beitraege {
    display: grid;
    gap: 0.75rem;
}

.beitrag {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
}

.beitrag picture {
    height: 100%;
}

.beitrag img {
    width: 100%;
    height: 100%;
    min-height: 6.75rem;
    object-fit: cover;
}

.beitrag-text {
    padding: 0.85rem 1rem 0.95rem;
}

.beitrag .zeile {
    margin-bottom: 0.4rem;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
}

.beitrag-titel {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.18;
    hyphens: auto;
    hyphenate-limit-chars: 16 6 6;
    text-wrap: pretty;
}

.beitrag-kurz {
    display: none;
}

.beitrag:hover {
    border-color: var(--line-strong);
}

.beitrag:hover .beitrag-titel {
    color: var(--hg-blue);
}

/* ---------- Mannschaften ---------- */

.bereich + .bereich {
    margin-top: 1.75rem;
}

.bereich-name {
    margin-bottom: 0.6rem;
    font-family: var(--schrift-kopf);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bereich-liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.bereich-liste a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.4rem 0.9rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
    text-decoration: none;
}

.bereich-liste a::after {
    content: "";
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid var(--hg-blue);
    border-right: 2px solid var(--hg-blue);
    transform: rotate(45deg);
}

.bereich-liste a:hover {
    background: var(--hg-blue);
    border-color: var(--hg-blue);
    color: #fff;
}

.bereich-liste a:hover::after {
    border-color: var(--hg-yellow);
}

/* ---------- Termine ---------- */

.termine {
    display: grid;
    gap: 0.75rem;
}

.termin {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
}

a.termin:hover {
    border-color: var(--line-strong);
}

a.termin:hover .termin-titel {
    color: var(--hg-blue);
    text-decoration: underline;
}

.termin-datum {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem 0.4rem;
    background: var(--hg-blue);
    color: #fff;
    text-align: center;
}

.termin-tag {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.termin-monat {
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hg-yellow);
}

.termin-text {
    padding: 0.9rem 1rem 1rem;
}

.termin-titel {
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 600;
}

.termin-titel a {
    color: inherit;
    text-decoration: none;
}

.termin-titel a:hover {
    color: var(--hg-blue);
    text-decoration: underline;
}

.termin-ort {
    margin-top: 0.2rem;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

.termin .marke {
    margin-top: 0.6rem;
}

/* ---------- Instagram ---------- */

.instagram {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.instagram a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    color: #fff;
}

.instagram img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.instagram-kanal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2rem 0.6rem 0.5rem;
    background: linear-gradient(rgba(8, 43, 84, 0), rgba(8, 43, 84, 0.9));
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Partner ---------- */

.partner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.partner-feld {
    display: grid;
    place-items: center;
    height: 7.5rem;
    padding: 1.25rem;
}

.partner-feld img {
    width: auto;
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
}

a.partner-feld:hover {
    border-color: var(--line-strong);
}

/* ---------- Seitenkopf der Unterseiten ---------- */

.seitenkopf {
    /* Der Titel beginnt unter dem herabragenden Wappen. */
    padding-block: calc(var(--wappen-ueberstand) + 1.25rem) 1.25rem;
}

.seitenkopf .zeile {
    margin-bottom: 0.4rem;
}

/* ---------- Mannschaftsseite: nächstes Spiel und letztes Ergebnis ---------- */

.ueberblick-rahmen {
    padding-block: 1.5rem 0.5rem;
}

.ueberblick {
    display: grid;
    gap: 1rem;
}

.naechstes,
.letztes {
    padding-bottom: 1.1rem;
}

.naechstes-termin {
    margin: 0.4rem 0 0.5rem;
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: clamp(2rem, 9.5vw, 2.75rem);
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.naechstes-zeit {
    margin-left: 0.3em;
    color: var(--hg-yellow);
}

.naechstes-gegner,
.letztes-gegner {
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.35;
}

.naechstes-gegner {
    margin-bottom: 0.35rem;
}

.letztes-stand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.4rem;
}

.letztes-stand .ergebnis-tore {
    font-size: 2.25rem;
}

/* Halle zum Antippen: Anschrift, Karte und Hinweise klappen auf. */
.halle summary {
    position: relative;
    display: inline-block;
    padding-block: 0.25rem;
    color: var(--tafel-leise, var(--ink-soft));
    font-size: 0.875rem;
    line-height: 1.4;
    text-decoration: underline dotted;
    text-underline-offset: 0.25em;
    cursor: pointer;
    list-style: none;
}

.halle summary::-webkit-details-marker {
    display: none;
}

.halle summary::after {
    content: "";
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.15rem;
    vertical-align: 0.2em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.halle[open] summary::after {
    vertical-align: 0;
    transform: rotate(-135deg);
}

.halle p {
    margin: 0.2rem 0 0.4rem;
    color: var(--tafel-leise, var(--ink-soft));
    font-size: 0.875rem;
    line-height: 1.6;
}

.halle a {
    position: relative;
    display: inline-block;
    margin-right: 0.6rem;
    color: var(--tafel-akzent, var(--hg-blue));
    font-weight: 600;
}

/* ---------- Reiter, die beim Scrollen stehen bleiben ---------- */

.reiter {
    position: sticky;
    top: var(--balken);
    z-index: 15;
    background: var(--paper);
    border-block: 1px solid var(--line);
    box-shadow: 0 10px 16px -16px rgba(8, 43, 84, 0.6);
}

.reiter-liste {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.reiter-liste::-webkit-scrollbar {
    display: none;
}

.reiter a {
    flex: none;
    display: flex;
    align-items: center;
    min-height: 3rem;
    color: var(--ink);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: inset 0 -3px 0 transparent;
}

/* Markiert ist der Abschnitt, der gerade zu sehen ist (per Skript). */
.reiter a:hover,
.reiter a.aktiv {
    color: var(--hg-blue);
    box-shadow: inset 0 -3px 0 var(--hg-yellow);
}

/* Ein angesprungener Abschnitt beginnt unter den Reitern, nicht dahinter. */
section[id] {
    scroll-margin-top: calc(var(--balken) + 3.25rem);
}

/* ---------- Spielplan einer Mannschaft ---------- */

.plan-wahl {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.plan label {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin: 0 0.4rem 1.25rem 0;
    padding-inline: 1rem;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

.plan-wahl:checked + label {
    background: var(--hg-blue);
    border-color: var(--hg-blue);
    color: #fff;
}

.plan-wahl:focus-visible + label {
    outline: 3px solid var(--hg-yellow);
    outline-offset: 2px;
}

/* Filter Heim/Auswärts ohne Skript: Die Auswahl blendet die übrigen Spiele aus, und Monate,
   in denen dann nichts mehr steht, gleich mit. */
#ort-heim:checked ~ * .plan-auswaerts,
#ort-auswaerts:checked ~ * .plan-heim,
#ort-heim:checked ~ .plan-gruppe:not(:has(.plan-heim)),
#ort-auswaerts:checked ~ .plan-gruppe:not(:has(.plan-auswaerts)) {
    display: none;
}

.plan-frueher {
    margin-bottom: 1.5rem;
}

.plan-frueher > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    color: var(--hg-blue);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.plan-frueher > summary::-webkit-details-marker {
    display: none;
}

.plan-frueher > summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-top: -0.2rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.plan-frueher[open] > summary::after {
    margin-top: 0.25rem;
    transform: rotate(-135deg);
}

.plan-frueher .plan-liste {
    margin-top: 0.5rem;
}

.plan-gruppe + .plan-gruppe {
    margin-top: 1.5rem;
}

.plan-monat {
    margin-bottom: 0.5rem;
}

.plan-liste {
    overflow: hidden;
}

.plan-spiel {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr) auto;
    column-gap: 0.9rem;
    align-items: center;
    padding: 1rem 1rem 1rem 1.15rem;
    border-top: 1px solid var(--line);
}

.plan-spiel:first-child {
    border-top: 0;
}

.plan-tag {
    display: block;
    color: var(--hg-blue);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.plan-zeit {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.plan-alt {
    display: block;
    margin-top: 0.25rem;
    color: var(--ink-soft);
    font-size: 0.75rem;
    line-height: 1.3;
}

.plan-gegner {
    margin-bottom: 0.15rem;
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.15;
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
}

/* Heim oder auswärts als Wort - gefüllt und umrandet, nicht nur über Farbe. */
.plan-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.ort {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border: 1.5px solid var(--hg-blue);
    border-radius: 2px;
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ort-heim {
    background: var(--hg-blue);
    color: #fff;
}

.ort-auswaerts {
    border-color: var(--line-strong);
    color: var(--ink-soft);
}

/* Heimspiele tragen einen blauen Strich am linken Rand der Liste. */
.plan-liste .plan-heim {
    box-shadow: inset 4px 0 0 var(--hg-blue);
}

/* Pfeil zur Seite des Spiels, wo noch kein Ergebnis steht. */
.plan-weiter {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: -0.5rem;
}

.plan-weiter::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-top: 2px solid var(--hg-blue);
    border-right: 2px solid var(--hg-blue);
    transform: rotate(45deg);
}

.plan-stand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.plan-stand .ergebnis-tore {
    font-size: 1.375rem;
}

.plan-abgesagt .plan-zeit,
.plan-abgesagt .plan-gegner {
    color: var(--ink-soft);
    text-decoration: line-through;
}

.marke-absage {
    background: var(--ink);
    color: #fff;
}

.leer {
    color: var(--ink-soft);
}

/* ---------- Tabelle ----------
   Am Handy ohne Querschieben: Platz, Mannschaft, Spiele, Tordifferenz, Punkte. Siege,
   Unentschieden, Niederlagen und Tore kommen im Querformat und am Bildschirm dazu. */

.tabelle-rahmen {
    overflow: hidden;
}

.tabelle-rahmen + .tabelle-rahmen {
    margin-top: 1rem;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.tabelle caption {
    padding: 0.9rem 1rem 0.4rem;
    text-align: left;
}

.tabelle th,
.tabelle td {
    padding: 0.75rem 0.4rem;
    border-top: 1px solid var(--line);
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
}

.tabelle thead th {
    border-top: 0;
    color: var(--hg-blue);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tabelle abbr {
    text-decoration: none;
}

.tabelle th:first-child,
.tabelle td:first-child {
    width: 2.75rem;
    padding-left: 1rem;
    text-align: left;
}

.tabelle th:last-child,
.tabelle td:last-child {
    padding-right: 1rem;
}

.tabelle .tabelle-name {
    width: auto;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

.tabelle tbody .tabelle-name {
    font-weight: 500;
}

.tabelle-punkte {
    font-weight: 600;
}

.tabelle-breit {
    display: none;
}

/* Die eigene Mannschaft: Fläche, Strich am Rand und fette Schrift. */
.tabelle-hg {
    background: rgba(14, 85, 161, 0.08);
    box-shadow: inset 4px 0 0 var(--hg-blue);
}

.tabelle .tabelle-hg .tabelle-name,
.tabelle .tabelle-hg .tabelle-punkte {
    font-weight: 700;
}

/* ---------- Team ---------- */

.team {
    display: grid;
    gap: 1.5rem;
}

.team-bild {
    overflow: hidden;
}

.team-bild img {
    width: 100%;
}

.team-text {
    max-width: 60ch;
    margin-bottom: 1.25rem;
}

.trainer li {
    display: grid;
    gap: 0.1rem;
    padding-block: 0.8rem;
    border-top: 1px solid var(--line);
}

.trainer-name {
    font-weight: 600;
}

/* ---------- Beitrag ----------
   Titel, Titelbild und Text stehen in einer Spalte von höchstens 46rem an der Inhaltskante - breit
   genug für Bilder, schmal genug zum Lesen. Am Bildschirm steht rechts daneben eine Randspalte
   (siehe unten). Die Bausteine sind die aus ADR-008. */

.beitrag-haupt {
    max-width: 46rem;
}

.beitrag-rand {
    display: none;
}

.beitragstitel {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: clamp(2rem, 7.5vw, 3.25rem);
    line-height: 1.06;
    hyphens: auto;
    hyphenate-limit-chars: 14 6 6;
    text-wrap: balance;
}

.vorspann {
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 1.1875rem;
    line-height: 1.55;
}

.autor {
    margin-top: 1rem;
    color: var(--ink-soft);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.titelbild {
    margin: 0;
    overflow: hidden;
}

.titelbild img {
    width: 100%;
}

.bausteine {
    padding-block: 2rem var(--abstand);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.bausteine > * + * {
    margin-top: 1.35rem;
}

.bausteine p a {
    font-weight: 600;
}

/* Zwischenüberschrift mit dem Akzent-Strich des CI. */
.zwischentitel {
    position: relative;
    margin-top: 2.5rem;
    padding-left: 0.7em;
    font-family: var(--schrift-kopf);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.zwischentitel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.16em;
    width: 0.22em;
    height: 0.82em;
    background: var(--hg-blue);
}

/* Striche in HG-Blau statt der üblichen Punkte (CI-Handbuch). */
.aufzaehlung li {
    position: relative;
    padding-left: 1.6rem;
}

.aufzaehlung li + li {
    margin-top: 0.4rem;
}

.aufzaehlung li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.82em;
    width: 0.8rem;
    height: 2px;
    background: var(--hg-blue);
}

.aufzaehlung-nummeriert {
    counter-reset: punkt;
}

.aufzaehlung-nummeriert li {
    counter-increment: punkt;
}

.aufzaehlung-nummeriert li::before {
    content: counter(punkt) ".";
    top: 0;
    width: auto;
    height: auto;
    background: none;
    color: var(--hg-blue);
    font-weight: 600;
}

.zitat {
    margin-inline: 0;
    padding: 1.25rem 1.4rem 1.3rem;
    border-left: 4px solid var(--hg-yellow);
    background: var(--paper-2);
}

.zitat p {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.3125rem;
    line-height: 1.3;
}

.zitat footer {
    margin-top: 0.75rem;
}

.bild {
    margin-inline: 0;
}

.bild img {
    width: 100%;
    border-radius: var(--radius);
}

.bild figcaption {
    margin-top: 0.5rem;
    color: var(--ink-soft);
    font-size: 0.875rem;
    line-height: 1.45;
}

.bildnachweis {
    display: block;
    margin-top: 0.15rem;
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bildpaar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.bildpaar img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Galerie als Mosaik: Ab drei Fotos steht das erste groß, darunter Reihen gleicher Höhe, die sich immer
   ganz füllen. Damit kein Foto allein in der letzten Reihe zum Streifen wird, rücken je nach Anzahl
   die letzten Fotos zusammen (am Handy drei statt zwei, am Bildschirm zwei und zwei statt drei und eins). */
.galerie {
    --galerie-luft: 0.4rem;
    --galerie-reihe: clamp(6.5rem, 31vw, 9rem);
    display: flex;
    flex-wrap: wrap;
    gap: var(--galerie-luft);
}

.galerie li {
    position: relative;
    flex: 1 1 calc(50% - var(--galerie-luft));
    min-width: 0;
    height: var(--galerie-reihe);
}

.galerie .gross,
.galerie picture,
.galerie img {
    display: block;
    width: 100%;
    height: 100%;
}

.galerie img {
    object-fit: cover;
}

/* Ein einzelnes Foto und der Auftakt ab drei Fotos: volle Breite im Querformat. */
.galerie li:only-child,
.galerie li:first-child:nth-last-child(n + 3) {
    flex-basis: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
}

/* Zwei Fotos: nebeneinander, etwas höher als eine Reihe. */
.galerie li:first-child:nth-last-child(2),
.galerie li:first-child:nth-last-child(2) ~ li {
    height: auto;
    aspect-ratio: 4 / 3;
}

/* Handy, zwei je Reihe: Bliebe unter dem Auftakt eines übrig, stehen die letzten drei in einer Reihe. */
.galerie li:first-child:nth-last-child(2n + 4) ~ li:nth-last-child(-n + 3) {
    flex-basis: calc(33.333% - var(--galerie-luft));
}

/* Wie viele Fotos die Galerie hat - auf dem Auftakt, in der Art der Marken der Seite. */
.galerie-zahl {
    position: absolute;
    left: 0.6rem;
    bottom: 0.6rem;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius);
    background: var(--hg-navy);
    color: #fff;
    font-family: var(--schrift-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
    pointer-events: none;
}

.galerie-zahl::before {
    content: "";
    display: inline-block;
    width: 0.2rem;
    height: 0.75em;
    margin-right: 0.45rem;
    background: var(--hg-yellow);
    vertical-align: -0.05em;
}

.anhang {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    color: var(--ink);
    line-height: 1.35;
    text-decoration: none;
}

.anhang .marke {
    flex: none;
}

.anhang-titel {
    flex: 1;
    font-weight: 600;
}

.anhang-groesse {
    flex: none;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

.anhang:hover,
.video:hover {
    border-color: var(--line-strong);
}

.anhang:hover .anhang-titel,
.video:hover .video-titel {
    color: var(--hg-blue);
    text-decoration: underline;
}

/* Video als Verweis mit Vorschaubild - eingebettet wird nichts. */
.video {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
}

.video picture {
    position: relative;
    height: 100%;
}

.video img {
    width: 100%;
    height: 100%;
    min-height: 6.5rem;
    object-fit: cover;
}

/* Abspiel-Zeichen auf dem Vorschaubild. */
.video picture::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--hg-yellow) linear-gradient(var(--hg-navy), var(--hg-navy)) no-repeat 56% 50% / 0 0;
    transform: translate(-50%, -50%);
    clip-path: circle(50%);
}

.video picture::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    border-style: solid;
    border-width: 0.5rem 0 0.5rem 0.8rem;
    border-color: transparent transparent transparent var(--hg-navy);
    transform: translate(-35%, -50%);
}

.video-text {
    display: grid;
    align-content: center;
    gap: 0.25rem;
    padding: 1rem 1.15rem;
    line-height: 1.35;
}

.video-titel {
    font-weight: 600;
}

.video-hinweis {
    color: var(--ink-soft);
    font-size: 0.8125rem;
}

/* Spielbezug als Anzeigetafel: je Mannschaft eine Zeile, die Tore groß rechts. */
.spielbezug {
    padding-bottom: 1.1rem;
    line-height: 1.35;
}

/* Die Angabenzeile bleibt links vom Band mit dem Ausgang. */
.spielbezug > .zeile {
    padding-right: 8.5rem;
}

.spielbezug-stand {
    margin: 0.9rem 0 0;
}

.spielbezug-stand div,
.spielbezug-stand li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    padding-block: 0.6rem;
    border-top: 1px solid var(--tafel-linie);
    color: var(--tafel-leise);
}

.spielbezug-stand dt,
.spielbezug-name {
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.spielbezug-stand dd {
    margin: 0;
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Die HG: volle Farbe, fetter Name und der Akzent-Strich davor. */
.spielbezug-stand .spielbezug-hg {
    color: var(--tafel-text);
}

.spielbezug-hg dt,
.spielbezug-hg .spielbezug-name {
    font-weight: 700;
}

.spielbezug-hg dt::before,
.spielbezug-hg .spielbezug-name::before {
    content: "";
    display: inline-block;
    width: 0.22em;
    height: 0.9em;
    margin-right: 0.5em;
    vertical-align: -0.08em;
    background: var(--hg-yellow);
}

.spielbezug-hg dd {
    color: var(--hg-yellow);
}

.spielbezug-zusatz {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--tafel-linie);
    color: var(--tafel-leise);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.beitragsfuss {
    display: grid;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-size: 1rem;
}

.beitragsfuss .mehr {
    margin: 0.5rem 0 0;
}

.abschnitt-weitere {
    background: var(--paper-2);
}

.abschnitt-liste {
    padding-top: 0.5rem;
}

/* Weitere Beiträge in der Randspalte: kleines Bild, Titel, Datum. */
.randliste li + li {
    margin-top: 0.9rem;
}

.randliste a {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    color: var(--ink);
    text-decoration: none;
}

.randliste img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
}

.randliste-titel {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.3;
    hyphens: auto;
    hyphenate-limit-chars: 16 6 6;
    overflow-wrap: break-word;
}

.randliste a:hover .randliste-titel {
    color: var(--hg-blue);
    text-decoration: underline;
}

.randliste-datum {
    display: block;
    margin-top: 0.25rem;
    color: var(--ink-soft);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
}

/* ---------- Fotos größer anzeigen ----------
   Ein vergrößerbares Foto ist ein Verweis mit dem gewöhnlichen Zeiger. Beim Überfahren zoomt das
   Bild kurz hinein, wie die Kacheln der Startseite. Die Großansicht selbst legt das Skript an. */

.gross {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
}

.gross img {
    transition: transform 0.4s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .gross:hover img {
        transform: scale(1.03);
    }
}

.grossansicht {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 3.5rem 0.75rem 1rem;
    border: 0;
    background: rgba(11, 20, 36, 0.96);
    color: #fff;
}

.grossansicht[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    justify-items: center;
    gap: 0.75rem;
}

.grossansicht::backdrop {
    background: rgba(11, 20, 36, 0.96);
}

.grossansicht img {
    align-self: center;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: var(--radius);
    object-fit: contain;
}

.grossansicht-titel {
    max-width: 60ch;
    min-height: 1.4em;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
    white-space: pre-wrap;
    color: rgba(255, 255, 255, 0.85);
}

.grossansicht button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0 0 0.2rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: var(--schrift-text);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.grossansicht button:hover {
    background: var(--hg-yellow);
    color: var(--hg-navy);
}

.grossansicht-zu {
    top: 0.5rem;
    right: 0.5rem;
}

.grossansicht-vor {
    top: 50%;
    transform: translateY(-50%);
}

.grossansicht-zurueck {
    left: 0.5rem;
}

.grossansicht-weiter {
    right: 0.5rem;
}

/* Zeile, die als Ganzes ein Verweis ist: Der Verweis im Text spannt sich über die ganze Zeile. */
.zeile-verlinkt {
    position: relative;
}

.zeilenlink::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Was in der Zeile selbst bedienbar ist (die aufklappbare Halle), liegt über dem Verweis. */
.zeile-verlinkt .halle {
    position: relative;
    z-index: 1;
    justify-self: start;
    width: fit-content;
}

.zeile-verlinkt:hover {
    background: rgba(14, 85, 161, 0.05);
}

.tafel-heim .zeile-verlinkt:hover {
    background: rgba(255, 255, 255, 0.07);
}

.zeile-verlinkt:hover .zeilenlink {
    text-decoration: underline;
}

.zeile-verlinkt:has(.zeilenlink:focus-visible) {
    outline: 3px solid var(--hg-yellow);
    outline-offset: -3px;
}

.zeilenlink:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ---------- Termine: ein Kalenderblatt je Monat ---------- */

.agenda-monat + .agenda-monat {
    margin-top: 2rem;
}

/* Ein angesprungener Monat beginnt unter dem stehenden Balken. */
.agenda-monat {
    scroll-margin-top: calc(var(--balken) + 1.25rem);
}

/* Tafel in der Randspalte, etwa der nächste Heimspieltag. */
.rand-tafel {
    display: grid;
    justify-items: start;
    gap: 0.3rem;
    margin-bottom: 2rem;
    padding-bottom: 1.3rem;
    line-height: 1.4;
}

.rand-tafel-titel {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.1;
}

.agenda-kopf {
    margin-bottom: 0.6rem;
    font-family: var(--schrift-kopf);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agenda-liste {
    overflow: hidden;
}

.agenda-zeile {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    padding: 1rem 1.15rem 1.05rem 0;
    border-top: 1px solid var(--line);
}

.agenda-zeile:first-child {
    border-top: 0;
}

/* Das Datum steht als eigene Spalte mit Strich davor - blau, bei Heimspieltagen gelb. */
.agenda-datum {
    display: grid;
    gap: 0.15rem;
    padding-left: 1.15rem;
    border-left: 4px solid var(--hg-blue);
}

.agenda-heim .agenda-datum {
    border-left-color: var(--hg-yellow);
}

.agenda-wochentag {
    color: var(--hg-blue);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.agenda-tag {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.agenda-titel {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.agenda-titel a {
    color: inherit;
    text-decoration: none;
}

.agenda-titel a:hover {
    color: var(--hg-blue);
    text-decoration: underline;
}

.agenda-ort,
.agenda-zusatz {
    margin-top: 0.15rem;
    color: var(--ink-soft);
    font-size: 0.875rem;
    line-height: 1.45;
}

.agenda-marke {
    grid-column: 2;
    margin-top: 0.5rem;
}

.agenda-marke:empty {
    display: none;
}

.marke-blau {
    background: var(--hg-blue);
    color: #fff;
}

/* ---------- Unterseiten: Kacheln, Listen, Umschalter ---------- */

.titel-klein {
    font-size: clamp(1.625rem, 6vw, 2.25rem);
}

.seitenkopf .zeile a,
.plan-gegner a,
.naechstes-gegner a,
.letztes-gegner a,
.kachel-karte-titel a {
    color: inherit;
    text-decoration: none;
}

.seitenkopf .zeile a:hover,
.plan-gegner a:hover,
.naechstes-gegner a:hover,
.letztes-gegner a:hover,
.kachel-karte-titel a:hover {
    text-decoration: underline;
}

.seitenkopf-text {
    max-width: 44rem;
}

.plan-neben {
    color: var(--ink-soft);
    font-size: 0.875rem;
    line-height: 1.4;
}

.hinweistext {
    margin-bottom: 1rem;
    color: var(--ink-soft);
}

/* ---------- Trainingszeiten ----------
   Aufbau wie auf der bisherigen Seite: je Mannschaft eine Zeile. Am Handy ist jede Zeile eine
   Karte mit beschrifteten Angaben, am Bildschirm eine Tabelle. Senioren / Junioren ohne Skript. */

/* Umschalter mit eigener Adresse je Auswahl (Jugend / Senioren). */
.wahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.wahl a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 1rem;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}

.wahl a.aktiv {
    background: var(--hg-blue);
    border-color: var(--hg-blue);
    color: #fff;
}

.training-rahmen {
    overflow: hidden;
}

.training {
    display: block;
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.training thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.training tbody,
.training tr,
.training th,
.training td {
    display: block;
}

.training tr {
    padding: 1rem 1.15rem 1.1rem;
    border-top: 1px solid var(--line);
}

.training tr:first-child {
    border-top: 0;
}

.training th {
    margin-bottom: 0.4rem;
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.3125rem;
    line-height: 1.15;
    text-align: left;
}

.training th a {
    color: inherit;
    text-decoration: none;
}

.training th a:hover {
    color: var(--hg-blue);
    text-decoration: underline;
}

/* Am Handy steht vor jeder Angabe, was sie ist. Leere Angaben entfallen. */
.training td[data-feld] {
    display: inline-block;
    margin-right: 1rem;
    color: var(--ink-soft);
}

.training td[data-feld]::before {
    content: attr(data-feld) " ";
    color: var(--hg-blue);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.training td.training-leer {
    display: none;
}

.training-person:not(:last-child)::after {
    content: ", ";
}

/* Jahrgang und Liga unter dem Namen - nur am Bildschirm; am Handy stehen sie als beschriftete Angaben. */
.training-unter {
    display: none;
}

.training-zeiten {
    margin-top: 0.7rem;
}

.training-zeiten li {
    display: grid;
    grid-template-columns: 6.25rem minmax(0, 1fr);
    column-gap: 0.75rem;
    padding-block: 0.45rem;
    border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.training-tag {
    grid-row: span 2;
    color: var(--hg-blue);
    font-weight: 600;
}

.training-uhr {
    font-weight: 600;
}

.training-ort {
    color: var(--ink-soft);
    font-size: 0.875rem;
}

/* Die Halle klappt wie im Spielplan auf; in der Zeile der Trainingszeit ohne eigenen Abstand. */
.training-ort .halle summary {
    padding-block: 0;
}

.training-ort p.halle {
    margin: 0;
}

.kacheln {
    display: grid;
    gap: 0.75rem;
}

.kachel-karte {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    height: 100%;
    padding: 1.1rem 1.25rem 1.25rem;
    line-height: 1.45;
}

.kachel-karte-titel {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.3125rem;
    line-height: 1.15;
}

.kachel-karte .mehr,
.spiel-karte .mehr {
    margin: 0.5rem 0 0;
    justify-self: start;
}

.kachel-verweis {
    color: var(--ink);
    text-decoration: none;
}

.kachel-verweis span + span {
    color: var(--ink-soft);
}

.kachel-verweis:hover {
    border-color: var(--line-strong);
}

.kachel-verweis:hover .kachel-karte-titel {
    color: var(--hg-blue);
}

.zweispaltig {
    display: grid;
    gap: 1.5rem;
}

.fliesstext {
    font-size: 1.0625rem;
    line-height: 1.7;
}

.fliesstext > * + * {
    margin-top: 1.1rem;
}

.ansprache {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding-bottom: 1.4rem;
}

.ansprache-titel {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.1;
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    padding-inline: 1.1rem;
    border-radius: var(--radius);
    background: var(--hg-yellow);
    color: var(--hg-navy);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.knopf:hover {
    background: #fff;
}

.bausteine.bausteine-seite {
    padding-top: 0.5rem;
}

/* Freier Text als Abschnitt einer Seite (Historie, Schiedsrichter auf der Vereinsseite). */
.bausteine.bausteine-abschnitt {
    padding-block: 0;
}

.kachel-mail {
    overflow-wrap: anywhere;
}

.partner-werden {
    margin-top: 2rem;
}

/* ---------- Aktuelles: Archiv und Liste älterer Beiträge ---------- */

.aktuelles-raster {
    padding-bottom: var(--abstand);
}

.beitraege-haupt {
    margin-top: 0.5rem;
}

.aktuelles-aeltere {
    margin-top: 2.5rem;
}

.altliste {
    overflow: hidden;
}

.altliste li + li {
    border-top: 1px solid var(--line);
}

.altliste a {
    display: grid;
    gap: 0.2rem;
    padding: 0.95rem 1.15rem 1rem;
    color: var(--ink);
    text-decoration: none;
}

.altliste .zeile {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
}

.altliste-titel {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.1875rem;
    line-height: 1.2;
}

.altliste-kurz {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--ink-soft);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.altliste a:hover .altliste-titel {
    color: var(--hg-blue);
    text-decoration: underline;
}

/* Das Archiv steht am Handy unter den Beiträgen, am Bildschirm als Randspalte daneben. */
.archiv {
    display: block;
    margin-top: 2.5rem;
}

.archiv .zeile {
    margin-bottom: 0.6rem;
}

.archiv-liste a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    padding-left: 0.75rem;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.archiv-liste a span {
    color: var(--ink-soft);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
}

.archiv-liste ul a {
    padding-left: 1.5rem;
    font-weight: 400;
}

.archiv-liste a:hover,
.archiv-liste a.aktiv {
    color: var(--hg-blue);
}

.archiv-liste a.aktiv {
    box-shadow: inset 3px 0 0 var(--hg-yellow);
}

/* ---------- Karten mit Block: links ein farbiges Feld, rechts der Text ----------
   Dieselbe Form wie die Terminkarten der Startseite - für Stammvereine, Sporthallen und Vorstand. */

.blockkarten {
    display: grid;
    gap: 0.75rem;
}

.blockkarte {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
}

.blockkarte-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.9rem 0.35rem;
    background: linear-gradient(180deg, var(--hg-navy) 0%, var(--hg-blue) 100%);
    color: #fff;
    text-align: center;
}

.blockkarte-block-leise {
    background: var(--paper-2);
    color: var(--ink-soft);
    box-shadow: inset -1px 0 0 var(--line);
}

.blockkarte-gross {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.blockkarte-klein {
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.625rem;
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hg-yellow);
}

.blockkarte-block-leise .blockkarte-klein {
    color: var(--ink-soft);
}

.blockkarte-text {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.3rem;
    padding: 1rem 1.15rem 1.1rem;
    line-height: 1.4;
}

.blockkarte-text .zeile {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
}

.blockkarte-titel {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.15;
    hyphens: auto;
    hyphenate-limit-chars: 16 6 6;
}

.blockkarte-neben {
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.blockkarte .mehr {
    margin: 0.3rem 0 0;
}

.blockkarte-verweis .mehr {
    color: var(--hg-blue);
    text-decoration: underline;
    text-underline-offset: 0.4em;
}

.blockkarte-verweis:hover {
    border-color: var(--line-strong);
}

.blockkarte-verweis:hover .blockkarte-titel {
    color: var(--hg-blue);
}

/* Stammvereine: das Logo des Vereins im hellen Feld. */
.blockkarte-logo {
    grid-template-columns: 6.5rem minmax(0, 1fr);
}

.blockkarte-logo .blockkarte-block {
    padding: 0.75rem;
    background: var(--paper);
}

.blockkarte-logo img {
    width: 100%;
    height: auto;
    max-height: 5rem;
    object-fit: contain;
}

/* Vorstand: Karten im Hochformat - oben das Bild, darunter der Text. */
.portraits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.portrait {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.portrait-bild {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: linear-gradient(180deg, var(--hg-navy) 0%, var(--hg-blue) 100%);
}

.portrait-bild-leer {
    background: var(--paper-2);
}

.portrait-bild img {
    width: 46%;
    height: auto;
}

.portrait-text {
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 0.9rem 1rem 1.1rem;
    line-height: 1.4;
}

.portrait-text .zeile {
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
}

.portrait-text .blockkarte-titel {
    font-size: 1.125rem;
}

/* Text mit Randspalte, etwa die Eckdaten neben der Historie. */
.mit-rand {
    display: grid;
    gap: 1.5rem;
}

.eckdaten {
    align-self: start;
    padding-bottom: 0.6rem;
    line-height: 1.45;
}

.eckdaten li {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    column-gap: 0.75rem;
    padding-block: 0.8rem;
    border-top: 1px solid var(--tafel-linie);
    font-size: 0.9375rem;
}

.eckdaten ol {
    margin-top: 0.75rem;
}

.eckdaten-jahr {
    color: var(--hg-yellow);
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.1;
}

.blockkarte-mail {
    font-size: 0.8125rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Sporthallen: gleich hohe Karten, Hinweis und Route stehen unten. */
.hallen {
    display: grid;
    gap: 0.75rem;
}

.halle-karte {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    line-height: 1.4;
}

.halle-bild {
    background: var(--paper-2);
}

.halle-bild img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.halle-bild .gross {
    border-radius: 0;
}

.halle-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.25rem 1.15rem;
}

/* Ein paar Sätze der Redaktion zur Halle; Zeilenwechsel bleiben. */
.halle-hinweis {
    margin-top: 0.35rem;
    color: var(--ink-soft);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-line;
}

.halle-karte .zeile {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
}

.halle-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: auto;
    padding-top: 0.9rem;
}

.halle-fuss .mehr {
    margin: 0 0 0 auto;
}

/* Der Hinweis der Halle steht klein neben der Route. */
.halle-fuss .marke {
    padding: 0.1rem 0.35rem;
    font-size: 0.5rem;
    letter-spacing: 0.1em;
}

/* ---------- Seite eines Spiels ---------- */

.spielbezug-platz {
    display: block;
    margin-top: 0.15rem;
    color: var(--tafel-leise);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.spielbezug-hg .spielbezug-platz {
    padding-left: 0.72rem;
}

.spiel-verweise {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
}

.spiel-blaettern-stand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.spiel-blaettern-stand .ergebnis-tore {
    font-size: 1.375rem;
}

.spiel-blaettern-weiter .spiel-blaettern-stand {
    justify-content: flex-end;
}

.spielseite {
    display: grid;
    gap: 1rem;
    padding-bottom: 1.5rem;
}

.plan-gegner .marke {
    margin: 0;
}

.spiel-tafel .naechstes-termin {
    margin-bottom: 0.25rem;
}

.spiel-hinweis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-top: 0.5rem;
    color: var(--tafel-leise);
    font-size: 0.9375rem;
}

.spiel-rand {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.spiel-karte {
    display: grid;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem 1.25rem;
    line-height: 1.45;
}

.spiel-karte .zeile {
    margin-bottom: 0.25rem;
}

.spiel-karte-titel {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.3125rem;
    line-height: 1.15;
}

.spiel-karte .bereich-liste {
    grid-template-columns: minmax(0, 1fr);
}

.spiel-blaettern {
    display: grid;
    gap: 0.75rem;
    padding-bottom: var(--abstand);
}

.spiel-blaettern a {
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem 1.1rem 1rem;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.spiel-blaettern a:hover {
    border-color: var(--line-strong);
}

/* ---------- Entwurfshinweis ---------- */

.entwurf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: var(--abstand);
    padding: 1rem 1.25rem;
    border: 1px dashed #d9b100;
    border-left: 6px solid var(--hg-yellow);
    background: repeating-linear-gradient(-45deg, rgba(255, 208, 0, 0.16) 0 14px, rgba(255, 208, 0, 0.06) 14px 28px);
    font-size: 0.875rem;
}

.entwurf .marke {
    flex: none;
}

/* ---------- Fuß ---------- */

.fuss {
    padding-block: 3rem;
    border-top: 4px solid var(--hg-yellow);
    background: var(--hg-ink);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9375rem;
}

/* Das Wappen steht innerhalb der Inhaltsbreite an deren rechter Kante, ganz sichtbar und
   nicht hinter Text: am Handy unten neben "Rechtliches", am Tablet oben neben der Anschrift,
   am Bildschirm in einer eigenen Spalte. */
.fuss-spalten::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: var(--rand);
    width: 6.5rem;
    aspect-ratio: 601.58 / 719.36;
    background: url("hg-logo-weiss.svg") no-repeat center / contain;
    opacity: 0.1;
    pointer-events: none;
}

.fuss-spalten {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.25rem 1.25rem;
}

.fuss-kontakt {
    grid-column: 1 / -1;
}

.fuss-ruf {
    margin-bottom: 0.75rem;
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}

.fuss address {
    font-style: normal;
}

.fuss .zeile {
    white-space: nowrap;
    margin-bottom: 0.6rem;
    color: #fff;
}

.fuss .zeile::before {
    background: var(--hg-yellow);
}

.fuss a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.fuss a:hover {
    color: var(--hg-yellow);
    text-decoration: underline;
}

.fuss li a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* ---------- Hinweisseiten ---------- */

.hinweis {
    padding-block: calc(var(--wappen-ueberstand) + 2.5rem) 5rem;
}

.hinweis .titel {
    margin-bottom: 0.75rem;
}

/* ---------- Ab Tablet ---------- */

@media (min-width: 48rem) {
    :root {
        --rand: 2rem;
        --abstand: 3.25rem;
    }

    /* Die Bühne steht auf Weiß, der Abschnitt danach auf seinem eigenen Grund. Die Luft unter
       den Kacheln verhindert, dass sie an die Kante stoßen. */
    .buehne {
        padding-bottom: 2.5rem;
    }

    .buehne-raster {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        grid-template-rows: 1fr 1fr;
        gap: 1.25rem;
        max-width: var(--spalte);
        margin-inline: auto;
        padding: 0 var(--rand);
    }

    .kachel-gross {
        grid-column: 1;
        grid-row: 1 / 3;
        margin-inline: 0;
    }

    /* Gerahmt wie die Karten darunter: feine Linie, runde Ecken, weicher Schatten. */
    .kachel a,
    .kachel-gross a {
        position: relative;
        background: var(--hg-navy);
        /* Der dunkle Grund endet vor der Linie - sonst scheint er durch und die Linie wirkt dunkel. */
        background-clip: padding-box;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--schatten);
        color: #fff;
    }

    /* Die obere Reihe läuft ohne Rahmen in den Balken; gerahmt ist sie nur nach unten. */
    .kachel-gross a,
    .kachel:nth-child(2) a {
        border-top: 0;
        border-radius: 0 0 var(--radius) var(--radius);
    }

    /* Verlauf, damit die Schrift auf jedem Foto trägt. */
    .kachel a::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(8, 43, 84, 0) 35%, rgba(8, 43, 84, 0.6) 68%, rgba(8, 43, 84, 0.95) 100%);
    }

    .kachel picture,
    .kachel img {
        height: 100%;
    }

    /* Die kleinen Kacheln füllen ihre Zeile - das Foto bestimmt die Höhe nicht mit. */
    .kachel:not(.kachel-gross) picture {
        position: absolute;
        inset: 0;
    }

    .kachel:not(.kachel-gross) img {
        aspect-ratio: auto;
    }

    .kachel-text,
    .kachel-gross .kachel-text {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        padding: 1.1rem 1.25rem;
    }

    .kachel-gross .kachel-text {
        padding: 1.75rem 2rem;
    }

    .kachel .zeile {
        color: var(--hg-yellow);
        font-size: 0.6875rem;
        letter-spacing: 0.14em;
    }

    .kachel-gross .zeile {
        font-size: 0.75rem;
    }

    .kachel-titel {
        font-size: 1.3125rem;
    }

    .kachel-gross .kachel-titel {
        max-width: 30ch;
        font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    }

    .zeile,
    .mehr {
        font-size: 0.75rem;
    }

    .beitrag .zeile {
        font-size: 0.6875rem;
    }

    .abschnittskopf {
        margin-bottom: 2rem;
    }

    .mehr {
        order: 0;
        padding-bottom: 0.4rem;
    }

    .kopf-sozial {
        gap: 1.5rem;
    }

    .kopf-sozial span {
        display: inline;
    }

    .beitraege {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .beitrag {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .beitrag picture {
        height: auto;
    }

    .beitrag img {
        height: auto;
        min-height: 0;
        aspect-ratio: 3 / 2;
    }

    .beitrag-text {
        padding: 1.1rem 1.25rem 1.35rem;
    }

    .beitrag-titel {
        font-size: 1.25rem;
    }

    .beitrag-kurz {
        display: -webkit-box;
        margin-top: 0.55rem;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        font-size: 0.9375rem;
        line-height: 1.5;
        color: var(--ink-soft);
    }

    .bereich-liste {
        grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    }

    .instagram {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    .partner {
        grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
        gap: 1rem;
    }

    .fuss {
        padding-block: 4rem;
    }

    .fuss-spalten {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem 2rem;
    }

    .fuss-spalten::before {
        top: 0;
        bottom: auto;
        width: 6.5rem;
    }

}

/* ---------- Ab Bildschirm ---------- */

@media (min-width: 64rem) {
    :root {
        --balken: 60px;
        --wappen-luft: 0.75rem;
        --wappen-einzug: 2rem;
        --rand: 2.5rem;
        --abstand: 4rem;
    }

    .balken-marke {
        letter-spacing: 0.14em;
    }

    .tafeln {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }

    .tafel {
        padding: 1.5rem 1.5rem 0.5rem;
    }

    .beitraege {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bereich {
        display: grid;
        grid-template-columns: 10rem 1fr;
        align-items: start;
        column-gap: 1.5rem;
    }

    .bereich + .bereich {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--line);
    }

    .bereich-name {
        margin: 0;
        padding-top: 0.8rem;
    }

    .termine {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .fuss-spalten {
        grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) 9rem;
        gap: 2rem;
    }

    .fuss-kontakt {
        grid-column: auto;
    }

    .fuss-spalten::before {
        top: 50%;
        width: 9rem;
        transform: translateY(-50%);
    }
}

/* ---------- Menü in der Leiste, sobald es neben dem Wappen Platz hat ---------- */

@media (min-width: 72rem) {
    .menue {
        display: none;
    }

    .menue-breit {
        display: flex;
        gap: 2.25rem;
    }

    .menue-breit a {
        display: flex;
        align-items: center;
        height: var(--balken);
        color: #fff;
        font-family: var(--schrift-mono);
        font-weight: 500;
        font-size: 0.8125rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        text-decoration: none;
        box-shadow: inset 0 -4px 0 transparent;
    }

    .menue-breit a:hover {
        box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.4);
    }

    /* Der Punkt des Bereichs, der gerade zu sehen ist. */
    .menue-breit a.aktiv {
        color: var(--hg-yellow);
        box-shadow: inset 0 -4px 0 var(--hg-yellow);
    }
}

/* ---------- Mannschaftsseite ab Querformat, Tablet und Bildschirm ---------- */

@media (min-width: 40rem) {
    .tabelle-breit {
        display: table-cell;
    }

    .tabelle th,
    .tabelle td {
        padding-inline: 0.6rem;
    }

    .plan-spiel {
        grid-template-columns: 6rem minmax(0, 1fr) auto;
    }
}

@media (min-width: 48rem) {
    .seitenkopf {
        padding-bottom: 1.5rem;
    }

    .ueberblick-rahmen {
        padding-block: 2rem 0.5rem;
    }

    .ueberblick {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .naechstes,
    .letztes {
        padding: 1.5rem 1.5rem 1.35rem;
    }

    .reiter-liste {
        gap: 2rem;
    }

    .reiter a {
        font-size: 0.75rem;
        letter-spacing: 0.14em;
    }

    .plan-spiel {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 64rem) {
    .team {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
}

/* ---------- Beitrag ab Tablet ---------- */

@media (min-width: 48rem) {
    .bausteine {
        padding-top: 2.75rem;
        font-size: 1.125rem;
    }

    .vorspann {
        font-size: 1.3125rem;
    }

    .galerie {
        --galerie-luft: 0.5rem;
        --galerie-reihe: 10.5rem;
    }

    /* Bildschirm, drei je Reihe. Die Regel fürs Handy gilt hier nicht mehr. */
    .galerie li,
    .galerie li:first-child:nth-last-child(2n + 4) ~ li:nth-last-child(-n + 3) {
        flex-basis: calc(33.333% - var(--galerie-luft));
    }

    .galerie li:only-child,
    .galerie li:first-child:nth-last-child(n + 3) {
        flex-basis: 100%;
        aspect-ratio: 16 / 9;
    }

    .galerie li:first-child:nth-last-child(2),
    .galerie li:first-child:nth-last-child(2) ~ li {
        flex-basis: calc(50% - var(--galerie-luft));
    }

    /* Bliebe unter dem Auftakt eines übrig, stehen die letzten vier zu zweit und etwas höher;
       bleiben zwei übrig, teilen sie sich die Reihe und sind ebenfalls höher. */
    .galerie li:first-child:nth-last-child(3n + 5) ~ li:nth-last-child(-n + 4),
    .galerie li:first-child:nth-last-child(3n + 3) ~ li:nth-last-child(-n + 2) {
        flex-basis: calc(50% - var(--galerie-luft));
        height: 14rem;
    }

    /* Großansicht am Bildschirm: ein Fenster mit Rand statt des ganzen Bildschirms - die Seite bleibt dahinter zu ahnen. */
    .grossansicht {
        width: min(calc(100vw - 6rem), 90rem);
        max-width: none;
        height: calc(100dvh - 5rem);
        max-height: none;
        margin: auto;
        padding: 1.25rem 4.5rem 1rem;
        border-radius: calc(var(--radius) * 2);
        background: var(--hg-ink);
        box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
    }

    .grossansicht::backdrop {
        background: rgba(11, 20, 36, 0.78);
    }

    .grossansicht-zu {
        top: 0.75rem;
        right: 0.75rem;
    }

    .grossansicht-zurueck {
        left: 0.75rem;
    }

    .grossansicht-weiter {
        right: 0.75rem;
    }

    .zitat {
        padding: 1.6rem 1.9rem;
    }

    .zitat p {
        font-size: 1.5rem;
    }

}

/* ---------- Beitrag am Bildschirm: Text links an der Inhaltskante, Randspalte rechts ---------- */

@media (min-width: 64rem) {
    .beitragsraster {
        display: grid;
        grid-template-columns: minmax(0, 46rem) minmax(16rem, 19rem);
        justify-content: space-between;
        column-gap: 3rem;
        align-items: start;
    }

    /* Die Randspalte beginnt auf Höhe des Titels und bleibt beim Lesen unter dem Balken stehen. */
    .beitrag-rand {
        position: sticky;
        top: calc(var(--balken) + 1.5rem);
        display: block;
        margin-top: calc(var(--wappen-ueberstand) + 1.25rem);
        padding-left: 2rem;
        border-left: 1px solid var(--line);
    }

    .beitrag-rand .zeile {
        margin-bottom: 0.75rem;
    }

    .beitrag-rand .bereich-liste {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 2rem;
    }

    .beitrag-rand .mehr {
        display: inline-block;
        margin-top: 1.25rem;
    }

    /* Mannschaft und weitere Beiträge stehen in der Randspalte - unter dem Text entfallen sie. */
    .beitragsfuss,
    .abschnitt-weitere {
        display: none;
    }
}

/* ---------- Unterseiten und Spielseite ab Tablet und Bildschirm ---------- */

@media (min-width: 48rem) {
    .kacheln {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .spiel-blaettern {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .spiel-blaettern-weiter {
        grid-column: 2;
        text-align: right;
    }
}

@media (min-width: 64rem) {
    .kacheln {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .zweispaltig {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }

    .spielseite {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 1.25rem;
        align-items: start;
    }

    .spiel-tafel {
        padding: 1.75rem 1.75rem 1.5rem;
    }
}

/* ---------- Trainingszeiten am Bildschirm: Tabelle (darunter Karten) ---------- */

@media (min-width: 72rem) {
    .training {
        display: table;
    }

    .training thead {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        clip-path: none;
    }

    .training tbody {
        display: table-row-group;
    }

    .training tr {
        display: table-row;
        padding: 0;
    }

    .training th,
    .training td,
    .training td[data-feld],
    .training td.training-leer {
        display: table-cell;
        margin: 0;
        padding: 0.9rem 1rem;
        border-top: 1px solid var(--line);
        vertical-align: top;
        text-align: left;
    }

    .training thead th {
        border-top: 0;
        color: var(--hg-blue);
        font-family: var(--schrift-mono);
        font-weight: 500;
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .training tbody th {
        font-size: 1.1875rem;
        white-space: nowrap;
    }

    /* Liga und Trainer dürfen umbrechen: Hat eine Mannschaft viele Trainer, schöbe eine einzeilige Zelle
       die Spalte mit den Zeiten sonst rechts aus dem Rahmen. Nur der Jahrgang bleibt in einer Zeile. */
    .training td[data-feld] {
        color: var(--ink);
    }

    .training td[data-feld].training-karte {
        display: none;
    }

    .training-person {
        display: block;
        white-space: nowrap;
    }

    .training-person:not(:last-child)::after {
        content: none;
    }

    .training-unter {
        display: block;
        max-width: 20rem;
        margin-top: 0.2rem;
        color: var(--ink-soft);
        font-family: var(--schrift-text, inherit);
        font-weight: 400;
        font-size: 0.875rem;
        line-height: 1.35;
        white-space: normal;
    }

    .training td[data-feld="Trainer"] {
        max-width: 16rem;
    }

    .training td[data-feld]::before {
        content: none;
    }

    .training td.training-leer {
        color: var(--ink-soft);
    }

    .training tbody tr:nth-child(even) {
        background: var(--paper-2);
    }

    .training-zeiten {
        width: 46%;
    }

    .training-zeiten li {
        grid-template-columns: 6.5rem 9.5rem minmax(0, 1fr);
        padding-block: 0.15rem;
        border: 0;
    }

    .training-tag {
        grid-row: auto;
    }

    .training-ort {
        font-size: inherit;
    }

    .training-ort .halle summary {
        font-size: inherit;
    }
}

/* ---------- Termine ab Tablet: Marke rechts in der Zeile ---------- */

@media (min-width: 48rem) {
    .agenda-zeile {
        grid-template-columns: 7.5rem minmax(0, 1fr) auto;
        column-gap: 1.5rem;
        padding-right: 1.5rem;
    }

    .agenda-datum {
        padding-left: 1.5rem;
    }

    .agenda-tag {
        font-size: 1.75rem;
    }

    .agenda-marke {
        grid-column: 3;
        margin-top: 0.15rem;
    }
}

@media (min-width: 64rem) {
    .kacheln-drei {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Aktuelles ab Tablet und Bildschirm ---------- */

@media (min-width: 48rem) {
    .beitraege-haupt {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .altliste a {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 64rem) {
    .aktuelles-raster {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 17rem);
    }

    .beitraege-haupt {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .archiv {
        margin-top: calc(var(--wappen-ueberstand) + 1.25rem);
    }
}

@media (min-width: 48rem) {
    .blockkarten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 72rem) {
    .blockkarten {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .blockkarten-drei {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Vier Karten nebeneinander sind schmal - der Block steht dann über dem Text. */
    .blockkarten:not(.blockkarten-drei) .blockkarte {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 4.75rem 1fr;
    }

    .blockkarten:not(.blockkarten-drei) .blockkarte-block {
        flex-direction: row;
        gap: 0.6rem;
    }

    .blockkarten:not(.blockkarten-drei) .blockkarte-text {
        align-content: start;
    }
}

@media (min-width: 48rem) {
    .hallen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 80rem) {
    .hallen {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 48rem) {
    .portraits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

@media (min-width: 64rem) {
    .mit-rand {
        grid-template-columns: minmax(0, 46rem) minmax(16rem, 19rem);
        justify-content: space-between;
        gap: 3rem;
    }
}

/* ---------- Nachschärfungen aus der Durchsicht aller Seiten (2026-10-08) ---------- */

.fest {
    white-space: nowrap;
}

/* Die Zeichen der sozialen Kanäle sind in voller Höhe der weißen Zone antippbar. */
.kopf-sozial li {
    display: flex;
    align-self: stretch;
}

.balken-marke {
    height: 100%;
}

/* Erstes Element eines freien Textes beginnt ohne eigenen Abstand. */
.bausteine > :first-child {
    margin-top: 0;
}

/* Kleine Verweise bekommen eine größere Tippfläche, ohne dass sich der Satz ändert. */
.mehr,
.seitenkopf .zeile a,
.naechstes-gegner a,
.letztes-gegner a,
.training th a,
.trainer a,
.blockkarte-mail,
.fuss address a {
    position: relative;
}

.mehr::after,
.seitenkopf .zeile a::after,
.naechstes-gegner a::after,
.letztes-gegner a::after,
.training th a::after,
.trainer a::after,
.blockkarte-mail::after,
.fuss address a::after,
.halle a::after {
    content: "";
    position: absolute;
    inset: -0.8rem -0.4rem;
}

.halle summary::before {
    content: "";
    position: absolute;
    inset: -0.45rem -0.4rem;
}

/* Handy-Menü: Die Liste scrollt unter dem Kreuz. Der Punkt der aktuellen Seite trägt einen Strich. */
.menue-liste > ul {
    flex: 1;
    min-height: 0;
    padding: 0 var(--rand) 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.menue-liste > ul > li > a.aktiv,
.menue .menue-faecher summary.aktiv {
    padding-left: 0.75rem;
    box-shadow: inset 3px 0 0 var(--hg-yellow);
}

/* Marke neben einem Namen ("Dieses Spiel") bricht sauber in die nächste Zeile. */
.plan-gegner:has(.marke) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.5rem;
}

/* Abgesagtes Spiel: Der Termin ist durchgestrichen, die Marke hebt sich von der Tafel ab. */
.spiel-abgesagt .naechstes-termin {
    opacity: 0.65;
    text-decoration: line-through;
}

.tafel-heim .marke-absage {
    background: #fff;
    color: var(--ink);
}

/* Unbesetztes Amt: derselbe Platzhalter, nur blass. */
.portrait-bild-leer img {
    filter: brightness(0);
    opacity: 0.12;
}

.portrait-text .blockkarte-titel {
    hyphens: manual;
}

.hinweis-ziele {
    max-width: 40rem;
    margin-top: 1.75rem;
}

@media (max-width: 23.99rem) {
    .plan-gegner {
        font-size: 1.125rem;
    }
}

@media (max-width: 29.99rem) {
    /* Gespielte Spiele: Das Ergebnis steht unter dem Gegner statt daneben - der Name hat die Breite. */
    .plan-spiel:has(.ergebnis-tore) {
        grid-template-columns: 4.75rem minmax(0, 1fr);
    }

    .plan-spiel:has(.ergebnis-tore) .plan-stand {
        grid-column: 2;
        margin-top: 0.45rem;
    }

    .plan-weiter {
        width: 1.25rem;
        margin-right: -0.25rem;
    }
}

@media (max-width: 47.99rem) {
    /* Beitragskarten am Handy: gleich hoch, das Bild annähernd quadratisch. */
    .beitrag-titel {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .beitrag .zeile {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Reiter: Der Auslauf am rechten Rand zeigt, dass es weitergeht. */
    .reiter-liste {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.25rem), transparent);
    }

    .reiter-liste::after {
        content: "";
        flex: none;
        width: 1.5rem;
    }

    /* Großansicht: Blättern unter dem Foto statt darauf. */
    .grossansicht {
        padding-bottom: 4.5rem;
    }

    .grossansicht-vor {
        top: auto;
        bottom: 0.75rem;
        transform: none;
    }
}

@media (min-width: 48rem) {
    .kopf-sozial a {
        min-width: 0;
    }

    /* Bühne: Die kleinen Kacheln sind hoch genug für Zeile und Titel, der Verlauf trägt die Schrift
       auch auf hellen Fotos. */
    .buehne-raster {
        grid-template-rows: repeat(2, minmax(11.5rem, 1fr));
    }

    .kachel:not(.kachel-gross) a::after {
        background: linear-gradient(180deg, rgba(8, 43, 84, 0.1) 0%, rgba(8, 43, 84, 0.72) 50%, rgba(8, 43, 84, 0.97) 100%);
    }

    .kachel:not(.kachel-gross) .kachel-titel {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
    .kachel:not(.kachel-gross) .kachel-titel {
        font-size: 1.125rem;
    }

    /* Spiele am Tablet: der Heimspieltag über die volle Breite, die hellen Tafeln nebeneinander. */
    .tafeln {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .tafeln:not(.tafeln-zwei-heim) > .tafel-heim:has(~ .tafel:not(.tafel-heim)) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 48rem) and (max-width: 71.99rem) {
    /* Stammvereine: drei nebeneinander, das Logo über dem Text. */
    .blockkarten-drei {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blockkarten-drei .blockkarte-logo {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 6.5rem 1fr;
    }

    .blockkarten-drei .blockkarte-block-leise {
        box-shadow: inset 0 -1px 0 var(--line);
    }

    .blockkarten-drei .blockkarte-text {
        align-content: start;
    }
}

@media (min-width: 64rem) {
    .portraits {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Ist die Randspalte länger als der Text, stößt sie nicht an das, was folgt. */
    .beitrag-rand {
        margin-bottom: var(--abstand);
    }
}

@media (min-width: 80rem) {
    .beitraege-haupt {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Frühere Saisons und Seite eines Termins (2026-10-08) ---------- */

/* Dezenter Verweis unter der Liste der Mannschaften. */
.saisonarchiv {
    margin-top: 1.25rem;
    font-size: 0.875rem;
}

.saisonarchiv a,
.menue-archiv a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--ink-soft);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.2em;
}

.saisonarchiv a:hover,
.menue-archiv a:hover {
    color: var(--hg-blue);
    text-decoration-color: currentColor;
}

.menue .menue-archiv a {
    height: auto;
    border: 0;
    font-family: var(--schrift-text);
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
}

.menue-archiv {
    margin-top: 0.35rem;
}

/* Abgeschlossene Saison: ein Satz statt der Tafel mit dem nächsten Spiel. */
.saison-hinweis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.5rem;
    margin-top: var(--abstand);
    padding: 0.9rem 1.15rem;
    border-left: 4px solid var(--hg-yellow);
    background: var(--paper);
    color: var(--ink-soft);
}

.saison-hinweis span {
    color: var(--ink);
    font-weight: 600;
}

/* Seite eines Termins: Wann und Wo auf der blauen Tafel, daneben der Weg zur Anmeldung. */
.termin-tafel {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;
    padding: 1.15rem 1.25rem 1.25rem;
}

.termin-angaben {
    display: grid;
    gap: 0.9rem;
}

.termin-angaben dd {
    margin: 0.15rem 0 0;
    font-family: var(--schrift-kopf);
    font-size: 1.25rem;
    line-height: 1.25;
}

.termin-tafel .knopf {
    margin-top: 0;
}

@media (min-width: 40rem) {
    .termin-tafel {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .termin-angaben {
        grid-template-columns: repeat(2, minmax(0, auto));
        justify-content: start;
        column-gap: 2.5rem;
    }
}

.termin-fuss {
    margin-top: 1.5rem;
}

/* ---------- Seiten "nicht gefunden" und "Fehler" ---------- */

.fehlseite {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--hg-navy) 0%, var(--hg-blue) 100%);
    color: #fff;
}

/* Das Wappen steht groß und blass rechts im Grund, wie auf der Fläche der Spiele. */
.fehlseite-wappen {
    position: absolute;
    right: -4rem;
    bottom: -3rem;
    width: min(70vw, 30rem);
    height: auto;
    opacity: 0.08;
    pointer-events: none;
}

.fehlseite-innen {
    position: relative;
    display: grid;
    gap: 1.5rem;
    padding-block: calc(var(--wappen-ueberstand) + 2.5rem) 4rem;
}

/* Die Nummer trägt die Seite: groß, gelb, mit dem Balken darunter. */
.fehlseite-nummer {
    justify-self: start;
    padding-bottom: 0.08em;
    border-bottom: 0.09em solid var(--hg-yellow);
    color: var(--hg-yellow);
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: clamp(6rem, 34vw, 15rem);
    line-height: 0.85;
    letter-spacing: -0.02em;
}

.fehlseite .zeile {
    color: rgba(255, 255, 255, 0.8);
}

.fehlseite .titel {
    margin-block: 0.25rem 0.75rem;
    color: #fff;
}

.fehlseite-satz {
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.fehlseite-ziele {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.fehlseite-ziele li:first-child {
    flex-basis: 100%;
}

.fehlseite-ziele .knopf {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.fehlseite-ziele a:not(.knopf) {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-inline: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}

.fehlseite-ziele a:not(.knopf):hover {
    border-color: var(--hg-yellow);
    color: var(--hg-yellow);
}

@media (min-width: 64rem) {
    .fehlseite-innen {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 4rem;
        min-height: 34rem;
        padding-block: calc(var(--wappen-ueberstand) + 3rem) 5rem;
    }
}

/* ---------- Fehlende Vorlagen: Stand, Wettbewerbe, Kader, Bausteine (2026-10-08) ---------- */

/* Veralteter Stand: Die Zeile fällt auf, statt alte Daten als frisch auszugeben. */
.stand-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    padding: 0.7rem 0.9rem;
    border-left: 4px solid var(--hg-yellow);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.5;
}

.tafel-heim .stand-alt,
.spiele-flaeche .stand-alt {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Mehrere Wettbewerbe: Die Auswahl blendet die übrigen Tabellen aus. */
.tabellen .plan-wahl:nth-of-type(1):checked ~ .tabelle-rahmen:not(:nth-of-type(1)),
.tabellen .plan-wahl:nth-of-type(2):checked ~ .tabelle-rahmen:not(:nth-of-type(2)),
.tabellen .plan-wahl:nth-of-type(3):checked ~ .tabelle-rahmen:not(:nth-of-type(3)),
.tabellen .plan-wahl:nth-of-type(4):checked ~ .tabelle-rahmen:not(:nth-of-type(4)) {
    display: none;
}

/* Kader: Nummer, Name, Position - am Handy eine Spalte, ab Tablet zwei, am Bildschirm drei. */
.kader-kopf {
    margin: 2rem 0 0.6rem;
}

.kader {
    display: grid;
    padding: 0.25rem 1.15rem;
}

.kader li {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: baseline;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--line);
}

.kader-nummer {
    color: var(--hg-blue);
    font-family: var(--schrift-kopf);
    font-size: 1.25rem;
    line-height: 1;
    text-align: right;
}

.kader-name {
    font-weight: 600;
}

.kader-position {
    grid-column: 2;
    color: var(--ink-soft);
    font-size: 0.875rem;
}

@media (min-width: 40rem) {
    .kader {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }
}

@media (min-width: 64rem) {
    .kader {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Aufklappbare Listen im Spielbetrieb: alle weiteren Spiele, frühere Ergebnisse. */
.plan-spaeter {
    margin-top: 1.25rem;
}

.plan-spaeter[open] > summary {
    margin-bottom: 1rem;
}

/* Bausteine: Trennlinie und Nachweis unter dem Titelbild. */
.trennlinie {
    width: 4.5rem;
    height: 4px;
    margin: 2.25rem 0;
    border: 0;
    background: var(--hg-yellow);
}

.titelbild figcaption {
    padding: 0.5rem 0.9rem 0.6rem;
    color: var(--ink-soft);
    font-size: 0.8125rem;
}

/* Nachschärfung nach der Durchsicht der neuen Ansichten. */
.stand-alt {
    justify-content: flex-start;
    font-family: var(--schrift-text);
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

.saison-hinweis .mehr {
    flex: none;
    margin: 0;
}

.saison-hinweis span {
    margin-right: 0.5rem;
}

.termin-tafel {
    margin-bottom: 1.5rem;
}

/* Wettbewerb eines Spiels, wenn die Mannschaft in mehreren spielt: leise neben "Heim" / "Auswärts". */
.plan-wettbewerb {
    color: var(--ink-soft);
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Kader mit Fotos: Karten im Hochformat, die Trikotnummer steht auf dem Bild. */
.kader-fotos .portrait-bild {
    position: relative;
    aspect-ratio: 4 / 5;
}

.kader-foto picture,
.kader-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kader-foto-nummer {
    position: absolute;
    left: 0;
    bottom: 0;
    min-width: 2.25rem;
    padding: 0.3rem 0.5rem 0.2rem;
    background: var(--hg-yellow);
    color: var(--hg-navy);
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
    text-align: center;
}

.kader-fotos .portrait-text {
    padding: 0.7rem 0.8rem 0.9rem;
}

.kader-fotos .portrait-text .blockkarte-titel {
    font-size: 1rem;
}

@media (min-width: 48rem) {
    .portraits.kader-fotos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 80rem) {
    .portraits.kader-fotos {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.plan-wettbewerb {
    letter-spacing: 0.06em;
}

/* Nächstes und letztes Spiel auf der Mannschaftsseite: Die ganze Karte führt zum Spiel, nur die
   aufklappbare Halle bleibt für sich bedienbar. */
.karte-verlinkt {
    position: relative;
}

.karte-verlinkt .zeilenlink {
    position: static;
}

.karte-verlinkt .zeilenlink::after {
    inset: 0;
}

.karte-verlinkt .halle {
    position: relative;
    z-index: 1;
    width: fit-content;
}

.karte-verlinkt:hover .zeilenlink {
    text-decoration: underline;
}

.karte-verlinkt:has(.zeilenlink:focus-visible) {
    outline: 3px solid var(--hg-yellow);
    outline-offset: 2px;
}

/* Termine der Startseite: breitere Datumsspalte, der Monat groß unter dem Tag, das Jahr klein darunter. */
.termin {
    grid-template-columns: 7.5rem minmax(0, 1fr);
}

.termin-datum {
    gap: 0.2rem;
    padding: 1.1rem 0.5rem;
}

.termin-tag {
    font-size: 1.75rem;
}

.termin-monat {
    font-family: var(--schrift-kopf);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.05;
    letter-spacing: 0.04em;
}

.termin-jahr {
    margin-top: 0.2rem;
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.8);
}

/* Startseite mit zwei Heimspieltagen: Am Tablet stehen die beiden nebeneinander, die Tafel danach
   über die volle Breite. Am Bildschirm sind die drei Spalten dann gleich breit. */
.tafeln-mehr {
    margin-top: 1rem;
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
    .tafeln.tafeln-zwei-heim > .tafel-heim {
        grid-column: auto;
    }

    .tafeln.tafeln-zwei-heim > .tafel:not(.tafel-heim) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 64rem) {
    .tafeln.tafeln-zwei-heim {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Startseite mit vielen Auswärtsspielen (Regel in Core: Spieltafeln.AuswaertsBreit): Die Auswärtstafel
   steht zweispaltig. Am Bildschirm rücken die Heimspieltage dafür untereinander in die erste Spalte,
   am Tablet läuft die Tafel ohnehin über die volle Breite. */
@media (min-width: 48rem) {
    .tafeln-auswaerts-breit .tafel-auswaerts .spiele {
        columns: 2;
        column-gap: 2rem;
    }

    .tafeln-auswaerts-breit .tafel-auswaerts .spiel {
        break-inside: avoid;
    }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
    /* Auch neben nur einem Heimspieltag: jede Tafel über die volle Breite. */
    .tafeln.tafeln-auswaerts-breit > .tafel {
        grid-column: 1 / -1;
    }

    .tafeln.tafeln-auswaerts-breit.tafeln-zwei-heim > .tafel-heim {
        grid-column: auto;
    }
}

@media (min-width: 64rem) {
    .tafeln.tafeln-auswaerts-breit {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        /* Die erste Zeile ist so hoch wie der erste Heimspieltag, der Rest fällt der zweiten zu -
           so bleibt der Abstand zwischen den Heimspieltagen der übliche. */
        grid-template-rows: auto 1fr;
    }

    .tafeln.tafeln-auswaerts-breit > .tafel-heim {
        grid-column: 1;
    }

    .tafeln.tafeln-auswaerts-breit > .tafel-auswaerts {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

/* Heimspieltage im Spielbetrieb: Die Tafeln sind sehr verschieden hoch. Statt in Zeilen mit Lücken
   stehen sie in Spalten und schließen in jeder Spalte direkt aneinander an. Die Reihenfolge läuft
   dadurch erst nach unten, dann in die nächste Spalte. */
@media (min-width: 48rem) {
    .tafeln.tafeln-dicht {
        display: block;
        columns: 2;
        column-gap: 1.25rem;
    }

    .tafeln.tafeln-dicht > .tafel {
        break-inside: avoid;
        margin-bottom: 1.25rem;
    }
}

@media (min-width: 64rem) {
    .tafeln.tafeln-dicht {
        columns: 3;
    }
}

/* ---------- Spielbetrieb: Monate zum Anspringen ----------
   Am Handy und Tablet eine Leiste über der Liste, die sich seitlich schieben lässt; am Bildschirm
   eine Randspalte rechts, die beim Scrollen unter Balken und Reitern stehen bleibt. */
.monatsleiste {
    margin-bottom: 1.25rem;
}

.monatsleiste .zeile {
    margin-bottom: 0.5rem;
}

.monatsleiste-liste {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.monatsleiste-liste::-webkit-scrollbar {
    display: none;
}

/* Dass es rechts weitergeht, zeigt der auslaufende Rand. Mit der Maus (schmales Fenster am Rechner)
   gibt es zusätzlich einen schmalen Rollbalken - Wischen geht dort nicht. */
@media (max-width: 63.99rem) {
    .monatsleiste-liste {
        padding-right: 2.5rem;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }
}

@media (max-width: 63.99rem) and (hover: hover) and (pointer: fine) {
    .monatsleiste-liste {
        padding-bottom: 0.5rem;
        scrollbar-width: thin;
        scrollbar-color: var(--line) transparent;
    }

    .monatsleiste-liste::-webkit-scrollbar {
        display: block;
        height: 6px;
    }

    .monatsleiste-liste::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: var(--line);
    }
}

.monatsleiste-liste a {
    gap: 0.6rem;
    min-height: 2.5rem;
    padding-inline: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--paper);
    white-space: nowrap;
}

.monatsziel {
    scroll-margin-top: calc(var(--balken) + 4.5rem);
}

@media (min-width: 64rem) {
    .monatsraster {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(13rem, 15rem);
        column-gap: 2.5rem;
        align-items: start;
    }

    .monatsraster > .monatsleiste {
        position: sticky;
        top: calc(var(--balken) + 4.5rem);
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
        padding-left: 1.5rem;
        border-left: 1px solid var(--line);
    }

    .monatsraster > .monatsleiste-inhalt {
        grid-column: 1;
        grid-row: 1;
    }

    .monatsraster .monatsleiste-liste {
        display: block;
        overflow: visible;
        padding-bottom: 0;
    }

    .monatsraster .monatsleiste-liste a {
        min-height: 2.75rem;
        padding-inline: 0.75rem 0;
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        background: none;
    }

    /* Neben der Randspalte ist Platz für zwei Tafeln nebeneinander. */
    .monatsraster .tafeln.tafeln-dicht {
        columns: 2;
    }
}

/* Blickpunkt eines Bildes aus der Redaktion: Wo ein Bild beschnitten wird, bleibt dieses Feld sichtbar. Als Klassen,
   weil die Seite keinen Stil am Element trägt. Die Mitte ist die Vorgabe des Browsers. */
img.blick-lo { object-position: 0% 0%; }
img.blick-mo { object-position: 50% 0%; }
img.blick-ro { object-position: 100% 0%; }
img.blick-lm { object-position: 0% 50%; }
img.blick-rm { object-position: 100% 50%; }
img.blick-lu { object-position: 0% 100%; }
img.blick-mu { object-position: 50% 100%; }
img.blick-ru { object-position: 100% 100%; }

/* Verweise in den eigenen Kalender: eine ruhige Zeile aus Titel und ein, zwei Verweisen in der Schrift der übrigen
   kleinen Verweise. Am Handy bricht sie um; die Verweise bleiben gut zu treffen. */
.kalenderverweise {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.25rem;
    margin: 0 0 1.25rem;
    font-family: var(--schrift-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.kalenderverweise-titel {
    color: var(--ink-leise, inherit);
    opacity: 0.75;
}

.kalenderverweise a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    text-underline-offset: 0.4em;
}

/* Adresse zum Kopieren: zugeklappt ein dritter Verweis in der Zeile, aufgeklappt eine eigene Zeile mit Feld und
   Knopf. Farben kommen vom Umfeld - die Zeile steht auf hellem wie auf dunklem Grund. */
.kalenderadresse summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    cursor: pointer;
    color: var(--hg-blue);
    text-decoration: underline;
    text-underline-offset: 0.4em;
    list-style: none;
}

.kalenderadresse summary::-webkit-details-marker {
    display: none;
}

.kalenderadresse[open] {
    flex-basis: 100%;
}

.kalenderadresse-zeile {
    display: flex;
    gap: 0.5rem;
    max-width: 38rem;
}

.kalenderadresse-zeile input,
.kalenderadresse-zeile button {
    min-height: 2.75rem;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    font: inherit;
}

.kalenderadresse-zeile input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0;
    text-transform: none;
}

.kalenderadresse-zeile button {
    flex: 0 0 auto;
    padding: 0 1rem;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.kalenderadresse-hinweis {
    margin: 0.5rem 0 0;
    max-width: 38rem;
    font-family: var(--schrift-text);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.8;
}

.seitenkopf .kalenderverweise {
    margin: 0.75rem 0 0;
}

.spiel-karte .kalenderverweise {
    margin: 0;
    gap: 0 1rem;
}

.spiel-karte .kalenderverweise-titel {
    flex-basis: 100%;
}