Neue Farbvariablen --c-lila/--c-lila-hover (sattes, kräftiges Violett) ersetzen das bisherige
Gold/Gelb überall dort, wo es verwendet wurde: "Noch nicht öffentlich"-Badge, Verlaufsrand der
Kopf-Kiste, sowie komplett das VanVan-Fenster (Rand, Avatar-Glow, Name, Eingabefeld-Fokus,
Button). Gelbes Herz-Emoji im VanVan-Button ebenfalls zu einem violetten Herz gewechselt, damit
nichts mehr gold/gelb übrig bleibt. Dogis Cyan-Fenster bleibt unverändert.
Per Build + Browsertest verifiziert: neue Farbe korrekt angezeigt, Login-Funktion unverändert.
Gemeldeter Bug: Bei kleineren Fensterhöhen (z.B. Laptop mit wenig Höhe, manche Handy-Größen) hat
"overflow: hidden" auf <body> zusammen mit der vertikal zentrierten Flexbox den oberen Teil des
Inhalts (Badge/Überschrift) und/oder die unteren Fenster einfach abgeschnitten, OHNE dass man
dorthin scrollen konnte — der Inhalt war schlicht nicht mehr erreichbar. Behoben:
- "align-items: safe center" statt nur "center" — zentriert normal, springt aber auf
Start-Ausrichtung um, sobald der Inhalt höher als der sichtbare Bereich ist.
- overflow-y: auto statt hidden — falls "safe center" von einem Browser nicht unterstützt wird,
kann trotzdem ganz normal zu den restlichen Fenstern heruntergescrollt werden.
- Logo-Wasserzeichen von position:absolute auf position:fixed umgestellt, damit es IMMER exakt in
der Mitte des sichtbaren Fensters bleibt, unabhängig von der tatsächlichen Seitenhöhe.
Zusätzlich auf ausdrücklichen Wunsch: der Kopfbereich (Badge + Überschrift + Text) sitzt jetzt in
einer eigenen "speziellen" Kiste im selben Stil wie die beiden Personen-Fenster darunter
(wandernder Verlaufsrand aus allen drei Markenfarben + Glanz-Sweep) statt als loser Text über den
Kisten zu schweben — liest sich jetzt sichtbar als gemeinsames "Dach" über beiden Fenstern.
Per Browsertest über mehrere Fenstergrößen (inkl. absichtlich sehr niedriger Höhe) verifiziert:
Inhalt vollständig erreichbar/scrollbar, Login-Funktion beider Fenster weiterhin unverändert.
- qciga-Fenster zeigt jetzt Dogi (Name + echtes Foto) statt Icon-Platzhalter — Rolle/Code-Prüfung
im Hintergrund bleibt unverändert "qciga" (nur die Anzeige wurde umbenannt).
- VanVan-Fenster bekommt ein neues, eigenes Foto für die Zugangsseite.
- Beide Quellfotos (~1,8 MB PNG) auf 400×400 zugeschnitten (gesichtsfokussiert) und als WebP
komprimiert (7–14 KB) — eigene Dateien nur für diese Seite, NICHT die sitehweit verwendete
öffentliche vanvan-portrait.png ersetzt oder angetastet.
- Schlüssel-Emoji im Dogi-Button durch 🩵 (Baby-Blau-Herz) ersetzt, passend zur Cyan-Akzentfarbe
seines Fensters.
- functions/_middleware.js: alte Freigabe von /img/vanvan-portrait.png entfernt, stattdessen
gezielt nur die zwei neuen Avatar-Dateien freigegeben (kein Shop-/Kundendatum).
Per Build + wrangler pages dev + Browsertest verifiziert: beide Avatare laden korrekt (200),
alte Foto-Freigabe korrekt entfernt (wieder 302), Layout/Funktion unverändert intakt.
Auf ausdrücklichen Wunsch im Stil einer bereits bestehenden Zwei-Personen-Zugangsseite umgebaut,
aber komplett an Van's eigene Marke angepasst (Farben/Schrift/Wasserzeichen unverändert: Lila/
Anthrazit/Hellblau/Gold statt fremder Projektfarben). Jede Person bekommt ihr eigenes Fenster mit
Avatar (VanVan: ihr echtes Porträtfoto; qciga: passendes Icon, da noch kein Foto in diesem Projekt
hinterlegt ist), eigenem Codefeld und eigenem "Öffnen"-Button in unterschiedlicher Akzentfarbe
(Cyan/Violett für qciga, Gold/Violett für VanVan). Technisch unverändert: /gate-auth erkennt die
Rolle weiterhin selbst anhand des eingegebenen Codes, unabhängig vom benutzten Fenster.
Dabei gefundener und behobener Bug: /img/vanvan-portrait.png wurde von der Zugangs-Schranke selbst
blockiert (302) — das für den Avatar gebrauchte Foto zeigte deshalb nur einen leeren Kreis. Gezielt
nur diese eine Datei freigegeben (kein Shop-/Kundendatum, ohnehin VanVans öffentliches Porträtfoto).
Per echtem Browsertest verifiziert: beide Fenster funktional getrennt (falscher Code im einen
Fenster zeigt den Fehler nur dort, richtiger Code im anderen Fenster loggt korrekt ein), Layout auf
Desktop nebeneinander und auf schmalen Bildschirmen sauber gestapelt.
Technisches Accessibility-Audit ergab sechs behebbare Punkte, alle jetzt gefixt:
- Skip-to-Content-Link ganz oben auf jeder Seite (WCAG 2.4.1)
- Fehler-/Statusmeldungen (Checkout, Login, Rezension, Gate-/Verwaltungs-Code) jetzt mit
role="alert"/aria-live, damit Screenreader sie automatisch ansagen (WCAG 4.1.3)
- Warenkorb-Icon hatte fälschlich das "Konto"-Label geerbt, sagt jetzt korrekt "Warenkorb"
(WCAG 4.1.2/2.4.4), dafür t.nav.cart in allen 4 Sprachen neu ergänzt
- Sichtbarer Fokus-Ring beim Mengenfeld auf der Produktseite wiederhergestellt (WCAG 2.4.7)
- Placeholder-only Formularfelder (Gate-Zugangscode, Verwaltungs-Suche/Filter/Tracking) haben
jetzt echte Labels (sichtbar per sr-only-Klasse oder aria-label) statt nur Platzhaltertext
(WCAG 1.3.1/3.3.2)
- Übersprungene Überschriften-Ebenen (h1→h3 ohne h2) in Checkout, Warenkorb, Kontakt, Konto
korrigiert (WCAG 1.3.1)
Reine Accessibility-Nachrüstung, keine funktionale Änderung. Kleinstunternehmer-Ausnahme
(§3 Abs.3 BFSG) greift hier vermutlich, aber vorsorglich sauber umgesetzt.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Das Rund-Logo (schwarze Linien auf weißem Grund) wird per invert()+
mix-blend-mode:screen so eingefärbt, dass der weiße Kreis komplett
verschwindet und nur die Linienzeichnung als dezentes, leicht leuchtendes
Wasserzeichen übrig bleibt — kein Bildbearbeitungsprogramm nötig, rein CSS.
Riesig, zentriert, sehr langsam rotierend für einen dezenten Lebendig-Effekt.
Dazu ein wanderndes Glanzlicht auf der Zugangscode-Karte selbst, passend zum
Rest der Seite.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Ersetzt die (fehlerhaft auf die GANZE Domain wirkende) Cloudflare-Zero-
Trust-Access-Sperre durch eine eigene, schlanke Lösung nach dem bewährten
Vorbild von "Dogfather Universe": eine Pages-Functions-Middleware
(functions/_middleware.js) prüft bei jeder Anfrage ein HMAC-signiertes
Session-Cookie; ohne gültiges Cookie geht's zu public/gate.html (im Van's-
Design), wo ein Zugangscode eingegeben wird. Zwei getrennte Codes für qciga
und VanVan, 90 Tage gültig, danach neu eingeben. /admin/* ist komplett
ausgenommen — läuft weiter über das echte GitHub-OAuth-Login, das für
VanVan schon funktioniert.
Bonus: die drei separaten Vorschau-Seiten (demo-normal/demo-konto/demo-abo)
sind jetzt überflüssig und entfernt. Stattdessen gibt's ein schwebendes
Umschalter-Widget (Layout.astro), das NUR sichtbar ist, wenn das Gate-Cookie
vorhanden ist (also nur für uns beide) — auf jeder beliebigen Seite kann
per Knopfdruck zwischen "Normaler Besucher", "Angemeldete Kundin" und
"Abonnentin" gewechselt werden, ohne die Seite verlassen zu müssen.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
qcigano