Projektuebersicht: alle Streifen untereinander auf einer Flaeche

Neu unter Projekt -> "Alle Projekte im Streifen". uebersicht.html zeigt die
Streifen aller drei Projekte gestapelt, ohne Sidebar, auf derselben Art
Flaeche wie der Generator: ziehen schiebt, das Rad zoomt, Fit passt ein.

Die Seite baut die Slides nicht nach. Jedes Projekt kommt als iframe mit
?nur=streifen; in diesem Modus blendet die Post-Seite ihre Bedienoberflaeche
aus und zeigt den Streifen in natuerlicher Groesse, skaliert wird aussen.
Ein Nachbau wuerde irgendwann von dem abweichen, was der Generator zeigt,
und waere dann schlimmer als keine Uebersicht.

Drei Dinge, die dieser Modus regelt:

- Es wird nichts gespeichert (stateLocked). Drei Kacheln, die beim
  Schliessen ihren Stand zurueckschreiben, waeren genau die Falle aus
  POST-2.md 6.
- Die Ansicht steht fest auf "streifen". Post 2 stand im Stand auf
  "einzeln" und meldete deshalb 1080 px statt der vollen Breite.
- Der Auswahlrahmen faellt weg; in der Uebersicht ist keine Slide "die
  aktuelle".

Die Streifenbreite kommt per postMessage von der Post-Seite: die Zahl der
Slides ist je Projekt anders und soll nicht zweimal gepflegt werden.

Beim Einpassen zaehlen Beschriftung, Abstaende und Polster nicht mit --
die skalieren nicht, weil sie ausserhalb des transformierten iframes
stehen. Ohne diese Rechnung lief die letzte Reihe unten hinaus.

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

post1.html

@@ -1,6 +1,13 @@
 <!doctype html>
 <html lang="de">
 <head>
+<script>
+/* Uebersichts-Modus: die Seite laeuft dann als Kachel in uebersicht.html.
+   Das Attribut muss vor dem ersten Zeichnen stehen, sonst blitzt die
+   Bedienoberflaeche kurz auf. Deshalb hier oben und nicht im Hauptskript. */
+if (location.search.indexOf("nur=streifen") >= 0)
+  document.documentElement.dataset.nur = "streifen";
+</script>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>PostGrid Post 1 · Lösung</title>
@@ -753,6 +760,26 @@
     --guide-axis: rgba(48,49,61,.45);
     --guide-mid:  rgba(200,144,26,.75);
   }
+
+  /* ─── Uebersichts-Modus ──────────────────────────────────────────────────
+     Die Seite zeigt dann nur den Streifen, in natuerlicher Groesse und ohne
+     eigenen Rahmen: die Uebersicht setzt sie als iframe ein und skaliert
+     selbst. Alles Bedienbare faellt weg, auch die Hilfslinien. */
+  html[data-nur="streifen"] { overflow: hidden; }
+  html[data-nur="streifen"] .menubar,
+  html[data-nur="streifen"] .panel,
+  html[data-nur="streifen"] .hud,
+  html[data-nur="streifen"] .guides { display: none !important; }
+  /* Der Auswahlrahmen ist eine Bedienhilfe und hat in der Uebersicht nichts
+     verloren -- dort ist keine Slide "die aktuelle". */
+  html[data-nur="streifen"] .holder.sel::after { display: none; }
+  html[data-nur="streifen"] .stage { background: none; height: auto; }
+  html[data-nur="streifen"] .scroller { position: static; overflow: visible; }
+  html[data-nur="streifen"] .canvas { padding: 0; display: block;
+    width: max-content; min-width: 0; height: max-content; min-height: 0; }
+  html[data-nur="streifen"] body, html[data-nur="streifen"] .app {
+    height: auto; min-height: 0; background: none; overflow: visible;
+  }
 </style>
 </head>
 <body>
@@ -767,6 +794,8 @@
       <button type="button" data-gehe="./post2.html">Post 2</button>
       <button type="button" data-gehe="./post2-alt.html">Post 2 · Alternative</button>
       <hr>
+      <button type="button" data-gehe="./uebersicht.html">Alle Projekte im Streifen</button>
+      <hr>
       <button type="button" data-klick="snap-save">Stand merken</button>
       <button type="button" data-klick="snap-load">Zurück zum gemerkten Stand</button>
       <hr>
@@ -1296,7 +1325,12 @@
      Voreinstellung an und schreibt die beim ersten Klick ueber genau die
      Datei, die gerade nicht verstanden wurde. Solange die Sperre steht, geht
      nichts mehr raus, weder in die Datei noch in den localStorage. */
-  let stateLocked = false;
+  /* Im Uebersichts-Modus wird nichts gespeichert: drei Kacheln, die beim
+     Schliessen ihren Stand zurueckschreiben, waeren genau die Falle aus
+     POST-2.md 6. Die Konstante steht hier oben, weil stateLocked sie
+     braucht -- weiter unten waere sie noch nicht initialisiert. */
+  const NUR_STREIFEN = document.documentElement.dataset.nur === "streifen";
+  let stateLocked = NUR_STREIFEN;
   function lockState(grund) {
     stateLocked = true;
     clearTimeout(pushTimer); pushTimer = null;
@@ -1487,7 +1521,10 @@
     variant = d.variant || variant;
     tilt = d.tilt || tilt;
     superSample = d.superSample || superSample;
-    view = d.view || view;
+    /* Der Uebersichts-Modus zeigt immer den Streifen. Steht im Stand
+       "einzeln", waere sonst nur die zuletzt gewaehlte Slide zu sehen --
+       und stripWidth() meldete 1080 statt der vollen Breite. */
+    view = NUR_STREIFEN ? "streifen" : (d.view || view);
     tagOut = d.tagOut || tagOut;
     frameStyle = d.frameStyle || frameStyle;
     current = Number.isInteger(d.current) ? Math.min(d.current, SLIDES.length - 1) : 0;
@@ -1526,7 +1563,8 @@
      springt. */
   /* zoom === null bedeutet: automatisch einpassen. Sobald der Nutzer zoomt,
      hält der Wert, bis er auf "Fit" zurückgeht. */
-  let zoom = null;
+  // Im Uebersichts-Modus steht der Streifen fest auf 100 % -- skaliert wird aussen.
+  let zoom = NUR_STREIFEN ? 1 : null;
 
   function stripWidth() { return view === "streifen" ? 1080 * SLIDES.length : 1080; }
 
@@ -1537,6 +1575,16 @@
     return Math.min(availW / stripWidth(), availH / 1350, 0.45);
   }
 
+  /* Die Uebersicht muss wissen, wie breit dieser Streifen ist -- die Zahl
+     der Slides ist je Projekt anders. Sie kommt per postMessage statt ueber
+     einen Griff ins iframe-Dokument: so bleibt die Uebersicht von den
+     Interna der Post-Seite unabhaengig. */
+  function groesseMelden() {
+    if (!NUR_STREIFEN || parent === window) return;
+    parent.postMessage({ hg: "streifen", w: stripWidth(), h: 1350,
+                         titel: document.title }, "*");
+  }
+
   function fitStrip() {
     const wrap = document.getElementById("strip-wrap");
     const k = zoom || autoFit();
@@ -1545,6 +1593,7 @@
     wrap.style.height = Math.round(1350 * k) + "px";
     const lvl = document.getElementById("zoom-fit");
     if (lvl) lvl.textContent = zoom ? Math.round(k * 100) + " %" : "Fit";
+    groesseMelden();
   }
 
   function setZoom(k, anchor) {