/* ============================================================
   TTTG — TableTop The Gathering

   MOBILE FIRST. Die Grundregeln in dieser Datei beschreiben das
   Telefon. Größere Schirme bekommen ihre Abweichungen über
   `min-width`-Abfragen dazu — es gibt in der ganzen Datei keine
   einzige `max-width`-Abfrage. Wer etwas ändert, ändert zuerst
   die Telefonfassung; alles andere ist Zugabe.

   Warum: Die meisten Besucher kommen mit dem Handy. Eine
   Vereinsseite wird unterwegs aufgemacht — "wo ist das nochmal,
   und wie erreiche ich die?".

   Gestaltung: gedrucktes Spielmaterial statt Website-Vorlage.
   Harte Kanten, Balken, Linien; Werte in Monospace. Zwei Akte —
   der dunkle Teil ist Stimmung, der helle Teil (`.section--paper`)
   ist Information. Keine Hover-Sprünge, keine Einblendungen:
   auf dem Telefon gibt es kein Hover, und Papier bewegt sich nicht.

   Aufbau:
     1  Schriften
     2  Tokens
     3  Reset & Basis
     4  Typografie
     5  Layout
     6  Kopf & Navigation
     7  Hero
     8  Textsatz & Werte
     9  Bildbänder
    10  Spiele
    11  Papierteil & Karte
    12  Fuß
    13  Unterseiten
    14  Hilfsklassen
   ============================================================ */


/* ── 1  SCHRIFTEN ────────────────────────────────────────────
   Airstrike ist die Schrift des Vereinslogos und trägt alle
   Überschriften. Fließtext läuft in der Systemschrift, alle
   Werte und Marginalien in der System-Monospace — beides ohne
   Download, was auf dem Telefon der halbe Ladevorgang ist.   */

@font-face {
    font-family: 'Airstrike';
    src: url('fonts/airstrike.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ── 2  TOKENS ───────────────────────────────────────────────  */

:root {
    --ink:       #0c0b0a;
    --ink-soft:  #16150f;
    --bone:      #e7e1d3;
    --red:       #a63a2c;
    --red-light: #c9563f;

    /* Semantisch — der Papierteil dreht diese vier um, jede
       Komponente funktioniert dadurch auf beiden Gründen. */
    --surface: var(--ink);
    --fg:      var(--bone);
    --fg-mute: #8e8678;
    --rule:    rgba(231, 225, 211, 0.20);
    --spot:    var(--red-light);

    --font-mark: 'Airstrike', 'Impact', sans-serif;
    --font-text: system-ui, -apple-system, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    --font-data: ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
                 Consolas, 'Liberation Mono', monospace;

    /* Größen wachsen mit dem Viewport, Untergrenze ist das
       Telefon. Die vw-Anteile sind so gewählt, dass bei 375 px
       nichts umbricht, was nicht umbrechen soll. */
    --size-mark: clamp(2.9rem, 13vw, 8.5rem);
    --size-h2:   clamp(1.5rem, 6vw, 2rem);
    --size-h3:   clamp(1.25rem, 5vw, 1.55rem);
    --size-lead: clamp(1.6rem, 8vw, 2.9rem);
    --size-body: 1.0625rem;
    --size-data: 0.8125rem;

    --space-xs: 0.5rem;
    --space-s:  1rem;
    --space-m:  1.75rem;
    --space-l:  2.75rem;
    --space-xl: 3.5rem;

    --width-page: 1240px;
    --width-text: 34rem;
    --header-height: 56px;
    /* Die tatsächliche Höhe der Kopfleiste. Vorgabe ist die
       Mindesthöhe; main.js misst nach und trägt den echten Wert
       ein, sobald die Leiste durch größere Schrift wächst.
       Menü und Ankersprünge hängen daran. */
    --header-ist: 56px;

    /* Mindestgröße für alles, was angetippt wird */
    --tap: 44px;
}

@media (min-width: 700px) {
    :root {
        --space-m: 2rem;
        --space-l: 3.5rem;
        --space-xl: clamp(4.5rem, 9vw, 7.5rem);
        --header-height: 58px;
        --header-ist: 58px;
    }
}


/* ── 3  RESET & BASIS ────────────────────────────────────────  */

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

html {
    scroll-behavior: smooth;
    /* Ankersprünge dürfen nicht unter der Leiste landen —
       main.js trägt deren gemessene Höhe nach. */
    scroll-padding-top: var(--header-ist);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--bone);
    font-family: var(--font-text);
    font-size: var(--size-body);
    line-height: 1.6;
    overflow-x: hidden;
    /* Lange Wörter wie "Sammelkartenspiele" dürfen auf 320 px
       nicht aus dem Bildschirm laufen */
    overflow-wrap: break-word;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-underline-offset: 0.18em; }

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

::selection { background: var(--red); color: var(--bone); }

/* Hover-Effekte nur dort, wo es einen Zeiger gibt. Auf dem
   Telefon bleiben sie sonst nach dem Antippen hängen. */
@media (hover: hover) {
    a:hover { color: var(--spot); }
}


/* ── 4  TYPOGRAFIE ───────────────────────────────────────────  */

/* Überschriften in der Vereinsschrift, mit einem roten Balken
   darüber statt einer Linie daneben: der Balken funktioniert
   auf 320 px genauso wie auf 1440 px. */
h2 {
    margin: 0 0 var(--space-m);
    font-family: var(--font-mark);
    font-weight: 400;
    font-size: var(--size-h2);
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--fg);
}
h2::before {
    content: '';
    display: block;
    width: 42px;
    height: 3px;
    margin-bottom: 0.85rem;
    background: var(--red);
}

h3 {
    margin: 0;
    font-family: var(--font-mark);
    font-weight: 400;
    font-size: var(--size-h3);
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

p { margin: 0 0 1em; max-width: var(--width-text); }
p:last-child { margin-bottom: 0; }

.lead {
    font-family: var(--font-mark);
    font-size: var(--size-lead);
    line-height: 1.08;
    text-transform: uppercase;
    max-width: 16ch;
}

.data {
    font-family: var(--font-data);
    font-size: var(--size-data);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-mute);
}


/* ── 5  LAYOUT ───────────────────────────────────────────────  */

.wrap {
    width: 100%;
    max-width: var(--width-page);
    margin-inline: auto;
    /* 20 px Luft am Telefonrand, mehr sobald Platz da ist */
    padding-inline: 1.25rem;
}
@media (min-width: 700px) { .wrap { padding-inline: clamp(2rem, 5vw, 3rem); } }

.section {
    background: var(--surface);
    color: var(--fg);
    padding-block: var(--space-xl);
}

.section--paper {
    --surface: var(--bone);
    --fg:      var(--ink);
    --fg-mute: #5f594c;
    --rule:    rgba(12, 11, 10, 0.22);
    --spot:    var(--red);
}

.skip-link {
    position: absolute;
    top: -100px; left: 1rem;
    z-index: 200;
    padding: 0.7em 1.2em;
    background: var(--red);
    color: var(--bone);
    font-family: var(--font-data);
    text-transform: uppercase;
}
.skip-link:focus { top: 0.6rem; }


/* ── 6  KOPF & NAVIGATION ────────────────────────────────────
   Auf dem Telefon: schmale Leiste, Menü klappt darunter auf.
   Ab 820 px liegen die Punkte nebeneinander.                  */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    display: flex;
    align-items: center;
    /* MINDEST-, keine feste Höhe. Mit fester Höhe stand der Inhalt
       oben über und wurde abgeschnitten, sobald eine Schrift anders
       rendert als erwartet — auf dem Telefon war vom Logo nur die
       untere Hälfte zu sehen. So wächst die Leiste lieber. */
    min-height: var(--header-height);
    padding-block: 0.45rem;
    /* Auf Telefonen mit Aussparung nach unten schieben, falls die
       Seite je mit viewport-fit=cover ausgeliefert wird */
    padding-top: calc(0.45rem + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid transparent;
    transition: background 0.2s linear, border-color 0.2s linear;
}
.site-header.is-stuck {
    background: var(--ink);
    border-bottom-color: rgba(231, 225, 211, 0.16);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-width: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: auto;
    min-width: 0;
    color: var(--bone);
    text-decoration: none;
}
/* Breite UND Höhe gesetzt: so kann das Bild nicht über eine neu
   berechnete Seitenverhältnis-Höhe wachsen. */
.brand img { width: 32px; height: 28px; }
.brand span {
    font-family: var(--font-mark);
    font-size: 1rem;
    /* Airstrike hat großzügige Oberlängen. Mit der geerbten
       Zeilenhöhe von 1.6 wurde die Zeilenbox unnötig hoch und
       drückte den Schriftzug aus der Leiste. */
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap); height: var(--tap);
    padding: 0;
    background: transparent;
    border: 1px solid rgba(231, 225, 211, 0.3);
    color: var(--bone);
    cursor: pointer;
    /* Ohne JavaScript gibt es nichts aufzuklappen */
    visibility: hidden;
}
.js .nav-toggle { visibility: visible; }
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }
.nav-toggle[aria-expanded='true'] .icon-open  { display: none; }

.nav ul {
    display: flex;
    flex-direction: column;
    margin: 0; padding: 0;
    list-style: none;
}
.nav a {
    display: block;
    font-family: var(--font-mark);
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone);
    text-decoration: none;
    /* Fingergerecht: gut über 44 px hoch */
    padding: 0.95rem 0;
}

/* Mit JavaScript klappt das Menü ein */
.js .nav {
    position: fixed;
    /* Folgt der gemessenen Höhe der Leiste (main.js setzt die
       Variable), damit es auch dann bündig sitzt, wenn die Leiste
       durch größere Schrift wächst. */
    inset: var(--header-ist) 0 auto 0;
    background: var(--ink);
    border-bottom: 1px solid rgba(231, 225, 211, 0.16);

    /* Geschlossen: um die eigene Höhe PLUS die Höhe der Leiste nach
       oben, damit die Unterkante genau auf 0 liegt.
       Ein reines translateY(-115%) verschiebt nur um Prozente der
       eigenen Höhe — bei drei Menüpunkten blieb der schwarze Kasten
       damit 21 px in der Seite stehen und deckte das Logo halb zu.
       Die Prozentangabe hängt an der Zahl der Einträge; das darf sie
       nicht.
       visibility zusätzlich, damit das geschlossene Menü weder
       gezeichnet noch angetippt werden kann. */
    transform: translateY(calc(-100% - var(--header-ist) - 8px));
    visibility: hidden;
    transition: transform 0.2s ease-out, visibility 0s linear 0.2s;
}
.js .nav[data-open='true'] {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease-out, visibility 0s linear 0s;
}
.js .nav ul { padding: 0 1.25rem 0.75rem; }
.js .nav li + li { border-top: 1px solid rgba(231, 225, 211, 0.12); }

@media (min-width: 820px) {
    .nav-toggle, .js .nav-toggle { display: none; }

    .site-header .wrap { gap: var(--space-m); }

    .js .nav, .nav {
        position: static;
        transform: none;
        background: transparent;
        border-bottom: 0;
    }
    .nav ul, .js .nav ul {
        flex-direction: row;
        gap: clamp(1rem, 2vw, 1.9rem);
        padding: 0;
    }
    .js .nav li + li { border-top: 0; }
    .nav a {
        padding: 0.2rem 0;
        font-size: 0.95rem;
        color: #9c9485;
        border-bottom: 2px solid transparent;
    }
    .nav a[aria-current='true'] { color: var(--bone); border-bottom-color: var(--red); }
}
@media (min-width: 820px) and (hover: hover) {
    .nav a:hover { color: var(--bone); }
}


/* ── 7  HERO ─────────────────────────────────────────────────
   Titelseite: Bild, Wortmarke unten links, darunter eine
   Zeile Eckdaten. Auf dem Telefon füllt die Wortmarke die
   Breite — sie ist das Erste und Größte, was man sieht.      */

.hero {
    position: relative;
    min-height: 88svh;
    display: flex;
    align-items: flex-end;
    padding-block: calc(var(--header-height) + var(--space-m)) var(--space-l);
    overflow: hidden;
}
@media (min-width: 700px) { .hero { min-height: 92svh; } }

.hero__media {
    position: absolute;
    inset: 0;
    /* Eigener Stapelkontext — die z-Index-Werte der wechselnden
       Motive bleiben dadurch hier drin und können die Wortmarke
       darüber nicht verdecken. */
    z-index: 0;
}

/* Das Titelbild wechselt. Die Motive liegen übereinander und
   werden übergeblendet; ohne JavaScript bleibt schlicht das
   erste stehen, das ist die einzige Fassung, die dann im
   Markup steht. */
.hero__slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    opacity: 0;
    transition: opacity 1.2s linear;
}
.hero__slide.is-on { opacity: 1; }

.hero__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(0.3) contrast(1.05) brightness(0.72);
}
/* Der Verlauf liegt über allen Motiven, damit die Schrift auf
   jedem von ihnen lesbar bleibt. */
.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(
        to top,
        var(--ink) 0%,
        rgba(12, 11, 10, 0.88) 30%,
        rgba(12, 11, 10, 0.35) 70%,
        rgba(12, 11, 10, 0.5) 100%);
}

.hero .wrap { position: relative; z-index: 1; }

.hero__kicker {
    margin: 0 0 1rem;
    max-width: none;
    font-family: var(--font-data);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #e07a62;
    text-shadow: 0 1px 12px rgba(12, 11, 10, 0.9);
}
@media (min-width: 700px) {
    .hero__kicker { font-size: var(--size-data); letter-spacing: 0.24em; margin-bottom: 1.4rem; }
}

.wordmark {
    margin: 0;
    font-family: var(--font-mark);
    font-weight: 400;
    font-size: var(--size-mark);
    line-height: 0.88;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--bone);
    text-shadow: 0 2px 24px rgba(12, 11, 10, 0.75);
}

/* Eckdaten: auf dem Telefon untereinander in zwei Spalten,
   ab Tablet in einer Zeile. */
.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
    max-width: none;
    margin: 1.2rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(231, 225, 211, 0.28);
    font-family: var(--font-data);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b4ac9c;
}
@media (min-width: 700px) {
    .hero__meta { gap: 0.35rem 1.6rem; margin-top: 1.6rem; padding-top: 1rem; font-size: var(--size-data); }
}
.hero__meta b { color: var(--bone); font-weight: 400; }


/* ── 8  TEXTSATZ & WERTE ─────────────────────────────────────  */

/* Eine Spalte auf dem Telefon, zwei ab Tablet. Der Initial
   bleibt in beiden Fällen. */
.columns { max-width: 62rem; }
.columns p { max-width: none; }
.columns p:first-child::first-letter {
    float: left;
    margin: 0.06em 0.12em 0 0;
    font-family: var(--font-mark);
    font-size: 3.2em;
    line-height: 0.78;
    color: var(--red-light);
}
@media (min-width: 760px) {
    .columns { column-count: 2; column-gap: var(--space-l); }
}

.intro { display: grid; gap: var(--space-l); margin-bottom: var(--space-m); }
@media (min-width: 900px) {
    .intro { grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--space-xl); align-items: start; }
    .intro { margin-bottom: 0; }
}

/* Werteleiste. Auf dem Telefon steht die Beschriftung über dem
   Wert — nebeneinander würden lange Werte zu einem Klumpen aus
   zwei Zeichen pro Zeile. Ab 480 px nebeneinander. */
.stats { margin: 0; font-family: var(--font-data); font-size: var(--size-data); }
.stats > div {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
}
.stats > div:first-child { border-top: 1px solid var(--rule); }
.stats dt {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-mute);
    margin-bottom: 0.15rem;
}
.stats dd { margin: 0; color: var(--fg); }

@media (min-width: 480px) {
    .stats > div {
        display: flex;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 0.55rem 0;
    }
    .stats dt { margin-bottom: 0; }
    .stats dd { text-align: right; }
}


/* ── 9  BILDBÄNDER ───────────────────────────────────────────  */

.band { margin: 0; background: var(--ink); }
.band img {
    width: 100%;
    height: clamp(180px, 34vh, 420px);
    object-fit: cover;
    filter: grayscale(0.25) brightness(0.88);
}


/* ── 10  SPIELE ──────────────────────────────────────────────
   Vier Blöcke mit je einem Zeichen: Miniatur, Karte, Spielfigur,
   Kartenfächer. Die Zeichen zeigen die Breite des Vereins, ohne
   dass es dafür vier Fotos bräuchte. Die beiden Hauptthemen
   tragen ihr Zeichen in Rot.                                  */

.games {
    margin: 0; padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}
@media (min-width: 820px) {
    .games { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); }
}

.game {
    display: grid;
    grid-template-columns: 2.1rem 1fr;
    column-gap: 1rem;
    align-items: start;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--rule);
}
@media (min-width: 700px) {
    .game { grid-template-columns: 2.4rem 1fr; column-gap: 1.3rem; padding: 1.7rem 0; }
}

.game__mark {
    grid-row: 1 / span 2;
    width: 1.9rem; height: 1.9rem;
    margin-top: 0.1rem;
    fill: var(--fg-mute);
}
@media (min-width: 700px) { .game__mark { width: 2.1rem; height: 2.1rem; } }
.game--main .game__mark { fill: var(--red-light); }

/* Beim Kartenfächer trennt ein Strich in der Grundfarbe die
   drei Karten, sonst verschmelzen sie zu einem Klumpen. */
.game__mark--fan rect {
    stroke: var(--surface);
    stroke-width: 1.5;
    paint-order: stroke fill;
}

.game p { margin: 0.45rem 0 0; max-width: 40ch; color: var(--fg-mute); }


/* ── 11  PAPIERTEIL & KARTE ──────────────────────────────────  */

.paper-grid { display: grid; gap: var(--space-l); }
@media (min-width: 880px) {
    .paper-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}

.address { margin: var(--space-m) 0 0; font-style: normal; line-height: 1.55; }

/* Abrisskante wie auf einem Formular */
.tear { margin: var(--space-l) 0; border: 0; border-top: 2px dashed var(--rule); }

/* Große Verweise statt Kachel-Buttons. Die Zeilen sind bewusst
   hoch — sie sind auf dem Telefon die wichtigsten Ziele. */
.links { margin: var(--space-m) 0 0; padding: 0; list-style: none; }
.links li { border-bottom: 1px solid var(--rule); }
.links li:first-child { border-top: 1px solid var(--rule); }
.links a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.2rem 1rem;
    min-height: var(--tap);
    padding: 0.85rem 0;
    font-size: 1.1rem;
    text-decoration: none;
}
@media (min-width: 700px) { .links a { font-size: clamp(1.1rem, 2.1vw, 1.35rem); } }
.links span {
    font-family: var(--font-data);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-mute);
}

.note { max-width: 30ch; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-mute); }

/* Karte. Sie lädt erst auf Klick: ein Google-Rahmen, der sich
   von selbst öffnet, überträgt Daten der Besucher an Google,
   bevor sie zugestimmt haben — dann bräuchte die Seite ein
   Einwilligungsbanner. Solange zeigt die Deckfläche ein
   angedeutetes Planquadrat mit der Adresse. */
.map {
    position: relative;
    min-height: 260px;
    border: 1px solid var(--rule);
    background: #ded7c6;
}
@media (min-width: 700px) { .map { min-height: clamp(320px, 44vh, 480px); } }

.map__cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    text-align: center;
    background:
        repeating-linear-gradient(90deg, rgba(12,11,10,0.07) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg,  rgba(12,11,10,0.07) 0 1px, transparent 1px 48px),
        #ded7c6;
}
.map__where {
    margin: 0; max-width: none;
    font-family: var(--font-data);
    font-size: var(--size-data);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.8;
    color: var(--ink);
}
.map__load {
    display: none;
    min-height: var(--tap);
    padding: 0.7em 1.4em;
    border: 0;
    background: var(--red);
    color: var(--bone);
    font-family: var(--font-data);
    font-size: var(--size-data);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}
.js .map__load { display: inline-block; }
.map__hint { margin: 0; max-width: 30ch; font-size: 0.78rem; line-height: 1.5; color: var(--fg-mute); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ── 12  FUSS ────────────────────────────────────────────────  */

.site-footer {
    background: var(--ink);
    color: #7d766a;
    padding-block: var(--space-m);
    font-family: var(--font-data);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}
.site-footer .wrap { display: grid; gap: var(--space-s); }
@media (min-width: 760px) {
    .site-footer .wrap { grid-template-columns: 40px 1fr auto; gap: var(--space-m); align-items: start; }
}
.site-footer img { width: 36px; opacity: 0.45; }
.site-footer a { color: #b4ac9c; text-decoration: none; display: inline-block; padding-block: 0.4rem; }
.footer-links { display: flex; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.footer-note { max-width: 56ch; margin: 0; text-transform: uppercase; line-height: 1.8; }
@media (min-width: 760px) and (hover: hover) {
    .site-footer a:hover { color: var(--red-light); }
}


/* ── 13  UNTERSEITEN ─────────────────────────────────────────  */

.page-head {
    padding-block: calc(var(--header-height) + var(--space-m)) var(--space-m);
    border-bottom: 1px solid var(--rule);
}
.page-head h1 {
    margin: 0;
    font-family: var(--font-mark);
    font-weight: 400;
    font-size: clamp(2.2rem, 11vw, 3.6rem);
    line-height: 1;
    text-transform: uppercase;
}
.page-head .data { display: block; margin-bottom: 0.7rem; color: var(--red-light); }

.prose { padding-block: var(--space-l) var(--space-xl); }
.prose h2 { margin-top: var(--space-l); font-size: clamp(1.4rem, 6vw, 2rem); }
.prose h2:first-child { margin-top: 0; }
.prose .stats { margin-bottom: var(--space-m); }
.prose .stats dd { max-width: 34rem; }
.prose a { color: var(--spot); }

.error-page {
    min-height: 100svh;
    display: grid;
    place-items: center;
    text-align: center;
}
.error-page .code {
    margin: 0; max-width: none;
    font-family: var(--font-data);
    font-size: clamp(3rem, 20vw, 7rem);
    letter-spacing: 0.1em;
    color: var(--red);
}


/* ── 14  HILFSKLASSEN ────────────────────────────────────────  */

/* Offene Stellen im Entwurf. Derzeit nirgends in Gebrauch —
   auf der Seite steht nichts, was noch gefüllt werden müsste. */
.todo { border-bottom: 1px dashed var(--spot); color: var(--spot); }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: 0.01ms !important; }
    /* Das Titelbild wechselt dann nicht im Betrieb — main.js
       wählt stattdessen beim Laden eines der Motive aus. */
    .hero__slide { transition: none; }
}

/* Einleitung auf den Rechtsseiten: größer als Fließtext, aber
   keine Versalien in der Vereinsschrift — das sind zwei Zeilen
   Erklärung, kein Schlagwort. */
.prose-lead {
    max-width: 38rem;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--fg);
}