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.
Auf Wunsch von Dogi dauerhaft festgehalten: Perfektionsanspruch, i18n-
Pflicht für jeden Text (inkl. JS-gerenderte Strings), Validierungs- und
Verifikations-Workflow vor/nach jedem Deploy, Chrome-Test-Sicherheits-
regel, Nachaudit-Pflicht nach größeren Batches. Spiegelt die
ausführlichere Fassung im Vault (DogFather Website.md).
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.
Gefunden bei systematischem Re-Check aller Seiten: der Platzhaltertext
für fehlgeschlagene Bilder auf index.html (Foto-Collage) und profil.html
war hart kodiert Deutsch. Jetzt über window.dogiUebersetzen() gelöst.
CREATORS ist aktuell noch leer, aber role/quote werden jetzt konsistent
mit team-scouts.html/team-modis.html über dogiFeld() aufgelöst, damit
künftige Creator-Profile automatisch mehrsprachig funktionieren, sobald
sie in data-creator.js ergänzt werden.
Bisher waren role/bio/bioHtml/intro/quote in data-scouts.js und
data-modis.js reine deutsche Strings — dadurch blieben z.B. Zitate
("Ein Mann, ein Wort.") und Kurzrollen auch bei gewählter Fremdsprache
Deutsch (siehe Screenshot-Hinweis: team-scouts.html in EN zeigte noch
deutsches Zitat).
- main.js: neuer window.dogiFeld()-Helper löst mehrsprachige Feld-Objekte
{ de, "de-CH", en, fr, pt } auf (rückwärtskompatibel zu reinen Strings).
- data-scouts.js: role (Patrick, Bananenstift) + bio (Patrick) + intro/
bioHtml/quote (Bananenstift) vollständig in allen 5 Sprachen.
- data-modis.js: role (alle 7) + bio (VanVan/Funny/Marina/Michi) +
bioHtml (Diene/Miss/Ghost) + rankLabel (Ghost) vollständig in allen
5 Sprachen. Lange bioHtml-Texte von unabhängigen Übersetzer-Agenten
erstellt, idiomatisch statt wörtlich.
- team-scouts.html, team-modis.html, index.html (Team-Vorschau),
profil.html: Rendering nutzt jetzt durchgängig dogiFeld() und rendert
bei Sprachwechsel (dogi-sprache-geaendert) neu — team-modis.html und
die Team-Vorschau auf index.html haben vorher GAR NICHT auf Sprach-
wechsel reagiert, das ist jetzt behoben. "Stufe"/"Profil ansehen" auf
team-modis.html liefen bisher hart kodiert Deutsch, jetzt über
i18n-team-modis.js.
Vollständige data-i18n-Abdeckung + Wörterbücher (de, de-CH echter Dialekt,
en, fr, pt) für zeitreise.html und 404.html — damit sind jetzt alle
Seiten der Website vollständig mehrsprachig.
Die drei bisher hart kodierten deutschen Statustexte in forms.js
(Validierungsfehler, Erfolgsmeldung, Mailto-Fallback inkl. Button)
laufen jetzt über window.dogiUebersetzen() und wurden in allen 4
Bewerbungsformular-Wörterbüchern (creator/scout/modi/kooperation) für
alle 5 Sprachen ergänzt.
Vollständige data-i18n-Abdeckung + Wörterbücher (de, de-CH echter Dialekt,
en, fr, pt) für 5 weitere der ~22 noch fehlenden Seiten. Dynamisch aus
data-modis.js/data-scouts.js gerenderte Personendaten bleiben bewusst
Deutsch, JS-Template-Strings (team-scouts.html) über
window.dogiUebersetzen() gelöst.
Vollständige Prüfung aller bereits übersetzten Seiten auf fehlende
data-i18n-Attribute (h1-h4, eyebrow, lead, Buttons): "Manager DogFather"
-Kartentitel auf index.html sowie die drei "Mehr entdecken"-Buttons auf
streamer.html hatten noch kein data-i18n und blieben bei Sprachwechsel
Deutsch. Jetzt ergänzt und in allen 5 Sprachen übersetzt.
Vollständige data-i18n-Abdeckung + Wörterbücher (de, de-CH echter Dialekt,
en, fr, pt) für 5 weitere der ~22 noch fehlenden Seiten. profil.html
übersetzt nur die statischen Rahmentexte (Personendaten aus
data-modis.js/data-scouts.js/data-creator.js bleiben bewusst Deutsch).
Bananenstifts Einstiegstext (Name/Alter/Familie + TikTok-Haltung) steht
jetzt direkt neben seinem großen Profilfoto, wie gewünscht. Neues
optionales person.intro-Feld in profil.html ergänzt (wirkt nur, wenn
gesetzt — Diene/Miss unverändert). Die identischen Absätze wurden aus
bioHtml entfernt, um Dopplung auf der Seite zu vermeiden.
Mehrere <h3>-Überschriften in Karten-Grids (Persönlichkeit, Werte,
Berufung, Nebenprojekte, Herzensprojekte auf dogfather.html; Familie,
Was HasiDog ausmacht, Inhalte, HasiDog-Welt auf hasidog.html) hatten nur
auf dem <p>-Text ein data-i18n-Attribut, nicht auf der Überschrift
selbst — dadurch blieb bei Sprachwechsel die Überschrift Deutsch,
während der Absatztext übersetzt wurde (gemischtsprachige Anzeige).
Jetzt alle 22 (dogfather) + 20 (hasidog) betroffenen Überschriften mit
eigenem data-i18n-Key versehen und in allen 5 Sprachen ergänzt.
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.
Eigener Text von Bananenstift (Scout, Linke Hand von DogFather) für sein
Profil auf profil.html?p=bananenstift, analog zum bioHtml-Format von
Diene und Miss.
Bisher hatten alle bereits übersetzten Unterseiten nur de/de-CH, en/fr/pt
fielen auf Deutsch zurück - das war der eigentliche Bug im Nutzer-
Feedback ("Sprache auf PT, Text bleibt Deutsch"). dogfather.html hat
jetzt alle 46 Textabschnitte in allen 5 Sprachen vollständig.
Sechste Unterseite mit eigenem i18n-Wörterbuch (69 Textabschnitte):
Hero, Was ist HasiDog, Eine eigene Welt, Die Welt von HasiDog (6 Karten),
Die HasiDog-Familie (4 Karten), Was HasiDog ausmacht (6 Karten), Die
HasiDog-Inhalte (8 Karten), Die HasiDog-Welt (5 Karten),
Willkommen-Abschluss, Schlaft-schön-Sektion.
Vierte Unterseite mit eigenem i18n-Wörterbuch (69 Textabschnitte):
Hero, Wer ich bin, Zufall oder Schicksal, Meine Stärken/Schwächen, Was
Dogi/Team Dogi für mich bedeutet, Fazit mit Signatur, Mehr entdecken.
Zwei weitere Unterseiten mit eigenem i18n-Wörterbuch (echter Dialekt,
nicht nur Hochdeutsch mit ss statt ß):
- casper.html: alle 20 Textabschnitte (Hero, Wer ist Casper, Caspers
eigene lange Vorstellung, Galerie).
- dogfather.html: alle 46 Textabschnitte (Hero, Wer ist Filipe, Der
Mensch hinter DogFather, Persönlichkeit/Werte/Berufung/Nebenprojekte/
Herzensprojekte-Karten).
Teil der laufenden Arbeit, jede Seite vollständig mehrsprachig zu
machen (Nutzerwunsch: "jedes einzelne Wort auf jeder Seite").
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.
Erste Unterseite (neben der Startseite) mit eigenem i18n-Wörterbuch:
alle 63 Textabschnitte (Hero, Persönlichkeit, Streamer, Casper, Team
Dogi, Manager, Was macht DogFather aus, Schluss-Statement) jetzt auch in
echtem Zürich-nahem Dialekt, nicht nur Navigation/Startseite. Adressiert
Nutzer-Feedback "nicht nur halb, sondern die richtige Sprache" - wenn
Schweiz ausgewählt ist, bleibt die Seite jetzt durchgehend im Dialekt,
auch nach dem Wechsel von der Startseite hierher.
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.
Statt eines schlichten Nav-Menüpunkts jetzt ein eigenes "Schmuckstück":
- Gläserne Pille mit Polarlicht-Schein + durchlaufendem Lichtschimmer
(analog zum Bewerben-Knopf), Rahmen/Glow in der jeweiligen Sprachfarbe.
- Kugel ist jetzt eine glänzende "Mini-Planet"-Kugel (radialer Verlauf +
Glanzlicht, komplett aus --sprach-glut in CSS gebaut statt aus einem
JS-Gradient) mit sanfter Eigendrehung.
- Dropdown im selben Glow-Look, schwebt beim Öffnen sanft ein, jeder
Eintrag bekommt einen farbigen linken Rand + Hover-Verschiebung.
Alles respektiert weiterhin prefers-reduced-motion.
Auf ausdrücklichen Wunsch des Nutzers ("nicht Deutsch Schweiz, sondern
richtig Schweiz") — vorher war das nur Hochdeutsch mit ss statt ß, jetzt
echter (geschriebener) Dialekt in gängiger, Zürich-naher Schreibweise
(Dialekt hat keine einheitliche Schriftform). Betrifft I18N_CORE in
main.js (Navigation, Fußzeile, Musik-Widget) und das komplette
Startseiten-Wörterbuch in i18n-index.js. Label im Sprachschalter von
"Deutsch (Schweiz)" zu "Schwiizerdütsch" geändert. Markennamen und
rechtliche Begriffe (Impressum & Datenschutz) bleiben unverändert.
Kräftigere, gesättigtere Akzentfarbe pro Sprache (glut) statt der eher
stumpfen Original-Flaggentöne. Die Farbe liegt jetzt nicht mehr nur auf
der Kugel, sondern auch auf dem Sprachcode-Text (DE/EN/...) und den
Dropdown-Einträgen, inklusive leuchtendem text-shadow. Sanft
pulsierender Glow-Effekt (Helligkeit/Sättigung, alle 3,2s) sorgt für den
gewünschten "Polarlicht"-Charakter, respektiert aber
prefers-reduced-motion.
Kleine Kugel im Sprachschalter nimmt jetzt die Landesfarben der aktuell
gewählten Sprache als Verlauf an (DE: schwarz-rot-gold, CH: rot/weiß,
EN: blau-weiß-rot, FR: blau-weiß-rot, PT: grün-rot) - mit Glanzlicht/
Schatten für einen echten Kugel-Look. Selbe Kugel auch vor jedem Eintrag
im Dropdown, damit die Sprachen auf einen Blick unterscheidbar sind.
Nur diesen einen Button entfernt (Nutzerwunsch), "Modi-Team ansehen"
bleibt. Ungenutzten Übersetzungsschlüssel idx_team_btn_scouts aus
i18n-index.js mit entfernt.
streamer.html: eigenes Foto (streamer-highlight.jpg) und Maskottchen-Foto
(streamer-mascot.jpg) tauschen die Plätze - Nutzerwunsch. Eigenes Foto
jetzt bei "Was macht DogFather aus?", Maskottchen jetzt bei Casper.
index.html: Team-Vorschau-Satz von "Von VanVan bis zu den Scouts" zu
"Von VanVan & die Modis" geändert (DE + EN/FR/PT-Übersetzungen in
i18n-index.js entsprechend angepasst).
DogFatherGit