:root {
    --bg: #080808;
    --bg-alt: #050505;
    --primary: #d4a373;
    --primary-glow: rgba(212, 163, 115, 0.4);
    --text: #ffffff;
    --text-dim: #a0a0a0;
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Montserrat', sans-serif;
}

/* Base Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); overflow-x: hidden; line-height: 1.5; }

/* Transitions */
.reveal { opacity: 0; transform: translateY(30px); filter: blur(5px); transition: 1s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Layout Helpers */
.container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.section-padding { padding: 8rem 0; }
.text-center { text-align: center; }
.bg-darker { background: var(--bg-alt); }

/* HEADER NEU (GRID SYSTEM FÜR PERFEKTE MITTE) */
#main-header { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 1rem 0; transition: 0.4s; }
#main-header.scrolled { background: rgba(8,8,8,0.95); backdrop-filter: blur(15px); padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

.header-container { 
    display: grid; 
    grid-template-columns: 1fr auto 1fr; /* Links (Flex), Mitte (Auto), Rechts (Flex) */
    align-items: center; 
    max-width: 100%; 
    padding: 0 3rem; 
}

/* Positionierung der Elemente im Grid */
.header-left { justify-self: start; display: flex; align-items: center; }
.header-center { justify-self: center; display: flex; align-items: center; }
.header-right { justify-self: end; display: flex; align-items: center; }

.logo-img { height: 70px; transition: 0.4s; object-fit: contain; }
#main-header.scrolled .logo-img { height: 55px; }

.desktop-nav { display: flex; gap: 2rem; }
.nav-link { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 2px; opacity: 0.7; transition: 0.3s; white-space: nowrap; }
.nav-link:hover { opacity: 1; color: var(--primary); }

/* Buttons */
.btn { display: inline-block; padding: 0.8rem 1.8rem; border: 1px solid transparent; text-decoration: none; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 2px; transition: 0.4s; cursor: pointer; text-align: center; white-space: nowrap; }
.btn-primary { background: var(--primary); color: #000; font-weight: 600; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 20px var(--primary-glow); }
.btn-outline { border: 1px solid var(--primary); color: var(--primary); }
.btn-large { padding: 1.2rem 3rem; font-size: 0.85rem; }

/* Mobile Burger */
.burger-menu { 
    display: none; 
    background: none; 
    border: none; 
    width: 30px; 
    height: 20px; 
    position: relative; 
    cursor: pointer; 
}
.burger-menu span { display: block; width: 100%; height: 2px; background: var(--primary); margin-bottom: 6px; transition: 0.3s; }
.burger-menu span:last-child { margin-bottom: 0; }

/* Mobile Menu Overlay */
.mobile-menu-overlay { 
    position: fixed; 
    inset: 0; 
    background: var(--bg); 
    z-index: 2000; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    transform: translateX(100%); 
    transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1); 
}
.mobile-menu-overlay.active { transform: translateX(0); }
.close-menu { position: absolute; top: 2rem; right: 2rem; font-size: 3rem; color: var(--primary); background: none; border: none; cursor: pointer; }
.mobile-nav { display: flex; flex-direction: column; gap: 2.5rem; text-align: center; }
.mobile-nav a { font-family: var(--font-serif); font-size: 2rem; color: #fff; text-decoration: none; text-transform: uppercase; }

/* Hero Section */
#hero { height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center; }
.hero-image-container { position: absolute; inset: 0; z-index: -1; }
.hero-main-img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4); }
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle, transparent 0%, var(--bg) 100%); }
.hero-title { font-family: var(--font-serif); font-size: clamp(3.5rem, 12vw, 10rem); line-height: 1; margin-bottom: 1rem; }
.hero-subtitle { color: var(--primary); text-transform: uppercase; letter-spacing: 8px; font-size: 0.9rem; margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; }

/* Sections */
.section-title { font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: 1.5rem; color: var(--primary); text-transform: uppercase; text-align: center; }
.section-desc { max-width: 600px; margin: 0 auto 3rem; color: var(--text-dim); padding: 0 1rem; }

/* Values Grid */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.value-card { height: 450px; position: relative; overflow: hidden; padding: 1.5rem; display: flex; align-items: flex-end; border: 1px solid rgba(255,255,255,0.05); }
.card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1; transition: 0.8s; filter: brightness(0.3); }
.value-card h3 { color: var(--primary); font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 0.5rem; }
.value-card p { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; }
.value-card:hover .card-bg { transform: scale(1.1); filter: brightness(0.5); }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.premium-text { font-size: 1.1rem; color: var(--text-dim); line-height: 1.8; }
.about-logo-reveal { width: 80%; max-width: 300px; margin: 0 auto; filter: drop-shadow(0 0 20px var(--primary-glow)); }

/* TESTIMONIALS FIX */
.marquee { 
    background: var(--bg-alt); 
    padding: 4rem 0; 
    overflow: hidden; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    width: 100vw; /* Volle Breite erzwingen */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.marquee-track { 
    display: flex; /* Wichtig: Flexbox */
    flex-wrap: nowrap; /* Wichtig: Kein Umbruch! */
    gap: 2rem; 
    animation: scroll 40s linear infinite; 
    width: max-content; /* Track nimmt so viel Platz wie nötig */
}
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.testimonial-card { 
    background: rgba(255,255,255,0.05); 
    padding: 2rem; 
    border: 1px solid rgba(255,255,255,0.1); 
    min-width: 300px; 
    max-width: 350px;
    flex-shrink: 0; /* Verhindert Schrumpfen */
    white-space: normal;
}
.testimonial-card p { font-style: italic; font-size: 1rem; line-height: 1.5; }
.testimonial-card span { color: var(--primary); font-weight: 600; display: block; margin-bottom: 1rem; font-size: 0.8rem; }

/* Gallery */
.gallery-container { position: relative; height: 60vh; width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
#gallery-img { width: 100%; height: 100%; background-size: cover; background-position: center; transition: 0.6s ease-in-out; }
.gal-btn { position: absolute; top: 50%; transform: translateY(-50%); background: var(--primary); border: none; width: 50px; height: 50px; cursor: pointer; font-size: 1.2rem; z-index: 10; display: flex; align-items: center; justify-content: center; }
.gal-btn.prev { left: 0; } .gal-btn.next { right: 0; }

/* Location */
.location-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; }
.map-box { height: 400px; filter: grayscale(1) invert(1); border: 1px solid rgba(255,255,255,0.1); }
.detail-item { margin-bottom: 2rem; }
.label { color: var(--primary); font-size: 0.65rem; letter-spacing: 3px; margin-bottom: 0.5rem; }
.val { font-size: 1.3rem; font-family: var(--font-serif); }

/* Footer */
footer { padding: 5rem 0 2rem; background: var(--bg-alt); border-top: 1px solid rgba(255,255,255,0.05); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.footer-logo { height: 120px; margin-bottom: 1.5rem; width: auto; object-fit: contain; }
.f-label { color: var(--primary); font-family: var(--font-serif); margin-bottom: 1.5rem; font-size: 1.1rem; }
.f-col a { display: block; color: var(--text-dim); text-decoration: none; margin-bottom: 0.8rem; font-size: 0.85rem; transition: 0.3s; }
.f-col a:hover { color: var(--primary); }
.f-bottom { text-align: center; padding-top: 3rem; font-size: 0.75rem; color: var(--text-dim); border-top: 1px solid rgba(255,255,255,0.03); margin-top: 3rem; }

/* COOKIE OVERLAY NEW */
.cookie-overlay-new { 
    position: fixed; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); 
    z-index: 3000; display: none; align-items: center; justify-content: center; padding: 2rem; 
}
.cookie-overlay-new.active { display: flex; }
.cookie-card { background: #111; border: 1px solid var(--primary); padding: 2rem; max-width: 500px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.8); }
.cookie-card h3 { font-family: var(--font-serif); color: var(--primary); font-size: 1.8rem; margin-bottom: 1rem; }
.cookie-card p { color: var(--text-dim); margin-bottom: 1.5rem; font-size: 0.9rem; }
.cookie-actions { display: flex; flex-direction: column; gap: 0.8rem; align-items: center; }
.cookie-link { color: var(--text-dim); font-size: 0.75rem; text-decoration: none; border-bottom: 1px solid transparent; }

/* ---------------- MOBILE OPTIMIERUNG ---------------- */
@media (max-width: 1024px) {
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid, .location-grid, .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
    .desktop-nav { display: none; }
    .burger-menu { display: block; }
    
    /* HEADER MOBIL ANPASSUNG */
    .header-container { 
        padding: 0 1.5rem; 
        /* Grid bleibt: 1fr auto 1fr */
    }
    
    .logo-img { height: 50px; }
    #main-header.scrolled .logo-img { height: 45px; }
    
    /* Button kleiner machen auf Mobil */
    .btn-nav-cta { 
        padding: 0.5rem 0.8rem !important; 
        font-size: 0.6rem !important; 
        letter-spacing: 1px;
    }

    /* Überschriften kleiner, damit sie nicht abgeschnitten werden */
    h1, .hero-title, .section-title {
        word-wrap: break-word; /* Umbruch erzwingen */
        hyphens: auto; /* Silbentrennung */
    }
    .legal-content h1 {
        font-size: 2rem !important; /* Fix für Datenschutz Titel */
    }
}

@media (max-width: 600px) {
    .section-padding { padding: 5rem 0; }
    .values-grid { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; max-width: 250px; }
    .gallery-container { height: 40vh; }
    .footer-logo { margin: 0 auto; height: 100px; }
    
    /* Extra Fix für Testimonials auf kleinen Screens */
    .testimonial-card { min-width: 280px; padding: 1.5rem; }
}