/**
 * XQLUSIVE - Globales Stylesheet (style.css)
 * Definiert das Design, Layout, die Sektionen und responsive Anpassungen.
 */

 :root {
    --neon-pink: #fa0081;
    --neon-blue: #4a55f7;
    --neon-purple: #6c3be8;
    --dark-bg: #09090e;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.08);
    --neutral-800: #05050a;
    --neutral-700: #0d0d14;
    --neutral-600: #1a1a26;
    --neutral-100: #ffffff;
    --neutral-200: #fafafa;
    --neutral-300: #a5b4fc;
    --neutral-500: #4c4c56;
    --accent-blue: #0033ff;
    --accent-magenta: #ff00ff;
    --accent-pink: #ff1083;
    --accent-purple: #9d00ff;
    --gradient-primary: linear-gradient(105deg, var(--neon-pink) 0%, var(--neon-blue) 100%);
    --gradient-pre-sale: linear-gradient(135deg, var(--neon-pink) 0%, #9d00ff 100%);
    --gradient-xive: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-magenta) 100%);
    --gradient-text: linear-gradient(180deg, var(--neutral-100) 30%, var(--neutral-300) 100%);
    --gradient-glow: radial-gradient(circle, rgba(255, 0, 255, 0.25) 0%, rgba(5, 5, 10, 0) 100%);
    --shadow-btn-blue: 0 0 20px rgba(0, 51, 255, 0.4);
    --shadow-btn-magenta: 0 0 20px rgba(255, 0, 255, 0.4);
}

/* --- Resets & Globales --- */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    max-width: 100%;
    position: relative;
    background-color: var(--dark-bg);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch;
}

.container, .container-fluid, .row {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* --- Typografie & Schriften --- */
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend/Lexend-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend/Lexend-Medium.ttf'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend/Lexend-SemiBold.ttf'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend/Lexend-Bold.ttf'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend/Lexend-ExtraBold.ttf'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('../fonts/Lexend/Lexend-Black.ttf'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Lexend Mega'; src: url('../fonts/Lexend/Lexend-VariableFont_wght.ttf'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Lexend Zetta'; src: url('../fonts/Lexend/Lexend-VariableFont_wght.ttf'); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: 'Lexend Exa'; src: url('../fonts/Lexend/Lexend-VariableFont_wght.ttf'); font-weight: 100 1000; font-display: swap; }

.font-zetta { font-family: 'Lexend', sans-serif; font-weight: 800; }
.font-mega { font-family: 'Lexend', sans-serif; font-weight: 900; }
.font-exa { font-family: 'Lexend', sans-serif; font-weight: 400; }

.gradient-logo { background: radial-gradient(circle, rgb(250, 20, 200) 0%, rgba(80, 7, 237, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -2.3px; }
.gradient-slogan { background: radial-gradient(circle, rgb(233, 159, 242) 0%, rgb(140, 44, 165) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -5px; line-height: 1.1; }

/* --- UI-Komponenten & Effekte --- */
.glass-card { background: rgba(13, 13, 20, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 2.5rem; }

.shadow-sm { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05); }
.shadow-md { box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.6), 0 0 15px 0 rgba(157, 0, 255, 0.08); }
.shadow-lg { box-shadow: 0 24px 65px 0 rgba(5, 5, 10, 0.8), 0 0 25px 0 rgba(255, 0, 255, 0.15); }

.neon-glow-blue { text-shadow: 0 0 10px rgba(0, 51, 255, 0.6), 0 0 20px rgba(0, 51, 255, 0.3); }
.neon-glow-magenta { text-shadow: 0 0 10px rgba(255, 0, 255, 0.6), 0 0 20px rgba(255, 0, 255, 0.3); }

/* --- Navbar --- */
.navbar-framer { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); padding: 24px 0; background: transparent; }
.navbar-framer.scrolled { padding: 12px 0; background: rgba(9, 9, 14, 0.85); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.navbar-logo { height: 42px; width: auto; transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease; }
.navbar-logo:hover { transform: scale(1.08); filter: drop-shadow(0 0 10px var(--neon-pink)) drop-shadow(0 0 20px var(--neon-blue)); }
.navbar-framer.scrolled .navbar-logo { height: 34px; }

/* --- Buttons --- */
.btn-gradient { background: var(--gradient-primary); color: white; border: none; border-radius: 38px; padding: 14px 36px; font-weight: 800; text-transform: uppercase; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-gradient:hover { transform: scale(1.05); box-shadow: 0 15px 30px rgba(250, 0, 129, 0.5); color: white; }

.btn-pre-sale { background: var(--gradient-pre-sale); color: #ffffff !important; font-weight: 800; border-radius: 4px; padding: 12px 28px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-pre-sale:hover { transform: scale(1.05); }

/* --- FAQ & Misc --- */
#stickyBookingBtn { position: fixed; top: 85px; right: 2rem; z-index: 1020; opacity: 0; pointer-events: none; transform: translateY(-20px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
#stickyBookingBtn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.faq-categories-menu { overflow-x: hidden !important; }

/* --- Utilities --- */
.text-neon-pink { color: var(--neon-pink); transition: all 0.2s; }
.text-neon-pink:hover { color: #ffffff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); }
.custom-checkbox:checked { background-color: var(--neon-pink) !important; border-color: var(--neon-pink) !important; }

/* === Custom Calendar Picker CSS === */
.calendar-popup {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: #020617; /* slate-950 */
    border: 1px solid #1e293b;
    border-radius: 14px;
    padding: 1rem;
    
    /* Dynamische Breite */
    width: 100%; 
    min-width: 300px; 
    box-sizing: border-box; 
    
    z-index: 100;
    box-shadow: 0 10px 25px rgba(88, 28, 135, 0.4);
    display: none; /* Versteckt als Standard */
    flex-direction: column;
    color: white;
}


/* Media Queries für Mobilgeräte: Modul vertikal umbrechen */
@media (max-width: 600px) {
    .gradient-wrapper {
        width: 100%; /* Modul nutzt volle Breite im Modal */
        max-width: 100%;
        margin: 0; /* Entfernt eventuelles Auto-Zentrieren */
    }
    .inner-container {
        flex-direction: column;
        width: 100%;
    }
    .divider {
        width: 100%;
        height: 1px;
        min-height: 1px;
    }
    .input-group-custom {
        width: 100%;
    }
    /* WICHTIG: min-width auf 0 setzen, damit nichts gestaucht wird */
    .input-custom, .swipe-time-display {
        text-align: center;
        min-width: 0 !important; 
        width: 100%;
    }
    .calendar-popup {
        min-width: 0 !important; 
        width: 100%; 
    }
}


/* In Webseite enthaltenes Stil-Dokument | https://dressen-mg.de/_x/xadmin/index.php */

#about {
    padding: 0 50px;
}

.row.g-4.g-lg-5 {
    padding: 0 50px;
    margin: 0 auto;
}