Neues Anmeldebild -- die Karte sitzt IN der gemalten Tafel

Filipe: "integriere die zugangskachel links nach rechts und passe sie
perfekt an damit sie in dem neuen bild rechts perfekt und die
vorgemachte kachel passt."

Das neue Motiv (Spicy Media x DogFather) hat rechts eine leere Tafel mit
Neonrahmen. Die Anmeldekarte sitzt jetzt DARIN -- und zwar wirklich
darin, nicht ungefaehr in der Gegend.

DAS PROBLEM, DAS MAN LEICHT UEBERSIEHT: Das Bild liegt mit
`object-fit: cover` unter der Seite; je nach Fensterform schneidet der
Browser oben/unten oder links/rechts etwas ab. Ein `left: 58%` bezieht
sich aber auf das FENSTER. Auf genau einer Bildschirmgroesse saehe es
richtig aus und ueberall sonst falsch. Deshalb rechnet `.tafel-anker`
dieselbe Cover-Formel noch einmal nach und ist damit deckungsgleich mit
dem Bild -- Prozentwerte darin sind Prozent DES BILDES.

Die vier Zahlen sind GEMESSEN (tools/gate-bauen.mjs), nicht geschaetzt.
Zwei Anlaeufe standen daneben und haben sich selbst verraten:
  1. "Suche den leuchtenden Rahmen" fand den Mond, die roten Blueten und
     jede Spiegelung -- Ergebnis: die ganze rechte Bildhaelfte. Eine
     Messung, die das Offensichtliche zurueckgibt, hat nichts gemessen.
  2. "Suche die groesste dunkle Flaeche" fand die Breite richtig, aber
     94 % Hoehe: Ueber und unter der Tafel ist die Szene genauso
     schwarz.
Richtig ist der dritte Weg: vom Mittelpunkt der Tafel nach aussen
laufen, bis es hell ODER farbig wird -- auf diesem Weg liegt nichts
anderes, denn die Tafel ist leer. Danach eine Plausibilitaetspruefung,
die abbricht statt vier geratene Zahlen auszugeben.

DREI FEHLER IM EIGENEN ENTWURF, alle gemessen statt angesehen:
  * Die Karte hing 300 px unter dem Bildschirmrand. Auf `.tafel` liegt
    die Einblend-Animation, deren Endbild `transform: none` ist -- mein
    `translateY(-50%)` war damit wirkungslos. Zwei Wege, dasselbe
    Element zu verschieben, vertragen sich nicht.
  * Der Anker lag 3 % neben dem Bild: Das Bild traegt `scale(1.03)` als
    Reserve fuer die Parallaxe. Jetzt tragen beide dieselbe Verwandlung,
    und die Parallaxe laeuft ueber zwei CSS-Groessen am <body> -- so
    wandert die Karte mit, statt dass der Rahmen unter ihr wegrutscht.
  * Der Hochkant-Ausschnitt zeigte die LEERE Tafel: ein schwarzes
    Rechteck mit ein paar Saeulen. Auf dem Handy liegt die Karte ohnehin
    davor; dort gehoert das Logo hin. Jetzt faellt der Schriftzug
    SPICY MEDIA in den sichtbaren Streifen -- nachgerechnet, nicht
    probiert.

STARTSEITE: das Tresorbild als neuer Hintergrund. Die uebernommene
Abdunklung von 0,62 war zu viel (der Tresor ist von Haus aus dunkel) --
uebrig blieb ein Schemen. Und der "Leseweg" verdunkelte ausgerechnet die
MITTE: Bei den alten Szenen stand dort nichts, beim Tresor steht dort
die Tuer. Beides korrigiert und mit pruef-buehne an echten Bildpunkten
nachgemessen.

DABEI GEFUNDEN, ohne Zusammenhang mit dem Bild: Der abgeschaltete
"Ueberfaellig"-Filter kam auf 4,05:1 statt 4,5:1. Die Deckkraft zu
erhoehen half nichts -- die Pruefung rechnet mit der CSS-FARBE und dem
gemessenen Bildpunkt dahinter, und ein `opacity` am Elternknopf aendert
die Farbe nicht. Die Zahl blieb dreimal exakt gleich; genau das war der
Hinweis. Jetzt ein eigener, hellerer Ton. Der Kommentar daneben sagte
ohnehin, was gewollt ist: Man SOLL sehen, dass es null sind.

Und die vier Regeln von heute stehen in CLAUDE.md.

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

workspace/bereich.html

@@ -9,10 +9,10 @@
 <meta name="theme-color" content="#0674b9" />
 <link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
 <link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
-<link rel="stylesheet" href="assets/css/gate.css?v=202609062315" />
-<link rel="stylesheet" href="assets/css/start.css?v=202609062315" />
-<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609062315" />
-<link rel="stylesheet" href="assets/css/bereich.css?v=202609062315" />
+<link rel="stylesheet" href="assets/css/gate.css?v=202609062343" />
+<link rel="stylesheet" href="assets/css/start.css?v=202609062343" />
+<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609062343" />
+<link rel="stylesheet" href="assets/css/bereich.css?v=202609062343" />
 </head>
 
 <body class="start">
@@ -117,14 +117,14 @@
 
 </main>
 
-<script src="assets/js/wahl.js?v=202609062315" defer></script>
-<script src="assets/js/bereiche.js?v=202609062315" defer></script>
-<script src="assets/js/kopf.js?v=202609062315" defer></script>
-<script src="assets/js/glocke.js?v=202609062315" defer></script>
-<script src="assets/js/checkliste.js?v=202609062315" defer></script>
-<script src="assets/js/ampel.js?v=202609062315" defer></script>
-<script src="assets/js/schulung.js?v=202609062315" defer></script>
-<script src="assets/js/vorlagen.js?v=202609062315" defer></script>
-<script src="assets/js/bereich.js?v=202609062315" defer></script>
+<script src="assets/js/wahl.js?v=202609062343" defer></script>
+<script src="assets/js/bereiche.js?v=202609062343" defer></script>
+<script src="assets/js/kopf.js?v=202609062343" defer></script>
+<script src="assets/js/glocke.js?v=202609062343" defer></script>
+<script src="assets/js/checkliste.js?v=202609062343" defer></script>
+<script src="assets/js/ampel.js?v=202609062343" defer></script>
+<script src="assets/js/schulung.js?v=202609062343" defer></script>
+<script src="assets/js/vorlagen.js?v=202609062343" defer></script>
+<script src="assets/js/bereich.js?v=202609062343" defer></script>
 </body>
 </html>