/* ========================================================================== AutoService Wilhelmsruh — Production Stylesheet Design system per "Final Website Concept" Section E, revised per "Hero Production Plan". Organized top to bottom: 1. Tokens 2. Reset/Base 3. Layout utilities 4. Typography 5. Buttons/CTA 6. Header/Nav 7. Hero 8. Sections 9. Footer 10. Motion/reveals 11. Responsive breakpoints ========================================================================== */ /* ---------- 1. TOKENS ---------- */ :root{ --bg:#f2efe9; --bg-raised:#ffffff; --ink:#1c1a17; --ink-muted:#5c574e; --ink-faint:#8a8477; --accent:#b8622a; /* amber — the ONLY action color */ --accent-ink:#ffffff; --accent-2:#2f6f7a; /* diagnostic teal — informational only, never on buttons */ --line:#d8d2c6; --line-strong:#c2baa8; --status-open:#2f7a4f; --status-closed:#b8402a; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --disp: "Arial Narrow", "Helvetica Neue Condensed", "Segoe UI", var(--sans); --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px; --radius: 4px; /* functional only — tap targets, never decorative */ --container: 1280px; --header-h: 112px; /* grown to fit the new full wordmark logo lockup, desktop only */ --cta-reserve: 208px; /* space reserved on desktop so nav never runs under the fixed phone-pill */ --ease-precise: cubic-bezier(.16,.84,.44,1); /* mechanical, no bounce/spring */ } @media (prefers-color-scheme: dark){ :root{ --bg:#171614; --bg-raised:#1e1c19; --ink:#ece7de; --ink-muted:#a39d8e; --ink-faint:#726c5f; --accent:#e08a3e; --accent-ink:#1c1204; --accent-2:#4fb3c2; --line:#3a3630; --line-strong:#4d473d; --status-open:#5cc98a; --status-closed:#e0703e; } } :root[data-theme="dark"]{ --bg:#171614; --bg-raised:#1e1c19; --ink:#ece7de; --ink-muted:#a39d8e; --ink-faint:#726c5f; --accent:#e08a3e; --accent-ink:#1c1204; --accent-2:#4fb3c2; --line:#3a3630; --line-strong:#4d473d; --status-open:#5cc98a; --status-closed:#e0703e; } :root[data-theme="light"]{ --bg:#f2efe9; --bg-raised:#ffffff; --ink:#1c1a17; --ink-muted:#5c574e; --ink-faint:#8a8477; --accent:#b8622a; --accent-ink:#ffffff; --accent-2:#2f6f7a; --line:#d8d2c6; --line-strong:#c2baa8; --status-open:#2f7a4f; --status-closed:#b8402a; } /* This site's default ground is the dark graphite/warm-off-white world regardless of OS theme — the brand is intentionally dark-first, per the approved visual direction (Section 1 of the implementation brief). */ :root{ --bg:#171614; --bg-raised:#1e1c19; --ink:#ece7de; --ink-muted:#a39d8e; --ink-faint:#726c5f; --accent:#e08a3e; --accent-ink:#1c1204; --accent-2:#4fb3c2; --line:#3a3630; --line-strong:#4d473d; --status-open:#5cc98a; --status-closed:#e0703e; } /* ---------- 2. RESET / BASE ---------- */ *, *::before, *::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; } h1,h2,h3,h4{ margin:0; font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance; } p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } input, textarea{ font:inherit; } /* Visible, consistent focus state everywhere — never suppressed */ :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; } .skip-link{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--accent); color:var(--accent-ink); padding:12px 18px; font-family:var(--mono); font-size:13px; text-decoration:none; transition:top .2s var(--ease-precise); } .skip-link:focus{ top:12px; } /* ---------- 3. LAYOUT UTILITIES ---------- */ .container{ max-width:var(--container); margin:0 auto; padding:0 24px; } .section{ padding:var(--space-7) 0; border-bottom:1px solid var(--line); } .section--tight{ padding:var(--space-5) 0; } .section--raised{ background:var(--bg-raised); } .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- 4. TYPOGRAPHY ---------- */ .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); display:flex; align-items:center; gap:10px; margin:0 0 var(--space-2); } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent-2); } .h1{ font-size:clamp(34px,6vw,72px); line-height:1.03; } .h2{ font-size:clamp(26px,4vw,44px); line-height:1.05; } .h3{ font-size:clamp(20px,2.6vw,28px); line-height:1.1; } .lead{ font-size:clamp(16px,1.6vw,19px); color:var(--ink-muted); max-width:62ch; } .body-muted{ color:var(--ink-muted); max-width:65ch; font-size:15.5px; } .de{ color:var(--ink); } /* ---------- 5. BUTTONS / CTA ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:15px; padding:14px 26px; border-radius:var(--radius); text-decoration:none; transition:transform .18s var(--ease-precise), background-color .18s var(--ease-precise), border-color .18s var(--ease-precise); min-height:48px; min-width:48px; justify-content:center; } .btn--solid{ background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); } .btn--ghost{ background:transparent; color:var(--ink); border:1px solid rgba(236,231,222,.4); } @media (hover:hover) and (pointer:fine){ .btn--solid:hover{ transform:scale(1.02); } .btn--ghost:hover{ border-color:var(--accent); color:var(--accent); } } /* Touch press feedback — real action buttons only (Hero CTA, Services CTA, Maps CTAs, ...). A brief, small scale on the actual tap, nothing more. */ @media (hover:none), (pointer:coarse){ .btn{ transition:transform .15s var(--ease-precise), background-color .18s var(--ease-precise), border-color .18s var(--ease-precise); } .btn:active{ transform:scale(.98); } .btn--ghost:active{ border-color:var(--accent); color:var(--accent); } } .btn--text{ background:none; border:0; padding:4px 0; color:var(--accent-2); font-family:var(--sans); text-transform:none; letter-spacing:0; font-weight:600; font-size:15px; border-bottom:1px solid transparent; } .btn--text:hover{ border-bottom-color:var(--accent-2); } .btn svg{ width:18px; height:18px; flex:0 0 auto; } /* Desktop-only floating phone pill — sibling to the header, so it is NEVER affected by the header's hide/show transform (see Section 6/JS). */ .phone-pill-wrap{ position:fixed; top:18px; right:24px; z-index:150; } .phone-pill{ position:relative; z-index:1; display:flex; align-items:center; gap:8px; background:var(--accent); color:var(--accent-ink); font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:13.5px; padding:11px 18px; border-radius:var(--radius); text-decoration:none; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .4s var(--ease-precise), transform .4s var(--ease-precise); } .phone-pill.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; } .phone-pill:hover{ transform:scale(1.02); } .phone-pill svg{ width:16px; height:16px; flex:0 0 auto; } /* Desktop click-to-copy popover (phone links dial directly on mobile) */ .phone-popover{ position:absolute; top:calc(100% + 8px); right:0; background:var(--bg-raised); border:1px solid var(--line-strong); padding:14px 16px; min-width:220px; font-family:var(--sans); font-size:13.5px; color:var(--ink-muted); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s var(--ease-precise), transform .18s var(--ease-precise); } .phone-popover.is-open{ opacity:1; visibility:visible; transform:translateY(0); } .phone-popover strong{ display:block; color:var(--ink); font-family:var(--mono); font-size:16px; margin-bottom:6px; letter-spacing:.02em; } .phone-popover button{ color:var(--accent-2); font-size:12.5px; text-decoration:underline; margin-top:6px; } /* Mobile sticky call bar — visible for the rest of the page once the visitor has scrolled past the Hero (not hide-on-scroll after that point, since the phone call is the site's primary conversion action). Withheld during the Hero itself so it never doubles up with the mobile Hero's own single "Jetzt anrufen" CTA — same is-active gating main.js already uses for the header, reusing the existing scroll-fallback timing (hero.js never fires hero:resolved on mobile, so this always resolves via that fallback). */ .mobile-call-bar{ position:fixed; left:0; right:0; bottom:0; z-index:150; display:none; background:var(--accent); color:var(--accent-ink); padding:14px 20px; text-decoration:none; align-items:center; justify-content:center; gap:10px; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:15px; min-height:56px; opacity:0; pointer-events:none; transition:opacity .3s var(--ease-precise), transform .15s var(--ease-precise); } .mobile-call-bar.is-active{ opacity:1; pointer-events:auto; } .mobile-call-bar svg{ width:20px; height:20px; } @media (hover:none), (pointer:coarse){ .mobile-call-bar:active{ transform:scale(.98); } } /* ---------- 6. HEADER / NAV ---------- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:140; height:var(--header-h); display:flex; align-items:center; background:rgba(23,22,20,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transform:translateY(0); transition:transform .35s var(--ease-precise), opacity .5s var(--ease-precise); opacity:0; pointer-events:none; } .site-header.is-active{ opacity:1; pointer-events:auto; } .site-header.is-hidden{ transform:translateY(-100%); } .site-header__inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; /* Reserves room for the independently-fixed phone-pill (see .phone-pill-wrap) so nav links never run underneath it — the pill stays outside the header's own DOM/layout on purpose (it must not hide when the header does), so this is the header's side of that contract. */ padding-right:var(--cta-reserve); } /* Base brand sizing (shared by header + footer instances of .brand); the header gets a distinct, larger treatment below so a future logo swap only needs new image assets, not layout changes. */ .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; } .brand img{ width:40px; height:40px; } .brand span{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:15px; letter-spacing:.02em; color:var(--ink); } .brand small{ display:block; font-family:var(--mono); font-size:9.5px; color:var(--ink-faint); letter-spacing:.04em; text-transform:none; } /* New full wordmark logo (autoservice-wilhelmsruh-logo-brand-neutral.png, 1536×1024, "AUTOSERVICE" dominant / "WILHELMSRUH" secondary baked into the artwork) replaces the old square emblem. The image already states the business name, so the adjacent text label is redundant and hidden here — only the address stays as the secondary text, per the brief. */ .site-header .brand{ gap:14px; } .site-header .brand img{ width:auto; height:82px; /* Soft, premium separation from the dark header — not a sticker outline: a wide, low-opacity, generously-blurred drop-shadow that follows the artwork's real silhouette (filter, not box-shadow) rather than a hard rectangle. Present but should read as barely-there studio backlight. */ filter: drop-shadow(0 0 14px rgba(236,231,222,.16)) drop-shadow(0 0 2px rgba(236,231,222,.10)); } .site-header .brand span{ display:none; } .site-header .brand small{ font-size:11px; letter-spacing:.05em; color:var(--ink-muted); } .nav-links{ display:flex; align-items:center; gap:var(--space-4); } .nav-links a{ font-family:var(--sans); font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink-muted); padding:4px 0; border-bottom:1px solid transparent; transition:color .18s var(--ease-precise), border-color .18s var(--ease-precise); } .nav-links a:hover{ color:var(--ink); border-bottom-color:var(--accent); } .nav-toggle{ display:none; width:44px; height:44px; align-items:center; justify-content:center; } .nav-toggle::before, .nav-toggle::after{ display:none; } .nav-toggle-icon{ position:relative; width:22px; height:16px; } .nav-toggle-icon span{ position:absolute; left:0; right:0; height:2px; background:var(--ink); transition:transform .25s var(--ease-precise), opacity .25s var(--ease-precise); } .nav-toggle-icon span:nth-child(1){ top:0; } .nav-toggle-icon span:nth-child(2){ top:7px; } .nav-toggle-icon span:nth-child(3){ top:14px; } .nav-open .nav-toggle-icon span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-open .nav-toggle-icon span:nth-child(2){ opacity:0; } .nav-open .nav-toggle-icon span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .mobile-nav{ position:fixed; inset:0; z-index:130; background:var(--bg); display:flex; flex-direction:column; justify-content:center; gap:var(--space-3); padding:0 32px; opacity:0; visibility:hidden; transition:opacity .3s var(--ease-precise); } .nav-open .mobile-nav{ opacity:1; visibility:visible; } .mobile-nav__phone{ font-family:var(--mono); font-size:22px; color:var(--accent); text-decoration:none; margin-bottom:var(--space-3); } .mobile-nav a.nav-link-lg{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:32px; text-decoration:none; color:var(--ink); padding:10px 0; border-top:1px solid var(--line); transition:color .15s var(--ease-precise); } .mobile-nav a.nav-link-lg:active{ color:var(--accent); } /* ---------- 7. HERO ---------- Single edited cinematic video (werkstatt-hero-final.mp4, web-optimized derivatives in /public/hero-sequence/video/), not a scroll-scrubbed frame sequence — that placeholder architecture was retired once the final edit arrived. A normal full-viewport section; the video plays once on load. */ .hero{ position:relative; height:100vh; min-height:560px; /* Capped relative to viewport WIDTH, not just height — the source video is 1280×720 (16:9); constraining max-height this way keeps the rendered hero closer to that ratio so object-fit:cover crops far less of the composition than a flat px cap would on typical desktop windows, while still reading as a full-bleed, near-full-viewport-height hero. */ max-height:min(900px, 66vw); overflow:hidden; display:flex; align-items:flex-end; background:#14120f; /* reserves the space instantly — no layout shift while media loads */ } .hero__media{ position:absolute; inset:0; } .hero__poster{ position:absolute; inset:0; z-index:1; } .hero__poster img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 42%; } .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:2; opacity:0; transition:opacity .7s var(--ease-precise); } .hero__video.is-active{ opacity:1; } .hero__final-image{ position:absolute; inset:0; z-index:2; opacity:0; transition:opacity 1.1s var(--ease-precise); } .hero__final-image img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 42%; } .hero__final-image.is-active{ opacity:1; } .hero__scrim{ position:absolute; inset:0; z-index:3; /* Two soft, feathered washes — never a hard edge or box: a wide left-side fade so the eyebrow/headline/CTA sit on a controlled darker ground, layered under the existing bottom fade. Center/right stay vivid. */ background: linear-gradient(90deg, rgba(15,13,11,.4) 0%, rgba(15,13,11,.2) 32%, rgba(15,13,11,0) 64%), linear-gradient(180deg, rgba(15,13,11,.05) 0%, rgba(15,13,11,.12) 45%, rgba(15,13,11,.72) 100%); } .hero__sound{ position:absolute; right:24px; bottom:24px; z-index:6; display:flex; align-items:center; gap:8px; background:rgba(23,22,20,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(236,231,222,.25); border-radius:var(--radius); padding:9px 14px; font-family:var(--mono); font-size:11.5px; color:var(--ink); letter-spacing:.04em; min-height:40px; transition:padding .45s var(--ease-precise), background-color .45s var(--ease-precise), border-color .45s var(--ease-precise), box-shadow .45s var(--ease-precise), font-size .45s var(--ease-precise); } .hero__sound svg{ width:16px; height:16px; flex:0 0 auto; } /* First-playback sound invitation ("Mit Ton erleben") — the same element as the compact toggle, briefly enlarged. Amber accent, a soft wide glow (not a hard neon ring), never a modal/panel. Shrinks back into the ordinary compact control via the same transition, on timeout or on click. */ .hero__sound.is-inviting{ padding:13px 20px; font-size:13px; background:var(--accent); color:var(--accent-ink); border-color:var(--accent); box-shadow:0 0 0 1px rgba(224,138,62,.25), 0 8px 28px -6px rgba(224,138,62,.55); } .hero__sound.is-inviting svg{ width:18px; height:18px; } /* AI disclosure — small, permanent, top-left, sitting just below the header's own band (header is transparent pre-resolve, opaque/fixed post-resolve — positioning below it means the disclosure is never hidden either way). Clear of the other Hero controls (sound bottom-right, CTA/headline bottom-left, scroll hint bottom-center) and the video composition itself. Applies only to the AI-generated Hero video, never to real workshop photography elsewhere. */ .hero__ai-disclosure{ position:absolute; left:16px; top:calc(var(--header-h) + 12px); z-index:6; margin:0; pointer-events:none; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:rgba(236,231,222,.5); text-shadow:0 1px 4px rgba(0,0,0,.7); } .hero__content{ position:relative; z-index:5; width:100%; padding:0 24px var(--space-6); max-width:var(--container); margin:0 auto; } .hero__eyebrow{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--ink); text-shadow:0 1px 10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.8); margin-bottom:var(--space-2); opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease-precise), transform .5s var(--ease-precise); } .hero__eyebrow.is-in{ opacity:1; transform:translateY(0); } .hero__headline{ /* Moderated from the original clamp(30px,6.4vw,76px) — strong and legible, but the video is the primary storytelling element, not the type. */ font-size:clamp(26px,4.4vw,52px); line-height:1.12; max-width:19ch; min-height:1.1em; text-shadow:0 2px 20px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.6); } .hero__headline .frag{ display:inline; opacity:0; filter:blur(4px); transition:opacity .55s var(--ease-precise), filter .55s var(--ease-precise); } .hero__headline .frag.is-in{ opacity:1; filter:blur(0); } .hero__cta{ margin-top:var(--space-4); opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease-precise), transform .4s var(--ease-precise), background-color .18s, border-color .18s; } .hero__cta.is-ghost{ background:transparent; border-color:rgba(236,231,222,.5); color:var(--ink); opacity:1; transform:translateY(0); } .hero__cta.is-solid{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); opacity:1; transform:translateY(0); } .hero__scroll-hint{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:5; font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.08em; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:1; transition:opacity .4s var(--ease-precise); } .hero__scroll-hint.is-hidden{ opacity:0; pointer-events:none; } .hero__scroll-hint span{ width:1px; height:26px; background:linear-gradient(var(--ink-faint), transparent); animation:hero-hint-pulse 2.2s ease-in-out infinite; } @keyframes hero-hint-pulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } } /* ---------- Mobile Hero (<768px) ---------- A completely separate, static, JS-free experience — not the desktop Hero squeezed narrower. Hidden by default (desktop/tablet); the media query below both reveals this block and hides the desktop video/content/sound/ scroll-hint, so the two never render at the same time. Reuses the exact same approved final-state image as the desktop video's resolved frame. */ .hero__mobile{ display:none; position:absolute; inset:0; } .hero__mobile-image{ position:absolute; inset:0; } .hero__mobile-image img{ display:block; width:100%; height:100%; object-fit:cover; object-position:74% 44%; } .hero__mobile-scrim{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,13,11,.15) 0%, rgba(15,13,11,.05) 30%, rgba(15,13,11,.55) 72%, rgba(15,13,11,.88) 100%); } .hero__mobile-content{ display:none; position:relative; z-index:5; width:100%; padding:0 20px calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); } .hero__mobile-headline{ /* Line break is explicit (
in markup gives exactly the two lines from the brief) — no ch-based max-width fighting it. */ font-size:clamp(28px,8.5vw,40px); line-height:1.12; margin:0; text-shadow:0 2px 20px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.65); } .hero__mobile-cta{ margin-top:var(--space-4); width:100%; } @media (prefers-reduced-motion: reduce){ .hero__video{ display:none; } /* poster only — never fetched, never played */ .hero__eyebrow, .hero__headline .frag, .hero__cta{ opacity:1 !important; transform:none !important; filter:none !important; } .hero__scroll-hint, .hero__sound{ display:none; } } @media (max-width:767px){ /* The 66vw crop-reduction cap (see Section 7) is a desktop-only concern — on mobile it must not fight min-height/100svh and shrink the hero. */ .hero{ height:100svh; max-height:none; } .hero__media, .hero__content, .hero__scroll-hint, .hero__sound{ display:none; } .hero__mobile, .hero__mobile-content{ display:block; } .hero__ai-disclosure{ left:16px; top:calc(var(--header-h) + 14px); font-size:9.5px; background:rgba(15,13,11,.55); padding:4px 8px; border-radius:3px; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } } /* ---------- 8. SECTIONS ---------- */ /* Trust bar */ .trust-bar{ padding:22px 0; } .trust-bar__row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); justify-content:space-between; } .trust-bar__facts{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; } .trust-fact{ display:flex; flex-direction:column; gap:2px; } .trust-fact .num{ font-family:var(--mono); font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; } .trust-fact .lbl{ font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); letter-spacing:.04em; text-transform:uppercase; } .status-pill{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; } .status-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--status-closed); } .status-pill.is-open .dot{ background:var(--status-open); } .status-pill.is-open{ color:var(--status-open); } .status-pill:not(.is-open){ color:var(--status-closed); } /* Differentiator — the photo is the dominant visual; the amber wash and corner hexmark are now a light integration touch, not the content. */ .differentiator__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-6); align-items:center; } .differentiator__visual{ aspect-ratio:4/5; border:1px solid var(--line-strong); background:var(--bg-raised); position:relative; overflow:hidden; } .differentiator__visual picture{ position:absolute; inset:0; display:block; } .differentiator__visual img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block; } .differentiator__visual::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(60% 60% at 50% 45%, rgba(224,138,62,.10), transparent 70%); } .differentiator__visual::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(23,22,20,.18), transparent 32%, transparent 68%, rgba(23,22,20,.38)); } .differentiator__visual .differentiator__hexmark{ position:absolute; right:14px; bottom:14px; z-index:2; width:38px; height:42px; opacity:.3; color:var(--accent); pointer-events:none; } /* Services — a unified technical panel, not nine floating cards. Hairline dividers are the grid's own 1px gap showing var(--line) through, not per-card borders; primary/secondary is a typographic + spacing hierarchy, not a color or brightness split. */ .services{ position:relative; overflow:hidden; } .services__schematic{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045; background-image: linear-gradient(var(--line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--line-strong) 1px, transparent 1px); background-size:56px 56px; } /* Two large, barely-visible hex outlines — the site's established brand geometry (same motif as the differentiator/workshop hexmarks), reused here purely as atmosphere. Bleeds off the panel's corners on purpose. */ .services__hex{ position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:var(--accent-2); stroke-width:1; opacity:.05; } .services .container{ position:relative; z-index:1; } /* Heading → panel: a short accent tick at the panel's top-left rhymes with the eyebrow's own dash above it, so the two read as one composition instead of two stacked, unrelated blocks. */ .services__panel{ position:relative; margin-top:var(--space-4); border:1px solid var(--line-strong); } .services__panel::before{ content:""; position:absolute; top:-1px; left:0; width:64px; height:2px; background:var(--accent); } .services__primary, .services__secondary{ display:grid; gap:1px; background:var(--line); } .services__primary{ grid-template-columns:repeat(3,1fr); } .services__secondary{ grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-strong); } article.service-card{ /* element+class selector, deliberately more specific than .reveal (also a single class) so this transition timing wins regardless of source order — otherwise .reveal's own transition declaration on the same element would silently override the hover-lift timing below. */ position:relative; overflow:visible; background:linear-gradient(180deg, rgba(236,231,222,.025), transparent 45%), var(--bg-raised); padding:var(--space-3) var(--space-3) var(--space-4); transition:transform .3s var(--ease-precise), box-shadow .3s var(--ease-precise); } .service-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent); opacity:0; transition:opacity .3s var(--ease-precise); pointer-events:none; } .service-card__icon{ width:32px; height:32px; color:var(--ink-faint); transition:color .25s var(--ease-precise), filter .3s var(--ease-precise); } .service-card h3{ font-family:var(--disp); text-transform:uppercase; font-weight:700; letter-spacing:.01em; font-size:15.5px; margin-top:var(--space-2); color:var(--ink-muted); transition:color .2s var(--ease-precise); } .service-card p{ font-size:13.5px; color:var(--ink-faint); margin-top:6px; max-width:32ch; } /* Hover-lift: mouse/trackpad only — a technical panel becoming active, not a floating web card. Gated so touch never gets a sticky post-tap hover state; transform-only (no layout properties) so neighboring cells never reflow, and z-index lets the risen card clear the 1px grid-divider lines of the row above/below it. */ @media (hover:hover) and (pointer:fine){ article.service-card:hover{ transform:translateY(-6px) scale(1.02); z-index:2; box-shadow:0 24px 40px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(224,138,62,.22), 0 0 28px -6px rgba(224,138,62,.4); } .service-card:hover::before{ opacity:1; } .service-card:hover .service-card__icon{ color:var(--accent); filter:drop-shadow(0 0 6px rgba(224,138,62,.55)); } .service-card:hover h3{ color:var(--ink); } } @media (prefers-reduced-motion:reduce){ article.service-card{ transition:none; } article.service-card:hover{ transform:none; } } /* Mobile scroll reveal — hover doesn't exist on touch, so cards would otherwise feel completely static there. Cards start slightly dim/lowered and resolve in a left-to-right, top-to-bottom stagger the first time the panel scrolls into view (see main.js .services__panel IntersectionObserver, fires once). Desktop's hover system above is untouched by any of this. */ @media (max-width:767px){ article.service-card{ opacity:.65; transform:translateY(10px) scale(.99); transition:opacity .4s var(--ease-precise), transform .4s var(--ease-precise); } .services__panel.is-active article.service-card{ opacity:1; transform:translateY(0) scale(1); } .services__panel.is-active .services__primary .service-card:nth-child(1){ transition-delay:0ms; } .services__panel.is-active .services__primary .service-card:nth-child(2){ transition-delay:85ms; } .services__panel.is-active .services__primary .service-card:nth-child(3){ transition-delay:170ms; } .services__panel.is-active .services__secondary .service-card:nth-child(1){ transition-delay:255ms; } .services__panel.is-active .services__secondary .service-card:nth-child(2){ transition-delay:340ms; } .services__panel.is-active .services__secondary .service-card:nth-child(3){ transition-delay:425ms; } .services__panel.is-active .services__secondary .service-card:nth-child(4){ transition-delay:510ms; } .services__panel.is-active .services__secondary .service-card:nth-child(5){ transition-delay:595ms; } .services__panel.is-active .services__secondary .service-card:nth-child(6){ transition-delay:680ms; } } /* Scroll spotlight — cards are informational, not tappable, so there is no tap/:active press feedback here (never add one back). Instead main.js toggles .is-scroll-active continuously, via IntersectionObserver, as each card passes through the viewport's reading band while the user scrolls — the same amber-accent/icon-glow/lift language as desktop :hover below, just driven by scroll position instead of a pointer. No tap required, no link/href added. Matching-specificity rules for both the pre-reveal and post-reveal (.is-active) states, same reason as the Ablauf hover fix above — the higher-specificity .services__panel.is-active article.service-card rule would otherwise silently outrank a plain .is-scroll-active transform. */ @media (hover:none), (pointer:coarse){ article.service-card{ transition:opacity .4s var(--ease-precise), transform .35s var(--ease-precise), box-shadow .35s var(--ease-precise); } article.service-card.is-scroll-active{ transform:translateY(-4px) scale(1.015); box-shadow:0 18px 32px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(224,138,62,.22), 0 0 22px -6px rgba(224,138,62,.38); } .services__panel.is-active article.service-card.is-scroll-active{ transform:translateY(-4px) scale(1.015); box-shadow:0 18px 32px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(224,138,62,.22), 0 0 22px -6px rgba(224,138,62,.38); } .service-card.is-scroll-active::before{ opacity:1; } .service-card.is-scroll-active .service-card__icon{ color:var(--accent); filter:drop-shadow(0 0 6px rgba(224,138,62,.5)); } .service-card.is-scroll-active h3{ color:var(--ink); } } @media (max-width:767px) and (prefers-reduced-motion:reduce){ article.service-card{ opacity:1; transform:none; transition:none; } } /* Primary trio: a touch more weight (icon/type/padding, already present) plus a faint warm gradient in the corner — depth, not a colored block — evoking light catching a raised piece of machined metal. */ .service-card--primary{ padding:var(--space-4) var(--space-4) var(--space-5); background: radial-gradient(130% 150% at 12% -15%, rgba(224,138,62,.06), transparent 55%), linear-gradient(180deg, rgba(236,231,222,.03), transparent 45%), var(--bg-raised); } .service-card--primary .service-card__icon{ width:44px; height:44px; } .service-card--primary h3{ font-size:19.5px; color:var(--ink); margin-top:var(--space-3); } .service-card--primary p{ font-size:14.5px; color:var(--ink-muted); margin-top:8px; } /* Small, fast, restrained stagger — reveal timing itself, not new motion. */ .services__primary .service-card:nth-child(1){ transition-delay:0ms; } .services__primary .service-card:nth-child(2){ transition-delay:60ms; } .services__primary .service-card:nth-child(3){ transition-delay:120ms; } .services__secondary .service-card:nth-child(1){ transition-delay:0ms; } .services__secondary .service-card:nth-child(2){ transition-delay:40ms; } .services__secondary .service-card:nth-child(3){ transition-delay:80ms; } .services__secondary .service-card:nth-child(4){ transition-delay:120ms; } .services__secondary .service-card:nth-child(5){ transition-delay:160ms; } .services__secondary .service-card:nth-child(6){ transition-delay:200ms; } .services__cta{ margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); } /* CTA button on the left, explanatory text on the right (desktop/tablet row layout only) — pure visual reorder via flex `order`, DOM order unchanged so the existing mobile stack (text above button) needs no separate markup. */ .services__cta .btn{ order:-1; } .services__cta-head{ font-family:var(--disp); text-transform:uppercase; font-weight:700; font-size:17px; } .services__cta-sub{ font-size:14px; color:var(--ink-muted); margin-top:4px; max-width:48ch; } /* Workshop — Expandable Selector (prototype), adapted from the 21st.dev "Interactive Selector" React concept into vanilla CSS + JS (see assets/js/workshop-selector.js). Same 6 real photos, same 12 buttons (6 row panels + 6 small thumbnails) in the markup at every width — only which set is visible, and how the row panels are laid out, changes: 1) Default (mobile-first): the row panels stack as one crossfading "current photo" box (aspect-ratio 4/3) with the thumbnail strip below for tap-to-switch. This is also what any prefers-reduced-motion visitor gets, permanently, at every width — transitions removed via the reduced-motion override at the bottom of this block. 2) @media(min-width:1024px) and (prefers-reduced-motion:no-preference): the row becomes a horizontal flex strip — the active panel grows to ~58% of the width via a flex-grow transition, thumbnails are hidden (unnecessary once every photo has its own always-visible strip). */ .workshop__select{ margin-top:var(--space-5); } .workshop__select-row{ position:relative; width:100%; aspect-ratio:4/3; border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; background:var(--bg-raised); } .workshop__select-panel{ position:absolute; inset:0; margin:0; padding:0; border:0; display:block; width:100%; height:100%; background:none; cursor:pointer; opacity:0; z-index:1; transition:opacity .5s var(--ease-precise), flex-grow .7s cubic-bezier(.22,1,.36,1); } .workshop__select-panel.is-active{ opacity:1; z-index:2; cursor:default; } .workshop__select-panel picture{ display:contents; } .workshop__select-panel img{ width:100%; height:100%; object-fit:cover; display:block; } /* Per-photo crop anchor — never the same value twice. Panel 3 is the werkstatt-collage.jpg composite (wrench wall + mechaniker, already combined side-by-side by the client at a landscape 3:2 ratio close to this selector's own active-panel aspect) — plain object-fit:cover at center/center already shows it nearly whole with only a sliver trimmed top/bottom, no letterboxing needed here (unlike the single wrench photo this replaced, which needed object-fit:contain to avoid a bad crop). */ .workshop__select-panel--1 img{ object-position:60% 45%; } .workshop__select-panel--2 img{ object-position:45% 45%; } .workshop__select-panel--3 img{ object-position:center center; } .workshop__select-panel--4 img{ object-position:center 25%; } .workshop__select-panel--5 img{ object-position:35% center; } .workshop__select-panel--6 img{ object-position:center 68%; } .workshop__select-thumbs{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:10px; padding-bottom:2px; } .workshop__select-thumbs::-webkit-scrollbar{ display:none; } .workshop__select-thumb{ flex:0 0 auto; width:64px; height:64px; padding:0; margin:0; border:1px solid var(--line-strong); border-radius:4px; overflow:hidden; background:var(--bg-raised); cursor:pointer; opacity:.5; transition:opacity .25s var(--ease-precise), border-color .25s var(--ease-precise); } .workshop__select-thumb.is-active{ opacity:1; border-color:var(--accent); } .workshop__select-thumb picture{ display:contents; } .workshop__select-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } @media (min-width:480px){ .workshop__select-row{ aspect-ratio:16/10; } .workshop__select-thumb{ width:72px; height:72px; } } /* ---------- Entrance reveal (fires once, restrained) ---------- Same IntersectionObserver-fires-once pattern as the rest of the site (Ablauf, Services). Far more subtle than the reference's 180ms/60px slide: a short opacity fade, ~60ms apart, no movement. */ .workshop__select:not(.is-revealed) .workshop__select-panel, .workshop__select:not(.is-revealed) .workshop__select-thumb{ opacity:0 !important; transition:none; } .workshop__select.is-revealed .workshop__select-panel, .workshop__select.is-revealed .workshop__select-thumb{ transition:opacity .45s var(--ease-precise), flex-grow .7s cubic-bezier(.22,1,.36,1), border-color .25s var(--ease-precise); } .workshop__select.is-revealed .workshop__select-panel--1, .workshop__select.is-revealed .workshop__select-thumb:nth-child(1){ transition-delay:0ms; } .workshop__select.is-revealed .workshop__select-panel--2, .workshop__select.is-revealed .workshop__select-thumb:nth-child(2){ transition-delay:60ms; } .workshop__select.is-revealed .workshop__select-panel--3, .workshop__select.is-revealed .workshop__select-thumb:nth-child(3){ transition-delay:120ms; } .workshop__select.is-revealed .workshop__select-panel--4, .workshop__select.is-revealed .workshop__select-thumb:nth-child(4){ transition-delay:180ms; } .workshop__select.is-revealed .workshop__select-panel--5, .workshop__select.is-revealed .workshop__select-thumb:nth-child(5){ transition-delay:240ms; } .workshop__select.is-revealed .workshop__select-panel--6, .workshop__select.is-revealed .workshop__select-thumb:nth-child(6){ transition-delay:300ms; } /* Once revealed, don't let the leftover delay also apply to later clicks. */ .workshop__select.is-revealed .workshop__select-panel.is-active{ transition-delay:0ms; } /* ---------- Desktop expandable row (motion-enabled only) ---------- One flex row, gap-as-divider (matches the Services/Workshop technique used elsewhere): active panel flex-grow:7, each inactive flex-grow:1 — with 6 panels that's ~58% active / ~8.3% per inactive, comfortably inside the requested 55-70% range and never reduced to an unrecognizable sliver. */ @media (min-width:1024px) and (prefers-reduced-motion:no-preference){ .workshop__select-thumbs{ display:none; } .workshop__select-row{ position:static; aspect-ratio:auto; height:440px; display:flex; align-items:stretch; gap:2px; background:var(--line); border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; } .workshop__select-row .workshop__select-panel{ position:relative; inset:auto; opacity:1; z-index:1; flex:1 1 0%; overflow:hidden; } .workshop__select-panel.is-active{ flex:7 1 0%; z-index:2; } } @media (prefers-reduced-motion:reduce){ .workshop__select-panel, .workshop__select-thumb{ transition:none !important; } } /* Ablauf — technical signal path. One thin line runs through 4 nodes; an amber "signal" travels the line and lights each node in turn the first time the section scrolls into view (see main.js, .ablauf__path-wrap IntersectionObserver). All timing is CSS transition/animation-delay — the JS only ever adds one class, once. */ .ablauf{ position:relative; overflow:hidden; } .ablauf__schematic{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.035; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:32px 32px; } .ablauf .container{ position:relative; z-index:1; } .ablauf__path-wrap{ position:relative; } .ablauf__path{ list-style:none; margin:0; padding:0; position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); } .ablauf__line{ position:absolute; left:20px; right:20px; top:44px; height:1px; z-index:0; background:var(--line-strong); } .ablauf__line-fill{ position:absolute; inset:0; transform-origin:left center; transform:scaleX(0); background:var(--accent); box-shadow:0 0 10px 1px rgba(224,138,62,.55); transition:transform 1.8s linear; } .ablauf__path-wrap.is-active .ablauf__line-fill{ transform:scaleX(1); } .ablauf__step{ position:relative; text-align:center; list-style:none; opacity:.55; transform:translateY(8px); transition:opacity .4s var(--ease-precise), transform .4s var(--ease-precise); } .ablauf__path-wrap.is-active .ablauf__step{ opacity:1; transform:translateY(0); } .ablauf__path-wrap.is-active .ablauf__step:nth-child(1){ transition-delay:0ms; } .ablauf__path-wrap.is-active .ablauf__step:nth-child(2){ transition-delay:600ms; } .ablauf__path-wrap.is-active .ablauf__step:nth-child(3){ transition-delay:1200ms; } .ablauf__path-wrap.is-active .ablauf__step:nth-child(4){ transition-delay:1800ms; } .ablauf__number{ display:block; font-family:var(--mono); font-size:13px; color:var(--ink-faint); margin-bottom:10px; transition:color .3s var(--ease-precise); } .ablauf__path-wrap.is-active .ablauf__step .ablauf__number{ color:var(--accent); transition-delay:inherit; } .ablauf__node{ position:relative; z-index:1; width:40px; height:40px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-raised); border:1px solid var(--line-strong); color:var(--ink-faint); transition:color .3s var(--ease-precise), border-color .3s var(--ease-precise), box-shadow .3s var(--ease-precise), transform .3s var(--ease-precise); } .ablauf__node svg{ width:20px; height:20px; } .ablauf__path-wrap.is-active .ablauf__step .ablauf__node{ color:var(--accent); border-color:var(--accent); transition-delay:inherit; } .ablauf__path-wrap.is-active .ablauf__step:nth-child(1) .ablauf__node{ animation:ablauf-pulse .7s ease-out 0ms; } .ablauf__path-wrap.is-active .ablauf__step:nth-child(2) .ablauf__node{ animation:ablauf-pulse .7s ease-out 600ms; } .ablauf__path-wrap.is-active .ablauf__step:nth-child(3) .ablauf__node{ animation:ablauf-pulse .7s ease-out 1200ms; } .ablauf__path-wrap.is-active .ablauf__step:nth-child(4) .ablauf__node{ animation:ablauf-pulse .7s ease-out 1800ms; } @keyframes ablauf-pulse{ 0%{ box-shadow:0 0 0 0 rgba(224,138,62,.55); } 70%{ box-shadow:0 0 0 12px rgba(224,138,62,0); } 100%{ box-shadow:0 0 0 0 rgba(224,138,62,0); } } .ablauf__title{ font-family:var(--disp); text-transform:uppercase; font-weight:700; font-size:16px; margin:0 0 6px; color:var(--ink); } .ablauf__desc{ font-size:13.5px; color:var(--ink-muted); max-width:24ch; margin:0 auto; } /* Hover — desktop/precise-pointer only, same restrained "rise + glow" language already used by the Services and Reviews hover interactions. */ @media (hover:hover) and (pointer:fine){ .ablauf__step{ cursor:default; } /* Two rules, not one: .ablauf__path-wrap.is-active .ablauf__step (the resolved reveal state) is 3 classes deep and would otherwise outrank a plain .ablauf__step:hover, silently killing the hover lift once the signal animation finishes. The second rule matches that specificity (and beats it, being one selector deeper) so hover keeps working both before and after activation. */ .ablauf__step:hover{ transform:translateY(-5px) scale(1.02); transition:transform .3s var(--ease-precise); } .ablauf__path-wrap.is-active .ablauf__step:hover{ transform:translateY(-5px) scale(1.02); transition:transform .3s var(--ease-precise); } .ablauf__step:hover .ablauf__node{ box-shadow:0 0 0 4px rgba(224,138,62,.12), 0 0 14px -2px rgba(224,138,62,.5); } .ablauf__step:hover .ablauf__number{ color:var(--accent); } } @media (prefers-reduced-motion: reduce){ .ablauf__step{ opacity:1; transform:none; transition:none; } .ablauf__number{ color:var(--accent); } .ablauf__node{ color:var(--accent); border-color:var(--accent); animation:none; } .ablauf__line-fill{ transform:scaleX(1); transition:none; } } @media (max-width:1023px){ .ablauf__path{ display:block; } .ablauf__step{ display:grid; grid-template-columns:40px 1fr; grid-template-areas:"num num" "node title" "node desc"; column-gap:var(--space-3); row-gap:4px; text-align:left; padding-bottom:var(--space-5); } .ablauf__step:last-child{ padding-bottom:0; } .ablauf__number{ grid-area:num; margin-bottom:4px; } .ablauf__node{ grid-area:node; margin:0; align-self:start; } .ablauf__title{ grid-area:title; align-self:end; } .ablauf__desc{ grid-area:desc; max-width:none; margin:2px 0 0; text-align:left; } .ablauf__line{ left:19px; right:auto; top:34px; bottom:14px; width:1px; height:auto; } .ablauf__line-fill{ transform-origin:top center; transform:scaleY(0); } .ablauf__path-wrap.is-active .ablauf__line-fill{ transform:scaleY(1); } } /* Reviews — horizontal marquee of real Google reviewer names/ratings. Two identical