/**
 * qApp Booking Theme - Styles
 * 
 * Nur CSS-Variablen für Theme-Anpassung.
 * Alle Komponenten-Styles sind inline mit Tailwind.
 * 
 * @version 2.1.0
 */

:root {
    /* Primary Color (überschreibbar pro Kunde) */
    --color-primary: #E63312;
    --color-primary-dark: #C42A0E;
    --color-primary-light: #FF4D2E;
}

/* Tailwind Primary Color Override */
/* Wird im HTML mit tailwind.config.theme.extend.colors.primary gesetzt */

/* ============================================
   iOS Safe Area Support
   ============================================ */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ============================================
   Scroll Snap Utilities
   ============================================ */
/* Tailwind-kompatible Snap-Align Klassen */
.snap-align-none {
    scroll-snap-align: none;
}

/* ============================================
   Mobile Header Visibility
   Versteckt auf Hero-Sektion, sichtbar auf Formular-Sektion
   ============================================ */
@media (max-width: 1023px) {
    #mobileHeader {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    #mobileHeader.visible {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ============================================
   Standard KELT-9 Error States für Formularfelder
   ============================================ */
.email-error,
.phone-error {
    border-color: #dc2626 !important;
    background-color: #fef2f2;
}

.email-error:focus,
.phone-error:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

/* ============================================
   Smooth Scrolling
   ============================================ */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}