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: "diese seite vom streamplan soll viel geiler
und spezieller sein, ueberrasch mich."
Neues Herzstueck: ein 24-Stunden-Ziffernblatt (reines SVG, keine
Bild-Assets), das den festen 20-Uhr-Termin als dauerhaft leuchtenden
Fixpunkt zeigt (goldener Puls) und einen "Jetzt"-Zeiger in Echtzeit mit
der tatsaechlichen Uhrzeit der besuchenden Person mitbewegt (Babyblau,
DogFather-Markenfarbe). Nutzt denselben /live-status-Endpunkt wie die
Startseite:
- Offline: echter Sekunden-Countdown zum naechsten lokalen 20-Uhr-Termin.
- Live: komplettes Radar schaltet auf Rot/Puls um, zeigt den Stream-Titel
und einen "Jetzt anschauen"-Knopf direkt zu TikTok.
Sanft rotierender Lichtschein fuer Atmosphaere, komplett augenschonend
(gedeckte Farben, respektiert prefers-reduced-motion vollstaendig).
Bugfix unterwegs gefunden (Playwright-Screenshot, dritte Wiederholung
desselben Musters heute): der "Jetzt anschauen"-Knopf blieb trotz
[hidden]-Attribut sichtbar, weil .btn selbst "display" setzt und damit
gleiche Spezifitaet wie die eingebaute [hidden]-Regel hat -- explizite
Regel ergaenzt.
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 20.08.2026: "diese zwei kisten sollen leer sein solang wie
ich nichts rein setze, am besten sollen die sogar immer nur erscheinen
wenn ich was rein setze und sie aktiviere ... wen ich drauf druecke dass
dann ein kleines fenster aufgeht wo das bild bissl groesser ist mit einem
groesseren text und beschreibung, und mit einem link ... die kacheln
sollen auch bissl spezieller sein."
- Kein hartkodierter Standardinhalt mehr auf der Startseite -- die Kachel
UND der ganze Abschnitt bleiben komplett unsichtbar, bis mindestens ein
Event in der Verwaltung ausgefuellt UND ueber einen neuen "Aktiv"-Schalter
freigeschaltet ist. Genau 1 aktives Event -> zentrierte Einzelkachel
statt halbleerem Zwei-Spalten-Raster.
- Klick auf eine Kachel oeffnet jetzt ein Detail-Fenster (groesseres Bild,
groesserer Titel/Text, optionaler direkter Link) statt sofort
wegzunavigieren.
- Kacheln bekommen einen goldenen Trophaeen-Akzent + dezenten wandernden
Lichtschimmer statt der neutralen Standardkarten-Optik.
- Bugfix unterwegs gefunden (Playwright-Screenshot): .jahres-event-card
blieb trotz [hidden]-Attribut sichtbar (dieselbe Ursache wie der
frühere .jahres-event-bild-Bug: display:block ueberschreibt die
eingebaute [hidden]-Regel bei gleicher Spezifitaet) -- explizite
[hidden]-Regel ergaenzt.
- Backend: server-internal/routes/events.js liefert oeffentlich NUR noch
aktivierte Slots aus (getEventsPublic), neuer authentifizierter Endpunkt
getEventsAdmin liefert der Verwaltung auch Entwuerfe zum Vorausfuellen.
10 automatisierte Tests gegen eine Fake-DB bestanden.
Backend-Teil (server-internal/) noch ohne Deploy-Zugriff -- Dogi muss ihn
manuell auf dogiintern ausrollen, sonst bleibt die Startseite beim alten
Verhalten (immer beide Slots zeigen, kein Aktiv-Schalter in der Verwaltung).
Co-Authored-By: Claude Opus 5 <[email protected]>
Die Erhoehung auf 1900px eben war ein Fehlgriff -- der Nutzer sah dadurch
bei seiner eigentlichen Fensterbreite (die volle Desktop-Nav laengst
gepasst haette, zweifach live bestaetigt) nur noch die schmale Menue-
Ansicht statt der gewohnten vollen Leiste. 1650px war die korrekte,
bereits bestaetigte Schwelle -- das eigentliche Problem war durchgehend
Browser-/CDN-Caching, nicht die Schwelle selbst.
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer meldet weiterhin Ueberlauf trotz zweifach bestaetigtem Live-Test
(exakt seine Fensterbreite 1993x931 gegen den echten Server, 0 Ueberlauf,
mehrfach reproduziert) -- Ursache vermutlich hartnaeckiger lokaler Cache
im jeweiligen Browserprofil, nicht mehr abschliessend ferndiagnostizierbar.
Statt weiter zu diskutieren: Sicherheitsabstand brachial vergroessert,
unabhaengig von der genauen Ursache. Hamburger-Schwelle 1650px -> 1900px --
deckt praktisch jede Laptop-/Desktop-Fensterbreite ab, echte Desktop-Nav
zeigt sich jetzt erst ab sehr breiten Fenstern (>1900px), dort mit viel
Luft (min(1560px, 94vw)).
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Report per Screenshot: "DogiCrew"-Knopf/"BALD"-Badge rechts
abgeschnitten. Ursache: die Hamburger-Schwelle (1480px) und der
Nav-Bar-Breiten-Deckel (1440px) wurden schon zweimal knapp nachgezogen,
reichten aber nicht mehr, seit die Nav um den "DogiCrew"-Knopf + "BALD"-
Badge gewachsen ist (braucht jetzt real ~1491px). Ergebnis: bei JEDER
Fensterbreite ab ca. 1500px (nicht nur in einer schmalen Uebergangszone)
lief die Nav dauerhaft ~50px ueber den Rand.
Diesmal mit echtem Sicherheitsabstand statt wieder nur knapp behoben:
Schwelle 1480px -> 1650px, Deckel 1440px -> 1560px. Per Playwright ueber
den kompletten Bereich 1024-2560px nachgeprueft, keine Ueberlaeufe mehr.
Header ist site-weit eine gemeinsame Vorlage (main.js/main.css), Fix gilt
damit automatisch fuer alle Seiten.
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 20.08.2026: "will ich in der admin seite das selbst
gestalten können, mit bild und text und am besten auch einen link." Auf
Rueckfrage entschieden: Titel/Text nur auf Deutsch eingeben, die anderen
4 Sprachen werden beim Speichern automatisch uebersetzt (MyMemory, 0€,
kein API-Key) -- bewusste Ausnahme von der sonst geltenden "immer echte
Uebersetzung"-Regel, klar dokumentiert und im Admin-UI selbst als Hinweis
sichtbar. de-CH bekommt denselben deutschen Text (Dialekt ist keine von
Uebersetzungs-APIs unterstuetzte Zielsprache).
Backend (server-internal):
- routes/events.js: getEventsPublic (oeffentlich, keine Session),
saveEvent + uploadEventImage (beide hinter neuer EVENTS_MANAGE-
Berechtigung, Owner immer erlaubt). Speichert in der bereits
bestehenden app_settings-Tabelle (2 feste Slots) statt einer neuen
Tabelle -- es gibt nie mehr als genau 2 Events.
- lib/translate.js: MyMemory-Anbindung mit "fail closed auf Deutsch"
pro Sprache, falls der Dienst mal nicht antwortet.
- Bild-Upload per multer, zufaelliger Dateiname (crypto.randomUUID,
verhindert Path-Traversal ueber den Originalnamen komplett), 5 MB
Limit, nur jpeg/png/webp, Ablage unter /var/lib/dogfather-internal/
uploads/events (NICHT im Git-Ordner -- uebersteht Deploys), oeffentlich
ausgeliefert unter /uploads.
- Neue Berechtigung EVENTS_MANAGE im Katalog (Gruppe "Startseite").
Frontend:
- index.html: laedt /events-of-year beim Aufruf, ueberschreibt pro Slot
Datum/Titel/Text/Bild/Link NUR wenn dort tatsaechlich etwas gespeichert
ist -- bleibt der Abruf aus oder ist ein Slot leer, bleibt der bisherige
fest eingebaute Standardinhalt (dieselben zwei echten Events) stehen.
Kein Blocker, kein sichtbarer Fehler bei Ausfall.
- verwaltung.html: neue Sektion "🏆 Event des Jahres" (nur mit
EVENTS_MANAGE sichtbar), 2 Karten mit Bild-Upload+Vorschau, Datum,
Titel, Text, Link, eigenem Speichern-Knopf pro Event.
Ausfuehrlich getestet, weil server-internal wegen fehlender Visual-
Studio-Build-Tools auf dieser Windows-Maschine nicht lokal mit echtem
better-sqlite3 laufen kann: routes/events.js komplett isoliert gegen eine
Fake-DB getestet (11 Szenarien: oeffentlicher Abruf, fehlende Session,
Session ohne Recht, Owner, Rolle MIT EVENTS_MANAGE, alle Validierungen,
Bild-Upload inkl. falscher Dateityp, Abruf des hochgeladenen Bilds).
index.html per Playwright mit echtem Netzwerk-Mocking gegen zwei
Szenarien getestet (API nicht erreichbar -> Standardinhalt bleibt; API
liefert echte Daten -> nur der befuellte Slot wird ueberschrieben, der
leere bleibt Standard). Dabei einen echten CSS-Bug gefunden und behoben
(display:block auf .jahres-event-bild überschrieb die [hidden]-Regel des
Browsers, leeres Bild waere immer sichtbar gewesen). verwaltung.html per
Playwright mit gemocktem Login+API end-to-end getestet: Formular wird
korrekt vorbefuellt, Bild-Upload + Speichern senden die richtigen Daten.
WICHTIG: server-internal laeuft unter einem eigenen Systembenutzer
(dogiintern), auf den ich (claudian) bewusst KEINEN Zugriff habe -- diese
Aenderung kann ich anders als sonst nicht selbst bis auf den Server
bringen. Dogi muss den Deploy-Schritt fuer server-internal selbst
ausfuehren (git pull + npm install + Neustart des dogiintern-Dienstes).
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 20.08.2026: volle Breite wie die 3 Welt-Kacheln zusammen,
zeigt immer genau zwei Events. Erste Belegung mit zwei bereits auf
zeitreise.html dokumentierten echten Events (28-Stunden-Stream 7. März
2026, Creator Cup 27. Juli - 2. August 2026) statt Platzhaltertext --
Texte sind gekuerzte, inhaltlich unveraenderte Fassungen der bestehenden
Zeitreise-Beschreibungen, beide Karten verlinken auf zeitreise.html. Alle
5 Sprachen gepflegt. Gleiche Karten-/Tag-Optik wie die Welt-Kacheln, damit
es wie ein natuerlicher vierter Baustein wirkt statt wie ein fremdes
Element.
Per Playwright verifiziert: exakt gleiche Breite wie .hero-grid (1180px),
2 Karten, kein horizontales Scrollen auf Mobil, keine Konsolenfehler.
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-Wunsch 20.08.2026: vier Zeitleisten-Karten sollten komplett weg
("Ein neues Kapitel beginnt" / Mai 2026, "Die ersten betreuten Creator",
"Weitere Scouts und Manager kommen hinzu", "Das erste Community-Treffen") --
entfernt aus zeitreise.html samt der zugehoerigen, jetzt ungenutzten
i18n-Keys (zr_ev5_*, zr_ev16_*, zr_ev17_*, zr_ev18_*). 20 -> 16 Karten.
Zusaetzlich: gleich am Seitenanfang soll auffallen, dass diese Zeitreise
noch nicht fertig ist. Bewusst NICHT die alte .todo-note-Optik reaktiviert
(die war fuer Entwickler gedacht und wurde am 31.07.2026 sitewide bewusst
unsichtbar gemacht) -- stattdessen ein neuer, fuer Besucher gestalteter
Hinweis (.zeit-baustelle), der zum Wachstums-Baum-Thema der Seite passt
(🌱 "Der Anfang" oben, 🌳 "...wächst weiter" unten): "Diese Zeitreise
wächst noch", babyblauer Glow-Rahmen, leicht wiegendes Setzlings-Icon.
Alle 5 Sprachen gepflegt.
Per Playwright verifiziert: alle 4 Karten wirklich weg (Text-Suche),
16 statt 20 .zeit-ast-Elemente, Hinweisbox sichtbar mit korrektem Text,
keine Konsolenfehler.
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Wunsch 20.08.2026: DogiCrew ist "das geilste Bonus" -- der Registrieren-
Knopf soll noch nicht bedienbar sein (Dogis PayPal-Business-Zugangsdaten fehlen
noch, siehe DogFather Website - Offene Punkte.md), aber Besucher sollen ueber
den Nav-Knopf trotzdem ganz normal auf die Seite kommen und die Vorschau sehen
duerfen -- "soll alles bleiben" ausser dem einen Knopf.
- Nav-Knopf (DogiCrew/Abo aktivieren, main.js renderAboButton): neues kleines
Schimmer-Badge "Bald" direkt in der Pille (main.css .nav-cta-soon, reine
Wiederverwendung von .btn-silver-text/-spark in kleinerem Massstab). Nur auf
den drei Zielen, die zur (noch gesperrten) Registrierung fuehren -- NICHT auf
supporter.html, das ist der echte, bereits funktionierende Bereich fuer
Dogi/VanVan als Test-Supporter.
- abonnieren.html: Registrieren-Knopf ersetzt durch neue .btn-gold-locked-
Komponente -- eigener Gold/Schloss-Stil (nicht das schon anderswo auf dieser
Seite vergebene .btn-silver), natives disabled-Attribut (kein JS noetig,
disabled-Buttons feuern keine Click-Events -- der bestehende Listener bleibt
unveraendert und inert). Formularfelder bleiben normal ausfuellbar (Teaser),
nur der Absende-Knopf ist gesperrt.
Bug waehrend der Umsetzung gefunden UND behoben, nicht nur uebersehen: die
rotierende Conic-Gradient-Randmaske von .btn-silver/.btn-legendary (copy-paste
als erster Versuch) verzieht sich auf diesem sehr langgestreckten 100%-Breite-
Knopf zu einer krummen Schlaufe -- exakt die dokumentierte Lektion in
Projektregeln.md Punkt 14 (03.08.2026, TikTok-Button-Bug), die beim ersten
Entwurf übersehen wurde. Per Playwright-Screenshots über mehrere Animations-
Frames nachgewiesen (nicht nur vermutet) und auch am bereits LIVE laufenden
.btn-silver auf dieser Seite reproduziert, um auszuschliessen, dass es an der
neuen Komponente statt an der Technik selbst liegt. Fix: derselbe sichere
Zwei-Layer-Background-Trick wie bei .abo-google-frame (gleiche Datei) --
Bewegung nur ueber background-position, bleibt geometrieunabhaengig exakt an
der Kontur. Nach dem Fix erneut ueber mehrere Frames verifiziert, sauber.
Co-Authored-By: Claude Opus 5 <[email protected]>
Nutzer-Report 20.08.2026: "auf dem Handy... passt nicht immer alles". Per echter
Mobil-Emulation (iPhone 15 Pro + Pixel 8, Playwright) nachgestellt statt geraten:
Die schwebenden Eck-Knöpfe (Musik-Widget unten rechts, Vorschau-Umschalter fuer
Dogi/VanVan unten links) sind absichtlich immer sichtbar (position:fixed, direkte
<body>-Kinder). Beim aufgeklappten Mobil-Hamburger-Menü lagen sie dadurch sichtbar
UEBER den untersten Menuepunkten (Sprachschalter "DE" + "Bewerben"-Knopf) und
verdeckten sie -- auf Screenshots klar zu sehen, betrifft jede der ueber 30 Seiten,
da das Menü ueberall gleich ist. Genau die Art Bug, die im Browser (Adressleiste
noch da, man kann drumrum navigieren) kaum auffaellt, aber in der installierten
Vollbild-App voll durchschlaegt.
Fix: :has()-Selektor blendet beide Widgets aus, solange .nav-links.open ist --
kein gemeinsamer Elternknoten mit dem Menue vorhanden, daher CSS statt weiterer
main.js-Logik. Nach dem Fix per Regressionstest ueber 6 Seiten x 2 Geraete erneut
verifiziert: Widgets erscheinen normal wieder, sobald das Menue schliesst, keine
neuen Konsolenfehler, kein horizontales Scrollen.
Co-Authored-By: Claude Opus 5 <[email protected]>
Der margin-top:12px, den ich für den Verbindungs-Pfeil ergänzt hatte,
erzeugte eine echte Lücke zwischen Knopf und Menü. Bewegte man die Maus
gerade runter, um einen Menüpunkt auszuwählen, verließ der Zeiger kurz
.nav-group (die Lücke gehört layoutmäßig zu keinem der beiden), das
Hover-abhängige Menü klappte sofort zu — Klicken wurde unmöglich. Fix:
Box sitzt wieder bündig an top:100% (keine Lücke), der Pfeil pokt jetzt
direkt in die Knopf-Kante statt in einen Leerraum.
Vorher: flacher zweifarbiger Kreis (hart 48/52 geteilt Blau/Rot) mit
Blitz-Emoji. Jetzt: dunkle Kern-Mitte mit separat rotierendem Farbring
dahinter (::before, conic-gradient Blau→Lila→Rot) — der Ring dreht sich,
der Blitz bleibt aufrecht stehen statt mitzudrehen. Größer (60px statt
42px), stärkerer Textschatten am Blitz, kräftigerer Puls-Glow. Zwei
kollidierende alte CSS-Regeln für denselben Selektor zu einer sauberen
zusammengeführt.
Root Cause: die geteilte @keyframes sprach-dropdown-in setzt "transform"
als GANZES pro Frame (nur translateY+scale) — das überschrieb nach jedem
Öffnen komplett das zentrierende translateX(-50%) der Basis-Regel, die
Box sprang dadurch sichtbar ~halbe Boxbreite nach rechts. Fix: eigene
@keyframes nav-dropdown-in NUR für .nav-dropdown, die translateX(-50%)
in jedem Frame mitführt. Der rechtsbündige Sprachschalter (kein
translateX nötig) behält bewusst die alte, geteilte Animation. Im
mobilen Hamburger-Menü (<1480px, volle Breite) wird die Animation ganz
deaktiviert, damit translateX(-50%) dort nicht die Vollbreiten-Box
verschiebt.
Neue Klasse .card-duel: rotierender Farbring exakt am Kartenrand,
driftender Aurora-Glow im Hintergrund, leuchtende Icon-Badges statt
schlichter Rahmen-Tags, dramatischer Hover-Lift mit Farbexplosion.
Trennwand + Blitz-Emblem in der Mitte zum pulsierenden "Energiekern"
mit Doppelring und fließendem Lichtstrom aufgewertet. Seitenlabels
bekommen einen leuchtenden Unterstrich. Alle Effekte nutzen bewusst
dieselben --accent/--accent-2-Variablen, die pro Karte schon gesetzt
waren (Community weiterhin babyblau/lila, Agentur weiterhin rot/orange
vom Spicy-Media-Theme) — Farbwelt bleibt exakt erhalten, nur die Machart
ist komplett neu.
Die Zentrierung war rechnerisch schon exakt (Dropdown-Mitte = Button-
Mitte), aber weil die Box (5 Menüpunkte) breiter ist als ein einzelner
Kategorie-Knopf, ragt sie optisch in Nachbar-Kategorien hinein und wirkt
dadurch "nicht zugeordnet". Jetzt zeigt ein kleiner Pfeil mittig unter
dem Knopf eindeutig auf die zugehörige Kategorie (Standard-Dropdown-UX-
Pattern). Im mobilen Hamburger-Menü (<1480px, dort volle Breite/statisch
positioniert) wird der Pfeil ausgeblendet, da dort nicht sinnvoll.
Auf Wunsch ("richtig geiles, mega schönes, das Beste vom Besten") spürbar
verstärkt: größere Maße (Padding/Schrift), Versalien-Schrift, dickerer
heller Rand, zusätzlicher dunkler+heller Doppelring per box-shadow (wie
ein Rarity-Rahmen), permanent pulsierender Farbglow (nicht mehr nur bei
Hover), schnellerer/kräftigerer Glare-Sweep, größere und auffälligere
Sparkles, deutlicherer Hover-Pop (Scale + Farbglow-Ausbruch).
Zweite Variante auf demselben Qualitätsniveau wie .btn-legendary, aber
mechanisch komplett anders (auf Wunsch von Dogi: "verschiedene, aber auf
dem Niveau"). Statt dunklem Hintergrund + hellem Rand/Chrome-Text ist hier
die GESAMTE Pille eine wandernde Holo-Foil-Fläche im Marken-Farbverlauf
(Babyblau → Lila → Pink → Gold), mit diagonalem Glare-Sweep wie echtes
Folienlicht, feinem Foliekorn (SVG-Turbulence) und dunkler geprägter
Schrift obendrauf. Noch nirgends im Einsatz — fertig zur Verwendung mit
.btn-holo/.btn-holo-text/.btn-holo-spark, Beispiel-Markup im CSS-Kommentar.
Neue CSS-Klasse .btn-legendary: eigener, besonders edler Button-Stil in
Babyblau + Silber (Chrome-Textglanz, rotierender Rand, Sparkles,
pulsierender Halo-Glow) — gleiche Machart wie .btn-silver, aber in der
Marken-Akzentfarbe und größer/kräftiger für einen "legendären" Auftritt.
Neuer i18n-Key str_casperlino_btn (Name bleibt in allen 5 Sprachen gleich).
- 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.
Tagescheck-Fund: overflow-x:hidden war nur auf <body> gesetzt, das
tatsächliche Scroll-Element im Standards-Modus ist aber <html>. Dadurch
ließ sich die Seite auf Handy-Breiten (320-414px, z.B. iPhone SE/12/13/14)
ca. 50px horizontal wegwischen und zeigte Leerraum hinter den absichtlich
überbreiten Deko-Elementen (Nebel-Partikel, Aurora-Hintergrund auf der
Startseite). Betraf vermutlich schon länger alle Seiten, nicht nur die
heutigen Änderungen. Fix: overflow-x:hidden zusätzlich auf <html>.
Der animierte Polarlicht-Rahmen (.collage-photo) war schon "mega", aber der
Bildinhalt selbst wirkte bei einfachen Portraitfotos flach im Vergleich zu
aufwendig gestalteten Postern wie dem DogFather-Manager-Artwork. Jetzt
bekommt JEDES Foto in .collage-photo (betrifft automatisch alle Seiten:
DogFather, HasiDog, Casper, VanVan, Team-Profile via profil.html, Startseiten-
Collage, Streamer-Seite etc.) zusätzlich:
- zwei Farbschein-Blooms in der jeweiligen Rahmenfarbe (--frame), oben-links
und unten-rechts, wie ein Studio-Rimlight
- eine sanfte Vignette unten für Tiefe/Fokus aufs Gesicht
- feines Filmkorn (SVG-Turbulence) für einen "produzierten" Look
- kräftigere Sättigung/Kontrast auf dem Foto selbst
- Basis-Regeln für p/.lead/.quote/h2/h3 in main.css angehoben (vorher
Standard-Browsergröße bzw. kleine clamp-Werte), betrifft jetzt alle
Seiten automatisch statt nur einzelne Seiten mit Extra-<style>-Block
- vanvan.html: lokalen, jetzt redundanten <style>-Override entfernt
(Werte sind identisch mit den neuen globalen main.css-Regeln)
- Kleingedrucktes (Footer, Badges, Formular-Fehlermeldungen etc.) bleibt
unverändert, da diese über spezifischere eigene font-size-Regeln verfügen
- Hauptfoto oben ("Wer ich bin") zeigt jetzt das echte VanVan-Foto
(vorher: illustrierte Team-Dogi-Grafik), diese wandert dafür in den
"Was Team Dogi für mich bedeutet"-Bereich
- .btn-silver ("Coming soon") komplett neu gestaltet: Chrome-Metallic-
Textverlauf, rotierender Metallrand-Schimmer, funkelnde Sparkle-Akzente,
pulsierender Halo-Glow statt reiner Farbkopie von .btn-tiktok
- .btn-tiktok und .btn-silver vergrößert (Padding/Schrift), wirkt sich
automatisch auf alle TikTok-Buttons site-weit aus
- Foto in der "Wer ich bin"-Sektion vergrößert (Grid-Spalten von 1:1 auf
1.25:1 zugunsten des Fotos).
- Fließtext/Lead/Zitate/Überschriften auf der ganzen Seite spürbar
größer (eigener <style>-Block, nur für diese Seite).
- Neuer .btn-silver-Button-Stil (gleicher Polarlicht-Mechanismus wie
.btn-tiktok, nur in Silber) direkt unter dem TikTok-Button, Text
"Coming soon…" für VanVans zweiten, noch nicht gestarteten Kanal.
Auf echten Maus-Geräten (hover:hover + pointer:fine) klappt das
Untermenü schon beim Drüberfahren auf. Klick-Verhalten bleibt für
Touch/Tablet UND für Tastatur-/Klick-Nutzer weiterhin bestehen — beide
Wege funktionieren parallel.
Der Polarlicht-Schein war bisher permanent sichtbar (22% Deckkraft),
dadurch wirkten alle Kategorien wie ausgefüllte Pillen-Buttons statt wie
normale Nav-Links. Jetzt 0% im Ruhezustand (reiner Textlink-Look) und
nur bei Hover/offenem Dropdown ein dezenter Farbschein als Hinweis.
Die aufgeklappten Einträge (z.B. "Die Person", "Streamer", "Casper" im
DogFather-Menü) hatten Pillen-Hintergrund + linken Farbbalken bei Hover
— sah zu sehr nach eigenen Buttons aus. Jetzt schlichte Textzeilen, nur
Farbwechsel bei Hover. Die Kategorie-Knöpfe selbst (DogFather/HasiDog/
Manager/...) bleiben unverändert Pillen. Sprachschalter-Dropdown
(eigene, spezifischere Regeln) ebenfalls unverändert.
Gleicher gläserner Dropdown-Stil wie beim Sprachschalter, aber im
Farbton der jeweiligen Kategorie statt neutral: dunkle Karte mit
farbigem Schein (--brand-1/--brand-2, jetzt am .nav-group statt am
Button gesetzt, damit Button-Aurora UND Dropdown denselben Farbklang
teilen), Einträge mit farbigem linkem Rand + leichtem Rutsch-Effekt bei
Hover statt der vorherigen einfachen grauen Hervorhebung.
Seit die Kategorien eigene farbige Polarlicht-Pillen haben, trennt die
Farbfläche schon optisch selbst — der vorherige große Gap (2.4rem)
wirkte dadurch übertrieben. Auf .7rem reduziert für einen kompakteren,
saubereren Look.
Beim letzten Umbau vergessen — jetzt mit Babyblau/Gold ergänzt, damit
wirklich jede Kategorie in der Leiste ihren eigenen dezenten Farbschein
hat, nicht nur DogFather/HasiDog/Manager/Medien/Start.
Der Wechsel auf justify-content:flex-start + größere Gaps + horizontales
Button-Padding hat die nötige Content-Breite über den 1180px-Container-
Deckel getrieben (bei 1400px Viewport 1523px vs. 1180px verfügbar).
Behoben: eigener, breiterer .nav-bar-Container (1180px -> 1400px, nur
für den Header, .container für den restlichen Seiteninhalt bleibt
unverändert bei 1180px), fester statt viewport-wachsender Bewerben-Gap,
Button-Padding von .8rem auf .55rem reduziert, Hamburger-Schwelle auf
1480px angehoben. Vor dem Commit bei mehreren Breiten numerisch
(scrollWidth vs. clientWidth) UND per Screenshot verifiziert.
- .nav-bar: justify-content von space-between auf flex-start + eigenen
Gap gewechselt — Menü rückt näher ans Logo, übriger Platz bleibt rechts
statt als große Lücke zwischen Logo und "Start" zu klaffen.
- .nav-links Abstand nochmal erhöht (2.1rem -> 2.4rem), da "Start"/
"Manager" laut Rückmeldung immer noch zu eng wirkten.
- Jede Nav-Kategorie (DogFather/HasiDog/Manager/Medien/Start) bekommt
jetzt einen dezenten, augenschonenden Polarlicht-Schimmer in den
ECHTEN Farben ihrer jeweiligen Welt (aus theme-dogfather/-hasidog/
-spicymedia.css) — ruhig im Normalzustand, etwas kräftiger bei Hover/
offenem Dropdown. "Links" bleibt bewusst neutral (keine eigene Welt).
.nav-links gap von 1.6rem auf 2.1rem erhöht. Hamburger-Schwelle
entsprechend von 1260px auf 1320px nachgezogen, damit bei mittleren
Laptop-Breiten weiterhin alles sauber passt statt zu überlaufen.
Beim Tagescheck-Selbstaudit gefunden: nach der Header-Vergrößerung vom
letzten Deploy (Logo/Schrift/Sprachschalter/Bewerben-Button größer)
passte die Desktop-Nav bei Viewport-Breiten zwischen ~900 und ~1250px
nicht mehr in eine Zeile — Sprachschalter und Bewerben-Button
verschwanden sichtbar rechts aus der Leiste, ohne dass der mobile
Hamburger-Umbruch (bisher erst ab 880px) schon gegriffen hätte.
Hamburger-Schwelle auf 1260px angehoben, damit die enge Zone komplett
vom mobilen Menü statt der zu schmalen Desktop-Zeile abgedeckt wird.
Nach der Größenanpassung passte der Text "Bewerben 🩵" nicht mehr immer
in eine Zeile und das Emoji rutschte darunter. white-space:nowrap +
inline-flex ergänzt, damit Text und Emoji immer in einer Zeile bleiben.
Hero-Bereich (Überschrift, Lead-Text, Live-Status-Box, Buttons, die drei
Welten-Karten) sowie Header (Logo, Markenname, Bewerben-Button, Sprach-
schalter) auf Wunsch spürbar, aber nicht übertrieben vergrößert — wirkte
auf großen Bildschirmen zu klein.
Der neue .btn-tiktok-Stil (Cyan #25F4EE + Pink/Rot #FE2C55 Polarlicht,
bisher nur auf vanvan.html/dogfather.html) wird jetzt konsequent überall
angewendet, wo es einen echten TikTok-Link gibt:
- profil.html: TikTok-Social-Link (Diene/Miss/Ghost) nutzt .btn-tiktok
statt generischem .btn-outline, andere Plattformen unverändert.
- streamplan.html: "Zur Dogi TikTok-Seite"-Button jetzt .btn-tiktok.
- links.html: neue .card-tiktok-Variante wendet denselben Polarlicht-
Mechanismus auf die TikTok-Karte im Karten-Grid an (Kartenform bleibt
erhalten, damit das Grid nicht durcheinanderkommt), alle anderen
Plattform-Karten (Instagram/Snapchat/Discord/Shop/Bewerben) bleiben
im normalen Karten-Stil.
Bewusst NUR TikTok — keine andere Plattform bekommt diese Farben.
Auf vanvan.html und dogfather.html ersetzt ein neuer .btn-tiktok-Button
(gleicher Polarlicht-/Schimmer-Mechanismus wie der "Bewerben"-Button im
Header, aber mit TikTok-Markenfarben Cyan #25F4EE + Pink/Rot #FE2C55
statt der allgemeinen Regenbogen-Aurora) den bisherigen reinen Text-
Handle-Mention. Bewusst NUR für echte TikTok-Links verwendet — keine
anderen Buttons/Links bekommen diese Farben.
Rand des Sprachknopfs jetzt konsistent silbern (wie der Dropdown-Rand),
auch im Hover-/Offen-Zustand - nur Kugel und Hintergrund-Glühen bleiben
bunt je Sprache.
Aurora-Farbwolke im Knopf-Hintergrund deutlich gedämpft (Opazität
.85 -> .32, bei Hover/offen .48) - der Knopf wirkt jetzt wie eine
schwarze, glühende Pille mit farbigem Rand-Glow statt einer komplett
bunt eingefärbten Fläche. Nutzerwunsch nach Screenshot-Feedback.
Statt nur einem Farbton (glut) je Sprache gibt es jetzt 2-3 echte
Landesfarben (farbstopps) pro Sprache: DE schwarz-rot-gold, CH rot-weiß,
EN blau-weiß-rot, FR blau-weiß-rot, PT grün-gold-rot. Der Knopf-
Hintergrund ist jetzt eine wandernde Aurora-Wolke aus genau diesen
Farben (analog zum Bewerben-Knopf), die Kugel ein rotierender
conic-gradient aus denselben Farben mit Glanzlicht obendrauf - wirkt
wie eine kleine, echt gemischt eingefärbte Kugel statt einer flachen
Einzelfarbe.
Panel-Hintergrund jetzt sattes Schwarz statt sprachfarbig eingefärbt,
Rand silbern mit pulsierendem Glow (statt der Sprachfarbe) - hebt den
Kasten klar von der bunten Kugel/Schrift jeder Zeile ab. Hover/aktive
Zeile jetzt neutral silbrig-transparent statt bunt eingefärbt, farbiger
linker Rand pro Sprache bleibt als Erkennungsmerkmal erhalten.
DogFatherGitandClaude Opus 5