/* ============================================================ HEADER CLEANUP — Autark Innovations Datum: 2026-05-17 Ziele: 1) Desktop nav.nav max-height 80px (war 288px) → Hero-Lift 2) Header-Diät: Logo + max 6 sichtbare Nav-Links + 1 CTA + Burger Phone-Banner / Rating / Senior-Toggle bei <1280px ins Burger 3) Premium-Look: Backdrop-Filter, Goldener Bottom-Border, Sticky 4) Idempotent — kein "Angebot Angebot" mehr 5) Mobile-Touch-Constraint: KEIN overflow-x:hidden auf html+body ============================================================ */ /* ===================================================== 1. Desktop Nav: max 80px Höhe, premium backdrop ===================================================== */ @media (min-width: 769px) { html body nav.nav, html body nav#nav { min-height: 64px !important; max-height: 80px !important; padding-block: 12px !important; padding-inline: clamp(16px, 3vw, 32px) !important; background: rgba(10, 20, 40, 0.86) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important; border-bottom: 1px solid rgba(201, 168, 106, 0.12) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: clamp(8px, 1.5vw, 18px) !important; position: sticky !important; top: 0 !important; z-index: 100 !important; } html body nav.nav .nav-logo-link, html body nav#nav .nav-logo-link { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; } html body nav.nav .nav-logo-img, html body nav#nav .nav-logo-img { width: 34px !important; height: 34px !important; } html body nav.nav .nav-links, html body nav#nav .nav-links { flex: 1 1 auto !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 4px !important; overflow: hidden !important; } html body nav.nav .nav-links a, html body nav#nav .nav-links a { padding: 6px 10px !important; line-height: 1.3 !important; font-size: 0.92rem !important; border-radius: 8px !important; text-decoration: none !important; color: rgba(240, 246, 255, 0.86) !important; transition: background 0.18s ease, color 0.18s ease !important; white-space: nowrap !important; } html body nav.nav .nav-links a:hover, html body nav#nav .nav-links a:hover, html body nav.nav .nav-links a:focus-visible, html body nav#nav .nav-links a:focus-visible { background: rgba(201, 168, 106, 0.12) !important; color: #C9A86A !important; } html body nav.nav .nav-links a.active, html body nav#nav .nav-links a.active, html body nav.nav .nav-links a[aria-current="page"], html body nav#nav .nav-links a[aria-current="page"] { color: #C9A86A !important; background: rgba(201, 168, 106, 0.08) !important; } html body nav.nav .nav-right, html body nav#nav .nav-right { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } } /* ===================================================== 2. Desktop Header-Diät bei <1280px: Phone, Rating, Senior-Toggle ausblenden (nur CTA + Burger) ===================================================== */ @media (min-width: 769px) and (max-width: 1279.98px) { html body nav.nav .nav-right #navPhone, html body nav#nav .nav-right #navPhone, html body nav.nav .nav-right #navRating, html body nav#nav .nav-right #navRating, html body nav.nav .nav-right .nav-rating, html body nav#nav .nav-right .nav-rating, html body nav.nav .nav-right .nav-phone-icon, html body nav#nav .nav-right .nav-phone-icon, html body nav.nav .nav-right .cw-senior-toggle:not(.cw-senior-clone), html body nav#nav .nav-right .cw-senior-toggle:not(.cw-senior-clone) { display: none !important; } } /* ===================================================== 3. Desktop bei <1100px: weitere Nav-Links ausblenden, Burger sichtbar (Header-Diät 2. Stufe) ===================================================== */ @media (min-width: 769px) and (max-width: 1099.98px) { html body nav.nav .nav-links, html body nav#nav .nav-links { display: none !important; } html body nav.nav #navBurger, html body nav.nav .nav-burger, html body nav#nav #navBurger, html body nav#nav .nav-burger { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; border-radius: 8px !important; border: 1px solid rgba(201, 168, 106, 0.22) !important; background: rgba(201, 168, 106, 0.06) !important; color: #C9A86A !important; cursor: pointer !important; } } /* ===================================================== 4. Desktop nav-links: Begrenze sichtbare Links bei ≤1280px: Zeige nur die ersten 6, Rest ausblenden. (Greift nur wenn nav-links sichtbar ist, also ≥1100px) ===================================================== */ @media (min-width: 1100px) and (max-width: 1279.98px) { html body nav.nav .nav-links a:nth-of-type(n+7), html body nav#nav .nav-links a:nth-of-type(n+7) { display: none !important; } } /* Burger-Only Links: auf Desktop ≥1100px hidden, auf Burger sichtbar */ @media (min-width: 1100px) { html body nav.nav .nav-links a.nav-burger-only, html body nav#nav .nav-links a.nav-burger-only, html body nav.nav .nav-links a[data-burger-only], html body nav#nav .nav-links a[data-burger-only] { display: none !important; } } /* Bei <1100px: alle Links sichtbar im Burger-Overlay */ @media (max-width: 1099.98px) { html body nav.nav .nav-links.open a.nav-burger-only, html body nav#nav .nav-links.open a.nav-burger-only, html body nav.nav .nav-links.active a.nav-burger-only, html body nav#nav .nav-links.active a.nav-burger-only { display: flex !important; } } /* ===================================================== 5. Desktop CTA Premium-Look (Gold-Akzent) ===================================================== */ @media (min-width: 769px) { html body nav.nav .nav-right .nav-cta, html body nav#nav .nav-right .nav-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: linear-gradient(135deg, #C9A86A 0%, #B08A4D 100%) !important; color: #0A1428 !important; font-weight: 700 !important; font-size: 0.92rem !important; padding: 9px 18px !important; border-radius: 10px !important; text-decoration: none !important; border: 1px solid rgba(201, 168, 106, 0.6) !important; box-shadow: 0 4px 12px rgba(201, 168, 106, 0.28), 0 1px 0 rgba(255, 255, 255, 0.18) inset !important; letter-spacing: 0 !important; line-height: 1.1 !important; white-space: nowrap !important; transition: transform 0.15s ease, box-shadow 0.2s ease !important; } html body nav.nav .nav-right .nav-cta:hover, html body nav#nav .nav-right .nav-cta:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 16px rgba(201, 168, 106, 0.38), 0 1px 0 rgba(255, 255, 255, 0.25) inset !important; } html body nav.nav .nav-right .nav-cta:active, html body nav#nav .nav-right .nav-cta:active { transform: scale(0.98) !important; } } /* ===================================================== 6. Sungrow Banner / Promo-Bars darunter (kein Overlap) ===================================================== */ @media (min-width: 769px) { #sgb-wrapper, #sungrowBackupBanner { margin-top: 0 !important; } } /* ===================================================== 7. Mobile <420px: nav-logo-sub ausblenden ===================================================== */ @media (max-width: 419.98px) { html body nav.nav .nav-logo-sub, html body nav#nav .nav-logo-sub { display: none !important; } html body nav.nav .nav-logo-text, html body nav#nav .nav-logo-text { font-size: 13px !important; letter-spacing: 0.02em !important; } } /* ===================================================== 8. Mobile <768px: A+/A- Toggle + Rating + Phone-Text aus nav-right entfernen (Burger statt) Bestätigt feedback_overflow_touch: KEIN body overflow-x ===================================================== */ @media (max-width: 767.98px) { html body nav.nav .nav-right .cw-senior-toggle:not(.cw-senior-clone), html body nav#nav .nav-right .cw-senior-toggle:not(.cw-senior-clone), html body nav.nav .nav-right #navRating, html body nav#nav .nav-right #navRating, html body nav.nav .nav-right .nav-rating, html body nav#nav .nav-right .nav-rating, html body nav.nav .nav-right .nav-phone-icon, html body nav#nav .nav-right .nav-phone-icon, html body nav.nav .nav-right #navPhone, html body nav#nav .nav-right #navPhone { display: none !important; } } /* ===================================================== 9. Hide-on-Scroll-Down (Sticky bleibt bei Hoch-Scroll) Aktiviert durch JS: