@charset "UTF-8";

/* =============================================================
   Landingpage zur Veranstaltung  —  Präfix .fest-

   BEWUSST GETRENNT VON main.css. Die Hauptdatei hat rund 5000 Zeilen, liegt im
   APP_SHELL des Service Workers und wird auf jeder Seite ein Jahr lang
   zwischengespeichert; was nur eine einzige, befristete Seite braucht, hat
   dort nichts verloren. Präzedenz ist admin.css. Der Rückbau nach dem Fest ist
   dadurch ein Löschen statt Chirurgie in einer Datei, in der ein Fehlgriff
   .page-note oder .weiterlink mitnimmt.

   Geladen über $pageStyles — steht IMMER nach main.css, benutzt deren Tokens
   aus :root und setzt keinen davon neu.

   DER BANNER AUF DER STARTSEITE (.fest-band) STEHT NICHT HIER, sondern in
   main.css: Die Startseite soll für ihn keine zweite Datei anfordern.

   ------------------------------------------------------------------
   GESTALTUNGSPRINZIP: FLÄCHEN, KEINE RAHMEN.

   Die erste Fassung stand durchgehend auf Weiß und arbeitete mit umrandeten
   Kästen — zwölf Programmkacheln, vier Routenknöpfe, Adressblock, Hinweis. Sie
   war fachlich in Ordnung und sah aus wie ein Formular. Der Umbau am
   10.09.2026 ersetzt das Prinzip: Die Abschnitte wechseln die Fläche
   (blau → getönt → weiß → blau → weiß), die Karten darin sind randlos und
   heben sich durch Weiß und einen weichen Schatten ab. Genau das macht die
   Startseite mit .quick-access (weiß) und .news (--c-surface).

   Wer hier Rahmen ergänzt, holt den Formularlook zurück.
   ------------------------------------------------------------------ */


/* =============================================================
   Rahmen und Typografie

   .fest-seite ersetzt .page: Die Abschnitte müssen über die volle
   Fensterbreite reichen, um ihren Grund zeigen zu können — mit der max-width
   von .page ginge das nur über negative Ränder. Die Werte hier sind die von
   .page, damit die Seite sich liest wie jede andere.
   ============================================================= */

.fest-seite {
    font-size: 1.0625rem;
    line-height: 1.75;

    @media (min-width: 40rem) {
        font-size: 1.125rem;
    }

    h2 {
        margin: 0 0 0.75rem;
        font-family: var(--font-title);
        font-size: clamp(1.45rem, 3vw, 1.9rem);
        line-height: 1.2;
        color: var(--c-primary-dark);
    }

    h3 {
        font-family: var(--font-title);
    }

    /* KEINE allgemeine p-Regel hier. Sie stand zuerst da (`margin-block: 0 1rem`)
       und schlug mit ihrer Spezifität von 0,1,1 jede Klassenregel darunter —
       `.fest-hinweis { margin-block: 2rem 0 }` (0,1,0) blieb wirkungslos, der
       Abstand war 0, und die Programmkacheln stießen an den Hinweis. Dieselbe
       Falle wie bei `.page li + li` in main.css.

       Fließtext-Abstände stehen deshalb dort, wo Fließtext wirklich vorkommt. */
}

/* Die eine Inhaltsbreite der Website. Der Innenabstand wird auf die max-width
   aufgeschlagen — sonst begänne der Text 20 px weiter innen als auf allen
   anderen Seiten (dieselbe Rechnung wie bei .page und .site-footer__grid). */
.fest-inner {
    max-width: calc(var(--breite-inhalt) + 2 * 1.25rem);
    margin-inline: auto;
    padding-inline: 1.25rem;
}


/* =============================================================
   Kopfbereich
   ============================================================= */

.fest-hero {
    /* Farbwelt des Festbands — der Austauschpunkt für alles Farbige hier.

       KONTRAST-WACHE: --fest-akzent steht auf --fest-fond. Der Verlauf darf
       KEINE Stützstelle heller als --c-primary bekommen. Gemessen: #d5e488 auf
       #2b5ca8 = 4.78:1 (bestanden), auf #234b89 = 6.27:1. Der Verlauf von
       .quick-access__card beginnt bei #3a71c9 — dort sind es nur 3.48:1, also
       DURCHGEFALLEN. Und niemals --c-accent (#c6d76f) als TEXT auf Blau: 4.17:1. */
    --fest-fond: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    --fest-auf-fond: #fff;
    --fest-akzent: var(--c-accent-text);
    --fest-flaeche: var(--c-accent);

    /* Abgesetzte Kästen im Kopfbereich — UNDURCHSICHTIG, nicht als weiße
       Fläche mit Deckkraft.

       Die erste Fassung nahm rgb(255 255 255 / 0.1). Das hellt den Verlauf auf:
       Über --c-primary entsteht rgb(64,108,177), und darauf erreicht weißer
       Text nur 5.25:1 und --c-accent-text 3.82:1 — DURCHGEFALLEN. Aufgefallen
       ist es kontrast-oeffentlich.mjs (40 Befunde, nachdem der Lauf vorher bei
       0 stand); nachgerechnet hat es sich bestätigt.

       Ein fester Farbwert ist zugleich messbar: Bei einer Fläche mit Deckkraft
       über einem Verlauf kann kein Skript den Grund bestimmen. Gemessen:
       weiß 10.26:1, --c-accent-text 7.46:1. */
    --fest-kasten: #1d4076;

    background: var(--fest-fond);
    color: var(--fest-auf-fond);
    padding-block: 2rem 2.75rem;

    /* Der geschwungene Abschluss ist die Formensprache dieser Website — der
       weiße Markenblock trägt sie, die Hero-Kontaktbox der Startseite auch
       (dort als border-end-end-radius: 55% 7rem). Ohne ihn war der Kopf ein
       Rechteck und wirkte abgeschnitten statt angesetzt. */
    border-end-end-radius: 45% 3.5rem;

    position: relative;
    z-index: 1;
    box-shadow: 0 14px 28px rgb(0 0 0 / 0.18);

    /* Der globale Fokusring ist --c-primary und auf blauem Grund unsichtbar.
       Der Fußbereich hat aus demselben Grund einen eigenen. */
    :focus-visible {
        outline: 3px solid var(--fest-auf-fond);
        outline-offset: 3px;
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        /* Der weiße Markenblock (.brand) ragt mit --brand-overlap über die
           Unterkante der Kopfzeile — gemessen bis y=168 bei 1400 px, während
           der Kicker bei y=142 begann und darunter verschwand. Auf der
           Startseite fällt das nicht auf, weil dort ein Foto liegt; hier stand
           Text. Bei Änderungen an --brand-overlap oder --header-h gegenprüfen. */
        padding-block-start: calc(var(--brand-overlap) + 1rem);
        border-end-end-radius: 35% 5rem;
    }
}

/* -------------------------------------------------------------
   Plakat

   Ganz oben, über die volle Inhaltsbreite. Der Kopf ist deshalb einspaltig —
   das Foto rechts ist mit dem Plakat entfallen.

   KEIN Rahmen und kein Schatten auf dem Bild selbst: Es bringt seinen eigenen
   Rand mit (dunkle Waldsilhouette unten, Himmel oben), und ein zusätzlicher
   Kasten darum wirkte wie ein Bilderrahmen im Wohnzimmer.
   ------------------------------------------------------------- */

.fest-plakat {
    margin-block-end: 2rem;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);

    img {
        display: block;
        inline-size: 100%;
        block-size: auto;
    }
}

.fest-hero__kicker {
    margin: 0 0 0.4rem;
    font-family: var(--font-title);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fest-akzent);
}

.fest-hero__titel {
    margin: 0 0 0.4rem;
    font-family: var(--font-title);
    font-size: clamp(2.2rem, 9vw, 3.8rem);
    line-height: 1.03;
    text-wrap: balance;
}

.fest-hero__unter {
    margin: 0 0 1.5rem;
    font-size: clamp(1.05rem, 3.2vw, 1.3rem);
    color: rgb(255 255 255 / 0.92);
    text-wrap: pretty;
}


/* -------------------------------------------------------------
   Eckdaten: Wann / Wo / Für wen

   Als abgesetzte Glasfläche statt als nackter Text — sie sind die Antwort auf
   die erste Frage jedes Besuchers und dürfen sich vom Fließtext abheben.
   Alpha-Wache wie bei .hero__quicklinks: Weiß auf --c-primary ist 6.56:1, die
   Aufhellung um 0.1 verschiebt das nur zugunsten des Kontrasts.
   ------------------------------------------------------------- */

.fest-eckdaten {
    display: grid;
    gap: 0.1rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.1rem;
    border-radius: 1.25rem;
    background: var(--fest-kasten);

    /* Schnitt bei 34rem wie bei .bilanz und aus demselben Grund: Darunter wird
       eine Spalte zu schmal für „Lindhorster Straße 8". */
    /* 15rem, nicht 12: Steht rechts das Foto, bleiben der Textspalte bei
       1400 px nur rund 700 px. Mit 12rem entstanden daraus drei Spalten à
       233 px, und „Gerätehaus der Freiwilligen Feuerwehr Colbitz" brach auf
       drei Zeilen um. Mit 15rem sind es zwei — die dritte Angabe rutscht
       darunter und alles bleibt lesbar. */
    @media (min-width: 34rem) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
        gap: 1.1rem 1.75rem;
    }
}

.fest-eckdaten__paar {
    padding-block: 0.4rem;

    /* Trennlinien nur mobil, wo die Paare untereinander stehen. Nebeneinander
       wären sie waagerechte Striche zwischen senkrechten Spalten — genau die
       Art Linie, die ein Layout wie eine Tabelle aussehen lässt. */
    & + & {
        border-block-start: 1px solid rgb(255 255 255 / 0.2);
    }

    @media (min-width: 34rem) {
        padding-block: 0;

        & + & {
            border-block-start: 0;
        }
    }

    dt {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-block-end: 0.15rem;
        font-family: var(--font-title);
        font-size: 0.82rem;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--fest-akzent);
    }

    dd {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.35;
    }
}

.fest-eckdaten__icon {
    flex: 0 0 auto;
}

.fest-eckdaten__zusatz {
    display: block;
    margin-block-start: 0.1rem;
    font-size: 0.94rem;
    font-weight: 400;
    /* 92 % Weiß auf --c-primary sind gerechnet 5.83:1 — die Untergrenze, die
       hier vertretbar ist. Nicht weiter absenken. */
    color: rgb(255 255 255 / 0.92);
}


/* -------------------------------------------------------------
   Zähler

   Als Kreis in Akzentgrün — die erste Fassung setzte nur eine große Zahl
   neben einen Satz, und beides ging im Blau unter. Der Kreis macht ihn zum
   Blickfang, ohne dass er mehr Platz braucht.
   ------------------------------------------------------------- */

.fest-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.5rem;
    padding: 0.5rem 1.35rem 0.5rem 0.5rem;
    border-radius: 999px;
    background: var(--fest-kasten);
}

.fest-countdown__zahl {
    display: grid;
    place-items: center;
    inline-size: 4.6rem;
    block-size: 4.6rem;
    border-radius: 50%;
    background: var(--fest-flaeche);
    /* #1d1d1d auf #c6d76f = 10.72:1. NIE weiß darauf — das wären 1.57:1. */
    color: var(--c-on-accent);
    font-family: var(--font-title);
    font-size: 2.15rem;
    line-height: 1;
}

.fest-countdown__wort {
    font-family: var(--font-title);
    font-size: 1.15rem;
    line-height: 1.15;
    color: var(--fest-auf-fond);
}

/* „Heute" ist ein WORT, nicht nur eine andere Farbe — Farbe trägt hier keine
   Information allein (WCAG 1.4.1). Fünf Buchstaben passen nicht in den Kreis,
   deshalb wird er zur Pille. */
.fest-countdown--heute .fest-countdown__zahl {
    inline-size: auto;
    block-size: auto;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 1.4rem;
}

.fest-hero__vorbei {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: var(--fest-kasten);
    font-size: 1.02rem;
    line-height: 1.6;
    max-inline-size: 42rem;
}


/* -------------------------------------------------------------
   Knöpfe

   Zwei Ausprägungen. Beide halten --tap-target und tragen ihren Zustand nie
   über Farbe allein: Der Hover ändert Fläche UND Rand.
   ------------------------------------------------------------- */

.fest-hero__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0;
}

.fest-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--tap-target);
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition:
        background-color var(--dur-micro) ease,
        border-color var(--dur-micro) ease,
        color var(--dur-micro) ease,
        translate var(--dur-micro) ease;

    &:hover {
        translate: 0 -2px;
    }
}

.fest-knopf__icon {
    flex: 0 0 auto;
}

.fest-knopf--haupt {
    border: 2px solid var(--fest-flaeche, var(--c-accent));
    background: var(--fest-flaeche, var(--c-accent));
    color: var(--c-on-accent);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.18);

    &:hover {
        background: #d6e48b;
        border-color: #d6e48b;
    }
}

.fest-knopf--neben {
    border: 2px solid var(--fest-auf-fond, #fff);
    background: transparent;
    color: var(--fest-auf-fond, #fff);

    &:hover {
        background: var(--fest-auf-fond, #fff);
        color: var(--c-primary-dark);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fest-knopf:hover {
        translate: none;
    }
}


/* =============================================================
   Programm — getönte Fläche, weiße Karten
   ============================================================= */

.fest-programm {
    background: var(--c-surface);
    padding-block: 2.5rem 3rem;

    /* Der Kopf ragt mit seiner Rundung leicht herein; ohne den negativen Rand
       entstünde darunter ein heller Streifen in der Kurve. */
    margin-block-start: -1px;
}

.fest-programm__intro {
    max-inline-size: 46rem;
    margin-block: 0 2rem;
    font-size: 1.1rem;
    color: #333;
    text-wrap: pretty;
}

/* -------------------------------------------------------------
   Programm — Magazinsatz, keine Kästen

   ZWEI VORFASSUNGEN HABEN NICHT GETRAGEN und sind es wert, erwähnt zu werden,
   damit sie niemand zurückholt: zwölf Kacheln im Raster (leere Zeilenreste,
   ungleiche Höhen, keine Hierarchie) und vier Karten mit Listen darin. Beide
   sahen nach Formular aus.

   Jetzt gliedern ausschließlich Typografie und dünne Linien. Der Titel eines
   Punktes steht groß links, die Erklärung daneben — ab 52rem zweispaltig,
   darunter gestapelt. Der Nutzer hat diese Fassung aus vier Entwürfen gewählt
   (10.09.2026).

   Der Programmbereich steht deshalb auf WEISS, nicht mehr auf --c-surface:
   Dünne Trennlinien brauchen den klaren Grund. Den Flächenwechsel übernimmt
   dafür der Block darunter (Ablauf und Anfahrt) — die Abfolge bleibt
   blau → weiß → getönt → blau → weiß.
   ------------------------------------------------------------- */

.fest-programm {
    background: #fff;
    padding-block: 3rem 3.5rem;

    /* Der Kopf ragt mit seiner Rundung leicht herein; ohne den negativen Rand
       entstünde darunter ein heller Streifen in der Kurve. */
    margin-block-start: -1px;
}

.fest-programm__intro {
    max-inline-size: 46rem;
    margin-block: 0 2.5rem;
    font-size: 1.1rem;
    color: #333;
    text-wrap: pretty;
}

.fest-gruppe {
    margin-block-start: 3rem;

    &:first-of-type {
        margin-block-start: 0;
    }
}

/* Die Gruppe ist eine kleine Versalzeile mit einem Strich, der den Rest der
   Zeile ausfüllt. Das gliedert, ohne einen Kasten zu bauen — und der Strich
   nimmt die Breite mit, die der Name übrig lässt. */
.fest-gruppe__titel {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-primary);

    &::after {
        content: "";
        flex: 1 1 auto;
        block-size: 2px;
        background: var(--c-accent);
    }
}

.fest-punkte {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;

    .page & > li + li {
        margin-block-start: 0;
    }
}

.fest-punkt {
    display: grid;
    gap: 0.25rem;
    padding-block: 1.15rem;
    border-block-start: 1px solid rgb(20 40 80 / 0.12);

    &:first-child {
        padding-block-start: 0;
        border-block-start: 0;
    }

    /* Titel links, Erklärung rechts. Der Schnitt liegt bei 52rem, weil
       darunter für die zweite Spalte weniger als 20 Zeichen je Zeile blieben. */
    @media (min-width: 52rem) {
        grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
        gap: 2rem;
        align-items: baseline;
    }
}

.fest-punkt__titel {
    font-family: var(--font-title);
    font-size: clamp(1.25rem, 3.4vw, 1.5rem);
    line-height: 1.15;
    /* 8.61:1 auf Weiß. */
    color: var(--c-primary-dark);
    text-wrap: pretty;
}

.fest-punkt__text {
    font-size: 1rem;
    line-height: 1.55;
    /* #444 auf Weiß = 9.73:1. */
    color: #444;
    text-wrap: pretty;
}

/* Hinweis als Zeile mit Symbol statt als weiterer Kasten. */
.fest-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-block: 2rem 0;
    font-size: 0.98rem;
    color: #333;
}

.fest-hinweis__icon {
    flex: 0 0 auto;
    margin-block-start: 0.15rem;
    color: var(--c-primary);
}


/* =============================================================
   Ablauf und Anfahrt — weißer Block, nebeneinander sobald Platz ist
   ============================================================= */

.fest-doppel {
    /* Trägt jetzt den Flächenwechsel, den vorher der Programmbereich hatte:
       Der steht seit dem Magazinsatz auf Weiß, weil dünne Trennlinien den
       klaren Grund brauchen. */
    background: var(--c-surface);
    padding-block: 2.75rem 3.25rem;
}

.fest-doppel__inner {
    display: grid;
    gap: 2.5rem;

    /* Ab 52rem nebeneinander. Untereinander füllten sie am Telefon zwei fast
       leere Bildschirme; nebeneinander ist der Zusammenhang auch sichtbar:
       wann bin ich dort, wie komme ich hin. */
    @media (min-width: 52rem) {
        grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
        gap: 3rem;
    }
}

/* -------------------------------------------------------------
   Zeitstrahl
   ------------------------------------------------------------- */

.fest-ablauf__liste {
    margin: 0;
    padding: 0 0 0 1.4rem;
    list-style: none;
    /* Die Linie ist CSS, kein Zeichen im Text — Vorlesesoftware läse ein
       Zeichen sonst mit. Dieselbe Lösung wie beim Zeitstrahl der Chronik. */
    border-inline-start: 2px solid rgb(43 92 168 / 0.2);

    .page & > li + li {
        margin-block-start: 0;
    }
}

.fest-ablauf__punkt {
    position: relative;
    padding-block: 0 1.4rem;
    padding-inline-start: 1.1rem;

    &:last-child {
        padding-block-end: 0;
    }

    /* Der Punkt auf der Linie. */
    &::before {
        content: "";
        position: absolute;
        inset-inline-start: -0.47rem;
        inset-block-start: 0.4rem;
        inline-size: 0.8rem;
        block-size: 0.8rem;
        border-radius: 50%;
        background: var(--c-primary);
        box-shadow: 0 0 0 3px #fff;
    }
}

/* Der mittlere Punkt ist keine Uhrzeit, sondern eine Aussage über die Stunden
   dazwischen: Es gibt keine Einzelzeiten. Deshalb ein offener Ring statt einer
   vollen Scheibe — und die Zeitangabe heißt „dazwischen", nicht noch einmal
   „10:00 – 16:00 Uhr" (das steht schon in den Eckdaten). */
.fest-ablauf__punkt--spanne::before {
    background: #fff;
    box-shadow: 0 0 0 3px #fff, inset 0 0 0 2px var(--c-primary);
}

.fest-ablauf__zeit {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.15rem;
    color: var(--c-primary-dark);
}

.fest-ablauf__punkt--spanne .fest-ablauf__zeit {
    font-size: 1rem;
    /* #5a6472 auf Weiß = 6.00:1 — zurückgenommen, weil es keine Uhrzeit ist. */
    color: #5a6472;
}

.fest-ablauf__was {
    margin: 0.1rem 0 0;
    font-size: 0.98rem;
    line-height: 1.55;
}


/* -------------------------------------------------------------
   Anfahrt
   ------------------------------------------------------------- */

.fest-anfahrt__adresse {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: 1.25rem;
    /* Weiß, nicht --c-surface: Seit der Block auf getöntem Grund steht, wäre
       gleich auf gleich unsichtbar. */
    background: #fff;
    font-style: normal;
    line-height: 1.5;

    strong {
        color: var(--c-primary-dark);
    }
}

.fest-anfahrt__pin {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 50%;
    background: var(--c-primary);
    color: #fff;
}

/* Die Ziele als ZEILEN, nicht als vier gleich große Kästen: In der ersten
   Fassung bestimmte die längste Notiz die Höhe aller vier, drei standen halb
   leer da. Zeilen sind außerdem am Telefon der vertrautere Weg. */
.fest-route {
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgb(20 40 80 / 0.05), 0 8px 20px rgb(20 40 80 / 0.07);

    .page & > li + li {
        margin-block-start: 0;
    }

    > li + li {
        border-block-start: 1px solid rgb(20 40 80 / 0.09);
    }
}

.fest-route__zeile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--tap-target);
    padding: 0.7rem 1rem;
    background: #fff;
    /* Die Farbe steht ausdrücklich da: Es gibt im Projekt keine allgemeine
       a-Regel, Links im Inhalt wären sonst Browser-Standardblau. */
    color: var(--c-primary-dark);
    text-decoration: none;
    transition: background-color var(--dur-micro) ease;

    &:hover {
        background: var(--c-surface);
    }
}

.fest-route__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 2.2rem;
    block-size: 2.2rem;
    border-radius: 50%;
    background: var(--c-surface);
    color: var(--c-primary);

    .fest-route__zeile:hover & {
        background: #fff;
    }
}

.fest-route__text {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.fest-route__label {
    display: block;
    font-family: var(--font-title);
    font-size: 1.02rem;
    line-height: 1.25;
}

.fest-route__notiz {
    display: block;
    font-size: 0.86rem;
    line-height: 1.35;
    /* #4a5568 auf Weiß = 7.53:1. */
    color: #4a5568;
}

.fest-route__pfeil {
    flex: 0 0 auto;
    color: var(--c-primary);
    transition: translate var(--dur-arrow) ease;

    .fest-route__zeile:hover & {
        translate: 3px 0;
    }
}

.fest-anfahrt__koordinaten {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    /* #5a6472 auf Weiß = 6.00:1 — als Farbwert statt über `opacity`: Mit
       Deckkraft am Element lässt sich der Kontrast nicht rechnen. */
    color: #5a6472;
}

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


/* =============================================================
   Gut zu wissen
   ============================================================= */

.fest-wissen {
    background: var(--c-surface);
    padding-block: 2.5rem 3rem;
}

.fest-wissen__liste {
    display: grid;
    gap: 0.85rem;
    margin: 0;

    @media (min-width: 40rem) {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
        grid-auto-rows: 1fr;
    }
}

.fest-wissen__paar {
    padding: 1rem 1.15rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 2px 4px rgb(20 40 80 / 0.05), 0 8px 20px rgb(20 40 80 / 0.07);

    dt {
        margin-block-end: 0.2rem;
        font-family: var(--font-title);
        font-size: 1.05rem;
        color: var(--c-primary-dark);
    }

    dd {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.55;
    }
}


/* =============================================================
   Merken und weitersagen — blaue Fläche als Gegenstück zum Kopf
   ============================================================= */

.fest-teilen {
    /* Dieselben lokalen Farbtoken wie im Kopf — der Abschnitt ist sein
       Gegenstück und muss dieselben Kontrastzusagen halten. */
    --fest-auf-fond: #fff;
    --fest-akzent: var(--c-accent-text);
    --fest-flaeche: var(--c-accent);
    --fest-kasten: #1d4076;

    background: linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
    color: #fff;
    padding-block: 2.5rem 3rem;

    /* Spiegelt die Rundung des Kopfes, nur an der anderen Ecke — das schließt
       die Seite optisch, statt sie abbrechen zu lassen. */
    border-start-start-radius: 45% 3.5rem;

    h2 {
        color: #fff;
    }

    :focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }

    /* [breakpoint-desktop] */
    @media (min-width: 1400px) {
        border-start-start-radius: 35% 5rem;
    }
}

.fest-teilen__inner {
    display: grid;
    gap: 1.75rem;
    align-items: center;

    @media (min-width: 44rem) {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2.5rem;
    }
}

.fest-teilen__text p {
    max-inline-size: 34rem;
    margin-block: 0 1rem;
    color: rgb(255 255 255 / 0.92);
}

.fest-teilen__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-block: 1.25rem 0;
}

/* Der Teilen-Knopf entsteht im Skript und ist ein echtes <button>. Farbe und
   Rahmen kommen von .fest-knopf--neben; hier steht nur, was ein <button>
   gegenüber einem <a> zusätzlich braucht. */
.fest-teilen__knopf {
    font: inherit;
    font-family: var(--font-title);
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    /* Ohne das setzt der Browser seine eigene erhabene Fläche darunter. */
    appearance: none;
}

/* -------------------------------------------------------------
   Bilder zum Weitergeben
   ------------------------------------------------------------- */

.fest-teilbilder {
    grid-column: 1 / -1;
    margin-block-start: 0.5rem;
}

.fest-teilbilder__titel {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    color: var(--fest-akzent, var(--c-accent-text));
}

.fest-teilbilder__liste {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;

    @media (min-width: 34rem) {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    }

    .page & > li + li {
        margin-block-start: 0;
    }
}

.fest-teilbild {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    block-size: 100%;
    padding: 0.7rem;
    border-radius: 1rem;
    background: var(--fest-kasten, #1d4076);
    color: #fff;
    text-decoration: none;
    transition: background-color var(--dur-micro) ease;

    &:hover {
        background: var(--c-primary-dark);
    }

    /* Die Vorschau behält ihr Seitenverhältnis, damit man Hoch- und Querformat
       auf den ersten Blick unterscheidet — genau darum geht es bei der Wahl. */
    img {
        flex: 0 0 auto;
        inline-size: 3.5rem;
        block-size: auto;
        max-block-size: 5rem;
        object-fit: contain;
        border-radius: 0.5rem;
        background: rgb(255 255 255 / 0.1);
    }
}

.fest-teilbild__text {
    min-inline-size: 0;
}

.fest-teilbild__titel {
    display: block;
    font-family: var(--font-title);
    font-size: 1.02rem;
    line-height: 1.2;
}

.fest-teilbild__zweck {
    display: block;
    font-size: 0.85rem;
    line-height: 1.35;
    /* 92 % Weiß auf --fest-kasten (#1d4076) = 8.85:1. */
    color: rgb(255 255 255 / 0.92);
}

.fest-teilbild__laden {
    display: block;
    margin-block-start: 0.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    /* --c-accent-text auf #1d4076 = 7.46:1. */
    color: var(--fest-akzent, var(--c-accent-text));
}

.fest-qr {
    /* AUSGESCHRIEBEN. <figure> bringt vom Browser margin: 1em 40px mit; nur
       margin-block zu setzen ließe die seitlichen 40 px stehen (im Projekt bei
       .beitrag-zitat gemessen: Kante bei 1120 statt 1160 px). */
    margin: 0;
    padding: 1rem;
    border-radius: 1.5rem;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.2);

    svg {
        display: block;
        /* Die Grundregel img { max-width: 100% } greift auf <svg> nicht, und
           qr_svg() schreibt feste Maße ins Markup. */
        inline-size: clamp(8.5rem, 38vw, 10.5rem);
        block-size: auto;
        margin-inline: auto;

        /* Der Code bleibt schwarz auf weiß — auch im Windows-Kontrastmodus.
           Ein invertierter oder umgefärbter QR-Code ist für einen Teil der
           Lesegeräte unbrauchbar. */
        forced-color-adjust: none;
    }

    figcaption {
        margin-block-start: 0.6rem;
        font-size: 0.85rem;
        line-height: 1.4;
        /* 6.82:1 auf Weiß. */
        color: #555;
    }
}

/* Die Adresse als markierbarer Text: Ein QR-Code ist für blinde Menschen
   wertlos, und wer die Seite gerade am Telefon liest, kann sein eigenes
   Display nicht abfotografieren. */
.fest-qr__adresse {
    display: block;
    margin-block-start: 0.25rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c-primary-dark);
    overflow-wrap: anywhere;
}


/* =============================================================
   Abschluss
   ============================================================= */

.fest-abschluss {
    padding-block: 2.5rem 3rem;
}


/* =============================================================
   Windows-Kontrastmodus

   Dort werden Farben durch Systemfarben ersetzt: background und box-shadow
   fallen weg, border wird zu CanvasText. Was seine Sichtbarkeit nur aus einer
   Füllung oder einem Schatten bezieht, verschwindet — und dieser Entwurf
   arbeitet fast ausschließlich mit Flächen. Deshalb bekommt hier alles, was
   sich sonst nur durch seinen Grund abhebt, einen Rand.
   ============================================================= */

@media (forced-colors: active) {
    .fest-wissen__paar,
    .fest-qr,
    .fest-anfahrt__adresse,
    .fest-eckdaten,
    .fest-hero__vorbei,
    .fest-countdown,
    .fest-route,
    .fest-plakat {
        border: 1px solid CanvasText;
    }

    .fest-anfahrt__pin,
    .fest-route__icon,
    .fest-countdown__zahl {
        border: 1px solid CanvasText;
    }

    /* Im Magazinsatz gliedern nur Linien — und die sind hier das Einzige, was
       die Gruppen und Punkte trennt. `background` fällt im Kontrastmodus weg,
       also muss der Strich am Gruppentitel zu einem Rand werden. */
    .fest-gruppe__titel::after {
        background: CanvasText;
        block-size: 1px;
    }

    .fest-punkt {
        border-block-start-color: CanvasText;
    }

    /* Ohne diese Zeile stünde beim Überfahren gleichfarbiger Text auf
       gleichfarbigem Grund. */
    .fest-knopf:hover,
    .fest-teilen__knopf:hover,
    .fest-route__zeile:hover {
        background: ButtonFace;
        color: ButtonText;
    }

    .fest-route__notiz,
    .fest-route__zeile:hover .fest-route__notiz {
        color: ButtonText;
    }

    /* Punkt und Ring des Zeitstrahls sind reine Füllungen. */
    .fest-ablauf__punkt::before {
        background: CanvasText;
        box-shadow: none;
    }

    .fest-ablauf__punkt--spanne::before {
        background: Canvas;
        border: 2px solid CanvasText;
    }

    /* Die geschwungenen Kanten wären ohne Fläche unsichtbar und ließen die
       Abschnitte ineinanderlaufen. */
    .fest-hero {
        border-block-end: 1px solid CanvasText;
    }

    .fest-teilen {
        border-block-start: 1px solid CanvasText;
    }
}


/* =============================================================
   Bewegung beim Scrollen  —  reiner Zierrat

   DOPPELT GEKAPSELT, und beides ist Pflicht:

     1. prefers-reduced-motion. Der globale Reset in main.css
        (animation-duration: 0.01ms !important) greift hier NICHT — eine
        scroll-getriebene Animation hat gar keine Dauer, sie wird von
        animation-timeline gesteuert und liefe munter weiter.

     2. @supports. animation-timeline: view() ist Stand September 2026 NICHT
        Baseline: Chrome, Edge und Safari können es, Firefox stable noch nicht
        (Interop-2026-Ziel). Firefox zeigt deshalb die fertige Seite ohne
        Effekt — und genau das ist der Prüfstein: Der Entwurf muss ohne diese
        Regeln vollständig aussehen.

   ANIMIERT WIRD AUSSCHLIESSLICH translate, NIEMALS opacity. Startet eine
   Animation aus irgendeinem Grund nicht, wäre der Inhalt bei opacity: 0
   unsichtbar — Zierrat, der Inhalt verstecken kann, ist kein Zierrat.
   Schlimmster Fall hier: eine Gruppenkarte sitzt 14 px zu tief.
   ============================================================= */

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        /* Die GRUPPENKARTEN laufen ein, nicht die einzelnen Zeilen darin —
           zwölf nacheinander aufsteigende Listenzeilen wären Unruhe statt
           Zierrat. */
        .fest-gruppe {
            animation: fest-auftauchen linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 26%;
        }

        @keyframes fest-auftauchen {
            from { translate: 0 14px; }
            to   { translate: 0 0; }
        }

        /* Greift nur, wenn ein Foto da ist — das Element gibt es sonst nicht.
           Auf den Textkontrast ohne Einfluss, weil kein Text darauf liegt. */
        .fest-plakat img {
            animation: fest-nachziehen linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
        }

        @keyframes fest-nachziehen {
            to { translate: 0 -4%; scale: 1.05; }
        }
    }
}

@media print {
    .fest-gruppe,
    .fest-plakat img {
        animation: none;
        translate: none;
        scale: none;
    }
}