/* ==========================================================================
   Kfz-Service Stricksner — "Tore auf / Modern Dutch Automotive" (locked V2 direction)
   Complete homepage theme on the approved content architecture. main.css (V1) is kept only for /v1/.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/instrument-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  --c-white: #FFFFFF;
  --c-warm: #F5F4F1;
  --c-dark: #151515;
  --c-dark-2: #232323;
  --c-ink: #111111;
  --c-ink-2: #5C5C5C;
  --c-line: rgba(0, 0, 0, .12);
  --c-line-d: rgba(255, 255, 255, .16);
  --c-red: #DA2A1C;
  --c-red-h: #B8231A;
  --c-wa: #25D366;

  --ff-d: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ff-b: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --fs-h1: clamp(2.5rem, 1.9rem + 1.9vw, 3.75rem);
  --fs-h2: clamp(2rem, 1.5rem + 1.6vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.3rem + .7vw, 2rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .3vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  --pad: 20px; --gap: 16px; --container: 1280px;
  --hd-h: 64px; --bar-h: 64px; --bar-offset: 0px;
  --r: 4px;
  --shadow-float: 0 4px 14px rgba(0, 0, 0, .22);
  --t-fast: 150ms; --t-base: 300ms; --t-slow: 500ms; --ease: cubic-bezier(.2, 0, 0, 1);
}
@media (min-width: 430px) { :root { --pad: 24px; } }
@media (min-width: 768px) { :root { --pad: 40px; --gap: 20px; } }
@media (min-width: 1024px) { :root { --pad: clamp(48px, 5.55vw, 80px); --gap: 24px; --hd-h: 84px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: var(--bar-offset); }
body { margin: 0; background: var(--c-white); color: var(--c-ink); font-family: var(--ff-b); font-size: var(--fs-body); line-height: 1.55; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; padding-bottom: var(--bar-offset); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -100px; background: var(--c-ink); color: #fff; padding: 8px 16px; z-index: 100; }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }

.h2 { font-family: var(--ff-d); font-size: var(--fs-h2); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.h2, .hero__h, .svc2__name, .svc2__onimg, .mark, .menu__nav a, .mb2__h, .cta__h, .rev__num, .rev__num .num { font-variant-numeric: normal; }
.tl--ico { display: inline-flex; align-items: center; gap: 8px; }
.tl--ico .ic-wa { width: 18px; height: 18px; color: var(--c-wa); }
h2.eyebrow { margin: 0; font-family: var(--ff-b); }
.eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.eyebrow--light { color: rgba(255, 255, 255, .78); }
.tl { font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 4px; }
.tl:hover { text-decoration-color: currentColor; }
.tl .arr { display: inline-block; transition: transform var(--t-fast) var(--ease); }
.tl:hover .arr { transform: translateX(4px); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 26px; min-width: 190px; font-family: var(--ff-b); font-size: 1rem; font-weight: 600; line-height: 1; border-radius: var(--r); border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn--primary { background: var(--c-red); color: #fff; border-color: var(--c-red); }
.btn--primary:hover { background: var(--c-red-h); border-color: var(--c-red-h); }
.btn--secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--secondary:hover { background: rgba(0, 0, 0, .06); }
.btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-wa { stroke: none; }
.menu-btn__t { font-weight: 600; font-size: .875rem; }

/* ---------- Scenes (art-direction placeholders) ---------- */
.sc { position: relative; width: 100%; aspect-ratio: var(--ratio-m, var(--ratio)); overflow: hidden; background: var(--c-dark); }
@media (min-width: 768px) { .sc { aspect-ratio: var(--ratio); } }
.sc svg, .sc picture, .sc img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc img { object-fit: cover; display: block; }
.sc__m { display: none; }
@media (max-width: 767px) { .sc--hero .sc__d, .sc--m .sc__d { display: none; } .sc--hero .sc__m, .sc--m .sc__m { display: block; } }
.sc__cap { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 4px; color: rgba(255, 255, 255, .78); font-size: 12px; line-height: 1.4; max-width: 34em; pointer-events: none; }
.sc__id { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

/* ---------- Header (transparent over hero → solid on scroll) ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 40; color: #fff; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.hd::before { content: ''; position: absolute; inset: 0; height: 140px; background: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, 0)); pointer-events: none; opacity: 1; transition: opacity var(--t-base) var(--ease); }
.hd.is-stuck { background: rgba(255, 255, 255, .97); color: var(--c-ink); box-shadow: 0 1px 0 var(--c-line); }
.hd.is-stuck::before { opacity: 0; }
.hd__in { position: relative; display: flex; align-items: center; gap: 32px; height: var(--hd-h); max-width: calc(var(--container) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
/* brand logo (Phase 12.0): vector wordmark, height-driven; the intrinsic width/height attributes keep the 1000 × 191.07 ratio (no CLS) */
.hd__brand { display: grid; flex: 0 0 auto; }
.hd__logo { grid-area: 1 / 1; display: block; width: auto; height: 30px; object-fit: contain; transition: opacity var(--t-base) var(--ease); }
.hd__logo--light { opacity: 0; } /* white wordmark only while the header is transparent over the homepage hero; cross-fades with the header background */
.hd:not(.is-stuck) .hd__logo--dark { opacity: 0; }
.hd:not(.is-stuck) .hd__logo--light { opacity: 1; }
.mp .hd .hd__logo--dark, .menu-open .hd .hd__logo--dark { opacity: 1; } /* detail pages (ink header) and the open mobile menu always use the dark wordmark */
.mp .hd .hd__logo--light, .menu-open .hd .hd__logo--light { opacity: 0; }
@media (min-width: 1024px) { .hd__logo { height: 29px; } } /* 1024–1279: keeps the five nav items on one line next to the phone/CTA */
@media (min-width: 1280px) { .hd__logo { height: 34px; } }
.hd__nav { display: none; }
.hd__act { display: none; }
.hd__menu { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
@media (min-width: 1024px) {
  .hd__nav { display: block; margin-left: 24px; }
  .hd__nav ul { display: flex; gap: 28px; }
  .hd__nav a { font-size: .9375rem; font-weight: 600; padding: 6px 0; position: relative; }
  .hd__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-fast) var(--ease); }
  .hd__nav a:hover::after { transform: scaleX(1); }
  .hd__act { display: flex; align-items: center; gap: 24px; margin-left: auto; }
  .hd__tel { font-weight: 600; font-size: .9375rem; white-space: nowrap; }
  .hd__act .btn { min-width: 0; height: 46px; padding: 0 22px; }
  .hd__menu { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) { .hd__tel { display: none; } .hd__nav ul { gap: 22px; } }
/* mobile menu */
.menu { position: fixed; inset: var(--hd-h) 0 0 0; background: var(--c-white); color: var(--c-ink); z-index: 39; overflow: auto; }
.menu__in { padding: 16px var(--pad) 64px; }
.menu__nav li { border-bottom: 1px solid var(--c-line); }
.menu__nav a { display: block; padding: 18px 0; font-family: var(--ff-d); font-size: 1.75rem; font-weight: 700; }
.menu__contact { padding-block: 28px; display: grid; gap: 12px; }
.menu__contact a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.menu__contact .ic-wa { color: var(--c-wa); }
.menu__hours { font-size: .875rem; color: var(--c-ink-2); }
.menu .btn { width: 100%; }
body.menu-open { overflow: hidden; }
body.menu-open .hd { background: var(--c-white); color: var(--c-ink); }
body.menu-open .hd::before { opacity: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 88svh; display: grid; grid-template-rows: 1fr auto; color: #fff; background: var(--c-dark); isolation: isolate; }
@media (min-width: 1024px) { .hero { min-height: 640px; height: 100svh; max-height: 1000px; } }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media .sc { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
/* restrained local gradient — lower zone only, for legibility */
.hero__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.hero__body { grid-row: 2; padding: 0 var(--pad) 28px; display: grid; gap: 14px; max-width: calc(var(--container) + 2 * var(--pad)); width: 100%; margin-inline: auto; }
.hero__h { font-family: var(--ff-d); font-size: var(--fs-h1); font-weight: 800; line-height: 1; letter-spacing: -.025em; max-width: 14ch; text-wrap: balance; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.hero__fact { font-size: var(--fs-lead); line-height: 1.4; max-width: 34em; color: rgba(255, 255, 255, .88); }
.hero__cta { display: grid; gap: 10px; margin-top: 6px; }
.hero__cta .btn { width: 100%; }
.hero__today { display: none; }
.hero__brief { position: absolute; left: var(--pad); top: calc(var(--hd-h) + 12px); max-width: 30em; font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .5); display: grid; gap: 4px; pointer-events: none; }
.hero__brief .sc__id { color: rgba(255, 255, 255, .5); }
@media (max-width: 767px) { .hero__brief span:last-child { display: none; } }
@media (min-width: 768px) {
  .hero__cta { grid-template-columns: auto auto; justify-content: start; }
  .hero__cta .btn { width: auto; }
  .hero__body { padding-bottom: 56px; gap: 18px; }
}
@media (min-width: 1024px) {
  .hero__body { padding-bottom: 88px; gap: 20px; }
  .hero__h { max-width: 18ch; }
  .hero__today { display: flex; gap: 10px; align-items: baseline; position: absolute; right: var(--pad); bottom: 96px; font-weight: 600; font-size: .9375rem; }
  .hero__brief { top: calc(var(--hd-h) + 16px); max-width: 44em; }
}

/* ---------- Workshop & team (editorial two-column: text + CTA | documentary image) ---------- */
.team { background: var(--c-white); padding-block: 72px 88px; }
.team__in { display: grid; gap: 32px; }
.team__text { display: grid; gap: 18px; align-content: center; }
.team__p { max-width: 32em; font-size: var(--fs-lead); line-height: 1.45; }
.team__cta { margin-top: 6px; }
.team__media .sc { aspect-ratio: 4 / 3; border-radius: var(--r); }
@media (min-width: 768px) { .team { padding-block: 96px 112px; } .team__in { gap: 40px; } }
@media (min-width: 1024px) {
  .team { padding-block: 120px 136px; }
  .team__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: center; }
  .team__text { padding-right: 24px; }
}
@media (min-width: 1440px) { .team__in { column-gap: 96px; } }

/* ---------- Services (light, image-responsive index) ---------- */
.svc2 { background: var(--c-white); padding-block: 72px 0; }
.svc2__head .eyebrow + .h2 { margin-top: 10px; }
.svc2__body { margin-top: 40px; }
.svc2__list { display: grid; gap: 14px; padding-inline: var(--pad); }
.svc2__link { display: grid; gap: 10px; }
.svc2__media { position: relative; display: block; border-radius: var(--r); overflow: hidden; }
.svc2__media .sc { aspect-ratio: 16 / 9; }
.svc2__onimg { position: absolute; left: 16px; bottom: 14px; color: #fff; font-family: var(--ff-d); font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.svc2__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); pointer-events: none; }
.svc2__text { display: grid; gap: 4px; padding-inline: 2px; }
.svc2__name { display: none; }
.svc2__desc { font-size: .9375rem; color: var(--c-ink-2); line-height: 1.45; }
.svc2__arr { display: none; }
.svc2__stage { display: none; }
.svc2__foot { margin-top: 32px; padding-bottom: 88px; }
@media (min-width: 768px) { .svc2__list { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1024px) {
  .svc2 { padding-top: 120px; }
  .svc2__body { display: grid; grid-template-columns: 5fr 7fr; column-gap: 0; margin-top: 56px; align-items: stretch; }
  .svc2__body { padding-left: max(var(--pad), calc((100% - var(--container)) / 2)); }
  .svc2__list { display: block; padding: 0 40px 0 0; }
  .svc2__row { border-top: 1px solid var(--c-line); }
  .svc2__row:last-child { border-bottom: 1px solid var(--c-line); }
  .svc2__link { grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 26px 0; min-height: 108px; }
  .svc2__media { display: none; }
  .svc2__text { gap: 6px; }
  .svc2__name { display: block; font-family: var(--ff-d); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--c-ink); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
  .svc2__desc { max-width: 30em; transition: color var(--t-fast) var(--ease); }
  .svc2__arr { display: block; font-size: 26px; line-height: 1; color: var(--c-ink-2); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
  .svc2__row:not(.is-active) .svc2__name { color: rgba(17, 17, 17, .48); }
  .svc2__row.is-active .svc2__name, .svc2__link:hover .svc2__name { color: var(--c-ink); transform: translateX(6px); }
  .svc2__row.is-active .svc2__arr, .svc2__link:hover .svc2__arr { transform: translateX(6px); color: var(--c-red); }
  .svc2__stage { display: grid; position: relative; min-height: 100%; overflow: hidden; }
  .svc2__img { grid-area: 1 / 1; position: relative; opacity: 0; transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease); transform: scale(1.02); overflow: hidden; }
  .svc2__img .sc { height: 100%; aspect-ratio: auto; position: absolute; inset: 0; }
  .svc2__img.is-active { opacity: 1; transform: none; }
  .svc2__img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); pointer-events: none; }
  .svc2__onimg--lg { left: 40px; bottom: 36px; font-size: 2.5rem; z-index: 1; }
  .svc2__img .sc__cap { bottom: auto; top: 16px; left: 40px; }
  .svc2__foot { margin-top: 40px; padding-bottom: 120px; }
}

/* ---------- Shared: rows / steps / hours / small ---------- */
.rows { border-top: 1px solid var(--c-line); }
.rows__r { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-line); align-items: baseline; }
.rows dt { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.rows dd { margin: 0; font-size: .9375rem; line-height: 1.45; }
.strip { border-top: 1px solid var(--c-line); } /* used on /termin/ only */
.strip li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--c-line); align-items: baseline; }
.strip li { padding: 10px 0; font-size: .9375rem; }
.steps__n { font-size: .8125rem; font-weight: 700; color: var(--c-red); letter-spacing: .04em; }
.hours { border-collapse: collapse; width: 100%; max-width: 360px; font-size: .9375rem; }
.hours th, .hours td { text-align: left; padding: 6px 0; vertical-align: top; font-weight: 400; }
.hours th { width: 5em; color: var(--c-ink-2); padding-right: 12px; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 600; color: inherit; }
.small { font-size: .875rem; color: var(--c-ink-2); line-height: 1.45; }
.support { font-size: .875rem; color: var(--c-ink-2); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Mercedes-Benz (03, dark) and Autoglas (04, daylight) — standalone stages ---------- */
/* Autoglas: bright, daylight; copy left, image right (mirror of the dark Mercedes stage, no card grid) */
.ag { background: var(--c-warm); display: grid; }
.ag__media { position: relative; }
.ag__media .sc { aspect-ratio: 4 / 5; }
.ag__body { padding: 40px var(--pad) 64px; display: grid; gap: 16px; }
.ag__h { font-family: var(--ff-d); font-size: clamp(2rem, 1.4rem + 2vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -.025em; max-width: 16ch; text-wrap: balance; font-variant-numeric: normal; }
.ag__copy { max-width: 34em; font-size: var(--fs-lead); line-height: 1.4; color: var(--c-ink); }
@media (max-width: 767px) { .ag__copy { font-size: 1rem; } }
.ag__copy + .ag__copy { margin-top: -4px; }
.ag__body .btn { justify-self: start; margin-top: 8px; }
@media (min-width: 768px) {
  .ag__media .sc { aspect-ratio: 16 / 9; }
  .ag__body { padding-block: 48px 80px; gap: 18px; }
}
@media (min-width: 1024px) {
  .ag { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
  .ag__media { order: 2; min-height: 100%; }
  .ag__media .sc { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .ag__body { order: 1; padding: 104px 56px 104px max(var(--pad), calc((100% * 12 / 5 - var(--container)) / 2)); gap: 20px; align-content: center; }
  .ag__h { max-width: 14ch; }
}

/* Mercedes-Benz (atmospheric, dark) */
.mb2 { position: relative; background: var(--c-dark); color: #fff; isolation: isolate; }
.mb2__media { position: relative; min-height: 78svh; }
.mb2__media .sc { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.mb2__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(to top, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .55) 40%, rgba(10, 10, 10, 0) 100%); pointer-events: none; }
.mb2__body { position: relative; z-index: 1; margin-top: -32svh; padding: 0 var(--pad) 64px; display: grid; gap: 16px; max-width: calc(var(--container) + 2 * var(--pad)); width: 100%; margin-inline: auto; }
.mb2__h { font-family: var(--ff-d); font-size: clamp(2rem, 1.4rem + 2vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -.025em; max-width: 20ch; text-wrap: balance; }
.mb2__copy { max-width: 34em; color: rgba(255, 255, 255, .88); font-size: var(--fs-lead); line-height: 1.4; }
@media (max-width: 767px) { .mb2__copy { font-size: 1rem; } }
.mb2__copy + .mb2__copy { margin-top: -4px; }
.mb2__body .btn { justify-self: start; }
.mb2__brief { position: absolute; right: var(--pad); top: calc(var(--hd-h) + 12px); max-width: 30em; font-size: 11.5px; line-height: 1.4; color: rgba(255, 255, 255, .5); display: grid; gap: 4px; text-align: right; pointer-events: none; }
@media (max-width: 767px) { .mb2__brief span:last-child { display: none; } }
.mb2__brief .sc__id { color: rgba(255, 255, 255, .45); }
@media (min-width: 768px) { .mb2__media { min-height: 82svh; } .mb2__body { padding-bottom: 64px; } }
@media (min-width: 1024px) {
  .mb2__media { min-height: 92svh; max-height: 980px; }
  .mb2__body { margin-top: -40svh; gap: 20px; padding-bottom: 104px; }
        .mb2__brief { top: calc(var(--hd-h) + 16px); max-width: 40em; }
}

/* ---------- Reviews (light, restrained) ---------- */
.rev { background: var(--c-warm); padding-block: 80px; }
.rev__in { display: grid; gap: 32px; }
.rev__h { margin-bottom: 8px; }
.rev__num { font-family: var(--ff-d); font-size: clamp(2.5rem, 2rem + 2vw, 4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-top: 10px; font-variant-numeric: normal; }
.rev__of { font-size: .5em; font-weight: 600; color: var(--c-ink-2); margin-left: 6px; }
.rev__count { font-size: .9375rem; color: var(--c-ink-2); margin-top: 6px; }
.rev__count + p { margin-top: 14px; }
.rev__list { border-top: 1px solid var(--c-line); }
.rev__list li { padding: 22px 0; border-bottom: 1px solid var(--c-line); }
@media (max-width: 767px) { .rev__list li:nth-child(3) { display: none; } }
.rev__list blockquote { margin: 0; }
.rev__list blockquote p { max-width: 38em; font-size: 1.0625rem; }
.rev__list footer { margin-top: 10px; font-size: .875rem; color: var(--c-ink-2); }
@media (min-width: 1024px) {
  .rev { padding-block: 120px; }
  .rev__in { grid-template-columns: 4fr 8fr; column-gap: 24px; align-items: start; }
  .rev__list { display: grid; grid-template-columns: repeat(3, 1fr); border: 0; }
  .rev__list li { border: 0; border-left: 1px solid var(--c-line); padding: 6px 24px; }
  .rev__list li:first-child { border-left: 0; padding-left: 0; }
}

/* ---------- Appointment (strong, simple conclusion) ---------- */
.cta { background: var(--c-white); padding-block: 88px 72px; }
.cta__in { display: grid; gap: 40px; }
.cta__h { font-family: var(--ff-d); font-size: clamp(2.5rem, 1.9rem + 2.4vw, 4.25rem); font-weight: 800; letter-spacing: -.025em; line-height: .98; }
.cta__lead { font-size: var(--fs-lead); margin-top: 20px; max-width: 28em; color: var(--c-ink-2); }
.cta__promise { margin-top: 14px; max-width: 30em; font-weight: 600; }
.cta__actions { margin-top: 36px; display: grid; gap: 10px; }
.cta__actions .btn { width: 100%; }
.cta__text .support { margin-top: 14px; }
.cta__wa { margin-top: 10px; }
.cta__media { order: -1; }
.cta__media .sc { border-radius: var(--r); }
.practical { display: grid; gap: 28px; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.practical .eyebrow { margin-bottom: 10px; }
.map { display: grid; align-content: end; gap: 8px; aspect-ratio: 3 / 2; background: var(--c-warm); border: 1px solid var(--c-line); border-radius: var(--r); padding: 14px; }
@media (min-width: 768px) {
  .cta__actions { grid-template-columns: auto auto; justify-content: start; }
  .cta__actions .btn { width: auto; }
  .practical { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .cta { padding-block: 128px 96px; }
  .cta__in { grid-template-columns: 6fr 1fr 5fr; align-items: center; }
  .cta__media { order: 0; grid-column: 3; }
  .practical { grid-template-columns: repeat(4, 1fr); column-gap: 24px; margin-top: 96px; padding-top: 40px; }
}

/* ---------- Footer (dark) ---------- */
.ft { background: var(--c-dark); color: rgba(255, 255, 255, .72); padding-block: 72px 48px; font-size: .9375rem; }
.ft a { color: #fff; }
.ft__grid { display: grid; gap: 40px; }
.ft__brand { display: block; width: fit-content; margin-bottom: 20px; }
.ft__logo { display: block; width: auto; height: 36px; object-fit: contain; }
.ft__p + .ft__p { margin-top: 14px; }
.ft .hours th { color: rgba(255, 255, 255, .55); }
.ft .hours tr.is-today th, .ft .hours tr.is-today td { color: #fff; }
.ft__small { font-size: .8125rem; color: rgba(255, 255, 255, .55); margin-top: 10px; }
.ft__nav li + li { margin-top: 8px; }
.ft__ext { margin-top: 22px; }
.ft .eyebrow--light { margin-bottom: 12px; }
.ft .tl { text-decoration-color: var(--c-line-d); }
.ft .tl:hover { text-decoration-color: #fff; }
.ft__legal { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--c-line-d); display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; font-size: .875rem; }
@media (min-width: 768px) { .ft__grid { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
@media (min-width: 1024px) { .ft { padding-block: 96px 48px; } .ft__grid { grid-template-columns: 4fr 3fr 3fr 2fr; } }

/* ---------- Fixed layer: WhatsApp + mobile bar ---------- */
.wa { position: fixed; right: 24px; bottom: 24px; z-index: 45; display: none; align-items: center; gap: 8px; opacity: 0; transition: opacity var(--t-base) var(--ease); }
@media (min-width: 768px) { .wa { display: flex; } }
.wa.is-ready { opacity: 1; }
.wa.is-hidden { opacity: 0; pointer-events: none; }
.wa__btn { width: 48px; height: 48px; border-radius: 50%; background: var(--c-wa); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-float); }
.wa__btn .ic-wa { width: 24px; height: 24px; }
.wa__label { display: none; }
@media (min-width: 1024px) {
  .wa__label { display: block; height: 36px; line-height: 34px; padding: 0 12px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r); font-size: .875rem; font-weight: 600; color: var(--c-ink); opacity: 0; transform: translateX(4px); transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); pointer-events: none; }
  .wa:hover .wa__label, .wa:focus-visible .wa__label { opacity: 1; transform: none; }
}
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: grid; grid-template-columns: auto minmax(0, 1fr) 48px; gap: 8px; padding: 8px var(--pad) calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .98); border-top: 1px solid var(--c-line); transform: translateY(110%); transition: transform var(--t-fast) var(--ease); }
.bar .btn { height: 48px; min-width: 0; padding: 0 14px; width: 100%; font-size: .9375rem; }
.bar .btn--secondary { padding: 0 14px; }
.bar__wa { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--c-line); border-radius: var(--r); background: #fff; color: var(--c-wa); }
.bar__wa .ic-wa { width: 24px; height: 24px; }
.bar__wa:hover { background: rgba(0, 0, 0, .04); }
.bar.is-visible { transform: none; }
@media (min-width: 768px) { .bar { display: none; } }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
  .svc2__img { transform: none; }
  .svc2__row.is-active .svc2__name, .svc2__link:hover .svc2__name, .svc2__row.is-active .svc2__arr, .svc2__link:hover .svc2__arr { transform: none; }
}
html:not(.js) .wa { opacity: 1; }
html:not(.js) .bar { transform: none; }
html:not(.js) body { --bar-offset: var(--bar-h); }
@media (min-width: 768px) { html:not(.js) body { --bar-offset: 0px; } }

/* Placeholder captions on bright (daylight) scenes stay legible */
.ag .sc__cap { color: rgba(0, 0, 0, .62); }
.ag .sc__id { color: rgba(0, 0, 0, .5); }
.nw { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1439px) {
  .ag { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ag__body { padding: 80px 40px 80px var(--pad); }
  .ag__h { font-size: clamp(2rem, 1.2rem + 2vw, 3rem); }
}

/* ==========================================================================
   /mercedes/ — production polish (Phase 7.1). Page-scoped classes (mb-*/mc-*); homepage rules untouched.
   Calmer type scale than the homepage; 56–80 px section rhythm; photography contained in the grid.
   ========================================================================== */
.hd__nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 1024px) { .nw-md { white-space: nowrap; } }
.mp .hd { color: var(--c-ink); }
.mp .hd::before { opacity: 0; }
/* production image slot: stable ratio per breakpoint (no CLS), cover + per-slot object-position, tiny corner tag while a placeholder */
.slot { position: relative; width: 100%; aspect-ratio: var(--ratio-m, var(--ratio)); overflow: hidden; background: var(--c-dark); border-radius: var(--r); margin: 0; }
.slot picture, .slot img, .slot .slot__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot img { object-fit: cover; object-position: var(--pos-m, var(--pos)); display: block; }
.slot .slot__scene { aspect-ratio: auto; border-radius: 0; }
.slot .slot__scene svg { object-position: var(--pos-m, var(--pos)); }
.slot__tag { position: absolute; right: 8px; bottom: 6px; font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); text-shadow: 0 0 2px rgba(0, 0, 0, .6); opacity: .55; pointer-events: none; }
@media (min-width: 768px) { .slot { aspect-ratio: var(--ratio); } .slot img, .slot .slot__scene svg { object-position: var(--pos); } }
.mp section, .mp h1, .mp h2, .mp h3 { scroll-margin-top: calc(var(--hd-h) + 16px); }
.mb-em { font-weight: 600; color: inherit; }
.mp .btn { transition-duration: 180ms; }
.mp .btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .mp .btn { transition: none; } .mp .btn:active { transform: none; } }
.mp main { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* type scale */
.mb-h1 { font-family: var(--ff-d); font-size: clamp(2.5rem, 1.85rem + 1.9vw, 3.75rem); font-weight: 800; line-height: 1; letter-spacing: -.025em; max-width: 16ch; text-wrap: balance; font-variant-numeric: normal; }
.mb-h2 { font-family: var(--ff-d); font-size: clamp(1.875rem, 1.45rem + 1.3vw, 2.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; max-width: 18ch; font-variant-numeric: normal; }
.mb-h3 { font-family: var(--ff-d); font-size: clamp(1.375rem, 1.2rem + .55vw, 1.625rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; font-variant-numeric: normal; }
.mb-p { font-size: clamp(1.0625rem, 1.02rem + .18vw, 1.1563rem); line-height: 1.55; }
.mb-lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 32em; color: var(--c-ink-2); }

/* 1 intro — contained text block, then one wide photograph */
.mb-intro { background: var(--c-white); padding: calc(var(--hd-h) + 32px) 0 48px; }
.mb-intro__row { display: grid; gap: 20px; }
.mb-intro__head { display: grid; gap: 14px; }
.mb-intro__aside { display: grid; gap: 16px; align-content: end; max-width: 30em; }
.mb-intro__cta { margin-top: 2px; }
.mb-intro__media { margin-top: 32px; }
.mb-intro__media .sc { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .mb-intro { padding: calc(var(--hd-h) + 48px) 0 56px; } .mb-intro__row { gap: 24px; } .mb-intro__head { max-width: 18ch; } .mb-intro__media { margin-top: 36px; } }
@media (min-width: 1024px) { .mb-intro { padding: calc(var(--hd-h) + 56px) 0 48px; } .mb-intro__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; } .mb-intro__head { max-width: none; } .mb-intro__head { grid-column: 1 / span 7; } .mb-intro__aside { grid-column: 8 / span 5; padding-bottom: 8px; } .mb-intro__media { margin-top: 40px; } .mb-intro__media .sc { aspect-ratio: 21 / 9; } .mb-h1 { max-width: 15ch; } }

/* shared text row: heading left (4/12), prose right (7/12, offset one column) — fills the width, no half-empty column */
.mc-row { display: grid; gap: 14px; }
.mc-row__h { max-width: 16ch; }
.mc-row__body { display: grid; gap: 16px; max-width: 40em; }
.mc-row__body .mb-p { max-width: none; }
@media (min-width: 768px) { .mc-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; } .mc-row__body { max-width: 42em; } }
@media (min-width: 1024px) { .mc-row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .mc-row__h { grid-column: 1 / span 4; } .mc-row__body { grid-column: 5 / span 7; max-width: 40em; padding-top: 4px; } }

/* 2 Erfahrung — text row, then a wide shallow photograph */
.mc-exp { background: var(--c-white); padding-block: 8px 48px; }
.mc-exp__media { margin-top: 28px; }
@media (min-width: 768px) { .mc-exp { padding-block: 16px 56px; } .mc-exp__media { margin-top: 32px; } }
@media (min-width: 1024px) { .mc-exp { padding-block: 16px 56px; } .mc-exp__media { margin-top: 36px; } }

/* 3 Für Ihren Mercedes — one warm field: text row, then diagnosis photo | text */
.mc-prog { background: var(--c-warm); padding-block: 48px; }
.mc-prog__link { margin-top: 4px; font-size: 1rem; }
.mc-diag { margin-top: 36px; display: grid; gap: 24px; }
.mc-diag__media { order: 2; }
.mc-diag__text { order: 1; display: grid; gap: 14px; max-width: 40em; }
@media (min-width: 768px) {
  .mc-prog { padding-block: 56px; }
  .mc-diag { margin-top: 40px; }
}
@media (min-width: 1024px) { .mc-prog { padding-block: 56px 64px; } .mc-diag { margin-top: 40px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: center; } .mc-diag__media { order: 0; } .mc-diag__text { order: 0; } }

/* 4 Generationen — text row, then the gallery directly below */
.mc-gen { background: var(--c-white); padding-block: 48px 56px; }
.mc-gen__photos { margin-top: 28px; display: grid; gap: 8px; }
.mc-gen__pair { display: grid; gap: 8px; }
@media (min-width: 768px) { .mc-gen { padding-block: 56px; } .mc-gen__photos { margin-top: 32px; } .mc-gen__pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } .mc-gen__b { aspect-ratio: auto; height: 100%; } }
@media (min-width: 1024px) { .mc-gen { padding-block: 56px 64px; } .mc-gen__photos { margin-top: 36px; } }

/* 5 reassurance — compact horizontal band */
.mc-note { background: var(--c-white); border-top: 1px solid var(--c-line); padding-block: 36px 40px; }
.mb-note__h { font-family: var(--ff-d); font-size: clamp(1.375rem, 1.2rem + .55vw, 1.625rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; max-width: 16ch; font-variant-numeric: normal; }
.mc-row__body--note { gap: 10px; }
@media (min-width: 768px) { .mc-note { padding-block: 40px; } .mc-row--note { align-items: start; } }

/* 6 final CTA — warm closing band */
.mb-cta { background: var(--c-warm); border-top: 1px solid rgba(0, 0, 0, .16); padding-block: 48px 56px; }
.mb-cta__in { display: grid; gap: 28px; }
.mb-cta__text { display: grid; gap: 16px; }
.mb-cta__text .mb-h2 { max-width: 14ch; }
.mb-cta__lead { max-width: 32em; color: var(--c-ink-2); }
.mb-cta__actions { margin-top: 14px; display: grid; gap: 10px; align-items: center; }
.mb-cta__actions .btn--primary { min-width: 220px; }
.mb-cta__actions .btn { width: 100%; }
.mb-cta__wa { justify-self: start; margin-top: 4px; }
.mb-cta__addr { font-style: normal; display: grid; gap: 8px; align-content: start; line-height: 1.5; }
.mb-cta__note { font-size: .9375rem; line-height: 1.5; color: var(--c-ink-2); max-width: 46em; padding-top: 20px; border-top: 1px solid var(--c-line); }
@media (min-width: 768px) {
  .mb-cta { padding-block: 56px; }
  .mb-cta__in { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 48px; }
  .mb-cta__actions { grid-template-columns: auto auto auto; justify-content: start; gap: 12px 16px; }
  .mb-cta__actions .btn { width: auto; }
  .mb-cta__wa { margin: 0 0 0 8px; }
  .mb-cta__addr { padding-top: 6px; }
  .mb-cta__note { grid-column: 1 / -1; margin-top: 8px; }
}
@media (min-width: 1024px) { .mb-cta { padding-block: 56px 64px; } .mb-cta__in { column-gap: 64px; } }

/* ==========================================================================
   /autoglas/ — customer-task page (Phase 8.0, journey correction 8.1). Page-scoped classes (ag-*, body.ap); shares the
   detail-page primitives above (.mp, .slot, .mb-h1/h2/p/lead, .mb-intro, .mc-row, .mb-cta). Homepage and /mercedes/ untouched.
   Order: intro → repair/insurance → process → vehicles (warm) → camera/assistance (quiet) → CTA (warm). 40–56 px rhythm.
   ========================================================================== */
/* 1 intro — no page CTA (header button / mobile bar carry it); H1 keeps "in Gronau." on one line */
.ap .mb-intro__head { max-width: none; }
.ag-h1 { max-width: none; }
.ap .mb-intro { padding-bottom: 40px; }
.ap .mb-intro__media { margin-top: 28px; }
@media (min-width: 768px) { .ap .mb-intro { padding-bottom: 48px; } .ap .mb-intro__media { margin-top: 32px; } }
@media (min-width: 1024px) { .ap .mb-intro__aside { padding-bottom: 6px; } .ap .mb-intro__media { margin-top: 36px; } }

/* 2 Reparieren oder austauschen — text row; the two statements (repair check · insurance) stand apart */
.ag-repair { background: var(--c-white); padding-block: 8px 36px; }
.ag-row__body { gap: 20px; }
@media (min-width: 768px) { .ag-repair { padding-block: 16px 40px; } .ag-row__body { gap: 22px; } }

/* 3 So läuft der Scheibentausch ab — follows repair without a reset: same white ground, one hairline, tight top */
.ag-proc { background: var(--c-white); padding-block: 36px 44px; border-top: 1px solid var(--c-line); }
.ag-proc__h { max-width: 18ch; }
.ag-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 22px; }
.ag-step { display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--c-line); padding-top: 16px; }
.ag-step__h { font-family: var(--ff-d); font-size: clamp(1.25rem, 1.15rem + .4vw, 1.4375rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; font-variant-numeric: normal; }
.ag-step__n { font-weight: 700; color: var(--c-ink-2); margin-right: .1em; }
.ag-step__p { max-width: 36em; }
.ag-rental { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: .9375rem; line-height: 1.5; color: var(--c-ink-2); }
.ag-rental .mb-em { color: var(--c-ink); }
@media (min-width: 768px) and (max-width: 1023px) { .ag-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; } .ag-step__p { max-width: 42em; } }
@media (min-width: 768px) { .ag-proc { padding-block: 40px 52px; } .ag-steps { margin-top: 28px; } .ag-step { padding-top: 18px; } .ag-rental { margin-top: 28px; } }
@media (min-width: 1024px) { .ag-proc { padding-block: 44px 56px; } .ag-steps { margin-top: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } .ag-step { gap: 12px; } }

/* 4 Pkw, Transporter und Wohnmobile — warm capability field (the page shifts from "your case" to "what we handle") */
.ag-veh { background: var(--c-warm); padding-block: 44px 48px; }
.ag-veh__photos { margin-top: 28px; display: grid; gap: 8px; }
.ag-veh__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 768px) { .ag-veh { padding-block: 52px 56px; } .ag-veh__photos { margin-top: 32px; } .ag-veh__pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } .ag-veh__b { aspect-ratio: auto; height: 100%; } }
@media (min-width: 1024px) { .ag-veh { padding-block: 56px 64px; } .ag-veh__photos { margin-top: 36px; } }

/* 5 Kamera und Fahrerassistenz — quiet white row: text 7/12 | small supporting photo 5/12 (text first on small screens) */
.ag-cal { background: var(--c-white); padding-block: 40px 44px; }
.ag-cal__in { display: grid; gap: 22px; }
.ag-cal__media { order: 2; }
.ag-cal__text { order: 1; display: grid; gap: 12px; max-width: 40em; }
.ag-cal__text .mb-h2 { max-width: 20ch; }
@media (min-width: 768px) { .ag-cal { padding-block: 48px 52px; } .ag-cal__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: start; } .ag-cal__media { order: 2; padding-top: 6px; } .ag-cal__text { order: 1; } }
@media (min-width: 1024px) { .ag-cal { padding-block: 52px 56px; } .ag-cal__in { column-gap: 64px; } }

/* 6 Scheibenschaden? — what to send; Termin primary, Anrufen + WhatsApp secondary (photo channel) */
.ag-cta__lead { display: grid; gap: 12px; max-width: 34em; color: var(--c-ink-2); }
.ag-cta__lead .mb-em { color: var(--c-ink); }
.ag-cta__actions { grid-template-columns: 1fr 1fr; gap: 10px; }
.ag-cta__actions .btn--primary { grid-column: 1 / -1; }
.ag-cta__actions .btn--secondary { min-width: 0; padding-inline: 16px; }
@media (min-width: 768px) { .ag-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } .ag-cta__actions .btn--primary { grid-column: auto; } .ag-cta__actions .btn--secondary { min-width: 0; padding-inline: 22px; } }
/* tablet: one column so all three buttons sit on one line; address becomes a compact row beneath */
@media (min-width: 768px) and (max-width: 1023px) { .ag-cta .mb-cta__in { grid-template-columns: 1fr; row-gap: 24px; } .ag-cta .mb-cta__addr { grid-template-columns: auto auto; justify-content: start; column-gap: 40px; align-items: end; padding-top: 20px; border-top: 1px solid var(--c-line); } }
@media (min-width: 1280px) { .ag-cta__actions .btn--secondary { min-width: 190px; padding-inline: 26px; } }

/* ==========================================================================
   /leistungen/ — functional services overview (Phase 9.0, polish 9.1). Page-scoped classes (lp-*, lx-*, lm-*, ls-*; body.lp);
   shares the detail-page primitives (.mp, .mb-h1/h2/p/lead, .mb-intro, .mb-cta, .ag-cta__actions). Locked pages untouched.
   ========================================================================== */
.lp { --lp-t1: #2A2A2A; --lp-t2: #444444; --lp-t3: #4F4F4F; } /* panel tones: intro/list · notes · labels — all well above body-text contrast minimums */
/* 1 hero — compact, no image, no page CTA; explorer starts right below */
.lp-hero { padding-bottom: 28px; }
.lp-h1 { max-width: 14ch; }
@media (min-width: 768px) { .lp-hero { padding-bottom: 32px; } }
@media (min-width: 768px) and (max-width: 1023px) { .lp .mb-intro__head { max-width: none; } .lp-h1 { font-size: 2.625rem; max-width: 16ch; } }
@media (min-width: 1024px) { .lp-hero { padding: calc(var(--hd-h) + 48px) 0 36px; } .lp-hero .mb-intro__aside { padding-bottom: 6px; } }

/* 2 services explorer — tabs (.lx__list) and panels (.lx__panels) are separate containers.
   Below 1024 px both are display:contents inside a one-column grid and inline `order` puts each panel under its button (accordion).
   From 1024 px: list 42 % | panels 58 %, white ground, one hairline divider, stable min-height (no layout jump). */
.lx-sec { background: var(--c-white); padding: 4px 0 48px; }
.lx__btn, .lx__panel, .lx__item { scroll-margin-top: calc(var(--hd-h) + 16px); }
.lx { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--c-line); }
.lx__list, .lx__panels { display: contents; }
.lx__item { border-bottom: 1px solid var(--c-line); }
.lx__btn { display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; column-gap: 14px; align-items: center; width: 100%; padding: 14px 0 14px 4px; background: none; border: 0; text-align: left; font: inherit; color: var(--c-ink); cursor: pointer; border-radius: var(--r); transition: background-color var(--t-fast) var(--ease); }
.lx__btn:hover { background: rgba(0, 0, 0, .03); }
.lx__btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }
.lx__ico { display: grid; place-items: center; width: 22px; height: 22px; color: var(--c-ink-2); transition: color var(--t-fast) var(--ease); }
.lxi { width: 22px; height: 22px; }
.lx__text { display: grid; gap: 2px; min-width: 0; }
.lx__title { font-family: var(--ff-d); font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.lx__sub { font-size: .9375rem; line-height: 1.4; color: var(--c-ink-2); }
.lx__ind { position: relative; width: 20px; height: 20px; color: var(--c-ink-2); }
.lx__ind::before, .lx__ind::after { content: ''; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }
.lx__ind::before { width: 14px; height: 2px; }
.lx__ind::after { width: 2px; height: 14px; }
.lx__btn.is-active .lx__ico, .lx__btn.is-active .lx__ind { color: var(--c-red); }
.lx__btn.is-active .lx__ind::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.lx__panel { display: block; background: var(--c-warm); border-bottom: 1px solid var(--c-line); }
.js .lx__panel:not(.is-open) { display: none; }
.lx__panel-in { padding: 22px 20px 24px; color: var(--lp-t1); }
.lx__pico { display: block; width: 22px; height: 22px; color: var(--c-ink); margin-bottom: 12px; }
.lx__h2 { font-family: var(--ff-d); font-size: clamp(1.375rem, 1.2rem + .55vw, 1.625rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; color: var(--c-ink); font-variant-numeric: normal; }
.lx__intro { margin-top: 10px; max-width: 36em; color: var(--lp-t1); }
.lx__label { margin-top: 20px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-t3); }
.lx__items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px 24px; }
.lx__items li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; align-items: start; font-size: 1rem; line-height: 1.45; color: var(--lp-t1); }
.lxc { width: 16px; height: 16px; margin-top: 3px; color: var(--c-ink); }
.lx__note { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: .9375rem; line-height: 1.5; color: var(--lp-t2); max-width: 40em; }
.lx__aside { margin-top: 10px; font-size: .9375rem; line-height: 1.5; color: var(--lp-t3); max-width: 40em; }
.lx__note + .lx__aside { margin-top: 8px; }
@keyframes lx-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lx__panel.is-in .lx__panel-in { animation: lx-in 180ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .lx__panel.is-in .lx__panel-in { animation: none; } .lx__ind::before, .lx__ind::after, .lx__btn { transition: none; } }
html:not(.js) .lx__panel { display: block; }
@media (min-width: 600px) { .lx__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .lx-sec { padding-bottom: 56px; }
  .lx__btn { padding: 16px 4px 16px 6px; }
  .lx__panel-in { padding: 28px 28px 30px; }
}
@media (min-width: 1024px) {
  .lx-sec { padding-bottom: 64px; }
  .lx { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); column-gap: 40px; border-top: 0; align-items: stretch; }
  .lx__list { display: block; border-top: 1px solid var(--c-line); }
  .lx__panels { display: block; border-left: 1px solid var(--c-line); min-height: 520px; }
  .lx__btn { padding: 15px 8px 15px 10px; }
  .lx__btn.is-active { box-shadow: inset 3px 0 0 var(--c-red); border-radius: 0; }
  .lx__btn.is-active .lx__title { font-weight: 800; }
  .lx__ind::before { width: 12px; height: 2px; }
  .lx__ind::after { width: 8px; height: 8px; background: none; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translate(-40%, -50%) rotate(45deg); }
  .lx__btn.is-active .lx__ind::after { transform: translate(-40%, -50%) rotate(45deg); opacity: 1; }
  .lx__panel { background: transparent; border-bottom: 0; }
  .lx__panel-in { padding: 6px 0 24px 40px; }
  .lx__intro { margin-top: 12px; }
  .lx__label { margin-top: 24px; }
  .lx__items { margin-top: 12px; gap: 10px 28px; }
  .lx__items li { font-size: 1.0625rem; }
}
@media (min-width: 1280px) { .lx { column-gap: 56px; } .lx__panel-in { padding-left: 48px; } }

/* 3 Häufig gefragt — warm compact list, two columns from 600 px */
.lm { background: var(--c-warm); padding-block: 40px 44px; }
.lm__in { display: grid; gap: 20px; }
.lm__head { display: grid; gap: 10px; }
.lm__h2 { max-width: 14ch; }
.lm__intro { max-width: 34em; color: var(--lp-t2); }
.lm__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; border-top: 1px solid var(--c-line); }
.lm__list li { padding: 11px 0; border-bottom: 1px solid var(--c-line); font-size: 1.0625rem; line-height: 1.4; font-weight: 600; color: var(--c-ink); }
@media (min-width: 600px) { .lm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .lm { padding-block: 48px 52px; } }
@media (min-width: 1024px) { .lm { padding-block: 52px 56px; } .lm__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; } .lm__head { grid-column: 1 / span 4; } .lm__body { grid-column: 5 / span 8; padding-top: 6px; } }

/* 4 specialist rows — Mercedes + Autoglas, editorial rows with rules, no cards */
.ls { background: var(--c-white); padding-block: 40px 44px; }
.ls__row { display: grid; gap: 12px; padding: 24px 0; border-top: 1px solid var(--c-line); }
.ls__row:last-child { border-bottom: 1px solid var(--c-line); }
.ls__head { display: grid; gap: 8px; }
.ls__h2 { font-family: var(--ff-d); font-size: clamp(1.5rem, 1.3rem + .7vw, 1.875rem); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; max-width: 18ch; text-wrap: balance; }
.ls__body { display: grid; gap: 12px; max-width: 40em; }
.ls__link { font-size: 1rem; }
@media (min-width: 768px) { .ls { padding-block: 48px 52px; } .ls__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; padding: 28px 0; align-items: start; } .ls__body { padding-top: 4px; } }
@media (min-width: 1024px) { .ls { padding-block: 52px 56px; } .ls__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 32px 0; } .ls__head { grid-column: 1 / span 4; } .ls__body { grid-column: 5 / span 7; } }

/* 5 final CTA — compact variant of the shared band */
.lp-cta { padding-block: 44px 48px; }
@media (min-width: 768px) { .lp-cta { padding-block: 48px 52px; } }
@media (min-width: 1024px) { .lp-cta { padding-block: 52px 56px; } }

/* ==========================================================================
   /werkstatt-team/ — trust page (Phase 10.0). Page-scoped classes (wt-*; body.wp); shares the detail-page primitives
   (.mp, .slot, .mb-h1/h2/p/lead, .mb-intro, .mc-row, .mb-cta, .ag-cta__actions). Locked pages untouched.
   Photography-led rhythm: intro → wide photo → text | photo → people → warm band → wide photo + text + details → CTA.
   ========================================================================== */
/* 1 hero — compact text row, then the wide photograph */
.wt-h1 { max-width: 12ch; }
.wp .mb-intro { padding-bottom: 40px; }
.wp .mb-intro__media { margin-top: 24px; }
@media (min-width: 768px) and (max-width: 1023px) { .wp .mb-intro__head { max-width: none; } .wt-h1 { font-size: 2.625rem; max-width: 14ch; } }
@media (min-width: 768px) { .wp .mb-intro { padding-bottom: 48px; } .wp .mb-intro__media { margin-top: 28px; } }
@media (min-width: 1024px) { .wp .mb-intro { padding: calc(var(--hd-h) + 44px) 0 48px; } .wp .mb-intro__aside { padding-bottom: 6px; } .wp .mb-intro__media { margin-top: 32px; } }

/* 2 three generations — text first, photograph beside it from 1024 (below on smaller screens) */
.wt-gen { background: var(--c-white); padding-block: 8px 44px; }
.wt-gen__in { display: grid; gap: 22px; }
.wt-gen__text { display: grid; gap: 14px; max-width: 40em; }
.wt-gen__text .mb-h2 { max-width: 16ch; }
.wt-gen__body { display: grid; gap: 14px; }
@media (min-width: 768px) { .wt-gen { padding-block: 16px 52px; } .wt-gen__in { gap: 26px; } }
@media (min-width: 768px) and (max-width: 1023px) { .wt-gen__media .slot { aspect-ratio: 16 / 7; } }
@media (min-width: 1024px) { .wt-gen { padding-block: 16px 56px; } .wt-gen__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; } .wt-gen__text { grid-column: 1 / span 7; padding-right: 24px; } .wt-gen__media { grid-column: 8 / span 5; } }
@media (min-width: 1280px) { .wt-gen__text { grid-column: 1 / span 6; } .wt-gen__media { grid-column: 8 / span 5; } .wt-person--crew { grid-template-columns: 176px minmax(0, 1fr); column-gap: 24px; } }

/* 3 people — one team, six equal entries: 3 × 2 grid from 1024, 2 columns from 600, photo | name/role rows below */
.wt-team { background: var(--c-white); border-top: 1px solid var(--c-line); padding-block: 44px 48px; }
.wt-team__h2 { max-width: 14ch; }
.wt-team__grid { margin-top: 24px; display: grid; gap: 14px; }
.wt-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.wt-person__head { display: grid; gap: 4px; }
.wt-person__name { font-family: var(--ff-d); font-size: 1.125rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.wt-person__role { font-size: .9375rem; line-height: 1.4; color: var(--c-ink-2); }
@media (min-width: 600px) { .wt-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } .wt-person { grid-template-columns: 1fr; row-gap: 12px; align-items: start; } .wt-person__name { font-size: 1.25rem; } }
@media (min-width: 768px) { .wt-team { padding-block: 52px 56px; } .wt-team__grid { margin-top: 28px; gap: 32px 24px; } }
@media (min-width: 1024px) { .wt-team { padding-block: 56px 64px; } .wt-team__grid { margin-top: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; } }

/* 4 trust band — warm, H2 | three paragraphs, secondary statement */
.wt-trust { background: var(--c-warm); padding-block: 44px 48px; }
.wt-trust__body { gap: 14px; }
.wt-trust__note { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--c-line); font-size: .9375rem; line-height: 1.5; color: var(--c-ink-2); max-width: 40em; }
@media (min-width: 768px) { .wt-trust { padding-block: 52px 56px; } }
@media (min-width: 1024px) { .wt-trust { padding-block: 56px 64px; } }

/* 5 workshop — dominant wide photo, text row, two supporting details */
.wt-shop { background: var(--c-white); padding-block: 40px 48px; }
.wt-shop__row { margin-top: 24px; }
.wt-shop__pair { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 768px) { .wt-shop { padding-block: 48px 56px; } .wt-shop__row { margin-top: 28px; } .wt-shop__pair { margin-top: 32px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; } .wt-shop__b { aspect-ratio: auto; height: 100%; } }
@media (min-width: 1024px) { .wt-shop { padding-block: 56px 64px; } .wt-shop__row { margin-top: 32px; } .wt-shop__pair { margin-top: 36px; } }

/* 6 final CTA — compact variant of the shared band */
.wt-cta { padding-block: 44px 48px; }
@media (min-width: 768px) { .wt-cta { padding-block: 48px 52px; } }
@media (min-width: 1024px) { .wt-cta { padding-block: 52px 56px; } }

/* ==========================================================================
   /kontakt/ — functional contact page (Phase 11.0). Page-scoped classes (kt-*; body.kp); shares the detail-page primitives
   (.mp, .mb-h1/h2/p/lead, .mb-intro, .mc-row, .tl, .btn). No photography, no closing CTA band. Locked pages untouched.
   ========================================================================== */
/* 1 hero — compact text row only */
.kt-h1 { max-width: 12ch; }
.kp .mb-intro { padding-bottom: 32px; }
@media (min-width: 768px) and (max-width: 1023px) { .kp .mb-intro__head { max-width: none; } .kt-h1 { font-size: 2.625rem; max-width: 14ch; } }
@media (min-width: 768px) { .kp .mb-intro { padding-bottom: 36px; } }
@media (min-width: 1024px) { .kp .mb-intro { padding: calc(var(--hd-h) + 44px) 0 40px; } .kp .mb-intro__aside { padding-bottom: 6px; } }

/* 2 contact channels — four equal blocks with hairlines: title · value · text · action */
.kt-channels { background: var(--c-white); padding-block: 4px 40px; }
.kt-channels__grid { display: grid; border-top: 1px solid var(--c-line); }
.kt-ch { scroll-margin-top: calc(var(--hd-h) + 16px); display: grid; gap: 6px; align-content: start; padding: 20px 0 22px; border-bottom: 1px solid var(--c-line); }
.kt-ch__title { font-family: var(--ff-d); font-size: 1.25rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.kt-ch__value { font-family: var(--ff-d); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.kt-ch__value--mail { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); }
.kt-ch__value a { text-decoration: none; color: inherit; }
.kt-ch__value a:hover { text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 4px; }
.kt-ch__text { font-size: 1rem; line-height: 1.5; color: var(--c-ink-2); max-width: 30em; }
.kt-ch__action { margin-top: 8px; font-size: 1rem; }
.kt-ch__action .btn { width: 100%; }
@media (min-width: 600px) { .kt-channels__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .kt-ch__action .btn { width: auto; } }
@media (min-width: 768px) { .kt-channels { padding-block: 8px 48px; } .kt-ch { padding: 24px 0 26px; gap: 8px; } }
@media (min-width: 1024px) { .kt-channels { padding-block: 8px 56px; } .kt-channels__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; } .kt-ch { padding: 26px 0 28px; } .kt-ch__action { margin-top: auto; padding-top: 10px; } }

/* 3 address + opening hours | map */
.kt-loc { background: var(--c-warm); padding-block: 44px 48px; }
.kt-loc__h2 { max-width: 14ch; }
.kt-loc__grid { margin-top: 24px; display: grid; gap: 28px; }
.kt-loc__info { display: grid; gap: 24px; align-content: start; }
.kt-addr { font-style: normal; display: grid; gap: 8px; font-size: 1.0625rem; line-height: 1.5; }
.kt-hours__h { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-2); }
.kt-hours__list { margin: 10px 0 0; border-top: 1px solid var(--c-line); }
.kt-hours__row { display: grid; grid-template-columns: minmax(140px, 42%) 1fr; column-gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: 1.0625rem; line-height: 1.5; }
.kt-hours__row dt { font-weight: 600; }
.kt-hours__row dd { margin: 0; }
.kt-map { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: #ECEAE4; border: 1px solid var(--c-line); }
.kt-map__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.kt-map__note { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 8px 10px; background: rgba(255, 255, 255, .92); border-radius: var(--r); font-size: .8125rem; line-height: 1.4; color: var(--c-ink-2); }
@media (min-width: 768px) { .kt-loc { padding-block: 52px 56px; } .kt-loc__grid { margin-top: 28px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: start; } .kt-map { aspect-ratio: 3 / 2; } }
@media (min-width: 1024px) { .kt-loc { padding-block: 56px 64px; } .kt-loc__grid { margin-top: 32px; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } .kt-loc__info { grid-column: 1 / span 5; } .kt-map { grid-column: 7 / span 6; aspect-ratio: 4 / 3; } }

/* 4 HU & AU — compact text row with three times */
.kt-hu { background: var(--c-white); padding-block: 44px 48px; }
.kt-hu__body { gap: 12px; }
.kt-hu__em { font-weight: 600; }
.kt-hu__times { margin: 8px 0 0; max-width: 28em; border-top: 1px solid var(--c-line); }
.kt-hu__time { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; column-gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--c-line); font-size: 1.0625rem; line-height: 1.5; }
.kt-hu__time dt { font-weight: 600; }
.kt-hu__time dd { margin: 0; }
@media (min-width: 768px) { .kt-hu { padding-block: 52px 56px; } }
@media (min-width: 1024px) { .kt-hu { padding-block: 56px 64px; } }

/* ==========================================================================
   /termin/ — temporary appointment page (Phase 13.0; body.tp). Compact intro + two direct contact channels + note.
   Uses the detail-page primitives (.mb-intro, .mb-h1, .mb-lead, .tl); no page-specific colours.
   ========================================================================== */
.tp-h1 { max-width: 14ch; }
.tp .mb-intro { padding-bottom: 28px; }
@media (min-width: 768px) and (max-width: 1023px) { .tp .mb-intro__head { max-width: none; } .tp-h1 { font-size: 2.625rem; max-width: 22ch; } }
@media (min-width: 768px) { .tp .mb-intro { padding-bottom: 32px; } }
@media (min-width: 1024px) { .tp .mb-intro { padding: calc(var(--hd-h) + 44px) 0 36px; } .tp .mb-intro__aside { padding-bottom: 6px; } .tp-h1 { max-width: none; } }

.tp-actions { background: var(--c-white); padding-block: 4px 72px; }
.tp-actions__grid { display: grid; border-top: 1px solid var(--c-line); }
.tp-ch { display: grid; gap: 6px; align-content: start; padding: 22px 0 24px; border-bottom: 1px solid var(--c-line); }
.tp-ch__title { font-family: var(--ff-d); font-size: 1.25rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.tp-ch__value { font-family: var(--ff-d); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tp-ch__value a { text-decoration: none; color: inherit; }
.tp-ch__value a:hover { text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 4px; }
.tp-ch__action { margin-top: 6px; font-size: 1rem; }
.tp-note { margin-top: 24px; font-size: .9375rem; line-height: 1.5; color: var(--c-ink-2); max-width: 36em; }
@media (min-width: 600px) { .tp-actions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 768px) { .tp-actions { padding-block: 8px 88px; } .tp-ch { padding: 26px 0 28px; gap: 8px; } }
@media (min-width: 1024px) { .tp-actions { padding-block: 8px 112px; } .tp-actions__grid { grid-template-columns: repeat(2, minmax(0, 420px)); column-gap: 48px; } .tp-ch { padding: 28px 0 30px; } .tp-note { margin-top: 28px; } }

/* ==========================================================================
   Legal pages /impressum/, /datenschutz/ and the 404 page (Phase 14.0; body.lg). Restrained, text-focused:
   compact intro + one reading column. Uses the detail-page primitives; no page-specific colours, no CTA bands.
   ========================================================================== */
.lg-h1 { max-width: 14ch; }
.lg .mb-intro { padding-bottom: 24px; }
@media (min-width: 768px) { .lg .mb-intro { padding-bottom: 28px; } }
@media (min-width: 1024px) { .lg .mb-intro { padding: calc(var(--hd-h) + 44px) 0 32px; } .lg .mb-intro__aside { padding-bottom: 6px; } .lg-h1 { max-width: none; } }
.lg [data-bar] { display: none; } /* legal/404 pages carry no contact bar — no marketing CTA over legal text */

.lg-body { background: var(--c-white); padding-block: 8px 80px; }
.lg-col { max-width: 42em; border-top: 1px solid var(--c-line); padding-top: 28px; }
.lg-h2 { font-family: var(--ff-d); font-size: clamp(1.25rem, 1.12rem + .4vw, 1.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; margin-top: 36px; scroll-margin-top: calc(var(--hd-h) + 16px); }
.lg-h2:first-child { margin-top: 0; }
.lg-p { font-size: 1.0625rem; line-height: 1.6; color: var(--c-ink-2); margin-top: 12px; }
.lg-p .mb-em, .lg-p strong { color: var(--c-ink); }
.lg-p a, .lg-dl a { text-decoration: underline; text-decoration-color: var(--c-line); text-underline-offset: 4px; }
.lg-p a:hover, .lg-dl a:hover { text-decoration-color: currentColor; }
.lg-id { font-variant-numeric: tabular-nums; color: var(--c-ink); font-weight: 600; }
.lg-dl { display: grid; gap: 6px; margin-top: 12px; font-size: 1.0625rem; line-height: 1.6; color: var(--c-ink-2); }
.lg-dl div { display: grid; grid-template-columns: 6.5em 1fr; column-gap: 12px; }
.lg-dl dt { color: var(--c-ink-2); }
.lg-dl dd { color: var(--c-ink); }
.lg-list { margin-top: 12px; padding-left: 1.25em; display: grid; gap: 6px; font-size: 1.0625rem; line-height: 1.6; color: var(--c-ink-2); list-style: disc; }
.lg-stand { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-line); font-size: .9375rem; color: var(--c-ink-2); }
@media (min-width: 768px) { .lg-body { padding-block: 12px 96px; } .lg-col { padding-top: 32px; } .lg-h2 { margin-top: 40px; } }
@media (min-width: 1024px) { .lg-body { padding-block: 12px 120px; } }

/* 404 */
.nf { padding-bottom: 96px; }
.nf__h1 { max-width: 12ch; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.nf__actions .btn { min-width: 0; }
@media (max-width: 599px) { .nf__actions { flex-direction: column; } .nf__actions .btn { width: 100%; } }
@media (min-width: 1024px) { .nf.mb-intro { padding: calc(var(--hd-h) + 72px) 0 160px; } .nf__h1 { max-width: none; } .nf .mb-intro__row { align-items: start; } .nf .mb-intro__aside { padding-top: 10px; } }