/* main.css — 1:1 aus dem bestehenden index.html <style>-Block geerbt.
   Keine Designaenderung; nur aus dem Inline-Block in eine enqueuebare Datei ausgelagert. */
:root {
            --color-primary: #2C4969;
            --color-primary-dark: #253e5a;
            --color-primary-light: #d9e2ec;
            --color-accent: #F7AC23;
            --color-accent-dark: #e69520;
        }
        
        html {
            scroll-behavior: auto; /* We'll use custom smooth scrolling with easing */
        }
        
        body {
            background: linear-gradient(-45deg, 
                #f0f4f8, #f5f8fb, #e8f0f5, #f0f4f8, #fafafa, 
                #f9fafb, #f0f4f8, #f5f8fb, #ffffff, #e8f0f5);
            background-size: 600% 600%;
            animation: gradientMorph 25s ease-in-out infinite;
            min-height: 100vh;
        }
        
        @keyframes gradientMorph {
            0% {
                background-position: 0% 0%;
            }
            12.5% {
                background-position: 100% 25%;
            }
            25% {
                background-position: 75% 100%;
            }
            37.5% {
                background-position: 25% 75%;
            }
            50% {
                background-position: 100% 0%;
            }
            62.5% {
                background-position: 0% 50%;
            }
            75% {
                background-position: 50% 100%;
            }
            87.5% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 0%;
            }
        }
        
        .nav-active {
            color: var(--color-primary);
            border-bottom: 2px solid var(--color-primary);
        }
        
        /* Navigation hover effects */
        .nav-link {
            position: relative;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--color-primary);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateX(-50%);
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .nav-link:hover {
            color: var(--color-primary);
            transform: translateY(-1px);
        }
        
        .animate-fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .animate-fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 14px 0 rgba(247, 172, 35, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .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.6s ease;
        }
        
        .btn-primary:hover::before {
            left: 100%;
        }
        
        .btn-primary:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 12px 35px 0 rgba(247, 172, 35, 0.4);
            background: linear-gradient(135deg, #e69520, var(--color-accent));
        }
        
        .btn-primary:active {
            transform: translateY(-1px) scale(0.98);
            transition: all 0.1s ease;
        }
        
        .elegant-card {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .elegant-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, var(--color-primary), transparent, var(--color-primary));
            border-radius: inherit;
            opacity: 0;
            z-index: -1;
            transition: opacity 0.4s ease;
        }
        
        .elegant-card:hover::before {
            opacity: 0.3;
        }
        
        .elegant-card:hover {
            background: rgba(255, 255, 255, 0.7);
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
            border-color: rgba(44, 73, 105, 0.3);
        }
        
        /* Icon hover effects */
        .elegant-card:hover .w-14 {
            transform: scale(1.1) rotate(5deg);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .glass-header {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .hero-gradient {
            background: linear-gradient(135deg,
                rgba(240, 244, 248, 0.9) 0%,
                rgba(217, 226, 236, 0.8) 25%,
                rgba(188, 204, 220, 0.7) 50%,
                rgba(159, 179, 200, 0.6) 75%,
                rgba(130, 154, 177, 0.5) 100%
            );
            backdrop-filter: blur(20px);
            position: relative;
            overflow: hidden;
        }
        
        .hero-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 20%, rgba(44, 73, 105, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 80%, rgba(37, 62, 90, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 40% 70%, rgba(247, 172, 35, 0.05) 0%, transparent 50%);
            animation: heroFloat 20s ease-in-out infinite;
            pointer-events: none;
        }
        
        .section-elegant {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
        }
        
        .loading {
            pointer-events: none;
            opacity: 0.7;
        }
        
        .success-message {
            display: none;
        }
        
        .success-message.show {
            display: block;
        }
        
        /* Subtle shadows and depth */
        .elegant-shadow {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 1px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .elegant-shadow:hover {
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px) scale(1.05);
        }
        
        .elegant-shadow-lg {
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.08);
        }
        
        /* Process number hover effects */
        .process-number {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        
        .process-number:hover {
            transform: translateY(-5px) rotate(10deg) scale(1.1);
            box-shadow: 0 15px 40px rgba(44, 73, 105, 0.4);
        }
        
        /* Mobile menu button hover */
        #mobile-menu-button {
            transition: all 0.3s ease;
        }
        
        #mobile-menu-button:hover {
            transform: scale(1.1);
            color: var(--color-primary);
        }
        
        /* SMS logo hover effect */
        .logo-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .logo-hover:hover {
            transform: scale(1.05);
            color: var(--color-primary);
            text-shadow: 0 2px 8px rgba(44, 73, 105, 0.3);
        }

        /* Accessibility: Bewegung reduzieren, wenn vom Nutzer gewünscht */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
            }
            body {
                animation: none !important;
            }
        }