From 7147bcbe252ba685c3def907b93158f9c7d067c7 Mon Sep 17 00:00:00 2001
From: Pascal <pascalriedel76@gmail.com>
Date: Thu, 21 May 2026 13:39:54 +0200
Subject: [PATCH] =?UTF-8?q?proof=20of=20concept=20der=20farb=C3=A4nderung?=
 =?UTF-8?q?=20auf=20der=20startseite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 184 ++++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 147 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index 160b845..356b705 100644
--- a/index.html
+++ b/index.html
@@ -11,64 +11,174 @@
     integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
     crossorigin="anonymous"
   />
-
+  
   <link rel="stylesheet" href="css/nav.css" />
   <link rel="stylesheet" href="css/footer.css" />
 
   <style>
-    /* Spezifisches Styling für das Logo2-Pattern auf der Index-Seite */
-    .navbar-custom {
-      background-color: #b30000 !important;
-      /* Pfad angepasst für die index.html (Bilder liegen im Ordner bilder/) */
+    /* ===== FARBVARIABLEN ===== */
+    :root {
+      --rot-dunkel: #900000;
+      --rot-accent: #b30000;
+      --gelb: #FFCC00;
+      --gelb-hell: #fff3cc;
+      --glow-dunkel: rgba(190, 140, 0, 0.45);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    /* ===== GLOBALER HINTERGRUND & TEXT ===== */
+    body {
+      background-color: var(--rot-dunkel) !important;
       background-image: url('bilder/logo2.jpeg') !important;
-      background-size: 7em !important;
+      background-size: 12em !important;
       background-repeat: repeat !important;
+      color: var(--gelb) !important;
+      min-height: 100vh;
+    }
+
+    /* ===== NAVBAR ===== */
+    .navbar-custom {
+      background-color: var(--rot-accent) !important;
+      background-image: url('bilder/logo2.jpeg') !important;
+      background-size: 8em !important;
+      background-repeat: repeat !important;
+      border-bottom: 3px solid var(--gelb) !important;
       padding: 1rem 0;
     }
 
-    .navbar-custom .navbar-brand,
+    .navbar-custom .navbar-brand {
+      font-size: 1.5rem; /* 👈 GRÖSSE HIER ANPASSEN */
+      color: var(--gelb) !important;
+      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
+      font-weight: 600;
+      line-height: 1;
+    }
+
     .navbar-custom .nav-link {
-      color: #ffffff !important;
-      text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+      color: var(--gelb) !important;
+      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
       font-weight: 600;
     }
 
+    .navbar-custom .nav-link:hover,
+    .navbar-custom .nav-link:focus {
+      color: var(--gelb-hell) !important;
+      text-shadow: 0 0 8px var(--gelb);
+    }
+
     .navbar-custom .dropdown-menu {
-      background-color: #900000 !important;
+      background-color: var(--rot-dunkel) !important;
       background-image: url('bilder/logo2.jpeg') !important;
-      background-size: 9em !important;
-    }
-
-    /* Standard-Styling für Mobile */
-    .main-image {
-      width: 100%; 
-      height: auto;
+      background-size: 10em !important;
+      background-repeat: repeat !important;
+      border: 2px solid var(--gelb) !important;
       border-radius: 0.5rem;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     }
 
-    /* Desktop-Optimierung */
+    .navbar-custom .dropdown-item {
+      color: var(--gelb) !important;
+      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+    }
+
+    /* 🟡 DROPDOWN HOVER: Nur dunkler Glow, kein roter Hintergrund */
+    .navbar-custom .dropdown-item:hover,
+    .navbar-custom .dropdown-item:focus {
+      background: transparent !important;
+      color: var(--gelb-hell) !important;
+      box-shadow: 0 0 10px var(--glow-dunkel) !important;
+      transition: box-shadow 0.2s ease, color 0.2s ease;
+    }
+
+    .navbar-custom .dropdown-divider {
+      border-top-color: var(--gelb) !important;
+      opacity: 0.4;
+    }
+
+    .navbar-toggler {
+      border-color: var(--gelb) !important;
+    }
+
+    .navbar-toggler-icon {
+      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFCC00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
+    }
+
+    /* 🟡 DESKTOP: Brand exakt zentrieren */
     @media (min-width: 992px) {
-      .sticky-sidebar {
-        position: sticky;
-        top: 20px;
-        z-index: 10;
+      .navbar-custom .container-fluid {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
-
-      .main-image {
-        width: 60%;
+      
+      .navbar-brand {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        white-space: nowrap;
+      }
+      
+      .navbar-nav {
+        margin-left: auto;
+        margin-right: 2rem;
       }
     }
-    
-    /* Info-Boxen Styling */
+
+    /* ===== INFO-BOXEN ===== */
     .info-box {
-      background-color: #fff;
-      padding: 1.5rem;
+      background-color: rgba(144, 0, 0, 0.85) !important;
+      border: 2px solid var(--gelb) !important;
+      border-left: 5px solid var(--gelb) !important;
       border-radius: 0.5rem;
-      border-left: 5px solid #e60000; 
-      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+      padding: 1.5rem;
+      color: var(--gelb) !important;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
       margin-bottom: 1.5rem;
     }
+
+    .info-box h3 { color: var(--gelb) !important; }
+    .info-box p { color: var(--gelb-hell) !important; }
+    .info-box .text-muted { color: var(--gelb-hell) !important; opacity: 0.7; }
+
+    /* ===== TYPOGRAFIE ===== */
+    h3, h6, .fw-bold, .text-danger { color: var(--gelb) !important; }
+
+    /* ===== HAUPTBILD ===== */
+    .main-image {
+      width: 100%;
+      height: auto;
+      border-radius: 0.5rem;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+      border: 3px solid var(--gelb);
+    }
+
+    @media (min-width: 992px) {
+      .sticky-sidebar { position: sticky; top: 20px; z-index: 10; }
+      .main-image { width: 60%; }
+    }
+
+    /* ===== FOOTER ===== */
+    footer {
+      background-color: var(--rot-dunkel) !important;
+      background-image: url('bilder/logo2.jpeg') !important;
+      background-size: 12em !important;
+      background-repeat: repeat !important;
+      border-top: 3px solid var(--gelb) !important;
+      color: var(--gelb) !important;
+    }
+
+    footer h6 { color: var(--gelb) !important; text-decoration-color: var(--gelb) !important; }
+    footer p, footer .small, footer .fw-bold { color: var(--gelb-hell) !important; }
+    footer .text-muted { color: var(--gelb-hell) !important; opacity: 0.7; }
+
+    /* ===== CUSTOM SCROLLBAR ===== */
+    ::-webkit-scrollbar { width: 10px; }
+    ::-webkit-scrollbar-track { background: var(--rot-dunkel); }
+    ::-webkit-scrollbar-thumb { background: var(--gelb); border-radius: 5px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--rot-accent); }
   </style>
 </head>
 
@@ -92,7 +202,7 @@
       <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav ms-auto">
           <li class="nav-item"><a class="nav-link" href="#">Aktuelles</a></li>
-          
+
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
               Über uns
@@ -118,14 +228,14 @@
       <div class="col-lg-3 col-md-4 order-2 order-lg-1">
         <div class="sticky-sidebar">
           <div class="info-box">
-            <h3 class="h5 fw-bold text-danger">Nächster Dienst</h3>
+            <h3 class="h5 fw-bold">Nächster Dienst</h3>
             <div id="nextDienst">
               <p class="small text-muted">Lade nächsten Dienst...</p>
             </div>
           </div>
 
           <div class="info-box">
-            <h3 class="h5 fw-bold text-danger">Veranstaltung</h3>
+            <h3 class="h5 fw-bold">Veranstaltung</h3>
             <div id="nextEvent">
               <p class="small text-muted">Lade nächste Veranstaltung...</p>
             </div>
@@ -152,7 +262,7 @@
   <footer class="container-fluid py-4 mt-auto border-top">
     <div class="row justify-content-center align-items-center">
       <div class="col-lg-4 col-md-5 text-lg-end text-center mb-3 mb-lg-0">
-        <h6 class="fw-bold text-decoration-underline">Letzte Aktualisierung</h6>
+        <h6 class="fw-bold">Letzte Aktualisierung</h6>
         <p class="mb-0">17. März 2026</p>
         <small class="text-muted">(Version 1.2)</small>
       </div>
@@ -160,7 +270,7 @@
       <div class="col-lg-1 d-none d-lg-block"></div>
 
       <div class="col-lg-4 col-md-5 text-lg-start text-center">
-        <h6 class="fw-bold text-decoration-underline">Kleine Statistik der FFw Stadt Wehlen</h6>
+        <h6 class="fw-bold">Kleine Statistik der FFw Stadt Wehlen</h6>
         <p class="mb-0 small">
           <strong>Aktive:</strong> 27 | <strong>Jugend:</strong> 23 | <strong>Passive:</strong> 9 | <strong>Förderverein:</strong> 172
         </p>