Die Anmeldung bekommt die Biene in Schraegsicht

Die 3/4-Ansicht ist unter 64 px unbrauchbar und deshalb genau hier richtig:
Auf dem Anmeldebildschirm ist Platz, und man wartet ohnehin auf den Anbieter.
Sie schwebt sechs Sekunden lang zwei Pixel weit — eher ein Atmen als eine
Bewegung, und bei prefers-reduced-motion steht sie still.

Gerechnet wird sie in tools/biene.py aus demselben Raster wie die anderen
Fassungen.

web/css/style.css

@@ -944,8 +944,26 @@ body {
   overflow: hidden;
 }
 
+/* Die Biene über dem Anmeldeknopf, in Schrägsicht. Sie schwebt ein wenig —
+   sechs Sekunden für zwei Pixel, also eher ein Atmen als eine Bewegung. Wer
+   Bewegung abgestellt hat, bekommt sie ruhig. */
+.login-biene {
+  display: block;
+  width: clamp(96px, 22vw, 132px);
+  height: auto;
+  margin: 22px 0 0;
+  image-rendering: pixelated;
+  animation: schweben 6s ease-in-out infinite;
+}
+@keyframes schweben {
+  50% { transform: translateY(-4px); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .login-biene { animation: none; }
+}
+
 .login-box {
-  margin-top: 26px;
+  margin-top: 20px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;

web/img/biene-3d.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" shape-rendering="crispEdges" aria-hidden="true"><rect x="23" y="3" width="1" height="1" fill="#3b2412"/><rect x="22" y="4" width="1" height="1" fill="#3b2412"/><rect x="10" y="5" width="1" height="1" fill="#3b2412"/><rect x="15" y="5" width="6" height="1" fill="#d6d1be"/><rect x="11" y="6" width="1" height="1" fill="#3b2412"/><rect x="17" y="6" width="6" height="1" fill="#d6d1be"/><rect x="8" y="7" width="6" height="1" fill="#f5f2e7"/><rect x="19" y="7" width="6" height="1" fill="#d6d1be"/><rect x="10" y="8" width="6" height="1" fill="#f5f2e7"/><rect x="12" y="9" width="6" height="1" fill="#f5f2e7"/><rect x="13" y="10" width="4" height="1" fill="#ffd060"/><rect x="17" y="10" width="2" height="1" fill="#5c3a1c"/><rect x="11" y="11" width="3" height="1" fill="#5c3a1c"/><rect x="14" y="11" width="5" height="1" fill="#ffd060"/><rect x="19" y="11" width="2" height="1" fill="#5c3a1c"/><rect x="9" y="12" width="2" height="1" fill="#ffd060"/><rect x="11" y="12" width="5" height="1" fill="#5c3a1c"/><rect x="16" y="12" width="5" height="1" fill="#ffd060"/><rect x="21" y="12" width="2" height="1" fill="#5c3a1c"/><rect x="7" y="13" width="1" height="1" fill="#5c3a1c"/><rect x="8" y="13" width="5" height="1" fill="#ffd060"/><rect x="13" y="13" width="5" height="1" fill="#5c3a1c"/><rect x="18" y="13" width="5" height="1" fill="#ffd060"/><rect x="23" y="13" width="2" height="1" fill="#5c3a1c"/><rect x="5" y="14" width="5" height="1" fill="#5c3a1c"/><rect x="10" y="14" width="5" height="1" fill="#ffd060"/><rect x="15" y="14" width="5" height="1" fill="#5c3a1c"/><rect x="20" y="14" width="5" height="1" fill="#ffd060"/><rect x="25" y="14" width="2" height="1" fill="#5c3a1c"/><rect x="5" y="15" width="2" height="1" fill="#f2b33d"/><rect x="7" y="15" width="5" height="1" fill="#5c3a1c"/><rect x="12" y="15" width="5" height="1" fill="#ffd060"/><rect x="17" y="15" width="5" height="1" fill="#5c3a1c"/><rect x="22" y="15" width="3" height="1" fill="#ffd060"/><rect x="25" y="15" width="2" height="1" fill="#462b14"/><rect x="5" y="16" width="4" height="1" fill="#f2b33d"/><rect x="9" y="16" width="5" height="1" fill="#5c3a1c"/><rect x="14" y="16" width="5" height="1" fill="#ffd060"/><rect x="19" y="16" width="4" height="1" fill="#5c3a1c"/><rect x="23" y="16" width="2" height="1" fill="#d2952a"/><rect x="25" y="16" width="2" height="1" fill="#462b14"/><rect x="5" y="17" width="6" height="1" fill="#f2b33d"/><rect x="11" y="17" width="5" height="1" fill="#5c3a1c"/><rect x="16" y="17" width="5" height="1" fill="#ffd060"/><rect x="21" y="17" width="2" height="1" fill="#462b14"/><rect x="23" y="17" width="2" height="1" fill="#d2952a"/><rect x="25" y="17" width="2" height="1" fill="#462b14"/><rect x="5" y="18" width="2" height="1" fill="#f2b33d"/><rect x="7" y="18" width="2" height="1" fill="#181410"/><rect x="9" y="18" width="4" height="1" fill="#f2b33d"/><rect x="13" y="18" width="5" height="1" fill="#5c3a1c"/><rect x="18" y="18" width="1" height="1" fill="#ffd060"/><rect x="19" y="18" width="2" height="1" fill="#d2952a"/><rect x="21" y="18" width="2" height="1" fill="#462b14"/><rect x="23" y="18" width="2" height="1" fill="#d2952a"/><rect x="25" y="18" width="2" height="1" fill="#462b14"/><rect x="5" y="19" width="2" height="1" fill="#f2b33d"/><rect x="7" y="19" width="1" height="1" fill="#181410"/><rect x="8" y="19" width="1" height="1" fill="#63c7c0"/><rect x="9" y="19" width="1" height="1" fill="#181410"/><rect x="10" y="19" width="5" height="1" fill="#f2b33d"/><rect x="15" y="19" width="2" height="1" fill="#5c3a1c"/><rect x="17" y="19" width="1" height="1" fill="#462b14"/><rect x="18" y="19" width="3" height="1" fill="#d2952a"/><rect x="21" y="19" width="2" height="1" fill="#462b14"/><rect x="23" y="19" width="2" height="1" fill="#d2952a"/><rect x="25" y="19" width="2" height="1" fill="#462b14"/><rect x="5" y="20" width="2" height="1" fill="#f2b33d"/><rect x="7" y="20" width="3" height="1" fill="#181410"/><rect x="10" y="20" width="2" height="1" fill="#f2b33d"/><rect x="12" y="20" width="1" height="1" fill="#181410"/><rect x="13" y="20" width="3" height="1" fill="#f2b33d"/><rect x="16" y="20" width="2" height="1" fill="#462b14"/><rect x="18" y="20" width="3" height="1" fill="#d2952a"/><rect x="21" y="20" width="2" height="1" fill="#462b14"/><rect x="23" y="20" width="2" height="1" fill="#d2952a"/><rect x="25" y="20" width="2" height="1" fill="#462b14"/><rect x="5" y="21" width="4" height="1" fill="#f2b33d"/><rect x="9" y="21" width="1" height="1" fill="#181410"/><rect x="10" y="21" width="2" height="1" fill="#f2b33d"/><rect x="12" y="21" width="3" height="1" fill="#181410"/><rect x="15" y="21" width="1" height="1" fill="#f2b33d"/><rect x="16" y="21" width="2" height="1" fill="#462b14"/><rect x="18" y="21" width="3" height="1" fill="#d2952a"/><rect x="21" y="21" width="2" height="1" fill="#462b14"/><rect x="23" y="21" width="2" height="1" fill="#d2952a"/><rect x="25" y="21" Line truncated

web/index.html

@@ -21,6 +21,9 @@
       <!-- ── Anmeldung ──────────────────────────────────────────────────── -->
       <div class="login" id="login" hidden>
         <pre class="boot-log" id="loginLog"></pre>
+        <!-- Einmal groß: die Schrägsicht. Sie ist unter 64 px unbrauchbar, und
+             hier ist Platz — man wartet ohnehin auf den Anbieter. -->
+        <img class="login-biene" src="./img/biene-3d.svg" alt="" width="128" height="128" />
         <div class="login-box">
           <button class="login-btn" id="btnLogin">&#9656; <span id="loginLabel">Anmelden</span></button>
           <p class="login-note" id="loginNote"></p>