DogFatherGitandClaude Sonnet 5
1f0ec994a9
Nutzer-Report mit drei Bildern vom Handy: 1. HERO-BILD SASS NICHT MEHR HINTER DEM TEXT (index.html) .hero-artwork hat "inset:0" -- füllt also die GESAMTE Höhe von .hero-cinematic, und diese Sektion umschließt nicht nur die Überschrift, sondern auch die 3 Welt-Kacheln darunter. Auf dem Handy wird die Sektion durch den 4-zeilig umbrechenden Titel + Kacheln riesig (~1570px bei 390px Breite) -- das Trio-Bild (16:9, contain-skaliert an die Breite) wurde dadurch nur ~220px hoch und mittig in dieser riesigen Fläche zentriert, landete also als schmaler Streifen zwischen den Buttons und den Welt-Kacheln statt hinter der Überschrift. Fix: eigenes festes Seitenverhältnis (4:3) für die Bildbox auf dem Handy, von OBEN verankert statt zentriert, background-size auf "cover" -- Verlauf eigens für die neue, kürzere Box abgestimmt (die Desktop-Version wäre zu abrupt gewesen). Über 6 Breiten (320-768px) mit Playwright gegengeprüft. 2. MENÜ-KNOPF ZU UNAUFFÄLLIG (main.js + main.css, alle Seiten) "da soll auch menü stehen und die 3 striche" + "die kiste soll auch leicht eine andere farbe haben so dass sie auffällt, eine leicht blau tönung". Sichtbares "Menü" neben den drei Strichen ergänzt (neuer i18n- Schlüssel nav_toggle_label, alle 5 Sprachen) + dezente Babyblau-Tönung (8% Deckkraft, passend zur Markenfarbe --accent). Dabei einen unabhängigen, zweiten Bug gefunden und mitbehoben: durch die neue Knopfbreite/-höhe wurde ein Rechenfehler im geschlossenen Mobilmenü sichtbar -- "translateY(-110%)" reicht nur, wenn das Panel mindestens 10x so hoch ist wie der Kopfbereich; war das nicht der Fall, ragte die Unterkante (der Sprachschalter) ein paar Pixel sichtbar ins Bild. Robusterer Ersatz: -100% + fester 200px-Puffer, unabhängig von Panel- und Kopfbereichshöhe. Über 3 Breiten gegengeprüft (Panel unsichtbar UND öffnet weiterhin normal). 3. "ÖFFNEN"-KNOPF AUF DER ZUGANGSSEITE ABGESCHNITTEN (gate.html) .gate-card trägt "flex: 1 1 220px" für die Desktop-Reihe (220px als BREITE gedacht). Sobald @media max-width:480px auf flex-direction:column umschaltet, gilt dieselbe Zahl als HÖHE -- die Karte wurde auf genau 220px Höhe gequetscht. overflow:hidden setzt zusätzlich das normale Mindestmaß (min-height:auto) auf 0 herunter, wodurch nichts das Zusammenquetschen verhinderte -- der "Öffnen"-Knopf wurde unten abgeschnitten. Fix: flex:none in genau diesem Media-Block, Breite bleibt weiterhin über width:100%/max-width geregelt. An 4 Breiten x 3 Kacheln (Dogi/VanVan/Diene) gegengeprüft: Karten jetzt 258px statt 220px hoch, Knopf komplett sichtbar. Vollständiger Regressionslauf: alle 34 Seiten bei 390px (kein Überlauf, Menü-Knopf überall erreichbar und beschriftet), Desktop bei 1920px unverändert (Hamburger weiterhin nur unter der bestehenden 1650px- Schwelle sichtbar). Cache-Busting-Version auf 20260821t erhöht. Co-Authored-By: Claude Sonnet 5 <[email protected]>
269 lines
13 KiB
HTML
269 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" data-theme="dogfather">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Zeitreise — DOGFATHER UNIVERSE</title>
|
||
<meta name="description" content="Die Geschichte von DogFather in einer interaktiven Zeitleiste." />
|
||
<link rel="icon" type="image/png" href="assets/img/favicon.png" />
|
||
<link rel="manifest" href="/manifest.json" />
|
||
<meta name="theme-color" content="#0b0d10" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
|
||
<meta property="og:title" content="Zeitreise — DOGFATHER UNIVERSE" />
|
||
<meta property="og:description" content="Die Geschichte von DogFather in einer interaktiven Zeitleiste." />
|
||
<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
|
||
<meta property="og:url" content="https://dogfather-universe.com/zeitreise.html" />
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="Zeitreise — DOGFATHER UNIVERSE" />
|
||
<meta name="twitter:description" content="Die Geschichte von DogFather in einer interaktiven Zeitleiste." />
|
||
<meta name="twitter:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
|
||
|
||
<link rel="stylesheet" href="assets/css/main.css?v=20260821t" />
|
||
<link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260821t" />
|
||
<link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260821t" />
|
||
<link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260821t" />
|
||
</head>
|
||
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-zeitreise.jpg');--page-bg-mobile:url('/assets/img/bg-zeitreise-mobile.jpg');">
|
||
<div id="site-header"></div>
|
||
|
||
<main>
|
||
<section class="hero page-bg">
|
||
<div class="hero-banner"><img src="/assets/img/bg-zeitreise.jpg" alt="" loading="eager" /></div>
|
||
<div class="container">
|
||
<span class="eyebrow" data-i18n="zr_eyebrow">Welt 1 — DogFather</span>
|
||
<h1 data-i18n="zr_h1">Zeitreise</h1>
|
||
<p class="lead worlds" data-i18n="zr_lead">Die Geschichte von DogFather & Team Dogi.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section-tight">
|
||
<div class="container">
|
||
<!-- Nutzer-Wunsch 20.08.2026: gleich am Anfang gut sichtbar zeigen, dass
|
||
diese Zeitreise noch aktiv wächst/nicht fertig ist — bewusst NICHT
|
||
die alte .todo-note-Optik (die war für Entwickler gedacht und wurde
|
||
am 31.07.2026 sitewide unsichtbar gemacht), sondern ein einladender,
|
||
für Besucher gestalteter Hinweis im Wachstums-Baum-Thema dieser
|
||
Seite (passt zu 🌱 "Der Anfang" oben und 🌳 "...wächst weiter" unten). -->
|
||
<div class="zeit-baustelle">
|
||
<span class="zeit-baustelle-icon" aria-hidden="true">🌱</span>
|
||
<div>
|
||
<strong data-i18n="zr_baustelle_h3">Diese Zeitreise wächst noch</strong>
|
||
<p data-i18n="zr_baustelle_p">Wir ergänzen laufend weitere Kapitel, Daten und Momente aus der Geschichte von DogFather & Team Dogi — schau gern öfter mal wieder vorbei.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-baum">
|
||
<div class="zeit-baum-kappe">
|
||
<span aria-hidden="true">🌱</span>
|
||
<span data-i18n="zr_baum_start">Der Anfang</span>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 20.08.2026: echtes Datum nachgetragen (24. Oktober 2023) --
|
||
bleibt weiterhin die erste Karte, da es das früheste Datum der ganzen
|
||
Zeitleiste ist. -->
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev1_date">24. Oktober 2023</div>
|
||
<h3 data-i18n="zr_ev1_h3">Start als Content Creator</h3>
|
||
<p data-i18n="zr_ev1_p">DogFather beginnt seine Reise auf TikTok.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 20.08.2026: echtes Datum nachgetragen (Anfang 2025) — bleibt
|
||
an dieser Stelle, da "Anfang 2025" chronologisch weiterhin vor "Ostern
|
||
2025" (nächste Karte) liegt. -->
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev2_date">Anfang 2025</div>
|
||
<h3 data-i18n="zr_ev2_h3">Team Dogi entsteht</h3>
|
||
<p data-i18n="zr_ev2_p">Aus einzelnen Zuschauern wird eine starke Gemeinschaft.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev3_date">Ostern 2025</div>
|
||
<h3 data-i18n="zr_ev3_h3">HasiDog wird geboren</h3>
|
||
<p data-i18n="zr_ev3_p">Aus einem Spitznamen entsteht eine eigenständige Marke.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 20.08.2026: echtes Datum nachgetragen (November 2025) und
|
||
an die chronologisch richtige Stelle verschoben (lag vorher weiter unten
|
||
unter "Datum folgt"). -->
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev13_date">November 2025</div>
|
||
<h3 data-i18n="zr_ev13_h3">Das Buch „HasiDog & Casper"</h3>
|
||
<p data-i18n="zr_ev13_p">Die Geschichte von DogFather, HasiDog und seinem Husky Casper wird zum Buch.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 20.08.2026: echtes Datum nachgetragen (1. Januar 2026) und
|
||
an die chronologisch richtige Stelle verschoben (lag vorher weiter unten
|
||
unter "Datum folgt"). -->
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev14_date">1. Januar 2026</div>
|
||
<h3 data-i18n="zr_ev14_h3">HasiDog startet auf Spotify</h3>
|
||
<p data-i18n="zr_ev14_p">HasiDog erhält sein eigenes Musikprojekt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev4_date">7. März 2026</div>
|
||
<h3 data-i18n="zr_ev4_h3">Der 28-Stunden-Stream</h3>
|
||
<p data-i18n="zr_ev4_p">DogFather stellt sich einer besonderen Herausforderung und streamt 28 Stunden.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev6_date">2. bis 15. Juni 2026</div>
|
||
<h3 data-i18n="zr_ev6_h3">Die große 12-Stunden-Challenge</h3>
|
||
<p data-i18n="zr_ev6_p">Eine weitere Streaming-Herausforderung gemeinsam mit Team Dogi.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev7_date">Juli 2026</div>
|
||
<h3 data-i18n="zr_ev7_h3">Start als Manager bei Spicy Media</h3>
|
||
<p data-i18n="zr_ev7_p">DogFather übernimmt bei Spicy Media die Rolle als Manager.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Nutzer-Wunsch 21.08.2026: neue Station, chronologisch nach "Juli 2026 —
|
||
Start als Manager" (kein genauer Tag) und vor "27. Juli bis 2. August 2026 —
|
||
Creator Cup" einsortiert, weil 25. Juli das genauere Datum ist. Als
|
||
Meilenstein markiert -- zwei besondere Premieren an einem Tag (erstes
|
||
TiliDog-Fan-Treffen UND erstes persönliches Treffen von DogFather und Tili). -->
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev21_date">25. Juli 2026</div>
|
||
<h3 data-i18n="zr_ev21_h3">Erstes Fan-Treffen: Team TiliDog</h3>
|
||
<p data-i18n="zr_ev21_p">In Wuppertal kommt die Community von Dogi & Tili zum allerersten Mal persönlich zusammen – ein richtig mega Tag voller guter Laune. Es ist gleichzeitig etwas ganz Besonderes: das erste Aufeinandertreffen von DogFather und Tili überhaupt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev9_date">27. Juli bis 2. August 2026</div>
|
||
<h3 data-i18n="zr_ev9_h3">Der Creator Cup</h3>
|
||
<p data-i18n="zr_ev9_p">Gemeinsam mit Cidgem organisiert DogFather den Creator Cup.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev10_date">28. Juli 2026</div>
|
||
<h3 data-i18n="zr_ev10_h3">Patrick und Bananenstift werden Scouts</h3>
|
||
<p data-i18n="zr_ev10_p">Sie schließen sich DogFather als Scouts an.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev11_date">28. Juli 2026</div>
|
||
<h3 data-i18n="zr_ev11_h3">Aufbau eines eigenen Creator-Systems</h3>
|
||
<p data-i18n="zr_ev11_p">Eine langfristige Struktur für Creator, Scouts und zukünftige Manager.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev12_date">Ende Juli 2026</div>
|
||
<h3 data-i18n="zr_ev12_h3">Das DOGFATHER UNIVERSE nimmt Form an</h3>
|
||
<p data-i18n="zr_ev12_p">Die Planung einer eigenen Website beginnt.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Reihenfolge getauscht (Nutzer-Wunsch 20.08.2026): der Website-Start hat
|
||
ein konkretes Datum (21.08.2026) und steht deshalb VOR der Teddy-
|
||
Kooperation, deren Datum noch offen ist ("Datum folgt") -- so bleibt die
|
||
Zeitleiste durchgehend chronologisch lesbar. -->
|
||
<div class="zeit-ast meilenstein">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev19_date">21. August 2026, 21 Uhr</div>
|
||
<h3 data-i18n="zr_ev19_h3">DOGFATHER UNIVERSE geht online</h3>
|
||
<p data-i18n="zr_ev19_p">Die offizielle Website öffnet ihre Türen.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_datum_folgt">Datum folgt</div>
|
||
<h3 data-i18n="zr_ev15_h3">Kooperation mit VanVan Teddys</h3>
|
||
<p data-i18n="zr_ev15_p">Eine eigene Merchandise-Kooperation rund um VanVan startet.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-ast meilenstein zeit-final">
|
||
<div class="zeit-node" aria-hidden="true"></div>
|
||
<div class="zeit-karte">
|
||
<div class="zeit-datum" data-i18n="zr_ev20_date">Fortsetzung folgt</div>
|
||
<h3 data-i18n="zr_ev20_h3">Die Geschichte ist noch lange nicht vorbei</h3>
|
||
<p data-i18n="zr_ev20_p">Das DOGFATHER UNIVERSE wächst weiter.</p>
|
||
<p class="zeit-zitat" data-i18n="zr_ev20_quote">Denn aus einem einzelnen TikTok-Livestream wurde eine Community – und aus dieser Community wurde eine Familie.</p>
|
||
<p class="zeit-familie" data-i18n="zr_ev20_familie">Team Dogi ist Familie. 🩵</p>
|
||
<p class="zeit-signoff" data-i18n="zr_ev20_signoff">Liebe Grüße<br>-euer DogFather</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="zeit-baum-wurzel">
|
||
<span aria-hidden="true">🌳</span>
|
||
<span data-i18n="zr_baum_wächst">…und die Geschichte wächst weiter</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="site-footer"></div>
|
||
<script src="assets/js/i18n-zeitreise.js?v=20260821t"></script>
|
||
<script src="assets/js/main.js?v=20260821t"></script>
|
||
<script>
|
||
/* Wachstums-Reveal: Äste blenden sich beim Scrollen sanft ein — passt
|
||
zum "wachsenden Baum"-Konzept dieser Seite. Rein page-lokal, betrifft
|
||
keine andere Seite. */
|
||
(function () {
|
||
var aeste = document.querySelectorAll(".zeit-ast");
|
||
if (!aeste.length) return;
|
||
if (!("IntersectionObserver" in window)) {
|
||
aeste.forEach(function (el) { el.classList.add("zeit-sichtbar"); });
|
||
return;
|
||
}
|
||
var beobachter = new IntersectionObserver(
|
||
function (eintraege) {
|
||
eintraege.forEach(function (eintrag) {
|
||
if (eintrag.isIntersecting) {
|
||
eintrag.target.classList.add("zeit-sichtbar");
|
||
beobachter.unobserve(eintrag.target);
|
||
}
|
||
});
|
||
},
|
||
{ threshold: 0.15, rootMargin: "0px 0px -40px 0px" }
|
||
);
|
||
aeste.forEach(function (el) { beobachter.observe(el); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|