/* ══════════════════════════════════════════════════════════════════════
   Freiwillige Feuerwehr Lichtheck — Auftritt der Wehr
   Eigenständig, ohne CDN, ohne externe Schriften.
   Aufbau: Grundwerte · Lader · Kopf · Held · Bühne · Haltung ·
           Beweis · Funktionen · Laufband · Zugang · Fuß · Mobil
   ═════════════════════════════════════════════════════════════════════ ══ */

:root {
    --schwarz: #08070a;
    --kohle: #100e12;
    --kohle-hell: #17141a;
    --glut: #ff5a1f;
    --glut-hell: #ffb15c;
    --rot: #c8321f;
    --knochen: #f2ece4;
    --stumm: #8d8489;
    --linie: rgba(242, 236, 228, .14);
    --linie-weich: rgba(242, 236, 228, .07);

    --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "Consolas", "SF Mono", monospace;

    --rand: clamp(1.1rem, 4vw, 4rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    background: var(--schwarz);
    color: var(--knochen);
    font-family: var(--sans);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Bildschirmleser */
.stumm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Auszeichnungen ─────────────────────────────────────────────────── */

.kicker,
.held__meta,
.karte__kicker,
.spur,
.kopf__nav,
.kopf__stand,
.lader__zeile {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--glut);
    margin-bottom: 1.6rem;
}
.kicker::before {
    content: "";
    width: 2.2rem;
    height: 1px;
    background: var(--glut);
    opacity: .8;
}

h1, h2, h3 {
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .98;
    text-wrap: balance;
}

/* ── Filmkorn über allem ───────────────────────────────────────────── */

body::after {
    content: "";
    position: fixed;
    inset: -60%;
    z-index: 90;
    pointer-events: none;
    opacity: .16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23k)' opacity='.5'/></svg>");
    animation: kornlauf 1.1s steps(4) infinite;
}
@keyframes kornlauf {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-3%, 2%); }
    50%  { transform: translate(2%, -3%); }
    75%  { transform: translate(-2%, -2%); }
    100% { transform: translate(0, 0); }
}

/* Weiche Vignette legt sich über jede Sektion */
.schleier-vignette { position: relative; }
.schleier-vignette::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(8, 7, 10, .75));
}

/* Während des Ladens steht die Seite still */
body.laedt { overflow: hidden; height: 100vh; }

/* ── 1 Lader ───────────────────────────────────────────────────────── */

.lader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.1rem;
    padding: var(--rand);
    background: var(--schwarz);
    transition: opacity .7s ease .25s, visibility .7s ease .25s;
}
.lader__marke {
    font-weight: 800;
    font-size: clamp(1.4rem, 3.4vw, 2.4rem);
    letter-spacing: -.03em;
}
.lader__zeichen {
    width: clamp(3.4rem, 8vw, 5rem);
    height: auto;
    align-self: flex-start;
    filter: drop-shadow(0 0 30px rgba(255, 90, 31, .3));
}
.lader__marke em,
.kopf__marke em,
.fuss__marke em { font-style: normal; color: var(--glut); }

.lader__spur {
    position: relative;
    height: 1px;
    background: var(--linie);
    overflow: hidden;
}
.lader__balken {
    position: absolute;
    inset: 0 100% 0 0;
    background: linear-gradient(90deg, var(--rot), var(--glut), var(--glut-hell));
    transition: inset-inline-end .35s ease;
}
.lader__zeile {
    display: flex;
    justify-content: space-between;
    color: var(--stumm);
}
.lader__zahl { color: var(--knochen); font-variant-numeric: tabular-nums; }

/* Lader fährt weg */
body.fertig .lader {
    opacity: 0;
    visibility: hidden;
}

/* ── 2 Kopfleiste ──────────────────────────────────────────────────── */

.kopf {
    position: fixed;
    inset: 0 0 auto;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.05rem var(--rand);
    border-bottom: 1px solid transparent;
    transition: background-color .45s ease, backdrop-filter .45s ease,
                border-color .45s ease, padding .45s ease;
}
body.gescrollt .kopf {
    padding-block: .7rem;
    background: rgba(8, 7, 10, .72);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--linie);
}
.kopf__marke {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1rem;
}

/* Flammenhauch: Glow hinter dem Logo, flackert wie Feuer */
.kopf__marke::before {
    content: "";
    position: absolute;
    inset: -55% -10% -50%;
    z-index: 0;
    background:
        radial-gradient(38% 62% at 28% 75%, rgba(255, 125, 25, .38), transparent 72%),
        radial-gradient(44% 58% at 52% 88%, rgba(255, 62, 12, .34), transparent 72%),
        radial-gradient(30% 48% at 74% 78%, rgba(255, 175, 55, .26), transparent 70%);
    filter: blur(7px);
    opacity: .85;
    transform-origin: 50% 90%;
    animation: flammenwalzen 2.6s ease-in-out infinite alternate;
    pointer-events: none;
}
.kopf__marke:hover::before { opacity: 1; }

.kopf__logo {
    position: relative;
    z-index: 1;
    display: block;
    height: 3.4rem;
    width: auto;
    filter: drop-shadow(0 0 12px rgba(255, 90, 31, .35));
    animation: glutflackern 3.1s ease-in-out infinite;
}
.kopf__marke:hover .kopf__logo { animation-duration: 1.6s; }

/* Feuer: Glow pulst und wirft Schatten */
@keyframes glutflackern {
    0%, 100% {
        filter: drop-shadow(0 0 12px rgba(255, 90, 31, .35))
                drop-shadow(0 0 30px rgba(255, 45, 10, .16));
    }
    22% {
        filter: drop-shadow(0 0 20px rgba(255, 130, 40, .60))
                drop-shadow(0 0 44px rgba(255, 70, 15, .30));
    }
    47% {
        filter: drop-shadow(0 0 9px rgba(255, 75, 25, .30))
                drop-shadow(0 0 24px rgba(255, 40, 8, .12));
    }
    68% {
        filter: drop-shadow(0 0 24px rgba(255, 150, 55, .68))
                drop-shadow(0 0 50px rgba(255, 90, 20, .34));
    }
    85% {
        filter: drop-shadow(0 0 14px rgba(255, 100, 35, .45))
                drop-shadow(0 0 32px rgba(255, 55, 12, .20));
    }
}

/* Flammenwaber: die Glow-Schichten "brennen" unruhig */
@keyframes flammenwalzen {
    0%   { transform: scaleX(1)    scaleY(1)    translateY(0);   opacity: .80; }
    30%  { transform: scaleX(1.07) scaleY(1.12) translateY(-1px); opacity: 1;   }
    55%  { transform: scaleX(.96)  scaleY(.94)  translateY(1px);  opacity: .70; }
    80%  { transform: scaleX(1.05) scaleY(1.08) translateY(-.5px); opacity: .95; }
    100% { transform: scaleX(.98)  scaleY(1.02) translateY(0);   opacity: .78; }
}
.kopf__nav {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    margin-inline-start: auto;
    color: var(--stumm);
}
.kopf__nav a { transition: color .25s ease; }
.kopf__nav a:hover { color: var(--knochen); }

/* Hamburger - nur unter 860px sichtbar (siehe "10 Mobil"), drei Striche
   aus reinem CSS statt einem Icon-Font. */
.kopf__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--linie-weich);
    border-radius: 6px;
    background: var(--schwarz);
    cursor: pointer;
    padding: 0;
    margin-inline-start: .8rem;
}
.kopf__burger span { display: block; height: 2px; width: 1.3rem; margin: 0 auto; background: var(--knochen); transition: transform .25s ease, opacity .2s ease; }
.kopf__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.kopf__knopf {
    padding: .5rem 1.1rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    color: var(--knochen);
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.kopf__knopf:hover {
    background: var(--glut);
    border-color: var(--glut);
    color: #14060a;
}
.kopf__stand { color: var(--stumm); }

/* ── 3 Held ────────────────────────────────────────────────────────── */

.held {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 7rem var(--rand) 3rem;
    overflow: hidden;
    isolation: isolate;
}

.shader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    display: block;
}
/* Wenn WebGL fehlt: ruhiger Verlauf plus Glut von unten */
.ohne-gl .shader { display: none; }
.ohne-gl .held {
    background:
        radial-gradient(80% 60% at 50% 108%, rgba(255, 90, 31, .55), transparent 70%),
        radial-gradient(60% 50% at 78% -10%, rgba(200, 50, 31, .35), transparent 70%),
        var(--schwarz);
}

.held__korn { position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 55%, transparent 40%, rgba(8,7,10,.85)); }

/* Einsatzbild fährt beim Scrollen in die Bühne hinein */
.held__bild {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("bilder/einsatz-gebaeudevollbrand-sessenbach.jpg");
    background-size: cover;
    background-position: center 40%;
    opacity: 0;
    transform: scale(1.12);
    will-change: opacity, transform;
}

.held__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--stumm);
}
.held__meta--oben { position: absolute; inset-inline: var(--rand); top: 5.6rem; }
.held__meta--unten {
    position: absolute;
    inset-inline: var(--rand);
    bottom: 2.4rem;
    align-items: center;
    gap: 1.2rem;
}
.held__faden {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--glut), transparent);
    transform-origin: left;
    animation: faden 3.4s ease-in-out infinite;
}
@keyframes faden {
    0%, 100% { transform: scaleX(.35); opacity: .4; }
    50%      { transform: scaleX(1);   opacity: 1; }
}
.pfeil { color: var(--knochen); }

.held__titel {
    font-size: clamp(2.9rem, 10.5vw, 9.5rem);
    text-transform: uppercase;
    letter-spacing: -.05em;
}
.held__titel .zeile {
    display: block;
    overflow: hidden;
}
.held__titel .zeile > span {
    display: block;
    transform: translateY(105%);
    transition: transform 1.05s cubic-bezier(.16, .84, .24, 1);
}
.held__titel .zeile:nth-child(2) > span { transition-delay: .12s; }
.held__titel .zeile:nth-child(3) > span { transition-delay: .24s; }
.zeile--leise > span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(242, 236, 228, .55);
}
body.fertig .held__titel .zeile > span { transform: translateY(0); }

.held__text {
    max-width: 34rem;
    margin-top: 1.7rem;
    color: rgba(242, 236, 228, .82);
    opacity: 0;
    transform: translateY(1.2rem);
    transition: opacity .9s ease 1.05s, transform .9s ease 1.05s;
}
body.fertig .held__text { opacity: 1; transform: translateY(0); }

/* Höhe = Kapitelzahl * Schritt. Die Kapitelzahl setzt szene.js als
   --kapitel-anzahl, damit sie nicht auseinanderlaufen kann. */

/* ── 4 Kapitelbühne ───────────────────────────────────────────────── */

.kapitelweg {
    position: relative;
    height: calc(var(--kapitel-schritt, 104) * var(--kapitel-anzahl, 25) * 1vh);
}

.buehne {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    background: var(--schwarz);
    isolation: isolate;
}

.buehne__bilder { position: absolute; inset: 0; z-index: -3; }
.buehne__bilder .ebene {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    filter: saturate(.82) contrast(1.06) brightness(.7);
    will-change: opacity, transform;
}

.buehne__schleier {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(8,7,10,.92) 0%, rgba(8,7,10,.55) 44%, rgba(8,7,10,.22) 74%),
        radial-gradient(110% 100% at 50% 50%, transparent 42%, rgba(8,7,10,.9));
}

/* Kinobalken, die sich zu Beginn schließen */
.balken {
    position: absolute;
    inset-inline: 0;
    height: 8vh;
    background: var(--schwarz);
    z-index: 5;
    transition: height .7s cubic-bezier(.2, .8, .2, 1);
}
.balken--oben { top: 0; }
.balken--unten { bottom: 0; }
.buehne.eng .balken { height: 3.2vh; }

/* Große Kapitelnummer im Hintergrund */
.buehne__index {
    position: absolute;
    inset-block-end: -2vw;
    inset-inline-end: var(--rand);
    font-weight: 800;
    font-size: clamp(7rem, 24vw, 22rem);
    line-height: .8;
    letter-spacing: -.06em;
    color: rgba(242, 236, 228, .05);
    z-index: -1;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* Fortschrittsspur rechts */
.spur {
    position: absolute;
    inset-block: 0;
    inset-inline-end: calc(var(--rand) - .3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .8rem;
    color: var(--stumm);
    z-index: 6;
}
.spur__strich {
    position: absolute;
    inset-block: 30% 30%;
    width: 1px;
    background: var(--linie);
}
.spur__strich::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: var(--fortschritt, 0%);
    background: var(--glut);
}
.spur b { color: var(--knochen); font-size: .78rem; }
.spur__rest { font-size: .6rem; opacity: .6; }

/* Kapitelkarten */
.karte {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--rand);
    width: min(36rem, 80vw);
    padding: 1.6rem 1.8rem;
    transform: translateY(-50%);
    background: linear-gradient(180deg, rgba(16, 14, 18, .74), rgba(16, 14, 18, .46));
    border: 1px solid var(--linie);
    backdrop-filter: blur(9px);
    opacity: 0;
    visibility: hidden;
}
.karte__kicker { color: var(--glut); margin-bottom: 1.1rem; }
.karte__titel { font-size: clamp(1.9rem, 4.6vw, 3.5rem); text-transform: uppercase; }
.karte__text {
    margin-top: 1.1rem;
    color: rgba(242, 236, 228, .8);
    font-size: .98rem;
    max-width: 30rem;
}
.karte__punkte { margin-top: 1.3rem; display: grid; gap: .45rem; }
.karte__punkte li {
    position: relative;
    padding-inline-start: 1.1rem;
    font-size: .86rem;
    color: rgba(242, 236, 228, .72);
}
.karte__punkte li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .62em;
    width: .34rem;
    height: .34rem;
    background: var(--glut);
}
.karte__link {
    display: inline-block;
    margin-top: 1.3rem;
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--glut);
    border-bottom: 1px solid rgba(255, 90, 31, .4);
    padding-bottom: .25rem;
    transition: color .25s ease, border-color .25s ease;
}
.karte__link:hover { color: var(--knochen); border-color: var(--knochen); }

/* Haarlinien-Beschriftungen wie bei den Vorbildern */
.callout {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--knochen);
    opacity: 0;
    transform: translateY(.6rem);
    transition: opacity .5s ease, transform .5s ease;
    z-index: 6;
    white-space: nowrap;
}
.callout b { font-weight: 600; }
.callout i { font-style: normal; color: var(--stumm); }
.callout__strich {
    width: 3.4rem;
    height: 1px;
    background: linear-gradient(90deg, var(--glut), transparent);
}
.callout[data-callout="0"] { inset-block-start: 24%; inset-inline-end: 12%; }
.callout[data-callout="1"] { inset-block-start: 32%; inset-inline-end: 17%; }
.callout[data-callout="2"] { inset-block-start: 28%; inset-inline-end: 11%; }
.callout[data-callout="3"] { inset-block-start: 36%; inset-inline-end: 15%; }
.callout[data-callout="4"] { inset-block-start: 26%; inset-inline-end: 13%; }
.callout.an { opacity: 1; transform: translateY(0); }

/* ── 5 Haltung (Reveal) ───────────────────────────────────────────── */

.haltung {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    padding: clamp(5rem, 12vh, 9rem) var(--rand);
    background: linear-gradient(180deg, var(--schwarz), var(--kohle) 40%, var(--schwarz));
}

.haltung__bild {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    clip-path: inset(18% 12% 18% 12%);
    transition: clip-path 1.5s cubic-bezier(.16, .84, .24, 1);
}
.haltung__bild.offen { clip-path: inset(0 0 0 0); }
.haltung__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.18);
    filter: saturate(.7) contrast(1.1) brightness(.85);
    transition: transform 1.6s cubic-bezier(.16, .84, .24, 1);
}
.haltung__bild.offen img { transform: scale(1.02); }

.haltung__text h2 {
    font-size: clamp(1.8rem, 4.4vw, 3.4rem);
    text-transform: uppercase;
    margin-bottom: 1.4rem;
}
.haltung__text p {
    color: rgba(242, 236, 228, .8);
    max-width: 34rem;
}
.haltung__text p + p { margin-top: .9rem; }

/* Wortweises Hochklappen */
.zerlegbar .wort {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.zerlegbar .wort > span {
    display: inline-block;
    transform: translateY(105%);
    transition: transform .95s cubic-bezier(.16, .84, .24, 1);
    transition-delay: var(--warten, 0s);
}
.zerlegbar.offen .wort > span { transform: translateY(0); }

/* ── 5b Mannschaft ───────────────────────────────────────────────── */

.mannschaft {
    padding: clamp(5rem, 12vh, 9rem) var(--rand);
    background: var(--kohle);
    border-top: 1px solid var(--linie-weich);
}
.mannschaft__kopf { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vh, 3.6rem); }
.mannschaft__kopf h2 {
    font-size: clamp(1.8rem, 4.4vw, 3.4rem);
    text-transform: uppercase;
    margin: .9rem 0 1.1rem;
}
.mannschaft__lead { color: rgba(242, 236, 228, .8); }

.mannschaft__raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: clamp(.9rem, 1.6vw, 1.4rem);
}
.mannschaft__gruppe {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--stumm);
    margin: clamp(2rem, 5vh, 3.2rem) 0 1.1rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--linie-weich);
}
.person {
    margin: 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.16, .84, .24, 1);
}
.person.offen { opacity: 1; transform: none; }
.person:nth-child(3n+2) { transition-delay: .07s; }
.person:nth-child(3n)    { transition-delay: .14s; }

.person__foto {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--schwarz);
    border: 1px solid var(--linie-weich);
    transition: border-color .35s ease, box-shadow .35s ease;
}
.person__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transform: scale(1.03);
    filter: saturate(.72) contrast(1.06) brightness(.9);
    transition: transform .6s ease, filter .45s ease;
}
.person:hover .person__foto {
    border-color: rgba(255, 90, 31, .55);
    box-shadow: 0 0 22px rgba(255, 90, 31, .18);
}
.person:hover .person__foto img {
    transform: scale(1.07);
    filter: saturate(1) contrast(1.04) brightness(1);
}
.person figcaption { padding-top: .7rem; display: grid; gap: .22rem; }
.person figcaption b { font-size: .92rem; font-weight: 700; color: var(--knochen); }
.person figcaption span {
    font-family: var(--mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stumm);
    transition: color .3s ease;
}
.person:hover figcaption span { color: var(--glut); }

/* Ohne eigenes Foto bekannt (Quelle hat keines) - allgemeines
   Platzhalter-Symbol statt Bild, gleiche Box, gleicher Rahmen.
   Kein erfundenes Foto. */
.person--ohne-foto .person__foto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kohle);
}
.person--ohne-foto .person__foto img {
    width: 56%;
    height: auto;
    object-fit: contain;
    opacity: .4;
    filter: grayscale(1);
    transform: none;
}
.person--ohne-foto:hover .person__foto img { transform: none; filter: grayscale(1); }
.mannschaft__note {
    margin-top: clamp(1.6rem, 4vh, 2.6rem);
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stumm);
}

/* ── 6 Parallaxbilder + Zahlen ────────────────────────────────────── */

.beweis {
    position: relative;
    padding: clamp(5rem, 14vh, 10rem) var(--rand) clamp(4rem, 10vh, 8rem);
    background: var(--schwarz);
}

.beweis__bilder {
    display: grid;
    grid-template-columns: 1.25fr .85fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
}
.pbild {
    overflow: hidden;
    aspect-ratio: 16 / 11;
}
.pbild--rechts { margin-top: clamp(2rem, 9vw, 7rem); aspect-ratio: 4 / 5; }
.pbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.14) translateY(var(--drift, 0px));
    filter: saturate(.78) contrast(1.08) brightness(.8);
    will-change: transform;
}

.zahlen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.2rem, 3vw, 3rem);
    margin-top: clamp(3rem, 9vh, 6rem);
    padding-top: 2.4rem;
    border-top: 1px solid var(--linie);
}
.zahl { display: flex; flex-direction: column; gap: .35rem; }
.zahl b {
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--knochen);
}
.zahl span {
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stumm);
    line-height: 1.5;
}

/* ── 6 Geschichte (Über uns) ───────────────────────────────────────── */

/* Der Abschnitt erzählt, wie aus drei Ortsteilen eine Wehr wurde. Er nutzt
   bewusst dieselben Variablen wie die Nachbarkapitel, damit er in der Reihe
   steht und nicht wie eine eingeflickte Fremdseite wirkt. */
.geschichte {
    padding: clamp(5rem, 12vh, 9rem) var(--rand);
    background: linear-gradient(180deg, var(--kohle-hell), var(--kohle) 60%, var(--kohle-hell));
}
.geschichte__kopf { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vh, 3.6rem); }
.geschichte__kopf h2 {
    font-size: clamp(1.9rem, 5vw, 3.8rem);
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin-bottom: 1.4rem;
}
.geschichte__lead {
    color: rgba(242, 236, 228, .8);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.65;
}

.geschichte__raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1px;
    background: var(--linie-weich);
    border: 1px solid var(--linie-weich);
    margin-bottom: clamp(2rem, 5vh, 3.4rem);
}
.ort {
    padding: 1.8rem 1.5rem 2rem;
    background: var(--kohle);
    transition: background-color .4s ease;
}
.ort:hover { background: #1b1a1c; }
.ort h3 {
    font-size: 1.2rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .9rem;
    color: var(--knochen);
}
/* Der Ortsname traegt die Glutfarbe - dasselbe Signal wie in den anderen
   Kapiteln. */
.ort h3::after {
    content: "";
    display: block;
    width: 1.6rem;
    height: 2px;
    margin-top: .7rem;
    background: var(--glut);
}
.ort p {
    font-size: .92rem;
    line-height: 1.7;
    color: rgba(242, 236, 228, .72);
}

.geschichte__fuss {
    max-width: 46rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--linie-weich);
}
.geschichte__fuss p {
    font-size: .92rem;
    line-height: 1.7;
    color: rgba(242, 236, 228, .72);
}
.geschichte__notruf {
    margin-top: .9rem;
    color: var(--knochen) !important;
}
.geschichte__notruf b {
    font-family: var(--mono);
    font-size: 1.15em;
    letter-spacing: .08em;
    color: var(--glut);
}

/* ── 7 Dienstplan ────────────────────────────────────────────────── */

/* Als Liste und nicht als Tabelle: die Zeile bricht auf dem Telefon sonst
   quer. Der Terminblock links ist die einzige feste Groesse, der Rest
   waechst mit. */
.dienst {
    padding: clamp(5rem, 12vh, 9rem) var(--rand);
    background: var(--schwarz);
}
.dienst__kopf { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vh, 3.4rem); }
.dienst__kopf h2 {
    font-size: clamp(1.9rem, 5vw, 3.8rem);
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin-bottom: 1.4rem;
}
.dienst__lead {
    color: rgba(242, 236, 228, .8);
    line-height: 1.65;
}

.dienst__liste {
    list-style: none;
    border-top: 1px solid var(--linie-weich);
}
.termin {
    display: grid;
    grid-template-columns: 4.2rem 1fr;
    gap: .4rem 1.4rem;
    align-items: baseline;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--linie-weich);
    transition: background-color .3s ease;
}
.termin:hover { background-color: rgba(242, 236, 228, .03); }

.termin__tag {
    display: flex;
    flex-direction: column;
    font-family: var(--mono);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--knochen);
}
.termin__tag small {
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--glut);
    margin-top: .3rem;
}
.termin__was { font-size: .95rem; line-height: 1.45; }
.termin__was b { display: block; font-weight: 700; color: var(--knochen); }
.termin__was { color: rgba(242, 236, 228, .62); }
.termin__wo {
    grid-column: 2;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stumm);
}
/* Der letzte Termin vor Weihnachten bekommt einen Abschlussstrich. */
.termin--letzt { border-bottom-width: 2px; border-bottom-color: var(--line); }

/* ── 8 Förderverein ───────────────────────────────────────────────── */

.foerder {
    padding: clamp(5rem, 12vh, 9rem) var(--rand);
    background: linear-gradient(180deg, var(--kohle), var(--kohle-hell));
}
.foerder__kopf { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vh, 3.4rem); }
.foerder__kopf h2 {
    font-size: clamp(1.9rem, 5vw, 3.8rem);
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin-bottom: 1.4rem;
}
.foerder__lead { color: rgba(242, 236, 228, .8); line-height: 1.65; }

.foerder__raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1px;
    background: var(--linie-weich);
    border: 1px solid var(--linie-weich);
}
.amt {
    padding: 1.8rem 1.5rem 2rem;
    background: var(--kohle);
}
.amt h3 {
    font-size: .68rem;
    font-family: var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--glut);
    margin-bottom: 1.3rem;
}
.amt__liste { list-style: none; }
.amt__liste li {
    display: flex;
    flex-direction: column;
    padding: .55rem 0;
    border-top: 1px solid var(--linie-weich);
}
.amt__liste li:first-child { border-top: 0; }
.amt__liste b { font-size: .95rem; font-weight: 600; color: var(--knochen); }
.amt__liste span {
    font-size: .74rem;
    color: var(--stumm);
    margin-top: .12rem;
}
/* Beisitzer mit Foto: Zeile statt Spalte, kleines rundes Porträt links -
   derselbe gedaempfte Bildlook wie .person__foto, nur klein und rund. */
.amt__liste li.amt__eintrag--foto {
    flex-direction: row;
    align-items: center;
    gap: .8rem;
}
.amt__foto {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 1px solid var(--linie-weich);
    filter: saturate(.72) contrast(1.06) brightness(.9);
    flex-shrink: 0;
}
.amt__text-block { display: flex; flex-direction: column; }
.amt__fuss, .amt__text {
    font-size: .84rem;
    line-height: 1.65;
    color: rgba(242, 236, 228, .7);
}
.amt__fuss { margin-top: 1.1rem; }
.amt__text a {
    color: var(--knochen);
    text-decoration: underline;
    text-underline-offset: .2em;
    word-break: break-word;
}
.amt__text a:hover { color: var(--glut); }

/* ── 7 Fahrzeuge ─────────────────────────────────────────────────── */

.fahrzeug {
    padding: clamp(5rem, 12vh, 9rem) var(--rand);
    background: var(--schwarz);
}
.fahrzeug__kopf { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vh, 3.4rem); }
.fahrzeug__kopf h2 {
    font-size: clamp(1.9rem, 5vw, 3.8rem);
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin-bottom: 1.4rem;
}
.fahrzeug__lead { color: rgba(242, 236, 228, .8); line-height: 1.65; }

.fahrzeug__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 1px;
    background: var(--linie-weich);
    border: 1px solid var(--linie-weich);
}
.fz { padding: 1.9rem 1.6rem 2.2rem; background: var(--kohle); }

/* Funkrufname gross - so heisst die Wache im Funk. */
.fz__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.fz__ruf { font-size: 1.5rem; letter-spacing: -.01em; color: var(--knochen); }
.fz__ruf b { color: var(--glut); font-weight: 700; }
.fz__nummer {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .14em;
    color: var(--stumm);
    white-space: nowrap;
}
.fz__typ {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--glut);
    margin-bottom: 1.2rem;
}

.fz__daten { margin-bottom: 1.6rem; }
.fz__daten > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-top: 1px solid var(--linie-weich);
}
.fz__daten dt {
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stumm);
}
.fz__daten dd { font-size: .88rem; color: var(--knochen); text-align: right; }
/* Was die Quelle nicht weiss, wird als Luecke markiert und nicht geraten. */
.fz__offen { color: var(--stumm) !important; font-style: italic; }

.fz__belad {
    font-size: .68rem;
    font-family: var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stumm);
    margin-bottom: .8rem;
}
.fz__kacheln {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: .4rem;
}
.fz__kacheln li {
    font-size: .76rem;
    line-height: 1.35;
    padding: .45rem .55rem;
    background: rgba(242, 236, 228, .045);
    border-left: 2px solid var(--linie);
    color: rgba(242, 236, 228, .78);
}

/* ── 8 Chronik ────────────────────────────────────────────────────── */

.chronik {
    padding: clamp(5rem, 12vh, 9rem) var(--rand);
    background: linear-gradient(180deg, var(--kohle-hell), var(--kohle));
}
.chronik__kopf { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vh, 3.4rem); }
.chronik__kopf h2 {
    font-size: clamp(1.9rem, 5vw, 3.8rem);
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin-bottom: 1.4rem;
}
.chronik__lead { color: rgba(242, 236, 228, .8); line-height: 1.65; }

/* Senkrechter Strang: eine Linie durch alle Punkte, die Jahreszahl sitzt
   darauf. Auf schmalen Schirmen rueckt die Zahl ueber den Text. */
.zeit { list-style: none; position: relative; }
.zeit::before {
    content: "";
    position: absolute;
    inset-block: .4rem;
    inset-inline-start: 4.6rem;
    width: 1px;
    background: var(--linie);
}
.zeit__punkt {
    position: relative;
    display: grid;
    grid-template-columns: 4.6rem 1fr;
    gap: 1.4rem;
    padding: 1.1rem 0;
}
.zeit__jahr {
    font-family: var(--mono);
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: right;
    color: var(--stumm);
    position: relative;
}
/* Der Punkt auf der Linie haengt an der Jahreszahl, nicht am Eintrag -
   sonst muesste der Eintrag positioniert werden und verlier den Textfluss. */
.zeit__jahr::after {
    content: "";
    position: absolute;
    right: -1.45rem;
    top: .45rem;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--linie);
}
.zeit__punkt p {
    font-size: .92rem;
    line-height: 1.7;
    color: rgba(242, 236, 228, .75);
    max-width: 40rem;
}
.zeit__punkt p b { color: var(--knochen); font-weight: 700; }

/* Die zwei Jahre, auf die es ankommt: Gruendung und Zusammenschluss. */
.zeit__punkt--kern .zeit__jahr { color: var(--glut); }
.zeit__punkt--kern .zeit__jahr::after {
    background: var(--glut);
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .18);
}
/* Die vier vergeblichen Jahre: muhsam, aber nicht dramatisch. */
.zeit__punkt--muehsam .zeit__jahr::after { background: var(--stumm); }

@media (max-width: 34rem) {
    .zeit::before { display: none; }
    .zeit__punkt { grid-template-columns: 1fr; gap: .2rem; }
    .zeit__jahr { text-align: left; font-size: 1.2rem; color: var(--glut); }
    .zeit__jahr::after { display: none; }
}

/* ── 9 Galerie ────────────────────────────────────────────────────── */

.galerie {
    padding: clamp(5rem, 12vh, 9rem) var(--rand);
    background: var(--schwarz);
}
.galerie__kopf { max-width: 46rem; margin-bottom: clamp(2.2rem, 5vh, 3.4rem); }
.galerie__kopf h2 {
    font-size: clamp(1.9rem, 5vw, 3.8rem);
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: -.02em;
    margin-bottom: 1.4rem;
}
.galerie__lead { color: rgba(242, 236, 228, .8); line-height: 1.65; }

.galerie__raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 1px;
    background: var(--linie-weich);
    border: 1px solid var(--linie-weich);
}
.foto { margin: 0; position: relative; overflow: hidden; background: var(--kohle); }
.foto img {
    display: block;
    width: 100%;
    /* Feste Ratio, damit das Raster ruhig bleibt, egal welche Aufnahme
       an der Reihe ist - die Bilder haben unterschiedliche Formate. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: grayscale(.35) contrast(1.05);
    transition: transform .6s ease, filter .6s ease;
}
.foto figcaption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 2.2rem .9rem .8rem;
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--knochen);
    background: linear-gradient(transparent, rgba(10, 10, 11, .88));
}
.foto:hover img { transform: scale(1.04); filter: grayscale(0) contrast(1.05); }

/* ── 10 Funktionen (Spotlight) ────────────────────────────────────── */

.funktionen {
    padding: clamp(5rem, 12vh, 9rem) var(--rand);
    background: linear-gradient(180deg, var(--schwarz), var(--kohle-hell) 50%, var(--schwarz));
}
.funktionen__kopf { max-width: 44rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.funktionen__kopf h2 {
    font-size: clamp(1.9rem, 5vw, 3.8rem);
    text-transform: uppercase;
}

.karten {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--linie-weich);
    border: 1px solid var(--linie-weich);
}
.fcard {
    position: relative;
    padding: 1.7rem 1.5rem 2rem;
    background: var(--kohle);
    overflow: hidden;
    transition: background-color .4s ease;
}
/* Lichtkegel folgt der Maus */
.fcard::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 50%),
                rgba(255, 90, 31, .18), transparent 65%);
}
.fcard:hover::before { opacity: 1; }
.fcard__nr {
    display: block;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .2em;
    color: var(--glut);
    margin-bottom: 2.6rem;
}
.fcard h3 {
    font-size: 1.16rem;
    line-height: 1.15;
    margin-bottom: 1.1rem;
    letter-spacing: -.02em;
}
.fcard li {
    position: relative;
    padding: .34rem 0 .34rem 1rem;
    font-size: .84rem;
    color: rgba(242, 236, 228, .68);
    border-top: 1px solid var(--linie-weich);
}
.fcard li:first-child { border-top: 0; }
.fcard li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .95em;
    width: .3rem;
    height: .3rem;
    background: var(--stumm);
    transition: background-color .3s ease;
}
.fcard:hover li::before { background: var(--glut); }

/* ── 8 Laufband ───────────────────────────────────────────────────── */

.laufband {
    overflow: hidden;
    border-block: 1px solid var(--linie-weich);
    padding-block: 1.5rem;
    background: var(--schwarz);
}
.laufband__spur {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    width: max-content;
    font-size: clamp(1.4rem, 3.4vw, 2.6rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.02em;
    color: rgba(242, 236, 228, .3);
    animation: lauf 34s linear infinite;
}
.laufband__spur i { color: var(--glut); font-size: .55em; }
body.rueckwaerts .laufband__spur { animation-direction: reverse; }
@keyframes lauf {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── 9 Zugang / Fuß ───────────────────────────────────────────────── */

.zugang {
    position: relative;
    padding: clamp(6rem, 16vh, 11rem) var(--rand);
    text-align: start;
    background:
        radial-gradient(70% 90% at 12% 120%, rgba(255, 90, 31, .22), transparent 70%),
        var(--kohle);
    border-top: 1px solid var(--linie-weich);
}
.zugang h2 {
    font-size: clamp(2.1rem, 6.4vw, 5rem);
    text-transform: uppercase;
    max-width: 30ch;
}
.zugang__text {
    max-width: 32rem;
    margin-top: 1.3rem;
    color: rgba(242, 236, 228, .78);
}
.zugang__knoepfe { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.zugang__logo {
    display: block;
    width: min(21rem, 64%);
    height: auto;
    margin-top: clamp(2.6rem, 7vh, 4.5rem);
    opacity: .93;
}

.knopf {
    display: inline-block;
    padding: .85rem 1.7rem;
    border-radius: 999px;
    border: 1px solid var(--linie);
    font-weight: 700;
    font-size: .92rem;
    transition: border-color .25s ease, background-color .25s ease,
                color .25s ease, transform .25s ease;
}
.knopf:hover { transform: translateY(-2px); border-color: var(--knochen); }
.knopf--glut {
    background: linear-gradient(120deg, var(--rot), var(--glut));
    border-color: transparent;
    color: #14060a;
}
.knopf--glut:hover { filter: brightness(1.08); border-color: transparent; }

.fuss {
    padding: 3.4rem var(--rand) 1.6rem;
    background: var(--schwarz);
    border-top: 1px solid var(--linie);
}
.fuss__spalten {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2.5rem;
}
.fuss__marke {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: .8rem;
}
.fuss__zeichen { width: 1.9rem; height: 1.9rem; object-fit: contain; }
.fuss p { font-size: .88rem; color: var(--stumm); max-width: 26rem; }
.fuss p + p { margin-top: .7rem; }
.fuss h4 {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--knochen);
    margin-bottom: .9rem;
}
.fuss__spalten a {
    display: block;
    padding: .22rem 0;
    font-size: .88rem;
    color: var(--stumm);
    transition: color .25s ease, transform .25s ease;
}
.fuss__spalten a:hover { color: var(--glut); transform: translateX(3px); }
.fuss__unten {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 2.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--linie-weich);
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stumm);
}

/* ── 10 Mobil ─────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .karten { grid-template-columns: repeat(2, 1fr); }
    .zahlen { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
}

@media (max-width: 860px) {
    /* Vorher wurden die Links hier nur ausgeblendet, ohne Ersatz - das
       Menue war auf dem Handy schlicht weg. Jetzt: Hamburger-Knopf
       einblenden, <nav> wird per JS (szene.js) als Overlay geoeffnet. */
    .kopf__burger { display: flex; }
    .kopf__stand { display: none; }
    .kopf__logo { height: 2.4rem; }
    .nur-breit { display: none; }

    /* Die Kopfleiste MUSS ueber dem Menue-Overlay liegen (dieses hat 900).
       Lag sie darunter, verdeckte das offene Menue seinen eigenen
       Schliessen-Knopf: auf dem Handy gibt es keine Escape-Taste, man kam
       nur noch durch Antippen eines Menuepunkts wieder heraus. */
    .kopf { z-index: 950; }

    /* Solange das Menue offen ist, bekommt die Kopfleiste denselben
       schwarzen Grund wie das Overlay - sonst steht das Logo auf halb
       durchsichtigem Grund ueber schwarzem Menue. */
    body.menu-offen .kopf {
        background: var(--schwarz);
        border-bottom-color: var(--linie);
    }

    .kopf__nav {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        /* dvh statt inset:0 - die ein- und ausfahrende Adressleiste des
           Handy-Browsers aendert die sichtbare Hoehe staendig. */
        height: 100dvh;
        margin: 0;
        background: var(--schwarz);
        flex-direction: column;
        align-items: flex-start;
        /*
            NICHT "justify-content: center": passen die Punkte nicht auf
            den Schirm (kleines Handy, Adressleiste sichtbar, grosse
            Schrift), schiebt Zentrieren die oberen Eintraege ueber den
            Rand hinaus - und dorthin laesst sich NICHT scrollen. Genau so
            waren "Einsätze" und "Über uns" unerreichbar.

            Stattdessen oben beginnen und die Liste nur dann mittig
            setzen, wenn sie auch hineinpasst (margin:auto wirkt beim
            Flex-Container nur bei freiem Platz).
        */
        justify-content: flex-start;
        gap: 1.4rem;
        padding: 5.5rem var(--rand) max(3rem, env(safe-area-inset-bottom));
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
        z-index: 900;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .kopf__nav > :first-child { margin-block-start: auto; }
    .kopf__nav > :last-child  { margin-block-end: auto; }

    /* Fingerfreundliche Trefferflaeche: ein Textlink von 1.3rem Hoehe ist
       auf dem Handy zu klein, empfohlen sind rund 44 px. */
    .kopf__nav a {
        display: block;
        width: 100%;
        padding-block: .45rem;
        min-height: 2.75rem;
    }
    .kopf__nav.kopf__nav--offen {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform .3s ease, opacity .3s ease, visibility 0s;
    }
    .kopf__nav a { font-size: 1.3rem; }
    .kopf__nav .kopf__knopf { margin-top: .6rem; }

    .kapitelweg {
        height: calc(var(--kapitel-schritt, 104) * var(--kapitel-anzahl, 25) * 1vh);
    }
    .karte { width: min(30rem, 86vw); padding: 1.3rem 1.2rem; }
    .karte__text, .karte__punkte { display: none; }
    .callout { display: none; }
    .mannschaft__raster { grid-template-columns: repeat(auto-fill, minmax(8.2rem, 1fr)); gap: .8rem; }
    .person figcaption b { font-size: .84rem; }
    .buehne__index { font-size: 34vw; inset-block-end: 4vw; }
    .spur { inset-inline-end: .5rem; }

    .haltung { grid-template-columns: 1fr; }
    .haltung__bild { aspect-ratio: 4 / 3; }

    .beweis__bilder { grid-template-columns: 1fr; }
    .pbild--rechts { margin-top: 0; aspect-ratio: 16 / 11; }

    .karten { grid-template-columns: 1fr; }
    .fuss__spalten { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (max-width: 520px) {
    .zahlen { grid-template-columns: 1fr; }
    .held__meta--unten { flex-wrap: wrap; }
    .knopf { width: 100%; text-align: center; }
}

/* ── 11 Wer keine Bewegung will, bekommt keine ────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    body::after { animation: none; }
    .held__titel .zeile > span,
    .zerlegbar .wort > span { transform: none !important; }
    .held__text { opacity: 1 !important; transform: none !important; }
    .karte { visibility: visible; }
    .laufband__spur { animation: none; }
    .kopf__logo, .kopf__marke::before { animation: none; }
}