/* Eine einzige Navigationsleiste für Momente und alle Inhaltsseiten. */
body > header {
    position: fixed !important;
    z-index: 60 !important;
    inset: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 88px !important;
    min-height: 88px !important;
    padding: 10px clamp(18px, 4vw, 64px) !important;
    background: rgba(244, 240, 235, .94) !important;
    border-bottom: 1px solid rgba(48, 43, 42, .13) !important;
    backdrop-filter: blur(18px);
}
body > header .header-content {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    height: 68px !important;
    margin: 0 !important;
}
body > header .site-logo-link { display: inline-flex; align-items: center; height: 68px; }
body > header .logo {
    content: normal !important;
    display: block !important;
    width: 205px !important;
    height: 68px !important;
    object-fit: contain !important;
    object-position: left center !important;
}
.npu-unified-navigation {
    position: fixed !important;
    z-index: 65 !important;
    top: 0 !important;
    right: clamp(18px, 4vw, 64px) !important;
    left: auto !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.npu-unified-navigation .global-navigation__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(12px, 2vw, 28px) !important;
    width: auto !important;
    min-height: 88px !important;
    margin: 0 !important;
}
.npu-unified-navigation a {
    position: relative;
    min-height: 0 !important;
    padding: 0 !important;
    color: #302b2a !important;
    border: 0 !important;
    font: 400 1rem/1.35 "Segoe UI", Arial, sans-serif !important;
    letter-spacing: .03em !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.npu-unified-navigation a::after { bottom: -6px !important; }
.npu-unified-navigation .navigation-contact {
    padding: 10px 16px !important;
    border: 1px solid #302b2a !important;
    border-radius: 999px !important;
}
.npu-unified-navigation .navigation-contact::after { display: none !important; }
.npu-unified-navigation .navigation-contact:hover,
.npu-unified-navigation .navigation-contact:focus-visible { color: #fff !important; background: #d0004d !important; border-color: #d0004d !important; }
.npu-unified-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    background: transparent;
}
.npu-unified-toggle > span:not(.visually-hidden) { display: block; height: 2px; margin: 5px 0; background: #302b2a; transition: .25s; }

@media (max-width: 1040px) {
    body > header { height: 68px !important; min-height: 68px !important; padding: 10px 16px !important; }
    body > header .header-content,
    body > header .site-logo-link { height: 48px !important; }
    body > header .logo { width: min(250px, 64vw) !important; height: 48px !important; }
    .npu-unified-toggle { position: fixed !important; z-index: 70 !important; top: 12px !important; right: 16px !important; display: block !important; }
    .npu-unified-navigation {
        top: 68px !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        padding: 12px 20px 22px !important;
        background: rgba(244, 240, 235, .99) !important;
        box-shadow: 0 20px 35px rgba(35, 27, 24, .12) !important;
        transform: translateY(-12px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: transform .25s, opacity .25s, visibility .25s !important;
    }
    .npu-unified-navigation.is-open { transform: none !important; opacity: 1 !important; visibility: visible !important; }
    .npu-unified-navigation .global-navigation__inner { display: grid !important; gap: 0 !important; min-height: 0 !important; }
    .npu-unified-navigation a { min-height: 44px !important; padding: 13px 8px !important; font-size: .94rem !important; border-bottom: 1px solid rgba(40,30,28,.08) !important; }
    .npu-unified-navigation .navigation-contact { margin-top: 10px !important; padding: 11px 16px !important; color: #fff !important; background: #302b2a !important; text-align: center; }
    .npu-unified-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .npu-unified-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
    .npu-unified-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Magenta-Streifen unter dem Menüpunkt (Hover, Fokus, aktive Seite).
   Stand bisher nur in styles.css, die Startseite lädt diese Datei nicht. */
.npu-unified-navigation a::after { content: ""; position: absolute; left: 0; right: 100%; height: 2px; background: #d0004d; transition: right .22s ease; }
.npu-unified-navigation a:hover::after,
.npu-unified-navigation a:focus-visible::after,
.npu-unified-navigation a[aria-current="page"]::after { right: 0; }
.npu-unified-navigation .navigation-contact::after { display: none !important; }