From 7d365e3c48db2d81986c10235e6577041686cd82 Mon Sep 17 00:00:00 2001
From: Dogfather <dogfather1608@gmail.com>
Date: Sun, 2 Aug 2026 13:38:16 +0200
Subject: [PATCH] Alle TikTok-Buttons/-Karten site-weit im neuen
 TikTok-Farbschema
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 assets/css/main.css | 48 +++++++++++++++++++++++++++++++++++++++++++++
 links.html          |  2 +-
 profil.html         | 14 ++++++++++++-
 streamplan.html     |  2 +-
 4 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 299bc7a..aad3afe 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -510,6 +510,54 @@ header.site-header {
   .btn-tiktok::before, .btn-tiktok::after { animation: none; }
 }
 
+/* TikTok-Karte (z.B. links.html-Übersicht): gleicher Polarlicht-
+   Mechanismus wie .btn-tiktok, nur auf die normale .card-Form angewendet,
+   damit sie sich in ein Karten-Grid mit anderen Plattformen einfügt.
+   Bewusst NUR für die TikTok-Karte, keine andere Plattform-Karte. */
+.card-tiktok {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  background: #0b0e14;
+  border-color: rgba(255, 255, 255, .16);
+}
+.card-tiktok h3, .card-tiktok p {
+  position: relative;
+  z-index: 2;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
+}
+.card-tiktok::before {
+  content: "";
+  position: absolute;
+  inset: -60%;
+  z-index: 0;
+  background:
+    radial-gradient(circle at 22% 30%, rgba(37, 244, 238, .85), transparent 55%),
+    radial-gradient(circle at 78% 68%, rgba(254, 44, 85, .85), transparent 58%);
+  filter: blur(11px) saturate(1.35);
+  animation: nav-cta-aurora 9s ease-in-out infinite alternate;
+}
+.card-tiktok::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
+  background-size: 240% 100%;
+  mix-blend-mode: overlay;
+  animation: nav-cta-shimmer 4.5s linear infinite;
+  pointer-events: none;
+}
+.card-tiktok:hover {
+  border-color: rgba(255, 255, 255, .32);
+  box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
+              0 0 22px rgba(37, 244, 238, .3),
+              0 0 22px rgba(254, 44, 85, .28);
+}
+@media (prefers-reduced-motion: reduce) {
+  .card-tiktok::before, .card-tiktok::after { animation: none; }
+}
+
 .nav-toggle {
   display: none;
   background: none;
diff --git a/links.html b/links.html
index 4588cf1..b1c37ea 100644
--- a/links.html
+++ b/links.html
@@ -38,7 +38,7 @@
   <section class="section-tight">
     <div class="container">
       <div class="grid grid-3" style="max-width:800px;margin:0 auto;">
-        <a class="card text-center" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener">
+        <a class="card card-tiktok text-center" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener">
           <h3>🎥 TikTok</h3>
           <p>@dogfather0804</p>
         </a>
diff --git a/profil.html b/profil.html
index a45369e..de17a24 100644
--- a/profil.html
+++ b/profil.html
@@ -262,10 +262,22 @@ document.addEventListener("DOMContentLoaded", () => {
   Object.entries(person.social || {}).forEach(([plattform, url]) => {
     if (!url) return;
     const a = document.createElement("a");
-    a.className = "btn btn-outline";
     a.href = url;
     a.target = "_blank";
     a.rel = "noopener";
+    // TikTok-Links bekommen den eigenen Polarlicht-Button im TikTok-
+    // Farbschema (siehe .btn-tiktok in main.css) — bewusst NUR TikTok,
+    // alle anderen Plattformen (Instagram/Spotify/Discord) behalten den
+    // normalen Outline-Button-Stil.
+    if (plattform === "tiktok") {
+      a.className = "btn-tiktok";
+      const span = document.createElement("span");
+      span.textContent = socialLabels[plattform];
+      a.appendChild(span);
+      socialWrap.appendChild(a);
+      return;
+    }
+    a.className = "btn btn-outline";
     a.textContent = socialLabels[plattform] || plattform;
     socialWrap.appendChild(a);
   });
diff --git a/streamplan.html b/streamplan.html
index f71c917..af9202b 100644
--- a/streamplan.html
+++ b/streamplan.html
@@ -33,7 +33,7 @@
       <h1 data-i18n="sp_h1">Streamplan &amp; Livebereich</h1>
       <p class="lead worlds" data-i18n="sp_lead">Wann ist DogFather live?</p>
       <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-primary" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener" data-i18n="sp_btn_tiktok">Zur Dogi TikTok-Seite</a>
+        <a class="btn-tiktok" href="https://www.tiktok.com/@dogfather0804" target="_blank" rel="noopener"><span data-i18n="sp_btn_tiktok">Zur Dogi TikTok-Seite</span></a>
       </div>
     </div>
   </section>