/* ============================================================
   MOTORWERK - KFZ-Meisterwerkstatt (Konzept-Demo)
   Richtung: Nachtschicht-Garage. Asphalt-Schwarz, Warn-Amber,
   Stahlgrau, harte Kanten, Hazard-Streifen, Cockpit-Optik.
   Display: Chakra Petch | Body: Barlow
   Motion nach Kowalski: kurz, ease-out, transform/opacity only.
   ============================================================ */

:root {
  --asphalt: #0E0F12;
  --asphalt-hell: #16181D;
  --karte: #14161B;
  --stahl: #262B34;
  --stahl-hell: #3A414D;
  --kreide: #F2F4F6;
  --nebel: #9AA3AF;
  --amber: #FFB400;
  --amber-tief: #E09B00;
  --signal: #FF4D2E;
  --papier: #F4F1E8;
  --tinte: #141519;
  --radius: 9px;
  --font-display: 'Chakra Petch', 'Trebuchet MS', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', sans-serif;
  --maxw: 1200px;
  --pad: clamp(20px, 4vw, 48px);
  --aus: cubic-bezier(0.23, 1, 0.32, 1);
  --feder: cubic-bezier(0.3, 1.4, 0.42, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }

body {
  background: var(--asphalt);
  color: var(--kreide);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Asphalt-Textur: feines Rauschen ueber allem, unaufdringlich */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

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

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--amber); color: var(--tinte); }

a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

h1, h2, h3 { text-wrap: balance; }

em { font-style: normal; color: var(--amber); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--amber);
  color: var(--tinte);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 14px 0;
}
.skip-link:focus { left: 0; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 2px solid var(--amber);
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s var(--aus), color .2s var(--aus), border-color .2s var(--aus), transform .16s var(--aus), box-shadow .2s var(--aus);
}
.btn--voll { background: var(--amber); color: var(--tinte); position: relative; overflow: hidden; }
.btn--linie { background: transparent; color: var(--kreide); border-color: var(--stahl-hell); }
.btn--breit { width: 100%; }
.btn:active { transform: scale(.97); }
/* Scheinwerfer-Wisch */
.btn--voll::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  transition: transform .5s var(--aus);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--voll:hover { background: #FFC533; border-color: #FFC533; transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(255, 180, 0, .55); }
  .btn--voll:hover::after { transform: skewX(-18deg) translateX(400%); }
  .btn--linie:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }
}

/* ============ Eyebrow / Section-Kopf ============ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "//";
  margin-right: 10px;
  letter-spacing: 0;
  color: var(--stahl-hell);
}

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(54px, 6.6vw, 88px) var(--pad);
}

.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head--mitte {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--mitte .section-sub { margin-left: auto; margin-right: auto; }

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.06;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.section-sub {
  margin-top: 18px;
  font-size: 17.5px;
  color: var(--nebel);
  max-width: 640px;
}

/* Dunklere Vollbreiten-Sektionen */
.section--dunkel {
  max-width: none;
  background:
    radial-gradient(900px 500px at 88% 10%, rgba(255, 180, 0, .07), transparent 60%),
    #0A0B0E;
  border-top: 1px solid var(--stahl);
  border-bottom: 1px solid var(--stahl);
}
.section--dunkel > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* ============ Navigation ============ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(14, 15, 18, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--stahl);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--kreide);
}
.nav-logo svg { color: var(--amber); }
.nav-logo span { color: var(--amber); }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}
.nav-link {
  font-size: 15px;
  font-weight: 600;
  position: relative;
  padding: 6px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  border-radius: 3px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--aus);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link--cta {
  font-family: var(--font-display);
  border: 2px solid var(--amber);
  color: var(--amber);
  border-radius: 8px;
  padding: 9px 20px;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 13.5px;
  transition: background .2s var(--aus), color .2s var(--aus);
}
.nav-link--cta:hover { background: var(--amber); color: var(--tinte); }
.nav-link--cta::after { display: none; }

.nav-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  /* 44px ist das Mindestmass fuer Fingerbedienung (Apple HIG) */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  z-index: 120;
}
.nav-burger span {
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: var(--kreide);
  transition: transform .25s var(--aus), background .25s var(--aus);
}

/* ============ Hero ============ */
.hero {
  padding-top: 74px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--stahl);
}
.hero-glow {
  position: absolute;
  width: 720px; height: 720px;
  right: -220px; top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 0, .16), transparent 65%);
  pointer-events: none;
}
.hero-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--pad) clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 6vw, 88px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
}
/* Zeile 1 nur Kontur, Zeile 2 volles Amber: Vorher/Nachher im Titel */
.titel-kontur {
  color: transparent;
  -webkit-text-stroke: 2px var(--kreide);
}
.titel-voll { color: var(--amber); }
.hero-sub {
  margin-top: 22px;
  font-size: clamp(16.5px, 1.6vw, 19px);
  color: var(--nebel);
  max-width: 520px;
}
.hero-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero-chips {
  margin-top: 34px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-chips li {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--kreide);
  background: var(--karte);
  border: 1px solid var(--stahl);
  border-radius: 8px;
  padding: 8px 14px;
}
.hero-chips li span { color: var(--amber); }

/* Felge: 3D-Buehne mit Perspektive, physikalisches Nachdrehen im JS */
.hero-felge {
  position: relative;
  justify-self: end;
  width: clamp(290px, 34vw, 500px);
  transform: translateX(6%);
  perspective: 1100px;
}
.felge-buehne {
  transform: rotateY(-16deg) rotateX(5deg);
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(-18px 34px 50px rgba(0, 0, 0, .65));
}
.felge-svg { width: 100%; height: auto; display: block; overflow: visible; }
#felgenRad { transform-origin: 300px 300px; will-change: transform; }
/* Motion-Blur, sobald das Rad Tempo hat */
.felge-svg.ist-schnell #felgenRad { filter: blur(2px); }
.flanken-text { opacity: .85; }

/* Sobald WebGL laeuft, uebernimmt die 3D-Felge: SVG raus, Kippung macht die
   Kamera, und der Dauer-Dropshadow faellt weg (der wuerde jeden Frame neu
   berechnet werden). Den Bodenschatten liefert weiter .felge-schatten. */
.felge-canvas { display: block; width: 100%; height: auto; }
.hero-felge.hat-3d .felge-svg { display: none; }
.hero-felge.hat-3d .felge-buehne { transform: none; filter: none; will-change: auto; }
/* Der Bodenschatten-Fleck faellt weg: in 3D steht eine echte Strasse unter dem
   Rad, die ihren Schatten selbst wirft. Beides zusammen matscht. */
.hero-felge.hat-3d .felge-schatten { display: none; }
/* Bodenschatten unter dem Rad */
.felge-schatten {
  position: absolute;
  left: 6%;
  right: 10%;
  bottom: -7%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .75), transparent 68%);
  filter: blur(10px);
  pointer-events: none;
}

/* Ladesequenz */
.lade-stufe { animation: stufe-rein .65s var(--aus) both; }
.hero-text .lade-stufe:nth-child(1) { animation-delay: .08s; }
.hero-text .lade-stufe:nth-child(2) { animation-delay: .2s; }
.hero-text .lade-stufe:nth-child(3) { animation-delay: .34s; }
.hero-text .lade-stufe:nth-child(4) { animation-delay: .46s; }
.hero-text .lade-stufe:nth-child(5) { animation-delay: .58s; }
.hero-felge.lade-stufe { animation-delay: .3s; animation-duration: .9s; }
@keyframes stufe-rein {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ============ Laufband: Warnband ============ */
.laufband {
  overflow: hidden;
  background: #101115;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-image: repeating-linear-gradient(45deg, var(--amber) 0 14px, #131418 14px 28px) 6;
  transform: rotate(-1.2deg);
  margin: clamp(10px, 2vw, 24px) -24px 0;
  padding: 12px 0;
  box-shadow: 0 16px 34px -22px rgba(0, 0, 0, .8);
}
.laufband-spur {
  display: flex;
  width: max-content;
  animation: laufband-lauf 30s linear infinite;
}
.laufband:hover .laufband-spur { animation-play-state: paused; }
.laufband-liste {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  list-style: none;
}
.laufband-liste li {
  display: flex;
  align-items: center;
  gap: 34px;
  color: var(--kreide);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.laufband-liste li::after {
  content: "»";
  color: var(--amber);
  font-size: 17px;
  letter-spacing: 0;
}
@keyframes laufband-lauf {
  to { transform: translateX(-50%); }
}

/* ============ Drehzahlmesser-Navigator ============ */
.navigator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  background: var(--karte);
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  padding: clamp(24px, 3.5vw, 48px);
}
.tacho { max-width: 460px; margin: 0 auto; width: 100%; }
.tacho svg { width: 100%; height: auto; display: block; }
#tachoZeiger {
  transform-origin: 240px 240px;
  transition: transform .75s var(--feder);
}
.tacho-skala-strich { stroke: #4A5260; stroke-width: 3; }
.tacho-skala-strich--gross { stroke: var(--kreide); stroke-width: 5; }
.tacho-zahl {
  fill: var(--nebel);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}
.tacho-zahl--rot { fill: var(--signal); }

/* LCD-Anzeige unterm Tacho */
.tacho-lcd {
  margin: 18px auto 0;
  max-width: 340px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #0A0B0D;
  border: 1px solid var(--stahl);
  border-radius: 10px;
  padding: 12px 18px;
  font-family: var(--font-display);
  letter-spacing: 2px;
}
.lcd-name { color: var(--nebel); font-size: 13px; font-weight: 600; }
.lcd-preis {
  color: var(--amber);
  font-size: 19px;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(255, 180, 0, .5);
  white-space: nowrap;
}

.navigator-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.nav-zone {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--nebel);
  background: var(--asphalt);
  border: 2px solid var(--stahl);
  border-radius: 8px;
  padding: 9px 16px;
  /* Fingerbedienung: 44px Mindesthoehe, unabhaengig von der Schriftgroesse */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background .2s var(--aus), color .2s var(--aus), border-color .2s var(--aus), transform .16s var(--aus);
}
.nav-zone:active { transform: scale(.96); }
.nav-zone:hover { border-color: var(--amber); color: var(--kreide); }
.nav-zone.is-active {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--tinte);
}

.navigator-panel h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 2.2vw, 27px);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.navigator-panel p { color: var(--nebel); font-size: 16px; max-width: 480px; }
.panel-fakten {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-fakten span {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--amber);
  border: 1px solid rgba(255, 180, 0, .4);
  border-radius: 7px;
  padding: 6px 12px;
  white-space: nowrap;
}
.navigator-panel.panel-rein h3,
.navigator-panel.panel-rein p {
  animation: stufe-rein .3s var(--aus) both;
}
.navigator-panel.panel-rein p:nth-of-type(1) { animation-delay: .05s; }
.navigator-panel.panel-rein .panel-fakten { animation-delay: .1s; }
.navigator-fuss {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--stahl);
  font-size: 14.5px;
  color: var(--nebel);
}
.navigator-fuss a {
  color: var(--kreide);
  font-weight: 600;
  border-bottom: 2px solid var(--amber);
}

/* ============ Ablauf: Boxenstopp ============ */
.section--ablauf { padding-top: clamp(56px, 8vw, 96px); }
.ablauf-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ablauf-media { position: relative; }
.ablauf-media img {
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--stahl);
  filter: saturate(.85) contrast(1.05);
}
.ablauf-zeit {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(10, 11, 13, .88);
  backdrop-filter: blur(6px);
  border: 1px solid var(--stahl);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--nebel);
}
.ablauf-zeit b { color: var(--amber); font-family: var(--font-display); letter-spacing: .5px; }
.ablauf-schritte {
  margin-top: 26px;
  list-style: none;
  display: grid;
  gap: 22px;
}
.ablauf-schritte li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  align-items: start;
  background: var(--karte);
  border: 1px solid var(--stahl);
  border-radius: 14px;
  padding: 20px 22px;
  transition: border-color .25s var(--aus), transform .25s var(--aus);
}
@media (hover: hover) and (pointer: fine) {
  .ablauf-schritte li:hover { border-color: rgba(255, 180, 0, .55); transform: translateY(-3px); }
}
.schritt-nr {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--amber);
  padding-top: 4px;
}
.ablauf-schritte strong { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .5px; font-size: 16px; margin-bottom: 4px; }
.ablauf-schritte div { color: var(--nebel); font-size: 15.5px; }

/* ============ Festpreise: Werkstattauftrag ============ */
.preis-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.preis-hinweis {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--nebel);
  max-width: 520px;
}

/* Der Auftragszettel: helles Papier im dunklen Raum */
.auftrag {
  position: relative;
  background: var(--papier);
  color: var(--tinte);
  padding: 34px 28px 26px;
  max-width: 390px;
  width: 100%;
  justify-self: center;
  transform: rotate(1.6deg);
  border-radius: 6px;
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .85);
  transition: transform .3s var(--aus);
  /* Abheftlochung oben */
  background-image: radial-gradient(circle at 24px 14px, #0A0B0E 7px, transparent 8px), radial-gradient(circle at calc(100% - 24px) 14px, #0A0B0E 7px, transparent 8px);
}
@media (hover: hover) and (pointer: fine) {
  .auftrag:hover { transform: rotate(.6deg) translateY(-4px); }
}
.auftrag-kopf {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 2px dashed rgba(20, 21, 25, .3);
}
.auftrag-kopf span {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 2px;
  color: #6B6F66;
}
.auftrag-liste {
  list-style: none;
  padding: 16px 0;
  border-bottom: 2px dashed rgba(20, 21, 25, .3);
  display: grid;
  gap: 11px;
}
.auftrag-liste li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 15px;
  font-weight: 500;
}
.auftrag-liste b {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.auftrag-fuss {
  padding-top: 14px;
  font-size: 12.5px;
  color: #6B6F66;
  text-align: center;
  line-height: 1.7;
}
.auftrag-barcode {
  margin: 14px auto 4px;
  width: 190px;
  height: 34px;
  background: repeating-linear-gradient(90deg, var(--tinte) 0 2px, transparent 2px 5px, var(--tinte) 5px 8px, transparent 8px 10px, var(--tinte) 10px 11px, transparent 11px 15px);
}
.auftrag-nr {
  text-align: center;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 3px;
  color: #6B6F66;
}
/* Festpreis-Stempel: knallt beim Reveal auf den Zettel */
.stempel {
  position: absolute;
  right: -12px;
  bottom: 96px;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--amber-tief);
  border: 4px double var(--amber-tief);
  border-radius: 12px;
  padding: 12px 18px;
  transform: rotate(-12deg);
  mix-blend-mode: multiply;
  opacity: .92;
}
body.js-ready .reveal .stempel { opacity: 0; }
body.js-ready .reveal.is-visible .stempel {
  animation: stempel-schlag .4s var(--feder) both;
  animation-delay: .45s;
}
@keyframes stempel-schlag {
  0% { opacity: 0; transform: rotate(-4deg) scale(2.2); }
  70% { opacity: .92; transform: rotate(-13deg) scale(.96); }
  100% { opacity: .92; transform: rotate(-12deg) scale(1); }
}

/* ============ Werkstatt: Halle + Odometer ============ */
/* Der Wagen wird kleiner, damit links und rechts Wand frei bleibt. Erst dadurch
   ist die Zielflagge im Ruecken ueberhaupt zu sehen. */
.halle {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--stahl);
}
.halle img {
  width: 100%;
  /* Quelle ist 3:2 zugeschnitten und zeigt den Wagen komplett. Container-Format
     muss dazu passen, sonst schneidet object-fit das Dach wieder ab. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.9);
  transition: transform .6s var(--aus);
}
@media (hover: hover) and (pointer: fine) {
  .halle:hover img { transform: scale(1.025); }
}
.halle-zitat {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 4vw, 36px);
  background: linear-gradient(transparent, rgba(8, 9, 11, .92));
}
.halle-zitat p {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 600;
  max-width: 640px;
}
.halle-zitat span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--amber);
  letter-spacing: .5px;
}

/* Kilometerzaehler-Fakten */
.fakten {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.fakt {
  background: var(--karte);
  border: 1px solid var(--stahl);
  border-radius: 14px;
  padding: 20px 22px;
}
.fakt dt {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nebel);
  margin-bottom: 10px;
}
.odometer {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--kreide);
}
.odo-zelle {
  display: inline-block;
  height: 1.15em;
  overflow: hidden;
  background: #0A0B0D;
  border: 1px solid var(--stahl);
  border-radius: 5px;
  padding: 0 .12em;
  line-height: 1.15;
}
.odo-rolle {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 1.3s var(--aus);
}
.odo-rolle span { height: 1.15em; }
.odo-punkt { color: var(--nebel); }
.odo-extra { font-size: .5em; color: var(--amber); margin-left: 6px; white-space: nowrap; }

/* ============ Termin ============ */
.termin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.info-liste {
  margin-top: 32px;
  display: grid;
  gap: 16px;
}
.info-liste div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--stahl);
}
.info-liste dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber);
  padding-top: 4px;
}
.info-liste dd { font-size: 16px; }
/* Telefon und Mail sind eigenstaendige Ziele und brauchen Fingerflaeche.
   Das negative Aussenmass hebt den Zuwachs im Layout wieder auf, die
   Klickflaeche bleibt trotzdem gross. Reine Fliesstext-Links bleiben aussen vor. */
.info-liste dd a {
  display: inline-block;
  padding: 12px 6px;
  margin: -12px -6px;
}
.info-liste dd.zeiten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 3px 18px;
}
.info-liste .z-tage {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nebel);
  padding-top: 5px;
}
.info-liste a { border-bottom: 2px solid transparent; transition: border-color .15s var(--aus); }
.info-liste a:hover { border-color: var(--amber); }

.panne {
  margin-top: 26px;
  background: var(--karte);
  border: 1px solid rgba(255, 180, 0, .45);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--nebel);
}
.panne strong { color: var(--amber); }

.termin-form {
  background: var(--karte);
  border: 1px solid var(--stahl);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px);
  display: grid;
  gap: 18px;
}
.form-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-feld { display: grid; gap: 7px; }
.form-feld label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nebel);
}
.form-feld .optional { color: #5A6370; font-weight: 500; text-transform: none; letter-spacing: .2px; }
.form-feld input,
.form-feld select,
.form-feld textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--kreide);
  background: var(--asphalt);
  border: 2px solid var(--stahl);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color .15s var(--aus), box-shadow .15s var(--aus);
  width: 100%;
}
.form-feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--nebel) 50%), linear-gradient(135deg, var(--nebel) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.form-feld textarea { resize: vertical; }
.form-feld input:focus,
.form-feld select:focus,
.form-feld textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 180, 0, .14);
}
.form-feld input.fehler,
.form-feld select.fehler { border-color: var(--signal); }

/* Kennzeichen-Feld: EU-Schild */
.kennzeichen {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--stahl);
  transition: border-color .15s var(--aus), box-shadow .15s var(--aus);
}
.kennzeichen:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 180, 0, .14); }
.kz-eu {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 34px;
  background: #003DA5;
  color: #FFCC00;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  padding-bottom: 6px;
  position: relative;
}
.kz-eu::before {
  content: "";
  position: absolute;
  top: 7px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px dotted #FFCC00;
}
.kennzeichen input {
  border: none !important;
  border-radius: 0 !important;
  background: #F2F4F6 !important;
  color: var(--tinte) !important;
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  box-shadow: none !important;
}
.kennzeichen input::placeholder { color: #9AA3AF; }

.form-check {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: var(--nebel);
  cursor: pointer;
  /* Das Label ist die Klickflaeche, deshalb traegt es das 44px-Mindestmass */
  min-height: 44px;
}
.form-check input {
  width: 24px; height: 24px;
  accent-color: var(--amber);
  cursor: pointer;
  flex-shrink: 0;
}

.form-status { font-size: 15px; font-weight: 600; min-height: 1.4em; }
.form-status.ok { color: var(--amber); }
.form-status.nicht-ok { color: var(--signal); }
.form-hinweis { font-size: 12.5px; color: #5A6370; }

/* ============ Footer ============ */
.footer {
  background: #0A0B0E;
  color: var(--nebel);
  margin-top: clamp(64px, 8vw, 100px);
}
/* Hazard-Linie als Abschlusskante */
.footer::before {
  content: "";
  display: block;
  height: 6px;
  background: repeating-linear-gradient(45deg, var(--amber) 0 14px, #131418 14px 28px);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 72px) var(--pad);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 40px;
}
.footer-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--kreide);
  margin-bottom: 12px;
}
.footer-logo span { color: var(--amber); }
.footer-brand p:not(.footer-logo) { font-size: 14.5px; line-height: 1.7; }
/* Der Zeilenabstand faellt auf 0, die Links tragen ihre Hoehe jetzt selbst */
.footer-nav { display: grid; gap: 0; align-content: start; }
.footer-nav a {
  font-size: 14.5px;
  font-weight: 600;
  width: fit-content;
  border-bottom: 2px solid transparent;
  transition: color .15s var(--aus), border-color .15s var(--aus);
  /* Fingerflaeche: 44px hoch, Text bleibt optisch an derselben Stelle */
  display: flex;
  align-items: center;
  min-height: 44px;
}
.footer-nav a:hover { color: var(--kreide); border-color: var(--amber); }
.footer-legal { font-size: 13.5px; line-height: 1.8; }
/* Bewusst ohne vergroesserte Klickflaeche: Die Links stehen im Fliesstext des
   Kleingedruckten. Padding schiebt die Unterstreichung vom Text weg, dann liest
   sie sich als loser Strich quer durch den Absatz. Lesbarkeit schlaegt hier das
   44px-Mass, die Zeilenhoehe von 1.8 haelt die Ziele ausreichend getrennt. */
.footer-legal a { color: var(--kreide); border-bottom: 1px solid rgba(242, 244, 246, .3); transition: border-color .15s var(--aus); }
.footer-legal a:hover { border-color: var(--amber); }

/* ============ Demo-Pill ============ */
.demo-pill {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(10, 11, 14, .95);
  backdrop-filter: blur(8px);
  color: var(--kreide);
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--stahl-hell);
  transition: transform .18s var(--aus), border-color .18s var(--aus);
}
.demo-pill:hover { transform: translateY(-2px); border-color: var(--amber); }
.demo-pill-punkt {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  animation: pill-puls 2.2s ease-in-out infinite;
}
@keyframes pill-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* ============ Reveal ============ */
body.js-ready .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s var(--aus), transform .4s var(--aus);
}
body.js-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}
body.js-ready .ablauf-schritte li:nth-child(2) { transition-delay: .08s; }
body.js-ready .ablauf-schritte li:nth-child(3) { transition-delay: .16s; }
body.js-ready .fakten .fakt:nth-child(2) { transition-delay: .07s; }
body.js-ready .fakten .fakt:nth-child(3) { transition-delay: .14s; }
body.js-ready .fakten .fakt:nth-child(4) { transition-delay: .21s; }

/* ============ Responsive ============ */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Einspalter: Das Rad ist das Schaustueck der Seite und gehoert direkt unter
     die Schlagzeile. Stand es am Ende des Textblocks, lag auf dem Handy nur ein
     Viertel davon ueber der Falz. .hero-text loest sich dafuer als Box auf, seine
     Kinder werden selbst zu Rasterelementen und lassen sich einzeln sortieren.
     Der Zeilenabstand des Rasters faellt weg, die Textelemente bringen ihre
     eigenen Abstaende schon mit. */
  .hero-text { display: contents; }
  .hero-grid { row-gap: 0; }
  /* Achtung: display:contents aendert nur die Box-Erzeugung, NICHT den DOM.
     Die Textelemente bleiben Kinder von .hero-text, ein .hero-grid > … greift
     hier also nicht. */
  .hero-text > .eyebrow { order: 1; }
  .hero-text > .hero-title { order: 2; }
  .hero-grid > .hero-felge { order: 3; }
  .hero-text > .hero-sub { order: 4; }
  .hero-text > .hero-actions { order: 5; }
  .hero-text > .hero-chips { order: 6; }
  .hero-felge {
    justify-self: center; transform: none;
    width: min(70vw, 420px); margin: 18px 0 4px;
  }
  .navigator { grid-template-columns: 1fr; }
  .preis-grid { grid-template-columns: 1fr; }
  .auftrag { transform: rotate(0deg); }
  .ablauf-grid { grid-template-columns: 1fr; }
  .ablauf-media { max-width: 440px; }
  .halle img { aspect-ratio: 3 / 2; }
  .fakten { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-menu {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: #0A0B0E;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    transform: translateX(100%);
    transition: transform .3s var(--aus);
  }
  .nav-menu.is-open { transform: translateX(0); }
  .nav-menu .nav-link {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--kreide);
    /* Fingerflaeche auf 44px. Der Zeilenabstand des Menues sinkt im Gegenzug,
       damit der optische Rhythmus derselbe bleibt. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .nav-menu .nav-link--cta { border-color: var(--amber); color: var(--amber); padding: 14px 30px; font-size: 18px; }
  .nav-burger { display: flex; }
  .nav-burger.is-open span:first-child { transform: translateY(5px) rotate(45deg); }
  .nav-burger.is-open span:last-child { transform: translateY(-5px) rotate(-45deg); }

  .laufband { margin-left: -12px; margin-right: -12px; }
  .termin-grid { grid-template-columns: 1fr; }
  .form-zeile { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .stempel { right: 6px; }
  .demo-pill { left: 12px; bottom: 12px; font-size: 11.5px; padding: 9px 13px; }
}

@media (max-width: 520px) {
  /* Platz fuer das Rad im ersten Bildschirm freiraeumen: oben weniger Luft,
     Textabstaende enger. Die Chips duerfen unter die Falz rutschen, sie sind
     der schwaechste Teil des Heros. */
  .hero-grid { padding-top: 30px; padding-bottom: 34px; }
  .hero-sub { margin-top: 16px; }
  .hero-actions { margin-top: 22px; }
  .hero-chips { margin-top: 24px; }
  .hero-felge { width: min(76vw, 340px); margin: 14px 0 2px; }
  .navigator-tabs { gap: 6px; }
  .nav-zone { font-size: 12.5px; padding: 8px 12px; }
  .ablauf-schritte li { grid-template-columns: 64px 1fr; padding: 16px; }
  .schritt-nr { font-size: 34px; }
  .fakten { grid-template-columns: 1fr 1fr; }
}

/* Die Ziffernrollen hingen bei clamp(26px, 3vw, 36px) fest, unter 440px greift
   also immer die 26px-Untergrenze. Nachgerechnet passte der Inhalt der rechten
   Karten dann nicht mehr in die Spalte: 127px Inhalt auf 126px Platz. Das fiel
   nicht als Seitenscroll auf, weil html{overflow-x:clip} es still abschneidet.
   Deshalb hier eigene Groessen statt clamp. */
@media (max-width: 440px) {
  .fakt { padding: 16px 14px; }
  .fakt dt { font-size: 11.5px; letter-spacing: 1.1px; }
  .odometer { font-size: 22px; }
  .odo-extra { font-size: .46em; margin-left: 4px; }
}

/* ============ Reduzierte Bewegung ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .demo-pill-punkt { animation: none; }
  .laufband-spur { animation: none; }
  .navigator-panel.panel-rein h3, .navigator-panel.panel-rein p { animation: none; }
  .lade-stufe { animation-duration: .01s; animation-delay: 0s; }
  #tachoZeiger { transition: none; }
  .odo-rolle { transition: none; }
  body.js-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.js-ready .reveal .stempel { opacity: .92; }
  body.js-ready .reveal.is-visible .stempel { animation: none; }
  .btn, .halle img, .auftrag { transition: none; }
  .btn--voll::after { display: none; }
}


/* ============================================================
   WERKSTATT-MATERIALIEN
   Die Seite hatte vorher genau eine Oberflaeche: schwarz. Damit
   liest sie sich als Vorlage, nicht als Ort. Jede Sektion
   bekommt jetzt ein eigenes Material, dazu abgegriffene
   Warnfarbe an den Kanten und Nieten auf den Platten.
   Alles als SVG-Data-URI, also ohne zusaetzliche Dateien.
   ============================================================ */
:root {
  --riffelblech: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cdefs%3E%3Cfilter id='r' x='-60%' y='-60%' width='220%' height='220%' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='2.7' result='h'/%3E%3CfeDiffuseLighting in='h' surfaceScale='4.2' diffuseConstant='1' lighting-color='rgb(118,128,148)' result='d'%3E%3CfeDistantLight azimuth='228' elevation='38'/%3E%3C/feDiffuseLighting%3E%3CfeSpecularLighting in='h' surfaceScale='4.2' specularConstant='0.5' specularExponent='12' lighting-color='rgb(228,236,248)' result='s'%3E%3CfeDistantLight azimuth='228' elevation='38'/%3E%3C/feSpecularLighting%3E%3CfeComposite in='s' in2='d' operator='arithmetic' k1='0' k2='1' k3='1' k4='0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='80' height='80' fill='rgb(28,31,38)'/%3E%3Cg filter='url(%23r)' fill='rgb(0,0,0)'%3E%3Crect x='-76' y='-64.6' width='32' height='9.2' rx='4.6' transform='rotate(-36 -60 -60)'/%3E%3Crect x='-36' y='-64.6' width='32' height='9.2' rx='4.6' transform='rotate(36 -20 -60)'/%3E%3Crect x='-76' y='-24.6' width='32' height='9.2' rx='4.6' transform='rotate(36 -60 -20)'/%3E%3Crect x='-36' y='-24.6' width='32' height='9.2' rx='4.6' transform='rotate(-36 -20 -20)'/%3E%3Crect x='-76' y='15.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 -60 20)'/%3E%3Crect x='-36' y='15.4' width='32' height='9.2' rx='4.6' transform='rotate(36 -20 20)'/%3E%3Crect x='-76' y='55.4' width='32' height='9.2' rx='4.6' transform='rotate(36 -60 60)'/%3E%3Crect x='-36' y='55.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 -20 60)'/%3E%3Crect x='-76' y='95.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 -60 100)'/%3E%3Crect x='-36' y='95.4' width='32' height='9.2' rx='4.6' transform='rotate(36 -20 100)'/%3E%3Crect x='-76' y='135.4' width='32' height='9.2' rx='4.6' transform='rotate(36 -60 140)'/%3E%3Crect x='-36' y='135.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 -20 140)'/%3E%3Crect x='4' y='-64.6' width='32' height='9.2' rx='4.6' transform='rotate(-36 20 -60)'/%3E%3Crect x='44' y='-64.6' width='32' height='9.2' rx='4.6' transform='rotate(36 60 -60)'/%3E%3Crect x='4' y='-24.6' width='32' height='9.2' rx='4.6' transform='rotate(36 20 -20)'/%3E%3Crect x='44' y='-24.6' width='32' height='9.2' rx='4.6' transform='rotate(-36 60 -20)'/%3E%3Crect x='4' y='15.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 20 20)'/%3E%3Crect x='44' y='15.4' width='32' height='9.2' rx='4.6' transform='rotate(36 60 20)'/%3E%3Crect x='4' y='55.4' width='32' height='9.2' rx='4.6' transform='rotate(36 20 60)'/%3E%3Crect x='44' y='55.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 60 60)'/%3E%3Crect x='4' y='95.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 20 100)'/%3E%3Crect x='44' y='95.4' width='32' height='9.2' rx='4.6' transform='rotate(36 60 100)'/%3E%3Crect x='4' y='135.4' width='32' height='9.2' rx='4.6' transform='rotate(36 20 140)'/%3E%3Crect x='44' y='135.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 60 140)'/%3E%3Crect x='84' y='-64.6' width='32' height='9.2' rx='4.6' transform='rotate(-36 100 -60)'/%3E%3Crect x='124' y='-64.6' width='32' height='9.2' rx='4.6' transform='rotate(36 140 -60)'/%3E%3Crect x='84' y='-24.6' width='32' height='9.2' rx='4.6' transform='rotate(36 100 -20)'/%3E%3Crect x='124' y='-24.6' width='32' height='9.2' rx='4.6' transform='rotate(-36 140 -20)'/%3E%3Crect x='84' y='15.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 100 20)'/%3E%3Crect x='124' y='15.4' width='32' height='9.2' rx='4.6' transform='rotate(36 140 20)'/%3E%3Crect x='84' y='55.4' width='32' height='9.2' rx='4.6' transform='rotate(36 100 60)'/%3E%3Crect x='124' y='55.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 140 60)'/%3E%3Crect x='84' y='95.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 100 100)'/%3E%3Crect x='124' y='95.4' width='32' height='9.2' rx='4.6' transform='rotate(36 140 100)'/%3E%3Crect x='84' y='135.4' width='32' height='9.2' rx='4.6' transform='rotate(36 100 140)'/%3E%3Crect x='124' y='135.4' width='32' height='9.2' rx='4.6' transform='rotate(-36 140 140)'/%3E%3C/g%3E%3C/svg%3E");
  /* Beton: feines Korn statt Nebelschwaden. Zwei Punkte sind entscheidend.
     (1) stitchTiles naeht das Rauschen an den Kachelraendern zusammen, dafuer
     MUSS die Filterflaeche exakt der Kachel entsprechen (filterUnits
     userSpaceOnUse), sonst bleibt die Naht trotzdem stehen. (2) Die Frequenz
     muss hoch genug sein, dass die Struktur kleiner ist als die Kachel. Bei
     0.014 waren die Flecken groesser als die 320px-Kachel, dadurch lag das
     Raster offen und es sah aus wie Rauch. */
  --beton: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='b' filterUnits='userSpaceOnUse' x='0' y='0' width='240' height='240'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.31 0 0 0 0 0.36 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23b)'/%3E%3C/svg%3E");
  --schliff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='240'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.6' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.62 0 0 0 0 0.68 0 0 0 0.13 0'/%3E%3C/filter%3E%3Crect width='400' height='240' filter='url(%23s)'/%3E%3C/svg%3E");
  /* Zielflagge als Stoff, nicht als Kachelboden: ueber das Schachbrett laeuft
     eine Verschiebung (feDisplacementMap mit grobem Rauschen), dadurch wellen
     sich die Felder wie haengender Stoff. Prozedural, damit keine weitere
     Bilddatei noetig ist. Das Rechteck ragt bewusst ueber die Zeichenflaeche
     hinaus, sonst zieht die Verschiebung die Raender leer. */
  /* Zielflagge als echter Stoff. Der Trick ist, dass EIN Faltenfeld beides
     macht: es verschiebt das Karo (feDisplacementMap) UND liefert das Relief
     fuer die Beleuchtung. Damit liegen Wellen und Schatten aufeinander, sonst
     sieht man verbogene Felder ohne Plastik, also nur ein Muster.
     feDiffuseLighting liest die Hoehe aus dem ALPHA-Kanal, deshalb wird R
     vorher per feColorMatrix nach Alpha kopiert. Das Licht wird MULTIPLIZIERT
     (feComposite arithmetic k1=1), der Glanz addiert. Licht von links oben bei 46 Grad,
     weiche Falten (Marlons Wahl aus vier Faltungen). */
  --rennflagge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='860' height='520'%3E%3Cdefs%3E%3Cfilter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'%3E  %3CfeTurbulence type='fractalNoise' baseFrequency='0.0032 0.0095' numOctaves='3' seed='11' result='wolke'/%3E  %3CfeColorMatrix in='wolke' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0' result='hoehe'/%3E  %3CfeDisplacementMap in='SourceGraphic' in2='wolke' scale='54' xChannelSelector='R' yChannelSelector='G' result='stoff'/%3E  %3CfeDiffuseLighting in='hoehe' surfaceScale='2.2' diffuseConstant='1.05' lighting-color='%23ffffff' result='licht'%3E    %3CfeDistantLight azimuth='215' elevation='46'/%3E  %3C/feDiffuseLighting%3E  %3CfeSpecularLighting in='hoehe' surfaceScale='2.2' specularConstant='0.4' specularExponent='16' lighting-color='%23d8e6ff' result='glanz'%3E    %3CfeDistantLight azimuth='215' elevation='46'/%3E  %3C/feSpecularLighting%3E  %3CfeComposite in='licht' in2='stoff' operator='arithmetic' k1='1' k2='0' k3='0' k4='0' result='beleuchtet'/%3E  %3CfeComposite in='glanz' in2='beleuchtet' operator='arithmetic' k1='0' k2='1' k3='1' k4='0'/%3E%3C/filter%3E%3Cpattern id='k' width='56' height='56' patternUnits='userSpaceOnUse'%3E  %3Crect width='56' height='56' fill='%230A0B0E'/%3E  %3Crect width='28' height='28' fill='%23DCE3EC'/%3E  %3Crect x='28' y='28' width='28' height='28' fill='%23DCE3EC'/%3E%3C/pattern%3E%3C/defs%3E%3Crect x='-90' y='-90' width='1040' height='700' fill='url(%23k)' filter='url(%23f)'/%3E%3C/svg%3E");
  --radmutter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cdefs%3E%3CradialGradient id='k' cx='34%' cy='28%' r='82%'%3E%3Cstop offset='0%' stop-color='%23C8D3E1'/%3E%3Cstop offset='38%' stop-color='%237B8797'/%3E%3Cstop offset='78%' stop-color='%233A414C'/%3E%3Cstop offset='100%' stop-color='%23232830'/%3E%3C/radialGradient%3E%3CradialGradient id='s' cx='50%' cy='50%' r='50%'%3E%3Cstop offset='52%' stop-color='%23000000' stop-opacity='.7'/%3E%3Cstop offset='100%' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='14.7' cy='15' r='13.1' fill='url(%23s)'/%3E%3Ccircle cx='14' cy='14' r='11' fill='%23171B21'/%3E%3Ccircle cx='14' cy='14' r='11' fill='none' stroke='%235A6472' stroke-width='.8' opacity='.8'/%3E%3Cpolygon points='22.6,14 18.3,21.45 9.7,21.45 5.4,14 9.7,6.55 18.3,6.55' fill='url(%23k)'/%3E%3Cpolygon points='22.6,14 18.3,21.45 9.7,21.45 5.4,14 9.7,6.55 18.3,6.55' fill='none' stroke='%2310141A' stroke-width='.85'/%3E%3Cpath d='M 5.4 14 L 9.7 6.55 L 18.3 6.55 L 22.6 14' fill='none' stroke='%23E4EBF5' stroke-width='1.1' stroke-linejoin='round' opacity='.62'/%3E%3Cpath d='M 22.6 14 L 18.3 21.45 L 9.7 21.45 L 5.4 14' fill='none' stroke='%2305070A' stroke-width='1' stroke-linejoin='round' opacity='.5'/%3E%3Ccircle cx='14' cy='14' r='3.4' fill='%230A0C10'/%3E%3Ccircle cx='14' cy='14' r='3.4' fill='none' stroke='%2359636F' stroke-width='.7' opacity='.65'/%3E%3Ccircle cx='12.9' cy='12.8' r='1' fill='%23E6ECF5' opacity='.32'/%3E%3C/svg%3E");
  --abrieb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='30'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045 0.14' numOctaves='3' seed='13'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='260' height='30' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* Sektionen mit eigenem Material laufen ueber die volle Breite,
   der Inhalt bleibt im Raster. */
.section--material { max-width: none; position: relative; }
.section--material > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* Abgegriffene Warnfarbe als Sektionskante. Die Maske frisst
   Stuecke heraus, sonst sieht der Streifen frisch gezogen aus. */
.kante-oben::before,
.kante-unten::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 13px;
  z-index: 2;
  background: repeating-linear-gradient(114deg,
    var(--amber) 0 19px, #101217 19px 38px);
  -webkit-mask-image: var(--abrieb);
  mask-image: var(--abrieb);
  -webkit-mask-size: 260px 13px;
  mask-size: 260px 13px;
  opacity: .8;
  pointer-events: none;
}
.kante-oben::before { top: 0; }
.kante-unten::after { bottom: 0; }

/* Der Schein einer Roehre gehoert in ihre eigene Sektion. Ohne diese Grenze
   lief das Gruen aus den Leistungen bis weit ueber das Riffelblech der
   naechsten Sektion und sah dort aus wie ein Fehler, nicht wie Licht.
   Die Kantenbaender liegen bei top:0 bzw. bottom:0, sie werden nicht beschnitten. */
.section--material { overflow: hidden; }

/* Senkrechte Roehren haengen im Seitenrand NEBEN dem Inhalt. Dieser Rand ist
   (100vw - maxw)/2 breit, bei maxw 1200px also erst ab etwa 1440px breit
   genug fuer Roehre plus Halterung. Darunter lagen sie quer ueber dem Foto.
   Deshalb: senkrecht nur auf breiten Schirmen, sonst eine waagerechte am
   Sektionsfuss, wo sie mit nichts kollidieren kann. */
.neon--breit { display: none; }
@media (min-width: 1440px) {
  .neon--breit { display: block; }
  .neon--schmal { display: none; }
}

/* --- Lage der einzelnen Roehren ---
   Grundfall ist der schmale Schirm. Dort laufen die Roehren fast ueber die
   volle Breite: eine kurze Roehre liest sich als heller Strich, erst ab Laenge
   wird sie zur Lampe. Vorher waren die Werte style-Attribute im HTML und mit
   festen Pixelwerten gemischt, dadurch blieben auf dem Handy Stummel von 96
   bis 195px stehen und die blaue fiel ersatzlos weg. */
#leistungen .neon--blau.neon--schmal { left: 7%; right: 7%; top: 30px; }
#leistungen .neon--gruen { left: 7%; right: 7%; bottom: 30px; }
#ablauf .neon--orange.neon--schmal { left: 7%; right: 7%; bottom: 32px; }
#festpreise .neon--rot { left: 9%; right: 9%; bottom: 30px; }
/* Im Einspalter fuellt die Auftragskarte die Sektion fast ganz aus, und anders
   als die dunklen Karten im Ablauf ist sie deckend und cremeweiss. Sie
   verschluckt die Roehre komplett, sichtbar blieben nur die beiden Enden.
   Deshalb bekommt die Sektion hier einen eigenen Fuss, damit die Roehre auf
   freier Wand steht und ihr Kegel die Kartenunterkante anleuchtet. */
@media (max-width: 1000px) {
  #festpreise { padding-bottom: 116px; }
}

@media (min-width: 1440px) {
  #leistungen .neon--blau.neon--breit { right: 76px; top: 24%; bottom: 22%; }
  #leistungen .neon--gruen { left: 56%; right: 76px; bottom: 52px; }
  #ablauf .neon--orange.neon--breit { left: 74px; top: 16%; bottom: 18%; }
  /* Die rote bleibt auf breiten Schirmen genau so, wie sie abgenommen wurde */
  #festpreise .neon--rot { left: 13%; right: 37%; bottom: 46px; }
}

/* Leistungen: lackierte Stahlwand mit Schleifspuren */
#leistungen {
  background:
    linear-gradient(180deg, rgba(6,7,9,.55), transparent 16%, transparent 84%, rgba(6,7,9,.6)),
    var(--schliff),
    linear-gradient(166deg, #1B1F26 0%, #121519 52%, #0B0D11 100%);
  background-size: auto, 400px 240px, auto;
  border-top: 1px solid var(--stahl);
}

/* Ablauf: Riffelblech, wie der Hallenboden */
#ablauf {
  background:
    linear-gradient(180deg, rgba(11,12,16,.93), rgba(11,12,16,.72) 38%, rgba(11,12,16,.94)),
    radial-gradient(820px 500px at 20% 12%, rgba(255,214,140,.1), transparent 68%),
    var(--riffelblech);
  background-size: auto, auto, 74px 74px;
}

/* Festpreise: Betonwand, dahinter gedaempft die Werkzeugwand */
#festpreise {
  background:
    radial-gradient(900px 520px at 86% 12%, rgba(255,180,0,.06), transparent 62%),
    /* Grossflaechige Verschmutzung und Streiflicht bewusst als Verlaeufe, nicht
       als Textur: Verlaeufe spannen sich ueber die ganze Sektion und koennen
       darum gar keine Kachelnaht erzeugen. Das Korn kommt aus --beton. */
    radial-gradient(780px 440px at 16% 82%, rgba(0,0,0,.45), transparent 72%),
    radial-gradient(640px 400px at 62% 18%, rgba(214,224,240,.045), transparent 70%),
    var(--beton),
    linear-gradient(172deg, #15171C, #0A0B0E 70%);
  background-size: auto, auto, auto, 240px 240px, auto;
}
#festpreise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/werkzeug.webp") center/cover no-repeat;
  opacity: .07;
  filter: grayscale(.65) contrast(1.05) blur(3px);
  pointer-events: none;
}
#festpreise > *:not(.neon) { position: relative; z-index: 1; }

/* Termin: echte Halle im Ruecken, stark abgedunkelt */
/* Foto und Abdunklung liegen als Ebenen im Hintergrund der Sektion selbst,
   NICHT in ::before. Die Klasse kante-oben belegt dieses Pseudo-Element
   bereits mit der Warnfarbe, und es gibt pro Element nur eines: das Foto
   wurde dadurch auf die 13 px Streifenhoehe zusammengedrueckt. */
/* Werkstatt: Zielflagge im Ruecken, nach demselben Muster wie das Hallenfoto
   beim Terminformular. Sie soll man ahnen, nicht lesen, deshalb liegen zwei
   Abdunklungen darueber: eine von oben nach unten, eine von der Seite. Ohne
   die zweite steht die Flagge an den Raendern zu klar im Bild. */
#werkstatt { position: relative; }
/* Die Sektion selbst ist auf --maxw begrenzt und zentriert. Traegt sie den
   Hintergrund direkt, endet die Flagge an dieser Kante und daneben bleibt
   Schwarz stehen. Deshalb liegt sie in einem Pseudo-Element, das per
   left:50% / 100vw / translateX ueber die volle Fensterbreite ausbricht.
   Der waagerechte Ueberstand ist unkritisch, html traegt overflow-x: clip. */
#werkstatt::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,11,14,.95), rgba(10,11,14,.78) 44%, rgba(10,11,14,.98)),
    linear-gradient(97deg, rgba(10,11,14,.95) 0 5%, rgba(10,11,14,.6) 50%, rgba(10,11,14,.95) 95%),
    var(--rennflagge) center 42% / auto 118% repeat-x,
    #0A0B0E;
}
/* Auf dem Handy skaliert die Hoehenangabe die Felder auf gut 90px hoch, dann
   passen keine vier mehr nebeneinander und es liest sich als grobes Karo statt
   als Stoff. Deshalb dort ueber die Breite steuern. */
@media (max-width: 700px) {
  #werkstatt::before {
    background-size: auto, auto, 760px auto, auto;
    /* Waagerecht allein reicht hier nicht: die Sektion ist auf dem Handy ueber
       1200px hoch, eine Bahn deckt aber nur rund 460px. Oben und unten blieb
       deshalb Schwarz stehen. Jetzt kachelt die Fahne in beide Richtungen. */
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  }
}
#werkstatt > * { position: relative; z-index: 1; }

#termin {
  background:
    linear-gradient(100deg, rgba(10,11,14,.93) 0 40%, rgba(10,11,14,.42) 72%, rgba(10,11,14,.7)),
    linear-gradient(180deg, rgba(10,11,14,.86), rgba(10,11,14,.48) 40%, rgba(10,11,14,.92)),
    url("../img/halle-arbeit.webp") center 38% / cover no-repeat,
    #0A0B0E;
}
#termin > *:not(.neon) { position: relative; z-index: 1; }

/* Nieten in den Ecken: aus einer Div wird eine angeschraubte Platte */
/* Radmutter statt Punkt: Sechskant in einer Senkung, Fase oben links faengt
   das Licht, unten rechts liegt der Schatten. Gleiche Lichtrichtung wie
   Riffelblech und Zielflagge, sonst faellt die Platte optisch auseinander.
   Als eine Grafik viermal gesetzt, deshalb laesst sich die Groesse pro
   Bauteil ueber background-size steuern. */
/* Nur fuer grosse Bauteile: Tacho-Feld und Wagenbild. Auf den Zaehlerkarten
   war es zu eng, die haben auf dem Handy nur 14px Polsterung und die Mutter
   sass genau dort, wo der Text anfaengt. Vier Karten mal vier Muttern waren
   ausserdem einfach zu viel. */
.genietet {
  background-image: var(--radmutter), var(--radmutter), var(--radmutter), var(--radmutter);
  background-position:
    16px 16px, calc(100% - 16px) 16px,
    16px calc(100% - 16px), calc(100% - 16px) calc(100% - 16px);
  background-size: 26px 26px;
  background-repeat: no-repeat;
}

/* Kreidenotiz: die menschliche Ebene. Wie mit Kreide an die
   Hallenwand geschrieben, leicht schief. */
.kreide {
  display: inline-block;
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: clamp(18px, 2.1vw, 25px);
  line-height: 1.25;
  color: rgba(214, 222, 232, .52);
  transform: rotate(-2.2deg);
  transform-origin: left center;
}
.kreide--amber { color: rgba(255, 180, 0, .62); }
.kreide-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.kreide-zeile::before {
  content: "";
  width: clamp(26px, 5vw, 62px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,180,0,.5));
  flex-shrink: 0;
}

/* Werkstattschild: gestanzte Blechmarke fuer Sektionsnummern */
.hallenschild {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(154, 163, 175, .85);
  background: linear-gradient(160deg, #22262E, #14171C);
  border: 1px solid #333A45;
  border-radius: 3px;
  padding: 6px 12px 6px 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px rgba(0,0,0,.5);
}
.hallenschild b { color: var(--amber); font-weight: 700; }
/* Der Absatz mit dem Schild trug keinen Abstand nach unten, die Unterkante des
   Schilds beruehrte die Ueberschrift auf den Pixel genau. Etwas mehr als bei
   .eyebrow (16px), weil das Schild mit Rahmen und Flaeche schwerer wiegt als
   eine reine Textzeile. */
.schild-zeile { margin-bottom: clamp(18px, 2vw, 26px); }

/* Arbeitsfoto: Haende am Motor */
.arbeit-foto {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--stahl);
}
.arbeit-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: contrast(1.06) brightness(.94);
}
.arbeit-foto figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 18px 14px;
  font-size: 13.5px;
  color: var(--nebel);
  background: linear-gradient(transparent, rgba(8,9,11,.94));
}
.arbeit-foto figcaption b { color: var(--amber); }

/* ============================================================
   NEONROEHREN AN DEN HALLENWAENDEN
   Tiefe, gesaettigte Neonfarben. Die drei Toene liegen bewusst
   in derselben kalten Familie (Cyan -> Violett -> Magenta):
   kraeftig, aber immer noch EIN Raum und kein Regenbogen.
   Amber bleibt Markenfarbe der Bedienelemente, das Licht der
   Halle ist ein anderes Thema.

   Damit man die Roehre als Roehre erkennt, reicht eine helle
   Linie nicht. Sie braucht Dicke, einen weissgluehenden Kern
   mit farbiger Glaswand darum, Elektrodenkappen an den Enden
   und einen Lichtkegel auf der Flaeche dahinter.
   ============================================================ */
:root {
  --neon-blau: 30, 74, 255;
  --neon-rot: 255, 26, 44;
  --neon-orange: 255, 122, 10;
  --neon-gruen: 57, 255, 20;
}

.neon {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border-radius: 99px;
}
/* Lichtkegel auf der Wand dahinter */
.neon::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
/* Elektrodenkappen: ohne sie ist es ein Strich, mit ihnen eine Lampe */
.neon::before {
  content: "";
  position: absolute;
  z-index: 2;
  border-radius: 4px;
  pointer-events: none;
}

/* --- waagerecht --- */
.neon--quer {
  height: 12px;
  background: linear-gradient(180deg,
    rgba(var(--ton), .45) 0%,
    rgba(var(--ton), .98) 20%,
    #ffffff 43%, #ffffff 57%,
    rgba(var(--ton), .98) 80%,
    rgba(var(--ton), .45) 100%);
  box-shadow:
    0 0 9px 2px rgba(var(--ton), .95),
    0 0 26px 7px rgba(var(--ton), .68),
    0 0 68px 18px rgba(var(--ton), .4),
    0 0 150px 50px rgba(var(--ton), .18);
}
.neon--quer::before {
  inset: -3px -9px;
  background:
    linear-gradient(165deg, #39404B, #14171C) left center / 16px 100% no-repeat,
    linear-gradient(165deg, #39404B, #14171C) right center / 16px 100% no-repeat;
}
.neon--quer::after {
  left: -16%; right: -16%;
  top: 0; height: 380px;
  background: radial-gradient(62% 100% at 50% 0%, rgba(var(--ton), .44), transparent 76%);
}

/* --- senkrecht --- */
.neon--laengs {
  width: 12px;
  background: linear-gradient(90deg,
    rgba(var(--ton), .45) 0%,
    rgba(var(--ton), .98) 20%,
    #ffffff 43%, #ffffff 57%,
    rgba(var(--ton), .98) 80%,
    rgba(var(--ton), .45) 100%);
  box-shadow:
    0 0 9px 2px rgba(var(--ton), .95),
    0 0 26px 7px rgba(var(--ton), .68),
    0 0 68px 18px rgba(var(--ton), .4),
    0 0 150px 50px rgba(var(--ton), .18);
}
.neon--laengs::before {
  inset: -9px -3px;
  background:
    linear-gradient(165deg, #39404B, #14171C) center top / 100% 16px no-repeat,
    linear-gradient(165deg, #39404B, #14171C) center bottom / 100% 16px no-repeat;
}
.neon--laengs::after {
  top: -10%; bottom: -10%;
  left: 0; width: 520px;
  background: radial-gradient(100% 54% at 0% 50%, rgba(var(--ton), .4), transparent 78%);
}

/* Rechts montiert: Kegel faellt nach links */
.neon--rechts::after {
  left: auto; right: 0;
  background: radial-gradient(100% 54% at 100% 50%, rgba(var(--ton), .4), transparent 78%);
}
/* Bodenleiste: strahlt nach oben */
.neon--unten::after {
  top: auto; bottom: 0; height: 420px;
  background: radial-gradient(62% 100% at 50% 100%, rgba(var(--ton), .44), transparent 76%);
}

.neon--blau { --ton: var(--neon-blau); }
.neon--rot { --ton: var(--neon-rot); }
.neon--orange { --ton: var(--neon-orange); }
.neon--gruen { --ton: var(--neon-gruen); }

/* Leises Atmen. Sehr flach dosiert, flackerndes Neon nervt schnell. */
@media (prefers-reduced-motion: no-preference) {
  .neon { animation: neon-atmen 5.5s ease-in-out infinite; }
  .neon--laengs { animation-duration: 7s; animation-delay: -2s; }
}
@keyframes neon-atmen {
  0%, 100% { opacity: 1; }
  50% { opacity: .9; }
}

@media (max-width: 860px) {
  .neon--laengs { display: none; }
  .neon--quer::after { height: 230px; }
}

/* Pflicht-Nennung fuer das CC-BY-lizenzierte 3D-Modell. Ohne sie waere die
   Lizenz verletzt, deshalb steht sie sichtbar im Footer und nicht versteckt. */
.lizenz-hinweis {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--nebel);
  opacity: .8;
}
.lizenz-hinweis a { text-decoration: underline; text-underline-offset: 2px; }

/* Sobald WebGL laeuft, uebernimmt das 3D-Instrument und die SVG-Anzeige
   verschwindet. Bleibt WebGL aus, aendert sich nichts. */
.tacho-canvas { display: block; width: 100%; height: auto; }
/* Zwei Stufen, damit weder etwas Falsches zu sehen ist noch das Layout
   springt. wartet-3d setzt das Inline-Skript sofort: die Rueckfallgrafik wird
   nicht mehr GEZEICHNET, behaelt aber ihren Platz. hat-3d setzt das Modul erst,
   wenn die Zeichenflaeche wirklich haengt, dann darf sie ganz raus. Eine feste
   Platzreservierung waere ungenau, unter dem Instrument sitzt noch die
   Preisanzeige. */
.tacho.wartet-3d > svg { visibility: hidden; }
.tacho.hat-3d > svg { display: none; }
.hero-felge.wartet-3d .felge-svg { visibility: hidden; }