/* ========================================================================
   Laura wird 60, Global CSS
   - Font-Face (Helvetica Regular Webfont, exakt wie in <base_specification>)
   - Tailwind v4 @theme Variablen
   - Liquid-Glass-Effekt (exakt wie in <base_specification>)
   - Globale Resets, Scroll-Verhalten, Reduced-Motion-Fallback
   ========================================================================*/

@font-face {
    font-family: "Helvetica Regular";
    src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot");
    src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular")format("svg");
    font-display: swap;
}

/* Tailwind v4 @theme, wird vom Tailwind-Browser-Build gelesen.
   --font-sans setzt die Default-Sans auf den Helvetica-Webfont mit Fallbacks. */
@theme {
    --font-sans: "Helvetica Regular", "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
    --color-laura-cream: #f8f4ec;
    --color-laura-gold:  #d4b483;
}

/* ===== Liquid Glass classes ============================================== 
   Wir packen die Glas-Klassen in @layer components, damit Tailwinds
   Utility-Klassen aus @layer utilities (z. B. fixed, absolute) bei
   Gleichstand der Spezifität gewinnen. Sonst überschreibt unsere
   `position: relative` jede Positions-Utility, die wir auf dieselbe
   Element-Class legen. */

@layer components {
    .liquid-glass {
        background: rgba(255, 255, 255, 0.01);
        background-blend-mode: luminosity;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: none;
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
    }
    .liquid-glass::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.4px;
        background: linear-gradient(180deg,
            rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
            rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
            rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    /* Variante mit kräftigerem Blur für Lightbox/Modal/Date-Badges. */
    .liquid-glass-strong {
        background: rgba(20, 20, 22, 0.55);
        backdrop-filter: blur(24px) saturate(140%);
        -webkit-backdrop-filter: blur(24px) saturate(140%);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
        position: relative;
        overflow: hidden;
    }
    .liquid-glass-strong::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.4px;
        background: linear-gradient(180deg,
            rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
            rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
            rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }

    /* Variante für die mitlaufende Navigation, etwas milchiger als der Default. */
    .liquid-glass-nav {
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, 0.14),
            0 8px 28px -10px rgba(0, 0, 0, 0.45);
        position: relative;
        overflow: hidden;
    }
    .liquid-glass-nav::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.4px;
        background: linear-gradient(180deg,
            rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.18) 20%,
            rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.04) 60%,
            rgba(255,255,255,0.18) 80%, rgba(255,255,255,0.55) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
}

/* ===== Globale Resets ==================================================== */
html, body {
    margin: 0;
    padding: 0;
    background: #0a0a0c; /* fallback hinter dem Video */
    color: #fff;
    font-family: "Helvetica Regular", "Helvetica Neue", Helvetica, ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html {
    scroll-behavior: smooth;
}

::selection {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Honeypot, visually hidden aber für Screenreader & Bots vorhanden */
.sr-only-honeypot {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Galerie-Lightbox Backdrop */
.lightbox-backdrop {
    background: rgba(8, 8, 10, 0.78);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Wortmarke, fein gespacet, etwas heller als der Body-Text */
.wordmark {
    letter-spacing: 0.22em;
    font-weight: 400;
    color: rgba(255,255,255,0.95);
}

/* Hairlines */
.hairline-t { border-top: 1px solid rgba(255,255,255,0.08); }
.hairline-b { border-bottom: 1px solid rgba(255,255,255,0.08); }

/* Custom scrollbar, diskret */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.16); }

/* Sektionen sollen beim Anker-Sprung nicht hinter dem fixierten Header
   verschwinden, kleiner Scroll-Margin nach oben. */
section[id] {
    scroll-margin-top: 5rem;
}
@media (min-width: 768px) {
    section[id] { scroll-margin-top: 6rem; }
}

/* prefers-reduced-motion: framer-motion respektiert das selbst, hier nur
   noch Smooth-Scroll und das langsame Karussell ausschalten. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reduced-motion-pause { animation: none !important; transition: none !important; }
}

/* Carousel-Slide Container, verhindert Layout-Shift */
.carousel-track {
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}