:root {
            --goaty-green: #34C759;
            --apple-bg: #F5F5F7;
        }

        html {
            background-color: var(--apple-bg);
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body { 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
            background-color: var(--apple-bg); 
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            /* 🛑 FIX: Festpinnen & 100dvh gegen den schwarzen Tastatur-Balken! */
            position: fixed;
            inset: 0;
            width: 100%;
            max-width: 100vw;
            height: 100dvh;
            min-height: 100dvh;
            margin: 0; 
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px);
            padding-left: env(safe-area-inset-left, 0px);
            padding-right: env(safe-area-inset-right, 0px);
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        .onboarding-card { 
            position: absolute; inset: 0; border-radius: 2rem; background: white;
            box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
            display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,0.05);
            /* Kein filter-Transition: blur() auf dem Stack wirkt auf Mobilgeräten wie „alles matschig“ */
            transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
            will-change: transform, opacity;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            
            /* 🛑 FIX: Butterweiches Scrollen auf langen Karten erzwungen! */
            overflow-y: auto; 
            overflow-x: hidden;
            -ms-overflow-style: none; scrollbar-width: none;
            -webkit-overflow-scrolling: touch; 
            overscroll-behavior-y: contain; 
            touch-action: pan-y; 
        }
        .onboarding-card::-webkit-scrollbar { display: none; }
        
        .progress-container { width: 100%; height: 6px; background: #E5E5EA; border-radius: 3px; overflow: hidden; }
        .progress-bar { height: 100%; background: var(--goaty-green); transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); }

        /* Höhe kommt vom flex-Eltern (body) — kein starres 100vh, passt auf alle Phones + Notch */
        .card-stack { position: relative; width: 100%; height: 100%; min-height: 0; max-width: min(360px, 100%); margin: 0 auto; }
        
        .card-stack::before, .card-stack::after {
            content: ''; position: absolute; width: 100%; height: 95%; top: 0; left: 0; border-radius: 2rem;
            transform-origin: bottom center; pointer-events: none;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        }
        .card-stack::before { background: #f9fafb; border: 1px solid rgba(0,0,0,0.05); transform: rotate(-4deg) scale(0.95) translateY(10px); z-index: -2; }
        .card-stack::after { background: #f3f4f6; border: 1px solid rgba(0,0,0,0.05); transform: rotate(3deg) scale(0.98) translateY(5px); z-index: -1; }

        .option-btn { border: 2px solid #E5E5EA; transition: all 0.2s ease; }
        .option-btn.selected { border-color: var(--goaty-green); background: #E8F5E9; font-weight: 700; transform: scale(0.98); }
        
        .pill-btn { border: 2px solid transparent; background: #F5F5F7; color: #86868B; transition: all 0.2s ease; }
        .pill-btn.active-pill { background: #E8F5E9; color: #1e7e34; border-color: var(--goaty-green); font-weight: bold; transform: scale(0.95); }

        /* Portionsgröße: zuverlässig tippbar (nicht vom Karten-Scroll „geschluckt“) */
        .portion-btn {
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
        }
        .portion-btn:active { transform: scale(0.98); }
        .portion-btn.selected-portion {
            border-color: var(--goaty-green) !important;
            background: #E8F5E9 !important;
        }

        .input-clean { background: transparent; border: none; border-bottom: 2px solid #D2D2D7; outline: none; font-size: 1.5rem; padding: 12px 0; width: 100%; text-align: center; font-weight: bold; transition: border-color 0.3s; }
        .input-clean:focus { border-bottom-color: var(--goaty-green); }

        input[type=range] { -webkit-appearance: none; background: transparent; width: 100%; }
        input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 32px; width: 32px; border-radius: 50%; background: #FFFFFF; border: 1px solid #D2D2D7; box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer; margin-top: -12px; transition: transform 0.1s;}
        input[type=range]::-webkit-slider-thumb:active { transform: scale(1.1); }
        input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; background: #E5E5EA; border-radius: 4px; }

        /* Overlay für Info-Swipes */
        .swipe-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; z-index: 30; transition: opacity 0.1s; }
        
        /* Hilfsklasse für dynamische Änderungen */
        .text-goaty { color: var(--goaty-green); }
        .bg-goaty { background-color: var(--goaty-green); }