/* ========= Fonts ========= */
@font-face {
    font-family: Poppins;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/poppins-v23-latin-900.woff2") format("woff2");
}
@font-face {
    font-family: ZenDots;
    font-display: swap;
    src: url("../fonts/ZenDots-Regular.ttf") format("truetype");
}
@font-face {
    font-family: Inter;
    font-display: swap;
    src: url("../fonts/Inter_18pt-Regular.ttf") format("truetype");
}
@font-face {
    font-family: BebasNeue;
    font-display: swap;
    src: url("../fonts/BebasNeue-Regular.ttf") format("truetype");
}

/* ========= Global ========= */
html, body {
    overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: Poppins, sans-serif;
    background: var(--brand);
    color: var(--text-light);
    font-size: 1.125rem;
}

/* ========= NAVBAR – DESKTOP ONLY ========= */
@media (min-width: 992px) {
    #mainNavbar {
        background: var(--light);
        transition: opacity .8s ease, background-color .4s ease;
        will-change: opacity;
        z-index: 1030;
    }

    #mainNavbar.show {
        transform: none !important;
        opacity: 1;
        box-shadow: 0 6px 20px rgba(0,0,0,.08);
        pointer-events: auto;
    }

    #mainNavbar.hide {
        transform: none !important;
        opacity: 0;
        filter: blur(2px);
        pointer-events: none;
    }
}

/* ========= NAVBAR – MOBILE ========= */
@media (max-width: 991.98px) {
    #mainNavbar,
    #mainNavbar.show,
    #mainNavbar.hide {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
        pointer-events: auto !important;
    }
}

/* ========= Bootstrap Navbar ========= */
.navbar {
    background: var(--brand);
    padding: 1rem 0;
    font-family: Inter, sans-serif;
}
.nav-link {
    color: var(--text-light);
}
.nav-link:hover {
    color: var(--accent);
}

/* ========= BURGER FIX (kein schwarzes Quadrat) ========= */
.navbar-toggler {
    border: none!important;
}
.navbar-toggler:focus {
    box-shadow: none!important;
}

.navbar .navbar-toggler-icon {
    background-image: none !important;
    width: 24px !important;
    height: 2px !important;
    background-color: var(--text-light);
    position: relative;
    display: block;
}

.navbar .navbar-toggler-icon::before,
.navbar .navbar-toggler-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background-color: var(--text-light);
    transition: transform .3s ease, top .3s ease;
}

.navbar .navbar-toggler-icon::before { top: -8px; }
.navbar .navbar-toggler-icon::after  { top:  8px; }

.navbar .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    background-color: transparent;
}
.navbar .navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
    top: 0;
    transform: rotate(45deg);
}
.navbar .navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ========= HERO ========= */
.hero {
    min-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: ZenDots, sans-serif;
    position: relative;
    overflow: hidden;
}
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}
.hero-content {
    position: relative;
}
.hero h1 {
    font-family: BebasNeue, sans-serif;
    color: var(--accent);
    font-size: clamp(2.5rem, 7vw, 5rem);
}
.hero p {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

/* ========= HERO MOBILE ========= */
@media (max-width: 768px) {
    .hero-video {
        display: none;
    }
    .hero {
        background: url("../video/hero4-poster.webp") center / cover no-repeat;
    }
}

/* ========= Reduced Motion ========= */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}