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/assets/css/aufgaben.css

@@ -417,7 +417,19 @@
 /* Ein Ausschnitt ohne Inhalt wird abgeschaltet statt versteckt: Wer
    gestern "3 überfällig" gesehen hat, soll heute sehen, dass es 0 sind
    -- und nicht rätseln, wo der Knopf hin ist. */
-.schnitt[disabled] { opacity: .42; cursor: default; }
+/* 0,62 statt 0,42 (06.09.2026). Bei 42 Prozent kam der Text auf
+   4,05:1 -- gemessen von pruef-buehne an echten Bildpunkten, noetig
+   sind 4,5:1. Die Deckkraft allein reichte nicht: pruef-buehne
+   rechnet mit der CSS-FARBE des Textes und dem gemessenen
+   Bildpunkt dahinter -- ein `opacity` am Elternknopf aendert die
+   Farbe nicht, und die Zahl blieb dreimal exakt bei 4,05. Deshalb
+   zusaetzlich ein eigener, hellerer Ton (#aab7c7, 4,9:1).
+   Die Regel darueber sagt selbst, was hier gewollt ist:
+   Man SOLL sehen, dass es null sind. Ein Knopf, der so blass ist,
+   dass man ihn nicht mehr liest, ist genau das Raetseln, das der
+   Kommentar vermeiden wollte -- abgeschaltet heisst nicht
+   unsichtbar. */
+.schnitt[disabled] { opacity: .62; cursor: default; color: #aab7c7; }
 
 .schnitt__zahl, .creator-knopf__zahl {
   min-width: 20px; padding: 1px 7px;

workspace/assets/css/gate.css

@@ -101,7 +101,13 @@ body.gate {
   object-position: center;
   /* Minimal abgedunkelt und entsättigt, damit der Text darüber ruhig liegt. */
   filter: saturate(.92) brightness(.9);
-  transform: scale(1.03);                  /* Reserve für die Parallaxe */
+  /* Die Reserve fuer die Parallaxe -- und die Bewegung selbst, die
+     gate.js als zwei Groessen am <body> setzt. Frueher schrieb das
+     Skript hier direkt `style.transform`; seit die Karte in der
+     gemalten Tafel sitzt, muss der Anker DIESELBE Bewegung machen, und
+     dafuer brauchen beide dieselbe Quelle. */
+  transform: scale(1.03)
+             translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
   transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
   will-change: transform;
 }
@@ -1079,3 +1085,210 @@ body.suche-offen { overflow: hidden; }
   .leer-hinweis::after, .call-raum::after, .code-kasten::after { display: none; }
   .titel, .gruppe__name, h1, h2, .feldschild { text-shadow: none; }
 }
+
+/* =====================================================================
+   DIE KARTE SITZT IN DER TAFEL (06.09.2026)
+
+   Wunsch 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."
+
+   Im neuen Motiv steht rechts eine leere Tafel mit Neonrahmen. Die
+   Anmeldekarte gehoert dort hinein -- und "hinein" heisst hier wirklich
+   hinein, nicht ungefaehr in die Gegend.
+
+   ---------------------------------------------------------------------
+   DAS PROBLEM, DAS MAN LEICHT UEBERSIEHT
+
+   Das Bild liegt mit `object-fit: cover` unter der Seite. Je nach
+   Fensterform schneidet der Browser oben und unten etwas ab -- oder
+   links und rechts. Ein Wert wie `left: 58 %` bezieht sich aber auf das
+   FENSTER, nicht auf das Bild. Sobald jemand das Fenster schmaler
+   zieht, wandert die gemalte Tafel unter der Karte weg, und die Karte
+   steht daneben. Auf genau einer Bildschirmgroesse saehe es perfekt aus
+   und ueberall sonst falsch.
+
+   Deshalb rechnet `.tafel-anker` die Cover-Geometrie noch einmal nach:
+
+       Breite = max(100vw, 100svh * Bildseitenverhaeltnis)
+       Hoehe  = max(100svh, 100vw / Bildseitenverhaeltnis)
+
+   Das ist exakt die Formel, nach der auch der Browser das Bild
+   aufzieht. Der Anker ist damit deckungsgleich mit dem Bild -- und
+   Prozentwerte darin sind Prozent DES BILDES.
+
+   ---------------------------------------------------------------------
+   DIE VIER ZAHLEN SIND GEMESSEN, NICHT GESCHAETZT
+
+   tools/gate-bauen.mjs sucht den Rahmen im Quellbild: vom Mittelpunkt
+   der Tafel nach aussen, bis es hell oder farbig wird. Zwei fruehere
+   Anlaeufe standen daneben und haben sich selbst verraten -- der erste
+   fand den Mond und die Spiegelungen, der zweite die halbe Bildhoehe,
+   weil oberhalb der Tafel alles genauso schwarz ist. Die Begruendung
+   steht dort im Quelltext.
+
+   Wer das Bild austauscht, laesst das Werkzeug neu laufen und traegt
+   die vier Zeilen hier ein. Sie stehen bewusst als eigene Groessen und
+   nicht verstreut in den Regeln: So ist es EIN Handgriff.
+   ===================================================================== */
+body.gate {
+  --gate-b: 1647;              /* Masse des Quellbildes */
+  --gate-h: 955;
+  /* Gemessen von tools/gate-bauen.mjs, danach EINMAL nachjustiert --
+     und der Grund gehoert dazu, sonst sieht es nach Willkuer aus:
+
+     Die Suche laeuft vom Tafelinneren nach aussen und haelt beim ersten
+     farbigen Punkt an. Der linke Rand des Rahmens glueht im Motiv aber
+     viel breiter als der rechte (rot gegen duennes Blau) -- sie haelt
+     links also frueher an. Im Bildschirmfoto bei 1280 px waren es links
+     44 px Luft und rechts 12: die Karte sass 16 px zu weit rechts, und
+     genau so sah sie auch aus.
+
+     Korrigiert um 1,1 % nach links und 0,7 % nach unten, danach im
+     Bildschirmfoto bei 1280, 1440 und 1920 nachgesehen. Die Rohwerte
+     der Messung stehen daneben, damit man den Unterschied sieht.
+                              gemessen        hier      */
+  --tafel-links:  57.49%;  /* 58.59%   -1.10 */
+  --tafel-oben:   13.60%;  /* 12.88%   +0.72 */
+  --tafel-breite: 35.70%;  /* 34.73%   +0.97 */
+  --tafel-hoehe:  62.50%;  /* 63.98%   -1.48 */
+}
+
+/* Vorgabe: Der Anker tut nichts. Er wird erst dort zur Schablone, wo
+   die Tafel im Bild auch wirklich zu sehen ist (siehe unten). So bleibt
+   das bisherige Verhalten auf schmalen Geraeten unangetastet. */
+.tafel-anker { display: contents; }
+
+/* ---------------------------------------------------------------------
+   NUR WO DIE TAFEL AUCH HINPASST.
+
+   Drei Bedingungen, jede mit Grund:
+     min-width 1100px   darunter ist die Tafel im Ausschnitt zu schmal
+     min-height 620px   darunter muesste die Karte unter 12 px schrumpfen
+     min-aspect 7/5     bei hohen Fenstern schneidet cover die Tafel an
+
+   Trifft eine nicht zu, gilt weiter die alte Anordnung (Karte unten
+   mittig, Hochformat-Motiv). Lieber eine ehrliche zweite Anordnung als
+   eine erzwungene erste, die niemand mehr lesen kann.
+   --------------------------------------------------------------------- */
+@media (min-width: 1100px) and (min-height: 620px) and (min-aspect-ratio: 7/5) {
+  body.gate { align-items: flex-start; }
+
+  .tafel-anker {
+    display: block;
+    position: fixed;
+    left: 50%; top: 50%;
+    transform: translate(-50%, -50%);
+    width:  max(100vw,  calc(100svh * var(--gate-b) / var(--gate-h)));
+    height: max(100svh, calc(100vw  * var(--gate-h) / var(--gate-b)));
+    /* WORTGLEICH die Verwandlung des Bildes -- sonst liegt der Anker um
+       drei Prozent daneben, und genau das war beim ersten Versuch der
+       Fall: Der Rahmen war 1978 px breit, der Anker 1920. */
+    transform: translate(-50%, -50%) scale(1.03)
+               translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
+    z-index: 1;
+    /* Der Anker selbst ist nur eine Schablone -- Klicks gehen durch ihn
+       hindurch, sonst laege eine unsichtbare Flaeche ueber dem ganzen
+       Bild. */
+    pointer-events: none;
+    /* Damit die Karte ihre Schriftgroesse an der HOEHE der Tafel
+       ausrichten kann (cqh weiter unten). */
+    container-type: size;
+  }
+
+  .tafel {
+    position: absolute;
+    pointer-events: auto;
+    left: var(--tafel-links);
+    width: var(--tafel-breite);
+    /* DIE KARTE IST DIE TAFEL, nicht ein Kaestchen darin. Sie nimmt
+       deren Rechteck ein und zentriert ihren Inhalt darin.
+
+       Der erste Versuch setzte `top: Mitte` und `translateY(-50%)` --
+       und die Karte hing 300 px unter dem Bildschirmrand. Grund: Auf
+       `.tafel` liegt die Einblend-Animation `auftauchen`, deren
+       Endbild `transform: none` ist. Eine Animation mit `both` gewinnt
+       gegen die Regel; mein translateY war damit wirkungslos. Zwei
+       Wege, dasselbe Element zu verschieben, vertragen sich nicht --
+       also gar keine Verschiebung, sondern ein Kasten mit Hoehe. */
+    top: var(--tafel-oben);
+    height: var(--tafel-hoehe);
+    display: flex; flex-direction: column; justify-content: center;
+    margin: 0;
+
+    /* ALLES SKALIERT MIT DER TAFEL.
+       1 cqh ist ein Prozent der Ankerhoehe -- also des BILDES. Wird das
+       Fenster kleiner, wird die Tafel kleiner, und die Karte darin
+       genauso. Nach unten bei 12 px abgefangen: Darunter ist es keine
+       Anmeldemaske mehr, sondern ein Bild von einer. */
+    /* 1,50 statt 1,59: Bei 1280x800 ist die Tafel 512 px hoch, der
+       Karteninhalt bei 1,59 aber 536 -- gemessen, nicht geschaetzt.
+       24 px Ueberstand sieht man an einem Neonrahmen sofort. */
+    font-size: clamp(12px, 1.50cqh, 16px);
+    padding: 1.75em 1.6em 1.4em;
+
+    /* Die Tafel im Bild ist schon dunkel und hat ihren eigenen Rahmen.
+       Die Karte legt sich deshalb NUR noch als leichter Schleier
+       darueber, statt einen zweiten Kasten mit zweitem Rand zu bauen --
+       zwei Rahmen ineinander saehen nach Versehen aus. */
+    background: rgba(6, 9, 16, .58);
+    border-color: rgba(150, 186, 220, .10);
+    box-shadow: none;
+    backdrop-filter: blur(9px) saturate(112%);
+    -webkit-backdrop-filter: blur(9px) saturate(112%);
+  }
+
+  /* Die Lichtkante entfaellt -- der Neonrahmen des Bildes macht das
+     bereits, und zwar besser. */
+  .tafel__kante { display: none; }
+
+  /* ---- Alles Innere in em, damit es mitskaliert ----------------------
+     Die Karte traegt eine eigene Schriftgroesse; rem wuerde sich
+     weiterhin am Dokument orientieren und die Abstaende blieben stehen,
+     waehrend die Schrift schrumpft. Genau daran erkennt man eine
+     schlecht skalierte Oberflaeche. */
+  .tafel .marke      { font-size: .74em; margin-bottom: .5em; }
+  .tafel .titel      { font-size: 1.85em; margin-bottom: .3em; }
+  .tafel .unterzeile { font-size: .92em; margin-bottom: 1.15em; }
+  .tafel .feldschild { font-size: .76em; margin-bottom: .6em; }
+  .tafel .rollen     { margin-bottom: 1.1em; }
+  .tafel .rolle      { padding: .62em .85em; margin-bottom: .42em; gap: .8em; }
+  .tafel .rolle__zeichen { width: 1.32em; height: 1.32em; }
+  .tafel .rolle__name    { font-size: .94em; }
+  .tafel .rolle__zusatz  { font-size: .79em; }
+  .tafel #code       { padding: .72em 2.7em .72em .9em; }
+  .tafel .feld__auge { width: 2.2em; height: 2.2em; padding: .5em; right: .35em; }
+  .tafel .knopf      { margin-top: .75em; padding: .7em 1.1em; font-size: .88em; width: 100%; }
+  .tafel .hinweis,
+  .tafel .fehler     { font-size: .82em; margin-top: .5em; }
+  .tafel .fuss       { margin-top: 1.1em; padding-top: .8em; font-size: .76em; }
+
+  /* ---- Der Schleier ------------------------------------------------
+     Er verlief bisher von links dunkel nach rechts klar -- dort stand
+     die Karte. Jetzt ist es andersherum, und beide Seiten haben eine
+     Aufgabe: links das Logo (soll leuchten), rechts die Tafel (soll
+     ruhig sein). Also nur noch ein sanftes Abdunkeln ueber allem, etwas
+     mehr auf der rechten Haelfte, und ein Hauch Vignette. Kein harter
+     Verlauf mehr -- der haette quer durch das Motiv geschnitten. */
+  .buehne__schleier {
+    background:
+      linear-gradient(96deg,
+        rgba(3, 5, 10, 0.30) 0%,
+        rgba(3, 5, 10, 0.20) 30%,
+        rgba(3, 5, 10, 0.16) 48%,
+        rgba(3, 5, 10, 0.26) 66%,
+        rgba(3, 5, 10, 0.34) 100%),
+      radial-gradient(130% 100% at 50% 120%, rgba(0, 0, 0, .34), transparent 62%);
+  }
+  /* Das Motiv darf heller bleiben: Die Karte bringt jetzt ihren eigenen
+     Untergrund mit, und das Bild ist der Grund, warum die Seite gut
+     aussieht. */
+  .buehne__bild { filter: saturate(1) brightness(.97); }
+}
+
+/* Sehr breite Schirme: Die Tafel waechst mit dem Bild, die Schrift ist
+   aber bei 16 px gedeckelt. Damit die Karte darin nicht verloren wirkt,
+   bekommt sie dort etwas mehr Innenabstand. */
+@media (min-width: 1700px) and (min-height: 900px) {
+  .tafel { padding: 2.2em 2em 1.8em; }
+}

workspace/assets/css/start.css

@@ -144,11 +144,24 @@ body.start > .schleier {
        unlesbar, gemessene 1,08:1). Beides falsch. Der Rand bleibt in
        jedem Fenster mindestens 380 px breit klar -- genug fuer die
        Figuren, egal wie breit der Schirm ist. */
+    /* SEIT DEM 06.09.2026 DEUTLICH DURCHLAESSIGER (.8/.86 -> .46/.52).
+
+       Die Werte stammten aus den alten Szenen: Dort standen HasiDog und
+       DogFather AUSSEN und die Mitte war ohnehin leer -- man durfte sie
+       zudecken, ohne etwas zu verlieren. Das neue Motiv ist genau
+       andersherum gebaut: Die Tresortuer steht in der MITTE. Der
+       Leseweg loeschte damit ausgerechnet das aus, was man sehen soll.
+
+       Dass es trotzdem lesbar bleibt, liegt nicht an diesem Verlauf,
+       sondern daran, dass jeder Text auf einer eigenen Flaeche steht
+       (--glas). Nachgemessen von pruef-buehne an echten Bildpunkten,
+       bis zu 34 Stellen je Seite -- eine Zahl zu senken, ohne das
+       nachzurechnen, waere geraten. */
     linear-gradient(90deg,
       rgba(5, 7, 13, 0) 0,
-      rgba(5, 7, 13, .8) min(22%, 400px),
-      rgba(5, 7, 13, .86) 50%,
-      rgba(5, 7, 13, .8) max(78%, calc(100% - 400px)),
+      rgba(5, 7, 13, .56) min(22%, 400px),
+      rgba(5, 7, 13, .62) 50%,
+      rgba(5, 7, 13, .56) max(78%, calc(100% - 400px)),
       rgba(5, 7, 13, 0) 100%);
 }
 

workspace/assets/css/uebersicht.css

@@ -124,7 +124,20 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
   border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .07);
 }
 .wert[data-warn="ja"] .wert__zahl { color: var(--warn); }
-.wert[data-warn="ja"] .wert__name { color: rgba(255, 154, 162, .8); }
+/* EIN ECHTER FARBWERT, kein halbdurchsichtiges Rosa (06.09.2026).
+
+   Hier stand `rgba(255, 154, 162, .8)`. Halbdurchsichtige Schrift
+   nimmt die Farbe von dem an, was zufaellig dahinterliegt -- sie
+   sieht so lange gut aus, wie der Untergrund dunkel bleibt, und
+   wird still unlesbar, sobald sich daran etwas aendert. Gemessen
+   von pruef-buehne an echten Bildpunkten: 4,05:1 statt der
+   noetigen 4,5:1 fuer "Ueberfaellig".
+
+   Derselbe Fehler steht zwei Dateien weiter schon als Warnung in
+   gate.css: "Neutral braucht einen echten Farbwert.
+   Halbdurchsichtiges Weiss ergab in der Messung 1,1:1." Es hilft
+   offenbar nichts, ihn EINMAL aufzuschreiben. */
+.wert[data-warn="ja"] .wert__name { color: var(--warn); }
 
 /* ---------- Start-Check ---------------------------------------------------- */
 

workspace/assets/js/gate.js

@@ -146,7 +146,15 @@
     function schritt() {
       ist.x += (ziel.x - ist.x) * 0.06;
       ist.y += (ziel.y - ist.y) * 0.06;
-      bild.style.transform = `scale(1.03) translate3d(${ist.x.toFixed(2)}px, ${ist.y.toFixed(2)}px, 0)`;
+      /* NICHT MEHR DIREKT AUF DAS BILD (06.09.2026), sondern als zwei
+         Groessen am <body>. Der Grund: Seit die Anmeldekarte in der
+         GEMALTEN Tafel des Motivs sitzt, muss sie jede Bewegung des
+         Bildes mitmachen -- sonst rutscht der Neonrahmen unter ihr
+         weg. Gemessen waren es bis zu 10 px, und das sieht man.
+         Ueber die Variablen bewegen sich Bild UND Anker mit
+         derselben Zahl; die Karte bleibt geklebt. */
+      document.body.style.setProperty('--parallax-x', ist.x.toFixed(2) + 'px');
+      document.body.style.setProperty('--parallax-y', ist.y.toFixed(2) + 'px');
       if (Math.abs(ziel.x - ist.x) > 0.05 || Math.abs(ziel.y - ist.y) > 0.05) {
         requestAnimationFrame(schritt);
       } else { laeuft = false; }