/* Hallmark · theme: custom · idea: "the chrome logo's own wall: dark, hazed, holo-edged, with the real workshop set in its frame" · vibe: "chrome graffiti on a dark garage wall" · shape: Bento Grid (kept) · genre: editorial · job: book
 * paper: oklch(15% 0.014 285), the wall of the logo artwork · accent: oklch(73% 0.175 52), the orange of the plus nut, the only signal · faces: Chakra Petch 700 italic (the logo's slanted technical letters), Archivo body
 * hero: chrome headline left, the real building in a holo frame right, blueprint lines drawing in behind · nav: the chrome logo, three links, call · footer: mast, the logo large with one sheen · imagery: photographs, user 8, AI-cleaned, natural colour
 * signature: the chrome logo catching one sweep of light, in the nav on load and on the footer wall · posture: expressive · axes: dark/display-heavy/warm · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: R, chrome and holo can tip into effect; kept chrome to the logo, two headlines and one tile, holo to edges only, orange stays the one action colour */
/* Hallmark · waive 2b · a cool chrome ramp of three light tokens within 5 degrees of hue, darkest stop oklch(72%) on oklch(15%) paper, 40 and 41 pass · chrome is the logo's own material and the brand look itself */
/* Hallmark · waive 38ii · whole heads in italic, never one word inside a roman head · the logo's letters lean 12 degrees and the heads carry the same lean */
/* Hallmark · waive 81 · the flagged tile is the 'Alle Marken' tile: a head in chrome lettering and a sentence inside a holo edge, the gradient is only its 2px border · false positive on a border-box gradient */
/* Hallmark · answered: the hazard-tape bands are the floor marking painted in the hall, two bands as dividers only; the Riffelblech texture is a 5% mask on two bands, not a surface costume */
/* Hallmark · waive 80 · drawn: blueprint lines plus a gear and a piston in outline at 10% behind type, and three pictogram workers (lift, talk, tyre) in tokens only · the user asked verbatim: „bau mir noch cta ein und werkzeuge auto teile in das design und animierte arbeiter“ */
/* Hallmark · answered: motion budget, hero entrance, one reveal (photographs open upward like a roller door, text never hidden), one scrub wipe, one-shot sheen and blueprint draw; finish-review: subagent, fix, 8 findings, 7 resolved, 1 dismissed (the Anfahrt photo is the entrance view, a map follows with the address); worker loops by request („animierte arbeiter“): three pictogram scenes loop only while on screen (IntersectionObserver), paused off screen, still in their resting pose under reduced motion and without scripting */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --nav-h: 76px;
  /* Riffelblech (diamond plate) as a mask: the colour comes from tokens, the file only carries shape */
  --plate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Crect x='3' y='6' width='12' height='3.2' rx='1.6' transform='rotate(-45 9 7.6)'/%3E%3Crect x='19' y='22' width='12' height='3.2' rx='1.6' transform='rotate(-45 25 23.6)'/%3E%3Crect x='19' y='6' width='12' height='3.2' rx='1.6' transform='rotate(45 25 7.6)'/%3E%3Crect x='3' y='22' width='12' height='3.2' rx='1.6' transform='rotate(45 9 23.6)'/%3E%3C/svg%3E");
  --screw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill-rule='evenodd' d='M6 0a6 6 0 1 0 0 12A6 6 0 1 0 6 0ZM2.6 7.9 7.9 2.6 9.4 4.1 4.1 9.4Z'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the wall: haze and grain behind everything ---------- */
body { position: relative; isolation: isolate; }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(55% 45% at 92% -8%, color-mix(in oklab, var(--color-haze-1) 28%, transparent), transparent 70%),
    radial-gradient(40% 35% at 62% 8%, color-mix(in oklab, var(--color-holo-1) 14%, transparent), transparent 70%),
    radial-gradient(42% 38% at -6% 38%, color-mix(in oklab, var(--color-haze-1) 12%, transparent), transparent 70%),
    radial-gradient(70% 55% at 50% 118%, var(--color-paper-3), transparent 72%);
}
body::after { background-image: var(--grain); opacity: var(--texture-opacity); }

.skip { position: absolute; left: var(--space-md); top: -200px; z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- chrome lettering ---------- */
.chrome { color: var(--color-ink); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  /* one chrome ramp per line: the ramp is one line-height tall and repeats down the block */
  .chrome { background: linear-gradient(180deg, var(--color-chrome-hi) 10%, var(--color-chrome-mid) 47%, var(--color-chrome-band) 53%, var(--color-chrome-hi) 95%) 0 0 / 100% var(--lh, 1.02em) repeat-y; -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.lettering { font-style: italic; filter: drop-shadow(0.025em 0.035em 0 var(--color-deep)) drop-shadow(0.025em 0.035em 0 var(--color-deep)); }
@media (forced-colors: active) {
  .chrome { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: CanvasText; }
  .lettering { filter: none; }
}

.nobr { white-space: nowrap; }

/* ---------- controls ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 50px; padding: 0 var(--space-lg); overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-control); font-family: var(--font-display); font-size: var(--text-lg); font-style: italic; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn { isolation: isolate; text-box: trim-both cap alphabetic; }
.btn, .nav__toggle { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn--secondary::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--color-paper-3); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.btn::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 0; width: 40%; background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--color-chrome-hi) 60%, transparent), transparent); transform: translateX(-140%) skewX(-12deg); pointer-events: none; }
@media (hover: hover) { .btn:hover::after { transform: translateX(330%) skewX(-12deg); transition: transform 650ms var(--ease-out); } }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--secondary { color: var(--color-ink); background: linear-gradient(var(--color-paper), var(--color-paper)) padding-box, var(--holo) border-box; }
@media (hover: hover) {
  .btn--primary:hover { background-color: color-mix(in oklab, var(--color-accent) 82%, var(--color-chrome-hi)); }
  .btn--secondary:hover::before { opacity: 1; }
}
.text-link { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; transition: color var(--dur-short) var(--ease-out); }
.text-link:hover { color: var(--color-accent); }

/* ---------- nav: the logo, three links, call ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); border-bottom: 1px solid var(--color-rule); background: color-mix(in oklab, var(--color-paper) 80%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.nav__bar { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--nav-h); }
.brand { position: relative; display: block; flex: none; width: clamp(150px, 15vw, 214px); border-radius: var(--radius-control); }
.brand img { width: 100%; height: auto; }
.brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav nav { margin-left: auto; }
.nav__links { display: flex; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.nav__links a { position: relative; display: inline-block; padding-block: var(--space-xs); color: var(--color-ink-2); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--holo); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-short) var(--ease-out); }
.nav__links a:hover { color: var(--color-ink); }
@media (hover: hover) { .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.nav__toggle { display: none; }

/* light sweep, masked to the logo's own shape */
.sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: url("img/logo-werkstatt-plus24-chrom.svg") center / 100% 100% no-repeat; mask: url("img/logo-werkstatt-plus24-chrom.svg") center / 100% 100% no-repeat; }
.sheen::before, .sheen::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--color-chrome-hi) 85%, transparent) 50%, transparent); transform: translateX(-140%) skewX(-12deg); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-2xl); }
.blueprint { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: var(--color-line); opacity: 0.15; pointer-events: none; }
.blueprint * { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.blueprint .strong { stroke-width: 1.5; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { max-width: 18ch; font-size: var(--text-display); line-height: 0.98; hyphens: manual; }
.hero h1 { --lh: 0.98em; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }
.hero__where { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: var(--space-xs); margin-top: var(--space-lg); color: var(--color-muted); }
.hero__where svg { width: 18px; height: 18px; flex: none; margin-top: 0.2em; color: var(--color-accent); }

/* the holo edge from the logo, around each big photograph */
.frame { position: relative; padding: var(--space-3xs); border-radius: var(--radius-card); background: var(--holo); }
.frame > [data-slot] { margin: 0; border-radius: calc(var(--radius-card) - var(--space-3xs)); }
.hero__photo { aspect-ratio: 1 / 1.08; }
@media (min-width: 60.01rem) { .hero__photo > img { transform: scale(1.45); transform-origin: 20% 62%; } }
.spark { position: absolute; top: -14px; right: -14px; z-index: var(--z-raised); width: 28px; height: 28px; fill: var(--color-chrome-hi); pointer-events: none; }
@media (max-width: 60rem) { .hero__photo { aspect-ratio: 4 / 3.3; } }

/* ---------- sections ---------- */
.section { padding-block: var(--section-gap-s); }
.section--l { padding-block: var(--section-gap); }
.section + .section { padding-top: 0; }
.section__cta { margin-top: var(--space-2xl); }
.head { margin-bottom: var(--space-2xl); padding-top: var(--space-xl); background: linear-gradient(var(--color-rule), var(--color-rule)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--color-rule), var(--color-rule)) 0 0 / 1px 14px no-repeat, linear-gradient(var(--color-rule), var(--color-rule)) 100% 0 / 1px 14px no-repeat; }
.head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; }
.head .lead { color: var(--color-ink-2); }
.showcase__note { margin-top: var(--space-xl); color: var(--color-ink-2); }
h2, h3 { font-style: italic; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: var(--space-md); }
.b-1 { grid-column: 1 / 8; grid-row: 1 / 4; }
.b-2 { grid-column: 8 / 13; grid-row: 1 / 2; }
.b-3 { grid-column: 8 / 13; grid-row: 2 / 3; }
.b-6 { grid-column: 8 / 13; grid-row: 3 / 4; }
.b-5 { grid-column: 1 / 6; grid-row: 4 / 6; }
.b-4 { grid-column: 6 / 13; grid-row: 4 / 6; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-sm); min-width: 0; padding: var(--space-xl); overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-paper-2) 90%, transparent); }
.tile p { color: var(--color-ink-2); }
.tile--lead h3 { font-size: var(--text-2xl); }
.tile--chrome { border-color: transparent; background: linear-gradient(var(--color-paper-2), var(--color-paper-2)) padding-box, var(--holo) border-box; }
.tile--chrome h3 { font-size: var(--text-display-s); line-height: 1.02; }
.tile--chrome p { color: var(--color-ink-2); }
.tile--photo { padding: 0; }
.tile--photo .shot { position: absolute; inset: 0; margin: 0; }
.caption { position: relative; z-index: var(--z-raised); align-self: flex-start; margin: auto var(--space-md) var(--space-md); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-control); background: color-mix(in oklab, var(--color-paper) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: var(--text-sm); }

/* leistungen: two hairline lists, all six visible */
.services { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
.services__name { padding-bottom: var(--space-md); background: var(--holo) 0 100% / 100% 2px no-repeat; font-size: var(--text-3xl); }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-lg); align-items: start; padding: var(--space-xl) 0 var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.rows li > div { display: grid; gap: var(--space-2xs); }
.svc-icon { width: 52px; height: 52px; padding: var(--space-sm); border-radius: var(--radius-control); border: 1px solid var(--color-rule); background-color: var(--color-paper-2); color: var(--color-accent); }
.rows h4 { margin: 0; font-family: var(--font-display); font-size: var(--text-title); font-style: italic; font-weight: 700; line-height: 1.2; }
.rows p { color: var(--color-ink-2); }

/* werkstatt */
.showcase__main { aspect-ratio: 16 / 8; }
.showcase__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); margin-top: var(--space-md); }
.showcase__pair .shot { aspect-ratio: 4 / 3; margin: 0; border-radius: var(--radius-card); }
.showcase__pair .shot::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-chrome-hi) 10%, transparent); pointer-events: none; }
.showcase__pair .caption { position: absolute; left: 0; bottom: 0; margin: var(--space-md); }

/* ---------- aktionsband: a call to action with a pictogram mechanic under a car on the lift ---------- */
.band { position: relative; isolation: isolate; padding-block: var(--section-gap-s); border-block: 1px solid var(--color-rule); background: radial-gradient(55% 90% at 85% 60%, color-mix(in oklab, var(--color-haze-1) 14%, transparent), transparent 70%), var(--color-paper-2); }
.band__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.band__head { --lh: 1.02em; max-width: 16ch; font-family: var(--font-display); font-size: var(--text-section); font-weight: 700; line-height: 1.02; overflow-wrap: break-word; min-width: 0; }
.band .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.band__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); }

/* pictogram scenes: shapes in tokens only, still by default */
.scene { width: 100%; height: auto; overflow: visible; }
.sc-floor { stroke: var(--color-rule); stroke-width: 2; }
.sc-metal { fill: var(--color-paper-3); stroke: var(--color-chrome-band); stroke-width: 2; }
.sc-body { fill: var(--color-paper-3); stroke: var(--color-chrome-mid); stroke-width: 2.5; stroke-linejoin: round; }
.sc-glass { fill: color-mix(in oklab, var(--color-chrome-band) 22%, transparent); stroke: var(--color-chrome-band); stroke-width: 1.5; stroke-linejoin: round; }
.sc-seam { fill: none; stroke: var(--color-chrome-band); stroke-width: 1.5; stroke-linecap: round; }
.sc-light { fill: var(--color-chrome-warm); }
.sc-tyre { fill: var(--color-paper); stroke: var(--color-muted); stroke-width: 3; }
.sc-rim { fill: var(--color-chrome-band); }
.sc-hub { fill: var(--color-paper); }
.sc-tyre-side { fill: var(--color-paper); stroke: var(--color-muted); stroke-width: 2.5; }
.sc-limb { fill: none; stroke: var(--color-ink-2); stroke-linecap: round; stroke-linejoin: round; stroke-width: 12; }
.sc-torso { stroke-width: 24; }
.sc-leg { stroke-width: 15; }
.sc-foot { stroke-width: 9; }
.sc-skin { fill: var(--color-ink-2); }
.sc-acc { fill: var(--color-accent); }
.sc-acc-line { fill: none; stroke: var(--color-accent); stroke-width: 4; stroke-linecap: round; }
.sc-tool { fill: none; stroke: var(--color-accent); stroke-width: 6; stroke-linecap: round; }
.sc-spark { fill: var(--color-chrome-hi); opacity: 0; }

/* screw heads in the corners of the plates (tiles, form) */
.form { position: relative; }
.tile:not(.tile--photo)::before, .form::before { content: ""; position: absolute; inset: var(--space-sm); pointer-events: none; background-color: var(--color-chrome-band); opacity: 0.6;
  -webkit-mask: var(--screw) 0 0 / 10px 10px no-repeat, var(--screw) 100% 0 / 10px 10px no-repeat, var(--screw) 0 100% / 10px 10px no-repeat, var(--screw) 100% 100% / 10px 10px no-repeat;
  mask: var(--screw) 0 0 / 10px 10px no-repeat, var(--screw) 100% 0 / 10px 10px no-repeat, var(--screw) 0 100% / 10px 10px no-repeat, var(--screw) 100% 100% / 10px 10px no-repeat; }

/* parts in blueprint outline behind two sections, still */
#leistungen, #werkstatt { position: relative; isolation: isolate; overflow-x: clip; }
.part { position: absolute; z-index: -1; color: var(--color-line); opacity: 0.1; pointer-events: none; }
.part * { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.part--gear { top: calc(var(--space-2xl) * -1); right: -120px; width: clamp(280px, 34vw, 520px); }
.part--piston { top: var(--space-xl); right: 4%; width: clamp(140px, 16vw, 240px); }
.services__cta { margin-top: var(--space-lg); }

/* statement with the talk scene */
.statement__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; }
.scene--talk { max-width: 380px; justify-self: end; }
.sc-bubble { fill: var(--color-paper-3); stroke: var(--color-chrome-band); stroke-width: 2; stroke-linejoin: round; }
.sc-dot { fill: var(--color-accent); }
.sc-disc { fill: var(--color-chrome-band); stroke: var(--color-chrome-hi); stroke-width: 2; }

/* the walkway over the last floor marking: one worker rolls a tyre across */
.walkway { overflow: clip; padding-top: var(--space-xl); }
.walkway__track { width: 100%; }
.scene--walk { width: 128px; margin-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.sc-tyre--fat { stroke-width: 5; }

/* floor marking: the hazard tape painted on workshop floors */
.tape { height: 14px; background: repeating-linear-gradient(-45deg, var(--color-accent) 0 14px, var(--color-paper) 14px 28px); }

/* statement band */
.statement { position: relative; isolation: isolate; padding-block: var(--section-gap-s); overflow: clip; border-bottom: 1px solid var(--color-rule); background: radial-gradient(60% 90% at 12% 50%, color-mix(in oklab, var(--color-haze-1) 18%, transparent), transparent 70%), radial-gradient(50% 80% at 88% 50%, color-mix(in oklab, var(--color-holo-1) 14%, transparent), transparent 70%); }
.statement::before, .footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--color-line); opacity: 0.05; -webkit-mask: var(--plate) 0 0 / 32px 32px repeat; mask: var(--plate) 0 0 / 32px 32px repeat; }
.statement__head { max-width: 20ch; text-wrap: balance; font-family: var(--font-display); font-size: var(--text-statement); font-weight: 700; line-height: 1.02; overflow-wrap: break-word; min-width: 0; }

/* kontakt */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-md) 0 0; }
.facts div { padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-paper-2) 90%, transparent); }
.facts__wide { grid-column: 1 / -1; }
.facts dd a { text-decoration-thickness: 2px; white-space: nowrap; }
.facts dt { color: var(--color-muted); font-size: var(--text-sm); }
.facts dd { font-variant-numeric: tabular-nums; margin: var(--space-2xs) 0 0; font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; font-weight: 700; }
.fill { color: var(--color-muted); border-bottom: 1px dashed currentColor; }
.facts__route { display: inline-block; margin-top: var(--space-xs); padding-block: var(--space-2xs); font-family: var(--font-body); font-size: var(--text-sm); font-style: normal; font-weight: 400; white-space: nowrap; }
.form { display: grid; gap: var(--space-md); padding: var(--space-xl); border: 1px solid transparent; border-radius: var(--radius-card); background: linear-gradient(var(--color-paper-2), var(--color-paper-2)) padding-box, var(--holo) border-box; }
.form h3 { font-size: var(--text-2xl); }
.field { display: grid; gap: var(--space-2xs); }
.field label { color: var(--color-ink-2); font-size: var(--text-sm); }
.field .opt { color: var(--color-muted); }
.field__error { color: var(--color-error); font-size: var(--text-sm); }
.form__steps { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-xs); padding-left: 1.25em; color: var(--color-ink-2); }
.form__steps li::marker { color: var(--color-accent); font-family: var(--font-display); font-weight: 700; }
.form__note { color: var(--color-muted); font-size: var(--text-sm); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.field input, .field textarea { min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-control); background-color: var(--color-paper); color: var(--color-ink); transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: transparent; transition: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--color-error); box-shadow: inset 0 0 0 1px var(--color-error); }
.field input:disabled, .field textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.form .btn { justify-self: start; }
.form__help { min-height: 1.5em; color: var(--color-ink-2); font-size: var(--text-sm); }
.contact__photo { aspect-ratio: 4 / 5; }

/* footer: the logo as a mast */
.footer { position: relative; isolation: isolate; padding: var(--section-gap-s) 0 var(--space-2xl); }
.footer__mark { position: relative; max-width: 1080px; margin: 0 0 var(--space-2xl); }
.footer__mark img { width: 100%; height: auto; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.footer__links a { display: inline-block; padding-block: var(--space-sm); color: var(--color-ink-2); transition: color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .footer__links a:hover { color: var(--color-ink); } }
.footer__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* rechtstexte: impressum and datenschutz, a long-document column */
.legal { padding-block: var(--section-gap-s); }
.legal h1 { --lh: 1.02em; font-size: var(--text-section); line-height: 1.02; }
.legal__intro { max-width: 65ch; margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); }
.legal h2 { max-width: 40ch; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-2xl); }
.legal p, .legal ul { max-width: 65ch; margin-top: var(--space-md); color: var(--color-ink-2); }
.legal ul { display: grid; gap: var(--space-xs); padding-left: 1.25em; }
.legal li::marker { color: var(--color-accent); }
.legal a { color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.legal__facts { display: grid; gap: 0; max-width: 72ch; margin: var(--space-md) 0 0; }
.legal__facts div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.legal__facts dt { color: var(--color-muted); }
.legal__facts dd { margin: 0; color: var(--color-ink); }
.legal__date { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 40rem) { .legal__facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } }

/* mobile call bar */
.callbar { display: none; }

/* ---------- motion: all of it opt-in, none of it needed to read the page ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes settle { from { transform: translateY(10px) scale(0.97); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes sheen { from { transform: translateX(-140%) skewX(-12deg); } to { transform: translateX(420%) skewX(-12deg); } }
@keyframes hub-turn { from { transform: rotate(-72deg); } }
@keyframes glint { 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 60% { opacity: 1; transform: scale(1.15) rotate(0); } 100% { transform: scale(1); } }
@keyframes nudge { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes lift-up { from { transform: translateY(148px); } }
@keyframes step-in { from { opacity: 0; transform: translateX(-28px); } }
@keyframes ratchet { from { transform: rotate(-3deg); } to { transform: rotate(5deg); } }
@keyframes spark { 0%, 55% { opacity: 0; transform: scale(0.3); } 65% { opacity: 1; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes show { 0%, 15% { transform: none; } 40%, 75% { transform: rotate(-16deg); } 100% { transform: none; } }
@keyframes dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes nod { 0%, 45%, 59%, 100% { transform: none; } 52%, 66% { transform: translateY(3px); } }
@keyframes cross { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes stride { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes roll { to { transform: rotate(360deg); } }
@keyframes bob { to { transform: translateY(-2px); } }
@keyframes help-in { from { opacity: 0; transform: translateY(-4px); } }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .brand:hover .sheen::after { animation: sheen 900ms var(--ease-in-out) both; }
}
@media (prefers-reduced-motion: no-preference) {
  /* page load: hero in one short stagger, the blueprint draws itself, the logo catches light once */
  .js [data-enter] { animation: rise var(--dur-enter) var(--ease-out) calc(var(--i, 0) * 80ms + 80ms) both; }
  .js .hero .frame[data-enter] { animation-name: settle; animation-duration: var(--dur-settle); }
  .js .hero .spark { animation: glint var(--dur-enter) var(--ease-out) 1100ms both; }
  .js .blueprint .hub { transform-box: view-box; transform-origin: 1060px 455px; animation: hub-turn var(--dur-settle) var(--ease-in-out) 1100ms both; }
  .js .blueprint [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw var(--dur-draw) var(--ease-out) calc(var(--i, 0) * 90ms + 150ms) both; }
  .js .nav .sheen::before { animation: sheen var(--dur-sheen) var(--ease-in-out) 700ms both; }
  .js .footer.is-in .sheen::before { animation: sheen var(--dur-draw) var(--ease-in-out) 200ms both; }

  /* worker scenes: the car goes up once, then each loop runs only while its scene is on screen */
  .js [data-scene]:not(.was-seen) .sc-car { transform: translateY(148px); }
  .js .band:not(.was-seen) .sc-mech { opacity: 0; }
  .js .was-seen .sc-car { animation: lift-up 1600ms var(--ease-in-out) both; }
  .js .band.was-seen .sc-mech { animation: step-in 600ms var(--ease-out) 1500ms both; }
  .js .sc-ratchet { transform-box: view-box; transform-origin: 266px 178px; animation: ratchet 700ms var(--ease-in-out) infinite alternate; }
  .js .sc-spark { transform-box: view-box; transform-origin: 300px 102px; animation: spark 1400ms var(--ease-out) infinite; }
  .js .sc-show { transform-box: view-box; transform-origin: 116px 190px; animation: show 3600ms var(--ease-in-out) infinite; }
  .js .sc-dot { animation: dot 1200ms var(--ease-in-out) infinite; }
  .js .sc-dot:nth-of-type(2) { animation-delay: 150ms; }
  .js .sc-dot:nth-of-type(3) { animation-delay: 300ms; }
  .js .sc-nod { animation: nod 3600ms var(--ease-in-out) infinite; }
  .js .walkway__track { animation: cross 18s linear -10s infinite; }
  .js .sc-leg-a, .js .sc-leg-b { transform-box: view-box; transform-origin: 66px 88px; animation: stride 700ms var(--ease-in-out) infinite alternate; }
  .js .sc-leg-b { animation-direction: alternate-reverse; }
  .js .sc-roll { transform-box: view-box; transform-origin: 122px 94px; animation: roll 700ms linear infinite; }
  .js .sc-walker { animation: bob 350ms var(--ease-in-out) infinite alternate; }
  .js [data-scene]:not(.is-live) :is(.sc-ratchet, .sc-spark, .sc-show, .sc-dot, .sc-nod, .walkway__track, .sc-leg-a, .sc-leg-b, .sc-roll, .sc-walker) { animation-play-state: paused; }

  /* the one reveal: each photograph's roller door rolls up once (set only after the observer runs) */
  .reveal-ready .frame[data-reveal] { overflow: hidden; }
  .reveal-ready [data-reveal]::after { content: ""; position: absolute; inset: 0; z-index: calc(var(--z-raised) + 1); border-radius: inherit; pointer-events: none;
    background: linear-gradient(to top, var(--color-chrome-band) 0 3px, transparent 3px), repeating-linear-gradient(180deg, var(--color-paper-3) 0 26px, var(--color-paper-2) 26px 28px);
    transition: transform var(--dur-reveal) var(--ease-in-out) calc(var(--i, 0) * 90ms), visibility 0s linear calc(var(--dur-reveal) + var(--i, 0) * 90ms); }
  .reveal-ready [data-reveal].is-in::after { transform: translateY(-101%); visibility: hidden; }
  .reveal-ready [data-reveal] img { transform: scale(1.08); transition: transform var(--dur-zoom) var(--ease-out) calc(var(--i, 0) * 90ms); }
  .reveal-ready [data-reveal].is-in img { transform: none; }

  /* form feedback */
  .field .nudge { animation: nudge var(--dur-long) var(--ease-out); }
  .form__help.is-new { animation: help-in var(--dur-short) var(--ease-out); }

}

/* the one scroll pattern: the statement wipes in with the thumb */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 40rem) {
    .statement::before, .footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: var(--color-line); opacity: 0.05; -webkit-mask: var(--plate) 0 0 / 32px 32px repeat; mask: var(--plate) 0 0 / 32px 32px repeat; }
.statement__head { animation: head-wipe linear both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
    @keyframes head-wipe { from { clip-path: inset(-0.2em 100% -0.3em -0.2em); transform: translateX(-0.2em); } to { clip-path: inset(-0.2em -0.4em -0.3em -0.2em); transform: none; } }
  }
}

/* ---------- breakpoints ---------- */
@media (hover: hover) and (max-width: 60rem) { .js .nav__toggle:hover { background-color: var(--color-paper-3); border-color: var(--color-muted); } }
@media (max-width: 60rem) {
  .nav__bar > .btn { display: none; }
  .nav__bar { gap: var(--space-md); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .no-js .nav__bar { flex-wrap: wrap; padding-block: var(--space-xs); }
  .no-js .nav__links { gap: var(--space-md); }
  .js .nav__toggle { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-control); background-color: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-md); font-style: italic; font-weight: 700; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
  .js .nav__toggle svg { width: 18px; height: 18px; }
  .js .nav__toggle { transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
  .js .nav__toggle[aria-expanded="true"] { background-color: var(--color-paper-3); border-color: var(--color-muted); }
  .js .nav__toggle path { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-short) var(--ease-out); }
  .js .nav__toggle[aria-expanded="true"] .l1 { transform: translateY(4px) rotate(45deg); }
  .js .nav__toggle[aria-expanded="true"] .l2 { transform: translateY(-4px) rotate(-45deg); }
  .js .nav__toggle:active { transform: scale(0.97); }
  .js .nav__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .js .nav__links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: var(--space-xs) var(--gutter) var(--space-lg); border-bottom: 1px solid var(--color-rule); background-color: var(--color-paper); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), visibility 0s linear var(--dur-micro); }
  .js .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s; }
  .js .nav__links a { display: block; padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-xl); font-style: italic; font-weight: 700; }
  .js .nav__links a::after { display: none; }
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .head--split { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .b-1, .b-2, .b-3, .b-4, .b-5, .b-6 { grid-column: auto; grid-row: auto; }
  .b-1, .b-4, .b-6 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .showcase__main { aspect-ratio: 4 / 3; }
  .showcase__pair, .contact__grid, .band__grid, .statement__grid { grid-template-columns: minmax(0, 1fr); }
  .scene--lift { max-width: 460px; }
  .scene--talk { max-width: 300px; justify-self: start; }
  .part--gear { right: -160px; opacity: 0.07; }
  .contact__photo { aspect-ratio: 4 / 3; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .callbar { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-xs); padding: var(--space-xs) var(--gutter) calc(var(--space-xs) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-rule); background: color-mix(in oklab, var(--color-paper) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
@media (max-width: 40rem) {
  .bento, .facts, .services { grid-template-columns: minmax(0, 1fr); }
  .services { gap: var(--space-xl); }
  .tile, .form { padding: var(--space-lg); }
  .btn { padding: 0 var(--space-md); font-size: var(--text-md); }
}
@media (min-width: 40.01rem) and (max-width: 60rem) {
  .hero__photo { aspect-ratio: 16 / 10; }
}
/* phones on their side: the call bar stays, but slimmer */
@media (orientation: landscape) and (max-height: 30rem) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .callbar { padding-block: var(--space-2xs) calc(var(--space-2xs) + env(safe-area-inset-bottom)); padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
  .callbar .btn { min-height: 44px; }
}

/* teaser ("Hier kommt etwas Großes"): nav without links, the call button sits right */
.nav__bar--teaser { justify-content: space-between; }
.hero__grid--solo { grid-template-columns: minmax(0, 1fr); }