/* ========================================================================== IB Weingärtner — Site Chrome (Phase 2) -------------------------------------------------------------------------- Header, Off-Canvas-Drawer, Floating-Sidebar, Mobile-CTA-Strip, Pre-Footer-CTA-Strip, Footer. Layout-Logik: · Mobile (<1024px) → Mobile-CTA sticky bottom; Sidebar versteckt; Drawer für Hauptnav. · Desktop (≥1024px) → Sidebar sticky rechts; Mobile-CTA versteckt; nav inline im Header. Editorial-technical visual language: Hairlines, Tinte, Akzent als Signal nicht als Fläche. ========================================================================== */ @layer components { /* CSS-Custom-Property — Breite der reservierten Sidebar-Zone (Desktop). */ :root { --sidebar-zone: 4.5rem; /* ~72px: 48px column flush right + 24px breathing */ } /* ==================================================================== GLOBAL SAFETY NET — prevent horizontal page overflow -------------------------------------------------------------------- Both `` and `` clip horizontally. `clip` doesn't create a scroll container so `position: sticky` continues to work. Some browsers/devices route touch-driven horizontal scroll through the body even when html clips — clipping both kills both vectors. -------------------------------------------------------------------- */ html, body { overflow-x: clip; } /* ==================================================================== LONG-WORD SAFETY — German compounds in display headings -------------------------------------------------------------------- "Gebäudeausrüstung" / "Energieoptimierung" etc. at display sizes can overflow narrow viewports. `hyphens: auto` honors the html `lang="de"` dictionary; `overflow-wrap: anywhere` is the brutal fallback if a dictionary break isn't available. -------------------------------------------------------------------- */ :where( .hero__title, .hero--image .hero__callout-title, .section-head__title, .cta-strip__title ) { overflow-wrap: anywhere; hyphens: auto; } /* ==================================================================== SITE HEADER — sticky, hairline-bottomed -------------------------------------------------------------------- */ .site-header { position: sticky; inset-block-start: 0; z-index: 40; background-color: var(--color-bg); border-block-end: 1px solid var(--color-border); backdrop-filter: saturate(120%) blur(6px); -webkit-backdrop-filter: saturate(120%) blur(6px); } .site-header__inner { width: min(100% - 2 * var(--space-5), var(--container-wide)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 4.5rem; } /* On desktop, reserve right-edge for the floating sidebar. */ @media (min-width: 1024px) { .site-header__inner { padding-inline-end: var(--sidebar-zone); } } /* Brand wordmark */ .brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--color-text); line-height: 1.1; } .brand:hover { color: var(--color-text-strong); text-decoration: none; } /* Brand mark — official IB|W wordmark (Phase 10). Inline SVG inherits color from `.brand` via currentColor; flex-shrink keeps it from squashing on narrow viewports. */ .brand__mark { display: block; height: 1.85rem; width: auto; color: var(--color-text); flex-shrink: 0; } .brand:hover .brand__mark { color: var(--color-text-strong); } /* Legacy CAD-callout dot — preserved for one-line swap-back via templates/partials/brand-mark.legacy.php. */ .brand__mark--legacy { display: inline-block; height: 0.7rem; width: 0.7rem; background-color: var(--color-text); box-shadow: 0.18rem 0.18rem 0 0 var(--color-accent); } .brand__mark--legacy svg { display: none; } .brand__text { display: flex; flex-direction: column; gap: 0.1rem; } .brand__name { font-size: var(--text-base); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); color: var(--color-text-strong); } .brand__sub { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-text-muted); font-weight: var(--font-medium); } @media (max-width: 480px) { .brand__sub { display: none; } } /* Inline navigation (desktop) */ .site-nav { display: none; } @media (min-width: 900px) { .site-nav { display: block; } .site-nav__list { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; } .site-nav__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); letter-spacing: -0.005em; color: var(--color-text-muted); text-decoration: none; padding-block: var(--space-2); border-block-end: 1px solid transparent; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .site-nav__link:hover { color: var(--color-text-strong); text-decoration: none; } .site-nav__link.is-active { color: var(--color-text-strong); } .site-nav__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-accent); flex-shrink: 0; } } /* Mobile nav toggle */ .nav-toggle { display: inline-flex; align-items: center; gap: var(--space-3); background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text); padding: var(--space-2) var(--space-4); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-medium); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; cursor: pointer; line-height: 1; min-height: 2.5rem; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .nav-toggle:hover { background-color: var(--color-bg-muted); border-color: var(--color-text); } @media (min-width: 900px) { .nav-toggle { display: none; } } .nav-toggle__bars { position: relative; display: inline-block; width: 18px; height: 12px; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; inset-inline: 0; height: 1px; background-color: currentColor; } .nav-toggle__bars::before { inset-block-start: 0; } .nav-toggle__bars::after { inset-block-end: 0; } /* Center bar via background gradient on the wrapper for crispness */ .nav-toggle__bars { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 50%; } /* ==================================================================== OFF-CANVAS NAV DRAWER (mobile / tablet) -------------------------------------------------------------------- */ /* When closed, the drawer is `display: none` — fully removed from layout. No bounding rect, no off-screen panel for the browser to (mis)include in scroll calculations. `transition: display ... allow-discrete` keeps the drawer rendered while the close animation plays, then drops it. */ .nav-drawer { position: fixed; inset: 0; z-index: 60; display: none; pointer-events: none; transition: display var(--duration-normal) allow-discrete; } .nav-drawer[data-open="true"] { display: block; pointer-events: auto; } .nav-drawer__overlay { position: absolute; inset: 0; background-color: rgb(33 44 54 / 0); transition: background-color var(--duration-normal) var(--ease-standard); } .nav-drawer[data-open="true"] .nav-drawer__overlay { background-color: rgb(33 44 54 / 0.55); } .nav-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(28rem, 88%); background-color: var(--color-bg); border-inline-start: 1px solid var(--color-border-strong); transform: translateX(100%); transition: transform var(--duration-normal) var(--ease-emphasized); display: flex; flex-direction: column; overflow-y: auto; padding: var(--space-7) var(--space-6) var(--space-7); } .nav-drawer[data-open="true"] .nav-drawer__panel { transform: translateX(0); } /* When the drawer goes from `display: none` → `display: block`, the panel is freshly rendered and must start at translateX(100%) for the slide-in animation. @starting-style provides that initial frame. */ @starting-style { .nav-drawer[data-open="true"] .nav-drawer__panel { transform: translateX(100%); } } .nav-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-7); } .nav-drawer__close { background: transparent; border: 1px solid var(--color-border-strong); color: var(--color-text); width: 2.5rem; height: 2.5rem; font-size: 1.25rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--ease-standard); } .nav-drawer__close:hover { background-color: var(--color-bg-muted); } .nav-drawer__list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--color-border); } .nav-drawer__link { display: grid; grid-template-columns: 2.5rem 1fr 1.5rem; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-1); font-size: var(--text-xl); font-weight: var(--font-light); letter-spacing: var(--tracking-tight); color: var(--color-text-strong); text-decoration: none; border-block-end: 1px solid var(--color-border); transition: color var(--duration-fast) var(--ease-standard); } .nav-drawer__link:hover { color: var(--color-text); text-decoration: none; } .nav-drawer__link:hover .nav-drawer__arrow { transform: translateX(4px); } .nav-drawer__num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-subtle); letter-spacing: 0.04em; } .nav-drawer__link.is-active .nav-drawer__num { color: var(--color-accent); } .nav-drawer__link.is-active .nav-drawer__label { color: var(--color-text-strong); } .nav-drawer__arrow { display: inline-block; width: 12px; height: 1px; background-color: currentColor; position: relative; justify-self: end; transition: transform var(--duration-normal) var(--ease-emphasized); } .nav-drawer__arrow::after { content: ""; position: absolute; inset-inline-end: -1px; inset-block-start: -3px; width: 6px; height: 6px; border-block-start: 1px solid currentColor; border-inline-end: 1px solid currentColor; transform: rotate(45deg); } .nav-drawer__contact { margin-block-start: auto; padding-block-start: var(--space-7); } .nav-drawer__contact ul { list-style: none; margin: var(--space-4) 0 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .nav-drawer__contact a { color: var(--color-text); text-decoration: none; font-size: var(--text-lg); border-block-end: 1px solid transparent; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .nav-drawer__contact a:hover { color: var(--color-accent); border-color: var(--color-accent); } /* When drawer is open, lock body scroll */ body[data-nav-open="true"] { overflow: hidden; } /* ==================================================================== FLOATING SIDEBAR — desktop only (≥1024px) -------------------------------------------------------------------- */ .floating-sidebar { display: none; } @media (min-width: 1024px) { .floating-sidebar { display: block; position: fixed; inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); z-index: 30; } .floating-sidebar__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background-color: var(--color-bg-strong); border-inline-start: 1px solid rgb(255 255 255 / 0.08); } .floating-sidebar__list > li + li { border-block-start: 1px solid rgb(255 255 255 / 0.1); } .floating-sidebar__item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: 3.5rem; padding: var(--space-3) var(--space-2); color: rgb(255 255 255 / 0.6); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); } .floating-sidebar__item:hover { color: var(--color-text-on-strong); background-color: rgb(255 255 255 / 0.06); text-decoration: none; } .floating-sidebar__item:hover .floating-sidebar__icon { color: var(--color-accent); } .floating-sidebar__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--color-text-on-strong); transition: color var(--duration-fast) var(--ease-standard); } .floating-sidebar__icon svg { width: 100%; height: 100%; } .floating-sidebar__label { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-medium); color: inherit; } } /* ==================================================================== MOBILE CTA STRIP — sticky bottom on <1024px -------------------------------------------------------------------- */ .mobile-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; display: flex; background-color: var(--color-bg); border-block-start: 1px solid var(--color-border-strong); box-shadow: 0 -4px 16px -8px rgb(33 44 54 / 0.15); /* Reserve safe-area on iOS notched devices */ padding-block-end: env(safe-area-inset-bottom, 0); } @media (min-width: 1024px) { .mobile-cta { display: none; } } .mobile-cta__btn { flex: 1 1 0; /* Kill default min-width: auto on flex children — without it, button content (icon + caption + phone number) can push the item wider than its 50% allotment on narrow viewports and leak horizontal scroll. */ min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) var(--space-3); color: var(--color-text); text-decoration: none; min-height: 3.5rem; transition: background-color var(--duration-fast) var(--ease-standard); } .mobile-cta__btn:hover { background-color: var(--color-bg-muted); text-decoration: none; } .mobile-cta__btn:active { background-color: var(--color-bg-subtle); } .mobile-cta__btn + .mobile-cta__btn { border-inline-start: 1px solid var(--color-border); } .mobile-cta__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--color-text); flex-shrink: 0; } .mobile-cta__icon svg { width: 100%; height: 100%; } .mobile-cta__label { display: flex; flex-direction: column; gap: 1px; line-height: 1.1; text-align: start; } .mobile-cta__caption { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: var(--font-medium); } .mobile-cta__value { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-strong); } /* When mobile-cta is shown, push body content above it so footer doesn't hide behind. */ @media (max-width: 1023.98px) { body { padding-block-end: 3.5rem; } /* Lift Phase-0 sandbox accent-switch above the strip when both render. */ .accent-switch { inset-block-end: calc(3.5rem + var(--space-3)); } } /* ==================================================================== PRE-FOOTER CTA STRIP — opt-in, ink-section variant -------------------------------------------------------------------- */ .cta-strip__title { font-size: var(--text-3xl); font-weight: var(--font-light); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: var(--space-5) 0 var(--space-7) 0; max-width: 28ch; text-wrap: balance; } .cta-strip__title .accent { color: var(--color-accent); font-style: normal; } .cta-strip__actions { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; } .cta-strip__phone { display: inline-flex; flex-direction: column; gap: var(--space-1); color: var(--color-text-on-strong); text-decoration: none; line-height: 1.1; padding-inline-start: var(--space-5); border-inline-start: 1px solid rgb(255 255 255 / 0.2); } .cta-strip__phone:hover { color: var(--color-accent); text-decoration: none; } .cta-strip__phone-caption { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgb(255 255 255 / 0.55); font-weight: var(--font-medium); } .cta-strip__phone-number { font-size: var(--text-xl); font-weight: var(--font-light); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; } /* ==================================================================== SITE FOOTER — 3-column desktop, stacked mobile -------------------------------------------------------------------- */ .site-footer { background-color: var(--color-bg); border-block-start: 1px solid var(--color-border); padding-block: var(--space-8) var(--space-7); margin-block-start: var(--space-9); } /* When the CTA-strip is visible right above, the ink-section provides its own top boundary — no double-spacing. */ .cta-strip + .site-footer { margin-block-start: 0; } .site-footer__inner { width: min(100% - 2 * var(--space-5), var(--container-wide)); margin-inline: auto; } @media (min-width: 1024px) { .site-footer__inner { padding-inline-end: var(--sidebar-zone); } } .site-footer__cols { display: grid; grid-template-columns: 1fr; gap: var(--space-7); } @media (min-width: 768px) { .site-footer__cols { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-8); } } .site-footer__col { display: flex; flex-direction: column; gap: var(--space-4); } .site-footer__brandrow { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); } .site-footer__brand { font-size: var(--text-xl); font-weight: var(--font-medium); letter-spacing: var(--tracking-tight); color: var(--color-text-strong); margin: 0; line-height: 1.2; } .site-footer__sub { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .site-footer__address { font-style: normal; color: var(--color-text); line-height: 1.6; margin-block-start: var(--space-3); } .site-footer__address span { display: block; } .site-footer__map-link { align-self: start; margin-block-start: var(--space-2); } .site-footer__contact, .site-footer__links { list-style: none; margin: var(--space-4) 0 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); } .site-footer__contact li { display: flex; flex-direction: column; gap: var(--space-1); } .site-footer__caption { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-text-subtle); font-weight: var(--font-medium); } .site-footer__contact a { font-size: var(--text-base); color: var(--color-text); text-decoration: none; border-block-end: 1px solid transparent; align-self: start; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .site-footer__contact a:hover { color: var(--color-accent); border-color: var(--color-accent); } .site-footer__links { gap: var(--space-3); } .site-footer__links a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); border-block-end: 1px solid transparent; align-self: start; transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .site-footer__links a:hover { color: var(--color-text); border-color: var(--color-text); } .site-footer .rule { margin-block: var(--space-7) var(--space-5); } .site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); color: var(--color-text-muted); } .site-footer__base small { font-size: var(--text-xs); letter-spacing: 0.02em; } .site-footer__credit { color: var(--color-text-subtle); } /* ==================================================================== CONTAINER RIGHT-ZONE RESERVATION — keep page content clear of sidebar -------------------------------------------------------------------- Applied at ≥1024px to

's direct .container/.container--wide children. Header + footer get the same treatment in their own blocks above. The Phase-0 sandbox uses .container--wide inside .section, so this targets that flow. -------------------------------------------------------------------- */ @media (min-width: 1024px) { main > .section > .container, main > .section > .container--wide, main > .container, main > .container--wide { padding-inline-end: var(--sidebar-zone); } /* hero--image's media is full-bleed inside .section — no padding needed there, but the .hero__callout sits inside the media absolutely; nothing to adjust. */ } }