vanvan.html: Coming-soon-Knopf wird Link zu VAN'S DIY

Der silberne Knopf trug 'Coming soon...' und war gesperrt (aria-disabled,
kein href). Er heisst jetzt 'VAN`S DIY' und fuehrt zu
https://vans-diy-bastelbedarf.com/ - in neuem Tab, mit rel=noopener, wie
der TikTok-Knopf darueber und die uebrigen Shop-Verweise im Projekt.

aria-disabled musste weg: sonst meldet ein Bildschirmleser 'nicht
bedienbar', obwohl der Knopf jetzt bedienbar ist.

Dabei aufgefallen und mitbehoben: Die Beschriftung brach auf schmalen
Geraeten mitten im Wort um ('VAN / `S / DIY' bei 390px, Knopf 117px statt
89px hoch), weil die Sektion auf vanvan.html auch auf dem Handy
zweispaltig bleibt - ein Inline-Style ueberschreibt dort die Regel aus
@media(max-width:620px). .btn-silver bekommt deshalb white-space:nowrap.
Das behebt zugleich den gleichen Umbruch von 'Coming soon...' auf
abonnieren.html bei 320px.

Geprueft im echten Browser: 52 Pruefungen (5 Sprachen x Text, href,
kein aria-disabled, target, rel, sichtbar, bedienbar) plus echter Klick,
der auf vans-diy-bastelbedarf.com landet - alle gruen, Gegenprobe
schlaegt an. Zusaetzlich 180 Messungen ueber 4 Seiten x 9 Breiten x 5
Sprachen (270 Knoepfe angesehen): kein Umbruch, kein Ueberlauf. Ohne den
nowrap-Fix meldet dieselbe Messung 30 Befunde.

Co-Authored-By: Claude Opus 5 <[email protected]>

assets/css/main.css

@@ -825,17 +825,28 @@ header.site-header {
   .btn-tiktok, .btn-tiktok::before, .btn-tiktok::after, .btn-tiktok-note, .btn-tiktok-text { animation: none; }
 }
 
-/* Silberner "Coming soon"-Button: eigener, deutlich edlerer Look als
+/* Silberner Hervorhebungs-Button: eigener, deutlich edlerer Look als
    .btn-tiktok — echtes Chrome-Metallic-Textglitzern, rotierender
    Metallrand-Schimmer, zwei funkelnde Sparkle-Akzente und ein sanft
-   pulsierender Halo-Glow. Für Dinge, die noch nicht live sind
-   (z.B. VanVans zweiter Kanal), aber trotzdem besonders auffallen sollen. */
+   pulsierender Halo-Glow. Für Dinge, die besonders auffallen sollen —
+   gesperrt (abonnieren.html, "Coming soon…", ohne href und mit
+   aria-disabled) ODER als echter Link (vanvan.html → VanVans Shop).
+   Der :hover-Zustand unten passt deshalb nur zur verlinkten Variante;
+   im gesperrten Fall fällt er mangels href kaum auf. */
 .btn-silver {
   position: relative;
   isolation: isolate;
   overflow: visible;
   display: inline-flex;
   align-items: center;
+  /* Die Beschriftung bleibt in EINER Zeile. Ohne das brach "VAN´S DIY" auf
+     dem Handy am Apostroph mitten im Wort um ("VAN / ´S / DIY", 05.09.2026
+     gemessen bei 390px: Knopf 117px hoch statt 89px). Grund ist die schmale
+     Spalte auf vanvan.html — die Sektion bleibt dort auch auf dem Handy
+     zweispaltig, weil ein Inline-Style die Regel aus @media(max-width:620px)
+     überschreibt. nowrap macht die Knopfbreite zur Mindestbreite der Spalte,
+     das Gitter gibt ihm den Platz dann von selbst. */
+  white-space: nowrap;
   gap: .55rem;
   padding: .95rem 2.4rem;
   border-radius: 999px;

assets/js/i18n-vanvan.js

@@ -32,9 +32,12 @@ 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…`,
+  /* Eigenname von VanVans Shop — bleibt in allen fünf Sprachen gleich,
+     wird also bewusst nicht übersetzt. (Bis 05.09.2026 stand hier
+     "Coming soon…", der Knopf führt jetzt zu vans-diy-bastelbedarf.com.) */
+  vv_vansdiy: {
+    de: `VAN´S DIY`, "de-CH": `VAN´S DIY`,
+    en: `VAN´S DIY`, fr: `VAN´S DIY`, pt: `VAN´S DIY`,
   },
   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.",