/* * SGHR theme chrome — site header, primary navigation (with mega * panels), language switcher, mobile drawer, and footer. * * All values are derived from theme.json presets via * `var(--wp--preset--*)`. No hex literals here -- a brand refresh is * a pure tokens edit. * * Layout breakpoints (kept deliberately small in count): * - `min-width: 880px` -- footer switches to two columns. * - `min-width: 1180px` -- desktop chrome: utility bar, inline nav, * desktop CTA visible; burger + drawer hide. * * State is driven by data-attributes set by chrome.js * (`data-sghr-drawer-open` on , `data-mega-open` on nav

). * Honours `prefers-reduced-motion`. */ :root { --sghr-chrome-z-utility: 20; --sghr-chrome-z-main: 30; --sghr-chrome-z-mega: 25; --sghr-chrome-z-drawer-scrim: 80; --sghr-chrome-z-drawer: 90; --sghr-chrome-pad-x: clamp(1rem, 1rem + 2.5vw, 3.5rem); /* Maximum content width shared by the header, the mega panel inner, * the footer top, and the footer bottom. Picked to mirror the 1440px * Pencil frame so chrome content visually aligns at any viewport * wider than the cap. */ --sghr-content-max: 90rem; --sghr-chrome-utility-h: 2.25rem; --sghr-chrome-main-h: 5.5rem; --sghr-chrome-main-h-sticky: 4rem; --sghr-chrome-ease: cubic-bezier(0.4, 0, 0.2, 1); --sghr-chrome-ease-emph: cubic-bezier(0.32, 0.72, 0, 1); --sghr-chrome-dur-fast: 140ms; --sghr-chrome-dur: 200ms; --sghr-chrome-dur-slow: 320ms; } @media (prefers-reduced-motion: reduce) { :root { --sghr-chrome-dur-fast: 0ms; --sghr-chrome-dur: 0ms; --sghr-chrome-dur-slow: 0ms; } } /* ------------------------------------------------------------------ * * Reset slivers — the theme inherits a lot from theme.json, so this * * file only nudges what the chrome needs. * * ------------------------------------------------------------------ */ .sghr-header, .sghr-footer { box-sizing: border-box; } .sghr-header *, .sghr-header *::before, .sghr-header *::after, .sghr-footer *, .sghr-footer *::before, .sghr-footer *::after { box-sizing: border-box; } /* Body lock when drawer is open — prevents scroll bleed-through. */ html[data-sghr-drawer-open="true"], body[data-sghr-drawer-open="true"] { overflow: hidden; touch-action: none; } /* ------------------------------------------------------------------ * * Skip link * * ------------------------------------------------------------------ */ .sghr-skiplink { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 1000; padding: 0.5rem 0.85rem; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--primary-contrast); border-radius: 5px; font-weight: 500; transform: translateY(-150%); transition: transform var(--sghr-chrome-dur) var(--sghr-chrome-ease); } .sghr-skiplink:focus { transform: translateY(0); outline: none; box-shadow: 0 0 0 3px rgba(42, 96, 143, 0.45); } /* ------------------------------------------------------------------ * * Site header (sticky shell) * * ------------------------------------------------------------------ */ /* WordPress wraps every template part in `

` (or whatever tagName is set in the template). That * wrapper is the *parent* of our `.sghr-header`, and `position: sticky` * is bounded by its parent's box. Because the wrapper only contains the * header, the wrapper's height equals the header's height — so sticky * has zero scroll room and the header simply scrolls away with the * wrapper. Collapsing the wrapper with `display: contents` makes * `.sghr-header` a layout child of `.wp-site-blocks` (the full page), * which gives sticky the room it needs while keeping the semantic * `

` element in the accessibility tree. */ .wp-site-blocks > .wp-block-template-part:has(> .sghr-header) { display: contents; } .sghr-header { position: sticky; top: 0; z-index: var(--sghr-chrome-z-main); background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--wp--preset--color--border); transition: box-shadow var(--sghr-chrome-dur) var(--sghr-chrome-ease), border-color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } /* Sticky state mirrors Pencil frame "02 - Header / Desktop sticky": * the hairline border disappears and is replaced by a single soft * drop shadow (no second 1px hard line). Utility bar collapses, main * bar shrinks, brand + CTA scale down. */ .sghr-header.is-sticky { border-bottom-color: transparent; box-shadow: 0 2px 14px rgba(26, 31, 38, 0.08); } /* ------------------------------------------------------------------ * * Utility bar (top thin row): language pills + search + login * * ------------------------------------------------------------------ */ .sghr-utility { display: none; background: var(--wp--preset--color--surface); border-bottom: 1px solid var(--wp--preset--color--border); min-height: var(--sghr-chrome-utility-h); z-index: var(--sghr-chrome-z-utility); /* Utility bar collapses to zero height when the header is sticky * (Pencil frame 02). Animate max-height + opacity together so the * row glides away rather than snapping. overflow:hidden is required * for the max-height collapse to clip the inner content. */ overflow: hidden; max-height: 4rem; opacity: 1; transition: max-height var(--sghr-chrome-dur) var(--sghr-chrome-ease), opacity var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), border-color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } @media (min-width: 1180px) { /* Utility bar (DE/FR · search · login) is desktop chrome only; the * drawer carries the same actions on smaller viewports, so the bar * hides at the same breakpoint as the desktop nav. */ .sghr-utility { display: block; } } .sghr-header.is-sticky .sghr-utility { max-height: 0; opacity: 0; border-bottom-color: transparent; pointer-events: none; } .sghr-utility__inner { display: flex; align-items: center; justify-content: flex-end; gap: 0.875rem; padding-inline: var(--sghr-chrome-pad-x); max-width: var(--sghr-content-max); margin: 0 auto; min-height: var(--sghr-chrome-utility-h); font-size: 14px; } /* Language pills — small rounded inline list, current is filled. */ .sghr-langs { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; } .sghr-langs--utility { background: transparent; border-radius: 999px; padding: 2px; } .sghr-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 1.625rem; padding-inline: 0.5rem; border-radius: 999px; color: var(--wp--preset--color--ink-muted); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; transition: background-color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-lang:hover { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface-sunken); } .sghr-lang.is-active { color: var(--wp--preset--color--ink); background: var(--wp--preset--color--primary-soft); } .sghr-lang:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } /* Utility search — collapses into icon button; expands on focus. */ .sghr-utility__search { display: flex; align-items: center; gap: 0.4rem; } .sghr-utility__search-btn { border: 0; background: transparent; color: var(--wp--preset--color--ink); padding: 0.25rem; cursor: pointer; display: inline-flex; border-radius: 4px; transition: color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-utility__search-btn:hover { color: var(--wp--preset--color--primary); } .sghr-utility__search-btn:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .sghr-utility__search-input { width: 0; max-width: 0; min-width: 0; padding: 0; border: 0; background: transparent; font: inherit; color: var(--wp--preset--color--ink); transition: max-width var(--sghr-chrome-dur) var(--sghr-chrome-ease), padding var(--sghr-chrome-dur) var(--sghr-chrome-ease); } .sghr-utility__search:focus-within .sghr-utility__search-input, .sghr-utility__search-input:focus, .sghr-utility__search-input:not(:placeholder-shown) { max-width: 11rem; padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--wp--preset--color--border-strong); } .sghr-utility__search-input:focus { outline: none; border-color: var(--wp--preset--color--primary); } .sghr-utility__sep { width: 1px; height: 1.125rem; background: var(--wp--preset--color--border-strong); display: inline-block; } .sghr-utility__account { color: var(--wp--preset--color--ink); text-decoration: none; font-weight: 600; font-size: 14px; padding: 0.4rem 0.75rem; border-radius: 999px; transition: background-color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-utility__account:hover { background: var(--wp--preset--color--surface-sunken); color: var(--wp--preset--color--primary); } .sghr-utility__account:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } /* ------------------------------------------------------------------ * * Main bar: brand + nav + actions * * ------------------------------------------------------------------ */ .sghr-main { background: var(--wp--preset--color--surface); position: relative; /* positioning context for the full-width mega panel */ } .sghr-main__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 0.5rem + 2vw, 3rem); padding-inline: var(--sghr-chrome-pad-x); max-width: var(--sghr-content-max); margin: 0 auto; min-height: var(--sghr-chrome-main-h); transition: min-height var(--sghr-chrome-dur) var(--sghr-chrome-ease); } .sghr-header.is-sticky .sghr-main__inner { min-height: var(--sghr-chrome-main-h-sticky); } .sghr-brand { display: inline-flex; align-items: center; flex: 0 0 auto; transition: transform var(--sghr-chrome-dur) var(--sghr-chrome-ease); } .sghr-brand:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; border-radius: 4px; } .sghr-brand__logo { display: block; height: 3rem; width: auto; max-width: 5rem; object-fit: contain; } .sghr-brand__wordmark { display: inline-block; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--wp--preset--color--primary); line-height: 1; transition: font-size var(--sghr-chrome-dur) var(--sghr-chrome-ease); } .sghr-header.is-sticky .sghr-brand__logo { height: 2.25rem; } .sghr-header.is-sticky .sghr-brand__wordmark { font-size: 18px; } /* Sticky-state size tweaks for nav + actions + CTA. Mirrors Pencil * frame "02 - Header / Desktop sticky": * nav gap 36 -> 32 * actions gap 18 -> 14 * CTA padding 10/20 -> 8/16 (≈ 0.5rem 1rem) * CTA font base (16px) -> sm (14px) * CTA gap 8 -> 6 (≈ 0.375rem) */ .sghr-header.is-sticky .sghr-nav__list { gap: clamp(0.5rem, 0.25rem + 0.6vw, 1.25rem); } .sghr-header.is-sticky .sghr-main__actions { gap: 0.5rem; } .sghr-header.is-sticky .sghr-main__actions .sghr-cta { padding: 0.5rem 1rem; font-size: 14px; gap: 0.375rem; } /* Brand also shrinks slightly when hovered. Tiny hint, no bounce. */ .sghr-brand:hover { transform: translateY(-1px); } /* ------------------------------------------------------------------ * * Primary nav (desktop horizontal list with mega panels) * * ------------------------------------------------------------------ */ .sghr-nav { display: none; flex: 1 1 auto; min-width: 0; } /* Desktop nav only when the viewport is wide enough for 6 multi-word * German labels + logo + CTA + utility row. Below this the burger * drawer takes over. Adjust in concert with `.sghr-burger` and * `.sghr-drawer` breakpoints below. */ @media (min-width: 1180px) { .sghr-nav { display: flex; justify-content: center; } } .sghr-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(0.75rem, 0.25rem + 1vw, 1.75rem); } .sghr-nav-item { position: relative; } .sghr-nav-item--has-mega { /* Static so the mega panel positions against .sghr-main and spans * the full viewport width instead of the narrow nav

. */ position: static; } .sghr-nav-link { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--wp--preset--color--ink); font-weight: 500; font-size: 16px; line-height: 1.2; text-decoration: none; /* Never wrap a nav label across lines -- the labels are short * brand-controlled phrases. If they don't all fit horizontally the * drawer breakpoint above is the lever, not text wrapping. */ white-space: nowrap; padding: 0.65rem 0.15rem; position: relative; transition: color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-nav-link::after { content: ""; position: absolute; left: 0.15rem; right: 0.15rem; bottom: 0.25rem; height: 2px; background: var(--wp--preset--color--primary); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform var(--sghr-chrome-dur) var(--sghr-chrome-ease); } .sghr-nav-link:hover, .sghr-nav-item.is-current > .sghr-nav-link { color: var(--wp--preset--color--primary); } .sghr-nav-link:hover::after, .sghr-nav-item[data-mega-open="true"] > .sghr-nav-link::after, .sghr-nav-item.is-current > .sghr-nav-link::after { transform: scaleX(1); } .sghr-nav-link:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; border-radius: 4px; } .sghr-nav-link .sghr-icon--chevron { transition: transform var(--sghr-chrome-dur) var(--sghr-chrome-ease); color: var(--wp--preset--color--ink-muted); } .sghr-nav-item[data-mega-open="true"] > .sghr-nav-link .sghr-icon--chevron { transform: rotate(180deg); color: var(--wp--preset--color--primary); } /* Submenu fallback for non-mega items with classic children. */ .sghr-subnav { list-style: none; margin: 0; padding: 0.5rem 0; position: absolute; top: 100%; left: 0; min-width: 12rem; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 8px; box-shadow: 0 6px 24px rgba(26, 31, 38, 0.08); display: none; } .sghr-nav-item:hover > .sghr-subnav, .sghr-nav-item:focus-within > .sghr-subnav { display: block; } .sghr-subnav .sghr-nav-link { padding: 0.5rem 1rem; width: 100%; } /* ------------------------------------------------------------------ * * Mega panel (desktop only positioning) * * ------------------------------------------------------------------ */ /* Full-width band attached to the bottom of .sghr-main. The panel is * absolutely positioned against .sghr-main (which sets position: * relative) so it spans 100% of the header width regardless of which * nav

triggered it. The visual emphasis is the soft drop shadow * extending below + a subtle top border that aligns with the main bar's * existing bottom border. */ .sghr-mega-panel { position: absolute; top: 100%; left: 0; right: 0; width: 100%; z-index: var(--sghr-chrome-z-mega); background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--border); border-bottom: 1px solid var(--wp--preset--color--border); box-shadow: 0 18px 28px -8px rgba(26, 31, 38, 0.10); opacity: 0; pointer-events: none; transform: translateY(-8px); visibility: hidden; transition: opacity var(--sghr-chrome-dur) var(--sghr-chrome-ease-emph), transform var(--sghr-chrome-dur) var(--sghr-chrome-ease-emph), visibility 0s linear var(--sghr-chrome-dur); } .sghr-nav-item[data-mega-open="true"] > .sghr-mega-panel { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; transition: opacity var(--sghr-chrome-dur) var(--sghr-chrome-ease-emph), transform var(--sghr-chrome-dur) var(--sghr-chrome-ease-emph), visibility 0s linear 0s; } .sghr-mega-panel[hidden] { display: block; /* keep visible to the layout; opacity/visibility govern it */ } /* Inner: a single grid that places columns and the optional promo * card as siblings, mirroring Pencil frame 03. * * Layout rules: * - The inner is centred inside the full-width band and capped at * `--sghr-content-max` so its left/right edges line up with the * navbar items above (same horizontal padding as .sghr-main). * - Each track has a comfortable min/max so a single-column panel * does NOT stretch edge-to-edge; instead it sits at the start of * the content area, visually anchored under the nav items. * - At 3+ tracks the grid fills the available width evenly, matching * the Pencil "Zertifizierung" 4-up layout. */ .sghr-mega-panel__inner { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 3.5rem); padding: 2.75rem var(--sghr-chrome-pad-x); max-width: var(--sghr-content-max, 90rem); margin: 0 auto; align-items: start; justify-content: start; /* anchor 1-2 track grids to the left, not the centre */ } .sghr-mega-panel__inner[data-tracks="1"] { grid-template-columns: minmax(16rem, 22rem); } .sghr-mega-panel__inner[data-tracks="2"] { grid-template-columns: repeat(2, minmax(0, 20rem)); } .sghr-mega-panel__inner[data-tracks="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sghr-mega-panel__inner[data-tracks="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sghr-mega-panel__inner[data-tracks="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Below the desktop comfort threshold, fall back to two columns so * 4-track panels (e.g. "Zertifizierung") still breathe. */ @media (max-width: 1199px) { .sghr-mega-panel__inner[data-tracks="3"], .sghr-mega-panel__inner[data-tracks="4"], .sghr-mega-panel__inner[data-tracks="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Column kicker / supertitle: 12px / 600 / ink-subtle, uppercased * via CSS for a consistent supertitle treatment across the panel. */ .sghr-mega-col__title { margin: 0 0 1.25rem 0; /* 20px to match the column's vertical gap */ font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--ink-subtle); } .sghr-mega-col__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; /* small gap; the link's own padding-y carries most of the rhythm */ } .sghr-mega-link__a { display: block; padding: 0.5rem 0.75rem; /* 8px / 12px -- combined with gap = 20px between link blocks per design */ margin: 0 -0.75rem; border-radius: 8px; text-decoration: none; color: var(--wp--preset--color--ink); transition: background-color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), transform var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-mega-link__a:hover, .sghr-mega-link__a:focus-visible { background: var(--wp--preset--color--primary-soft); transform: translateX(2px); outline: none; } .sghr-mega-link__label { display: block; font-size: 18px; /* size/lg per design */ font-weight: 600; line-height: 1.3; } .sghr-mega-link__a:hover .sghr-mega-link__label, .sghr-mega-link__a:focus-visible .sghr-mega-link__label { color: var(--wp--preset--color--primary); } .sghr-mega-link__desc { display: block; margin-top: 4px; /* gap inside link block per design */ font-size: 14px; /* size/sm per design */ color: var(--wp--preset--color--ink-muted); line-height: 1.5; } /* Promo card -- "featured" frame in Pencil (id AZ8RX). * Spec: surface-warm fill, 14px corner radius, 20/20/22/20 padding, * 14px vertical gap between children. No border in the design -- * the warm fill against the white panel is the only separation. */ .sghr-mega-promo { background: var(--wp--preset--color--surface-warm); border-radius: 14px; padding: 20px 20px 22px 20px; display: flex; flex-direction: column; gap: 14px; } /* The walker wraps kicker/title/text/CTA inside __body so the optional * image sits cleanly above the text block. The body itself is a flex * column so the same 14px rhythm applies to the inner children too -- * otherwise the

s collapse against each other (margin: 0 reset). */ .sghr-mega-promo__body { display: flex; flex-direction: column; gap: 14px; } .sghr-mega-promo__media { overflow: hidden; border-radius: 10px; aspect-ratio: 16 / 10; background: var(--wp--preset--color--accent-warm-soft); } .sghr-mega-promo__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Kicker / supertitle: 12px / 600 / primary with wide tracking and * uppercased via CSS so editors can write natural casing in the ACF * field while the visual treatment stays consistent. */ .sghr-mega-promo__kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--primary); } /* Title: 28px / 600 / ink, tight tracking + line-height. */ .sghr-mega-promo__title { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; color: var(--wp--preset--color--ink); } .sghr-mega-promo__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--ink-muted); } .sghr-mega-promo__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--wp--preset--color--primary); font-weight: 600; font-size: 14px; text-decoration: none; transition: gap var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-mega-promo__cta:hover { color: var(--wp--preset--color--primary-hover); gap: 10px; } /* ------------------------------------------------------------------ * * Header actions: CTA + burger * * ------------------------------------------------------------------ */ .sghr-main__actions { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; } .sghr-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.2rem; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary); font-weight: 600; font-size: 16px; line-height: 1.2; border: 1px solid transparent; border-radius: 999px; text-decoration: none; cursor: pointer; transition: background-color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), transform var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), box-shadow var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), padding var(--sghr-chrome-dur) var(--sghr-chrome-ease), font-size var(--sghr-chrome-dur) var(--sghr-chrome-ease), gap var(--sghr-chrome-dur) var(--sghr-chrome-ease); } .sghr-cta:hover { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-contrast); } .sghr-cta:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; } .sghr-cta--block { width: 100%; } .sghr-cta--sm { padding: 0.6rem 1rem; font-size: 14px; } .sghr-burger { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; background: transparent; color: var(--wp--preset--color--ink); cursor: pointer; border-radius: 999px; transition: background-color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-burger:hover { background: var(--wp--preset--color--surface-sunken); } .sghr-burger:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } @media (min-width: 1180px) { .sghr-burger { display: none; } } /* On screens narrower than the desktop nav breakpoint, hide the * desktop CTA in the main bar -- the drawer carries it instead so * the mobile bar stays clean. */ @media (max-width: 1179px) { .sghr-main__actions .sghr-cta { display: none; } } /* ------------------------------------------------------------------ * * Mobile drawer * * ------------------------------------------------------------------ */ .sghr-drawer__scrim { position: fixed; inset: 0; z-index: var(--sghr-chrome-z-drawer-scrim); background: rgba(26, 31, 38, 0.45); border: 0; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--sghr-chrome-dur) var(--sghr-chrome-ease); } body[data-sghr-drawer-open="true"] .sghr-drawer__scrim { opacity: 1; pointer-events: auto; } .sghr-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(22rem, 92vw); background: var(--wp--preset--color--surface); z-index: var(--sghr-chrome-z-drawer); display: flex; flex-direction: column; box-shadow: -10px 0 30px rgba(26, 31, 38, 0.12); transform: translateX(100%); transition: transform var(--sghr-chrome-dur-slow) var(--sghr-chrome-ease-emph); overscroll-behavior: contain; } .sghr-drawer[hidden] { display: flex; } /* JS toggles aria/visibility */ body[data-sghr-drawer-open="true"] .sghr-drawer { transform: translateX(0); } @media (min-width: 1180px) { .sghr-drawer, .sghr-drawer__scrim { display: none !important; } } .sghr-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; min-height: 4rem; border-bottom: 1px solid var(--wp--preset--color--border); flex: 0 0 auto; } .sghr-drawer__brand img { display: block; height: 2.25rem; width: auto; } .sghr-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: var(--wp--preset--color--ink); cursor: pointer; border-radius: 999px; } .sghr-drawer__close:hover { background: var(--wp--preset--color--surface-sunken); } .sghr-drawer__close:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .sghr-drawer__body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1rem 1.5rem 1rem; } .sghr-drawer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sghr-drawer__list .sghr-nav-item { border-bottom: 1px solid var(--wp--preset--color--border); } .sghr-drawer__list .sghr-nav-link { display: flex; width: 100%; min-height: 3.5rem; padding: 0 0.25rem; justify-content: space-between; font-size: 17px; font-weight: 600; } .sghr-drawer__list .sghr-nav-link::after { display: none; } .sghr-drawer__list .sghr-icon--chevron { color: var(--wp--preset--color--ink-subtle); } .sghr-drawer__list .sghr-nav-item[data-mega-open="true"] > .sghr-nav-link { color: var(--wp--preset--color--primary); } /* Mega panel collapses to inline accordion section inside the drawer. */ .sghr-drawer__list .sghr-mega-panel { position: static; transform: none; width: 100%; background: transparent; border: 0; box-shadow: none; border-radius: 0; visibility: visible; pointer-events: auto; opacity: 1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sghr-chrome-dur) var(--sghr-chrome-ease); } .sghr-drawer__list .sghr-nav-item[data-mega-open="true"] > .sghr-mega-panel { grid-template-rows: 1fr; } .sghr-drawer__list .sghr-mega-panel__inner, .sghr-drawer__list .sghr-mega-panel__inner[data-tracks] { grid-template-columns: 1fr !important; padding: 0.25rem 0.5rem 0.85rem 0.5rem; gap: 0.5rem; overflow: hidden; min-height: 0; } .sghr-drawer__list .sghr-mega-col { background: var(--wp--preset--color--primary-soft); border-radius: 10px; padding: 0.75rem 0.85rem; } .sghr-drawer__list .sghr-mega-link__a { margin: 0; padding: 0.5rem 0; border-radius: 0; } .sghr-drawer__list .sghr-mega-link__a:hover, .sghr-drawer__list .sghr-mega-link__a:focus-visible { background: transparent; transform: none; } .sghr-drawer__list .sghr-mega-link__label { font-size: 15px; } .sghr-drawer__list .sghr-mega-link__desc { display: none; } .sghr-drawer__list .sghr-mega-promo { display: none; } /* declutter the drawer */ .sghr-drawer__util { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem 0.25rem 0.5rem 0.25rem; margin-top: 0.5rem; border-top: 1px solid var(--wp--preset--color--border); } .sghr-drawer__util .sghr-langs { gap: 0.4rem; } .sghr-drawer__search, .sghr-drawer__account { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--wp--preset--color--ink); text-decoration: none; font-weight: 500; font-size: 14px; padding: 0.5rem 0.5rem; border-radius: 6px; transition: background-color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-drawer__search:hover, .sghr-drawer__account:hover { background: var(--wp--preset--color--surface-sunken); } .sghr-drawer__cta { margin-top: auto; } /* ------------------------------------------------------------------ * * Footer * * ------------------------------------------------------------------ */ .sghr-footer { background: var(--wp--preset--color--surface-warm); color: var(--wp--preset--color--ink-muted); margin-top: clamp(2rem, 4vw, 4rem); } .sghr-footer__top { padding-block: clamp(2rem, 1.5rem + 3vw, 3rem); } .sghr-footer__top-inner { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); grid-template-columns: 1fr; align-items: start; /* Match the header pattern: padding + max-width on the SAME box so * the content edges line up exactly with .sghr-main__inner. */ padding-inline: var(--sghr-chrome-pad-x); max-width: var(--sghr-content-max); margin: 0 auto; } @media (min-width: 880px) { .sghr-footer__top-inner { /* Per Pencil frame 06: brand fills remaining space on the left, * newsletter is a fixed ~420px column anchored to the right edge * of the content cap. */ grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } } .sghr-footer__brand { display: flex; flex-direction: column; gap: 0.5rem; color: var(--wp--preset--color--ink-muted); font-size: 14px; line-height: 1.55; } .sghr-footer__brand-title { margin: 0; font-weight: 600; color: var(--wp--preset--color--ink); font-size: 14px; line-height: 1.3; } .sghr-footer__address { margin: 0; font-style: normal; font-size: 14px; } .sghr-footer__line { margin: 0; } .sghr-footer__line a { color: var(--wp--preset--color--ink-muted); text-decoration: none; transition: color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-footer__line a:hover { color: var(--wp--preset--color--primary); } .sghr-footer__line--email a { color: var(--wp--preset--color--primary); font-weight: 500; } .sghr-footer__line--cta { margin-top: 0.5rem; } .sghr-footer__contact-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--wp--preset--color--primary) !important; font-weight: 600; transition: gap var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-footer__contact-link:hover { gap: 0.6rem; } .sghr-footer__newsletter { display: flex; flex-direction: column; gap: 0.875rem; /* Fill the grid track so the input + Abonnieren button reach the * right edge of the footer content cap, matching Pencil frame 06. */ width: 100%; } .sghr-footer__nl-title { margin: 0; font-weight: 600; color: var(--wp--preset--color--ink); font-size: 14px; } .sghr-footer__nl-intro { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wp--preset--color--ink-muted); } .sghr-footer__nl-form { display: grid; grid-template-columns: 1fr auto; gap: 0.625rem; align-items: stretch; } .sghr-footer__nl-input { min-height: 2.75rem; padding: 0 0.875rem; border: 1px solid var(--wp--preset--color--border-strong); border-radius: 8px; background: var(--wp--preset--color--surface); font: inherit; color: var(--wp--preset--color--ink); transition: border-color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease), box-shadow var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-footer__nl-input::placeholder { color: var(--wp--preset--color--ink-subtle); } .sghr-footer__nl-input:focus { outline: none; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px rgba(42, 96, 143, 0.20); } .sghr-footer__nl-form .sghr-cta { white-space: nowrap; } .sghr-footer__nl-status { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--wp--preset--color--ink-muted); } .sghr-footer__nl-status[data-status="ok"] { color: var(--wp--preset--color--success); } .sghr-footer__nl-status[data-status="err"] { color: var(--wp--preset--color--danger); } .sghr-footer__nl-privacy { margin: 0; font-size: 12px; color: var(--wp--preset--color--ink-subtle); line-height: 1.5; } .sghr-footer__divider { height: 1px; background: var(--wp--preset--color--border); } .sghr-footer__bottom { /* No horizontal padding on the band; gutters live on __bottom-inner * alongside max-width so the content lines up with the header. */ } .sghr-footer__bottom-inner { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-inline: var(--sghr-chrome-pad-x); max-width: var(--sghr-content-max); margin: 0 auto; min-height: 3.5rem; font-size: 12px; } .sghr-footer__legal, .sghr-footer__social { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; } .sghr-footer__copy { color: var(--wp--preset--color--ink-muted); font-weight: 500; } .sghr-footer__legal-list, .sghr-footer__social-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem; } .sghr-footer__legal-list li, .sghr-footer__social-list li { position: relative; } .sghr-footer__legal-list li:not(:last-child)::after, .sghr-footer__social-list li:not(:last-child)::after { content: "·"; margin-left: 0.75rem; color: var(--wp--preset--color--ink-subtle); } .sghr-footer__legal-list a, .sghr-footer__social-list a { color: var(--wp--preset--color--ink-muted); font-weight: 500; text-decoration: none; transition: color var(--sghr-chrome-dur-fast) var(--sghr-chrome-ease); } .sghr-footer__legal-list a:hover, .sghr-footer__social-list a:hover { color: var(--wp--preset--color--primary); } /* ------------------------------------------------------------------ * * Front-page hero (Pencil frame "09 - Homepage" → heroBg) * * ------------------------------------------------------------------ * * Full-bleed primary band with three text rows (eyebrow / h1 / sub) * left-aligned and vertically centered. A decorative koralle silhouette * sits flush right as a CSS background — no extra DOM, no LCP image, * pointer-events transparent. On narrow viewports the koralle fades * heavily so it never competes with the headline. */ .sghr-hero { position: relative; overflow: hidden; background: var(--wp--preset--color--primary); min-height: clamp(26rem, 22rem + 12vw, 35rem); /* 416px → 560px */ display: flex; align-items: center; isolation: isolate; } .sghr-hero::after { content: ""; position: absolute; /* Anchor near the vertical centre of the hero band but nudged down * a touch so the coral's visual mass sits below the headline rather * than competing with it. Combined with the smaller width clamp * below, the entire silhouette fits inside the band on every * viewport ≥ ~720 CSS px. */ top: 58%; transform: translateY(-50%); /* Align the koralle's right edge with the right edge of the * centred content container (.sghr-hero__inner is capped at * --sghr-content-max with --sghr-chrome-pad-x of side padding). * On viewports wider than the content cap, this pulls the koralle * inwards so it never touches the viewport edge; on narrower * viewports it falls back to the chrome's side padding so it stays * flush with header / footer / main content. */ right: max( var(--sghr-chrome-pad-x), calc((100% - var(--sghr-content-max)) / 2 + var(--sghr-chrome-pad-x)) ); /* Smaller than the previous 320–544 px range so the full coral * silhouette fits inside the hero's 416–560 px height (image * aspect ratio is 484/753, i.e. ≈ 0.64). At the upper bound * (~400 px wide) the rendered height is ~622 px — still slightly * taller than the hero on the very widest viewports, but close * enough that only the outermost frond tips clip. */ width: clamp(15rem, 13rem + 9vw, 25rem); /* 240px → 400px */ aspect-ratio: 484 / 753; /* matches the actual koralle-color.png so * `contain` leaves no transparent padding * inside the bounding box */ background: url("../img/koralle-color.png") no-repeat right center / contain; pointer-events: none; z-index: 0; opacity: 1; } .sghr-hero__inner { position: relative; z-index: 1; width: 100%; max-width: var(--sghr-content-max); margin: 0 auto; padding-inline: var(--sghr-chrome-pad-x); padding-block: clamp(3rem, 2rem + 4vw, 5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } .sghr-hero__eyebrow { margin: 0; color: var(--wp--preset--color--accent-warm); font-size: 14px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; } .sghr-hero__title { margin: 0; color: var(--wp--preset--color--primary-contrast); font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3rem); /* 4xl */ font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; max-width: 45rem; /* 720px */ } .sghr-hero__sub { margin: 0; color: var(--wp--preset--color--primary-soft); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* base → lg */ font-weight: 400; line-height: 1.45; max-width: 35rem; /* 560px */ } /* Mobile (Pencil frame "10 - Homepage / Mobile" → mHeroBg). * * Slightly tighter type, no max-width on lines, decorative koralle * faded so the headline owns the canvas. */ @media (max-width: 767px) { .sghr-hero { min-height: 0; align-items: stretch; } .sghr-hero__inner { padding-block: clamp(3rem, 2rem + 6vw, 4rem); gap: 1.125rem; } .sghr-hero__eyebrow { font-size: 12px; letter-spacing: 0.17em; } .sghr-hero__title { font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.125rem); /* 3xl */ line-height: 1.15; max-width: none; } .sghr-hero__sub { font-size: 16px; line-height: 1.5; max-width: none; } .sghr-hero::after { opacity: 0.18; width: 70%; } } /* The template-part wrapper around the hero adds no value, so collapse * its box so .sghr-hero is a direct child of .wp-site-blocks (matches * the same pattern used for the sticky header). */ .wp-site-blocks > .wp-block-template-part:has(> .sghr-hero) { display: contents; } /* ------------------------------------------------------------------ * * Front-page

alignment * * ------------------------------------------------------------------ * * The default WordPress `is-layout-constrained` rule centres direct * children with `margin-inline: auto`, which on the home page makes * each section's text column float in the middle of the canvas * instead of lining up with the hero's left edge. * * We override that here: * 1. The

itself sits inside the same 90rem content cap + * side padding the hero uses, so its left edge is identical to * `.sghr-hero__inner`'s left edge. * 2. Direct-child block-groups stop centring (`margin-left: 0`) * and keep the constrained content-size cap on the right via * `margin-right: auto` so long lines of body copy still wrap * at the comfortable ~42rem reading measure rather than * stretching across the full 1440 px band. * * Block authors editing the home page in the Site Editor see no * change — they still pick "Group" with the constrained layout; the * className `sghr-front-main` (added by the template) opts the *

into this left-aligned recipe. */ .sghr-front-main { max-width: var(--sghr-content-max); margin-inline: auto; padding-inline: var(--sghr-chrome-pad-x); } /* `!important` is required because WordPress's layout stylesheet * applies `margin-left: auto !important; margin-right: auto !important` * to every direct child of an `.is-layout-constrained` container. The * front-page

uses constrained layout (block-editor authors * expect that), so without `!important` here the WP rule wins and * the inner sections drift back to the page centre. */ .sghr-front-main > * { margin-inline-start: 0 !important; margin-inline-end: auto !important; } /* ------------------------------------------------------------------ * * Editor iframe nicety: hide the whole header in the block editor * * (the editor never executes the chrome JS, so the sticky behaviour * * looks broken if shown). * * ------------------------------------------------------------------ */ .editor-styles-wrapper .sghr-header, .editor-styles-wrapper .sghr-footer { display: none; }