Fahrzeugbild zeigt die Fahrt: Strasse, Baeume, etwas Fahrtwind

Ob das Auto gerade rollt, stand bisher nur klein unter der Karte
("unterwegs - zuletzt: ..."). Im Bild selbst, wo man zuerst hinsieht, war es
nicht zu erkennen.

Waehrend der Fahrt liegt jetzt eine Strasse unter dem Wagen: dunkler Belag,
gestrichelte Markierungen in den Randstreifen neben den Raedern, zwei Reihen
Baumkronen, die aussen vorbeiziehen. Dazu vier Windstreifen - zwei neben dem
Wagen, zwei ueber ihn hinweg, heller und duenner, damit sie wie Luft wirken
und nicht wie ein Riss im Lack.

Beide Schleifen treffen sich selbst: die Striche wandern um eine
Strich-Lueckenlaenge (46), die Baumreihen um ihren Abstand (160) - danach
steht das Muster wieder wie zuvor, und man sieht keinen Sprung. Markierungen
und Baeume laufen mit derselben Geschwindigkeit, der Wind etwa anderthalbmal
so schnell; groessere Unterschiede lassen die Bewegungen auseinanderfallen.

Dazu ein Abzeichen "unterwegs" im Kopf der Kachel - fuer Vorleseprogramme und
fuer alle, die Bewegungen abgeschaltet haben; dann steht die Landschaft still
(prefers-reduced-motion).

Der Zustand kommt aus park_state der juengsten Zeile; der Broker kennt ihn
nicht, unter solarManager/ev* stehen nur Ladestand, Reichweite und Ladung.
Unterwegs fragt der Sammler alle vier Minuten, die Seite laedt jede Minute
nach - die Anzeige hinkt also um wenige Minuten hinterher.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

css/solar.css

@@ -1131,6 +1131,114 @@ input[type='range']::-webkit-slider-runnable-track {
   stroke-width: 2;
 }
 
+/* --- Strasse ------------------------------------------------------------
+   Sichtbar nur waehrend der Fahrt. Sie traegt die eigentliche Bewegung: der
+   Belag dunkelt die Flaeche ab, die Markierungen laufen in den Randstreifen
+   neben den Raedern, die Baeume ziehen aussen vorbei.
+
+   Beide Schleifen sind so gebaut, dass sie sich selbst treffen: die Striche
+   wandern um eine Strich-Lueckenlaenge (26 + 20 = 46), die Baumreihen um
+   ihren Abstand (160). Nach einem Durchlauf steht das Muster wieder wie
+   zuvor - deshalb sieht man keinen Sprung.
+
+   Alle drei laufen mit derselben Geschwindigkeit von rund 180 Einheiten je
+   Sekunde: Markierungen und Baeume gehoeren zur selben Landschaft, und ein
+   Baum, der langsamer zurueckbleibt als der Strich daneben, faellt sofort
+   auf. */
+.skoda-auto .strasse { display: none; }
+.skoda-auto.faehrt .strasse { display: block; }
+
+.skoda-auto .strasse .belag {
+  fill: rgba(8, 10, 12, 0.35);
+}
+
+.skoda-auto .strasse .markierung line {
+  stroke: rgba(232, 237, 233, 0.35);
+  stroke-width: 3;
+  stroke-dasharray: 26 20;
+  animation: skoda-markierung 0.26s linear infinite;
+}
+
+.skoda-auto .strasse .baum {
+  fill: rgba(96, 140, 104, 0.55);
+  stroke: rgba(52, 84, 60, 0.7);
+  stroke-width: 1.2;
+}
+.skoda-auto .strasse .baumreihe { animation: skoda-baeume 0.9s linear infinite; }
+/* Die rechte Reihe etwas langsamer und mit Vorlauf - sonst stehen sich die
+   Baeume paarweise gegenueber. */
+.skoda-auto .strasse .rechts { animation-duration: 1.05s; animation-delay: -0.4s; }
+
+@keyframes skoda-markierung {
+  from { transform: translateY(0); }
+  to   { transform: translateY(46px); }
+}
+@keyframes skoda-baeume {
+  from { transform: translateY(0); }
+  to   { transform: translateY(160px); }
+}
+
+/* --- Fahrtwind ----------------------------------------------------------
+   Vier Streifen neben dem Wagen, die von vorn nach hinten laufen. Sichtbar
+   nur, solange zeichneFahrt() dem SVG die Klasse "faehrt" gibt.
+
+   Die Laenge der Streifen steckt im Markup (y1/y2), die Bewegung hier: jede
+   Spur laeuft in eigenem Takt und mit eigenem Vorlauf ueber das Bild, sonst
+   marschieren die vier im Gleichschritt und es sieht nach Zebrastreifen aus
+   statt nach Fahrt. Der Weg reicht von weit oberhalb bis weit unterhalb der
+   viewBox (-8 bis 508), damit kein Streifen im Bild entsteht oder endet. */
+.skoda-auto .fahrtwind { display: none; }
+.skoda-auto.faehrt .fahrtwind { display: block; }
+/* Die Streifen ueber dem Wagen liegen ueber den beiden Knoepfen; sie duerfen
+   deren Beruehrungen nicht abfangen. */
+.skoda-auto .fahrtwind-oben { pointer-events: none; }
+
+.skoda-auto .fahrtwind line {
+  stroke: rgba(var(--skoda-blech), 0.75);
+  stroke-width: 4;
+  stroke-linecap: round;
+  animation: skoda-fahrtwind 1.1s linear infinite;
+}
+/* Vier Spuren, jede mit eigenem Takt und Vorlauf. Der Wind zieht etwa
+   anderthalbmal so schnell wie die Landschaft: schneller, weil Luft ueber den
+   Wagen streicht, aber nicht so viel schneller, dass die beiden Bewegungen
+   auseinanderfallen. */
+.skoda-auto .fahrtwind .b1 { animation-duration: 2.40s; animation-delay: -0.30s; opacity: .5; }
+.skoda-auto .fahrtwind .b6 { animation-duration: 2.60s; animation-delay: -1.70s; opacity: .5; }
+
+/* Ueber dem Fahrzeug: heller, duenner, durchsichtiger. Der Wind zieht ueber
+   das Blech hinweg - er soll sich darauf legen, nicht hineinschneiden. Die
+   Streifen stehen dafuer in einer eigenen Gruppe am Ende des SVG (siehe
+   dort); ihre geringe Deckung haelt Ladestand und Umrisse lesbar. */
+.skoda-auto .fahrtwind .ueber {
+  stroke: rgba(232, 237, 233, 0.85);
+  stroke-width: 3;
+}
+.skoda-auto .fahrtwind .b7  { animation-duration: 2.30s; animation-delay: -0.60s; opacity: .34; }
+.skoda-auto .fahrtwind .b10 { animation-duration: 2.70s; animation-delay: -1.20s; opacity: .34; }
+
+@keyframes skoda-fahrtwind {
+  from { transform: translateY(0); }
+  to   { transform: translateY(680px); }
+}
+
+/* Wer Bewegung abbestellt hat, bekommt sie nicht - aber auch keine leere
+   Stelle: die Streifen stehen dann ruhig neben dem Wagen, und das Abzeichen
+   "unterwegs" im Kopf der Kachel sagt es ohnehin in Worten. */
+@media (prefers-reduced-motion: reduce) {
+  .skoda-auto .fahrtwind line {
+    animation: none;
+    transform: translateY(250px);
+    opacity: .45;
+  }
+  /* Strasse und Baeume bleiben stehen - zu sehen ist dann eine Standaufnahme
+     statt einer Fahrt, und das Abzeichen "unterwegs" sagt den Rest. */
+  .skoda-auto .strasse .markierung line,
+  .skoda-auto .strasse .baumreihe {
+    animation: none;
+  }
+}
+
 .skoda-auto .rad rect     { fill: rgba(18, 20, 24, 0.9); }
 .skoda-auto .spiegel rect { fill: rgba(var(--skoda-blech), 0.55); }
 .skoda-auto .spoiler      { fill: rgba(var(--skoda-blech), 0.55); }