Ostergruss: eine Bananenschale auf der Fahrbahn

Ganz selten liegt waehrend der Fahrt eine Bananenschale auf der Strasse, und
der Wagen kommt kurz ins Schleudern - erst bricht er nach rechts aus, dann
faengt ihn das Gegenlenken, dann trudelt er aus.

Der Vorlauf der zweiten Bewegung ist gerechnet, nicht geschaetzt: die Schale
startet 40 Einheiten ueber dem Bild, die Vorderachse liegt bei 97, macht 137
Einheiten - bei 437 Einheiten je Sekunde sind das 0,31 s. Genau dann setzt
das Schleudern ein.

Damit das Fahrzeug sich drehen kann, ohne die Strasse mitzunehmen, liegt es
jetzt in einer eigenen Gruppe (#wagen); die Schale sitzt im Markup davor und
verschwindet unter der Karosserie, sobald der Wagen darueberrollt.

Ausgeloest wird alle 20 Sekunden mit zwei Prozent Wahrscheinlichkeit und nur
waehrend der Fahrt - im Mittel einmal in gut sechzehn Minuten. Selten genug,
dass man es nicht erwartet; haeufig genug, dass es irgendwann jemand sieht.
Wer Bewegungen abbestellt hat, bekommt den Gruss gar nicht erst: ein
schleuderndes Auto ist genau das, was damit gemeint ist. Haelt der Wagen
mitten im Ausrutscher an, wird die Schale eingesammelt.

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

css/solar.css

@@ -1165,6 +1165,53 @@ input[type='range']::-webkit-slider-runnable-track {
   to   { transform: translateY(472.5px); }
 }
 
+/* --- Bananenschale ------------------------------------------------------
+   Der Ostergruss. Ausgeloest wird er selten und nur waehrend der Fahrt (siehe
+   bananeVielleicht() in js/solar/skodaMQTT.js); hier steht, wie er aussieht.
+
+   Zwei Bewegungen greifen ineinander: die Schale laeuft mit der Strasse mit,
+   und wenn sie unter der Vorderachse ist, kommt der Wagen ins Schleudern. Der
+   Vorlauf der zweiten Bewegung ist deshalb kein Gefuehl, sondern gerechnet:
+   die Schale startet 40 Einheiten ueber dem Bild, die Vorderachse liegt bei
+   97, macht 137 Einheiten - bei 437 Einheiten je Sekunde sind das 0,31 s.
+
+   Der Wagen dreht sich um seinen Schwerpunkt, nicht um die Bildmitte; ohne
+   transform-box: view-box bezoege sich transform-origin auf den Rahmen der
+   Gruppe und der Bogen saehe falsch aus. */
+.skoda-auto .bananenschale { display: none; }
+.skoda-auto.banane .bananenschale {
+  display: block;
+  animation: skoda-schale 1.5s linear;
+}
+.skoda-auto .bananenschale use {
+  fill: #e8c74a;
+  stroke: rgba(120, 92, 12, 0.75);
+  stroke-width: 0.8;
+}
+.skoda-auto .bananenschale .strunk { fill: #b8912c; }
+
+.skoda-auto.banane #wagen {
+  transform-box: view-box;
+  transform-origin: 112px 250px;
+  animation: skoda-schleudern 1.2s 0.31s ease-in-out;
+}
+
+@keyframes skoda-schale {
+  from { transform: translateY(-40px); }
+  to   { transform: translateY(560px); }
+}
+
+/* Erst ein Ausbrechen nach rechts, dann das Gegenlenken, dann austrudeln -
+   in dieser Reihenfolge faengt sich ein Fahrzeug wieder. */
+@keyframes skoda-schleudern {
+  0%   { transform: rotate(0deg)    translateX(0); }
+  18%  { transform: rotate(4.5deg)  translateX(5px); }
+  45%  { transform: rotate(-3.5deg) translateX(-4px); }
+  70%  { transform: rotate(1.8deg)  translateX(2px); }
+  88%  { transform: rotate(-0.7deg) translateX(-1px); }
+  100% { transform: rotate(0deg)    translateX(0); }
+}
+
 /* --- Fahrtwind ----------------------------------------------------------
    Vier Streifen neben dem Wagen, die von vorn nach hinten laufen. Sichtbar
    nur, solange zeichneFahrt() dem SVG die Klasse "faehrt" gibt.
@@ -1222,6 +1269,14 @@ input[type='range']::-webkit-slider-runnable-track {
   .skoda-auto .strasse .leitlinie {
     animation: none;
   }
+  /* Der Ostergruss faellt ganz aus: ein schleuderndes Fahrzeug ist genau die
+     Art Bewegung, die abbestellt wurde. Ausgeloest wird er hier gar nicht
+     erst - das prueft das Skript zusaetzlich. */
+  .skoda-auto.banane .bananenschale,
+  .skoda-auto.banane #wagen {
+    animation: none;
+  }
+  .skoda-auto.banane .bananenschale { display: none; }
 }
 
 .skoda-auto .rad rect     { fill: rgba(18, 20, 24, 0.9); }