/* Header, Split-Navigation, Burger, Mobile-Menue Les Bergers Mystiques — aus dem abgenommenen Entwurf v3 ausgelagert. Quelle: design-entwurf/index.html, Zeilen 86-191 (unveraendert uebernommen). ACHTUNG: Die Einbindungsreihenfolge in ist bedeutungstragend. */ /* ============ HEADER: Split-Navi + zentrales Logo ============ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h); background: var(--header-bg); color: var(--header-ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(128,116,100,0.16); transition: background 0.4s ease, box-shadow 0.3s ease; } /* Touch: Weichzeichner weg. Ein fixierter Header mit backdrop-filter zwingt iOS, bei JEDEM Scroll-Frame den Hintergrund neu zu blurren — der Haupt- grund für stockendes Scrollen. Bei 88% Deckung ist der Effekt ohnehin kaum sichtbar; deckend sieht identisch aus und scrollt nativ flüssig. */ @media (hover: none) { .site-header, .mobile-menu { backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header { background: #F5F1E6; } .mobile-menu { background: #F5F1E6; } } .site-header.shrunk { box-shadow: 0 6px 30px rgba(25,20,15,0.14); } .header-grid { max-width: 1380px; margin: 0 auto; height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; gap: 18px; } .nav-side { display: flex; gap: 4px; align-items: center; } .nav-left { justify-content: flex-end; } .nav-right { justify-content: flex-start; } .nav-side a { text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; padding: 9px 14px; border-radius: 999px; white-space: nowrap; transition: background 0.2s; } .nav-side a:hover { background: rgba(128,116,100,0.14); } /* Scroll-Spy: aktuelle Section (kein Weight-Wechsel — Pillen sind nowrap, Breitensprünge würden die Navi zappeln lassen) */ .nav-side a.active:not(.nav-phone), .mobile-menu a.active { background: rgba(78,116,115,0.16); color: var(--accent); } .nav-phone { margin-left: 14px; font-weight: 650; font-size: 13.5px; padding: 10px 18px !important; background: var(--band-bg); color: var(--btn-ink) !important; } .brand-center { position: relative; z-index: 61; display: block; text-decoration: none; width: 150px; height: 100%; } .brand-center img { position: absolute; top: 11px; left: 50%; width: 148px; height: 148px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 34px rgba(25,20,15,0.22); background: var(--creme); transform: translateX(-50%); transform-origin: center top; transition: transform 0.35s ease; } .site-header.shrunk .brand-center img { transform: translateX(-50%) scale(0.7); } /* Burger-Menü (Tablet/Mobile) */ .nav-burger { display: none; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: none; border-radius: 12px; background: transparent; color: var(--header-ink); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .nav-burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 59; display: none; flex-direction: column; background: var(--header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(128,116,100,0.18); padding: 26px 24px 22px; gap: 2px; } .mobile-menu.open { display: flex; } .mobile-menu a { text-decoration: none; color: var(--header-ink); font-size: 17px; font-weight: 500; padding: 12px 10px; border-radius: 10px; } .mobile-menu a:active, .mobile-menu a:hover { background: rgba(128,116,100,0.14); } .mobile-menu .mm-phone { margin-top: 12px; text-align: center; background: var(--band-bg); color: var(--btn-ink); font-weight: 650; border-radius: 999px; padding: 14px; }