@charset "UTF-8"; /* ========================================================================== Unfallexperten Ingenieurbüro — Design System Layout system modelled on the reference build the client approved. Accent colour uses the client's own brand blue rather than the reference's purple — swap --brand-a / --brand-b below to change it. ========================================================================== */ @import url("fonts.css"); /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Brand — sampled directly from the client's own logo (#005587) and extended into a scale. To go purple like the reference instead: --brand-a: #3F1D8C; --brand-b: #7C3AED; --brand-ink: #4C1D95; */ --brand-a: #00406A; --brand-b: #0A7ABF; --brand-ink: #002F4D; --brand-600: #005587; --brand-tint: #E6F1F8; /* Secondary — slate-teal, used for icons, eyebrows and gradient bands */ --teal-400: #6E939E; --teal-600: #4A6E7A; --teal-800: #1D4A58; --teal-900: #143743; /* Ink & surfaces */ --ink: #2C3033; --ink-soft: #5F6E75; --ink-mute: #8A979D; --line: #E4EAED; --surface: #FFFFFF; --surface-2: #F6F8F9; --surface-3: #EEF2F4; /* Gradients */ --grad-brand: linear-gradient(96deg, var(--brand-a) 0%, var(--brand-b) 100%); --grad-brand-hover: linear-gradient(96deg, var(--brand-ink) 0%, var(--brand-600) 100%); --grad-band: linear-gradient(102deg, #5C838E 0%, var(--teal-800) 62%, var(--teal-900) 100%); --grad-cta: linear-gradient(103deg, var(--brand-ink) 0%, var(--brand-b) 100%); /* Shape */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; /* Elevation */ --sh-card: 0 18px 46px -24px rgba(20, 55, 67, .30); --sh-card-hi: 0 26px 60px -22px rgba(20, 55, 67, .38); --sh-nav: 0 4px 22px -12px rgba(20, 55, 67, .34); /* Rhythm */ --callbar-h: 72px; --container: 1200px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(4rem, 9vw, 7.5rem); /* Motion */ --ease: cubic-bezier(.22, .61, .36, 1); --dur: .45s; } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Clears the sticky header so anchor targets are not hidden under it */ scroll-padding-top: 100px; } body { margin: 0; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1.0625rem; font-weight: 400; line-height: 1.75; color: var(--ink-soft); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* `clip` does NOT create a scroll container, `hidden` does — and a scroll container on is what makes position:fixed children (the call bar, the cookie banner) drift with the page on mobile Safari and Chrome. `hidden` stays first as the fallback for older engines. */ overflow-x: hidden; overflow-x: clip; } img, svg, video, iframe { max-width: 100%; display: block; } img, video { height: auto; } a { color: var(--brand-600); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--brand-ink); } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; } /* Browsers give

a 40px side margin and

the same. Both are used in the review cards, where that indent throws the text out of alignment with the stars above it. */ figure, blockquote { margin: 0; } hr { border: 0; border-top: 1px solid var(--line); margin: 0; } :focus-visible { outline: 3px solid var(--brand-b); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--brand-b); color: #fff; } .skip-link { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 200; padding: .8rem 1.6rem; background: var(--brand-ink); color: #fff; border-radius: 0 0 var(--r-sm) var(--r-sm); transition: transform .25s var(--ease); } .skip-link:focus { transform: translate(-50%, 0); color: #fff; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5 { margin: 0; color: var(--ink); line-height: 1.16; letter-spacing: -.015em; font-weight: 300; } h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); } h2 { font-size: clamp(1.95rem, 4vw, 3.3rem); } h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 400; } h4 { font-size: 1.15rem; font-weight: 500; } h1 strong, h2 strong, h3 strong { font-weight: 700; } h2 em { font-style: normal; color: var(--teal-600); font-weight: 600; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .eyebrow { display: block; font-size: 1.15rem; font-weight: 400; color: var(--ink-mute); letter-spacing: 0; margin-bottom: .3rem; } .lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-soft); max-width: 62ch; } .rule { width: 96px; height: 4px; border-radius: 2px; background: var(--grad-brand); margin: 1.75rem auto 0; border: 0; } .rule--left { margin-left: 0; margin-right: auto; } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 860px; } .container--wide { max-width: 1360px; } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(2.75rem, 6vw, 4.5rem); } .section--alt { background: var(--surface-2); } .section-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head p { margin-inline: auto; } .section-head--left { text-align: left; } .section-head--left p { margin-inline: 0; } .grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { --btn-py: .95rem; --btn-px: 2.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: var(--btn-py) var(--btn-px); border: 0; border-radius: var(--r-pill); background: var(--grad-brand); color: #fff; font-size: 1rem; font-weight: 500; line-height: 1.2; text-align: center; cursor: pointer; position: relative; isolation: isolate; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease); box-shadow: 0 12px 26px -14px rgba(0, 85, 135, .82); } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-brand-hover); opacity: 0; transition: opacity .3s var(--ease); } .btn:hover, .btn:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(0, 85, 135, .92); } .btn:hover::after, .btn:focus-visible::after { opacity: 1; } .btn:active { transform: translateY(0); } .btn svg { width: 1.15em; height: 1.15em; flex: none; } .btn--arrow svg { transition: transform .3s var(--ease); } .btn--arrow:hover svg { transform: translateX(5px); } .btn--sm { --btn-py: .62rem; --btn-px: 1.5rem; font-size: .95rem; } .btn--lg { --btn-py: 1.15rem; --btn-px: 2.7rem; font-size: 1.1rem; } .btn--block { display: flex; width: 100%; } /* Hero primary action — the phone number is the conversion on this site, so it gets its own size step and a stronger glow than a normal button. */ .btn--xl { --btn-py: 1.3rem; --btn-px: 3rem; font-size: 1.18rem; font-weight: 600; } .btn--xl svg { width: 1.25em; height: 1.25em; } .btn--pulse { box-shadow: 0 18px 40px -12px rgba(0, 85, 135, .95), 0 0 0 0 rgba(10, 122, 191, .55); animation: ctaPulse 2.8s var(--ease) infinite; } .btn--pulse:hover, .btn--pulse:focus-visible { animation-play-state: paused; box-shadow: 0 22px 46px -12px rgba(0, 85, 135, 1); } /* Ring expands outward and fades — no movement, so it draws the eye without the layout appearing to twitch. */ @keyframes ctaPulse { 0% { box-shadow: 0 18px 40px -12px rgba(0, 85, 135, .95), 0 0 0 0 rgba(10, 122, 191, .5); } 70% { box-shadow: 0 18px 40px -12px rgba(0, 85, 135, .95), 0 0 0 18px rgba(10, 122, 191, 0); } 100% { box-shadow: 0 18px 40px -12px rgba(0, 85, 135, .95), 0 0 0 0 rgba(10, 122, 191, 0); } } @media (max-width: 560px) { .btn--xl { --btn-py: 1.1rem; --btn-px: 1.9rem; font-size: 1.05rem; } .btn-row--center .btn--xl { flex: 1 1 100%; } } .btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .65); box-shadow: none; } .btn--ghost::after { background: #fff; } .btn--ghost:hover { color: var(--brand-ink); box-shadow: none; } .btn--outline { background: transparent; color: var(--brand-ink); border: 2px solid var(--brand-600); box-shadow: none; } .btn--outline::after { background: var(--grad-brand); } .btn--outline:hover { color: #fff; border-color: transparent; } .btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .btn-row--center { justify-content: center; } /* -------------------------------------------------------------------------- 6. Header / navigation -------------------------------------------------------------------------- */ .header { position: fixed; inset: 0 0 auto 0; z-index: 90; background: transparent; transition: background .35s var(--ease), box-shadow .35s var(--ease); } .header__inner { max-width: 1600px; margin-inline: auto; padding: .9rem var(--gutter); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); transition: padding .35s var(--ease); } /* Over a dark hero the bar is transparent with a white logo. Once the page scrolls, or on any page without a hero, it turns solid white. */ .header--solid, .header.is-stuck { background: rgba(255, 255, 255, .97); box-shadow: var(--sh-nav); } /* backdrop-filter establishes a containing block for position:fixed descendants. The mobile drawer is a fixed child of this header, so applying the filter here made the drawer position itself against the header box instead of the viewport — which is why it appeared cut off once the page was scrolled and the header became sticky. The blur is desktop-only now, where no fixed child lives inside the header. */ @media (min-width: 1081px) { .header--solid, .header.is-stuck { backdrop-filter: saturate(1.6) blur(10px); } } .header.is-stuck .header__inner { padding-block: .7rem; } /* The client's original logo ships in two colourways. Over the dark hero the white version shows; once the bar turns solid — and everywhere in the footer — the blue original takes over. Both are in the DOM so the swap is instant with no second network request mid-scroll. */ .brand { display: inline-flex; align-items: center; flex: none; } .logo { height: clamp(40px, 4.4vw, 56px); width: auto; } .logo--light { display: none; } .header .logo--light { display: block; } .header .logo--dark { display: none; } .header--solid .logo--light, .header.is-stuck .logo--light { display: none; } .header--solid .logo--dark, .header.is-stuck .logo--dark { display: block; } /* One row on desktop: logo, links, phone, CTA — all on a single baseline. .nav__row only exists to group the links and phone in the mobile drawer, so on desktop it is flattened with display:contents and its children join the nav's own flex line directly. */ .nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.85rem, 1.7vw, 1.75rem); } .nav__row { display: contents; } .nav__cta { flex: none; } .nav__list { display: flex; align-items: center; gap: clamp(.85rem, 1.7vw, 1.75rem); list-style: none; } .nav__link { position: relative; display: inline-block; padding: .35rem 0; font-size: 1rem; font-weight: 400; color: #fff; white-space: nowrap; transition: color .25s var(--ease); } .header--solid .nav__link, .header.is-stuck .nav__link { color: var(--ink); } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav__link:hover { color: var(--brand-b); } .header--solid .nav__link:hover, .header.is-stuck .nav__link:hover { color: var(--brand-600); } .nav__link[aria-current="page"] { color: var(--brand-b); font-weight: 500; } .header--solid .nav__link[aria-current="page"], .header.is-stuck .nav__link[aria-current="page"] { color: var(--brand-600); } /* -------------------------------------------------------------------------- 6b. Mega menu -------------------------------------------------------------------------- */ .nav__item { position: relative; display: flex; align-items: center; gap: .15rem; } .nav__caret { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: currentColor; cursor: pointer; opacity: .75; transition: transform .3s var(--ease), opacity .2s var(--ease); } .nav__caret svg { width: 15px; height: 15px; } .nav__caret[aria-expanded="true"] { transform: rotate(180deg); opacity: 1; } .nav__item .nav__link { color: inherit; } .nav__item { color: #fff; } .header--solid .nav__item, .header.is-stuck .nav__item { color: var(--ink); } .mega { position: absolute; top: calc(100% + 1.15rem); left: 50%; z-index: 20; width: min(1080px, calc(100vw - 3rem)); transform: translate(-50%, -10px); padding: clamp(1.5rem, 2.5vw, 2.25rem); background: #fff; border-radius: var(--r-lg); box-shadow: 0 34px 80px -30px rgba(20, 55, 67, .48); border: 1px solid var(--line); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; } .mega[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } /* Bridges the gap between the trigger and the panel so the pointer can travel down without the menu closing underneath it. */ .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1.15rem; height: 1.15rem; } .mega__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); } .mega--cities .mega__inner { grid-template-columns: 1fr; } .mega--split { width: min(880px, calc(100vw - 3rem)); padding: 1.1rem; } /* Two panes from one DOM: display:contents lets each group's head land in the left rail while its city list is placed in the shared right pane. Only the active group's list is shown, so the panel height stays fixed instead of growing with 44 links. */ .mega__groups { display: grid; grid-template-columns: 264px 1fr; gap: .35rem 1.5rem; align-items: start; } .mega__group { display: contents; } .mega__grouphead { grid-column: 1; display: flex; align-items: center; gap: .25rem; border-radius: 12px; transition: background .22s var(--ease); } .mega__grouphead > a { flex: 1; display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; font-size: 1rem; font-weight: 500; line-height: 1.25; color: var(--ink); } .mega__grouphead svg { width: 20px; height: 20px; flex: none; color: var(--brand-600); } .mega__group[data-active="true"] .mega__grouphead { background: var(--brand-tint); } .mega__group[data-active="true"] .mega__grouphead > a { color: var(--brand-ink); font-weight: 600; } .mega__groupcaret { display: grid; place-items: center; width: 34px; height: 34px; margin-right: .35rem; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-mute); cursor: pointer; } .mega__groupcaret svg { width: 18px; height: 18px; transform: rotate(-90deg); } .mega__grouplist { grid-column: 2; grid-row: 1 / span 4; display: none; padding-left: 1.5rem; border-left: 1px solid var(--line); min-height: 100%; } .mega__group[data-active="true"] .mega__grouplist { display: block; } .mega__panehead { display: block; margin: .35rem 0 .9rem; font-size: .82rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); } .mega__list--cols { grid-template-columns: repeat(3, 1fr); gap: .2rem .35rem; } .mega__grouplist .mega__all { margin-top: 1.1rem; font-size: .93rem; } .mega__head { display: flex; align-items: center; gap: .6rem; padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--line); font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.25; } .mega__head svg { width: 20px; height: 20px; flex: none; color: var(--brand-600); } a.mega__head:hover { color: var(--brand-600); } .mega__head--static { cursor: default; } /* The negative inset sits on the LIST, not on each link. Putting it on the link made every hover rectangle bleed .55rem past its own grid cell, so neighbouring highlights touched and overlapped. On the list it shifts the whole column so text still lines up under the heading, while each link's highlight stays inside its own cell. */ .mega__list { list-style: none; display: grid; gap: .15rem; margin-inline: -.6rem; } .mega__list a { display: block; padding: .45rem .6rem; border-radius: 8px; font-size: .93rem; color: var(--ink-soft); transition: background .2s var(--ease), color .2s var(--ease); } .mega__list a:hover { background: var(--brand-tint); color: var(--brand-ink); } /* Two-line city tiles need a real gutter between them, otherwise adjacent highlights read as one merged block. */ .mega__list--grid { grid-template-columns: repeat(4, 1fr); gap: .3rem .4rem; } .mega__list--grid a { display: grid; gap: .1rem; padding: .6rem .75rem; line-height: 1.3; } .mega__list--grid strong { font-weight: 500; color: var(--ink); font-size: .95rem; } .mega__list--grid span { font-size: .79rem; color: var(--ink-mute); } .mega__list--grid a:hover strong { color: var(--brand-ink); } .mega--services .mega__list--grid { grid-template-columns: repeat(2, 1fr); } .mega__foot { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .mega__all { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--brand-600); } .mega__all svg { width: 1.05em; height: 1.05em; transition: transform .3s var(--ease); } .mega__all:hover svg { transform: translateX(5px); } @media (max-width: 1240px) { .mega__inner { grid-template-columns: repeat(2, 1fr); } .mega__list--grid { grid-template-columns: repeat(3, 1fr); } .mega__groups { grid-template-columns: 230px 1fr; } .mega__list--cols { grid-template-columns: repeat(2, 1fr); } } .nav__divider { width: 1px; height: 26px; background: rgba(255, 255, 255, .45); flex: none; } .header--solid .nav__divider, .header.is-stuck .nav__divider { background: var(--line); } .nav__tel { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 500; white-space: nowrap; } .header--solid .nav__tel, .header.is-stuck .nav__tel { color: var(--ink); } .nav__tel svg { width: 20px; height: 20px; flex: none; } .nav__tel:hover { color: var(--brand-b); } /* Between the burger breakpoint and roughly 1380px the six labels, the number and the CTA stop fitting comfortably. Dropping the number to its icon buys back about 130px, which is exactly what is needed — the aria-label on the link keeps it announced in full. */ @media (max-width: 1380px) { .nav__tel span { display: none; } .nav__divider { display: none; } .nav__tel { width: 42px; height: 42px; justify-content: center; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .4); } .header--solid .nav__tel, .header.is-stuck .nav__tel { border-color: var(--line); } } /* Mobile menu toggle */ .nav-toggle { display: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer; position: relative; flex: none; } .nav-toggle span { position: absolute; left: 11px; width: 24px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease), opacity .2s var(--ease), background .3s var(--ease); } .nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 22px; } .nav-toggle span:nth-child(3) { top: 28px; } .header--solid .nav-toggle span, .header.is-stuck .nav-toggle span { background: var(--ink); } .nav-toggle[aria-expanded="true"] span { background: var(--ink); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1080px) { /* margin-left:auto is what actually pushes the burger to the right edge — .nav carries it on desktop, but the drawer is out of flow here so the toggle has to claim the free space itself. */ .nav-toggle { display: block; order: 3; margin-left: auto; } .nav { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 6.5rem 2rem 2.5rem; background: #fff; box-shadow: -20px 0 60px -30px rgba(20, 55, 67, .5); transform: translateX(100%); transition: transform .4s var(--ease); overflow-y: auto; } .nav.is-open { transform: translateX(0); } .nav__row { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .nav__cta { align-self: stretch; } /* Restore the full number in the drawer — there is room for it there */ .nav__tel span { display: inline; } .nav__tel, .header--solid .nav__tel, .header.is-stuck .nav__tel { width: auto; height: auto; justify-content: flex-start; border: 0; border-radius: 0; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; } .nav__list li { border-bottom: 1px solid var(--line); } /* Inside the drawer the mega panels become plain accordions — no absolute positioning, no overlay, just an expanding list. */ .nav__item { flex-wrap: wrap; justify-content: space-between; color: var(--ink); } .nav__item .nav__link { flex: 1; } .nav__caret { width: 44px; height: 44px; flex: none; color: var(--ink-mute); border-radius: 8px; } .nav__caret svg { width: 20px; height: 20px; } .mega { position: static; width: 100%; transform: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; opacity: 1; visibility: visible; pointer-events: auto; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .mega[data-open="true"] { transform: none; grid-template-rows: 1fr; } .mega::before { display: none; } /* The 0fr → 1fr collapse only hides anything if the grid ITEM clips its own overflow. .mega--split's item is .mega__groups, not .mega__inner — without it here the Leistungen panel kept spilling its content at zero height, so it looked permanently open and the toggle appeared dead. */ .mega__inner, .mega--cities .mega__inner, .mega--split .mega__groups { grid-template-columns: 1fr; gap: 0; overflow: hidden; min-height: 0; } .mega__foot { display: none; } .mega__col { padding-bottom: .5rem; } .mega__head { font-size: .95rem; padding: .85rem 0 .5rem; margin: 0; border-bottom: 0; color: var(--brand-600); } .mega__list a { padding: .55rem .75rem; font-size: .95rem; } .mega__list--grid { grid-template-columns: 1fr 1fr; } /* The two-pane layout collapses to a nested accordion: tap a service to drop its cities out underneath it, exactly as on desktop but stacked. */ .mega--split { width: 100%; padding: 0; } .mega__groups { display: block; } .mega__group { display: block; border-top: 1px solid var(--line); } .mega__group:first-child { border-top: 0; } .mega__grouphead { background: none !important; } .mega__grouphead > a { padding: .8rem 0; font-size: .97rem; } .mega__group[data-active="true"] .mega__grouphead > a { color: var(--brand-600); } .mega__groupcaret { margin-right: 0; width: 40px; height: 40px; } .mega__groupcaret svg { transform: none; transition: transform .3s var(--ease); } .mega__groupcaret[aria-expanded="true"] svg { transform: rotate(180deg); } .mega__grouplist { display: grid; grid-template-rows: 0fr; padding: 0; border-left: 0; min-height: 0; transition: grid-template-rows .32s var(--ease); } .mega__group[data-active="true"] .mega__grouplist { display: grid; grid-template-rows: 1fr; } .mega__grouplist > div { overflow: hidden; } .mega__panehead { margin: .2rem 0 .5rem; font-size: .74rem; } .mega__list--cols { grid-template-columns: 1fr 1fr; } .mega__grouplist .mega__all { margin: .6rem 0 1rem; } .nav__link, .header--solid .nav__link, .header.is-stuck .nav__link { display: block; color: var(--ink); padding: 1rem 0; font-size: 1.1rem; } .nav__link::after { display: none; } .nav__divider { display: none; } .nav__tel, .header--solid .nav__tel, .header.is-stuck .nav__tel { color: var(--ink); padding: 1.25rem 0; } .nav .btn { margin-top: 1.25rem; } .nav-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(20, 55, 67, .5); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; } .nav-backdrop.is-open { opacity: 1; visibility: visible; } } body.nav-open { overflow: hidden; } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { position: relative; display: grid; place-items: center; min-height: min(92svh, 940px); padding: clamp(9rem, 16vh, 12rem) 0 clamp(5rem, 10vh, 8rem); overflow: hidden; isolation: isolate; text-align: center; color: #fff; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Reference hero is desaturated with a dark wash — keeps white type readable whichever frame of the video is on screen. */ .hero__media video { filter: grayscale(.55) contrast(1.05) brightness(.82); } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 26, 32, .82) 0%, rgba(12, 26, 32, .38) 34%, rgba(12, 26, 32, .30) 60%, rgba(12, 26, 32, .72) 100%), radial-gradient(120% 80% at 50% 30%, transparent 30%, rgba(12, 26, 32, .5) 100%); } .hero__inner { max-width: 940px; margin-inline: auto; } .hero h1 { color: #fff; font-weight: 300; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } .hero__sub { margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; max-width: 46ch; font-size: clamp(1.2rem, 2.1vw, 1.7rem); font-weight: 600; line-height: 1.42; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); } .hero__note { margin: 1.35rem auto 0; max-width: 58ch; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 400; color: rgba(255, 255, 255, .92); text-shadow: 0 2px 14px rgba(0, 0, 0, .45); } .hero .rule { margin-top: clamp(1.75rem, 3vw, 2.5rem); background: #fff; opacity: .9; } .hero .btn-row { margin-top: clamp(1.75rem, 3vw, 2.5rem); } /* Hero motion — landing-page heroes drift slowly, a soft light moves over the scrim, and the content rises in with a stagger. Everything collapses to a static frame under prefers-reduced-motion (handled globally below). */ .hero__media img { filter: grayscale(.5) contrast(1.05) brightness(.8); animation: heroDrift 26s ease-in-out infinite alternate; will-change: transform; } @keyframes heroDrift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.15) translate3d(0, -1.5%, 0); } } .hero--inner .hero__scrim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 52% at 26% 30%, rgba(255, 255, 255, .08), transparent 68%); animation: heroAura 16s ease-in-out infinite alternate; } @keyframes heroAura { from { transform: translate3d(-5%, -3%, 0); } to { transform: translate3d(5%, 3%, 0); } } .hero__inner > * { animation: heroIn .7s var(--ease) backwards; } .hero__inner > *:nth-child(1) { animation-delay: .05s; } .hero__inner > *:nth-child(2) { animation-delay: .14s; } .hero__inner > *:nth-child(3) { animation-delay: .23s; } .hero__inner > *:nth-child(4) { animation-delay: .32s; } .hero__inner > *:nth-child(5) { animation-delay: .41s; } .hero__inner > *:nth-child(6) { animation-delay: .5s; } .hero__inner > *:nth-child(7) { animation-delay: .59s; } @keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Rating badge: pops in, the stars drop one after another, then a soft glow pulses around the pill. Trust pills pop in sequence below the CTAs. */ .herorating { animation: heroIn .6s var(--ease) backwards .1s, badgePulse 5s ease-in-out infinite 2.2s; } .herorating__stars .star { animation: starPop .45s var(--ease) backwards; } .herorating__stars .star:nth-child(1) { animation-delay: .5s; } .herorating__stars .star:nth-child(2) { animation-delay: .62s; } .herorating__stars .star:nth-child(3) { animation-delay: .74s; } .herorating__stars .star:nth-child(4) { animation-delay: .86s; } .herorating__stars .star:nth-child(5) { animation-delay: .98s; } @keyframes starPop { from { opacity: 0; transform: scale(.2); } 60% { transform: scale(1.3); } to { opacity: 1; transform: scale(1); } } @keyframes badgePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } 50% { box-shadow: 0 0 26px 2px rgba(255, 255, 255, .16); } } .trustpills .trustpill { animation: heroIn .5s var(--ease) backwards; } .trustpills .trustpill:nth-child(1) { animation-delay: .55s; } .trustpills .trustpill:nth-child(2) { animation-delay: .65s; } .trustpills .trustpill:nth-child(3) { animation-delay: .75s; } .trustpills .trustpill:nth-child(4) { animation-delay: .85s; } .trustpills .trustpill:nth-child(5) { animation-delay: .95s; } /* Compact hero for inner pages and landing pages */ .hero--inner { min-height: auto; padding: clamp(10rem, 20vh, 13rem) 0 clamp(4rem, 8vh, 6rem); } .hero--inner h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); } .hero--gradient { background: var(--grad-band); } .hero--gradient .hero__scrim { background: linear-gradient(180deg, rgba(12, 26, 32, .35), rgba(12, 26, 32, .55)); } /* The visible breadcrumb trail was removed at the client's request. The BreadcrumbList JSON-LD stays in place — it is what makes Google show a readable path instead of the raw URL in search results, and it costs nothing on the page itself. */ /* -------------------------------------------------------------------------- 7b. Trust badge — Google rating when verified, service promises when not -------------------------------------------------------------------------- */ .gbadge { display: inline-flex; align-items: center; gap: .9rem; padding: .7rem 1.4rem .7rem 1.1rem; border-radius: var(--r-pill); background: #fff; box-shadow: 0 14px 34px -18px rgba(20, 55, 67, .55); color: var(--ink); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .gbadge:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 20px 44px -18px rgba(20, 55, 67, .6); } .gbadge__g { flex: none; width: 30px; height: 30px; } .gbadge__g svg { width: 100%; height: 100%; } .gbadge__body { display: grid; gap: .1rem; text-align: left; } .gbadge__top { display: flex; align-items: center; gap: .55rem; } .gbadge__score { font-size: 1.32rem; font-weight: 700; line-height: 1; color: var(--ink); } .gbadge__stars { display: inline-flex; gap: .1rem; } .gbadge__meta { font-size: .84rem; color: var(--ink-mute); line-height: 1.2; } /* A half star is one gold icon clipped over a grey one */ .star { position: relative; display: inline-block; width: 17px; height: 17px; color: #E3E8EA; } .star svg { width: 17px; height: 17px; } .star[style*="--fill"]::before { content: ""; position: absolute; inset: 0; width: var(--fill); overflow: hidden; background: #FBB040; /* contain, not a fixed px size — the same rule serves the 17px hero stars and the 11px ones in the floating badge. */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4 15 8.6l6.8 1-4.9 4.8 1.1 6.8-6-3.2-6 3.2 1.1-6.8L2.2 9.6l6.8-1z'/%3E%3C/svg%3E") left center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4 15 8.6l6.8 1-4.9 4.8 1.1 6.8-6-3.2-6 3.2 1.1-6.8L2.2 9.6l6.8-1z'/%3E%3C/svg%3E") left center / contain no-repeat; } .gbadge__stars .star:not([style]) { color: #FBB040; } /* --- Hero rating line ----------------------------------------------------- A kicker above the headline rather than a card: no box, no shadow, no positioning. It borrows the hero's own type and colour, so the only foreign element is the Google mark itself — which is the one place a splash of colour is earned, since it is what makes the line credible. Sits in normal flow directly above the
with tight spacing, so it reads as part of the headline block instead of a stray centred widget. Only rendered on the homepage and the landing-page heroes. */ .herorating { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .1rem .65rem; margin-bottom: clamp(.9rem, 2vh, 1.4rem); color: #fff; font-size: .95rem; line-height: 1.5; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); transition: opacity .25s var(--ease); } .herorating:hover, .herorating:focus-visible { color: #fff; opacity: .82; } .herorating__g { flex: none; width: 18px; height: 18px; } .herorating__g svg { width: 100%; height: 100%; display: block; } .herorating__score { font-weight: 700; font-size: 1.05rem; letter-spacing: .005em; } .herorating__stars { display: inline-flex; gap: .11rem; } .herorating__stars .star { width: 15px; height: 15px; color: rgba(255, 255, 255, .3); } .herorating__stars .star:not([style]) { color: #FBB040; } .herorating__stars .star svg { width: 15px; height: 15px; } .herorating__sep { width: 1px; height: 15px; background: rgba(255, 255, 255, .32); } .herorating__meta { color: rgba(255, 255, 255, .74); } @media (max-width: 480px) { .herorating { font-size: .86rem; gap: .1rem .5rem; } .herorating__g { width: 16px; height: 16px; } .herorating__score { font-size: .95rem; } .herorating__stars .star, .herorating__stars .star svg { width: 13px; height: 13px; } /* The divider reads as clutter once the line wraps on a narrow screen */ .herorating__sep { display: none; } } /* --- Verifiable service promises, same visual weight -------------------- */ .trustpills { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; } .trustpill { display: inline-flex; align-items: center; gap: .55rem; padding: .58rem 1.15rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(6px); color: #fff; font-size: .93rem; font-weight: 500; line-height: 1.25; white-space: nowrap; } .trustpill svg { width: 17px; height: 17px; flex: none; opacity: .9; } .trustpills[data-tone="light"] .trustpill { background: var(--brand-tint); border-color: transparent; color: var(--brand-ink); } @media (max-width: 560px) { .trustpill { font-size: .85rem; padding: .5rem .9rem; } .trustpill svg { width: 15px; height: 15px; } } /* -------------------------------------------------------------------------- 8. Trust bar (stat strip under the hero) -------------------------------------------------------------------------- */ .trustbar { background: var(--surface); border-bottom: 1px solid var(--line); } .trustbar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-inline: 1px solid var(--line); } .trustbar__item { background: var(--surface); padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.75rem); text-align: center; } .trustbar__num { display: block; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .trustbar__label { display: block; margin-top: .7rem; font-size: .96rem; line-height: 1.5; color: var(--ink-soft); } @media (max-width: 860px) { .trustbar__grid { grid-template-columns: repeat(2, 1fr); } } /* -------------------------------------------------------------------------- 9. Accreditation / logo strip -------------------------------------------------------------------------- */ .logostrip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 5rem); } .logostrip__item { display: flex; align-items: center; gap: .85rem; color: var(--teal-800); filter: grayscale(1); opacity: .72; transition: filter .35s var(--ease), opacity .35s var(--ease); } .logostrip__item:hover { filter: grayscale(0); opacity: 1; } .logostrip__item svg { width: 40px; height: 40px; flex: none; color: var(--teal-600); } .logostrip__text { line-height: 1.25; } .logostrip__text b { display: block; font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .logostrip__text span { font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); } /* Once the row wraps to one item per line, justify-content: center centres each item independently — so the four icons and headings end up on four different left edges. Stacking them left-aligned puts everything on one axis, with the icons forming a clean column. */ @media (max-width: 640px) { .logostrip { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 1.6rem; /* fit-content shrinks the block to its widest row, then auto margins centre that block — so the items stay left-aligned with each other while the leftover space splits evenly on both sides. align-items alone would pin the block to the container's left edge and pile all the slack on the right. */ width: fit-content; max-width: 100%; margin-inline: auto; } .logostrip__item { width: 100%; gap: 1rem; } .logostrip__item svg { width: 34px; height: 34px; } .logostrip__text b { font-size: .95rem; } .logostrip__text span { font-size: .77rem; letter-spacing: .1em; } } /* -------------------------------------------------------------------------- 10. Feature grid — circled line icon beside text -------------------------------------------------------------------------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.4rem) clamp(1.75rem, 3.5vw, 3rem); } @media (max-width: 940px) { .features { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .features { grid-template-columns: 1fr; } } .feature { display: flex; gap: 1.35rem; align-items: flex-start; } .feature__icon { flex: none; width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--teal-400); color: var(--teal-600); background: var(--surface); transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease); } .feature__icon svg { width: 36px; height: 36px; } .feature:hover .feature__icon { transform: translateY(-4px) scale(1.04); border-color: var(--brand-b); background: var(--brand-tint); color: var(--brand-ink); } .feature__body h3 { margin-bottom: .55rem; color: var(--ink); } .feature__body p { font-size: 1rem; line-height: 1.7; } .feature__body strong { color: var(--ink); font-weight: 600; } /* -------------------------------------------------------------------------- 11. Image cards — photo, headline, pill button -------------------------------------------------------------------------- */ .imgcard { display: flex; flex-direction: column; align-items: flex-start; height: 100%; } .imgcard__media { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); margin-bottom: 1.5rem; } .imgcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .imgcard:hover .imgcard__media img { transform: scale(1.06); } .imgcard h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; color: var(--ink); margin-bottom: .35rem; } .imgcard h3 strong { display: block; font-weight: 700; color: var(--teal-600); } .imgcard p { font-size: 1rem; margin-bottom: 1.5rem; } .imgcard .btn { margin-top: auto; } /* -------------------------------------------------------------------------- 12. Service cards -------------------------------------------------------------------------- */ .svc { display: flex; flex-direction: column; height: 100%; /* Horizontal padding is deliberately tighter than vertical. At the 4-across breakpoint (941–1100px) a card is only ~200px wide, and symmetric 2.6rem padding left just 138px of content — not enough for "Mehr erfahren" plus its arrow. Trimming the sides gives ~153px and a comfortable margin. */ padding: clamp(1.9rem, 3vw, 2.6rem) clamp(1.25rem, 2vw, 2.2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .svc:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hi); border-color: transparent; } .svc__icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--teal-400); color: var(--teal-600); margin-bottom: 1.5rem; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); } .svc__icon svg { width: 32px; height: 32px; } .svc:hover .svc__icon { background: var(--grad-brand); border-color: transparent; color: #fff; } .svc h3 { color: var(--ink); margin-bottom: .7rem; text-wrap: balance; } .svc p { font-size: 1rem; } /* Reserve two title lines once the cards sit side by side, so a heading that wraps ("Technische Gutachten") does not push its paragraph out of line with the neighbouring cards. Single-column layouts keep the tighter spacing. */ @media (min-width: 621px) { .svc h3 { min-height: 2.32em; } } .svc__list { list-style: none; margin: 1.25rem 0 0; display: grid; gap: .6rem; font-size: .97rem; } .svc__list li { position: relative; padding-left: 1.9rem; } .svc__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 18px; height: 10px; border-left: 2.5px solid var(--brand-b); border-bottom: 2.5px solid var(--brand-b); transform: rotate(-45deg); border-radius: 1px; } /* margin-top:auto pins the link to the card floor. Because the grid stretches every card to the tallest one, all four links then land on the same line regardless of how long the description is. */ /* margin-top:auto pins the link to the card floor. Because the grid stretches every card to the tallest one, all four links then land on the same line regardless of how long the description is. white-space:nowrap is load-bearing: as an inline-flex container the link's text is an anonymous flex item that will happily shrink below its content width and wrap onto two lines, which drags the arrow down with it. */ .svc__link { margin-top: auto; padding-top: 1.6rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; color: var(--brand-600); white-space: nowrap; } .svc__link svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .3s var(--ease); } .svc__link:hover svg { transform: translateX(5px); } /* -------------------------------------------------------------------------- 13. Gradient band (inline CTA strip) -------------------------------------------------------------------------- */ .band { background: var(--grad-band); color: #fff; padding-block: clamp(2.75rem, 6vw, 4.5rem); } .band--brand { background: var(--grad-cta); } .band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3.5rem); } .band h2 { color: #fff; font-weight: 300; max-width: 18ch; font-size: clamp(1.85rem, 3.6vw, 3rem); } .band p { color: rgba(255, 255, 255, .9); max-width: 46ch; margin-top: .8rem; } .band .btn { flex: none; } .band--center { text-align: center; } .band--center .band__inner { flex-direction: column; justify-content: center; } .band--center h2 { max-width: 24ch; margin-inline: auto; } .band__phone { display: inline-block; margin-top: .8rem; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 400; color: #fff; text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 2px; letter-spacing: .01em; } .band__phone:hover { color: #fff; text-decoration-thickness: 3px; } /* Richer CTA band: drifting glows, kicker pill, white phone button with a pulse ring and a facts row. Sits at the bottom of every page. */ .band--cta { position: relative; overflow: hidden; } .band--cta::before, .band--cta::after { content: ""; position: absolute; inset: -35% -15%; pointer-events: none; background: radial-gradient(36% 40% at 28% 32%, rgba(255, 255, 255, .16), transparent 64%); animation: bandGlow 16s ease-in-out infinite alternate; } .band--cta::after { background: radial-gradient(32% 38% at 74% 70%, rgba(255, 255, 255, .1), transparent 62%); animation-delay: -7s; animation-direction: alternate-reverse; } @keyframes bandGlow { from { transform: translate3d(-4%, -3%, 0); } to { transform: translate3d(4%, 3%, 0); } } .band--cta .container { position: relative; z-index: 1; } .band__kicker { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; padding: .38rem .95rem; border: 1px solid rgba(255, 255, 255, .38); border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .band__kicker svg { width: 15px; height: 15px; } .band--cta h2 { max-width: 32ch; } .band__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem; margin-top: 1.7rem; } .band--cta .band__phone { position: relative; display: inline-flex; align-items: center; gap: .6rem; margin-top: 0; padding: .95rem 1.55rem; border-radius: var(--r-pill); background: #fff; color: var(--brand-ink); font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; text-decoration: none; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .5); transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .band--cta .band__phone svg { width: 20px; height: 20px; color: var(--brand-600); } .band--cta .band__phone:hover { color: var(--brand-ink); text-decoration: none; transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55); } .band--cta .band__phone::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .6); border-radius: inherit; animation: phoneRing 3s ease-out infinite; } @keyframes phoneRing { 0% { opacity: .75; transform: scale(1); } 65% { opacity: 0; transform: scale(1.16); } 100% { opacity: 0; transform: scale(1.16); } } .band__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: .95rem; color: rgba(255, 255, 255, .92); } .band__facts li { display: inline-flex; align-items: center; gap: .45rem; } .band__facts svg { width: 17px; height: 17px; opacity: .9; } @media (max-width: 560px) { .band__actions { flex-direction: column; } .band--cta .band__phone { width: 100%; justify-content: center; } } /* -------------------------------------------------------------------------- 14. Process timeline -------------------------------------------------------------------------- */ .timeline { position: relative; padding-block: 1rem; } .timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--line); } .timeline::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: var(--progress, 0%); transform: translateX(-50%); background: var(--grad-brand); transition: height .2s linear; } .tl-item { position: relative; display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center; gap: 0; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } .tl-item:last-child { margin-bottom: 0; } .tl-item__card { position: relative; padding: clamp(1.75rem, 3vw, 2.5rem); background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 24px 54px -30px rgba(20, 55, 67, .45); display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); } /* Speech-bubble tail pointing at the spine */ .tl-item__card::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; background: var(--surface); transform: translateY(-50%) rotate(45deg); } .tl-item--left .tl-item__card { grid-column: 1; margin-right: 1.5rem; } .tl-item--left .tl-item__card::after { right: -9px; } .tl-item--right .tl-item__card { grid-column: 3; margin-left: 1.5rem; } .tl-item--right .tl-item__card::after { left: -9px; } .tl-item__text { flex: 1 1 auto; } .tl-item__text h3 { color: var(--ink); margin-bottom: .5rem; } .tl-item__text p { font-size: 1rem; margin: 0; } .tl-item__icon { flex: none; width: clamp(90px, 12vw, 140px); color: var(--teal-600); } .tl-item__icon svg { width: 100%; height: auto; } .tl-item--right .tl-item__card { flex-direction: row-reverse; } /* Node + step badge on the spine */ .tl-item__node { grid-column: 2; justify-self: center; position: relative; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--brand-b); box-shadow: 0 0 0 5px #fff; transition: transform .4s var(--ease), border-color .4s var(--ease); } .tl-item.is-active .tl-item__node { transform: scale(1.22); border-color: var(--brand-ink); } .tl-item__step { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; padding: .32rem 1rem; border-radius: 6px; background: var(--teal-600); color: #fff; font-size: .88rem; font-weight: 500; white-space: nowrap; } .tl-item__step::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; background: var(--teal-600); transform: translateY(-50%) rotate(45deg); } .tl-item--left .tl-item__step { left: calc(50% + 26px); } .tl-item--left .tl-item__step::after { left: -4px; } .tl-item--right .tl-item__step { right: calc(50% + 26px); } .tl-item--right .tl-item__step::after { right: -4px; } @media (max-width: 860px) { .timeline::before, .timeline::after { left: 11px; } /* Two explicit rows: the step badge on row 1, its own card directly beneath on row 2, both in column 2. The badge previously had no grid placement at all — it was only positioned absolutely on desktop, so on mobile it auto-placed into whatever row came next and ended up floating in the gap BELOW its card, reading as though it belonged to the following step. */ .tl-item { grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 1.4rem; row-gap: .65rem; align-items: start; margin-bottom: 2rem; } .tl-item__node { grid-column: 1; grid-row: 1; align-self: center; } .tl-item__step { grid-column: 2; grid-row: 1; position: static; transform: none; justify-self: start; align-self: center; margin: 0; } .tl-item__step::after { display: none; } .tl-item--left .tl-item__card, .tl-item--right .tl-item__card { grid-column: 2; grid-row: 2; margin: 0; flex-direction: row; } .tl-item__card::after { display: none; } .tl-item__card { flex-wrap: wrap; } .tl-item__icon { width: 74px; } } /* -------------------------------------------------------------------------- 15. Location cards -------------------------------------------------------------------------- */ .loc { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .loc:hover { transform: translateY(-6px); box-shadow: var(--sh-card-hi); } .loc__map { aspect-ratio: 4 / 3; background: var(--surface-3); position: relative; overflow: hidden; } .loc__map img, .loc__map svg { width: 100%; height: 100%; object-fit: cover; } .loc__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; } .loc__body h3 { font-size: 1.3rem; color: var(--ink); margin-bottom: .35rem; } .loc__body p { font-size: .97rem; color: var(--ink-soft); margin-bottom: 1rem; } .loc__body .btn { margin-top: auto; } /* -------------------------------------------------------------------------- 16. Testimonial slider -------------------------------------------------------------------------- */ .reviews { background: var(--grad-band); color: #fff; padding-block: clamp(3.5rem, 7vw, 6rem); overflow: hidden; } .reviews h2 { color: #fff; text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); } /* The arrows live in reserved gutters rather than floating over the slides. Previously they were pulled outside with negative offsets, which only works while the viewport is wider than the container — below that they landed on top of the quotes. */ .slider { position: relative; padding-inline: 72px; } .slider__viewport { overflow: hidden; } .slider__track { display: flex; gap: clamp(1.5rem, 3vw, 2.5rem); transition: transform .55s var(--ease); will-change: transform; } .slider__track { align-items: stretch; } .slider__slide { flex: 0 0 calc((100% - 2 * clamp(1.5rem, 3vw, 2.5rem)) / 3); min-width: 0; display: flex; } @media (max-width: 1000px) { .slider__slide { flex-basis: calc((100% - clamp(1.5rem, 3vw, 2.5rem)) / 2); } } @media (max-width: 680px) { .slider__slide { flex-basis: 100%; } } /* Every slide is the height of the tallest one. Laying the card out as a column puts all the star rows on one line at the top and all the names on one line at the bottom, however long the quote in between runs. */ .review { display: flex; flex-direction: column; width: 100%; } .review__stars { display: flex; gap: .25rem; margin-bottom: 1rem; color: #FBB040; min-height: 22px; } .review__stars svg { width: 22px; height: 22px; flex: none; } .review__text { font-size: 1.06rem; line-height: 1.72; color: #fff; margin: 0 0 1.25rem; } .review__author { margin-top: auto; padding-top: .25rem; font-size: .96rem; color: rgba(255, 255, 255, .82); } .slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease); } .slider__btn:hover { background: rgba(255, 255, 255, .25); } .slider__btn svg { width: 24px; height: 24px; } .slider__btn--prev { left: 0; } .slider__btn--next { right: 0; } .slider__btn[disabled] { opacity: .3; cursor: default; } /* On phones the gutters would eat most of the card width, so the arrows drop out and navigation falls to the dots and horizontal swipe, both of which are already wired up in main.js. */ @media (max-width: 780px) { .slider { padding-inline: 0; } .slider__btn { display: none; } .slider__dots { margin-top: 1.75rem; } } .slider__dots { display: flex; justify-content: center; gap: .55rem; margin-top: 2.25rem; list-style: none; } .slider__dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .34); cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease); } .slider__dot:hover { background: rgba(255, 255, 255, .6); } .slider__dot[aria-current="true"] { background: #fff; transform: scale(1.15); } /* -------------------------------------------------------------------------- 17. FAQ accordion -------------------------------------------------------------------------- */ .faq { max-width: 940px; margin-inline: auto; background: var(--surface); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 3.5rem); box-shadow: 0 30px 70px -45px rgba(20, 55, 67, .5); } .faq .section-head { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); } .faq__grid { display: grid; gap: .7rem; } .acc__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .acc__item:hover { border-color: rgba(0, 85, 135, .32); box-shadow: 0 16px 34px -24px rgba(6, 51, 79, .5); transform: translateY(-1px); } .acc__item:has(.acc__btn[aria-expanded="true"]) { border-color: rgba(0, 85, 135, .42); box-shadow: 0 18px 38px -24px rgba(6, 51, 79, .55); } .acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 1.25rem; border: 0; background: transparent; text-align: left; cursor: pointer; font-size: clamp(1.02rem, 1.6vw, 1.22rem); font-weight: 500; line-height: 1.4; color: var(--ink); transition: color .25s var(--ease); } .acc__btn:hover { color: var(--brand-600); } .acc__btn[aria-expanded="true"] { color: var(--brand-ink); } .acc__chev { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand-600); transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease); } .acc__btn[aria-expanded="true"] .acc__chev { transform: rotate(180deg); background: var(--brand-600); color: #fff; } .acc__chev svg { width: 19px; height: 19px; } .acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); } .acc__panel[data-open="true"] { grid-template-rows: 1fr; } .acc__panel > div { overflow: hidden; } .acc__panel p { padding: 0 1.25rem 1.35rem; max-width: 78ch; color: var(--ink-soft); } .acc__panel p:first-child { padding-top: 0; } .faq__cta { margin: 1.6rem 0 0; text-align: center; color: var(--ink-mute); font-size: .97rem; } .faq__cta a { font-weight: 600; } /* -------------------------------------------------------------------------- 18. Split content (image + text) -------------------------------------------------------------------------- */ .split { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: clamp(2.5rem, 6vw, 5rem); } .split--reverse .split__media { order: 2; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } } .split__media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); } .split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .split__media--wide img { aspect-ratio: 4 / 3; } /* Portrait photos are taller than the 4:5 window, so cover() trims roughly 200px vertically. Centred that eats into the top of the head — anchoring the crop above centre keeps the face properly framed. */ .split__media--face img { object-position: center 18%; } .split__badge { position: absolute; left: 0; bottom: 0; padding: 1.1rem 1.6rem; background: var(--grad-brand); color: #fff; border-top-right-radius: var(--r-md); } .split__badge b { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1; } .split__badge span { font-size: .88rem; opacity: .92; } .split__body h2 { margin-bottom: 1.25rem; } .checklist { list-style: none; display: grid; gap: .9rem; margin-top: 1.75rem; } .checklist li { position: relative; padding-left: 2.4rem; color: var(--ink-soft); } .checklist li strong { color: var(--ink); font-weight: 600; } .checklist li::before { content: ""; position: absolute; left: 0; top: .1em; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-tint); } .checklist li::after { content: ""; position: absolute; left: 8px; top: .55em; width: 10px; height: 6px; border-left: 2px solid var(--brand-600); border-bottom: 2px solid var(--brand-600); transform: rotate(-45deg); } /* -------------------------------------------------------------------------- 19. Forms -------------------------------------------------------------------------- */ .formcard { background: var(--surface); border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 3rem); box-shadow: 0 30px 70px -42px rgba(20, 55, 67, .5); border: 1px solid var(--line); } .form { display: grid; gap: 1.15rem; } .form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.15rem; } @media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } } .field { display: grid; gap: .45rem; } .field label { font-size: .93rem; font-weight: 500; color: var(--ink); } .field label .req { color: #C0392B; } .field input, .field select, .field textarea { width: 100%; padding: .85rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 1rem; color: var(--ink); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field textarea { min-height: 140px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--brand-b); box-shadow: 0 0 0 4px rgba(10, 122, 191, .18); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: #C0392B; } .field__error { font-size: .86rem; color: #C0392B; min-height: 1.2em; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6E75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 20px; padding-right: 3rem; } .check { display: flex; gap: .8rem; align-items: flex-start; font-size: .92rem; line-height: 1.6; } .check input { flex: none; width: 20px; height: 20px; margin-top: .18rem; accent-color: var(--brand-600); } .form__status { padding: 1rem 1.2rem; border-radius: var(--r-sm); font-size: .96rem; display: none; } .form__status.is-ok { display: block; background: #E8F6EE; color: #1B6E43; border: 1px solid #B9E3CC; } .form__status.is-err { display: block; background: #FCECEA; color: #A0342A; border: 1px solid #F3C9C3; } /* -------------------------------------------------------------------------- 20. Contact detail tiles -------------------------------------------------------------------------- */ .contactlist { list-style: none; display: grid; gap: 1.5rem; } .contactlist li { display: flex; gap: 1.1rem; align-items: flex-start; } .contactlist__icon { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); } .contactlist__icon svg { width: 24px; height: 24px; } .contactlist b { display: block; color: var(--ink); font-weight: 600; margin-bottom: .1rem; } .contactlist a { color: var(--ink-soft); } .contactlist a:hover { color: var(--brand-600); } .mapwrap { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); background: var(--surface-3); min-height: 420px; position: relative; } .mapwrap iframe { width: 100%; height: 100%; min-height: 420px; border: 0; } .mapwrap__consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; padding: 2rem; background: var(--surface-3); } /* -------------------------------------------------------------------------- 21. Gallery -------------------------------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--surface-3); box-shadow: var(--sh-card); } .gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .7s var(--ease); } .gallery figure:hover img { transform: scale(1.05); } .gallery figure.is-wide { grid-column: span 2; } .gallery figure.is-wide img { aspect-ratio: 3 / 2; } @media (max-width: 620px) { .gallery figure.is-wide { grid-column: span 1; } } /* -------------------------------------------------------------------------- 22. Prose (legal pages) -------------------------------------------------------------------------- */ .prose { max-width: 76ch; } .prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.75rem 0 1rem; font-weight: 500; } .prose h3 { font-size: 1.2rem; margin: 2rem 0 .75rem; font-weight: 600; } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose ul, .prose ol { margin: 0 0 1.1em 1.3em; display: grid; gap: .45rem; } .prose li { padding-left: .3rem; } .prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .96rem; } .prose th, .prose td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); } .prose th { color: var(--ink); font-weight: 600; } .prose__meta { font-size: .92rem; color: var(--ink-mute); } .prose { overflow-wrap: break-word; } .prose code { word-break: break-word; } /* Tables scroll rather than push the page wide on tablets … */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.5rem; } .table-wrap table { margin-bottom: 0; } /* … and on phones they stop being tables altogether. A four-column cookie table on a 360px screen squeezes "Zweck" down to one word per line, so each row becomes a card with the column name as an inline label instead. */ @media (max-width: 640px) { .table-wrap { overflow: visible; } .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; } .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .table-wrap tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .35rem 1.1rem; margin-bottom: 1rem; } .table-wrap td { border: 0; padding: .75rem 0; display: grid; grid-template-columns: minmax(0, 6.5rem) 1fr; gap: .25rem 1rem; align-items: start; } .table-wrap td + td { border-top: 1px solid var(--line); } .table-wrap td::before { content: attr(data-label); font-weight: 600; font-size: .88rem; color: var(--ink); } } /* -------------------------------------------------------------------------- 23. Footer -------------------------------------------------------------------------- */ .footer { background: var(--surface); border-top: 1px solid var(--line); padding-top: clamp(3rem, 6vw, 5rem); } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: clamp(1.75rem, 3.5vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } @media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } } .footer__brand .logo { height: 58px; width: auto; margin-bottom: 1.5rem; } .footer__brand p { font-size: .97rem; margin-bottom: .4rem; } .footer__brand a { color: var(--ink-soft); } .footer__brand a:hover { color: var(--brand-600); } .footer h4 { font-size: 1.18rem; font-weight: 400; color: var(--ink); } /* Desktop: the toggle is styled to look and behave like a plain heading. Two class selectors so the mobile override below outranks `.footer h4`. */ .footer .footer__h { margin: 0 0 1.1rem; } .footer__toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0; border: 0; background: none; font-size: 1.18rem; font-weight: 400; line-height: 1.3; color: var(--ink); text-align: left; cursor: default; } .footer__chev { display: none; } .footer__links { list-style: none; display: grid; gap: .7rem; } .footer__links a { font-size: .98rem; color: var(--ink-soft); } .footer__links a:hover { color: var(--brand-600); } .social { display: flex; gap: .7rem; margin-top: 1.5rem; } .social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--teal-600); transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); } .social a:hover { background: var(--grad-brand); color: #fff; transform: translateY(-3px); } .social svg { width: 20px; height: 20px; } .footer__bottom { border-top: 1px solid var(--line); padding-block: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; font-size: .92rem; color: var(--ink-mute); } .footer__legal { display: flex; flex-wrap: wrap; gap: 1.75rem; list-style: none; } .footer__legal a { color: var(--ink-mute); } .footer__legal a:hover { color: var(--brand-600); } /* Footer polish: Google rating pill, icon contact list, to-top */ .footer__rating { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: .45rem; row-gap: .1rem; max-width: 100%; margin: 0 0 1.2rem; padding: .42rem .85rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; font-size: .88rem; color: var(--ink-soft); transition: border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .footer__rating:hover { border-color: rgba(0, 85, 135, .35); color: var(--brand-600); transform: translateY(-1px); } .footer__rating strong { color: var(--ink); font-weight: 700; } .footer__rating-stars { display: inline-flex; flex: none; gap: .1rem; color: #FBB040; } .footer__rating-stars svg { width: 15px; height: 15px; } .footer__contact { list-style: none; display: grid; gap: .5rem; margin: 0 0 1.2rem; } .footer__contact li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--ink-soft); } .footer__contact svg { width: 17px; height: 17px; flex: none; margin-top: .12rem; color: var(--brand-600); } .footer__contact a { color: var(--ink-soft); } .footer__contact a:hover { color: var(--brand-600); } .footer__brand .social { margin-top: .3rem; } .footer__toggle > span:first-child { position: relative; } .footer__toggle > span:first-child::after { content: ""; display: block; width: 26px; height: 2px; margin-top: .45rem; border-radius: 2px; background: var(--grad-brand); } .footer__links a { transition: color .2s var(--ease), padding-left .2s var(--ease); } .footer__links a:hover { padding-left: .25rem; } .footer__top { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-soft); transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease); } .footer__top svg { width: 18px; height: 18px; transform: rotate(-90deg); } .footer__top:hover { background: var(--grad-brand); color: #fff; border-color: transparent; transform: translateY(-2px); } .footer__credit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0; color: var(--ink-mute); } .footer__credit-brand { display: inline-flex; align-items: center; gap: .4rem; } .footer__credit img { width: 15px; height: auto; opacity: .7; } .footer__credit strong { font-weight: 600; color: var(--ink-soft); } @media (max-width: 768px) { .footer__toggle > span:first-child::after { display: none; } } /* --- Mobile: link columns collapse into accordions ----------------------- The brand block and the bottom copyright bar deliberately stay outside this and remain visible at all times. */ @media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 2rem; } .footer__brand { margin-bottom: 1.5rem; } .footer__col { border-top: 1px solid var(--line); } .footer__col:last-child { border-bottom: 1px solid var(--line); } .footer .footer__h { margin: 0; } .footer__toggle { padding: 1.05rem 0; cursor: pointer; font-size: 1.06rem; font-weight: 500; transition: color .25s var(--ease); } .footer__toggle:hover { color: var(--brand-600); } .footer__chev { display: grid; place-items: center; flex: none; width: 30px; height: 30px; color: var(--ink-mute); transition: transform .35s var(--ease), color .25s var(--ease); } .footer__chev svg { width: 20px; height: 20px; } .footer__toggle[aria-expanded="true"] .footer__chev { transform: rotate(180deg); color: var(--brand-600); } /* 0fr → 1fr animates smoothly and needs no fixed height, unlike max-height */ .footer__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .footer__panel[data-open="true"] { grid-template-rows: 1fr; } .footer__panel > div { overflow: hidden; } .footer__links { padding: .15rem 0 1.15rem; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: .85rem; } } /* -------------------------------------------------------------------------- 24. Sticky mobile call bar -------------------------------------------------------------------------- */ .callbar { position: fixed; inset: auto 0 0 0; z-index: 70; display: none; gap: 1px; background: var(--line); box-shadow: 0 -8px 26px -16px rgba(20, 55, 67, .55); } .callbar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem .5rem; background: var(--surface); color: var(--ink); font-size: .95rem; font-weight: 500; } .callbar a:first-child { background: var(--grad-brand); color: #fff; } .callbar svg { width: 19px; height: 19px; } @media (max-width: 780px) { .callbar { display: flex; /* iPhone home-indicator area — without this the bar sits under the gesture bar */ padding-bottom: env(safe-area-inset-bottom, 0px); } /* Reserve the bar's real height plus breathing room, so the last element of a section (e.g. the "Ablauf im Detail" button) is never tucked underneath it. 56px was the bar itself with nothing to spare. */ body { padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px)); } .section:last-of-type, main > section:last-child { padding-bottom: calc(var(--section-y) + 1rem); } } /* -------------------------------------------------------------------------- 24b. Floating action buttons — WhatsApp over Call z-index 65: above page content, below the call bar (70), the drawer backdrop (80), the header (90) and the cookie banner (120). -------------------------------------------------------------------------- */ .fab { position: fixed; right: clamp(1rem, 1.6vw, 1.6rem); bottom: clamp(1rem, 2.4vh, 1.75rem); z-index: 65; display: flex; flex-direction: column; align-items: center; gap: .7rem; } .fab__btn { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; box-shadow: 0 10px 26px -8px rgba(20, 55, 67, .5); transition: transform .28s var(--ease), box-shadow .28s var(--ease); } .fab__btn:hover, .fab__btn:focus-visible { color: #fff; transform: scale(1.08); box-shadow: 0 16px 34px -8px rgba(20, 55, 67, .6); } .fab__btn svg { width: 26px; height: 26px; position: relative; z-index: 1; } .fab__btn--call { background: var(--grad-brand); width: 50px; height: 50px; } .fab__btn--call svg { width: 22px; height: 22px; } .fab__btn--wa { background: #25D366; } /* Expanding ring behind the WhatsApp button. A separate element rather than a box-shadow so it sits under the glyph and cannot bleed over the icon. */ .fab__ring { position: absolute; inset: 0; border-radius: 50%; background: #25D366; opacity: .55; animation: fabRing 2.6s var(--ease) infinite; } @keyframes fabRing { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } } .fab__btn--wa:hover .fab__ring { animation-play-state: paused; } /* Label appears on hover for pointer users; on touch the icons speak for themselves and the aria-label carries the meaning. */ .fab__tip { position: absolute; right: calc(100% + .65rem); padding: .42rem .8rem; border-radius: var(--r-pill); background: rgba(20, 40, 50, .92); color: #fff; font-size: .84rem; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); } .fab__btn:hover .fab__tip, .fab__btn:focus-visible .fab__tip { opacity: 1; transform: translateX(0); } /* The sticky call bar owns the bottom of the screen on phones, so the stack lifts clear of it using the same height token the bar itself uses. */ @media (max-width: 780px) { .fab { bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px) + .9rem); gap: .6rem; } .fab__btn { width: 52px; height: 52px; } .fab__btn svg { width: 24px; height: 24px; } .fab__btn--call { width: 46px; height: 46px; } .fab__btn--call svg { width: 20px; height: 20px; } .fab__tip { display: none; } } @media (prefers-reduced-motion: reduce) { .fab__ring { display: none; } } /* -------------------------------------------------------------------------- 25. Cookie banner -------------------------------------------------------------------------- */ .cookie { position: fixed; left: 50%; bottom: clamp(1rem, 3vw, 1.75rem); transform: translate(-50%, 140%); z-index: 120; width: min(940px, calc(100vw - 2rem)); padding: clamp(1.25rem, 3vw, 1.9rem); background: #fff; border-radius: var(--r-lg); box-shadow: 0 30px 70px -25px rgba(20, 55, 67, .55); border: 1px solid var(--line); transition: transform .5s var(--ease); } .cookie.is-open { transform: translate(-50%, 0); } @media (max-width: 780px) { .cookie { bottom: 68px; } } .cookie h4 { margin-bottom: .5rem; } .cookie p { font-size: .93rem; line-height: 1.65; margin-bottom: 1.1rem; } .cookie__actions { display: flex; flex-wrap: wrap; gap: .75rem; } .cookie__actions .btn { flex: 1 1 auto; } .cookie__link { background: none; border: 0; padding: .6rem 0; color: var(--ink-mute); font-size: .9rem; cursor: pointer; text-decoration: underline; } /* -------------------------------------------------------------------------- 26. Scroll reveal -------------------------------------------------------------------------- */ /* Content is VISIBLE by default. The hidden start state is opt-in via the .js-reveal class, which an inline script in only adds after checking that IntersectionObserver exists and reduced motion is not requested. Previously the hidden state was unconditional, so anything that stopped the observer from firing left the page permanently blank. That is exactly what happened on the legal pages: their single .prose block is taller than the viewport, and a 0.12 threshold on an element taller than the root can never be satisfied — 12% of a 6000px block is 720px, more than the (already shrunk) root height, so isIntersecting never flipped to true. */ [data-reveal] { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--delay, 0ms); } .js-reveal [data-reveal] { opacity: 0; transform: translateY(26px); } .js-reveal [data-reveal="left"] { transform: translateX(-34px); } .js-reveal [data-reveal="right"] { transform: translateX(34px); } .js-reveal [data-reveal="zoom"] { transform: scale(.94); } .js-reveal [data-reveal].is-in { opacity: 1; transform: none; } /* Count-up numbers should not jump layout before they animate */ .trustbar__num[data-count] { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .hero__media video { display: none; } } /* -------------------------------------------------------------------------- 27. Utilities -------------------------------------------------------------------------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .mb-0 { margin-bottom: 0; } .nowrap { white-space: nowrap; } .tint { background: var(--brand-tint); } .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1.05rem; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-ink); font-size: .88rem; font-weight: 500; } .pill--light { background: rgba(255, 255, 255, .16); color: #fff; } .pill svg { width: 16px; height: 16px; } .chiprow { display: flex; flex-wrap: wrap; gap: .6rem; } .chip { padding: .5rem 1.05rem; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: .92rem; color: var(--ink-soft); transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); } a.chip:hover { border-color: var(--brand-b); color: var(--brand-ink); background: var(--brand-tint); } @media print { .header, .callbar, .cookie, .fab, .slider__btn, .footer__bottom { display: none !important; } body { color: #000; } }