/* ============================================
   EDEN01 - Main Stylesheet
   Urban Jungle. Day to Night.
   ============================================ */

/* ========================================
   Scroll Animations - Global
   ======================================== */

.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Splash Screen - Award Winning Style
   Particle Formation Animation
   ============================================ */

.splash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background-color: #0A0E0D;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.splash.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 2.5s cubic-bezier(0.33, 0, 0.2, 1), visibility 0s linear 2.5s; /* Ultra langsam & smooth */
}

/* Grid stays visible longer - only fade out after splash is hidden */
.splash.hidden .splash__grid {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.5s cubic-bezier(0.33, 0, 0.2, 1) 0.8s, visibility 0s linear 0.8s; /* Noch langsamer */
}

.splash.hidden .splash__grid.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s cubic-bezier(0.33, 0, 0.2, 1); /* Ultra smooth Fade */
}

.splash__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(135deg, #0A0E0D 0%, #0f1410 100%);
    opacity: 1;
    transition: opacity 2.5s cubic-bezier(0.33, 0, 0.2, 1); /* Smooth fade für Background */
    /* Breathing Animation - sehr subtil */
    animation: splashBackgroundBreath 10s ease-in-out infinite;
}

@keyframes splashBackgroundBreath {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.98; } /* 2% Helligkeit */
}

/* Living Gold Grid - Ultra dezent mit Unterbrechungen */
.splash__grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    /* Pattern größer + blur für Tiefe */
    filter: blur(0.7px); /* Liegt "in der Tiefe" */
    /* Slow Drift Animation - ultra langsam */
    animation: splashGridDrift 40s linear infinite;
    /* Feinere, dezentere Linien mit Unterbrechungen (gestrichelt) */
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 79.9px,
            rgba(199, 163, 92, 0.08) 80px, /* Dezenter: 0.22 → 0.08 */
            rgba(199, 163, 92, 0.08) 80.15px, /* Feiner: 0.3px → 0.15px */
            transparent 80.3px,
            transparent 86px, /* Unterbrechung: kleine Lücke */
            rgba(199, 163, 92, 0.08) 86.15px,
            rgba(199, 163, 92, 0.08) 86.3px,
            transparent 86.45px,
            transparent 160px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 79.9px,
            rgba(199, 163, 92, 0.08) 80px,
            rgba(199, 163, 92, 0.08) 80.15px,
            transparent 80.3px,
            transparent 86px,
            rgba(199, 163, 92, 0.08) 86.15px,
            rgba(199, 163, 92, 0.08) 86.3px,
            transparent 86.45px,
            transparent 160px
        );
    background-size: 113px 113px, 113px 113px;
    background-position: 0 0, 0 0;
    background-repeat: repeat;
    will-change: opacity, transform;
    transform-origin: center center;
}

@keyframes splashGridPulse {
    0%, 100% {
        opacity: 0.08; /* Dezenter (vorher 0.22) */
    }
    50% {
        opacity: 0.12; /* Dezenter (vorher 0.28) */
    }
}

@keyframes splashGridDrift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0.3px, 0.3px, 0); } /* Minimal drift, GPU-beschleunigt */
}

.splash__rhino {
    position: relative; /* Original position - stays in splash content flow */
    z-index: 3; /* Original z-index */
    width: 35vw; /* Gleiche Größe wie Hero (35%) */
    max-width: 400px; /* Same as hero */
    height: auto;
    min-height: 200px; /* Same as hero */
    overflow: visible; /* Für Glow-Bühne */
    pointer-events: none;
    opacity: 0;
    animation: splashRhinoIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s forwards,
               splashRhinoFloat 8s ease-in-out 2s infinite; /* Float nach Fade-in */
    will-change: auto; /* Default - nur setzen wenn nötig */
    margin-top: 0;
}

/* Ground-Glow Bühne unter dem Rhino */
.splash__rhino::before {
    content: '';
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 30%;
    background: radial-gradient(
        ellipse 70% 100% at 50% 50%,
        rgba(201, 169, 97, 0.15) 0%,
        rgba(201, 169, 97, 0.08) 40%,
        transparent 70%
    );
    filter: blur(30px);
    z-index: -1;
}

/* Light-Falloff von oben */
.splash__rhino::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 40%;
    background: radial-gradient(
        ellipse 60% 80% at 50% 80%,
        rgba(201, 169, 97, 0.06) 0%,
        transparent 60%
    );
    filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}

@keyframes splashRhinoFloat {
    0%, 100% { transform: translate3d(0, 0, 0); } /* GPU-beschleunigt */
    50% { transform: translate3d(0, -3px, 0); } /* 3px float */
}

/* Removed - no longer needed (simple fade out instead of animation) */

.splash__rhino-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: none;
}

@media (max-width: 1024px) {
    .splash__rhino {
        width: 40vw;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .splash__rhino {
        width: 50vw;
        max-width: 350px;
    }
    
    .splash__logo-img {
        height: 70px;
    }
}

.splash__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gerichtete Vignette - Mitte heller, Ecken dunkler */
    background: radial-gradient(
        ellipse 60% 50% at 50% 45%,
        transparent 0%,
        transparent 20%,
        rgba(10, 15, 10, 0.3) 50%,
        rgba(10, 15, 10, 0.6) 80%,
        rgba(10, 15, 10, 0.8) 100%
    );
    z-index: 2;
    opacity: 1; /* Immer aktiv */
    pointer-events: none;
}

.splash__content {
    position: relative;
    z-index: 4;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3vh, 40px); /* Gap für Welcome-Text */
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.splash__welcome {
    font-family: var(--font-headline);
    font-size: clamp(1.2rem, 1.5vw, 1.8rem); /* 20% größer */
    font-weight: 400;
    color: #F4F2ED; /* Off-White */
    letter-spacing: 0.08em; /* Minimal enger (vorher 0.1em) */
    text-transform: uppercase;
    opacity: 0;
    animation: splashWelcomeIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) 1s forwards;
    margin-top: clamp(-30px, -4vh, -10px); /* Deutlich höher */
    z-index: 3;
    /* Soft Glow/Shadow - löst sich vom Pattern */
    text-shadow: 0 0 20px rgba(201, 169, 97, 0.3),
                 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes splashWelcomeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.splash__logo {
    position: relative;
    z-index: 3;
    opacity: 0;
    transform: scale(0.85);
    filter: none;
    animation: splashLogoForm 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
    margin-bottom: clamp(20px, 3vh, 40px);
}

.splash__logo-img {
    height: 100px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Tagline removed - no longer needed */

.splash__skip {
    position: absolute;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 4;
    background: rgba(201, 169, 97, 0.02); /* Ganz leicht "glass" */
    border: 1.5px solid rgba(201, 169, 97, 0.4); /* Heller/kontrastreicher */
    color: var(--color-accent-gold);
    padding: calc(var(--spacing-sm) * 1.15) calc(var(--spacing-lg) * 1.15); /* 15% größer */
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: splashSkipIn 0.6s ease-out 1s forwards;
    backdrop-filter: blur(10px); /* Glass effect */
}

.splash__skip:hover {
    border-color: var(--color-accent-gold);
    background: rgba(201, 169, 97, 0.15);
    box-shadow: 0 0 20px rgba(201, 169, 97, 0.3); /* Glow */
    transform: translateY(-2px);
}

.splash__skip:active {
    transform: translateY(0) scale(0.98); /* Snap */
}

.splash__skip span {
    display: block;
}

.splash__skip-micro {
    display: block;
    font-size: 0.7em;
    opacity: 0.6;
    letter-spacing: 0.15em;
    margin-top: 4px;
    font-weight: 300;
}

/* Premium Brand Detail - Unter dem Rhino */
.splash__brand-detail {
    position: relative;
    text-align: center;
    margin-top: clamp(5px, 1vh, 15px); /* Deutlich reduziert für höhere Position */
    opacity: 0;
    animation: splashBrandDetailIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
    z-index: 3;
}

.splash__brand-line {
    font-family: var(--font-body); /* Sans Serif für cleanen Look */
    font-size: clamp(0.65rem, 0.8vw, 0.85rem); /* Super fein */
    font-weight: 300;
    color: rgba(244, 242, 237, 0.35); /* Low opacity - 35% */
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.8;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Subtile Tiefe */
}

.splash__brand-line--year {
    margin-top: 6px;
    font-size: clamp(0.6rem, 0.75vw, 0.8rem); /* Noch feiner */
    opacity: 0.8;
    color: rgba(201, 169, 97, 0.3); /* Gold, sehr dezent */
    letter-spacing: 0.2em;
}

@keyframes splashBrandDetailIn {
    from {
        opacity: 0;
        transform: translate3d(0, 15px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Splash Animations */
@keyframes splashRhinoIn {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes splashOverlayIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes splashLogoForm {
    0% {
        opacity: 0;
        transform: scale(0.85);
        filter: none;
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }
}

@keyframes splashSkipIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Prevent scroll during splash */
body.splash-active {
    overflow: hidden;
    height: 100vh;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .splash {
        transition: opacity 0.3s, visibility 0.3s;
    }
    
    .splash__logo,
    .splash__tagline,
    .splash__overlay,
    .splash__canvas,
    .splash__skip {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
    
    .splash__logo {
        filter: drop-shadow(0 0 30px rgba(201, 169, 97, 0.3));
    }
}

/* Responsive */
@media (max-width: 768px) {
    .splash__logo-img {
        height: 70px;
    }
    
    .splash__tagline span {
        font-size: var(--fs-base);
    }
    
    .splash__skip {
        bottom: var(--spacing-lg);
        right: var(--spacing-lg);
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--fs-xs);
    }
}

/* Font Face Declarations - Cormorant Garamond (Variable, WOFF2 + TTF fallback) */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/Cormorant_Garamond/CormorantGaramond-VariableFont_wght.woff2') format('woff2'),
         url('../fonts/Cormorant_Garamond/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* Literata - Variable Font für Body Text (WOFF2) */
@font-face {
    font-family: 'Literata';
    src: url('../fonts/Literata/Literata-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Literata';
    src: url('../fonts/Literata/Literata-Italic-VariableFont_opsz,wght.woff2') format('woff2');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

/* Inter - Self-hosted (DSGVO-konform, kein Google CDN) */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* JetBrains Mono - Self-hosted (DSGVO-konform, kein Google CDN) */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrains_Mono/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrains_Mono/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* CSS Custom Properties - main.css specific + legacy tokens
   Note: Core tokens (colors, spacing, motion, z-index) live in tokens.css.
   Here only: font stacks, legacy naming aliases, and night-mode colors. */
:root {
    /* Typography — Font stacks (canonical source) */
    --font-headline: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Literata', Georgia, -apple-system, BlinkMacSystemFont, serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Colors - Night Mode (JS-driven) */
    --color-bg-primary-night: #050805;
    --color-bg-secondary-night: #0f1410;
    --color-accent-gold-night: #d4b876;

    /* Extra Accents */
    --color-accent-sand: #e8e3d3;
    --color-accent-bone: #f0ebe0;
    --color-accent-gold-dark: #9d8249;

    /* Legacy naming aliases — used by older main.css components */
    --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --fs-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
    --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
    --fs-2xl: clamp(2rem, 1.6rem + 2vw, 3.5rem);
    --fs-3xl: clamp(2.5rem, 2rem + 2.5vw, 5rem);
    --fs-4xl: clamp(3.5rem, 2.8rem + 3.5vw, 7rem);
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.618rem;
    --spacing-lg: 2.618rem;
    --spacing-xl: 4.236rem;
    --spacing-2xl: 6.854rem;
    --spacing-3xl: 11.09rem;
    --container-max-width: 1440px;
    --container-padding: clamp(1.5rem, 4vw, 4rem);
    --section-padding: clamp(4rem, 8vw, 12rem);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --z-hero: 100;
}

/* Reset & Base Styles */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    /* scroll-behavior: smooth; — handled by Lenis */
    scroll-padding-top: 80px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   Custom Papagei Cursor - Global Implementation
   Must override all default cursors everywhere
   ======================================== */

html {
    cursor: url('../images/Papagei-cursor.png') 32 32, auto !important;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
    transition: background-color var(--transition-slow);
    will-change: scroll-position;
    margin: 0;
    padding: 0;
    cursor: url('../images/Papagei-cursor.png') 32 32, auto !important;
}

/* Custom cursor for ALL elements - no exceptions */
*, *::before, *::after {
    cursor: url('../images/Papagei-cursor.png') 32 32, inherit !important;
}

/* Interactive elements - Papagei cursor everywhere */
a, button, .btn, .btn--primary, .btn--secondary,
.nav__link, .nav__social-link, .nav__logo, .nav__menu-toggle,
input, textarea, select, [role="button"], [tabindex],
label, [onclick], .splash__skip,
.atmosphere__cta, .atmosphere__image, .atmosphere__chapter,
.drinks__link, .drinks__split-image,
.events__cta, .events__hero, .events__grid-item,
.contact__option, .contact__submit,
.footer__link, .footer__social-link,
.menu-modal__close, .menu-modal__overlay {
    cursor: url('../images/Papagei-cursor.png') 32 32, pointer !important;
}

/* Hover states - ensure Papagei stays */
a:hover, button:hover, .btn:hover,
.nav__link:hover, .atmosphere__image:hover,
.drinks__split-image:hover, .events__grid-item:hover,
.contact__option:hover, .footer__link:hover {
    cursor: url('../images/Papagei-cursor.png') 32 32, pointer !important;
}

/* Active/Focus states */
a:active, button:active, a:focus, button:focus {
    cursor: url('../images/Papagei-cursor.png') 32 32, pointer !important;
}

/* Day to Night Color Transition */
body {
    --night-intensity: 0;
    transition: background-color var(--transition-slow);
}

body[data-theme="night"] {
    --color-bg-primary: var(--color-bg-primary-night);
    --color-bg-secondary: var(--color-bg-secondary-night);
    --color-accent-gold: var(--color-accent-gold-night);
    background-color: var(--color-bg-primary);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headline);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

h1 {
    font-weight: 400;
}

h2, h3 {
    font-weight: 400;
}

.section__title {
    font-weight: 400;
}

/* Bold variant for emphasis */
h1 strong,
h2 strong,
.section__title strong {
    font-weight: 700;
}

h1 {
    font-size: var(--fs-4xl);
}

h2 {
    font-size: var(--fs-3xl);
}

h3 {
    font-size: var(--fs-2xl);
}

p {
    margin-bottom: var(--spacing-md);
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-accent-gold);
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.9em;
    letter-spacing: 0.05em;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    background-color: transparent;
    transition: background-color var(--transition-base);
}

.nav__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-sm) var(--container-padding); /* Schmaler - von spacing-md zu spacing-sm */
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    gap: var(--spacing-md);
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
}

.nav__logo-img {
    height: 60px;
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav__logo:hover .nav__logo-img {
    transform: scale(1.05);
    opacity: 0.9;
}

.nav__links {
    display: flex;
    gap: var(--spacing-md); /* Etwas weniger Gap - von spacing-lg zu spacing-md */
    align-items: center;
    flex: 1;
    justify-content: center;
}

.nav__link {
    font-size: var(--fs-xs); /* Kleiner - von fs-sm zu fs-xs */
    font-weight: 400; /* Leichter - von 500 zu 400 */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent-gold);
    transition: color var(--transition-base), opacity var(--transition-base);
}

.nav__link:hover {
    color: var(--color-accent-gold-dark);
    opacity: 0.8;
}

/* Navigation Player */
/* Navigation Social Icons */
.nav__social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: var(--spacing-lg);
}

.nav__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 97, 0.25);
    color: var(--color-accent-gold);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__social-link:hover {
    border-color: var(--color-accent-gold);
    background: rgba(201, 169, 97, 0.1);
    transform: scale(1.1);
}

.nav__social-link svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 1024px) {
    .nav__social {
        display: none;
    }
}

.nav__menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav__menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--color-text-primary);
    transition: transform var(--transition-base);
}

/* Hero Section - No layout properties that affect layers */
.hero {
    position: sticky;
    top: 0;
    min-height: 100vh;
    height: 380vh; /* Extended height for scroll-locked animation + delay before next section */
    overflow: visible; /* Changed from hidden to visible so bar is not clipped */
    padding-top: 0;
    z-index: var(--z-hero);
    /* Isolate all children layers */
    isolation: isolate;
}

/* Hero Viewport Container - All layers are positioned relative to first 100vh */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* First viewport only */
    z-index: 0;
    pointer-events: none;
}

.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Only first viewport - 16:9 area */
    background-image: url('../images/Hero_background.webp');
    background-size: 100% 100%; /* Normal size, not zoomed */
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1; /* Hinterste Ebene */
    opacity: 0.05; /* Start: Fast unsichtbar */
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    /* Isolated layer - no influence on other elements */
    isolation: isolate;
    contain: layout style paint;
    margin: 0;
    padding: 0;
}

/* Mobile: cover statt 100% 100% — verhindert Stauchung auf Portrait-Viewports */
@media (max-width: 768px) {
    .hero__background {
        background-size: cover !important;
    }
}

/* No scale animation - only opacity fade */

.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Only first viewport - 16:9 area */
    background: rgba(10, 15, 10, 0.75);
    opacity: calc(1 - var(--overlay-opacity, 0) * 0.2);
    transition: opacity var(--transition-slow);
    z-index: 2;
    /* Isolated layer - no influence on other elements */
    isolation: isolate;
    contain: layout style paint;
    margin: 0;
    padding: 0;
}

/* ============================================
   OUTER FX LAYER - Atmosphäre & Tiefe
   Opferbar, löst sich beim Scroll auf
   ============================================ */

.hero__outer-fx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 2; /* Gleiche Ebene wie Overlay, vor Layers */
    pointer-events: none;
    isolation: isolate;
    /* Wird von JS gesteuert - Auflösungs-Effekt */
    will-change: filter, opacity, transform;
}

/* ---- Vignette - Satori Style: Dunkler, mehr Tiefe ---- */
.hero__fx-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 70% 55% at 50% 50%,
        transparent 0%,
        transparent 25%,
        rgba(10, 15, 10, 0.4) 55%,
        rgba(10, 15, 10, 0.75) 100%
    );
    z-index: 1;
}

/* ---- Fog/Haze - Satori Style: Golden atmospheric glow ---- */
.hero__fx-fog {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(201, 169, 97, 0.08) 0%,
        transparent 30%,
        transparent 70%,
        rgba(201, 169, 97, 0.06) 100%
    );
    z-index: 2;
    mix-blend-mode: soft-light;
}

/* ---- Grain/Texture ---- */
.hero__fx-grain {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    z-index: 3;
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
}

/* ---- Lichtfall - Satori Style: Subtiler, weniger aufdringlich ---- */
.hero__fx-light-rays {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 50% 70% at 35% 25%,
        rgba(201, 169, 97, 0.04) 0%,
        transparent 40%
    );
    z-index: 4;
    mix-blend-mode: soft-light;
}

/* ---- Pflanzen-Silhouetten Links - Satori Style: Dezenter ---- */
.hero__fx-plants-left {
    position: absolute;
    left: -5%;
    top: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(10, 15, 10, 0.5) 0%,
        transparent 100%
    );
    z-index: 5;
}

/* ---- Pflanzen-Silhouetten Rechts - Satori Style: Dezenter ---- */
.hero__fx-plants-right {
    position: absolute;
    right: -5%;
    top: 0;
    width: 20%;
    height: 100%;
    background: linear-gradient(
        to left,
        rgba(10, 15, 10, 0.5) 0%,
        transparent 100%
    );
    z-index: 5;
}

/* ============================================
   SATORI STYLE: Organische Aura/Nebel-Shapes
   Sehr weiche, dunkle Shapes wie Rauch
   Verstärkt Tiefe & Mystik
   ============================================ */

/* Organische Aura Links */
.hero__fx-aura-left {
    position: absolute;
    left: -10%;
    top: 15%;
    width: 35%;
    height: 70%;
    background: radial-gradient(
        ellipse 100% 80% at 30% 50%,
        rgba(10, 15, 10, 0.6) 0%,
        rgba(10, 15, 10, 0.3) 40%,
        transparent 70%
    );
    z-index: 4;
    filter: blur(40px);
    opacity: 0.8;
}

/* Organische Aura Rechts */
.hero__fx-aura-right {
    position: absolute;
    right: -10%;
    top: 20%;
    width: 35%;
    height: 65%;
    background: radial-gradient(
        ellipse 100% 80% at 70% 50%,
        rgba(10, 15, 10, 0.6) 0%,
        rgba(10, 15, 10, 0.3) 40%,
        transparent 70%
    );
    z-index: 4;
    filter: blur(40px);
    opacity: 0.8;
}

/* Subtiler Nebel unten - Mystische Basis */
.hero__fx-mist-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(
        to top,
        rgba(10, 15, 10, 0.5) 0%,
        rgba(10, 15, 10, 0.2) 30%,
        transparent 100%
    );
    z-index: 3;
    filter: blur(20px);
    opacity: 0.7;
}

/* Hero Layers - Shopify Editions Style - Isolated container */
.hero__layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Only first viewport - 16:9 area */
    z-index: 3;
    pointer-events: none;
    overflow: visible;
    /* Isolate layers - no influence on each other */
    isolation: isolate;
    contain: layout style paint;
}

/* Hero Layer Base - All layers are full 16:9 containers (100vh) */
.hero__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Alle Container haben volle 16:9 Größe */
    will-change: transform, opacity;
    transition: none; /* Controlled by JS */
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    /* Isolate layers - no influence on each other */
    isolation: isolate;
    contain: layout style paint;
    display: block;
    /* Positionierung erfolgt innerhalb des Containers */
    overflow: visible;
}

.hero__layer-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    filter: contrast(1.05) saturate(0.85);
    margin: 0;
    padding: 0;
}

/* Bar-Bild überschreibt Base-Styles komplett - direkt nach Base-Klasse für höchste Spezifität */
.hero__layer--bar .hero__layer-img {
    /* Bar wie Baum - gleiche Größe, unten positioniert */
    position: absolute;
    bottom: 0; /* Sauber am unteren Rand */
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw; /* Passt genau in den Viewport */
    max-height: 100vh; /* Passt genau in den Viewport */
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center bottom; /* Unten ausrichten */
    filter: brightness(0.75) contrast(1.1); /* Bar minimal heller/deutlicher */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Left & Right Side Layers - Behind tree (z-index: 0) */
.hero__layer--left,
.hero__layer--right {
    z-index: 0;
    transform: translate(0, 0);
}

.hero__layer--left .hero__layer-img,
.hero__layer--right .hero__layer-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    filter: brightness(0.6) contrast(1.1);
    margin: 0;
    padding: 0;
    display: block;
}

/* Tree Layer - Hinterste Layer (z-index: 1 within hero__layers) */
/* Container ist 100vh, Bild wird innerhalb positioniert */
.hero__layer--tree {
    z-index: 1; /* Relativ zu hero__layers */
    transform: translate(0, 0);
    /* Container: 100vh, Bild wird innerhalb positioniert */
}

.hero__layer--tree .hero__layer-img {
    position: absolute;
    bottom: 0; /* Sauber am unteren Rand */
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw; /* Passt genau in den Viewport */
    max-height: 100vh; /* Passt genau in den Viewport */
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center bottom;
    filter: brightness(0.5) contrast(1.1); /* Baum minimal dunkler */
    opacity: 0.9; /* Minimal transparenter */
    /* Isolated - no influence on other elements */
    margin: 0;
    padding: 0;
    display: block;
}


/* Bar Layer - Vorderste Layer vor Headline (z-index: 3 within hero__layers) */
/* Container ist 100vh, Bar-Bild wird am unteren Rand des Containers positioniert */
.hero__layer--bar {
    z-index: 3; /* Über Baum und Rhino */
    left: 50%; /* Container horizontal zentriert */
    transform: translateX(-50%); /* Horizontal zentrieren - wird von JS für Parallax manipuliert */
    /* Container bleibt 100vh, Bar-Bild wird innerhalb am unteren Rand positioniert */
    /* WICHTIG: Kein padding/margin, die die Position verschieben */
}

/* Hero Description Container - Isolated */
.hero__description-container {
    position: absolute;
    top: 70vh; /* Noch weiter nach unten für große Headline (vorher 65vh) */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    z-index: 6; /* Über Hero_Background, unter Headline */
    text-align: center;
    padding: 0 var(--container-padding);
    pointer-events: none; /* Container doesn't block */
    isolation: isolate;
    contain: layout style paint;
    margin: 0;
}

/* Hero Buttons Container - Isolated */
.hero__cta-container {
    position: absolute;
    top: 82vh; /* Noch weiter nach unten für große Headline (vorher 75vh) */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    z-index: 6; /* Über Hero_Background, unter Headline */
    text-align: center;
    padding: 0 var(--container-padding);
    pointer-events: none; /* Container doesn't block, but children can */
    isolation: isolate;
    contain: layout style paint;
    margin: 0;
}

/* Hero Headline - Over everything (z-index: 100) - Completely isolated */
/* Hero Logo - Above headline */
.hero__logo {
    position: absolute;
    top: 22vh;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101 !important; /* Über Headline */
    text-align: center;
    pointer-events: none;
    isolation: isolate;
    contain: layout style paint;
    margin: 0;
    opacity: 0.92 !important; /* 92% - nicht 100% */
    visibility: visible !important;
}

.hero__logo-img {
    height: clamp(110px, 12vw, 160px);
    width: auto;
    display: block;
    filter: none;
}

.hero__title {
    position: absolute;
    top: 55vh; /* Position angepasst */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    z-index: 100 !important; /* Über allem - Headline immer sichtbar */
    text-align: center;
    padding: 0 var(--container-padding);
    pointer-events: none; /* Don't block clicks on layers */
    isolation: isolate;
    contain: layout style;
    margin: 0;
    /* Ensure it's always visible and on top */
    opacity: 1 !important;
    visibility: visible !important;
}

.hero__headline {
    pointer-events: auto; /* Headline text can be selected */
    display: block;
}

/* Hero logo removed */

/* Responsive Hero Layers */
@media (max-width: 1024px) {
    .hero__layer--tree .hero__layer-img {
        max-width: 70vw;
    }

    .hero__layer--bar {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .hero__layer--tree .hero__layer-img {
        max-width: 85vw;
    }

    .hero__layer--bar {
        width: 90%;
    }
}

/* Hero Title removed margin - it's now isolated */

.hero__headline {
    display: block;
    font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    font-weight: 600; /* SemiBold */
    letter-spacing: 0.10em; /* Tracking erhöht (vorher 0.04em) */
    color: #F4F2ED; /* Leicht warmes Off-White */
    text-transform: uppercase;
    line-height: 1.1; /* Etwas mehr Raum für Descender (vorher 1.02) */
    width: 100%;
    word-break: break-word;
    font-feature-settings: "kern" 1, "liga" 1; /* Optical Kerning an */
    font-kerning: normal;
    opacity: 1 !important; /* Always visible */
    transform: translateY(0) !important;
    visibility: visible !important;
    padding: 0.1em 0; /* Padding oben/unten für Descender */
    overflow: visible; /* Sicherstellen, dass nichts abgeschnitten wird */
    /* Use Variable Font with SemiBold weight */
    font-variation-settings: "wght" 600;
}

.hero__description {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    margin: 0; /* No margin, container handles spacing */
    padding: 0;
    line-height: 1.8;
    opacity: 0; /* Start hidden, appears when layers fly out */
    transform: translateY(20px);
    visibility: visible;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    pointer-events: auto; /* Text can be selected */
}

.hero__cta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.hero__cta .btn {
    opacity: 0; /* Start hidden, appears when layers fly out */
    transform: scale(0.98);
    visibility: visible;
    transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
    pointer-events: auto; /* Buttons are clickable */
}


.hero__scroll-indicator {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-secondary);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.3;
}

.hero__scroll-indicator svg {
    animation: scrollArrow 2.5s ease-in-out infinite;
}

@keyframes scrollArrow {
    0%, 100% { 
        transform: translateY(0);
        opacity: 0.3;
    }
    50% { 
        transform: translateY(2px);
        opacity: 0.5;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-xl);
    font-family: var(--font-headline);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn--primary {
    background-color: var(--color-accent-gold);
    color: var(--color-bg-primary);
    border-color: var(--color-accent-gold);
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--primary:hover {
    background-color: var(--color-accent-gold-dark);
    border-color: var(--color-accent-gold-dark);
    transform: none;
}

.btn--secondary {
    background-color: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-text-primary);
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--secondary:hover {
    background-color: rgba(201, 169, 97, 0.15);
    border-color: transparent;
    color: var(--color-text-primary);
    transform: none;
}

.btn--nav {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.btn--nav:hover {
    transform: none;
}

/* Section Styles */
section {
    position: relative;
    padding: var(--section-padding) 0;
}

.section__title {
    font-family: var(--font-headline);
    font-size: var(--fs-3xl);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
}

.section__lead {
    font-size: var(--fs-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    line-height: 1.8;
}

/* Atmosphere Section */
.atmosphere {
    background-color: var(--color-bg-primary);
    padding: var(--section-padding) 0;
    position: relative;
    overflow: hidden;
    min-height: 100vh; /* 16:9 Screen - mindestens Viewport-Höhe */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Überlappt mit Hero - verhindert dunklen Leerraum beim Übergang */
    margin-top: -50vh; /* Weniger Overlap - nur halbe Viewport-Höhe */
    padding-top: 22vh; /* Noch mehr Space - Verlauf ist sicher vor Headline fertig (vorher 18vh) */
    z-index: 101; /* ÜBER Hero (z:100) - scrollt über Hero und verdeckt sie */
    /* Smoother Übergang - oberer Bereich transparent */
    -webkit-mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(0,0,0,0.3) 5vh,
        rgba(0,0,0,0.7) 10vh,
        rgb(0,0,0) 15vh
    );
    mask-image: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(0,0,0,0.3) 5vh,
        rgba(0,0,0,0.7) 10vh,
        rgb(0,0,0) 15vh
    );
}

/* Golden Grid Background - wie im Splash, aber dauerhaft */
.atmosphere::before {
    /* Grid entfernt - cleaner Look */
    display: none;
}

.atmosphere__container {
    max-width: 1400px; /* Breiter: 1200px → 1400px */
    margin: 0 auto;
    padding: 0 40px; /* Weniger Padding an Seiten */
    position: relative;
    z-index: 1; /* Über dem Grid */
    /* Reduziertes Padding für 16:9 Screen */
    padding-top: calc(113px * 0.05); /* Sehr stark reduziert */
    padding-bottom: calc(113px * 0.5); /* Reduziert */
}

.atmosphere__header {
    text-align: center;
    margin-bottom: calc(113px * 0.6); /* Näher zu Cards (vorher 1) */
    padding-left: 0; /* Kein Extra-Padding links mehr */
    padding-right: 0;
}

.atmosphere__title {
    font-family: var(--font-headline);
    font-size: var(--fs-3xl);
    font-weight: 400;
    color: var(--color-accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.085em; /* Reduziert von 0.1em → weniger dekorativ, mehr institutionell */
    margin-bottom: var(--spacing-sm);
}

.atmosphere__subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 0.9vw, 0.95rem); /* Eher klein */
    color: var(--color-accent-gold, #c9a961); /* Gold statt Secondary */
    letter-spacing: 0.08em; /* +0.08em */
    opacity: 0.85; /* Etwas mehr Präsenz: 77% → 85% */
    line-height: 1.6;
}

.atmosphere__gallery {
    display: flex;
    justify-content: center; /* Mittlere Card zentriert */
    align-items: start;
    gap: 80px; /* Mehr Abstand: 60px → 80px */
    flex-wrap: nowrap;
    padding: 0 20px; /* Weniger Padding an Seiten */
    margin: 0 auto;
    max-width: 100%;
}

/* Cards - Format 1440 × 1920 (3:4 Aspect Ratio) - Minimal kleiner */
.atmosphere__card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: var(--color-bg-secondary);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: url('../images/Papagei-cursor.png') 32 32, pointer;
    aspect-ratio: 3 / 4; /* 1440 × 1920 Format beibehalten */
    width: 420px; /* Minimal kleiner (vorher 450px) */
    flex-shrink: 0; /* Cards behalten ihre Größe */
    /* Dezenter Glow - subtiler (vorher 0.15/0.08) */
    box-shadow: 0 0 25px rgba(199, 163, 92, 0.08), 
                0 0 50px rgba(199, 163, 92, 0.04);
}

.atmosphere__card:hover {
    cursor: url('../images/Papagei-cursor.png') 32 32, pointer;
    box-shadow: 0 0 40px rgba(199, 163, 92, 0.25), 
                0 0 80px rgba(199, 163, 92, 0.12),
                0 20px 40px rgba(0, 0, 0, 0.3);
}

.atmosphere__card-image {
    width: 100%;
    height: 100%; /* Volle Höhe - Bild füllt komplett */
    position: absolute;
    top: 0;
    left: 0;
}

.atmosphere__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt komplett, kein Crop */
    object-position: center;
}


.atmosphere__card--highlighted {
    border: 1px solid rgba(201, 169, 97, 0.3);
}

.atmosphere__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.atmosphere__card:hover .atmosphere__card-image img {
    transform: scale(1.05);
}

/* Overlay entfernt - keine Abdunkelung mehr */
.atmosphere__card-overlay {
    display: none; /* Abdunkelung entfernt */
}

.atmosphere__card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-xl);
    z-index: 2;
}

.atmosphere__card-title {
    font-family: var(--font-headline);
    font-size: var(--fs-xl);
    font-weight: 400;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-sm);
}

.atmosphere__card-text {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .atmosphere__gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .atmosphere__card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .atmosphere__gallery {
        grid-template-columns: 1fr;
    }

    .atmosphere__card {
        width: 100%;
        aspect-ratio: 3 / 4;
    }

    .atmosphere__card:nth-child(3) {
        grid-column: 1;
        max-width: 100%;
    }
}

/* Day to Night Section */
.day-night {
    background-color: var(--color-bg-primary);
    overflow: hidden;
    position: relative;
}

.day-night::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(201, 169, 97, 0.05) 50%,
        rgba(5, 8, 5, 0.3) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.day-night__header {
    max-width: var(--container-max-width);
    margin: 0 auto var(--spacing-3xl);
    padding: 0 var(--container-padding);
    text-align: center;
}

.day-night__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.day-night__scroll::-webkit-scrollbar {
    display: none;
}

.day-night__track {
    display: flex;
    gap: var(--spacing-lg);
    padding: 0 var(--container-padding);
    min-width: min-content;
    position: relative;
    z-index: 2;
}

.day-night__item {
    flex: 0 0 calc(100vw - var(--container-padding) * 2);
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.day-night__image {
    aspect-ratio: 16 / 9;
    background-color: var(--color-bg-secondary);
    border-radius: 2px;
    overflow: hidden;
}

.day-night__content {
    padding: 0 var(--spacing-md);
}

.day-night__title {
    font-size: var(--fs-2xl);
    margin-bottom: var(--spacing-sm);
}

.day-night__description {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* ========================================
   Drinks & Kitchen - Split Reveal, Editorial
   Asymmetrisch, BONT/Awwwards Style
   ======================================== */

.drinks {
    background-color: var(--color-bg-primary);
    position: relative;
    overflow: hidden;
    z-index: 101;
    margin-top: -2px;
    padding: clamp(4rem, 8vw, 6rem) 0;
}

.drinks__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--padding-inline, clamp(1.5rem, 5vw, 4rem));
    position: relative;
}

/* ========================================
   Header - Große gesplittete Headline
   ======================================== */

.drinks__header {
    margin-bottom: clamp(4rem, 8vw, 6rem);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury),
        transform var(--motion-slow, 600ms) var(--ease-luxury);
}

.drinks__header.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.drinks__headline {
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.drinks__headline-line {
    display: block;
    font-family: var(--font-headline, 'Cormorant Garamond', serif);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: 0.04em;
    color: var(--color-text-primary, #ffffff);
}

.drinks__headline-line--accent {
    color: var(--color-accent-gold, #c9a961);
    margin-left: clamp(1rem, 3vw, 2rem);
}

.drinks__subline {
    font-family: var(--font-headline, 'Cormorant Garamond', serif);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 300;
    font-style: italic;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    opacity: 0.7;
    margin: 0;
    margin-left: clamp(0.5rem, 1vw, 1rem);
}

/* ========================================
   Split Layouts - Asymmetrisches Bild-Text
   ======================================== */

.drinks__split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    margin-bottom: clamp(4rem, 8vw, 6rem);
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury),
        transform var(--motion-slow, 600ms) var(--ease-luxury);
}

.drinks__split.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.drinks__split:last-child {
    margin-bottom: 0;
}

/* Bild links, Text rechts */
.drinks__split--left {
    grid-template-columns: 1.2fr 0.8fr;
}

/* Text links, Bild rechts */
.drinks__split--right {
    grid-template-columns: 0.8fr 1.2fr;
}

/* ========================================
   Split Image - Overflow Effect
   ======================================== */

.drinks__split-image {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

/* Bild links: bricht nach links aus */
.drinks__split--left .drinks__split-image {
    margin-left: calc(-1 * var(--padding-inline, clamp(1.5rem, 5vw, 4rem)));
}

/* Bild rechts: bricht nach rechts aus */
.drinks__split--right .drinks__split-image {
    margin-right: calc(-1 * var(--padding-inline, clamp(1.5rem, 5vw, 4rem)));
}

.drinks__split-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: transform var(--motion-slow, 600ms) var(--ease-luxury);
}

/* Food Gallery – 3 gestapelte Bilder mit Scroll-Wechsel */
.drinks__food-slide {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: opacity 0.5s ease;
}

.drinks__food-slide:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.drinks__food-slide--active {
    opacity: 1 !important;
}

.drinks__food-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 2;
}

.drinks__food-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -18px;
}

.drinks__food-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: background 0.3s ease;
}

.drinks__food-dot--active::before {
    background: var(--color-accent-gold);
}

/* Kitchen Gallery Arrows */
.drinks__food-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(10, 15, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background var(--motion-base) var(--ease-luxury);
}

.drinks__food-arrow--prev { left: 12px; }
.drinks__food-arrow--next { right: 12px; }

.drinks__food-arrow:hover {
    background: rgba(201, 169, 97, 0.65);
}

.drinks__split-image:hover img {
    transform: scale(1.03);
}

/* ========================================
   Drinks Color Reveal Animation
   SW-Bild hinten, Farb-Bild vorne wird transparent
   ======================================== */

.drinks__split-image--reveal {
    position: relative;
}

.drinks__split-image--reveal .drinks__img-back,
.drinks__split-image--reveal .drinks__img-front {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

.drinks__split-image--reveal .drinks__img-back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.drinks__split-image--reveal .drinks__img-front {
    position: relative;
    z-index: 2;
    transition: opacity 0.1s linear;
}

/* ========================================
   Split Content - Text Side
   ======================================== */

.drinks__split-content {
    padding: clamp(1rem, 3vw, 2rem) 0;
}

.drinks__number {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: clamp(0.7rem, 0.8vw, 0.85rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--color-accent-gold, #c9a961);
    opacity: 0.8;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    position: relative;
    padding-left: 2rem;
}

.drinks__number::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1px;
    background: var(--color-accent-gold, #c9a961);
    opacity: 0.5;
}

.drinks__title {
    font-family: var(--font-headline, 'Cormorant Garamond', serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text-primary, #ffffff);
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.drinks__description {
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.8;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.drinks__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.5));
    text-decoration: none;
    transition:
        color var(--motion-base, 400ms) var(--ease-luxury),
        transform var(--motion-base, 400ms) var(--ease-luxury);
}

.drinks__link svg {
    transition: transform var(--motion-base, 400ms) var(--ease-luxury);
}

.drinks__link:hover {
    color: var(--color-accent-gold, #c9a961);
}

.drinks__link:hover svg {
    transform: translate(3px, -3px);
}

/* ========================================
   Drinks - Responsive
   ======================================== */

/* ========================================
   Menu Modal - Popup für Speisekarte
   ======================================== */

.menu-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity var(--motion-base, 400ms) var(--ease-luxury),
        visibility var(--motion-base, 400ms);
}

.menu-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.menu-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 13, 0.95);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.menu-modal__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.9);
    transition: transform var(--motion-base, 400ms) var(--ease-luxury);
}

.menu-modal.is-open .menu-modal__content {
    transform: scale(1);
}

.menu-modal__close {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-gold, #c9a961);
    cursor: pointer;
    transition: 
        background var(--motion-base, 400ms) var(--ease-luxury),
        border-color var(--motion-base, 400ms) var(--ease-luxury),
        transform var(--motion-base, 400ms) var(--ease-luxury);
    z-index: 10;
}

.menu-modal__close:hover {
    background: rgba(201, 169, 97, 0.2);
    border-color: var(--color-accent-gold, #c9a961);
    transform: rotate(90deg);
}

.menu-modal__image-wrapper {
    position: relative;
    max-width: 800px;
    max-height: 90vh;
    overflow: auto;
    border-radius: 4px;
    box-shadow: 
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 1px rgba(201, 169, 97, 0.4);
}

.menu-modal__pages {
    display: none;
}

.menu-modal__image {
    width: 100%;
    height: auto;
    display: block;
}

/* Scrollbar für Modal */
.menu-modal__image-wrapper::-webkit-scrollbar {
    width: 8px;
}

.menu-modal__image-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.menu-modal__image-wrapper::-webkit-scrollbar-thumb {
    background: rgba(201, 169, 97, 0.4);
    border-radius: 4px;
}

.menu-modal__image-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(201, 169, 97, 0.6);
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .menu-modal__content {
        max-width: 95vw;
        max-height: 85vh;
    }
    
    .menu-modal__close {
        top: 10px;
        right: 10px;
        width: 44px;
        height: 44px;
    }
    
    .menu-modal__image-wrapper {
        max-width: 100%;
    }
}

/* Body Lock beim Modal öffnen */
body.menu-modal-open {
    overflow: hidden;
}

/* ========================================
   Drinks - Responsive
   ======================================== */

@media (max-width: 900px) {
    .drinks__split,
    .drinks__split--left,
    .drinks__split--right {
        grid-template-columns: 1fr;
        gap: clamp(1.5rem, 4vw, 2rem);
    }

    /* Mobile: Bild immer zuerst */
    .drinks__split--right .drinks__split-content {
        order: 2;
    }

    .drinks__split--right .drinks__split-image {
        order: 1;
    }

    /* Kein Overflow auf Mobile */
    .drinks__split--left .drinks__split-image,
    .drinks__split--right .drinks__split-image {
        margin-left: 0;
        margin-right: 0;
    }

    .drinks__split-image img,
    .drinks__split-image--reveal .drinks__img-back,
    .drinks__split-image--reveal .drinks__img-front {
        aspect-ratio: 4 / 5;
    }

    .drinks__headline-line {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .drinks__headline-line--accent {
        margin-left: 0;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .drinks__header,
    .drinks__split {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .drinks__split-image:hover img {
        transform: none;
    }
}

/* ========================================
   Events Section - Minimalistisch, Satori/BONT Style
   Clean, Editorial, Focused
   ======================================== */

.events {
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--color-bg-primary);
    position: relative;
    z-index: 101;
    margin-top: -2px;
}

.events__container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--padding-inline, clamp(1.5rem, 5vw, 4rem));
}

/* ========================================
   Header - Headline + Signature
   ======================================== */

.events__header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury),
        transform var(--motion-slow, 600ms) var(--ease-luxury);
}

.events__header.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.events__headline {
    font-family: var(--font-headline, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: 0.06em;
    color: var(--color-accent-gold, #c9a961);
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.events__signature {
    font-family: var(--font-headline, 'Cormorant Garamond', serif);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    opacity: 0.7;
    margin: 0;
}

/* ========================================
   Hero Image - DJ (Large, Full Width)
   ======================================== */

.events__hero {
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury) 0.1s,
        transform var(--motion-slow, 600ms) var(--ease-luxury) 0.1s;
}

.events__hero.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.events__hero img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    transform-origin: center top;
    transition: transform 0.1s linear;
}

/* Events Hero Shrink - wird via JS gesteuert */
.events__hero[data-scroll-shrink] {
    will-change: transform;
}

/* ========================================
   2er Grid - Supporting Images
   ======================================== */

.events__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(3rem, 5vw, 4rem);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury) 0.2s,
        transform var(--motion-slow, 600ms) var(--ease-luxury) 0.2s;
}

.events__grid.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.events__grid-item {
    overflow: hidden;
    border-radius: 2px;
    transition: transform 0.5s var(--ease-luxury, cubic-bezier(0.19, 1, 0.22, 1));
}

.events__grid-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform var(--motion-slow, 600ms) var(--ease-luxury);
}

.events__grid-item:hover img {
    transform: scale(1.03);
}

/* ========================================
   Stagger Animation - Award Feature
   Items fahren zeitversetzt ein
   ======================================== */

.stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.6s var(--ease-luxury, cubic-bezier(0.19, 1, 0.22, 1)),
        transform 0.6s var(--ease-luxury, cubic-bezier(0.19, 1, 0.22, 1));
}

.stagger-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   CTA Block - Private Events
   ======================================== */

.events__cta-block {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury) 0.3s,
        transform var(--motion-slow, 600ms) var(--ease-luxury) 0.3s;
}

.events__cta-block.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.events__hairline {
    width: 60px;
    height: 1px;
    background: var(--color-accent-gold, #c9a961);
    opacity: 0.4;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.events__statement {
    font-family: var(--font-headline, 'Cormorant Garamond', serif);
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--color-text-primary, #ffffff);
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.events__facts {
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    line-height: 1.6;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.4));
    letter-spacing: 0.05em;
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.events__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.9rem, 1vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--color-accent-gold, #c9a961);
    text-decoration: none;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
    min-height: 44px;
    border: 1px solid var(--color-accent-gold, #c9a961);
    border-radius: 2px;
    transition:
        background var(--motion-base, 400ms) var(--ease-luxury),
        color var(--motion-base, 400ms) var(--ease-luxury);
}

.events__cta svg {
    transition: transform var(--motion-base, 400ms) var(--ease-luxury);
}

.events__cta:hover {
    background: var(--color-accent-gold, #c9a961);
    color: var(--color-bg-primary, #0a0f0a);
}

.events__cta:hover svg {
    transform: translateX(4px);
}

/* ========================================
   Events - Responsive
   ======================================== */

@media (max-width: 768px) {
    .events__hero img {
        aspect-ratio: 3 / 4;
    }

    .events__grid {
        grid-template-columns: 1fr;
        gap: clamp(1rem, 3vw, 1.5rem);
    }

    .events__grid-item img {
        aspect-ratio: 16 / 10;
    }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .events__header,
    .events__hero,
    .events__grid,
    .events__cta-block {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Contact - Mobile: Dichte beibehalten */
@media (max-width: 768px) {
    .contact__grid {
        grid-template-columns: 1fr; /* Stack auf Mobile */
        gap: var(--spacing-2xl);
    }
    
    .contact__map {
        aspect-ratio: 16 / 9; /* Höher auf Mobile */
    }
}

/* Gallery Section */
.gallery {
    background-color: var(--color-bg-secondary);
    position: relative;
    z-index: 101; /* Über Hero (z:100) - scrollt über Hero */
    margin-top: -2px; /* Overlap verhindert Lücke zur vorherigen Section */
}

.gallery__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.gallery__title {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.gallery__item {
    aspect-ratio: 4 / 5;
    background-color: var(--color-bg-primary);
    border-radius: 2px;
    overflow: hidden;
}

/* ========================================
   Contact Section - Editorial Style
   Schreib uns - Kontaktmöglichkeiten
   ======================================== */

.contact {
    background-color: var(--color-bg-primary);
    position: relative;
    z-index: 101;
    margin-top: -2px;
    padding: clamp(4rem, 8vw, 6rem) 0;
    overflow: hidden;
}

/* Gold Grid Background */
.contact__grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(201, 169, 97, 0.015) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(201, 169, 97, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.contact__container {
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
    padding: 0 var(--container-padding, clamp(1.5rem, 5vw, 4rem));
    position: relative;
    z-index: 1;
}

/* ========================================
   Section Header
   ======================================== */

.contact__header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury),
        transform var(--motion-slow, 600ms) var(--ease-luxury);
}

.contact__header.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.contact__meta {
    display: block;
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.65rem, 0.7vw, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted, rgba(255, 255, 255, 0.4));
    opacity: 0.6;
    margin-bottom: var(--space-lg, 2rem);
}

.contact__meta--gold {
    color: var(--color-accent-gold, #c9a961);
    opacity: 1;
}

.contact__headline {
    font-family: var(--font-headline, 'Cormorant Garamond', serif);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text-primary, #ffffff);
    margin: 0 0 var(--space-md, 1.5rem);
}

.contact__headline-dot {
    color: var(--color-accent-gold, #c9a961);
    opacity: 0.9;
}

.contact__subline {
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    line-height: 1.6;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    max-width: 500px;
    margin: 0 auto;
}

/* ========================================
   Contact Options - Card Grid
   ======================================== */

.contact__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg, 2rem);
    max-width: 900px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury) 0.1s,
        transform var(--motion-slow, 600ms) var(--ease-luxury) 0.1s;
}

.contact__options.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.contact__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl, 3rem) var(--space-lg, 2rem);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    text-decoration: none;
    transition:
        background var(--motion-base, 400ms) var(--ease-luxury),
        border-color var(--motion-base, 400ms) var(--ease-luxury),
        transform var(--motion-base, 400ms) var(--ease-luxury);
}

.contact__option:hover {
    background: rgba(201, 169, 97, 0.05);
    border-color: rgba(201, 169, 97, 0.2);
    transform: translateY(-4px);
}

.contact__option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: var(--space-md, 1.5rem);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 50%;
    color: var(--color-accent-gold, #c9a961);
    transition:
        background var(--motion-base, 400ms) var(--ease-luxury),
        border-color var(--motion-base, 400ms) var(--ease-luxury);
}

.contact__option:hover .contact__option-icon {
    background: rgba(201, 169, 97, 0.1);
    border-color: var(--color-accent-gold, #c9a961);
}

.contact__option-label {
    display: block;
    font-family: var(--font-headline, 'Cormorant Garamond', serif);
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    font-weight: 400;
    color: var(--color-text-primary, #ffffff);
    margin-bottom: var(--space-xs, 0.5rem);
}

.contact__option-hint {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: clamp(0.8rem, 1vw, 0.85rem);
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.5));
}

/* ========================================
   Responsive - Tablet
   ======================================== */

@media (max-width: 900px) {
    .contact__options {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md, 1.5rem);
    }

    .contact__option {
        padding: var(--space-lg, 2rem) var(--space-md, 1.5rem);
    }
}

/* ========================================
   Responsive - Mobile
   ======================================== */

@media (max-width: 600px) {
    .contact {
        padding: var(--space-section-sm, clamp(4rem, 8vw, 6rem)) 0;
    }

    .contact__options {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .contact__option {
        flex-direction: row;
        text-align: left;
        padding: var(--space-md, 1.5rem) var(--space-lg, 2rem);
        gap: var(--space-md, 1.5rem);
    }

    .contact__option-icon {
        margin-bottom: 0;
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .contact__option-icon svg {
        width: 22px;
        height: 22px;
    }

    .contact__option-content {
        display: flex;
        flex-direction: column;
    }
}

/* ========================================
   Reduced Motion Support
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .contact__header,
    .contact__options {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .contact__option:hover {
        transform: none;
    }
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: var(--fs-lg);
}

/* ========================================
   Footer - Editorial Closing Statement
   Premium Magazine-Style Footer
   ======================================== */

.footer {
    background-color: var(--color-bg-primary);
    padding: clamp(4rem, 8vw, 6rem) 0 var(--space-xl, 3rem);
    position: relative;
    z-index: 101;
    margin-top: -2px;
    overflow: hidden;
}

/* Gold Grid Background - wie Atmosphere */
.footer__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(201, 169, 97, 0.015) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(201, 169, 97, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

.footer__container {
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
    padding: 0 var(--container-padding, clamp(1.5rem, 5vw, 4rem));
    position: relative;
    z-index: 1;
}

/* ========================================
   Signature Closing Section
   ======================================== */

.footer__closing {
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury, cubic-bezier(0.19, 1, 0.22, 1)),
        transform var(--motion-slow, 600ms) var(--ease-luxury, cubic-bezier(0.19, 1, 0.22, 1));
}

.footer__closing.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.footer__dot {
    display: block;
    font-size: clamp(1.5rem, 2vw, 2rem);
    color: var(--color-accent-gold, #c9a961);
    opacity: 0.6;
    margin-bottom: var(--space-lg, 2rem);
}

.footer__signature {
    font-family: var(--font-headline, 'Cormorant Garamond', serif);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--color-text-primary, #ffffff);
    opacity: 0.85;
    margin-bottom: var(--space-xl, 3rem);
}

.footer__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg, 2rem);
}

.footer__brand-line {
    width: clamp(40px, 8vw, 80px);
    height: 1px;
    background: var(--color-accent-gold, #c9a961);
    opacity: 0.3;
}

.footer__logo {
    height: clamp(40px, 6vw, 60px);
    width: auto;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity var(--motion-base, 400ms) var(--ease-luxury);
}

.footer__logo:hover {
    opacity: 1;
}

/* ========================================
   Info Columns
   ======================================== */

.footer__info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl, 3rem);
    max-width: 900px;
    margin: 0 auto var(--space-xl, 3rem);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury) 0.1s,
        transform var(--motion-slow, 600ms) var(--ease-luxury) 0.1s;
}

.footer__info.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.footer__info-col {
    text-align: center;
}

.footer__info-label {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: clamp(0.65rem, 0.75vw, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent-gold, #c9a961);
    opacity: 0.8;
    margin-bottom: var(--space-md, 1.5rem);
}

.footer__info-text {
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.875rem, 1vw, 1rem);
    line-height: 1.7;
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    margin: 0;
}

.footer__info-text--muted {
    opacity: 0.5;
    font-style: italic;
}

.footer__info-link {
    text-decoration: none;
    display: block;
    transition: color var(--motion-base) var(--ease-luxury);
}

.footer__info-link:hover {
    color: var(--color-accent-gold);
}

/* Social Links in Footer */
.footer__social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm, 0.75rem);
}

.footer__social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 0.5rem);
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.875rem, 1vw, 1rem);
    color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
    text-decoration: none;
    transition:
        color var(--motion-base, 400ms) var(--ease-luxury),
        transform var(--motion-base, 400ms) var(--ease-luxury);
}

.footer__social-link svg {
    opacity: 0.7;
    transition: opacity var(--motion-base, 400ms) var(--ease-luxury);
}

.footer__social-link:hover {
    color: var(--color-accent-gold, #c9a961);
    transform: translateX(4px);
}

.footer__social-link:hover svg {
    opacity: 1;
}

/* ========================================
   Gold Hairline Divider
   ======================================== */

.footer__hairline {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--color-accent-gold, #c9a961) 20%,
        var(--color-accent-gold, #c9a961) 80%,
        transparent 100%
    );
    opacity: 0;
    margin: var(--space-xl, 3rem) 0;
    transform: scaleX(0);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury) 0.2s,
        transform var(--motion-slower, 900ms) var(--ease-luxury) 0.2s;
}

.footer__hairline.is-visible {
    opacity: 0.3;
    transform: scaleX(1);
}

/* ========================================
   Bottom Bar
   ======================================== */

.footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-lg, 2rem);
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--motion-slow, 600ms) var(--ease-luxury) 0.3s,
        transform var(--motion-slow, 600ms) var(--ease-luxury) 0.3s;
}

.footer__bottom.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.footer__legal {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.75rem);
    justify-self: start;
}

.footer__link {
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.75rem, 0.9vw, 0.875rem);
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.5));
    text-decoration: none;
    transition: color var(--motion-base, 400ms) var(--ease-luxury);
}

.footer__link:hover {
    color: var(--color-accent-gold, #c9a961);
}

.footer__link-divider {
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.5));
    opacity: 0.5;
}

.footer__copyright {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: clamp(0.7rem, 0.8vw, 0.8rem);
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.5));
    text-align: center;
    justify-self: center;
}

.footer__credits {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.75rem);
    justify-self: end;
}

.footer__by {
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.7rem, 0.8vw, 0.8rem);
    color: var(--color-text-tertiary, rgba(255, 255, 255, 0.5));
    font-style: italic;
}

.footer__purple-link {
    display: flex;
    align-items: center;
    transition: transform var(--motion-base, 400ms) var(--ease-luxury);
}

.footer__purple-link:hover {
    transform: translateY(-2px);
}

.footer__purple-logo {
    height: clamp(16px, 2vw, 22px);
    width: auto;
    opacity: 0.6;
    transition: opacity var(--motion-base, 400ms) var(--ease-luxury);
}

.footer__purple-link:hover .footer__purple-logo {
    opacity: 1;
}

/* ========================================
   Responsive - Tablet
   ======================================== */

@media (max-width: 1024px) {
    .footer__info {
        gap: var(--space-lg, 2rem);
    }
}

/* ========================================
   Responsive - Mobile
   ======================================== */

@media (max-width: 768px) {
    .footer {
        padding: var(--space-section-sm, clamp(4rem, 8vw, 6rem)) 0 var(--space-lg, 2rem);
    }

    .footer__info {
        grid-template-columns: 1fr;
        gap: var(--space-xl, 3rem);
        text-align: center;
    }

    .footer__info-col {
        padding-bottom: var(--space-lg, 2rem);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .footer__info-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .footer__social {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-lg, 2rem);
    }

    .footer__social-link span {
        display: none; /* Nur Icons auf Mobile */
    }

    .footer__bottom {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-md, 1.5rem);
    }

    .footer__legal,
    .footer__copyright,
    .footer__credits {
        justify-self: center;
    }

    .footer__brand-line {
        width: 30px;
    }
}

/* ========================================
   Reduced Motion Support
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .footer__closing,
    .footer__info,
    .footer__hairline,
    .footer__bottom {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .atmosphere__content,
    .events__content {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }
    
    .day-night__item {
        flex: 0 0 calc(100vw - var(--container-padding) * 2);
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .nav__links {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background-color: rgba(10, 15, 10, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: var(--spacing-xl);
        gap: var(--spacing-lg);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
    }
    
    .nav__links.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav__menu-toggle {
        display: flex;
    }
    
    .hero__headline {
        font-size: clamp(2rem, 1.8rem + 1vw, 3rem);
    }
    
    .nav__logo-img {
        height: 50px;
    }
    
    .hero__description-container {
        top: 68vh; /* Weiter nach unten für große Headline (vorher 63vh) */
    }
    
    .hero__cta-container {
        top: 80vh; /* Weiter nach unten für große Headline (vorher 73vh) */
    }
    
    .hero__cta {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
    }
    
    .gallery__grid {
        grid-template-columns: 1fr;
    }
    
    .contact__info {
        grid-template-columns: 1fr;
    }
    
    .day-night__item {
        flex: 0 0 calc(100vw - var(--container-padding) * 2);
    }
}

@media (max-width: 480px) {
    :root {
        --section-padding: clamp(3rem, 6vw, 6rem);
    }

    .hero__headline {
        font-size: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
    }

    .nav__logo-img {
        height: 45px;
    }

    .hero__description-container {
        top: 66vh; /* Weiter nach unten für große Headline (vorher 61vh) */
    }

    .hero__cta-container {
        top: 78vh; /* Weiter nach unten für große Headline (vorher 71vh) */
    }
}

/* ========================================
   Privacy Banner - Transparenz-Hinweis
   Glasmorphism, Gold-Akzente, Eden01 Aesthetic
   ======================================== */

.privacy-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
                opacity 0.6s ease;
    pointer-events: none;
}

.privacy-banner--visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.privacy-banner--hiding {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.privacy-banner__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    max-width: var(--container-max-width, 1400px);
    margin: 0 auto;
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1.5rem, 3vw, 2.5rem);
    padding-left: clamp(6rem, 10vw, 9rem);
    background: rgba(10, 15, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(201, 169, 97, 0.12);
    position: relative;
    overflow: visible;
}

.privacy-banner__img {
    position: absolute;
    bottom: 0;
    left: clamp(0.75rem, 1.5vw, 1.5rem);
    width: auto;
    height: 140px;
    object-fit: contain;
    opacity: 0.9;
    filter: brightness(0.7);
}

.privacy-banner__text {
    flex: 1;
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.7rem, 0.8vw, 0.8rem);
    line-height: 1.6;
    color: var(--color-text-secondary, rgba(244, 242, 237, 0.7));
    letter-spacing: 0.02em;
    margin: 0;
}

.privacy-banner__link {
    color: var(--color-accent-gold, #c9a961);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--motion-base, 400ms) var(--ease-luxury, ease);
}

.privacy-banner__link:hover {
    color: var(--color-accent-gold-bright, #d4b96e);
}

.privacy-banner__btn {
    flex-shrink: 0;
    background: var(--color-accent-gold, #c9a961);
    color: var(--color-bg-primary, #0a0f0a);
    border: 1px solid var(--color-accent-gold, #c9a961);
    padding: 0.5rem 1.4rem;
    font-family: var(--font-body, 'Literata', serif);
    font-size: clamp(0.7rem, 0.75vw, 0.8rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 2px;
    cursor: pointer;
    transition: all var(--motion-base, 400ms) var(--ease-luxury, ease);
    white-space: nowrap;
}

.privacy-banner__btn:hover {
    background: var(--color-accent-gold-bright, #d4b96e);
    border-color: var(--color-accent-gold-bright, #d4b96e);
    box-shadow: 0 0 20px rgba(201, 169, 97, 0.3),
                0 2px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.privacy-banner__btn:active {
    transform: translateY(0) scale(0.98);
}

/* Mobile: zentriertes Popup */
@media (max-width: 768px) {
    .privacy-banner {
        bottom: auto;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.6);
        transform: none;
        opacity: 0;
        transition: opacity 0.6s ease;
    }

    .privacy-banner--visible {
        transform: none;
        opacity: 1;
    }

    .privacy-banner--hiding {
        transform: none;
        opacity: 0;
    }

    .privacy-banner__inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md, 1rem);
        padding: 2rem 1.5rem 1.5rem;
        padding-left: 1.5rem;
        margin: 0 1.25rem;
        border-radius: 8px;
        border-top: none;
        border: 1px solid rgba(201, 169, 97, 0.15);
        max-width: 100%;
        overflow: visible;
        position: relative;
    }

    .privacy-banner__img {
        position: absolute;
        bottom: auto;
        top: 0;
        left: 50%;
        transform: translate(-50%, -60%);
        width: auto;
        height: 80px;
        opacity: 0.9;
        filter: brightness(0.7);
    }

    .privacy-banner__btn {
        width: 100%;
        padding: 0.65rem 1.4rem;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .privacy-banner {
        transition: opacity 0.3s ease;
        transform: none;
    }

    .privacy-banner--visible {
        transform: none;
    }

    .privacy-banner--hiding {
        transform: none;
        opacity: 0;
    }
}