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).
Bisher war der Rahmen ein statischer, matter Ring + ein starrer Farb-
Überzug - jetzt "atmet" der Glanz (box-shadow pulsiert langsam zwischen
schmal/dezent und breit/hell, siehe @keyframes collage-aurora-glow) und
ein zusätzlicher, langsam wandernder Lichtschimmer läuft über jedes Foto
(reuse von @keyframes btn-shimmer). Läuft über die --frame-Variable, wirkt
also automatisch in jeder Rahmenfarbe (frame-silver/lila/gold/rot/
tuerkis), nicht nur silber. Pausiert bei Hover (dann übernimmt der
stärkere Hover-Glow) und wird bei prefers-reduced-motion abgeschaltet.
- "Warum schauen Menschen zu?" (mit Foto) steht jetzt VOR "Der Mensch
hinter DogFather" statt danach - Wunsch von Dogi
- Foto war ein Hochkant-Bild (864x1536), wurde aber in eine Querformat-Box
(aspect-ratio:16/10) gezwungen und dadurch stark beschnitten. Jetzt
aspect-ratio:auto + width:100%;height:auto -> komplettes Bild sichtbar,
Box passt sich der echten Bildform an.
.hero-cinematic wirkte auf großen PC-Screens zu klein (Artwork, Überschrift,
Text, Live-Status-Kästchen, Buttons). Padding erhöht (mehr Raum fürs
contain-Artwork), h1/.lead/eyebrow/Buttons/Kästchen-Text in diesem
Abschnitt gezielt etwas größer - mobile Untergrenze der clamp()s bleibt
unverändert, damit es auf kleinen Screens nicht zu groß wird.
Top-Level-Nav (Start/Dogfather/HasiDog/...) von 1.05rem auf 1.14rem,
Dropdown-Einträge darunter von 1rem auf 1.06rem - Wunsch von Dogi nach
dem letzten Anpassungsschritt.
Die Top-Level-Nav-Einträge (Start/Dogfather/HasiDog/Manager/Medien/Links)
hatten nie eine explizite Schriftgröße (liefen auf Browser-Standard) -
jetzt fest auf 1.05rem gesetzt (etwas größer als vorher), Dropdown-Einträge
von .92rem auf 1rem angehoben.
- 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
Ticketanizers Inbound-Ticket-API erzeugt bei API-Tickets nachweislich
keinen echten Discord-Kanal (nur Web-Inbox + Rollen-Ping im Log-Kanal,
auch nach manuellem Uebernehmen nicht) - das wurde heute gemeinsam mit
Dogi live in der Ticketanizer-Inbox und in Discord verifiziert. Deshalb
zusaetzlich ein normaler Discord-Webhook pro Zielkanal, der die komplette
Bewerbung garantiert sichtbar direkt postet.
Kanal-Zuordnung (von Dogi aus Discord kopiert):
modi -> #modi-bewerbung (DISCORD_WEBHOOK_MODI)
kooperation -> #kooperations-bewerbung (DISCORD_WEBHOOK_KOOPERATION)
scout + creator -> #scout-bewerbung gemeinsam (DISCORD_WEBHOOK_SCOUT_MANAGER)
- Neu: cloudflare-worker/src/lib/discord-webhooks.js
- applications.js: postet jetzt parallel zu Ticketanizer (Promise.all,
weiterhin ueber ctx.waitUntil im Hintergrund, blockiert nie die Antwort)
- Alle 3 Secrets bereits live gesetzt und deployed
- Getestet mit allen 4 Bewerbungstypen (modi/kooperation/scout/creator) -
laut Log alle erfolgreich gepostet, Testdaten aus D1 wieder entfernt
- README.md: Einschraenkung von Ticketanizer dokumentiert + neue
Webhook-Einrichtungsanleitung
- 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)
Fremde Bewerber koennen theoretisch kurz hintereinander absenden (z.B.
wenn Dogi live "bewerbt euch jetzt" sagt) und dabei dasselbe Rate-Limit
treffen, das beim Testen aufgefallen ist. Jetzt wird ein 429 automatisch
bis zu 2x mit kurzer Pause wiederholt (Retry-After-Header wird beachtet,
sonst 2s/5s Standard-Wartezeit), bevor endgueltig aufgegeben wird - laeuft
komplett im Hintergrund ueber ctx.waitUntil, blockiert nie die Antwort an
den Bewerber. Die Bewerbung selbst landet ohnehin immer sicher in der
eigenen Datenbank, unabhaengig vom Ticketanizer-Ergebnis.
Getestet mit 3 gleichzeitigen Bewerbungen - alle liefen sauber durch.
Bisher hatte der Chamäleon-Musik-Knopf nur einen einfachen, statischen
Farbverlauf - jetzt läuft er wie der Bewerben-Knopf: dunkler Grund +
wandernde, weichgezeichnete Farbwolken + durchlaufender Lichtschimmer
(wiederverwendete @keyframes btn-aurora/btn-shimmer). Die Farben kommen
weiterhin live per Canvas-Analyse aus dem Seitenbild (--music-c1/-c2).
Auf Start-/Bewerben-Seiten überschreibt der bestehende Block die Farben
weiterhin fest auf die Bewerben-Palette (höhere Selektor-Spezifität).
- .btn (primary/secondary/outline) bekommt jetzt sitewide denselben STIL wie
der "Bewerben"-Knopf oben (wandernde, weichgezeichnete Farbwolken +
Lichtschimmer) - aber mit den Farben der jeweiligen Seite/Karte
(--accent/--accent-2) statt der festen Regenbogen-Palette. Läuft über
negative z-index-Ebenen, Button-Text bleibt automatisch scharf obenauf,
keine HTML-Änderung in den ~30 Seiten nötig.
- Musik-Knopf zeigt den festen Polarlicht-Look (wie der Bewerben-Knopf)
jetzt auch auf der Startseite, nicht mehr nur auf den Bewerben-Seiten -
auf allen anderen Seiten bleibt er das Chamäleon (passt sich dem
jeweiligen Seitenbild an)
- main.js: SPA-Seitenwechsel übernimmt jetzt die komplette body-Klassenliste
der neuen Seite (vorher wurde nur "mit-hintergrund" einzeln synchronisiert -
Sonderklassen wie "bewerben-seite"/"start-seite" blieben beim Klick-Wechsel
fälschlich hängen bzw. fehlten)
Bisher wurden Fehler beim Ticket-Anlegen komplett stillschweigend
verschluckt (bewusst, damit es die Bewerbung nie blockiert) - das machte
es aber unmöglich zu sehen, WARUM ein Ticket nicht ankam. Jetzt wird
jeder Versuch (Erfolg wie Fehler, inkl. HTTP-Status und Antworttext)
über console.log/console.error protokolliert, sichtbar per
`wrangler tail`.
Umgestellt von der ursprünglichen Discord-Webhook-Idee auf die offizielle
Ticketanizer-Inbound-Ticket-API (api.ticketanizer.com/v1/tickets) - erzeugt
echte Tickets statt nur Nachrichten, landen dadurch direkt im richtigen
Ticketanizer-Bereich in Discord.
- Neu: cloudflare-worker/src/lib/ticketanizer.js. panel_id pro Bewerbungs-
bereich fest hinterlegt (aus dem Ticketanizer-Dashboard abgelesen):
Modi=4, Kooperation=5, Scout=6, Creator=7 (dort "Manager-Bewerbung")
- Alte discord.js entfernt (Ansatz verworfen)
- applications.js: Aufruf entsprechend umbenannt/angepasst
- README.md: Einrichtungsanleitung aktualisiert (TICKETANIZER_API_KEY
statt 4x DISCORD_WEBHOOK_*)
- Ticketanizer bleibt rein informativ, kein Ausfallpunkt - Bewerbung wird
immer in der eigenen Datenbank gespeichert, unabhängig vom Ticket-Erfolg
- Secret TICKETANIZER_API_KEY bereits live gesetzt und deployed; End-to-
End mit 3 Test-Bewerbungen geprüft (HTTP Ok geloggt), Testeinträge aus
der DB wieder entfernt
Jede eingehende Bewerbung landet weiterhin wie bisher in der D1-Datenbank,
wird zusätzlich aber (falls eine Webhook-URL hinterlegt ist) als formatierte
Discord-Nachricht in den passenden Kanal gepostet - pro Bewerbungsbereich
(Modi/Scout/Creator/Kooperation) eine eigene Webhook-URL, exakt wie auf der
Website getrennt. Läuft über normale Discord-Webhooks, kompatibel mit
Ticketanizer, falls dessen Kanäle eigene Ziel-URLs im selben Format anbieten.
- Neu: cloudflare-worker/src/lib/discord.js (Embed-Aufbau, Feld-Labels
pro Formular, Farbe je Bewerbungsart)
- applications.js: submitApplication ruft den Versand nach dem Speichern
auf, über ctx.waitUntil() damit die Antwort an den Nutzer nicht wartet
- worker.js: ctx wird jetzt an fetch() durchgereicht
- Discord ist rein informativ - fehlt die Webhook-URL oder ist Discord
kurz nicht erreichbar, wird die Bewerbung trotzdem ganz normal
gespeichert
- README.md: Einrichtungsanleitung (wrangler secret put DISCORD_WEBHOOK_*)
Bisher kannte der Knopf nur 3 feste Weltfarben (dogfather/hasidog/
spicymedia). Jetzt analysiert main.js (musikKnopfFarbenAnpassen) per
Canvas das tatsächliche Bild jeder einzelnen Seite - Durchschnittsfarbe
plus die kräftigste Farbe darin, als Verlauf - und setzt sie live als
--music-c1/--music-c2 auf den Knopf.
Bildquelle in Prioritätsreihenfolge: 1) scharfes Hero-Banner-Bild,
2) Startseiten-Artwork, 3) Ambiente-Hintergrundbild der Seite. Ohne
Bild fällt der Knopf sauber auf die normale Weltfarbe zurück. Läuft
beim ersten Laden UND nach jedem nahtlosen Seitenwechsel (SPA-Navigation),
damit die Farbe wirklich bei jeder Seite mitwechselt.
Das auf 240px verkleinerte Banner war laut Dogi immer noch zu dominant -
man sah beim Öffnen zuerst das Bild statt die Person. Jetzt gibt es auf
profil.html gar kein scharfes Kopfbanner mehr, nur noch die ohnehin
vorhandene weichgezeichnete Hintergrundstimmung (body.mit-hintergrund,
liegt fest hinter allem und nimmt keinen Platz im Textfluss ein). Direkt
nach dem kompakten Titel kommt sofort das Profilfoto mit Name und Bio.
Auf Wunsch: die öffentlichen Bewerbungsseiten (bewerben*.html) bleiben
unverändert bestehen, aber die internen "Rückseiten", wo die Bewerbungen
verwaltet wurden, werden nicht mehr gebraucht und sind komplett raus:
- postfach.html (Bewerbungs-Postfach) und zugaenge.html (Zugänge & Rollen)
gelöscht
- zugehörige tote Skripte gelöscht: postfach.js, zugaenge.js, admin-auth.js
- "Login"-Knopf in der Navigation entfernt
- "Intern"-Block im Footer (Bewerbungs-Postfach / Zugänge & Rollen) entfernt
- KEIN_NAHTLOSER_WECHSEL-Ausnahmeliste geleert (referenzierte nur die
jetzt gelöschten Seiten)
- .nav-login CSS-Regeln entfernt (totes CSS)
- robots.txt: Disallow-Zeile für /postfach.html entfernt
Der Cloudflare-Worker (Backend/D1) und die Bewerbungsformulare selbst
bleiben unangetastet — Bewerbungen können weiterhin eingereicht werden.
Das Banner-Bild auf profil.html nahm bisher seine volle Original-Höhe ein
(analog zu den anderen Seiten) und schob das eigentliche Profil weit nach
unten. Jetzt begrenzt auf 240px (Desktop) / 150px (Mobil), object-fit:cover
statt height:auto, plus stärkerer Verlaufs-Overlay — das Bild wirkt jetzt
als Stimmungsstreifen im Hintergrund, das Profil (Foto/Name/Bio) ist sofort
sichtbar.
- Ghost (Modi-Profil): ausführliche neue Selbstvorstellung "Vom stillen
Zuhörer zum festen Teil der Familie" ersetzt die bisherige Kurzversion
- casper.html: neuer Abschnitt mit Caspers eigener Vorstellung aus seiner
Perspektive ("Ein Husky mit dem größten Herzen der Welt")
- Links: Instagram & Snapchat als Platzhalter ergänzt, Discord auf "Nur auf Anfrage" -> Kontaktseite
- Musik-Button auf allen Bewerben-Seiten bekommt jetzt das gleiche Polarlicht-Design wie der Bewerben-Nav-Button
- Streamplan im Nav-Menu zurück in die HasiDog-Kategorie verschoben
- Neuer Textabschnitt "Der Mensch hinter DogFather" auf dogfather.html und streamer.html ergänzt
- "Bewerben"-Knopf: statt einfacher 50/50-Teilung jetzt ein echtes
Polarlicht aus wandernden blau/lila/rot/orange Farbwolken plus
durchlaufendem Lichtschimmer (zwei animierte Ebenen)
- Musik-Knopf: faerbt sich wieder mit der Theme-Farbe der jeweiligen
Seite ein (babyblau/rot), statt fest halb/halb zu sein
- werte.html: komplett neuer Text "Meine Werte als Manager" als
13 Wert-Karten (Mindset, Loyalitaet, Menschlichkeit, Kommunikation,
Verantwortung, Entwicklung, Ziele, Loesungen, Respekt, Individualitaet,
Zusammenhalt, Leidenschaft, Anspruch) plus Intro und Schluss-Zitat
- manager.html: neuer Text "Das bin ich als Manager" mit neuem Portrait
(Dogfather-Neon-Artwork) als Hauptinhalt; das alte Spicy-Media-Logo
samt Text ist jetzt ganz unten vor dem Footer
- team-scouts.html: Ueberschrift "Mein Scout-Team" statt "Unser
Scout-Team"; Patrick ist jetzt "Rechte Hand" (Bananenstift bleibt
"Linke Hand")
Co-Authored-By: Claude Opus 5 <[email protected]>
Nach mehreren Anlaeufen mit CSS background-size (cover schnitt Raender
ab, "100% auto" schnitt oben/unten ab sobald die Box nicht exakt im
Bildseitenverhaeltnis war) jetzt die einzige Loesung, die beides IMMER
garantiert: ein echtes <img width:100% height:auto> statt eines CSS-
Hintergrunds. Die Bildhoehe bestimmt sich selbst statt in eine
vorgegebene Box gepresst zu werden -- dadurch kann nichts mehr
beschnitten werden, unabhaengig vom Bildseitenverhaeltnis.
- 18 Seiten (alle bewerben-*, casper, community, creator, dogfather,
hasidog, manager, stimmen, streamplan, team-modis, team-scouts,
vanvan, werte, zeitreise) bekommen einen echten Bild-Banner oben im
Kopfbereich statt eines CSS-Hintergrunds. Bild sitzt jetzt als
eigener Banner OBERHALB der Ueberschrift, mit weichem Verlauf zur
Seite hin.
- profil.html: gleiches Prinzip, Bild wird per JS passend zur Person
(Modi/Scout/Creator-Welt) nachgeladen.
- index.html/hasidog.html (Kino-Hintergrund mit Text UEBER dem Bild +
Polarlicht-Effekten): Redesign auf Banner-Layout haette das Design
zerstoert. Stattdessen die scharfe Bildebene auf "contain" umgestellt
(garantiert komplett sichtbar), die vorhandene weichgezeichnete
Cover-Ebene darunter fuellt jeden Rand, den "contain" freilaesst --
wirkt dadurch weiterhin randlos, obwohl die scharfen Pixel nie
beschnitten werden.
Co-Authored-By: Claude Opus 5 <[email protected]>
- Funny: Rolle unter dem Bild jetzt "Mama der Community" statt "Modi"
- Alle Profilkarten (Modis, Scouts, Creator) haben jetzt einen festen
lila Avatar-Ring statt der zufaellig rotierenden Farben -- Dogi
gefiel, wie Michis zufaellig lila wurde
- Scout-Team: Patrick und Bananenstift zeigen jetzt "Scout (Manager) —
Linke Hand" statt "Scout — Team Dogi"
- Neues Feld bioHtml (neben dem bisherigen kurzen bio) in allen drei
Datendateien (Modis/Scouts/Creator): fuer ausfuehrliche, formatierte
Vorstellungen mit mehreren Absaetzen und Zwischenueberschriften.
profil.html rendert bioHtml jetzt in einem eigenen, breiteren Lese-
bereich unterhalb des kurzen Steckbriefs -- funktioniert fuer jede
Person auf der Seite, nicht nur als Einzelfall
- Diene: komplette eigene Vorstellung eingetragen (bioHtml) + TikTok-
Handle @_ditschi als Social-Link ergaenzt
Co-Authored-By: Claude Opus 5 <[email protected]>
- Neues Hintergrundbild (Husky + Dogi zwischen Blau/Rot-Blitzen) auf
bewerben.html, ersetzt das alte Motiv
- Layout in zwei Spalten: Modi + Kooperation links (blaue Community-
Seite des Bildes), Scout + Streamer/Creator-Bewerbung rechts (rote
Agentur-Seite), passend zur Bildkomposition
- Kleine leuchtende Trennwand in der Mitte, blau-lila-rot-Verlauf mit
Blitz-Knoten, verbindet die Bild-Lichtgrenze visuell mit dem Layout
- "Bewerben"-Knopf in der Navigation und der Musik-Knopf unten rechts
sind jetzt fest halb babyblau/halb rot (statt Theme-Farbe) -- beide
gehoeren zu keiner der beiden Welten allein
Co-Authored-By: Claude Opus 5 <[email protected]>
- team-modis.html: "seine beste Freundin" -> "Super Super Sekretaerin"
- Team-Hierarchie ist jetzt eine echte Pyramide statt eines gleich-
foermigen Rasters: eine Ebene pro Rang, zentriert, mit leuchtender
Verbindungslinie und Knoten pro Stufe (Organigramm-Optik). Karten-
und Avatar-Groesse nimmt von Stufe zu Stufe ab, VanVans grosse,
separate Karte bleibt oben unveraendert gross.
Co-Authored-By: Claude Opus 5 <[email protected]>
Wunsch: eigene Seiten fuer Agentur-Bewerbungen und Community, konkret
Modi fuer Dogfather, Scouts fuer Dogfather, und Streamer die Dogfather
als Manager suchen -- statt allem auf einer Seite mit Tabs.
Neu:
- bewerben-modi.html -- Community/Team Dogi, babyblau, eigenes Motiv
- bewerben-scout.html -- Agentur, rot, Scout-Motiv
- bewerben-creator.html -- Agentur, rot, "Streamer? Ich such dich als
Creator." -- fuer Streamer, die einen Manager suchen
- bewerben-kooperation.html -- Agentur, rot, Business-Anfragen
bewerben.html ist jetzt eine kurze Uebersicht mit drei grossen Karten
(Modi/Scout/Creator) plus einem Hinweis auf die Kooperationsseite,
statt eines Tab-Systems.
Alle internen Links aktualisiert (team-modis.html, team-scouts.html,
creator.html, links.html-Text) auf die jeweils passende, direkte Seite.
Generische "Jetzt bewerben"-Knoepfe (Startseite, Werte, Manager) bleiben
bewusst auf der Uebersicht, da dort keine Rolle vorausgewaehlt ist.
forms.js vereinfacht: das Tab-/Hintergrundwechsel-System ist raus, jede
Seite traegt ihr Motiv jetzt wie jede andere Seite der Website fest im
HTML. Kein Backend-/Datenbankaenderung noetig -- "modi" war schon als
Bewerbungstyp erlaubt.
Co-Authored-By: Claude Opus 5 <[email protected]>
- bewerben.html: neuer Reiter "Modi" mit eigenem Formular (Name, E-Mail,
Discord/TikTok-Handle, Community-Erfahrung, Verfuegbarkeit, Motivation)
- Reiter wechselt jetzt nicht nur das Hintergrundbild, sondern auch die
Farbwelt: Creator/Scout/Kooperation bleiben Spicy-Media-rot (Agentur),
Modi wird babyblau (Team Dogi) -- passend zur bestehenden Regel
"Rot ist NUR die Agentur"
- Direkt-Link bewerben.html#modi oeffnet die Bewerbung gleich auf dem
richtigen Reiter; team-modis.html hat jetzt einen "Als Modi bewerben"
Knopf, der genau dahin fuehrt
- Worker: "modi" als vierter erlaubter Bewerbungstyp, laeuft ueber
dieselbe Sichtbarkeits-Berechtigung wie Scout/Kooperation (der feste
Rechte-Katalog aus dem Anforderungsdokument kennt nur zwei Bewerbungs-
Sichtbereiche -- es wurde bewusst KEIN neuer Permission-Key erfunden)
Co-Authored-By: Claude Opus 5 <[email protected]>
Neues optionales Feld rankLabel ueberschreibt nur die ANZEIGE der Stufe,
die Sortierung laeuft weiter ueber rank. Wirkt auf team-modis.html und
profil.html.
Co-Authored-By: Claude Opus 5 <[email protected]>
Wunsch: Klick auf eine Person (z.B. Bananenstift) oeffnet eine eigene
Seite mit grossem Foto und Vorstellungstext daneben - fuer jeden.
- Neue Seite profil.html: generische Profilseite, liest Person per
?p=<slug> aus MODIS/SCOUTS/CREATORS, zeigt grosses Foto (4:5, farbiger
Rahmen passend zur Person), Name, Rolle, Vorstellungstext, optional
Zitat und Social-Links. Welt/Theme (blau=Team Dogi, rot=Agentur) und
Hintergrundmotiv passen sich automatisch an, ob die Person Modi,
Scout oder Creator ist. Unbekannter Slug zeigt eine freundliche
Fehlermeldung statt kaputter Seite.
- data-modis.js, data-scouts.js, data-creator.js: neues Feld "slug"
(eindeutige ID fuer die URL) und "bio" (Vorstellungstext) fuer jede
Person ergaenzt. VanVan behaelt ihre eigene, ausfuehrlichere Seite
(vanvan.html) und wird nicht auf profil.html umgeleitet.
- team-modis.html, team-scouts.html, creator.html, index.html
(Team-Vorschau): Karten sind jetzt komplett anklickbar (ganze Karte
ist ein Link), nicht mehr nur ein kleiner Knopf.
- Bugfix: gerade curly quotes ("„...\"") mitten in einem doppelt
angefuehrten JS-String schlossen den String vorzeitig ab und haetten
main.js kaputt gemacht (per node --check gefunden, bevor es live ging).
Co-Authored-By: Claude Opus 5 <[email protected]>
Nach dem letzten Schritt (ganzes Bild sichtbar, contain) kam die Rueck-
meldung: super, aber die Breite soll jetzt randlos ausgefuellt sein.
- .page-bg und .hero-artwork: background-size von contain auf 100% auto.
Breite ist immer exakt randlos voll, Hoehe skaliert im selben
Seitenverhaeltnis mit. Passt das Bild oben/unten nicht ganz in den
Kasten, wird dort sauber beschnitten (statt seitlich, wie es frueher
mit "cover" war) bzw. scheint die weichgezeichnete Ebene durch, wenn
das Bild kuerzer als der Kasten ist.
Co-Authored-By: Claude Opus 5 <[email protected]>
Auf Wunsch: das ganze Motiv soll immer zu sehen sein, oben/unten/
links/rechts nichts abgeschnitten.
- .page-bg (14 Seiten: Casper, Dogfather, Modi-Team, Scouts, VanVan,
Bewerben, Manager, Streamplan, Zeitreise, Stimmen, Community, Werte,
Creator, HasiDog): background-size von cover auf contain. Der scharfe
Bild-Layer zeigt jetzt garantiert das komplette Motiv; wo dadurch
links/rechts oder oben/unten Rand frei bleibt, scheint die weichge-
zeichnete Ebene dahinter durch statt einer leeren Flaeche.
- .hero-artwork (Trio-Kinohintergrund auf Startseite + altem HasiDog-
Layout): ebenfalls auf contain umgestellt, Ken-Burns-Zoom entfernt
(ein Zoom haette immer einen Teil aus dem Bild geschoben - Widerspruch
zu "alles soll zu sehen sein"). Feste, ruhige Darstellung.
- Handy: der scharfe Layer bleibt beim vollen Original (kein Zuschnitt
mehr auf den portraetierten *-mobile.jpg); nur der unscharfe
Hintergrund-Layer darf weiter den Handy-Zuschnitt nutzen, da er nur
Stimmung ist, nicht "das Bild" selbst.
- Tote Regeln (Kenburns-Keyframes, leere reduced-motion-Regel) entfernt.
Co-Authored-By: Claude Opus 5 <[email protected]>
Bestaetigt in Chrome UND Edge (headless): backdrop-filter:blur() auf der
sticky-positionierten Kopfzeile fuehrte dazu, dass Logo und Menue-Knopf
bei schmaler Fensterbreite unsichtbar gerendert wurden (bestaetigt durch
Debug-Umrandungen und durch Deaktivieren des Filters, wonach der Inhalt
wieder auftauchte). Jetzt deckende Hintergrundfarbe ohne Weichzeichner.
Co-Authored-By: Claude Opus 5 <[email protected]>
Beim Testen in schmaler Breite fielen Logo/Markenname und Hamburger-Menue
komplett weg. Ursache: die Kopfzeile ist ein Flexbox-Container ohne
flex-shrink:0 auf den wichtigen Elementen - unter bestimmten Bedingungen
(z.B. bevor das mobile Menue seine fixed-Position bekommt) konnten Logo
und Menue-Knopf auf Breite 0 gequetscht werden.
Fix: nav-bar bekommt flex-wrap:nowrap, brand und nav-toggle bekommen
flex-shrink:0 - sie behalten jetzt immer ihre volle Groesse.
Co-Authored-By: Claude Opus 5 <[email protected]>
- Seitenkoerper: Motiv staerker weichgezeichnet und abgedunkelt
(Helligkeit 62%), Abdunkelung von 62-90% auf 80-95% angehoben
- Kopfbereich: Vignette und Verlauf kraeftiger, Mitte aber hell genug
dass das Motiv weiter klar erkennbar bleibt
- Ziel: langes Lesen soll angenehm sein, das Bild bleibt Stimmung
Co-Authored-By: Claude Opus 5 <[email protected]>
Ursache gefunden und im Browser nachgewiesen: Ein relativer Pfad in einer
CSS-Variablen wird nicht gegen die HTML-Seite aufgeloest, sondern gegen die
Datei, in der die Variable benutzt wird — also assets/css/main.css. Daraus
wurde "assets/css/assets/img/bg-*.jpg", was es nicht gibt. Ergebnis: kein
Bild, nur der Abdunkelungs-Verlauf war sichtbar.
- Alle 14 Seiten auf absolute Pfade ab Seitenwurzel umgestellt
(/assets/img/...), die stimmen unabhaengig von der Aufloesung
- Gleiche Korrektur im Reiter-Wechsel der Bewerbungsseite
Co-Authored-By: Claude Opus 5 <[email protected]>
Die Modis sind Dogfathers persoenliches Team (Team Dogi) und standen
faelschlich unter "Manager" — passend zur Regel: Rot/Agentur nur fuer
Spicy Media, Team Dogi ist babyblau.
- Navigation: Modi-Team und VanVan von "Manager" nach "Dogfather"
- Fusszeile: Modi-Team und VanVan in die Dogfather-Spalte, dafuer
Community zur HasiDog-Spalte
- Manager-Seite: Modi-Karte aus "Das Team dahinter" entfernt, dort
bleiben nur Scouts und Creator
Co-Authored-By: Claude Opus 5 <[email protected]>
Die Motive waren da, aber viel zu stark abgedunkelt und nur hinter dem
Kopfbereich - dadurch praktisch unsichtbar.
- Motiv traegt jetzt die GANZE Seite: fest hinter allem, leicht
weichgezeichnet, sanft abgedunkelt. Beim Scrollen ueberall praesent.
- Im Kopfbereich zeigt es sich gestochen scharf und fast unabgedunkelt
(vorher bis zu 88% schwarz, jetzt nur noch wenige Prozent in der Mitte)
- Lesbarkeit ueber kraeftige Schriftschatten statt ueber Abdunkeln
- Kopfbereich hoeher und mittig ausgerichtet, damit das Motiv wirkt
- Bildvariablen liegen jetzt am <body> und vererben sich nach unten;
nahtloser Seitenwechsel und Reiter-Wechsel nehmen sie korrekt mit
Co-Authored-By: Claude Opus 5 <[email protected]>
Login:
- Kleiner "🔒 Login"-Knopf oben rechts in der Navigation, auf jeder
Seite sichtbar. Fuehrt direkt zum Postfach mit der Code-Eingabe.
Nahtloser Seitenwechsel:
- Klicks auf interne Links tauschen nur noch <main> aus, statt die
ganze Seite neu zu laden. Kopfzeile, Fussleiste und Musik-Knopf
bleiben stehen — der Spotify-Player laeuft dadurch weiter.
- Postfach und Zugaenge sind bewusst ausgenommen und laden normal:
an Login, Sitzung und Rechten aendert sich nichts.
- Seiteneigene Skripte werden der Reihe nach nachgeladen; spaete
DOMContentLoaded-Anmeldungen laufen sofort, damit Inhalte wie die
Team-Vorschau auch nach einem Wechsel erscheinen.
- Faellt bei einem Fehler automatisch auf normales Laden zurueck.
- Zurueck-/Vorwaerts-Knopf und geteilte Links funktionieren weiter.
Co-Authored-By: Claude Opus 5 <[email protected]>
DogFatherGit
