/* NeuralShift Brand Colors - KRAFTVOLL eingesetzt */
        :root {
            --color-primary-500: #FF007A; /* Basis-Magenta - PROMINENT */
            --color-primary-400: #FF4DA1; /* Hover - LEUCHTEND */
            --color-primary-600: #E6006E; /* Active - KRAFTVOLL */
            --color-primary-700: #CC0063; /* Pressed - INTENSIV */
            
            /* Flashy Kombinationen */
            --color-flashy-dark: #0A0A0A; /* Tiefes Schwarz für Kontrast */
            --color-flashy-white: #FFFFFF; /* Reines Weiß für Pop-Effekt */
            --color-flashy-grey: #1A1A1A; /* Dunkles Grau für Eleganz */
            --color-flashy-light: #F8F8F8; /* Helles Grau für Kontrast */
            
            /* Magenta-Power-Varianten */
            --color-magenta-glow: rgba(255, 0, 122, 0.3); /* Leuchtender Glow */
            --color-magenta-fav: rgba(255, 0, 122, 0.8); /* Leuchtender Glow */
            --color-magenta-bright: rgba(255, 0, 122, 0.9); /* Heller Magenta */
            --color-magenta-neon: rgba(255, 77, 161, 0.8); /* Neon-Effekt */
            --color-magenta-shadow: rgba(255, 0, 122, 0.4); /* Schatten-Effekt */
            
            /* FLASHY Gradienten */
            --gradient-flashy: linear-gradient(135deg, #FF007A 0%, #FF4DA1 50%, #FF007A 100%);
            --gradient-neon: linear-gradient(45deg, #FF007A, #FF4DA1, #E6006E, #FF4DA1);
            --gradient-glow: radial-gradient(circle, #FF007A 0%, #FF4DA1 70%, transparent 100%);
            --gradient-power: linear-gradient(90deg, #FF007A 0%, #FFFFFF 50%, #FF007A 100%);
            
            /* Animierte Gradienten */
            --gradient-animated: linear-gradient(-45deg, #FF007A, #FF4DA1, #E6006E, #FF007A);
        }

        .hero-gradient {
            background: var(--gradient-flashy);
            position: relative;
            overflow: hidden;
            padding:210px 0px 0px!important;
            background-image: url(../img/hero/hero-bg-3.png);
        }

        .hero-gradient h1 {
            font-weight: 900;
            line-height: 95%;
        }
        .hero-gradient h1 b {
            color: var(--theme);
        }

        .hero-gradient p {
            font-weight: 400;
            line-height: 150%;
        }
        .hero-image {
            margin-top: 150px;
            height: 320px;
            }
            @media (max-width: 1199px) {
            .hero-image {
                margin-left: 0;
                margin-top: 80px;
            }
            }
            @media (max-width: 1199px) {
            .hero-image {
                margin-top: 50px;
                height: 150px;
            }
            }
            @media (max-width: 575px) {
            .hero-image {
                height: 80px;
            }
            }
            .hero-image img {
            width: 100%;
            height: 100%;
            }

        @keyframes pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.6; }
        }

        .btn-primary {
            background: var(--color-primary-500);
            border-color: var(--color-primary-500);
            color: var(--color-flashy-white);
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: var(--color-primary-400);
            border-color: var(--color-primary-400);
            color: var(--color-flashy-white);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px var(--color-magenta-shadow);
        }

        .btn-primary:active {
            background: var(--color-primary-600);
            border-color: var(--color-primary-600);
        }

        .btn-outline-white {
            border: 2px solid var(--color-flashy-white);
            color: var(--color-flashy-white);
            background: transparent;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-outline-white:hover {
            background-color: var(--color-flashy-white);
            color: var(--color-primary-500);
            transform: translateY(-2px);
        }

        .card-hover {
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 0, 122, 0.1);
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px var(--color-magenta-shadow);
            border-color: var(--color-primary-500);
        }

        .level-badge {
            font-size: 0.875rem;
            font-weight: 600;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            color: var(--color-flashy-white);
        }

        .level-starter { background: var(--gradient-flashy); }
        .level-basic { background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-400)); }
        .level-intermediate { background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500)); }
        .level-advanced { background: var(--gradient-neon); }
        .level-expert { background: var(--gradient-animated); }

        .popular-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: #00ff85;
            color: var(--color-flashy-dark);
            padding: 0.5rem 1.5rem;
            border-radius: 50px;
            font-size: 0.875rem;
            font-weight: 600;
            box-shadow: 0 4px 15px var(--color-magenta-shadow);
        }

        .roi-gradient {
            background: var(--gradient-animated);
            position: relative;
        }

        .roi-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-glow);
            opacity: 0.2;
        }

        .cta-gradient {
            background: var(--color-flashy-dark);
            position: relative;
        }

        .cta-gradient::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-flashy);
            opacity: 0.1;
        }

        .step-number {
            width: 4rem;
            height: 4rem;
            background: var(--color-magenta-glow);
            color: var(--color-primary-500);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0 auto 1rem;
            border: 2px solid var(--color-primary-500);
        }

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

        .bg-flashy-light {
            background-color: var(--color-flashy-light);
        }

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

        .bg-flashy-grey {
            background-color: var(--color-flashy-grey);
        }

        .border-magenta {
            border: 2px solid var(--color-primary-500) !important;
        }

        .bg-magenta-light {
            background-color: var(--color-magenta-glow);
        }

        .bg-magenta-fav {
            background-color: var(--color-magenta-fav);
        }

        .bg-magenta-fav .text-dark {
            color: var(--color-flashy-white)!important;
        }
        .bg-magenta-fav .text-muted{
            color: var(--color-flashy-white)!important;
        }   
        .bg-magenta-fav .feature-icon {
            color: var(--color-flashy-white)!important;
        }
        .card {
            padding:30px 10px;
        }
        .feature-icon {
            width: 1.5rem;
            height: 1.5rem;
            color: var(--color-primary-500);
            flex-shrink: 0;
        }

        .form-range::-webkit-slider-thumb {
            background: var(--color-primary-500);
        }

        .form-range::-moz-range-thumb {
            background: var(--color-primary-500);
            border: none;
        }

        .form-range:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem var(--color-magenta-shadow);
        }

        .hero-image {
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }

        .section-image {
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .glow-effect {
            box-shadow: 0 0 30px var(--color-magenta-glow);
        }

        .accordion-button:not(.collapsed) {
            background-color: var(--color-magenta-glow);
            color: var(--color-primary-600);
        }

        .accordion-button:focus {
            box-shadow: 0 0 0 0.25rem var(--color-magenta-shadow);
        }