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]>
Filipe hatte recht, und zwar zweifach: Der Husky war der FALSCHE (ein
fremder Neon-Husky aus dem alten Bilderordner statt DogFather), und zwei
in die Ecken geklebte Bilder ergeben noch kein Bild.
DIE BUEHNE, zweiter Anlauf. Aus den zehn geschickten Bildern das Studio
gewaehlt, in dem HasiDog und DogFather stehen -- nicht aus Geschmack,
sondern wegen der ANORDNUNG: Die beiden stehen weit aussen, die Mitte ist
dunkel. Genau dort steht der Inhalt. Bei den Bildern mit den Figuren in
der Mitte waeren sie hinter dem Text gelandet.
Ueber die ganze Flaeche, fest an der Scheibe, 138 % breit: Bei 100 %
staenden die beiden bei 20 % und 78 % der Breite -- mitten unter der
Textspalte. Vergroessert man das Bild ueber die Scheibe hinaus, wandern
sie nach aussen (rund 9 % und 88 %) und der leere Hallenboden liegt dort,
wo gelesen wird. Ein Bild groesser zu machen, damit WENIGER davon im Weg
ist, klingt verkehrt und ist genau richtig.
Fuer schmale Schirme ein eigener Hochkant-Ausschnitt derselben Szene --
ein auf 9:16 gequetschtes Breitbild zeigt nur noch Wand.
1,9 MB PNG -> 28 KB WebP.
DIE VIER STELLEN aus den Bildschirmfotos:
* Kopfleiste: der DogFather-Kopf davor. Als MASKE aus dem Logo gerechnet
(Dunkelheit wird Deckkraft), nicht als Bild -- so laesst er sich im
Stil einfaerben; ein fertig eingefaerbtes Bild muesste man fuer jede
Farbe neu bauen. 114 KB -> 3 KB.
* "Dogfather · DogFather" war der peinlichste Punkt: Name und Rolle lasen
sich gleich, es sah nach einem Fehler aus. Jetzt drei unterscheidbare
Dinge -- Zeichen mit dem Anfangsbuchstaben, Name, Rolle als Marke in
ihrer Farbe. Gebaut in kopf.js, EINMAL statt vierzehnmal: Jede
Seitendatei setzte diese Zeile bisher selbst zusammen.
* Begruessung: leuchtender Strich, groesserer Gruss, auslaufende
Trennlinie. Dieselben Striche vor "WAS IST DRAN" und "DEINE AUFGABEN" --
so gehoert sichtbar zusammen, was zusammengehoert.
ZWEI EIGENE FEHLER, die die Pruefungen gefunden haben:
1. Ich hatte Verlaeufe IM TEXT gebaut (background-clip mit durchsichtiger
Schrift). Sah gut aus, und der Kontrasttest meldete 1,05:1 -- zu Recht.
Durchsichtige Schrift haengt an einer einzigen Technik; faellt sie aus
(Kontrastmodus, Druck, aeltere Browser), ist der Text UNSICHTBAR statt
nur anders gefaerbt. Das ist kein Schoenheitsfehler, das ist ein
Ausfall. Jetzt feste Farbe mit einem Hauch Leuchten.
2. Auf dem Handy stand der Abmelden-Knopf 9 px aus dem Bild. Die Suche
nach der Ursache ging zuerst in die Irre -- der Test nannte das
Wasserzeichen, das aber von seiner Kachel sauber abgeschnitten wird
und nur seine Masse meldet. Gemessen war es die Marke: 209 px + 139 px
rechte Gruppe passten nicht in 390 px. Auf dem Handy bleibt jetzt nur
der Kopf stehen; der Markenzug steht zwei Zeilen tiefer ohnehin als
Ueberschrift. Fuer Vorleseprogramme bleibt er im Dokument.
Und einmal habe ich mir beim Ersetzen eines CSS-Blocks das halbe
Stylesheet geloescht (die Kachel-Regeln lagen zwischen den beiden
Suchmarken). Aufgefallen sofort am Bildschirmfoto, zurueckgeholt aus Git,
danach zeilengenau ersetzt.
118 Pruefungen, alle gruen. Der Kontrast wird weiterhin an echten
Bildpunkten gemessen, jetzt an bis zu 35 Stellen je Seite.
Co-Authored-By: Claude Opus 5 <[email protected]>
pruef-bildgroessen.mjs (neu) misst systematisch über alle Seiten
(Desktop + Handy, mal Pixeldichte), welche <img> größer sind als ihre
größte Anzeige. Fand 4 klare Fälle:
streamer-mascot.jpg 900px, gezeigt 230px -> 480px 360->119 KB
bewerben-poster-dogfather.jpg 800px, gezeigt 204px -> 440px 199->80 KB
avatar-bananenstift.jpg 1122px, gezeigt 108px -> 400px 167->25 KB
avatar-marina.jpg 1086px, gezeigt 90px -> 400px 157->20 KB
Zusammen 639 KB gespart. Avatare bewusst auf 400px (großzügiger als die
2x-Anzeige), falls doch mal eine Detailansicht kommt. Qualität am
Maskottchen per Screenshot geprüft: scharf, Schrift lesbar, keine Artefakte.
CACHE-BUSTER-BUG behoben: 69 Ressourcen-Verweise standen noch auf dem alten
Marker "20260827hero" (einer sogar auf "20260820h"), der Rest auf
"20260828c". Verschiedene Seiten luden dieselbe main.css/js unter
verschiedenen Cache-Keys -- wiederkehrende Besucher der hero-Seiten bekamen
bei Änderungen eine veraltete gecachte Fassung. Die Playwright-Tests sahen
das nie (leerer Cache). Jetzt alle 245 einheitlich auf 20260828d; der
bewusste admin-auth "-jedesmal"-Marker bleibt unberührt.
Co-Authored-By: Claude Opus 5 <[email protected]>
Der Performance-Check (pruef-tempo.mjs, neu) zeigte die Startseite mit
3,5 MB, überwiegend Bilder. Drei davon waren viel größer als je
angezeigt (gemessen über Desktop + Handy, alle Seiten, mal Pixeldichte):
card-dogfather.jpg 1200px, angezeigt max 359px -> 720px 534->201 KB
casper-4.jpg 1400px, angezeigt max 359px -> 720px 350->115 KB
casper-3.jpg 1400px, angezeigt max 359px -> 720px 259->140 KB
720px = doppelte Anzeigebreite, also auch auf Retina-Displays scharf.
Qualität an zwei Motiven per Screenshot geprüft: keine sichtbaren
Artefakte, Schrift und Details erhalten.
card-vanvan bewusst UNANGETASTET: wird auf vanvan.html mit 578 CSS-px
gezeigt, bräuchte für Retina ~1156px -- das 1200er ist dort passend.
Verkleinert über Browser-Canvas (kein ImageMagick/sharp verfügbar; das
gefundene "convert" war das Windows-Dateisystem-Tool, nicht ImageMagick).
Co-Authored-By: Claude Opus 5 <[email protected]>
Die Startseite uebertrug 3,72 MB. Gemessen wurde, wie breit jedes Bild
tatsaechlich angezeigt wird -- in Handy- UND Desktop-Ansicht, denn die
groessere der beiden bestimmt, wie gross die Datei sein MUSS. Wer nur
am Handy misst und danach verkleinert, macht die Desktop-Ansicht
unscharf.
casper-2.jpg 1050px -> 420px 245 KB -> 47 KB
dogfather-casper-2.jpg 1050px -> 420px 182 KB -> 35 KB
dogfather-portrait.jpg 933px -> 420px 122 KB -> 35 KB
casper-1.jpg 720px -> 420px 153 KB -> 72 KB
dogfather-casper-1.jpg 770px -> 400px 150 KB -> 63 KB
600 KB weniger. Die Zielbreiten liegen bewusst ueber dem gemessenen
Bedarf (408-411px gemessen, 420px gesetzt): Ein Bild kleiner zu machen
als noetig waere schlimmer als ein zu grosses -- Unschaerfe sieht man,
ein paar Kilobyte nicht.
Qualitaet vor dem Ersetzen angesehen, nicht nur die Zahl: Augen, Fell
und Kanten sind bei 420px unveraendert scharf.
NICHT ANGEFASST, WEIL ZU KLEIN
char-dogfather.jpg und char-hasidog.jpg haben 599px, brauchen auf
grossen Schirmen aber 954px. Sie sind also UNSCHAERFER als noetig --
das ist der umgekehrte Fall und gehoert getrennt betrachtet.
DER GROESSTE BROCKEN BLEIBT
Das Bild "Event des Jahres" ist ein PNG mit 2524 KB -- zwei Drittel der
ganzen Startseite. PNG ist fuer ein Foto das falsche Format; als JPEG
in der benoetigten Breite (840px) waeren es rund 150 KB. Die Datei
liegt unter /var/lib/dogfather-internal/uploads und ist ueber den
Verwaltungsbereich hochgeladen worden -- dort wird nicht umgewandelt.
Co-Authored-By: Claude Opus 5 <[email protected]>
Wunsch: "ich will die verwaltungsseite auch getrennt runter laden
koennen und installieren koenne."
Bisher gab es ein Manifest fuer den ganzen Webdesign-Bereich; die
Verwaltung war darin nur eine Verknuepfung. Jetzt hat sie ein eigenes
mit eigener "id" -- der Wert, an dem alles haengt: Ohne ihn halten
Browser beide fuer dieselbe App, und die zweite Installation
ueberschreibt die erste, statt danebenzustehen.
EIGENES SYMBOL
Zwei gleich aussehende Kacheln auf dem Startbildschirm waeren keine
Trennung. Das neue Symbol ist ein Ausschnitt des Eiskristall-Wappens --
dasselbe Motiv, das die Verwaltung ohnehin traegt, und klar
unterscheidbar vom schwarzen Husky der oeffentlichen App. Erzeugt aus
cryo-wappen.webp in drei Groessen, die beschneidbare Fassung weiter
herausgezoomt, damit Android die Spitzen des Wappens nicht abschneidet.
Als JPEG statt PNG: 76 statt 385 KB bei 512 Punkten. Bei einem
fotografischen Motiv hat PNG nichts zu gewinnen, und 385 KB fuer ein
Symbol waeren unverhaeltnismaessig.
⚠️ DER GELTUNGSBEREICH IST ABSICHTLICH WEIT
Naheliegend waere "/webdesign/verwaltung" gewesen. Das haette die App
unbrauchbar gemacht: Ohne gueltigen Ausweis leitet der Server auf
/webdesign/zugang.html um -- ausserhalb des Bereichs, und was
ausserhalb liegt, oeffnet der Browser in einem eigenen Fenster. Weil
der Zugang beim Schliessen endet, waere das bei fast jedem Start
passiert: Man tippt auf die App und landet im Browser. Nachgemessen:
verwaltung.html antwortet ohne Ausweis mit 302.
EIN STILLES VERSPRECHEN EINGELOEST
Die Verknuepfungen zeigen auf "?bereich=anfragen" und dergleichen --
und derselbe Parameter steht in den Push-Meldungen. Ausgewertet hat ihn
bisher NIEMAND. Man landete immer auf der Uebersicht, ohne dass etwas
kaputt aussah. Jetzt oeffnet die Seite den gewuenschten Reiter, ueber
einen ausgeloesten Klick auf den vorhandenen Reiter statt ueber
nachgebaute Logik: Daran haengen Signatur, Leuchtbalken, Nachladen und
der Wischstreifen auf dem Handy.
Auch hier hat erst der Test den Fehler gezeigt -- und danach einen in
der Pruefung selbst: Sie erreichte die Funktion gar nicht, weil diese
im gekapselten Bereich liegt. Jetzt nach aussen gegeben, wie schon
window.vwBalkenSetzen.
23 Pruefungen gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
Die Rechtsplattform der Spicy Media Agency fehlte -- dabei ist sie das
technisch anspruchsvollste Stueck der Sammlung.
WAS IM TEXT STEHT UND WARUM SO
Die Projektdokumentation haelt ausdruecklich fest, dass die Wendung
"100 Prozent rechtssicher" dort nirgends verwendet wird. Ein Portfolio,
das mehr verspricht als die Sache selbst, waere genau der Fehler, den
das Projekt vermeiden will. Im Ergebnis steht deshalb, dass die
Plattform fertig gebaut und bewusst noch vollstaendig gesperrt ist und
auf die schriftliche Freigabe einer Fachkanzlei wartet -- nicht, dass
sie "im Einsatz" sei.
KEIN LIVE-KNOPF
Wie bei der Buchhaltung. Ein "Live ansehen", das auf eine Zugangswand
fuehrt, bricht das Versprechen, das der Knopf gibt. Stattdessen steht
dort ein Satz, der den Grund nennt.
GESICHTER UNKENNTLICH
Auf der Zugangswand stehen zwei Profilfotos. Eines davon gehoert einer
Geschaeftspartnerin, die dieser Veroeffentlichung nicht zugestimmt hat.
Beide sind in der Aufnahme weichgezeichnet, das Firmenzeichen bleibt
scharf. Begruendet im alt-Text und in einem eigenen Abschnitt -- genau
wie bei Projekt 5, wo derselbe Fall schon einmal auftrat.
Nebenbei: Die strenge Inhaltsrichtlinie der Seite (style-src 'self')
hat das eingefuegte Stylesheet fuers Weichzeichnen blockiert. Sie tut
also genau das, wofuer sie da ist. Ueber die Stil-Eigenschaft im Skript
ging es dann.
ZWEI STELLEN, DIE SONST FALSCH GEBLIEBEN WAEREN
Die Ueberschrift hiess "Fuenf Projekte, die man anfassen kann". Mit
SafeAddress steht dort erstmals ein Projekt, das man NICHT besuchen
kann -- die Ueberschrift haette also gleich doppelt daneben gelegen.
Jetzt: "Sechs Projekte, die es wirklich gibt", und die Einleitung sagt
ausdruecklich, dass eine der Seiten gesperrt ist.
Der Schlussaufruf lud dazu ein, "das sechste" Projekt zu werden. Bei
sechs vorhandenen waere das das Angebot gewesen, eines davon zu
ersetzen. Jetzt das siebte.
Beides in allen fuenf Sprachen, de-CH als echter Dialekt wie im Rest
dieser Datei.
TEST
Zwei Fehlschlaege, beide berechtigt: die Projektzahl und ein zu grobes
Suchmuster, das bei "zwei MENSCHEN" ansprang, obwohl es die veraltete
Aussage "zwei PROJEKTE" sucht. Das Muster laesst jetzt hoechstens ein
Wort zwischen Zahlwort und Substantiv zu. Mit Gegenprobe abgesichert:
faengt weiterhin "Two projects you can visit", ignoriert "Two people
work together on that site". Ein Fehlalarm, den man nur wegdrueckt,
faengt beim naechsten Mal auch den echten Fall nicht mehr.
35 Pruefungen gruen, i18n vollstaendig.
Co-Authored-By: Claude Opus 5 <[email protected]>
Das bisherige Bild zeigte eine fruehere Fassung der Anmeldeseite --
flaches Logo als blasses Wasserzeichen, Text darueber, keine
Anmeldekarte. Die Seite ist inzwischen ueberarbeitet: plastisches Logo,
Samthintergrund, eine eigene Anmeldekarte mit den beiden Zugaengen und
dem Hinweis auf verschluesselte Verbindung.
Ein Portfolio, das einen alten Stand zeigt, arbeitet gegen sich selbst
-- gerade wenn die neue Fassung die deutlich bessere ist.
Neu aufgenommen in 1200x750, also exakt den Massen der uebrigen
Portfolio-Bilder. Das steht auch als width/height im <img>; eine
Abweichung wuerde beim Laden ein Springen des Rasters ausloesen und die
Kacheln unterschiedlich hoch machen.
154 KB statt 49 KB. Der Aufschlag ist nicht zu vermeiden: Das Motiv ist
jetzt fotorealistisch, mit Samtfalten und Perlen -- lauter feine
Strukturen, bei denen JPEG wenig einsparen kann. Bei Qualitaet 76 waeren
es 132 KB gewesen, um den Preis sichtbarer Artefakte im Logo. Das Bild
laedt ohnehin verzoegert (loading="lazy").
Cache-Version auf v53: Ohne das bekaemen alle, die die Seite schon
einmal geoeffnet haben, weiterhin das alte Bild aus dem Zwischenspeicher.
Co-Authored-By: Claude Opus 5 <[email protected]>
Aus einem festen Streifen werden sechs. Jeder Reiter hat jetzt ein
eigenes Motiv UND eine eigene Leitfarbe, beides wechselt beim Klick.
Die Zuordnung ist gelesen, nicht ausgewuerfelt:
Uebersicht Wappen Die Zentrale, wo alles zusammenlaeuft.
Anfragen Portal Ein Tor. Hier kommt Neues herein.
Projekte Monolith Etwas, das aufrecht steht und gebaut wird.
Kunden Thron Wer bestellt, steht auf dem Podest.
Zahlungen Kristall Der Wert selbst. Dazu Liquid Gold.
Postfach Portal Wieder ein Tor -- Nachrichten gehen durch.
Farben: Baby Blue, Hyper Aqua, Aurora Violet, Prism Indigo, Liquid Gold,
Ion Blue. Nach ein paar Tagen erkennt man den Bereich an der Farbe,
bevor man den Titel gelesen hat. Aus Deko wird Orientierung.
Das neue Thron-Motiv ist aus dem vierten Bild aufbereitet, im selben
Mass wie die bestehenden (1672x941) und mit kleiner Fassung fuers Handy.
DIE ENTSCHEIDENDE IDEE: Bild und Text teilen sich nicht mehr denselben
Platz. Eine Deckschicht ist links voll deckend und oeffnet sich nach
rechts. Links stehen Titel und Reiter, rechts ist die Flaeche leer --
dort darf das Motiv mit 82 % auftreten statt mit 17 %.
Der erste Versuch war gleichmaessig bei 17 %: ueberall gleich schwach zu
ahnen, ein Fleck statt eines Bildes, und trotzdem hinter der Schrift.
Kurz und kraeftig ist beides besser -- mehr Wirkung dort, wo Platz ist,
null Stoerung dort, wo gearbeitet wird. Der Streifen ist jetzt auch
kuerzer und endet, BEVOR die erste Kachel anfaengt.
Drei Fehler, die der Test gefunden hat und nicht das Auge:
- Alle sechs Bereiche zeigten dasselbe Bild. Die Variablen hingen an
#vw-bereich, der Schmuckstreifen liegt aber ausserhalb davon -- er
erbte sie nie und fiel auf den Rueckfallwert zurueck. Die Farben
wechselten (Reiter und Titel liegen drinnen), die Motive nicht.
- Die waagerechten Ausschnitte bewirkten nichts. Bei "cover" skaliert
der Browser auf die Breite des Streifens, die volle Bildbreite ist
immer sichtbar. Erst ein Zoom ueber 100 % schafft Spielraum.
- Das Thron-Motiv schob seine hellen Kristallfluegel bis unter die
Reiter. Deshalb deckt die Schicht jetzt bis 46 % statt 34 % -- der
Wert ist gemessen, nicht geschaetzt.
Dazu zwei Dinge, die erst der Screenshot zeigte: angeschnittene Logos im
Streifen (sieht nach Versehen aus, und das Logo steht ohnehin oben
links), und die Knoepfe Suchen/Abmelden lagen ueber dem hellsten Teil
des Bildes. Sie haben jetzt einen eigenen dichten Grund -- Bedienelemente
muessen lesbar sein, egal was dahinter liegt.
Der Test misst nicht mehr "Deckkraft unter 20 %". Dieser Massstab ist
hinfaellig, seit das Motiv nach rechts gerueckt ist: Es darf kraeftig
sein, WEIL es nicht mehr hinter der Schrift liegt. Geprueft wird
stattdessen, wie ruhig der Grund unter der Reiterzeile ist -- mit Motiv
gegen ohne Motiv, in allen sechs Bereichen. Gemessen: plus 0 bis plus 6.
Unveraendert gilt: kein Motiv hinter Listen, Tabellen oder Zahlen. Ein
Bild hinter einer Zahlenspalte ist genau die Art von Schoenheit, die ein
Werkzeug unbrauchbar macht.
Geprueft: 237 Pruefungen gruen (Verwaltung 39, Portfolio 15, CRYONOVA 53,
Blickfang 13, System 5, Abmelden 16, Abbruch 42, Angebot 54).
Co-Authored-By: Claude Opus 5 <[email protected]>
Aus zwei Projekten werden fuenf. Alle drei neuen laufen wirklich, die
Adressen wurden vorher einzeln geprueft:
zockeranstalt.dogfather-universe.com Netcup, via Caddy
buchhaltung.vans-diy-bastelbedarf.com Netcup, via Caddy
analyse.dogfather-universe.com Cloudflare Worker (kein via)
Die Vorschaubilder sind echte Aufnahmen vom 24.08.2026, aufgenommen im
selben Mass wie die bestehenden (1200x750), damit in der Liste nichts
aus der Reihe faellt.
Zwei Aufnahmen sind bewusst nicht unbearbeitet, und das steht auch fuer
die Besucher auf der Seite -- nicht nur im Code:
- Die Buchhaltung zeigt nur die Anmeldung. Sie bekommt deshalb auch
KEINEN "Live ansehen"-Knopf: Ein Knopf, der bloss auf eine
Anmeldemaske fuehrt, ist ein leeres Versprechen. Ein Test haelt das
fest, damit es niemand spaeter "der Vollstaendigkeit halber" einbaut.
- Beim Command Center sind die Gesichter unkenntlich gemacht. Die Seite
gehoert dem Team, nicht mir, und niemand hat zugestimmt, sein Bild im
Portfolio zu zeigen. Der Weichzeichner wurde vor der Aufnahme im
Browser gesetzt, nicht nachtraeglich ins Bild gemalt.
Zwei neue Schildfarben. Aqua traegt Schrift problemlos (11,5:1
gemessen). Indigo NICHT: Prism Indigo ist die einzige Farbe der Palette,
die als Text durchfaellt (3,25--4,29:1) -- das Schild nutzt es deshalb
nur als Flaeche und Kante, die Schrift bleibt Chrome Silver (9,8:1).
Texte in allen fuenf Sprachen, inklusive Schweizerdeutsch. Ueberschrift,
Einleitung und Schlusssatz sagen nicht mehr "zwei" bzw. "beide" -- und
zwar sowohl im Woerterbuch ALS AUCH im deutschen Rueckfalltext im HTML.
Nur die JS-Datei zu aendern haette gereicht, damit es in vier Sprachen
stimmt und ausgerechnet auf Deutsch falsch bleibt.
Drei Fehler steckten wieder in der Pruefung, nicht auf der Seite:
- Sie meldete drei Vorschaubilder als "nicht geladen". Die tragen
loading="lazy" -- der Test hatte schlicht nie hingesehen.
- Sie zaehlte Navigations- und Markentexte mit. Die liegen aber in
wd-core.js, gelten fuer alle Seiten und werden von
server/pruefe-webdesign-i18n.mjs abgedeckt.
- Ihre "kein Zwei mehr"-Suche haette auch Projekttexte getroffen, in
denen das Wort voellig zurecht steht.
Geprueft wird jetzt das Ergebnis statt des Woerterbuchs: Die Seite wird
wirklich auf jede der fuenf Sprachen umgeschaltet, plus eine Gegenprobe,
dass die Umschaltung ueberhaupt etwas tut.
Geprueft: 198 Pruefungen gruen (Portfolio 15, CRYONOVA 53, Blickfang 13,
System 5, Abmelden 16, Angebot 54, Abbruch 42). Die vier Meldungen aus
server/pruefe-webdesign-i18n.mjs betreffen verwaltung.html und zwei
fehlende Woerterbuecher -- Altbestand, keine dieser Dateien wurde hier
angefasst.
Co-Authored-By: Claude Opus 5 <[email protected]>
Setzt die restlichen Kapitel des Design-Systems um (Seiten 7, 14, 16,
19, 24-29). Wie Schritt 1 ausschliesslich Farbe, Material und Licht --
Aufbau, Navigation, Texte und Funktionen bleiben unangetastet.
BILDWELT (Seiten 24-29)
Die Motive sind jetzt echte Seitenhintergruende: Ring auf Startseite
und Portal, Kristallwelt an der Zugangswand. Ueber jedem Motiv liegt
eine Navy-Glasflaeche -- das System fordert auf Seite 31 ausdruecklich,
dass bei Bedarf "eine Navy- oder Frost-Glasflaeche zwischen Bild und
Inhalt" liegt. Ohne sie waere Text auf den hellen Kristallspitzen nicht
sicher lesbar, und genau dort macht ein schoenes Bild eine Seite
unbrauchbar.
Von 2,5 MB auf 96-229 KB (WebP), auf dem Handy 30-73 KB. Das System
nennt fuer Mobile ausdruecklich Ladezeit als Kriterium.
DAS LOGO IM BILD -- eine Entscheidung gegen die woertliche Vorgabe
Zwei der drei Motive zeigen das Dogfather-Logo gross in der Mitte. Als
Seitenhintergrund waere das ein zweites Logo neben dem echten in der
Kopfzeile: zwei Marken, die um dieselbe Aufmerksamkeit ringen. Beim
ersten Versuch schien es an der Zugangswand hinter den Karten durch
(gemessen 15,9 % helle Flaeche im Logobereich). Die Zugangswand nutzt
deshalb jetzt einen Ausschnitt der linken Bildhaelfte -- dieselbe
Kristallwelt, dasselbe Licht, nur ohne Wappen. Die Logo-Motive bleiben
als Blickfang-Klasse erhalten, dort wo sie fuer sich stehen duerfen.
MATERIALIEN (Seite 7)
Optic Glass, Frosted Ice, Prism Edge und Void Navy als Klassen. "Hell"
heisst auf einer dunklen Seite aufgehelltes Navy, nicht Weiss -- echtes
Weiss waere ein Loch im Bildschirm, und das System verbietet weisse
Vollflaechen ausdruecklich.
RANGSYSTEM (Seite 14)
Drei Stufen fehlten: Premium (Indigo), VIP (Champagne), Gefahr (Coral).
Wenn jeder Knopf gleich laut ist, ist keiner mehr laut.
Zwei bewusste Abweichungen von der naheliegenden Loesung:
- Indigo steht als FLAECHE unter hellem Text, nie als Schriftfarbe. Es
erreicht als Text nirgends 4,5:1 (gemessen 3,25-4,29). Der Test haelt
das dauerhaft fest.
- Gefahr ist NICHT vollflaechig rot. Ein voll gefuellter roter Knopf
zieht den Blick staerker an als die Hauptaktion und wird dadurch
versehentlich gedrueckt. Kritische Aktionen sollen auffindbar sein,
nicht verlockend.
FOKUSRING (Seite 19)
Doppelter Aqua-Ring: 2 px Aqua aussen, dunkler Innenring. Kein Schmuck
-- ein einfacher heller Ring verschwindet auf hellen Flaechen, ein
dunkler auf dunklen. Die Kombination ist auf JEDEM Untergrund sichtbar.
STATUS-SPEKTRUM (Seite 16)
Acht Zustaende. Die Klasse faerbt nur -- den Text liefert immer das
Markup. Es gibt bewusst keine Variante, die nur einen farbigen Punkt
zeigt: Wer Farben nicht unterscheiden kann, saehe dann gar nichts. Der
Test prueft, dass keine Statusmarke ohne Text existiert.
Dabei einen eigenen Fehler gefunden und behoben: Ich hatte beim Bauen
des Premium-Knopfes selbst einen losen Hex-Wert eingesetzt -- genau
das, was Token-Regel 05 verbietet und was der Test dann meldete.
Geprueft: 43 (CRYONOVA, von 24 erweitert) + 0 Fundstellen (WCAG ueber
12 Seiten x 5 Sprachen, jetzt MIT Bildhintergruenden) + 55 + 40 + 69 +
54 + 42 + 16 + 5 + 20 + 64 + 58 -- alles gruen.
Ein 'git add -A' hat 13 Bild-Sicherungskopien (.bak-*, zusammen 2,6 MB),
den lokalen Testserver und eine erzeugte package-lock.json mitgenommen.
Die package-lock.json war der schaedlichste Teil: Auf dem Server existiert
eine eigene, dort erzeugte Fassung. Eine versionierte Datei gleichen Namens
laesst 'git pull' abbrechen -- der Deploy stand sofort still.
Alle drei Muster stehen jetzt in .gitignore.
Umsetzung des "Website Masterplan" (16 Seiten) unter /webdesign.
Zugangsschutz mit EIGENER Schranke (server/webdesign-gate.js) statt gate.js:
gate.js laesst seit dem oeffentlichen Start am 21.08.2026 jeden durch, weil
die Pruefung auf SITE_PUBLIC_LAUNCH_AT als allererste Zeile steht. Haette man
/webdesign dahintergehaengt, waere der ausdruecklich nicht-oeffentliche Bereich
inklusive Preisen und spaeteren Kundendaten ab der ersten Sekunde fuer jeden
lesbar gewesen. Eigenes Sitzungs-Cookie, bereich="webdesign" im Token, damit
ein gueltiges Universe-Cookie hier NICHT gilt. 37/37 Tests.
Sieben oeffentliche Seiten in fuenf Sprachen (de, de-CH mit echtem Dialekt, en,
fr, pt). Preise, Zeitrahmen, Paketnamen und die 30-%-Regel stehen an genau
EINER Stelle in wd-core.js -- der Masterplan verlangt "ueberall
widerspruchsfrei", und vier Kopien laufen bei der ersten Preisaenderung
auseinander.
Als App installierbar auf Handy und PC. Der Service Worker speichert bewusst
KEINE HTML-Seite zwischen: nach dem Abmelden wuerden sonst geschuetzte Seiten
weiter ausgeliefert, ohne dass der Server je gefragt wird. 18/18 Tests.
Handy-Abnahme ueber alle Seiten in fuenf Breiten (320-1440) und fuenf Sprachen:
40/40. Der Test fand 35 echte Fehler (Touch-Ziele unter 44px), behoben im
Designsystem statt einzeln pro Seite.
PayPal (Wunsch 22.08.2026 "sofort auf meinem paypal"): Orders API mit
intent=CAPTURE, also sofortiger Einzug statt blosser Reservierung. Gebuehr und
Nettobetrag getrennt gespeichert. Betraege durchgehend als Ganzzahl in Cent.
Gefaelschte Webhooks werden abgewiesen. Fail closed solange Zugangsdaten
fehlen. 28/28 Tests gegen einen nachgebauten PayPal-Server.
Datenbank: 15 Tabellen mit Praefix wd_, fachlich vollstaendig vom Universe
getrennt.
Co-Authored-By: Claude Opus 5 <[email protected]>
Beim Abgleich zwischen Rechner und Netcup-Server am 22.08.2026 aufgefallen:
20 Bilddateien wurden live von mehreren Seiten benutzt (bewerben-modi.html,
links.html, medien-casper.html, medien-hasidog.html, supporter.html,
stimmen.html u.a.), lagen aber in keiner Git-Ablage -- nur auf diesem
Rechner und auf dem Server. Waeren beide verloren gegangen, waeren diese
Seiten ohne Hintergrund/Avatare dagestanden.
Vor dem Hinzufuegen jede Datei per Pruefsumme gegen den Server abgeglichen
-- alle identisch, kein abweichender Stand wird hier verdeckt.
dogfather-universe-app.ico ist aktuell nirgends verlinkt (vermutlich ein
nie eingebauter Favicon-Entwurf), trotzdem mit gesichert statt verworfen.
Co-Authored-By: Claude Opus 5 <[email protected]>
Diese Änderungen liefen bereits live auf dem Server, lagen dort aber
ausschließlich als nicht eingecheckte Arbeitskopie — bei jedem Deploy
(stash/pull/pop) und bei jedem Serverproblem wären sie verloren gewesen.
Deshalb hier unverändert in git übernommen, bevor darauf aufgebaut wird.
Enthalten (nicht von mir gebaut, nur gesichert):
- Supporter: eigener fester Zugangscode statt Einmalcode-Login
(Migration 0009, lib/crypto.js scrypt-Hash, routes/supporter.js,
abonnieren.html, supporter.html, i18n-abonnieren/-supporter)
- Stimmen: Profilbilder (Migration 0010, routes/testimonials.js)
- Event-Bild-Upload: voller Pfad statt relativem (routes/events.js)
- Neue/überarbeitete Hintergrundbilder für viele Seiten
- Teilen-Funktion (streamplan.js, i18n-index/-streamplan, main.css)
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 21.08.2026: "füge das foto was ich am ende mitschicke
neben den text im screen1". Sektion von einspaltigem Fließtext auf
grid-2 umgebaut, Foto (assets/img/streamer-filipe-portrait.jpg, aus
Pictures/Filipe, auf 1000x1500 verkleinert) rechts daneben mit
frame-gold-Rahmen für Abwechslung zur Casper-Sektion (frame-lila).
Cache-Busting-Version auf 20260821d erhöht.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
Nutzer-Wunsch 20.08.2026: Startseiten-Hero (universe-trio.jpg) und
Streamplan-Hero (bg-streamplan.jpg/-mobile.jpg) durch neu bereitgestellte
Bilder ersetzt. Blur-Variante fuer die Startseite neu aus dem frischen
Bild erzeugt (Gaussian Blur, passend zur bestehenden Cover-Verlauf-Technik).
Mobile-Ausschnitt fuer Streamplan mehrfach nachjustiert, damit der
"STREAMPLAN"-Schriftzug im schmalen Hochformat-Crop komplett sichtbar
bleibt. Alte Bilder als .bak-20-08-2026 gesichert (nicht eingecheckt).
Referenzen mit Versions-Stempel (?v=) versehen, damit der neue Stand
sofort sichtbar ist statt bis zu 4 Std im Cache zu haengen.
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 20.08.2026: "ich will die Verwaltungsseite auch herunter
laden koennen, so dass ich die originale website und die verwaltungsseite
2 mal getrennt installieren kann, auf dem pc und handy."
- Eigenes manifest-verwaltung.json (eigene "id"/"scope" nur fuer
verwaltung.html, eigener Name "DogiCrew-Verwaltung", eigenes
Icon-Set) statt des site-weiten manifest.json (scope "/") -- macht sie
zu einer technisch eigenstaendigen App-Identitaet, installierbar
parallel zur Haupt-Website, auf Desktop und Handy.
- Neue Icons: bestehendes Husky-Logo mit Violett/Gold-Verlauf statt
Babyblau (passend zum "Jewelen-Tresor"-Look der Verwaltungsseite),
damit beide installierten Apps auch optisch klar unterscheidbar sind.
- Kein zweiter Service Worker noetig -- /sw.js laeuft bereits site-weit
auf Scope "/" und deckt verwaltung.html automatisch mit ab.
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 20.08.2026: bg-bewerben-creator.jpg + -mobile.jpg (bisher
unscharfes Selfie mit pinker Sonnenbrille) ersetzt durch das vom Nutzer
gelieferte Motiv (Spicy-Media-Look, rot, Silhouette + Logo). Alte Version
lokal gesichert (*.jpg.bak-20-08-2026, nicht eingecheckt).
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 20.08.2026:
- links.html: neues, vom Nutzer geliefertes "aus dem Universum"-Motiv
(Weltraum-Szene mit TikTok/Instagram/Snapchat/Discord/Merch-Icons um ein
"LINKS"-Portal) ersetzt bg-links.jpg + -mobile.jpg. Alte Version lokal
gesichert (*.jpg.bak-20-08-2026, nicht eingecheckt).
- community.html, Abschnitt "Mehr als Follower": echtes Team-Foto
(Diene, Ghost, VanVan, Dogi bei einem gemeinsamen Treffen, "TEAM DOGI")
ersetzt den "Foto folgt"-Platzhalter. Gleiches Muster wie vanvan.html
(.collage-photo, aspect-ratio:3/4 statt der alten 4/3-Platzhalterbox,
da das echte Foto Hochformat ist). Jetzt ungenutzte i18n-Keys
com_bild_platzhalter/com_foto_folgt entfernt.
Per Playwright verifiziert: beide Seiten laden fehlerfrei, keine
fehlgeschlagenen Requests, keine Konsolenfehler.
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 20.08.2026 (zweite Runde): neues, verfeinertes Motiv (DogFather-
Logo oben, Filipe sitzend mit HasiDog + Husky, "INTERESSE AN EINER
KOOPERATION? JETZT KONTAKT AUFNEHMEN") ersetzt die Version vom selben Tag.
Theme bleibt dogfather/babyblau (passt weiterhin). Alte Version lokal
gesichert (*.jpg.bak-20-08-2026-v2, nicht eingecheckt).
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 20.08.2026: Hintergrundbild von bewerben-kooperation.html
(bg-bewerben.jpg + -mobile.jpg, beide bisher identisch zum alten roten
Spicy-Media-Motiv "WERDE TEIL VON SPICY MEDIA") ersetzt durch das vom
Nutzer geschickte neue Motiv (HasiDog/DogFather/Husky, "EINE KOOPERATION
WOLLEN? DANN HIER MELDEN", bereits babyblau statt rot). Passend dazu
data-theme von "spicymedia" (Rot/Orange) auf "dogfather" (Babyblau/Lila)
umgestellt -- keine hartkodierten Rot-Werte im HTML, daher genuegt die
Theme-Umstellung fuer Knopf-/Link-/Eyebrow-Farben komplett.
Bild aus PNG-Quelle konvertiert (quality=90, optimize+progressive), Seiten-
verhaeltnis/Aufloesung unveraendert uebernommen (kein Hochskalieren). Alte
Bilder lokal gesichert (*.jpg.bak-20-08-2026, nicht eingecheckt).
Per Playwright verifiziert: data-theme=dogfather, --accent=#8fd9ea, keine
fehlgeschlagenen Requests, keine Konsolenfehler, Formular/Footer sehen im
echten (nicht-fullPage-)Screenshot nach dem Scrollen korrekt dunkel aus --
ein zunaechst gefundener "weisser Kasten" war ein reines Playwright-
fullPage-Screenshot-Artefakt (position:fixed-Hintergrund kachelt beim
kuenstlich verlaengerten Full-Page-Screenshot nicht mit), kein echter Bug,
per echtem gescrolltem Viewport-Screenshot gegengeprueft und ausgeschlossen.
Co-Authored-By: Claude Opus 5 <[email protected]>
1) Nutzer-Report 20.08.2026 ("wieso dieser Punkt da in der Mitte"):
.zeit-node (der leuchtende Zeitleisten-Punkt) ist bei normalen Karten
position:absolute; left:50%; top:50% relativ zu .zeit-ast -- korrekt, weil
die Karte dort nur die halbe Breite einnimmt. Die Finale-Karte
(.zeit-final) wird aber auf fast volle Breite gestreckt und zentriert,
der Knoten landete dadurch mitten im Zitat-Text. Die Verbindungslinie
(::before) wurde dafuer schon frueher ausgeblendet, der Knoten selbst
wurde dabei uebersehen -- jetzt nachgezogen (display:none fuer
.zeit-final .zeit-node).
2) Nutzer-Wunsch 20.08.2026: der Preis "FÜR 4,99 € MONATLICH" stand fest
ins Hero-Bild von abonnieren.html eingebrannt (bg-abonnieren.jpg +
-mobile.jpg, beide Dateien waren identisch) -- per CSS/Text nicht
erreichbar, siehe bereits dokumentierter Fund vom selben Tag. Per Pillow
sauber herausretuschiert (Clone-Stamp aus einem textfreien Bereich
derselben Schaltflaeche, exakt auf die Zeilenhoehe inkl. Ü-Umlautpunkte
skaliert, Nahtstellen weich gezeichnet, mit numpy-Helligkeitsanalyse
zeilenweise gegengeprueft bis keine Text-Reste mehr uebrig waren) --
"ABONNIEREN" bleibt als eigenstaendiger Button stehen, keine sichtbare
Lücke/Leerstelle. Qualitaet/Dateigroesse an das Original angepasst
(quality=90, optimize+progressive, exakt vergleichbare Groesse). Original
lokal gesichert (bg-abonnieren.jpg.bak-20-08-2026, nicht eingecheckt).
Beide Fixes per Playwright verifiziert: Knoten-Punkt display:none bei der
Finale-Karte, Hero-Bild laedt fehlerfrei ohne fehlgeschlagene Requests,
keine Konsolenfehler.
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Report 19.08.2026: "komm auf dem Handy nicht rein, hab es installiert und
klappt nicht" / "er nimmt meinen Code nicht an".
Hauptursache war ein veralteter Zugangscode (nur Doku, kein Code) -- beim Nachpruefen
kamen aber drei echte Fehler auf der Zugangsseite zutage, alle nur auf dem Handy spuerbar:
1. gate.html war NICHT installierbar. Ohne gueltige Sitzung leitet gate.js jeden Aufruf
hierher um -- es ist also der Bildschirm, von dem aus man die App installiert. Genau
dort fehlten Manifest-Verweis und Service-Worker-Registrierung, die Chrome fuer eine
echte App verlangt (index.html hatte beides laengst, gate.html laedt main.js bewusst
nicht). Wer vor dem ersten Login installierte, bekam nur eine leere Verknuepfung.
Exakt derselbe Fehler wie am 07.08.2026 in VanVans Shop, hier nie aufgefallen.
2. Der "Oeffnen"-Knopf gab keinerlei Rueckmeldung und die Anfrage hatte kein Zeitlimit.
Bleibt im Mobilfunknetz eine Antwort aus, haengt fetch() unbegrenzt -- es sieht aus,
als sei der Tap nicht angekommen. Jetzt: Knopf sperrt sich sofort und zeigt "Wird
geprueft...", Abbruch nach 10s mit klarer Meldung (AbortController), Doppel-Tap
ignoriert. Letzteres ist hier besonders wichtig, weil server/gate.js nach 5
Fehlversuchen die IP fuer 15 Minuten sperrt -- Doppel-Taps zaehlten bisher mit.
3. apple-touch-icon fehlte im GESAMTEN Projekt. iOS ignoriert das Manifest fuer das
Startbildschirm-Symbol und liest nur dieses Tag -- auf dem iPhone gab es deshalb einen
unscharfen Seiten-Screenshot statt des Logos. Neu erzeugt (180x180, vollflaechig ohne
Alpha: iOS faerbt Transparenz schwarz, und icon-512.png hat nachgemessen transparente
Ecken). Zentral ueber main.js in alle 34 Seiten eingehaengt statt 34x kopiert;
gate.html hat es statisch, da ohne main.js.
Zusaetzlich maskable-Icons ergaenzt: Android beschneidet das Startsymbol auf einen Kreis.
Per Simulation der Sicherheitszone nachgemessen -- das bisherige Icon haette 19,87% des
Logos verloren (Husky-Ohren + Schriftzug). Die neuen Varianten (60%/59% Fuellgrad) liegen
bei exakt 0 abgeschnittenen Pixeln, Fuellgrad dafuer schrittweise eingemessen statt geraten.
Markenfarbe #8FD9EA aus dem vorhandenen Icon ausgelesen, keine neue Farbe erfunden.
Validiert: node --check, Manifest-JSON, Tag-Balance, alle 8 Pflicht-Zutaten vorhanden.
Co-Authored-By: Claude Opus 5 <[email protected]>
Recherche (developer.chrome.com, Lighthouse-Doku, Stand 2026): Chrome/Edge
zeigen "App installieren" bei gültigem Web App Manifest (name, icons inkl.
512x512, start_url, display:standalone) UND einem registrierten Service
Worker mit fetch()-Handler — reines Manifest reicht für den zuverlässigen
Install-Prompt nicht mehr aus.
- Neues manifest.json (Name, Theme-/Hintergrundfarbe passend zum dunklen
Design, Icons 192x192 + 512x512 aus dem bestehenden Husky-Favicon erzeugt)
- Neuer sw.js: minimaler Service Worker, primär für die Installierbarkeit,
cached nebenbei die wichtigsten Shell-Dateien (Network-first mit
Cache-Fallback, kein Offline-Vollausbau)
- main.js: registriert den Service Worker nur bei http(s) (nie bei
file://, damit die Seite laut Projektregel weiterhin per Doppelklick
ohne Server funktioniert — stiller Fallback statt Konsolenfehler)
- Alle 28 HTML-Seiten: <link rel="manifest"> + <meta name="theme-color">
im <head> ergänzt (identischer Ankerpunkt nach dem Favicon-Link geprüft
und automatisiert eingefügt)
Installation für Dogi: Seite in Chrome/Edge öffnen → Symbol rechts in der
Adressleiste ("App installieren") oder Menü ⋮ → "DogFather Universe
installieren" → landet als eigenes Fenster + Icon auf Desktop/Startmenü.
- team-modis.html: Kartenraster generiert jetzt optional einen zweiten
Button pro Person (m.extraCta in data-modis.js), aktuell nur bei Marina
gesetzt (führt zu manager.html). Card-Markup dafür von <a> auf <div> mit
innerem display:contents-Link umgestellt, damit kein Link im Link
verschachtelt wird (ungültiges HTML). Alle anderen Karten unverändert.
- Neue CSS-Klasse .btn-spicy-mini: kompakter Polarlicht-Button in den
Spicy-Media-Markenfarben (Rot/Orange), gleicher Mechanismus wie
.btn-tiktok/.btn-silver.
- assets/img/avatar-marina.jpg (das KLEINE Foto, z.B. Pyramide-Karte)
durch neues Foto ersetzt und quadratisch zugeschnitten. Das große Foto
(card-marina.jpg) bleibt unverändert, wie gewünscht.
Auf Wunsch: Michi gehört nicht mehr dazu. Entfernt:
- Kompletter Personeneintrag aus data-modis.js (team-modis.html +
profil.html?p=michi zeigen sie dadurch automatisch nicht mehr an).
- Erwähnung in der Team-Hierarchie-Doku, im "von VanVan bis Michi"-
Lead-Text (jetzt "...bis Marina", alle 5 Sprachen) und in Meta-
Beschreibungen/OG-Tags/Twitter-Tags auf team-modis.html.
- Ungenutzte Bilddateien avatar-michi.jpg + card-michi.jpg gelöscht.
Nutzer-Feedback: der Name fehlte im engeren Zuschnitt komplett. Jetzt
Husky-Kopf UND "DOGFATHER"-Schriftzug zusammen, weiterhin eng auf die
riesigen weißen Ränder des Originals zugeschnitten (nicht die volle
1024x1024-Leinwand wie ganz am Anfang), damit beides in der kleinen
Header-Badge sichtbar bleibt.
Das Original hatte riesige weiße Ränder rundherum und den "DOGFATHER"-
Schriftzug drunter — bei der kleinen Header-Badge-Größe (42x42px) blieb
vom Husky kaum mehr als ein winziger Fleck übrig. Jetzt eng auf den
Kopf zugeschnitten (Schriftzug entfernt, war bei der Größe eh nicht
lesbar) und auf ein quadratisches Format gepolstert, damit object-fit:
cover die Ohren nicht anschneidet.
Kleines Karten-/Avatar-Foto (Scout-Übersicht) durch neues Portraitfoto
ersetzt. Das große Bild neben dem Vorstellungstext auf profil.html
(photo-Feld) zeigt weiterhin das bisherige Foto (jetzt als
card-bananenstift.jpg ausgelagert), wie vom Nutzer gewünscht.
Neue separate Bilddatei card-vanvan-team.jpg angelegt, damit vanvan.html
und data-modis.js (Profilseite) unverändert beim bisherigen Foto bleiben -
wie vom Nutzer ausdrücklich gewünscht ("nur auf dieser Seite").
"Was Dogi für mich bedeutet" (Bild links) und "Was Team Dogi für mich
bedeutet" (Bild rechts) jetzt als grid-2/frame-lila-Layout, exakt im
selben Stil wie die Casper- und Maskottchen-Sektionen auf streamer.html.
Neues Foto vom Nutzer bereitgestellt, quadratisch zugeschnitten (Fokus
Gesicht oben) und in beiden benötigten Größen (1200x1200 Karte,
400x400 Avatar) gespeichert.
Das Originalbild hatte links/rechts einen dünnen dunklen Rand samt
1px-Markierungslinie vom Screenshot - dadurch entstand im lila Rahmen ein
sichtbarer Abstand zwischen Rahmen und Hund. Jetzt exakt bis an den
Bildinhalt zugeschnitten, füllt den Rahmen randlos.
Nutzer hat das exakte Originalbild bereitgestellt statt der KI-Nachbildung
(Screenshot 2026-08-01 190134.png) - für 100% korrekte Wiedergabe verwendet.
Neu generiertes Bild (lokal, Z-Image-Turbo) im Stil des vom Nutzer gezeigten
Referenzbilds: niedlicher 3D-Husky-Welpe mit blauem Hoodie und korrekt
geschriebenem "DogFather"-Schriftzug. Layout wie die bestehende Casper-
Sektion (grid-2, collage-photo/frame-lila), aber gespiegelt: Text links,
Bild rechts, wie vom Nutzer gewünscht.
Seite hatte bisher kein Hintergrundmotiv - jetzt nach etabliertem Muster
ergänzt (body.mit-hintergrund + hero-banner-<img>, wie auf den anderen
Seiten).
Seite hatte bisher gar kein Hintergrundmotiv (nur body ohne Klasse) -
jetzt nach dem etablierten Muster ergänzt: body.mit-hintergrund mit
--page-bg/--page-bg-mobile + echter hero-banner-<img> oben (garantiert
volle Breite und komplett sichtbar, wie auf allen anderen Seiten).
- dogfather.html: neues, extra dafür erstelltes Hero-Bild als eigene Datei
(bg-dogfather-person.jpg) - bewusst NICHT die geteilte bg-dogfather.jpg
überschrieben, die noch auf 3 weiteren Seiten (bewerben-modi, profil,
team-modis) mitverwendet wird
- creator.html: "Content Creator, die bei Spicy Media / Team Dogi
mitmachen" -> "...die bei Dogfather / Spicy Media mitmachen" (Meta-Tags
entsprechend mitkorrigiert)
- Pyramiden-Karten (team-modis.html) sind jetzt pro Ebene gleich hoch,
unabhängig von Textlänge (z.B. Diene/Funny): .pyramid-tier auf
align-items:stretch, .profile-card darin als Flex-Spalte mit dem
"Profil ansehen"-Button per margin-top:auto immer ganz unten
- bewerben.html: die zwei neuen Kampagnen-Poster (Dogfather/Team-Dogi links,
Spicy Media rechts) flankieren jetzt die beiden Bewerbungs-Spalten wie
Kinoplakate, leicht gekippt, farblich passend zur jeweiligen Seite,
blenden nach unten sanft aus. Bewusst als eigene scharfe Bildspalte statt
als verwaschener Hintergrund hinter den Karten, damit beides in voller
Qualität lesbar bleibt. Ab 1080px Breite ausgeblendet (kein Platz mehr).
- creator.html: neues, extra dafür erstelltes "Die Creator"-Breitbild als
Hintergrund, ersetzt den bisher wiederverwendeten Bewerbungs-Platzhalter
- data-modis.js: Funny von Stufe 3 auf Stufe 2 - jetzt gleiche Hierarchie-
Ebene wie Diene (Pyramide gruppiert automatisch per Stufe, keine
Code-Änderung an der Anzeige-Logik nötig)
- Alle Bilder als optimierte JPEGs eingebunden (PNG-Originale via
System.Drawing skaliert/komprimiert, 63-232 KB statt 1,9-2,6 MB)
DogFatherGitandClaude Opus 5