/* ===========================================================================
   VELOCITY THEME — style.css
   ===========================================================================
   Dark-Cinematic Premium-Theme für MMT Metallbau.
   MMT-CI: primary #199bca / dark #147ca2 / light #4db9de,
   deep anthracite #0a141d / surface #101d29 / elevated #16283a.
   Font: Space Grotesk Variable (selbst gehostet) + Helvetica-Stack.
   Kein externer Font-Load, kein jQuery, kein CDN.

   Signatur-Effekte (GPU-only, reduced-motion-sicher):
   1. Kinetic-Type-Hero (Space Grotesk wght 320→700 + translateY Stagger 90ms)
   2. CSS scroll-driven Animations (animation-timeline: view())
   3. Magnetic CTAs (pointer:fine, max 6px)
   4. Lightbeam-Divider (1px Verlauf mit view()-Breiten-Animation)
   5. Card Spotlight (--v-card-x/y radial, KEIN tilt)
   6. Content-Rhythmus (Blueprint 4% opacity 64px)
   =========================================================================== */

/* ============ 1. BRAND-FONT (selbst gehostet) =================== */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('fonts/space-grotesk-var.woff2') format('woff2-variations'),
         url('fonts/space-grotesk-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ 2. ROOT VARIABLES ============================ */
:root {
    /* MMT-CI */
    --v-primary: #199bca;
    --v-primary-dark: #147ca2;
    --v-primary-light: #4db9de;

    /* Dark cinematic surfaces */
    --v-bg: #0a141d;
    --v-surface: #101d29;
    --v-elevated: #16283a;
    --v-elevated-2: #1d3450;

    /* Text */
    --v-text: #e8f1f8;
    --v-text-muted: #8fa6b8;
    --v-text-dim: #5d7186;
    --v-text-on-dark: #ffffff;
    --v-text-on-dark-muted: rgba(232, 241, 248, 0.78);

    /* Lines / Dividers */
    --v-line: rgba(143, 166, 184, 0.14);
    --v-line-strong: rgba(143, 166, 184, 0.24);
    --v-blueprint: rgba(77, 185, 222, 0.04);

    /* Secondary / Accent */
    --v-secondary: #1a1a1a;
    --v-on-primary: #ffffff;

    /* Fonts */
    --v-font-body: 'Helvetica Neue', Helvetica, -apple-system, system-ui, 'Segoe UI', Arial, sans-serif;
    --v-font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, -apple-system, system-ui, 'Segoe UI', Arial, sans-serif;
    --v-font-mono: 'SF Mono', 'JetBrains Mono', Monaco, Menlo, 'Courier New', monospace;

    /* Geometry */
    --v-radius-sm: 6px;
    --v-radius: 10px;
    --v-radius-lg: 16px;

    /* Shadows (dark) */
    --v-shadow-sm: 0 2px 6px -1px rgba(0, 0, 0, 0.4);
    --v-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
    --v-shadow-lg: 0 20px 48px -16px rgba(0, 0, 0, 0.7);
    --v-glow-primary: 0 12px 32px -10px rgba(25, 155, 202, 0.45);
    --v-glow-primary-strong: 0 18px 40px -10px rgba(25, 155, 202, 0.6);

    /* Easings */
    --v-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --v-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --v-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --v-ease-magnetic: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Z-Index */
    --v-z-base: 1;
    --v-z-content: 20; /* v47: ≥20 — hero-content enthält jetzt auch die CTA-Buttons
                          (Flow-Stack); muss über Controls (19) und Stats (15) liegen.
                          Overlay ist pointer-transparent außer Logo/Buttons. */
    --v-z-header: 50;
    --v-z-dropdown: 80;
    --v-z-modal: 90;
    --v-z-fab: 95;
    --v-z-slider-controls: 30;
    --v-z-devbar: 99999;

    /* Slider */
    --v-slider-duration: 6000ms;
    --v-slider-wipe-duration: 900ms;
}

/* ============ 3. PLUGIN-VARIABLEN-VERTRAG ============================
   Plugin-Stylesheets (news, menu-cards, contact, color-swatches,
   page-content.css) laden NACH dem Theme. Ohne Variablen-Definition
   fallen sie auf Orange #b45309 oder transparent zurück → Karten
   unsichtbar / Text unleserlich. Velocity definiert hier den Vertrag
   in MMT-CI: alle Plugin-Variablen werden auf Dark-Cinematic gesetzt.
   --mmt-primary #147ca2 + Weiß = 4.74:1 (Konsistenz-Basispaar) */
html[data-theme="velocity"] {
    --mmt-primary: var(--v-primary-dark);
    --mmt-primary-dark: #0f5a77;
    --color-text: var(--v-text);
    --color-text-muted: var(--v-text-muted);
    --text-primary: var(--v-text);
    --text-secondary: var(--v-text-muted);
    --color-surface: var(--v-surface);
    --card-surface: var(--v-elevated);
    --card-bg: var(--v-elevated);
    --card-border: var(--v-line);
    --color-border: var(--v-line);
    --border-color: var(--v-line);
    --color-accent: var(--v-primary);
    --color-accent-soft: var(--v-primary-dark);
    --color-accent-strong: var(--v-primary-light);
    --bg-secondary: var(--v-surface);
    --color-bg: var(--v-bg);
    --card-shadow: var(--v-shadow);
    --card-shadow-hover: var(--v-shadow-lg);
    --shadow-sm: var(--v-shadow-sm);
    --shadow-md: var(--v-shadow);
    --shadow-lg: var(--v-shadow-lg);
    /* color-primary-500/600/700 — vom Contact-Plugin verwendet */
    --color-primary-500: var(--v-primary);
    --color-primary-600: var(--v-primary-dark);
    --color-primary-700: #0f5a77;
}

/* ============ 4. BASIS / RESET ============================ */
html { scroll-behavior: auto; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

body.velocity {
    background: var(--v-bg);
    color: var(--v-text);
    font-family: var(--v-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    position: relative;
}

/* Subtle ambient noise + grid texture for cinematic feel */
body.velocity::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(25, 155, 202, 0.08), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(20, 124, 162, 0.06), transparent 60%);
    z-index: 0;
}

/* v45 FIX: :not() fuer .site-header und .skip-link. Die alte Regel
   (body.velocity > *) hatte Spezifitaet (0,1,1) und schlug .site-header
   (0,1,0, position:fixed) sowie .skip-link (0,1,0, position:absolute):
   Header stand im Flow (27px unter dem Skip-Link, scrollte mit) und der
   Skip-Link nahm Flow-Raum ein. Header ist wieder fixed + z-50,
   Skip-Link wieder absolute. */
body.velocity > *:not(.site-header):not(.skip-link) { position: relative; z-index: 1; }

/* Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--v-primary);
    color: #fff;
    padding: 0.7rem 1.2rem;
    border-radius: var(--v-radius-sm);
    font-weight: 600;
    z-index: var(--v-z-modal);
    transition: top 220ms var(--v-ease);
    text-decoration: none;
}
.skip-link:focus { top: 1rem; outline: 3px solid #fff; outline-offset: 2px; }

/* Container */
.container {
    width: min(100% - 2.5rem, 1320px);
    margin-inline: auto;
}

/* ============ 5. BRAND-FONT ANWENDUNG ============================
   Space Grotesk auf Headlines, Nav, Buttons, Stats, Marquee.
   Body-Fließtext bleibt var(--v-font-body) (Helvetica-Stack).
   Bewusst nicht auf body — Lesbarkeit hat Vorrang. */
html[data-theme="velocity"] h1,
html[data-theme="velocity"] h2,
html[data-theme="velocity"] h3,
html[data-theme="velocity"] h4,
html[data-theme="velocity"] h5,
html[data-theme="velocity"] h6 {
    font-family: var(--v-font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--v-text);
    margin: 0 0 0.5em;
}

/* Hero-Title override (Höhere Spezifität: .hero-title > html h1) */
html[data-theme="velocity"] .hero-title,
html[data-theme="velocity"] .hero-parallax > .hero-title,
html[data-theme="velocity"] .hero-parallax .hero-title h1,
html[data-theme="velocity"] .hero-parallax .hero-line-1 {
    color: #ffffff;
    font-family: var(--v-font-display);
}

html[data-theme="velocity"] p { color: var(--v-text); line-height: 1.6; }

a {
    color: var(--v-primary);
    text-decoration: none;
    transition: color 200ms var(--v-ease);
}
a:hover, a:focus-visible { color: var(--v-primary-light); }

img { max-width: 100%; height: auto; display: block; }

/* ============ 6. TOP-BAR (kompakt, dunkel-blau) ================= */
.top-bar {
    background: linear-gradient(90deg, #061019 0%, #0a141d 50%, #061019 100%);
    color: var(--v-text-on-dark-muted);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(77, 185, 222, 0.12);
}

.top-bar-content {
    /* v45: Top-Bar-Schlankung 65px -> ~34px — die <ul> aus {% top-content %}
       (#company/#contact) bringen UA-Default-Margins (1em je Seite) mit,
       die die Bar auf 65px aufblaehten. Flex + Margin-Reset + min-height. */
    min-height: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.15rem 1.5rem;
    padding: 0.3rem 0;
}
.top-bar-content ul { margin: 0; }
.top-bar-content #company,
.top-bar-content #contact { float: none; }
.top-bar-content li { line-height: 1.25; }

.top-info a,
.social-links a,
#top-header a {
    color: var(--v-text-on-dark-muted) !important;
    text-decoration: none;
}
.top-info a:hover,
.social-links a:hover,
#top-header a:hover {
    color: var(--v-primary-light) !important;
}

/* ============ 7. SITE-HEADER (Dark Glass Sticky) ================= */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--v-z-header);
    background: rgba(10, 20, 29, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(77, 185, 222, 0.10);
    box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.5);
    transition: background-color 240ms var(--v-ease), box-shadow 240ms var(--v-ease);
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(25, 155, 202, 0.18) 25%,
        rgba(25, 155, 202, 0.45) 50%,
        rgba(25, 155, 202, 0.18) 75%,
        transparent 100%);
    pointer-events: none;
}

.main-nav { min-height: 64px; }
.site-header .container,
.main-nav .container { min-height: 64px; padding: 0 1rem; }
/* v45: Top-Bar-Container von der Nav-Min-Hoehe ausnehmen — die Regel
   oben greift auch fuer .top-bar .container und hielt die Bar bei 65px. */
.top-bar .container { min-height: 0; }

/* DESKTOP: Nav in einer Zeile (Hardening-Lektion #2) */
@media (min-width: 769px) {
    .main-nav .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        min-height: 64px;
        padding: 0 1rem;
    }
    .main-nav > .container > ul.main-menu {
        flex: 1 1 auto;
        min-width: 0;
    }
    .main-nav .nav-cta {
        flex: 0 0 auto;
        margin-left: 0.5rem;
    }
    .main-nav .admin-access {
        flex: 0 0 auto;
        margin-left: 0.5rem;
    }
}

/* MOBILE: .top-bar / .nav-cta / .admin-access display:none EIGEN */
@media (max-width: 768px) {
    .top-bar { display: none; }
    .nav-cta { display: none; }
    .admin-access { display: none; }
}

/* ============ 8. BUTTONS — Magnetic + Explizite Hover/Focus ======= */
/* Kontraste:
   - Base  #147ca2 + weiß = 4.74:1
   - Hover #1a1a1a + weiß = 17.4:1
   JEDER Button-Typ mit EXPLIZITER :hover/:focus-visible-Regel */
.btn,
.mm-btn,
.v-btn {
    --btn-bg: var(--v-primary-dark);
    --btn-fg: #ffffff;
    --btn-bd: var(--v-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.9rem 1.6rem;
    min-height: 44px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1.5px solid var(--btn-bd);
    border-radius: var(--v-radius-sm);
    font-family: var(--v-font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: background-color 220ms var(--v-ease), color 220ms var(--v-ease),
                border-color 220ms var(--v-ease), transform 220ms var(--v-ease-magnetic),
                box-shadow 220ms var(--v-ease);
    position: relative;
    z-index: 1;
    pointer-events: auto;
    user-select: none;
    /* Magnetic CTA: default translate (magnetic) */
    transform: translate(0, 0);
}

/* PRIMARY (default — base #147ca2+white = 4.74:1) */
.btn-primary,
.mm-btn--primary,
.v-btn-primary {
    --btn-bg: var(--v-primary-dark);
    --btn-fg: #ffffff;
    --btn-bd: var(--v-primary-dark);
}
.btn-primary:hover,
.btn-primary:focus-visible,
.mm-btn--primary:hover,
.mm-btn--primary:focus-visible,
.v-btn-primary:hover,
.v-btn-primary:focus-visible {
    --btn-bg: var(--v-secondary);
    --btn-fg: #ffffff;
    --btn-bd: var(--v-secondary);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.6);
    outline: none;
}

/* SECONDARY (transparent outline) */
.btn-secondary,
.mm-btn--secondary,
.v-btn-secondary {
    --btn-bg: transparent;
    --btn-fg: var(--v-text);
    --btn-bd: rgba(232, 241, 248, 0.32);
}
.btn-secondary:hover,
.btn-secondary:focus-visible,
.mm-btn--secondary:hover,
.mm-btn--secondary:focus-visible,
.v-btn-secondary:hover,
.v-btn-secondary:focus-visible {
    --btn-bg: var(--v-text);
    --btn-fg: var(--v-bg);
    --btn-bd: var(--v-text);
    transform: translateY(-2px);
    outline: none;
}

/* HERO-BUTTON (weißer Pill-Button über Hero-Overlay) */
.btn-hero-primary,
.btn-hero-secondary {
    min-height: 48px;
    padding: 1rem 1.8rem;
    font-size: 14.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 999px;
}
.btn-hero-primary {
    --btn-bg: #ffffff;
    --btn-fg: var(--v-primary-dark);
    --btn-bd: #ffffff;
}
.btn-hero-primary:hover,
.btn-hero-primary:focus-visible {
    --btn-bg: var(--v-secondary);
    --btn-fg: #ffffff;
    --btn-bd: var(--v-secondary);
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.6);
    outline: none;
}
.btn-hero-secondary {
    --btn-bg: transparent;
    --btn-fg: #ffffff;
    --btn-bd: rgba(255, 255, 255, 0.65);
}
.btn-hero-secondary:hover,
.btn-hero-secondary:focus-visible {
    --btn-bg: #ffffff;
    --btn-fg: var(--v-secondary);
    --btn-bd: #ffffff;
    transform: translateY(-3px);
    outline: none;
}

/* CTA-SECTION Button */
.btn-cta,
.btn-cta-primary,
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 220ms var(--v-ease);
    z-index: 1;
    pointer-events: auto;
}
.btn-cta,
.btn-cta-primary {
    background: var(--v-primary-dark);
    color: #fff;
    border: 1.5px solid var(--v-primary-dark);
}
.btn-cta:hover,
.btn-cta:focus-visible,
.btn-cta-primary:hover,
.btn-cta-primary:focus-visible {
    background: var(--v-secondary);
    border-color: var(--v-secondary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -10px rgba(0, 0, 0, 0.5);
    outline: none;
}
.btn-cta-secondary {
    background: transparent;
    color: var(--v-text);
    border: 1.5px solid rgba(255, 255, 255, 0.32);
}
.btn-cta-secondary:hover,
.btn-cta-secondary:focus-visible {
    background: var(--v-text);
    color: var(--v-bg);
    outline: none;
}

/* SUBMIT-BUTTON :disabled — primary-dark opacity .55 (KEIN Grau!) */
input[type="submit"]:disabled,
button[type="submit"]:disabled,
.submit-button:disabled,
.btn:disabled,
button[disabled] {
    background: var(--v-primary-dark) !important;
    color: #ffffff !important;
    border-color: var(--v-primary-dark) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* FAB brand-dark */
.fab-btn {
    background: var(--v-primary-dark) !important;
    color: #ffffff !important;
    border: 0;
    box-shadow: var(--v-glow-primary) !important;
}
.fab-btn:hover,
.fab-btn:focus-visible {
    background: var(--v-secondary) !important;
    box-shadow: 0 18px 36px -10px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-3px) scale(1.04);
    outline: none;
}

/* Global Focus-Visible (Hardening-Lektion #10) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--v-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============ 9. HERO-PARALLAX ============================ */
/* Höhere Spezifität (1,0,0) um combined.css .hero-parallax { min-height: 50vh }
   zu überschreiben — sonst Hero nur halbhoch auf Mobile! */
html body.velocity .hero-parallax,
body.velocity .hero-parallax {
    position: relative;
    width: 100%;
    min-height: clamp(560px, 88vh, 880px);
    overflow: hidden;
    isolation: isolate;
    margin-top: 0;
    padding-top: 64px;
    background: var(--v-bg);
}

/* ============ 10. HERO-SLIDER (crossfade+scale 1.04 — KEIN clip-path) ====== */
.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-slider .slider {
    height: 100% !important;
    max-height: 100% !important;
    position: relative;
}
.hero-slider .slider .slider-container {
    position: absolute !important;
    inset: 0;
    height: 100% !important;
    max-height: 100% !important;
    animation: none !important;
    -webkit-animation: none !important;
    white-space: normal !important;
    margin: 0 !important;
    display: block !important;
}

/* KEIN clip-path auf figures mit IO-Reveals (Lektion #4)!
   Hardening-Lektion #5: KEIN clip-path wegen IntersectionObserver
   misst 0x0 → "nie sichtbar" Bug. Stattdessen opacity+scale für
   crossfade+scale 1.04 Effekt. */
.hero-slider .slider .slider-container figure {
    position: absolute !important;
    inset: 0;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity var(--v-slider-wipe-duration) var(--v-ease-in-out),
                transform var(--v-slider-wipe-duration) var(--v-ease-in-out);
    will-change: opacity, transform;
}
.hero-slider .slider .slider-container figure.is-active {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0ms;
    z-index: 2;
}
.hero-slider .slider .slider-container figure.is-leaving {
    opacity: 0;
    transform: scale(1.04);
    z-index: 1;
}

.hero-slider .slider .slider-container figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
    background: none !important;
    transform: translate3d(0, var(--v-slide-y, 0px), 0);
    will-change: transform;
    transition: transform 80ms linear;
}

/* Foto-Ebene: Brand-Hauch Tint 0.15 + Vignette 0.25 (Fotos KLAR erkennbar)
   Lektion #5: Luminanz-Verlust <20%! */
.hero-slider .slider .slider-container figure::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        /* Sanfte Kanten-Vignette */
        radial-gradient(ellipse at 30% 50%, rgba(10, 20, 29, 0) 45%, rgba(10, 20, 29, 0.25) 100%),
        /* Marken-Tint 135deg (MMT-CI #147ca2→#0a141d) - dezent */
        linear-gradient(135deg,
            rgba(20, 124, 162, 0.15) 0%,
            rgba(20, 124, 162, 0.15) 38%,
            rgba(10, 20, 29, 0.12) 100%);
    mix-blend-mode: normal;
    z-index: 1;
}

/* Text-Korridor: Radiale Scrim-Zone (Lektion #5: separate Zone!)
   Kern 0.55 hinter Tagline/H1/Subtitle, weicher Auslauf
   Photos bleiben seitlich klar erkennbar. */
.hero-slider .slider .slider-container figure::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        /* v45 Logo-Zone: ruhiger Grund hinter dem vergroesserten Logo
           (13.5%-34% der Hero-Hoehe), weicher Auslauf bis 42%. */
        linear-gradient(180deg,
            rgba(10, 20, 29, 0.46) 0%,
            rgba(10, 20, 29, 0.38) 26%,
            rgba(10, 20, 29, 0.14) 42%,
            rgba(10, 20, 29, 0) 50%),
        /* Bottom-Gradient (Stats/Scroll-Indicator) */
        linear-gradient(180deg,
            rgba(10, 20, 29, 0) 56%,
            rgba(10, 20, 29, 0.72) 100%),
        /* Mikroband ueber der Textzone */
        linear-gradient(180deg,
            rgba(10, 20, 29, 0) 22%,
            rgba(10, 20, 29, 0.30) 26%,
            rgba(10, 20, 29, 0.30) 58%,
            rgba(10, 20, 29, 0) 62%),
        /* Radial-Textbuehne (Kern 0.55 hinter Tagline/H1/Subtitle) */
        radial-gradient(ellipse 64% 40% at 50% 43%,
            rgba(10, 20, 29, 0.55) 0%,
            rgba(10, 20, 29, 0.42) 52%,
            rgba(10, 20, 29, 0) 100%);
    z-index: 2;
}

/* ============ 11. HERO-CONTENT (Lektion #5: CTA z-index ≥20) ============
   v47 FLOW-STACK (Fix Hero-ÜBERLAPPUNG): H1/Subtitle/Buttons kommen aus
   {% custom:hero %} und liegen JETZT in .hero-content > .container UNTER
   der Tagline im normalen Fluss (template.tpl). Keine unabhängigen
   absoluten %-Tops mehr — Tagline→H1→Subtitle→Buttons stapeln sich über
   margins, Box-Überlappung ist konstruktiv unmöglich. Abstände:
   Tagline mb 12px / H1 mb 12px / Subtitle mb 12px (≥8px-Anforderung).
   Layering: hero-content z=20 (≥ Controls 19, Stats 15), Buttons z=21. */
.hero-content .hero-title,
.hero-content .hero-subtitle {
    position: relative; /* z-index-Kontext im Flow-Stack */
    z-index: 18;
    pointer-events: none;
}
.hero-content .hero-buttons {
    position: relative;
    z-index: 20; /* HARD-REQ: ≥20, höher als Stats/Controls */
    pointer-events: none;
}
.hero-content .hero-buttons .btn,
.hero-content .hero-buttons .btn-hero-primary,
.hero-content .hero-buttons .btn-hero-secondary {
    pointer-events: auto;
    position: relative;
    z-index: 21;
}

/* v45: top 18% -> max(13.5%, 104px) — Logo-Zone unter dem verschlankten
   Header (~98px); px-Minimum schuetzt kurze Hero-Viewports. */
.hero-content {
    position: absolute;
    left: 0;
    right: 0;
    top: max(13.5%, 104px);
    z-index: var(--v-z-content);
    pointer-events: none;
    color: #fff;
    text-align: center;
}
.hero-content > .container { pointer-events: none; }

.hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
    pointer-events: auto;
}
/* v45 Logo-Prominenz: 48px -> bis 120px, viewport-hoehen-adaptiv
   (12.5vh); auf kurzen Viewports (<=840px hoch) auf 88px gedeckelt,
   weil Velocitys H1 (2 Zeilen, 217px) sonst bei 1280x800 in die
   Tagline laeuft. company.png 400x279 -> 120px Hoehe = ~172px breit
   (Referenz eyecatcher-2025: 287x200). Mobile-Override im 640er-Block. */
.hero-logo .brand-logo,
.hero-logo .brand-logo-text,
.hero-logo img {
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.5));
    max-height: min(112px, 12.5vh) !important;
    max-width: 260px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain;
}
/* Kurze Viewports (<=840px hoch): Logo auf 78px deckeln. Weitere
   Kurzviewport-Anpassungen (Margins 10px, H1-Cap, Hero 90vh) stehen im
   v47-Block NACH den Basisregeln — Reihenfolge ist hier relevant. */
@media (max-height: 840px) and (min-width: 769px) {
    .hero-logo .brand-logo,
    .hero-logo .brand-logo-text,
    .hero-logo img {
        max-height: min(78px, 12.5vh) !important;
    }
}
.hero-logo a {
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
}

.hero-tagline {
    text-align: center;
    /* v47 Flow-Stack: fester Gap Tagline→H1 (war 1.4rem) */
    margin-bottom: 12px;
}
.hero-tagline p {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    font-family: var(--v-font-display);
    font-size: 13.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0;
}

/* ============ 12. KINETIC-TYPE HERO ============================
   Lektion #1: Space Grotesk wght 320→700 + translateY + Stagger 90ms
   via font-variation-settings transition. */
/* v48 Zentrier-Fix: Spezifität (0,2,1) — schlägt das generische
   html[data-theme="velocity"] h1 { margin: 0 0 0.5em } (0,1,1), das
   margin-left:0 durchsetzte und den H1-Block (max-width 1000px) im
   1320er-Container LINKS ausrichtete (dev −160px zur Hero-Achse). */
html[data-theme="velocity"] .hero-title {
    font-family: var(--v-font-display);
    text-align: center;
    /* v47 Flow-Stack: fester Gap H1→Subtitle (war 1rem) */
    margin: 0 auto 12px;
    max-width: min(1000px, 92vw);
    line-height: 0.96;
    letter-spacing: -0.035em;
    color: #ffffff;
    /* font-variation-settings transition für wght-Animation */
    --v-wght-from: 320;
    --v-wght-to: 700;
}
.hero-title .hero-line-1 {
    display: block;
    font-weight: 700;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    color: #ffffff;
    text-wrap: balance;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55);
}
.hero-title .v-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.06em;
    /* v48 Zentrier-Fix: margin 0 0.18em → 0 0.09em je Seite. Symmetrische
       Ränder lassen Zeilen-Boxen exakt mittig stehen — die alte Trailing-
       margin-right verschob jede sichtbare Zeile um 0.09em (~8px @90px
       Font) nach links. Interner Wortabstand identisch (0.09+0.09=0.18em). */
    margin: 0 0.09em;
}
.hero-title .v-word > span {
    display: inline-block;
    /* font-variation-settings 'wght' animieren: 320→700 */
    font-variation-settings: "wght" var(--v-wght-from);
    transform: translateY(110%);
    transition: transform 700ms var(--v-ease-out),
                font-variation-settings 700ms var(--v-ease-out);
    will-change: transform, font-variation-settings;
}
.hero-title.is-revealed .v-word > span {
    transform: translateY(0);
    font-variation-settings: "wght" var(--v-wght-to);
}
.hero-title.is-revealed .v-word > span { transition-delay: var(--v-stagger, 0ms); }

/* Hero Subtitle */
.hero-subtitle {
    text-align: center;
    max-width: min(640px, 92vw);
    /* v47 Flow-Stack: fester Gap Subtitle→Buttons (war 1.6rem) */
    margin: 0 auto 12px;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
    font-family: var(--v-font-display);
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: 0.005em;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms var(--v-ease-out) 220ms,
                transform 520ms var(--v-ease-out) 220ms;
}
.hero-title.is-revealed ~ .hero-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    pointer-events: auto;
    z-index: 20;
    position: relative;
}
.hero-buttons .btn,
.hero-buttons .btn-hero-primary,
.hero-buttons .btn-hero-secondary {
    pointer-events: auto;
}
.hero-title.is-revealed ~ .hero-buttons .btn,
.hero-title.is-revealed ~ .hero-buttons .btn-hero-primary,
.hero-title.is-revealed ~ .hero-buttons .btn-hero-secondary {
    animation: vBtnSlide 600ms var(--v-ease-out) 460ms backwards;
}
@keyframes vBtnSlide {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* v47 Kurzviewport-Budget (<=840px hoch, ab 769px breit) — NACH den
   Basisregeln (Margins/H1-Font), damit gleiche Spezifität gewinnt:
   Logo 78px + Logo-mb 5.6px, Margins 10px, H1-Cap 5.1rem (statt 5.6rem)
   und Hero 90vh (statt 88vh). Damit packt der Flow-Stack (Logo 78 +
   Tagline 21.6 + H1 ~198 + Subtitle 27.2 + Buttons 48.5 + Gaps) auch auf
   720px-Heros (1280x800) über den px-anchored Controls mit ≥8px Luft —
   ohne den Subtitle in die H1-Box zu schieben (der v45-"Trick", der die
   Überlappung verursachte). Gemessen: Buttons->Controls +15px @1280x800. */
@media (max-height: 840px) and (min-width: 769px) {
    html body.velocity .hero-parallax {
        min-height: clamp(580px, 90vh, 880px);
    }
    .hero-logo { margin-bottom: 0.35rem; }
    .hero-tagline { margin-bottom: 10px; }
    /* v48: Spezifität angehoben — sonst frisst html[data-theme] .hero-title
       (0,2,1) diese 10px-Kurzviewport-Regel (0,1,0); Kaskade 12→10px wie
       v47 beabsichtigt. */
    html[data-theme="velocity"] .hero-title { margin-bottom: 10px; }
    .hero-title .hero-line-1 { font-size: clamp(2.6rem, 7vw, 5.1rem); }
    .hero-subtitle { margin-bottom: 10px; }
}

/* ============ 13. HERO-SLIDER CONTROLS (Hardening-Lektion #5) ============ */
/* Eigene absolute Zone UNTER dem Text-Korridor
   Progress 2px + Counter 01/08 + Glass-Pfeile 44px */
.hero-controls {
    position: absolute;
    left: 0; right: 0;
    bottom: 150px; /* über dem Stats-Banner, unter den Buttons */
    z-index: 19;
    padding: 0 1.2rem;
    pointer-events: none;
}
/* v45: kurze Viewports — Controls 6px hoch, damit die Buttons
   (H1-Basis 46% + 7.75rem) die Row nicht schneiden. Stats-Clearance
   bleibt >= 15px (Banner-Top hero-129px). */
@media (max-height: 840px) and (min-width: 769px) {
    .hero-controls { bottom: 144px; }
}
.hero-controls > * { pointer-events: auto; }

.hero-controls-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    max-width: min(1320px, 100% - 2.4rem);
    margin-inline: auto;
}

/* Progress Bar */
.hero-progress {
    flex: 1 1 auto;
    height: 2px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.hero-progress__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--v-progress, 0%);
    background: linear-gradient(90deg, #ffffff, var(--v-primary-light));
    transition: width 80ms linear;
}

/* Counter 01/08 */
.hero-counter {
    font-family: var(--v-font-mono);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.04em;
    font-weight: 500;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
}
.hero-counter__current {
    font-weight: 800;
    color: #ffffff;
    font-size: 19px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.hero-counter__sep { opacity: 0.5; }

/* Glass Prev/Next Buttons — 44px (Lektion #10) */
.hero-arrow {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 220ms var(--v-ease), transform 220ms var(--v-ease),
                border-color 220ms var(--v-ease);
}
.hero-arrow:hover,
.hero-arrow:focus-visible {
    background: rgba(255, 255, 255, 0.95);
    color: var(--v-secondary);
    border-color: #ffffff;
    transform: translateY(-2px);
    outline: none;
}
.hero-arrow svg { width: 18px; height: 18px; }

/* Dots (Mobile only) */
.hero-dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
    pointer-events: auto;
}
.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color 200ms var(--v-ease), width 200ms var(--v-ease);
}
.hero-dot:hover,
.hero-dot:focus-visible {
    background: rgba(255, 255, 255, 0.85);
    outline: none;
}
.hero-dot.is-active {
    background: #ffffff;
    width: 22px;
}
/* Tap-Target 44px fuer 8px-Dots (Lektion #10): Hit-Area via ::after */
.hero-dot { position: relative; }
.hero-dot::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 999px;
}

@media (max-width: 640px) {
    .hero-arrow { display: none; }
    .hero-dots { display: flex; }
    .hero-counter { font-size: 11px; }
}

/* ============ 14. STATS-BANNER ============================ */
.stats-banner {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    z-index: 15;
    padding-bottom: 22px;
    pointer-events: none;
}
.stats-banner > .container,
.stats-banner > .container + .container { pointer-events: auto; }

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    padding: 1.05rem 1.4rem;
    background: rgba(22, 40, 58, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(77, 185, 222, 0.24);
    border-radius: var(--v-radius);
    box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.7);
    max-width: min(720px, 100%);
    margin-inline: auto;
}
.stat-item {
    text-align: center;
    position: relative;
    padding: 0 0.4rem;
}
.stat-item + .stat-item::before {
    content: "";
    position: absolute;
    left: -0.6rem;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(77, 185, 222, 0.5), transparent);
}
.stat-number {
    display: block;
    font-family: var(--v-font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    color: var(--v-text);
    letter-spacing: -0.02em;
    line-height: 1.05;
    position: relative;
    padding-bottom: 0.4rem;
}
.stat-number::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--v-primary), var(--v-primary-light));
    margin: 0.35rem auto 0;
    border-radius: 2px;
    transition: width 1200ms var(--v-ease-out);
}
.stat-item.is-counted .stat-number::after { width: 38px; }
.stat-label {
    display: block;
    font-size: 12px;
    color: var(--v-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 600;
    margin-top: 0.1rem;
}

/* Scroll-Indicator */
.scroll-indicator {
    position: absolute;
    right: 1.5rem;
    bottom: 1.1rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    pointer-events: auto;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.scroll-indicator__mouse {
    width: 18px;
    height: 28px;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.scroll-indicator__wheel {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: 2px;
    height: 6px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    animation: vWheel 1.6s var(--v-ease-in-out) infinite;
}
@keyframes vWheel {
    0% { transform: translate(-50%, 0); opacity: 1; }
    60% { transform: translate(-50%, 12px); opacity: 0.3; }
    100% { transform: translate(-50%, 0); opacity: 0; }
}

@media (max-width: 1023px) {
    .scroll-indicator { display: none; }
}

/* ============ 15. MARQUEE BAND ============================ */
.v-marquee {
    background: linear-gradient(90deg, #061019 0%, #0a141d 50%, #061019 100%);
    color: rgba(255, 255, 255, 0.92);
    padding: 0.95rem 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(77, 185, 222, 0.18);
    border-bottom: 1px solid rgba(77, 185, 222, 0.18);
}
.v-marquee__track {
    display: inline-flex;
    gap: 2.5rem;
    white-space: nowrap;
    animation: vMarquee 30s linear infinite;
    will-change: transform;
    padding-left: 2.5rem;
}
.v-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--v-font-display);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.92);
}
.v-marquee__item small {
    color: var(--v-primary-light);
    font-weight: 700;
}
.v-marquee__sep {
    color: var(--v-primary);
    font-size: 14px;
    line-height: 1;
}
@keyframes vMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============ 16. LIGHTBEAM-DIVIDER (Lektion #4) ============================
   1px Verlauf-Linie #199bca→transparent mit view()-Breiten-Animation
   @supports animation-timeline Fallback: statisch sichtbar */
.v-lightbeam {
    position: relative;
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg,
        var(--v-primary) 0%,
        transparent 100%);
    opacity: 0.55;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
}

@supports (animation-timeline: view()) {
    .v-lightbeam {
        animation: vLightbeam-grow linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 30%;
    }
}
@keyframes vLightbeam-grow {
    from { transform: scaleX(0); transform-origin: left center; }
    to   { transform: scaleX(1); transform-origin: left center; }
}

/* ============ 17. SCROLL-DRIVEN ANIMATIONS (Lektion #2) ============================
   @keyframes mit animation-timeline: view() für Sektionen
   fade-up+scale .98→1 — NATIV ohne JS
   @supports nicht → statisch sichtbar (Fallback opacity 1) */
@supports (animation-timeline: view()) {
    .v-reveal {
        animation: v-reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }
}
@keyframes v-reveal {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Fallback (kein support): statisch sichtbar */
@supports not (animation-timeline: view()) {
    .v-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ============ 18. SECTION-RHYTHMUS (Lektion #6) ============================
   Dunkle Flächen mit BLAUEN Tiefen-Varianten
   - Dunkel-Standard: --v-bg / --v-surface
   - Blueprint-subtil 4% opacity 64px (Tiefen-Variante)
   - Akzent-Sektion: primary-dark-Gradient (hellster Stop ≥4.5:1) */
.v-section {
    position: relative;
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: var(--v-bg);
    color: var(--v-text);
}

.v-section--surface {
    background: var(--v-surface);
}

.v-section--blueprint {
    background:
        linear-gradient(rgba(77, 185, 222, 0.04) 1px, transparent 1px) 0 0 / 100% 64px,
        linear-gradient(90deg, rgba(77, 185, 222, 0.04) 1px, transparent 1px) 0 0 / 64px 100%,
        var(--v-bg);
}

.v-section--elevated {
    background: var(--v-elevated);
}

.v-section--accent {
    background: linear-gradient(135deg, #0d5e80 0%, var(--v-primary-dark) 100%);
    color: var(--v-text-on-dark);
}

/* CTA-Section (Akzent) */
.v-cta-section {
    background: linear-gradient(135deg, #0d5e80 0%, var(--v-primary-dark) 100%);
    color: #ffffff;
    padding: clamp(3rem, 6vw, 5rem) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.v-cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.10), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(77, 185, 222, 0.20), transparent 50%);
    pointer-events: none;
}
.v-cta-section > .container { position: relative; z-index: 1; }

.v-cta-section h1, .v-cta-section h2, .v-cta-section h3 {
    color: #ffffff;
}

/* ============ 19. SECTION-HEADER ============================ */
.v-section-header {
    text-align: center;
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
    position: relative;
}
.v-section-header h1,
.v-section-header h2 {
    font-family: var(--v-font-display);
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--v-text);
    margin: 0;
    line-height: 1.05;
    text-wrap: balance;
}
.v-section-header__sub {
    margin-top: 0.7rem;
    color: var(--v-text-muted);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    font-family: var(--v-font-display);
}

/* ============ 20. CARD SPOTLIGHT (Lektion #5 — KEIN tilt) ============================ */
.menu-card,
.news-card,
.search-card,
.reference-card,
.gallery-card {
    --v-card-x: 50%;
    --v-card-y: 50%;
    background: var(--v-elevated);
    border-radius: var(--v-radius);
    overflow: hidden;
    position: relative;
    border: 1px solid var(--v-line);
    transition: transform 380ms var(--v-ease), box-shadow 380ms var(--v-ease),
                border-color 380ms var(--v-ease);
    will-change: transform, border-color;
    color: var(--v-text);
}

/* Spotlight — radialer Glow am Cursor */
.menu-card::before,
.news-card::before,
.search-card::before,
.reference-card::before,
.gallery-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(280px circle at var(--v-card-x) var(--v-card-y),
                rgba(25, 155, 202, 0.20),
                transparent 60%);
    opacity: 0;
    transition: opacity 320ms var(--v-ease);
    z-index: 1;
}

.menu-card:hover,
.menu-card:focus-within,
.news-card:hover,
.news-card:focus-within,
.search-card:hover,
.search-card:focus-within,
.reference-card:hover,
.reference-card:focus-within,
.gallery-card:hover,
.gallery-card:focus-within {
    border-color: rgba(25, 155, 202, 0.50);
    box-shadow: var(--v-shadow-lg);
}
.menu-card:hover::before,
.menu-card:focus-within::before,
.news-card:hover::before,
.news-card:focus-within::before,
.search-card:hover::before,
.search-card:focus-within::before,
.reference-card:hover::before,
.reference-card:focus-within::before,
.gallery-card:hover::before,
.gallery-card:focus-within::before {
    opacity: 1;
}

/* Bild-Zoom */
.menu-card img,
.news-card img,
.reference-card img,
.gallery-card img,
.search-card img {
    transition: transform 600ms var(--v-ease);
    transform-origin: center center;
    will-change: transform;
}
.menu-card:hover img,
.menu-card:focus-within img,
.news-card:hover img,
.news-card:focus-within img,
.reference-card:hover img,
.reference-card:focus-within img,
.gallery-card:hover img,
.gallery-card:focus-within img,
.search-card:hover img,
.search-card:focus-within img {
    transform: scale(1.05);
}

/* News-Card Anpassungen (Dark-Cinematic) */
.news-card { background: var(--v-elevated); }
.news-card .news-image-wrapper {
    overflow: hidden;
    position: relative;
}
.news-card .news-category {
    background: var(--v-primary-dark) !important;
    color: #fff !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 999px;
    font-size: 11px !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
}
.news-card .news-title {
    font-family: var(--v-font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--v-text);
    line-height: 1.25;
}
.news-card .news-title a {
    color: inherit;
    text-decoration: none;
}
.news-card .news-title a:hover,
.news-card .news-title a:focus-visible {
    color: var(--v-primary-light);
}
.news-card .news-description {
    color: var(--v-text-muted);
    font-size: 14.5px;
    line-height: 1.55;
}
.news-card .news-read-more {
    color: var(--v-primary-light) !important;
    border-color: var(--v-primary-dark) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 12.5px;
    background: transparent !important;
}
/* Hover-Kaskadenfalle: Plugin-Hover setzt background: var(--mmt-primary)
   und color: #fff (nach Theme geladen). Velocity-Hover setzt ALLE
   drei Paar-Partner explizit — Weiß auf #1a1a1a = 17.4:1. */
.news-card .news-read-more:hover,
.news-card .news-read-more:focus-visible {
    background: var(--v-secondary) !important;
    color: #ffffff !important;
    border-color: var(--v-secondary) !important;
}

/* ============ 21. CONTENT-KONTRAST AUF DARK SURFACES ============ */
/* Kaskaden-Lage: plugin.css / page-content.css laden NACH Theme.
   Plugin-Defaultfarben sind für helle Flächen gebrannt.
   Velocity korrigiert auf dunkle Flächen. */
html[data-theme="velocity"] .news-card,
html[data-theme="velocity"] .menu-card,
html[data-theme="velocity"] .search-card,
html[data-theme="velocity"] .reference-card,
html[data-theme="velocity"] .gallery-card {
    background: var(--v-elevated);
    color: var(--v-text);
}

/* Karten-Titel zurück auf hell (für Dark-Surface) */
html[data-theme="velocity"] .menu-card-title,
html[data-theme="velocity"] .menu-card h3,
html[data-theme="velocity"] .news-card .news-title,
html[data-theme="velocity"] .news-card h3,
html[data-theme="velocity"] .search-card-title,
html[data-theme="velocity"] .reference-card-title,
html[data-theme="velocity"] .gallery-card-title {
    color: var(--v-text);
}

/* Freistehender Text auf Dark-Sections = hell */
html[data-theme="velocity"] .v-section--accent .v-section-header h1,
html[data-theme="velocity"] .v-cta-section .v-section-header h1 { color: #ffffff; }
html[data-theme="velocity"] .v-section--accent .v-section-header__sub,
html[data-theme="velocity"] .v-cta-section .v-section-header__sub {
    color: rgba(255, 255, 255, 0.78);
}

/* Dark Section Plugin-Text */
html[data-theme="velocity"] .v-section p,
html[data-theme="velocity"] .v-section li {
    color: var(--v-text-muted);
}
html[data-theme="velocity"] .v-section h1,
html[data-theme="velocity"] .v-section h2,
html[data-theme="velocity"] .v-section h3,
html[data-theme="velocity"] .v-section h4 { color: var(--v-text); }

/* ============ 22. MAGNETIC CTAs (Lektion #3) ============================
   .btn bei pointer:fine — translate zum Cursor (max 6px)
   transition für smooth zurück-Animation. */
@media (pointer: fine) {
    .v-magnetic {
        transition: transform 280ms var(--v-ease-magnetic),
                    background-color 220ms var(--v-ease),
                    color 220ms var(--v-ease),
                    box-shadow 220ms var(--v-ease);
    }
}

/* ============ 23. SIDEBAR (Lektion #3) ============================
   aside class="sidebar" + .sidebar input/label/.drop-icon display:none
   .sub-menu static/block */
.sidebar {
    background: var(--v-elevated);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius);
    padding: 1.5rem;
    box-shadow: var(--v-shadow);
}
.sidebar h3 {
    color: var(--v-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding-bottom: 0.6rem;
    margin-bottom: 0.8rem;
    border-bottom: 2px solid var(--v-primary);
    font-family: var(--v-font-display);
}
.sidebar a {
    color: var(--v-text-muted);
    font-weight: 500;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    display: block;
    transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.sidebar a:hover,
.sidebar a:focus-visible {
    background: rgba(25, 155, 202, 0.10);
    color: var(--v-primary-light);
    transform: translateX(3px);
}

/* Checkbox-Hack-Reste verstecken */
.sidebar input[type="checkbox"],
.sidebar label[for^="menu"],
.sidebar .drop-icon,
.sidebar .nav-toggle,
.sidebar .hamburger,
.sidebar > span:first-child {
    display: none !important;
}
.sidebar .sub-menu {
    display: block !important;
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-width: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ============ 24. FOOTER ============================ */
.site-footer {
    background: linear-gradient(180deg, #061019 0%, #0a141d 100%);
    color: rgba(255, 255, 255, 0.88);
    padding: 0;
    font-size: 14px;
    border-top: 1px solid rgba(77, 185, 222, 0.18);
}
.footer-main {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-bottom: 1px solid rgba(77, 185, 222, 0.14);
}
.footer-dynamic-content ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.75rem;
    list-style: none;
    margin: 0; padding: 0;
}
/* Verschachtelte Listen (z.B. Bottomdaten-Spalten) bleiben Fließlisten —
   das Spalten-Grid erbt sonst in Adress-/Social-Zeilen und zieht alles auseinander. */
.footer-dynamic-content ul ul {
    display: block;
    gap: 0;
}
.footer-dynamic-content li li {
    margin-top: 0.3rem;
}
.footer-dynamic-content h2 {
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--v-primary);
    display: inline-block;
    font-family: var(--v-font-display);
}
.footer-dynamic-content p,
.footer-dynamic-content li,
.footer-dynamic-content a {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.6;
}
.footer-dynamic-content a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: color 200ms var(--v-ease);
    border-bottom: 1px solid transparent;
}
.footer-dynamic-content a:hover,
.footer-dynamic-content a:focus-visible {
    color: var(--v-primary-light);
    border-bottom-color: var(--v-primary-light);
}
.footer-bottom {
    padding: 1.2rem 0;
    background: #04090e;
    font-size: 13px;
}
.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-bottom a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    margin-left: 1.4rem;
}
.footer-bottom a:first-child { margin-left: 0; }
.footer-bottom a:hover,
.footer-bottom a:focus-visible {
    color: var(--v-primary-light);
}

/* Bottom-Navigation (nav_bottom → div#bottomnavi, zwei ul-Zeilen:
   Links-Zeile + Credit-Zeile) — horizontal, zentriert, umbruchend.
   Mono-cyan Akzente passend zur Status-Zeile des Themes. */
#bottomnavi ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.3rem 1.3rem;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#bottomnavi li {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
#bottomnavi a {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-family: var(--v-font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 200ms var(--v-ease);
}
#bottomnavi a:hover,
#bottomnavi a:focus-visible {
    color: var(--v-primary-light);
}
#bottomnavi .blau {
    color: var(--v-primary);
}
/* FAB (fixed rechts).freie Bahn: Container ist bis 1320px breit,
   darunter ragt die rechtsbündige Link-Zeile unter den FAB. */
@media (max-width: 1459px) {
    .footer-legal { padding-right: 3.4rem; }
}

/* ============ 25. FAB + BACK-TO-TOP ============================ */
.fab-container {
    position: fixed;
    right: 1.2rem;
    bottom: 5.2rem;
    z-index: var(--v-z-fab);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
}
.fab-btn {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--v-primary-dark);
    color: #fff;
    border: 0;
    cursor: pointer;
    box-shadow: var(--v-glow-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 220ms var(--v-ease), box-shadow 220ms var(--v-ease);
}
.fab-btn:hover,
.fab-btn:focus-visible {
    transform: translateY(-3px) scale(1.04);
    box-shadow: var(--v-glow-primary-strong);
    outline: none;
}
.fab-btn svg { width: 22px; height: 22px; }
.fab-menu {
    display: none;
    flex-direction: column;
    gap: 0.45rem;
}
.fab-menu.active { display: flex; }
.fab-item {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--v-elevated);
    color: var(--v-primary-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(25, 155, 202, 0.20);
    box-shadow: var(--v-shadow);
    text-decoration: none;
    transition: transform 220ms var(--v-ease), color 220ms var(--v-ease),
                background-color 220ms var(--v-ease), border-color 220ms var(--v-ease);
}
.fab-item:hover,
.fab-item:focus-visible {
    transform: translateY(-2px);
    background: var(--v-primary);
    color: #fff;
    border-color: var(--v-primary);
    outline: none;
}
.fab-item svg { width: 19px; height: 19px; }

.back-to-top {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: var(--v-z-fab);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--v-secondary);
    color: #fff;
    border: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 240ms var(--v-ease), transform 240ms var(--v-ease),
                background-color 220ms var(--v-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--v-shadow);
}
.back-to-top::before {
    content: "↑";
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}
.back-to-top::after { content: none; }
.back-to-top span,
.back-to-top { font-size: 0; }
.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
    background: var(--v-primary-dark);
    outline: none;
}

/* ============ 26. SCROLL-REVEAL ============================
   KEIN clip-path/visibility auf Karten mit IO-Reveals (Lektion #4)
   Stattdessen opacity+translateY-Reveals. */
.v-reveal-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--v-ease-out), transform 700ms var(--v-ease-out);
    transition-delay: var(--v-stagger, 0ms);
}
.v-reveal-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Plugin-Karten — KEIN clip-path, opacity+translate */
.menu-card.v-reveal-scroll,
.news-card.v-reveal-scroll,
.search-card.v-reveal-scroll,
.reference-card.v-reveal-scroll,
.gallery-card.v-reveal-scroll {
    clip-path: none;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--v-ease-out), transform 700ms var(--v-ease-out);
    transition-delay: var(--v-stagger, 0ms);
}
.menu-card.v-reveal-scroll.is-visible,
.news-card.v-reveal-scroll.is-visible,
.search-card.v-reveal-scroll.is-visible,
.reference-card.v-reveal-scroll.is-visible,
.gallery-card.v-reveal-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ 27. KONTAKT-FORMULAR (Lektion #12) ============================
   theme-scoped Overrides für .form-label (13px/600)
   + .submit-button (:hover/:disabled) gegen addons/contact/plugin.css */
html[data-theme="velocity"] .form-label {
    display: block;
    font-family: var(--v-font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--v-text);
    margin-bottom: 0.45rem;
}
html[data-theme="velocity"] .form-input,
html[data-theme="velocity"] .form-textarea,
html[data-theme="velocity"] input[type="text"],
html[data-theme="velocity"] input[type="email"],
html[data-theme="velocity"] input[type="tel"],
html[data-theme="velocity"] textarea,
html[data-theme="velocity"] select {
    background: var(--v-elevated);
    color: var(--v-text);
    border: 1.5px solid var(--v-line-strong);
    border-radius: var(--v-radius-sm);
    font-family: var(--v-font-body);
    font-size: 15px;
    padding: 0.95rem 1.1rem;
    min-height: 48px;
    width: 100%;
    transition: border-color 200ms var(--v-ease), background-color 200ms var(--v-ease),
                box-shadow 200ms var(--v-ease);
}
html[data-theme="velocity"] .form-input:focus,
html[data-theme="velocity"] .form-textarea:focus,
html[data-theme="velocity"] input[type="text"]:focus,
html[data-theme="velocity"] input[type="email"]:focus,
html[data-theme="velocity"] input[type="tel"]:focus,
html[data-theme="velocity"] textarea:focus,
html[data-theme="velocity"] select:focus {
    border-color: var(--v-primary);
    background: var(--v-elevated-2);
    outline: none;
    box-shadow: 0 0 0 4px rgba(25, 155, 202, 0.18);
}
html[data-theme="velocity"] input::placeholder,
html[data-theme="velocity"] textarea::placeholder {
    color: var(--v-text-dim);
}

html[data-theme="velocity"] .submit-button,
html[data-theme="velocity"] button[type="submit"],
html[data-theme="velocity"] input[type="submit"] {
    background: var(--v-primary-dark);
    color: #ffffff;
    border: 1.5px solid var(--v-primary-dark);
    border-radius: var(--v-radius-sm);
    font-family: var(--v-font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.95rem 1.6rem;
    min-height: 48px;
    min-width: 160px;
    cursor: pointer;
    transition: background-color 220ms var(--v-ease), color 220ms var(--v-ease),
                border-color 220ms var(--v-ease), transform 220ms var(--v-ease-magnetic),
                box-shadow 220ms var(--v-ease);
}
html[data-theme="velocity"] .submit-button:hover,
html[data-theme="velocity"] .submit-button:focus-visible,
html[data-theme="velocity"] button[type="submit"]:hover,
html[data-theme="velocity"] button[type="submit"]:focus-visible,
html[data-theme="velocity"] input[type="submit"]:hover,
html[data-theme="velocity"] input[type="submit"]:focus-visible {
    background: var(--v-secondary);
    color: #ffffff;
    border-color: var(--v-secondary);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.6);
    outline: none;
}
html[data-theme="velocity"] .submit-button:disabled,
html[data-theme="velocity"] button[type="submit"]:disabled,
html[data-theme="velocity"] input[type="submit"]:disabled {
    background: var(--v-primary-dark) !important;
    color: #ffffff !important;
    border-color: var(--v-primary-dark) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ============ 28. RESPONSIVE BREAKPOINTS ============================ */
@media (max-width: 1024px) {
    .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
    .stat-number { font-size: clamp(1.4rem, 3.5vw, 2rem); }
}

@media (max-width: 640px) {
    .hero-parallax { min-height: 580px; }
    /* v47: Logo mobil — 64px. Mobile-Hero (88vh bei 844er Viewport = 743px)
       hat im Flow-Stack massig Luft: Logo-Zone ~104..168, Tagline bis ~199,
       Stack endet ~410 — Buttons/Controls (>560) weit unberührt. */
    .hero-logo .brand-logo,
    .hero-logo .brand-logo-text,
    .hero-logo img {
        max-height: 64px !important;
        max-width: 140px !important;
    }
    .hero-controls { bottom: 130px; }
    .hero-dots { margin-top: 0.4rem; }
    .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; padding: 0.7rem 0.4rem; }
    .stat-number { font-size: 1.2rem; }
    .stat-label { font-size: 10px; }
    .stat-item + .stat-item::before { left: -0.2rem; }
    .footer-bottom-content { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .footer-bottom a { margin-left: 0; margin-right: 1.4rem; }
}

/* ============ 29. REDUCED MOTION (Härtung) ============================
   Alles aus, Inhalte sofort lesbar */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    /* KEIN view()-Animation, KEIN scroll-driven: statisch sichtbar */
    .v-reveal {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .v-lightbeam {
        transform: scaleX(1) !important;
        animation: none !important;
    }
    /* Hero-Slider keine Scale-Animation */
    .hero-slider .slider .slider-container figure { transform: none !important; }
    .hero-slider .slider .slider-container figure img { transform: none !important; }
    .hero-progress__fill { transition: none !important; }
    .scroll-indicator__wheel { animation: none !important; }
    .v-marquee__track { animation: none !important; }
    /* Reveal-Cards statisch sichtbar */
    .v-reveal-scroll,
    .menu-card.v-reveal-scroll,
    .news-card.v-reveal-scroll,
    .search-card.v-reveal-scroll,
    .reference-card.v-reveal-scroll,
    .gallery-card.v-reveal-scroll {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
    /* Kinetic-Type: H1 sofort sichtbar (ohne Stagger) */
    .hero-title .v-word > span,
    .hero-title.is-revealed .v-word > span {
        transform: none !important;
        transition: none !important;
        font-variation-settings: "wght" 700 !important;
    }
    .hero-parallax > .hero-title,
    .hero-parallax > .hero-subtitle,
    .hero-content .hero-title,
    .hero-content .hero-subtitle,
    .hero-subtitle { opacity: 1 !important; transform: none !important; }
    .hero-title.is-revealed ~ .hero-subtitle { opacity: 1 !important; transform: none !important; }
    .hero-slider .slider .slider-container figure.is-active { transform: none !important; }
    /* Magnetic CTAs deaktiviert */
    .v-magnetic { transition: none !important; }
}

/* ============ 30. PRINT ============================ */
@media print {
    .hero-controls, .back-to-top, .fab-container, .v-marquee,
    .site-header::before, .scroll-indicator, .v-lightbeam,
    .hero-parallax::before, .hero-parallax::after,
    #mmt-dev-theme-bar { display: none !important; }
    .hero-parallax { min-height: auto; }
    .hero-slider .slider .slider-container figure {
        opacity: 1; transform: none; position: relative;
    }
    body.velocity { background: #fff; color: #000; }
}

/* ============ 31. ADMIN-ACCESS (dezentes Gear) ============================ */
.admin-link {
    color: inherit;
    opacity: 0.55;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: opacity 180ms ease, color 180ms ease, background-color 180ms ease;
}
.admin-link:hover,
.admin-link:focus-visible {
    opacity: 1;
    color: var(--v-primary-light);
    background: rgba(25, 155, 202, 0.10);
    outline: none;
}

/* ============ 32. EMBEDDED MAP (Kontakt) ============================ */
.map-section {
    margin: 3rem auto 1rem;
    max-width: min(100% - 2.5rem, 1180px);
}
.map-section h3 {
    font-family: var(--v-font-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    letter-spacing: 0.04em;
    margin: 0 0 0.4rem;
    color: var(--v-text);
}
.map-section p {
    color: var(--v-text-muted);
    margin: 0 0 1rem;
}
.map-container {
    border-radius: var(--v-radius-lg);
    overflow: hidden;
    box-shadow: var(--v-shadow-lg);
    border: 1px solid var(--v-line);
    background: var(--v-elevated);
    min-height: 320px;
    position: relative;
}
.embedded-map {
    display: block;
    width: 100%;
    min-height: 320px;
    height: clamp(320px, 48vw, 480px);
    border: 0;
    background: var(--v-elevated);
}
.embedded-map:focus-visible {
    outline: 3px solid var(--v-primary);
    outline-offset: -3px;
}

/* ============ 33. NAVIGATION (Eigene Mechanik-Overrides) ============ */
nav .main-menu a,
nav .main-menu label {
    color: var(--v-text);
    font-family: var(--v-font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 0.5em 0.95em;
    text-decoration: none;
    transition: color 200ms var(--v-ease), background-color 200ms var(--v-ease);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
nav .main-menu a:hover,
nav .main-menu label:hover,
nav .main-menu a:focus-visible,
nav .main-menu label:focus-visible {
    color: var(--v-primary-light);
    background: rgba(25, 155, 202, 0.08);
}

nav .sub-menu {
    background: rgba(22, 40, 58, 0.96) !important;
    border: 1px solid rgba(77, 185, 222, 0.18);
    border-top: 2px solid var(--v-primary);
    border-radius: var(--v-radius);
    box-shadow: var(--v-shadow-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
nav .sub-menu a,
nav .sub-menu label {
    color: var(--v-text);
    font-family: var(--v-font-body);
    font-weight: 500;
    font-size: 14px;
    padding: 0.6rem 1.1rem;
    min-height: 44px;
}
nav .sub-menu a:hover,
nav .sub-menu label:hover,
nav .sub-menu a:focus-visible,
nav .sub-menu label:focus-visible {
    color: var(--v-primary-light);
    background: rgba(25, 155, 202, 0.10);
}

/* Burger NUR mobil (combined.css versteckt @>=769 via display:none —
   hier explizit nachziehen, da Theme-CSS später lädt und sonst gewinnt) */
@media (min-width: 769px) {
    nav label[for="menu0"] { display: none !important; }
}
@media (max-width: 768px) {
    nav label[for="menu0"] {
        color: var(--v-primary);
        font-size: 1.05em;
        font-weight: 700;
        padding: 0.85em 1em;
        background: rgba(22, 40, 58, 0.6);
        border-bottom: 1px solid rgba(77, 185, 222, 0.18);
        min-height: 44px;
        cursor: pointer;
    }
    /* Burger braucht kein zusaetzliches Drop-Icon (combined.css ::before) */
    nav label[for="menu0"] .drop-icon { display: none; }
}

/* ============ 33b. v46 OPTION C: NAV-BRAND (kleines Nav-Logo) ====== */
/* Hybrid-Prinzip: Hero behält das große Logo (.hero-logo), hier die
   kompakte Nav-Variante ({% static-logo %}-Slot, 2. Vorkommen —
   ThemeRenderer ersetzt alle). company.png = dunkles Badge mit weißem
   Kern auf Transparent; der dunkle Glass-Header (rgba(10,20,29,.85))
   gibt dem weißen Kern von selbst Kontrast — Chip deshalb DEZENTER
   als bei hellen Headern (nur Rand-Definition + Edge-Shadow).
   Bildhöhe 40px im 48px-Chip, Nav bleibt 64px. */
@media (min-width: 769px) {
    .main-nav .nav-brand {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        height: 48px;
        margin-right: 0.9rem;
        padding: 0.25rem 0.55rem;
        background: linear-gradient(180deg, rgba(6, 14, 20, 0.25), rgba(6, 14, 20, 0.18));
        border-radius: 8px;
        box-shadow: inset 0 0 0 1px rgba(77, 185, 222, 0.14);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    /* combined.css: nav a { display:block; overflow:hidden; ellipsis } */
    .main-nav .nav-brand a {
        display: flex;
        align-items: center;
        height: 100%;
        line-height: 1;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
    .main-nav .nav-brand img,
    .main-nav .nav-brand .brand-logo,
    .main-nav .nav-brand .brand-logo-text {
        height: 100%;           /* schlägt base img{height:auto} (Sektion 5) */
        width: auto;
        max-height: 100% !important;
        max-width: none !important;
        object-fit: contain;
        filter: drop-shadow(0 1px 2px rgba(4, 10, 16, 0.45));
    }
    .main-nav .nav-brand .brand-logo-text {
        font-family: var(--v-font-display);
        font-size: 20px;
        font-weight: 800;
        color: var(--v-text);
        letter-spacing: 0.02em;
    }
}

/* Menü-Balance: Items zentrieren sich im available space zwischen
   Brand-Link und CTA (combined.css läßt flex-items sonst am Brand
   kleben). Selector gescoped auf die Top-Nav-ul. */
@media (min-width: 769px) {
    .main-nav > .container > ul.main-menu {
        justify-content: center;
    }
}

/* ============ 33c. v46: TABLET-/SCHMALBAND 769–1260 ================
   Menü-Balance mit Nav-Brand (gleiche Begründung wie momentum, hier
   mit velocity-Messwerten: Items 868px @14px/.5em-.95em — der CTA-
   Überlauf begann schon bei ~1240 ohne Brand). CTA + Admin aus
   (Kontakt bleibt Menü-Item + Hero-CTA), Typo dezent komprimiert.
   769–860 zusätzlich Brand aus (Items brauchen den Platz; Mobile
   ≤768 zeigt den Brand wieder in der Burger-Zeile). */
@media (min-width: 769px) and (max-width: 1260px) {
    nav .main-menu a,
    nav .main-menu label {
        font-size: 13px;
        padding: 0.45em 0.55em;
    }
    .main-nav .nav-cta,
    .main-nav .admin-access {
        display: none;
    }
}
@media (min-width: 769px) and (max-width: 860px) {
    .main-nav .nav-brand { display: none; }
}

/* Mobile: Burger + kompakter Brand in EINER Zeile (Header 65px bleibt).
   ul.main-menu bricht per flex-basis:100% in Zeile 2 — Burger-Mechanik
   (input:checked+label+ul aus combined.css) unberührt. */
@media (max-width: 768px) {
    .main-nav .container {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    .main-nav .container > label[for="menu0"] {
        order: 1;
        flex: 1 1 auto;
        width: auto; /* combined.css: nav label { width:100% } */
    }
    .main-nav .nav-brand {
        order: 2;
        flex: 0 0 auto;
        height: 32px;
        margin-right: 0.5rem;
        padding: 0.15rem 0.4rem;
        border-radius: 6px;
        background: linear-gradient(180deg, rgba(6, 14, 20, 0.22), rgba(6, 14, 20, 0.16));
        box-shadow: inset 0 0 0 1px rgba(77, 185, 222, 0.12);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .main-nav .container > ul.main-menu {
        order: 3;
        flex: 1 1 100%;
    }
    .main-nav .nav-brand a {
        display: flex;
        align-items: center;
        height: 100%;
        line-height: 1;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
    .main-nav .nav-brand img,
    .main-nav .nav-brand .brand-logo {
        height: 100%;
        width: auto;
        max-height: 100% !important;
        max-width: none !important;
        object-fit: contain;
        filter: drop-shadow(0 1px 2px rgba(4, 10, 16, 0.45));
    }
}

nav .main-menu > li > a::after,
nav .main-menu > li > label::after {
    content: "";
    position: absolute;
    left: 0.95em;
    right: 0.95em;
    bottom: 0.4em;
    height: 2px;
    background: linear-gradient(90deg, #199bca, #4db9de);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 360ms var(--v-ease);
    border-radius: 2px;
    pointer-events: none;
}
nav .main-menu > li:hover > a::after,
nav .main-menu > li:hover > label::after,
nav .main-menu > li > a:focus-visible::after,
nav .main-menu > li > label:focus-visible::after {
    transform: scaleX(1);
}
nav .main-menu > li > a,
nav .main-menu > li > label { position: relative; }

/* Drop-Icon */
nav .main-menu > li > label .drop-icon::before {
    content: "▾";
    color: var(--v-text-muted);
    font-size: 0.85em;
    margin-left: 0.25em;
    opacity: 0.65;
}
nav .sub-menu label .drop-icon::before {
    content: "›";
    color: var(--v-text-muted);
    font-size: 1.15em;
}
nav .sub-menu label:hover .drop-icon::before {
    color: var(--v-primary-light);
}

/* Nav-CTA Button — NUR Desktop (Mobile-Hide in Sektion 7 bleibt wirksam,
   diese Regel hier liegt sonst KASKADEN-HINTER dem Mobile-Hide) */
@media (min-width: 769px) {
    .nav-cta { display: flex; align-items: center; margin-left: 0.8rem; }
}
.nav-cta .btn {
    padding: 0.7rem 1.4rem;
    min-height: 42px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--v-primary-dark);
    border: 1.5px solid var(--v-primary-dark);
    box-shadow: var(--v-glow-primary);
}
.nav-cta .btn:hover,
.nav-cta .btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--v-glow-primary-strong);
    background: var(--v-secondary);
    border-color: var(--v-secondary);
}
@media (min-width: 769px) {
    .admin-access { display: inline-flex; align-items: center; }
}

/* Fokus-Ring global */
nav a:focus-visible,
nav label:focus-visible,
nav button:focus-visible,
.sidebar a:focus-visible {
    outline: 2px solid var(--v-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* v46: Underline-Offset im Tablet-/Schmalband an das komprimierte
   Item-Padding anpassen — NACH dem originalen ::after-Block (oben),
   damit die Kaskade hier gewinnt. */
@media (min-width: 769px) and (max-width: 1260px) {
    nav .main-menu > li > a::after,
    nav .main-menu > li > label::after {
        left: 0.55em;
        right: 0.55em;
    }
}