/* ========================================================================== BUDDIES HEADER + ANNOUNCEMENT BAR Loaded only on the pages in the plugin's page map. THE SCROLL BEHAVIOUR IS PURE CSS. .bwh-bar and .bwh-head are siblings in normal flow. Only the header is position:sticky, so the bar scrolls up and out with the page and the header then pins itself at top:0. No scroll listener, nothing to fall out of sync, and on a browser without sticky support it degrades to a normal header rather than breaking. ========================================================================== */ /* --- Suppress what would otherwise be duplicated ------------------------- */ /* The theme's own header. Scoped to .buddies-page so the client's other pages are untouched. Several selectors because we do not control the theme; the JS adds a last-resort fallback for a theme none of these match. */ body.buddies-page > header, body.buddies-page #masthead, body.buddies-page .site-header, body.buddies-page header.site-header, body.buddies-page header#header, body.buddies-page .elementor-location-header, body.buddies-page [data-elementor-type="header"] { display: none !important; } /* The announcement bar also exists inside the homepage content, because it was section 00 of the design file. Now that the plugin renders it globally, hide the in-page copy rather than editing the page — reversible, and it survives a re-import of the page content. */ body.buddies-page .elementor section[data-screen-label="00 Ankündigung"] { display: none !important; } /* --- Root ---------------------------------------------------------------- */ /* display:contents is load-bearing, not tidying. A position:sticky element can only stick inside its own parent's box. With .bwh-root as a normal div, that box ends just below the header — so the header unstuck itself and scrolled away the moment you passed it. Taking the wrapper out of the layout makes the bar and the header direct children of for layout purposes, and the header then sticks for the whole page. Do not give this element a display value that creates a box again. */ .bwh-root { display: contents; font-family: var(--font-body, "Lato", system-ui, sans-serif); --bwh-h: 76px; } /* --bwh-h must also reach the header if a browser ever ignores the above. */ .bwh-bar, .bwh-head { --bwh-h: 76px; } @media (max-width: 1100px) { .bwh-bar, .bwh-head { --bwh-h: 66px; } } .bwh-root *, .bwh-root *::before, .bwh-root *::after { box-sizing: border-box; } /* --- Announcement bar ---------------------------------------------------- */ .bwh-bar { background: var(--black, #000); color: var(--white, #fff); padding: 12px 24px; } .bwh-bar-inner { max-width: min(1720px, 94vw); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; text-align: center; } .bwh-bar-text, .bwh-count, .bwh-bar-cta { font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif); font-weight: var(--weight-heading-alt, 800); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; } .bwh-bar-text { display: flex; align-items: center; gap: 10px; } .bwh-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--gold-500, #EFAB00); flex: none; } .bwh-count { color: var(--gold-500, #EFAB00); letter-spacing: .1em; font-variant-numeric: tabular-nums; } .bwh-bar-cta { color: var(--white, #fff); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-500, #EFAB00); letter-spacing: .1em; } .bwh-bar-cta:hover { text-decoration-color: var(--white, #fff); } /* --- Header -------------------------------------------------------------- */ /* THIS RULE IS WHAT MAKES THE HEADER STICK AT ALL. The theme sets `overflow-x: hidden` on to stop sideways scrolling. Any overflow value other than `visible` turns that element into the scroll container for position:sticky inside it — and because itself never scrolls (the document does), the header had nothing to stick to and simply scrolled away. `clip` prevents the same sideways scrolling but does NOT create a scroll container, so sticky works again. Scoped to .buddies-page: the client's own pages keep the theme's `hidden`. Verified separately that all 13 pages have zero horizontal overflow, so nothing is being clipped that should have been reachable. On a browser too old for `clip` the declaration is ignored, the theme's `hidden` stands, and the header degrades to a normal non-sticky one — no layout damage. */ body.buddies-page { overflow-x: clip; } .bwh-head { position: sticky; top: 0; z-index: 900; background: var(--white, #fff); border-bottom: 1px solid transparent; transition: box-shadow .18s ease, border-color .18s ease; } /* JS sets data-stuck once the header has actually pinned, so the shadow only appears when it is floating over content and not while it sits in the flow. */ /* Logged-in editors get WordPress's fixed admin bar across the top; without this the pinned header slides underneath it. Visitors never see this rule. */ body.admin-bar .bwh-head { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .bwh-head { top: 46px; } } .bwh-head[data-stuck="true"] { border-bottom-color: var(--sand-300, #E2D7CB); box-shadow: 0 6px 24px -18px rgba(0, 0, 0, .45); } .bwh-head-inner { max-width: min(1720px, 94vw); margin: 0 auto; min-height: var(--bwh-h); display: flex; align-items: center; gap: 24px; } /* --- Logo ---------------------------------------------------------------- */ .bwh-logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; } .bwh-logo-img { display: block; height: 44px; width: auto; max-width: 220px; } .bwh-logo--text { font-family: var(--font-heading, "M PLUS 2", system-ui, sans-serif); font-weight: 800; font-size: 30px; letter-spacing: -.02em; color: var(--blue-500, #2660FF); } /* --- Nav ----------------------------------------------------------------- */ .bwh-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 28px; } .bwh-menu { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; } .bwh-item { position: relative; margin: 0; } /* SPECIFICITY, NOT DECORATION. "Leistungen" and "Standorte" are