/* Mainmeister Autoservice · Konzeptseite von ramoxmedia
   Maßsystem: Der Desktop-Entwurf ist 2368 px breit. --u ist ein Entwurfspixel,
   skaliert mit der Seitenbreite und endet bei 2368 px (darüber bleibt alles 1:1).
   Auf breiten, niedrigen Fenstern (Ultra-Wide) richtet es sich nach der Höhe: Konzeptleiste, Kopfzeile und Halle
   (1560 Entwurfspixel) passen dann ins Fenster, höchstens bis auf halbe Größe. Die Halle geht seitlich mit Flügeln weiter.
   Positionen im ersten Bildschirm stammen aus der Vermessung des freigegebenen Entwurfs
   (.impeccable/build/spec.json), Textoberkanten sind Versal-Oberkanten (text-box-trim). */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/barlow-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Stencil"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/big-shoulders-stencil-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Stencil"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fonts/big-shoulders-stencil-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fonts/barlow-condensed-latin-900-normal.woff2") format("woff2"); }

:root {
  --graphit: #2a2d32;
  --orange: #ff6a13;
  --orange-hell: #ff8a47;   /* Hover der orangen Flächen: dunkle Schrift bleibt über 4,5:1 */
  --weiss: #ffffff;
  --leiste: #eef0f1;
  --schild: #cccfd2;
  --boden: #e4e6e8;
  --grau-text: #59616a;
  --ziffer: #9ea5ad;
  --trenner: #c9cdd2;
  --schmal: "Barlow Condensed", "Arial Narrow", sans-serif;
  --breit: "Barlow", system-ui, sans-serif;
  --schablone: "Big Shoulders Stencil", "Barlow Condensed", sans-serif;
  --u: calc(min(100cqw, 2368px, max(100vh * 2368 / 1560, 1184px)) / 2368);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--weiss); color: var(--graphit); font-family: var(--schmal); }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2 { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--orange); color: var(--graphit); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--fa { fill: currentColor; stroke: none; }

.seite { container-type: inline-size; overflow-x: clip; }
.rahmen { position: relative; width: calc(2368 * var(--u)); height: 100%; margin-inline: auto; }

/* Einzeilige Texte sitzen mit ihrer Versal-Oberkante auf der gemessenen Position */
.konzept-text, .konzept-link span, .nav .nr, .nav-text, .kopf-telefon span, .titel, .claim, .lead,
.weiter span, .boden-nr, .station-nr, .station-text { text-box: trim-both cap alphabetic; white-space: nowrap; }

/* ---------- Konzept-Leiste ---------- */
.konzept { height: calc(72 * var(--u)); background: var(--graphit); color: var(--weiss); font-family: var(--schmal); }
.konzept-text { position: absolute; left: calc(540 * var(--u)); top: calc(27 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 400; letter-spacing: .01em; }
.konzept-link { position: absolute; left: calc(1297 * var(--u)); top: calc(24 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); font-family: var(--breit); font-size: calc(26.5 * var(--u)); font-weight: 700; letter-spacing: .035em; }
.konzept-link .icon { width: calc(24 * var(--u)); height: calc(24 * var(--u)); stroke-width: 2.5; }
.konzept-link:hover { color: var(--orange); }

/* ---------- Kopfzeile ---------- */
.kopf { height: calc(176 * var(--u)); background: var(--weiss); font-family: var(--schmal); }
.logo { position: absolute; left: calc(59 * var(--u)); top: calc(38 * var(--u)); width: calc(561 * var(--u)); }
.nav li { position: absolute; top: calc(61 * var(--u)); }
.nav li:nth-child(1) { left: calc(941 * var(--u)); }
.nav li:nth-child(2) { left: calc(1207 * var(--u)); }
.nav li:nth-child(3) { left: calc(1452 * var(--u)); }
.nav li:nth-child(4) { left: calc(1694 * var(--u)); }
.nav li + li::before, .kopf-telefon::before {
  content: ""; position: absolute; top: calc(-2 * var(--u)); left: calc(-64 * var(--u));
  width: calc(2 * var(--u)); height: calc(80 * var(--u)); background: var(--trenner);
}
.nav a { display: flex; flex-direction: column; gap: calc(21 * var(--u)); }
.nav .nr { font-size: calc(23 * var(--u)); font-weight: 600; }
.nav-text { font-size: calc(31 * var(--u)); font-weight: 600; }
.nav a:hover .nav-text { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: max(2px, calc(4 * var(--u))); text-underline-offset: .2em; }
.kopf-telefon { position: absolute; left: calc(2063 * var(--u)); top: calc(76 * var(--u)); display: flex; align-items: center; gap: calc(20 * var(--u)); font-size: calc(35 * var(--u)); font-weight: 700; }
.kopf-telefon::before { left: calc(-68 * var(--u)); top: calc(-17 * var(--u)); }
.kopf-telefon .icon { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }

/* ---------- Halle (erster Bildschirm) ---------- */
.halle { position: relative; height: calc(1296 * var(--u)); background: var(--boden); overflow: hidden; font-family: var(--schmal); }
.halle-bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.auto { position: absolute; left: calc(596 * var(--u)); top: calc(340 * var(--u)); width: calc(1588 * var(--u)); height: calc(628 * var(--u)); max-width: none; object-fit: cover; }
.scan { position: absolute; left: calc((var(--scan-ist, 1265) - 4) * var(--u)); top: calc(369 * var(--u)); width: calc(8 * var(--u)); height: calc(512 * var(--u)); background: var(--orange); opacity: var(--scan-sicht, 1); }

/* Fetteste Stufe, leicht gestaucht: trifft Strichstärke und Zeilenlänge des Entwurfs (nur die dunkle Zeile, der orange Claim bleibt lesbarer in 700) */
.titel { position: absolute; left: calc(119 * var(--u)); top: calc(143 * var(--u)); font-size: calc(93 * var(--u)); font-weight: 900; transform: scaleX(.97); transform-origin: 0 0; }
.claim { position: absolute; left: calc(120 * var(--u)); top: calc(231 * var(--u)); font-size: calc(91 * var(--u)); font-weight: 700; letter-spacing: -.006em; color: var(--orange); }
.lead { position: absolute; left: calc(124 * var(--u)); top: calc(330 * var(--u)); font-size: calc(30.5 * var(--u)); font-weight: 600; letter-spacing: .02em; }

/* Bauteil-Beschriftungen: Chip plus Verbindungslinie (Länge und Winkel aus dem Entwurf) */
.bauteil {
  position: absolute; display: flex; align-items: center; justify-content: center;
  background: #323b45; color: var(--weiss); font-family: var(--breit); font-size: calc(21 * var(--u)); font-weight: 600;
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, .16); border-radius: calc(4 * var(--u));
}
.bauteil::after {
  content: ""; position: absolute; left: calc(var(--lx) * var(--u)); top: calc(var(--ly) * var(--u));
  width: calc(var(--len) * var(--u)); height: calc(2 * var(--u)); background: var(--graphit);
  transform-origin: 0 50%; transform: rotate(var(--ang)); pointer-events: none;
}
.bauteil:hover, .bauteil:focus-visible { background: var(--orange); color: var(--graphit); }
.bauteil--motor    { left: calc(650 * var(--u));  top: calc(423 * var(--u)); width: calc(78 * var(--u));  height: calc(32 * var(--u)); --lx: 68; --ly: 31; --len: 176; --ang: 50.5deg; }
.bauteil--klima    { left: calc(863 * var(--u));  top: calc(423 * var(--u)); width: calc(128 * var(--u)); height: calc(33 * var(--u)); --lx: 87; --ly: 32; --len: 138; --ang: 67.3deg; }
.bauteil--bremsen  { left: calc(471 * var(--u));  top: calc(686 * var(--u)); width: calc(100 * var(--u)); height: calc(32 * var(--u)); --lx: 99; --ly: 18; --len: 132; --ang: 25deg; }
.bauteil--reifen   { left: calc(632 * var(--u));  top: calc(900 * var(--u)); width: calc(84 * var(--u));  height: calc(33 * var(--u)); --lx: 82; --ly: 0; --len: 88; --ang: -45deg; }
.bauteil--batterie { left: calc(1109 * var(--u)); top: calc(883 * var(--u)); width: calc(96 * var(--u));  height: calc(33 * var(--u)); --lx: 41; --ly: 0; --len: 98; --ang: -98.8deg; }

/* Seitenflügel: Ist das Fenster breiter als die Komposition, geht die Halle links und rechts weiter
   (gespiegelte Randstreifen, werkzeug/bild_halle_fluegel.py). Die Innenkante liegt 1 px unter dem Hallenbild. */
@media (min-width: 75em) and (min-aspect-ratio: 2368/1560), (min-width: 2369px) {
  .halle::before, .halle::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: calc(1900 * var(--u) + 1px);
    background-repeat: no-repeat; background-size: calc(1900 * var(--u)) 100%;
  }
  .halle::before {
    right: calc(50% + 1184 * var(--u) - 1px); background-position: right top;
    background-image: image-set(url("../assets/bilder/halle-fluegel-links.avif") type("image/avif"), url("../assets/bilder/halle-fluegel-links.webp") type("image/webp"));
  }
  .halle::after {
    left: calc(50% + 1184 * var(--u) - 1px); background-position: left top;
    background-image: image-set(url("../assets/bilder/halle-fluegel-rechts.avif") type("image/avif"), url("../assets/bilder/halle-fluegel-rechts.webp") type("image/webp"));
  }
  .halle .rahmen { z-index: 1; }
}

.bodenlinie {
  position: absolute; top: calc(1036 * var(--u)); height: calc(12 * var(--u));
  left: calc((100% - 100cqw) / 2); width: 100cqw; background: var(--orange);
}
.boden-nr {
  position: absolute; left: calc(49 * var(--u)); top: calc(1086 * var(--u));
  font-family: var(--schablone); font-weight: 900; font-size: calc(105 * var(--u));
  color: var(--ziffer); transform: skewX(-24deg) scaleX(2.98); transform-origin: 0 100%;
}
.weiter {
  position: absolute; left: calc(61 * var(--u)); top: calc(1189 * var(--u));
  display: flex; align-items: center; gap: calc(12 * var(--u));
  font-family: var(--schablone); font-size: calc(33 * var(--u)); font-weight: 800; color: #6b737d;
}
/* Schablonenschrift kursiv und breiter gezogen wie im Entwurf; der Außenabstand gleicht die Streckung aus */
.weiter span { display: inline-block; margin-right: calc(63 * var(--u)); transform: skewX(-12deg) scaleX(1.34); transform-origin: 0 100%; }
.weiter .icon { width: calc(34 * var(--u)); height: calc(34 * var(--u)); stroke-width: 2.5; }
.weiter:hover { color: var(--graphit); }

.knopf {
  position: absolute; top: calc(1099 * var(--u)); height: calc(83 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  font-size: calc(32 * var(--u)); font-weight: 700; border-radius: calc(3 * var(--u));
  transition: background-color .15s ease-out, color .15s ease-out;
}
.knopf--primaer { left: calc(481 * var(--u)); width: calc(375 * var(--u)); background: var(--orange); color: var(--graphit); }
.knopf--primaer:hover { background: var(--orange-hell); }
.knopf--primaer:active { background: var(--graphit); color: var(--orange); }
.knopf--rahmen { left: calc(912 * var(--u)); width: calc(309 * var(--u)); justify-content: flex-start; padding-left: calc(38 * var(--u)); gap: calc(17 * var(--u)); border: max(1px, calc(1.5 * var(--u))) solid var(--graphit); border-radius: calc(6 * var(--u)); color: var(--graphit); }
.knopf--rahmen .icon { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.knopf--rahmen:hover { background: var(--graphit); color: var(--weiss); }
.knopf--rahmen:active { background: var(--orange); color: var(--graphit); border-color: var(--orange); }
.bewertung {
  position: absolute; left: calc(1276 * var(--u)); top: calc(1107 * var(--u)); width: calc(420 * var(--u)); height: calc(68 * var(--u));
  display: flex; align-items: center; gap: calc(10 * var(--u)); padding-left: calc(28 * var(--u));
  background: var(--schild); font-size: calc(26 * var(--u)); font-weight: 600; border-radius: calc(3 * var(--u));
}
.bewertung .icon { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
.bewertung:hover { background: var(--graphit); color: var(--weiss); }

/* ---------- Vertrauensleiste ---------- */
.vertrauen { height: calc(232 * var(--u)); background: var(--leiste); font-family: var(--schmal); }
.vertrauen-liste li {
  position: absolute; top: calc(81 * var(--u)); height: calc(50 * var(--u));
  display: flex; align-items: center; gap: calc(40 * var(--u));
  font-size: calc(30 * var(--u)); font-weight: 600; line-height: 1.15;
}
.vertrauen-liste .icon { width: calc(48 * var(--u)); height: calc(48 * var(--u)); overflow: visible; transform-origin: 0 50%; }
/* Feinabgleich auf die Icon-Größen im Entwurf, ohne den Text zu verschieben */
.vertrauen-1 .icon { transform: scale(1.05); }
.vertrauen-2 .icon { transform: scale(1.08); }
.vertrauen-3 .icon { transform: translateX(calc(-6 * var(--u))); }
.vertrauen-4 .icon { transform: scale(1.1); }
.vertrauen-1 { left: calc(73 * var(--u)); }
.vertrauen-2 { left: calc(512 * var(--u)); }
.vertrauen-3 { left: calc(1022 * var(--u)); }
.vertrauen-4 { left: calc(1472 * var(--u)); }
.vertrauen-liste li + li::before, .naechste-station::before {
  content: ""; position: absolute; top: calc(-3 * var(--u)); height: calc(64 * var(--u));
  width: calc(2 * var(--u)); background: var(--trenner);
}
.vertrauen-2::before { left: calc(-68 * var(--u)); }
.vertrauen-3::before { left: calc(-66 * var(--u)); }
.vertrauen-4::before { left: calc(-74 * var(--u)); }
.naechste-station { position: absolute; left: calc(1897 * var(--u)); top: calc(63 * var(--u)); width: calc(410 * var(--u)); height: calc(78 * var(--u)); }
.naechste-station::before { left: calc(-71 * var(--u)); top: calc(-15 * var(--u)); height: calc(129 * var(--u)); }
.station-nr { display: block; font-family: var(--schablone); font-weight: 900; font-size: calc(95 * var(--u)); margin-left: calc(-4 * var(--u)); color: var(--ziffer); transform: scaleX(1.13); transform-origin: 0 50%; }
.station-text { position: absolute; left: calc(145 * var(--u)); top: calc(27 * var(--u)); font-size: calc(38 * var(--u)); font-weight: 700; }
.naechste-station:hover .station-text { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: calc(4 * var(--u)); text-underline-offset: .2em; }

/* ---------- Stationen unter dem ersten Bildschirm ----------
   Gleiches Maßsystem (--u), Schriftgrößen mit Untergrenze für schmale Bildschirme.
   Die orange Bodenlinie läuft links senkrecht durch alle Stationen und mündet in der Kartenskizze. */
:root {
  --wand: #eceef0;
  --loch: #c4c9ce;
  --rand: calc(120 * var(--u));          /* Inhaltskante wie die Wandschrift oben */
  --spur: calc(36 * var(--u));           /* Lage der Bodenlinie */
  --linie: calc(12 * var(--u));          /* Stärke der Bodenlinie wie in der Halle */
  --t-text: max(1rem, calc(28 * var(--u)));
  --t-klein: max(.875rem, calc(23 * var(--u)));
  --t-h3: max(1.25rem, calc(44 * var(--u)));
  --t-h2: max(1.875rem, calc(76 * var(--u)));
}
h3, figure, blockquote, dl, dd, address { margin: 0; }
ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

.buehne { position: relative; width: calc(2368 * var(--u)); margin-inline: auto; padding-inline: var(--rand); }
.station {
  position: relative; padding-block: calc(150 * var(--u)) calc(170 * var(--u));
  font-family: var(--breit); font-size: var(--t-text); font-weight: 500; line-height: 1.5;
}
.station::before, .marken::before {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1;
  left: calc((100% - 2368 * var(--u)) / 2 + var(--spur)); width: var(--linie); background: var(--orange);
}

/* Stationskopf: Schablonen-Ziffer, Überschrift, Abzweig der Bodenlinie */
.station-kopf { position: relative; display: flex; align-items: center; gap: calc(36 * var(--u)); margin-bottom: calc(96 * var(--u)); }
.station-kopf::before {
  content: ""; position: absolute; top: 50%; margin-top: calc(var(--linie) / -2);
  left: calc(var(--spur) - var(--rand)); width: calc(var(--rand) - var(--spur) - 22 * var(--u)); height: var(--linie);
  background: var(--orange);
}
.station-ziffer {
  flex: none; margin-right: calc(18 * var(--u));
  font-family: var(--schablone); font-weight: 900; font-size: max(3.25rem, calc(150 * var(--u))); line-height: .8;
  color: var(--ziffer); transform: scaleX(1.13); transform-origin: 0 50%;
}
.station h2 { font-family: var(--schmal); font-size: var(--t-h2); font-weight: 700; line-height: 1.02; letter-spacing: -.005em; text-wrap: balance; }
.station-hinweis {
  margin-left: auto; align-self: flex-end;
  font-family: var(--schmal); font-size: var(--t-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau-text);
}

/* Tasten im Fluss, gleiche Sprache wie die Knöpfe im ersten Bildschirm */
.tasten { display: flex; flex-wrap: wrap; gap: calc(30 * var(--u)); }
.taste {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  min-height: max(48px, calc(83 * var(--u))); padding-inline: calc(48 * var(--u));
  font-family: var(--schmal); font-size: max(1.125rem, calc(32 * var(--u))); font-weight: 700; line-height: 1.1;
  border-radius: calc(3 * var(--u)); transition: background-color .15s ease-out, color .15s ease-out;
}
.taste--primaer { background: var(--orange); color: var(--graphit); }
.taste--primaer:hover { background: var(--orange-hell); }
.taste--primaer:active { background: var(--graphit); color: var(--orange); }
.taste--rahmen { border: max(1px, calc(1.5 * var(--u))) solid var(--graphit); border-radius: calc(6 * var(--u)); color: var(--graphit); }
.taste--rahmen:hover { background: var(--graphit); color: var(--weiss); }
.taste--rahmen:active { background: var(--orange); color: var(--graphit); border-color: var(--orange); }

/* 02 Leistungen: Stellplätze als Bodenmarkierung, nach unten zur Fahrspur offen */
.station--leistungen { background: var(--boden); }
.stellplaetze { display: grid; grid-template-columns: repeat(5, 1fr); border-top: calc(8 * var(--u)) solid var(--graphit); }
.stellplatz {
  position: relative; display: flex; flex-direction: column; gap: calc(24 * var(--u));
  padding: calc(56 * var(--u)) calc(44 * var(--u)) calc(64 * var(--u));
  border-left: calc(8 * var(--u)) solid var(--graphit);
}
.stellplatz:last-child { border-right: calc(8 * var(--u)) solid var(--graphit); }
.scanfenster { position: relative; display: block; aspect-ratio: 3 / 2; margin: calc(14 * var(--u)) calc(14 * var(--u)) calc(30 * var(--u)); color: var(--graphit); }
.scanfenster img { width: 100%; height: 100%; object-fit: cover; }
.scanfenster::after {
  --l: calc(42 * var(--u)); --t: calc(5 * var(--u));
  content: ""; position: absolute; inset: calc(-14 * var(--u)); pointer-events: none;
  background:
    linear-gradient(currentColor 0 0) left top / var(--l) var(--t), linear-gradient(currentColor 0 0) left top / var(--t) var(--l),
    linear-gradient(currentColor 0 0) right top / var(--l) var(--t), linear-gradient(currentColor 0 0) right top / var(--t) var(--l),
    linear-gradient(currentColor 0 0) left bottom / var(--l) var(--t), linear-gradient(currentColor 0 0) left bottom / var(--t) var(--l),
    linear-gradient(currentColor 0 0) right bottom / var(--l) var(--t), linear-gradient(currentColor 0 0) right bottom / var(--t) var(--l);
  background-repeat: no-repeat;
}
.stellplatz h3 { font-family: var(--schmal); font-size: var(--t-h3); font-weight: 700; line-height: 1.05; }
.stellplatz h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.stellplatz p { color: #3d434a; }
.preis { margin-top: auto; padding-top: calc(10 * var(--u)); font-family: var(--schmal); font-size: max(2.25rem, calc(80 * var(--u))); font-weight: 900; line-height: 1; letter-spacing: -.01em; color: var(--graphit) !important; }
.preis-ab { font-size: .5em; font-weight: 700; }
.preis-vor { font-size: .5em; font-weight: 700; }
.stellplatz:hover .scanfenster { color: var(--orange); }
.stellplatz:hover h3 a { text-decoration: underline; text-decoration-thickness: calc(4 * var(--u)); text-underline-offset: .14em; }
.stellplatz:active { background: var(--graphit); }
.stellplatz:focus-within { outline: 3px solid var(--orange); outline-offset: calc(-14 * var(--u)); }
.stellplatz h3 a:focus-visible { outline: none; }
.stellplatz:active, .stellplatz:active p, .stellplatz:active .preis, .stellplatz:active .preis-vor { color: var(--weiss) !important; }

.mehr {
  display: inline-flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(80 * var(--u));
  padding-bottom: calc(8 * var(--u)); border-bottom: calc(4 * var(--u)) solid var(--graphit);
  font-family: var(--schmal); font-size: max(1.125rem, calc(36 * var(--u))); font-weight: 700;
}
.mehr .icon { stroke-width: 2.5; transition: transform .2s ease-out; }
.mehr:hover { border-color: var(--orange); }
.mehr:hover .icon { transform: translateX(calc(10 * var(--u))); }

/* Markenleiste: nur Text, gesetzt wie eine Logo-Leiste */
.marken { position: relative; padding-block: calc(96 * var(--u)) calc(110 * var(--u)); background: var(--weiss); font-family: var(--schmal); }
.marken-titel { margin-bottom: calc(44 * var(--u)); font-size: max(1rem, calc(30 * var(--u))); font-weight: 600; letter-spacing: .04em; color: var(--grau-text); }
.marken-liste { display: grid; grid-template-columns: repeat(9, 1fr); gap: calc(2 * var(--u)); padding: calc(2 * var(--u)); background: var(--trenner); }
.marken-liste li {
  display: grid; place-items: center; min-height: calc(120 * var(--u)); padding-inline: calc(12 * var(--u)); background: var(--weiss);
  font-size: max(1rem, calc(34 * var(--u))); font-weight: 700; letter-spacing: .02em; color: #6b737d; text-align: center; white-space: nowrap;
}

/* 03 Warum: Prüfprotokoll an der Lochwand */
.station--warum, .station--karriere {
  background-color: var(--wand);
  background-image: radial-gradient(circle, var(--loch) calc(3 * var(--u)), transparent calc(3.6 * var(--u)));
  background-size: calc(32 * var(--u)) calc(32 * var(--u));
  background-position: calc((100% - 2368 * var(--u)) / 2 + 8 * var(--u)) calc(8 * var(--u));   /* Lochreihe auf der Inhaltskante (120) */
}
.protokoll { max-width: calc(1760 * var(--u)); padding: calc(16 * var(--u)) calc(72 * var(--u)); background: var(--weiss); }
.protokoll li {
  position: relative; display: grid; grid-template-columns: calc(640 * var(--u)) 1fr; column-gap: calc(64 * var(--u)); align-items: baseline;
  padding: calc(52 * var(--u)) 0 calc(52 * var(--u)) calc(104 * var(--u)); border-top: calc(3 * var(--u)) solid var(--graphit);
}
.protokoll li:first-child { border-top: 0; }
.protokoll li::before {
  content: ""; position: absolute; left: 0; top: calc(50 * var(--u));
  width: calc(52 * var(--u)); height: calc(52 * var(--u)); border: calc(5 * var(--u)) solid var(--graphit);
}
.protokoll li::after {
  content: ""; position: absolute; left: calc(18 * var(--u)); top: calc(56 * var(--u));
  width: calc(16 * var(--u)); height: calc(30 * var(--u));
  border-right: calc(6 * var(--u)) solid var(--graphit); border-bottom: calc(6 * var(--u)) solid var(--graphit); transform: rotate(45deg);
}
.protokoll h3 { font-family: var(--schmal); font-size: max(1.375rem, calc(50 * var(--u))); font-weight: 700; line-height: 1.05; }

/* 04 Hybrid und Elektro: das Röntgenbild vom Auto, Batterie beschriftet */
.station--hybrid { background: var(--boden); overflow: hidden; }
.station--hybrid .buehne { display: grid; grid-template-columns: calc(660 * var(--u)) 1fr; column-gap: calc(90 * var(--u)); align-items: center; }
.hybrid-text .station-kopf { align-items: flex-start; flex-direction: column; gap: calc(30 * var(--u)); margin-bottom: calc(44 * var(--u)); }
.hybrid-text .station-kopf::before { top: calc(60 * var(--u)); margin-top: 0; }
.hybrid-bild { position: relative; margin-right: calc(-80 * var(--u)); }
.hybrid-bild img { width: 100%; }
.hybrid-chip {
  position: absolute; left: calc(250 * var(--u)); top: calc(120 * var(--u));
  display: flex; align-items: center; height: calc(34 * var(--u)); padding-inline: calc(14 * var(--u));
  background: #323b45; color: var(--weiss); font-family: var(--breit); font-size: max(.8125rem, calc(21 * var(--u))); font-weight: 600;
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, .16); border-radius: calc(4 * var(--u));
}
.hybrid-chip::after {
  content: ""; position: absolute; left: calc(70 * var(--u)); top: calc(33 * var(--u));
  width: calc(198 * var(--u)); height: calc(2 * var(--u)); background: var(--graphit);
  transform-origin: 0 50%; transform: rotate(56.3deg);
}

/* 05 Termin: drei Schritte, Bodenpfeile dazwischen */
.station--termin { background: var(--weiss); }
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(150 * var(--u)); margin-bottom: calc(96 * var(--u)); }
.schritte li { position: relative; }
.schritte li + li::before {
  content: ""; position: absolute; left: calc(-118 * var(--u)); top: calc(34 * var(--u));
  width: calc(86 * var(--u)); height: calc(64 * var(--u)); background: var(--graphit);
  clip-path: polygon(0 34%, 58% 34%, 58% 0, 100% 50%, 58% 100%, 58% 66%, 0 66%);
}
.schritt-nr {
  display: block; margin-bottom: calc(40 * var(--u));
  font-family: var(--schablone); font-weight: 900; font-size: max(4rem, calc(170 * var(--u))); line-height: .8;
  color: var(--ziffer); transform: scaleX(1.13); transform-origin: 0 50%;
}
.schritte h3 { margin-bottom: calc(14 * var(--u)); font-family: var(--schmal); font-size: var(--t-h3); font-weight: 700; line-height: 1.05; }

/* 06 Bewertungen (Beispiele) */
.station--stimmen { background: var(--leiste); }
/* Stern: Font Awesome Free 6.7.2 by @fontawesome, https://fontawesome.com/license/free (Icons: CC BY 4.0) */
.sterne {
  --stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 656 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
  display: inline-block; flex: none; width: calc(5 * 36 * var(--u)); height: calc(28 * var(--u)); background: currentColor;
  -webkit-mask: var(--stern) 0 0 / calc(36 * var(--u)) 100% repeat-x; mask: var(--stern) 0 0 / calc(36 * var(--u)) 100% repeat-x;
}
.stimmen-schnitt { display: flex; align-items: center; gap: calc(20 * var(--u)); margin: calc(-36 * var(--u)) 0 calc(80 * var(--u)); font-family: var(--schmal); font-size: max(1.125rem, calc(34 * var(--u))); font-weight: 600; }
.stimmen { display: grid; grid-template-columns: repeat(3, 1fr); }
.stimmen li { padding-inline: calc(72 * var(--u)); border-left: calc(2 * var(--u)) solid var(--trenner); }
.stimmen li:first-child { padding-left: 0; border-left: 0; }
.stimmen blockquote p { margin-block: calc(30 * var(--u)) calc(28 * var(--u)); font-size: max(1.125rem, calc(36 * var(--u))); line-height: 1.42; }
.stimmen figcaption { font-family: var(--schmal); font-size: max(1rem, calc(30 * var(--u))); font-weight: 700; }

/* 07 Karriere: Aushang an der Lochwand */
.aushang { display: flex; align-items: center; gap: calc(90 * var(--u)); max-width: calc(1760 * var(--u)); padding: calc(64 * var(--u)) calc(72 * var(--u)); background: var(--weiss); }
.aushang p { flex: 1; font-size: max(1.0625rem, calc(34 * var(--u))); line-height: 1.45; }

/* 08 Anfahrt: Die Bodenlinie wird zur Route in der Kartenskizze (Einmündung bei 30 % der Kartenhöhe) */
.station--anfahrt { background: var(--boden); }
.station--anfahrt::before { display: none; }
.station--anfahrt .buehne { display: grid; grid-template-columns: calc(1180 * var(--u)) 1fr; column-gap: calc(110 * var(--u)); align-items: start; }
.karte { position: relative; }
.karte img { width: 100%; }
.karte::before, .karte::after { content: ""; position: absolute; left: calc(var(--spur) - var(--rand)); background: var(--orange); }
.karte::before { top: calc(30% - var(--linie) / 2); width: calc(var(--rand) - var(--spur)); height: var(--linie); }
.karte::after { top: calc(-150 * var(--u)); width: var(--linie); height: calc(150 * var(--u) + 30% + var(--linie) / 2); }
.anfahrt-info .station-kopf { margin-bottom: calc(56 * var(--u)); }
.anfahrt-info .station-kopf::before { display: none; }
.anfahrt-info address { margin-bottom: calc(52 * var(--u)); font-size: max(1.125rem, calc(36 * var(--u))); line-height: 1.4; }
.info-titel { margin-bottom: calc(14 * var(--u)); font-family: var(--schmal); font-size: var(--t-klein); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grau-text); }
.zeiten { display: grid; grid-template-columns: max-content 1fr; gap: calc(10 * var(--u)) calc(44 * var(--u)); margin-bottom: calc(52 * var(--u)); font-variant-numeric: tabular-nums; }
.zeiten div { display: contents; }
.zeiten dt { font-family: var(--schmal); font-weight: 700; }
.kontakt { display: flex; flex-direction: column; gap: calc(16 * var(--u)); margin-bottom: calc(64 * var(--u)); }
.kontakt a { display: inline-flex; align-items: center; gap: calc(16 * var(--u)); font-family: var(--schmal); font-size: max(1.25rem, calc(40 * var(--u))); font-weight: 700; }
.kontakt a:hover span { text-decoration: underline; text-decoration-thickness: calc(3 * var(--u)); text-underline-offset: .14em; }

/* Fußzeile */
.fuss { padding-block: calc(120 * var(--u)) calc(90 * var(--u)); background: var(--graphit); color: #c9cdd2; font-family: var(--breit); font-size: max(.9375rem, calc(25 * var(--u))); line-height: 1.6; }
.fuss .buehne { display: grid; grid-template-columns: 1.2fr 1fr 1fr; column-gap: calc(100 * var(--u)); row-gap: calc(80 * var(--u)); }
.fuss-name { margin-bottom: calc(16 * var(--u)); font-family: var(--schmal); font-size: max(1.375rem, calc(46 * var(--u))); font-weight: 700; color: var(--weiss); }
.fuss ul { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.fuss a:hover { color: var(--weiss); text-decoration: underline; text-underline-offset: .18em; }
.fuss-konzept { grid-column: 1 / -1; padding-top: calc(44 * var(--u)); border-top: calc(2 * var(--u)) solid #464b52; color: #9ea5ad; }

/* ---------- 01 So arbeiten wir ----------
   Ruhig (ohne Skript, reduzierte Bewegung, schmale Bildschirme): Station mit drei Bildern unter der Halle.
   Mit Bewegung (html.mit-lauf): Die Halle bleibt stehen, die Scan-Linie fährt über das Auto,
   die Schritte erscheinen auf der Wand. --scan kommt in Entwurfspixeln aus js/lauf.js. */
.ablauf { background: var(--boden); }
.ablauf-schritte { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(110 * var(--u)); }
.ablauf-schritt { display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.ablauf-schritt h3 { font-family: var(--schmal); font-size: var(--t-h3); font-weight: 700; line-height: 1.05; }
.ablauf-bild { margin-bottom: calc(30 * var(--u)); }
.ablauf-taste { align-self: flex-start; margin-top: calc(12 * var(--u)); }
.fortschritt, .auto-ebene { display: none; }
/* Ohne Bewegung steht die Vertrauensleiste wie im Entwurf direkt unter der Halle, der Ablauf folgt danach */
html:not(.mit-lauf) main { display: flex; flex-direction: column; }
html:not(.mit-lauf) .halle-lauf { display: contents; }
html:not(.mit-lauf) .halle { order: 1; }
html:not(.mit-lauf) .vertrauen { order: 2; }
html:not(.mit-lauf) .ablauf { order: 3; }
html:not(.mit-lauf) .stationen { order: 4; }

.mit-lauf .halle-lauf { position: relative; height: calc(1296 * var(--u) + 240vh); background: #d2d5db; }   /* Farbe der Bodenkante im Hallenbild */
.mit-lauf .halle { position: sticky; top: min(0px, calc(100vh - 1296 * var(--u))); }
.mit-lauf .ablauf {
  position: sticky; top: min(0px, calc(100vh - 1296 * var(--u))); z-index: 2;
  height: calc(1296 * var(--u)); margin-top: calc(-1296 * var(--u)); padding: 0; background: none; pointer-events: none;
}
.mit-lauf .ablauf::before { display: none; }
.mit-lauf .ablauf .buehne { height: 100%; }
.mit-lauf .ablauf .station-kopf { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mit-lauf .ablauf-bild, .mit-lauf .ablauf-taste { display: none; }
.mit-lauf .ablauf-schritte { display: block; }
.mit-lauf .ablauf-schritt {
  position: absolute; left: calc(119 * var(--u)); top: calc(140 * var(--u)); display: block; width: calc(1060 * var(--u));
  opacity: 0; visibility: hidden; translate: 0 calc(28 * var(--u));
  transition: opacity .5s cubic-bezier(.16, 1, .3, 1), translate .5s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .5s;
}
.mit-lauf .ablauf-schritt h3 { font-size: calc(84 * var(--u)); text-box: trim-both cap alphabetic; }
.mit-lauf .ablauf-schritt p {
  max-width: none; margin-top: calc(40 * var(--u));
  font-family: var(--schmal); font-size: calc(32 * var(--u)); font-weight: 600; letter-spacing: .02em; line-height: 1.4;
}
.halle-lauf[data-schritt="1"] .ablauf-schritt[data-schritt-nr="1"],
.halle-lauf[data-schritt="2"] .ablauf-schritt[data-schritt-nr="2"],
.halle-lauf[data-schritt="3"] .ablauf-schritt[data-schritt-nr="3"] { opacity: 1; visibility: visible; translate: 0 0; transition-delay: .08s, .08s, 0s; }

/* Wandschrift macht den Schritten Platz */
.mit-lauf :is(.titel, .claim, .lead) { transition: opacity .45s cubic-bezier(.16, 1, .3, 1), translate .45s cubic-bezier(.16, 1, .3, 1); }
.mit-lauf .halle-lauf:not([data-schritt="0"]) :is(.titel, .claim, .lead) { opacity: 0; translate: 0 calc(-28 * var(--u)); }

/* Ebenen: Lack darunter, Röntgen bis zur Scan-Linie. Bis sie geladen sind, steht das Standbild (gleicher Zustand) */
.mit-lauf .auto-ebene {
  display: block; position: absolute; left: calc(596 * var(--u)); top: calc(340 * var(--u));
  width: calc(1588 * var(--u)); height: calc(628 * var(--u)); max-width: none; opacity: 0;
}
.mit-lauf .ebenen-bereit .auto-ebene { opacity: 1; }
.mit-lauf .ebenen-bereit .auto { opacity: 0; }
.halle-lauf.ebenen-bereit { --scan-ist: var(--scan, 1265); }
.mit-lauf .auto-roentgen { clip-path: inset(0 calc((2184 - var(--scan-ist, 1265)) / 1588 * 100%) 0 0); }

/* Beschriftungen verschwinden, wenn die Scan-Linie auf dem Rückweg ihr Bauteil passiert (Lage in Entwurfspixeln) */
.bauteil--motor { --teil: 880; }
.bauteil--klima { --teil: 993; }
.bauteil--bremsen, .bauteil--reifen { --teil: 867; }
.bauteil--batterie { --teil: 1118; }
.mit-lauf .bauteil { opacity: clamp(0, (var(--scan-ist, 1265) - var(--teil)) / 30, 1); }
.mit-lauf .halle-lauf[data-schritt="3"] .bauteil { pointer-events: none; }

/* Reparatur: die Bremse ist erledigt (Farbe plus Haken, nie nur Farbe) */
.halle-lauf[data-schritt="2"] .bauteil--bremsen { background: var(--orange); color: var(--graphit); }
.halle-lauf[data-schritt="2"] .bauteil--bremsen::before {
  content: ""; position: absolute; left: calc(-44 * var(--u)); top: calc(2 * var(--u));
  width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%;
  background: var(--graphit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 64% no-repeat;
}

/* Fortschritt auf dem Boden statt „So arbeiten wir“ */
.mit-lauf .weiter { transition: opacity .3s ease-out; }
.mit-lauf .halle-lauf:not([data-schritt="0"]) .weiter { opacity: 0; pointer-events: none; }
.mit-lauf .fortschritt {
  display: flex; position: absolute; left: calc(64 * var(--u)); top: calc(1186 * var(--u));
  flex-direction: column; gap: calc(18 * var(--u)); opacity: 0; transition: opacity .3s ease-out;
}
.mit-lauf .halle-lauf:not([data-schritt="0"]) .fortschritt { opacity: 1; }
.fortschritt-balken { display: flex; gap: calc(10 * var(--u)); }
.fortschritt-balken i { width: calc(78 * var(--u)); height: calc(12 * var(--u)); border: calc(3 * var(--u)) solid #6b737d; transition: background-color .3s ease-out; }
.halle-lauf[data-schritt="1"] .fortschritt-balken i:nth-child(-n + 1),
.halle-lauf[data-schritt="2"] .fortschritt-balken i:nth-child(-n + 2),
.halle-lauf[data-schritt="3"] .fortschritt-balken i:nth-child(-n + 3) { background: #6b737d; }
.fortschritt-name {
  display: none; font-family: var(--schablone); font-size: calc(33 * var(--u)); font-weight: 800; color: #6b737d; white-space: nowrap;
  transform: skewX(-12deg) scaleX(1.34); transform-origin: 0 100%; text-box: trim-both cap alphabetic;
}
.halle-lauf[data-schritt="1"] .fortschritt-name[data-zu="1"],
.halle-lauf[data-schritt="2"] .fortschritt-name[data-zu="2"],
.halle-lauf[data-schritt="3"] .fortschritt-name[data-zu="3"] { display: block; }

/* ---------- Schmale Bildschirme ----------
   Ab 75em steht der erste Bildschirm als Desktop-Komposition (Maßsystem --u).
   Darunter wird er gestapelt: Wandschrift, Auto auf der Hebebühne als Band, Beschriftungen als Chips, Boden mit Knöpfen.
   Unter 64em werden auch die Stationen einspaltig, unten steht eine feste Leiste mit Anrufen und WhatsApp. */
.boden { display: contents; }
.menue-knopf, .schnellleiste { display: none; }

@media (max-width: 74.99em) {
  :root { --wand-mobil: #d7dbde; --boden-mobil: #ced2d8; }

  /* Konzept-Leiste */
  .konzept { height: auto; }
  .konzept .rahmen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; padding: 9px 20px; text-align: center; }
  .konzept-text, .konzept-link { position: static; }
  .konzept-text, .konzept-link span { white-space: normal; text-box: none; }
  .konzept-text { font-size: .8125rem; line-height: 1.35; }
  .konzept-link { gap: 8px; font-size: .875rem; letter-spacing: .02em; line-height: 1.35; }
  .konzept-link .icon { width: 16px; height: 16px; }

  /* Kopfzeile mit Menü */
  .kopf { position: relative; z-index: 30; height: auto; }
  .kopf .rahmen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 68px; padding: 0 8px 0 20px; }
  .logo { position: static; width: 168px; margin-right: auto; }
  .kopf-telefon { position: static; justify-content: center; width: 48px; height: 48px; gap: 0; }
  .kopf-telefon span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kopf-telefon::before { display: none; }
  .kopf-telefon .icon { width: 24px; height: 24px; }
  .menue-knopf {
    display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px;
    border: 0; background: none; color: var(--graphit); font: 700 1.0625rem var(--schmal); cursor: pointer;
  }
  .menue-strich, .menue-strich::before, .menue-strich::after { display: block; width: 22px; height: 2.5px; background: currentColor; transition: transform .2s ease-out, background-color .2s; }
  .menue-strich { position: relative; }
  .menue-strich::before, .menue-strich::after { content: ""; position: absolute; left: 0; }
  .menue-strich::before { top: -7px; }
  .menue-strich::after { top: 7px; }
  .menue-offen .menue-strich { background-color: transparent; }
  .menue-offen .menue-strich::before { transform: translateY(7px) rotate(45deg); }
  .menue-offen .menue-strich::after { transform: translateY(-7px) rotate(-45deg); }
  .nav { flex-basis: 100%; margin-inline: -8px -20px; background: var(--weiss); border-top: 1px solid var(--trenner); }
  .js .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; border-bottom: 3px solid var(--graphit); }
  .js.menue-offen .nav { display: block; }
  .js .menue-knopf { display: inline-flex; }
  html:not(.js) .menue-knopf { display: none; }
  .nav ul { display: block; }
  .nav li { position: static; }
  .nav li + li::before { display: none; }
  .nav a { flex-direction: row; align-items: baseline; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--trenner); }
  .nav .nr, .nav-text { text-box: none; }
  .nav .nr { font-size: .875rem; }
  .nav-text { font-size: 1.25rem; }

  /* Halle gestapelt */
  .halle { height: auto; overflow: visible; background: var(--wand-mobil); }
  .halle .rahmen { display: flex; flex-direction: column; padding: 28px 20px 0; }
  .titel { order: 2; } .claim { order: 3; } .lead { order: 4; }
  .halle picture:has(.auto) { order: 5; } .bauteile { order: 6; } .boden { order: 7; }
  .halle-bild, .scan, .auto-ebene, .fortschritt { display: none !important; }
  .titel, .claim, .lead { position: static; white-space: normal; text-box: none; transform: none; }
  .titel { margin-top: 0; font-size: clamp(2.25rem, 9.4vw, 3.75rem); line-height: 1.02; }
  .claim { margin-top: 4px; font-size: clamp(2rem, 8.4vw, 3.4rem); line-height: 1.04; }
  .lead { max-width: 34em; margin-top: 14px; font-size: 1.0625rem; letter-spacing: .01em; line-height: 1.45; }
  .halle picture:has(.auto) { display: block; margin: 10px -20px 0; }
  .auto { position: static; width: 100%; height: auto; object-fit: contain; }
  .bauteile { display: flex; gap: 8px; margin: 8px -20px 0; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
  .bauteile::-webkit-scrollbar { display: none; }
  .bauteile li { flex: none; }
  .bauteil { position: static; width: auto !important; height: 40px !important; padding: 0 14px; font-size: .875rem; opacity: 1 !important; }
  .bauteil::after { display: none; }
  .boden { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 14px -20px 0; padding: 0 20px 34px; background: var(--boden-mobil); }
  .bodenlinie { position: static; align-self: stretch; width: auto; height: 6px; margin: 0 -20px 12px; }
  .knopf { position: static; order: 2; width: 100% !important; max-width: 26rem; height: 54px; font-size: 1.1875rem; }
  .knopf--rahmen { order: 3; justify-content: center; padding-left: 0; border-width: 1.5px; }
  .knopf--rahmen .icon { width: 22px; height: 22px; }
  .bewertung { position: static; order: 4; width: auto; height: 44px; padding: 0 16px; gap: 10px; font-size: 1rem; }
  .bewertung .icon { width: 20px; height: 20px; }
  .boden-nr, .weiter { display: none; }   /* die Station 01 folgt direkt darunter */

  /* Vertrauensleiste */
  .vertrauen { height: auto; }
  .vertrauen .rahmen { padding: 26px 20px 30px; }
  .vertrauen-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .vertrauen-liste li { position: static; height: auto; gap: 12px; font-size: 1rem; line-height: 1.25; }
  .vertrauen-liste li + li::before { display: none; }
  .vertrauen-liste .icon { width: 26px; height: 26px; transform: none !important; }
  .naechste-station { display: none; }
  .vertrauen-liste br { display: none; }
}
@media (min-width: 48em) and (max-width: 74.99em) {
  .vertrauen-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 63.99em) {
  :root { --rand: 20px; --spur: 8px; --linie: 4px; }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

  /* Stationen einspaltig, ohne Bodenlinie am Rand */
  .station { padding-block: 64px 72px; }
  .karte::after { display: none; }
  /* Die Karte steht schmal unter den Angaben: Die Linie endet auf Höhe der Einmündung (30 % der Kartenhöhe, Karte 1,6:1) */
  .station--anfahrt::before { display: block; bottom: calc(72px + .4375 * (100cqw - 40px) - var(--linie) / 2); }
  .hybrid-text .station-kopf::before { top: 50%; margin-top: calc(var(--linie) / -2); }
  .station-kopf { flex-wrap: wrap; gap: 10px 16px; margin-bottom: 32px; }
  .station-kopf h2 { flex: 1 1 0; min-width: 0; }
  .station-ziffer { margin-right: 6px; font-size: 3rem; }
  .station h2 { font-size: clamp(1.875rem, 7.4vw, 2.75rem); }
  .station-hinweis { flex-basis: 100%; margin-left: 0; }

  .ablauf-schritte { grid-template-columns: 1fr; row-gap: 30px; }
  .ablauf-schritt, .stellplatz { display: grid; grid-template-columns: minmax(0, 38%) 1fr; column-gap: 18px; row-gap: 8px; align-items: start; }
  .ablauf-bild { grid-row: 1 / span 3; margin: 8px; }
  .ablauf-taste { grid-column: 1 / -1; width: 100%; margin-top: 10px; }

  .stellplaetze { grid-template-columns: 1fr; border-top: 0; }
  .stellplatz { padding: 24px 0 26px; border: 0 !important; border-top: 5px solid var(--graphit) !important; }
  .stellplatz .scanfenster { grid-row: 1 / span 3; margin: 8px; }
  .scanfenster::after { --l: 18px; --t: 3px; inset: -8px; }
  .stellplatz h3, .ablauf-schritt h3, .schritte h3, .protokoll h3 { font-size: 1.375rem; }
  .preis { padding-top: 2px; font-size: 2rem; }
  .stellplatz:focus-within { outline-offset: 2px; }
  .mehr { margin-top: 28px; font-size: 1.125rem; gap: 10px; border-bottom-width: 3px; }

  .marken { padding-block: 48px 56px; }
  .marken-titel { margin-bottom: 18px; }
  .marken-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 1px; }
  .marken-liste li { min-height: 56px; font-size: 1rem; }
}
@media (min-width: 40em) and (max-width: 63.99em) {
  .marken-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 63.99em) {

  .station--warum, .station--karriere {
    background-image: radial-gradient(circle, var(--loch) 1.5px, transparent 1.9px);
    background-size: 16px 16px; background-position: 2px 2px;
  }
  .protokoll { max-width: none; padding: 4px 18px; }
  .protokoll li { grid-template-columns: 1fr; row-gap: 6px; padding: 22px 0 22px 44px; border-top-width: 2px; }
  .protokoll li::before { top: 24px; width: 26px; height: 26px; border-width: 3px; }
  .protokoll li::after { left: 9px; top: 27px; width: 8px; height: 15px; border-right-width: 3px; border-bottom-width: 3px; }

  .station--hybrid .buehne { grid-template-columns: 1fr; row-gap: 24px; }
  .hybrid-text .station-kopf { flex-direction: row; align-items: center; }
  .hybrid-bild { margin-right: 0; }
  .hybrid-chip { left: 24%; top: 34%; height: 28px; padding-inline: 10px; font-size: .8125rem; }
  .hybrid-chip::after { display: none; }

  .schritte { grid-template-columns: 1fr; row-gap: 30px; margin-bottom: 36px; }
  .schritte li { display: grid; grid-template-columns: 58px 1fr; column-gap: 14px; }
  .schritte li + li::before { display: none; }
  .schritt-nr { grid-row: 1 / span 2; margin: 0; font-size: 3.5rem; }
  .schritte h3 { margin-bottom: 4px; }
  .tasten { flex-direction: column; }
  .tasten .taste { width: 100%; }

  .sterne { width: 115px; height: 18px; -webkit-mask-size: 23px 100%; mask-size: 23px 100%; }
  .stimmen-schnitt { flex-wrap: wrap; margin: -12px 0 30px; font-size: 1.0625rem; }
  .stimmen { grid-template-columns: 1fr; row-gap: 26px; }
  .stimmen li { padding: 26px 0 0 !important; border-left: 0 !important; border-top: 2px solid var(--trenner); }
  .stimmen li:first-child { padding-top: 0 !important; border-top: 0; }
  .stimmen blockquote p { margin-block: 14px; }

  .aushang { flex-direction: column; align-items: stretch; max-width: none; gap: 22px; padding: 24px 20px; }

  .station--anfahrt .buehne { grid-template-columns: 1fr; row-gap: 34px; }
  .anfahrt-info { order: -1; }
  .kontakt a { min-height: 44px; font-size: 1.375rem; }

  .fuss { padding-block: 48px 40px; }
  .fuss .buehne { grid-template-columns: 1fr; row-gap: 30px; }

  /* Feste Leiste unten */
  .schnellleiste {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding-bottom: env(safe-area-inset-bottom); background: var(--graphit);
  }
  .schnellleiste a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; color: var(--weiss); font: 700 1.125rem var(--schmal); }
  .schnellleiste a:first-child { background: var(--orange); color: var(--graphit); }
  .schnellleiste a:active { filter: brightness(.9); }
  .schnellleiste .icon { width: 20px; height: 20px; }
}