design koogle -> GoodWood

CLAUDE.md

@@ -8,7 +8,7 @@ The development guidelines to consider are descibed in [docs/development_guideli
 
 Blazor Server app (.NET 9.0) with Clean Architecture: Domain, Application, Infrastructure, Web layers. Uses ASP.NET Core Identity with dual DbContext pattern (AppDbContext for domain, AppIdentityDbContext for auth), MudBlazor UI, and Fluxor state management.
 
-The name for the App is KOOGLE. Koogle is an app for club management. 
+The name for the App is GOODWOOD. GoodWood is an app for club management. 
 
 ### Functional
 - Club management

KoogleApp.sln

@@ -26,6 +26,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{63E5B7FE-3
 	ProjectSection(SolutionItems) = preProject
 		docs\build.md = docs\build.md
 		CLAUDE.md = CLAUDE.md
+		design.md = design.md
+		..\..\..\..\Users\d-chrka\Downloads\Moodboard.png = ..\..\..\..\Users\d-chrka\Downloads\Moodboard.png
 		todos.md = todos.md
 	EndProjectSection
 EndProject

src/Koogle.Web/Components/Layout/EmptyLayout.razor

@@ -8,7 +8,7 @@
 
 @code {
     // Default theme - configurable for future theme selection
-    private MudTheme _theme = CustomThemes.DefaultTheme;
+    private MudTheme _theme = CustomThemes.GoodwoodTheme;
 }
 
 <main>

src/Koogle.Web/Components/Layout/MainLayout.razor

@@ -22,7 +22,7 @@
 
 <MudLayout>
     
-    <MudAppBar Elevation="1" Dense="true" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
+    <MudAppBar Elevation="1" Dense="true" Style="background:  linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="ToggleDrawer" />
         <MudText Typo="Typo.h6">KOOGLE</MudText>
         <MudSpacer/>
@@ -100,7 +100,7 @@
     }
 
     // Default theme - can be changed per user in future
-    private MudTheme _theme = CustomThemes.DefaultTheme;
+    private MudTheme _theme = CustomThemes.GoodwoodTheme;
 
     private void ClearAuthError()
     {

src/Koogle.Web/Components/Layout/PublicLayout.razor

@@ -8,7 +8,7 @@
 <MudSnackbarProvider />
 
 <MudLayout>
-    <MudAppBar Elevation="1" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%);">
+    <MudAppBar Elevation="1" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%);">
         @* Mobile Menu Button (unter lg: 1280px) - LINKS *@
         <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Class="mobile-only" OnClick="ToggleDrawer" />
 
@@ -23,8 +23,8 @@
 
             <AuthorizeView>
                 <Authorized>
-                    <MudButton Href="/dashboard" Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard">
+                    <MudButton Href="/dashboard" Variant="Variant.Filled" Color="Color.Secondary" StartIcon="@Icons.Material.Filled.Dashboard">
-                        Dashboard
+                        &Uuml;bersicht
                     </MudButton>
                 </Authorized>
                 <NotAuthorized>
@@ -40,7 +40,7 @@
         @* Logo - RECHTS *@
         <MudLink Href="/" Class="d-flex align-center" Style="text-decoration: none;">
             <MudPaper Class="pa-0 rounded-lg" Style="background: #2d5a4d;" Elevation="2">
-                <MudImage Src="logo6_bg.png" Alt="KOOGLE" Height="32" />
+                <MudImage Src="gw_app_icon2.png" Alt="KOOGLE" Height="32" />
             </MudPaper>
         </MudLink>
     </MudAppBar>
@@ -93,7 +93,7 @@
 </MudLayout>
 
 @code {
-    private MudTheme _theme = CustomThemes.DefaultTheme;
+    private MudTheme _theme = CustomThemes.GoodwoodTheme;
     private bool _drawerOpen;
 
     private void ToggleDrawer() => _drawerOpen = !_drawerOpen;

src/Koogle.Web/Components/Pages/About.razor

@@ -6,7 +6,7 @@
 <MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
 
     @* Hero Section *@
-    <MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
+    <MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
         <MudText Typo="Typo.h4" Class="font-weight-bold mb-2">Von der Totenkiste zum Cloud-System</MudText>
         <MudText Typo="Typo.h6" Style="opacity: 0.9;">Unsere Story</MudText>
     </MudPaper>

src/Koogle.Web/Components/Pages/Blog.razor

@@ -6,7 +6,7 @@
 <MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
 
     @* Hero Section *@
-    <MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
+    <MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
         <MudText Typo="Typo.h4" Class="font-weight-bold mb-2">Blog</MudText>
         <MudText Typo="Typo.h6" Style="opacity: 0.9;">Neuigkeiten rund um KOOGLE</MudText>
     </MudPaper>
@@ -30,7 +30,7 @@
     </MudPaper>
 
     @* Newsletter Teaser *@
-    <MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
+    <MudPaper Class="pa-6 rounded-lg" Style="background:linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
         <MudText Typo="Typo.h6" Align="Align.Center" Class="font-weight-bold mb-2">
             Bleib auf dem Laufenden!
         </MudText>

src/Koogle.Web/Components/Pages/Home.razor

@@ -8,7 +8,7 @@
 
 <MudContainer MaxWidth="MaxWidth.Large" Class="py-0">
 
-<MudImage src="logo6_bg.png" alt="KOOGLE Logo" Height="80" />
+
     @* Hero Section *@
     <div class="hero-section mb-8 rounded-lg">
         <div class="hero-overlay">
@@ -17,7 +17,8 @@
                     <MudItem xs="12" md="8">
                         <MudStack Spacing="4">
                             <MudStack Spacing="3" Class="hero-stack">
-                                <MudText Typo="Typo.h3" Class="hero-title" Style="color: white;">KOOGLE - Die smarte Lösung für Kegelclubs</MudText>
+                                <MudImage src="logo7.png" alt="GoodWood Logo" Height="120" />
+                                <MudText Typo="Typo.h3" Class="hero-title" Style="color: white;">GOODWOOD - Die smarte Lösung für Kegelclubs</MudText>
                             </MudStack>
                             <MudText Typo="Typo.h6" Style="color: white; opacity: 0.9;">
                                 Mehr Zeit fürs Kegeln, weniger für den Papierkram.
@@ -29,7 +30,7 @@
 
                                 <AuthorizeView>
                                     <Authorized>
-                                        <MudButton Variant="Variant.Filled" Color="Color.Success" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
+                                        <MudButton Variant="Variant.Filled" Color="Color.Secondary" StartIcon="@Icons.Material.Filled.Dashboard" Href="/dashboard">
                                             zur Anwendung
                                         </MudButton>
                                     </Authorized>
@@ -62,7 +63,7 @@
     @* Features Section *@
     <div id="features">
         <MudText Typo="Typo.h5" Class="mb-4 font-weight-bold" Color="Color.Primary">
-            Deine Vorteile mit KOOGLE
+            Deine Vorteile mit GoodWood
         </MudText>
         
         
@@ -234,14 +235,14 @@
         <MudStack Row AlignItems="AlignItems.Center" Spacing="2">
             <MudIcon Icon="@Icons.Material.Filled.Circle" Color="Color.Success" Size="Size.Small" />
             <MudText>
-                Schon über <strong>1</strong> Kegelclubs vertrauen auf KOOGLE. ;-)
+                Schon über <strong>1</strong> Kegelclubs vertrauen auf GoodWood. ;-)
             </MudText>
         </MudStack>
 
     </MudPaper>
 
     @* Footer Slogan *@
-    <MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
+    <MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
         <MudText Typo="Typo.h5" Align="Align.Center" Class="font-weight-bold">
             "Weniger Verwaltung, mehr Kegeln!"
         </MudText>
@@ -271,12 +272,22 @@
         position: relative;
     }
 
-    .hero-overlay {
+/*     .hero-overlay {
-        background: linear-gradient(135deg, rgba(26, 54, 93, 0.92) 0%, rgba(45, 90, 77, 0.75) 100%);
+        background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%);
         min-height: 400px;
         display: flex;
         align-items: center;
         border-radius: inherit;
+    } */
+    .hero-overlay {
+        /* Wir nutzen RGBA, um die Farben des Moodboards mit Transparenz zu mischen */
+        /* 0.85 bedeutet 85% Deckkraft - das Bild schimmert dezent durch */
+        background: linear-gradient(135deg, rgba(27, 48, 34, 0.85) 0%, rgba(74, 93, 78, 0.7) 100%);
+        min-height: 400px;
+        display: flex;
+        align-items: center;
+        border-radius: inherit;
+        width: 100%; /* Sicherstellen, dass es die volle Breite einnimmt */
     }
 
     .hero-overlay .mud-typography {

src/Koogle.Web/Components/Pages/Preise.razor

@@ -6,7 +6,7 @@
 <MudContainer MaxWidth="MaxWidth.Large" Class="py-8">
 
     @* Hero Section *@
-    <MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
+    <MudPaper Class="pa-8 mb-8 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
         <MudText Typo="Typo.h4" Class="font-weight-bold mb-2">Preise</MudText>
         <MudText Typo="Typo.h6" Style="opacity: 0.9;">Faire Konditionen für alle Kegelvereine</MudText>
     </MudPaper>
@@ -40,7 +40,7 @@
     </MudPaper>
 
     @* CTA *@
-    <MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1a365d 0%, #2d5a4d 100%); color: white;">
+    <MudPaper Class="pa-6 rounded-lg" Style="background: linear-gradient(135deg, #1B3022 0%, #4A5D4E 100%); color: white;">
         <MudText Typo="Typo.h6" Align="Align.Center" Class="font-weight-bold mb-4">
             Worauf wartest du noch?
         </MudText>

src/Koogle.Web/Services/CustomThemes.cs

@@ -42,6 +42,70 @@ namespace Koogle.Web.Services
             // }
         };
 
+        public static readonly MudTheme GoodwoodTheme = new()
+        {
+            PaletteLight = new PaletteLight()
+            {
+                // Hintergrund & Oberflächen (Moodboard: Soft Sand #F5F2ED)
+                Background = "#F5F2ED",
+                Surface = "#FFFFFF",
+                AppbarBackground = "#1B3022", // Deep Forest Green für Kontrast
+                AppbarText = "#F5F2ED",
+
+                // Markenfarben
+                Primary = "#1B3022", // Deep Forest Green
+                PrimaryContrastText = "#F5F2ED",
+                Secondary = "#B66D35", // Burnt Ochre / Wood
+                SecondaryContrastText = "#FFFFFF",
+                Tertiary = "#4A5D4E", // Ein weicheres Waldgrün für Akzente
+
+                // Status & Feedback
+                Info = "#4A708B",
+                Success = "#6B8E23", // Olive-Grün passend zum Naturthema
+                Warning = "#D2691E",
+                Error = "#8B0000",
+
+                // Texte & Linien
+                TextPrimary = "#1A1A1A",
+                TextSecondary = "#4A5D4E",
+                Divider = "rgba(27, 48, 34, 0.12)",
+                LinesDefault = "rgba(27, 48, 34, 0.2)",
+
+                DrawerBackground = "#F5F2ED",
+                DrawerText = "#1B3022",
+                DrawerIcon = "#1B3022",
+            },
+            PaletteDark = new PaletteDark()
+            {
+                // Dark Mode Umkehrung für professionelle Software
+                Background = "#121A14", // Extrem dunkles Grün/Schwarz
+                Surface = "#1B3022",
+                Primary = "#F5F2ED", // Im Darkmode wird Sand zur Kontrastfarbe
+                Secondary = "#B66D35",
+                AppbarBackground = "#0D1811",
+                TextPrimary = "#F5F2ED",
+                TextSecondary = "rgba(245, 242, 237, 0.7)",
+                DrawerBackground = "#0D1811",
+            },
+            LayoutProperties = new LayoutProperties()
+            {
+                DefaultBorderRadius = "6px", // Etwas weicher als Standard, aber modern flach
+                AppbarHeight = "64px",
+            },
+            Typography = new Typography()
+            {
+                Default = new DefaultTypography
+                {
+                    FontFamily = new[] { "Inter", "Roboto", "Helvetica", "Arial", "sans-serif" },
+                    FontSize = ".875rem",
+                    FontWeight = "400"
+                },
+                H1 = new H1Typography { FontWeight = "700", FontSize = "3.5rem", LetterSpacing = "-.02em" },
+                H2 = new H2Typography { FontWeight = "600", FontSize = "2.5rem", LetterSpacing = "-.01em" },
+                Button = new ButtonTypography { FontWeight = "600", TextTransform = "none" } // "none" wirkt moderner als All-Caps
+            }
+        };
+
         public static readonly MudTheme SandstoneTheme = new()
         {
             PaletteLight = new PaletteLight()

src/Koogle.Web/wwwroot/manifest.webmanifest

@@ -1,11 +1,11 @@
 {
-  "name": "KOOGLE",
+  "name": "GOODWOOD",
-  "short_name": "KOOGLE",
+  "short_name": "GOODWOOD",
-  "description": "Koogle Club Management App",
+  "description": "GoodWood Kegel & Vereinsverwaltung",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#2c3e50",
+  "background_color": "#F5F2ED",
-  "theme_color": "#2c3e50",
+  "theme_color": "#F5F2ED",
   "icons": [
     {
       "src": "/icons/icon-192x192.png",