@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;
    }
}

/* Zweispaltig NUR, wenn es wirklich ein Bild gibt. Ohne :has() bliebe rechts
   ein Loch und der Textblock stünde in halber Breite. */
@media (min-width: 62rem) {
    .fest-hero:has(.fest-hero__medium) .fest-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
        gap: 2.5rem;
    }
}

.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;
}

.fest-hero__medium {
    margin-block-start: 1.75rem;
    border-radius: 1.5rem;
    /* Nötig, weil das Bild beim Hinausscrollen leicht skaliert (ganz unten) —
       ohne das ragte es über die Rundung hinaus. */
    overflow: hidden;
    box-shadow: 0 12px 30px rgb(0 0 0 / 0.25);

    @media (min-width: 62rem) {
        margin-block-start: 0;
    }
}

.fest-hero__bild {
    display: block;
    inline-size: 100%;
    block-size: auto;
    /* Am Telefon flacher: Dort steht das Foto unter dem Text, und jede
       Bildhöhe verschiebt die Knöpfe weiter nach unten. Ab 62rem steht es
       daneben und darf sein natürlicheres Format bekommen. */
    aspect-ratio: 16 / 9;
    object-fit: cover;

    @media (min-width: 62rem) {
        aspect-ratio: 3 / 2;
    }
}


/* -------------------------------------------------------------
   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;
}

/* -------------------------------------------------------------
   Programmgruppen — eine Karte je Gruppe, darin eine Liste

   NICHT ZWÖLF EINZELKACHELN IM RASTER. Die erste Fassung tat das und hatte
   drei Schwächen, die sich nicht wegjustieren ließen: leere Zeilenreste bei
   Gruppen mit zwei oder drei Punkten, unterschiedliche Kartenhöhen in
   derselben Zeile, und zwölf gleich aussehende Kästen ohne Hierarchie. Vier
   Karten mit Listen darin sind ruhiger, kürzer und lesen sich wie ein
   Programmheft.
   ------------------------------------------------------------- */

.fest-gruppen {
    display: grid;
    gap: 1rem;

    /* Zwei Gruppen nebeneinander, sobald Platz ist. Der Schnitt liegt bei
       58rem, weil darunter die längeren Punkttitel („Infostände von
       Blaulichtorganisationen") in einer halben Spalte zu oft umbrechen. */
    @media (min-width: 58rem) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        align-items: start;
    }
}

.fest-gruppe {
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: 1.25rem;
    background: #fff;
    /* KEIN Rahmen. Die Abhebung kommt aus Weiß auf getöntem Grund plus einem
       weichen Schatten — mit Rand sah die Seite aus wie ein Formular. */
    box-shadow: 0 2px 4px rgb(20 40 80 / 0.05), 0 10px 24px rgb(20 40 80 / 0.08);
}

.fest-gruppe__titel {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.85rem;
    font-size: clamp(1.15rem, 3.2vw, 1.35rem);
    color: var(--c-primary-dark);
}

.fest-gruppe__chip {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: 50%;
    background: var(--c-primary);
    /* Weiß auf --c-primary = 6.56:1. Das Symbol ist rein dekorativ (der Name
       steht daneben), der Wert gilt trotzdem. */
    color: #fff;
}

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

    /* .page setzt li + li einen Abstand — das trifft jede Liste. Hier steht
       kein .page mehr drum herum; die Regel bleibt als Absicherung, falls die
       Seite je wieder darin landet. */
    .page & > li + li {
        margin-block-start: 0;
    }
}

.fest-punkt {
    display: grid;
    gap: 0.15rem;
    padding-block: 0.7rem;

    /* Trennlinien statt Kästen: Sie gliedern, ohne zwölf Rahmen zu erzeugen. */
    & + & {
        border-block-start: 1px solid rgb(20 40 80 / 0.09);
    }

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

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

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

.fest-punkt__text {
    font-size: 0.97rem;
    line-height: 1.5;
    color: var(--c-text);
    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 {
    padding-block: 2.5rem 3rem;
}

.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;
    background: var(--c-surface);
    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-gruppe,
    .fest-wissen__paar,
    .fest-qr,
    .fest-anfahrt__adresse,
    .fest-eckdaten,
    .fest-hero__vorbei,
    .fest-countdown,
    .fest-route {
        border: 1px solid CanvasText;
    }

    .fest-gruppe__chip,
    .fest-anfahrt__pin,
    .fest-route__icon,
    .fest-countdown__zahl {
        border: 1px solid 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-hero__bild {
            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-hero__bild {
        animation: none;
        translate: none;
        scale: none;
    }
}