Die Buehnen richtig: nicht mehr beschnitten, hell, mit Lesespur

Drei handfeste Fehler, alle im Screenshot zu sehen gewesen.

1. ABGESCHNITTEN. background-size stand auf "138% auto". Auf einem
   2540 px breiten Schirm wurde das Bild damit 3500 px breit und knapp
   2000 px hoch -- in einem 1300 px hohen Fenster fehlten 700 px, und
   zwar oben. Genau deshalb waren die Figuren riesig und ihre Koepfe
   weg. Jetzt cover mit Verankerung auf 50% 42%: Die Flaeche wird immer
   gefuellt, so wenig wie noetig skaliert, und wenn etwas beschnitten
   werden muss, dann Fussboden und Decke -- nicht die Gesichter.

2. DIE VIGNETTE LAG FALSCH HERUM. Abgedunkelt wurde die MITTE, also
   genau der Teil, in dem die Szene steht. Man sah die Raender des
   Bildes und in der Mitte einen grauen Fleck. Jetzt laufen die RAENDER
   ins Dunkle und die Mitte bleibt klar -- so wie in der Fotografie.

3. ZWEI SCHICHTEN DUNKELHEIT. Zusaetzlich zur Vignette legte der
   Schleier .86/.58/.44 Schwarz ueber dasselbe Bild. Jetzt nur noch
   oben (Kopfleiste) und unten (Seitenende) ein Streifen.

Dazu die Bilder selbst: Helligkeit 0.66 -> 0.88, mehr Kontrast und
Farbe. Sie sind ein BILD, kein Nebel.

DIE LESESPUR ist der eigentliche Kniff. In allen neun Szenen stehen
HasiDog und DogFather AUSSEN, die Mitte ist frei -- danach wurden sie
ausgesucht. Diese Aufteilung wird jetzt benutzt statt bekaempft: aussen
bleibt das Bild hell und scharf, in der Mitte (wo der Text steht) wird
gedaempft. Der klare Rand ist in jedem Fenster mindestens 400 px breit.
Auf dem Handy gibt es daneben keinen Platz, dort deckt die Spur alles.

Was frei stand und keine Karte hatte, bekommt eine Lesezone mit
backdrop-filter: Der Hintergrund bleibt in Farbe und Form sichtbar,
wird an dieser Stelle aber weichgezeichnet. Die billige Loesung waere
gewesen, das Bild wieder abzudunkeln -- damit waere man dort, wo man
angefangen hat.

ZWEITER FUND AN DER EIGENEN KONTRASTMESSUNG. Sie tastete
ausschliesslich NEBEN dem Element ab. Traegt ein Text seine Flaeche
aber selbst (eine Beschriftung mit Hintergrund und Polsterung), liegt
jeder Punkt daneben schon auf dem Bild -- gemeldet wurden 1,89:1,
obwohl der Text auf deckender Flaeche steht und tadellos lesbar ist.
Jetzt wird zuerst in der eigenen Polsterung gemessen, also auf dem,
worauf der Text WIRKLICH liegt. (Der erste Fund an derselben Stelle war
gestern: Sie mass Text gegen Nachbartext.)

Nach dem Aufhellen einmal komplett durchgemessen: von sieben roten
Stellen auf null. Schlechtester Wert jetzt 4,70:1 bei 4,5:1 Norm.

Die Bilder sind groesser geworden (580 KB -> 1,8 MB fuer alle achtzehn),
weil weniger Dunkelheit weniger komprimierbar ist. Geladen wird pro
Seite genau eine: 42 bis 132 KB.

Co-Authored-By: Claude Opus 5 <[email protected]>

tools/buehne-bauen.mjs

@@ -100,11 +100,14 @@ const AUFTRAEGE = [
          Zug DICHTER geworden sind (siehe --glas in gate.css). Der Text
          steht dadurch auf eigener Flaeche statt direkt auf dem Bild --
          das Bild darf hell sein, ohne die Lesbarkeit anzugreifen. */
-      helligkeit: 0.66, saettigung: 1.08, kontrast: 1.04,
-      /* Die Vignette macht die Mitte ruhig, in der der Inhalt steht.
-         Schwaecher als vorher (0.52 statt 0.72), weil die Flaechen die
-         Arbeit jetzt selbst machen. */
-      vignette: { x: 0.5, y: 0.42, rx: 0.5, ry: 0.66, staerke: 0.52 },
+      /* Dritter Anlauf am 01.09.2026, und diesmal deutlich: 0.42 -> 0.66
+         war noch zu wenig. Jetzt 0.88 mit mehr Kontrast und Farbe -- die
+         Szene ist ein BILD, kein Nebel. Tragen kann sie das, weil aller
+         Text auf eigenen, deckenden Flaechen steht (--flaeche). */
+      helligkeit: 0.88, saettigung: 1.16, kontrast: 1.1,
+      /* Kein dunkler Fleck mehr in der Mitte -- stattdessen laufen die
+         RAENDER weich ins Dunkle. Siehe die Begruendung weiter unten. */
+      randvignette: { beginn: 0.5, staerke: 0.78 },
       /* Oben ausblenden: dort sitzt die Kopfleiste. */
       verlauf: [{ von: [0, 0], nach: [0, 0.14], stopps: [[0, 0.55], [1, 0]] }],
       guete: 0.72,
@@ -116,8 +119,8 @@ const AUFTRAEGE = [
       ausschnitt: schmalA,
       /* Auf dem Handy etwas zurueckhaltender als am Rechner: Der Text
          nimmt dort fast die ganze Flaeche ein, das Bild traegt weniger. */
-      helligkeit: 0.56, saettigung: 1.02, kontrast: 1.03,
-      vignette: { x: 0.5, y: 0.45, rx: 0.72, ry: 0.64, staerke: 0.6 },
+      helligkeit: 0.74, saettigung: 1.1, kontrast: 1.06,
+      randvignette: { beginn: 0.42, staerke: 0.8 },
       verlauf: [{ von: [0, 0], nach: [0, 0.12], stopps: [[0, 0.55], [1, 0]] }],
       guete: 0.68,
     },
@@ -214,6 +217,34 @@ for (const a of AUFTRAEGE) {
 
     /* Vignette: dunkler Fleck in der Mitte. Er wird DRAUFGEMALT (nicht
        ausradiert), damit dort, wo der Text steht, wirklich Ruhe ist. */
+    /* DIE VIGNETTE LIEGT AUSSEN, NICHT IN DER MITTE.
+
+       Bis zum 01.09.2026 wurde die MITTE abgedunkelt -- also genau der
+       Teil, in dem die Szene steht. Ergebnis: Man sah nur die Raender
+       des Bildes, und die Mitte war ein grauer Fleck. Genau das meinte
+       Filipe mit "sieht ganz komisch aus".
+
+       Richtig herum ist es andersherum, so wie in der Fotografie: Die
+       Raender laufen weich ins Dunkle, die MITTE bleibt hell und klar.
+       Das Bild bekommt dadurch Tiefe statt Nebel. Moeglich ist das,
+       seit der Text auf eigenen Flaechen steht (--flaeche) und nicht
+       mehr direkt auf dem Bild liegt. */
+    if (a.randvignette) {
+      const v = a.randvignette;
+      g.save();
+      g.translate(0.5 * a.breite, 0.5 * a.hoehe);
+      /* Ueber die Diagonale skaliert, damit die Ecken wirklich erfasst
+         werden -- bei einem Kreis ueber die Breite blieben sie hell. */
+      g.scale(a.breite * 0.78, a.hoehe * 0.78);
+      const gr = g.createRadialGradient(0, 0, 0, 0, 0, 1);
+      gr.addColorStop(0, "rgba(5,7,13,0)");
+      gr.addColorStop(v.beginn ?? 0.55, "rgba(5,7,13,0)");
+      gr.addColorStop(1, `rgba(5,7,13,${v.staerke})`);
+      g.fillStyle = gr;
+      g.fillRect(-1.4, -1.4, 2.8, 2.8);
+      g.restore();
+    }
+
     if (a.vignette) {
       const v = a.vignette;
       g.save();