From 395dba2daa81a5bea529b8a529ca4a55d4b7b332 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Thu, 4 Sep 2025 14:32:14 +0000
Subject: [PATCH] Update the website's accent color to a vibrant red hue

Replace all instances of the previous blue accent color with a new red color across various components and pages, including buttons, navigation links, progress bars, and decorative elements.

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/ZMEU6bO
---
 client/src/components/CookieConsent.tsx       |  8 ++--
 client/src/components/ad-explanation.tsx      |  2 +-
 client/src/components/ad-settings.tsx         |  8 ++--
 .../src/components/hls-preview-thumbnail.tsx  |  4 +-
 client/src/components/netflix-grid.tsx        |  2 +-
 client/src/components/search-header.tsx       | 16 +++----
 client/src/components/thumbnail-generator.tsx |  2 +-
 client/src/components/video-card.tsx          |  4 +-
 client/src/components/video-grid.tsx          |  2 +-
 client/src/components/video-modal.tsx         | 12 ++---
 .../components/video-preview-thumbnail.tsx    |  4 +-
 client/src/pages/FolxStadlPage.tsx            | 34 +++++++-------
 client/src/pages/GeschichteLiedPage.tsx       | 34 +++++++-------
 client/src/pages/GipfelstammtischPage.tsx     | 34 +++++++-------
 client/src/pages/Impressum.tsx                |  4 +-
 client/src/pages/PrivacyPolicy.tsx            |  2 +-
 client/src/pages/TermsOfService.tsx           |  2 +-
 client/src/pages/VideoPage.tsx                | 44 +++++++++----------
 client/src/pages/home.tsx                     | 26 +++++------
 client/src/pages/not-found.tsx                | 24 +++++-----
 20 files changed, 134 insertions(+), 134 deletions(-)

diff --git a/client/src/components/CookieConsent.tsx b/client/src/components/CookieConsent.tsx
index 1a20283..1518a37 100644
--- a/client/src/components/CookieConsent.tsx
+++ b/client/src/components/CookieConsent.tsx
@@ -134,7 +134,7 @@ export default function CookieConsent() {
                 <Button
                   onClick={() => setShowDetails(true)}
                   variant="ghost"
-                  className="text-bunny-blue hover:text-purple-400 hover:bg-transparent"
+                  className="text-[#da234d] hover:text-purple-400 hover:bg-transparent"
                 >
                   <span translate="no">Einstellungen verwalten</span>
                 </Button>
@@ -158,7 +158,7 @@ export default function CookieConsent() {
                 <div className="bg-bunny-gray/20 p-4 rounded-lg">
                   <div className="flex items-center justify-between mb-2">
                     <h4 className="text-white font-medium">Notwendige Cookies</h4>
-                    <div className="bg-bunny-blue/20 text-bunny-blue px-2 py-1 rounded text-xs">
+                    <div className="bg-[#da234d]/20 text-[#da234d] px-2 py-1 rounded text-xs">
                       Immer aktiv
                     </div>
                   </div>
@@ -179,7 +179,7 @@ export default function CookieConsent() {
                         onChange={(e) => handleConsentChange('analytics', e.target.checked)}
                         className="sr-only peer"
                       />
-                      <div className="w-11 h-6 bg-bunny-gray peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-bunny-blue"></div>
+                      <div className="w-11 h-6 bg-bunny-gray peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#da234d]"></div>
                     </label>
                   </div>
                   <p className="text-bunny-light text-sm">
@@ -199,7 +199,7 @@ export default function CookieConsent() {
                         onChange={(e) => handleConsentChange('advertising', e.target.checked)}
                         className="sr-only peer"
                       />
-                      <div className="w-11 h-6 bg-bunny-gray peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-bunny-blue"></div>
+                      <div className="w-11 h-6 bg-bunny-gray peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#da234d]"></div>
                     </label>
                   </div>
                   <p className="text-bunny-light text-sm">
diff --git a/client/src/components/ad-explanation.tsx b/client/src/components/ad-explanation.tsx
index af4f4bb..2d4379f 100644
--- a/client/src/components/ad-explanation.tsx
+++ b/client/src/components/ad-explanation.tsx
@@ -69,7 +69,7 @@ export default function AdExplanation({ isOpen, onClose }: AdExplanationProps) {
           </div>
           
           <div className="flex justify-end">
-            <Button onClick={onClose} className="bg-bunny-blue hover:bg-blue-600">
+            <Button onClick={onClose} className="bg-[#da234d] hover:bg-blue-600">
               Razumem
             </Button>
           </div>
diff --git a/client/src/components/ad-settings.tsx b/client/src/components/ad-settings.tsx
index a50a124..fcf39bd 100644
--- a/client/src/components/ad-settings.tsx
+++ b/client/src/components/ad-settings.tsx
@@ -121,7 +121,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
         <div className="sticky top-0 bg-white dark:bg-gray-900 p-6 border-b border-gray-200 dark:border-gray-700">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-3">
-              <DollarSign className="w-6 h-6 text-bunny-blue" />
+              <DollarSign className="w-6 h-6 text-[#da234d]" />
               <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                 Ad Settings
               </h2>
@@ -158,7 +158,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
                 </CardTitle>
               </CardHeader>
               <CardContent>
-                <div className="text-2xl font-bold text-bunny-blue">
+                <div className="text-2xl font-bold text-[#da234d]">
                   {totalImpressions.toLocaleString()}
                 </div>
                 <div className="text-xs text-gray-500">
@@ -279,7 +279,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
             <CardContent>
               <div className="space-y-3">
                 <div className="flex items-start space-x-3">
-                  <div className="w-2 h-2 bg-bunny-blue rounded-full mt-2 flex-shrink-0" />
+                  <div className="w-2 h-2 bg-[#da234d] rounded-full mt-2 flex-shrink-0" />
                   <div>
                     <h4 className="font-medium">Publift integracija</h4>
                     <p className="text-sm text-gray-600 dark:text-gray-400">
@@ -313,7 +313,7 @@ export default function AdSettings({ isOpen, onClose }: AdSettingsProps) {
             <Button variant="outline" onClick={onClose}>
               Cancel
             </Button>
-            <Button className="bg-bunny-blue hover:bg-bunny-blue/90">
+            <Button className="bg-[#da234d] hover:bg-[#da234d]/90">
               Save Settings
             </Button>
           </div>
diff --git a/client/src/components/hls-preview-thumbnail.tsx b/client/src/components/hls-preview-thumbnail.tsx
index f3df706..4430c8d 100644
--- a/client/src/components/hls-preview-thumbnail.tsx
+++ b/client/src/components/hls-preview-thumbnail.tsx
@@ -241,7 +241,7 @@ export default function HLSPreviewThumbnail({ video, onClick, className = "" }:
             {/* Scrub bar */}
             <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/20">
               <div 
-                className="h-full bg-bunny-blue transition-all duration-150"
+                className="h-full bg-[#da234d] transition-all duration-150"
                 style={{ width: `${(previewTime / video.duration) * 100}%` }}
               />
             </div>
@@ -258,7 +258,7 @@ export default function HLSPreviewThumbnail({ video, onClick, className = "" }:
             </div>
 
             {/* Preview indicator */}
-            <div className="absolute top-2 right-2 bg-bunny-blue/80 text-white text-xs px-2 py-1 rounded">
+            <div className="absolute top-2 right-2 bg-[#da234d]/80 text-white text-xs px-2 py-1 rounded">
               Preview
             </div>
           </>
diff --git a/client/src/components/netflix-grid.tsx b/client/src/components/netflix-grid.tsx
index 4e8d279..d9ba7af 100644
--- a/client/src/components/netflix-grid.tsx
+++ b/client/src/components/netflix-grid.tsx
@@ -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-[#da234d] to-[#da234d]'
+                  ? 'bg-[#da234d]'
                   : '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 cc981a6..bac8296 100644
--- a/client/src/components/search-header.tsx
+++ b/client/src/components/search-header.tsx
@@ -50,8 +50,8 @@ export default function SearchHeader({
 
       
       {/* Static triangle decorations - fixed positioning */}
-      <div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-blue-400/8 transform rotate-12 z-0 pointer-events-none"></div>
-      <div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/6 transform -rotate-6 z-0 pointer-events-none"></div>
+      <div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-[#da234d]/8 transform rotate-12 z-0 pointer-events-none"></div>
+      <div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-[#da234d]/6 transform -rotate-6 z-0 pointer-events-none"></div>
       
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
         <div className="flex items-center justify-between py-4">
@@ -66,10 +66,10 @@ export default function SearchHeader({
           
           <div className="hidden md:flex items-center space-x-6">
             <nav className="flex space-x-6">
-              <Link href="/" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-home">
+              <Link href="/" className="text-bunny-light hover:text-[#da234d] transition-colors" data-testid="link-home">
                 Home
               </Link>
-              <Link href="/folx-stadl" className="text-bunny-light hover:text-bunny-blue transition-colors" data-testid="link-folx-stadl">
+              <Link href="/folx-stadl" className="text-bunny-light hover:text-[#da234d] transition-colors" data-testid="link-folx-stadl">
                 FOLX STADL
               </Link>
             </nav>
@@ -80,7 +80,7 @@ export default function SearchHeader({
                 placeholder="Videos suchen..."
                 value={searchQuery}
                 onChange={(e) => handleSearchChange(e.target.value)}
-                className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-64"
+                className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-64"
                 data-testid="input-search"
               />
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
@@ -106,7 +106,7 @@ export default function SearchHeader({
             <nav className="flex flex-col space-y-3">
               <Link 
                 href="/" 
-                className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
+                className="text-bunny-light hover:text-[#da234d] transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
                 data-testid="link-mobile-home"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
@@ -114,7 +114,7 @@ export default function SearchHeader({
               </Link>
               <Link 
                 href="/folx-stadl" 
-                className="text-bunny-light hover:text-bunny-blue transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
+                className="text-bunny-light hover:text-[#da234d] transition-colors text-lg py-2 px-3 rounded-lg hover:bg-white/5" 
                 data-testid="link-mobile-folx-stadl"
                 onClick={() => setIsMobileMenuOpen(false)}
               >
@@ -129,7 +129,7 @@ export default function SearchHeader({
                 placeholder="Videos suchen..."
                 value={searchQuery}
                 onChange={(e) => handleSearchChange(e.target.value)}
-                className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-full"
+                className="bg-white border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-full"
                 data-testid="input-mobile-search"
                 autoFocus
               />
diff --git a/client/src/components/thumbnail-generator.tsx b/client/src/components/thumbnail-generator.tsx
index c8f7ec3..79968b6 100644
--- a/client/src/components/thumbnail-generator.tsx
+++ b/client/src/components/thumbnail-generator.tsx
@@ -387,7 +387,7 @@ export default function ThumbnailGenerator({
                         className={`relative rounded-lg overflow-hidden border-2 transition-all hover:scale-105 ${
                           selectedThumbnail === suggestion 
                             ? 'border-purple-500 ring-2 ring-purple-300' 
-                            : 'border-gray-300 dark:border-gray-600 hover:border-purple-400'
+                            : 'border-gray-300 dark:border-gray-600 hover:border-[#da234d]'
                         }`}
                         data-testid={`ai-suggestion-${index}`}
                       >
diff --git a/client/src/components/video-card.tsx b/client/src/components/video-card.tsx
index 60b174f..9724c23 100644
--- a/client/src/components/video-card.tsx
+++ b/client/src/components/video-card.tsx
@@ -309,11 +309,11 @@ 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-[#da234d] to-[#da234d] transition-all duration-200 ease-out shadow-lg relative"
+                  className="h-full bg-[#da234d] 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>
+                  <div className="absolute inset-0 bg-gradient-to-r from-[#da234d] to-[#da234d] 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-[#da234d]"></div>
                 </div>
diff --git a/client/src/components/video-grid.tsx b/client/src/components/video-grid.tsx
index 2daefeb..29d1454 100644
--- a/client/src/components/video-grid.tsx
+++ b/client/src/components/video-grid.tsx
@@ -83,7 +83,7 @@ export default function VideoGrid({ videos, isLoading, hasMore, onLoadMore, view
           <Button
             onClick={onLoadMore}
             disabled={isLoading}
-            className="bg-bunny-blue hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-medium transition-colors inline-flex items-center space-x-2"
+            className="bg-[#da234d] hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-medium transition-colors inline-flex items-center space-x-2"
             data-testid="button-load-more"
           >
             {isLoading ? (
diff --git a/client/src/components/video-modal.tsx b/client/src/components/video-modal.tsx
index 8116a8f..78aa2b9 100644
--- a/client/src/components/video-modal.tsx
+++ b/client/src/components/video-modal.tsx
@@ -449,7 +449,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
           variant="ghost"
           size="icon"
           onClick={onClose}
-          className="absolute -top-12 right-0 text-white hover:text-bunny-blue transition-colors z-60"
+          className="absolute -top-12 right-0 text-white hover:text-[#da234d] transition-colors z-60"
           data-testid="button-close-modal"
         >
           <X className="text-2xl" />
@@ -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-[#da234d] to-[#da234d] rounded-full transition-all duration-200"
+                    className="h-full bg-[#da234d] rounded-full transition-all duration-200"
                     style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }}
                   />
                   
@@ -527,7 +527,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
                   onClick={togglePlay}
                   variant="ghost"
                   size="icon"
-                  className="text-white hover:text-bunny-blue transition-colors"
+                  className="text-white hover:text-[#da234d] transition-colors"
                   data-testid="button-play-pause"
                 >
                   {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
@@ -539,7 +539,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
                     onClick={toggleMute}
                     variant="ghost"
                     size="icon"
-                    className="text-white hover:text-bunny-blue transition-colors"
+                    className="text-white hover:text-[#da234d] transition-colors"
                     data-testid="button-volume"
                   >
                     {isMuted ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
@@ -567,7 +567,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
                     onClick={() => setShowShareMenu(!showShareMenu)}
                     variant="ghost"
                     size="icon"
-                    className="text-white hover:text-bunny-blue transition-colors"
+                    className="text-white hover:text-[#da234d] transition-colors"
                     data-testid="button-share"
                   >
                     <Share2 className="w-5 h-5" />
@@ -633,7 +633,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
                   onClick={toggleFullscreen}
                   variant="ghost"
                   size="icon"
-                  className="text-white hover:text-bunny-blue transition-colors ml-auto"
+                  className="text-white hover:text-[#da234d] transition-colors ml-auto"
                   data-testid="button-fullscreen"
                 >
                   <Maximize className="w-5 h-5" />
diff --git a/client/src/components/video-preview-thumbnail.tsx b/client/src/components/video-preview-thumbnail.tsx
index 6409d4f..64a4708 100644
--- a/client/src/components/video-preview-thumbnail.tsx
+++ b/client/src/components/video-preview-thumbnail.tsx
@@ -175,7 +175,7 @@ export default function VideoPreviewThumbnail({ video, onClick, className = "" }
             {/* Progress bar */}
             <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/20">
               <div 
-                className="h-full bg-bunny-blue transition-all duration-150"
+                className="h-full bg-[#da234d] transition-all duration-150"
                 style={{ width: `${(previewTime / video.duration) * 100}%` }}
               />
             </div>
@@ -196,7 +196,7 @@ export default function VideoPreviewThumbnail({ video, onClick, className = "" }
         {/* Loading indicator for video metadata */}
         {!isVideoLoaded && (video.videoUrlMp4 || video.videoUrl.includes('.mp4')) && (
           <div className="absolute top-2 left-2">
-            <div className="w-2 h-2 bg-bunny-blue rounded-full animate-pulse"></div>
+            <div className="w-2 h-2 bg-[#da234d] rounded-full animate-pulse"></div>
           </div>
         )}
       </div>
diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index 40f4504..1c5c5a1 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -111,21 +111,21 @@ export default function FolxStadlPage() {
               {/* Desktop navigation */}
               <div className="hidden md:flex items-center space-x-6">
                 <nav className="flex space-x-6">
-                  <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
+                  <Link href="/" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     Startseite
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/folx-stadl" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     FOLX STADL
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     DIE GESCHICHTE DES LIEDES
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     GIPFELSTAMMTISCH
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                 </nav>
                 
@@ -135,7 +135,7 @@ export default function FolxStadlPage() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
+                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-56"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 </div>
@@ -167,28 +167,28 @@ export default function FolxStadlPage() {
                 <nav className="flex flex-col space-y-4">
                   <Link 
                     href="/" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     Startseite
                   </Link>
                   <Link 
                     href="/folx-stadl" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     FOLX STADL
                   </Link>
                   <Link 
                     href="/geschichte-lied" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     DIE GESCHICHTE DES LIEDES
                   </Link>
                   <Link 
                     href="/gipfelstammtisch" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     GIPFELSTAMMTISCH
@@ -208,7 +208,7 @@ export default function FolxStadlPage() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
+                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-[#da234d] focus:bg-white/15 transition-all w-full"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
                 </div>
@@ -312,13 +312,13 @@ export default function FolxStadlPage() {
             
             {/* Legal Links */}
             <div className="flex items-center space-x-6 text-sm">
-              <Link href="/impressum" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/impressum" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Impressum
               </Link>
-              <Link href="/privacy" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/privacy" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Datenschutz
               </Link>
-              <Link href="/terms" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/terms" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Nutzungsbedingungen
               </Link>
             </div>
diff --git a/client/src/pages/GeschichteLiedPage.tsx b/client/src/pages/GeschichteLiedPage.tsx
index 649bdca..13fbb7d 100644
--- a/client/src/pages/GeschichteLiedPage.tsx
+++ b/client/src/pages/GeschichteLiedPage.tsx
@@ -113,21 +113,21 @@ export default function GeschichteLiedPage() {
               {/* Desktop navigation */}
               <div className="hidden md:flex items-center space-x-6">
                 <nav className="flex space-x-6">
-                  <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
+                  <Link href="/" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     Startseite
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/folx-stadl" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     FOLX STADL
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     DIE GESCHICHTE DES LIEDES
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     GIPFELSTAMMTISCH
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                 </nav>
                 
@@ -137,7 +137,7 @@ export default function GeschichteLiedPage() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
+                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-56"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 </div>
@@ -169,28 +169,28 @@ export default function GeschichteLiedPage() {
                 <nav className="flex flex-col space-y-4">
                   <Link 
                     href="/" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     Startseite
                   </Link>
                   <Link 
                     href="/folx-stadl" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     FOLX STADL
                   </Link>
                   <Link 
                     href="/geschichte-lied" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     DIE GESCHICHTE DES LIEDES
                   </Link>
                   <Link 
                     href="/gipfelstammtisch" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     GIPFELSTAMMTISCH
@@ -210,7 +210,7 @@ export default function GeschichteLiedPage() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
+                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-[#da234d] focus:bg-white/15 transition-all w-full"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
                 </div>
@@ -313,13 +313,13 @@ export default function GeschichteLiedPage() {
             
             {/* Legal Links */}
             <div className="flex items-center space-x-6 text-sm">
-              <Link href="/impressum" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/impressum" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Impressum
               </Link>
-              <Link href="/privacy" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/privacy" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Datenschutz
               </Link>
-              <Link href="/terms" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/terms" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Nutzungsbedingungen
               </Link>
             </div>
diff --git a/client/src/pages/GipfelstammtischPage.tsx b/client/src/pages/GipfelstammtischPage.tsx
index ac97e93..c8761f6 100644
--- a/client/src/pages/GipfelstammtischPage.tsx
+++ b/client/src/pages/GipfelstammtischPage.tsx
@@ -113,21 +113,21 @@ export default function GipfelstammtischPage() {
               {/* Desktop navigation */}
               <div className="hidden md:flex items-center space-x-6">
                 <nav className="flex space-x-6">
-                  <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
+                  <Link href="/" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     Startseite
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/folx-stadl" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     FOLX STADL
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     DIE GESCHICHTE DES LIEDES
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     GIPFELSTAMMTISCH
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                 </nav>
                 
@@ -137,7 +137,7 @@ export default function GipfelstammtischPage() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
+                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-56"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 </div>
@@ -169,28 +169,28 @@ export default function GipfelstammtischPage() {
                 <nav className="flex flex-col space-y-4">
                   <Link 
                     href="/" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     Startseite
                   </Link>
                   <Link 
                     href="/folx-stadl" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     FOLX STADL
                   </Link>
                   <Link 
                     href="/geschichte-lied" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     DIE GESCHICHTE DES LIEDES
                   </Link>
                   <Link 
                     href="/gipfelstammtisch" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     GIPFELSTAMMTISCH
@@ -210,7 +210,7 @@ export default function GipfelstammtischPage() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
+                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-[#da234d] focus:bg-white/15 transition-all w-full"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
                 </div>
@@ -313,13 +313,13 @@ export default function GipfelstammtischPage() {
             
             {/* Legal Links */}
             <div className="flex items-center space-x-6 text-sm">
-              <Link href="/impressum" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/impressum" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Impressum
               </Link>
-              <Link href="/privacy" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/privacy" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Datenschutz
               </Link>
-              <Link href="/terms" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/terms" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Nutzungsbedingungen
               </Link>
             </div>
diff --git a/client/src/pages/Impressum.tsx b/client/src/pages/Impressum.tsx
index ce1da81..514e86a 100644
--- a/client/src/pages/Impressum.tsx
+++ b/client/src/pages/Impressum.tsx
@@ -6,7 +6,7 @@ export default function Impressum() {
       <div className="container max-w-4xl mx-auto px-4 py-8">
         {/* Back to home link */}
         <div className="mb-6">
-          <Link href="/" className="text-bunny-blue hover:text-purple-400 transition-colors">
+          <Link href="/" className="text-[#da234d] hover:text-purple-400 transition-colors">
             ← Zurück zur Startseite
           </Link>
         </div>
@@ -106,7 +106,7 @@ export default function Impressum() {
               <p>
                 Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: 
                 <br />
-                <a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener noreferrer" className="text-bunny-blue hover:text-purple-400 transition-colors">
+                <a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener noreferrer" className="text-[#da234d] hover:text-purple-400 transition-colors">
                   https://ec.europa.eu/consumers/odr/
                 </a>
               </p>
diff --git a/client/src/pages/PrivacyPolicy.tsx b/client/src/pages/PrivacyPolicy.tsx
index 036c6d4..8f25a01 100644
--- a/client/src/pages/PrivacyPolicy.tsx
+++ b/client/src/pages/PrivacyPolicy.tsx
@@ -6,7 +6,7 @@ export default function PrivacyPolicy() {
       <div className="container max-w-4xl mx-auto px-4 py-8">
         {/* Back to home link */}
         <div className="mb-6">
-          <Link href="/" className="text-bunny-blue hover:text-purple-400 transition-colors">
+          <Link href="/" className="text-[#da234d] hover:text-purple-400 transition-colors">
             ← Zurück zur Startseite
           </Link>
         </div>
diff --git a/client/src/pages/TermsOfService.tsx b/client/src/pages/TermsOfService.tsx
index 1ad483b..fb68314 100644
--- a/client/src/pages/TermsOfService.tsx
+++ b/client/src/pages/TermsOfService.tsx
@@ -6,7 +6,7 @@ export default function TermsOfService() {
       <div className="container max-w-4xl mx-auto px-4 py-8">
         {/* Back to home link */}
         <div className="mb-6">
-          <Link href="/" className="text-bunny-blue hover:text-purple-400 transition-colors">
+          <Link href="/" className="text-[#da234d] hover:text-purple-400 transition-colors">
             ← Zurück zur Startseite
           </Link>
         </div>
diff --git a/client/src/pages/VideoPage.tsx b/client/src/pages/VideoPage.tsx
index 8f84890..d264054 100644
--- a/client/src/pages/VideoPage.tsx
+++ b/client/src/pages/VideoPage.tsx
@@ -351,21 +351,21 @@ export default function VideoPage() {
               {/* Desktop navigation */}
               <div className="hidden md:flex items-center space-x-6">
                 <nav className="flex space-x-6">
-                  <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
+                  <Link href="/" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     Startseite
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/folx-stadl" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     FOLX STADL
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     DIE GESCHICHTE DES LIEDES
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                  <Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     GIPFELSTAMMTISCH
-                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                    <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
                   </Link>
                 </nav>
                 
@@ -375,7 +375,7 @@ export default function VideoPage() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
+                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-56"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 </div>
@@ -407,28 +407,28 @@ export default function VideoPage() {
                 <nav className="flex flex-col space-y-4">
                   <Link 
                     href="/" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     Startseite
                   </Link>
                   <Link 
                     href="/folx-stadl" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     FOLX STADL
                   </Link>
                   <Link 
                     href="/geschichte-lied" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     DIE GESCHICHTE DES LIEDES
                   </Link>
                   <Link 
                     href="/gipfelstammtisch" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     GIPFELSTAMMTISCH
@@ -448,7 +448,7 @@ export default function VideoPage() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
+                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-[#da234d] focus:bg-white/15 transition-all w-full"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
                 </div>
@@ -621,7 +621,7 @@ export default function VideoPage() {
                   onClick={() => navigateToVideo('prev')}
                   className={`rounded-full transition-colors duration-300 ease-in-out ${
                     activeDot === 'left' 
-                      ? 'bg-gradient-to-r from-purple-500 to-blue-500' 
+                      ? 'bg-gradient-to-r from-[#da234d] to-[#da234d]' 
                       : 'bg-white/25 hover:bg-white/40'
                   }`}
                   style={{
@@ -636,7 +636,7 @@ export default function VideoPage() {
                 <button
                   className={`rounded-full transition-colors duration-300 ease-in-out ${
                     activeDot === 'center' 
-                      ? 'bg-gradient-to-r from-purple-500 to-blue-500' 
+                      ? 'bg-gradient-to-r from-[#da234d] to-[#da234d]' 
                       : 'bg-white/25'
                   }`}
                   style={{
@@ -652,7 +652,7 @@ export default function VideoPage() {
                   onClick={() => navigateToVideo('next')}
                   className={`rounded-full transition-colors duration-300 ease-in-out ${
                     activeDot === 'right' 
-                      ? 'bg-gradient-to-r from-purple-500 to-blue-500' 
+                      ? 'bg-gradient-to-r from-[#da234d] to-[#da234d]' 
                       : 'bg-white/25 hover:bg-white/40'
                   }`}
                   style={{
@@ -797,8 +797,8 @@ export default function VideoPage() {
       {/* Footer - same as home page */}
       <footer className="bunny-gray/50 border-t border-white/10 mt-16 relative overflow-hidden">
         {/* Triangle decorations in footer - manjši in bolje pozicionirani */}
-        <div className="absolute top-2 right-10 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/5 rotate-12 z-0"></div>
-        <div className="absolute top-1 left-10 w-0 h-0 border-l-[15px] border-l-transparent border-r-[15px] border-r-transparent border-b-[20px] border-b-blue-400/4 -rotate-12 z-0"></div>
+        <div className="absolute top-2 right-10 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-[#da234d]/5 rotate-12 z-0"></div>
+        <div className="absolute top-1 left-10 w-0 h-0 border-l-[15px] border-l-transparent border-r-[15px] border-r-transparent border-b-[20px] border-b-[#da234d]/4 -rotate-12 z-0"></div>
         
         <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 items-center justify-center space-y-4">
@@ -812,13 +812,13 @@ export default function VideoPage() {
             
             {/* Legal Links */}
             <div className="flex items-center space-x-6 text-sm">
-              <Link href="/impressum" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/impressum" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Impressum
               </Link>
-              <Link href="/privacy" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/privacy" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Datenschutz
               </Link>
-              <Link href="/terms" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/terms" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Nutzungsbedingungen
               </Link>
             </div>
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index f022aac..ff9d4df 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -87,19 +87,19 @@ export default function Home() {
               {/* Desktop navigation */}
               <div className="hidden md:flex items-center space-x-6">
                 <nav className="flex space-x-6">
-                  <Link href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group">
+                  <Link href="/" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     Startseite
                     <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-rose-400 via-pink-500 to-rose-600 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">
+                  <Link href="/folx-stadl" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     FOLX STADL
                     <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-rose-400 via-pink-500 to-rose-600 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">
+                  <Link href="/geschichte-lied" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     DIE GESCHICHTE DES LIEDES
                     <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-rose-400 via-pink-500 to-rose-600 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">
+                  <Link href="/gipfelstammtisch" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                     GIPFELSTAMMTISCH
                     <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-rose-400 via-pink-500 to-rose-600 transition-all duration-300 group-hover:w-full"></span>
                   </Link>
@@ -111,7 +111,7 @@ export default function Home() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-bunny-blue transition-colors w-56"
+                    className="bg-white border border-gray-300 rounded-lg px-4 py-1.5 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:border-[#da234d] transition-colors w-56"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                 </div>
@@ -143,28 +143,28 @@ export default function Home() {
                 <nav className="flex flex-col space-y-4">
                   <Link 
                     href="/" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     Startseite
                   </Link>
                   <Link 
                     href="/folx-stadl" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     FOLX STADL
                   </Link>
                   <Link 
                     href="/geschichte-lied" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     DIE GESCHICHTE DES LIEDES
                   </Link>
                   <Link 
                     href="/gipfelstammtisch" 
-                    className="text-bunny-light hover:text-bunny-blue transition-colors font-medium py-1 border-l-2 border-transparent hover:border-bunny-blue pl-3"
+                    className="text-bunny-light hover:text-[#da234d] transition-colors font-medium py-1 border-l-2 border-transparent hover:border-[#da234d] pl-3"
                     onClick={() => setIsMobileMenuOpen(false)}
                   >
                     GIPFELSTAMMTISCH
@@ -184,7 +184,7 @@ export default function Home() {
                     placeholder="Suchen..."
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-bunny-blue focus:bg-white/15 transition-all w-full"
+                    className="bg-white/10 border border-white/20 rounded-lg px-4 py-2.5 pl-10 text-sm text-white placeholder-white/60 focus:outline-none focus:border-[#da234d] focus:bg-white/15 transition-all w-full"
                   />
                   <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-white/60 w-4 h-4" />
                 </div>
@@ -217,13 +217,13 @@ export default function Home() {
             
             {/* Legal Links */}
             <div className="flex items-center space-x-6 text-sm">
-              <Link href="/impressum" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/impressum" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Impressum
               </Link>
-              <Link href="/privacy" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/privacy" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Datenschutz
               </Link>
-              <Link href="/terms" className="text-bunny-muted hover:text-bunny-blue transition-colors">
+              <Link href="/terms" className="text-bunny-muted hover:text-[#da234d] transition-colors">
                 Nutzungsbedingungen
               </Link>
             </div>
diff --git a/client/src/pages/not-found.tsx b/client/src/pages/not-found.tsx
index 5a03fa9..ada1629 100644
--- a/client/src/pages/not-found.tsx
+++ b/client/src/pages/not-found.tsx
@@ -9,8 +9,8 @@ export default function NotFound() {
       {/* Header - same as other pages */}
       <div className="header-sticky bg-transparent overflow-hidden">
         {/* Triangle decorations in header */}
-        <div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div>
-        <div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div>
+        <div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-[#da234d]/15 rotate-12"></div>
+        <div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-[#da234d]/12 -rotate-6"></div>
         <div className="absolute top-1 right-1/2 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[30px] border-b-cyan-400/10 rotate-45"></div>
         
         <div className="triangle-decoration-2 opacity-30" style={{top: '10px', right: '15%'}}></div>
@@ -29,21 +29,21 @@ export default function NotFound() {
             
             <div className="hidden md:flex items-center space-x-6">
               <nav className="flex space-x-6">
-                <a href="/" className="relative text-bunny-light hover:text-bunny-blue transition-colors group" data-testid="link-home">
+                <a href="/" className="relative text-bunny-light hover:text-[#da234d] 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-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                <a href="/folx-stadl" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                   FOLX STADL
-                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                <a href="/geschichte-lied" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                   DIE GESCHICHTE DES LIEDES
-                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] 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">
+                <a href="/gipfelstammtisch" className="relative text-bunny-light hover:text-[#da234d] transition-colors group">
                   GIPFELSTAMMTISCH
-                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#da234d] to-[#da234d] transition-all duration-300 group-hover:w-full"></span>
+                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#da234d] transition-all duration-300 group-hover:w-full"></span>
                 </a>
               </nav>
             </div>
@@ -141,8 +141,8 @@ export default function NotFound() {
       {/* Footer - same as other pages */}
       <footer className="bunny-gray/50 border-t border-white/10 mt-16 relative overflow-hidden">
         {/* Triangle decorations in footer - manjši in bolje pozicionirani */}
-        <div className="absolute top-2 right-10 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/5 rotate-12 z-0"></div>
-        <div className="absolute top-1 left-10 w-0 h-0 border-l-[15px] border-l-transparent border-r-[15px] border-r-transparent border-b-[20px] border-b-blue-400/4 -rotate-12 z-0"></div>
+        <div className="absolute top-2 right-10 w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-[#da234d]/5 rotate-12 z-0"></div>
+        <div className="absolute top-1 left-10 w-0 h-0 border-l-[15px] border-l-transparent border-r-[15px] border-r-transparent border-b-[20px] border-b-[#da234d]/4 -rotate-12 z-0"></div>
         
         <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">