/* Anmelde- und Hinweisseiten von fahrzeuge.most.cloud im Muster von MOST OS und sm.most.cloud:
   links Bühne in Graphit mit der Flotte als Kolonne, rechts weiß. Rot ist Signal, keine Fläche. */

:root {
  --graphit: #1b1a1a;
  --ink: #060606;
  --text: #2b2a2a;
  --sub: #676464;
  --linie: #e6e5e1;
  --rot: #c11412;
  --signal: #ff2214;
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-text: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-text);
  background: var(--graphit);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.seite {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr);
}

/* ---------- Bühne ---------- */
.buehne {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 85% 100%, #2e2c2c, #1b1a1a 55%, #0d0c0c);
  color: #fff;
  display: flex;
  padding: 48px 56px;
}
.text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  max-width: 580px;
  min-width: 0;
}
.marke {
  display: flex;
  align-items: center;
  gap: 18px;
}
.marke svg {
  display: block;
  height: 20px;
  width: auto;
}
.marke span {
  border-left: 1px solid #4a4747;
  padding-left: 18px;
  font: 700 14px/1 var(--font-display);
  font-stretch: 118%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
}

/* Textschleier: Glas über dem Motiv (Ink 50 %, 18 px Blur, Linie 14 %) */
.schleier {
  background: rgba(6, 6, 6, 0.5);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 32px 32px 28px;
}
.kennung {
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 14px;
}
.text h1 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  font-weight: 700;
  text-wrap: balance;
}

/* ---------- rechte Seite ---------- */
.rechts {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 48px 0;
  min-width: 0;
}
.karte {
  margin: auto 0;
  max-width: 380px;
  display: grid;
  gap: 16px;
  justify-items: start;
}
.signet {
  display: block;
  height: 18px;
  width: auto;
  margin-bottom: 8px;
}
.karte h2 {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 118%;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.karte p {
  margin: 0;
  color: var(--sub);
  font-size: 15.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.karte .klein { font-size: 13px; }

/* Microsoft-Knopf nach Microsofts Vorgabe: weiß, graue Kante, Logo links */
.ms-knopf {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 41px;
  padding: 0 14px 0 12px;
  background: #fff;
  border: 1px solid #8c8c8c;
  color: #5e5e5e;
  font: 600 15px/1 "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
  margin-top: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.ms-knopf:hover { background: #f3f3f3; border-color: #5e5e5e; }

/* Knopf der Hinweisseite: eigene Aktion, nicht Microsoft */
.knopf {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--ink);
  color: #fff;
  font: 600 15px/1.2 var(--font-text);
  text-decoration: none;
  margin-top: 6px;
  transition: background 0.15s;
}
.knopf:hover { background: #2b2a2a; }

.ms-knopf:focus-visible, .knopf:focus-visible, .fuss a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--sub);
  border-top: 1px solid var(--linie);
  margin: 32px -48px 0;
  padding: 16px 48px 20px;
}
.fuss nav { display: flex; gap: 6px 18px; flex-wrap: wrap; }
.fuss a { color: var(--sub); text-decoration: none; }
.fuss a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Motiv: die Flotte als Kolonne ----------
   Die Strichzeichnungen aus app/zeichnungen fahren maßstäblich (1 cm = 0,24 Einheiten) auf einer
   gemeinsamen Grundlinie nach rechts. Die Kolonne steht zweimal hintereinander und rückt in 140 s
   um genau eine Kolonnenlänge vor, dadurch läuft sie ohne Sprung endlos.
   Erreicht ein Fahrzeug die rote Messlinie, leuchtet seine Maßlinie kurz auf. Die Verzögerung
   steht je Fahrzeug als --v im HTML und ist aus Lage und Tempo errechnet (kein Skript nötig). */
.motiv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.drift {
  animation: drift 80s ease-in-out infinite alternate;
  transform-box: view-box;
  transform-origin: 580px 380px;
}
.raster { fill: #3a3838; opacity: 0.5; }

/* Striche bleiben bei jedem Maßstab gleich dünn */
.motiv path, .motiv line { vector-effect: non-scaling-stroke; }
.zk { fill: none; stroke: #8a8686; stroke-width: 1.2; stroke-linejoin: round; }
.zi { fill: none; stroke: #6a6767; stroke-width: 1; stroke-linejoin: round; }
.zh { fill: none; stroke: #464343; stroke-width: 1; }

.grund { stroke: #4a4747; stroke-width: 1; }
.skala { stroke: #3a3838; stroke-width: 1; }
.hilfs { stroke: #464343; stroke-width: 1; }

.mass line { stroke: #6a6767; stroke-width: 1; }
.mass text {
  font: 500 8.6px var(--font-mono);
  letter-spacing: 0.08em;
  fill: #8a8686;
  text-anchor: middle;
  /* Rand in Bühnenfarbe: die Messlinie verschwindet hinter der Beschriftung statt sie zu durchkreuzen */
  paint-order: stroke;
  stroke: #191818;
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.mass .wert { fill: #b5b1b1; }

.messlinie { stroke: url(#messverlauf); stroke-width: 1.5; }
.messschein { stroke: url(#messverlauf); stroke-width: 7; opacity: 0.16; }
.messfuss { fill: var(--signal); }

/* Muss zur Kolonnenlänge im HTML passen (data-laenge an .fahrt) */
.fahrt { animation: fahrt 140s linear infinite; }
@keyframes fahrt {
  from { transform: translateX(-2826.5px); }
  to { transform: translateX(0); }
}
.mass line { animation: mass-strich 140s linear infinite; animation-delay: var(--v, 0s); }
.mass text { animation: mass-text 140s linear infinite; animation-delay: var(--v, 0s); }
.mass .wert { animation: mass-wert 140s linear infinite; animation-delay: var(--v, 0s); }
/* 0 % ist der Moment, in dem die Front die Messlinie erreicht: kurz rot, dann zurück ins Grau */
@keyframes mass-strich {
  0%, 2.5% { stroke: var(--signal); }
  7%, 100% { stroke: #6a6767; }
}
@keyframes mass-text {
  0%, 2.5% { fill: var(--signal); }
  7%, 100% { fill: #8a8686; }
}
@keyframes mass-wert {
  0%, 2.5% { fill: var(--signal); }
  7%, 100% { fill: #b5b1b1; }
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-18px, -12px) scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .drift, .fahrt, .mass line, .mass text, .mass .wert { animation: none; }
  /* Im Stillstand zeigt das Fahrzeug an der Messlinie seine Maßlinie rot */
  .mass.steht line { stroke: var(--signal); }
  .mass.steht text, .mass.steht .wert { fill: var(--signal); }
}

/* ---------- schmal ---------- */
@media (max-width: 900px) {
  .seite { grid-template-columns: 1fr; }
  .buehne { padding: 28px 16px 32px; min-height: 360px; }
  .text { gap: 28px; }
  .schleier { padding: 22px 20px 20px; }
  .rechts { padding: 32px 16px 0; }
  .fuss { margin: 32px -16px 0; padding: 16px 16px 20px; }
  .motiv { opacity: 0.75; }
  /* Kolonne höher, damit sie zwischen Marke und Schleier fährt statt dahinter */
  .lage { transform: translateY(-90px); }
}
@media (max-width: 600px) {
  .buehne { min-height: 330px; }
  .lage { transform: translateY(-125px); }
}