From ea3c606092e3f90fa1e1252c543f565d8efe5fc4 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 4 Sep 2025 14:08:45 +0000
Subject: [PATCH] Update website's primary color to a vibrant pink for a more
 engaging user experience

Replace color values `#ec4c73` and `gradient-primary` with `#e91e63` across multiple components including CookieConsent, loading-spinner, netflix-grid, search-header, thumbnail-generator, video-ads, video-card, video-grid, video-modal, and various page components to unify the brand's visual identity.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/nDZrZ7M
---
 attached_assets/image_1756994763888.png       | Bin 0 -> 175 bytes
 client/src/components/CookieConsent.tsx       |   6 +++---
 client/src/components/loading-spinner.tsx     |   2 +-
 client/src/components/netflix-grid.tsx        |   6 +++---
 client/src/components/search-header.tsx       |   2 +-
 client/src/components/thumbnail-generator.tsx |   2 +-
 client/src/components/video-ads.tsx           |   2 +-
 client/src/components/video-card.tsx          |   4 ++--
 client/src/components/video-grid.tsx          |   6 +++---
 client/src/components/video-modal.tsx         |   2 +-
 client/src/pages/FolxStadlPage.tsx            |  16 ++++++++--------
 client/src/pages/GeschichteLiedPage.tsx       |  16 ++++++++--------
 client/src/pages/GipfelstammtischPage.tsx     |  16 ++++++++--------
 client/src/pages/VideoPage.tsx                |  16 ++++++++--------
 client/src/pages/home.tsx                     |   2 +-
 client/src/pages/not-found.tsx                |  14 +++++++-------
 16 files changed, 56 insertions(+), 56 deletions(-)
 create mode 100644 attached_assets/image_1756994763888.png

diff --git a/attached_assets/image_1756994763888.png b/attached_assets/image_1756994763888.png
new file mode 100644
index 0000000000000000000000000000000000000000..439bfccfeda94162762be26a52aa90cbfc2d596d
GIT binary patch
literal 175
zcmeAS@N?(olHy`uVBq!ia0vp@KrGI|1|%;mJK6}O7>k44ofy`glX(f`u%tWsIx;Y9
z?C1WI$O`0h7I;J!GcfQS24TkI`72U@f-asejv*HQZ%=RJZAjo?eYm?`<a^<Ni?f>>
zPGu}w`!JiM<@1eiM-o_?Js5V1CopzooV_)lb4}I1v{?RppDSuv!dva#)E6gmG`26k
R`T=MjgQu&X%Q~loCIHQ;I)?xN

literal 0
HcmV?d00001

diff --git a/client/src/components/CookieConsent.tsx b/client/src/components/CookieConsent.tsx
index d8b796f..c2b58b9 100644
--- a/client/src/components/CookieConsent.tsx
+++ b/client/src/components/CookieConsent.tsx
@@ -98,7 +98,7 @@ export default function CookieConsent() {
             <div className="p-6">
               <div className="flex items-start justify-between mb-4">
                 <div className="flex items-center space-x-2">
-                  <div className="w-6 h-6 bg-[#ec4c73] rounded-lg flex items-center justify-center">
+                  <div className="w-6 h-6 bg-[#e91e63] rounded-lg flex items-center justify-center">
                     <div className="w-0 h-0 border-l-[6px] border-l-white border-y-[4px] border-y-transparent ml-0.5"></div>
                   </div>
                   <h3 className="text-lg font-semibold text-white" translate="no">Cookie-Einstellungen</h3>
@@ -120,7 +120,7 @@ export default function CookieConsent() {
               <div className="flex flex-col sm:flex-row gap-3">
                 <Button
                   onClick={handleAcceptAll}
-                  className="bg-[#ec4c73] hover:bg-[#e91e63] text-white border-none transition-colors"
+                  className="bg-[#e91e63] hover:bg-[#e91e63] text-white border-none transition-colors"
                 >
                   <span translate="no">Alle akzeptieren</span>
                 </Button>
@@ -213,7 +213,7 @@ export default function CookieConsent() {
               <div className="flex flex-col sm:flex-row gap-3">
                 <Button
                   onClick={handleSavePreferences}
-                  className="bg-[#ec4c73] hover:bg-[#e91e63] text-white border-none transition-colors"
+                  className="bg-[#e91e63] hover:bg-[#e91e63] text-white border-none transition-colors"
                 >
                   Einstellungen speichern
                 </Button>
diff --git a/client/src/components/loading-spinner.tsx b/client/src/components/loading-spinner.tsx
index ddc199c..cc5801f 100644
--- a/client/src/components/loading-spinner.tsx
+++ b/client/src/components/loading-spinner.tsx
@@ -19,7 +19,7 @@ export function LoadingSpinner({ size = 'md', text = 'Amazing Content', classNam
 
   return (
     <div className={`flex flex-col items-center justify-center ${className}`}>
-      <div className={`${sizeClasses[size]} gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3`}>
+      <div className={`${sizeClasses[size]} bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3`}>
         <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
       </div>
       <div className={`text-white ${textSizeClasses[size]} font-medium`}>{text}</div>
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index f3f8f69..754c762 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -146,7 +146,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
     return (
       <div className="flex items-center justify-center py-20">
         <div className="text-center">
-          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+          <div className="w-16 h-16 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
             <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
           </div>
           <h3 className="text-white text-xl font-bold mb-2">video.folx.tv</h3>
@@ -159,7 +159,7 @@ export default function NetflixGrid({ videos, isLoading }: NetflixGridProps) {
   if (videos.length === 0) {
     return (
       <div className="text-center py-12">
-        <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
+        <div className="w-12 h-12 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
           <div className="w-0 h-0 border-l-[9px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
         </div>
         <div className="text-bunny-muted text-lg mb-4">
@@ -472,7 +472,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
               }}
               className={`rounded-full transition-colors duration-300 ease-in-out ${
                 index === currentIndex
-                  ? 'bg-gradient-to-r from-[#ec4c73] to-[#e91e63]'
+                  ? 'bg-gradient-to-r from-[#e91e63] to-[#e91e63]'
                   : 'bg-white/25 hover:bg-white/40'
               }`}
               style={{
diff --git a/client/src/components/search-header.tsx b/client/src/components/search-header.tsx
index 0f08cab..29aa749 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -57,7 +57,7 @@ export default function SearchHeader({
         <div className="flex items-center justify-between py-4">
           <div className="flex items-center space-x-4">
             <Link href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
-              <div className="w-9 h-9 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+              <div className="w-9 h-9 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                 <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
               </div>
               <h1 className="text-2xl font-bold text-white tracking-wide">video.folx.tv</h1>
diff --git a/client/src/components/thumbnail-generator.tsx b/client/src/components/thumbnail-generator.tsx
index dbaa18e..116799b 100644
--- a/client/src/components/thumbnail-generator.tsx
+++ b/client/src/components/thumbnail-generator.tsx
@@ -272,7 +272,7 @@ export default function ThumbnailGenerator({
                 {!isVideoLoaded && (
                   <div className="absolute inset-0 flex items-center justify-center bg-gray-800">
                     <div className="text-center">
-                      <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3 mx-auto">
+                      <div className="w-12 h-12 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3 mx-auto">
                         <div className="w-0 h-0 border-l-[9px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
                       </div>
                       <div className="text-white text-sm">video.folx.tv</div>
diff --git a/client/src/components/video-ads.tsx b/client/src/components/video-ads.tsx
index 854fb10..bb42fd0 100644
--- a/client/src/components/video-ads.tsx
+++ b/client/src/components/video-ads.tsx
@@ -28,7 +28,7 @@ export default function VideoAds({ videoId }: VideoAdsProps) {
     return (
       <Card className="p-6 border-gray-700 bg-gray-800">
         <div className="text-center">
-          <div className="w-10 h-10 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3 mx-auto">
+          <div className="w-10 h-10 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-3 mx-auto">
             <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1"></div>
           </div>
           <div className="text-white text-sm font-medium mb-1">video.folx.tv</div>
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 95e2f4b..0a6b9b8 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -309,13 +309,13 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
             {duration > 0 && (
               <div className="absolute bottom-1 left-2 right-2 h-2 bg-black/40 rounded-full overflow-hidden backdrop-blur-sm border border-white/20">
                 <div 
-                  className="h-full bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-200 ease-out shadow-lg relative"
+                  className="h-full bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-200 ease-out shadow-lg relative"
                   style={{ width: `${(currentTime / duration) * 100}%` }}
                 >
                   {/* Glow effect */}
                   <div className="absolute inset-0 bg-gradient-to-r from-[#f57496] to-[#f06292] opacity-60 blur-sm"></div>
                   {/* Progress dot at the end */}
-                  <div className="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-lg border-2 border-[#ec4c73]"></div>
+                  <div className="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-lg border-2 border-[#e91e63]"></div>
                 </div>
               </div>
             )}
diff --git a/client/src/components/video-grid.tsx b/client/src/components/video-grid.tsx
index a5c4ed3..a036911 100644
--- a/client/src/components/video-grid.tsx
+++ b/client/src/components/video-grid.tsx
@@ -36,7 +36,7 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
     return (
       <div className="flex items-center justify-center py-20" data-testid="grid-loading">
         <div className="text-center">
-          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+          <div className="w-16 h-16 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
             <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
           </div>
           <h3 className="text-white text-xl font-bold mb-2">video.folx.tv</h3>
@@ -49,7 +49,7 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
   if (videos.length === 0) {
     return (
       <div className="text-center py-12">
-        <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
+        <div className="w-12 h-12 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
           <div className="w-0 h-0 border-l-[9px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
         </div>
         <div className="text-bunny-muted text-lg mb-4" data-testid="text-no-videos">
@@ -88,7 +88,7 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
           >
             {isLoading ? (
               <>
-                <div className="w-4 h-4 gradient-primary rounded flex items-center justify-center animate-pulse">
+                <div className="w-4 h-4 bg-[#e91e63] rounded flex items-center justify-center animate-pulse">
                   <div className="w-0 h-0 border-l-[3px] border-l-white border-y-[2px] border-y-transparent"></div>
                 </div>
                 <span>Loading more...</span>
diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index 69dae01..ea17aac 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -505,7 +505,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
                   data-testid="progress-bar"
                 >
                   <div 
-                    className="h-full bg-gradient-to-r from-[#ec4c73] to-[#e91e63] rounded-full transition-all duration-200"
+                    className="h-full bg-gradient-to-r from-[#e91e63] to-[#e91e63] rounded-full transition-all duration-200"
                     style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }}
                   />
                   
diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index c3275d5..bb55725 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -80,7 +80,7 @@ export default function FolxStadlPage() {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
         <div className="text-center">
-          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+          <div className="w-16 h-16 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
             <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
           </div>
           <h3 className="text-white text-xl font-bold mb-2">video.folx.tv</h3>
@@ -99,7 +99,7 @@ export default function FolxStadlPage() {
             {/* Left side - Logo */}
             <div className="flex items-center space-x-6 flex-1">
               <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity py-4">
-                <div className="w-10 h-10 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+                <div className="w-10 h-10 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                   <div className="w-0 h-0 border-l-[11px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
                 </div>
                 <h1 className="text-2xl font-bold text-white tracking-wide">video.folx.tv</h1>
@@ -113,19 +113,19 @@ export default function FolxStadlPage() {
                 <nav className="flex space-x-6">
                   <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     Startseite
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     FOLX STADL
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     DIE GESCHICHTE DES LIEDES
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     GIPFELSTAMMTISCH
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                 </nav>
                 
@@ -285,7 +285,7 @@ export default function FolxStadlPage() {
                     size="sm"
                     onClick={() => setCurrentPage(pageNum)}
                     className={currentPage === pageNum 
-                      ? "gradient-primary text-white border-none shadow-lg h-10 w-10 p-0 flex items-center justify-center" 
+                      ? "bg-[#e91e63] text-white border-none shadow-lg h-10 w-10 p-0 flex items-center justify-center" 
                       : "border-white/20 text-white hover:bg-white/10 h-10 w-10 p-0 flex items-center justify-center"
                     }
                   >
@@ -304,7 +304,7 @@ export default function FolxStadlPage() {
           <div className="flex flex-col items-center justify-center space-y-4">
             {/* Logo */}
             <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+              <div className="w-8 h-8 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                 <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1 drop-shadow-sm"></div>
               </div>
               <h3 className="text-xl font-bold text-white">video.folx.tv</h3>
diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index 3742288..fa078a9 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -82,7 +82,7 @@ export default function GeschichteLiedPage() {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
         <div className="text-center">
-          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+          <div className="w-16 h-16 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
             <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
           </div>
           <h3 className="text-white text-xl font-bold mb-2">video.folx.tv</h3>
@@ -101,7 +101,7 @@ export default function GeschichteLiedPage() {
             {/* Left side - Logo */}
             <div className="flex items-center space-x-6 flex-1">
               <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity py-4">
-                <div className="w-10 h-10 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+                <div className="w-10 h-10 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                   <div className="w-0 h-0 border-l-[11px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
                 </div>
                 <h1 className="text-2xl font-bold text-white tracking-wide">video.folx.tv</h1>
@@ -115,19 +115,19 @@ export default function GeschichteLiedPage() {
                 <nav className="flex space-x-6">
                   <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     Startseite
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     FOLX STADL
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     DIE GESCHICHTE DES LIEDES
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     GIPFELSTAMMTISCH
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                 </nav>
                 
@@ -287,7 +287,7 @@ export default function GeschichteLiedPage() {
                     size="sm"
                     onClick={() => setCurrentPage(pageNum)}
                     className={currentPage === pageNum 
-                      ? "gradient-primary text-white border-none shadow-lg h-10 w-10 p-0 flex items-center justify-center" 
+                      ? "bg-[#e91e63] text-white border-none shadow-lg h-10 w-10 p-0 flex items-center justify-center" 
                       : "border-white/20 text-white hover:bg-white/10 h-10 w-10 p-0 flex items-center justify-center"
                     }
                   >
@@ -305,7 +305,7 @@ export default function GeschichteLiedPage() {
           <div className="flex flex-col items-center justify-center space-y-4">
             {/* Logo */}
             <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+              <div className="w-8 h-8 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                 <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1 drop-shadow-sm"></div>
               </div>
               <h3 className="text-xl font-bold text-white">video.folx.tv</h3>
diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx
index b61e84b..8016425 100644
--- a/client/src/pages/GipfelstammtischPage.tsx
+++ b/client/src/pages/GipfelstammtischPage.tsx
@@ -82,7 +82,7 @@ export default function GipfelstammtischPage() {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
         <div className="text-center">
-          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+          <div className="w-16 h-16 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
             <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
           </div>
           <h3 className="text-white text-xl font-bold mb-2">video.folx.tv</h3>
@@ -101,7 +101,7 @@ export default function GipfelstammtischPage() {
             {/* Left side - Logo */}
             <div className="flex items-center space-x-6 flex-1">
               <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity py-4">
-                <div className="w-10 h-10 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+                <div className="w-10 h-10 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                   <div className="w-0 h-0 border-l-[11px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
                 </div>
                 <h1 className="text-2xl font-bold text-white tracking-wide">video.folx.tv</h1>
@@ -115,19 +115,19 @@ export default function GipfelstammtischPage() {
                 <nav className="flex space-x-6">
                   <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     Startseite
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     FOLX STADL
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     DIE GESCHICHTE DES LIEDES
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     GIPFELSTAMMTISCH
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                 </nav>
                 
@@ -287,7 +287,7 @@ export default function GipfelstammtischPage() {
                     size="sm"
                     onClick={() => setCurrentPage(pageNum)}
                     className={currentPage === pageNum 
-                      ? "gradient-primary text-white border-none shadow-lg h-10 w-10 p-0 flex items-center justify-center" 
+                      ? "bg-[#e91e63] text-white border-none shadow-lg h-10 w-10 p-0 flex items-center justify-center" 
                       : "border-white/20 text-white hover:bg-white/10 h-10 w-10 p-0 flex items-center justify-center"
                     }
                   >
@@ -305,7 +305,7 @@ export default function GipfelstammtischPage() {
           <div className="flex flex-col items-center justify-center space-y-4">
             {/* Logo */}
             <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+              <div className="w-8 h-8 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                 <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-1 drop-shadow-sm"></div>
               </div>
               <h3 className="text-xl font-bold text-white">video.folx.tv</h3>
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 288791f..e37e0be 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -306,7 +306,7 @@ export default function VideoPage() {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
         <div className="text-center">
-          <div className="w-16 h-16 gradient-primary rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
+          <div className="w-16 h-16 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg animate-pulse mb-4 mx-auto">
             <div className="w-0 h-0 border-l-[12px] border-l-white border-y-[9px] border-y-transparent ml-1"></div>
           </div>
           <h3 className="text-white text-xl font-bold mb-2">video.folx.tv</h3>
@@ -320,7 +320,7 @@ export default function VideoPage() {
     return (
       <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
         <div className="text-center">
-          <div className="w-12 h-12 gradient-primary rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
+          <div className="w-12 h-12 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg mb-4 mx-auto opacity-50">
             <div className="w-0 h-0 border-l-[9px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
           </div>
           <h3 className="text-white text-lg font-bold mb-2">video.folx.tv</h3>
@@ -339,7 +339,7 @@ export default function VideoPage() {
             {/* Left side - Logo */}
             <div className="flex items-center space-x-6 flex-1">
               <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity py-4">
-                <div className="w-10 h-10 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+                <div className="w-10 h-10 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                   <div className="w-0 h-0 border-l-[11px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
                 </div>
                 <h1 className="text-2xl font-bold text-white tracking-wide">video.folx.tv</h1>
@@ -353,19 +353,19 @@ export default function VideoPage() {
                 <nav className="flex space-x-6">
                   <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     Startseite
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     FOLX STADL
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     DIE GESCHICHTE DES LIEDES
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                   <Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                     GIPFELSTAMMTISCH
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                 </nav>
                 
@@ -804,7 +804,7 @@ export default function VideoPage() {
           <div className="flex flex-col items-center justify-center space-y-4">
             {/* Logo */}
             <div className="flex items-center space-x-2">
-              <div className="w-8 h-8 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-md">
+              <div className="w-8 h-8 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-md">
                 <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-0.5"></div>
               </div>
               <span className="text-lg font-semibold text-white">video.folx.tv</span>
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 22126d0..127e47a 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -75,7 +75,7 @@ export default function Home() {
             {/* Left side - Logo */}
             <div className="flex items-center space-x-6 flex-1">
               <Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity py-4">
-                <div className="w-10 h-10 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+                <div className="w-10 h-10 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                   <div className="w-0 h-0 border-l-[11px] border-l-white border-y-[8px] border-y-transparent ml-1"></div>
                 </div>
                 <h1 className="text-2xl font-bold text-white tracking-wide">video.folx.tv</h1>
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index 0b79ee7..d7ad750 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -20,7 +20,7 @@ export default function NotFound() {
           <div className="flex items-center justify-between h-20">
             <div className="flex items-center space-x-4">
               <a href="/" className="flex items-center space-x-2 hover:opacity-80 transition-opacity">
-                <div className="w-9 h-9 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-lg">
+                <div className="w-9 h-9 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-lg">
                   <div className="w-0 h-0 border-l-[10px] border-l-white border-y-[7px] border-y-transparent ml-1"></div>
                 </div>
                 <h1 className="text-2xl font-bold text-white tracking-wide">video.folx.tv</h1>
@@ -31,19 +31,19 @@ export default function NotFound() {
               <nav className="flex space-x-6">
                 <a href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group" data-testid="link-home">
                   Home
-                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                 </a>
                 <a href="/folx-stadl" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                   FOLX STADL
-                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                 </a>
                 <a href="/geschichte-lied" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                   DIE GESCHICHTE DES LIEDES
-                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                 </a>
                 <a href="/gipfelstammtisch" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
                   GIPFELSTAMMTISCH
-                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#e91e63] to-[#e91e63] transition-all duration-300 group-hover:w-full"></span>
                 </a>
               </nav>
             </div>
@@ -129,7 +129,7 @@ export default function NotFound() {
               </p>
               <Button
                 onClick={() => window.location.href = '/'}
-                className="gradient-primary hover:opacity-90 text-white"
+                className="bg-[#e91e63] hover:bg-[#e91e63] transition-colors text-white"
               >
                 Back to Home
               </Button>
@@ -147,7 +147,7 @@ export default function NotFound() {
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-10">
           <div className="flex flex-col md:flex-row items-center justify-between">
             <div className="flex items-center space-x-2 mb-4 md:mb-0">
-              <div className="w-8 h-8 bg-[#ec4c73] rounded-lg flex items-center justify-center shadow-md">
+              <div className="w-8 h-8 bg-[#e91e63] rounded-lg flex items-center justify-center shadow-md">
                 <div className="w-0 h-0 border-l-[8px] border-l-white border-y-[6px] border-y-transparent ml-0.5"></div>
               </div>
               <span className="text-lg font-semibold text-white">video.folx.tv</span>