@font-face {
            font-family: 'Plus Jakarta Sans';
            src: url('fonts/plus-jakarta-sans-400.woff2') format('woff2');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Plus Jakarta Sans';
            src: url('fonts/plus-jakarta-sans-600.woff2') format('woff2');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Plus Jakarta Sans';
            src: url('fonts/plus-jakarta-sans-800.woff2') format('woff2');
            font-weight: 800;
            font-style: normal;
            font-display: swap;
        }


        /* - GLOBAL VARIABLES & ANIMATIONS - */

        html { scroll-behavior: smooth; }
        
        @media (prefers-reduced-motion: reduce) {

            *, ::before, ::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
        
        @property --gradient-angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }


        @keyframes rotation {
            0% { --gradient-angle: 0deg; }
            100% { --gradient-angle: 360deg; }
        }

        @keyframes arrow-loop {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(4px); }
        }


        /* - DESKTOP HEADER & NAVIGATION - */
        .glass-header {
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @media (orientation: landscape) and (max-width: 900px) {

            #mobileAnmeldungBtn {
                padding: 2px !important;
                border-radius: 26px !important;
            }
            #mobileAnmeldungBtn .cta-content {
                padding: 0.5rem 1.2rem !important;
                font-size: 12px !important;
            }
        }


        :root {
            --safe-bottom: env(safe-area-inset-bottom, 0px);
        }

        @media (max-width: 767px) {
            body.menu-open .glass-header {


                background: #f0f7ff;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                border-bottom: none;
                box-shadow: none;
            }

            body.menu-open .btn-super-cta::before,
            body.menu-open .btn-super-cta::after {
                animation: none;
                opacity: 0;
            }

            body.menu-open #mobileAnmeldungBtn {
                visibility: hidden;
                opacity: 0;
            }
        }

        .nav-item {
            position: relative;
            padding: 0.6rem 1.2rem;
            transition: transform 0.3s ease, color 0.3s ease;
        }

        
        .nav-item::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 14px;
            scale: 0;
            opacity: 0;
            z-index: -1;
            transition: scale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }


        .nav-item:hover { transform: translateY(-2px); }
        .nav-item:hover::before { scale: 1; opacity: 0.12; }
        .nav-item.active { transform: translateY(-2px); }
        .nav-item.active::before { scale: 1; opacity: 0.12; }

        .nav-home:hover, .nav-home.active { color: #48A0D6; }
        .nav-home::before { background: #48A0D6; }
        .nav-about:hover, .nav-about.active { color: #D55A92; }
        .nav-about::before { background: #D55A92; }
        .nav-news:hover, .nav-news.active { color: #7FB14E; }
        .nav-news::before { background: #7FB14E; }

        /* - GLOBAL SUPER CTA - */
        .btn-super-cta {
            position: relative; display: inline-flex; justify-content: center; align-items: center;
            border-radius: 26px; padding: 2px; background: transparent; border: none; cursor: pointer;
            z-index: 10; transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6); text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }
        
        .btn-super-cta:hover { transform: translateY(-4px) scale(1.04); }
        
        .btn-super-cta::before, .btn-super-cta::after {
            content: ""; position: absolute; inset: 0; z-index: -1;
            background: conic-gradient(from var(--gradient-angle), #48A0D6, #D55A92, #7FB14E, #F59E0B, #48A0D6);
            border-radius: inherit; animation: rotation 4s linear infinite;
        }
        
        .btn-super-cta::after { filter: blur(12px); opacity: 0.6; }
        
        .cta-content {
            display: flex; align-items: center; justify-content: center;
            padding: 1.4rem 3.5rem; font-size: 1rem; letter-spacing: 0.15em;
            font-weight: 900; color: #D55A92; text-transform: uppercase;
            background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px); border-radius: 24px; width: 100%; height: 100%;
            box-shadow: inset 0 1px 4px rgba(255,255,255,1);
            position: relative; overflow: hidden; transition: background 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);

        }
        
        .btn-super-cta:hover .cta-content { background: rgba(255, 255, 255, 1); }
        
        .cta-content::after { 
            content:''; position:absolute; inset:0; 
            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); 
            background-size:200px 200px; opacity:0.1; pointer-events:none; z-index:1; mix-blend-mode:overlay; 
        }
        
        .btn-super-cta .icon-arrow { margin-left:10px; transition:transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); color: #D55A92; }
        .btn-super-cta:hover .icon-arrow { animation:arrow-loop 1s ease-in-out infinite; }

        .header-cta .cta-content { padding: 0.6rem 1.4rem; font-size: 0.85rem; }
        .header-cta .icon-arrow { margin-left: 6px; width: 16px; height: 16px; }

        @media (min-width: 1024px) {
            .cta-content {
                padding: 0.95rem 1.6rem !important;
                font-size: 0.88rem !important;
                letter-spacing: 0.13em !important;
            }
        }

        /* - MOBILE MENU SYSTEM - */
        #menuBtn { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
        
        #menuBtn .line {
            width: 32px; height: 2.5px; background-color: #2D3E50; display: block;
            margin: 7px auto; border-radius: 4px; transition: transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6), opacity 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6), background-color 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
            transform-origin: center;
        }


        #menuBtn.open .line-1 { transform: translateY(9.5px) rotate(45deg); background-color: #D55A92; }
        #menuBtn.open .line-2 { opacity: 0; transform: translateX(20px); }
        #menuBtn.open .line-3 { transform: translateY(-9.5px) rotate(-45deg); background-color: #D55A92; }
        #menuBtn:hover .line { background-color: #48A0D6; }

        #menuBtn.open {
            animation: x-entrance 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }
        #menuBtn.open:hover {
            animation: none;
            transform: rotate(90deg) scale(1.15);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        #menuBtn.open:hover .line { background-color: #D55A92; }

        @keyframes x-entrance {
            0%   { transform: rotate(-90deg) scale(0.5); opacity: 0; }
            60%  { transform: rotate(15deg) scale(1.2); opacity: 1; }
            80%  { transform: rotate(-8deg) scale(0.95); }
            100% { transform: rotate(0deg) scale(1); opacity: 1; }
        }


        #mobileOverlay {
            background:
                radial-gradient(ellipse 70% 45% at 50% 48%, rgba(248,210,255,0.22) 0%, transparent 70%),
                linear-gradient(180deg, #f0f7ff 0%, #ffffff 55%, #f5f0ff 100%);

            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            
            height: 100dvh;
            width: 100vw;

            clip-path: circle(0% at 92% 4%);
            transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.9s;
            pointer-events: none;
            visibility: hidden;
        }


        #mobileOverlay.open { 
            clip-path: circle(150% at 92% 4%);
            pointer-events: all;
            visibility: visible;
            transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
        }


        /* - BUTTERFLY - */
        @keyframes butterfly-drift {
            0%   { transform: translate(0, 0) rotate(-8deg); }
            25%  { transform: translate(-6px, -10px) rotate(-4deg); }
            50%  { transform: translate(-10px, -18px) rotate(-10deg); }
            75%  { transform: translate(-4px, -10px) rotate(-6deg); }
            100% { transform: translate(0, 0) rotate(-8deg); }
        }

        .menu-butterfly {
            position: absolute;
            bottom: 22%;
            left: 0;
            right: 0;
            margin: 0 auto;

            width: clamp(75px, 20vw, 110px);
            height: clamp(75px, 20vw, 110px);
            pointer-events: none;
            z-index: 2;
            opacity: 0;
            transition: opacity 0.8s ease 0.6s;
            transform: translateZ(0);
        }



        #mobileOverlay.open .menu-butterfly {
            opacity: 1;
            animation: butterfly-drift 6s ease-in-out infinite;
        }

        .menu-butterfly-2 {
            position: absolute;
            bottom: 26%;
            left: 6%;

            width: clamp(120px, 32vw, 160px);
            height: clamp(120px, 32vw, 160px);
            pointer-events: none;
            z-index: 2;
            opacity: 0;
            transition: opacity 0.8s ease 0.8s;
            transform: translateZ(0);
        }


        #mobileOverlay.open .menu-butterfly-2 {
            opacity: 1;
            animation: butterfly-drift 8s ease-in-out infinite reverse;
        }

        @media (prefers-reduced-motion: reduce) {
            .menu-butterfly { animation: none !important; }
            .menu-butterfly-2 { animation: none !important; }
        }



        .mobile-link {
            opacity: 0; transform: translateY(30px) scale(0.95);
            transition: opacity 0.4s ease, transform 0.4s ease;
            text-decoration: none;
            display: inline-flex; align-items: center; width: auto;
            min-width: 140px; padding: 0.7rem 1.8rem; border-radius: 99px; 
            background: transparent; margin-bottom: 0;
            border: none;
            touch-action: manipulation;
            cursor: pointer;
        }



        .mobile-link:active { transform: scale(0.96) translateY(0); }
        .mobile-link:focus { outline: none; }
        .mobile-link:focus-visible { outline: none; }



        .mobile-link.tap-flash span {
            transition: color 0.15s ease !important;
        }
        .mobile-link.home-link.tap-flash span { color: #48A0D6 !important; }
        .mobile-link.about-link.tap-flash span { color: #D55A92 !important; }
        .mobile-link.news-link.tap-flash span { color: #7FB14E !important; }

        
        .mobile-link span {
            font-size: 2.0rem; font-weight: 800; color: #2D3E50; 
            transition: color 0.3s ease; letter-spacing: -0.02em;
        }


        .mobile-link.home-link.is-active span, .mobile-link.home-link:hover span { color: #48A0D6; }
        .mobile-link.about-link.is-active span, .mobile-link.about-link:hover span { color: #D55A92; }
        .mobile-link.news-link.is-active span, .mobile-link.news-link:hover span { color: #7FB14E; }

        .mobile-link span { position: relative; display: inline-block; }

        .mobile-link span::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            height: 2.5px;
            width: 100%;
            border-radius: 99px;
            opacity: 0.7;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0s;
        }
        .mobile-link.is-active span::after,
        .mobile-link.animating span::after {
            transform: scaleX(1);
        }
        .mobile-link.animating span::after {
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .mobile-link.home-link span::after { background: linear-gradient(90deg, #48A0D6 0%, rgba(72,160,214,0) 100%); }
        .mobile-link.about-link span::after { background: linear-gradient(90deg, #D55A92 0%, rgba(213,90,146,0) 100%); }
        .mobile-link.news-link span::after { background: linear-gradient(90deg, #7FB14E 0%, rgba(127,177,78,0) 100%); }

        #menuEyebrow {
            opacity: 0;
            transition: opacity 0.6s ease 0.2s;
        }
        #mobileOverlay.open #menuEyebrow {
            opacity: 1;
        }

        .mobile-link.is-active, .mobile-link:hover {
            background: transparent;
            border: none;
            box-shadow: none;
            transform: none;
        }
       #mobileOverlay.open .mobile-link { 
            opacity: 1; transform: translateY(0) scale(1);
            transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

               #mobileOverlay.open .mobile-link:nth-child(1) { transition-delay: 0.05s; }
        #mobileOverlay.open .mobile-link:nth-child(2) { transition-delay: 0.17s; }
        #mobileOverlay.open .mobile-link:nth-child(3) { transition-delay: 0.29s; }
        #mobileOverlay.open .mobile-link:nth-child(4) { transition-delay: 0.41s; }





        /* - MOBILE MENU CTA OVERRIDE (Muss für saubere Architektur ganz am Ende stehen) - */
        a.mobile-link.mobile-menu-cta { 
            width: max-content !important; 
            padding: 2px !important; 
            border: none !important; 
            background: transparent !important; 
            border-radius: 14px !important;
            margin-top: auto !important;
            margin-bottom: 0.8rem !important;
            align-self: flex-start !important;
        }

        a.mobile-link.mobile-menu-cta .cta-content { 
            justify-content: center !important; 
            border-radius: 12px !important; 
            text-transform: none !important; 
            letter-spacing: 0.02em !important;
            padding: 0.35rem 1rem !important;
            font-size: 0.68rem !important;
        }

        a.mobile-link.mobile-menu-cta .icon-arrow { 
            flex-shrink: 0 !important;
            width: 13px !important;
            height: 13px !important;
            margin-left: 6px !important;
        }

        /* - GENERAL UTILITIES - */
        main.content-layer { padding-top: 5rem !important; }

        /* - MOBILE MENU BOTTOM SCENE (Footer-Grass + Kindergruppe) - */
        @keyframes grass-sway-menu {
            0%, 100% { transform: skewX(-3deg); }
            50% { transform: skewX(3deg); }
        }

        .mobile-menu-bottom-scene {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 38%;
            pointer-events: none;
            z-index: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
        }

        .mobile-menu-kindergruppe {
            display: block;
            width: 92vw;
            max-width: 92vw;
            flex-shrink: 0;
            object-fit: contain;
            object-position: bottom center;
            position: relative;
            z-index: 1;
            margin-bottom: -8px;

            opacity: 0;
            transform: translateY(16px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
                        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
        }

        #mobileOverlay.open .mobile-menu-kindergruppe {
            opacity: 1;
            transform: translateY(0);
        }

        .mobile-menu-grass-strip {
            width: 100%;
            height: 32px;
            position: relative;
            z-index: 3;
            flex-shrink: 0;
            margin-top: -16px;
        }


        .mobile-menu-grass-inner {
            display: block;
            width: 100%;
            height: 100%;
            background-image: url('../images/grass.svg');
            background-repeat: repeat-x;
            background-position: bottom;
            background-size: contain;
            animation: grass-sway-menu 3s ease-in-out infinite;
            animation-play-state: paused;
            transform-origin: bottom;
            transform: translateZ(0);
        }

        #mobileOverlay.open .mobile-menu-grass-inner {
            animation-play-state: running;
        }


        .mobile-menu-green-strip {
            width: 100%;
            background: #7FB14E;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
            flex-shrink: 0;
            position: relative;
            z-index: 4;
        }


        .mobile-menu-green-strip p {
            font-size: clamp(0.42rem, 1.8vw, 0.58rem);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: rgba(255, 255, 255, 0.9);
            white-space: nowrap;
            text-align: center;
        }


        @keyframes cloud-drift-slow {
            0%   { transform: translateX(0) translateY(0); }
            33%  { transform: translateX(10px) translateY(-8px); }
            66%  { transform: translateX(-6px) translateY(-4px); }
            100% { transform: translateX(0) translateY(0); }
        }
        @keyframes cloud-drift-medium {
            0%   { transform: translateX(0) translateY(0); }
            33%  { transform: translateX(-12px) translateY(-6px); }
            66%  { transform: translateX(8px) translateY(-10px); }
            100% { transform: translateX(0) translateY(0); }
        }
        @keyframes cloud-drift-float {
            0%   { transform: translateX(0) translateY(0); }
            50%  { transform: translateX(8px) translateY(-12px); }
            100% { transform: translateX(0) translateY(0); }
        }


        .menu-cloud {
            position: absolute;
            pointer-events: none;
            z-index: 0;
            fill: currentColor;
            opacity: 0;
            transition: opacity 0.8s ease;
            animation-play-state: paused;
            transform: translateZ(0);
        }
        #mobileOverlay.open .menu-cloud {
            opacity: 1;
            animation-play-state: running;
        }

        .menu-cloud--1 {
            top: 6%; left: -18%;
            width: 200px; height: 200px;
            color: #48A0D6;
            opacity: 0;
            animation: cloud-drift-slow 30s ease-in-out infinite;
            animation-play-state: paused;
            transition-delay: 0.2s;
        }

        .menu-cloud--2 {
            top: 28%; right: -4%;
            width: 160px; height: 160px;
            color: #D55A92;
            opacity: 0;
            animation: cloud-drift-medium 22s ease-in-out infinite;
            animation-play-state: paused;
            transition-delay: 0.4s;
        }

        .menu-cloud--3 {
            top: 52%; left: 8%;
            width: 120px; height: 120px;
            color: #48A0D6;
            opacity: 0;
            animation: cloud-drift-float 15s ease-in-out infinite;
            animation-play-state: paused;
            transition-delay: 0.6s;
        }

        #mobileOverlay.open .menu-cloud--1 { opacity: 0.07; }
        #mobileOverlay.open .menu-cloud--2 { opacity: 0.08; }
        #mobileOverlay.open .menu-cloud--3 { opacity: 0.07; }





        /* - SPEED DIAL - */
        #speedDialAnchor {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.50s,
                        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.50s;
        }



        #mobileOverlay.open #speedDialAnchor {
            opacity: 1;
            transform: translateY(0);
        }

        #speedDialBtn {
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: none;
            border-radius: 50%;
            width: clamp(70px, 22vw, 110px); height: clamp(70px, 22vw, 110px);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            box-shadow: none;
            transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
            position: relative; z-index: 2;
            touch-action: manipulation;
        }



        #speedDialBtn:active { transform: scale(0.9); }
        #speedDialBtn.is-open {
            transform: scale(1.08);
        }

        @keyframes sun-entrance {
            0%   { transform: scale(0.7) rotate(-15deg); opacity: 0; }
            60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
            80%  { transform: scale(0.95) rotate(-2deg); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        @keyframes sun-glow-pulse {
            0%, 100% { opacity: 0.15; }
            50%       { opacity: 0.5; }
        }

        #speedDialBtn::after {
            content: '';
            position: absolute;
            inset: -10px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(251,191,36,0.35) 0%, transparent 70%);
            opacity: 0;
            pointer-events: none;
            z-index: -1;
        }

        #mobileOverlay.open #speedDialBtn::after {
            animation: sun-glow-pulse 4s ease-in-out 1.4s infinite;
        }



        @keyframes label-bob {
            0%, 100% { transform: translateY(0); }
            50%       { transform: translateY(-4px); }
        }

        .sun-label {
            font-size: 0.6rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: rgba(251, 191, 36, 0.9);
            animation: label-bob 2s ease-in-out infinite;
            animation-play-state: paused;
            pointer-events: none;
            margin-top: 4px;
            text-align: center;
            line-height: 1.7;
            text-decoration: none;
        }

        #mobileOverlay.open .sun-label {
            animation-play-state: running;
        }




        .sun-label-kontakt {
            position: relative;
            display: inline-block;
        }

        .sun-label-kontakt::after {
            content: '';
            position: absolute;
            bottom: 1px;
            left: 0;
            width: 100%;
            height: 2px;
            border-radius: 99px;
            background: linear-gradient(90deg, rgba(251,191,36,0.9) 0%, rgba(251,191,36,0) 100%);
        }


        #speedDialBtn.is-open ~ .sun-label,
        #speedDial.open .sun-label {
            opacity: 0;
        }






        #speedDialBtn:hover lottie-player {
            animation: sun-entrance 0.8s cubic-bezier(0.34,1.56,0.64,1) both !important;
        }


        #speedDialBtn.is-open lottie-player {
            animation: sun-entrance 0.8s cubic-bezier(0.34,1.56,0.64,1) both !important;
        }

        .mobile-nav {
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        .mobile-nav.speed-dial-open {
            opacity: 0;
            pointer-events: none;
        }



        #speedDialSun {
            transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
        }
        #speedDialBtn.is-open #speedDialSun {
            transform: scale(1.1);
        }


        #speedDialPills {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        #speedDialPills.is-open {
            opacity: 1;
            pointer-events: all;
        }

        #speedDialPills.is-open::before {
            content: '';
            position: absolute;
            inset: -1.5rem -1.2rem;
            background: rgba(255,255,255,0.35);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 28px;
            border: 1px solid rgba(255,255,255,0.5);
            box-shadow: 0 8px 40px rgba(45,62,80,0.04);
            z-index: -1;
        }


        #speedDialPills { position: relative; }

        .speed-pill {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 16px 10px 10px;
            border-radius: 99px;
            background: rgba(255,255,255,0.75);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            cursor: pointer;
            opacity: 0;
            transform: translateY(20px) scale(0.9);
            transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease, box-shadow 0.3s ease;
            width: clamp(220px, 72vw, 280px);
            box-sizing: border-box;
        }


        .speed-pill.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all !important; }

        .speed-pill:nth-child(2).is-open { transition-delay: 0.40s; }
        .speed-pill:nth-child(3).is-open { transition-delay: 0.20s; }
        .speed-pill:nth-child(4).is-open { transition-delay: 0s; }

        .speed-pill:nth-child(2) { transition-delay: 0.20s; }
        .speed-pill:nth-child(3) { transition-delay: 0.10s; }
        .speed-pill:nth-child(4) { transition-delay: 0s; }



        .speed-pill:active { transform: scale(0.95); }

        .speed-pill--green {
            border: 1px solid rgba(127,177,78,0.22);
            box-shadow: 0 4px 16px rgba(127,177,78,0.06), inset 0 1px 3px rgba(255,255,255,0.9);
        }

        .speed-pill--green { position: relative; overflow: hidden; }
        .speed-pill--green::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(
                to right,
                transparent 0%,
                rgba(255, 255, 255, 0.38) 50%,
                transparent 100%
            );
            transform: skewX(-18deg) translateX(-300%);
            pointer-events: none;
            z-index: 1;
            opacity: 0;
        }
        .speed-pill--green.is-open::after {
            will-change: transform, opacity;
            animation: pill-shimmer-sweep 4s ease-in-out 0.6s infinite;
        }

        @keyframes pill-shimmer-sweep {
            0%        { transform: skewX(-18deg) translateX(-300%); opacity: 0; }
            8%        { opacity: 1; }
            38%       { transform: skewX(-18deg) translateX(500%);  opacity: 1; }
            40%, 100% { transform: skewX(-18deg) translateX(500%);  opacity: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .speed-pill--green::after { display: none; }
        }



        .speed-pill--blue  { border: 1px solid rgba(72,160,214,0.3);  box-shadow: 0 4px 16px rgba(72,160,214,0.1),  inset 0 0 0 1px rgba(72,160,214,0.15),  inset 0 1px 3px rgba(255,255,255,0.9); }
        .speed-pill--pink  { border: 1px solid rgba(213,90,146,0.3);  box-shadow: 0 4px 16px rgba(213,90,146,0.1),  inset 0 0 0 1px rgba(213,90,146,0.15),  inset 0 1px 3px rgba(255,255,255,0.9); }

        .speed-pill-icon {
            width: 34px; height: 34px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .speed-pill-label { font-size: 0.88rem; font-weight: 900; letter-spacing: -0.01em; line-height: 1.2; }
        .speed-pill-sub { font-size: 0.6rem; font-weight: 600; color: rgba(30,41,59,0.4); margin-left: auto; white-space: nowrap; }

        .reveal {
            opacity: 0; transform: translateY(20px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal.active { opacity: 1; transform: translateY(0); }

        .mobile-menu-lottie-container {
            position: absolute;
            top: 3.5rem;
            left: -15vw;
            width: 130vw;
            height: 140px;
            pointer-events: none;
            z-index: 5;
            opacity: 0;
            transition: opacity 0.6s ease 0.2s;
            display: flex;
            align-items: center;
        }


        #mobileOverlay.open .mobile-menu-lottie-container {
            opacity: 1;
        }

        .mobile-menu-lottie-container lottie-player {
            width: 100%;
            height: 100%;
            transform: scale(1.15);
        }
                        

        /* CRITICAL CSS: First Paint Stabilizer */
        html { background: #f7f8fb; }
        body {
            margin: 0;
            background-color: #f7f8fb;
            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
            -webkit-font-smoothing: antialiased;
        }
        header, .glass-header {
            position: fixed;
            top: 0; left: 0;
            width: 100%;
            height: 5rem;
            background: rgba(255,255,255,0.75);
            z-index: 110;
        }
        main { padding-top: 6rem; }    @keyframes grass-sway {
        0%, 100% { transform: skewX(-3deg); }
        50% { transform: skewX(3deg); }
    }
    .grass-animation {
        display: block;
        animation: grass-sway 3s ease-in-out infinite;
        transform-origin: bottom;
    }

    /* - MODAL BACKDROP - */
    .modal-backdrop {
        position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 1rem;
        opacity: 0; visibility: hidden; background: rgba(15, 23, 42, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
        transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.4s, background 0.5s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
    }
.modal-backdrop.is-open {
        opacity: 1; visibility: visible; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
    body.modal-open { overflow: hidden; position: fixed; width: 100%; top: var(--scroll-top, 0); }
    
    /* - MODAL GLASS CONTAINER - */
.modal-glass {
        position: relative; width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column;
        background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
        border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 36px;
        box-shadow: 0 40px 100px -20px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 20px 40px rgba(255, 255, 255, 0.5) inset;
        transform: translateY(40px) scale(0.96); opacity: 0; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }
    .modal-backdrop.is-open .modal-glass { transform: translateY(0) scale(1); opacity: 1; }
    .modal-backdrop.is-open.is-closing {
        background: rgba(15, 23, 42, 0); backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); pointer-events: none;
    }
    .modal-backdrop.is-open.is-closing .modal-glass { transform: translateY(80px) scale(0.96); opacity: 0; }

    /* - PREMIUM INFO BADGE (Interactive & Pulsating) - */
    .modal-info-badge {
        position: absolute;
        top: 24px;
        left: 24px;
        z-index: 60;
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 1);
        border-radius: 30px;
        padding: 6px;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05), inset 0 1px 2px rgba(255,255,255,0.8);
        transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    .modal-info-badge:hover {
        box-shadow: 0 8px 20px -4px rgba(213, 90, 146, 0.25), inset 0 1px 2px rgba(255,255,255,1);
        transform: translateY(-2px);
    }

    .info-icon-wrapper {
        position: relative;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--amina-pink);
        flex-shrink: 0;
        background: rgba(213, 90, 146, 0.1);
        border-radius: 50%;
        transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }

    .modal-info-badge:hover .info-icon-wrapper {
        transform: scale(1.1) rotate(5deg);
    }

    .info-icon-wrapper svg {
        width: 18px;
        height: 18px;
        z-index: 2;
    }

    .pulse-ring {
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid rgba(213, 90, 146, 0.5);
        animation: info-pulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        pointer-events: none;
    }

    @keyframes info-pulse {
        0% { transform: scale(0.8); opacity: 1; }
        100% { transform: scale(1.6); opacity: 0; }
    }

    .info-text {
        overflow: hidden;
        white-space: nowrap;
        max-width: 0;
        opacity: 0;
        color: var(--amina-pink);
        font-size: 0.75rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        transition: max-width 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6), opacity 0.4s ease, padding 0.5s ease;
    }

    .modal-info-badge.is-active .info-text {
        max-width: 250px;
        opacity: 1;
        padding-left: 10px;
        padding-right: 8px;
    }

    .modal-info-badge.is-active .pulse-ring {
        display: none;
    }
    
    /* - MODAL SCROLL AREA & HEADER - */
    .modal-scroll-area { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 2rem; -webkit-overflow-scrolling: touch; }
    .modal-scroll-area::-webkit-scrollbar { width: 0px; background: transparent; }
    .modal-header-glow { position: relative; padding: 4rem 2rem 1.5rem; text-align: center; background: transparent; }
    .modal-lottie-wrapper { width: 88px; height: 88px; margin: 0 auto 0.5rem; position: relative; z-index: 10; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 8px 16px rgba(72, 160, 214, 0.15)); }
    .modal-title { font-size: 2.2rem; font-weight: 900; color: var(--amina-dark); line-height: 1.1; margin-bottom: 0.5rem; letter-spacing: -0.03em; }
    .modal-subtitle { font-size: 1rem; color: #64748B; font-weight: 500; }
    
    /* - MODAL CLOSE BUTTON - */
    .modal-close-btn {
        position: absolute; top: 1.25rem; right: 1.25rem; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.8); border-radius: 50%;
        color: var(--amina-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50;
        transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6); box-shadow: 0 4px 12px rgba(0,0,0,0.04), inset 0 1px 2px rgba(255,255,255,1);
    }
    .modal-close-btn:hover { background: var(--amina-dark); color: white; transform: rotate(90deg) scale(1.05); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
    
    /* - MODAL FORM INPUTS (PREMIUM 10/10 STYLE) - */
    .modal-form-body { padding: 1.5rem 2rem 0; }
    .modal-section-label { font-size: 0.75rem; font-weight: 800; color: #64748B; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; margin-top: 1rem; }
    
    .modal-glass .input-group-modern { position: relative; margin-bottom: 1rem; }
    
    .modal-glass .input-glass {
        box-sizing: border-box !important; appearance: none !important; -webkit-appearance: none !important;
        width: 100%; height: 50px;
        background: rgba(248, 250, 252, 0.7) !important; 
        border: 1px solid #CBD5E1; border-radius: 12px;
        padding: 1.25rem 1rem 0.25rem 2.8rem !important;
        font-size: 0.95rem; font-weight: 700; color: var(--amina-dark); outline: none;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        backdrop-filter: blur(10px); box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
        position: relative;
    }
    
    .modal-glass .input-glass::before {
        content: ""; position: absolute; inset: 0; background-image: var(--noise-subtle);
        background-size: 180px 180px; opacity: 0.02; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply;
    }
    
    .modal-glass input[type="date"].input-glass { display: block; line-height: 1.2; padding-top: 1.4rem !important; padding-bottom: 0 !important; }
		
		.modal-glass input[type="date"].input-glass.input-centered {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.modal-glass input[type="date"].input-glass.input-centered::-webkit-date-and-time-value {
    text-align: center !important;
    margin: 0 auto !important;
}

.modal-glass input[type="date"].input-glass.input-centered::-webkit-datetime-edit {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

.modal-glass input[type="date"].input-glass.input-centered::-webkit-datetime-edit-fields-wrapper {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
}


		
.modal-glass .input-glass.input-centered { text-align: center !important; text-align-last: center !important; -webkit-text-align: center !important; padding-left: 2.8rem !important; padding-right: 1rem !important; }

    .modal-glass .input-glass.input-centered:placeholder-shown ~ .floating-label { left: 0 !important; width: 100% !important; top: 14px !important; text-align: center !important; transform: none !important; pointer-events: none; }
    .modal-glass .input-glass.input-centered:focus ~ .floating-label, .modal-glass .input-glass.input-centered:not(:placeholder-shown) ~ .floating-label, .modal-glass .input-glass.input-centered[type="date"] ~ .floating-label {
        top: 6px !important; left: 0 !important; width: 100% !important; transform: scale(0.75) !important; transform-origin: center top !important; text-align: center !important; color: var(--amina-blue); font-weight: 800;
    }
    
    .modal-glass .input-glass:-webkit-autofill, .modal-glass .input-glass:-webkit-autofill:hover, .modal-glass .input-glass:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px #F8FAFC inset !important; -webkit-text-fill-color: var(--amina-dark) !important; transition: background-color 5000s ease-in-out 0s;
    }
    
    .modal-glass .floating-label { 
        position: absolute; left: 2.8rem; top: 14px; font-size: 0.95rem; font-weight: 600; color: #64748B; pointer-events: none; transition: all 0.25s ease-out; transform-origin: left top; z-index: 5;
    }
    
    .modal-glass .input-glass:focus ~ .floating-label, .modal-glass .input-glass:not(:placeholder-shown) ~ .floating-label, .modal-glass select.input-glass:valid ~ .floating-label {
        top: 6px !important; transform: scale(0.75); color: var(--amina-blue); font-weight: 800;
    }
    
    .modal-glass .input-glass:focus { 
        background: rgba(255, 255, 255, 0.95) !important; border-color: var(--amina-blue); 
        box-shadow: 0 0 0 4px rgba(72, 160, 214, 0.15), 0 8px 25px rgba(72, 160, 214, 0.2) !important; transform: translateY(-2px); 
    }
    
    .modal-glass select.input-glass { cursor: pointer; }
    
    .modal-glass .input-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #94A3B8; transition: color 0.3s ease; pointer-events: none; z-index: 5; }
    .modal-glass .input-glass:focus ~ .input-icon, .modal-glass .input-glass:not(:placeholder-shown) ~ .input-icon { color: var(--amina-blue); }
    
    .modal-glass .select-wrapper { position: relative; }
    .modal-glass .select-chevron { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #94A3B8; pointer-events: none; transition: transform 0.3s ease, color 0.3s ease; z-index: 5; }
    .modal-glass .input-glass:focus ~ .select-chevron { transform: translateY(-50%) rotate(180deg); color: var(--amina-blue); }
    
    /* - CHECKBOX & ERRORS - */
    .modal-glass .checkbox-wrapper { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 1.5rem; cursor: pointer; }
.modal-glass .checkbox-custom {
    width: 28px; height: 28px; border: none; border-radius: 9px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 
        inset 0 0 0 1.5px rgba(203,213,225,0.9),
        inset 0 1px 3px rgba(0,0,0,0.04),
        0 2px 8px rgba(0,0,0,0.03);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.5s cubic-bezier(0.68,-0.6,0.32,1.6);
    flex-shrink: 0; margin-top: 1px;
    position: relative; overflow: hidden;
}

/* Lichtreflex oben */
.modal-glass .checkbox-custom::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
    border-radius: 9px 9px 0 0;
    pointer-events: none; z-index: 1;
}

.modal-glass .checkbox-input:focus-visible + .checkbox-custom {
    box-shadow: inset 0 0 0 2px rgba(72,160,214,0.5), 0 0 0 4px rgba(72,160,214,0.15);
    outline: none;
}

.modal-glass .checkbox-input:checked + .checkbox-custom {
    background: linear-gradient(135deg, #48A0D6 0%, #D55A92 100%);
    box-shadow:
        0 0 16px rgba(213,90,146,0.3),
        0 6px 16px -4px rgba(72,160,214,0.35),
        inset 0 0 0 1.5px rgba(255,255,255,0.4),
        inset 0 1px 4px rgba(255,255,255,0.3);
    transform: scale(1.08);
}

.modal-glass .checkbox-custom svg {
    width: 14px; height: 14px; color: white;
    transform: scale(0) rotate(-20deg);
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    position: relative; z-index: 2;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.modal-glass .checkbox-input:checked + .checkbox-custom svg {
    transform: scale(1) rotate(0deg);
}

    .modal-glass .checkbox-input { opacity: 0; position: absolute; width: 0; height: 0; }
    .modal-glass .legal-text { font-size: 0.8rem; color: #64748B; line-height: 1.4; }
    .modal-glass .legal-link { color: var(--amina-blue); text-decoration: underline; font-weight: 700; }
    
    .modal-glass .error-msg { font-size: 0.75rem; color: var(--amina-pink); font-weight: 700; position: absolute; bottom: -1.2rem; left: 1rem; opacity: 0; transform: translateY(-5px); transition: all 0.3s ease; }
    .modal-glass .input-glass.error { border-color: var(--amina-pink) !important; background: rgba(213, 90, 146, 0.05) !important; animation: shake 0.4s ease-in-out; }
    .modal-glass .input-glass.error ~ .error-msg { opacity: 1; transform: translateY(0); }
    @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
    .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

    
    /* - MODAL BUTTONS - */
    .modal-actions { padding: 2rem; }
    .modal-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
		
    .modal-disclaimer-wrapper { margin-top: 2rem; text-align: center; }
    .modal-disclaimer.primary { font-size: 0.85rem; color: #64748B; font-weight: 700; margin-bottom: 0.25rem; }
    .modal-disclaimer.secondary { font-size: 0.75rem; color: var(--slate-400); font-weight: 500; }
    
    /* - MOBILE MODAL OVERRIDE - */
    @media (max-width: 640px) {
        .modal-backdrop { padding: 0; align-items: flex-start; }
.modal-glass { border-radius: 0; height: 100dvh; max-height: 100dvh; max-width: 100%; border: none; background: transparent; transform: translateY(100%); }
        .modal-backdrop.is-open.is-closing .modal-glass { transform: translateY(100%); opacity: 1; }
        .modal-close-btn { top: calc(env(safe-area-inset-top, 1rem) + 1rem); right: 1.25rem; }
        .modal-info-badge { top: calc(env(safe-area-inset-top, 1rem) + 1rem); left: 1.25rem; }

        .modal-header-glow { padding: calc(env(safe-area-inset-top, 1rem) + 3.5rem) 1.5rem 1rem; }
        .modal-form-body { padding: 1rem 1.5rem 0; }
        .modal-actions { padding: 1.5rem 1.5rem calc(env(safe-area-inset-bottom, 1rem) + 1.5rem); }
    }
		
/* 💎 MODAL BUTTONS – PREMIUM GLASS */
.modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 16px;

    border-radius: 20px;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.85);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.68,-0.6,0.32,1.6);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1;
    width: 100%;
}

/* Lichtreflex oben */
.modal-btn::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent);
    border-radius: 20px 20px 0 0;
    pointer-events: none;
    z-index: 1;
}

/* Noise-Textur */
.modal-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise-medium, url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"));
    background-size: 150px 150px;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
}

.modal-btn__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.modal-btn:hover .modal-btn__icon {
    transform: rotate(-8deg) scale(1.12);
}

.modal-btn__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.modal-btn__label {
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.modal-btn__sub {
    font-size: 0.66rem;
    white-space: nowrap;

    font-weight: 600;
    color: rgba(30,41,59,0.45);
    line-height: 1.3;
    margin-top: 2px;
}

/* Blue variant (Anrufen) */
.modal-btn--blue {
    box-shadow:
        0 0 16px rgba(72,160,214,0.15),
        0 4px 16px -4px rgba(26,32,44,0.06),
        inset 0 0 0 1.5px rgba(72,160,214,0.3),
        inset 0 1px 3px rgba(255,255,255,0.9);
}
.modal-btn--blue .modal-btn__icon {
    background: rgba(72,160,214,0.1);
    color: #48A0D6;
    box-shadow: inset 0 0 0 1.5px rgba(72,160,214,0.25), 0 4px 10px rgba(72,160,214,0.12);
}
.modal-btn--blue .modal-btn__label { color: #48A0D6; }
.modal-btn--blue:hover {
    transform: translateY(-4px);
    border-radius: 26px 12px 26px 12px;
    background: rgba(255,255,255,0.92);
    box-shadow:
        0 12px 32px -6px rgba(72,160,214,0.25),
        inset 0 0 0 1.5px rgba(72,160,214,0.4),
        inset 0 1px 3px rgba(255,255,255,1);
}

/* Pink variant (Anfrage senden) */
.modal-btn--pink {
    box-shadow:
        0 0 16px rgba(213,90,146,0.15),
        0 4px 16px -4px rgba(26,32,44,0.06),
        inset 0 0 0 1.5px rgba(213,90,146,0.3),
        inset 0 1px 3px rgba(255,255,255,0.9);
}
.modal-btn--pink .modal-btn__icon {
    background: rgba(213,90,146,0.1);
    color: #D55A92;
    box-shadow: inset 0 0 0 1.5px rgba(213,90,146,0.25), 0 4px 10px rgba(213,90,146,0.12);
}
.modal-btn--pink .modal-btn__label { color: #D55A92; }
.modal-btn--pink:hover {
    transform: translateY(-4px);
    border-radius: 26px 12px 26px 12px;
    background: rgba(255,255,255,0.92);
    box-shadow:
        0 12px 32px -6px rgba(213,90,146,0.25),
        inset 0 0 0 1.5px rgba(213,90,146,0.4),
        inset 0 1px 3px rgba(255,255,255,1);
}

/* Arrow icon animation on hover */
.modal-btn--pink:hover .modal-btn__arrow {
    animation: modal-arrow-loop 0.8s ease-in-out infinite;
}
@keyframes modal-arrow-loop {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.btn-premium-glass {
    background: rgba(255,255,255,0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 
        0 10px 25px -8px rgba(0, 20, 40, 0.3),
        inset 0 0 0 2px rgba(255, 255, 255, 0.9),
        inset 0 0 0 5px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.5) !important;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.5s var(--liquid-bounce), box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    border-radius: 16px;
    font-weight: 800;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0 1.5rem;
}

/* Noise-Textur (wie bei den Glasboxen) */
.btn-premium-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.25 !important;
    background-image: var(--noise-intense);
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Lichtreflexe (dezent, wie bei den Boxen) */
.btn-premium-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.2) 0%, transparent 60%);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: overlay;
    border-radius: inherit;
    opacity: 0.6;
}

/* Text und Icons über den Effekten */
.btn-premium-glass svg,
.btn-premium-glass span {
    position: relative;
    z-index: 4;
    color: inherit;
}

/* Hover: nur leichte Translationsbewegung (Liquid Bounce) – optional */
.btn-premium-glass:hover {
    transform: translateY(-4px) scale(1.02);
}

/* LANDSCAPE LOCK */

@keyframes llock-cloud-drift-1 {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    40%       { transform: translateY(-5px) translateX(3px); }
    70%       { transform: translateY(3px) translateX(-2px); }
}
@keyframes llock-cloud-drift-2 {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50%       { transform: translateY(4px) translateX(-3px); }
}
@keyframes llock-cloud-drift-3 {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    60%       { transform: translateY(-3px) translateX(2px); }
}
@keyframes llock-phone-rotate {
    0%,   8% { transform: rotate(-90deg); }
    35%,  65% { transform: rotate(0deg); }
    92%, 100% { transform: rotate(-90deg); }
}
@keyframes llock-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

#landscape-lock-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background:
        radial-gradient(ellipse 60% 35% at 50% 0%, rgba(72,160,214,0.11) 0%, transparent 65%),
        radial-gradient(ellipse 55% 30% at 50% 100%, rgba(213,90,146,0.08) 0%, transparent 60%),
        #fafbfc;


    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: all;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

.llock-cloud {
    position: absolute;
    pointer-events: none;
    opacity: 0.36;
}
.llock-cloud--1 {
    width: clamp(88px, 17vw, 124px);
    height: clamp(88px, 17vw, 124px);
    top: 16px; left: 16px;
    animation: llock-cloud-drift-1 14s ease-in-out infinite;
}
.llock-cloud--2 {
    width: clamp(64px, 12vw, 88px);
    height: clamp(64px, 12vw, 88px);
    top: 20px; right: 16px;
    animation: llock-cloud-drift-2 17s ease-in-out infinite;
}
.llock-cloud--3 {
    width: clamp(48px, 9vw, 66px);
    height: clamp(48px, 9vw, 66px);
    bottom: 24px; left: 28px;
    animation: llock-cloud-drift-3 15s ease-in-out 2.5s infinite;
}
.llock-cloud--4 {
    width: clamp(88px, 17vw, 124px);
    height: clamp(88px, 17vw, 124px);
    bottom: 16px; right: 16px;
    animation: llock-cloud-drift-2 16s ease-in-out 1.2s infinite;
}

.llock-glass-card {

    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.4rem, 1vw, 0.6rem);
    padding: clamp(1.1rem, 2.6vw, 1.5rem) clamp(1.4rem, 3.8vw, 1.9rem);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border-radius: 26px;
    box-shadow:
        0 -10px 38px -6px rgba(72, 160, 214, 0.30),
        0 10px 28px -8px rgba(213, 90, 146, 0.22),
        0 24px 52px -18px rgba(213, 90, 146, 0.12),


        0 6px 22px -5px rgba(45, 62, 80, 0.08),
        0 0 0 0.5px rgba(255, 255, 255, 0.50),
        inset 0 2px 0 rgba(255, 255, 255, 1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.76),
        inset 0 -1px 0 rgba(160, 192, 214, 0.16);

    animation: llock-fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    max-width: min(286px, 86vw);
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

.llock-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        158deg,
        rgba(255, 255, 255, 0.52) 0%,
        rgba(255, 255, 255, 0.14) 32%,
        transparent 62%
    );
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.llock-glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.032;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: overlay;
    border-radius: inherit;
}

.llock-glass-card > * {
    position: relative;
    z-index: 1;
}

.llock-eyebrow {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.57rem, 1.3vw, 0.65rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    white-space: nowrap;
    color: rgba(72, 160, 214, 0.72);
    text-align: center;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.llock-eyebrow::before,
.llock-eyebrow::after {
    content: '';
    display: block;
    width: 18px;
    height: 1px;
    background: rgba(72, 160, 214, 0.30);
    flex-shrink: 0;
}

.llock-phone-wrap {
    position: relative;
    width: clamp(72px, 15vw, 96px);
    height: clamp(72px, 15vw, 96px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.llock-phone {
    width: clamp(68px, 14vw, 92px);
    height: clamp(68px, 14vw, 92px);
    filter: drop-shadow(0 0 10px rgba(72,160,214,0.14));
    animation: llock-phone-rotate 3.6s ease-in-out infinite;
    transform-origin: 50% 50%;
}

.llock-arc {
    display: none;
}

.llock-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.2rem, 3.8vw, 1.6rem);
    font-weight: 800;
    color: #2D3E50;
    text-align: center;
    letter-spacing: -0.04em;
    line-height: 1.08;
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.llock-sub {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(0.73rem, 1.8vw, 0.83rem);
    font-weight: 400;
    color: rgba(45, 62, 80, 0.46);
    text-align: center;
    margin: 0;
    letter-spacing: 0.008em;
    line-height: 1.65;
    max-width: 22ch;
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) {
    #menuBtn { display: none !important; pointer-events: none !important; }
    #mobileOverlay { display: none !important; pointer-events: none !important; }
    #landscape-lock-overlay { display: flex !important; }
}

@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) and (prefers-reduced-motion: reduce) {
    .llock-cloud--1, .llock-cloud--2, .llock-cloud--3 { animation: none !important; }
    .llock-phone { animation: none !important; }
.llock-cloud--4 {
    width: clamp(88px, 17vw, 124px);
    height: clamp(88px, 17vw, 124px);
    bottom: 16px; right: 16px;
    animation: llock-cloud-drift-2 16s ease-in-out 1.2s infinite;
}

    .llock-glass-card { animation: none !important; }
}


/* ══ SCROLL PROGRESS BAR — GPU-optimiert ══ */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--amina-blue), var(--amina-pink), var(--amina-green), var(--amina-yellow));
    z-index: 10000;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(213, 90, 146, 0.3);
    transform-origin: left center;
    transform: scaleX(0);
    opacity: 0;
    overflow: hidden;
    will-change: transform, opacity;
    animation: scrollProgress both;
    animation-timeline: scroll(root block);
}
/* GPU-Shimmer: transform statt background-position — kein Repaint.
   Startet paused — wird erst aktiviert wenn Bar sichtbar ist. */
.scroll-progress-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
    will-change: transform;
    animation: barShimmer 3s ease-in-out infinite;
    animation-play-state: paused;
    pointer-events: none;
}
/* JS setzt .bar-shimmer-active sobald Bar sichtbar (≥5% Scroll) */
.scroll-progress-bar.bar-shimmer-active::after {
    animation-play-state: running;
}
/* Fallback: JS setzt is-active wenn scrollY > 100 */
.scroll-progress-bar.is-active {
    opacity: 1;
}
@supports not (animation-timeline: scroll()) {
    .scroll-progress-bar {
        will-change: transform, opacity;
        transition: transform 0.1s linear, opacity 0.3s ease;
    }
    .scroll-progress-bar::after {
        animation: none;
        will-change: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-progress-bar,
    .scroll-progress-bar::after {
        animation: none;
        will-change: auto;
    }
}
@keyframes barShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}
@keyframes progressShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes scrollProgress {
    0%   { transform: scaleX(0); opacity: 0; }
    5%   { opacity: 1; }
    100% { transform: scaleX(1); opacity: 1; }
}