/* =========================================================
   oliXstyle.css v2.3 - Deep Research Optimized
   Fokus: Rendering-Stabilität & Gold-Garantie
   ========================================================= */

:root {
    --bg: #f8f9fa;
    --bg-soft: #f3f4f5;
    --bg-panel: #ffffff;
    --text: #191c1d;
    --text-soft: #44474c;
    --dark: #0f1c2c;
    --dark-text: #f8fafc;
    --dark-soft: #bac8dc;
    --gold: #775a19;
    --gold-light: #e9c176;
    --gold-mid: #caa54b;
    --line: #e1e3e4;
    --radius-md: 0.75rem;
    --max-content: 1200px;
    --font-body: system-ui, -apple-system, sans-serif;
    --font-headline: Georgia, serif;
    
    /* Clamps für responsive Typography */
    --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-2: clamp(1.6rem, 1.4rem + 0.8vw, 2.1rem);
    --step-3: clamp(2.2rem, 1.8rem + 1.2vw, 3rem);
    --step-4: clamp(3rem, 2.2rem + 2vw, 5rem);
    --step-5: clamp(3.5rem, 2.5rem + 3vw, 6.5rem);
    --space-9: 6rem;
    --space-10: 8rem;
}

/* 1. BASE RESET (Neu: Verhindert Layout-Sprengung) */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }
body { 
    margin: 0; background: var(--bg); color: var(--text); 
    font-family: var(--font-body); line-height: 1.68; 
    overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

/* 2. TYPOGRAPHY */
h1, h2, h3 { font-family: var(--font-headline); font-weight: 700; line-height: 1.12; margin-bottom: 1rem; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

/* Utility Gold-Klasse (Verbessert: Fallback-Farbe hinzugefügt) */
.gold { 
    background: linear-gradient(90deg, #e9c176, #caa54b, #f3d28f);
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #caa54b; /* Fallback */
    display: inline-block; font-weight: 700;
}

/* 3. LAYOUT SECTIONS */
/* 3. LAYOUT SECTIONS */
.hero {
    width: 100vw; 
    left: 50%; 
    margin-left: -50vw; 
    position: relative;
    padding: var(--space-10) 1.5rem; 
    text-align: center;
    color: var(--dark-text);
    background: radial-gradient(circle at 50% 50%, #000000 0%, #0f1c2c 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Der Gold-Garant-Block: */
.hero h1 {
    background: linear-gradient(90deg, #e9c176, #caa54b, #f3d28f) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important; /* Zwingt den Browser, den Gradienten zu zeigen */
    display: inline-block;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.1;
    /* Damit die Schriftart aus Punkt 2 erhalten bleibt: */
    font-family: var(--font-headline);
    font-size: var(--step-5);
}

.hero h2, .hero p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--dark-text);
    font-size: var(--step-2);
}

.section { padding: var(--space-9) 1.5rem; max-width: var(--max-content); margin: auto; }

/* 4. ASH LAYOUT SYSTEM (Verbessert: Gleiche Spaltenhöhen) */
.ash-layout {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2rem;
    margin: 2rem 0;
    align-items: stretch; /* Neu: Spalten immer gleich hoch */
}

.ash-col {
    flex: 1 1 0px;
    min-width: 0;
}

/* Visual Panel Styling (Verbessert: Button-Positionierung) */
.visual-panel {
    background: #ffffff; 
    border: 1px solid rgba(196,198,204,0.22);
    border-radius: var(--radius-md); 
    padding: 2.5rem 2rem; 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    text-align: center;
    height: 100%; /* Neu: Füllt die Spalte ganz aus */
}

/* 5. ASH BUTTON SYSTEM */
a.ash-btn {
    display: inline-block; padding: 12px 22px; border-radius: 8px;
    font-weight: 600; text-decoration: none !important; transition: all 0.2s ease;
    cursor: pointer;
}
.ash-btn-primary { background: #c9a646; border: 2px solid #8c6b1f; color: #000 !important; }
.ash-btn-secondary { background: transparent; border: 1.5px solid #999; color: #444 !important; }
.ash-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.2); }

/* 6. MOBILE OPTIMIZATIONS & STICKY CTA */
.mobile-sticky-cta { display: none; }

@media (max-width: 768px) {
    .ash-layout {
        flex-direction: column !important;
        gap: 1.5rem;
    }
    .hero { padding: var(--space-9) 1.25rem; }
    .hero h1 { font-size: 2.8rem; }
    
    .mobile-sticky-cta {
        display: block; position: fixed; bottom: 0; left: 0; width: 100%;
        background: rgba(255, 255, 255, 0.95); padding: 15px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1); z-index: 9999;
        backdrop-filter: blur(10px); border-top: 1px solid var(--gold-mid);
    }
    .mobile-sticky-cta .ash-btn { width: 100% !important; text-align: center; margin: 0; }
    body { padding-bottom: 80px !important; }
}

/* 7. NAVIGATION & FOOTER (Fix: Quarto-Spezifität erhöht) */
body #quarto-header .navbar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 2px solid var(--gold-mid) !important;
}

body #quarto-header .navbar .nav-link {
    color: var(--text) !important;
    font-weight: 500 !important;
}

body #quarto-header .navbar .nav-link[href*="order"] {
    background-color: var(--gold-mid) !important;
    color: #000 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 8px 15px !important;
}

body #quarto-footer.footer {
    background-color: var(--dark) !important;
    color: var(--dark-soft) !important;
    padding: 3rem 1.5rem !important;
}

/* 8. HELPER CLASSES (Verbessert: Browser-Handling) */
.bg-light {
    background-color: var(--bg-soft) !important;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.bg-light > * {
    max-width: var(--max-content);
    margin-left: auto;
    margin-right: auto;
    padding: 4rem 1.5rem;
}

/* =========================================================
   ASH LIGHTBOX
========================================================= */

#ash-lightbox-overlay {

    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.88);

    display: none;

    justify-content: center;
    align-items: center;

    z-index: 99999;

    padding: 2rem;
}

#ash-lightbox-overlay.active {
    display: flex;
}

#ash-lightbox-image {

    max-width: 95vw;
    max-height: 95vh;

    box-shadow:
        0 0 40px rgba(0,0,0,0.8);

    border-radius: 8px;
}