/* ══════════════════════════════════════════════════════════
   Floating-Island Navbar  ·  global
   Midnight Luxe · fixed pill · Scroll-Morph
   ══════════════════════════════════════════════════════════ */

/* Native Divi-Kopfzeile ausblenden (wird durch die Pille ersetzt) */
#main-header,
#top-header { display: none !important; }
#page-container { padding-top: 0 !important; }
/* falls Admin-Bar aktiv: Pille etwas tiefer */
body.admin-bar .druehe-nav { top: 46px; }

.druehe-nav {
    /* Tokens aus dem zentralen Design-System */
    --dn-text:   var(--ds-text);
    --dn-accent: var(--ds-accent);
    --dn-ink:    var(--ds-accent-ink);
    --dn-sans:   var(--ds-font-sans);

    position: fixed;
    top: 18px; left: 50%; transform: translateX(-50%);
    z-index: 9990;
    display: flex; align-items: center; gap: 28px;
    max-width: calc(100vw - 32px);
    padding: 9px 9px 9px 22px;
    border-radius: 999px;
    font-family: var(--dn-sans);
    /* immer leicht sichtbar (lesbar auf hellen wie dunklen Seiten) */
    background: rgba(13, 13, 18, .5);
    border: 1px solid rgba(250, 248, 245, .12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, top .3s ease;
}
.druehe-nav.dn-scrolled {
    background: rgba(13, 13, 18, .78);
    border-color: rgba(250, 248, 245, .18);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .38);
}

.druehe-nav .dn-logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; white-space: nowrap;
    transition: opacity .2s ease;
}
.druehe-nav .dn-logo:hover { opacity: .8; }
.druehe-nav .dn-mark {
    height: 24px; width: auto; display: block;
    /* dunkles Logo -> weiß für die dunkle Pille */
    filter: brightness(0) invert(1);
}
.druehe-nav .dn-name {
    font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--dn-text);
}

.druehe-nav .dn-links { display: flex; align-items: center; gap: 22px; }
.druehe-nav .dn-links a {
    position: relative;
    font-size: 14px; font-weight: 500; color: var(--dn-text); opacity: .82;
    text-decoration: none; white-space: nowrap;
    transition: opacity .2s ease, transform .2s ease;
}
.druehe-nav .dn-links a::after {
    content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 100%;
    background: var(--dn-accent); transform: scaleX(0); transform-origin: left;
    transition: transform .32s cubic-bezier(0.16, 1, 0.3, 1);
}
.druehe-nav .dn-links a:hover { opacity: 1; transform: translateY(-1px); }
.druehe-nav .dn-links a:hover::after { transform: scaleX(1); }

.druehe-nav .dn-cta {
    font-size: 14px; font-weight: 600; letter-spacing: .005em;
    color: var(--dn-ink); background: var(--dn-accent);
    padding: 9px 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
    transition: transform .5s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow .5s;
}
.druehe-nav .dn-cta:hover { transform: scale(1.03) translateY(-1px); box-shadow: 0 8px 22px rgba(201,168,76,.32); }

/* Mobile: nur Logo + CTA (minimale Version) */
@media (max-width: 700px) {
    .druehe-nav { gap: 14px; padding: 8px 8px 8px 18px; top: 12px; }
    .druehe-nav .dn-links { display: none; }
}
/* Sanfter Einzug beim Laden (translateX(-50%) bleibt erhalten) */
@media (prefers-reduced-motion: no-preference) {
    .druehe-nav { animation: dn-drop .9s cubic-bezier(0.16, 1, 0.3, 1) .15s both; }
}
@keyframes dn-drop {
    from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .druehe-nav, .druehe-nav .dn-cta { transition: none; }
}