/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Logo-basierte Farbpalette */
    --primary-color: #dc2626; /* Vibrant Red aus dem Logo */
    --primary-dark: #b91c1c; /* Dunkleres Rot */
    --secondary-color: #f59e0b; /* Golden Yellow aus dem Logo */
    --accent-color: #f97316; /* Orange-Yellow aus dem Logo */
    --accent-light: #fbbf24; /* Helleres Gelb */
    --text-primary: #1f2937; /* Dunkles Grau */
    --text-secondary: #6b7280; /* Mittleres Grau */
    --text-light: #9ca3af; /* Helles Grau */
    --bg-primary: #ffffff; /* Weiß */
    --bg-secondary: #f8fafc; /* Sehr helles Grau */
    --bg-dark: #1e293b; /* Dark Blue-Grey aus dem Logo */
    --bg-darker: #0f172a; /* Noch dunkleres Blue-Grey */
    --border-color: #e2e8f0; /* Helle Grenzen */
    --border-accent: #f59e0b; /* Golden Border */
    
    /* Schatten mit Logo-Farben */
    --shadow-sm: 0 1px 2px 0 rgb(220 38 38 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(220 38 38 / 0.1), 0 2px 4px -2px rgb(220 38 38 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(220 38 38 / 0.1), 0 4px 6px -4px rgb(220 38 38 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(220 38 38 / 0.1), 0 8px 10px -6px rgb(220 38 38 / 0.1);
    
    /* Logo-inspirierte Gradienten */
    --gradient-primary: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%); /* Rot zu Golden */
    --gradient-secondary: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); /* Golden zu Orange */
    --gradient-accent: linear-gradient(135deg, #f97316 0%, #fbbf24 100%); /* Orange zu Gelb */
    --gradient-dark: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); /* Dark Blue-Grey Gradient */
    --gradient-logo: linear-gradient(135deg, #dc2626 0%, #f59e0b 50%, #f97316 100%); /* Vollständiger Logo-Gradient */
    
    /* ============================================================================
       RESPONSIVE DESIGN: Semantische Breakpoints (nur für Media Queries)
       ============================================================================ */
    --bp-m: 64rem;    /* 1024px - erster Layoutsprung */
    --bp-l: 90rem;    /* 1440px - MacBook/large laptop */
    --bp-xl: 120rem;  /* 1920px - Full HD desktop */
    
    /* ============================================================================
       RESPONSIVE DESIGN: Container & Layout (Fluid mit clamp)
       ============================================================================ */
    --container-w: min(92vw, 75rem); /* ~1200px max - Parität mit Status quo */
    
    /* ============================================================================
       RESPONSIVE DESIGN: Typografie-Skalen (Parität: Max = aktuelle Desktop-Werte)
       ============================================================================ */
    --fs-body: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    --fs-h1: clamp(3.25rem, 2rem + 3vw, 4rem);   /* Max = 4rem (aktuell) */
    --fs-h2: clamp(2rem, 1.3rem + 1.8vw, 2.5rem);
    --fs-h3: clamp(1.5rem, 1.1rem + 1vw, 1.75rem);
    --fs-hero-title: clamp(3.25rem, 2rem + 3vw, 4rem); /* Parität: Max = 4rem */
    --fs-hero-desc: clamp(1.25rem, 1rem + 0.8vw, 1.5rem); /* Parität: Max = 1.5rem */
    --fs-nav: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
    --fs-btn: clamp(0.9rem, 0.85rem + 0.15vw, 1rem);
    
    /* ============================================================================
       RESPONSIVE DESIGN: Spacing-Tokens (Fluid ohne tote Zonen)
       ============================================================================ */
    --space-1: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
    --space-2: clamp(0.75rem, 0.6rem + 0.4vw, 1rem);
    --space-3: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);
    --space-4: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
    --space-6: clamp(2rem, 1.5rem + 1.2vw, 3rem);
    --space-8: clamp(3rem, 2.5rem + 1.5vw, 4rem);
    
    --section-pad: clamp(3rem, 2rem + 3vw, 4rem);
    --section-gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    
    /* ============================================================================
       RESPONSIVE DESIGN: Navigation & Header (Fluid)
       ============================================================================ */
    --nav-height: clamp(64px, 5vw, 80px);
    --logo-size: clamp(48px, 4vw, 60px);
    --nav-link-gap: clamp(1rem, 0.8rem + 0.5vw, 2rem);
}

html {
    scroll-behavior: smooth;
    /* Enable smooth touch scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* Custom Scrollbar - passend zur Website (Rot/Gold/Orange) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(30, 41, 59, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #dc2626 0%, #f59e0b 100%);
    border-radius: 10px;
    border: 2px solid rgba(30, 41, 59, 0.1);
    box-shadow: 
        inset 0 0 5px rgba(0, 0, 0, 0.2),
        0 0 10px rgba(245, 158, 11, 0.3);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #f97316 100%);
    box-shadow: 
        inset 0 0 5px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(245, 158, 11, 0.5);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.8) rgba(30, 41, 59, 0.1);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--fs-body); /* Fluid Body Font */
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
    /* Custom cursor - nur Punkt sichtbar, nicht der Standard-Cursor */
    cursor: none;
    /* Ensure smooth scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* Verstecke Standard-Cursor überall */
* {
    cursor: none !important;
    /* Prevent text selection on all elements except contact info */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Ausnahmen: Kontaktinformationen sollen kopierbar sein */
.contact-link,
.contact-item a,
.contact-item .contact-link,
footer a,
footer .contact-link {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: pointer !important;
}

/* Links allgemein sollten kopierbar/klickbar sein */
a, button, input, textarea, select {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* Formularfelder sollen editierbar sein */
input, textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

/* Custom Cursor - etwas größerer Punkt */
.custom-cursor-dot {
    position: fixed;
    width: 18px;
    height: 18px;
    background: rgba(245, 158, 11, 0.9);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999 !important; /* Sehr hoher z-index, über allem */
    transform: translate(-50%, -50%);
    box-shadow: 
        0 0 14px rgba(245, 158, 11, 0.8),
        0 0 28px rgba(220, 38, 38, 0.5),
        inset 0 0 7px rgba(255, 255, 255, 0.3);
    transition: transform 0.1s ease-out, background 0.3s ease, box-shadow 0.3s ease, width 0.2s ease, height 0.2s ease;
    will-change: transform, background, box-shadow;
    visibility: visible !important;
    opacity: 1 !important;
}

.custom-cursor-dot.hover {
    width: 24px;
    height: 24px;
    background: rgba(220, 38, 38, 0.95) !important; /* IMMER rot beim Hover über Buttons */
    box-shadow: 
        0 0 20px rgba(220, 38, 38, 1),
        0 0 40px rgba(245, 158, 11, 0.6),
        inset 0 0 12px rgba(255, 200, 200, 0.4) !important;
}

/* Dynamische Farben basierend auf Hintergrund */
.custom-cursor-dot.color-dark {
    background: rgba(245, 158, 11, 0.9); /* Gold für dunkle Bereiche */
    box-shadow: 
        0 0 14px rgba(245, 158, 11, 0.8),
        0 0 28px rgba(220, 38, 38, 0.5),
        inset 0 0 7px rgba(255, 255, 255, 0.3);
}

.custom-cursor-dot.color-light {
    background: rgba(220, 38, 38, 0.95); /* Rot für helle Bereiche */
    box-shadow: 
        0 0 14px rgba(220, 38, 38, 0.9),
        0 0 28px rgba(249, 115, 22, 0.6),
        inset 0 0 7px rgba(255, 200, 200, 0.4);
}

.custom-cursor-dot.color-text {
    background: rgba(249, 115, 22, 0.9); /* Orange für Text-Bereiche */
    box-shadow: 
        0 0 14px rgba(249, 115, 22, 0.8),
        0 0 28px rgba(245, 158, 11, 0.5),
        inset 0 0 7px rgba(255, 255, 255, 0.3);
}

/* Click Particles - coole Punkte beim Klicken - SCHNELLER */
.click-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    animation: clickParticleExplosion 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes clickParticleExplosion {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.2) rotate(360deg);
        opacity: 0;
    }
}

/* Loading Screen - FUTURISTISCH & SPECTAKULÄR */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* CRITICAL: Initial versteckt - wird nur per JavaScript angezeigt wenn nötig */
    display: none;
    visibility: hidden;
    opacity: 0;
    /* Start: Gelb/Rot Gradient - WENIGER TRANSPARENT */
    background: linear-gradient(135deg, 
        rgba(10, 15, 26, 1) 0%, 
        rgba(139, 69, 19, 1) 30%,
        rgba(220, 38, 38, 1) 50%,
        rgba(245, 158, 11, 1) 70%,
        rgba(26, 31, 46, 1) 100%
    );
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    background-size: 400% 400%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
}

/* Smooth Gradient Overlay für Übergang Gelb/Rot → Blau */
.loading-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Blau Gradient Overlay */
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 1) 0%, 
        rgba(30, 58, 138, 1) 25%,
        rgba(59, 130, 246, 1) 50%,
        rgba(37, 99, 235, 1) 75%,
        rgba(30, 64, 175, 1) 100%
    );
    opacity: 0;
    z-index: 1;
    /* Smooth fade-in während Loading-Animation */
    animation: gradientOverlayFadeIn 1.8s ease-in-out forwards;
    pointer-events: none;
}

/* Three.js Canvas für viele GLB-Modelle im Hintergrund */
#loading-threejs-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
}

.loading-particles-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(245, 158, 11, 0.3), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(220, 38, 38, 0.3), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200px 200px, 300px 300px, 150px 150px;
    animation: particlesFloat 20s linear infinite;
    opacity: 0.6;
    pointer-events: none;
}

.loading-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(245, 158, 11, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridPulse 4s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.4;
    z-index: 2;
}

/* Gold Matrix Background - SPEKTAKULÄR */
.loading-gold-matrix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(0deg, 
            transparent, 
            transparent 98px, 
            rgba(255, 215, 0, 0.05) 98px, 
            rgba(255, 215, 0, 0.05) 100px
        ),
        repeating-linear-gradient(90deg, 
            transparent, 
            transparent 98px, 
            rgba(245, 158, 11, 0.05) 98px, 
            rgba(245, 158, 11, 0.05) 100px
        );
    animation: matrixPulse 4s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.6;
    z-index: 2;
}

/* Gold Sparkle Effects - HELLER WERDEND & FUNKELND */
.gold-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 1) 0%,
        rgba(245, 158, 11, 0.9) 50%,
        transparent 100%
    );
    border-radius: 50%;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 1),
        0 0 40px rgba(245, 158, 11, 0.8),
        0 0 60px rgba(255, 215, 0, 0.6);
    pointer-events: none;
    z-index: 4;
}

.gold-sparkle.sparkle-1 {
    top: 15%;
    left: 20%;
    animation: goldSparkle1 2.5s ease-in-out infinite;
}

.gold-sparkle.sparkle-2 {
    top: 25%;
    right: 15%;
    animation: goldSparkle2 3s ease-in-out infinite 0.5s;
}

.gold-sparkle.sparkle-3 {
    bottom: 30%;
    left: 25%;
    animation: goldSparkle3 2.8s ease-in-out infinite 1s;
}

.gold-sparkle.sparkle-4 {
    bottom: 20%;
    right: 30%;
    animation: goldSparkle4 3.2s ease-in-out infinite 1.5s;
}

.loading-tech-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(0deg, 
            transparent, 
            transparent 2px, 
            rgba(245, 158, 11, 0.05) 2px, 
            rgba(245, 158, 11, 0.05) 4px
        ),
        repeating-linear-gradient(90deg, 
            transparent, 
            transparent 2px, 
            rgba(220, 38, 38, 0.05) 2px, 
            rgba(220, 38, 38, 0.05) 4px
        );
    animation: techLinesMove 15s linear infinite;
    pointer-events: none;
    opacity: 0.3;
}

@keyframes backgroundShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Smooth Gradient Overlay Animation - wie ein Video-Übergang */
@keyframes gradientOverlayFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes particlesFloat {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100px, -100px);
    }
}

@keyframes gridPulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes techLinesMove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

.loading-screen.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    /* CRITICAL: Kein Transform/Clip-Path mehr - verhindert visuelle Sprünge */
    /* Smooth fade-out ohne komplizierte Transforms */
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), visibility 0.8s linear;
    pointer-events: none;
    z-index: -1; /* Unter Main Content nach Fade-out */
}

.loading-container {
    text-align: center;
    color: white;
    position: relative;
    z-index: 2; /* Über dem Gradient-Overlay */
}

/* ULTRA-FUTURISTISCHES Loading Logo Wrapper - SENIOR LEVEL DESIGN */
.loading-logo-wrapper {
    position: relative;
    margin-bottom: 3rem;
    width: 250px;
    height: 250px;
    margin-left: auto;
    margin-right: auto;
    transform-style: preserve-3d;
    perspective: 1200px;
    isolation: isolate;
}

/* Dual Orb System - Core & Outer */
.loading-logo-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(25px);
    z-index: 1;
}

.loading-logo-orb.orb-core {
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, 
        rgba(245, 158, 11, 0.5) 0%,
        rgba(220, 38, 38, 0.35) 40%,
        transparent 70%
    );
    animation: orbCorePulse 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loading-logo-orb.orb-outer {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, 
        rgba(245, 158, 11, 0.2) 0%,
        rgba(220, 38, 38, 0.15) 50%,
        transparent 80%
    );
    animation: orbOuterPulse 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: 0.5s;
}

/* Floating Particles around Logo */
.logo-float-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.float-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.9), transparent);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(245, 158, 11, 1);
    filter: blur(1px);
}

/* Gold Particles - HELLER WERDEND & FUNKELND */
.float-particle.gold-particle {
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, 
        rgba(255, 215, 0, 1) 0%,
        rgba(245, 158, 11, 0.9) 40%,
        rgba(255, 215, 0, 0.7) 70%,
        transparent 100%
    );
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 1),
        0 0 30px rgba(245, 158, 11, 0.8),
        0 0 45px rgba(255, 215, 0, 0.6);
    filter: blur(0.5px);
    animation: goldParticleSparkle 3s ease-in-out infinite;
}

.float-particle.gold-particle.p1 {
    animation: goldParticleSparkle 3s ease-in-out infinite;
}

.float-particle.gold-particle.p2 {
    animation: goldParticleSparkle 3.5s ease-in-out infinite 0.5s;
}

.float-particle.gold-particle.p3 {
    animation: goldParticleSparkle 4s ease-in-out infinite 1s;
}

.float-particle.gold-particle.p4 {
    animation: goldParticleSparkle 3.2s ease-in-out infinite 1.5s;
}

.float-particle.gold-particle.p5 {
    animation: goldParticleSparkle 3.8s ease-in-out infinite 0.8s;
}

.float-particle.gold-particle.p6 {
    animation: goldParticleSparkle 4.2s ease-in-out infinite 1.2s;
}

.float-particle.gold-particle.p7 {
    animation: goldParticleSparkle 3.6s ease-in-out infinite 0.3s;
}

.float-particle.gold-particle.p8 {
    animation: goldParticleSparkle 4.5s ease-in-out infinite 1.8s;
}

.float-particle.p1 {
    top: 10%;
    left: 50%;
    animation: floatParticle1 4s ease-in-out infinite;
}

.float-particle.p2 {
    top: 50%;
    left: 10%;
    animation: floatParticle2 5s ease-in-out infinite 0.5s;
}

.float-particle.p3 {
    top: 90%;
    left: 50%;
    animation: floatParticle3 4.5s ease-in-out infinite 1s;
}

.float-particle.p4 {
    top: 50%;
    left: 90%;
    animation: floatParticle4 5.5s ease-in-out infinite 1.5s;
}

.float-particle.p5 {
    top: 20%;
    left: 20%;
    animation: floatParticle5 6s ease-in-out infinite 0.8s;
}

.float-particle.p6 {
    top: 80%;
    left: 80%;
    animation: floatParticle6 5s ease-in-out infinite 1.2s;
}

/* Main Logo Container - CLEAN & MODERN */
.loading-logo {
    position: relative;
    z-index: 10;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    transform-style: preserve-3d;
    animation: logoMorphUltra 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.logo-glow-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    background: radial-gradient(circle,
        rgba(245, 158, 11, 0.4) 0%,
        rgba(220, 38, 38, 0.3) 30%,
        transparent 70%
    );
    border-radius: 50%;
    filter: blur(30px);
    animation: auraPulse 3s ease-in-out infinite;
    z-index: 0;
}

.loading-logo-image {
    height: 140px;
    width: auto;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 0 50px rgba(245, 158, 11, 1)) 
            drop-shadow(0 0 80px rgba(220, 38, 38, 0.8))
            brightness(1.4) 
            contrast(1.5);
    position: relative;
    z-index: 2;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3D GLB Model Canvas statt Logo PNG */
#loading-logo-3d-canvas {
    width: 250px;
    height: 250px;
    margin: 0 auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15 !important; /* Höher als andere Elemente */
    pointer-events: none;
    filter: drop-shadow(0 0 40px rgba(255, 215, 0, 1)) 
            drop-shadow(0 0 80px rgba(245, 158, 11, 0.8))
            drop-shadow(0 0 120px rgba(220, 38, 38, 0.6))
            brightness(1.3) 
            contrast(1.2);
    animation: logoFloat3D 4s ease-in-out infinite;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Dual Energy Pulses */
.logo-energy-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

.logo-energy-pulse.pulse-1 {
    width: 150px;
    height: 150px;
    border: 2px solid rgba(245, 158, 11, 0.7);
    animation: energyPulse1 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.logo-energy-pulse.pulse-2 {
    width: 150px;
    height: 150px;
    border: 2px solid rgba(220, 38, 38, 0.6);
    animation: energyPulse2 3s cubic-bezier(0.4, 0, 0.2, 1) infinite 0.3s;
}

/* Hologram-Scan ENTFERNT - kein Balken von oben nach unten */

/* Spectacular Energy Waves - Dual System */
.loading-energy-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
}

.loading-energy-waves.wave-1 {
    width: 240px;
    height: 240px;
    background: conic-gradient(
        from 0deg,
        rgba(245, 158, 11, 0.4) 0deg,
        transparent 45deg,
        rgba(220, 38, 38, 0.4) 90deg,
        transparent 135deg,
        rgba(245, 158, 11, 0.4) 180deg,
        transparent 225deg,
        rgba(220, 38, 38, 0.4) 270deg,
        transparent 315deg,
        rgba(245, 158, 11, 0.4) 360deg
    );
    animation: energyWaveRotate1 5s linear infinite;
}

.loading-energy-waves.wave-2 {
    width: 280px;
    height: 280px;
    background: conic-gradient(
        from 180deg,
        rgba(220, 38, 38, 0.3) 0deg,
        transparent 60deg,
        rgba(245, 158, 11, 0.3) 120deg,
        transparent 180deg,
        rgba(220, 38, 38, 0.3) 240deg,
        transparent 300deg,
        rgba(245, 158, 11, 0.3) 360deg
    );
    animation: energyWaveRotate2 7s linear infinite reverse;
}

/* Modern Geometric Shapes */
.geo-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(15px);
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.geo-shape.shape-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 10%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.4), transparent);
    animation: geoShapeFloat1 6s ease-in-out infinite;
}

.geo-shape.shape-2 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    right: 10%;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.4), transparent);
    animation: geoShapeFloat2 7s ease-in-out infinite 1s;
}

/* Futuristischer Loading Bar Container */
.loading-bar-container {
    position: relative;
    width: 300px;
    margin: 2rem auto;
    z-index: 10001;
    isolation: isolate;
}

.loading-bar-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 20px;
    background: radial-gradient(ellipse, 
        rgba(245, 158, 11, 0.4) 0%,
        rgba(220, 38, 38, 0.3) 50%,
        transparent 100%
    );
    filter: blur(15px);
    animation: barGlowPulse 2s ease-in-out infinite;
    z-index: 1;
}

.loading-bar {
    width: 300px;
    height: 8px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(30, 41, 59, 0.6) 50%,
        rgba(0, 0, 0, 0.4) 100%
    );
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    margin: 2rem auto;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(245, 158, 11, 0.5),
        inset 0 2px 10px rgba(0, 0, 0, 0.5),
        inset 0 -2px 10px rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
    backdrop-filter: blur(10px);
}

.loading-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: loadingShimmer 2s ease-in-out infinite;
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, 
        #ffffff 0%,
        #fbbf24 25%,
        #f97316 50%,
        #dc2626 75%,
        #ffffff 100%
    );
    background-size: 200% 100%;
    border-radius: 10px;
    width: 0%;
    /* KEINE CSS-Animation - wird vollständig von JavaScript gesteuert für präzise Kontrolle */
    transition: none !important;
    will-change: width, background-position;
    transform: translateZ(0);
    backface-visibility: hidden;
    position: relative;
    z-index: 1;
    animation: progressGradientShift 2s linear infinite !important;
    min-width: 0%;
    max-width: none;
    box-sizing: border-box;
    box-shadow: 
        0 0 15px rgba(245, 158, 11, 0.8),
        0 0 30px rgba(220, 38, 38, 0.6),
        inset 0 1px 3px rgba(255, 255, 255, 0.5);
}

.progress-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
    animation: progressShimmer 2s ease-in-out infinite;
    pointer-events: none;
    transform: skewX(-20deg);
    z-index: 2;
}

.progress-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 3;
}

/* Futuristisches Percentage Display */
.loading-percentage-wrapper {
    position: relative;
    margin-top: 1.5rem;
    display: inline-block;
}

.loading-percentage-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle,
        rgba(245, 158, 11, 0.5) 0%,
        rgba(220, 38, 38, 0.3) 50%,
        transparent 100%
    );
    filter: blur(20px);
    animation: percentageGlowPulse 1.5s ease-in-out infinite;
    z-index: 1;
}

.loading-percentage {
    position: relative;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    animation: percentageCount 3s ease-in-out forwards;
    color: #ffffff;
    /* KEIN Rechteck - komplett transparent */
    background: transparent !important;
    padding: 0.75rem 2rem;
    border-radius: 0;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-image: none !important;
    box-shadow: none !important;
    text-shadow: 
        0 0 10px rgba(245, 158, 11, 1),
        0 0 20px rgba(245, 158, 11, 0.8),
        0 0 30px rgba(220, 38, 38, 0.6);
    z-index: 2;
    font-family: 'Inter', sans-serif;
}

/* Main Content - APPLE DESIGN STYLE */
.main-content {
    opacity: 0;
    transform: scale(0.95) translateY(100px);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    /* CRITICAL: Perfekt synchronisierte Transition mit Loading Screen */
    transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), 
                transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), 
                clip-path 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), 
                filter 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    filter: blur(20px);
    min-height: 100vh;
    position: relative;
    z-index: 9999; /* Just below loading screen (10000) during transition */
    will-change: opacity, transform, clip-path, filter;
}

/* Fallback: Show content if JS doesn't load or after 5 seconds */
.main-content.visible,
.main-content.js-loaded,
.no-js .main-content {
    opacity: 1;
    transform: scale(1) translateY(0);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    filter: blur(0);
    /* CRITICAL: Nach Transition z-index erhöhen damit Content über Loading Screen ist */
    z-index: 1;
}

/* Slide Transition Effect - Unter dem Loading Screen */
.main-content.visible::before {
    content: '';
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(245, 158, 11, 0.3) 50%,
        transparent 100%
    );
    /* CRITICAL: Schnellere, subtilere Animation für perfekten Übergang */
    animation: slideReveal 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 9998; /* Unter loading-screen (10000) aber über content */
    pointer-events: none;
    will-change: left;
    transform: translateZ(0); /* Hardware acceleration */
    backface-visibility: hidden;
    opacity: 0.8; /* Subtilerer Effekt für perfekten Übergang */
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10001 !important; /* Über Loading-Screen (10000) damit Logo klickbar bleibt */
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(-100%) scale(0.95);
    animation: navbarSlideDown 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
}

.nav-container {
    max-width: var(--container-w);
    margin: 0 auto;
    padding-inline: clamp(1rem, 2vw, 2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-height);
    min-height: var(--nav-height);
}

.logo-image {
    height: var(--logo-size);
    width: auto;
    transition: all 0.3s ease;
    filter: brightness(1.2) contrast(1.1);
    margin-left: 2rem;
}

.logo-image:hover {
    transform: scale(1.05);
    filter: brightness(1.3) contrast(1.2);
}

.nav-links {
    display: flex;
    gap: var(--nav-link-gap);
    align-items: center;
    height: 100%;
}

.nav-link {
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-size: var(--fs-nav); /* Fluid Navigation Font */
    position: relative;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
}

.nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.nav-link:hover::before {
    width: 100%;
}

.nav-link:hover {
    color: var(--secondary-color);
    transform: translateY(-2px);
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    position: relative;
    z-index: 10005 !important; /* Must be higher than nav-links (10000) and navbar (10001) */
    padding: 0.5rem;
}

.bar {
    width: 28px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

.hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
    background: var(--accent-primary);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.hamburger.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
    background: var(--accent-primary);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    background: var(--gradient-dark);
    overflow: hidden;
    padding-top: 2rem;
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Particles Background */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform-style: preserve-3d;
}

/* 3D Hero Container */
.hero-3d-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Three.js Canvas - Unauffällig im Hintergrund */
#threejs-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: auto;
    z-index: 1; /* Weiter im Hintergrund */
    /* Smooth Rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Sehr subtiler, fast unsichtbarer Glow */
    filter: drop-shadow(0 0 30px rgba(245, 158, 11, 0.1));
    opacity: 0.6; /* Zusätzliche Transparenz für Canvas selbst */
}

/* Altes Prisma/Oktaeder CSS entfernt - nur noch GLB-Modell wird verwendet */

/* Glowing Orbs */
.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: orbFloat 8s ease-in-out infinite;
    opacity: 0.6;
    /* GPU-Beschleunigung für Floating-Animationen */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.orb-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.8) 0%, transparent 70%);
    top: 20%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 10s;
}

.orb-2 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(220, 38, 38, 0.7) 0%, transparent 70%);
    bottom: 15%;
    right: 15%;
    animation-delay: 2s;
    animation-duration: 12s;
}

.orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.6) 0%, transparent 70%);
    top: 60%;
    left: 70%;
    animation-delay: 4s;
    animation-duration: 9s;
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.6); /* MUCH BRIGHTER - doubled opacity */
    border-radius: 50%;
    /* CRITICAL: will-change removed - now managed dynamically via JS WillChangeManager */
    /* Animation name will be set via JS dynamically */
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.9), /* MUCH STRONGER glow */
        0 0 40px rgba(245, 158, 11, 0.7), /* Larger, brighter glow */
        0 0 60px rgba(245, 158, 11, 0.5); /* Additional outer glow layer */
    transform-style: preserve-3d;
    transform: translateZ(0); /* Force GPU acceleration */
    backface-visibility: hidden;
    /* OPTIMIZED: contain for better performance isolation */
    contain: layout style paint;
    /* GPU-optimized properties */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.particle:nth-child(odd) {
    background: rgba(245, 158, 11, 0.7); /* MUCH BRIGHTER - doubled opacity */
    /* Animation duration set dynamically via JS - removed static duration */
    box-shadow: 
        0 0 15px rgba(245, 158, 11, 0.9), /* Stronger glow */
        0 0 30px rgba(245, 158, 11, 0.7),
        0 0 45px rgba(245, 158, 11, 0.5);
}

.particle:nth-child(even) {
    background: rgba(220, 38, 38, 0.7); /* MUCH BRIGHTER - doubled opacity */
    /* Animation duration set dynamically via JS - removed static duration */
    box-shadow: 
        0 0 15px rgba(220, 38, 38, 0.9), /* Stronger glow */
        0 0 30px rgba(220, 38, 38, 0.7),
        0 0 45px rgba(220, 38, 38, 0.5);
}

.particle:nth-child(3n) {
    background: rgba(249, 115, 22, 0.7); /* MUCH BRIGHTER - doubled opacity */
    box-shadow: 
        0 0 15px rgba(249, 115, 22, 0.9), /* Stronger glow */
        0 0 30px rgba(249, 115, 22, 0.7),
        0 0 45px rgba(249, 115, 22, 0.5);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: min(85vw, 75rem);
    margin: 0 auto;
    padding-inline: clamp(1rem, 2vw, 2.5rem);
    text-align: center;
    color: white;
}

.hero-text {
    margin-bottom: 3rem;
}

.hero-title {
    font-size: var(--fs-hero-title); /* clamp() - JS hat Priorität während Animation */
    font-weight: 900;
    line-height: 0.8;
    margin-bottom: 2rem;
    transform-style: preserve-3d;
    perspective: 1200px;
    position: relative;
}

/* Add a subtle glow effect between the two lines for depth */
.hero-title::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(245, 158, 11, 0.3), 
        rgba(220, 38, 38, 0.4), 
        rgba(245, 158, 11, 0.3), 
        transparent
    );
    transform: translateY(-50%) translateZ(-50px);
    box-shadow: 
        0 0 20px rgba(245, 158, 11, 0.2),
        0 0 40px rgba(220, 38, 38, 0.1);
    opacity: 0;
    animation: glowLineAppearApple 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) 1.2s forwards;
}

.title-3d {
    display: inline-block;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
    text-shadow: 
        0 0 20px rgba(245, 158, 11, 0.8),
        0 0 40px rgba(220, 38, 38, 0.6),
        0 5px 15px rgba(0, 0, 0, 0.5);
    /* GPU-Beschleunigung für 3D-Parallax */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.title-line {
    display: block;
    opacity: 0;
    transform: translateX(-60px) translateY(30px) scale(0.92);
    animation: none; /* Disabled - controlled by JS for Apple-style reveal */
    margin-bottom: 0.5em;
    transform-style: preserve-3d;
    perspective: 1000px;
    position: relative;
    z-index: 1;
}

/* Cool 3D effect for first line - bring it forward */
.title-line:first-child {
    transform: translateZ(40px) translateX(-60px) translateY(30px) scale(0.92);
    animation: none; /* Disabled - controlled by JS for Apple-style reveal */
    text-shadow: 
        0 0 40px rgba(255, 255, 255, 0.6),
        0 0 80px rgba(245, 158, 11, 0.4),
        0 10px 30px rgba(0, 0, 0, 0.5);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3)) blur(8px);
}

/* Cool 3D effect for second line - push it back slightly with rotation */
.title-line:nth-child(2) {
    transform: translateZ(-20px) translateX(-60px) translateY(30px) scale(0.92);
    animation: none; /* Disabled - controlled by JS for Apple-style reveal */
    margin-top: 0.8em;
    opacity: 0;
    text-shadow: 
        0 0 30px rgba(255, 255, 255, 0.5),
        0 0 60px rgba(249, 115, 22, 0.3),
        0 5px 20px rgba(0, 0, 0, 0.4);
    filter: blur(8px);
}

/* Fallback: Ensure title lines are visible even if animation fails */
.title-line[style*="animation"] {
    animation: slideInMorphApple 1.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

/* DISABLED: This was causing the flash - title lines stay hidden until animation */
/* .title-line:not([style*="opacity: 0"]) {
    opacity: 1 !important;
} */

/* Animation delays are now set inline in the nth-child selectors above */

.highlight {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite, textGlow3D 2s ease-in-out infinite;
    position: relative;
    display: inline-block;
    color: white !important;
    text-shadow: 
        0 0 30px rgba(245, 158, 11, 1),
        0 0 60px rgba(220, 38, 38, 0.8),
        0 0 90px rgba(249, 115, 22, 0.6),
        0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateZ(0) !important; /* Force no 3D transforms */
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.8));
    z-index: 2; /* Ensure it's above other title lines */
    opacity: 0; /* Initially hidden - will be revealed by JS */
    pointer-events: none; /* Prevent mouse interaction that triggers 3D effects */
}

/* Prevent 3D mouse effects from affecting highlight */
.highlight.title-3d {
    transform: translateZ(0) !important;
}

.highlight::before {
    display: none; /* Remove the before element completely */
}

.hero-description {
    font-size: var(--fs-hero-desc); /* clamp() - JS hat Priorität während Animation */
    margin-bottom: 2rem;
    opacity: 0;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(20px) scale(0.96);
    animation: none; /* Disabled - controlled by JS for Apple-style reveal */
    filter: blur(4px);
}

/* Coming Soon Badge - FUTURISTISCH & SPECTAKULÄR 🚀 */
.coming-soon-badge {
    position: relative;
    display: inline-block;
    margin: 2rem 0;
    opacity: 0; /* CRITICAL: Initial komplett unsichtbar - wird von JavaScript gesteuert */
    transform: scale(0.7) translateY(50px) translateZ(-100px) rotateY(-20deg);
    animation: none !important; /* CRITICAL: Keine automatische Animation - wird von JavaScript gesteuert */
    filter: blur(15px);
    z-index: 10;
    isolation: isolate;
    will-change: transform, opacity, filter;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    perspective: 1000px;
    visibility: hidden; /* CRITICAL: Initial komplett versteckt wie Rest der Elemente */
}

/* Sicherstellen dass Badge sichtbar wird wenn JavaScript es aktiviert */
.coming-soon-badge[style*="opacity: 1"],
.coming-soon-badge[style*="visibility: visible"] {
    visibility: visible !important;
}

/* Fallback: Badge sollte nach Animation sichtbar sein */
.coming-soon-badge.visible,
.coming-soon-badge[data-visible="true"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) translateZ(0) rotateY(0deg) !important;
    filter: blur(0) !important;
}

/* Futuristischer Badge-Content mit Glassmorphism & Neon - RUNDER KNOPF OHNE GOLD-RAHMEN */
.badge-content {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(220, 38, 38, 0.15) 0%,
        rgba(245, 158, 11, 0.2) 30%,
        rgba(249, 115, 22, 0.15) 70%,
        rgba(220, 38, 38, 0.15) 100%
    );
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: none !important; /* KEIN Gold-Rahmen/Border */
    border-image: none !important;
    border-radius: 60px; /* RUNDER KNOPF */
    padding: 1.75rem 3.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-width: 260px;
    justify-content: center;
    transform-style: preserve-3d;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, filter, box-shadow;
    backface-visibility: hidden;
    overflow: hidden;
    
    /* Multi-Layer Neon Glow - OHNE Rechteck-Shadow */
    box-shadow: 
        0 0 20px rgba(245, 158, 11, 0.5),
        0 0 40px rgba(220, 38, 38, 0.4),
        0 0 60px rgba(245, 158, 11, 0.3);
    
    /* Holographic Shimmer Effect */
    background-image: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        linear-gradient(45deg, transparent 0%, rgba(245, 158, 11, 0.1) 50%, transparent 100%);
}

.badge-content:hover {
    transform: translateZ(50px) scale(1.08) rotateY(8deg) rotateX(-3deg);
    filter: brightness(1.3) drop-shadow(0 0 60px rgba(245, 158, 11, 0.8)) drop-shadow(0 0 100px rgba(220, 38, 38, 0.6));
    /* Enhanced Glow beim Hover - OHNE Rechteck-Shadow */
    box-shadow: 
        0 0 30px rgba(245, 158, 11, 0.8),
        0 0 60px rgba(220, 38, 38, 0.6),
        0 0 90px rgba(245, 158, 11, 0.4);
    /* KEIN Border beim Hover */
    border: none !important;
}

/* Icon Wrapper mit 3D Glow */
.badge-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-icon-wrapper i {
    font-size: 1.5rem;
    color: #ffffff;
    text-shadow: 
        0 0 10px rgba(245, 158, 11, 1),
        0 0 20px rgba(245, 158, 11, 0.8),
        0 0 30px rgba(220, 38, 38, 0.6);
    transform: translateZ(0);
    animation: rocketPulse 2s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

.icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    animation: iconGlowPulse 2s ease-in-out infinite;
    filter: blur(8px);
}

/* Badge Text mit Glitch-Effekt */
.badge-text {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #fbbf24 50%, #ffffff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 3s ease-in-out infinite, textGlitch 4s ease-in-out infinite;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-shadow: 
        0 0 10px rgba(245, 158, 11, 0.5),
        0 0 20px rgba(245, 158, 11, 0.3);
}

/* Shimmer Overlay */
.badge-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    animation: shimmerSweep 3s ease-in-out infinite;
    pointer-events: none;
    transform: skewX(-20deg);
}

/* Particle Container */
.badge-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: 60px;
}

/* Hologram Overlay */
.badge-hologram {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        rgba(245, 158, 11, 0.1) 0%,
        transparent 30%,
        transparent 70%,
        rgba(220, 38, 38, 0.1) 100%
    );
    opacity: 0;
    animation: hologramScan 3s ease-in-out infinite;
    pointer-events: none;
    border-radius: 60px;
    mix-blend-mode: screen;
}

.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1.4rem;
    background: var(--gradient-accent);
    margin-left: 2px;
    animation: blink 1s infinite;
}

.badge-content.typing::after {
    content: '|';
    color: var(--secondary-color);
    animation: blink 1s infinite;
}

/* Enhanced Pulse mit Multi-Layer */
.badge-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background: radial-gradient(ellipse, 
        rgba(245, 158, 11, 0.4) 0%,
        rgba(220, 38, 38, 0.3) 40%,
        transparent 70%
    );
    border-radius: 70px;
    opacity: 0;
    animation: badgePulseSpectacular 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    filter: blur(15px);
    z-index: -1;
}

/* SPECTAKULÄRE KEYFRAME ANIMATIONEN */
@keyframes badgeMorphSpectacular {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(50px) translateZ(-100px) rotateY(-20deg);
        filter: blur(15px) drop-shadow(0 0 0px rgba(245, 158, 11, 0));
    }
    50% {
        transform: scale(1.05) translateY(-10px) translateZ(30px) rotateY(5deg);
        filter: blur(3px) drop-shadow(0 0 30px rgba(245, 158, 11, 0.6));
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) translateZ(0) rotateY(0deg);
        filter: blur(0) drop-shadow(0 0 40px rgba(245, 158, 11, 0.4));
    }
}

@keyframes rocketPulse {
    0%, 100% {
        transform: translateZ(0) scale(1) rotate(0deg);
        text-shadow: 
            0 0 10px rgba(245, 158, 11, 1),
            0 0 20px rgba(245, 158, 11, 0.8),
            0 0 30px rgba(220, 38, 38, 0.6);
    }
    50% {
        transform: translateZ(10px) scale(1.1) rotate(5deg);
        text-shadow: 
            0 0 15px rgba(245, 158, 11, 1),
            0 0 30px rgba(245, 158, 11, 1),
            0 0 45px rgba(220, 38, 38, 0.8);
    }
}

@keyframes iconGlowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.9;
    }
}

@keyframes textShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes textGlitch {
    0%, 90%, 100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    92% {
        transform: translate(-2px, 1px);
        filter: hue-rotate(90deg);
    }
    94% {
        transform: translate(2px, -1px);
        filter: hue-rotate(-90deg);
    }
    96% {
        transform: translate(-1px, 2px);
        filter: hue-rotate(45deg);
    }
    98% {
        transform: translate(1px, -2px);
        filter: hue-rotate(-45deg);
    }
}

@keyframes shimmerSweep {
    0% {
        left: -100%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

@keyframes badgePulseSpectacular {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
        filter: blur(15px);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
        filter: blur(20px);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
        filter: blur(25px);
    }
}

@keyframes hologramScan {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    50% {
        opacity: 0.6;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(100%);
    }
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards;
}

.hero-buttons .btn-primary {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    animation: none; /* Disabled - controlled by JS for Apple-style reveal */
    filter: blur(6px);
}

.hero-buttons .btn-secondary {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    animation: none; /* Disabled - controlled by JS for Apple-style reveal */
    filter: blur(6px);
}

.btn-primary, .btn-secondary {
    padding: clamp(0.75rem, 1vw, 1rem) clamp(1.5rem, 2vw, 2rem);
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: var(--fs-btn); /* Fluid Button Font */
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* EINFACH: Keine 3D-Transforms mehr */
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 
        0 10px 30px rgba(220, 38, 38, 0.4),
        0 0 40px rgba(245, 158, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 15px 40px rgba(220, 38, 38, 0.6),
        0 0 60px rgba(245, 158, 11, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    filter: brightness(1.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(245, 158, 11, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Floating Elements */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(245, 158, 11, 0.4);
    border-radius: 20px;
    padding: 1.5rem;
    color: white;
    display: flex;
    /* GPU-Beschleunigung für Floating-Animationen */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: float3D 6s ease-in-out 2.5s infinite;
    pointer-events: auto;
    transform-style: preserve-3d;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(245, 158, 11, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: scale(0) rotateZ(180deg);
    overflow: hidden; /* CRITICAL: Verhindert dass ::before/::after andere Elemente überdecken */
    isolation: isolate; /* CRITICAL: Erstellt neuen Stacking-Context */
    z-index: 5; /* Standard z-index */
}


.floating-card.card-1 {
    animation: cardMorphIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards, float3D 6s ease-in-out 1.5s infinite;
}

.floating-card.card-2 {
    animation: cardMorphIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards, float3D 6s ease-in-out 1.5s infinite;
}

.floating-card.card-3 {
    animation: cardMorphIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards, float3D 6s ease-in-out 1.5s infinite;
}

.floating-card.card-4 {
    animation: cardMorphIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s forwards, float3D 6s ease-in-out 1.5s infinite;
}

/* If already scrolled, show floating cards immediately */
.floating-card.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: float3D 6s ease-in-out 0s infinite !important;
}

/* MODERN ULTRA HOVER EFFECT für Floating Cards - Passend zur Website 🚀 */
.floating-card:hover {
    transform: translateY(-15px) translateZ(40px) scale(1.1) rotateX(-3deg) rotateY(var(--mouse-rotate-y, 0deg)) rotateZ(var(--mouse-rotate-z, 0deg)) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.9) !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(245, 158, 11, 0.4),
        0 0 80px rgba(220, 38, 38, 0.3),
        0 0 100px rgba(249, 115, 22, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -2px 0 rgba(245, 158, 11, 0.2) !important;
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(245, 158, 11, 0.6)) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    z-index: 10 !important; /* Höher beim Hover, aber nicht zu hoch */
}

/* Shimmer Animation für Floating Cards beim Hover - REDUZIERT */
.floating-card:hover::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: linear-gradient(135deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(245, 158, 11, 0.25) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 100%
    );
    transform: rotate(45deg);
    animation: shimmerSweepFloating 1.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes shimmerSweepFloating {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Glow Pulse für Floating Cards beim Hover - REDUZIERT */
.floating-card:hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, 
        rgba(245, 158, 11, 0.2) 0%,
        rgba(220, 38, 38, 0.15) 40%,
        transparent 70%
    );
    border-radius: 50%;
    animation: glowPulseFloating 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes glowPulseFloating {
    0%, 100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* Icon Animation für Floating Cards beim Hover - REDUZIERT */
.floating-card:hover i {
    transform: scale(1.2) rotate(12deg) translateZ(30px);
    filter: brightness(1.3) drop-shadow(0 0 15px rgba(245, 158, 11, 0.8)) drop-shadow(0 0 30px rgba(220, 38, 38, 0.5));
    animation: iconPulseFloating 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: rgba(245, 158, 11, 0.95) !important;
    position: relative;
    z-index: 3; /* Über Pseudo-Elemente */
}

@keyframes iconPulseFloating {
    0% {
        transform: scale(1) rotate(0deg) translateZ(0px);
    }
    50% {
        transform: scale(1.25) rotate(15deg) translateZ(35px);
    }
    100% {
        transform: scale(1.2) rotate(12deg) translateZ(30px);
    }
}

/* Text Animation für Floating Cards beim Hover */
.floating-card:hover span {
    color: rgba(245, 158, 11, 1) !important;
    text-shadow: 
        0 0 15px rgba(245, 158, 11, 0.8),
        0 0 30px rgba(220, 38, 38, 0.6);
    transform: translateY(-2px) scale(1.05);
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
    z-index: 2;
}

.floating-card i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 3; /* Über Pseudo-Elemente */
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.floating-card span {
    font-weight: 600;
    font-size: 0.9rem;
    position: relative;
    z-index: 3; /* Über Pseudo-Elemente */
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.card-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.card-2 {
    top: 25%;
    right: 20%;
    animation-delay: 1s;
}

.card-3 {
    bottom: 30%;
    left: 20%;
    animation-delay: 2s;
}

/* Laptop Optimization (14" - 1366px bis 1440px Breite) - Floating Cards Position anpassen */
@media (min-width: 769px) and (max-width: 1440px) {
    /* Card-2 (Mobile Apps) - weiter unten, damit nicht über Hero-Title */
    .card-2 {
        top: 40% !important;
        right: 15% !important;
    }
    
    /* Card-3 (UI/UX Design) - weiter oben, damit nicht über Hero-Title */
    .card-3 {
        bottom: 40% !important;
        left: 15% !important;
    }
    
    /* Card-1 (Web Development) - leicht anpassen */
    .card-1 {
        top: 25% !important;
        left: 8% !important;
    }
    
    /* Card-4 (Digital Marketing) - leicht anpassen */
    .card-4 {
        bottom: 15% !important;
        right: 8% !important;
    }
    
    /* Floating Cards etwas kleiner auf Laptops - nur Padding reduzieren */
    .floating-card {
        padding: 1.25rem !important;
    }
    
    /* Floating Cards Font-Size etwas kleiner auf Laptops */
    .floating-card i {
        font-size: 1.5rem !important;
    }
    
    .floating-card span {
        font-size: 0.85rem !important;
    }
    
    /* Hero-Content z-index erhöhen, damit Text über Cards liegt */
    .hero-content {
        z-index: 6 !important;
    }
    
    .hero-title {
        position: relative;
        z-index: 7 !important;
    }
    
    /* Hero-Text auch höhere z-index, damit nicht überlappt wird */
    .hero-text {
        position: relative;
        z-index: 7 !important;
    }
}

.card-4 {
    bottom: 10%;
    right: 10%;
    animation-delay: 3s;
}

/* Services Preview */
.services-preview {
    padding: var(--section-pad) 0;
    background: var(--bg-secondary);
    opacity: 0;
    transform: translateY(100px);
    /* Animation wird per JavaScript gestartet, wenn beim Scrollen sichtbar */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.services-preview.scrolled-in-view {
    animation: sectionSlideIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.container {
    max-width: var(--container-w);
    margin: 0 auto;
    padding-inline: clamp(1rem, 2vw, 2.5rem);
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-8);
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    /* Animation wird per JavaScript gestartet beim Scrollen */
}

.services-preview.scrolled-in-view .section-header {
    animation: headerSpectacular 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.section-title {
    font-size: var(--fs-h2); /* clamp() für responsive Section Titles */
    font-weight: 800;
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: translateX(-100px) translateY(50px) scale(0.8) rotateX(90deg);
    filter: blur(10px);
    animation: title3DEntry 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
    position: relative;
}

.services-preview.scrolled-in-view .section-title {
    animation: title3DEntry 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

.section-description {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(5px);
    animation: descriptionSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}

.services-preview.scrolled-in-view .section-description {
    animation: descriptionSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--section-gap);
    /* Container Query für komponentenbasierte Responsiveness */
    container-type: inline-size;
}

/* Container Query: 4 Spalten ab 64rem Container-Breite */
@container (min-width: 64rem) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Media Query für Layout-Sprung: 4 Spalten ab 90rem (1440px) - Fallback für Browser ohne Container Query Support */
@media (min-width: 90rem) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.service-card {
    background: white;
    padding: var(--space-4);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    text-align: center;
    border: 2px solid transparent;
    background-clip: padding-box;
    opacity: 0;
    transform: translateY(50px) scale(0.9) rotateX(30deg);
    /* Animation wird per JavaScript gestartet, nach der Überschrift */
    /* GPU-Beschleunigung für Flip-Animationen */
    will-change: transform, opacity, filter, box-shadow;
    transform: translateY(50px) scale(0.9) rotateX(30deg) translateZ(0);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    position: relative;
    overflow: hidden;
    
    /* Futuristischer Shimmer-Effekt vorbereiten */
    background-image: 
        linear-gradient(135deg, transparent 0%, rgba(245, 158, 11, 0.05) 50%, transparent 100%);
    background-size: 200% 200%;
    background-position: -100% -100%;
}

.services-preview.scrolled-in-view .service-card {
    animation: cardFlipInEnhanced 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Animation delays - Start AFTER title animation completes (title: 0.2s + 1s = 1.2s) */
.services-preview.scrolled-in-view .service-card:nth-child(1) {
    animation-delay: 1.4s;
}

.services-preview.scrolled-in-view .service-card:nth-child(2) {
    animation-delay: 1.5s;
}

.services-preview.scrolled-in-view .service-card:nth-child(3) {
    animation-delay: 1.6s;
}

.services-preview.scrolled-in-view .service-card:nth-child(4) {
    animation-delay: 1.7s;
}

/* If already scrolled, show immediately */
.service-card.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation-delay: 0s !important;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    border-color: var(--border-accent);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
    animation: scalePulse 3s ease-in-out infinite;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

.service-icon i {
    font-size: 1.5rem;
    color: white;
}

.service-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
    position: relative;
    z-index: 2; /* Über Shimmer-Effekt */
    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.service-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    position: relative;
    z-index: 2; /* Über Shimmer-Effekt */
}

/* Icon auch über Shimmer */
.service-icon {
    position: relative;
    z-index: 2;
}

/* Contact Section */
.contact {
    padding: 6rem 0;
    background: white;
    opacity: 0;
    transform: translateY(100px);
    /* Animation wird per JavaScript gestartet, wenn beim Scrollen sichtbar */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.contact.scrolled-in-view {
    animation: sectionSlideIn 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.contact-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateX(-30px) translateZ(0);
    /* GPU-Beschleunigung für Scroll-Animationen */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Contact Links - kopierbar und klickbar */
.contact-item .contact-link {
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: pointer !important;
}

.contact-item .contact-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* If already scrolled, show contact items immediately */
.contact-item.animate-in {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.contact-item:hover {
    background: white;
    box-shadow: var(--shadow-md);
    transform: translateX(5px);
}

.contact-item i {
    color: var(--primary-color);
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.contact-item:hover i {
    color: var(--secondary-color);
    transform: scale(1.1);
}

.contact-form {
    background: var(--bg-secondary);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

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

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

/* Footer */
.footer {
    background: var(--gradient-dark);
    color: white;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
    align-items: start;
}

.footer-logo-image {
    height: 50px;
    width: auto;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    display: block;
}

.footer-logo-image:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.footer-logo p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    font-size: 0.95rem;
    max-width: 280px;
    margin-top: 0.5rem;
    letter-spacing: 0.01em;
}

.footer-links {
    display: flex;
    justify-content: flex-end;
    gap: 3rem;
}

.footer-column {
    min-width: 180px;
    position: relative;
    text-align: left; /* Left align links on desktop - same as subpages */
}

/* No gradient line above footer column on desktop - removed as requested */

.footer-column h4 {
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: white;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left; /* Left align heading on desktop - same as subpages */
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left align links on desktop - same as subpages */
}

.footer-column li {
    margin-bottom: 0.75rem;
}

.footer-column a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 400;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}

.footer-column a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.footer-column a:hover {
    color: white;
    transform: translateX(4px);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.footer-column a:hover::before {
    width: 100%;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    position: relative;
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.25) 20%, 
        rgba(245, 158, 11, 0.6) 50%,
        rgba(255, 255, 255, 0.25) 80%, 
        transparent 100%
    );
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.social-links {
    display: flex;
    gap: 0.75rem;
}

.social-links a {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.social-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.social-links a i {
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.social-links a:hover {
    border-color: rgba(245, 158, 11, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25);
}

.social-links a:hover::before {
    opacity: 1;
}

.social-links a:hover i {
    transform: scale(1.15);
    color: white;
}

/* Animations */
/* Additional Particle Animations */
@keyframes explosionParticleSpectacular {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        opacity: 0;
        filter: blur(5px);
    }
}

@keyframes finalBurstParticle {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        filter: blur(8px);
    }
}

/* ===== ULTRA-SPECTAKULÄRE LOADING ANIMATIONEN - SENIOR LEVEL ===== */
@keyframes logoMorphUltra {
    0%, 100% {
        transform: translateZ(0) scale(1) rotateY(0deg);
    }
    20% {
        transform: translateZ(25px) scale(1.06) rotateY(8deg);
    }
    40% {
        transform: translateZ(0) scale(1) rotateY(0deg);
    }
    60% {
        transform: translateZ(-15px) scale(0.97) rotateY(-6deg);
    }
    80% {
        transform: translateZ(10px) scale(1.03) rotateY(4deg);
    }
}

@keyframes orbCorePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.8;
    }
}

@keyframes orbOuterPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
    }
}

@keyframes floatParticle1 {
    0%, 100% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) translate(30px, -40px) scale(1.5);
        opacity: 1;
    }
}

@keyframes floatParticle2 {
    0%, 100% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) translate(-35px, 25px) scale(1.3);
        opacity: 0.9;
    }
}

@keyframes floatParticle3 {
    0%, 100% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) translate(25px, 45px) scale(1.4);
        opacity: 1;
    }
}

@keyframes floatParticle4 {
    0%, 100% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) translate(40px, -30px) scale(1.6);
        opacity: 0.95;
    }
}

@keyframes floatParticle5 {
    0%, 100% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) translate(-20px, -50px) scale(1.2);
        opacity: 0.85;
    }
}

@keyframes floatParticle6 {
    0%, 100% {
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
        opacity: 0.65;
    }
    50% {
        transform: translate(-50%, -50%) translate(-45px, 35px) scale(1.5);
        opacity: 1;
    }
}

@keyframes auraPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.7;
    }
}

@keyframes energyPulse1 {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
        border-color: rgba(245, 158, 11, 0.7);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
        border-color: rgba(220, 38, 38, 0.9);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
        border-color: rgba(245, 158, 11, 0.4);
    }
}

@keyframes energyPulse2 {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
        border-color: rgba(220, 38, 38, 0.6);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.95;
        border-color: rgba(245, 158, 11, 0.8);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.7);
        opacity: 0;
        border-color: rgba(220, 38, 38, 0.3);
    }
}

@keyframes hologramScanUltra {
    0% {
        transform: translateY(-100%) scaleY(1);
        opacity: 0;
    }
    30% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
    70% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100%) scaleY(1);
        opacity: 0;
    }
}

@keyframes energyWaveRotate1 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.15);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
}

@keyframes energyWaveRotate2 {
    0% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}

@keyframes geoShapeFloat1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(20px, -30px) scale(1.3);
        opacity: 0.6;
    }
}

@keyframes geoShapeFloat2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-25px, 35px) scale(1.4);
        opacity: 0.65;
    }
}

/* ===== GOLD ANIMATIONEN - HELLER WERDEND & FUNKELND ===== */
@keyframes goldParticleSparkle {
    0%, 100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1) blur(0.5px);
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 0.8),
            0 0 30px rgba(245, 158, 11, 0.6);
    }
    25% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.3);
        filter: brightness(1.3) blur(0.3px);
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 1),
            0 0 50px rgba(245, 158, 11, 0.9),
            0 0 75px rgba(255, 215, 0, 0.7);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.6);
        filter: brightness(1.8) blur(0px);
        box-shadow: 
            0 0 35px rgba(255, 215, 0, 1),
            0 0 70px rgba(245, 158, 11, 1),
            0 0 100px rgba(255, 215, 0, 0.9);
    }
    75% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.3);
        filter: brightness(1.3) blur(0.3px);
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 1),
            0 0 50px rgba(245, 158, 11, 0.9),
            0 0 75px rgba(255, 215, 0, 0.7);
    }
}

@keyframes matrixPulse {
    0%, 100% {
        opacity: 0.4;
        filter: brightness(1);
    }
    50% {
        opacity: 0.8;
        filter: brightness(1.5);
    }
}

@keyframes goldSparkle1 {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
    }
    25% {
        opacity: 0.6;
        transform: scale(1.4) rotate(90deg);
        filter: brightness(1.5) drop-shadow(0 0 25px rgba(255, 215, 0, 1));
    }
    50% {
        opacity: 1;
        transform: scale(2) rotate(180deg);
        filter: brightness(2) drop-shadow(0 0 40px rgba(255, 215, 0, 1)) drop-shadow(0 0 60px rgba(245, 158, 11, 0.8));
    }
    75% {
        opacity: 0.6;
        transform: scale(1.4) rotate(270deg);
        filter: brightness(1.5) drop-shadow(0 0 25px rgba(255, 215, 0, 1));
    }
}

@keyframes goldSparkle2 {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) drop-shadow(0 0 10px rgba(245, 158, 11, 0.6));
    }
    33% {
        opacity: 0.8;
        transform: scale(1.6) rotate(120deg);
        filter: brightness(1.8) drop-shadow(0 0 30px rgba(255, 215, 0, 1));
    }
    66% {
        opacity: 1;
        transform: scale(2.2) rotate(240deg);
        filter: brightness(2.2) drop-shadow(0 0 50px rgba(255, 215, 0, 1)) drop-shadow(0 0 70px rgba(245, 158, 11, 0.9));
    }
}

@keyframes goldSparkle3 {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1) rotate(0deg);
        filter: brightness(1.1) drop-shadow(0 0 12px rgba(255, 215, 0, 0.7));
    }
    40% {
        opacity: 0.9;
        transform: scale(1.8) rotate(144deg);
        filter: brightness(1.9) drop-shadow(0 0 35px rgba(255, 215, 0, 1));
    }
    80% {
        opacity: 0.5;
        transform: scale(1.2) rotate(288deg);
        filter: brightness(1.4) drop-shadow(0 0 20px rgba(245, 158, 11, 0.8));
    }
}

@keyframes goldSparkle4 {
    0%, 100% {
        opacity: 0.25;
        transform: scale(1) rotate(0deg);
        filter: brightness(1) drop-shadow(0 0 8px rgba(245, 158, 11, 0.5));
    }
    30% {
        opacity: 0.7;
        transform: scale(1.5) rotate(108deg);
        filter: brightness(1.6) drop-shadow(0 0 28px rgba(255, 215, 0, 0.9));
    }
    60% {
        opacity: 1;
        transform: scale(2.3) rotate(216deg);
        filter: brightness(2.3) drop-shadow(0 0 45px rgba(255, 215, 0, 1)) drop-shadow(0 0 65px rgba(245, 158, 11, 1));
    }
    90% {
        opacity: 0.4;
        transform: scale(1.1) rotate(324deg);
        filter: brightness(1.2) drop-shadow(0 0 15px rgba(245, 158, 11, 0.7));
    }
}

@keyframes logoRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes textGlow {
    0% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    }
}

@keyframes loadingProgress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes percentageCount {
    0% {
        content: "0%";
    }
    100% {
        content: "100%";
    }
}

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

/* Apple-like smooth animation - natural physics */
@keyframes slideInMorphApple {
    0% {
        opacity: 0;
        transform: translateX(-60px) translateY(30px) scale(0.92);
        filter: blur(8px);
    }
    100% {
        opacity: 1 !important;
        transform: translateX(0) translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Cool 3D animation for first line - comes forward with Apple smoothness */
@keyframes slideInMorph3DApple {
    0% {
        opacity: 0;
        transform: translateZ(0px) translateX(-60px) translateY(30px) scale(0.92);
        filter: blur(8px);
    }
    100% {
        opacity: 1 !important;
        transform: translateZ(40px) translateX(0) translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Cool 3D animation for second line - stays back with rotation, Apple smooth */
@keyframes slideInMorph3DBackApple {
    0% {
        opacity: 0;
        transform: translateZ(0px) translateX(-60px) translateY(30px) scale(0.92);
        filter: blur(8px);
    }
    100% {
        opacity: 0.95 !important;
        transform: translateZ(-20px) translateX(0) translateY(0) scale(1) rotateY(-5deg);
        filter: blur(0);
    }
}

/* Apple-like smooth fade and slide */
@keyframes fadeInSlideApple {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
        filter: blur(4px);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Animation for the glow line between title lines - Apple smooth */
@keyframes glowLineAppearApple {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateZ(-50px) scaleX(0);
    }
    100% {
        opacity: 0.6;
        transform: translateY(-50%) translateZ(-50px) scaleX(1);
    }
}

/* Animation for the glow line between title lines */
@keyframes glowLineAppear {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateZ(-50px) scaleX(0);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) translateZ(-50px) scaleX(1.2);
    }
    100% {
        opacity: 0.6;
        transform: translateY(-50%) translateZ(-50px) scaleX(1);
    }
}

/* Apple-like smooth badge animation */
@keyframes badgeMorphApple {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes badgeMorph {
    0% {
        opacity: 0;
        transform: scale(0) rotate(180deg) translateY(-50px);
        filter: blur(15px);
    }
    60% {
        transform: scale(1.2) rotate(-10deg) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateY(0);
        filter: blur(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px) scale(0.8) rotateY(-20deg);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(0deg);
        filter: blur(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px) scale(0.8) rotateY(20deg);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1) rotateY(0deg);
        filter: blur(0);
    }
}

@keyframes cardMorphIn {
    0% {
        opacity: 0;
        transform: scale(0) rotateZ(180deg) translateZ(-100px);
        filter: blur(10px);
    }
    50% {
        transform: scale(1.3) rotateZ(-20deg) translateZ(50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateZ(0deg) translateZ(0);
        filter: blur(0);
    }
}

@keyframes slideReveal {
    0% {
        left: -100%;
        transform: translateZ(0);
    }
    50% {
        left: 0;
        transform: translateZ(0);
    }
    100% {
        left: 100%;
        transform: translateZ(0);
    }
}

@keyframes navbarSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-100%) scale(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* Mobile-specific slide reveal - smoother on mobile, no bugs */
@keyframes slideRevealMobile {
    0% {
        left: -100%;
        transform: translateZ(0) translateX(0);
        opacity: 0.8;
    }
    30% {
        opacity: 1;
    }
    50% {
        left: 0;
        transform: translateZ(0) translateX(0);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        left: 100%;
        transform: translateZ(0) translateX(0);
        opacity: 0;
    }
}

/* Mobile-optimized section animations - smooth and performant */
@keyframes sectionSlideInMobile {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.98) translateZ(0);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
        filter: blur(0);
    }
}

@keyframes headerSpectacularMobile {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}

@keyframes title3DEntryMobile {
    0% {
        opacity: 0;
        transform: translateX(-50px) translateY(30px) scale(0.9) rotateX(45deg) rotateY(-15deg) translateZ(0);
        filter: blur(8px);
    }
    50% {
        transform: translateX(10px) translateY(-5px) scale(1.05) rotateX(-2deg) rotateY(2deg) translateZ(0);
        opacity: 0.95;
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotateX(0deg) rotateY(0deg) translateZ(0);
        filter: blur(0);
    }
}

@keyframes descriptionSlideInMobile {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97) translateZ(0);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
        filter: blur(0);
    }
}

@keyframes cardFlipInMobile {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.85) rotateX(45deg) rotateY(-10deg) translateZ(-80px);
        filter: blur(12px) brightness(0.6);
        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
    }
    50% {
        transform: translateY(-8px) scale(1.05) rotateX(-5deg) rotateY(5deg) translateZ(20px);
        opacity: 0.85;
        filter: blur(3px) brightness(1.05);
        box-shadow: 0 15px 40px rgba(220, 38, 38, 0.25);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg) rotateY(0deg) translateZ(0);
        filter: blur(0) brightness(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
}

@keyframes sectionSlideIn {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.95);
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
        filter: blur(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        filter: blur(0);
    }
}

/* Spectacular header animation - title and description */
@keyframes headerSpectacular {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 3D Title Entry Animation */
@keyframes title3DEntry {
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(50px) scale(0.8) rotateX(90deg) rotateY(-30deg);
        filter: blur(10px);
    }
    50% {
        transform: translateX(20px) translateY(-10px) scale(1.1) rotateX(-5deg) rotateY(5deg);
        opacity: 0.9;
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1) rotateX(0deg) rotateY(0deg);
        filter: blur(0);
    }
}

/* Description Slide In */
@keyframes descriptionSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes cardFlipIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9) rotateX(30deg) translateZ(-50px);
        filter: blur(10px);
    }
    60% {
        transform: translateY(-10px) scale(1.05) rotateX(-5deg) translateZ(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg) translateZ(0);
        filter: blur(0);
    }
}

/* Enhanced card flip animation with more spectacular effects */
@keyframes cardFlipInEnhanced {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.7) rotateX(60deg) rotateY(-20deg) translateZ(-100px);
        filter: blur(15px) brightness(0.5);
        box-shadow: 0 0 0px rgba(0, 0, 0, 0);
    }
    40% {
        transform: translateY(-15px) scale(1.08) rotateX(-10deg) rotateY(10deg) translateZ(30px);
        opacity: 0.8;
        filter: blur(5px) brightness(1.1);
        box-shadow: 0 20px 60px rgba(220, 38, 38, 0.3);
    }
    70% {
        transform: translateY(5px) scale(0.98) rotateX(3deg) rotateY(-2deg) translateZ(10px);
        opacity: 0.95;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg) rotateY(0deg) translateZ(0);
        filter: blur(0) brightness(1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes float3D {
    0%, 100% {
        transform: translateY(0px) translateZ(0px) rotateY(0deg);
    }
    25% {
        transform: translateY(-15px) translateZ(10px) rotateY(2deg);
    }
    50% {
        transform: translateY(-25px) translateZ(20px) rotateY(0deg);
    }
    75% {
        transform: translateY(-15px) translateZ(10px) rotateY(-2deg);
    }
}

@keyframes cubeRotate {
    0% {
        transform: translate(-50%, -50%) rotateX(20deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateX(20deg) rotateY(360deg) rotateZ(0deg);
    }
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    33% {
        transform: translate(30px, -40px) scale(1.2);
        opacity: 0.8;
    }
    66% {
        transform: translate(-20px, 30px) scale(0.9);
        opacity: 0.5;
    }
}

@keyframes textGlow3D {
    0%, 100% {
        text-shadow: 
            0 0 30px rgba(245, 158, 11, 1),
            0 0 60px rgba(220, 38, 38, 0.8),
            0 0 90px rgba(249, 115, 22, 0.6);
        transform: translateZ(50px) scale(1);
    }
    50% {
        text-shadow: 
            0 0 40px rgba(245, 158, 11, 1.2),
            0 0 80px rgba(220, 38, 38, 1),
            0 0 120px rgba(249, 115, 22, 0.8);
        transform: translateZ(60px) scale(1.02);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes badgePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}

@keyframes textGlow {
    0% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
    }
}

@keyframes subtleFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes gentleRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes scalePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes logoExplosion {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.3) rotate(180deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}

@keyframes textExplosion {
    0% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
    50% {
        transform: scale(1.2);
        text-shadow: 0 0 40px rgba(255, 255, 255, 1), 0 0 60px rgba(251, 191, 36, 0.8);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
}

@keyframes logoFinalExplosion {
    0% {
        transform: scale(1) rotate(0deg);
    }
    100% {
        transform: scale(1.5) rotate(720deg);
    }
}

@keyframes textFinalGlow {
    0% {
        transform: scale(1);
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
    100% {
        transform: scale(1.1);
        text-shadow: 0 0 50px rgba(255, 255, 255, 1), 0 0 80px rgba(251, 191, 36, 1), 0 0 100px rgba(249, 115, 22, 0.8);
    }
}

@keyframes loadingShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes explosionParticle {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

/* REMOVED: @keyframes particleFloat - not used, only particleFloat3D is used */

@keyframes particleFloat3D {
    0% {
        transform: translateY(100vh) translateZ(0) rotate(0deg) scale(0.6);
        opacity: 0;
    }
    5% {
        opacity: 0.8; /* Much faster fade-in for stronger visibility */
        transform: translateY(95vh) translateZ(50px) rotate(45deg) scale(1);
    }
    10% {
        opacity: 1;
        transform: translateY(90vh) translateZ(50px) rotate(90deg) scale(1.1);
    }
    50% {
        transform: translateY(50vh) translateZ(100px) rotate(180deg) scale(1.3); /* Larger scale */
    }
    90% {
        opacity: 1;
        transform: translateY(10vh) translateZ(50px) rotate(270deg) scale(1.1);
    }
    95% {
        opacity: 0.8; /* Slower fade-out for longer visibility */
    }
    100% {
        transform: translateY(-100vh) translateZ(0) rotate(360deg) scale(0.6);
        opacity: 0;
    }
}

/* Simplified particle animation for mobile - no 3D transforms */
@keyframes particleFloatMobile {
    0% {
        transform: translateY(100vh) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
        transform: translateY(90vh) rotate(45deg) scale(1);
    }
    50% {
        transform: translateY(50vh) rotate(90deg) scale(1);
    }
    90% {
        opacity: 0.8;
        transform: translateY(10vh) rotate(135deg) scale(1);
    }
    100% {
        transform: translateY(-100vh) rotate(180deg) scale(0.5);
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Hamburger Menu - Show on Mobile */
    .hamburger {
        display: flex !important;
        position: relative !important;
        z-index: 10005 !important; /* Higher than nav-links (10000) to stay visible when menu is open */
    }
    
    /* Nav Links - Mobile Menu */
    .nav-links {
        position: fixed;
        top: 60px; /* Minimal gap from header - MODERN UI/UX */
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: rgba(15, 23, 42, 0.98); /* Darker, more modern */
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 0.5rem 0 2rem; /* Reduced top padding - minimal gap */
        gap: 0;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow:
            0 10px 40px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        z-index: 10000;
        overflow-y: auto;
        border-top: 1px solid rgba(245, 158, 11, 0.2);
    }
    
    .nav-links.active {
        left: 0;
    }
    
    .nav-link {
        font-size: 1.125rem;
        font-weight: 600;
        padding: 1.25rem 2rem;
        width: 100%;
        text-align: center;
        color: white;
        position: relative;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-link::before {
        display: none;
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: var(--gradient-primary);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0 4px 4px 0;
    }
    
    .nav-link:hover,
    .nav-link:active {
        background: rgba(245, 158, 11, 0.1);
        color: var(--accent-primary);
        transform: translateX(8px);
        padding-left: calc(2rem + 4px);
    }
    
    .nav-link:hover::after,
    .nav-link:active::after {
        transform: scaleY(1);
    }
    
    /* Mobile Performance Optimizations - Reduce animations for smooth scrolling */
    .particles-container {
        will-change: transform;
        transform: translateZ(0);
        contain: layout style paint;
    }
    
    .particle {
        /* Simplify particle animation on mobile - animation set dynamically via JS */
        /* CRITICAL: will-change removed - now managed dynamically via JS WillChangeManager */
        transform: translateZ(0);
        /* Reduce shadow complexity */
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        /* OPTIMIZED: contain for better mobile performance */
        contain: layout style paint;
    }
    
    .particle:nth-child(odd),
    .particle:nth-child(even),
    .particle:nth-child(3n) {
        /* Animation duration set dynamically via JS - removed static duration */
        box-shadow: 0 0 4px rgba(245, 158, 11, 0.3);
    }
    
    /* Simplify hero 3D container on mobile */
    .hero-3d-container {
        contain: layout style paint;
        will-change: transform;
        pointer-events: none; /* Allow scrolling through on mobile */
        touch-action: none; /* Prevent canvas from blocking scroll */
    }
    
    /* Canvas must not intercept touch events on mobile */
    #threejs-canvas {
        pointer-events: none !important; /* Critical: Allow scrolling through canvas */
        touch-action: none; /* Prevent canvas from blocking scroll gestures */
    }
    
    .particles-container {
        pointer-events: none; /* Allow scrolling through particles */
        touch-action: none;
    }
    
    .hero {
        contain: layout style paint;
        will-change: transform;
        /* Ensure scrolling works through hero section, prevent zoom */
        touch-action: pan-y;
    }
    
    .hero-content {
        contain: layout style paint;
    }
    
    /* Mobile Loading Screen Fix - prevents hanging and shifting */
    .loading-screen {
        will-change: transform, opacity, clip-path;
        transform: translateZ(0); /* Force hardware acceleration */
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    .loading-container {
        position: relative;
        will-change: transform;
        transform: translateZ(0);
    }
    
    .loading-logo-image {
        will-change: transform;
        transform: translateZ(0);
    }
    
    .loading-progress {
        will-change: width;
        transform: translateZ(0);
    }
    
    /* Mobile 3D Adjustments - Show all sides with continuous rotation */
    .hero-3d-container {
        perspective: 1000px;
        transform-style: preserve-3d;
    }
    
    /* Altes Prisma/Oktaeder/Cube CSS entfernt - nur noch GLB-Modell wird verwendet */
    
    .glow-orb {
        filter: blur(30px);
    }
    
    .orb-1 {
        width: 150px;
        height: 150px;
    }
    
    .orb-2 {
        width: 120px;
        height: 120px;
    }
    
    .orb-3 {
        width: 100px;
        height: 100px;
    }
    
    /* Faster animations on mobile - prevent hanging */
    .main-content {
        transition: all 0.6s ease !important; /* Faster transition */
        will-change: transform, opacity, clip-path, filter;
        transform: translateZ(0); /* Hardware acceleration */
        backface-visibility: hidden;
    }
    
    .main-content.visible {
        transition: all 0.6s ease !important;
        will-change: transform, opacity, clip-path, filter;
    }
    
    /* Fix slide reveal animation on mobile - smooth transition without bugs */
    .main-content.visible::before {
        will-change: left;
        transform: translateZ(0) !important;
        backface-visibility: hidden;
        animation: slideRevealMobile 0.8s ease-out forwards !important;
        /* Prevent layout shifts and ensure smooth animation */
        position: fixed !important;
        contain: layout style paint;
        /* Remove after animation completes to prevent interference */
        animation-fill-mode: forwards;
    }
    
    .title-line {
        animation-duration: 0.6s !important; /* Faster */
    }
    
    .hero-description {
        animation-duration: 0.6s !important; /* Faster */
    }
    
    .coming-soon-badge {
        animation-duration: 0.6s !important; /* Faster */
    }
    
    .floating-card {
        animation-duration: 0.5s !important; /* Faster */
    }
    
    /* Services Section - Smooth animations on mobile */
    .services-preview {
        will-change: transform, opacity;
        transform: translateZ(0); /* Hardware acceleration */
        backface-visibility: hidden;
    }
    
    .services-preview.scrolled-in-view {
        animation: sectionSlideInMobile 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        will-change: transform, opacity;
    }
    
    .services-preview.scrolled-in-view .section-header {
        animation: headerSpectacularMobile 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        will-change: transform, opacity;
        transform: translateZ(0);
    }
    
    .services-preview.scrolled-in-view .section-title {
        animation: title3DEntryMobile 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards !important;
        will-change: transform, opacity, filter;
        transform: translateZ(0);
        backface-visibility: hidden;
        opacity: 1 !important;
        filter: blur(0) !important;
    }
    
    .services-preview.scrolled-in-view .section-description {
        animation: descriptionSlideInMobile 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards !important;
        will-change: transform, opacity, filter;
        transform: translateZ(0);
        opacity: 1 !important;
    }
    
    .services-preview.scrolled-in-view .service-card {
        animation: cardFlipInMobile 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        will-change: transform, opacity, filter;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    
    .services-preview.scrolled-in-view .service-card:nth-child(1) {
        animation-delay: 0.6s !important;
    }
    
    .services-preview.scrolled-in-view .service-card:nth-child(2) {
        animation-delay: 0.7s !important;
    }
    
    .services-preview.scrolled-in-view .service-card:nth-child(3) {
        animation-delay: 0.8s !important;
    }
    
    .services-preview.scrolled-in-view .service-card:nth-child(4) {
        animation-delay: 0.9s !important;
    }
    
    /* Contact Section - Smooth animations on mobile */
    .contact {
        will-change: transform, opacity;
        transform: translateZ(0); /* Hardware acceleration */
        backface-visibility: hidden;
    }
    
    .contact.scrolled-in-view {
        animation: sectionSlideInMobile 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
        will-change: transform, opacity;
    }
    
    .contact-item {
        will-change: transform, opacity;
        transform: translateZ(0);
        backface-visibility: hidden;
    }
    
    .contact-item.animate-in {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .nav-container {
        height: 60px;
        min-height: 60px;
        padding: 0 1rem;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .logo-image {
        height: 36px;
        width: auto;
        margin: 0;
    }
    
    .nav-links {
        height: auto;
        gap: 1rem;
    }
    
    .nav-link {
        font-size: 0.95rem;
        padding: 0.4rem 0;
    }
    
    .loading-logo-image {
        height: 60px;
        padding: 0.5rem;
    }
    
    .loading-bar {
        width: 250px;
    }
    
    .hero {
        padding-top: 80px;
    }
    
    .hero-title {
        font-size: 2.5rem;
        margin-top: 1rem;
    }
    
    .hero-description {
        font-size: 1.125rem;
        padding: 0 1rem;
        margin-bottom: 1.5rem;
        /* Allow animations to work, but provide fallback after 2s */
        animation: fadeInDescriptionMobile 0.8s ease 0.6s both, 
                   mobileFallbackFadeIn 0.1s ease 2s both;
    }
    
    @keyframes fadeInDescriptionMobile {
        from {
            opacity: 0;
            transform: translateY(20px) scale(0.96);
            filter: blur(4px);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }

    }
    
    @keyframes mobileFallbackFadeIn {
        to {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) scale(1) !important;
            filter: blur(0) !important;
        }
    }
    
    .coming-soon-badge {
        margin: 1.5rem 0;
        /* Allow animations to work, but provide fallback after 2s */
        animation: fadeInBadgeMobile 0.8s ease 0.8s both,
                   mobileFallbackBadgeFadeIn 0.1s ease 2s both;
    }
    
    @keyframes fadeInBadgeMobile {
        from {
            opacity: 0;
            transform: scale(0.7) translateY(50px) translateZ(-100px) rotateY(-20deg);
            filter: blur(15px);
            visibility: hidden;
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0) translateZ(0) rotateY(0deg);
            filter: blur(0);
            visibility: visible;
        }
    }
    
    @keyframes mobileFallbackBadgeFadeIn {
        to {
            opacity: 1 !important;
            visibility: visible !important;
            transform: scale(1) translateY(0) translateZ(0) rotateY(0deg) !important;
            filter: blur(0) !important;
        }
    }
    
    .badge-content {
        padding: 1rem 1.75rem;
        font-size: 1.1rem;
        min-width: 180px;
        /* CRITICAL: Touch-Target */
        min-height: 48px;
    }
    
    .hero-content {
        padding: 0 1.5rem;
    }
    
    .badge-pulse {
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        /* Allow animations to work, but provide fallback after 2s */
        animation: fadeInButtonsMobile 0.8s ease 1s both,
                   mobileFallbackButtonsFadeIn 0.1s ease 2s both;
    }
    
    @keyframes fadeInButtonsMobile {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes mobileFallbackButtonsFadeIn {
        to {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
        }
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        /* CRITICAL: Touch-target mindestens 44x44px (Apple Guidelines) */
        min-height: 48px;
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
        /* Allow animations to work, but provide fallback after 2s */
        animation: fadeInButtonMobile 0.6s ease 1.2s both,
                   mobileFallbackButtonFadeIn 0.1s ease 2s both;
    }
    
    @keyframes fadeInButtonMobile {
        from {
            opacity: 0;
            transform: translateY(15px) scale(0.95);
            filter: blur(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }
    
    @keyframes mobileFallbackButtonFadeIn {
        to {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) scale(1) !important;
            filter: blur(0) !important;
        }
    }
    
    .hero-content {
        padding: 0 1.5rem;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-info {
        margin-bottom: 2rem;
    }
    
    .contact-item {
        /* CRITICAL: Touch-target für Contact Items */
        min-height: 48px;
        padding: 1rem;
        font-size: 1rem;
    }
    
    .contact-item i {
        font-size: 1.125rem;
        min-width: 24px;
    }
    
    .form-group input,
    .form-group textarea {
        /* CRITICAL: Größere Font-Size auf Mobile (verhindert Zoom) */
        font-size: 16px !important;
        padding: 0.875rem;
        min-height: 44px;
        border-radius: 8px;
    }
    
    .form-group textarea {
        min-height: 120px;
        padding: 0.875rem;
    }
    
    .service-card {
        padding: 1.75rem;
        /* CRITICAL: Touch-Target für Service Cards */
        min-height: auto;
    }
    
    .service-card h3 {
        font-size: 1.125rem;
        margin-bottom: 0.75rem;
    }
    
    .service-card p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .section-description {
        font-size: 1.125rem;
        padding: 0 1rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        margin-bottom: 1rem; /* Reduced margin to minimize gap before footer-bottom line */
    }
    
    .footer-logo p {
        max-width: 100%;
        margin: 0.75rem auto 0;
        text-align: center;
    }
    
    .footer-logo-image {
        height: 40px;
        margin: 0 auto 1rem;
    }
    
    .footer-links {
        justify-content: center;
        gap: 2rem;
    }
    
    .footer-column a:hover {
        transform: translateX(0);
    }
    
    /* Add gradient line above footer links on mobile (like subpages) */
    .footer-column {
        width: 100%; /* Ensure full width on mobile */
        min-width: 100%;
        max-width: 100%;
        position: relative;
        text-align: center !important; /* Center align on mobile */
    }
    
    .footer-column::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 255, 255, 0.25) 20%, 
            rgba(245, 158, 11, 0.6) 50%,
            rgba(255, 255, 255, 0.25) 80%, 
            transparent 100%
        );
        margin-bottom: 1.5rem;
    }
    
    .footer-column h4 {
        text-align: center !important; /* Center align heading on mobile */
        margin-top: 1.5rem; /* Space for gradient line above */
    }
    
    .footer-column ul {
        margin-top: 1.5rem; /* Space for gradient line above */
        margin-bottom: 0; /* Remove bottom margin to reduce gap to next line */
        padding-bottom: 0;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Center align links on mobile */
        text-align: center !important;
    }
    
    .footer-column li {
        text-align: center !important; /* Center align list items on mobile */
    }
    
    .footer-column li:last-child {
        margin-bottom: 0.5rem; /* Reduced margin for last item to reduce gap to line */
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        padding-top: 0.75rem; /* Reduced padding-top to minimize gap from line above */
        position: relative; /* Needed for ::before gradient line */
        margin-top: 0;
    }
    
    /* Ensure gradient line is visible on mobile */
    .footer-bottom::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 255, 255, 0.25) 20%, 
            rgba(245, 158, 11, 0.6) 50%,
            rgba(255, 255, 255, 0.25) 80%, 
            transparent 100%
        );
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .service-card {
        padding: 2rem 1.75rem;
    }
    
    .service-icon {
        width: 55px;
        height: 55px;
    }
    
    .service-icon i {
        font-size: 1.375rem;
    }
    
    .service-card h3 {
        font-size: 1.25rem;
    }
    
    .service-card p {
        font-size: 1rem;
    }
    
    .section-header {
        padding: 0 1rem;
        margin-bottom: 2.5rem;
    }
    
    .section-title {
        font-size: 2.25rem;
    }
    
    .section-description {
        font-size: 1.125rem;
    }
    
    .floating-card {
        display: none;
    }
    
    /* Contact Section Mobile Optimizations */
    .contact {
        padding: 4rem 0;
    }
    
    .contact-content {
        gap: 2.5rem;
        padding: 0 1rem;
    }
    
    .contact-info h2 {
        font-size: 2rem;
    }
    
    .contact-description {
        font-size: 1.125rem;
    }
    
    .contact-item {
        font-size: 1rem;
        padding: 1rem;
    }
    
    .contact-form {
        padding: 2rem 1.75rem;
    }
    
    /* Mobile modal optimizations - smooth and responsive */
    .notification-modal-content {
        padding: 2rem 1.5rem !important;
        max-width: 95% !important;
        width: 95% !important;
        border-radius: 20px !important;
    }
    
    .notification-modal-backdrop {
        backdrop-filter: blur(8px) !important;
    }
    
    /* CRITICAL: Loading Screen Mobile Optimizations */
    .loading-container {
        padding: 0 1.5rem;
    }
    
    .loading-percentage {
        font-size: 1.75rem;
    }
    
    /* Hero Section Mobile Spacing */
    .hero-text {
        padding: 0 0.5rem;
    }
    
    /* Coming Soon Badge Mobile - besserer Abstand */
    .coming-soon-badge {
        margin: 1.25rem 0;
        /* Allow animations to work, but provide fallback after 2s */
        animation: fadeInBadgeMobile 0.8s ease 0.8s both,
                   mobileFallbackBadgeFadeIn 0.1s ease 2s both;
    }
    
    /* Services Preview Section Mobile Padding */
    .services-preview {
        padding: 3rem 0;
    }
    
    .services-preview .container {
        padding: 0 1rem;
    }
    
    /* Contact Section Mobile - bessere Lesbarkeit */
    .contact .container {
        padding: 0 1rem;
    }
    
    /* Footer Mobile - besserer Abstand */
    .footer .container {
        padding: 0 1rem;
    }
    
    /* KEINE Gold-Schimmer-Effekte auf Mobile - Performance-Optimierung */
    .badge-shimmer {
        display: none !important;
        animation: none !important;
    }
    
    .badge-content:hover {
        /* Keine Hover-Effekte mit Glow auf Mobile */
        filter: brightness(1) !important;
        box-shadow: 
            0 0 20px rgba(245, 158, 11, 0.5),
            0 0 40px rgba(220, 38, 38, 0.4),
            0 0 60px rgba(245, 158, 11, 0.3) !important;
        transform: none !important;
    }
    
    /* Kein Shimmer bei Floating Cards auf Mobile */
    .floating-card:hover::before {
        display: none !important;
        content: none !important;
        animation: none !important;
    }
    
    .floating-card:hover::after {
        display: none !important;
        content: none !important;
        animation: none !important;
    }
    
    /* Kein Shimmer-Effekt in Coming Soon Modal auf Mobile */
    .coming-soon-modal .shimmer-border,
    #closeComingSoonModal::before {
        display: none !important;
        animation: none !important;
    }
}

/* Alte Oktaeder/Cube Keyframes entfernt - nur noch GLB-Modell wird verwendet */

/* Smooth modal animations for all devices */
.notification-modal-backdrop {
    animation: backdropFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.notification-modal-content {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

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

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.9) translateY(30px);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) translateY(0);
        filter: blur(0);
    }
}

@media (max-width: 480px) {
    /* Prevent zoom and ensure proper mobile fit */
    html, body {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        touch-action: pan-y; /* Only allow vertical scrolling, prevent zoom */
        -ms-touch-action: pan-y;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* Prevent double-tap zoom and pinch zoom, but allow scrolling */
    * {
        touch-action: pan-y; /* Allow vertical scrolling, prevent pinch zoom */
    }
    
    /* Buttons and interactive elements should use manipulation */
    button, a, input, textarea, select {
        touch-action: manipulation;
    }
    
    .container {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .nav-container {
        height: 56px;
        min-height: 56px;
        padding: 0 0.75rem;
    }
    
    .logo-image {
        height: 32px;
        /* CRITICAL: Touch-Target für Logo */
        min-width: 44px;
        min-height: 32px;
    }
    
    /* Hamburger Menu - Ensure visible on small screens */
    .hamburger {
        display: flex !important;
        position: relative !important;
        z-index: 10005 !important; /* Higher than nav-links to stay visible when menu is open */
    }
    
    .nav-links {
        top: 56px !important;
        height: calc(100vh - 56px);
        padding: 0.5rem 0 1.5rem !important;
    }
    
    .nav-link {
        font-size: 1.125rem;
        padding: 1.25rem 2rem;
        min-height: 56px;
        display: flex;
        align-items: center;
    }
    
    .loading-logo-image {
        height: 50px;
        padding: 0.4rem;
    }
    
    .loading-bar {
        width: 180px;
    }
    
    .hero {
        padding-top: 72px;
    }
    
    .hero-title {
        font-size: 2rem;
        margin-top: 0.5rem;
        line-height: 1.1;
    }
    
    .title-line {
        font-size: 2rem;
        margin-bottom: 0.4em;
    }
    
    .hero-description {
        font-size: 1.125rem;
        padding: 0 1rem;
        margin-bottom: 1.5rem;
        /* Allow animations to work, but provide fallback after 2s */
        animation: fadeInDescriptionMobile 0.8s ease 0.6s both, 
                   mobileFallbackFadeIn 0.1s ease 2s both;
    }
    
    .badge-content {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        min-width: 160px;
        /* CRITICAL: Touch-Target für Badge */
        min-height: 44px;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        max-width: 100%;
        min-height: 48px;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
        justify-content: center;
        /* Allow animations to work, but provide fallback after 2s */
        animation: fadeInButtonMobile 0.6s ease 1.2s both,
                   mobileFallbackButtonFadeIn 0.1s ease 2s both;
    }
    
    .hero-buttons {
        width: 100%;
        padding: 0 1rem;
        gap: 0.875rem;
        /* Allow animations to work, but provide fallback after 2s */
        animation: fadeInButtonsMobile 0.8s ease 1s both,
                   mobileFallbackButtonsFadeIn 0.1s ease 2s both;
    }
    
    .contact-form {
        padding: 1.5rem;
    }
    
    .form-group {
        margin-bottom: 1.25rem;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 16px !important;
        padding: 0.875rem;
        min-height: 48px;
    }
    
    .form-group textarea {
        min-height: 120px;
    }
    
    .contact-item {
        min-height: 48px;
        padding: 0.875rem;
        font-size: 0.95rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
    
    .service-card h3 {
        font-size: 1.125rem;
    }
    
    .service-card p {
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.75rem;
        padding: 0 1rem;
    }
    
    .section-description {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .footer-content {
        padding: 0 1rem;
        gap: 2rem;
    }
    
    .footer-logo {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    .footer-logo p {
        font-size: 0.9rem;
        max-width: 100%;
        margin: 0.75rem auto 0;
    }
    
    .nav-link {
        /* CRITICAL: Touch-Target für Nav-Links */
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
    }
    
    .footer-logo-image {
        height: 35px;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .loading-text {
        font-size: 2rem;
    }
    
    .loading-bar {
        width: 250px;
    }
    
    /* CRITICAL: Services Grid - besserer Abstand auf sehr kleinen Screens */
    .services-grid {
        gap: 1.25rem;
        padding: 0 0.5rem;
    }
    
    .service-icon {
        width: 50px;
        height: 50px;
    }
    
    .service-icon i {
        font-size: 1.25rem;
    }
    
    /* Contact Section - besserer Abstand */
    .contact {
        padding: 3rem 0;
    }
    
    .contact-info h2 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    
    .contact-description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Footer - besseres Layout auf sehr kleinen Screens */
    .footer {
        padding: 2.5rem 0 0.5rem; /* Reduced bottom padding to minimize gap */
    }
    
    .footer-column {
        min-width: auto;
        text-align: center !important; /* Center align on small mobile */
    }
    
    .footer-column h4 {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        text-align: center !important; /* Center align heading on small mobile */
    }
    
    .footer-column ul {
        align-items: center !important; /* Center align links on small mobile */
        text-align: center !important;
    }
    
    .footer-column li {
        text-align: center !important; /* Center align list items on small mobile */
    }
    
    .footer-column a {
        font-size: 0.875rem;
        /* CRITICAL: Touch-Target für Footer Links */
        min-height: 36px;
        display: inline-block;
        padding: 0.25rem 0;
    }
    
    .footer-bottom {
        padding: 0.75rem 1rem 0.5rem; /* Reduced padding-top after separator line, minimal bottom padding */
        margin-top: 0;
        position: relative !important; /* Needed for ::before gradient line */
    }
    
    /* Ensure gradient line is visible on small mobile */
    .footer-bottom::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 255, 255, 0.25) 20%, 
            rgba(245, 158, 11, 0.6) 50%,
            rgba(255, 255, 255, 0.25) 80%, 
            transparent 100%
        );
    }
    
    .footer-bottom p {
        font-size: 0.875rem;
    }
    
    .social-links a {
        /* CRITICAL: Touch-Target für Social Links */
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}