/* GlanzWerkstatt Frankfurt - component styles */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--silver);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--purple-light);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Primitives ------------------------------------- */

.u-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.u-measure { max-width: var(--measure); }
.u-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.u-display {
  font-family: var(--ff-display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: var(--lh-head);
  color: var(--chrome);
  margin: 0;
}

/* Mono utility label with a 2px purple tick. */
.u-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  margin: 0 0 var(--s5);
}
.u-eyebrow::before {
  content: "";
  width: 2px;
  height: 0.85em;
  background: var(--purple);
  flex: none;
}

.u-mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.u-lead { font-size: var(--fs-lead); color: var(--silver); margin: 0; }

/* ---------- Buttons ---------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 54px;
  padding: 0 var(--s6);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* White on #7300CC = 8.07:1. */
.btn--primary { background: var(--purple-deep); color: #FFFFFF; }
.btn--primary:hover { background: var(--purple); }

.btn--ghost { background: transparent; color: var(--chrome); border-color: var(--hairline-strong); }
.btn--ghost:hover { border-color: var(--chrome); }

.btn--text {
  min-height: 0; padding: 0; background: none; color: var(--chrome);
  text-underline-offset: 4px; text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
}
.btn--text:hover { text-decoration-color: var(--purple); }

.btn--sm { min-height: 42px; padding: 0 var(--s5); font-size: var(--fs-sm); }
.btn--disabled { opacity: 0.4; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* ---------- Brandmark ----------
   The header logo is addressed only through .brandmark, height-locked
   by --brandmark-h. */

.brandmark { height: var(--brandmark-h); width: auto; max-width: var(--brandmark-maxw); }

.wordmark {
  display: inline-block;
  font-family: var(--ff-display);
  font-variation-settings: "wdth" 106;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--chrome);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.wordmark__accent { color: var(--purple-light); }
.wordmark__sub {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- Navigation -------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  height: 72px;
  padding-inline: var(--gutter);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Scrolled state changes background only, never height. Animating
   header height is a guaranteed CLS failure. */
.nav--scrolled {
  background: rgba(11, 11, 14, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline);
}
.nav__links { display: flex; align-items: center; gap: var(--s7); }
.nav__link {
  font-size: var(--fs-sm);
  color: var(--silver);
  text-decoration: none;
  padding-block: var(--s2);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--chrome); border-bottom-color: var(--purple); }

.nav__burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  color: var(--chrome); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__burger-ico { display: block; width: 18px; height: 1px; background: currentColor; position: relative; }
.nav__burger-ico::before, .nav__burger-ico::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1px; background: currentColor;
}
.nav__burger-ico::before { top: -6px; }
.nav__burger-ico::after  { top: 6px; }

@media (max-width: 860px) {
  .nav { height: 64px; }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
}

/* Full-screen overlay menu. */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--void);
  display: flex; flex-direction: column;
  padding: var(--gutter);
  visibility: hidden; opacity: 0;
  /* visibility flips instantly on open (0s delay) and waits for the
     fade on close. Transitioning visibility itself means it has not
     committed when focus() runs, and focus into a hidden subtree is
     silently dropped. */
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.menu[data-open="true"] {
  visibility: visible; opacity: 1;
  transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.menu__close {
  width: 44px; height: 44px; background: none; cursor: pointer;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); color: var(--chrome);
  font-size: 20px; line-height: 1;
}
.menu__list { list-style: none; margin: var(--s8) 0 0; padding: 0; }
.menu__list li { border-top: 1px solid var(--hairline); }
.menu__list li:last-child { border-bottom: 1px solid var(--hairline); }
.menu__link {
  display: block; padding: var(--s5) 0;
  font-family: var(--ff-display); font-variation-settings: "wdth" 110;
  font-size: 1.5rem; font-weight: 600; color: var(--chrome); text-decoration: none;
}
.menu__foot { margin-top: auto; }

/* ---------- Hero -------------------------------------------- */

.hero { position: relative; min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--void) 4%, rgba(5,5,6,0.78) 40%, rgba(5,5,6,0.30) 100%);
}
.hero__content { position: relative; padding-block: var(--s9) var(--s8); width: 100%; }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-display); max-width: 15ch; }
.hero__lead { margin-top: var(--s5); max-width: 46ch; }
.hero__cta { margin-top: var(--s7); }

/* Placeholder block. */
.ph {
  position: relative;
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(135deg,
      rgba(244,244,246,0.035) 0 1px,
      transparent 1px 11px),
    var(--surface);
  border: 1px solid var(--hairline);
  display: grid;
  place-items: center;
}
.ph__label { text-align: center; padding: var(--s5); }
.ph__label b {
  display: block;
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver);
}
.ph__label span {
  display: block; margin-top: var(--s3);
  font-size: var(--fs-sm); color: var(--muted);
}
.ph--ratio { aspect-ratio: 16 / 9; height: auto; }
.ph--portrait { aspect-ratio: 4 / 5; height: auto; }

/* Placeholder behind hero type: marker in the top-right corner. */
.ph--corner { place-items: start end; }
.ph--corner .ph__label { text-align: right; padding: var(--s6); }

/* ---------- Fact strip ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.facts__item { padding: var(--s6) var(--s5); border-left: 1px solid var(--hairline); }
.facts__item:first-child { border-left: 0; padding-left: 0; }
.facts__k { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.facts__v { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--chrome); }
@media (max-width: 860px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts__item { padding: var(--s5) var(--s4); border-top: 1px solid var(--hairline); }
  .facts__item:nth-child(-n+2) { border-top: 0; }
  .facts__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}

/* ---------- Price board ---------- */

.board { border-top: 1px solid var(--hairline-strong); }

.board__head {
  display: grid;
  grid-template-columns: 1fr 140px 190px;
  gap: var(--s5);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--hairline);
}
.board__hc { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); text-align: right; }
.board__hc:first-child { text-align: left; }

.row {
  display: grid;
  grid-template-columns: 1fr 140px 190px;
  gap: var(--s5);
  align-items: start;
  padding: var(--s7) 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  transition: background var(--dur) var(--ease);
}
.row:hover { background: rgba(244,244,246,0.018); }

.row__name { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.012em; color: var(--chrome); font-family: var(--ff-display); font-variation-settings: "wdth" 108; margin: 0; }
.row__dur { margin-top: var(--s2); font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: 0.1em; color: var(--muted); }

/* Tabular figures so the two price columns align optically. */
.row__price {
  font-family: var(--ff-display);
  font-variation-settings: "wdth" 108;
  font-weight: 600;
  font-size: var(--fs-price);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--chrome);
  text-align: right;
}
.row__incl {
  grid-column: 1 / -1;
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: var(--s8);
  max-width: 64ch;
}
.row__incl li {
  font-size: var(--fs-sm);
  color: var(--silver);
  padding-left: var(--s4);
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--s2);
}
.row__incl li::before {
  content: ""; position: absolute; left: 0; top: 0.78em;
  width: 6px; height: 1px; background: var(--hairline-strong);
}

/* Emphasised row: 2px purple rule and label. */
.row--rec { background: var(--raised); padding-inline: var(--s4); margin-inline: calc(var(--s4) * -1); }
.row--rec::before { content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 2px; background: var(--purple-deep); }
.row__tag {
  display: inline-block;
  margin-bottom: var(--s3);
  font-family: var(--ff-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-light);
}

.row__ck { display: none; }

@media (max-width: 720px) {
  .board__head { display: none; }
  .row { grid-template-columns: 1fr 1fr; padding: var(--s6) 0; gap: var(--s4); }
  .row__head { grid-column: 1 / -1; }
  .row__cell { border-top: 1px solid var(--hairline-soft); padding-top: var(--s3); }
  .row__ck { display: block; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
  .row__price { text-align: left; }
  .row__incl { columns: 1; margin-top: var(--s4); }
  .row--rec { padding-inline: var(--s4); margin-inline: calc(var(--s4) * -1); }
}

/* ---------- Optional services ------------------------------- */

.opt { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--hairline); }
.opt__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s5) 0;
  border-bottom: 1px solid var(--hairline);
}
.opt__name { font-size: var(--fs-sm); color: var(--chrome); }
.opt__price { font-family: var(--ff-mono); font-size: var(--fs-sm); color: var(--silver); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Craft ------------------------------------------- */

.craft { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s10); align-items: center; }
@media (max-width: 900px) { .craft { grid-template-columns: 1fr; gap: var(--s7); } }
.craft__title { font-size: var(--fs-h2); max-width: 17ch; }
.craft__body { margin-top: var(--s5); }
.craft__body p { margin: 0 0 var(--s4); }

/* ---------- Process ----------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--hairline); }
.steps__item { padding: var(--s6) var(--s4) var(--s6) 0; border-right: 1px solid var(--hairline); }
.steps__item:last-child { border-right: 0; }
.steps__n { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--purple-light); }
.steps__t { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--chrome); }
.steps__d { margin-top: var(--s2); font-size: var(--fs-label); line-height: 1.5; color: var(--silver); }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .steps__item { border-right: 0; border-bottom: 1px solid var(--hairline); padding: var(--s5) 0; }
}

/* ---------- Hero load sequence ---------- */

@keyframes riseIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.anim > * { animation: riseIn 560ms var(--ease) both; }
.anim > *:nth-child(1) { animation-delay: 40ms; }
.anim > *:nth-child(2) { animation-delay: 100ms; }
.anim > *:nth-child(3) { animation-delay: 160ms; }
.anim > *:nth-child(4) { animation-delay: 220ms; }
.anim > *:nth-child(5) { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .anim > * { animation: none; opacity: 1; transform: none; }
}


/* ============================================================
   Sections, footer, contact, closing CTA
   ============================================================ */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: var(--s3) var(--s5);
  background: var(--purple-deep); color: #fff;
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
}
.skip:focus { left: var(--gutter); top: var(--s3); }

.site-head { position: sticky; top: 0; z-index: 50; }

/* Anchor targets land below the sticky header (72px, 64px mobile). */
html { scroll-padding-top: 72px; }
@media (max-width: 860px) { html { scroll-padding-top: 64px; } }

/* One padding owner. Nothing else sets section vertical rhythm. */
.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface); }
/* Tighter vertical padding variants. */
.section--snug { padding-block: calc(var(--section-y) * 0.82); }
.section--snug-top { padding-top: calc(var(--section-y) * 0.82); }

.section__hd { margin-bottom: var(--s7); }
.section__title { font-size: var(--fs-h2); max-width: 20ch; }
.section__intro { margin-top: var(--s5); max-width: 56ch; }
.section__hd--snug { margin-bottom: calc(var(--s7) * 0.82); }

.note-line {
  margin-top: var(--s5);
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: 0.04em; color: var(--muted);
}

/* Owner section: both columns top-aligned. */
.craft--text { align-items: start; }
.dl--compact .dl__row { grid-template-columns: 96px 1fr; }
@media (max-width: 560px) { .dl--compact .dl__row { grid-template-columns: 1fr; } }

/* ---------- Ab-prices ---------- */

.row__from {
  font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: 0; color: var(--silver);
}
.row__price { white-space: nowrap; }
/* The prefix widens the figures; the Kleinwagen column grows to match
   so "ab 110 €" stays on one line. Desktop grid only. */
@media (min-width: 721px) {
  .board__head, .row { grid-template-columns: 1fr 170px 190px; }
}

/* Ab-price note ---------- */

.pricenote {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
  max-width: 64ch;
}
.pricenote__title {
  margin: 0;
  font-family: var(--ff-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver);
}
.pricenote__body { margin: var(--s3) 0 0; font-size: var(--fs-sm); color: var(--silver); }

/* ---------- Contact / location ---------- */

.contact { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s10); align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: var(--s7); } }

.dl { margin: 0; border-top: 1px solid var(--hairline); }
.dl__row {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--s5);
  padding: var(--s5) 0; border-bottom: 1px solid var(--hairline);
}
.dl__k {
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.dl__v { margin: 0; color: var(--chrome); font-size: var(--fs-sm); }
.dl__v a { color: var(--chrome); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
.dl__v a:hover { border-bottom-color: var(--purple); }
/* Secondary action inside a fact row (Route planen): quiet text link,
   full 44px tap height. Overrides the underline-border link style. */
.dl__v .dl__action {
  min-height: 44px; margin-top: var(--s2);
  font-size: var(--fs-sm); border-bottom: 0;
  text-decoration: underline; text-decoration-color: var(--hairline-strong);
  text-underline-offset: 4px;
}
.dl__v .dl__action:hover { text-decoration-color: var(--purple); }
@media (max-width: 560px) {
  .dl__row { grid-template-columns: 1fr; gap: var(--s2); }
}

/* Opening hours: tabular so the times line up as a column. */
.hours { margin: 0; }
.hours__row {
  display: flex; justify-content: space-between; gap: var(--s5);
  padding: var(--s3) 0; border-bottom: 1px solid var(--hairline-soft);
  font-size: var(--fs-sm);
}
.hours__row:last-child { border-bottom: 0; }
.hours__d { color: var(--silver); }
.hours__t { font-family: var(--ff-mono); color: var(--chrome); font-variant-numeric: tabular-nums; }
.hours__t--closed { color: var(--muted); }

/* ---------- Closing CTA ---------- */

.endcta { background: var(--elevated); border-top: 1px solid var(--hairline); }
.endcta__inner { padding-block: var(--section-y); }
.endcta__title { font-size: var(--fs-h2); max-width: 18ch; color: #fff; }
.endcta__title::before {
  content: ""; display: block;
  width: 48px; height: 2px; margin-bottom: var(--s5);
  background: var(--purple-deep);
}
.endcta__lead { margin-top: var(--s5); max-width: 46ch; color: rgba(255,255,255,0.86); }
.endcta__row { margin-top: var(--s7); }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--hairline); padding-block: var(--s8) var(--s7); }
.footer__top { display: flex; flex-wrap: wrap; gap: var(--s7); justify-content: space-between; }
.footer__col p { margin: 0 0 var(--s2); font-size: var(--fs-sm); }
.footer__nav { display: flex; flex-wrap: wrap; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.footer__nav a { font-size: var(--fs-sm); color: var(--silver); text-decoration: none; border-bottom: 1px solid transparent; }
.footer__nav a:hover { color: var(--chrome); border-bottom-color: var(--purple); }
.footer__bottom {
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--hairline-soft);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
  font-size: var(--fs-sm); color: var(--muted);
}
.footer__bottom a { color: var(--silver); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
.footer__bottom a:hover { color: var(--chrome); }

/* Pending-link marker. */
.pending {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--muted); cursor: not-allowed;
}
.pending::after {
  content: "in Vorbereitung";
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--purple-light);
  border: 1px solid var(--hairline-strong); padding: 1px 5px;
}
.legal-banner {
  border: 1px solid var(--purple-deep); background: #140A1B;
  padding: var(--s5); margin-top: var(--s7);
}
.legal-banner p { margin: 0; font-size: var(--fs-sm); color: var(--silver); }
.legal-banner b { color: var(--purple-light); font-weight: 500; }

/* Narrow screens: CTAs full width. */
@media (max-width: 560px) {
  .hero__cta .btn,
  .endcta__row .btn { width: 100%; }
}

/* ============================================================
   Images: intrinsic ratios prevent layout shift; crops are set per
   image with object-position.
   ============================================================ */

.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Vehicle sits in the right of the frame. Anchoring right keeps the
     wheel and headlight in view on narrow portrait screens. */
  object-position: 100% 50%;
}

.media { position: relative; margin: 0; overflow: hidden; background: var(--surface); }
.media--portrait { aspect-ratio: 4 / 5; }

.media__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Rim detail crop. */
.media__img--rim { object-position: 62% 50%; }

/* Image label ("Symbolbild"). */
.imgtag {
  position: absolute; right: var(--s4); bottom: var(--s4);
  padding: 3px 7px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--silver);
  background: rgba(5, 5, 6, 0.72);
}
.imgtag--top { top: var(--s5); bottom: auto; right: var(--gutter); }

/* Wide screens: a left-weighted scrim keeps the hero text legible while
   the right side of the image stays bright. Mobile keeps the vertical
   scrim only. */
@media (min-width: 861px) {
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(5,5,6,0.84) 0%, rgba(5,5,6,0.55) 42%, rgba(5,5,6,0) 72%),
      linear-gradient(to top, var(--void) 4%, rgba(5,5,6,0.78) 40%, rgba(5,5,6,0.30) 100%);
  }
}
@media (max-width: 860px) {
  /* On portrait crops the headlight sits behind the eyebrow line; a
     slightly denser upper scrim keeps the small mono text legible. */
  .hero__scrim {
    background: linear-gradient(to top, var(--void) 4%, rgba(5,5,6,0.80) 40%, rgba(5,5,6,0.56) 100%);
  }
}

/* ---------- Brand assets: header wordmark via .brandmark, footer logo ---------- */
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brandmark { display: block; }
.footer__logo { display: block; width: 240px; max-width: 100%; height: auto; }

/* ============================================================
   LEGAL PAGES (impressum.html, datenschutz.html)
   Long-form prose in the existing type system. Element selectors are
   scoped to .legal__body and only set typography, never layout.
   ============================================================ */
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: var(--s5); }
.footer__legal a[aria-current="page"] { color: var(--chrome); border-bottom-color: var(--purple); }
/* Footer links are short and sit close together: give them 44px tap
   height on touch widths without changing the visual layout. */
@media (max-width: 860px) {
  .footer__nav, .footer__legal { gap: 0 var(--s5); }
  .footer__nav a, .footer__legal a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; }
}

.legal { padding-block: var(--section-y); }
.legal__hd { margin-bottom: var(--s8); }
.legal__title { font-size: var(--fs-h2); }
.legal__meta {
  margin: var(--s4) 0 0;
  font-family: var(--ff-mono); font-size: var(--fs-label);
  letter-spacing: 0.04em; color: var(--muted);
}
.legal__body { max-width: 72ch; }
.legal__body h2 {
  margin: var(--s8) 0 var(--s4); padding-top: var(--s6);
  border-top: 1px solid var(--hairline);
  font-family: var(--ff-display); font-variation-settings: "wdth" 108;
  font-weight: 700; font-size: var(--fs-h3); letter-spacing: -0.01em;
  line-height: var(--lh-head); color: var(--chrome);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { margin: var(--s6) 0 var(--s3); font-size: var(--fs-body); font-weight: 600; color: var(--chrome); }
.legal__body p, .legal__body li { color: var(--silver); }
.legal__body p { margin: 0 0 var(--s4); }
.legal__body ul { margin: 0 0 var(--s4); padding-left: var(--s5); }
.legal__body li { margin-bottom: var(--s2); }
.legal__body address { margin: 0 0 var(--s4); font-style: normal; color: var(--chrome); }
.legal__body a {
  color: var(--chrome); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--hairline-strong); overflow-wrap: anywhere;
}
.legal__body a:hover { text-decoration-color: var(--purple); }
.legal__body .legal-banner { margin: 0 0 var(--s7); }