/*
 * Gestaltung der Website – wiederverwendbar, alle Farben/Schriften kommen aus tokens.css.
 * Nur logische Eigenschaften (margin-inline, inset-inline …), damit Sprachen mit
 * Schreibrichtung rechts-nach-links ohne Umbau möglich sind.
 */

@layer basis, layout, komponenten, seiten, hilfen;

/* ============================================================ Basis */
@layer basis {
    *, *::before, *::after { box-sizing: border-box; }

    /* „hidden“ muss auch bei Flex- und Grid-Elementen wirken */
    [hidden] { display: none !important; }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-padding-block-start: 6rem;
    }

    body {
        margin: 0;
        background: var(--grund);
        color: var(--text);
        font-family: var(--schrift-text);
        font-size: var(--groesse-text);
        line-height: var(--zeilenhoehe);
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4 {
        font-family: var(--schrift-titel);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.015em;
        margin-block: 0 var(--abstand-4);
        text-wrap: balance;
    }
    h1 { font-size: var(--groesse-h1); letter-spacing: -0.025em; }
    h2 { font-size: var(--groesse-h2); }
    h3 { font-size: var(--groesse-h3); font-weight: 600; }
    h4 { font-size: var(--groesse-text); font-weight: 600; }

    p, ul, ol, dl, blockquote, figure { margin-block: 0 var(--abstand-4); }
    /* Browser geben figure seitlich 40px Rand – Bilder wären sonst schmaler als der Text */
    figure { margin-inline: 0; }
    p { text-wrap: pretty; }

    a {
        color: var(--primaer);
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.18em;
    }
    a:hover { color: var(--primaer-dunkel); text-decoration-thickness: 0.14em; }

    img, svg, picture { display: block; max-inline-size: 100%; block-size: auto; }

    :focus-visible {
        outline: 3px solid var(--fokus);
        outline-offset: 3px;
        border-radius: 4px;
        box-shadow: 0 0 0 6px rgb(255 255 255 / 0.9);
    }

    ::selection { background: var(--gruen-hell); color: var(--text); }

    hr { border: 0; border-block-start: 1px solid var(--linie); margin-block: var(--abstand-6); }

    abbr[title] { text-decoration: underline dotted; }
}

/* ============================================================ Layout */
@layer layout {
    .huelle {
        inline-size: min(100% - 2 * var(--rand), var(--breite));
        margin-inline: auto;
    }
    .huelle--schmal { inline-size: min(100% - 2 * var(--rand), var(--breite-text)); }

    .abschnitt { padding-block: var(--abstand-8); }
    .abschnitt--warm { background: var(--flaeche-warm); }
    .abschnitt--weiss { background: var(--flaeche); }

    .abschnitt-kopf {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: var(--abstand-3) var(--abstand-6);
        margin-block-end: var(--abstand-6);
    }
    .abschnitt-kopf h2 { margin: 0; }
    .abschnitt-kopf p { margin: 0; color: var(--text-leise); max-inline-size: 38rem; }

    .ueberzeile {
        display: inline-flex;
        align-items: center;
        gap: var(--abstand-2);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: var(--groesse-klein);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--primaer);
        margin-block-end: var(--abstand-3);
    }

    .raster {
        display: grid;
        gap: var(--abstand-5);
        grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--spalte, 18rem)), 1fr));
    }

    .zweispaltig {
        display: grid;
        gap: var(--abstand-7);
        align-items: start;
    }
    @media (min-width: 60rem) {
        .zweispaltig { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
        .zweispaltig--gleich { grid-template-columns: 1fr 1fr; }
    }
}

/* ============================================================ Komponenten */
@layer komponenten {

    /* ---------- Sprunglink */
    .sprunglink {
        position: absolute;
        inset-inline-start: var(--abstand-4);
        inset-block-start: -10rem;
        z-index: 100;
        padding: var(--abstand-3) var(--abstand-5);
        background: var(--dunkelblau);
        color: #fff;
        border-radius: var(--radius-klein);
        font-weight: 700;
    }
    .sprunglink:focus { inset-block-start: var(--abstand-4); color: #fff; }

    /* ---------- Sieben Farbpunkte (Motiv aus dem Logo) */
    .punkte {
        display: flex;
        gap: 0.35rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .punkte span {
        inline-size: 0.55rem;
        block-size: 0.55rem;
        border-radius: 50%;
        background: var(--c);
    }
    .farbband {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        block-size: 6px;
    }
    .farbband span { background: var(--c); }

    /* ---------- Buttons */
    .knopf {
        --knopf-grund: var(--primaer);
        --knopf-text: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--abstand-2);
        min-block-size: 3rem;
        padding: 0.7rem 1.4rem;
        border: 2px solid var(--knopf-grund);
        border-radius: 999px;
        background: var(--knopf-grund);
        color: var(--knopf-text);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        transition: transform var(--dauer), background-color var(--dauer), box-shadow var(--dauer);
    }
    .knopf:hover { --knopf-grund: var(--primaer-dunkel); color: var(--knopf-text); transform: translateY(-1px); box-shadow: var(--schatten); }
    .knopf svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }
    .knopf--hell { --knopf-grund: var(--gruen); --knopf-text: var(--text); }
    .knopf--hell:hover { --knopf-grund: #3fe08b; }
    .knopf--rahmen { background: transparent; color: var(--primaer); }
    .knopf--rahmen:hover { background: var(--primaer); color: #fff; }
    .knopf--weiss { --knopf-grund: #fff; --knopf-text: var(--dunkel); }
    .knopf--weiss:hover { --knopf-grund: var(--gruen-hell); }
    .knopf--klein { min-block-size: 2.5rem; padding: 0.45rem 1rem; font-size: var(--groesse-klein); }

    .textlink {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        font-family: var(--schrift-titel);
        font-weight: 600;
        text-decoration: none;
    }
    .textlink svg { inline-size: 1.1em; block-size: 1.1em; transition: transform var(--dauer); }
    .textlink:hover svg { transform: translateX(3px); }
    [dir="rtl"] .textlink svg { transform: scaleX(-1); }

    .icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }

    /* ---------- Farbzuordnung (Kategorien, Einstiege) */
    .farbe-gruen       { --c: var(--gruen);       --c-text: var(--gruen-text);       --c-hell: var(--gruen-hell); }
    .farbe-cyan        { --c: var(--cyan);        --c-text: var(--cyan-text);        --c-hell: var(--cyan-hell); }
    .farbe-dunkelgruen { --c: var(--dunkelgruen); --c-text: var(--dunkelgruen-text); --c-hell: var(--dunkelgruen-hell); }
    .farbe-rot         { --c: var(--rot);         --c-text: var(--rot-text);         --c-hell: var(--rot-hell); }
    .farbe-violett     { --c: var(--violett);     --c-text: var(--violett-text);     --c-hell: var(--violett-hell); }
    .farbe-orange      { --c: var(--orange);      --c-text: var(--orange-text);      --c-hell: var(--orange-hell); }
    .farbe-dunkelblau  { --c: var(--dunkelblau);  --c-text: var(--dunkelblau-text);  --c-hell: var(--dunkelblau-hell); }

    .marke {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.2rem 0.7rem;
        border-radius: 999px;
        background: var(--c-hell, var(--dunkelgruen-hell));
        color: var(--c-text, var(--primaer));
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: 0.8125rem;
        line-height: 1.4;
        white-space: nowrap;
    }
    .marke::before {
        content: "";
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 50%;
        background: var(--c, var(--primaer));
    }
    .marke--ohne-punkt::before { display: none; }
    .marke svg { inline-size: 1em; block-size: 1em; }
    a.marke { text-decoration: none; }
    a.marke:hover { text-decoration: underline; }
    .karte__meta svg { inline-size: 1.05em; block-size: 1.05em; color: var(--c-text, var(--primaer)); }
    .stapel-klein { display: grid; gap: var(--abstand-2); min-inline-size: 0; }
    .stapel-klein > * { margin: 0; }
    .marke--abgesagt { background: var(--rot); color: #fff; }
    .marke--abgesagt::before { background: #fff; }
    .marke--bald { background: var(--dunkelblau); color: #fff; }
    .marke--bald::before { background: var(--gruen); animation: pulsieren 1.8s ease-in-out infinite; }

    @keyframes pulsieren {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(0.7); }
    }

    /* ---------- Ankündigungen */
    .ankuendigungen { font-size: var(--groesse-klein); }
    .ankuendigung {
        padding-block: var(--abstand-3);
        background: var(--gruen-hell);
        color: var(--text);
        border-block-end: 1px solid rgb(0 0 0 / 0.06);
    }
    .ankuendigung--wichtig { background: var(--rot); color: #fff; }
    .ankuendigung--wichtig a { color: #fff; }
    .ankuendigung .huelle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--abstand-2) var(--abstand-4);
        text-align: center;
    }
    .ankuendigung p { margin: 0; font-weight: 700; }
    .ankuendigung a { font-weight: 700; white-space: nowrap; }

    /* ---------- Kopfzeile */
    .kopf {
        position: sticky;
        inset-block-start: 0;
        z-index: 50;
        background: rgb(255 255 255 / 0.94);
        backdrop-filter: saturate(1.4) blur(10px);
        border-block-end: 1px solid var(--linie);
    }
    .kopf__innen {
        /* Die Kopfzeile darf breiter sein als der Textbereich, damit das Menü in eine Zeile passt */
        inline-size: min(100% - 2 * var(--rand), 96rem);
        display: flex;
        align-items: center;
        gap: var(--abstand-4);
        min-block-size: 4.75rem;
    }
    .kopf__knoepfe {
        display: flex;
        align-items: center;
        gap: var(--abstand-3);
        flex: none;
        /* Abstand zum Menü: Kontakt und Radio stehen bewusst etwas ab */
        margin-inline-start: auto;
        padding-inline-start: var(--abstand-5);
    }
    .kopf__logo { display: block; flex: none; border-radius: var(--radius-klein); }
    .kopf__logo img { inline-size: auto; block-size: clamp(2.4rem, 2rem + 1.2vw, 3rem); }

    .navigation { flex: 0 1 auto; }
    .navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.15rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .navigation a {
        display: block;
        padding: 0.55rem 0.85rem;
        border-radius: 999px;
        color: var(--text);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: 0.975rem;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color var(--dauer), color var(--dauer);
    }
    .navigation a:hover { background: var(--dunkelgruen-hell); color: var(--primaer); }
    .navigation a[aria-current] { background: var(--primaer); color: #fff; }

    .menueknopf {
        display: none;
        align-items: center;
        gap: var(--abstand-2);
        min-block-size: 2.75rem;
        padding: 0.4rem 1rem;
        border: 2px solid var(--primaer);
        border-radius: 999px;
        background: #fff;
        color: var(--primaer);
        font: 600 1rem/1 var(--schrift-titel);
        cursor: pointer;
    }
    .menueknopf .icon--zu { display: none; }
    .menueknopf[aria-expanded="true"] .icon--auf { display: none; }
    .menueknopf[aria-expanded="true"] .icon--zu { display: block; }

    /* Kontakt als Knopf rechts neben dem Menü */
    .kopfknopf {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 0.45rem;
        min-block-size: 2.75rem;
        padding: 0.4rem 1.1rem;
        border: 2px solid var(--primaer);
        border-radius: 999px;
        background: var(--flaeche);
        color: var(--primaer);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: 0.975rem;
        text-decoration: none;
        white-space: nowrap;
        transition: background-color var(--dauer), color var(--dauer);
    }
    .kopfknopf svg { inline-size: 1.05em; block-size: 1.05em; }
    .kopfknopf:hover { background: var(--primaer); color: #fff; }
    .kopfknopf[aria-current] { background: var(--primaer); color: #fff; }

    /* Suche: bewusst kein Knopf, sondern ein Werkzeug – nur die Lupe, ohne Rahmen und ohne
       Beschriftung. So stehen rechts neben dem Menü nur zwei echte Knöpfe (Kontakt, Radio).
       Die Trefferfläche bleibt 2.75rem × 2.75rem, der Name steht für Screenreader im Markup. */
    .suchknopf {
        display: inline-flex;
        flex: none;
        align-items: center;
        justify-content: center;
        inline-size: 2.75rem;
        block-size: 2.75rem;
        border-radius: 999px;
        color: var(--text-leise);
        text-decoration: none;
        transition: background-color var(--dauer), color var(--dauer);
    }
    .suchknopf svg { inline-size: 1.35rem; block-size: 1.35rem; }
    .suchknopf:hover { background: var(--dunkelgruen-hell); color: var(--primaer); }
    .suchknopf[aria-current] { background: var(--primaer); color: #fff; }

    /* Feiner Strich zwischen dem Werkzeug „Suche“ und dem Knopfpaar */
    .kopf__trenner {
        flex: none;
        inline-size: 1px;
        block-size: 1.75rem;
        background: var(--linie);
    }

    /* Hervorgehobener Knopf zu einem externen Angebot (Refugee Radio) */
    .radioknopf {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 0.6rem;
        min-block-size: 2.75rem;
        padding: 0.4rem 1.1rem 0.4rem 0.9rem;
        border-radius: 999px;
        background: linear-gradient(120deg, var(--violett) 0%, #C42A6B 55%, var(--orange) 100%);
        color: #fff;
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: 0.975rem;
        text-decoration: none;
        white-space: nowrap;
        box-shadow: 0 2px 10px -2px rgb(149 27 129 / 0.5);
        transition: transform var(--dauer), box-shadow var(--dauer), filter var(--dauer);
    }
    .radioknopf:hover { filter: saturate(1.15) brightness(1.06); box-shadow: 0 6px 18px -4px rgb(149 27 129 / 0.55); }
    .radioknopf:active { transform: translateY(1px); }

    /* Tonbalken wie bei einer Aussteuerungsanzeige */
    .radioknopf__welle {
        display: flex;
        align-items: center;
        gap: 2px;
        block-size: 1.05rem;
    }
    .radioknopf__welle span {
        display: block;
        inline-size: 3px;
        block-size: 35%;
        border-radius: 2px;
        background: currentColor;
        animation: tonbalken 1.1s ease-in-out infinite;
    }
    .radioknopf__welle span:nth-child(2) { animation-delay: 0.18s; }
    .radioknopf__welle span:nth-child(3) { animation-delay: 0.36s; }
    .radioknopf__welle span:nth-child(4) { animation-delay: 0.54s; }
    @keyframes tonbalken {
        0%, 100% { block-size: 30%; }
        50% { block-size: 100%; }
    }

    /* Zwischenbreiten: Menü kompakter, damit alles in eine Zeile passt */
    @media (min-width: 80.01rem) and (max-width: 96rem) {
        .kopf__innen { gap: var(--abstand-3); }
        .kopf__knoepfe { padding-inline-start: var(--abstand-4); }
        .navigation ul { flex-wrap: nowrap; }
        .navigation a { padding-inline: 0.55rem; font-size: 0.9375rem; }
        .kopfknopf, .radioknopf { padding-inline: 0.85rem; font-size: 0.9375rem; }
    }

    /* Kontakt steht im aufklappbaren Menü, deshalb dort kein zweiter Eintrag */
    @media (min-width: 80.01rem) {
        .navigation__mobil { display: none; }
    }

    /*
     * Ab hier klappt das Menü auf. Die Kopfzeile bricht dann um, deshalb bekommt sie eigene
     * senkrechte Abstände: `min-block-size` allein wirkt nur, solange alles in einer Zeile
     * steht – sobald das Menü offen ist, klebte die obere Zeile sonst am Bildschirmrand.
     * Die Reihenfolge wird vollständig gesetzt, damit sie auch dann stimmt, wenn einzelne
     * Knöpfe ausgeblendet sind: Logo, Suche, Radio, Menüknopf, Menü.
     */
    @media (max-width: 80rem) {
        .kopf__innen {
            flex-wrap: wrap;
            gap: var(--abstand-3);
            min-block-size: 0;
            padding-block: var(--abstand-3);
        }
        /* Das Logo darf schrumpfen, statt die Knöpfe in die nächste Zeile zu drücken */
        .kopf__logo { flex: 0 1 auto; min-inline-size: 0; margin-inline-end: auto; }
        .kopf__logo img { inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: 2.5rem; }
        .kopf__knoepfe { order: 1; margin-inline-start: 0; padding-inline-start: 0; }
        .radioknopf { order: 2; }
        .js .menueknopf { display: inline-flex; order: 3; }
        .kopfknopf { display: none; }
        .navigation {
            order: 4;
            inline-size: 100%;
            padding-block: var(--abstand-3);
            border-block-start: 1px solid var(--linie);
            /* Bei vielen Einträgen auf kleinen Geräten bleibt das Menü scrollbar */
            max-block-size: calc(100dvh - 9rem);
            overflow-y: auto;
        }
        .js .navigation { display: none; }
        .js .navigation.offen { display: block; }
        .navigation ul { flex-direction: column; }
        .navigation a { padding: 0.8rem 1rem; border-radius: var(--radius-klein); font-size: 1.0625rem; }
        /* Kontakt im aufgeklappten Menü als Knopf unter den Menüpunkten, eckig wie deren Hover */
        .navigation__mobil { margin-block-start: var(--abstand-3); }
        .navigation .navigation__mobil a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-block-size: 2.75rem;
            padding: 0.7rem 1.1rem;
            border: 2px solid var(--primaer);
            border-radius: var(--radius-klein);
            color: var(--primaer);
        }
        .navigation__mobil svg { inline-size: 1.05em; block-size: 1.05em; }
        .navigation .navigation__mobil a:hover,
        .navigation .navigation__mobil a[aria-current] { background: var(--primaer); color: #fff; }
    }
    /* Ohne JavaScript steht das Menü als Zeile da, dort ohne zusätzlichen Abstand */
    @media (max-width: 80rem) and (scripting: none) {
        .navigation__mobil { margin-block-start: 0; }
    }

    /* Telefon: In der Kopfzeile bleiben Logo, Suche und Menüknopf. Der Radio-Knopf steht
       dann über die volle Breite unter dem aufgeklappten Menü. */
    @media (max-width: 48rem) {
        .kopf__trenner { display: none; }
        .radioknopf { order: 5; inline-size: 100%; justify-content: center; }
        .js .navigation:not(.offen) ~ .radioknopf { display: none; }
    }

    /* Sehr schmal: Der Menüknopf zeigt nur noch das Symbol, der Name bleibt für Screenreader */
    @media (max-width: 30rem) {
        .menueknopf { gap: 0; inline-size: 2.75rem; padding-inline: 0; justify-content: center; }
        .menueknopf__text {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }
    }
    @media (max-width: 80rem) and (scripting: none) {
        .navigation ul { flex-direction: row; }
    }

    /* ---------- Seitenkopf (Unterseiten) */
    .seitenkopf {
        position: relative;
        overflow: hidden;
        padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
        background: var(--flaeche);
        border-block-end: 1px solid var(--linie);
    }
    .seitenkopf h1 { max-inline-size: 22ch; margin-block-end: var(--abstand-3); }
    .seitenkopf__einleitung { font-size: var(--groesse-gross); color: var(--text-leise); max-inline-size: 40rem; margin: 0; }
    .seitenkopf::after {
        /* dezentes Punktmuster in den Logofarben */
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        inline-size: min(40%, 26rem);
        background:
            radial-gradient(circle at 20% 30%, var(--gruen) 0 0.55rem, transparent 0.6rem),
            radial-gradient(circle at 55% 18%, var(--cyan) 0 0.4rem, transparent 0.45rem),
            radial-gradient(circle at 82% 38%, var(--dunkelblau) 0 0.7rem, transparent 0.75rem),
            radial-gradient(circle at 70% 70%, var(--orange) 0 0.5rem, transparent 0.55rem),
            radial-gradient(circle at 40% 82%, var(--rot) 0 0.45rem, transparent 0.5rem),
            radial-gradient(circle at 12% 66%, var(--violett) 0 0.35rem, transparent 0.4rem),
            radial-gradient(circle at 92% 88%, var(--dunkelgruen) 0 0.5rem, transparent 0.55rem);
        opacity: 0.85;
        pointer-events: none;
    }
    /* Ab hier liefe die Einleitung (bis 40rem breit, plus Rand) in das Punktmuster (26rem am
       Ende der Zeile) hinein – die Punkte treten also zurück, sobald der Text sie erreicht,
       und nicht erst auf Telefonen. */
    @media (max-width: 69rem) { .seitenkopf::after { opacity: 0.25; } }
    /* Der Inhalt liegt über dem Muster – sonst malen die Punkte über Suchfeld und Knopf
       auf /suche/. z-index bleibt weit unter der Kopfzeile (50). */
    .seitenkopf .huelle { position: relative; z-index: 1; }

    .brotkrumen { font-size: var(--groesse-klein); margin-block-end: var(--abstand-4); }
    .brotkrumen ol { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
    .brotkrumen li + li::before { content: "›"; margin-inline-end: 0.4rem; color: var(--text-leise); }
    .brotkrumen a { color: var(--text-leise); }

    /* ---------- Karten */
    .karte {
        position: relative;
        display: flex;
        flex-direction: column;
        background: var(--flaeche);
        border: 1px solid var(--linie);
        border-radius: var(--radius);
        overflow: hidden;
        transition: transform var(--dauer), box-shadow var(--dauer), border-color var(--dauer);
    }
    .karte:has(a.karte__link:hover) { transform: translateY(-3px); box-shadow: var(--schatten-hoch); border-color: transparent; }
    .karte__inhalt { display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-5); flex: 1; }
    .karte__titel { font-size: var(--groesse-h3); margin: 0; }
    .karte__link { color: var(--text); text-decoration: none; }
    .karte__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
    .karte__link:focus-visible { outline: none; box-shadow: none; }
    .karte:has(.karte__link:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
    .karte__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); color: var(--text-leise); font-size: var(--groesse-klein); }
    .karte__text { color: var(--text-leise); margin: 0; }
    .karte__bild { aspect-ratio: 16 / 9; background: var(--c-hell, var(--flaeche-warm)); overflow: hidden; }
    .karte__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 400ms ease; }
    .karte:has(a.karte__link:hover) .karte__bild img { transform: scale(1.04); }

    /* Ersatzgrafik, wenn kein Foto vorhanden ist */
    .muster {
        position: relative;
        block-size: 100%;
        background-color: var(--c-hell, var(--gruen-hell));
        background-image:
            radial-gradient(circle at 18% 32%, var(--c, var(--gruen)) 0 14%, transparent 14.5%),
            radial-gradient(circle at 72% 64%, color-mix(in srgb, var(--c, var(--gruen)) 55%, #fff) 0 22%, transparent 22.5%),
            radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--c, var(--gruen)) 30%, #fff) 0 9%, transparent 9.5%);
    }

    /* ---------- Einstiege (Startseite) */
    .einstiege {
        display: grid;
        gap: var(--abstand-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    }
    .einstieg {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--abstand-2);
        padding: var(--abstand-5);
        background: var(--flaeche);
        border-radius: var(--radius);
        border: 1px solid var(--linie);
        border-block-start: 6px solid var(--c);
        box-shadow: var(--schatten);
        transition: transform var(--dauer), box-shadow var(--dauer);
    }
    .einstieg:has(a:hover) { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }
    .einstieg__icon {
        display: grid;
        place-items: center;
        inline-size: 3rem;
        block-size: 3rem;
        border-radius: 50%;
        background: var(--c-hell);
        color: var(--c-text);
    }
    .einstieg__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
    .einstieg h3 { margin: var(--abstand-2) 0 0; }
    .einstieg a { color: var(--text); text-decoration: none; }
    .einstieg a::after { content: ""; position: absolute; inset: 0; }
    .einstieg p { margin: 0; color: var(--text-leise); }
    .einstieg__pfeil { margin-block-start: auto; padding-block-start: var(--abstand-2); color: var(--c-text); }
    .einstieg:has(a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
    a.einstieg { color: var(--text); text-decoration: none; }
    a.einstieg:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); color: var(--text); }
    .h3 { font-size: var(--groesse-h3); font-weight: 600; }
    .kasten--dunkel .ueberzeile { color: var(--gruen); }
    .einstieg a:focus-visible { outline: none; box-shadow: none; }

    /* ---------- Termin (kompakt, Startseite) */
    .terminkarte { border-block-start: 6px solid var(--c, var(--primaer)); }
    .terminkarte .karte__inhalt { flex-direction: row; gap: var(--abstand-4); align-items: flex-start; }
    .kalenderblatt {
        flex: none;
        display: grid;
        place-items: center;
        inline-size: 4.5rem;
        padding-block: 0.6rem;
        border-radius: var(--radius-klein);
        background: var(--c-hell, var(--gruen-hell));
        color: var(--c-text, var(--primaer));
        font-family: var(--schrift-titel);
        text-align: center;
        line-height: 1;
    }
    .kalenderblatt__tag { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
    .kalenderblatt__zahl { font-size: 2rem; font-weight: 700; margin-block: 0.2rem; color: var(--text); }
    .kalenderblatt__monat { font-size: 0.8rem; font-weight: 600; }
    .terminkarte .karte__titel { font-size: 1.2rem; }

    /* ---------- Fließtext */
    .text { max-inline-size: var(--breite-text); }
    .text > * + h2 { margin-block-start: var(--abstand-7); }
    .text > * + h3 { margin-block-start: var(--abstand-6); }
    .text ul, .text ol { padding-inline-start: 1.3em; }
    .text li { margin-block-end: var(--abstand-2); }
    .text li::marker { color: var(--primaer); }
    .text blockquote {
        margin-inline: 0;
        padding: var(--abstand-4) var(--abstand-5);
        border-inline-start: 5px solid var(--gruen);
        background: var(--flaeche);
        border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
        font-size: var(--groesse-gross);
    }
    .einleitung { font-size: var(--groesse-gross); }
    .text .textbild { display: block; margin-block: var(--abstand-5); }
    .text .textbild img { inline-size: 100%; border-radius: var(--radius-klein); }
    /* Mehrere Bilder hintereinander → kleine Galerie */
    .text .textbild:has(+ .textbild), .text .textbild + .textbild {
        display: inline-block;
        inline-size: 31.5%;
        margin-block: 0 var(--abstand-3);
        margin-inline-end: 1.2%;
        vertical-align: top;
    }
    .text .textbild:has(+ .textbild) img, .text .textbild + .textbild img { aspect-ratio: 4 / 3; object-fit: cover; }
    @media (max-width: 36rem) {
        .text .textbild:has(+ .textbild), .text .textbild + .textbild { inline-size: 47.5%; }
    }

    /* ---------- Kästen */
    .kasten {
        padding: var(--abstand-5) var(--abstand-6);
        border-radius: var(--radius);
        background: var(--flaeche);
        border: 1px solid var(--linie);
    }
    .kasten > :last-child { margin-block-end: 0; }
    .kasten--farbe { background: var(--c-hell); border-color: transparent; }
    .kasten--dunkel { background: var(--dunkel); color: var(--dunkel-text); border: 0; }
    .kasten--dunkel a { color: #fff; }
    .kasten h2, .kasten h3 { margin-block-end: var(--abstand-3); }

    /* Hinweis auf ein weiterführendes Angebot – ganze Karte ist ein Link */
    .tippkarte {
        display: flex;
        align-items: center;
        gap: var(--abstand-4);
        padding: var(--abstand-4) var(--abstand-5);
        margin-block: var(--abstand-5);
        border: 2px solid var(--c, var(--primaer));
        border-radius: var(--radius);
        background: var(--flaeche);
        color: var(--text);
        text-decoration: none;
        transition: transform var(--dauer), box-shadow var(--dauer), background-color var(--dauer);
    }
    .tippkarte:hover { background: var(--c-hell, var(--dunkelgruen-hell)); color: var(--text); transform: translateY(-2px); box-shadow: var(--schatten); }
    .tippkarte__icon {
        flex: none;
        display: grid;
        place-items: center;
        inline-size: 3rem;
        block-size: 3rem;
        border-radius: 50%;
        background: var(--c, var(--primaer));
        color: #fff;
    }
    .tippkarte__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
    .tippkarte__text { display: grid; gap: 0.15rem; min-inline-size: 0; }
    .tippkarte__titel { font-family: var(--schrift-titel); font-size: var(--groesse-h3); line-height: 1.2; }
    .tippkarte__zeile { color: var(--text-leise); font-size: var(--groesse-klein); }
    .tippkarte__pfeil { flex: none; margin-inline-start: auto; color: var(--c-text, var(--primaer)); }
    .tippkarte__pfeil svg { inline-size: 1.5rem; block-size: 1.5rem; transition: transform var(--dauer); }
    .tippkarte:hover .tippkarte__pfeil svg { transform: translateX(4px); }
    [dir="rtl"] .tippkarte__pfeil svg { transform: scaleX(-1); }
    @media (max-width: 30rem) {
        .tippkarte { flex-wrap: wrap; gap: var(--abstand-3); }
        .tippkarte__pfeil { margin-inline-start: 0; }
    }

    .hinweis {
        display: flex;
        gap: var(--abstand-3);
        padding: var(--abstand-4) var(--abstand-5);
        border-radius: var(--radius-klein);
        background: var(--dunkelblau-hell);
        color: var(--text);
    }
    .hinweis .icon { color: var(--dunkelblau); margin-block-start: 0.2em; }
    .hinweis p { margin: 0; }
    /* Hinweis mit zusätzlichem Knopf darunter (Danke-Meldung des Kontaktformulars) */
    .hinweis__inhalt { display: grid; justify-items: start; gap: var(--abstand-3); }
    .hinweis--fehler { background: var(--rot-hell); }
    .hinweis--fehler .icon { color: var(--rot-text); }

    /* ---------- Faktenliste (Termin-Details, Kontakt) */
    .fakten { display: grid; gap: var(--abstand-4); margin: 0; }
    .fakten div { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 var(--abstand-2); }
    .fakten dt {
        grid-row: span 2;
        display: grid;
        place-items: center;
        inline-size: 2.5rem;
        block-size: 2.5rem;
        border-radius: 50%;
        background: var(--c-hell, var(--gruen-hell));
        color: var(--c-text, var(--primaer));
    }
    .fakten dt svg { inline-size: 1.2rem; block-size: 1.2rem; }
    .fakten .fakten__name { font-size: var(--groesse-klein); color: var(--text-leise); font-weight: 700; line-height: 1.3; }
    .fakten dd { margin: 0; font-weight: 700; }
    .fakten dd small { display: block; font-weight: 400; color: var(--text-leise); font-size: var(--groesse-klein); }
    /* „Route planen“ unter der Adresse (Kontakt) */
    .fakten .route { grid-column: 2; margin-block-start: var(--abstand-3); }
    /* „Anderer Kartendienst“ unter „Route planen“ – nur Links, ohne JavaScript */
    .kartenwahl { margin-block: var(--abstand-2) var(--abstand-4); font-size: var(--groesse-klein); font-weight: 400; }
    .kartenwahl summary { cursor: pointer; color: var(--text-leise); }
    .kartenwahl ul { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-3); margin-block: var(--abstand-2) 0; margin-inline: 0; padding: 0; list-style: none; }
    .kartenwahl li { margin: 0; }

    /* ---------- Filter-Chips */
    .filter { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
    .filter a {
        display: inline-flex;
        align-items: center;
        gap: 0.5em;
        min-block-size: 2.75rem;
        padding: 0.45rem 1rem;
        border: 2px solid var(--c, var(--linie));
        border-radius: 999px;
        background: var(--flaeche);
        color: var(--text);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        transition: background-color var(--dauer), transform var(--dauer);
    }
    .filter a::before {
        content: "";
        inline-size: 0.6rem;
        block-size: 0.6rem;
        border-radius: 50%;
        background: var(--c, var(--primaer));
    }
    .filter a:hover { background: var(--c-hell, var(--dunkelgruen-hell)); transform: translateY(-1px); }
    .filter a[aria-current] { background: var(--c, var(--primaer)); border-color: var(--c, var(--primaer)); color: #fff; }
    .filter a[aria-current]::before { background: #fff; }
    .filter .farbe-gruen a[aria-current], .filter .farbe-cyan a[aria-current], .filter .farbe-orange a[aria-current] { color: var(--text); }
    .filter .farbe-gruen a[aria-current]::before, .filter .farbe-cyan a[aria-current]::before, .filter .farbe-orange a[aria-current]::before { background: var(--text); }
    .filter__anzahl { font-weight: 400; opacity: 0.8; }

    /* ---------- Seitenwechsel */
    .blaettern { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--abstand-2); margin-block-start: var(--abstand-7); }
    .blaettern ol { display: flex; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
    .blaettern a, .blaettern span {
        display: grid;
        place-items: center;
        min-inline-size: 2.75rem;
        min-block-size: 2.75rem;
        padding-inline: 0.8rem;
        border-radius: 999px;
        border: 1px solid var(--linie);
        background: var(--flaeche);
        font-weight: 700;
        text-decoration: none;
    }
    .blaettern [aria-current] { background: var(--primaer); color: #fff; border-color: var(--primaer); }

    /* ---------- Formulare */
    .formular { display: grid; gap: var(--abstand-5); }
    .feld { display: grid; gap: var(--abstand-2); }
    .feld label { font-weight: 700; }
    .feld__hilfe { font-size: var(--groesse-klein); color: var(--text-leise); margin: 0; }
    .feld input, .feld textarea {
        inline-size: 100%;
        min-block-size: 3rem;
        padding: 0.7rem 0.9rem;
        border: 2px solid #8C8579;
        border-radius: var(--radius-klein);
        background: #fff;
        color: var(--text);
        font: inherit;
        transition: border-color var(--dauer), box-shadow var(--dauer);
    }
    .feld textarea { min-block-size: 10rem; resize: vertical; }
    .feld input:focus-visible, .feld textarea:focus-visible { border-color: var(--fokus); outline: 3px solid color-mix(in srgb, var(--fokus) 35%, transparent); outline-offset: 0; box-shadow: none; }
    .feld--fehler input, .feld--fehler textarea { border-color: var(--rot-text); background: #FFFBFB; }
    .feld__fehler { display: flex; gap: 0.4em; align-items: flex-start; margin: 0; color: var(--rot-text); font-weight: 700; font-size: var(--groesse-klein); }
    .feld__fehler:empty { display: none; }
    .pflicht { color: var(--rot-text); }
    .honigtopf { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .formular__meldung:empty { display: none; }
    .formular__reihe { display: grid; gap: var(--abstand-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
    .formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-4); }
    .formular[aria-busy="true"] button[type="submit"] { opacity: 0.7; cursor: progress; }

    /* Haken mit Beschriftung (z. B. „Kopie an mich“) */
    .haken { display: grid; grid-template-columns: auto 1fr; gap: var(--abstand-2) var(--abstand-3); align-items: center; }
    .haken input {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        margin: 0;
        accent-color: var(--primaer);
    }
    .haken label { font-weight: 700; }
    .haken .feld__hilfe { grid-column: 2; }

    /* ---------- Spendenkonto */
    .konto { display: grid; gap: var(--abstand-3); margin: 0; }
    .konto div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-2) var(--abstand-4); padding-block-end: var(--abstand-3); border-block-end: 1px dashed rgb(255 255 255 / 0.25); }
    .konto div:last-child { border: 0; padding: 0; }
    .konto dt { color: var(--dunkel-leise); font-size: var(--groesse-klein); }
    .konto dd { margin: 0; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.1rem; }
    .konto__iban { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
    .kopierknopf {
        display: none;
        align-items: center;
        gap: 0.35em;
        padding: 0.3rem 0.75rem;
        border: 1px solid currentColor;
        border-radius: 999px;
        background: transparent;
        color: inherit;
        font: 600 0.85rem/1.2 var(--schrift-titel);
        cursor: pointer;
    }
    .js .kopierknopf { display: inline-flex; }
    .kopierknopf svg { inline-size: 1em; block-size: 1em; }

    /* ---------- Personen */
    .person { display: flex; gap: var(--abstand-4); align-items: center; }
    .person__initialen {
        flex: none;
        display: grid;
        place-items: center;
        inline-size: 4rem;
        block-size: 4rem;
        border-radius: 50%;
        background: var(--c-hell);
        color: var(--c-text);
        font: 700 1.3rem/1 var(--schrift-titel);
        box-shadow: inset 0 0 0 3px var(--c);
    }
    .person__foto img {
        inline-size: 4rem;
        block-size: 4rem;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 0 0 3px var(--flaeche), 0 0 0 6px var(--c, var(--gruen));
    }
    .person__foto { flex: none; margin: 6px; }
    .person--gross .person__foto img, .person--gross .person__initialen { inline-size: 8rem; block-size: 8rem; }
    .person--gross { flex-direction: column; align-items: flex-start; }
    .zitat figcaption { margin-block-start: var(--abstand-2); }
    .raster--breit { --spalte: 24rem; }
    /* Bildkarte: Bild und Unterschrift stecken in einem Rahmen, abgerundet wird nur außen */
    .foto-gross, .fotoreihe figure {
        display: flex;
        flex-direction: column;
        margin: 0;
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--flaeche);
        box-shadow: var(--schatten);
    }
    .foto-gross { margin-block: 0 var(--abstand-6); }
    .foto-gross picture, .fotoreihe picture { display: block; }
    .fotoreihe picture { aspect-ratio: 4 / 3; }
    .foto-gross img, .fotoreihe img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; }
    .foto-gross figcaption, .fotoreihe figcaption {
        /* wächst mit, damit nebeneinander stehende Karten gleich hoch sind */
        flex: 1;
        padding: var(--abstand-3) var(--abstand-4);
        font-size: var(--groesse-klein);
        line-height: 1.4;
        color: var(--text-leise);
    }
    .fotoreihe { display: grid; gap: var(--abstand-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-block: var(--abstand-6); }
    .logos { display: grid; gap: var(--abstand-3); grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); margin: 0; padding: 0; list-style: none; }
    /* Nur die Kachel selbst (Kind des Listenpunkts), nicht der Name darin. */
    .logos > li > a, .logos > li > span { display: grid; place-items: center; gap: var(--abstand-2); block-size: 100%; padding: var(--abstand-4); background: #fff; border: 1px solid var(--linie); border-radius: var(--radius-klein); text-align: center; font-size: 0.85rem; line-height: 1.3; color: var(--text); text-decoration: none; }
    .logos > li > a:hover { border-color: var(--primaer); box-shadow: var(--schatten); }
    /* Es gibt Logos im Hoch- und im Querformat: feste Höhe, Breite der Kachel, Seitenverhältnis bleibt
       erhalten (`contain`). Ohne das laufen breite Logos über die Kachel hinaus. */
    .logos picture { display: block; inline-size: 100%; }
    .logos img { inline-size: 100%; block-size: 4.5rem; object-fit: contain; }
    /* Lange Wörter wie „Stadtteilbücherei“ umbrechen statt über den Rand hinauszuragen. */
    .logos__name { min-inline-size: 0; overflow-wrap: break-word; hyphens: auto; }
    .person__name { font-family: var(--schrift-titel); font-weight: 600; font-size: 1.15rem; margin: 0; }
    .person__rolle { margin: 0; color: var(--text-leise); font-size: var(--groesse-klein); }

    /* ---------- Downloadliste */
    .dateien { display: grid; gap: var(--abstand-3); margin: 0; padding: 0; list-style: none; }
    .dateien a {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: var(--abstand-4);
        padding: var(--abstand-4) var(--abstand-5);
        border: 1px solid var(--linie);
        border-radius: var(--radius-klein);
        background: var(--flaeche);
        color: var(--text);
        text-decoration: none;
        transition: border-color var(--dauer), box-shadow var(--dauer);
    }
    .dateien a:hover { border-color: var(--primaer); box-shadow: var(--schatten); }
    .dateien__typ { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--radius-klein); background: var(--rot-hell); color: var(--rot-text); font: 700 0.75rem/1 var(--schrift-titel); }
    .dateien__titel { font-weight: 700; display: block; }
    .dateien__info { font-size: var(--groesse-klein); color: var(--text-leise); }
    .dateien .icon { color: var(--primaer); }

    /* ---------- Chronik */
    .chronik { position: relative; margin: 0; padding: 0; list-style: none; }
    .chronik::before { content: ""; position: absolute; inset-block: 0.5rem; inset-inline-start: 0.55rem; inline-size: 3px; background: linear-gradient(var(--gruen), var(--cyan), var(--dunkelblau), var(--violett), var(--rot), var(--orange), var(--dunkelgruen)); border-radius: 3px; }
    .chronik li { position: relative; padding-inline-start: 2.75rem; padding-block-end: var(--abstand-5); }
    .chronik li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.35rem; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--flaeche); border: 4px solid var(--primaer); }
    .chronik time { font-family: var(--schrift-titel); font-weight: 600; color: var(--primaer); font-size: var(--groesse-klein); }
    .chronik h3 { font-size: 1.15rem; margin: 0.1rem 0 0.25rem; }
    .chronik p { margin: 0; color: var(--text-leise); }

    /* ---------- Zitate */
    .zitat { margin: 0; padding: var(--abstand-6); border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); }
    .zitat blockquote { margin: 0 0 var(--abstand-4); font-size: var(--groesse-gross); }
    .zitat { position: relative; padding-block-start: calc(var(--abstand-6) + 2.5rem); }
    .zitat blockquote::before {
        content: "„";
        position: absolute;
        inset-block-start: -0.75rem;
        inset-inline-start: var(--abstand-6);
        font: 700 4.5rem/1 var(--schrift-titel);
        color: var(--c, var(--gruen));
    }

    /* ---------- Fußzeile */
    .fuss { background: var(--dunkel); color: var(--dunkel-leise); font-size: var(--groesse-klein); }
    .fuss a { color: #fff; }
    .fuss__innen { display: grid; gap: var(--abstand-7); padding-block: var(--abstand-8) var(--abstand-6); }
    @media (min-width: 56rem) { .fuss__innen { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
    .fuss__logo { display: inline-block; padding: 0.75rem 1rem; background: #fff; border-radius: var(--radius-klein); margin-block-end: var(--abstand-4); }
    .fuss__logo img { block-size: 2.5rem; inline-size: auto; }
    .fuss h2 { font-size: 1rem; color: #fff; margin-block-end: var(--abstand-3); letter-spacing: 0.02em; }
    .fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--abstand-2); }
    .fuss address { font-style: normal; }
    .fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--abstand-3); padding-block: var(--abstand-5); border-block-start: 1px solid rgb(255 255 255 / 0.15); }
    .fuss__unten ul { display: flex; flex-wrap: wrap; gap: var(--abstand-5); }
}

/* ============================================================ Seiten */
@layer seiten {

    /* ---------- Startseite: Held */
    .held {
        position: relative;
        overflow: hidden;
        padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
        background:
            radial-gradient(60rem 30rem at 110% -10%, var(--gruen-hell), transparent 60%),
            radial-gradient(40rem 26rem at -10% 110%, var(--cyan-hell), transparent 60%),
            var(--flaeche);
    }
    .held__innen { display: grid; gap: var(--abstand-7); align-items: center; }
    @media (min-width: 62rem) { .held__innen { grid-template-columns: 1.25fr 1fr; } }
    .held h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem); max-inline-size: 13ch; margin-block-end: var(--abstand-5); }
    .held h1 em {
        font-style: normal;
        background: linear-gradient(transparent 62%, color-mix(in srgb, var(--gruen) 55%, transparent) 62% 92%, transparent 92%);
        padding-inline: 0.05em;
    }
    .held__text { font-size: var(--groesse-gross); max-inline-size: 34rem; color: #333; margin-block-end: var(--abstand-6); }
    .held__knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }

    /* Figurenkreis – sieben tanzende Figuren um die Jahreszahl.
       Motiv aus dem Logo, neu gezeichnet. Der äußere Platz dreht die Figur an ihre Stelle
       (Kopf nach außen), die Figur selbst bewegt sich darin – so geraten sich Platzierung
       und Animation nie in die Quere. Markup: templates/teile/figurenkreis.php
       Alle Maße hängen an der Breite des Kreises selbst: eine Figur ist 25 % davon breit, der
       Ringradius 138 % einer Figurenbreite. So passt sich das Motiv seiner Spalte an, ohne
       Bildschirmbreiten zu raten. */
    .figurenkreis {
        position: relative;
        inline-size: min(100%, 30rem);
        aspect-ratio: 1;
        margin-inline: auto;
    }
    .figurenkreis__vorlage { position: absolute; }
    .figurenkreis__platz {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: 25%;
        aspect-ratio: 100 / 124;
        color: var(--c);
        transform: translate(-50%, -50%) rotate(calc(var(--i) * 360deg / 7 - 90deg)) translateX(138%) rotate(90deg);
    }
    .figurenkreis__figur {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        transform-origin: 50% 78%;          /* Drehpunkt an den Füßen: die Figur wippt, statt zu kreiseln */
        scale: var(--s, 1);
        animation: tanzen var(--t, 6s) ease-in-out infinite;
        animation-delay: var(--d, 0s);
    }
    /* Platz, Größe und Takt je Figur – per Klasse statt Inline-Style (strenge CSP) */
    .figurenkreis__platz--1 { --i: 0; --s: 1.06; --t: 6.4s; --d: -0.2s; }
    .figurenkreis__platz--2 { --i: 1; --s: 0.94; --t: 5.6s; --d: -1.6s; }
    .figurenkreis__platz--3 { --i: 2; --s: 1.02; --t: 7.1s; --d: -3.1s; }
    .figurenkreis__platz--4 { --i: 3; --s: 0.9;  --t: 6.1s; --d: -4.4s; }
    .figurenkreis__platz--5 { --i: 4; --s: 1;    --t: 6.8s; --d: -2.4s; }
    .figurenkreis__platz--6 { --i: 5; --s: 0.92; --t: 5.9s; --d: -5.2s; }
    .figurenkreis__platz--7 { --i: 6; --s: 1.04; --t: 7.4s; --d: -3.8s; }

    @keyframes tanzen {
        0%, 100% { translate: 0 2%;  rotate: -3.5deg; }
        50%      { translate: 0 -4%; rotate: 3.5deg; }
    }

    .figurenkreis__mitte {
        position: absolute;
        inset: calc(31% + 0.6rem);          /* endet knapp vor den Füßen der Figuren */
        margin: 0;
        display: grid;
        place-content: center;
        text-align: center;
        border-radius: 50%;
        background: var(--flaeche);
        box-shadow: var(--schatten-hoch);
        font-family: var(--schrift-titel);
    }
    .figurenkreis__zahl {
        font-size: clamp(2.4rem, 2rem + 0.8vw, 3.1rem);
        font-weight: 700;
        line-height: 1;
        color: var(--primaer);
        letter-spacing: -0.03em;
    }
    .figurenkreis__text {
        font-weight: 600;
        font-size: var(--groesse-klein);
        color: var(--text-leise);
        max-inline-size: 11ch;
        margin-inline: auto;
        line-height: 1.3;
        margin-block-start: 0.4rem;
        hyphens: auto;                      /* „Flüchtlingshilfe“ passt sonst nicht in die Scheibe */
    }

    /* Wird die Spalte neben dem Text zu schmal für die Figuren, bleibt dort nur die Jahreszahl
       als farbiger Knopf. */
    @media (min-width: 62rem) and (max-width: 68rem) {
        .figurenkreis {
            inline-size: auto;
            aspect-ratio: auto;
        }
        .figurenkreis__vorlage,
        .figurenkreis__platz { display: none; }
        .figurenkreis__mitte {
            position: static;
            inset: auto;
            inline-size: 11rem;
            aspect-ratio: 1;
            margin-inline: auto;
            background: var(--akzent);
            box-shadow: var(--schatten);
        }
        .figurenkreis__zahl { font-size: 2.5rem; color: var(--dunkel); }
        .figurenkreis__text { color: var(--primaer-dunkel); max-inline-size: 12ch; }
    }

    /* Unter 62rem steht der Kreis nicht mehr neben dem Text, sondern bekäme eine eigene Zeile
       (siehe .held__innen). Dort ist er weg: der Platz gehört Überschrift und Knöpfen. */
    @media (max-width: 61.99rem) {
        .figurenkreis { display: none; }
    }

    .held + .einstiege-bereich { margin-block-start: calc(var(--abstand-7) * -1); position: relative; }

    /* ---------- Veranstaltungen: Kopf */
    .terminkopf {
        position: relative;
        overflow: hidden;
        padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 2vw, 3.5rem);
        background: var(--dunkel);
        color: #fff;
    }
    .terminkopf::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 78% 22%, var(--gruen) 0 3.2rem, transparent 3.25rem),
            radial-gradient(circle at 90% 62%, var(--cyan) 0 2.1rem, transparent 2.15rem),
            radial-gradient(circle at 68% 80%, var(--orange) 0 1.5rem, transparent 1.55rem),
            radial-gradient(circle at 60% 40%, var(--violett) 0 0.9rem, transparent 0.95rem),
            radial-gradient(circle at 97% 18%, var(--rot) 0 1.1rem, transparent 1.15rem),
            radial-gradient(circle at 84% 98%, var(--dunkelblau) 0 2.4rem, transparent 2.45rem);
        opacity: 0.9;
    }
    @media (max-width: 48rem) { .terminkopf::before { opacity: 0.3; } }
    .terminkopf .huelle { position: relative; }
    .terminkopf h1 { color: #fff; max-inline-size: 14ch; }
    .terminkopf p { color: var(--dunkel-leise); font-size: var(--groesse-gross); max-inline-size: 34rem; }
    .terminkopf .brotkrumen a, .terminkopf .brotkrumen li { color: var(--dunkel-leise); }
    .terminkopf__zahl { display: inline-flex; align-items: baseline; gap: 0.5rem; margin-block-start: var(--abstand-3); font-family: var(--schrift-titel); color: #fff; }
    .terminkopf__zahl strong { font-size: 2.5rem; line-height: 1; color: var(--gruen); }

    .terminleiste {
        position: sticky;
        inset-block-start: 4.75rem;
        z-index: 20;
        padding-block: var(--abstand-4);
        background: rgb(250 248 244 / 0.95);
        backdrop-filter: blur(8px);
        border-block-end: 1px solid var(--linie);
    }
    .terminleiste .huelle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-3); }
    @media (max-width: 68rem) { .terminleiste { position: static; } }

    /* ---------- Veranstaltungen: Monate und Zeitleiste */
    .monat { display: grid; gap: var(--abstand-5); margin-block-end: var(--abstand-8); }
    @media (min-width: 60rem) { .monat { grid-template-columns: 14rem 1fr; gap: var(--abstand-6); } }
    .monat__kopf { font-family: var(--schrift-titel); }
    @media (min-width: 60rem) { .monat__kopf { position: sticky; inset-block-start: 11rem; align-self: start; } }
    .monat__name { font-size: clamp(2rem, 1.7rem + 0.9vw, 2.5rem); overflow-wrap: anywhere; line-height: 1; margin: 0; letter-spacing: -0.03em; }
    .monat__jahr { display: block; font-size: 1rem; font-weight: 600; color: var(--text-leise); letter-spacing: 0; margin-block-start: 0.35rem; }
    .monat__anzahl { display: block; font-size: var(--groesse-klein); color: var(--primaer); font-weight: 600; margin-block-start: 0.5rem; }

    .zeitleiste { position: relative; display: grid; gap: var(--abstand-4); margin: 0; padding: 0; list-style: none; }

    .termin {
        position: relative;
        display: grid;
        grid-template-columns: 6.5rem 1fr;
        background: var(--flaeche);
        border: 1px solid var(--linie);
        border-radius: var(--radius);
        overflow: hidden;
        transition: transform var(--dauer), box-shadow var(--dauer), border-color var(--dauer);
    }
    @media (min-width: 44rem) { .termin { grid-template-columns: 8rem 1fr; } }
    .termin:has(.termin__link:hover) { transform: translateY(-3px); box-shadow: var(--schatten-hoch); border-color: transparent; }
    .termin:has(.termin__link:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }

    .termin__datum {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        padding: var(--abstand-4) var(--abstand-2);
        background: var(--c-hell, var(--gruen-hell));
        color: var(--c-text, var(--primaer));
        font-family: var(--schrift-titel);
        text-align: center;
        line-height: 1;
    }
    .termin__datum::after {
        /* Perforation wie bei einer Eintrittskarte */
        content: "";
        position: absolute;
        inset-block: 0.75rem;
        inset-inline-end: -1px;
        border-inline-end: 3px dotted color-mix(in srgb, var(--c, var(--gruen)) 45%, transparent);
    }
    .termin__wochentag { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
    .termin__tag { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.25rem); font-weight: 700; color: var(--text); letter-spacing: -0.04em; }
    .termin__monat { font-size: 0.9rem; font-weight: 600; }
    .termin__uhr { margin-block-start: 0.5rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: 0.8rem; font-weight: 600; }

    .termin__inhalt { display: flex; flex-direction: column; gap: var(--abstand-2); padding: var(--abstand-5); min-inline-size: 0; }
    .termin__marken { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
    .termin__titel { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); margin: 0; }
    .termin__link { color: var(--text); text-decoration: none; }
    .termin__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
    .termin__link:focus-visible { outline: none; box-shadow: none; }
    .termin__link:hover { color: var(--primaer); }
    .termin__meta { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-4); margin: 0; color: var(--text-leise); font-size: var(--groesse-klein); }
    .termin__meta > span { display: inline-flex; align-items: flex-start; gap: 0.4em; }
    .termin__meta > span > svg { margin-block-start: 0.2em; flex: none; }
    .terminkarte .termin__meta { flex-direction: column; }
    .termin__meta svg { inline-size: 1.05em; block-size: 1.05em; color: var(--c-text, var(--primaer)); }
    .termin__text { margin: 0; }
    .termin__aktionen { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--abstand-3); margin-block-start: var(--abstand-2); }
    .termin__aktionen a { font-size: var(--groesse-klein); }

    .termin--abgesagt .termin__titel { text-decoration: line-through; text-decoration-color: var(--rot); text-decoration-thickness: 2px; }
    .termin--abgesagt .termin__datum { filter: grayscale(1); }
    .termin--vorbei { opacity: 0.85; }

    .abschluss { margin-block-start: var(--abstand-8); }
    /* Knöpfe auf dunklem Grund: Farbe des Knopfes gilt, nicht die Linkfarbe des Kastens */
    .kasten--dunkel .knopf { color: var(--knopf-text); }
    .leer {
        display: grid;
        justify-items: center;
        gap: var(--abstand-4);
        padding: var(--abstand-8) var(--abstand-5);
        text-align: center;
        border: 2px dashed var(--linie);
        border-radius: var(--radius);
        background: var(--flaeche);
    }
    .leer .punkte span { inline-size: 0.9rem; block-size: 0.9rem; }
    .leer p { margin: 0; max-inline-size: 32rem; color: var(--text-leise); }

    /* ---------- Veranstaltung (Detail) */
    .terminseite__kopf {
        position: relative;
        overflow: hidden;
        padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
        background: var(--c-hell, var(--gruen-hell));
        border-block-end: 6px solid var(--c, var(--gruen));
    }
    .terminseite__kopf h1 { max-inline-size: 20ch; margin-block: var(--abstand-4); }
    .terminseite__kopf .einleitung { max-inline-size: 38rem; margin: 0; }
    .terminseite__grosstag {
        position: absolute;
        inset-inline-end: var(--rand);
        inset-block-end: -1.5rem;
        font: 700 clamp(8rem, 5rem + 12vw, 16rem)/1 var(--schrift-titel);
        color: var(--c, var(--gruen));
        opacity: 0.22;
        letter-spacing: -0.06em;
        pointer-events: none;
        user-select: none;
    }
    .terminseite__bild { border-radius: var(--radius); overflow: hidden; margin-block-end: var(--abstand-6); box-shadow: var(--schatten); }
    .terminseite__bild img { inline-size: 100%; }
    .terminseite__seite { display: grid; gap: var(--abstand-5); }
    @media (min-width: 60rem) { .terminseite__seite { position: sticky; inset-block-start: 7rem; } }
    .terminseite__knoepfe { display: grid; gap: var(--abstand-3); }

    /* ---------- Meldung (Detail) */
    .artikel__kopf { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--abstand-6); }
    .artikel__kopf h1 { max-inline-size: 24ch; margin-block: var(--abstand-4); }
    .artikel__bild { border-radius: var(--radius); overflow: hidden; margin-block: 0 var(--abstand-7); box-shadow: var(--schatten); }
    .artikel__bild img { inline-size: 100%; }

    /* ---------- Materialsammlung (Kanban-Board) */
    .werkzeuge {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: var(--abstand-4) var(--abstand-5);
        padding: var(--abstand-5);
        margin-block-end: var(--abstand-4);
        background: var(--flaeche);
        border: 1px solid var(--linie);
        border-radius: var(--radius);
        box-shadow: var(--schatten);
    }
    .werkzeuge__suche { flex: 1 1 18rem; display: grid; gap: var(--abstand-2); }
    .werkzeuge__suche label,
    .werkzeuge__feld legend {
        display: flex;
        align-items: center;
        gap: 0.4em;
        padding: 0;
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: var(--groesse-klein);
        color: var(--text);
    }
    .werkzeuge__suche label svg { inline-size: 1em; block-size: 1em; color: var(--primaer); }
    .werkzeuge__suche input {
        inline-size: 100%;
        min-block-size: 2.75rem;
        padding: 0.5rem 0.9rem;
        border: 2px solid var(--linie);
        border-radius: 999px;
        background: var(--grund);
        font-family: var(--schrift-text);
        font-size: 1rem;
        color: var(--text);
    }
    .werkzeuge__suche input:focus-visible { border-color: var(--primaer); }
    .werkzeuge__feld { flex: 0 1 auto; margin: 0; padding: 0; border: 0; }
    .werkzeuge__feld legend { margin-block-end: var(--abstand-2); }
    /* Die Spaltenauswahl steht immer offen und bekommt eine eigene Zeile über die ganze Breite */
    .werkzeuge__spalten { flex: 1 0 100%; border-block-start: 1px solid var(--linie); padding-block-start: var(--abstand-4); }
    .wahl__anzahl { opacity: 0.65; font-variant-numeric: tabular-nums; }
    .werkzeuge__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-4); }
    .werkzeuge--sofort .werkzeuge__knoepfe button { display: none; } /* filtert im Browser sofort */

    /* Auswahl als Chips – die Eingabefelder selbst bleiben bedienbar, nur unsichtbar */
    .wahl { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
    .wahl input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .wahl label {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.4rem 0.9rem;
        border: 2px solid var(--linie);
        border-radius: 999px;
        background: var(--flaeche);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: var(--groesse-klein);
        line-height: 1.2;
        cursor: pointer;
        transition: background-color var(--dauer), border-color var(--dauer), color var(--dauer);
    }
    .wahl label svg { inline-size: 1em; block-size: 1em; }
    .wahl__punkt { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--c, var(--gruen)); }
    .wahl label:hover { background: var(--c-hell, var(--dunkelgruen-hell)); border-color: var(--c, var(--primaer)); }
    .wahl input:checked + label { background: var(--c, var(--primaer)); border-color: var(--c, var(--primaer)); color: #fff; }
    .wahl input:checked + label.farbe-gruen, .wahl input:checked + label.farbe-cyan, .wahl input:checked + label.farbe-orange { color: var(--text); }
    .wahl input:checked + label .wahl__punkt { background: currentColor; }
    .wahl input:focus-visible + label { outline: 3px solid var(--fokus); outline-offset: 3px; }

    .materialien__zahl { margin-block-end: var(--abstand-4); }

    /* Board: volle Breite, Spalten nebeneinander, bei Bedarf seitlich scrollbar */
    .kanban-huelle { position: relative; margin-block: var(--abstand-2) 0; }
    /* Weiche Kanten: So ist zu sehen, dass es seitlich weitergeht, statt abgeschnitten zu wirken */
    .kanban-huelle::before, .kanban-huelle::after {
        content: "";
        position: absolute;
        inset-block: 1.5rem 0;   /* nicht über den oberen Scrollbalken legen */
        inline-size: var(--rand);
        pointer-events: none;
        z-index: 1;
    }
    .kanban-huelle::before { inset-inline-start: 0; background: linear-gradient(to right, var(--grund) 35%, transparent); }
    .kanban-huelle::after { inset-inline-end: 0; background: linear-gradient(to left, var(--grund) 35%, transparent); }
    .kanban {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(17.5rem, 1fr);
        gap: var(--abstand-4);
        align-items: start;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        /* Rand wie bei .huelle, damit die erste und letzte Spalte nicht am Fensterrand kleben */
        padding: 4px var(--rand) var(--abstand-4);
        scroll-padding-inline: var(--rand);
        overscroll-behavior-x: contain;
    }

    /* Zweiter Scrollbalken über dem Board (wird von site.js mit ihm gekoppelt) */
    .kanban__leiste {
        /* Gleiche Breite wie das Board, damit beide Balken exakt gleich laufen */
        block-size: 1rem;
        overflow-x: auto;
        overflow-y: hidden;
        margin-block-end: var(--abstand-2);
        scrollbar-color: var(--primaer) var(--flaeche-warm);
    }
    .kanban__leiste > div { block-size: 1px; }
    .kanban__spalte {
        position: relative;
        scroll-snap-align: start;
        display: flex;
        flex-direction: column;
        min-inline-size: 0;
        background: var(--flaeche-warm);
        border-radius: var(--radius);
        padding: var(--abstand-4);
        scroll-margin-block-start: 8rem;
    }
    .kanban__kopf {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--abstand-3);
        padding-block-end: var(--abstand-3);
        margin-block-end: var(--abstand-4);
        border-block-end: 4px solid var(--c, var(--gruen));
    }
    .kanban__kopf h2 { margin: 0; font-size: 1.0625rem; }
    .kanban__anzahl {
        flex: none;
        min-inline-size: 1.75rem;
        padding: 0.1rem 0.5rem;
        border-radius: 999px;
        background: var(--flaeche);
        color: var(--text-leise);
        font-family: var(--schrift-titel);
        font-size: var(--groesse-klein);
        font-weight: 700;
        text-align: center;
    }
    .kanban__karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--abstand-3); margin: 0; padding: 0; list-style: none; align-content: start; }
    .kanban__hinweis { margin-block: var(--abstand-2) var(--abstand-6); }
    @media (max-width: 48rem) { .kanban__hinweis { display: none; } }

    /* Lange Spalten enden nach ein paar Karten – „Mehr ansehen“ klappt den Rest auf (ohne JavaScript) */
    .mehr__schalter {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    /* Der Schalter steht unter dem Board, deshalb :has() statt Geschwister-Auswahl */
    .kanban-huelle:has(.mehr__schalter:not(:checked)) .karte-m--verdeckt { display: none; }
    /* Verlauf am unteren Ende gekürzter Spalten: Es ist zu sehen, dass die Spalte weitergeht */
    .kanban-huelle:has(.mehr__schalter:not(:checked)) .kanban__spalte--gekuerzt::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        block-size: 3.5rem;
        border-end-start-radius: var(--radius);
        border-end-end-radius: var(--radius);
        background: linear-gradient(to bottom, transparent, var(--flaeche-warm));
        pointer-events: none;
    }
    .mehr__zeile { display: flex; justify-content: center; margin: var(--abstand-2) 0 0; padding-inline: var(--rand); }
    .mehr__knopf {
        display: block;
        min-inline-size: 16rem;
        padding: 0.7rem 1.4rem;
        border: 2px solid var(--linie);
        border-radius: 999px;
        background: var(--flaeche);
        color: var(--primaer);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: 1rem;
        text-align: center;
        cursor: pointer;
        transition: background-color var(--dauer), border-color var(--dauer);
    }
    .mehr__knopf:hover { background: var(--dunkelgruen-hell); border-color: var(--primaer); }
    .mehr__schalter:focus-visible + .mehr__knopf { outline: 3px solid var(--fokus); outline-offset: 3px; }
    .mehr__schalter:not(:checked) + .mehr__knopf .mehr__zu,
    .mehr__schalter:checked + .mehr__knopf .mehr__auf { display: none; }

    .karte-m {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--abstand-2);
        padding: var(--abstand-4);
        background: var(--flaeche);
        border: 1px solid var(--linie);
        border-inline-start: 5px solid var(--c, var(--gruen));
        border-radius: var(--radius-klein);
        transition: transform var(--dauer), box-shadow var(--dauer);
    }
    .karte-m:has(.karte-m__link:hover) { transform: translateY(-2px); box-shadow: var(--schatten); }
    .karte-m:has(.karte-m__link:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
    .karte-m__link { text-decoration: none; color: var(--text); }
    .karte-m__link::after { content: ""; position: absolute; inset: 0; }
    .karte-m__link:focus-visible { outline: none; box-shadow: none; }
    .karte-m__art {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        font-family: var(--schrift-titel);
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--c-text, var(--primaer));
        margin-block-end: var(--abstand-1);
        overflow-wrap: anywhere;
    }
    .karte-m__art svg { inline-size: 1em; block-size: 1em; flex: none; }
    .karte-m__titel { display: block; font-family: var(--schrift-titel); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; margin: 0; overflow-wrap: break-word; }
    .karte-m__text { color: var(--text-leise); font-size: var(--groesse-klein); }
    .karte-m__text > :last-child { margin-block-end: 0; }
    .karte-m__text a { position: relative; z-index: 1; }
    .karte-m__marken { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: auto 0 0; padding-block-start: var(--abstand-2); }
    .karte-m__marken .marke {
        background: var(--flaeche-warm);
        color: var(--text-leise);
        /* Lange Sprachlisten („Deutsch, Ukrainisch, Russisch, Englisch“) brechen in der Karte um */
        max-inline-size: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .karte-m__marken .marke svg { align-self: start; margin-block-start: 0.2em; }
    .karte-m__aufklappen summary { cursor: pointer; list-style: none; display: grid; gap: 0.1rem; }
    .karte-m__aufklappen summary::-webkit-details-marker { display: none; }
    .karte-m__aufklappen summary::after {
        content: "Text anzeigen";
        font-family: var(--schrift-titel);
        font-size: var(--groesse-klein);
        font-weight: 600;
        color: var(--primaer);
        margin-block-start: var(--abstand-2);
    }
    .karte-m__aufklappen[open] summary::after { content: "Text ausblenden"; }
    .karte-m__aufklappen[open] .karte-m__text { margin-block-start: var(--abstand-3); }

    /* Schmale Geräte: untereinander statt nebeneinander */
    @media (max-width: 48rem) {
        .kanban { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; }
        .kanban-huelle::before, .kanban-huelle::after { display: none; }
        .kanban__leiste { display: none; }
    }

    /* ---------- Unterkünfte */
    .unterkuenfte { display: grid; gap: var(--abstand-5); margin: 0; padding: 0; list-style: none; }
    .unterkunft {
        display: grid;
        gap: var(--abstand-5);
        align-items: start;
        padding: var(--abstand-5);
        background: var(--flaeche);
        border: 1px solid var(--linie);
        border-radius: var(--radius);
        box-shadow: var(--schatten);
    }
    @media (min-width: 42rem) {
        .unterkunft { grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); }
    }
    .unterkunft__bild { border-radius: var(--radius-klein); overflow: hidden; background: var(--flaeche-warm); }
    .unterkunft__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
    /* Ohne Foto: ruhige Fläche mit Haus-Symbol statt einer Lücke */
    .unterkunft__bild--platzhalter {
        display: grid;
        place-content: center;
        justify-items: center;
        gap: var(--abstand-2);
        aspect-ratio: 3 / 2;
        background: repeating-linear-gradient(135deg, var(--dunkelgruen-hell) 0 12px, var(--flaeche-warm) 12px 24px);
        color: var(--primaer);
        font-family: var(--schrift-titel);
        font-size: var(--groesse-klein);
        font-weight: 600;
    }
    .unterkunft__bild--platzhalter svg { inline-size: 2.5rem; block-size: 2.5rem; }
    .unterkunft__name { margin-block-end: var(--abstand-2); }
    .unterkunft__ort { display: flex; align-items: center; gap: 0.4em; margin-block-end: var(--abstand-4); color: var(--text-leise); font-size: var(--groesse-klein); }
    .unterkunft__ort svg { inline-size: 1em; block-size: 1em; flex: none; color: var(--primaer); }
    .unterkunft__fakten {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--abstand-2) var(--abstand-4);
        margin-block-end: var(--abstand-4);
        font-size: var(--groesse-klein);
    }
    .unterkunft__fakten dt { font-family: var(--schrift-titel); font-weight: 600; color: var(--primaer); }
    .unterkunft__fakten dd { margin: 0; color: var(--text); }
    .unterkunft__beschreibung > :last-child { margin-block-end: 0; }
    .unterkunft__personen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-block: var(--abstand-4); }
    .unterkunft__personen .marke { background: var(--flaeche-warm); color: var(--text-leise); max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; }
    .unterkunft__personen .marke svg { align-self: start; margin-block-start: 0.2em; }

    /* ---------- Video (wird erst nach Zustimmung von YouTube geladen) */
    .video { margin-block: var(--abstand-6); }
    .video__start {
        position: relative;
        display: block;
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--schatten);
    }
    .video__start img { inline-size: 100%; }
    .video__start::after { content: ""; position: absolute; inset: 0; background: rgb(11 61 34 / 0.25); transition: background-color var(--dauer); }
    .video__start:hover::after, .video__start:focus-visible::after { background: rgb(11 61 34 / 0.1); }
    .video__knopf {
        position: absolute;
        inset-block-end: var(--abstand-4);
        inset-inline-start: var(--abstand-4);
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: var(--abstand-3);
        padding: 0.5rem 1.1rem 0.5rem 0.6rem;
        border-radius: 999px;
        background: var(--flaeche);
        color: var(--text);
        font-family: var(--schrift-titel);
        font-weight: 600;
        box-shadow: var(--schatten);
    }
    .video__dreieck {
        inline-size: 2.25rem;
        block-size: 2.25rem;
        border-radius: 50%;
        background: var(--rot);
        clip-path: circle(50%);
        position: relative;
    }
    .video__dreieck::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: 56%;
        translate: -50% -50%;
        border-block: 0.5rem solid transparent;
        border-inline-start: 0.85rem solid #fff;
        border-inline-end: 0;
    }
    .video__rahmen { inline-size: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }
    .video figcaption { display: flex; gap: var(--abstand-2); align-items: flex-start; margin-block-start: var(--abstand-3); font-size: var(--groesse-klein); color: var(--text-leise); }
    .video figcaption svg { flex: none; margin-block-start: 0.15em; color: var(--dunkelblau); }

    /* ---------- Verknüpfte Termine/Meldungen */
    .verknuepft { margin-block: var(--abstand-7); }
    .verknuepft h2 { margin-block-end: var(--abstand-4); }
    .verknuepft-liste { display: grid; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
    .verknuepft-liste a { display: grid; gap: 0.1rem; padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius-klein); background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; color: var(--text); font-weight: 700; }
    .verknuepft-liste a:hover { border-color: var(--primaer); }
    .verknuepft-liste time { font-weight: 400; font-size: var(--groesse-klein); color: var(--text-leise); }

    /* ---------- Suche (/suche/, Fehlerseite) */
    .suchformular { margin-block-start: var(--abstand-5); max-inline-size: 46rem; }
    .suchformular label {
        display: flex;
        align-items: center;
        gap: 0.4em;
        margin-block-end: var(--abstand-2);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: var(--groesse-klein);
    }
    .suchformular label svg { inline-size: 1em; block-size: 1em; color: var(--primaer); }
    .suchformular__zeile { display: flex; flex-wrap: wrap; gap: var(--abstand-3); }
    .suchformular__zeile input {
        flex: 1 1 16rem;
        min-inline-size: 0;
        min-block-size: 3rem;
        padding: 0.5rem 1.2rem;
        border: 2px solid var(--linie);
        border-radius: 999px;
        background: var(--grund);
        font-family: var(--schrift-text);
        font-size: 1.0625rem;
        color: var(--text);
    }
    .suchformular__zeile input:focus-visible { border-color: var(--primaer); }
    .suchformular__zeile .knopf { flex: none; }
    .suchformular__hinweis { margin-block: var(--abstand-3) 0; max-inline-size: 44rem; }
    /* Auf der Fehlerseite steht alles mittig */
    .suchformular--fehler { margin-inline: auto; margin-block: var(--abstand-6); text-align: start; }

    .suchzahl { margin-block-end: var(--abstand-5); font-size: var(--groesse-gross); }

    /* Sprungleiste zu den Gruppen – bei vielen Treffern spart sie das Scrollen */
    .suchsprung { margin-block-end: var(--abstand-6); }
    .suchsprung ul { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0; padding: 0; list-style: none; }
    .suchsprung a {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.4rem 0.9rem;
        border: 2px solid var(--linie);
        border-radius: 999px;
        background: var(--flaeche);
        color: var(--text);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: var(--groesse-klein);
        text-decoration: none;
    }
    .suchsprung a:hover { border-color: var(--primaer); color: var(--primaer); }
    .suchsprung svg { inline-size: 1em; block-size: 1em; color: var(--primaer); }

    .suchgruppe { margin-block-end: var(--abstand-8); scroll-margin-block-start: 6rem; }
    .suchgruppe__titel { display: flex; align-items: center; gap: 0.5em; margin-block-end: var(--abstand-4); font-size: var(--groesse-h3); }
    .suchgruppe__titel svg { inline-size: 1em; block-size: 1em; flex: none; color: var(--primaer); }
    .suchgruppe__anzahl {
        padding: 0.1em 0.6em;
        border-radius: 999px;
        background: var(--flaeche-warm);
        color: var(--text-leise);
        font-size: var(--groesse-klein);
        font-variant-numeric: tabular-nums;
    }

    .treffer-liste { display: grid; gap: var(--abstand-3); margin: 0 0 var(--abstand-4); padding: 0; list-style: none; }
    .treffer {
        position: relative;
        padding: var(--abstand-4) var(--abstand-5);
        background: var(--flaeche);
        border: 1px solid var(--linie);
        border-radius: var(--radius-klein);
        transition: border-color var(--dauer), box-shadow var(--dauer);
    }
    .treffer:has(.treffer__link:hover) { border-color: var(--primaer); box-shadow: var(--schatten); }
    .treffer:has(.treffer__link:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
    .treffer__titel { display: flex; align-items: baseline; gap: 0.4em; margin: 0; font-family: var(--schrift-titel); font-weight: 700; }
    .treffer__link { color: var(--text); text-decoration: none; }
    /* Die ganze Zeile ist anklickbar – der Fokusrahmen liegt trotzdem auf dem Kasten */
    .treffer__link::after { content: ""; position: absolute; inset: 0; }
    .treffer__link:hover { color: var(--primaer); }
    .treffer__link:focus-visible { outline: none; }
    .treffer__extern { inline-size: 0.85em; block-size: 0.85em; flex: none; color: var(--text-leise); }
    .treffer__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--abstand-2) var(--abstand-3);
        margin-block: var(--abstand-2) 0;
        color: var(--text-leise);
        font-size: var(--groesse-klein);
    }
    .treffer__text { margin-block: var(--abstand-2) 0; color: var(--text-leise); }

    .suchtipps { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0 0 var(--abstand-5); padding: 0; list-style: none; }
    .suchtipps a {
        display: inline-block;
        padding: 0.45rem 1rem;
        border: 2px solid var(--linie);
        border-radius: 999px;
        background: var(--flaeche);
        color: var(--text);
        font-family: var(--schrift-titel);
        font-weight: 600;
        font-size: var(--groesse-klein);
        text-decoration: none;
    }
    .suchtipps a:hover { border-color: var(--primaer); color: var(--primaer); }

    /* ---------- Fehlerseite */
    .fehlerseite { text-align: center; padding-block: var(--abstand-8); }
    .fehlerseite .punkte { justify-content: center; margin-block-end: var(--abstand-5); }
    .fehlerseite .punkte span { inline-size: 1rem; block-size: 1rem; }
    .fehlerseite__knoepfe { justify-content: center; }
    .fehlerseite__code { font: 700 clamp(4rem, 3rem + 5vw, 7rem)/1 var(--schrift-titel); color: var(--primaer); letter-spacing: -0.04em; margin: 0; }
}

/* ============================================================ Hilfen */
@layer hilfen {
    .stoerung { padding-block-start: var(--abstand-5); }
    .nur-sr {
        position: absolute !important;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .stapel > * + * { margin-block-start: var(--abstand-5); }
    .mitte { text-align: center; }
    .leise { color: var(--text-leise); }
    .klein { font-size: var(--groesse-klein); }
    .ohne-abstand { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .kopf, .fuss, .ankuendigungen, .terminleiste, .termin__aktionen, .knopf, .sprunglink { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    .termin, .karte { break-inside: avoid; box-shadow: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}