/* Koch Oldtimer – Komponenten. Werte kommen aus tokens.css. */

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink) var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }

::selection { background: var(--red); color: var(--on-ink); }

/* Offene Lightbox: Seite dahinter bleibt stehen */
html:has(dialog[open]) { overflow: hidden; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Grosse Systemschrift: lange Wörter umbrechen statt abschneiden (ohne Trennstriche) */
h1, h2, h3, .prose, .service p, .hero__lead { overflow-wrap: break-word; hyphens: manual; }

.skip {
  position: absolute; left: var(--s-4); top: var(--s-2); z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink); color: var(--on-ink);
  font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

main:focus { outline: none; }

/* ---------- Kopfleiste (Roadbook-Kopf) ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  padding-inline: max(0px, (100% - var(--max)) / 2);
  display: flex; align-items: stretch;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}

.bar__brand { display: none; }

.bar__nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bar__nav::-webkit-scrollbar { display: none; }

.stages {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: 100%;
}

.stages a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  padding-inline: var(--s-2);
  font-family: var(--font-label); font-weight: 700;
  font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.stages li + li a { border-left: 1px solid var(--ink); }
.stages a:hover { box-shadow: inset 0 calc(-1 * var(--hover-mark)) 0 var(--red); }
.stages a[aria-current] { background: var(--ink); color: var(--paper); }
.stages a[aria-current]:hover { box-shadow: inset 0 calc(-1 * var(--hover-mark)) 0 var(--red); }
.stages a:focus-visible { outline-offset: -5px; }
.stages a[aria-current]:focus-visible { outline-color: var(--focus-on-dark); }

@media (min-width: 48em) {
  .bar__brand {
    display: flex; align-items: center;
    padding-inline: var(--gutter) var(--s-6);
    margin-right: auto;
  }
  .bar__brand img { width: auto; height: 1.875rem; }
  .bar__brand { transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med), transform var(--t-med) var(--ease-out); }
  .bar.is-plate-visible .bar__brand { opacity: 0; visibility: hidden; transform: translateY(6px); }
  .bar__brand:focus-visible { outline-offset: -4px; }
  .bar__nav { flex: 0 0 auto; }
  .stages li:first-child a { border-left: 1px solid var(--ink); }
  .stages a { padding-inline: clamp(1rem, 0.2rem + 1.6vw, 1.75rem); font-size: 1rem; letter-spacing: var(--track-label); }
}

/* ---------- Schild (Emailschild mit Rand und Nieten) ---------- */
.plate {
  --hole: radial-gradient(circle, var(--rivet) 0 0.22rem, var(--rivet-rim) 0.24rem 0.3rem, transparent 0.32rem);
  position: relative;
  background:
    var(--hole) left 0.35rem top 0.35rem / 1rem 1rem no-repeat,
    var(--hole) right 0.35rem top 0.35rem / 1rem 1rem no-repeat,
    var(--hole) left 0.35rem bottom 0.35rem / 1rem 1rem no-repeat,
    var(--hole) right 0.35rem bottom 0.35rem / 1rem 1rem no-repeat,
    var(--plate);
  border: var(--rim) solid var(--red);
  border-radius: var(--r-plate);
  box-shadow: var(--shadow-plate);
}

/* ---------- Start / Hero ---------- */
.hero__photo {
  position: relative;
  height: clamp(13.5rem, 34vh, 36rem);
  overflow: hidden;
  background: var(--asphalt);
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 67%;
}
/* Nacht zu Tag: das Nachtbild löst sich unten weich in Asphalt auf,
   dann folgt eine klare Kante zum Papier, über der das Schild sitzt */
.hero__photo::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 58%;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--asphalt) 0%, transparent) 0%,
    color-mix(in srgb, var(--asphalt) 22%, transparent) 26%,
    color-mix(in srgb, var(--asphalt) 52%, transparent) 52%,
    color-mix(in srgb, var(--asphalt) 82%, transparent) 78%,
    var(--asphalt) 100%);
  pointer-events: none;
}

.hero__body {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: min(var(--s-4), 4vw);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Telefon: Schild und Text über die volle Breite;
   die rote Route beginnt dort erst unter den Aktionen (in .route) */
.plate--brand, .hero__copy { grid-column: 1 / -1; }

@media (min-width: 48em) {
  .hero__photo { height: clamp(15rem, 44vh, 36rem); }
  .hero__body { column-gap: min(var(--s-6), 4vw); }
  .plate--brand, .hero__copy { grid-column: 2; }

  /* Die Route beginnt im Startfeld unter dem Schild, mit Startpunkt wie im Roadbook */
  .hero__body::before {
    content: "";
    position: absolute; top: 0; bottom: 0;
    left: calc(var(--gutter) + var(--rail) / 2 - var(--route) / 2);
    width: var(--route);
    background: var(--red);
  }
  .hero__body::after {
    content: "";
    position: absolute; top: -0.45rem;
    left: calc(var(--gutter) + var(--rail) / 2 - 0.45rem);
    width: 0.9rem; height: 0.9rem;
    border-radius: 50%;
    background: var(--red);
  }
}

/* Kurze Telefone: Fotostreifen niedriger, damit die Aktionen im ersten Bildschirm stehen */
@media (max-width: 47.99em) and (max-height: 44em) {
  .hero__photo { height: clamp(10rem, 26vh, 36rem); }
}

.plate--brand {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
  margin-top: -4.5rem;
  padding: var(--s-4) var(--s-5);
  z-index: 2;
}
.plate__car { grid-row: span 2; width: 100%; }
.plate__name { width: 100%; max-width: 26rem; align-self: end; }
.plate__place {
  align-self: start;
  font-family: var(--font-label); font-weight: 700;
  font-size: var(--step--1); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.hero__copy { padding-block: var(--s-6) 0; }

.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-4); line-height: var(--lh-tight);
  letter-spacing: -0.01em; text-transform: uppercase;
  hyphens: manual;
  text-wrap: balance;
  max-width: 16ch;
}
/* Sehr schmale Telefone (320 px): Leitsatz eine Spur kleiner, «Vertrauenssache» bleibt ganz (276 statt 325 px) */
@media (max-width: 22.49em) {
  .hero h1 { font-size: 2.125rem; max-width: none; }
}

.hero__lead {
  margin-top: var(--s-4);
  max-width: 40ch;
  font-size: var(--step-0); line-height: 1.45;
  color: var(--ink-2);
}
@media (min-width: 48em) {
  .hero__lead { font-size: var(--step-1); line-height: 1.4; }
}

.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.btn {
  display: inline-flex; align-items: center; gap: min(var(--s-3), 3.2vw);
  min-height: 3.25rem;
  padding: 0 min(var(--s-5), 6.4vw);
  border: 2px solid var(--ink);
  border-radius: var(--r-control);
  font-family: var(--font-label); font-weight: 700;
  font-size: 1.125rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.btn__icon { width: 1.25rem; height: 1.25rem; flex: none; transition: transform var(--t-med) var(--ease-out); }
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--primary:hover { background: var(--red); border-color: var(--red); }
.btn--primary:hover .btn__icon { transform: translateX(4px); }
.btn--primary:hover .btn__icon--ext { transform: translate(3px, -3px); }
.btn--secondary { background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; }
.btn--secondary:hover { background: var(--ink); color: var(--on-ink); }
.btn:active { transform: translateY(1px); }

@media (min-width: 48em) {
  .plate--brand { max-width: 34rem; margin-top: -6rem; padding: var(--s-5) var(--s-6); }
}

@media (min-width: 60em) {
  .hero__photo { height: clamp(20rem, 46vh, 34rem); }
  .hero__body {
    grid-template-columns: var(--rail) minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--s-6);
    align-items: start;
  }
  .plate--brand {
    grid-column: 2;
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: var(--s-3);
    max-width: none;
    margin-top: clamp(-11rem, -11vw, -7rem);
    padding: var(--s-6) var(--s-6) var(--s-5);
  }
  .plate__car { grid-row: auto; width: 62%; }
  .plate__name { max-width: none; }
  .hero__copy { grid-column: 3; padding-top: var(--s-5); }
  .hero__lead { max-width: 46ch; }
}

/* Mittlere Breiten (960–1199 px): schmale Textspalte, Knöpfe kompakter, damit beide nebeneinander passen */
@media (min-width: 60em) and (max-width: 74.99em) {
  .hero .btn { padding-inline: var(--s-4); }
}

/* Kurze Desktop-Bildschirme (z. B. 1366×768): Fotostreifen niedriger,
   damit beide Aktionen im ersten Bildschirm stehen */
@media (min-width: 60em) and (max-height: 56em) {
  .hero__photo { height: clamp(14rem, 30vh, 34rem); }
}

/* ---------- Route & Etappen ---------- */
.route {
  display: flow-root;
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.route__line {
  position: absolute;
  left: calc(var(--gutter) + var(--rail) / 2 - var(--route) / 2);
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--route);
  background: var(--hair);
}
.route__fill {
  position: absolute; inset: 0;
  background: var(--red);
  transform-origin: top;
  transform: scaleY(var(--progress, 1));
}

.stage {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: min(var(--s-4), 4vw);
  margin-top: var(--stage-gap);
}
/* Fortsetzung derselben Strecke: Leistungen (zu Occasionen), Events (zu den Schaustücken in der Halle) */
.stage--leistungen, .stage--events { margin-top: var(--stage-gap-near); }

.stage__mark {
  position: relative; z-index: 2;
  justify-self: center;
  display: grid; place-items: center;
  width: var(--tulip); height: var(--tulip);
  background: var(--paper);
  border: 2px solid var(--ink);
  color: var(--ink);
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out);
}
.stage__mark svg { width: 72%; height: 72%; }
.stage.is-current .stage__mark { background: var(--ink); color: var(--paper); }

.stage__body { min-width: 0; padding-top: 0.15em; }

.stage h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-3); line-height: var(--lh-head);
  letter-spacing: -0.005em; text-transform: uppercase;
  text-wrap: balance;
  margin-bottom: var(--s-4);
}

.stage__sub {
  text-wrap: balance;
  font-weight: 700; font-size: var(--step-1); line-height: 1.3;
  margin-bottom: var(--s-3);
}

.prose { max-width: var(--measure); }
.prose + .prose { margin-top: var(--s-4); }

.legacy-anchor { position: absolute; scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

@media (min-width: 48em) {
  .stage { column-gap: min(var(--s-6), 4vw); }
}

/* Oldtimer zum Anschauen: Schauobjekte, ruhiger Text */
.showcase__text .prose { color: var(--ink-2); }

/* Handel */
.offer {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-5);
  max-width: min(46rem, 100%);
  padding: var(--s-5);
  background: var(--ink); color: var(--on-ink);
  border: 2px solid var(--ink);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.offer__label {
  font-family: var(--font-display); font-weight: 800;
  font-size: min(var(--step-2), 8vw); line-height: 1; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.offer__meta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--on-ink-2);
}
.offer__meta svg { width: 1.25rem; height: 1.25rem; transition: transform var(--t-med) var(--ease-out); }
.offer:hover { background: var(--red); border-color: var(--red); }
.offer:hover .offer__meta svg { transform: translate(3px, -3px); }

@media (min-width: 40em) {
  .offer { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: var(--s-6); }
}

/* Events */
.events__intro { display: grid; gap: var(--s-6); align-items: start; }

.plate--event {
  justify-self: start;
  display: grid; gap: var(--s-2);
  width: min(100%, 19rem);
  padding: var(--s-5) var(--s-5) var(--s-4);
  text-align: center;
}
.plate__rule {
  text-wrap: balance;
  font-family: var(--font-label); font-weight: 700;
  font-size: var(--step-0); line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase;
}
.plate__next { display: grid; justify-items: center; gap: var(--s-1); }
.plate__ask { font-weight: 700; font-size: var(--step-0); line-height: 1.3; text-wrap: balance; }
.plate__ask a { white-space: nowrap; font-variant-numeric: tabular-nums; text-underline-offset: 0.2em; }
.plate__ask a:hover { text-decoration-color: var(--red); }
.plate__next[hidden] { display: none; }
.plate__num {
  font-family: var(--font-numerals); font-weight: 900;
  font-size: var(--step-plate); line-height: 0.82;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.plate__when { font-weight: 700; font-size: var(--step-0); line-height: 1.3; text-wrap: balance; }
.plate__extra {
  margin-top: var(--s-2); padding-top: var(--s-2);
  border-top: 2px solid var(--ink);
  font-family: var(--font-label); font-weight: 600;
  font-size: var(--step--1); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-2);
}

@media (min-width: 48em) {
  .events__intro { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--s-6); }
  .plate--event { transform: rotate(-2deg); justify-self: end; }
}

.strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-7);
}
.strip__item {
  display: block; width: 100%;
  padding: 0; border: 0; background: var(--asphalt);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: zoom-in;
}
.strip__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out);
}
.strip__item:hover img { transform: scale(1.04); }
.strip__item:focus-visible { outline-offset: 2px; }

.strip li:first-child { grid-column: 1 / -1; }
@media (min-width: 40em) {
  .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .strip li:first-child { grid-column: span 2; grid-row: span 2; }
  .strip li:first-child .strip__item { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 60em) {
  .events__intro { gap: var(--s-7); }
  .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Schaustücke: Autos im Querformat 3:2, fünf Bilder = Leitbild + 2×2 */
.strip--show .strip__item { aspect-ratio: 3 / 2; }
@media (min-width: 60em) {
  .strip--show { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Ziel (Kontakt) ---------- */
.stage--ziel {
  --focus: var(--focus-on-dark);
  margin-top: var(--stage-gap);
  padding-block: var(--s-8) var(--stage-gap);
  background: var(--asphalt);
  color: var(--on-asphalt);
  box-shadow: 0 0 0 100vmax var(--asphalt);
  clip-path: inset(0 -100vmax);
}
.stage--ziel .stage__mark { background: var(--asphalt); border-color: var(--on-asphalt); color: var(--on-asphalt); }
.stage--ziel.is-current .stage__mark { background: var(--on-asphalt); color: var(--asphalt); }

.ziel__grid { display: grid; gap: var(--s-6); }
@media (min-width: 40em) { .ziel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Breit: Adresse und Telefon auf dem Raster des Starts */
@media (min-width: 60em) {
  .ziel__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-6); }
}
/* Google-Bewertung: Emailschild am Ziel; das ganze Schild ist klickbar */
.review {
  --focus: var(--red);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "g stars" "text text" "link link";
  align-items: center;
  gap: var(--s-4);
  max-width: 46rem;
  margin-top: var(--s-7);
  padding: var(--s-4);
  color: var(--ink);
}
.review__g { grid-area: g; width: 2.5rem; height: 2.5rem; }
.review__stars { grid-area: stars; display: flex; gap: 0.2rem; }
.review__stars svg {
  width: 1.375rem; height: 1.375rem;
  fill: var(--google-star); stroke: var(--google-star-edge); stroke-width: 0.75;
}
.review__text { grid-area: text; }
.stage--ziel .review__title {
  margin: 0 0 var(--s-1);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-1); line-height: 1.1; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ink);
}
.review__text p { color: var(--ink-2); }
.review__link {
  grid-area: link;
  justify-self: stretch; justify-content: space-between;
  font-size: 1rem; letter-spacing: 0.03em; gap: var(--s-2);
  padding-inline: var(--s-4);
}
.review__link::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 48em) {
  .review {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "g stars link" "g text link";
    column-gap: var(--s-5); row-gap: var(--s-2);
    padding: var(--s-5) var(--s-6);
  }
  .review__g { width: 3.5rem; height: 3.5rem; }
  .review__stars { align-self: end; }
  .review__text { align-self: start; }
  .review__link { justify-self: end; font-size: 1.125rem; letter-spacing: 0.06em; gap: var(--s-3); padding-inline: var(--s-5); }
}

/* Ohne JavaScript: Routenlinie endet am Kontaktblock statt durch ihn hindurch */
.no-js .stage--ziel { position: relative; z-index: 3; }

.stage--ziel h3, .foot h2 {
  margin-bottom: var(--s-2);
  font-family: var(--font-label); font-weight: 700;
  font-size: var(--step-0); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--on-asphalt-2);
}
.ziel__block address { font-size: var(--step-1); line-height: 1.4; margin-bottom: var(--s-3); }
.ziel__list { display: grid; gap: var(--s-2); }

.ziel__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em;
  text-decoration-color: var(--on-asphalt-2);
  transition: text-decoration-color var(--t-fast) var(--ease-out);
}
.ziel__link svg { width: 1.25rem; height: 1.25rem; flex: none; }
.ziel__link:hover { text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.ziel__link--big {
  font-family: var(--font-display); font-weight: 800;
  font-size: min(var(--step-2), 8.5vw); letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.ziel__link--big svg { width: 1.5rem; height: 1.5rem; }
.ziel__link--big:hover { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--red); }

/* ---------- Fuss ---------- */
.foot {
  --focus: var(--focus-on-dark);
  position: relative;
  box-shadow: 0 -2px 0 var(--asphalt); /* deckt die Subpixel-Naht zum Kontaktblock */
  background: var(--asphalt);
  color: var(--on-asphalt);
}
.foot__inner {
  display: grid; gap: var(--s-6);
  max-width: var(--max); margin-inline: auto;
  padding: var(--s-7) var(--gutter);
  border-top: 1px solid var(--asphalt-2);
}
.foot__logo { width: 13rem; }
.foot__block ul { display: grid; gap: 0; }
.foot__block a {
  font-family: var(--font-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--on-asphalt-2); text-decoration: none;
}
.foot__block a:hover { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.25em; }

.foot__block .share { display: flex; gap: var(--s-2); }

/* Rechtliches in der Fusszeile */
.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-6);
  padding: var(--s-2) var(--gutter) var(--s-3);
  border-top: 1px solid var(--asphalt-2);
}
.foot__legal a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: var(--font-label); font-weight: 600;
  font-size: var(--step--1); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--on-asphalt-2); text-decoration: none;
}
.foot__legal a:hover, .foot__legal a[aria-current] {
  color: var(--on-ink);
  text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.3em;
}
.share a {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1.5px solid var(--on-asphalt-2);
  color: var(--on-asphalt);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.share a:hover { background: var(--on-asphalt); color: var(--asphalt); text-decoration: none; }
.share svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 48em) {
  .foot__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  --focus: var(--focus-on-dark);
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  padding: var(--s-7) var(--s-4) var(--s-9);
  border: 0;
  background: transparent;
  color: var(--on-asphalt);
}
.lightbox[open] { display: grid; place-items: center; animation: lb-in var(--t-med) var(--ease-out); }
.lightbox::backdrop { background: var(--scrim); }

.lightbox__figure { display: grid; gap: var(--s-3); justify-items: center; max-width: min(100%, 56rem); }
.lightbox__figure img {
  transition: opacity 220ms var(--ease-out);
  width: auto; max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border: 0.5rem solid var(--plate);
}
.lightbox__figure img.is-swapping { opacity: 0; transition-duration: 90ms; }
.lightbox__figure figcaption { max-width: 60ch; text-align: center; font-size: var(--step-0); }

.lightbox__count {
  position: fixed; top: var(--s-4); left: var(--s-4);
  font-family: var(--font-label); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.lightbox__btn {
  position: fixed;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  padding: 0; border: 0;
  background: var(--plate); color: var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.lightbox__btn svg { width: 1.5rem; height: 1.5rem; }
.lightbox__btn:hover { background: var(--red); color: var(--on-ink); }
.lightbox__btn--close { top: var(--s-3); right: var(--s-3); }
.lightbox__btn--prev { bottom: var(--s-5); left: calc(50% - 3.5rem); }
.lightbox__btn--next { bottom: var(--s-5); right: calc(50% - 3.5rem); }

@media (min-width: 48em) {
  .lightbox { padding: var(--s-7) var(--s-9); }
  .lightbox__btn--prev { bottom: auto; top: calc(50% - 1.5rem); left: var(--s-5); }
  .lightbox__btn--next { bottom: auto; top: calc(50% - 1.5rem); right: var(--s-5); }
}

@keyframes lb-in { from { opacity: 0; transform: scale(0.985); } }

/* ---------- Bewegung: Die Route zeichnet sich selbst ----------
   Start: die rote Linie läuft aus dem Startpunkt unter dem Schild in die erste Etappe.
   Ankunft: Erreicht man eine Etappe, wird ihre Tulpe nachgezeichnet – Strecke, dann Pfeil. */
@property --trace { syntax: "<number>"; inherits: true; initial-value: 0; }
/* Die Klassen wirken auf die Kopien der Tulpen (use); --trace erbt vom jeweiligen svg */
.trace { stroke-dasharray: 100; stroke-dashoffset: var(--trace, 0); }
.tip { opacity: clamp(0, calc((40 - var(--trace, 0)) / 40), 1); }
.stage.is-arriving .stage__mark svg { animation: tulip-trace 680ms var(--ease-out); }
@keyframes tulip-trace { from { --trace: 100; } to { --trace: 0; } }

@media (min-width: 48em) {
  .hero__body::before { transform-origin: top; animation: route-draw 720ms var(--ease-out) both; }
  .hero__body::after { animation: route-dot 360ms var(--ease-out) both; }
}
@keyframes route-draw { from { transform: scaleY(0); } }
@keyframes route-dot { from { transform: scale(0); } }
.route__line.is-starting .route__fill { transition: transform 640ms var(--ease-out) 520ms; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .route__fill { transform: none; }
  .strip__item:hover img { transform: none; }
}

/* ---------- Leistungen (Ergänzung) ---------- */
/* Gleichwertige Leistungen als Roadbook-Tabelle: jede Zeile mit Linie oben, keine Karten */
.services {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-6);
}
@media (min-width: 40em) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-7); } }

.service {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
}
.service h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-1); line-height: 1.1;
  letter-spacing: 0.01em; text-transform: uppercase;
}
.service p { max-width: 40ch; color: var(--ink-2); }

.service__link, .route-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  align-self: flex-start;
  margin-top: auto; padding-top: var(--s-2);
  min-height: 2.75rem;
  font-family: var(--font-label); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em;
  text-decoration-color: var(--hair);
  transition: text-decoration-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.service__link svg, .route-link svg { width: 1.1rem; height: 1.1rem; flex: none; transition: transform var(--t-med) var(--ease-out); }
.service__link:hover, .route-link:hover { text-decoration-color: var(--red); }
.service__link:hover svg { transform: translate(3px, -3px); }
.route-link { margin-top: var(--s-3); }

/* Handel: Fahrzeug-Link neben dem Blick in die Halle */
.handel, .showcase { display: grid; gap: var(--s-6); }
.handel__text, .showcase__text, .ziel__grid > * { min-width: 0; }
.handel__text .offer { flex-direction: column; align-items: flex-start; }
@media (max-width: 29.99em) { .offer { padding: var(--s-4); } }
.handel__photo img, .showcase__photo img { width: 100%; aspect-ratio: 1600 / 1024; object-fit: cover; background: var(--hair); }
.handel__photo figcaption, .showcase__photo figcaption {
  margin-top: var(--s-2);
  font-family: var(--font-label); font-weight: 600;
  font-size: var(--step--1); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-2);
}
@media (min-width: 60em) {
  .handel, .showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-6); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .service__link:hover svg { transform: none; }
}

/* Navigation mit sechs Einträgen: unter 960 px richten sich die Felder nach dem Inhalt,
   auf schmalen Telefonen wird die Schrift etwas kompakter */
@media (max-width: 59.99em) {
  .stages { grid-auto-columns: auto; }
}
@media (max-width: 29.99em) {
  .stages a { padding-inline: 0.3rem; font-size: 0.875rem; letter-spacing: 0.02em; }
}
@media (max-width: 22.49em) {
  .stages a { padding-inline: 0.2rem; font-size: 0.75rem; letter-spacing: 0.01em; }
}

/* ---------- Unterseiten: Impressum, Datenschutz (Lesemodus) ---------- */
.bar--sub .bar__brand {
  display: flex; align-items: center;
  margin-right: auto;
  padding-inline: var(--gutter) var(--s-5);
}
.bar--sub .bar__brand img { width: auto; height: 1.75rem; }
.bar--sub .bar__brand:focus-visible { outline-offset: -4px; }
.bar__back {
  display: flex; align-items: center; gap: var(--s-2);
  padding-inline: var(--gutter);
  border-left: 1px solid var(--ink);
  font-family: var(--font-label); font-weight: 700;
  font-size: 0.9375rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
}
.bar__back svg { width: 1.125rem; height: 1.125rem; flex: none; }
.bar__back:hover { box-shadow: inset 0 calc(-1 * var(--hover-mark)) 0 var(--red); }
.bar__back:focus-visible { outline-offset: -5px; }

.legal {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-8) var(--gutter) var(--stage-gap);
}
/* Lesespalte 40rem (ca. 62 Zeichen Fliesstext), Linien und Text gleich breit; nur der Seitentitel darf breiter laufen, damit lange Wörter ganz bleiben */
.legal__body > :not(h1) { max-width: 40rem; }
.legal h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: min(var(--step-4), 7.5vw); line-height: var(--lh-tight);
  letter-spacing: -0.01em; text-transform: uppercase;
}
.legal__stand { margin-top: var(--s-3); color: var(--ink-2); font-size: var(--step--1); }
.legal h2 {
  margin: var(--s-7) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-1); line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase;
}
.legal p, .legal address, .legal ul { margin-bottom: var(--s-4); }
.legal ul { list-style: disc; padding-left: 1.25em; }
.legal li + li { margin-top: var(--s-1); }
.legal a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.legal a:hover { text-decoration-color: var(--red); text-decoration-thickness: 2px; }