Material statt Farbe -- Kacheln werden Gegenstaende, die Karte ein Bildschirm

Filipe: "ich will dass alle kacheln viel geiler und spezieller aussehen,
viel realistischer" und "so dass der komplette von der kachel vom
hintergrund bild komplett bedeckt ist. ueberrasch mich."

DIE BILDER: BEARBEITET STATT ABGEDUNKELT.
Bis hierher tat der Bildbauer zwei Dinge -- kleiner rechnen und einen
schwarzen Schleier darueberlegen. Abdunkeln macht ein Bild aber nicht
ruhiger, sondern TOT: Es zieht jede Farbe zur Mitte, und uebrig bleibt
ein grauer Schleier mit einer Ahnung von Motiv.

Drei Dinge, die ein Fotograf zuerst anfasst, und keines davon ist
"dunkler":
  * KONTRAST -- Verkleinern MITTELT Bildpunkte; deshalb wirkt jedes
    verkleinerte Bild flauer als das Original, und deshalb schaerft man
    danach nach.
  * SAETTIGUNG -- holt das Rot der Chili und das Gruen der Blaetter
    zurueck, die der Schleier herausgewaschen hatte.
  * VIGNETTE -- der eigentliche Unterschied zwischen "Screenshot" und
    "Aufnahme". Ein Objektiv verliert zu den Ecken hin Licht; das Auge
    liest das als Tiefe. Sie ersetzt ausserdem einen Teil des flachen
    Schleiers: Dunkel wird, wo ohnehin nichts steht.
Der flache Schleier sinkt dadurch von 0,42 auf 0,26 -- heller UND
lesbar, weil die Vignette genau dort arbeitet, wo die Kacheln liegen.

DIE KACHELN: VIER DINGE, DIE EIN DING VON EINEM RECHTECK TRENNEN.
Sie hatten Farbverlauf, Lichtkante und ein Licht, das dem Zeiger folgt --
und blieben Rechtecke mit Farbe darin. Es fehlten:
  1. GEWICHT. Ein Ding, das auf etwas liegt, wirft einen Schatten, auch
     wenn es niemand anfasst. Den gab es nur beim Ueberfahren.
  2. MATERIALSTAERKE. Ein Blech hat oben eine Licht- UND unten eine
     Schattenkante. Nur die obere ergibt einen aufgeklebten Strich.
  3. KOERNUNG. Perfekt glatte Verlaeufe kommen in der Natur nicht vor,
     und das Auge merkt das, ohne es benennen zu koennen. Drei Prozent
     Rauschen genuegen -- aus einem SVG-Filter als Adresse, also ohne
     Datei und ohne zusaetzliche Anfrage.
  4. DURCHSICHT. Hinter den Kacheln liegt jetzt ein aufwendiges Bild.
     Eine deckende Flaeche verdeckt es, eine mattierte nimmt seine Farbe
     auf -- erst dadurch gehoeren beide zusammen.
Beim Ueberfahren wird die Kachel nicht heller, sondern kommt NAEHER:
Sie steigt, ihr Schatten wird groesser und weicher (der Abstand zum
Untergrund waechst). So verhaelt sich ein angehobener Gegenstand.

DIE ANMELDEKARTE: EIN GERAET STATT EINES BILDES AN DER WAND.
Sie sass mit Abstand in der gemalten Tafel -- zwei Rahmen ineinander,
dazwischen schwarze Leere. Jetzt geht sie bis unter das Gluehen des
Neonrahmens: Der Rahmen ist das Gehaeuse, die Karte der eingeschaltete
Bildschirm. Sie leuchtet von den Kanten herein in den Farben des Rahmens
(rot oben links, blau unten rechts), traegt eine Glasscheibe als sehr
schwache Spiegelung und dieselbe Koernung. Die Rollen sind Tasten
geworden: Materialstaerke oben hell, unten dunkel, beim Druecken sinken
sie ein, und die gewaehlte ist beleuchtet statt eingefaerbt.
Alle Angaben bleiben -- vier Rollen mit Beschreibung, Codefeld, Auge,
Rollenhinweis, Fusszeile. "Hochwertiger" heisst nicht "weniger drin".

EIN ECHTER FUND DABEI: --text-still lag ploetzlich bei genau 4,50:1
statt der noetigen 4,5. Der Ton war am 01.09. gegen die DAMALIGE,
dunklere Buehne gemessen. Wer den Hintergrund heller macht, muss die
leiseste Schrift nachziehen -- sonst haette man den Aufwand auch lassen
koennen. Erkannt daran, dass die Zahl sich bei zwei Schleier-Aenderungen
NICHT bewegte: Die Pruefung rechnet mit der CSS-Farbe.

Gemessen statt angesehen: Kontrast an echten Bildpunkten (pruef-buehne),
neun Bildschirmbreiten, drei Handygroessen, Ladezeit und Datenvolumen,
Klassen, Struktur, Startseite -- alles gruen. Die Seiten ueber dem
CLS-Zielwert sind nebenbei von sieben auf vier gesunken.

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

tools/gate-bauen.mjs

@@ -201,8 +201,50 @@ console.log(`  --gate-seiten:  ${tafel.breite} / ${tafel.hoehe};`);
  *  aussieht, und die Karte bringt ihren eigenen dunklen Untergrund mit.
  *  Auf der Startseite darf er kraeftig sein -- dort liegt Text direkt
  *  darauf. */
+/** Verkleinert, VEREDELT und gibt WebP zurueck.
+ *
+ *  ---------------------------------------------------------------------
+ *  WARUM HIER MEHR PASSIERT ALS VERKLEINERN (07.09.2026)
+ *
+ *  Filipe: "die hintergrund bilder will ich auch dass die viel viel viel
+ *  besser aussehen."
+ *
+ *  Bis hierher tat dieses Werkzeug genau zwei Dinge: kleiner rechnen und
+ *  einen schwarzen Schleier darueberlegen. Abdunkeln macht ein Bild aber
+ *  nicht ruhiger, sondern TOT -- es zieht jede Farbe zur Mitte, und was
+ *  bleibt, ist ein grauer Schleier mit einer Ahnung von Motiv. Genau so
+ *  sahen sie aus.
+ *
+ *  Was ein Bild stattdessen hochwertig macht, sind drei Dinge, die jeder
+ *  Fotograf zuerst anfasst -- und keines davon ist "dunkler":
+ *
+ *    1. TIEFE STATT SCHWAERZE. Ein leichter Kontrastzug trennt die
+ *       hellen von den dunklen Stellen wieder, die das Verkleinern
+ *       zusammengeschoben hat. Verkleinern MITTELT Bildpunkte; das ist
+ *       der Grund, warum jedes verkleinerte Bild flauer wirkt als das
+ *       Original, und der Grund, warum man danach nachschaerft.
+ *
+ *    2. FARBE, DIE DAS MOTIV HAT. Ein Hauch Saettigung holt das Rot der
+ *       Chili und das Gruen der Blaetter zurueck, die der Schleier
+ *       herausgewaschen hat.
+ *
+ *    3. EINE VIGNETTE. Das ist der eigentliche Unterschied zwischen
+ *       "Screenshot" und "Aufnahme". Ein echtes Objektiv laesst zu den
+ *       Ecken hin Licht verlieren; das Auge liest das als Tiefe und
+ *       fuehrt den Blick zur Mitte. Sie ersetzt hier ausserdem einen
+ *       Teil des flachen Schleiers: Dunkel wird, wo ohnehin nichts
+ *       steht, und nicht dort, wo das Motiv ist.
+ *
+ *  Damit sinkt der flache Schleier von 0,42 auf 0,26 -- das Bild wird
+ *  heller UND der Text bleibt lesbar, weil die Vignette genau an den
+ *  Raendern arbeitet, an denen die Kacheln liegen. Nachgemessen von
+ *  pruef-buehne an echten Bildpunkten.
+ *
+ *  Alles im Browser gerechnet, der ohnehin fuer die Pruefungen da ist --
+ *  kein Bildprogramm, keine neue Abhaengigkeit, 0 EUR.
+ */
 async function bauen({ quelle, ziel, breite, ausschnitt = null, dunkel = 0, guete = 0.82,
-  seitenverhaeltnis = null }) {
+  seitenverhaeltnis = null, kontrast = 1.08, saettigung = 1.1, vignette = 0.34 }) {
   const webp = await seite.evaluate(async (a) => {
     const i = new Image(); i.src = a.daten; await i.decode();
 
@@ -218,14 +260,37 @@ async function bauen({ quelle, ziel, breite, ausschnitt = null, dunkel = 0, guet
     c.width = zb; c.height = zh;
     const g = c.getContext("2d");
     g.imageSmoothingQuality = "high";
-    g.drawImage(i, qx, qy, qb, qh, 0, 0, zb, zh);
 
+    /* 1 + 2: Kontrast und Saettigung BEIM ZEICHNEN -- der Filter wirkt
+       auf die Bildpunkte, die gerade entstehen, nicht auf eine zweite
+       Ebene darueber. Deshalb bleibt es scharf. */
+    g.filter = `contrast(${a.kontrast}) saturate(${a.saettigung})`;
+    g.drawImage(i, qx, qy, qb, qh, 0, 0, zb, zh);
+    g.filter = "none";
+
+    /* 3: Die Vignette. Elliptisch ueber die ganze Flaeche, in der Mitte
+       voellig klar, zu den Ecken hin dunkel. Der weiche Verlauf ist
+       wichtig -- eine harte Kante saehe aus wie ein Fehler und nicht wie
+       ein Objektiv. */
+    if (a.vignette > 0) {
+      const r = Math.max(zb, zh) * 0.75;
+      const v = g.createRadialGradient(zb / 2, zh * 0.46, r * 0.18, zb / 2, zh * 0.46, r);
+      v.addColorStop(0, "rgba(0,0,0,0)");
+      v.addColorStop(0.55, `rgba(0,0,0,${(a.vignette * 0.22).toFixed(3)})`);
+      v.addColorStop(0.8, `rgba(0,0,0,${(a.vignette * 0.62).toFixed(3)})`);
+      v.addColorStop(1, `rgba(0,0,0,${a.vignette.toFixed(3)})`);
+      g.fillStyle = v;
+      g.fillRect(0, 0, zb, zh);
+    }
+
+    /* Und erst danach der flache Schleier -- so wenig wie noetig. */
     if (a.dunkel > 0) {
       g.fillStyle = `rgba(0,0,0,${a.dunkel})`;
       g.fillRect(0, 0, zb, zh);
     }
     return c.toDataURL("image/webp", a.guete);
-  }, { daten: alsDatenAdresse(quelle), breite, ausschnitt, dunkel, guete, seitenverhaeltnis });
+  }, { daten: alsDatenAdresse(quelle), breite, ausschnitt, dunkel, guete, seitenverhaeltnis,
+       kontrast, saettigung, vignette });
 
   const puffer = Buffer.from(webp.split(",")[1], "base64");
   writeFileSync(ziel, puffer);
@@ -263,7 +328,7 @@ for (const b of [960, 1280, 1600, 1920, 2560]) {
     /* Nur ein Hauch. Der Neonrahmen der Tafel ist das, was die Karte
        traegt -- wer ihn wegdunkelt, hat ein huebsches Bild und eine
        Karte, die im Nichts schwebt. */
-    dunkel: 0.14, guete: 0.88,
+    dunkel: 0.08, guete: 0.88, vignette: 0.26,
   });
   console.log(`  gate-${b}.webp  ${Math.round(n / 1024)} KB`);
 }
@@ -354,7 +419,7 @@ const SZENEN = {
 
    0,42 ist gemessen, nicht geraten -- siehe den Lauf von pruef-buehne
    nach dem Bau. */
-const DUNKEL = 0.42;
+const DUNKEL = 0.26;
 
 console.log("\n--- Die neun Buehnen ---");
 let gesamt = 0;