/* ══════════════════════════════════════════════════════════════════
   FREIWILLIGE FEUERWEHR GEHRDE — DESIGN LAYER v2.0 „SIGNALWERK"
   Leitstellen-Ästhetik: Plakat-Typografie (Anton), Signalrot & Amber,
   technisches Raster, Mono-Readouts, Hazard-Streifen, harte Kanten,
   Ticker, Live-Uhr, Scroll-Choreografie.
   Lädt NACH styles.css und überschreibt gezielt — Struktur & Logik
   der Basis bleiben unangetastet.
   ══════════════════════════════════════════════════════════════════ */

/* ── 00 · DESIGN TOKENS ──────────────────────────────────────────── */
:root {
    /* Fläche — Nachtalarm (Asphalt, blau-schwarz) */
    --c-bg: #07090d;
    --c-bg-raise: #0c0f14;
    --c-bg-deep: #040508;
    --c-bg-2: #090b10;   /* Alias für Basis-Sektionen */
    --c-bg-3: #0b0e13;   /* Alias für Basis-Sektionen */
    --c-surface: rgba(235, 240, 245, 0.04);
    --c-surface-hover: rgba(235, 240, 245, 0.08);
    --c-border: rgba(235, 240, 245, 0.12);
    --c-border-hover: rgba(235, 240, 245, 0.28);
    --c-line: rgba(235, 240, 245, 0.14);
    --c-text: #eef0ee;
    --c-text-muted: rgba(238, 240, 238, 0.6);
    --c-text-dim: rgba(238, 240, 238, 0.36);
    --grid-line: rgba(235, 240, 245, 0.028);

    /* Marke — Signalrot & Amber (flächig, keine Verläufe) */
    --c-alarm: #ff2e18;
    --c-alarm-deep: #c81f0e;
    --c-amber: #ffb300;
    --c-fire: #ff2e18;           /* Alias für Basis-Styles */
    --c-fire-light: #ff5b47;
    --c-fire-dark: #c81f0e;
    --c-orange: #ffb300;
    --g-fire: linear-gradient(90deg, #ff2e18, #ff2e18);
    --g-fire-soft: rgba(255, 46, 24, 0.1);
    --hazard: repeating-linear-gradient(-45deg,
        var(--c-alarm) 0 10px, transparent 10px 20px);

    /* Typografie */
    --f-display: 'Anton', 'Archivo', system-ui, sans-serif;
    --f-heading: 'Archivo', system-ui, sans-serif;
    --f-body: 'Archivo', system-ui, -apple-system, sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Rhythmus */
    --section-pad: clamp(6.5rem, 15vh, 11rem);
    --container-max: 1280px;
    --container-pad: clamp(1.25rem, 4vw, 2.5rem);

    /* Form — harte, technische Kanten */
    --glass-bg: rgba(10, 12, 17, 0.82);
    --glass-border: rgba(235, 240, 245, 0.12);
    --glass-blur: 16px;
    --radius: 4px;
    --radius-lg: 6px;
    --radius-sm: 3px;
    --radius-xs: 2px;
    --radius-pill: 4px;
    --chamfer: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);

    /* Tiefe — Druckgrafik: harter Versatz statt Weichzeichner */
    --shadow: 0 14px 44px -22px rgba(0, 0, 0, 0.7);
    --shadow-hard: 7px 7px 0 rgba(255, 46, 24, 0.16);
    --shadow-float: 0 26px 70px -30px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 70px -18px rgba(255, 46, 24, 0.4);

    /* Motion — schnell, entschieden, federnd */
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-swift: cubic-bezier(0.55, 0, 0.1, 1);
    --ease-snap: cubic-bezier(0.8, 0, 0.2, 1);
    --transition: 0.4s var(--ease-spring);
    --transition-slow: 0.75s var(--ease-out-expo);
}

/* System-Farbschema neutralisieren — Theme nur über data-theme */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="light"]) {
        --c-bg: #07090d;
        --c-bg-raise: #0c0f14;
        --c-surface: rgba(235, 240, 245, 0.04);
        --c-surface-hover: rgba(235, 240, 245, 0.08);
        --c-border: rgba(235, 240, 245, 0.12);
        --c-border-hover: rgba(235, 240, 245, 0.28);
        --c-text: #eef0ee;
        --c-text-muted: rgba(238, 240, 238, 0.6);
        --c-text-dim: rgba(238, 240, 238, 0.36);
        --glass-bg: rgba(10, 12, 17, 0.82);
        --glass-border: rgba(235, 240, 245, 0.12);
    }
}

/* Light Theme — „Tagdienst": Beton-Papier, warm & hell */
:root[data-theme="light"] {
    --c-bg: #edeae3;
    --c-bg-raise: #f8f6f1;
    --c-bg-deep: #e2dfd6;
    --c-bg-2: #eae7df;
    --c-bg-3: #e6e3da;
    --c-surface: rgba(18, 19, 15, 0.045);
    --c-surface-hover: rgba(18, 19, 15, 0.09);
    --c-border: rgba(18, 19, 15, 0.16);
    --c-border-hover: rgba(18, 19, 15, 0.34);
    --c-line: rgba(18, 19, 15, 0.18);
    --c-text: #12130f;
    --c-text-muted: rgba(18, 19, 15, 0.62);
    --c-text-dim: rgba(18, 19, 15, 0.4);
    --grid-line: rgba(18, 19, 15, 0.045);
    --c-alarm: #e02412;
    --c-fire: #e02412;
    --c-fire-dark: #b01a0b;
    --glass-bg: rgba(248, 246, 241, 0.88);
    --glass-border: rgba(18, 19, 15, 0.14);
    --shadow: 0 14px 44px -26px rgba(30, 26, 18, 0.35);
    --shadow-hard: 7px 7px 0 rgba(224, 36, 18, 0.14);
    --shadow-float: 0 26px 70px -32px rgba(30, 26, 18, 0.38);
    --shadow-glow: 0 0 70px -22px rgba(224, 36, 18, 0.3);
}

/* Hartkodierte dunkle Sektions-Hintergründe der Basis zurückholen
   (Hero & Join-Panel bleiben in beiden Themes bewusst dunkel) */
:root[data-theme="light"] body,
:root[data-theme="light"] .section,
:root[data-theme="light"] .section-about,
:root[data-theme="light"] .section-einsaetze,
:root[data-theme="light"] .section-fahrzeuge,
:root[data-theme="light"] .section-mitglied,
:root[data-theme="light"] .section-kontakt {
    background: var(--c-bg);
}
:root[data-theme="light"] .timeline-card,
:root[data-theme="light"] .glass-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .chart-container,
:root[data-theme="light"] .vehicle-card {
    background: var(--c-bg-raise);
}

/* ── 01 · BASIS ──────────────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--c-alarm) var(--c-bg);
}

body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--f-body);
    font-size: 1.02rem;
    line-height: 1.75;
    transition: background-color 0.5s var(--ease-swift), color 0.5s var(--ease-swift);
}

::selection {
    background: var(--c-alarm);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--c-alarm);
    outline-offset: 3px;
    border-radius: 2px;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb {
    background: var(--c-alarm);
    border: 3px solid var(--c-bg);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--c-amber); }

/* Technisches Raster — fixiert, über allem, nicht interaktiv */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 76px 76px;
}

/* Scroll-Fortschritt — Signallinie oben, rein per CSS */
@supports (animation-timeline: scroll()) {
    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 3000;
        background: var(--c-alarm);
        transform-origin: 0 50%;
        transform: scaleX(0);
        animation: sw-progress linear forwards;
        animation-timeline: scroll(root);
        pointer-events: none;
    }
    @keyframes sw-progress { to { transform: scaleX(1); } }
}

.ember-canvas { opacity: 0.45; }

/* ── 02 · KEYFRAMES ──────────────────────────────────────────────── */
@keyframes sw-blink {
    0%, 60% { opacity: 1; }
    61%, 100% { opacity: 0.15; }
}
@keyframes sw-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes sw-scan {
    0% { transform: translateY(-110vh); }
    100% { transform: translateY(110vh); }
}
@keyframes sw-kenburns {
    from { transform: scale(1.12); }
    to { transform: scale(1); }
}
@keyframes sw-pulse112 {
    0%, 100% { text-shadow: 0 0 0 rgba(255, 46, 24, 0); }
    50% { text-shadow: 0 0 46px rgba(255, 46, 24, 0.65); }
}
@keyframes sw-dash {
    to { background-position: 0 24px; }
}
@keyframes sw-scroll-dot {
    0% { transform: translateY(0); opacity: 0; }
    25% { opacity: 1; }
    100% { transform: translateY(30px); opacity: 0; }
}

/* ── 03 · SEKTIONEN & TYPO ───────────────────────────────────────── */
.section {
    padding: var(--section-pad) 0;
    position: relative;
    counter-increment: sw-section;
}
body { counter-reset: sw-section; }

/* Flächige Bühnen — Radial-Nebel der Basis ablösen */
.section-about, .section-einsaetze, .section-fahrzeuge,
.section-mitglied, .section-kontakt {
    background: var(--c-bg);
}

.section-header {
    text-align: left;
    max-width: none;
    margin-bottom: clamp(3rem, 7vw, 5rem);
    position: relative;
    padding-top: 1.4rem;
    border-top: 1px solid var(--c-line);
}

/* Riesiger Sektions-Index als Wasserzeichen */
.section-header::before {
    content: counter(sw-section, decimal-leading-zero);
    position: absolute;
    right: 0;
    top: 0.4rem;
    font-family: var(--f-display);
    font-size: clamp(4.5rem, 12vw, 9rem);
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1px var(--c-border);
    pointer-events: none;
    user-select: none;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-alarm);
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 1.1rem;
}
.section-tag::before {
    content: "//";
    color: var(--c-text-dim);
    font-weight: 400;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
}

.section-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--c-text);
    margin: 0 0 1rem;
}

/* Akzentwort: flächiges Signalrot statt Verlauf */
.text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--c-alarm);
}

.section-subtitle {
    font-family: var(--f-mono);
    font-size: 0.86rem;
    color: var(--c-text-muted);
    max-width: 56ch;
    margin: 0;
    letter-spacing: 0.02em;
}

.about-text {
    max-width: 780px;
    margin: 0 0 clamp(2.5rem, 6vw, 4rem);
    border-left: 2px solid var(--c-alarm);
    padding-left: clamp(1.2rem, 3vw, 2rem);
    text-align: left;
}
.about-text p {
    color: var(--c-text-muted);
    font-size: 1.06rem;
    line-height: 1.85;
    margin-bottom: 1.1rem;
}
.about-text p:last-child { margin-bottom: 0; }

/* ── 04 · NAVIGATION — Konsolen-Leiste ───────────────────────────── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1500;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    transition: background-color 0.4s var(--ease-swift);
}
.nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hazard);
    opacity: 0.9;
}
.nav-inner {
    max-width: none;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.85rem var(--container-pad);
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: border-color 0.4s var(--ease-swift), background-color 0.4s var(--ease-swift), padding 0.4s var(--ease-spring);
}
.nav.scrolled { background: transparent; }
.nav.scrolled .nav-inner {
    max-width: none;
    background: color-mix(in srgb, var(--c-bg) 88%, transparent);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    border-bottom-color: var(--c-line);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    box-shadow: var(--shadow);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
}
.nav-logo-img {
    height: 42px;
    width: auto;
    border-radius: 0;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}
.nav-logo-text {
    font-family: var(--f-mono);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.6vw, 1.4rem);
    background: none;
    border: none;
    padding: 0;
    counter-reset: sw-nav;
}
.nav-link {
    position: relative;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    text-decoration: none;
    padding: 0.45rem 0.15rem;
    background: none;
    border-radius: 0;
    white-space: nowrap;
    counter-increment: sw-nav;
    transition: color 0.3s var(--ease-swift);
}
.nav-link::before {
    content: "0" counter(sw-nav);
    font-size: 0.58rem;
    color: var(--c-alarm);
    margin-right: 0.4rem;
    opacity: 0.75;
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    background: var(--c-alarm);
    transition: right 0.35s var(--ease-snap);
}
.nav-link:hover { color: var(--c-text); background: none; }
.nav-link:hover::after, .nav-link.active::after { right: 0; }
.nav-link.active { color: var(--c-text); background: none; }

/* Nicht gescrollt schwebt die Nav über dem (immer dunklen) Hero —
   Textfarben dort theme-unabhängig hell halten */
:root[data-theme="light"] .nav:not(.scrolled) .nav-link { color: rgba(238, 240, 238, 0.68); }
:root[data-theme="light"] .nav:not(.scrolled) .nav-link:hover,
:root[data-theme="light"] .nav:not(.scrolled) .nav-link.active { color: #eef0ee; }
:root[data-theme="light"] .nav:not(.scrolled) .nav-logo-text { color: #eef0ee; }
:root[data-theme="light"] .nav:not(.scrolled) .social-btn,
:root[data-theme="light"] .nav:not(.scrolled) .theme-toggle,
:root[data-theme="light"] .nav:not(.scrolled) .cal-mini {
    color: rgba(238, 240, 238, 0.75);
    border-color: rgba(238, 240, 238, 0.22);
}
:root[data-theme="light"] .nav:not(.scrolled) .nav-toggle { border-color: rgba(238, 240, 238, 0.22); }
:root[data-theme="light"] .nav:not(.scrolled) .nav-toggle span { background: #eef0ee; }

.nav-social {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.social-btn, .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    background: transparent;
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color 0.25s var(--ease-swift), border-color 0.25s var(--ease-swift), background-color 0.25s var(--ease-swift), transform 0.25s var(--ease-spring);
}
.social-btn:hover, .theme-toggle:hover {
    color: #fff;
    background: var(--c-alarm);
    border-color: var(--c-alarm);
    transform: translateY(-2px);
    box-shadow: none;
}
.social-btn:active, .theme-toggle:active { transform: scale(0.94); }

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

.cal-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--c-text-muted);
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xs);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s var(--ease-swift), border-color 0.25s var(--ease-swift), background-color 0.25s var(--ease-swift), transform 0.25s var(--ease-spring);
}
.cal-mini:hover {
    color: var(--c-text);
    border-color: var(--c-border-hover);
    background: var(--c-surface);
    transform: translateY(-2px);
    box-shadow: none;
}

/* Hamburger → X */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    padding: 9px;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xs);
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--c-text);
    border-radius: 0;
    transition: transform 0.4s var(--ease-spring), opacity 0.3s, scale 0.3s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; scale: 0 1; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── 05 · MOBILE MENU — Vollbild-Einsatztafel ────────────────────── */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1400;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s 0.55s;
}
.mobile-menu.active {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.mobile-menu-bg {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--c-bg) 96%, transparent);
    border: none;
    border-radius: 0;
    transform: none;
    opacity: 0;
    transition: opacity 0.45s var(--ease-swift);
}
.mobile-menu.active .mobile-menu-bg { opacity: 1; }
.mobile-menu-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 6rem var(--container-pad) 3rem;
}
.mobile-link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--f-display);
    font-size: clamp(2.4rem, 9vw, 4.2rem);
    line-height: 1.12;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--c-text);
    text-decoration: none;
    padding: 0.25rem 0;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo), color 0.25s;
}
.mobile-link::before {
    content: "0" attr(data-index);
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--c-alarm);
}
.mobile-link:hover { color: var(--c-alarm); }
.mobile-menu.active .mobile-link { opacity: 1; transform: translateY(0); }
.mobile-menu.active .mobile-link[data-index="1"] { transition-delay: 0.08s; }
.mobile-menu.active .mobile-link[data-index="2"] { transition-delay: 0.14s; }
.mobile-menu.active .mobile-link[data-index="3"] { transition-delay: 0.2s; }
.mobile-menu.active .mobile-link[data-index="4"] { transition-delay: 0.26s; }
.mobile-menu.active .mobile-link[data-index="5"] { transition-delay: 0.32s; }
.mobile-menu.active .mobile-link[data-index="6"] { transition-delay: 0.38s; }

.mobile-menu-footer {
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 0.5s var(--ease-swift) 0.4s;
}
.mobile-menu.active .mobile-menu-footer { opacity: 1; }
.mobile-social { display: flex; gap: 1.2rem; }
.mobile-social a {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    text-decoration: none;
}
.mobile-social a:hover { color: var(--c-alarm); }
.mobile-emergency {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.mobile-emergency strong { color: var(--c-alarm); font-size: 1.05rem; }

/* ── 06 · HERO — Einsatzplakat mit Live-Readout ──────────────────── */
.hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--c-bg-deep);
}

.hero-slideshow-slide img {
    filter: saturate(0.55) contrast(1.08) brightness(0.7);
}
.hero-slideshow-slide.active img {
    animation: sw-kenburns 10s var(--ease-out-expo) forwards;
}

.hero-slideshow-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(4, 5, 8, 0.82) 0%, rgba(4, 5, 8, 0.42) 42%, rgba(4, 5, 8, 0.92) 100%),
        linear-gradient(90deg, rgba(4, 5, 8, 0.65) 0%, transparent 55%);
}

/* Scan-Linie über dem Hero */
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 120px;
    z-index: 3;
    background: linear-gradient(180deg, transparent, rgba(255, 46, 24, 0.06), transparent);
    animation: sw-scan 9s linear infinite;
    pointer-events: none;
}

.hero-bg { z-index: 2; }
.hero-gradient, .hero-grid-overlay, .hero-orb { display: none; }

.hero-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: clamp(7rem, 16vh, 10rem) var(--container-pad) clamp(4.5rem, 10vh, 7rem);
    text-align: left;
}

/* Readout-Zeile: Status · Live-Uhr · Koordinaten */
.hero-readout {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 1.6rem;
    border: 1px solid rgba(238, 240, 238, 0.22);
    background: rgba(4, 5, 8, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.readout-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1rem;
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(238, 240, 238, 0.85);
    border-right: 1px solid rgba(238, 240, 238, 0.16);
}
.readout-cell:last-child { border-right: none; }
.readout-dot {
    width: 8px;
    height: 8px;
    background: var(--c-alarm);
    animation: sw-blink 1.6s steps(1) infinite;
}
.readout-clock { color: var(--c-amber); font-weight: 600; }

.hero-badge {
    display: none; /* ersetzt durch .hero-readout */
}

.hero-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(3.4rem, 11.5vw, 9.5rem);
    line-height: 0.92;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #f2f3f0;
    margin: 0 0 1.6rem;
}
.hero-title-line { display: block; }

/* Zeile 2 flächig rot, Zeile 3 nur Kontur — Plakatlogik */
.hero-title-accent {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    color: var(--c-alarm);
    animation: none;
}
.hero-title .hero-title-line:last-child {
    color: transparent;
    -webkit-text-stroke: 2px rgba(242, 243, 240, 0.85);
}

.hero-subtitle {
    font-family: var(--f-mono);
    font-size: clamp(0.72rem, 1.6vw, 0.88rem);
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--c-amber);
    margin: 0 0 1.1rem;
}

.hero-desc {
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(238, 240, 238, 0.72);
    max-width: 54ch;
    margin: 0 0 2.4rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: flex-start;
    margin-bottom: clamp(2.6rem, 6vh, 4rem);
}

/* Statistik-Leiste als Instrumententafel */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    background: rgba(4, 5, 8, 0.6);
    border: 1px solid rgba(238, 240, 238, 0.18);
    border-radius: 0;
    padding: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none;
    max-width: max-content;
}
.hero-stat {
    padding: 1.1rem 1.6rem;
    text-align: left;
    position: relative;
}
.hero-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.6rem;
    right: 1.6rem;
    height: 2px;
    background: var(--c-alarm);
    opacity: 0;
    transition: opacity 0.3s var(--ease-swift);
}
.hero-stat:hover::before { opacity: 1; }
.hero-stat-divider {
    width: 1px;
    background: rgba(238, 240, 238, 0.16);
    align-self: stretch;
    height: auto;
}
.hero-stat-number, .hero-stat-plus {
    font-family: var(--f-mono);
    font-weight: 600;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    color: #f2f3f0;
    font-variant-numeric: tabular-nums;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}
.hero-stat-plus { color: var(--c-alarm); }
.hero-stat-label {
    display: block;
    font-family: var(--f-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(238, 240, 238, 0.55);
    margin-top: 0.3rem;
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.hero-scroll-indicator span {
    font-family: var(--f-mono);
    font-size: 0.58rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(238, 240, 238, 0.5);
}
.scroll-mouse {
    width: 1px;
    height: 44px;
    border: none;
    border-radius: 0;
    background: rgba(238, 240, 238, 0.22);
    position: relative;
    overflow: hidden;
}
.scroll-mouse::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 14px;
    background: var(--c-alarm);
    animation: sw-scroll-dot 1.8s var(--ease-out-expo) infinite;
}
.scroll-wheel { display: none; }

/* ── 07 · TICKER — Laufband ──────────────────────────────────────── */
.ticker {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    background: var(--c-bg-raise);
    user-select: none;
}
.ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: sw-ticker 26s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
    display: inline-flex;
    align-items: center;
    padding: 0.85rem 0;
    font-family: var(--f-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    white-space: nowrap;
}
.ticker-item strong { color: var(--c-alarm); font-weight: 600; }
.ticker-item::after {
    content: "▲";
    color: var(--c-alarm);
    font-size: 0.5rem;
    margin: 0 2.2rem;
}

/* ── 08 · BUTTONS — Chamfer-Blöcke ───────────────────────────────── */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.95rem 1.5rem;
    border-radius: 0;
    clip-path: var(--chamfer);
    font-family: var(--f-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.3s var(--ease-swift), border-color 0.3s var(--ease-swift), transform 0.3s var(--ease-spring);
}
.btn::before, .btn::after { display: none; }
.btn:active { transform: scale(0.97); }

/* Füll-Wipe von links */
.btn > span:first-child { position: relative; z-index: 2; }
.btn .btn-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 0;
    transition: transform 0.35s var(--ease-spring);
}
.btn:hover .btn-icon { transform: translateX(4px); }

.btn-primary {
    background: var(--c-alarm);
    color: #fff;
    border-color: var(--c-alarm);
    box-shadow: none;
}
.btn-primary:hover {
    background: var(--c-alarm-deep);
    border-color: var(--c-alarm-deep);
    transform: translate(-2px, -2px);
    box-shadow: none;
}
.btn-primary .btn-icon {
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
}

.btn-outline, .btn-ghost {
    background: rgba(4, 5, 8, 0.4);
    color: var(--c-text);
    border-color: var(--c-border-hover);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.btn-outline:hover, .btn-ghost:hover {
    background: var(--c-text);
    color: var(--c-bg);
    border-color: var(--c-text);
    transform: translate(-2px, -2px);
}
.btn-outline .btn-icon, .btn-ghost .btn-icon {
    background: var(--c-surface-hover);
    color: currentColor;
}

.btn-sm {
    padding: 0.6rem 1rem;
    font-size: 0.66rem;
}
.btn-sm .btn-icon { width: 24px; height: 24px; }

/* ── 09 · KARTEN — harte Kanten, Eckwinkel, Druck-Schatten ───────── */
.glass-card {
    background: var(--c-bg-raise);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transition: transform 0.4s var(--ease-spring), border-color 0.4s var(--ease-swift), box-shadow 0.4s var(--ease-swift);
}
.glass-card::before, .glass-card::after { display: none; }
.glass-card:hover {
    transform: translate(-4px, -4px);
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-hard);
    background: var(--c-bg-raise);
}

.feature-card {
    padding: 2rem 1.8rem;
    position: relative;
    text-align: left;
}
.feature-card::before {
    display: block;
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-top: 2px solid var(--c-alarm);
    border-left: 2px solid var(--c-alarm);
    opacity: 0;
    transition: opacity 0.3s var(--ease-swift);
    background: none;
    border-radius: 0;
}
.feature-card:hover::before { opacity: 1; }
.feature-icon {
    width: auto;
    height: auto;
    margin-bottom: 1.3rem;
    background: none;
    border: none;
    border-radius: 0;
    display: block;
    transition: transform 0.4s var(--ease-spring);
}
.feature-icon svg { filter: grayscale(1) brightness(1.25); transition: filter 0.4s var(--ease-swift); }
.feature-card:hover .feature-icon { transform: none; }
.feature-card:hover .feature-icon svg { filter: none; }
.feature-title {
    font-family: var(--f-heading);
    font-weight: 800;
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text);
    margin-bottom: 0.6rem;
}
.feature-desc {
    color: var(--c-text-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

/* ── 10 · EINSÄTZE — Dispatch-Log ────────────────────────────────── */
.einsatz-tabs {
    display: inline-flex;
    gap: 0;
    background: var(--c-bg-raise);
    border: 1px solid var(--c-border);
    border-radius: 0;
    padding: 0;
    margin-bottom: clamp(2.2rem, 5vw, 3.4rem);
    box-shadow: none;
}
.einsatz-tab {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 0.7rem 1.6rem;
    color: var(--c-text-muted);
    background: transparent;
    border: none;
    border-right: 1px solid var(--c-border);
    border-radius: 0;
    cursor: pointer;
    transition: color 0.25s var(--ease-swift), background-color 0.25s var(--ease-swift);
}
.einsatz-tab:last-child { border-right: none; }
.einsatz-tab:hover { color: var(--c-text); background: var(--c-surface); }
.einsatz-tab.active {
    background: var(--c-alarm);
    color: #fff;
    box-shadow: none;
}

/* Zeitachse: gestrichelte Signalspur mit laufenden Strichen */
.timeline::before {
    width: 1px;
    background-image: linear-gradient(to bottom, var(--c-line) 55%, transparent 55%);
    background-size: 1px 24px;
    animation: sw-dash 1.6s linear infinite;
    opacity: 1;
}
.timeline-marker {
    width: 11px;
    height: 11px;
    border-radius: 0;
    transform: rotate(45deg);
    background: var(--c-bg);
    border: 2px solid var(--c-alarm);
    box-shadow: none;
}
.timeline-marker::after { display: none; }
.timeline-item:hover .timeline-marker {
    background: var(--c-alarm);
}

.timeline-card {
    padding: 1.7rem 1.7rem 1.5rem;
    position: relative;
}
.timeline-card h4 {
    font-family: var(--f-heading);
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--c-text);
    margin: 0.55rem 0 0.5rem;
}
.timeline-date {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--c-amber);
    background: none;
    border: none;
    padding: 0;
}
.timeline-date::before { content: "[ "; color: var(--c-text-dim); }
.timeline-date::after { content: " ]"; color: var(--c-text-dim); }
.timeline-location, .timeline-forces {
    font-family: var(--f-mono);
    font-size: 0.74rem;
    color: var(--c-text-muted);
    letter-spacing: 0.02em;
}
.timeline-location svg { color: var(--c-alarm); }

/* Badges: rechteckige Codes mit Farbkante */
.timeline-badge {
    position: absolute;
    top: 1.45rem;
    right: 1.45rem;
    font-family: var(--f-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.6rem;
    border-radius: 0;
    border-left-width: 3px;
    border-left-style: solid;
}
.badge-fire, .badge-fire-major {
    background: rgba(255, 46, 24, 0.12);
    color: #ff8a75;
    border: 1px solid rgba(255, 46, 24, 0.4);
    border-left-width: 3px;
    border-left-color: var(--c-alarm);
}
.badge-th {
    background: rgba(59, 130, 246, 0.1);
    color: #7ab3f9;
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-left-width: 3px;
    border-left-color: #3b82f6;
}
.badge-event {
    background: rgba(16, 185, 129, 0.1);
    color: #4fd6a8;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-left-width: 3px;
    border-left-color: #10b981;
}
:root[data-theme="light"] .badge-fire, :root[data-theme="light"] .badge-fire-major {
    color: #b01a0b;
}
:root[data-theme="light"] .badge-th { color: #1d63c4; }
:root[data-theme="light"] .badge-event { color: #0c8a63; }

.timeline-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text);
    text-decoration: none;
    border: 1px solid var(--c-border);
    border-radius: 0;
    padding: 0.5rem 0.85rem;
    background: transparent;
    transition: background-color 0.25s var(--ease-swift), border-color 0.25s var(--ease-swift), color 0.25s var(--ease-swift), transform 0.25s var(--ease-spring);
}
.timeline-detail-link svg {
    color: var(--c-alarm);
    transition: transform 0.3s var(--ease-spring);
}
.timeline-detail-link:hover {
    background: var(--c-alarm);
    border-color: var(--c-alarm);
    color: #fff;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 rgba(255, 46, 24, 0.25);
}
.timeline-detail-link:hover svg { color: #fff; transform: translateX(3px); }

/* Großschadenslage: Eckwinkel + rote Kante */
.card-highlight {
    border-color: rgba(255, 46, 24, 0.5);
    box-shadow: inset 3px 0 0 var(--c-alarm);
}
.card-highlight::before {
    display: block;
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 26px;
    height: 26px;
    border-top: 2px solid var(--c-alarm);
    border-right: 2px solid var(--c-alarm);
    background: none;
    border-radius: 0;
    opacity: 1;
}
.card-highlight:hover { box-shadow: inset 3px 0 0 var(--c-alarm), var(--shadow-hard); }

.timeline-expand-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.8rem auto 0;
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 0;
    padding: 0.7rem 1.4rem;
    cursor: pointer;
    transition: color 0.25s var(--ease-swift), border-color 0.25s var(--ease-swift), background-color 0.25s var(--ease-swift);
}
.timeline-expand-btn:hover {
    color: var(--c-text);
    border-color: var(--c-border-hover);
    background: var(--c-surface);
}
.timeline-expand-btn svg { transition: transform 0.35s var(--ease-spring); }
.timeline-expand-btn.expanded svg { transform: rotate(180deg); }

.einsatz-summary {
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
    text-align: center;
    margin-top: 2rem;
}
.einsatz-summary strong { color: var(--c-alarm); }

/* Statistik */
.statistik-header { text-align: left; margin-bottom: 2.4rem; }
.statistik-title {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    text-transform: uppercase;
    letter-spacing: 0.005em;
    line-height: 1;
    color: var(--c-text);
    margin: 0 0 0.6rem;
}
.statistik-subtitle {
    font-family: var(--f-mono);
    font-size: 0.82rem;
    color: var(--c-text-muted);
}

.stat-card {
    background: var(--c-bg-raise);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--ease-spring), border-color 0.35s var(--ease-swift), box-shadow 0.35s var(--ease-swift);
}
.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--c-alarm);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.4s var(--ease-snap);
}
.stat-card:hover {
    transform: translate(-3px, -3px);
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-hard);
}
.stat-card:hover::before { transform: scaleX(1); }
.stat-card-value {
    font-family: var(--f-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}
.stat-card-label {
    font-family: var(--f-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.chart-container {
    background: var(--c-bg-raise);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.chart-title {
    font-family: var(--f-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    color: var(--c-text);
}
.chart-year-toggle {
    display: inline-flex;
    gap: 0;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 0;
    padding: 0;
}
.chart-year-btn {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.42rem 0.95rem;
    color: var(--c-text-muted);
    background: transparent;
    border: none;
    border-right: 1px solid var(--c-border);
    border-radius: 0;
    cursor: pointer;
    transition: color 0.25s, background-color 0.25s;
}
.chart-year-btn:last-child { border-right: none; }
.chart-year-btn.active { background: var(--c-alarm); color: #fff; box-shadow: none; }

/* ── 11 · FAHRZEUGE — Flottenregister ────────────────────────────── */
.vehicle-card {
    background: var(--c-bg-raise);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.45s var(--ease-spring), border-color 0.45s var(--ease-swift), box-shadow 0.45s var(--ease-swift);
}
.vehicle-card:hover {
    transform: translate(-4px, -4px);
    border-color: var(--c-border-hover);
    box-shadow: var(--shadow-hard);
}
.vehicle-image {
    filter: grayscale(0.85) contrast(1.05);
    transition: filter 0.6s var(--ease-swift), transform 0.6s var(--ease-out-expo);
}
.vehicle-card:hover .vehicle-image {
    filter: none;
    transform: scale(1.04);
}
.vehicle-tag {
    font-family: var(--f-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--c-alarm);
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 0.4rem 0.7rem;
    backdrop-filter: none;
}
.vehicle-info h3 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-text);
}
.vehicle-info p {
    color: var(--c-text-muted);
    font-size: 0.92rem;
    line-height: 1.7;
}
:root[data-theme="light"] .vehicle-card { background: var(--c-bg-raise); }
:root[data-theme="light"] .vehicle-card:hover { border-color: var(--c-border-hover); }

/* ── 11b · FAHRZEUG-SPOTLIGHT — Scroll-Story (bleibt bewusst dunkel) ─
   Gepinnte Bühne im Stil einer Produkt-Explosion: Riesen-Typo driftet
   auseinander, das TLF fährt ins Licht, Ausstattungs-Callouts fliegen
   gestaffelt mit Verbindungslinien ein — alles scroll-gescrubbt.
   Basis-Layout = statischer Fluss (No-JS / Mobil / Reduced Motion),
   premium.js aktiviert .rig-js für die gepinnte Choreografie. */
.rig-showcase {
    position: relative;
    background: #05070b;
    padding: clamp(4.5rem, 12vh, 8rem) var(--container-pad);
    overflow: hidden;
}
.rig-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 68% 52% at 50% 44%,
        rgba(255, 46, 24, 0.08), transparent 70%);
    pointer-events: none;
}
.rig-showcase.rig-js {
    height: 780vh;
    padding: 0;
    overflow: visible;
}
.rig-showcase.rig-js::before { content: none; }

.rig-sticky {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    max-width: var(--container-max);
    margin: 0 auto;
}
.rig-js .rig-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    max-width: none;
    margin: 0;
    gap: 0;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(ellipse 68% 52% at 50% 44%,
        rgba(255, 46, 24, 0.08), transparent 70%);
}
.rig-sticky::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(235, 240, 245, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(235, 240, 245, 0.03) 1px, transparent 1px);
    background-size: 72px 72px;
    pointer-events: none;
}

/* Szenen — ein Kapitel pro Fahrzeug (TLF / LF / ELW) */
.rig-scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    width: 100%;
}
.rig-scene + .rig-scene { margin-top: 3.5rem; }
.rig-js .rig-scene {
    position: absolute;
    inset: 0;
    justify-content: center;
    gap: 0;
    margin: 0;
    will-change: opacity;
}

/* Mono-Readout oben — Leitstellen-Zeile */
.rig-readout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 1px solid rgba(238, 240, 238, 0.16);
    background: rgba(10, 12, 17, 0.8);
    font-family: var(--f-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(238, 240, 238, 0.62);
    z-index: 4;
}
.rig-js .rig-readout {
    position: absolute;
    top: clamp(6rem, 12vh, 7.5rem);
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: nowrap;
    white-space: nowrap;
}
.rig-readout-cell {
    padding: 0.5rem 0.85rem;
    border-right: 1px solid rgba(238, 240, 238, 0.16);
}
.rig-readout-cell:last-child { border-right: none; }
.rig-readout-alarm { color: #ffb300; }
.rig-readout-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    color: #7ddf8a;
}
.rig-readout-live::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #7ddf8a;
    animation: rigBlink 1.4s steps(2, start) infinite;
}
@keyframes rigBlink { 50% { opacity: 0.25; } }

/* Riesen-Typo hinter dem Fahrzeug */
.rig-bigtype {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.28em;
    pointer-events: none;
    user-select: none;
}
.rig-js .rig-bigtype {
    position: absolute;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.rig-bigtype-line {
    font-family: var(--f-display);
    font-size: clamp(4rem, 15vw, 11rem);
    line-height: 0.85;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(238, 240, 238, 0.16);
    will-change: transform, opacity;
}
.rig-js .rig-bigtype-line {
    font-size: clamp(7rem, 22vw, 19rem);
    line-height: 0.8;
}

/* Bühne: Fahrzeugfoto mit Spotlight-Maske */
.rig-stage {
    position: relative;
    z-index: 2;
    margin: 0;
    width: min(88vw, 640px);
    will-change: transform, opacity, filter;
}
.rig-js .rig-stage { width: min(56vw, 760px); }
.rig-stage img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 52%, transparent 76%);
    mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 52%, transparent 76%);
}

/* Ausstattungs-Callouts */
.rig-callouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    width: 100%;
    margin-top: 1.2rem;
}
.rig-js .rig-callouts {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    margin: 0;
    pointer-events: none;
}
.rig-callout {
    display: flex;
    align-items: center;
}
.rig-js .rig-callout {
    position: absolute;
    max-width: 310px;
    pointer-events: auto;
    will-change: transform, opacity;
}
.rig-js .rig-callout[data-side="right"] { flex-direction: row-reverse; }
.rig-js .rig-c1 { left: clamp(0.5rem, 4vw, 5rem); top: 21%; }
.rig-js .rig-c2 { left: clamp(0.5rem, 3vw, 3.6rem); top: 58%; }
.rig-js .rig-c3 { right: clamp(0.5rem, 4vw, 5rem); top: 27%; }
.rig-js .rig-c4 { right: clamp(0.5rem, 3vw, 3.6rem); top: 63%; }
.rig-callout-card {
    width: 100%;
    background: rgba(10, 12, 17, 0.88);
    border: 1px solid rgba(238, 240, 238, 0.16);
    border-left: 3px solid #ff2e18;
    clip-path: var(--chamfer);
    padding: 1.05rem 1.2rem;
}
.rig-callout-num {
    font-family: var(--f-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #ffb300;
}
.rig-callout-title {
    font-family: var(--f-heading);
    font-weight: 800;
    font-size: 0.98rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #eef0ee;
    margin: 0.35rem 0 0.4rem;
}
.rig-callout-text {
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(238, 240, 238, 0.6);
    margin: 0;
}
.rig-callout-line { display: none; }
.rig-js .rig-callout-line {
    display: block;
    flex: 0 0 clamp(2rem, 6vw, 6.5rem);
    height: 1px;
    background: #ff2e18;
    position: relative;
    transform-origin: left center;
    will-change: transform;
}
.rig-js .rig-callout[data-side="right"] .rig-callout-line { transform-origin: right center; }
.rig-js .rig-callout-line::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 7px;
    height: 7px;
    background: #ff2e18;
}
.rig-js .rig-callout[data-side="right"] .rig-callout-line::after { right: auto; left: -3px; }

/* Fortschritts-Schiene rechts */
.rig-rail { display: none; }
.rig-js .rig-rail {
    display: block;
    position: absolute;
    right: clamp(1rem, 3vw, 2.6rem);
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 32vh;
    background: rgba(238, 240, 238, 0.14);
    z-index: 4;
}
.rig-rail-fill {
    position: absolute;
    inset: 0;
    background: #ff2e18;
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
}

/* Scroll-Hinweis unten */
.rig-hint { display: none; }
.rig-js .rig-hint {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: absolute;
    bottom: clamp(1.4rem, 5vh, 3rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    font-family: var(--f-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(238, 240, 238, 0.55);
}
.rig-hint svg { animation: rigHintNudge 1.6s var(--ease-spring) infinite; }
@keyframes rigHintNudge {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(3px); }
}

/* ── 12 · MITGLIED WERDEN — Rekrutierungstafel ───────────────────── */
.join-hero {
    position: relative;
    background: #0a0c11;
    border: 1px solid rgba(238, 240, 238, 0.14);
    border-radius: var(--radius-lg);
    padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
    overflow: hidden;
    text-align: center;
    box-shadow: var(--shadow-float);
}
.join-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(-45deg,
        var(--c-alarm) 0 14px, #0a0c11 14px 28px);
}
.join-hero::after {
    content: "MITMACHEN";
    position: absolute;
    bottom: -0.12em;
    right: 0.2rem;
    font-family: var(--f-display);
    font-size: clamp(4rem, 12vw, 9rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(238, 240, 238, 0.08);
    pointer-events: none;
    user-select: none;
}
.join-orb { display: none; }
.join-hero-content { position: relative; z-index: 2; }
.join-hero .section-title { font-family: var(--f-display); }

.join-card {
    padding: 2.2rem 2rem;
    text-align: left;
    position: relative;
}
.join-card h3 {
    font-family: var(--f-heading);
    font-weight: 800;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text);
    margin-bottom: 0.7rem;
}
.join-card p {
    color: var(--c-text-muted);
    font-size: 0.95rem;
    line-height: 1.75;
}
.join-card-icon {
    width: auto;
    height: auto;
    margin-bottom: 1.2rem;
    background: none;
    border: none;
    border-radius: 0;
    display: block;
}
.join-detail {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--c-line);
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
}
.join-detail svg { color: var(--c-alarm); flex-shrink: 0; }

/* ── 13 · KONTAKT ────────────────────────────────────────────────── */
.contact-card {
    padding: 2rem 1.8rem;
    text-align: left;
}
.contact-card h4 {
    font-family: var(--f-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 0.8rem;
}
.contact-card p {
    color: var(--c-text);
    font-size: 0.98rem;
    line-height: 1.8;
}
.contact-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xs);
    color: var(--c-alarm);
    margin-bottom: 1.2rem;
}

.emergency-card {
    background: var(--c-bg-raise);
    border-color: rgba(255, 46, 24, 0.55);
    box-shadow: inset 0 3px 0 var(--c-alarm);
    position: relative;
    overflow: hidden;
}
.emergency-card::after {
    content: "";
    position: absolute;
    inset: auto -30% -55% -30%;
    height: 75%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 46, 24, 0.22), transparent 70%);
    pointer-events: none;
}
.emergency-icon {
    background: var(--c-alarm);
    border-color: var(--c-alarm);
    color: #fff;
}
.emergency-number-display {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: clamp(3.4rem, 8vw, 5rem);
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--c-alarm);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
    animation: sw-pulse112 2.4s ease-in-out infinite;
}
.emergency-sub {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
:root[data-theme="light"] .section-kontakt { background: var(--c-bg); }

/* ── 14 · FOOTER — Registerkarte mit Wasserzeichen ───────────────── */
.footer {
    position: relative;
    background: var(--c-bg-deep);
    border-top: 1px solid var(--c-line);
    padding-top: clamp(3.5rem, 8vw, 5.5rem);
    overflow: hidden;
}
.footer::before {
    content: "GEHRDE";
    position: absolute;
    bottom: -0.14em;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-display);
    font-size: clamp(6rem, 22vw, 19rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--c-border);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.footer > .container { position: relative; z-index: 2; }
.footer-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-family: var(--f-display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    background: var(--c-alarm);
    color: #fff;
    border-radius: 0;
    box-shadow: none;
}
.footer-brand strong {
    font-family: var(--f-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.footer-desc, .footer-links-group p {
    color: var(--c-text-muted);
    font-size: 0.9rem;
}
.footer-links-group h4 {
    font-family: var(--f-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-text-dim);
    margin-bottom: 1rem;
}
.footer-links-group a {
    color: var(--c-text-muted);
    font-family: var(--f-mono);
    font-size: 0.8rem;
    text-decoration: none;
    display: block;
    width: max-content;
    padding: 0.18rem 0;
    transition: color 0.25s var(--ease-swift), transform 0.25s var(--ease-spring);
}
.footer-links-group a:hover {
    color: var(--c-alarm);
    transform: translateX(4px);
}
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xs);
    color: var(--c-text-muted);
    transition: color 0.25s, background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease-spring);
}
.footer-social a:hover {
    color: #fff;
    background: var(--c-alarm);
    border-color: var(--c-alarm);
    transform: translateY(-2px);
}
.footer-bottom {
    border-top: 1px solid var(--c-line);
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding: 1.2rem 0 1.4rem;
    font-family: var(--f-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--c-text-dim);
}
.footer-legal a {
    color: var(--c-text-muted);
    text-decoration: none;
}
.footer-legal a:hover { color: var(--c-alarm); }

/* ── 15 · OVERLAYS: LEGAL · COOKIE · SCROLLTOP · KALENDER ────────── */
.legal-content {
    background: var(--c-bg-raise);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.legal-content h2 {
    font-family: var(--f-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}
.legal-content h3, .legal-content h4 {
    font-family: var(--f-heading);
    font-weight: 800;
}
:root[data-theme="light"] .legal-content h4 { color: var(--c-text); }
.legal-close {
    width: 42px;
    height: 42px;
    border-radius: 0;
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.legal-close:hover {
    background: var(--c-alarm);
    border-color: var(--c-alarm);
    color: #fff;
}

.cookie-banner {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-float);
    font-family: var(--f-mono);
    font-size: 0.8rem;
}

.scroll-top {
    width: 46px;
    height: 46px;
    border-radius: 0;
    background: var(--c-bg-raise);
    border: 1px solid var(--c-border);
    color: var(--c-text);
    box-shadow: var(--shadow);
    transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.3s var(--ease-spring), opacity 0.3s;
}
.scroll-top:hover {
    background: var(--c-alarm);
    border-color: var(--c-alarm);
    color: #fff;
    transform: translateY(-3px);
}

.cal-float .cal-expanded, .cal-expanded {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
}
.cal-expanded-title, .cal-month-label, .cal-upcoming-title {
    font-family: var(--f-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── 16 · LIGHTBOX ───────────────────────────────────────────────── */
.lightbox { background: rgba(4, 5, 8, 0.94); }
.lightbox img { border-radius: 0; }
.lightbox-arrow, .lightbox-close {
    border-radius: 0;
    border: 1px solid rgba(238, 240, 238, 0.2);
}
.lightbox-title { font-family: var(--f-mono); letter-spacing: 0.06em; }

/* ── 17 · LOADER — Systemstart ───────────────────────────────────── */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #040508;
    transition: opacity 0.6s var(--ease-swift), visibility 0.6s;
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-fire, .flame { display: none; }
.loader-logo circle:first-of-type { stroke: rgba(238, 240, 238, 0.14); }
.loader-circle { stroke: var(--c-alarm); }
.loader-logo text { font-family: var(--f-display); }
.loader-text {
    font-family: var(--f-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(238, 240, 238, 0.65);
    margin-top: 1.4rem;
}
.loader-bar {
    width: 220px;
    height: 2px;
    background: rgba(238, 240, 238, 0.12);
    border-radius: 0;
    margin-top: 1.1rem;
    overflow: hidden;
}
.loader-bar-fill {
    background: var(--c-alarm);
    border-radius: 0;
}

/* ── 18 · CURSOR — Fadenkreuz ────────────────────────────────────── */
.cursor-dot {
    width: 5px;
    height: 5px;
    background: var(--c-alarm);
    border-radius: 0;
    mix-blend-mode: normal;
}
.cursor-ring {
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--c-alarm) 70%, transparent);
    border-radius: 0;
    background: transparent;
    mix-blend-mode: normal;
    transition: width 0.3s var(--ease-spring), height 0.3s var(--ease-spring), transform 0.35s var(--ease-spring), border-color 0.3s;
}
.cursor-ring.hover {
    width: 52px;
    height: 52px;
    transform: rotate(45deg);
    border-color: var(--c-amber);
}

/* ── 19 · REVEALS — Wipe & Rise ──────────────────────────────────── */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 0;
    transition:
        opacity 0.85s var(--ease-out-expo) var(--delay, 0s),
        transform 0.85s var(--ease-out-expo) var(--delay, 0s),
        clip-path 0.85s var(--ease-out-expo) var(--delay, 0s);
    will-change: transform, opacity;
}
.reveal-up {
    transform: translateY(46px);
    clip-path: inset(0 0 22% 0);
}
.reveal-left { transform: translateX(-52px); }
.reveal-right { transform: translateX(52px); }
.reveal-up.revealed, .reveal-left.revealed, .reveal-right.revealed {
    opacity: 1;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
    will-change: auto;
}

/* ── 20 · RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
}

@media (max-width: 768px) {
    :root {
        --section-pad: clamp(4.5rem, 12vh, 7rem);
        /* Mobile-Token-Override der Basis (helles Violett) neutralisieren */
        --c-bg: #07090d;
        --c-bg-raise: #0c0f14;
        --c-bg-2: #090b10;
        --c-bg-3: #0b0e13;
        --c-surface: rgba(235, 240, 245, 0.05);
        --c-surface-hover: rgba(235, 240, 245, 0.1);
        --c-border: rgba(235, 240, 245, 0.14);
        --c-border-hover: rgba(235, 240, 245, 0.3);
        --c-text: #eef0ee;
        --c-text-muted: rgba(238, 240, 238, 0.62);
        --c-text-dim: rgba(238, 240, 238, 0.38);
        --glass-bg: rgba(10, 12, 17, 0.85);
        --glass-border: rgba(235, 240, 245, 0.14);
    }
    :root[data-theme="light"] {
        --c-bg: #edeae3;
        --c-bg-raise: #f8f6f1;
        --c-bg-2: #eae7df;
        --c-bg-3: #e6e3da;
        --c-surface: rgba(18, 19, 15, 0.05);
        --c-surface-hover: rgba(18, 19, 15, 0.1);
        --c-border: rgba(18, 19, 15, 0.17);
        --c-border-hover: rgba(18, 19, 15, 0.36);
        --c-text: #12130f;
        --c-text-muted: rgba(18, 19, 15, 0.64);
        --c-text-dim: rgba(18, 19, 15, 0.42);
        --glass-bg: rgba(248, 246, 241, 0.9);
        --glass-border: rgba(18, 19, 15, 0.15);
    }

    .nav-inner { padding: 0.7rem 1rem; }
    .cal-mini .cal-mini-next { display: none; }
    .nav-logo-text { display: none; }

    .hero-title { font-size: clamp(3rem, 16vw, 4.8rem); }
    .hero-title .hero-title-line:last-child { -webkit-text-stroke-width: 1.5px; }
    .hero-subtitle { letter-spacing: 0.26em; }
    .hero-readout { flex-direction: row; }
    .readout-cell { padding: 0.45rem 0.7rem; font-size: 0.58rem; }
    .readout-cell:nth-child(3) { display: none; }
    .hero-stats { max-width: 100%; width: 100%; }
    .hero-stat { padding: 0.85rem 1rem; flex: 1 1 40%; }
    .hero-stat-divider { display: none; }
    .hero-actions { gap: 0.7rem; }

    .section-title { font-size: clamp(2.2rem, 10vw, 3.1rem); }
    .section-header::before { font-size: clamp(3.2rem, 16vw, 5rem); }

    .ticker-item { font-size: 0.64rem; padding: 0.7rem 0; }

    .timeline-card { padding: 1.4rem 1.2rem; }
    .timeline-badge { position: static; display: inline-block; margin-top: 0.2rem; }

    .join-hero::after { font-size: clamp(2.8rem, 14vw, 4.5rem); }
    .emergency-number-display { font-size: 2.8rem; }
    .footer::before { font-size: clamp(4rem, 24vw, 7rem); }
}

/* ── 21 · REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
    }
    .ticker-track { animation: none; transform: none; }
    .hero::after { display: none; }
    .reveal-up, .reveal-left, .reveal-right {
        opacity: 1;
        transform: none;
        clip-path: none;
    }
}

/* ══════════════════════════════════════════════════════════════════
   BESUCHERZÄHLER — dezente Anzeige im Footer (Copyright | Zähler | Recht)
   Nutzt die Theme-Variablen, passt sich also Light/Dark automatisch an.
   ══════════════════════════════════════════════════════════════ */
.site-counter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-surface);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    line-height: 1;
    white-space: nowrap;
}

/* Greift, sobald der Wert geladen ist; verhindert kurzes Aufblitzen und
   hält den Zähler verborgen, falls PHP nicht erreichbar ist. */
.site-counter[hidden] { display: none; }

.site-counter-icon {
    color: var(--c-text-dim);
    flex-shrink: 0;
}

.site-counter-label {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-dim);
}

.site-counter-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}