Neun Buehnen statt einer - jede Seite hat ihre eigene Szene

Filipe hat neun Bilder geschickt, damit es VERSCHIEDENE Hintergruende
gibt. Benutzt wurde davon genau eines (das Studio), die uebrigen acht
lagen unbenutzt im Ordner -- lounge.png und skyline.png sogar schon
fertig kopiert. Zu Recht beanstandet.

Jetzt wird aus jeder Szene eine Buehne, breit und schmal, und jede Seite
bekommt die, die zu ihr passt:

  studio      Startseite            der neutrale Ort, alles beginnt hier
  showbuehne  Dashboard, Review     die grosse Buehne, alles im Blick
  garage      Aufgaben, Technik     Werkstatt, hier wird gearbeitet
  skyline     Kalender              Nacht ueber der Stadt, Zeit
  lounge      Calls, Community      Sitzecke, hier wird geredet
  arena       Dateien, Wissen       Archiv hinter dem Portal
  halle       Profil, Personen      die Halle, in der jemand steht
  wald        Start-Check, Scouting der Weg, den man erst sucht
  portal      Content, LIVE         Durchgang, hier entsteht etwas

Die Zuordnung steht in bereiche.js -- derselben Liste, aus der schon
Zeichen und Farbton kommen. Eine Seite traegt damit dreierlei aus einer
einzigen Quelle: Farbe, Zeichen und Buehne. Sie koennen nicht
auseinanderlaufen.

Alle neun bekommen dieselbe Behandlung (abgedunkelt auf 0.42, Vignette
in der Mitte, wo der Text steht, oben ausgeblendet, wo die Kopfleiste
sitzt). Sie sehen verschieden aus und verhalten sich gleich -- eine
Buehne, die je Seite anders hell waere, waere Unruhe statt Vielfalt.
Der schmale Ausschnitt ist je Szene ein anderer, weil ein auf 9:16
gequetschtes Breitbild nur noch Wand zeigt; genommen wird der Bereich,
in dem die Figuren stehen.

18 Dateien, zusammen 580 KB -- pro Seite werden davon zwei geladen
(breit ODER schmal), also 16 bis 48 KB. Die Rohbilder waren 2,4 MB je
Stueck.

Kontrast auf allen sechs geprueften Seiten an echten Bildpunkten
nachgemessen: haelt (schlechtester Wert 4,59:1).

FUND: Die Buehnenpruefung suchte nach "buehne-breit" und fand die neuen
Namen nicht mehr -- sie meldete "die Buehne liegt im Hintergrund: FEHL",
obwohl sie da war.

Die Seitenpruefung sieht jetzt nach, dass jede Seite ihre Szene hat UND
dass das Bild wirklich ankommt: Ein data-buehne ohne passende CSS-Regel
waere still wirkungslos.

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

workspace/assets/css/start.css

@@ -49,12 +49,38 @@ body.start::before {
   content: "";
   position: fixed; inset: 0; z-index: 0;
   pointer-events: none;
-  background-image: url("../img/buehne-breit.webp");
   background-repeat: no-repeat;
   background-position: center bottom;
   background-size: 138% auto;
+  /* Rueckfall, falls eine Seite keine eigene Szene hat. */
+  background-image: url("../img/buehne-studio-breit.webp");
 }
 
+/* ---------- Neun Buehnen, nicht eine ------------------------------------
+
+   Filipe hat neun Bilder geschickt, damit es VERSCHIEDENE Hintergruende
+   gibt -- benutzt wurde davon lange nur das Studio. Jetzt hat jede Seite
+   ihre eigene Szene, ausgewaehlt ueber data-buehne am body (gesetzt von
+   kopf.js aus bereiche.js):
+
+     Aufgaben  Werkstatt      Kalender  Nachtstadt     Calls   Sitzecke
+     Dateien   Portal-Archiv  Profil    Halle          Scout   Wald
+     Dashboard grosse Buehne  Content   Durchgang      Start   Studio
+
+   Alle sind gleich abgedunkelt und tragen dieselbe Vignette -- sie sehen
+   verschieden aus und verhalten sich gleich. Eine Buehne, die je Seite
+   anders hell waere, waere Unruhe statt Vielfalt. */
+body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-studio-breit.webp"); }
+body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-showbuehne-breit.webp"); }
+body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-garage-breit.webp"); }
+body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-skyline-breit.webp"); }
+body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-lounge-breit.webp"); }
+body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-arena-breit.webp"); }
+body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-halle-breit.webp"); }
+body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-wald-breit.webp"); }
+body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-portal-breit.webp"); }
+
+
 /* Der Schleier. Er ist der Grund, warum Text über einem Foto unverändert
    lesbar bleibt -- oben dicht für die Kopfleiste, in der Mitte dicht für
    den Inhalt, an den Rändern offen, damit die beiden sichtbar bleiben.
@@ -90,9 +116,18 @@ body.start > main { position: relative; z-index: 1; }
    auf 9:16 gequetschtes Breitbild zeigt nur noch Wand. */
 @media (max-width: 760px) {
   body.start::before {
-    background-image: url("../img/buehne-schmal.webp");
+    background-image: url("../img/buehne-studio-schmal.webp");
     background-size: cover;
   }
+  body.start[data-buehne="studio"]::before { background-image: url("../img/buehne-studio-schmal.webp"); }
+  body.start[data-buehne="showbuehne"]::before { background-image: url("../img/buehne-showbuehne-schmal.webp"); }
+  body.start[data-buehne="garage"]::before { background-image: url("../img/buehne-garage-schmal.webp"); }
+  body.start[data-buehne="skyline"]::before { background-image: url("../img/buehne-skyline-schmal.webp"); }
+  body.start[data-buehne="lounge"]::before { background-image: url("../img/buehne-lounge-schmal.webp"); }
+  body.start[data-buehne="arena"]::before { background-image: url("../img/buehne-arena-schmal.webp"); }
+  body.start[data-buehne="halle"]::before { background-image: url("../img/buehne-halle-schmal.webp"); }
+  body.start[data-buehne="wald"]::before { background-image: url("../img/buehne-wald-schmal.webp"); }
+  body.start[data-buehne="portal"]::before { background-image: url("../img/buehne-portal-schmal.webp"); }
   body.start > .schleier {
     background:
       linear-gradient(180deg, rgba(5, 7, 13, .92) 0%, rgba(5, 7, 13, .74) 15%,