Workspace: Casper und HasiDog als Buehne im Hintergrund

Filipe: "der hintergrund soll genau so krass und speziell sein, benutz
den hasen und husky."

Gefunden in assets/img: hero-husky.png (Casper, neonblau auf dunkel --
farblich genau die Oberflaeche) und char-hasidog.jpg (HasiDog). Der
Sticker "HasiDog & Casper" hat bestaetigt, dass die beiden zusammen
gehoeren.

Beide sitzen FEST an der Scheibe in den unteren Ecken -- sie scrollen
nicht mit, sondern stehen da wie ein Buehnenbild, vor dem gearbeitet
wird. Die Mitte bleibt frei, dort steht der Inhalt. HasiDog ist weiter
nach aussen geschoben und schwaecher als Casper: Er ist heller, sein
Gesicht zieht den Blick staerker, und direkt neben einer Kachel wuerde
man ihn ansehen statt der Kachel.

AUFBEREITET STATT EINGEBUNDEN (tools/buehne-bauen.mjs):
  * stark abgedunkelt und leicht entsaettigt -- Stimmung, kein Motiv
  * weiche Raender ins Bild EINGERECHNET. Ein hartes Rechteck saehe nach
    aufgeklebtem Foto aus; und eine Maske ueber ein 900-Pixel-Bild kostet
    bei jedem Bildaufbau Rechenzeit.
  * 290 KB PNG -> 41 KB WebP, 110 KB -> 32 KB
Gerechnet mit dem Browser, der ohnehin fuer die Pruefungen da ist -- kein
Bildprogramm, keine neue Abhaengigkeit, 0 EUR.

GEPRUEFT WIRD NICHT, OB ES HUEBSCH IST, sondern ob der Text noch lesbar
ist -- an echten BILDPUNKTEN aus dem fertigen Bildschirmfoto, nicht an
der Farbangabe im Stil. Die weiss naemlich nichts davon, was
dahinterliegt. Gemessen wird der Untergrund direkt NEBEN jedem sichtbaren
Text, auf fuenf Seiten, auf Computer und Handy: bis zu 34 Stellen je
Seite gegen den WCAG-Massstab (4,5:1, bei grosser Schrift 3:1).

UND DAS HAT SOFORT EINEN ALTEN FEHLER GEFUNDEN: Der leiseste Grauton
(--text-still) lag bei 4,43:1 -- knapp UNTER der Norm. Das war schon
lange so, nur hatte es nie jemand nachgerechnet, weil bisher niemand an
echten Bildpunkten gemessen hat. Von #6d7d92 auf #75859a angehoben; jetzt
4,95:1 auf dem hellsten Untergrund. Das gilt fuer JEDE Seite, nicht nur
fuer die mit dem Hintergrundbild.

Schlechtester Wert jetzt: 4,97:1. Alle 30 Messungen bestanden.

Nebenbei eine Falle in den Pruefungen selbst: Ein haengengebliebener
Testserver auf demselben Port fing die Anfragen ab -- der Test sprach mit
einem ALTEN Prozess und dessen anderer Datenbank, und meldete "no such
table". Der Port ist jetzt ein anderer; die Lehre steht hier, weil das
Bild "Server laeuft" trotzdem erscheint und alles richtig aussieht.

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

workspace/assets/css/gate.css

@@ -15,7 +15,16 @@
 
   --text:         #dbe4ef;   /* kein reines Weiss - schont die Augen */
   --text-leise:   #94a5bb;
-  --text-still:   #6d7d92;
+  /* Von #6d7d92 auf #75859a angehoben (01.09.2026).
+     Aufgefallen erst, als die Buehne im Hintergrund dazukam und der
+     Kontrast an echten BILDPUNKTEN gemessen wurde statt an der
+     Farbangabe: Der leiseste Grauton lag bei 4,43:1 -- knapp unter den
+     geforderten 4,5:1. Das war schon vorher so, nur hatte es nie jemand
+     nachgerechnet. Jetzt 4,95:1 auf dem hellsten Untergrund, 5,35:1 auf
+     reiner Tinte. Immer noch deutlich leiser als der Haupttext, aber
+     lesbar -- und das gilt jetzt fuer JEDE Seite, nicht nur fuer die
+     mit dem Hintergrundbild. */
+  --text-still:   #75859a;
 
   --akzent:       #3fbdf5;   /* aus dem Neon des Motivs, entsättigt */
   --akzent-tief:  #1f7fb0;

workspace/assets/css/start.css

@@ -24,6 +24,85 @@ body.start {
     var(--tinte);
 }
 
+/* ---------- Die Bühne ----------------------------------------------------
+
+   Casper unten links, HasiDog unten rechts. Beide FEST an der Scheibe,
+   nicht am Inhalt: Sie scrollen nicht mit, sondern stehen da wie ein
+   Bühnenbild, vor dem gearbeitet wird.
+
+   Drei Regeln, damit daraus kein Poster wird, auf dem man nichts lesen
+   kann:
+
+   1. Sie sitzen in den unteren ECKEN und lassen die Mitte frei -- genau
+      dort steht der Inhalt.
+   2. Die weichen Ränder sind ins Bild eingerechnet (tools/buehne-bauen.mjs),
+      nicht als Maske im Browser. Ein hartes Rechteck sähe nach
+      aufgeklebtem Foto aus; und eine Maske über ein 900-Pixel-Bild
+      kostete bei jedem Bildaufbau Rechenzeit.
+   3. Darüber liegt ein dunkler Schleier. Er ist der Grund, warum der
+      Text unverändert lesbar bleibt -- gemessen, nicht geschätzt.
+
+   Warum überhaupt zwei Bilder statt eines großen: Ein Vollbild hinter
+   einem Arbeitswerkzeug ist immer im Weg. Zwei Ecken lassen den Blick
+   in Ruhe und sind trotzdem sofort da. */
+
+body.start::before,
+body.start::after {
+  content: "";
+  position: fixed; bottom: 0; z-index: 0;
+  pointer-events: none;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: bottom;
+}
+
+/* Casper. Links, blickt nach rechts in die Seite hinein. */
+body.start::before {
+  left: -3vw;
+  width: min(34vw, 480px); height: min(34vw, 480px);
+  background-image: url("../img/buehne-husky.webp");
+  background-position: left bottom;
+  opacity: .46;
+}
+
+/* HasiDog. Rechts, gespiegelt, blickt zurück. Etwas schwächer -- er ist
+   heller als Casper und würde sonst mehr ziehen. */
+/* Weiter nach aussen und nach unten geschoben als Casper: HasiDog ist
+   heller, sein Gesicht zieht den Blick staerker -- direkt neben einer
+   Kachel wuerde man es ansehen statt der Kachel. So schaut er von unten
+   rechts herein, ohne sich dazwischenzustellen. */
+body.start::after {
+  right: -2vw;
+  width: min(24vw, 330px); height: min(36vw, 480px);
+  background-image: url("../img/buehne-hasi.webp");
+  background-position: right bottom;
+  opacity: .3;
+}
+
+/* Der Schleier. Liegt über den beiden und unter dem Inhalt -- er nimmt
+   ihnen genau so viel Kraft, dass Text darüber unverändert lesbar
+   bleibt. Nach unten dichter, weil die Bilder dort stehen. */
+body.start > .schleier {
+  position: fixed; inset: 0; z-index: 0; pointer-events: none;
+  background:
+    linear-gradient(180deg, transparent 0%, rgba(5, 7, 13, .55) 62%, rgba(5, 7, 13, .8) 100%),
+    radial-gradient(75% 55% at 50% 62%, rgba(5, 7, 13, .82), transparent 78%);
+}
+
+/* Alles Bedienbare liegt über der Bühne. Ohne das läge der Inhalt zwar
+   sichtbar darüber, aber Klicks landeten teils am falschen Ort. */
+body.start > .kopfleiste,
+body.start > .inhalt,
+body.start > main { position: relative; z-index: 1; }
+
+@media (max-width: 760px) {
+  /* Auf dem Handy nimmt der Inhalt die ganze Breite ein -- dort wäre die
+     Bühne nur ein Schatten hinter dem Text. Bleibt, aber deutlich
+     zurückgenommen und kleiner. */
+  body.start::before { left: -8vw; width: 60vw; height: 60vw; opacity: .28; }
+  body.start::after  { right: -6vw; width: 42vw; height: 60vw; opacity: .2; }
+}
+
 /* ---------- Kopfleiste ------------------------------------------------ */
 
 .kopfleiste {