/* Fresenius Header — Apple-inspired sticky bar with mega menus. Transparent over hero on front-page, solid otherwise / once scrolled. ────────────────────────────────────────────────────────────────── */ /* Variables on :root so drawer + scrim (now siblings of

) and the body padding-top rule can see them without inheriting from .fres-header. */ :root { --fres-h-accent: #00B9BC; --fres-h-accent-strong: #00737d; --fres-h-accent-soft: rgba(0, 185, 188, 0.08); --fres-h-bar-h: 88px; --fres-h-bar-h-shrunk: 64px; } .fres-header { --fres-h-bg-light: #ffffff; --fres-h-fg-light: #1f2937; --fres-h-fg-light-soft: #4b5563; --fres-h-fg-trans: #ffffff; --fres-h-fg-trans-soft: rgba(255, 255, 255, 0.82); --fres-h-border: rgba(0, 0, 0, 0.06); --fres-h-border-trans: rgba(255, 255, 255, 0.18); --fres-h-accent: #00B9BC; --fres-h-accent-strong: #00737d; --fres-h-accent-soft: rgba(0, 185, 188, 0.08); --fres-h-radius: 12px; --fres-h-bar-h: 88px; --fres-h-bar-h-shrunk: 64px; --fres-h-shadow: 0 2px 18px -10px rgba(0, 0, 0, 0.18); --fres-h-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; font-family: var(--fres-h-font); position: fixed; top: 0; left: 0; /* `html { scrollbar-gutter: stable }` already reserves the scrollbar gutter, so a fixed element with `right: 0` aligns flush with the scrollbar start instead of doubling up with a JS-measured offset. */ right: 0; z-index: 1000; color: var(--fres-h-fg-light); transition: background 240ms ease, box-shadow 240ms ease, color 240ms ease; } /* Reserve the scrollbar gutter on so layout doesn't shift between scrollable and non-scrollable views, AND the JS-measured scrollbar width stays consistent. */ html { scrollbar-gutter: stable; } /* Override Customizer "Additional CSS" that pinned `html, body { height: 100% }`, which turned into its own scroll container and broke `window.scrollY` (so our `is-scrolled` toggle never fired on subpages). Force normal page-scroll behaviour on every page where this header is active. */ html:has(body.has-fres-header), body.has-fres-header { height: auto !important; } body.has-fres-header { overflow-y: visible !important; } .fres-header *, .fres-header *::before, .fres-header *::after { box-sizing: border-box; } /* Solid (default + scrolled) */ .fres-header.is-solid, .fres-header.is-scrolled { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--fres-h-border); box-shadow: var(--fres-h-shadow); } /* Transparent over hero (only front-page, before scroll) — replicates the original endustry-theme mask: linear-gradient(130deg, #0a0000 30%, #00b9bc 100%) at 0.6 opacity blended over the dark header bg, with a 28%-white bottom border. */ .fres-header.is-transparent:not(.is-scrolled) { background: linear-gradient(130deg, rgba(10, 0, 0, 0.6) 30%, rgba(0, 185, 188, 0.6) 100%), rgba(10, 10, 10, 0.55); -webkit-backdrop-filter: blur(10px) saturate(135%); backdrop-filter: blur(10px) saturate(135%); color: var(--fres-h-fg-trans); box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, 0.28); } /* Push body below the fixed header on non-transparent pages (404, search, …). On transparent pages the hero / first section sits directly under the header, matching the original theme's `is-header-float is-header-transparent` behaviour. */ body.has-fres-header:not(.has-fres-header-transparent) { padding-top: var(--fres-h-bar-h); } /* ── Top bar ─────────────────────────────────────────────── */ .fres-header__bar { height: var(--fres-h-bar-h); transition: height 240ms ease; } .fres-header.is-scrolled .fres-header__bar { height: var(--fres-h-bar-h-shrunk); } .fres-header__container { /* Brand + Nav + Tools render as one centered cluster — no `flex: 1` on the nav (which would spread brand to the left and tools to the right with a hole in the middle). Equal gaps between the three groups. */ max-width: 100%; height: 100%; margin: 0 auto; padding: 0 1.75rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; } /* Brand */ .fres-header__brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; line-height: 0; height: 100%; padding-right: 1rem; /* Container gap handles the spacing between brand and nav now; the divider stays as a thin visual separator on the brand's right edge. */ border-right: 1px solid var(--fres-h-border); transition: border-color 240ms ease, padding 240ms ease; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__brand { border-right-color: var(--fres-h-border-trans); } .fres-header__logo { display: inline-block; height: 48px; width: auto; transition: opacity 240ms ease, height 240ms ease; } .fres-header__logo img { height: 100%; width: auto; display: block; object-fit: contain; } .fres-header.is-scrolled .fres-header__logo { height: 36px; } /* Show light logo on transparent state, dark logo on solid/scrolled state */ .fres-header__logo--light { display: none; } .fres-header__logo--dark { display: inline-block; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__logo--light { display: inline-block; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__logo--dark { display: none; } /* ── Nav (top-level) ─────────────────────────────────────── */ /* `min-width: 0` keeps the nav shrinkable on narrow viewports. We deliberately no longer let it `flex: 1` — that would push brand to the left edge and the tools cluster to the right edge, leaving a gap in the middle. */ .fres-header__nav { flex: 0 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; } .fres-header__nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.4rem; } .fres-header__nav-item { position: relative; } .fres-header__nav-link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.5rem 0.85rem; border-radius: 8px; color: inherit; text-decoration: none; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.005em; white-space: nowrap; transition: background 180ms ease, color 180ms ease; } .fres-header__nav-link:hover, .fres-header__nav-link:focus-visible { background: var(--fres-h-accent-soft); color: var(--fres-h-accent-strong); outline: none; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__nav-link:hover, .fres-header.is-transparent:not(.is-scrolled) .fres-header__nav-link:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; } .fres-header__nav-item.is-open > .fres-header__nav-link { background: var(--fres-h-accent-soft); color: var(--fres-h-accent-strong); } .fres-header.is-transparent:not(.is-scrolled) .fres-header__nav-item.is-open > .fres-header__nav-link { background: rgba(255, 255, 255, 0.16); color: #fff; } .fres-header__chevron { opacity: 0.7; transition: transform 200ms ease; } .fres-header__nav-item.is-open .fres-header__chevron { transform: rotate(180deg); } /* ── Tools (right cluster) ───────────────────────────────── */ .fres-header__tools { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; height: 100%; /* The CTA reads as the trailing menu item, so we pull the tools cluster slightly left to tighten the Kontakt → CTA gap below the container's default gap (24 px → ~16 px). */ margin-left: -0.5rem; transition: border-color 240ms ease; } /* The divider sits on the socials wrapper, mirroring the brand divider on the left of the bar. Full bar height so the hairline runs top-to-bottom like the logo's. */ .fres-header__socials { height: 100%; align-items: center; margin-left: 1.25rem; /* 20 px gap between the CTA and the divider */ padding-left: 0.7rem; /* ~11 px between the divider and the icon row */ border-left: 1px solid var(--fres-h-border); transition: border-color 240ms ease; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__socials { border-left-color: var(--fres-h-border-trans); } .fres-header__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; transition: background 180ms ease, color 180ms ease; } .fres-header__icon-btn:hover { background: var(--fres-h-accent-soft); color: var(--fres-h-accent-strong); } .fres-header.is-transparent:not(.is-scrolled) .fres-header__icon-btn:hover { background: rgba(255, 255, 255, 0.16); color: #fff; } /* Socials */ .fres-header__socials { display: inline-flex; gap: 0.15rem; align-items: center; } .fres-header__social-link { --brand: currentColor; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--brand); text-decoration: none; opacity: 0.85; transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, color 180ms ease; } .fres-header__social-link:hover { opacity: 1; transform: translateY(-1px); } .fres-header__social-link[aria-label="Instagram"] { --brand: #E4405F; } .fres-header__social-link[aria-label="Linkedin"] { --brand: #0A66C2; } .fres-header__social-link[aria-label="Youtube"] { --brand: #FF0000; } .fres-header__social-link[aria-label="Tiktok"] { --brand: #1f2937; } /* black on the white bar — official cyan was too garish */ .fres-header.is-transparent:not(.is-scrolled) .fres-header__social-link { color: rgba(255, 255, 255, 0.85); } .fres-header.is-transparent:not(.is-scrolled) .fres-header__social-link:hover { color: #fff; } /* CTA */ .fres-header__cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.05rem; border-radius: 9999px; background: var(--fres-h-accent); color: #fff !important; text-decoration: none; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.005em; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; box-shadow: 0 6px 18px -10px rgba(0, 185, 188, 0.55); } .fres-header__cta:hover, .fres-header__cta:focus-visible { background: var(--fres-h-accent-strong); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0, 185, 188, 0.7); outline: none; } .fres-header__cta svg { transition: transform 180ms ease; } .fres-header__cta:hover svg { transform: translateX(2px); } /* Lang switcher */ .fres-header__lang { position: relative; } .fres-header__lang-current { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: 8px; border: 1px solid var(--fres-h-border); background: transparent; color: inherit; font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__lang-current { border-color: var(--fres-h-border-trans); } .fres-header__lang-current:hover { background: var(--fres-h-accent-soft); } .fres-header__lang-current[aria-expanded="true"] svg:last-child { transform: rotate(180deg); } .fres-header__lang-current svg:last-child { transition: transform 180ms ease; } .fres-header__lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; margin: 0; padding: 0.35rem; list-style: none; background: #fff; border: 1px solid var(--fres-h-border); border-radius: var(--fres-h-radius); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.18); z-index: 5; display: flex; flex-direction: column; gap: 1px; } .fres-header__lang-menu[hidden] { display: none; } .fres-header__lang-menu li { margin: 0; } .fres-header__lang-menu a { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.6rem; color: #1f2937; text-decoration: none; border-radius: 6px; font-size: 0.85rem; } .fres-header__lang-menu a:hover { background: var(--fres-h-accent-soft); color: var(--fres-h-accent-strong); } .fres-header__lang-menu li[aria-selected="true"] a { color: var(--fres-h-accent-strong); font-weight: 600; } /* Burger (mobile only) — color always inherits the bar's foreground */ .fres-header__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer; padding: 8px; color: inherit; } .fres-header__burger span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: opacity 180ms ease; } /* Hide the burger entirely while drawer is open (drawer-head shows the X). */ .fres-header.is-drawer-open .fres-header__burger { display: none !important; } /* Force burger lines white when over a transparent bar — even before scroll detection, so the icon is always visible against the dark/petrol gradient. */ .fres-header.is-transparent:not(.is-scrolled) .fres-header__burger { color: #fff; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__burger span { background: #fff; } /* ── Search panel — glass-morphism, narrow, modern ───────── */ /* Search panel — exact same surface as the bar above so it reads as a visual extension. Solid state mirrors `.fres-header.is-solid`, transparent state mirrors `.fres-header.is-transparent`. The only seam is a single hairline divider matching the bar's bottom border. */ .fres-header__search { position: relative; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--fres-h-border); border-bottom: 1px solid var(--fres-h-border); padding: 0.75rem 0; box-shadow: var(--fres-h-shadow); } /* Transparent-over-hero: copy the bar's exact stacked gradient + base layer */ .fres-header.is-transparent:not(.is-scrolled) .fres-header__search { background: linear-gradient(130deg, rgba(10, 0, 0, 0.6) 30%, rgba(0, 185, 188, 0.6) 100%), rgba(10, 10, 10, 0.55); -webkit-backdrop-filter: blur(10px) saturate(135%); backdrop-filter: blur(10px) saturate(135%); border-top: 1px solid rgba(255, 255, 255, 0.28); border-bottom: 1px solid rgba(255, 255, 255, 0.28); color: var(--fres-h-fg-trans); box-shadow: none; } .fres-header__search[hidden] { display: none !important; } /* Override the bar's flex container behaviour for the search panel. */ .fres-header__search .fres-header__container { display: block; height: auto; padding: 0 1.5rem; position: relative; z-index: 1; } .fres-header__search-form { display: flex; align-items: stretch; gap: 0.55rem; width: 100%; max-width: 680px; /* compact, focused — no longer 1080px */ margin: 0 auto; color: var(--fres-h-fg-light); } /* Field wrapper — subtle pill that doesn't compete with the bar surface */ .fres-header__search-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; border-radius: 9999px; background: rgba(15, 23, 42, 0.04); border: 1px solid var(--fres-h-border); transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .fres-header__search-field:focus-within { background: #ffffff; border-color: rgba(0, 185, 188, 0.55); box-shadow: 0 0 0 3px rgba(0, 185, 188, 0.16); } .fres-header.is-transparent:not(.is-scrolled) .fres-header__search-field { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); } .fres-header.is-transparent:not(.is-scrolled) .fres-header__search-field input[type="search"] { color: #fff; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__search-field input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.7); } .fres-header.is-transparent:not(.is-scrolled) .fres-header__search-leading { color: #fff; } .fres-header__search-leading { display: inline-flex; align-items: center; justify-content: center; padding-left: 0.9rem; color: var(--fres-h-accent-strong); flex-shrink: 0; } .fres-header__search-leading svg { width: 16px; height: 16px; } .fres-header__search-field input[type="search"] { flex: 1; min-width: 0; height: 38px; border: 0; background: transparent; color: var(--fres-h-fg-light); padding: 0 0.75rem 0 0.55rem; font: inherit; font-size: 0.92rem; line-height: 1; outline: none; -webkit-appearance: none; appearance: none; } .fres-header__search-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .fres-header__search-field input[type="search"]::placeholder { color: var(--fres-h-fg-light-soft); } /* Inline clear (×) inside the field — visible petrol-tinted pill */ .fres-header__search-clear { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 0.4rem; border: 0; border-radius: 50%; background: rgba(0, 185, 188, 0.22) !important; color: var(--fres-h-accent-strong) !important; cursor: pointer; transition: background 160ms ease, color 160ms ease; } .fres-header__search-clear svg { width: 12px; height: 12px; stroke: currentColor; } .fres-header__search-clear:hover { background: var(--fres-h-accent) !important; color: #fff !important; } .fres-header__search-clear[hidden] { display: none !important; } /* Submit — petrol pill */ .fres-header__search-submit { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 38px; border: 0; background: var(--fres-h-accent); color: #ffffff !important; border-radius: 9999px; padding: 0 1rem; font: inherit; font-weight: 600; font-size: 0.85rem; line-height: 1; cursor: pointer; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 22px -10px rgba(0, 185, 188, 0.55); } .fres-header__search-submit svg { width: 14px; height: 14px; } .fres-header__search-submit:hover { background: var(--fres-h-accent-strong); transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(0, 185, 188, 0.7); } .fres-header__search-submit svg { transition: transform 180ms ease; } .fres-header__search-submit:hover svg { transform: translateX(3px); } /* Close (×) — naked icon, no circle. Inherits color from the panel: white over hero/transparent, dark over solid. */ .fres-header__search-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--fres-h-fg-light) !important; cursor: pointer; opacity: 0.85; transition: opacity 180ms ease, color 180ms ease; } .fres-header__search-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .fres-header__search-close:hover { opacity: 1; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__search-close { color: #ffffff !important; } .fres-header.is-transparent:not(.is-scrolled) .fres-header__search-close:hover { color: #ffffff !important; } @media (max-width: 720px) { .fres-header__search { padding: 0.55rem 0; } .fres-header__search-form { gap: 0.35rem; padding: 0 0.875rem; max-width: 100%; } .fres-header__search-submit { padding: 0 0.85rem; font-size: 0.82rem; height: 36px; } .fres-header__search-submit svg { display: none; } .fres-header__search-field input[type="search"] { height: 36px; } .fres-header__search-close { width: 34px; height: 34px; } } /* ── Mega-menu stage (Apple-style: full-width hover catcher, centered visual card) ── */ .fres-header__mega-stage { position: absolute; top: 100%; left: 0; right: 0; pointer-events: none; } /* When any panel is open, the stage itself catches pointer events to keep the hover-state alive between nav-bar and card. */ .fres-header.is-mega-open .fres-header__mega-stage { pointer-events: auto; } /* Defensive: never hide third-party sticky widgets (mystickyelements, hubspot, etc.) */ #mystickyelements, .mystickyelements, .mystickyelements-fixed, .mse-stickybar, [id^="mse-"], [class^="mystickyelements"] { z-index: 9999 !important; } /* Outer panel: full-width transparent hover catcher (closes the gap below the bar so the mouse never leaves the hover-zone when traveling from nav-item to card). */ .fres-header__mega { position: absolute; top: 0; /* directly under bar (stage is at top:100%) — never overlaps bar */ left: 0; right: 0; width: 100%; padding: 14px 1.5rem 0; background: transparent; pointer-events: auto; opacity: 0; transform: translateY(8px) scale(0.985); /* slide UP into place — no bar overlap */ transform-origin: top center; transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); } .fres-header__mega[hidden] { display: none; } .fres-header__mega.is-active { opacity: 1; transform: translateY(0) scale(1); } /* Webkit thin-scrollbar for the inner panel (Firefox uses scrollbar-color above). */ .fres-header__mega .fres-header__container::-webkit-scrollbar { width: 8px; } .fres-header__mega .fres-header__container::-webkit-scrollbar-thumb { background: rgba(0, 115, 125, 0.32); border-radius: 4px; } .fres-header__mega .fres-header__container::-webkit-scrollbar-thumb:hover { background: rgba(0, 115, 125, 0.55); } .fres-header__mega .fres-header__container::-webkit-scrollbar-track { background: transparent; } /* On short viewports also tighten the inner padding so more fits before the scroll kicks in. */ @media (max-height: 760px) { .fres-header__mega .fres-header__container { padding: 1.25rem 1.5rem 1.1rem; } .fres-header__mega-grid { gap: 1.1rem 1.5rem; } .fres-header__promo { margin-top: 1rem; padding: 0.85rem 1rem; } } @media (max-height: 620px) { .fres-header__mega .fres-header__container { padding: 1rem 1.25rem 0.9rem; } .fres-header__col-title { margin-bottom: 0.4rem; } } /* Inner card (visual). */ .fres-header__mega .fres-header__container { display: block; height: auto; padding: 2rem 2.25rem 1.75rem; max-width: 1080px; margin: 0 auto; background: #ffffff; color: var(--fres-h-fg-light); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 18px; box-shadow: 0 30px 60px -22px rgba(15, 23, 42, 0.32), 0 8px 24px -10px rgba(15, 23, 42, 0.14); overflow-x: hidden; /* keep Tory etc. clipped horizontally */ overflow-y: auto; /* internally scroll when the panel is taller than the viewport */ overscroll-behavior: contain; /* Cap at viewport height minus the bar minus a 32 px breathing margin so the panel always finishes inside the visible viewport instead of spilling under the fold on short laptop screens. */ max-height: calc(100vh - var(--fres-h-bar-h, 88px) - 32px); scrollbar-width: thin; scrollbar-color: rgba(0, 115, 125, 0.35) transparent; position: relative; /* anchor for absolute decorations like Tory in the about panel */ } .fres-header__mega-grid { display: grid; gap: 2rem 2.25rem; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } .fres-header__mega-grid[data-cols="1"] { --cols: 1; } .fres-header__mega-grid[data-cols="2"] { --cols: 2; } .fres-header__mega-grid[data-cols="3"] { --cols: 3; } .fres-header__mega-grid[data-cols="4"] { --cols: 4; } .fres-header__mega-grid--simple { gap: 0.15rem; max-width: 360px; padding: 0.25rem; } .fres-header__col-title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1rem; font-size: 0.7rem; font-weight: 700; color: var(--fres-h-accent-strong); text-transform: uppercase; letter-spacing: 0.14em; } .fres-header__col-title a { color: inherit; text-decoration: none; } .fres-header__col-title a:hover { color: var(--fres-h-accent); } .fres-header__col-ico { color: var(--fres-h-accent); display: inline-flex; } .fres-header__col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .fres-header__col-list li { margin: 0; } .fres-header__mega-link { display: block; padding: 0.7rem 0.8rem; margin: 0 -0.8rem; border-radius: 12px; text-decoration: none; color: inherit; transition: background 200ms cubic-bezier(0.22, 0.61, 0.36, 1), color 200ms ease, transform 200ms ease; } .fres-header__mega-link:hover, .fres-header__mega-link:focus-visible { background: var(--fres-h-accent-soft); color: var(--fres-h-accent-strong); outline: none; } .fres-header__mega-link.is-highlight { background: linear-gradient(135deg, var(--fres-h-accent) 0%, var(--fres-h-accent-strong) 100%); color: #fff; } .fres-header__mega-link.is-highlight:hover { filter: brightness(1.05); } .fres-header__mega-link-label { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; font-size: 0.96rem; line-height: 1.3; } .fres-header__mega-badge { display: inline-flex; align-items: center; gap: 0.2rem; padding: 2px 6px 2px 5px; border-radius: 4px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .fres-header__mega-badge--pdf { background: #e63946; color: #fff; } .fres-header__mega-link.is-highlight .fres-header__mega-badge--pdf { background: #fff; color: #e63946; } .fres-header__mega-badge--soon { background: rgba(0, 185, 188, 0.15); color: var(--fres-h-accent-strong); border: 1px solid rgba(0, 185, 188, 0.3); } /* Disabled link (e.g. "coming soon" partner) — visually muted, not interactive */ .fres-header__mega-link.is-disabled { cursor: default; opacity: 0.7; } .fres-header__mega-link.is-disabled:hover { background: transparent; color: inherit; } .fres-header__mega-link.is-disabled .fres-header__mega-link-label { color: var(--fres-h-fg-light-soft); } .fres-header__mega-link-desc { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--fres-h-fg-light-soft); line-height: 1.45; } .fres-header__mega-link.is-highlight .fres-header__mega-link-desc { color: rgba(255, 255, 255, 0.86); } /* Shared CTA centered below the static columns (Service mega: one button covering Leistungen + Versprechen, NOT below the link column on the left). Lives inside the mega-grid as a grid item that spans columns 2..end and centers itself horizontally within that range. Negative margin-top pulls it close to the bullet cards instead of leaving the full grid row-gap. */ .fres-header__mega-shared-cta { grid-column: 2 / -1; display: flex; justify-content: center; margin-top: -1.5rem; margin-bottom: 0; } /* Static columns (Leistungen, Versprechen, …) get a tinted card so they read as descriptive content rather than another row of clickable links. The link column next to them keeps the white-bg / hover-glow look. */ .fres-header__col--static { background: linear-gradient(180deg, rgba(0, 185, 188, 0.06) 0%, rgba(0, 185, 188, 0.02) 100%); border: 1px solid rgba(0, 185, 188, 0.16); border-radius: 12px; padding: 1rem 1.1rem 1.1rem; margin: -0.4rem -0.4rem -0.2rem; /* pull the card slightly into the column gap */ } .fres-header__col--static .fres-header__col-title { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fres-h-accent-strong); margin-bottom: 0.6rem; } .fres-header__col--static .fres-header__col-title a { color: inherit; text-decoration: none; } .fres-header__col--static .fres-header__col-cta { background: rgba(0, 185, 188, 0.16); } /* Static bullet list (Service column 1) */ .fres-header__col-list--bullets { display: flex; flex-direction: column; gap: 0.65rem; } .fres-header__bullet { display: flex; gap: 0.65rem; align-items: flex-start; } .fres-header__bullet-dot { flex-shrink: 0; margin-top: 0.55rem; width: 6px; height: 6px; border-radius: 50%; background: var(--fres-h-accent); box-shadow: 0 0 0 3px var(--fres-h-accent-soft); } .fres-header__bullet-label { display: block; font-weight: 600; font-size: 0.9rem; line-height: 1.3; color: var(--fres-h-fg-light); } .fres-header__bullet-desc { display: block; margin-top: 2px; font-size: 0.78rem; line-height: 1.45; color: var(--fres-h-fg-light-soft); } .fres-header__bullet-flag { display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 4px; width: 14px; height: 10px; border-radius: 1px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); } .fres-header__bullet-flag svg, .fres-header__bullet-flag img { width: 100%; height: 100%; display: block; object-fit: cover; } .fres-header__col-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem; padding: 0.45rem 0.8rem; border-radius: 9999px; background: var(--fres-h-accent-soft); color: var(--fres-h-accent-strong); text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background 180ms ease, color 180ms ease, transform 180ms ease; } .fres-header__col-cta:hover, .fres-header__col-cta:focus-visible { background: var(--fres-h-accent); color: #fff; transform: translateY(-1px); outline: none; } .fres-header__col-cta svg { transition: transform 180ms ease; } .fres-header__col-cta:hover svg { transform: translateX(2px); } /* ── Promo banner under mega columns ─────────────────────── */ .fres-header__promo { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 1.5rem; margin-top: 1.5rem; padding: 1.1rem 1.25rem; background: linear-gradient(135deg, rgba(0, 185, 188, 0.08) 0%, rgba(0, 115, 125, 0.04) 100%); border: 1px solid rgba(0, 185, 188, 0.18); border-radius: 14px; } .fres-header__promo-media { width: 100%; justify-self: center; display: flex; align-items: center; justify-content: center; background: transparent; box-shadow: none; } .fres-header__promo-media img { display: block; margin: 0 auto; max-width: 110px; max-height: 150px; width: auto; height: auto; object-fit: contain; background: transparent; filter: drop-shadow(0 6px 14px rgba(0, 115, 125, 0.18)); } .fres-header__promo-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .fres-header__promo-eyebrow { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--fres-h-accent-strong); } .fres-header__promo-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--fres-h-fg-light); } .fres-header__promo-text { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--fres-h-fg-light-soft); } .fres-header__promo-cta { grid-column: 3; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1.2rem; border-radius: 9999px; background: var(--fres-h-accent); color: #fff !important; text-decoration: none; font-weight: 600; font-size: 0.88rem; white-space: nowrap; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; box-shadow: 0 8px 22px -10px rgba(0, 185, 188, 0.55); } .fres-header__promo-cta:hover { background: var(--fres-h-accent-strong); transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(0, 185, 188, 0.7); } .fres-header__promo-cta svg { transition: transform 180ms ease; } .fres-header__promo-cta:hover svg { transform: translateX(3px); } @media (max-width: 720px) { .fres-header__promo { grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem; } .fres-header__promo-media { width: 100%; justify-self: center; } .fres-header__promo-media img { max-width: 120px; max-height: 160px; } .fres-header__promo-cta { grid-column: 1; justify-content: center; } } /* ── Blog mega menu ──────────────────────────────────────── */ .fres-header__blog { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .fres-header__blog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .fres-header__blog-head .fres-header__col-title { margin: 0; } .fres-header__blog-head .fres-header__col-cta { margin-top: 0; } .fres-header__blog-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 1.25rem; } @media (max-width: 980px) { .fres-header__blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .fres-header__blog-grid { grid-template-columns: 1fr; } } .fres-header__post-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem; margin: -0.6rem; border-radius: 12px; color: var(--fres-h-fg-light); text-decoration: none; transition: background 180ms ease, transform 180ms ease; min-width: 0; } .fres-header__post-card:hover { background: var(--fres-h-accent-soft); transform: translateY(-1px); } .fres-header__post-thumb { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #f3f4f6; } .fres-header__post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .fres-header__post-thumb--placeholder { display: flex; align-items: center; justify-content: center; color: var(--fres-h-accent); background: linear-gradient(135deg, rgba(0,185,188,0.10), rgba(0,115,125,0.05)); } .fres-header__post-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .fres-header__post-cat { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--fres-h-accent-strong); } .fres-header__post-title { font-size: 0.95rem; font-weight: 700; line-height: 1.25; color: var(--fres-h-fg-light); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fres-header__post-excerpt { font-size: 0.8rem; line-height: 1.45; color: var(--fres-h-fg-light-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fres-header__post-date { font-size: 0.72rem; color: var(--fres-h-fg-light-soft); } /* Featured (first) post: span 2 cols on desktop, larger thumb */ .fres-header__post-card.is-feature { grid-row: span 2; grid-column: 1; } .fres-header__post-card.is-feature .fres-header__post-title { font-size: 1.1rem; -webkit-line-clamp: 3; } .fres-header__post-card.is-feature .fres-header__post-excerpt { -webkit-line-clamp: 3; } @media (max-width: 980px) { .fres-header__post-card.is-feature { grid-row: span 1; grid-column: 1 / -1; } } /* Address column inside mega menu */ .fres-header__address { font-style: normal; color: var(--fres-h-fg-light-soft); font-size: 0.85rem; line-height: 1.55; margin: 0 0 0.75rem; } .fres-header__address strong { color: var(--fres-h-fg-light); } .fres-header__address-cta { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 9999px; /* Visibly outlined in the idle state — `--fres-h-border` is a 6%-black hairline meant for separators, way too faint as a button outline. */ border: 1px solid rgba(0, 185, 188, 0.35); color: var(--fres-h-accent-strong); text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .fres-header__address-cta:hover { background: var(--fres-h-accent-soft); color: var(--fres-h-accent); border-color: rgba(0, 185, 188, 0.35); } /* Contact actions row at the bottom of the Kontakt mega menu */ .fres-header__actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--fres-h-border); } .fres-header__action { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-radius: var(--fres-h-radius); /* Same reasoning as `.fres-header__address-cta`: idle borders need to be visible. The 6%-black `--fres-h-border` was effectively invisible until hover swapped in an accent colour. */ border: 1px solid rgba(15, 23, 42, 0.12); background: #ffffff; color: var(--fres-h-fg-light); text-decoration: none; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease; } .fres-header__action:hover { transform: translateY(-1px); } .fres-header__action svg { color: var(--fres-h-accent); flex-shrink: 0; } .fres-header__action-label { display: block; font-weight: 700; font-size: 0.92rem; } .fres-header__action small { display: block; color: var(--fres-h-fg-light-soft); font-size: 0.74rem; margin-top: 1px; } .fres-header__action--call:hover { border-color: var(--fres-h-accent); background: var(--fres-h-accent-soft); } .fres-header__action--whatsapp:hover{ border-color: #25D366; background: rgba(37, 211, 102, 0.08); } .fres-header__action--whatsapp svg { color: #25D366; } .fres-header__action--mail:hover { border-color: var(--fres-h-accent); background: var(--fres-h-accent-soft); } /* ── Mobile drawer ───────────────────────────────────────── */ /* Drawer — Fresenius petrol gradient, mirrors the bar's transparent-mask styling. */ .fres-header__drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 92vw); background: linear-gradient(165deg, #00b9bc 0%, #00737d 35%, #0c2225 70%, #0a1314 100%) !important; color: #ffffff !important; box-shadow: -16px 0 50px -18px rgba(0, 0, 0, 0.55); z-index: 1003; transform: translateX(100%); transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.25rem 2rem; will-change: transform; display: block; } /* Subtle radial highlight on top-right for depth */ .fres-header__drawer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 380px at 110% -10%, rgba(0, 185, 188, 0.35), transparent 60%); pointer-events: none; z-index: 0; } .fres-header__drawer-inner { position: relative; z-index: 1; } /* Belt-and-suspenders: bdt-uikit (Prime Slider) has `[hidden] { display: none !important }` so we need !important here too when relying on the [hidden] override. */ .fres-header__drawer[hidden] { display: block !important; } .fres-header__drawer.is-open { transform: translateX(0); } .fres-header__drawer-inner > *, .fres-header__drawer * { color: inherit; } .fres-header__drawer-inner { display: flex; flex-direction: column; gap: 1rem; } /* Drawer top: white logo + close button */ .fres-header__drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .fres-header__drawer-brand { line-height: 0; } .fres-header__drawer-brand .fres-header__logo { height: 34px; } .fres-header__drawer-brand .fres-header__logo--light { display: inline-block !important; } .fres-header__drawer-brand .fres-header__logo--dark { display: none !important; } .fres-header__drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: #ffffff !important; cursor: pointer; border-radius: 8px; transition: background 180ms ease, color 180ms ease; } .fres-header__drawer-close:hover { background: rgba(255, 255, 255, 0.1); color: var(--fres-h-accent) !important; } .fres-header__drawer-close svg { stroke: currentColor; } .fres-header__cta--mobile { width: 100%; justify-content: center; } .fres-header__drawer-nav { font-size: 1rem; color: #fff !important; } .fres-header__drawer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .fres-header__drawer-nav li { margin: 0; } .fres-header__drawer-nav summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0.85rem; border-radius: 10px; cursor: pointer; color: #fff !important; } .fres-header__drawer-nav summary::-webkit-details-marker { display: none; } .fres-header__drawer-nav summary > a { color: inherit; text-decoration: none; font-weight: 600; } .fres-header__drawer-nav details[open] > summary { background: rgba(0, 185, 188, 0.16); color: var(--fres-h-accent) !important; } .fres-header__drawer-nav details[open] > summary > a { color: var(--fres-h-accent) !important; } .fres-header__drawer-nav details[open] .fres-header__drawer-chev { transform: rotate(180deg); } .fres-header__drawer-chev { color: rgba(255, 255, 255, 0.6); transition: transform 200ms ease; } /* Leaf entries (no submenu) — match the summary visual rhythm so the row stays the same height regardless of whether it's a leaf or a collapsible. */ .fres-header__drawer-leaf { display: flex; align-items: center; padding: 0.85rem 0.85rem; border-radius: 10px; color: #fff !important; text-decoration: none; font-weight: 600; } .fres-header__drawer-leaf:hover, .fres-header__drawer-leaf:focus-visible { background: rgba(0, 185, 188, 0.16); color: var(--fres-h-accent) !important; } .fres-header__drawer-sub { padding: 0.4rem 0 0.6rem 0.75rem !important; border-left: 1px solid rgba(0, 185, 188, 0.4); margin-left: 0.85rem !important; } .fres-header__drawer-sub a { display: block; padding: 0.55rem 0.7rem; border-radius: 8px; color: rgba(255, 255, 255, 0.78) !important; text-decoration: none; font-size: 0.92rem; font-weight: 500; } .fres-header__drawer-sub a:hover { background: rgba(255, 255, 255, 0.06); color: #fff !important; } .fres-header__drawer-sub a.is-highlight { color: var(--fres-h-accent) !important; font-weight: 600; } .fres-header__drawer-group strong { display: block; padding: 0.5rem 0.7rem 0.25rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } .fres-header__actions--compact { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.18); } .fres-header__actions--compact .fres-header__action { padding: 0.8rem 0.95rem; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: #fff !important; } .fres-header__actions--compact .fres-header__action small { color: rgba(255, 255, 255, 0.6); } .fres-header__actions--compact .fres-header__action:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--fres-h-accent); } .fres-header__actions--compact .fres-header__action--whatsapp:hover { border-color: #25D366; background: rgba(37, 211, 102, 0.12); } .fres-header__drawer-socials { display: flex; gap: 0.4rem; margin-top: 0.5rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.18); } .fres-header__drawer-socials .fres-header__social-link { color: var(--fres-h-fg-light-soft); } .fres-header__drawer-socials .fres-header__social-link[aria-label="Instagram"] { --brand: #E4405F; color: var(--brand); } .fres-header__drawer-socials .fres-header__social-link[aria-label="Linkedin"] { --brand: #0A66C2; color: var(--brand); } .fres-header__drawer-socials .fres-header__social-link[aria-label="Youtube"] { --brand: #FF0000; color: var(--brand); } .fres-header__drawer-socials .fres-header__social-link[aria-label="Tiktok"] { --brand: #25F4EE; color: var(--brand); } /* Scrim — sits BELOW the header so the bar stays interactive while a mega is open. For drawer mode, the drawer (z-index above scrim) covers everything anyway. */ .fres-header__scrim { position: fixed; inset: 0; border: 0; background: rgba(0, 0, 0, 0.32); z-index: 998; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .fres-header__scrim[hidden] { display: none !important; } /* Scrim is for drawer only — mega-menu closes via click-outside listener so the scrollbar (and any third-party sticky widgets) stay accessible while a mega is open. */ .fres-header__scrim.is-active { opacity: 1; pointer-events: auto; display: block !important; } /* ── Responsive ─────────────────────────────────────────── */ /* Progressive responsive — keep the nav visible as long as possible by shedding the less-essential tool-cluster items first. Full collapse to burger only happens once even the slimmed-down bar would overflow. Sizes (rough, to motivate the breakpoints): Logo 196 + nav 580 + CTA 210 + socials 150 (incl. divider) + search 50 + lang 90 + container padding 56 ≈ 1380 px (no overlap comfortably needs ~1440). */ /* ≥1540 px: full bar with comfortable nav spacing. */ /* 1440–1539: gently compress nav links (smaller gap + tighter padding + slightly smaller font) so the bar still shows everything. */ @media (max-width: 1539px) { .fres-header__nav-list { gap: 0.2rem; } .fres-header__nav-link { padding: 0.5rem 0.65rem; font-size: 0.88rem; } } /* 1280–1439: drop the socials cluster (saves ~150 px incl. divider). */ @media (max-width: 1439px) { .fres-header__socials { display: none; } } /* 1180–1339: tighten the nav further (smaller font + minimal padding) so the remaining bar bits fit without dropping search or lang yet. */ @media (max-width: 1339px) { .fres-header__nav-list { gap: 0.1rem; } .fres-header__nav-link { padding: 0.45rem 0.5rem; font-size: 0.84rem; } } /* 1180–1279: also drop the search icon (~50 px). */ @media (max-width: 1279px) { .fres-header__search-toggle { display: none; } } /* 1100–1179: also drop the language switcher (~90 px). */ @media (max-width: 1179px) { .fres-header__lang { display: none; } } /* ≤1099 px: tablet/mobile — collapse the desktop nav to a burger drawer and switch the bar to a slimmer layout. */ @media (max-width: 1099px) { .fres-header { --fres-h-bar-h: 68px; --fres-h-bar-h-shrunk: 60px; } .fres-header__nav { display: none; } .fres-header__burger { display: inline-flex; } .fres-header__brand { padding-right: 0; margin-right: 0; border-right: 0; } .fres-header__tools { padding-left: 0; margin-left: auto; border-left: 0; gap: 0.4rem; } .fres-header__logo { height: 36px; } .fres-header.is-scrolled .fres-header__logo { height: 32px; } .fres-header__icon-btn { width: 40px; height: 40px; } .fres-header__cta { padding: 0.45rem 0.85rem; font-size: 0.82rem; } } /* Phone */ @media (max-width: 640px) { .fres-header { --fres-h-bar-h: 60px; --fres-h-bar-h-shrunk: 56px; } .fres-header__container { gap: 0.5rem; padding: 0 0.875rem; } .fres-header__logo { height: 30px; } .fres-header.is-scrolled .fres-header__logo { height: 28px; } .fres-header__cta { padding: 0.4rem 0.7rem; font-size: 0.78rem; } .fres-header__cta svg { display: none; } } /* Very small (≤ 380px): hide bar CTA, only burger + tel left */ @media (max-width: 380px) { .fres-header__cta { display: none; } /* CTA only in drawer */ } /* Mobile drawer refinements — same threshold as the burger appears at. */ @media (max-width: 1099px) { .fres-header__drawer { width: min(440px, 100vw); padding: 1.25rem 1.25rem 2rem; } .fres-header__drawer-inner { gap: 1.25rem; } .fres-header__cta.fres-header__cta--mobile { display: flex; justify-content: center; gap: 0.55rem; padding: 0.95rem 1.25rem; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; background: #ffffff !important; color: var(--fres-h-accent-strong) !important; border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 185, 188, 0.18); } .fres-header__cta.fres-header__cta--mobile::after { content: "→"; font-size: 1.05rem; font-weight: 800; transition: transform 180ms ease; color: var(--fres-h-accent); } .fres-header__cta.fres-header__cta--mobile:hover, .fres-header__cta.fres-header__cta--mobile:focus-visible { background: var(--fres-h-accent) !important; color: #ffffff !important; transform: translateY(-1px); } .fres-header__cta.fres-header__cta--mobile:hover::after, .fres-header__cta.fres-header__cta--mobile:focus-visible::after { transform: translateX(3px); color: #ffffff; } } @media (max-width: 480px) { .fres-header__drawer { width: 100vw; } .fres-header__drawer-nav { font-size: 1rem; } .fres-header__drawer-nav summary { padding: 0.85rem 0.85rem; font-size: 1.02rem; } .fres-header__actions--compact .fres-footer__action, .fres-header__actions--compact .fres-header__action { padding: 0.85rem 1rem; } .fres-header__actions--compact .fres-header__action small { font-size: 0.78rem; } } /* Drawer above scrim AND header — fully covers content + bar when open */ .fres-header__drawer { z-index: 1003; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .fres-header, .fres-header__bar, .fres-header__logo, .fres-header__cta, .fres-header__mega, .fres-header__drawer, .fres-header__scrim { transition: none; } } /* ── Tory KI-Avatar peeking into the "Über uns" mega panel ───────────── Anchored to the right edge with overflow:hidden on the panel container, so only the front portion of the portrait shows — like she's leaning in from off-screen. Doesn't grow the menu (height: 100% of the panel). */ .fres-header__mega.has-tory .fres-header__mega-grid { /* Reserve space on the right so the bullets don't visually collide with the avatar. Tighter gutter — column 2 now sits very close to where the avatar's image starts, with just a hair of breathing room. */ max-width: calc(100% - 150px); } .fres-header__tory { position: absolute; right: 0; top: 0; bottom: 0; width: 184px; pointer-events: none; overflow: hidden; border-radius: 0 18px 18px 0; /* match panel right corners */ /* Inner-edge soft fade. We use a box-shadow inset (instead of mask-image, which can produce a fully transparent slab on some browsers and was blanking the image entirely). */ box-shadow: inset 10px 0 14px -10px #ffffff; } .fres-header__tory-img { position: absolute; bottom: 0; left: 0; right: 0; top: 0; display: block; } .fres-header__tory-img img { position: absolute; bottom: 0; right: 0; height: 100%; width: auto; max-width: none; display: block; object-fit: cover; object-position: center bottom; /* Slight inward nudge so her face sits a bit further inside the panel. */ transform: translateX(4px); } .fres-header__tory-badge { position: absolute; left: 6px; bottom: 10px; display: inline-flex; align-items: center; gap: 0.4rem; padding: 4px 9px; font-size: 0.68rem; font-weight: 600; color: #0c2225; background: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 9999px; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.25); letter-spacing: 0.01em; white-space: nowrap; } .fres-header__tory-badge strong { color: var(--fres-h-accent-strong); font-weight: 800; } .fres-header__tory-dot { width: 6px; height: 6px; border-radius: 50%; background: #3ad26b; box-shadow: 0 0 0 3px rgba(58, 210, 107, 0.18); animation: fresToryPulse 1.8s ease-in-out infinite; } @keyframes fresToryPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(58, 210, 107, 0.18); } 50% { box-shadow: 0 0 0 5px rgba(58, 210, 107, 0.35); } } @media (prefers-reduced-motion: reduce) { .fres-header__tory-dot { animation: none; } } /* Defensive: hide any leaked Elementor header location */ body :where(.elementor-location-header) { display: none !important; } /* Theme native header may also still render; hide it as a safety net */ body :where(#masthead.site-header.elementor-loop-item), body.has-fres-header > #page > #masthead { display: none !important; } /* ── Easter-egg: cursor-following 5-second countdown + BioBasic stage ───── */ .fres-header__egg-cursor { position: fixed; left: 0; top: 0; z-index: 1100; pointer-events: none; transform: translate(14px, 18px) scale(0.7); opacity: 0; transition: opacity 140ms ease, transform 140ms ease; font-family: var(--fres-h-font, "Roboto", system-ui, sans-serif); font-weight: 800; font-size: 28px; line-height: 1; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 185, 188, 0.55); letter-spacing: 0; user-select: none; will-change: transform, opacity, left, top; } .fres-header__egg-cursor.is-visible { opacity: 1; transform: translate(14px, 18px) scale(1); } .fres-header__egg-cursor-num { display: inline-block; } /* Stage — drops down from below the header bar like a mega-menu panel. White-glass card, centered horizontally, anchored to the bar's bottom edge. */ .fres-header__egg-stage { position: fixed; top: var(--fres-h-bar-h, 88px); left: 50%; transform: translateX(-50%) translateY(-12px); z-index: 1100; width: min(560px, calc(100vw - 32px)); padding: 1.25rem 1.4rem 1.1rem; display: flex; flex-direction: row; align-items: center; gap: 1.1rem; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border: 1px solid var(--fres-h-border, rgba(0, 0, 0, 0.06)); border-radius: var(--fres-h-radius, 12px); box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.28), 0 8px 18px -10px rgba(0, 115, 125, 0.18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 320ms; } .fres-header__egg-stage.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s; } .fres-header__egg-stage[hidden] { display: none !important; } .fres-header.is-scrolled ~ .fres-header__egg-stage, body.has-fres-header > .fres-header__egg-stage { /* anchor under shrunk bar too — JS not needed since the var stays at 88 */ } .fres-header__egg-svg { flex-shrink: 0; order: 2; /* SVG on the right */ width: clamp(180px, 38%, 220px); height: auto; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.28)); transform: translateX(14px) scale(0.96); opacity: 0; transition: transform 480ms cubic-bezier(.2,.7,.2,1) 80ms, opacity 360ms ease 80ms; } .fres-header__egg-stage.is-open .fres-header__egg-svg { transform: translateX(0) scale(1); } .fres-header__egg-stage.is-open .fres-header__egg-svg { transform: translateY(0) scale(1); opacity: 1; } .fres-egg-led { animation: fresEggLed 1.4s ease-in-out infinite; transform-origin: center; } @keyframes fresEggLed { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .fres-egg-ch4-tile { transform-origin: center; animation: fresEggGlow 2.2s ease-in-out infinite; } @keyframes fresEggGlow { 0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); } 50% { filter: brightness(1.08) drop-shadow(0 0 4px #5fe2e6); } } .fres-header__egg-coins { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } .fres-header__egg-coin { position: absolute; top: -10%; font-size: 18px; opacity: 0; animation: fresEggCoinFall 2.2s cubic-bezier(.4, 0, .6, 1) forwards; will-change: transform, opacity; filter: drop-shadow(0 4px 6px rgba(0, 115, 125, 0.35)); } @keyframes fresEggCoinFall { 0% { opacity: 0; transform: translateY(-20px) rotate(0deg); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(420px) rotate(540deg); } } .fres-header__egg-caption { order: 1; /* text on the left */ flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; color: var(--fres-h-fg-light, #1f2937); font-family: var(--fres-h-font, "Roboto", system-ui, sans-serif); text-align: left; transform: translateX(-8px); opacity: 0; transition: transform 480ms ease 200ms, opacity 360ms ease 200ms; } .fres-header__egg-stage.is-open .fres-header__egg-caption { transform: none; opacity: 1; } .fres-header__egg-caption strong { font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.25; color: var(--fres-h-accent-strong, #00737d); } .fres-header__egg-caption span { font-size: 0.82rem; line-height: 1.45; color: var(--fres-h-fg-light-soft, #4b5563); } .fres-header__egg-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--fres-h-fg-light-soft, #4b5563); cursor: pointer; transition: background 180ms ease, color 180ms ease, transform 180ms ease; } .fres-header__egg-close:hover { background: var(--fres-h-accent-soft, rgba(0, 185, 188, 0.08)); color: var(--fres-h-accent-strong, #00737d); transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .fres-header__egg-svg, .fres-header__egg-stage, .fres-header__egg-coin, .fres-egg-ch4-tile, .fres-egg-led, .fres-egg-spark { animation: none !important; transition: none !important; } }