Post 3: zweite Slide, und eine Komponenten-Library fuers Video

POST 3
Slide 2 zeigt den Aufbau: HiveGrid in der Mitte, die eigenen Module auf dem
gelben Ring, die fremden Programme aussen am gestrichelten Kreis. Nachbau des
Schaubilds aus dem Prototyp, aber in den Markenfarben -- Magenta ist keine
(rules.md 2) -- und ohne Produktnamen im Kern.

Achtung: das ist eine andere Aussage als in post2-alt.html, wo in der Mitte
das Branchenprogramm liegt und HiveGrid ausdruecklich der Ring ist. Steht als
Warnung im Code. Die Ueberschrift "Der Kern bleibt." passt seit dem Wechsel
der Mitte nicht mehr zum Bild und ist noch offen.

Slide 1 traegt nur noch die Ueberschrift; ein leerer Fliesstext erzeugt jetzt
keinen leeren Absatz mehr. Das Wabenfeld ist enger geschnitten (Faktor 1,301
statt 1,227) und steht am Anschlag: 96 px zur Slide-Kante, die Sicherheitszone
liegt bei 92. Ueberschriften in 76 px und 3 px versetzt wie in post2-alt --
gemessen, nicht geschaetzt.

Zwei Fehler, die dabei aufgefallen sind:

- Die Andock-Kacheln lagen auf denselben Strahlen wie die Module und
  beruehrten sich. Dieselbe Ueberlappung hat der Exportpruefung eine Spanne
  von 37 vorgetaeuscht, wo eine fehlende Marke 0 ergeben muss -- der
  Gegentest kam durch, obwohl die Marke fehlte. 22,5 Grad Versatz behebt
  beides.
- Die Pruefung kannte nur den Ausschnitt des Wabenfelds und haette auf
  Slide 2 an der falschen Stelle gemessen. Der Ausschnitt wandert jetzt mit
  in die Ablage, wabenZonen heisst darum markenZonen.

VIDEO
Neuer Ordner video/ mit 13 Einblendungen fuer den Schnitt, jede als Standbild
und als Bildsequenz mit Ein- und Ausblendung, alle mit Alphakanal. Gerendert
aus komponenten.html von bauen.mjs ueber CDP; kein ffmpeg noetig, weil eine
Bildsequenz dieselbe Transparenz traegt wie ProRes 4444.

Der Schatten fehlte zunaechst ganz: die Karte trug clip-path fuer die Ecken
und box-shadow fuer den Schatten, und clip-path beschneidet ihn mit. Genau so
steht es in rules.md 3. Sitzt jetzt als drop-shadow auf einer Huelle.

NEBENBEI
- Das ZIP hiess in allen Projektdateien "hivegrid-post1-loesung", weil sie
  voneinander kopiert wurden. Kommt jetzt aus PROJECT.
- Das rechte Element-Feld liess sich nicht schliessen, wenn es nicht ganz ins
  Fenster passte: sein Knopf rutschte als erster hinaus. Knopf nach vorn,
  Escape hebt die Auswahl auf, max-width auf den Feldern.
- uebersicht.html schrieb "1 Slides".

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

post2.html

@@ -146,8 +146,14 @@ if (location.search.indexOf("nur=streifen") >= 0)
   .forget:hover { color: #EB7C6B; }
 
   /* ─── Control panel ──────────────────────────────────────────────────── */
+  /* max-width statt nur width: bei einem schmalen Fenster kaempfen linkes
+     Feld, Buehne und rechtes Feld um denselben Platz, und ohne Obergrenze
+     schiebt sich das rechte aus dem Fenster. Dann ist es nicht mehr
+     zuzumachen, weil sein Knopf mit hinausrutscht.
+     overflow statt overflow-y aus demselben Grund: wird das Feld schmal,
+     muss sein Inhalt waagerecht erreichbar bleiben. */
   .panel {
-    width: 306px; flex: none; height: 100%; overflow-y: auto;
+    width: 306px; max-width: 42vw; flex: none; height: 100%; overflow: auto;
     padding: 28px 22px 40px 28px;
     border-right: 1px solid #24262F; background: #17181F;
   }
@@ -1093,9 +1099,13 @@ if (location.search.indexOf("nur=streifen") >= 0)
 </main>
 
 <aside class="panel panel-rechts" id="element-panel">
+  <!-- Der Schliessknopf steht vor der Ueberschrift und nicht dahinter. Am
+       rechten Rand war er der erste, der verschwand, sobald das Feld nicht
+       ganz ins Fenster passte -- und damit war das Feld nicht mehr
+       zuzumachen. Vorn ist er immer da. -->
   <div class="el-kopf">
+    <button class="el-zu" id="el-zu" title="Auswahl aufheben (Esc)">✕</button>
     <h1 id="el-titel">Element</h1>
-    <button class="el-zu" id="el-zu" title="Auswahl aufheben">✕</button>
   </div>
   <div id="el-inhalt"></div>
 </aside>
@@ -3542,8 +3552,13 @@ if (location.search.indexOf("nur=streifen") >= 0)
     }
     show(current);
     setStatus("Packe ZIP …");
+    /* Der Name kommt aus PROJECT und nicht aus einer festen Zeichenkette.
+       Vorher stand hier "hivegrid-post1-loesung" -- in allen Projektdateien,
+       weil sie voneinander kopiert wurden. Post 2 und Post 3 haben ihre ZIPs
+       damit unter dem Namen von Post 1 abgelegt, und im Downloads-Ordner lagen
+       drei verschiedene Beitraege unter einem Namen. */
     const path = await downloadBlob(await zip.generateAsync({ type: "blob" }),
-                                    "hivegrid-post1-loesung-" + variant + ".zip");
+                                    "hivegrid-" + PROJECT + "-" + variant + ".zip");
     setStatus("ZIP gespeichert: " + path.split("/").pop() + ", " + ausgabeGroesse(), "ok");
   }
 
@@ -4222,10 +4237,24 @@ if (location.search.indexOf("nur=streifen") >= 0)
     if (c) { put("#f-dx", c.x); put("#f-dy", c.y); }
   }
 
-  document.getElementById("el-zu").addEventListener("click", () => {
+  /* Auswahl aufheben, und damit das rechte Feld zu. Zwei Wege, weil einer
+     zu wenig war: der Knopf setzt voraus, dass man ihn sieht, und genau das
+     war nicht immer der Fall. Escape geht immer.
+
+     Nicht wenn gerade in einem Feld getippt wird -- dort soll Escape die
+     Eingabe verlassen und nicht die Auswahl wegnehmen. */
+  function auswahlAufheben() {
+    if (!picked) return;
     picked = null;
     deck.querySelectorAll("[data-edit]").forEach(n => n.classList.remove("picked"));
     syncEditPanel();
+  }
+  document.getElementById("el-zu").addEventListener("click", auswahlAufheben);
+  document.addEventListener("keydown", e => {
+    if (e.key !== "Escape") return;
+    const z = document.activeElement;
+    if (z && /^(INPUT|TEXTAREA|SELECT)$/.test(z.tagName)) return;
+    auswahlAufheben();
   });
 
   document.getElementById("el-inhalt").addEventListener("click", ev => {