Files
dogfather-universe/tt-muddi.html
T
DogFatherGitandClaude Sonnet 5 1f0ec994a9 Drei Handy-Nachbesserungen: Trio-Bild hinter dem Text, auffälliger Menü-Knopf, abgeschnittener Öffnen-Knopf
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]>
2026-08-21 23:37:14 +02:00

160 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>Tili — meine TikTok-Muddi — DOGFATHER UNIVERSE</title>
<meta name="description" content="Eine persönliche Widmung von Dogi an Tili — seine TikTok-Muddi, die erste und bis heute einzige Streamerin, die ihm all die Zeit treu geblieben ist." />
<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="Tili — meine TikTok-Muddi — DOGFATHER UNIVERSE" />
<meta property="og:description" content="Eine persönliche Widmung von Dogi an Tili — seine TikTok-Muddi, die erste und bis heute einzige Streamerin, die ihm all die Zeit treu geblieben ist." />
<meta property="og:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
<meta property="og:url" content="https://dogfather-universe.com/tt-muddi.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Tili — meine TikTok-Muddi — DOGFATHER UNIVERSE" />
<meta name="twitter:description" content="Eine persönliche Widmung von Dogi an Tili — seine TikTok-Muddi, die erste und bis heute einzige Streamerin, die ihm all die Zeit treu geblieben ist." />
<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" />
<style>
/* Gleiche Anpassung wie vanvan.html: der site-weit etwas größere
Fließtext wirkt bei einem so langen persönlichen Brief zu wuchtig —
hier gezielt etwas kleiner, ohne main.css global zu verändern. */
main p { font-size: 1.14rem; line-height: 1.78; }
main .lead { font-size: 1.28rem; }
main .quote { font-size: 1.25rem; }
main h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.tm-signatur { margin-top: 2rem; }
.tm-signatur strong { font-size: 1.15rem; }
</style>
</head>
<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-tt-muddi.jpg');--page-bg-mobile:url('/assets/img/bg-tt-muddi.jpg');">
<div id="site-header"></div>
<main>
<section class="hero page-bg">
<div class="hero-banner"><img src="/assets/img/bg-tt-muddi.jpg" alt="Tili und Dogfather" loading="eager" /></div>
<div class="container">
<span class="eyebrow" data-i18n="tm_eyebrow">🩵 Familie</span>
<h1 data-i18n="tm_h1">Tili – meine TikTok-Muddi und ein ganz besonderer Teil meines Lebens 🩵</h1>
</div>
</section>
<section class="section-tight">
<div class="container grid grid-2" style="align-items:center;grid-template-columns:1fr 1.25fr;">
<div class="collage-photo" style="aspect-ratio:3/4;border-radius:var(--radius);">
<img src="assets/img/tt-muddi-1.jpg" alt="Tili und Dogfather" style="width:100%;height:100%;object-fit:cover;" />
</div>
<div>
<p class="lead worlds" data-i18n="tm_lead" style="margin-bottom:1.2rem;">Eine persönliche Widmung von Dogi an eine seiner wichtigsten Vertrauenspersonen.</p>
<a class="btn-tiktok" href="https://www.tiktok.com/@tili07069" target="_blank" rel="noopener" style="margin-bottom:1.2rem;"><span class="btn-tiktok-note" aria-hidden="true">♪</span><span class="btn-tiktok-text">TikTok</span></a>
<p data-i18n="tm_1">Es gibt Menschen, die einem nicht einfach nur begegnen. Sie treten in das eigene Leben und hinterlassen etwas, das sich nur schwer in Worte fassen lässt. Sie geben einem Kraft, schenken Vertrauen und erinnern einen daran, dass es selbst in schwierigen Zeiten noch ehrliche und gute Menschen gibt.</p>
<p class="quote" data-i18n="tm_quote1" style="margin-top:1.4rem;"><strong>Für mich ist Tili genau so ein Mensch.</strong></p>
</div>
</div>
</section>
<section class="section-tight">
<div class="container" style="max-width:70ch;">
<p data-i18n="tm_2">Tili ist nicht nur eine Streamerin, die mich von Anfang an begleitet hat. Sie ist die erste und bis heute einzige Streamerin, die mir über all die Zeit hinweg treu geblieben ist. Während sich Wege verändert, Menschen entfernt und viele Versprechen irgendwann ihre Bedeutung verloren haben, war sie weiterhin da.</p>
<p data-i18n="tm_3a" style="margin-top:1.2rem;">Nicht nur dann, wenn alles gut lief.</p>
<p data-i18n="tm_3b">Nicht nur dann, wenn es etwas zu feiern gab.</p>
<p data-i18n="tm_3c">Sondern auch in den Momenten, in denen es schwierig wurde und ich Menschen an meiner Seite besonders gebraucht habe.</p>
<p data-i18n="tm_4" style="margin-top:1.2rem;">Genau diese Treue ist etwas, das ich niemals als selbstverständlich ansehen werde.</p>
</div>
</section>
<section>
<div class="container grid grid-2" style="align-items:center;">
<div>
<p data-i18n="tm_5">Doch Tili ist für mich schon lange viel mehr als eine Streamerin oder ein Teil meiner TikTok-Geschichte. Sie ist meine zweite Mama, meine ganz persönliche TikTok-Muddi. Ein Mensch, bei dem ich mich nicht verstellen muss und bei dem ich weiß, dass ich mit meinen Gedanken, meinen Sorgen und meinen Gefühlen niemals allein bin.</p>
<p data-i18n="tm_6">Sie hört zu, ohne sofort zu urteilen. Sie sagt ehrlich ihre Meinung, auch wenn diese vielleicht nicht immer das ist, was ich gerade hören möchte. Und genau das macht echtes Vertrauen aus: nicht nur die schönen Worte zu sagen, sondern füreinander da zu sein, ehrlich zu bleiben und sich gegenseitig wieder aufzurichten.</p>
</div>
<div class="collage-photo frame-lila" style="aspect-ratio:auto;border-radius:var(--radius);">
<img src="assets/img/tt-muddi-2.jpg" alt="Tili und Dogfather in Umarmung" style="width:100%;height:auto;display:block;" />
</div>
</div>
</section>
<section class="section-tight">
<div class="container" style="max-width:70ch;">
<p data-i18n="tm_7">Neben VanVan gehört Tili zu den wichtigsten Vertrauenspersonen in meinem Leben. Sie kennt nicht nur den Streamer Dogfather, den die Menschen auf TikTok sehen. Sie kennt auch den Menschen dahinter. Sie kennt meine starken Seiten, aber auch meine Unsicherheiten, meine Sorgen und die Momente, in denen selbst ich nicht mehr genau weiß, wie es weitergehen soll.</p>
<p class="quote" data-i18n="tm_8" style="margin-top:1.2rem;"><strong>Und trotzdem bleibt sie.</strong></p>
</div>
</section>
<section>
<div class="container" style="max-width:70ch;">
<p data-i18n="tm_9">Tili gibt mir das Gefühl, verstanden und angenommen zu werden – nicht aufgrund von Zahlen, Reichweite, Erfolgen oder irgendeiner Rolle, sondern einfach als der Mensch, der ich bin.</p>
<p data-i18n="tm_10" style="margin-top:1.2rem;">Sie ist für mich ein Stück Familie geworden.</p>
<p data-i18n="tm_11">Eine Familie, die nicht durch denselben Namen oder dasselbe Blut entstanden ist, sondern durch Vertrauen, Loyalität, gemeinsame Erlebnisse und die Entscheidung, auch dann füreinander da zu sein, wenn das Leben einmal nicht perfekt läuft.</p>
</div>
</section>
<section class="section-tight">
<div class="container grid grid-2" style="align-items:center;">
<div class="collage-photo frame-lila" style="aspect-ratio:auto;border-radius:var(--radius);">
<img src="assets/img/tt-muddi-3.jpg" alt="Tili und Dogfather Arm in Arm" style="width:100%;height:auto;display:block;" />
</div>
<div>
<p data-i18n="tm_12">Für mich steht Tili für Hoffnung. Sie ist einer der Menschen, die mir zeigen, dass das Gute im Menschen noch existiert. Dass es noch Personen gibt, die nicht nur an sich selbst denken. Menschen, die ein ehrliches Herz besitzen, anderen Mut machen und ihre Hand nicht zurückziehen, sobald der Weg schwieriger wird.</p>
<p data-i18n="tm_13">Gerade in einer Welt, in der vieles schnelllebig und oberflächlich geworden ist, ist ein Mensch wie Tili etwas unglaublich Wertvolles.</p>
</div>
</div>
</section>
<section>
<div class="container" style="max-width:70ch;">
<p data-i18n="tm_14">Sie hat mich unterstützt, an mich geglaubt und mir immer wieder gezeigt, dass ich nicht allein bin. Vielleicht kann ich ihr niemals vollständig zurückgeben, was sie mir durch ihre Art, ihre Treue und ihr Vertrauen gegeben hat. Aber ich möchte, dass sie weiß, dass ich nichts davon vergesse.</p>
<p data-i18n="tm_15a" style="margin-top:1.2rem;">Ich vergesse nicht, wer geblieben ist.</p>
<p data-i18n="tm_15b">Ich vergesse nicht, wer an mich geglaubt hat.</p>
<p data-i18n="tm_15c">Und ich vergesse niemals, wer mir in schweren Momenten gezeigt hat, dass Aufgeben keine Lösung ist.</p>
<p data-i18n="tm_16" style="margin-top:1.2rem;">Diese Seite ist deshalb nicht einfach nur eine Vorstellung. Sie ist eine persönliche Widmung an einen Menschen, der einen festen Platz in meinem Leben und in meinem Herzen besitzt.</p>
</div>
</section>
<section class="section-tight">
<div class="container text-center" style="max-width:64ch;">
<h2 data-i18n="tm_danke_h2">Danke, Tili.</h2>
<p data-i18n="tm_danke1">Danke für deine Treue.</p>
<p data-i18n="tm_danke2">Danke für dein Vertrauen.</p>
<p data-i18n="tm_danke3">Danke für deine Ehrlichkeit.</p>
<p data-i18n="tm_danke4">Danke für jedes Gespräch, jeden Rat und jeden Moment, in dem du für mich da warst.</p>
<p data-i18n="tm_danke5">Danke dafür, dass du meine TikTok-Muddi bist und mir immer wieder zeigst, wie wertvoll echte Verbundenheit sein kann.</p>
<p data-i18n="tm_17" style="margin-top:1.6rem;">Egal, wie viele Wege noch vor uns liegen und wie sehr sich das Leben verändern wird: Du wirst immer ein wichtiger Teil meiner Geschichte sein.</p>
<p data-i18n="tm_18a" style="margin-top:1.2rem;">Nicht nur als Streamerin.</p>
<p data-i18n="tm_18b">Nicht nur als Unterstützerin.</p>
<p data-i18n="tm_18c">Sondern als Vertrauensperson, zweite Mama und Familie.</p>
<p class="quote" data-i18n="tm_quote2" style="margin-top:1.6rem;"><strong>Diese Seite ist für dich, Tili – weil besondere Menschen einen besonderen Platz verdienen.</strong></p>
<div class="tm-signatur">
<p data-i18n="tm_signatur_dank">In tiefer Dankbarkeit und von ganzem Herzen</p>
<p><strong data-i18n="tm_signatur1">Dein Dogi</strong><br /><em data-i18n="tm_signatur2">Dogfather – Filipe 🩵</em></p>
</div>
</div>
</section>
<section class="section-tight">
<div class="container text-center">
<div class="btn-row" style="justify-content:center;">
<a class="btn btn-outline" href="dogfather.html" data-i18n="tm_btn_zurueck">← Zurück zu DogFather</a>
</div>
</div>
</section>
</main>
<div id="site-footer"></div>
<script src="assets/js/i18n-tt-muddi.js?v=20260821t"></script>
<script src="assets/js/main.js?v=20260821t"></script>
</body>
</html>