/* ============================================
   Schrift "Inter" – LOKAL gehostet (kein Google Fonts mehr).
   Variable Fonts (latin), decken alle Gewichte 100–900 ab.
   ============================================ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter-latin-wght-italic.woff2') format('woff2');
}

/**
 * Eltekk Events Landing Page Styles
 * Hartkantiges, flaechiges Design mit Teal-Akzent auf Navy — Palette nach
 * dem Vorbild von questax.com (siehe Design-Tokens weiter unten).
 */

/* ============================================
   WORDPRESS THEME OVERRIDE - WICHTIG!
   Diese Styles ueberschreiben alle Theme-Styles
   ============================================ */

/* Body Reset fuer Landing Pages */
body:has(.eltekk-landing-wrapper),
body.eltekk-landing-page,
body.eltekk-fullscreen {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--eltekk-bg-dark, #0a0f14) !important;
    /* clip statt hidden — siehe .eltekk-landing-wrapper: hidden erzeugt einen
       Scroll-Container und deaktiviert damit position:sticky im Scroll-World-Hero. */
    overflow-x: hidden !important;
    overflow-x: clip !important;
    transition: background-color 0.3s ease !important;
}

/* Admin Bar Anpassung – fuer ALLE Seiten (Landing + Unterseiten),
   damit der fixe Header nicht unter der WP-Adminbar verschwindet. */
body.admin-bar .eltekk-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .eltekk-header {
        top: 46px !important;
    }
}

/* Alle Theme-Wrapper entfernen */
body:has(.eltekk-landing-wrapper) .wp-site-blocks,
body:has(.eltekk-landing-wrapper) .entry-content,
body:has(.eltekk-landing-wrapper) .page-content,
body:has(.eltekk-landing-wrapper) .site-content,
body:has(.eltekk-landing-wrapper) .content-area,
body:has(.eltekk-landing-wrapper) main:not(.eltekk-main),
body:has(.eltekk-landing-wrapper) article,
body:has(.eltekk-landing-wrapper) .wp-block-group,
body:has(.eltekk-landing-wrapper) .wp-block-post-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    background: transparent !important;
}

/* Theme Header/Footer verstecken */
body:has(.eltekk-landing-wrapper) header:not(.eltekk-header),
body:has(.eltekk-landing-wrapper) .wp-block-template-part,
body:has(.eltekk-landing-wrapper) footer:not(.eltekk-footer),
body:has(.eltekk-landing-wrapper) .site-header,
body:has(.eltekk-landing-wrapper) .site-footer,
body:has(.eltekk-landing-wrapper) .entry-title,
body:has(.eltekk-landing-wrapper) .page-title,
body:has(.eltekk-landing-wrapper) .wp-block-post-title {
    display: none !important;
}

/* Fallback fuer Browser ohne :has() Support */
.eltekk-landing-page .wp-site-blocks,
.eltekk-landing-page .entry-content,
.eltekk-landing-page main,
.eltekk-landing-page article {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.eltekk-landing-page header:not(.eltekk-header),
.eltekk-landing-page footer:not(.eltekk-footer),
.eltekk-landing-page .entry-title,
.eltekk-landing-page .page-title {
    display: none !important;
}

/* ============================================
   ENDE WORDPRESS OVERRIDE
   ============================================ */

/* ============================================================================
   Design-Tokens — Palette nach dem Vorbild von questax.com
   ----------------------------------------------------------------------------
   Uebernommen ist von questax.com der GRUNDAUFBAU — Navy-Flaechen, ruhige
   Grotesk, Ueberschriften halbfett, Eyebrows in Versalien mit weiter Laufweite.

   NICHT uebernommen sind drei Dinge:
   * deren Akzent-Teal #33CCCC. Der Akzent ist ein sattes Orange (#FF6A00) —
     es liegt im Filmmaterial ohnehin drin (Sonnenuntergang, Pylonen,
     Buehnenlicht) und traegt auf dem blauen Abendbild deutlich weiter.
   * deren Radien: questax rundet stark ab (30px auf Karten, 50px auf Buttons),
     hier gilt das Gegenteil. Alle Radius-Tokens stehen auf 0.
   * deren Hausschrift "Madera" — lizenzpflichtig. Inter liegt lokal im Plugin
     und deckt denselben Charakter ab.
   ============================================================================ */

/* Dark Mode (Default) */
:root {
    --eltekk-primary: #ff6a00;
    --eltekk-primary-hover: #ff8f3d;
    --eltekk-primary-dark: #cc5200;
    --eltekk-bg-dark: #0d121b;
    --eltekk-bg-darker: #070b12;
    --eltekk-bg-card: #161f2e;
    --eltekk-text-primary: #f4f1ec;
    --eltekk-text-secondary: #b9b3ab;
    --eltekk-text-muted: #8b857d;
    --eltekk-border: rgba(235, 236, 240, 0.10);
    --eltekk-border-hover: rgba(255, 106, 0, 0.45);
    --eltekk-primary-line: rgba(255, 106, 0, 0.50);
    --eltekk-primary-soft: rgba(255, 106, 0, 0.12);
    --eltekk-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 32px -22px rgba(0, 0, 0, 0.6);
    --eltekk-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --eltekk-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --eltekk-header-bg: rgba(13, 18, 27, 0.72);
    --eltekk-header-bg-scrolled: rgba(13, 18, 27, 0.94);
    /* Layout-Tokens (modusunabhaengig -> nur hier, Light erbt sie) */
    --eltekk-radius: 0;
    --eltekk-radius-sm: 0;
    --eltekk-section-y: 7.5rem;
    --eltekk-content-width: 980px;
}

/* Light Mode.
   #FF6A00 traegt auf Weiss nur etwa 2.9:1 und taugt dort weder fuer Text noch
   fuer Bedienelemente. Der Akzent wird deshalb im hellen Modus abgedunkelt
   (#C44E00, ~4.7:1); die Flaechenfarben bleiben die von questax. */
[data-theme="light"] {
    --eltekk-primary: #c44e00;
    --eltekk-primary-hover: #a34100;
    --eltekk-primary-dark: #8a3700;
    --eltekk-bg-dark: #f2f5f8;
    --eltekk-bg-darker: #ebecf0;
    --eltekk-bg-card: #ffffff;
    --eltekk-text-primary: #242e3d;
    --eltekk-text-secondary: #3c4b62;
    --eltekk-text-muted: #667892;
    --eltekk-border: rgba(36, 46, 61, 0.12);
    --eltekk-border-hover: rgba(196, 78, 0, 0.5);
    --eltekk-primary-line: rgba(196, 78, 0, 0.5);
    --eltekk-primary-soft: rgba(196, 78, 0, 0.10);
    --eltekk-shadow: 0 1px 2px rgba(36, 46, 61, 0.06), 0 14px 32px -22px rgba(36, 46, 61, 0.16);
    --eltekk-header-bg: rgba(242, 245, 248, 0.9);
    --eltekk-header-bg-scrolled: rgba(242, 245, 248, 0.98);
}

/* Globale Standard-Schrift: ueberall Inter.
   Wichtig, weil Header/Footer auf Unterseiten Body-Geschwister von .eltekk-page
   sind und sonst die Browser-Standardschrift (Serif) erben -> Navbar-Schrift
   unterschied sich je nach Seite. */
body {
    font-family: var(--eltekk-font-family);
}

/* Reset & Base */
.eltekk-landing-wrapper,
.eltekk-landing-wrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.eltekk-landing-wrapper {
    font-family: var(--eltekk-font-family);
    background-color: var(--eltekk-bg-dark);
    color: var(--eltekk-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* clip statt hidden: hidden macht diesen Wrapper zu einem Scroll-Container,
       und darin funktioniert position:sticky nicht mehr — die gepinnten Layer des
       Scroll-World-Heros wuerden einfach mit wegscrollen. clip klippt genauso,
       erzeugt aber keinen Scroll-Container. hidden bleibt als Fallback fuer
       Browser ohne clip-Support stehen (Safari < 16). */
    overflow-x: hidden;
    overflow-x: clip;
    /* Fullscreen - ueber alles legen */
    position: relative;
    z-index: 10;
    min-height: 100vh;
    width: 100vw;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Header */
.eltekk-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-family: var(--eltekk-font-family);
    background: var(--eltekk-header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--eltekk-border);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.eltekk-header.scrolled {
    background: var(--eltekk-header-bg-scrolled);
    box-shadow: var(--eltekk-shadow);
}

.eltekk-header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.eltekk-logo a {
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.eltekk-logo .logo-eltekk {
    color: var(--eltekk-text-primary);
}

.eltekk-logo .logo-events {
    color: var(--eltekk-primary);
}

/* Navigation */
.eltekk-nav-list {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}

/* WordPress Menu Items + Fallback */
.eltekk-nav-list li,
.eltekk-nav-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eltekk-nav-list li a,
.eltekk-nav-item a {
    text-decoration: none;
    color: var(--eltekk-text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--eltekk-transition);
    position: relative;
}

.eltekk-nav-list li a:hover,
.eltekk-nav-item a:hover {
    color: var(--eltekk-text-primary);
}

.eltekk-nav-list li a::after,
.eltekk-nav-item a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--eltekk-primary);
    transition: var(--eltekk-transition);
}

.eltekk-nav-list li a:hover::after,
.eltekk-nav-item a:hover::after {
    width: 100%;
}

/* Current Menu Item */
.eltekk-nav-list .current-menu-item a,
.eltekk-nav-list .current_page_item a {
    color: var(--eltekk-primary);
}

.eltekk-nav-list .current-menu-item a::after,
.eltekk-nav-list .current_page_item a::after {
    width: 100%;
}

/* Header Actions */
.eltekk-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Header Button - kleiner und moderner */
.eltekk-header-actions .eltekk-btn.eltekk-btn-primary {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    background: rgba(255, 106, 0, 0.15) !important;
    color: var(--eltekk-primary) !important;
    border: 1px solid rgba(255, 106, 0, 0.3) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none;
}

.eltekk-header-actions .eltekk-btn.eltekk-btn-primary:hover {
    background: var(--eltekk-primary-soft) !important;
    border-color: var(--eltekk-primary) !important;
    transform: translateY(-1px);
}

.eltekk-theme-toggle {
    background: transparent;
    border: 1px solid var(--eltekk-border);
    color: var(--eltekk-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    width: 40px;
    height: 40px;
    border-radius: 0;
    transition: var(--eltekk-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.eltekk-theme-toggle:hover {
    color: var(--eltekk-primary);
    border-color: var(--eltekk-primary);
    background: rgba(255, 106, 0, 0.1);
}

.eltekk-theme-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.eltekk-theme-toggle .icon-sun {
    display: none;
}

.eltekk-theme-toggle .icon-moon {
    display: block;
}

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

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

/* Buttons */
.eltekk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    border-radius: 0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: var(--eltekk-transition);
    border: none;
}

.eltekk-btn-primary {
    background: var(--eltekk-primary);
    color: var(--eltekk-bg-dark);
}

.eltekk-btn-primary:hover {
    background: var(--eltekk-primary-hover);
    transform: translateY(-1px);
}

.eltekk-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--eltekk-text-primary);
    border: 1px solid var(--eltekk-border);
}

.eltekk-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.eltekk-btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Mobile Toggle */
.eltekk-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.eltekk-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--eltekk-text-primary);
    transition: var(--eltekk-transition);
}

/* Hero Section */
.eltekk-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 8rem 2rem 4rem;
    overflow: hidden;
}

/* Animated Gradient Background (Fallback wenn kein Bild) */
.eltekk-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 80%, rgba(255, 106, 0, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(255, 106, 0, 0.04) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, rgba(20, 30, 48, 0.6) 0%, transparent 70%),
        linear-gradient(180deg, var(--eltekk-bg-dark) 0%, #0d1520 50%, var(--eltekk-bg-dark) 100%);
    z-index: 0;
}

/* Animierte Lichtstreifen */
.eltekk-hero::after {
    /* dezent: keine animierten Lichtstreifen mehr */
    content: none;
}

/* Wenn ein Hintergrundbild gesetzt ist */
.eltekk-hero.has-bg-image::before {
    display: none;
}

.eltekk-hero.has-bg-image::after {
    display: none;
}

.eltekk-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 15, 20, 0.92) 0%,
        rgba(10, 15, 20, 0.7) 50%,
        rgba(10, 15, 20, 0.4) 100%
    );
    z-index: 1;
}

.eltekk-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin-left: 5%;
}

/* Hero Badge */
.eltekk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: 1px solid rgba(255, 106, 0, 0.35);
    color: var(--eltekk-primary);
    padding: 0.55rem 1rem;
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1.75rem;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--eltekk-primary);
    border-radius: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

/* Hero Headline */
.eltekk-hero-headline {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -0.03em;
}

.eltekk-hero-headline .highlight {
    color: var(--eltekk-primary);
}

/* Hero Description */
.eltekk-hero-description {
    font-size: 1.125rem;
    color: var(--eltekk-text-secondary);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 550px;
}

/* Hero Buttons */
.eltekk-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Scroll Indicator */
.eltekk-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.scroll-mouse {
    width: 26px;
    height: 40px;
    border: 2px solid var(--eltekk-text-muted);
    border-radius: 0;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: var(--eltekk-text-muted);
    border-radius: 0;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Stats Section */
.eltekk-stats {
    position: relative;
    z-index: 3;
    background: var(--eltekk-bg-dark);
    border-top: 1px solid var(--eltekk-border);
    margin-top: -1px;
}

.eltekk-stats-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.eltekk-stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.eltekk-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--eltekk-primary);
    letter-spacing: -0.02em;
}

.eltekk-stat-label {
    font-size: 0.95rem;
    color: var(--eltekk-text-secondary);
    font-weight: 500;
}

.eltekk-stat-divider {
    width: 1px;
    height: 60px;
    background: var(--eltekk-border);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .eltekk-header-container {
        padding: 1rem 1.5rem;
    }

    .eltekk-nav-list {
        gap: 1.5rem;
    }

    .eltekk-hero-content {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .eltekk-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--eltekk-bg-dark);
        border-bottom: 1px solid var(--eltekk-border);
        padding: 1rem;
    }

    .eltekk-nav.active {
        display: block;
    }

    .eltekk-nav-list {
        flex-direction: column;
        gap: 0;
    }

    .eltekk-nav-list li a,
    .eltekk-nav-item a {
        display: block;
        padding: 1rem;
    }

    .eltekk-nav-list li a::after,
    .eltekk-nav-item a::after {
        display: none;
    }

    .eltekk-mobile-toggle {
        display: flex;
    }

    .eltekk-header-actions .eltekk-btn {
        display: none;
    }

    .eltekk-hero {
        padding: 7rem 1.5rem 3rem;
        min-height: auto;
    }

    .eltekk-hero-headline {
        font-size: 2.25rem;
    }

    .eltekk-hero-description {
        font-size: 1rem;
    }

    .eltekk-hero-buttons {
        flex-direction: column;
    }

    .eltekk-btn-lg {
        width: 100%;
        justify-content: center;
    }

    .eltekk-stats-container {
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    .eltekk-stat-item {
        align-items: center;
        text-align: center;
    }

    .eltekk-stat-divider {
        width: 60px;
        height: 1px;
    }
}

/* Animation Classes */
.eltekk-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.eltekk-slide-up {
    animation: slideUp 0.6s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Utility Classes */
.eltekk-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.eltekk-text-primary {
    color: var(--eltekk-primary);
}

.eltekk-bg-dark {
    background-color: var(--eltekk-bg-dark);
}

/* ============================================
   SERVICES SECTION
   ============================================ */

.eltekk-services {
    background: var(--eltekk-bg-dark);
    padding: 7.5rem 0;
}

.eltekk-section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.eltekk-section-subtitle {
    display: inline-block;
    color: var(--eltekk-primary);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.1rem;
}

.eltekk-section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--eltekk-text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.eltekk-section-title .highlight {
    color: var(--eltekk-primary);
}

.eltekk-section-desc {
    font-size: 1.1rem;
    color: var(--eltekk-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.eltekk-center {
    text-align: center;
}

.eltekk-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.eltekk-service-card {
    background: var(--eltekk-bg-card);
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--eltekk-border);
    transition: var(--eltekk-transition);
}

.eltekk-service-card:hover {
    border-color: var(--eltekk-primary-line);
    transform: translateY(-3px);
    box-shadow: var(--eltekk-shadow);
}

.eltekk-service-image {
    height: 200px;
    overflow: hidden;
}

.eltekk-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--eltekk-transition);
}

.eltekk-service-card:hover .eltekk-service-image img {
    transform: scale(1.05);
}

.eltekk-service-placeholder {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.eltekk-service-content {
    padding: 1.5rem;
}

.eltekk-service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 106, 0, 0.1);
    border: 1px solid rgba(255, 106, 0, 0.25);
    border-radius: 0;
    color: var(--eltekk-primary);
    margin-bottom: 1.1rem;
}

.eltekk-service-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--eltekk-text-primary);
    margin-bottom: 0.75rem;
}

.eltekk-service-desc {
    font-size: 0.95rem;
    color: var(--eltekk-text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.eltekk-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.eltekk-tag {
    font-size: 0.8rem;
    color: var(--eltekk-primary);
    opacity: 0.8;
}

.eltekk-service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--eltekk-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--eltekk-transition);
}

.eltekk-service-link:hover {
    gap: 0.75rem;
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.eltekk-about {
    background: linear-gradient(180deg, var(--eltekk-bg-dark) 0%, #0d1117 100%);
    padding: 7.5rem 0;
}

.eltekk-about-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 4rem;
    align-items: start;
}

.eltekk-about-content .eltekk-section-title {
    text-align: left;
}

.eltekk-about-desc {
    font-size: 1rem;
    color: var(--eltekk-text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.eltekk-about-features {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.eltekk-about-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.eltekk-about-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 106, 0, 0.1);
    border: 1px solid rgba(255, 106, 0, 0.2);
    border-radius: 0;
    color: var(--eltekk-primary);
    flex-shrink: 0;
}

.eltekk-about-feature-text h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--eltekk-text-primary);
    margin-bottom: 0.25rem;
}

.eltekk-about-feature-text p {
    font-size: 0.85rem;
    color: var(--eltekk-text-muted);
}

.eltekk-about-bullets {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.eltekk-about-bullets li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--eltekk-text-secondary);
}

.eltekk-about-bullets svg {
    color: var(--eltekk-primary);
    flex-shrink: 0;
}

.eltekk-about-stats-box {
    background: var(--eltekk-bg-card);
    border: 1px solid var(--eltekk-border);
    border-radius: 0;
    padding: 2rem;
}

.eltekk-about-stat {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--eltekk-border);
}

.eltekk-about-stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.eltekk-about-stat:first-child {
    padding-top: 0;
}

.eltekk-about-stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--eltekk-primary);
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.eltekk-about-stat-label {
    font-size: 0.9rem;
    color: var(--eltekk-text-secondary);
}

/* ============================================
   CONTACT SECTION
   ============================================ */

.eltekk-contact {
    background: var(--eltekk-bg-darker);
    padding: 7.5rem 0;
}

.eltekk-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    margin-top: 3rem;
}

.eltekk-contact-info h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--eltekk-text-primary);
    margin-bottom: 1.5rem;
}

.eltekk-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.eltekk-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 106, 0, 0.1);
    border-radius: 0;
    color: var(--eltekk-primary);
    flex-shrink: 0;
}

.eltekk-contact-text span {
    display: block;
    font-size: 0.8rem;
    color: var(--eltekk-text-muted);
    margin-bottom: 0.25rem;
}

.eltekk-contact-text a,
.eltekk-contact-text p {
    font-size: 1rem;
    color: var(--eltekk-text-primary);
    text-decoration: none;
    margin: 0;
}

.eltekk-contact-text a:hover {
    color: var(--eltekk-primary);
}

.eltekk-contact-form-wrap {
    background: var(--eltekk-bg-card);
    border: 1px solid var(--eltekk-border);
    border-radius: 0;
    padding: 2rem;
}

.eltekk-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.eltekk-form-group {
    margin-bottom: 1.25rem;
}

.eltekk-form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--eltekk-text-primary);
    margin-bottom: 0.5rem;
}

.eltekk-form-group input,
.eltekk-form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--eltekk-bg-dark);
    border: 1px solid var(--eltekk-border);
    border-radius: 0;
    color: var(--eltekk-text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: var(--eltekk-transition);
}

.eltekk-form-group input:focus,
.eltekk-form-group textarea:focus {
    outline: none;
    border-color: var(--eltekk-primary);
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.1);
}

.eltekk-form-group input::placeholder,
.eltekk-form-group textarea::placeholder {
    color: var(--eltekk-text-muted);
}

.eltekk-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.eltekk-btn-full {
    width: 100%;
    justify-content: center;
}

.eltekk-form-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0;
    display: none;
}

.eltekk-form-message.success {
    display: block;
    background: rgba(255, 106, 0, 0.1);
    color: var(--eltekk-primary);
    border: 1px solid rgba(255, 106, 0, 0.3);
}

.eltekk-form-message.error {
    display: block;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ============================================
   FOOTER
   ============================================ */

.eltekk-footer {
    background: var(--eltekk-bg-darker);
    border-top: 1px solid var(--eltekk-border);
    padding: 2rem 0;
}

.eltekk-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eltekk-footer-logo {
    font-size: 1.25rem;
    font-weight: 700;
}

.eltekk-footer-logo .logo-eltekk {
    color: var(--eltekk-text-primary);
}

.eltekk-footer-logo .logo-events {
    color: var(--eltekk-primary);
}

.eltekk-footer-copyright {
    font-size: 0.9rem;
    color: var(--eltekk-text-muted);
}

.eltekk-footer-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

/* WordPress Footer Menu */
.eltekk-footer-links li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eltekk-footer-links a,
.eltekk-footer-links li a {
    font-size: 0.9rem;
    color: var(--eltekk-text-secondary);
    text-decoration: none;
    transition: var(--eltekk-transition);
}

.eltekk-footer-links a:hover,
.eltekk-footer-links li a:hover {
    color: var(--eltekk-primary);
}

/* ============================================
   RESPONSIVE - NEUE SECTIONS
   ============================================ */

@media (max-width: 1024px) {
    .eltekk-about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .eltekk-about-stats-box {
        max-width: 400px;
    }

    .eltekk-about-features {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .eltekk-services {
        padding: 4rem 0;
    }

    .eltekk-services-grid {
        grid-template-columns: 1fr;
    }

    .eltekk-about {
        padding: 4rem 0;
    }

    .eltekk-about-features {
        flex-direction: column;
        gap: 1.5rem;
    }

    .eltekk-about-bullets {
        grid-template-columns: 1fr;
    }

    .eltekk-contact {
        padding: 4rem 0;
    }

    .eltekk-contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .eltekk-form-row {
        grid-template-columns: 1fr;
    }

    .eltekk-footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* ============================================
   LIGHT MODE OVERRIDES
   ============================================ */

/* Body Background in Light Mode */
[data-theme="light"] body:has(.eltekk-landing-wrapper),
[data-theme="light"] body.eltekk-landing-page,
[data-theme="light"] body.eltekk-fullscreen {
    background: #f8fafc !important;
}

/* Hero Section Light Mode */
[data-theme="light"] .eltekk-hero::before {
    background:
        radial-gradient(ellipse at 20% 80%, rgba(196, 78, 0, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(196, 78, 0, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(241, 245, 249, 0.9) 0%, transparent 70%),
        linear-gradient(180deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
}

[data-theme="light"] .eltekk-hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(248, 250, 252, 0.85) 0%,
        rgba(248, 250, 252, 0.6) 50%,
        rgba(248, 250, 252, 0.3) 100%
    );
}

/* Service Cards Light Mode */
[data-theme="light"] .eltekk-service-placeholder {
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
}

[data-theme="light"] .eltekk-service-icon {
    background: rgba(196, 78, 0, 0.1);
}

/* About Section Light Mode */
[data-theme="light"] .eltekk-about {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

[data-theme="light"] .eltekk-about-feature-icon {
    background: rgba(196, 78, 0, 0.1);
    border-color: rgba(196, 78, 0, 0.2);
}

/* Contact Section Light Mode */
[data-theme="light"] .eltekk-contact-icon {
    background: rgba(196, 78, 0, 0.1);
}

[data-theme="light"] .eltekk-form-group input,
[data-theme="light"] .eltekk-form-group textarea {
    background: #f1f5f9;
}

/* Buttons Light Mode */
[data-theme="light"] .eltekk-btn-secondary {
    background: rgba(196, 78, 0, 0.1);
    border-color: rgba(196, 78, 0, 0.3);
}

[data-theme="light"] .eltekk-btn-secondary:hover {
    background: rgba(196, 78, 0, 0.15);
}

/* Stats Section Light Mode */
[data-theme="light"] .eltekk-stats {
    background: rgba(241, 245, 249, 0.8);
}

/* Smooth theme transition */
.eltekk-landing-wrapper,
.eltekk-header,
.eltekk-hero,
.eltekk-services,
.eltekk-about,
.eltekk-contact,
.eltekk-footer,
.eltekk-service-card,
.eltekk-about-stats-box,
.eltekk-contact-form-wrap {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ============================================================
   Unterseiten (WP-Seiten: Leistungen, Über uns, Impressum, …)
   Vollstaendig token-basiert -> Light-Mode kommt automatisch ueber
   die [data-theme="light"]-Tokens auf <html>, keine separaten Overrides.
   ============================================================ */
.eltekk-page {
    background: var(--eltekk-bg-dark);
    color: var(--eltekk-text-secondary);
    font-family: var(--eltekk-font-family);
    line-height: 1.7;
    padding: clamp(10rem, 11vw, 12rem) 0 var(--eltekk-section-y);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.eltekk-page .eltekk-container {
    max-width: var(--eltekk-content-width);
    margin: 0 auto;
    padding: 0 2rem;
}
/* Eingeloggt: WP-Adminbar (32px) zusaetzlich beruecksichtigen, damit der Titel nicht abgeschnitten wird */
body.admin-bar .eltekk-page { padding-top: calc(clamp(10rem, 11vw, 12rem) + 32px); }

/* --- Seiten-Header-Band (Eyebrow + Titel), wie Landing-Section-Header --- */
.eltekk-page-header { margin-bottom: 3.5rem; }
.eltekk-page-eyebrow {
    display: inline-block;
    color: var(--eltekk-primary);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
}
.eltekk-page-title {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    font-weight: 800;
    color: var(--eltekk-text-primary);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0;
}
.eltekk-page-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 1.25rem;
    border-radius: 0;
    background: var(--eltekk-primary);
}

/* --- Content-Typografie --- */
.eltekk-page-content { font-size: 1.05rem; color: var(--eltekk-text-secondary); }
.eltekk-page-content > *:first-child { margin-top: 0; }
/* Lesbare Zeilenlaenge fuer Fliesstext (Karten/Media-Rows bleiben voll breit) */
.eltekk-page-content > p,
.eltekk-page-content > ul,
.eltekk-page-content > ol { max-width: 70ch; }
.eltekk-page-content h2 {
    color: var(--eltekk-text-primary);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 3rem 0 1rem;
}
.eltekk-page-content h3 {
    color: var(--eltekk-text-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
}
.eltekk-page-content p { margin: 0 0 1.15rem; }
.eltekk-page-content a {
    color: var(--eltekk-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--eltekk-transition);
}
.eltekk-page-content a:hover { color: var(--eltekk-primary-hover); }
.eltekk-page-content ul, .eltekk-page-content ol { margin: 0 0 1.15rem; padding-left: 1.5rem; }
.eltekk-page-content li { margin-bottom: 0.5rem; }
.eltekk-page-content strong { color: var(--eltekk-text-primary); }
.eltekk-page-content img { max-width: 100%; height: auto; border-radius: 0; }
.eltekk-page-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.15rem; }
.eltekk-page-content th, .eltekk-page-content td {
    border: 1px solid var(--eltekk-border);
    padding: 0.7rem 0.9rem;
    text-align: left;
}

/* --- Lead --- */
.eltekk-page-content .eltekk-lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--eltekk-text-primary);
    margin-bottom: 2.5rem;
    max-width: 70ch;
}

/* --- Karten-Grid: an .eltekk-service-card angeglichen (Hover/Shadow) --- */
.eltekk-page-content .eltekk-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.75rem;
    margin: 2.5rem 0;
}
.eltekk-page-content .eltekk-card {
    background: var(--eltekk-bg-card);
    border: 1px solid var(--eltekk-border);
    border-radius: 0;
    padding: 1.75rem;
    transition: var(--eltekk-transition);
}
.eltekk-page-content .eltekk-card:hover {
    transform: translateY(-3px);
    border-color: var(--eltekk-primary-line);
    box-shadow: var(--eltekk-shadow);
}
.eltekk-page-content .eltekk-card h3 { margin-top: 0; margin-bottom: 0.6rem; color: var(--eltekk-text-primary); }
.eltekk-page-content .eltekk-card p { margin-bottom: 0; font-size: 0.97rem; }

/* --- CTA: Optik des Primary-Buttons --- */
.eltekk-page-content .eltekk-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.9rem 1.75rem;
    border-radius: 0;
    background: var(--eltekk-primary);
    color: var(--eltekk-bg-dark) !important;
    font-weight: 600;
    text-decoration: none;
    transition: var(--eltekk-transition);
}
.eltekk-page-content .eltekk-cta:hover {
    background: var(--eltekk-primary-hover);
    transform: translateY(-1px);
}

/* --- Bild-Text-Paarung (questax-Stil), alternierend --- */
.eltekk-page-content .eltekk-media-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin: 3.5rem 0;
}
.eltekk-page-content .eltekk-media-row.reverse .eltekk-media-figure { order: 2; }
.eltekk-page-content .eltekk-media-figure {
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--eltekk-border);
    box-shadow: var(--eltekk-shadow);
    line-height: 0; /* schluckt wpautop-<br> nach dem Block-Bild */
}
.eltekk-page-content .eltekk-media-figure br { display: none; }
.eltekk-page-content .eltekk-media-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.5s ease;
}
.eltekk-page-content .eltekk-media-figure:hover img { transform: scale(1.05); }
.eltekk-page-content .eltekk-media-text > *:first-child { margin-top: 0; }
.eltekk-page-content .eltekk-media-text > *:last-child { margin-bottom: 0; }

/* --- Responsive --- */
@media (max-width: 1024px) {
    .eltekk-page-content .eltekk-media-row { gap: 2rem; }
}
@media (max-width: 768px) {
    .eltekk-page { padding: 9rem 0 4rem; }
    body.admin-bar .eltekk-page { padding-top: calc(9rem + 46px); }
    .eltekk-page .eltekk-container { padding: 0 1.5rem; }
    .eltekk-page-content .eltekk-media-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2.5rem 0;
    }
    .eltekk-page-content .eltekk-media-row.reverse .eltekk-media-figure { order: 0; }
}

/* ============================================
   SLIDER / KARUSSELL (questax-Stil: swipebar + Pfeile/Dots)
   ============================================ */
.eltekk-slider { margin: 3.5rem 0; }
.eltekk-slider-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.eltekk-slider-track::-webkit-scrollbar { display: none; }
.eltekk-slide {
    flex: 0 0 88%;
    scroll-snap-align: center;
    margin: 0;
    background: var(--eltekk-bg-card);
    border: 1px solid var(--eltekk-border);
    border-radius: 0;
    overflow: hidden;
}
.eltekk-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.eltekk-slide figcaption {
    padding: 0.95rem 1.15rem;
    font-size: 0.95rem;
    color: var(--eltekk-text-secondary);
    line-height: 1.5;
}
.eltekk-slide figcaption strong { color: var(--eltekk-text-primary); display: block; margin-bottom: 0.15rem; }

.eltekk-slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.1rem;
}
.eltekk-slider-dots { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.eltekk-slider-dot {
    width: 8px; height: 8px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: var(--eltekk-border-hover);
    cursor: pointer;
    transition: var(--eltekk-transition);
}
.eltekk-slider-dot.active { width: 22px; border-radius: 0; background: var(--eltekk-primary); }
.eltekk-slider-arrows { display: flex; gap: 0.5rem; }
.eltekk-slider-prev,
.eltekk-slider-next {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.4rem; line-height: 1;
    border: 1px solid var(--eltekk-border);
    border-radius: 0;
    background: transparent;
    color: var(--eltekk-text-primary);
    cursor: pointer;
    transition: var(--eltekk-transition);
}
.eltekk-slider-prev:hover,
.eltekk-slider-next:hover {
    border-color: var(--eltekk-primary-line);
    background: var(--eltekk-primary-soft);
    color: var(--eltekk-primary);
}
@media (min-width: 768px) {
    .eltekk-slide { flex-basis: calc(50% - 0.625rem); }
}

/* ============================================
   ACCESSIBILITY & POLISH
   ============================================ */
/* Sichtbarer Tastatur-Fokus (dezenter Amber-Ring), site-weit */
.eltekk-btn:focus-visible,
.eltekk-page-content .eltekk-cta:focus-visible,
.eltekk-nav-list a:focus-visible,
.eltekk-footer-links a:focus-visible,
.eltekk-theme-toggle:focus-visible,
.eltekk-page-content a:focus-visible,
.eltekk-service-link:focus-visible,
.eltekk-slider-prev:focus-visible,
.eltekk-slider-next:focus-visible,
.eltekk-slider-dot:focus-visible {
    outline: 2px solid var(--eltekk-primary);
    outline-offset: 2px;
    border-radius: 0;
}

/* Reduzierte Bewegung respektieren */
@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;
    }
    .eltekk-service-card:hover,
    .eltekk-page-content .eltekk-card:hover,
    .eltekk-btn:hover,
    .eltekk-page-content .eltekk-cta:hover { transform: none; }
    .eltekk-page-content .eltekk-media-figure:hover img { transform: none; }
    .eltekk-slider-track { scroll-behavior: auto; }
}

/* ==========================================================================
   Scroll-World Hero — scroll-gescrubbte Kamerafahrt (assets/js/scroll-world.js)
   --------------------------------------------------------------------------
   Die Engine ist als Ganzseiten-Erlebnis gebaut: sie legt ihre Layer per
   position:fixed ueber den Viewport. Hier laeuft sie aber als EINE Sektion,
   der noch Stats/Leistungen/Ueber uns/Kontakt folgen — also werden die Layer
   auf position:sticky umgestellt. Sticky pinnt sie an den Viewport, solange
   die Sektion sichtbar ist, und gibt sie danach wieder frei.

   Die Engine kapselt ihr komplettes CSS in @layer sw. Dieser Block ist
   ungelayert und gewinnt deshalb immer — unabhaengig von Spezifitaet und
   Ladereihenfolge. Kein !important noetig.
   ========================================================================== */

.eltekk-scrollworld-section {
    position: relative;
    background: var(--eltekk-bg-dark);
    /* clip statt hidden: faengt den seitlichen Ueberhang der Szenen ab, ohne einen
       Scroll-Container zu erzeugen — sticky bleibt dadurch funktionsfaehig. */
    overflow-x: clip;
}

/* Brand-Tokens der Engine auf die Eltekk-Palette mappen. */
.eltekk-scrollworld {
    position: relative;
    isolation: isolate;
    --sw-bg: #0d121b;
    --sw-ink: #f4f1ec;
    --sw-ink-soft: #b9b3ab;
    --sw-accent: var(--eltekk-primary);
    --sw-font-display: var(--eltekk-font-family);
    --sw-font-body: var(--eltekk-font-family);
}

/* Die Engine setzt html,body{background:var(--sw-bg,#F5EDE0); overflow-x:hidden}.
   Beides muss zurueckgenommen werden:

   1. --sw-bg ist auf html/body nicht definiert, der Fallback waere also cremefarben.
   2. overflow-x:hidden macht den Body zu einem Scroll-Container — und darin
      funktioniert position:sticky nicht mehr (die Layer scrollen einfach weg,
      statt zu pinnen). Fuer die urspruenglich fixed positionierten Layer der
      Engine war das egal; fuer den sticky-Umbau unten ist es toedlich.

   Der horizontale Ueberhang, den overflow-x:hidden abfangen sollte (die Szenen
   werden leicht ueberskaliert und seitlich verschoben), wird stattdessen von
   overflow-x:clip auf der Sektion gehalten: clip erzeugt keinen Scroll-Container
   und laesst sticky darum intakt. */
html, body { background: var(--eltekk-bg-dark); overflow-x: visible; }

/* fixed -> sticky: pinnen, solange die Sektion laeuft.
   margin-bottom:-100svh nimmt den Layern ihren Platz im Fluss, damit sich die
   Hoehe der Sektion allein aus .sw-track (dem Scroll-Spacer) ergibt. */
.eltekk-scrollworld > .sw-sky,
.eltekk-scrollworld > .sw-stage,
.eltekk-scrollworld > .sw-copylayer,
.eltekk-scrollworld > .sw-route,
.eltekk-scrollworld > .sw-hint {
    position: sticky;
    inset: auto;
    top: 0;
    width: 100%;
    height: 100svh;
    margin-bottom: -100svh;
    transform: none;
    /* border-box ist Pflicht: die negative Margin hebt nur die height auf. Bei
       content-box wuerde das Padding der Layer (z.B. der Scroll-Hinweis) obendrauf
       kommen und die Sektion um genau diesen Betrag zu hoch machen — sichtbar als
       toter Scroll-Weg hinter der letzten Szene. */
    box-sizing: border-box;
}

/* Eltekk hat eine eigene fixe Navigation samt CTA — die Engine-Topbar und ihr
   Fortschrittsbalken wuerden sich damit ueberlagern. */
.eltekk-scrollworld > .sw-topbar,
.eltekk-scrollworld > .sw-scrollbar { display: none; }

/* Die Route der Engine kennt nur die fuenf Filmszenen. Die Startseite hat aber
   zehn Stationen (Film + Inhalt), also zeigt .ew-route weiter unten alle an und
   die Engine-Variante entfaellt. */
.eltekk-scrollworld > .sw-route { display: none; }

/* Scroll-Hinweis unten mittig — ueber der Footer-Leiste, nicht dahinter.
   pointer-events:none ist Pflicht: durch den sticky-Umbau ist der Hinweis eine
   bildschirmgrosse Box, und die Engine nimmt ihr die Klicks nicht ab. Ohne das
   liegt eine unsichtbare Scheibe ueber der ganzen Welt und schluckt jeden Klick
   auf die Panels (Buttons, Telefonnummer, Anfrage). */
.eltekk-scrollworld > .sw-hint {
    justify-content: flex-end;
    align-items: center;
    padding-bottom: calc(54px + env(safe-area-inset-bottom));
    pointer-events: none;
}

/* Das Plugin normalisiert weiter oben ALLE <article> der Landing Page auf
   width:100% / max-width:none / padding:0 — mit !important, um WordPress-
   Blockmarkup zu baendigen. Die Engine rendert ihre Copy aber ebenfalls als
   <article class="sw-copy">, und weil ihr eigenes CSS in @layer sw liegt,
   verliert sie diesen Kampf: die Textspalte wird viewportbreit und laeuft auf
   dem Handy rechts aus dem Bild (dort setzt die Engine left UND right, und eine
   explizite width schlaegt bei absoluter Positionierung das right).
   Geometrie der Engine hier gezielt zurueckholen.

   Kein zusaetzliches padding-top gegen den fixen Header: die Copy ist auf dem
   Desktop vertikal zentriert und haelt dadurch ohnehin >230px Abstand nach oben.
   Padding wuerde den Block nur nach unten schieben und auf niedrigen Viewports
   die CTA-Zeile an den unteren Rand druecken. */
.eltekk-scrollworld article.sw-copy {
    width: min(42vw, 460px) !important;
    padding: 0 !important;
}
@media (max-width: 860px) {
    .eltekk-scrollworld article.sw-copy {
        width: auto !important;
        max-width: 560px !important;
    }

    /* Auf dem Handy liegt die Copy unten ueber dem Bild. Die letzte Szene (LED-Wand
       auf voller Helligkeit) drueckt den Kontrast des Fliesstexts nach unten, und
       genau dort steht der CTA. Scrim etwas hoeher und fruehe dichter ziehen. */
    .eltekk-scrollworld .sw-copylayer::before {
        height: 72%;
        background: linear-gradient(
            0deg,
            var(--sw-bg) 12%,
            color-mix(in srgb, var(--sw-bg) 82%, transparent) 44%,
            color-mix(in srgb, var(--sw-bg) 40%, transparent) 70%,
            transparent 100%
        );
    }
}

/* Tag-Pills und Buttons auf Dark Mode ziehen — die Engine-Defaults gehen von
   einem hellen Hintergrund aus (weisse Fuellung, dunkle Schrift). */
.eltekk-scrollworld .sw-copy__tags li {
    color: var(--eltekk-primary-hover);
    background: color-mix(in srgb, var(--eltekk-primary) 16%, transparent);
    border-color: var(--eltekk-primary-line);
}
.eltekk-scrollworld .sw-btn--primary {
    color: #fff;
    background: var(--eltekk-primary-dark);
}
.eltekk-scrollworld .sw-btn--ghost {
    color: var(--eltekk-text-primary);
    border-color: var(--eltekk-border-hover);
}

/* Nur fuer Screenreader — das H1 der Startseite lebt jetzt in der Scroll-World,
   deren Ueberschriften die Engine als h2 rendert. */
.eltekk-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   DIE WELT ALS GANZE STARTSEITE
   ----------------------------------------------------------------------------
   Zahlen, Leistungen, Ueber uns und Kontakt sind keine Sektionen unter dem Hero
   mehr, sondern Stationen IN der Kamerafahrt.

   Gestaltung: die Inhalte liegen wie Filmtitel IM Bild — kein Kasten, keine
   Platte, keine Karte. Lesbar werden sie ueber einen Verlauf am Bildrand und
   Textschatten, genau wie Untertitel. Dazu ein leichter Raumversatz: beim
   Hereinkommen stehen sie schraeg im Raum, an ihrer Station stehen sie gerade,
   danach kippen sie weg und fallen nach hinten aus dem Bild.

   Harte Kanten ueberall (kein einziger Radius), sattes Orange als einziger
   Akzent, Trennung durch Haarlinien statt durch Flaechen.

   Bewusst KEIN backdrop-filter: waehrend der Film gescrubbt wird, kostet eine
   Weichzeichnung ueber dem ganzen Viewport jeden Frame — und Fluessigkeit ist
   hier das teuerste Gut.
   ========================================================================== */

/* Alles, was UEBER dem Film liegt, bleibt in beiden Themes dunkel.
   Das Filmmaterial ist immer dunkel (Abend, Buehnenlicht) — eine Ebene darauf
   kann dem Hell/Dunkel-Umschalter der Seite nicht folgen, sonst stuende im Light
   Mode fast schwarze Schrift (#242E3D) auf dunklem Grund: Kontrast 1,3:1.
   Die Tokens werden deshalb hier lokal auf die dunkle Variante festgenagelt.
   Betrifft NICHT das Anfrage-Overlay — das ist eine eigene Flaeche und darf dem
   Theme folgen. */
.eltekk-scrollworld,
.eltekk-landing-wrapper.is-world .eltekk-header,
.ew-footerbar {
    --eltekk-primary: #ff6a00;
    --eltekk-primary-hover: #ff8f3d;
    --eltekk-primary-line: rgba(255, 106, 0, 0.55);
    --eltekk-primary-soft: rgba(255, 106, 0, 0.14);
    --eltekk-text-primary: #f4f1ec;
    --eltekk-text-secondary: #c3bdb4;
    --eltekk-text-muted: #9a938a;
    --eltekk-border: rgba(244, 241, 236, 0.14);
    --eltekk-border-hover: rgba(255, 106, 0, 0.55);
    --eltekk-bg-dark: #0d121b;
    --eltekk-bg-card: #161f2e;
    --eltekk-header-bg: rgba(13, 18, 27, 0.72);
    --eltekk-header-bg-scrolled: rgba(13, 18, 27, 0.94);
}

/* Schatten, der Text ohne Kasten auf jedem Filmbild traegt — dieselbe Aufgabe,
   die bei einem Untertitel die Kontur uebernimmt. */
.eltekk-scrollworld {
    --ew-shadow: 0 1px 2px rgba(4, 7, 12, 0.95), 0 2px 14px rgba(4, 7, 12, 0.85), 0 0 42px rgba(4, 7, 12, 0.6);
}

/* Wie die Layer der Engine: pinnen, solange die Welt laeuft, und keinen Platz
   im Fluss beanspruchen (die Hoehe kommt allein aus .sw-track).
   Erst ab .is-live — ohne JS bleiben die Panels normaler Seiteninhalt. */
.eltekk-scrollworld > .ew-panels.is-live {
    position: sticky;
    inset: auto;
    top: 0;
    width: 100%;
    height: 100svh;
    margin-bottom: -100svh;
    box-sizing: border-box;
    z-index: 30;                 /* ueber .sw-copylayer (20), unter .ew-route */
    pointer-events: none;
    /* Der Raum, in dem die Panels stehen und wegkippen. */
    perspective: 1100px;
    perspective-origin: 30% 50%;
}

.ew-panels.is-live .ew-panel {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center start;
    opacity: 0;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* Das Plugin normalisiert weiter oben ALLE <article> der Landing Page mit
   width:100% / max-width:none / padding:0 — mit !important, um WordPress-
   Blockmarkup zu baendigen. Die Panels sind ebenfalls <article> und verlieren
   dadurch ihren kompletten Innenabstand. Auf dem Desktop faellt das nicht auf
   (der Inhalt ist zentriert), auf dem Handy sitzt er unten buendig und
   verschwindet hinter der Footer-Leiste.
   Dieselbe Falle wie bei .sw-copy — deshalb hier ebenfalls mit !important
   zurueckgeholt. */
.eltekk-scrollworld article.ew-panel {
    padding: clamp(80px, 12vh, 140px) clamp(18px, 5vw, 64px) clamp(72px, 10vh, 110px) !important;
}

/* Verlauf statt Flaeche: dunkelt genau dort ab, wo der Text steht, und laesst
   das Bild daneben frei. Eine gemeinsame Ebene fuer alle Panels — zehn
   bildschirmfuellende halbtransparente Schichten haelt der Compositor sonst
   dauerhaft vor. Die Deckkraft fuehrt scroll-panels.js ueber --ew-dim. */
.ew-panels.is-live::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: var(--ew-dim, 0);
    pointer-events: none;
    background:
        linear-gradient(96deg,
            rgba(6, 9, 15, 0.95) 0%,
            rgba(6, 9, 15, 0.90) 46%,
            rgba(6, 9, 15, 0.80) 72%,
            rgba(6, 9, 15, 0.38) 88%,
            rgba(6, 9, 15, 0.06) 100%),
        linear-gradient(0deg, rgba(6, 9, 15, 0.7) 0%, transparent 34%);
}

/* Kein Kasten: der Inhalt steht direkt im Bild. */
.ew-panel__inner {
    position: relative;
    width: min(1080px, 100%);
    max-height: 100%;
}

.ew-panel__eyebrow {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--eltekk-primary);
    text-shadow: var(--ew-shadow);
}

.ew-panel__title {
    margin-top: 10px;
    font-size: clamp(1.7rem, 3.4vw, 2.8rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--eltekk-text-primary);
    text-shadow: var(--ew-shadow);
}

.ew-panel__title em {
    font-style: normal;
    color: var(--eltekk-primary);
}

.ew-panel__body {
    margin-top: 14px;
    max-width: 60ch;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    line-height: 1.6;
    color: var(--eltekk-text-secondary);
    text-shadow: var(--ew-shadow);
}

/* ---- Zahlen ------------------------------------------------------------- */
.ew-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 15rem));
    margin-top: clamp(18px, 2.6vh, 32px);
}

.ew-figure { padding-right: clamp(16px, 2.4vw, 40px); }

.ew-figure__num {
    display: block;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--eltekk-primary);
    text-shadow: var(--ew-shadow);
}

.ew-figure__label {
    display: block;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--eltekk-border);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--eltekk-text-muted);
    text-shadow: var(--ew-shadow);
}

.ew-figure--sm .ew-figure__num { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

/* ---- Leistungen --------------------------------------------------------- */
/* Keine Karten mehr — vier Spalten, getrennt nur durch eine Haarlinie. */
.ew-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: clamp(18px, 2.6vh, 32px);
    border-top: 1px solid var(--eltekk-border);
}

.ew-card {
    padding: clamp(14px, 1.8vh, 22px) clamp(14px, 1.8vw, 26px) 0 0;
    border-right: 1px solid var(--eltekk-border);
}

.ew-card:last-child { border-right: 0; }
.ew-card:not(:first-child) { padding-left: clamp(14px, 1.8vw, 26px); }

.ew-card__icon { display: block; color: var(--eltekk-primary); line-height: 0; }

.ew-card__title {
    margin-top: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--eltekk-text-primary);
    text-shadow: var(--ew-shadow);
}

.ew-card__desc {
    margin-top: 8px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--eltekk-text-secondary);
    text-shadow: var(--ew-shadow);
}

.ew-card__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 12px;
    padding: 0;
}

/* Auch die Tags ohne Rahmen — nur Farbe und ein trennender Punkt. */
.ew-card__tags li {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--eltekk-primary);
    text-shadow: var(--ew-shadow);
}



/* ---- Ueber uns ---------------------------------------------------------- */
.ew-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 18rem));
    gap: clamp(16px, 2.4vw, 40px);
    margin-top: clamp(18px, 2.6vh, 30px);
    padding-top: clamp(16px, 2.2vh, 26px);
    border-top: 1px solid var(--eltekk-border);
}

.ew-feature__icon { display: block; color: var(--eltekk-primary); line-height: 0; }
.ew-feature h4 { margin-top: 10px; font-size: 0.98rem; font-weight: 600; text-shadow: var(--ew-shadow); }
.ew-feature p { margin-top: 6px; font-size: 0.84rem; line-height: 1.5; color: var(--eltekk-text-secondary); text-shadow: var(--ew-shadow); }

/* ---- Warum ELTEKK ------------------------------------------------------- */
.ew-why {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(20px, 3vw, 56px);
    margin-top: clamp(18px, 2.6vh, 30px);
    padding-top: clamp(16px, 2.2vh, 26px);
    border-top: 1px solid var(--eltekk-border);
}

.ew-bullets {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 28px;
    margin: 0;
    padding: 0;
}

.ew-bullets li {
    position: relative;
    padding-left: 18px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--eltekk-text-secondary);
    text-shadow: var(--ew-shadow);
}

/* Quadrat statt Haken — die harte Kante ist hier das Gestaltungsmittel. */
.ew-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 7px;
    height: 7px;
    background: var(--eltekk-primary);
}

.ew-why__figures {
    display: grid;
    gap: 14px;
    align-content: start;
    border-left: 1px solid var(--eltekk-border);
    padding-left: clamp(16px, 2vw, 32px);
}

.ew-why__figures .ew-figure { padding-right: 0; }
.ew-why__figures .ew-figure__label { border-top: 0; padding-top: 4px; margin-top: 2px; }

/* ---- Kontakt ------------------------------------------------------------ */
.ew-contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 18rem));
    gap: clamp(16px, 2.4vw, 40px);
    margin: clamp(18px, 2.6vh, 30px) 0 0;
    padding-top: clamp(16px, 2.2vh, 26px);
    border-top: 1px solid var(--eltekk-border);
}

.ew-contact dt {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--eltekk-text-muted);
    text-shadow: var(--ew-shadow);
}

.ew-contact dd {
    margin: 6px 0 0;
    font-size: 0.95rem;
    color: var(--eltekk-text-primary);
    word-break: break-word;
    text-shadow: var(--ew-shadow);
}

.ew-contact a { color: var(--eltekk-text-primary); text-decoration: none; border-bottom: 1px solid var(--eltekk-primary-line); }
.ew-contact a:hover { color: var(--eltekk-primary); }

.ew-panel__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(18px, 2.6vh, 30px);
}

.ew-btn {
    display: inline-block;
    padding: 13px 26px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ew-btn--primary { background: var(--eltekk-primary); color: #0d121b; }
.ew-btn--primary:hover { background: var(--eltekk-primary-hover); }
.ew-btn--ghost { color: var(--eltekk-text-primary); border-color: var(--eltekk-border-hover); text-shadow: var(--ew-shadow); }
.ew-btn--ghost:hover { border-color: var(--eltekk-primary); color: var(--eltekk-primary); }

/* ---- Stationsanzeige ---------------------------------------------------- */
.ew-route {
    position: sticky;
    inset: auto;
    top: 0;
    width: 100%;
    height: 100svh;
    margin-bottom: -100svh;
    box-sizing: border-box;
    z-index: 40;
    display: none;                       /* erst mit JS (siehe .is-live) */
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    padding: 0 clamp(10px, 1.8vw, 22px);
    pointer-events: none;
}

.ew-route.is-live { display: flex; }

.ew-route__tick {
    position: relative;
    width: 26px;
    height: 14px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Der Strich selbst — kurz und stumpf, laenger und farbig wenn aktiv. */
.ew-route__tick::after {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--eltekk-text-muted);
    transition: width 0.25s, background 0.25s;
}

.ew-route__tick:hover::after { background: var(--eltekk-text-primary); }
.ew-route__tick.is-active::after { width: 26px; background: var(--eltekk-primary); }

.ew-route__label {
    position: absolute;
    right: 34px;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--eltekk-text-primary);
    background: rgba(13, 18, 27, 0.88);
    border-left: 2px solid var(--eltekk-primary);
    padding: 4px 10px;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.ew-route__tick:hover .ew-route__label,
.ew-route__tick.is-active .ew-route__label { opacity: 1; transform: translateX(0); }

/* ---- Footer-Leiste ------------------------------------------------------ */
/* Dauerhaft sichtbar, weil die Welt rundlaeuft und es kein Seitenende gibt,
   an dem ein klassischer Footer stehen koennte. Impressum und Datenschutz
   muessen aber jederzeit erreichbar sein. */
.ew-footerbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 34px;
    padding: 0 clamp(12px, 4vw, 40px) env(safe-area-inset-bottom);
    background: rgba(6, 9, 15, 0.86);
    border-top: 1px solid var(--eltekk-border);
    font-size: 0.72rem;
    color: var(--eltekk-text-muted);
}

.ew-footerbar__links { display: flex; gap: 18px; }
.ew-footerbar a { color: var(--eltekk-text-muted); text-decoration: none; }
.ew-footerbar a:hover { color: var(--eltekk-primary); }
.ew-footerbar__menu { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }

/* ---- Halt an der Station: die Kamera schiebt weiter ---------------------- */
/* Am Checkpoint friert das Bild nicht ein, sondern faehrt langsam weiter.
   Der Film selbst kann das nur begrenzt leisten (24 fps, 8 s pro Szene — mehr
   dazu in SCROLL-WORLD.md), die durchgehende Bewegung kommt deshalb aus einem
   langsamen Nachschieben der Szene. Das laeuft auf dem Compositor und kostet
   nichts. */
.eltekk-scrollworld .sw-scene__video {
    transform: scale(var(--ew-push, 1));
    transform-origin: 50% 46%;
    transition: transform 0.7s ease-out;
}

/* Waehrend des Halts wird jeden Frame neu gesetzt — eine Transition wuerde
   hinterherhinken. Beim Loslassen kommt sie zurueck und faehrt weich auf 1. */
.eltekk-scrollworld.is-holding .sw-scene__video { transition: none; }

/* ---- Rundlauf ----------------------------------------------------------- */
/* Der Weg von der letzten zur ersten Station wird gefahren, nicht geschnitten.
   Waehrenddessen:
   * Text raus. Auf dem Weg lagen fuenf Textblocks — die blitzten sonst durch.
   * Ein leichtes Heranschieben nach der Momentangeschwindigkeit als Tempo-
     Gefuehl. Die naheliegende Bewegungsunschaerfe waere falsch: ein `filter`
     nimmt das Video aus dem Compositor-Pfad und halbiert die Bildrate — gemessen
     29 statt 57 Bilder/s, und zwar unabhaengig vom Radius. Eine Transform ist
     gratis.
   Wie beim Halt darf hier keine Transition laufen: der Wert wird pro Frame neu
   gesetzt. */
.eltekk-scrollworld.is-sweeping .sw-scene__video { transition: none; }

.eltekk-scrollworld.is-sweeping .sw-copylayer,
.eltekk-scrollworld.is-sweeping .ew-panels,
.eltekk-scrollworld.is-sweeping .sw-hint {
    opacity: 0 !important;
    transition: opacity 0.16s ease;
}

/* Die Stationsanzeige bleibt stehen und laeuft mit — sie zeigt ja gerade das
   Interessante: wie weit die Fahrt zurueckrast. */
.eltekk-scrollworld.is-sweeping .ew-route__label { opacity: 0; }

/* ---- Anfrageformular als Overlay ---------------------------------------- */
/* Ohne JS ist das eine ganz normale Sektion am Seitenende — .is-modal setzt
   erst das Script. */
.eltekk-formsection {
    padding: var(--eltekk-section-y) clamp(18px, 5vw, 64px);
    background: var(--eltekk-bg-darker);
}

.eltekk-formsection.is-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vh, 48px) clamp(16px, 5vw, 48px);
    background: rgba(6, 9, 15, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.eltekk-formsection.is-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
}

.eltekk-formsection__inner {
    position: relative;
    width: min(720px, 100%);
    background: var(--eltekk-bg-card);
    border-top: 3px solid var(--eltekk-primary);
    border-left: 1px solid var(--eltekk-border);
    border-right: 1px solid var(--eltekk-border);
    border-bottom: 1px solid var(--eltekk-border);
    padding: clamp(22px, 3.4vw, 44px);
}

.eltekk-formsection.is-modal .eltekk-formsection__inner {
    max-height: 88svh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.eltekk-formsection__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: none;
    border: 0;
    border-left: 1px solid var(--eltekk-border);
    border-bottom: 1px solid var(--eltekk-border);
    background: transparent;
    color: var(--eltekk-text-secondary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.eltekk-formsection.is-modal .eltekk-formsection__close { display: block; }
.eltekk-formsection__close:hover { color: var(--eltekk-primary); background: var(--eltekk-primary-soft); }

/* ---- Engine-Chrome auf harte Kanten ------------------------------------ */
/* Die Engine rundet ihre Pillen und Buttons auf 999px ab. Ihr CSS liegt in
   @layer sw, dieser Block ist ungelayert und gewinnt deshalb ohne !important. */
.eltekk-scrollworld .sw-btn,
.eltekk-scrollworld .sw-copy__tags li,
.eltekk-scrollworld .sw-hint i,
.eltekk-scrollworld .sw-hint i::after { border-radius: 0; }

.eltekk-scrollworld .sw-copy__eyebrow { letter-spacing: 0.2em; }

/* Der Zaehler der Engine zaehlt die fuenf FILMSZENEN ("01 / 05"). Direkt daneben
   stehen zehn Stationsstriche — das widerspricht sich. Die Stationsanzeige ist
   die genauere Auskunft, der Zaehler entfaellt. */
.eltekk-scrollworld .sw-copy__num { display: none; }

/* Die Copy der Engine gehoert zur selben Familie wie die Panels: kein Kasten,
   Tags ohne Rahmen, Text ueber Schatten lesbar. */
.eltekk-scrollworld .sw-copy__tags li {
    color: var(--eltekk-primary);
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-shadow: var(--ew-shadow);
}

.eltekk-scrollworld .sw-copy__tags { gap: 4px 16px; }



.eltekk-scrollworld .sw-copy__title,
.eltekk-scrollworld .sw-copy__body { text-shadow: var(--ew-shadow); }

.eltekk-scrollworld .sw-btn--primary {
    color: #0d121b;
    background: var(--eltekk-primary);
}

.eltekk-scrollworld .sw-btn--ghost {
    color: var(--eltekk-text-primary);
    border-color: var(--eltekk-border-hover);
    text-shadow: var(--ew-shadow);
}

/* ---- Ohne JS ------------------------------------------------------------ */
/* Faellt das Script aus, sind die Panels kein gepinnter Layer, sondern ganz
   normale Bloecke — der Inhalt der Startseite bleibt lesbar. */
.ew-panels:not(.is-live) {
    display: block;
    position: relative;
    z-index: 2;
    background: var(--eltekk-bg-dark);
}

.ew-panels:not(.is-live) .ew-panel {
    display: block;
    padding: var(--eltekk-section-y) clamp(18px, 5vw, 64px);
}

.ew-panels:not(.is-live) .ew-panel__inner { margin: 0 auto; }

/* ---- Schmale Viewports -------------------------------------------------- */
@media (max-width: 1024px) {
    .ew-cards { grid-template-columns: repeat(2, 1fr); }
    .ew-card:nth-child(2n) { border-right: 0; }
    .ew-card:nth-child(2n+1) { padding-left: 0; }
    .ew-why { grid-template-columns: 1fr; }
    .ew-why__figures {
        grid-template-columns: repeat(3, 1fr);
        border-left: 0;
        border-top: 1px solid var(--eltekk-border);
        padding-left: 0;
        padding-top: 16px;
    }
    .ew-figures,
    .ew-features,
    .ew-contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .ew-panels.is-live .ew-panel { place-items: end stretch; }

    .eltekk-scrollworld article.ew-panel {
        padding: clamp(72px, 11vh, 110px) clamp(12px, 4vw, 24px) clamp(52px, 7vh, 76px) !important;
    }

    /* Auf dem Handy laeuft der Verlauf von unten, nicht von der Seite — dort
       steht der Text. */
    .ew-panels.is-live::before {
        background: linear-gradient(0deg,
            rgba(6, 9, 15, 0.95) 0%,
            rgba(6, 9, 15, 0.88) 42%,
            rgba(6, 9, 15, 0.42) 72%,
            rgba(6, 9, 15, 0.05) 100%);
    }

    .ew-panel__title { font-size: clamp(1.35rem, 6vw, 1.9rem); }
    .ew-panel__body { font-size: 0.9rem; }

    /* Vier Leistungen mit Fliesstext passen auf einem Handy nicht in eine
       Bildschirmhoehe. Auf dem Panel steht deshalb nur, WAS es gibt — die
       Beschreibung ist auf der Leistungsseite ohnehin ausfuehrlicher. */
    .ew-card__desc { display: none; }
    .ew-card { padding: 10px 10px 0 0; }
    .ew-card:not(:first-child) { padding-left: 10px; }
    .ew-card__title { margin-top: 8px; font-size: 0.9rem; }
    .ew-card__tags { display: none; }

    .ew-features { grid-template-columns: 1fr; gap: 10px; }
    .ew-feature p { display: none; }
    .ew-bullets { grid-template-columns: 1fr; gap: 7px; font-size: 0.85rem; }
    .ew-contact { grid-template-columns: 1fr; gap: 10px; }
    .ew-figures { grid-template-columns: repeat(3, 1fr); }
    .ew-figure { padding-right: 10px; }
    .ew-figure__label { font-size: 0.6rem; letter-spacing: 0.08em; }

    .ew-panel__cta { gap: 8px; }
    .ew-btn { flex: 1 1 auto; text-align: center; padding: 12px 16px; font-size: 0.86rem; }

    /* Die Anzeige rechts wuerde am Daumen liegen — nur die Striche, keine Labels. */
    .ew-route { gap: 7px; padding-right: 6px; }
    .ew-route__tick { width: 18px; }
    .ew-route__tick::after { width: 10px; }
    .ew-route__tick.is-active::after { width: 18px; }
    .ew-route__label { display: none; }

    .ew-footerbar { height: 30px; font-size: 0.66rem; }
    .ew-footerbar__links { gap: 12px; }
}

/* Reduzierte Bewegung: der Magnet mountet nicht, die Engine laedt keine Clips und
   blendet nur die Standbilder ineinander. Die gepinnte Ebene bleibt aber richtig —
   die Panels wandern nicht, sie wechseln nur ihre Deckkraft, und im Fluss wuerden
   sie die Seite ein zweites Mal so hoch machen. Nur den Raumversatz nehmen wir
   raus (das erledigt scroll-panels.js) und die Wechsel entschaerfen wir. */
@media (prefers-reduced-motion: reduce) {
    .ew-panels.is-live .ew-panel { transition: none; }
    .ew-warp { transition: none; }
    .eltekk-scrollworld .sw-scene__video { transition: none; transform: none; }
}