/**
 * Freistehende Pillen-Navigation.
 *
 * Liegt bewusst in einer eigenen Datei statt in main.css: die Regeln
 * überschreiben die dortigen .site-nav-Vorgaben und werden nach ihr geladen.
 *
 * Verhalten: beim Laden unsichtbar — erst nach dem ersten Scrollen fährt die
 * Pille ein, genau dann, wenn das große Hero-Logo an seine Position wandert
 * (siehe hero-flow.js). Die Einblendung hat deshalb eine kleine Verzögerung,
 * damit das Logo zuerst ankommt.
 */

.site-nav {
    position: fixed;
    top: clamp(0.55rem, 1.5vh, 1rem);
    left: 50%;
    right: auto;
    /* schmaler als der Seiteninhalt — die leeren Zonen neben Logo und
       Kontakt wirkten auf Desktop zu gross (JK 2026-08-01) */
    width: calc(100% - 2 * var(--container-padding));
    max-width: 880px;
    padding: 0;
    z-index: 1000;
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    transition:
        opacity 0.35s var(--ease-out),
        transform 0.35s var(--ease-out);
}

/* Nur auf der Startseite versteckt, bis gescrollt wird — dort uebernimmt
   zunaechst das grosse Hero-Logo. Auf Unterseiten gibt es kein Hero-Logo, die
   Navigation muss also von Anfang an da sein. */
.home .site-nav {
    opacity: 0;
    transform: translate3d(-50%, -14px, 0);
    pointer-events: none;
}

/* Startseite: die Pille erscheint erst, wenn das Logo hochfliegt (Stufe 2,
   hero-flow.js setzt has-logo) — nicht schon beim ersten Scrollpixel. */
.home .site-nav.has-logo {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    pointer-events: auto;
    /* Fläche trägt die Pille selbst, nicht die Leiste */
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
    transition:
        opacity 0.4s var(--ease-out) 0.28s,
        transform 0.5s var(--ease-out) 0.28s;
}

.site-nav.is-scrolled {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
}

/* ── Die Pille ───────────────────────────────────────────────────────── */
.site-nav .nav-inner {
    display: flex;
    align-items: center;
    gap: clamp(0.45rem, 1.4vw, 1.1rem);
    width: auto;
    max-width: none;
    margin: 0;
    /* etwas mehr Höhe, damit das BnK-Logo größer stehen kann (JK 2026-08-01) */
    padding: 0.55rem 0.5rem 0.55rem 0.95rem;
    border-radius: 100px;
    border: 1px solid rgba(245, 245, 245, 0.12);
    background: rgba(13, 13, 17, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

.site-nav .nav-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    /* ein Stück von der Pillenkante weg (JK 2026-08-01) */
    margin-left: 0.6rem;
    margin-right: 0.15rem;
}

.site-nav .nav-logo img {
    height: 38px;
    width: auto;
    display: block;
}

/* Startseite: das Header-Logo erscheint erst, wenn das Hero-Logo seinen Flug
   antritt (hero-flow.js setzt has-logo) — sonst stuende es doppelt im Bild,
   solange das grosse Logo noch mittig kreist. */
.home .site-nav .nav-logo img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.home .site-nav.has-logo .nav-logo img {
    opacity: 1;
    transition: opacity 0.3s ease 0.4s;
}

/* ── Links ───────────────────────────────────────────────────────────── */
.site-nav .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.45rem, 1.4vw, 1.1rem);
    /* mittig zwischen Logo und Kontakt-Button */
    margin-inline: auto;
    position: static;
    height: auto;
    width: auto;
    background: none;
    flex-direction: row;
    transform: none;
    opacity: 1;
    visibility: visible;
}

.site-nav .nav-links a {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgba(245, 245, 245, 0.72);
    /* luftiger — die aktive/hover-Pille wirkte gequetscht (JK 2026-08-02) */
    padding: calc(0.4rem + 0.7px) 0.85rem calc(0.4rem - 0.7px);
    border-radius: 100px;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Kontakt — der einzige Sprungziel-Link ───────────────────────────── */
.site-nav .nav-cta-btn {
    flex: 0 0 auto;
    padding: calc(0.5rem + 0.7px) 1.05rem calc(0.5rem - 0.7px);
    border-radius: 100px;
    border: 1px solid rgba(245, 245, 245, 0.22);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.site-nav .nav-cta-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(245, 245, 245, 0.38);
}

/* Burger wird nicht mehr gebraucht — die Pille trägt alle Ziele */
.site-nav .nav-toggle { display: none; }

/* ── Schmale Viewports: kompakter, damit die Pille einzeilig bleibt ────
   Bei ~390px teilen sich Logo, drei Links und der Kontakt-Button die
   Breite — ohne diese Werte ragt der Button aus der Pille heraus. */
@media (max-width: 620px) {
    .site-nav .nav-inner {
        gap: 0.3rem;
        /* hohe Pille, ohne Kontakt-Button: Links duerfen atmen
           (JK 2026-08-02) */
        padding: 0.9rem 0.6rem;
    }

    .site-nav .nav-logo { margin-left: 0.55rem; margin-right: 0.3rem; }
    .site-nav .nav-logo img { height: 36px; }
    .site-nav .nav-links { gap: 0.45rem; }
    .site-nav .nav-links a { font-size: 0.78rem; padding: calc(0.5rem + 0.7px) 0.65rem calc(0.5rem - 0.7px); letter-spacing: -0.01em; }
    /* Kontakt-Pille entfaellt mobil — Ziel ist ueber Footer/Sektionen erreichbar */
    .site-nav .nav-cta-btn { display: none; }
}

/* Sehr schmale Phones: kompaktere Links, sonst laeuft die Pille ueber */
@media (max-width: 400px) {
    .site-nav .nav-logo { margin-left: 0.35rem; }
    .site-nav .nav-logo img { height: 33px; }
    .site-nav .nav-links { gap: 0.3rem; }
    .site-nav .nav-links a { font-size: 0.74rem; padding: calc(0.5rem + 0.7px) 0.45rem calc(0.5rem - 0.7px); }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-nav.is-scrolled { transition: opacity 0.2s linear; transform: translate3d(-50%, 0, 0); }
}

/* Ohne JS gibt es keine has-logo-Übergabe — Logo immer zeigen */
.no-js .site-nav .nav-logo img { opacity: 1; }