From c98667cb99817dbe508e7a83a4ae833ff1e52ff9 Mon Sep 17 00:00:00 2001
From: Dogfather <dogfather1608@gmail.com>
Date: Sun, 2 Aug 2026 19:36:13 +0200
Subject: [PATCH] =?UTF-8?q?vanvan.html:=20gr=C3=B6=C3=9Feres=20Foto,=20gr?=
 =?UTF-8?q?=C3=B6=C3=9Ferer=20Text,=20neuer=20"Coming=20soon"-Button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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.
---
 assets/css/main.css      | 59 ++++++++++++++++++++++++++++++++++++++++
 assets/js/i18n-vanvan.js |  4 +++
 vanvan.html              | 13 +++++++--
 3 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index fc815df..2127dcf 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -598,6 +598,65 @@ header.site-header {
   .btn-tiktok::before, .btn-tiktok::after { animation: none; }
 }
 
+/* Silberner "Coming soon"-Button: exakt derselbe Polarlicht-Mechanismus
+   wie .btn-tiktok, nur in gedämpftem Silber statt Markenfarben — für
+   Dinge, die noch nicht live sind (z.B. VanVans zweiter Kanal). */
+.btn-silver {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  gap: .4rem;
+  padding: .6rem 1.5rem;
+  border-radius: 999px;
+  color: #fff;
+  font-weight: 700;
+  font-size: .95rem;
+  background: #0b0e14;
+  border: 1px solid rgba(255, 255, 255, .16);
+  text-decoration: none;
+  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
+}
+.btn-silver span {
+  position: relative;
+  z-index: 2;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
+}
+.btn-silver::before {
+  content: "";
+  position: absolute;
+  inset: -60%;
+  z-index: 0;
+  background:
+    radial-gradient(circle at 25% 30%, rgba(230, 235, 242, .85), transparent 55%),
+    radial-gradient(circle at 75% 70%, rgba(190, 200, 215, .7), transparent 58%);
+  filter: blur(9px) saturate(1.2);
+  animation: nav-cta-aurora 9s ease-in-out infinite alternate;
+}
+.btn-silver::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%);
+  background-size: 240% 100%;
+  mix-blend-mode: overlay;
+  animation: nav-cta-shimmer 4.5s linear infinite;
+  pointer-events: none;
+}
+.btn-silver:hover {
+  transform: translateY(-1px);
+  border-color: rgba(255, 255, 255, .32);
+  box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
+              0 0 22px rgba(220, 226, 235, .3),
+              0 0 22px rgba(190, 200, 215, .25);
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn-silver::before, .btn-silver::after { animation: none; }
+}
+
 /* Plattform-Karten mit echten Markenfarben (z.B. links.html-Übersicht):
    gleicher Polarlicht-Mechanismus wie .btn-tiktok, aber generisch über
    --brand-1/--brand-2 (+ optional --brand-3) einstellbar, damit jede
diff --git a/assets/js/i18n-vanvan.js b/assets/js/i18n-vanvan.js
index 3968e57..66ff2f1 100644
--- a/assets/js/i18n-vanvan.js
+++ b/assets/js/i18n-vanvan.js
@@ -32,6 +32,10 @@ window.I18N_PAGE = {
     fr: `Vous me trouverez sur TikTok sous :`,
     pt: `Vocês me encontram no TikTok em:`,
   },
+  vv_coming_soon: {
+    de: `Coming soon…`, "de-CH": `Coming soon…`,
+    en: `Coming soon…`, fr: `Coming soon…`, pt: `Coming soon…`,
+  },
   vv_wer_1: {
     de: "Ich bin ein Mensch, der mit dem Herzen denkt, unglaublich loyal ist und für die Menschen kämpft, die ihm wichtig sind.",
     "de-CH": "Ich bin en Mönsch, wo mit em Herz dänkt, unglaublich loyal isch und für die Mönsche kämpft, wo ihm wichtig sind.",
diff --git a/vanvan.html b/vanvan.html
index 5df76d0..c779ed3 100644
--- a/vanvan.html
+++ b/vanvan.html
@@ -21,6 +21,13 @@
 <link rel="stylesheet" href="assets/css/theme-dogfather.css" />
 <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
 <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
+<style>
+  /* Auf Wunsch: Text auf der ganzen VanVan-Seite größer, wirkte zu klein. */
+  main p { font-size: 1.14rem; line-height: 1.85; }
+  main .lead { font-size: 1.3rem; }
+  main .quote { font-size: 1.2rem; }
+  main h2 { font-size: clamp(1.7rem, 3.8vw, 2.6rem); }
+</style>
 </head>
 <body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-vanvan.jpg');--page-bg-mobile:url('/assets/img/bg-vanvan-mobile.jpg');">
 <div id="site-header"></div>
@@ -36,7 +43,7 @@
   </section>
 
   <section class="section-tight">
-    <div class="container grid grid-2" style="align-items:center;">
+    <div class="container grid grid-2" style="align-items:center;grid-template-columns:1.25fr 1fr;">
       <div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);">
         <img src="assets/img/card-vanvan.jpg" alt="VanVan" style="width:100%;height:100%;object-fit:cover;" />
       </div>
@@ -44,7 +51,9 @@
         <h2 data-i18n="vv_wer_h2">Wer ich bin</h2>
         <p class="lead" data-i18n="vv_wer_lead">Huhu, hier ist VanVan, die rechte Hand von Dogi.</p>
         <p data-i18n="vv_wer_tiktok">Auf TikTok findet ihr mich unter:</p>
-        <a class="btn-tiktok" href="https://www.tiktok.com/@o.o.vanessa.o.o" target="_blank" rel="noopener" style="margin-bottom:1rem;"><span>TikTok</span></a>
+        <a class="btn-tiktok" href="https://www.tiktok.com/@o.o.vanessa.o.o" target="_blank" rel="noopener" style="margin-bottom:.7rem;"><span>TikTok</span></a>
+        <br />
+        <a class="btn-silver" href="#" aria-disabled="true" onclick="return false;" style="margin-bottom:1rem;"><span data-i18n="vv_coming_soon">Coming soon…</span></a>
         <p data-i18n="vv_wer_1" style="margin-top:1.4rem;">Ich bin ein Mensch, der mit dem Herzen denkt, unglaublich loyal ist und für die Menschen kämpft, die ihm wichtig sind.</p>
         <p data-i18n="vv_wer_2">Wenn ich zu jemandem Vertrauen aufgebaut habe, gibt es für mich kein „halb“. Dann bin ich da – unabhängig davon, ob gerade gute oder schwierige Zeiten herrschen.</p>
         <p data-i18n="vv_wer_3">Freundschaft, Zusammenhalt und Ehrlichkeit bedeuten mir mehr als alles andere. Für mich zählen keine Fassaden, sondern der Charakter eines Menschen. Wenn ich jemanden unterstütze, dann nicht, weil es von mir erwartet wird, sondern weil ich aus voller Überzeugung hinter diesem Menschen stehe.</p>