Merge pull request 'Neue agb seite implementiert' (#6) from navbar_styling into main

Reviewed-on: #6

ideas.md

@@ -0,0 +1,73 @@
+# Brainstorming & Zukunfts-Ideen für den Timetracker
+
+Der Timetracker ist durch die Umstellung auf eine Hosted Blazor WebAssembly (.NET 10) Architektur mit PostgreSQL-Unterstützung extrem solide und zukunftssicher aufgestellt. Hier sind einige spannende, innovative Produktideen, um das Tool auf das nächste Level zu heben:
+
+---
+
+## 🚀 1. PWA-Support (Progressive Web App) und Offline-Modus
+* **Offline-Erfassung**: Da die App in Blazor WebAssembly im Browser läuft, lässt sie sich leicht zu einer PWA umrüsten. Zeiterfassungen könnten lokal im `IndexedDB`-Speicher des Browsers gesichert werden, wenn keine Internetverbindung besteht, und bei Wiederverbindung automatisch mit der PostgreSQL-Datenbank synchronisiert werden.
+* **Mobiles App-Feeling**: Installation direkt auf dem Homescreen (Android/iOS) ohne App-Store-Zwang.
+* **Web-Push Notifications**: Tägliche Erinnerungen, falls man vergisst, sich auszustempeln oder Pausen einzutragen.
+
+---
+
+## 🤖 2. KI-Assistent & Smart-Suggestions
+* **Kalender- & Git-Sync**: Einbindung einer KI-Schnittstelle, die Zugriff auf Terminkalender (Google/Outlook) oder lokale Git-Commits hat. Sie schlägt am Ende des Tages automatisch passende Buchungen vor (z. B. *"Du hast von 10-11 Uhr am Feature X gearbeitet. Möchtest du das buchen?"*).
+* **Ausreißer-Erkennung**: KI-gestützte Warnungen, wenn Zeiten untypisch erfasst wurden (z. B. 12 Stunden gearbeitet ohne Pause).
+
+---
+
+## 📅 3. Kalender-Integration & Feiertags-Automatisierung
+* **Direktes Feiertags-Abonnement**: Automatische Erkennung des Bundeslandes und Import der Feiertage ohne manuellen Klick auf "Von API laden" zu Beginn des Jahres.
+* **Kalender-Export (iCal)**: Generierung eines persönlichen iCal-Feeds, damit der User seine gebuchten Urlaubstage und Überstunden in seinem primären Kalender (Google Calendar, Apple Calendar) sieht.
+
+---
+
+## 👥 4. Team-Features & Urlaubsplaner
+* **Wer-ist-da-Dashboard**: Ein Live-Statusboard für Teams, auf dem man sieht, wer gerade eingestempelt ist, wer Pause macht oder wer heute Urlaub hat/krankgeschrieben ist.
+* **Gemeinsamer Urlaubskalender**: Ein Kalender für das gesamte Team, um Urlaubsüberschneidungen direkt zu erkennen und Freigabeprozesse durch Admins zu ermöglichen.
+* **Rollenkonzepte**: Einführung von Teamleitern (können Zeiten der Mitglieder freigeben) und Standard-Mitarbeitern.
+
+---
+
+## 📊 5. Reporting & Abrechnung (Billing)
+* **Rechnungserstellung**: Verknüpfung von erfassten Zeiten mit Stundensätzen, um mit einem Klick professionelle PDF-Rechnungen an Kunden zu erstellen.
+* **Auswertungen**: Interaktive Diagramme (z.B. mittels MudBlazor Charts) zur Analyse von Arbeitszeiten, Überstundenentwicklung und Krankheitstagen über das Jahr verteilt.
+
+---
+
+## 🔌 6. Integrationen (Jira, GitHub, Slack)
+* **Git-Hooks / CLI**: Automatisches Starten/Stoppen von Timern per CLI oder bei Git-Commits.
+* **Slack / Teams Chatbot**: Schnelles Ein- und Ausstempeln direkt aus dem Chat-Client heraus über Befehle wie `/track start` oder `/track pause`.
+
+---
+
+## 🔒 7. Sicherheit & DSGVO
+* **Audit Logs**: Transparente Historie darüber, wer wann welche Zeiten geändert hat (besonders wichtig bei Prüfungen).
+* **Automatisches Löschkonzept**: Möglichkeit zur Einhaltung von Löschfristen erfasster Daten nach Beendigung des Arbeitsverhältnisses.
+
+---
+
+## ✉️ 8. E-Mail-Verifizierung & Inhouse-Mailserver
+* **Sicherer Registrierungs-Flow**: E-Mail-Verifizierung bei Neuregistrierung mittels eines 6-stelligen, zeitlich begrenzten Bestätigungscodes. Erst nach Eingabe des Codes wird das Benutzerkonto aktiviert und der Login erlaubt.
+* **Inhouse SMTP-Lösungen**:
+  * **Lokale Entwicklung**: Einbindung eines SMTP-Sandboxes wie **Mailpit** (oder MailHog) direkt in die `docker-compose.yml`, um E-Mails sicher lokal zu fangen und im Browser zu sichten.
+  * **Produktion**: Konfiguration für inhouse SMTP-Relays oder Aufbau eines vollverschlüsselten **docker-mailserver** Containers für den komplett eigenständigen, datenschutzkonformen E-Mail-Versand.
+
+---
+
+## 🏢 9. B2B-Fähigkeit & Azure AD (Entra ID) Integration
+* **Generisches Single Sign-On (SSO)**: Integration von OpenID Connect (OIDC) über Umgebungsvariablen. Dadurch können Unternehmen das Tool nahtlos an Microsoft Entra ID (Azure AD), Okta, Keycloak oder Google Workspace anbinden.
+* **White-Labeling & Customizing (Single-Tenant)**: Möglichkeit, Firmenlogos, Firmennamen und Standardeinstellungen (z.B. Feiertags-Bundesland) pro Docker-Compose-Instanz flexibel anzupassen.
+* **Optionale SaaS-Erweiterung (Multi-Tenant)**: Zukünftiger Ausbau für mehrmandantenfähigen Betrieb mit Datenisolation auf Tabellenebene (`TenantId`), dynamischer SSO-Zuordnung per E-Mail-Domain und zentraler Rechnungsabwicklung (z.B. Stripe).
+
+---
+
+## 💬 10. Gamifizierter Assistent & KI-Chatbot
+* **Regelbasierter Gamification-Widget (Quick-Win)**: Ein kleiner, charismatischer Assistent/Avatar im UI, der basierend auf den aktuellen Arbeitsstatistiken motivierende, freche oder informative Sprüche anzeigt (z.B. bei vielen Überstunden, fehlenden Pausen oder anstehendem Urlaub).
+* **LLM-gestützter KI-Assistent (Smart-Assistant)**:
+  * **Analysen**: Ein Chat-Fenster, in dem der Benutzer Fragen zu seinen Arbeitszeiten stellen kann (z.B. *"Wie viele Überstunden habe ich diesen Monat angesammelt?"* oder *"Wann habe ich letzte Woche Dienstag angefangen?"*).
+  * **Interaktion & Aktionen**: Die KI kann durch Function Calling direkt Aktionen ausführen (z.B. *"Trage mir für morgen 8 Stunden Arbeit ein"* oder *"Trage Urlaub für KW 28 ein"*).
+  * **Technologie**: Anbindung über ein einfaches HttpClient-Modul an die Google Gemini API, OpenAI oder lokal über ein Ollama-Docker-Container.
+
+

timetracker.Client/Components/Layout/ChatbotWidget.razor

@@ -0,0 +1,297 @@
+@inject ITimetrackerService TrackerService
+@inject AuthenticationStateProvider AuthStateProvider
+@inject IJSRuntime JS
+@using System.Security.Claims
+@using timetracker.Shared
+
+@if (_isOpen)
+{
+    <div class="timebot-chat-window">
+        <!-- Chat Header -->
+        <div class="timebot-header">
+            <div class="timebot-header-info">
+                <img src="/timebot.png" class="timebot-header-avatar" alt="Timebot" />
+                <div class="timebot-header-text">
+                    <span class="timebot-header-title">Timebot</span>
+                    <span class="timebot-header-status"><span class="status-dot"></span> Online</span>
+                </div>
+            </div>
+            <button class="timebot-close-btn" @onclick="ToggleChat" aria-label="Schließen">
+                <MudIcon Icon="@Icons.Material.Filled.Close" Size="Size.Small" Style="color: white;" />
+            </button>
+        </div>
+
+        <!-- Chat Body -->
+        <div class="timebot-body" id="timebot-body-el">
+            @foreach (var msg in _messages)
+            {
+                <div class="timebot-msg-row @(msg.Sender == "User" ? "user-row" : "bot-row")">
+                    @if (msg.Sender == "Bot")
+                    {
+                        <img src="/timebot.png" class="timebot-msg-avatar" alt="Timebot" />
+                    }
+                    <div class="timebot-msg-bubble @(msg.Sender == "User" ? "user-bubble" : "bot-bubble")">
+                        @if (msg.IsTyping)
+                        {
+                            <div class="typing-indicator">
+                                <span></span><span></span><span></span>
+                            </div>
+                        }
+                        else
+                        {
+                            @((MarkupString)FormatMessageText(msg.Content))
+                        }
+                    </div>
+                </div>
+            }
+        </div>
+
+        <!-- Suggestion Chips -->
+        <div class="timebot-suggestions">
+            <button @onclick="@(() => AskQuestion("Überstunden"))">📊 Überstunden</button>
+            <button @onclick="@(() => AskQuestion("Woche"))">⏱️ Wochenarbeitszeit</button>
+            <button @onclick="@(() => AskQuestion("Urlaub"))">🏖️ Urlaubs-Maximizer</button>
+            <button @onclick="@(() => AskQuestion("Hilfe"))">💡 Hilfe</button>
+        </div>
+
+        <!-- Chat Footer -->
+        <div class="timebot-footer">
+            <input type="text" @bind="_userInput" @bind:event="oninput" @onkeypress="HandleKeyPress" placeholder="Schreibe eine Nachricht..." class="timebot-input" />
+            <button class="timebot-send-btn" @onclick="SendMessage" disabled="@(string.IsNullOrWhiteSpace(_userInput))">
+                <MudIcon Icon="@Icons.Material.Filled.Send" Style="color: #3F51B5;" />
+            </button>
+        </div>
+    </div>
+}
+
+<!-- Floating Button -->
+<div class="timebot-launcher @(_isOpen ? "open" : "")" @onclick="ToggleChat">
+    <img src="/timebot.png" alt="Timebot Launcher" />
+    @if (_unreadCount > 0 && !_isOpen)
+    {
+        <span class="timebot-badge">@_unreadCount</span>
+    }
+</div>
+
+@code {
+    private bool _isOpen = false;
+    private string _userInput = "";
+    private int _unreadCount = 1;
+    private List<ChatMessage> _messages = new();
+    
+    private int _userId;
+    private string _username = "Marc";
+    private AppSettings _settings = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        var claim = authState.User.FindFirst(ClaimTypes.NameIdentifier);
+        if (claim != null)
+        {
+            _userId = int.Parse(claim.Value);
+            _username = authState.User.Identity?.Name ?? "Marc";
+            if (!string.IsNullOrEmpty(_username))
+            {
+                _username = char.ToUpper(_username[0]) + _username.Substring(1);
+            }
+            _settings = await TrackerService.GetSettingsAsync(_userId);
+        }
+
+        _messages.Add(new ChatMessage
+        {
+            Sender = "Bot",
+            Content = $"Hallo {_username}! 👋 Ich bin dein Timebot. Ich habe ein Auge auf deine Zeiten geworfen.\n\nWie kann ich dir heute helfen?",
+            Timestamp = DateTime.Now
+        });
+    }
+
+    private void ToggleChat()
+    {
+        _isOpen = !_isOpen;
+        if (_isOpen)
+        {
+            _unreadCount = 0;
+            _ = ScrollToBottom();
+        }
+    }
+
+    private async Task HandleKeyPress(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter" && !string.IsNullOrWhiteSpace(_userInput))
+        {
+            await SendMessage();
+        }
+    }
+
+    private async Task SendMessage()
+    {
+        if (string.IsNullOrWhiteSpace(_userInput)) return;
+        var text = _userInput;
+        _userInput = "";
+
+        _messages.Add(new ChatMessage { Sender = "User", Content = text, Timestamp = DateTime.Now });
+        await ScrollToBottom();
+
+        await RespondTo(text);
+    }
+
+    private async Task AskQuestion(string key)
+    {
+        string userQuestion = "";
+        if (key == "Überstunden") userQuestion = "Wie viele Überstunden habe ich?";
+        else if (key == "Woche") userQuestion = "Wie sieht meine Woche aus?";
+        else if (key == "Urlaub") userQuestion = "Wie hilft mir der Urlaubs-Maximizer?";
+        else if (key == "Hilfe") userQuestion = "Welche Fragen kann ich dir stellen?";
+
+        _messages.Add(new ChatMessage { Sender = "User", Content = userQuestion, Timestamp = DateTime.Now });
+        await ScrollToBottom();
+
+        await RespondTo(key);
+    }
+
+    private async Task RespondTo(string query)
+    {
+        // Add typing indicator
+        var typingMsg = new ChatMessage { Sender = "Bot", IsTyping = true, Timestamp = DateTime.Now };
+        _messages.Add(typingMsg);
+        await ScrollToBottom();
+
+        // Simulate thinking/typing delay
+        await Task.Delay(1000);
+        _messages.Remove(typingMsg);
+
+        string responseText = "";
+        var normalized = query.ToLower();
+
+        if (normalized.Contains("überstunden") || normalized == "überstunden" || normalized.Contains("saldo") || normalized.Contains("gleitzeit"))
+        {
+            var settings = await TrackerService.GetSettingsAsync(_userId);
+            var overtime = await TrackerService.GetTotalOvertimeAsync(_userId, settings);
+            var overtimeStr = FormatTs(overtime, sign: true);
+
+            if (overtime >= TimeSpan.Zero)
+            {
+                responseText = $"Dein Gleitzeitkonto sieht super aus! Du hast aktuell **{overtimeStr} Std.** auf deinem Gleitzeitkonto angesammelt.\n\nSehr stark! Hast du mit der Extrazeit schon etwas vor oder bist du einfach nur voll am Hustlen? 🚀🔥";
+            }
+            else
+            {
+                responseText = $"Dein Gleitzeitkonto steht aktuell bei **{overtimeStr} Std.**\n\nDu bist also ein kleines bisschen im Minus. Aber kein Grund zur Sorge: Das lässt sich mit ein paar Extra-Minuten in den nächsten Tagen leicht wieder ausgleichen! 💪";
+            }
+        }
+        else if (normalized.Contains("woche") || normalized == "woche" || normalized.Contains("arbeitszeit") || normalized.Contains("stunden"))
+        {
+            var today = DateOnly.FromDateTime(DateTime.Today);
+            var monday = GetMonday(today);
+            var settings = await TrackerService.GetSettingsAsync(_userId);
+            var weekDays = await TrackerService.GetWeekAsync(_userId, monday);
+
+            double workedHours = 0;
+            double targetHours = 0;
+
+            foreach (var date in Enumerable.Range(0, 7).Select(i => monday.AddDays(i)))
+            {
+                bool isWorkDay = settings.IsWorkDay(date.DayOfWeek);
+                if (isWorkDay)
+                {
+                    targetHours += settings.DailyTargetHours;
+                }
+
+                var wd = weekDays.FirstOrDefault(d => d.Date == date);
+                if (wd != null && wd.StartTime != null && wd.EndTime != null)
+                {
+                    var gross = wd.EndTime.Value.ToTimeSpan() - wd.StartTime.Value.ToTimeSpan();
+                    if (gross > TimeSpan.Zero)
+                    {
+                        var breakTotal = wd.Breaks
+                            .Where(b => b.StartTime.HasValue && b.EndTime.HasValue && b.EndTime > b.StartTime)
+                            .Aggregate(TimeSpan.Zero, (s, b) =>
+                                s + (b.EndTime!.Value.ToTimeSpan() - b.StartTime!.Value.ToTimeSpan()));
+                        workedHours += (gross - breakTotal).TotalHours;
+                    }
+                }
+            }
+
+            var workedTs = TimeSpan.FromHours(workedHours);
+            var targetTs = TimeSpan.FromHours(targetHours);
+            var percent = targetHours > 0 ? (int)Math.Round(workedHours / targetHours * 100) : 0;
+
+            responseText = $"Diese Woche hast du bereits **{FormatTs(workedTs)}** von geplanten **{FormatTs(targetTs)}** gearbeitet.\n\nDu hast diese Woche also schon **{percent}%** deines Solls erfüllt. Weiter so! ⏰";
+        }
+        else if (normalized.Contains("urlaub") || normalized == "urlaub" || normalized.Contains("maximizer") || normalized.Contains("brückentag"))
+        {
+            responseText = $"Der **Urlaubs-Maximizer** analysiert das Kalenderjahr, gesetzliche Feiertage und Brückentage, um dir die besten Zeiträume für Urlaub vorzuschlagen.\n\nDu findest die Auswertung direkt in der Sidebar unter **'Urlaubs-Maximizer'**. So machst du aus wenigen Urlaubstagen maximale Freizeit! 🏖️✈️";
+        }
+        else if (normalized.Contains("hilfe") || normalized == "hilfe" || normalized.Contains("hallo") || normalized.Contains("hi") || normalized.Contains("helo") || normalized.Contains("huhu") || normalized == "hilfe")
+        {
+            responseText = $"Ich kann dir Auskunft über deine Zeiten geben. Frage mich zum Beispiel:\n\n" +
+                           $"• *'Wie viele Überstunden habe ich?'*\n" +
+                           $"• *'Wie sieht meine Woche aus?'*\n" +
+                           $"• *'Was macht der Urlaubs-Maximizer?'*\n\n" +
+                           $"Oder tippe einfach deine Frage ein! 💡";
+        }
+        else
+        {
+            responseText = $"Entschuldige, diese Frage kann ich leider noch nicht beantworten. 🤖\n\nFrage mich gerne nach deinem **Überstunden-Saldo**, deiner **Wochen-Arbeitszeit** oder dem **Urlaubs-Maximizer**!";
+        }
+
+        _messages.Add(new ChatMessage { Sender = "Bot", Content = responseText, Timestamp = DateTime.Now });
+        await ScrollToBottom();
+    }
+
+    private async Task ScrollToBottom()
+    {
+        try
+        {
+            await JS.InvokeVoidAsync("eval", "setTimeout(() => { const el = document.getElementById('timebot-body-el'); if(el) el.scrollTop = el.scrollHeight; }, 50);");
+        }
+        catch
+        {
+            // Prerender-Pass ignorieren
+        }
+    }
+
+    private string FormatMessageText(string text)
+    {
+        // Simple helper to replace markdown bold (**text**) with HTML bold (<strong>text</strong>)
+        // and newlines (\n) with <br />
+        if (string.IsNullOrEmpty(text)) return "";
+        
+        var formatted = text;
+        
+        // Escape HTML first to prevent XSS
+        formatted = System.Net.WebUtility.HtmlEncode(formatted);
+
+        // Replace back escaped ** formatting
+        // Simple regex replace for **text**
+        var regex = new System.Text.RegularExpressions.Regex(@"\*\*(.*?)\*\*");
+        formatted = regex.Replace(formatted, "<strong>$1</strong>");
+        
+        // Replace newlines
+        formatted = formatted.Replace("\n", "<br />");
+        
+        return formatted;
+    }
+
+    private static DateOnly GetMonday(DateOnly date)
+    {
+        int diff = ((int)date.DayOfWeek - (int)DayOfWeek.Monday + 7) % 7;
+        return date.AddDays(-diff);
+    }
+
+    private static string FormatTs(TimeSpan ts, bool sign = false)
+    {
+        if (ts == TimeSpan.Zero && sign) return "±0:00";
+        var prefix = sign ? (ts >= TimeSpan.Zero ? "+" : "−") : (ts < TimeSpan.Zero ? "−" : "");
+        var abs = ts.Duration();
+        return $"{prefix}{(int)abs.TotalHours}:{abs.Minutes:D2}";
+    }
+
+    private sealed class ChatMessage
+    {
+        public string Sender { get; set; } = "Bot";
+        public string Content { get; set; } = "";
+        public DateTime Timestamp { get; set; } = DateTime.Now;
+        public bool IsTyping { get; set; } = false;
+    }
+}

timetracker.Client/Components/Layout/ChatbotWidget.razor.css

@@ -0,0 +1,334 @@
+/* Floating Launcher Button */
+.timebot-launcher {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #ffffff 0%, #f1f3f9 100%);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    border: 2px solid #0EA5E9;
+}
+
+.timebot-launcher:hover {
+    transform: scale(1.1) translateY(-4px);
+    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.4);
+    border-color: #0284C7;
+}
+
+.timebot-launcher img {
+    width: 48px;
+    height: 48px;
+    object-fit: contain;
+}
+
+.timebot-launcher.open {
+    transform: scale(0.9) rotate(90deg);
+    opacity: 0.8;
+}
+
+.timebot-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    background-color: #ff3b30;
+    color: white;
+    font-size: 11px;
+    font-weight: bold;
+    padding: 3px 7px;
+    border-radius: 10px;
+    border: 2px solid white;
+}
+
+/* Chat Window */
+.timebot-chat-window {
+    position: fixed;
+    bottom: 100px;
+    right: 24px;
+    width: 360px;
+    height: 520px;
+    max-height: 80vh;
+    border-radius: 20px;
+    background: rgba(32, 33, 36, 0.95);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: 9999;
+    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    color: #f1f3f9;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* Header */
+.timebot-header {
+    background: #0F172A;
+    padding: 14px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.timebot-header-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.timebot-header-avatar {
+    width: 36px;
+    height: 36px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 50%;
+    padding: 2px;
+    object-fit: contain;
+}
+
+.timebot-header-text {
+    display: flex;
+    flex-direction: column;
+}
+
+.timebot-header-title {
+    font-weight: 700;
+    font-size: 15px;
+    color: white;
+    letter-spacing: 0.3px;
+}
+
+.timebot-header-status {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.75);
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.status-dot {
+    width: 6px;
+    height: 6px;
+    background-color: #4cd964;
+    border-radius: 50%;
+    display: inline-block;
+    box-shadow: 0 0 8px #4cd964;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.7); }
+    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(76, 217, 100, 0); }
+    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 217, 100, 0); }
+}
+
+.timebot-close-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    opacity: 0.8;
+    transition: opacity 0.2s;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.timebot-close-btn:hover {
+    opacity: 1;
+}
+
+/* Chat Body */
+.timebot-body {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    background: rgba(24, 25, 28, 0.4);
+}
+
+.timebot-msg-row {
+    display: flex;
+    gap: 8px;
+    max-width: 85%;
+}
+
+.timebot-msg-row.bot-row {
+    align-self: flex-start;
+}
+
+.timebot-msg-row.user-row {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+}
+
+.timebot-msg-avatar {
+    width: 28px;
+    height: 28px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 50%;
+    padding: 2px;
+    align-self: flex-end;
+    object-fit: contain;
+}
+
+.timebot-msg-bubble {
+    padding: 10px 14px;
+    border-radius: 16px;
+    font-size: 13.5px;
+    line-height: 1.45;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.bot-bubble {
+    background: rgba(255, 255, 255, 0.08);
+    color: #e3e3e7;
+    border-bottom-left-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.user-bubble {
+    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
+    color: white;
+    border-bottom-right-radius: 4px;
+    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
+}
+
+/* Typing Indicator */
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 0;
+}
+
+.typing-indicator span {
+    width: 6px;
+    height: 6px;
+    background-color: #a8b2c1;
+    border-radius: 50%;
+    display: inline-block;
+    animation: bounce 1.4s infinite both;
+}
+
+.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+
+@keyframes bounce {
+    0%, 80%, 100% { transform: scale(0); }
+    40% { transform: scale(1.0); }
+}
+
+/* Suggestions */
+.timebot-suggestions {
+    display: flex;
+    gap: 6px;
+    padding: 8px 12px;
+    background: rgba(18, 18, 20, 0.6);
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    overflow-x: auto;
+    scrollbar-width: none; /* Scrollbar hidden for visual aesthetics */
+}
+
+.timebot-suggestions::-webkit-scrollbar {
+    display: none;
+}
+
+.timebot-suggestions button {
+    flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #cbd5e1;
+    padding: 6px 12px;
+    border-radius: 14px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 500;
+}
+
+.timebot-suggestions button:hover {
+    background: rgba(14, 165, 233, 0.15);
+    border-color: #0EA5E9;
+    color: white;
+    transform: translateY(-1px);
+}
+
+/* Footer */
+.timebot-footer {
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(32, 33, 36, 0.98);
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.timebot-input {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: white;
+    padding: 10px 14px;
+    border-radius: 12px;
+    font-size: 13px;
+    outline: none;
+    transition: all 0.2s;
+}
+
+.timebot-input:focus {
+    border-color: #0EA5E9;
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
+}
+
+.timebot-send-btn {
+    background: white;
+    border: none;
+    border-radius: 10px;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.timebot-send-btn:hover {
+    background: #e0f2fe;
+    transform: scale(1.05);
+}
+
+.timebot-send-btn:disabled {
+    background: rgba(255, 255, 255, 0.04);
+    cursor: not-allowed;
+    transform: none;
+}
+
+.timebot-send-btn:disabled ::deep .mud-icon-root {
+    color: rgba(255, 255, 255, 0.2) !important;
+}

timetracker.Client/Components/Layout/MainLayout.razor

@@ -2,43 +2,85 @@
 @inject AuthenticationStateProvider AuthStateProvider
 @inject NavigationManager Nav
 @inject IUserNotificationService UserNotificationService
+@inject IJSRuntime JSRuntime
 @implements IDisposable
 @using System.Security.Claims
 
-<MudThemeProvider Theme="_theme" />
+<MudThemeProvider Theme="_theme" @bind-IsDarkMode="_isDarkMode" />
 <MudPopoverProvider />
 <MudDialogProvider />
 <MudSnackbarProvider />
 
 <MudLayout>
-    <MudAppBar Elevation="2" Style="background: linear-gradient(90deg, #3F51B5 0%, #1A237E 100%);">
-        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="ToggleDrawer" />
-        <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="ml-2">
-            <MudIcon Icon="@Icons.Material.Filled.AccessTime" Style="color:white; font-size:1.6rem" />
-            <MudText Typo="Typo.h6" Style="color:white; font-weight:700; letter-spacing:0.5px">Timetracker</MudText>
-        </MudStack>
+    <MudAppBar Elevation="0" Style="background: #0F172A; border-bottom: 1px solid rgba(255, 255, 255, 0.08);">
+        <AuthorizeView>
+            <Authorized>
+                <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="ToggleDrawer" Class="d-flex d-md-none mr-2" />
+            </Authorized>
+        </AuthorizeView>
         <MudSpacer />
+        <MudIconButton Icon="@(_isDarkMode ? Icons.Material.Filled.LightMode : Icons.Material.Filled.DarkMode)"
+                       Color="Color.Inherit"
+                       OnClick="ToggleDarkMode"
+                       Class="mr-2" />
     </MudAppBar>
 
-    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
-        <NavMenu />
-    </MudDrawer>
+    <AuthorizeView>
+        <Authorized>
+            <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Never" Elevation="0" Variant="DrawerVariant.Mini" OpenMiniOnHover="false" Class="modern-drawer">
+                <NavMenu OnToggleDrawer="ToggleDrawer" />
+            </MudDrawer>
+        </Authorized>
+    </AuthorizeView>
 
     <MudMainContent>
         <MudContainer MaxWidth="MaxWidth.Large" Class="mt-4 pb-8">
             @Body
         </MudContainer>
     </MudMainContent>
+
+    <AuthorizeView>
+        <Authorized>
+            <ChatbotWidget />
+        </Authorized>
+    </AuthorizeView>
 </MudLayout>
 
 @code {
     private bool _drawerOpen = true;
+    private bool _isDarkMode;
 
     protected override void OnInitialized()
     {
         UserNotificationService.OnUserDeleted += HandleUserDeleted;
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            try
+            {
+                var saved = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "darkMode");
+                if (!string.IsNullOrEmpty(saved))
+                {
+                    _isDarkMode = bool.Parse(saved);
+                    StateHasChanged();
+                }
+            }
+            catch
+            {
+                // Ignored during prerendering/SSR
+            }
+        }
+    }
+
+    private async Task ToggleDarkMode()
+    {
+        _isDarkMode = !_isDarkMode;
+        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "darkMode", _isDarkMode.ToString().ToLower());
+    }
+
     private async Task HandleUserDeleted(int deletedUserId)
     {
         var state = await AuthStateProvider.GetAuthenticationStateAsync();
@@ -58,17 +100,38 @@
     {
         PaletteLight = new PaletteLight
         {
-            Primary = "#3F51B5",
-            PrimaryDarken = "#1A237E",
-            PrimaryLighten = "#7986CB",
-            Secondary = "#009688",
-            SecondaryDarken = "#00695C",
-            AppbarBackground = "#3F51B5",
-            Background = "#F4F6F9",
-            DrawerBackground = "#FFFFFF",
+            Primary = "#1E293B",
+            PrimaryDarken = "#0F172A",
+            PrimaryLighten = "#475569",
+            Secondary = "#0EA5E9",
+            SecondaryDarken = "#0284C7",
+            AppbarBackground = "#0F172A",
+            Background = "#F8FAFC",
+            DrawerBackground = "#0F172A",
+            DrawerText = "#94A3B8",
+            DrawerIcon = "#94A3B8",
             Surface = "#FFFFFF",
-            TextPrimary = "#212121",
-            TextSecondary = "#757575",
+            TextPrimary = "#0F172A",
+            TextSecondary = "#475569",
+        },
+        PaletteDark = new PaletteDark
+        {
+            Primary = "#0EA5E9",
+            PrimaryDarken = "#0284C7",
+            PrimaryLighten = "#38BDF8",
+            Secondary = "#0EA5E9",
+            SecondaryDarken = "#0284C7",
+            AppbarBackground = "#0F172A",
+            AppbarText = "#F8FAFC",
+            Background = "#0B0F19",
+            DrawerBackground = "#0F172A",
+            DrawerText = "#94A3B8",
+            DrawerIcon = "#94A3B8",
+            Surface = "#1E293B",
+            TextPrimary = "#F8FAFC",
+            TextSecondary = "#94A3B8",
+            ActionDefault = "#94A3B8",
+            Divider = "rgba(255, 255, 255, 0.08)",
         }
     };
 

timetracker.Client/Components/Layout/MainLayout.razor.css

@@ -1,81 +1,39 @@
-.page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
+/* Custom scrollbar for the modern drawer */
+::deep .modern-drawer .mud-drawer-content::-webkit-scrollbar {
+    width: 6px;
+}
+::deep .modern-drawer .mud-drawer-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+::deep .modern-drawer .mud-drawer-content::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+}
+::deep .modern-drawer .mud-drawer-content::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.2);
 }
 
-main {
-    flex: 1;
+::deep .modern-drawer {
+    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1) !important;
+    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
 
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+/* Glassmorphism for the appbar */
+::deep .mud-appbar {
+    background: rgba(15, 23, 42, 0.85) !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
 }
 
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
-    }
+/* Smooth transition in main layout content */
+::deep .mud-main-content {
+    transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    background-color: #F8FAFC;
 }
 
+/* Blazor Error UI */
 #blazor-error-ui {
     color-scheme: light only;
     background: lightyellow;
@@ -90,9 +48,9 @@ main {
     z-index: 1000;
 }
 
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
+#blazor-error-ui .dismiss {
+    cursor: pointer;
+    position: absolute;
+    right: 0.75rem;
+    top: 0.5rem;
+}

timetracker.Client/Components/Layout/NavMenu.razor

@@ -1,36 +1,97 @@
-<div style="display:flex; flex-direction:column; height:100%;">
-    <MudNavMenu Style="flex:1">
-        <MudDivider Class="mb-2" />
-        <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.CalendarMonth">Wochenübersicht</MudNavLink>
-        <MudNavLink Href="month" Icon="@Icons.Material.Filled.CalendarViewMonth">Monatsübersicht</MudNavLink>
-        <MudNavLink Href="feiertage" Icon="@Icons.Material.Filled.Celebration">Feiertage</MudNavLink>
-        <MudNavLink Href="urlaub-maximizer" Icon="@Icons.Material.Filled.AutoAwesome">Urlaubs-Maximizer</MudNavLink>
-        <MudNavLink Href="settings" Icon="@Icons.Material.Filled.Settings">Einstellungen</MudNavLink>
-        <MudDivider Class="mt-2 mb-2" />
-        <AuthorizeView Policy="AdminOnly">
-            <MudNavLink Href="admin/users" Icon="@Icons.Material.Filled.AdminPanelSettings" IconColor="Color.Error">
-                Benutzerverwaltung
-            </MudNavLink>
-        </AuthorizeView>
-    </MudNavMenu>
-    <AuthorizeView>
-        <Authorized>
-            <MudDivider />
-            <MudStack Row="true" AlignItems="AlignItems.Center" Class="px-4 py-2" Spacing="1">
-                <MudIcon Icon="@Icons.Material.Filled.AccountCircle" Color="Color.Primary" Size="Size.Small" />
-                <MudText Typo="Typo.body2" Style="font-weight:600">@context.User.Identity?.Name</MudText>
-            </MudStack>
-            <MudNavMenu>
-                <MudNavLink Href="/auth/logout" Icon="@Icons.Material.Filled.Logout">Abmelden</MudNavLink>
-            </MudNavMenu>
-        </Authorized>
-    </AuthorizeView>
-    <MudTooltip Text="Changelog anzeigen" Placement="Placement.Top">
-        <MudNavMenu>
-            <MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases"
-                        Style="color: var(--mud-palette-text-disabled); font-size:0.75rem;">
-                Version 1.2
-            </MudNavLink>
+<div class="nav-container onboarding-nav-menu">
+    @* --- Brand / Logo Section --- *@
+    <div class="nav-header">
+        <div class="logo-wrapper">
+            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" OnClick="OnToggleDrawer" Class="drawer-toggle-btn mr-1" />
+            <MudIcon Icon="@Icons.Material.Filled.AccessTime" Class="logo-icon" />
+            <span class="brand-text">Timetracker</span>
+        </div>
+    </div>
+
+    @* --- Navigation Links --- *@
+    <div class="nav-content">
+        <MudNavMenu Class="custom-nav-menu">
+            <MudTooltip Text="Wochenübersicht" Placement="Placement.Right">
+                <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.CalendarMonth" Class="custom-nav-link">Wochenübersicht</MudNavLink>
+            </MudTooltip>
+            <MudTooltip Text="Monatsübersicht" Placement="Placement.Right">
+                <MudNavLink Href="month" Icon="@Icons.Material.Filled.CalendarViewMonth" Class="custom-nav-link">Monatsübersicht</MudNavLink>
+            </MudTooltip>
+            <MudTooltip Text="Statistiken" Placement="Placement.Right">
+                <MudNavLink Href="stats" Icon="@Icons.Material.Filled.BarChart" Class="custom-nav-link">Statistiken</MudNavLink>
+            </MudTooltip>
+            <MudTooltip Text="Feiertage" Placement="Placement.Right">
+                <MudNavLink Href="feiertage" Icon="@Icons.Material.Filled.Celebration" Class="custom-nav-link">Feiertage</MudNavLink>
+            </MudTooltip>
+            <MudTooltip Text="Urlaubs-Maximizer" Placement="Placement.Right">
+                <MudNavLink Href="urlaub-maximizer" Icon="@Icons.Material.Filled.AutoAwesome" Class="custom-nav-link">Urlaubs-Maximizer</MudNavLink>
+            </MudTooltip>
+            <MudTooltip Text="Einstellungen" Placement="Placement.Right">
+                <MudNavLink Href="settings" Icon="@Icons.Material.Filled.Settings" Class="custom-nav-link">Einstellungen</MudNavLink>
+            </MudTooltip>
+            
+            <AuthorizeView Policy="AdminOnly">
+                <Authorized>
+                    <div class="admin-divider-container">
+                        <span class="admin-divider-text">Admin</span>
+                        <hr class="admin-divider-line" />
+                    </div>
+                    <MudTooltip Text="Benutzerverwaltung" Placement="Placement.Right">
+                        <MudNavLink Href="admin/users" Icon="@Icons.Material.Filled.AdminPanelSettings" Class="custom-nav-link admin-link">
+                            Benutzerverwaltung
+                        </MudNavLink>
+                    </MudTooltip>
+                </Authorized>
+            </AuthorizeView>
         </MudNavMenu>
-    </MudTooltip>
-</div>
+    </div>
+
+    @* --- Footer (User Profile & Action Info) --- *@
+    <div class="nav-footer">
+        <AuthorizeView>
+            <Authorized>
+                <div class="user-profile-card">
+                    <div class="avatar-container">
+                        <MudAvatar Class="user-avatar">
+                            @GetInitials(context.User.Identity?.Name)
+                        </MudAvatar>
+                        <span class="status-dot"></span>
+                    </div>
+                    <div class="user-info">
+                        <span class="user-name">@context.User.Identity?.Name</span>
+                        <span class="user-status">Online</span>
+                    </div>
+                </div>
+            </Authorized>
+        </AuthorizeView>
+
+        <MudNavMenu Class="footer-nav-menu">
+            <AuthorizeView>
+                <Authorized>
+                    <MudTooltip Text="Abmelden" Placement="Placement.Right">
+                        <MudNavLink Href="/auth/logout" Icon="@Icons.Material.Filled.Logout" Class="custom-nav-link logout-link">Abmelden</MudNavLink>
+                    </MudTooltip>
+                </Authorized>
+            </AuthorizeView>
+            <MudTooltip Text="Changelog anzeigen" Placement="Placement.Right">
+                <MudNavLink Href="/changelog" Icon="@Icons.Material.Filled.NewReleases" Class="custom-nav-link version-link">
+                    <span class="version-text">Version 1.4</span>
+                </MudNavLink>
+            </MudTooltip>
+        </MudNavMenu>
+    </div>
+</div>
+
+@code {
+    [Parameter] public EventCallback OnToggleDrawer { get; set; }
+
+    private string GetInitials(string? name)
+    {
+        if (string.IsNullOrWhiteSpace(name))
+            return "U";
+        var parts = name.Split(' ', StringSplitOptions.RemoveEmptyEntries);
+        if (parts.Length == 1)
+            return parts[0][..Math.Min(2, parts[0].Length)].ToUpper();
+        return $"{parts[0][0]}{parts[1][0]}".ToUpper();
+    }
+}

timetracker.Client/Components/Layout/NavMenu.razor.css

@@ -1,105 +1,314 @@
-.navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+/* Base container covering full height */
+.nav-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    color: #94A3B8; /* Slate 400 */
 }
 
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
+/* Ensure tooltips wrapper spans full width of menu */
+::deep .mud-tooltip-root {
+    display: block !important;
+    width: 100% !important;
 }
 
-.top-row {
-    min-height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
+/* Header with logo and title */
+.nav-header {
+    height: 64px;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    margin-bottom: 8px;
+    box-sizing: border-box;
 }
 
-.navbar-brand {
+.logo-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    transition: all 0.25s ease;
+}
+
+::deep .drawer-toggle-btn {
+    color: #94A3B8 !important;
+    padding: 8px !important;
+    margin-left: -8px !important;
+    transition: all 0.2s ease !important;
+}
+
+::deep .drawer-toggle-btn:hover {
+    color: #FFFFFF !important;
+    background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+::deep .logo-icon {
+    color: #0EA5E9 !important; /* Sky 500 */
+    font-size: 1.6rem !important;
+    transition: opacity 0.2s ease;
+}
+
+.brand-text {
     font-size: 1.1rem;
+    font-weight: 800;
+    color: #FFFFFF;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    opacity: 1;
+    transition: opacity 0.2s ease;
 }
 
-.bi {
-    display: inline-block;
+/* Navigation scrollable content */
+.nav-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+/* Divider inside navigation list */
+.admin-divider-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 20px 8px 20px;
+    box-sizing: border-box;
+    transition: padding 0.25s ease;
+}
+
+.admin-divider-text {
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: #475569; /* Slate 600 */
+    white-space: nowrap;
+}
+
+.admin-divider-line {
+    flex: 1;
+    border: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    margin: 0;
+}
+
+/* Standard NavLink customization */
+::deep .custom-nav-link {
+    margin: 4px 12px !important;
+    border-radius: 12px !important;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    overflow: hidden;
+}
+
+/* Normal (inactive) text and icon colors */
+::deep .custom-nav-link,
+::deep .custom-nav-link .mud-nav-link-text,
+::deep .custom-nav-link .mud-nav-link-icon-default {
+    color: #94A3B8 !important; /* Slate 400 */
+}
+
+/* NavLink hover */
+::deep .custom-nav-link:hover {
+    background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+::deep .custom-nav-link:hover,
+::deep .custom-nav-link:hover .mud-nav-link-text,
+::deep .custom-nav-link:hover .mud-nav-link-icon-default {
+    color: #F8FAFC !important; /* Slate 50 */
+}
+
+/* NavLink active state (Fixes active color contrast issue) */
+::deep .custom-nav-link.active,
+::deep .custom-nav-link .active {
+    background: linear-gradient(90deg, rgba(14, 165, 233, 0.15) 0%, rgba(14, 165, 233, 0.04) 100%) !important;
+    font-weight: 600 !important;
+    box-shadow: inset 3px 0 0 #0EA5E9 !important;
+}
+
+::deep .custom-nav-link.active,
+::deep .custom-nav-link .active,
+::deep .custom-nav-link.active .mud-nav-link-text,
+::deep .custom-nav-link .active .mud-nav-link-text,
+::deep .custom-nav-link.active .mud-nav-link-icon-default,
+::deep .custom-nav-link .active .mud-nav-link-icon-default {
+    color: #0EA5E9 !important; /* Sky 500 */
+}
+
+/* Admin link color overrides & active state */
+::deep .admin-link .mud-nav-link-icon-default {
+    color: rgba(239, 68, 68, 0.7) !important; /* Red 500 */
+}
+
+::deep .admin-link.active,
+::deep .admin-link .active {
+    background: linear-gradient(90deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.04) 100%) !important;
+    box-shadow: inset 3px 0 0 #EF4444 !important;
+}
+
+::deep .admin-link.active,
+::deep .admin-link .active,
+::deep .admin-link.active .mud-nav-link-text,
+::deep .admin-link .active .mud-nav-link-text,
+::deep .admin-link.active .mud-nav-link-icon-default,
+::deep .admin-link .active .mud-nav-link-icon-default {
+    color: #EF4444 !important;
+}
+
+/* Version link active state */
+::deep .version-link.active,
+::deep .version-link .active {
+    opacity: 1 !important;
+}
+
+::deep .version-link.active .version-text,
+::deep .version-link .active .version-text {
+    color: #0EA5E9 !important;
+}
+
+
+/* Footer Section */
+.nav-footer {
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 12px 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background: rgba(15, 23, 42, 0.2);
+}
+
+/* User profile card */
+.user-profile-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 20px;
+    margin-bottom: 8px;
+    box-sizing: border-box;
+    transition: all 0.25s ease;
+}
+
+.avatar-container {
     position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
+    display: inline-flex;
 }
 
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
+::deep .user-avatar {
+    width: 36px !important;
+    height: 36px !important;
+    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%) !important;
+    color: #FFFFFF !important;
+    font-weight: 700 !important;
+    font-size: 0.875rem !important;
+    border: 2px solid rgba(255, 255, 255, 0.1) !important;
 }
 
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
+.status-dot {
+    position: absolute;
+    bottom: -1px;
+    right: -1px;
+    width: 10px;
+    height: 10px;
+    background-color: #10B981; /* Emerald 500 */
+    border: 2px solid #0F172A;
+    border-radius: 50%;
 }
 
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+.user-info {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: opacity 0.15s ease;
 }
 
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
+.user-name {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #FFFFFF;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep .nav-link {
-        color: #d7d7d7;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-        width: 100%;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
+.user-status {
+    font-size: 0.7rem;
+    color: #10B981;
 }
 
-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
+/* Special links in footer */
+::deep .logout-link .mud-nav-link-icon-default {
+    color: rgba(148, 163, 184, 0.6) !important;
+}
+::deep .logout-link:hover .mud-nav-link-icon-default {
+    color: #EF4444 !important;
 }
 
-.nav-scrollable {
-    display: none;
+::deep .version-link {
+    opacity: 0.7;
+}
+::deep .version-link .mud-nav-link-text {
+    font-size: 0.75rem !important;
 }
 
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
+/* --- COLLAPSED DRAWER (MINI STATE) STYLES --- */
+
+/* Parent matches the mini drawer element (Note the correct Blazor CSS isolation placement) */
+.mud-drawer--closed ::deep .logo-icon,
+.mud-drawer--closed ::deep .brand-text {
+    display: none !important;
+    opacity: 0;
 }
 
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
+.mud-drawer--closed ::deep .logo-wrapper {
+    justify-content: center !important;
+}
+
+.mud-drawer--closed ::deep .drawer-toggle-btn {
+    margin-left: 0 !important;
+}
+
+.mud-drawer--closed ::deep .admin-divider-container {
+    padding: 16px 0 8px 0 !important;
+    justify-content: center !important;
+}
+
+.mud-drawer--closed ::deep .admin-divider-text {
+    display: none !important;
+}
+
+.mud-drawer--closed ::deep .admin-divider-line {
+    width: 24px !important;
+    flex: none !important;
+}
+
+.mud-drawer--closed ::deep .user-profile-card {
+    justify-content: center !important;
+    padding: 8px 0 !important;
+}
+
+.mud-drawer--closed ::deep .user-info {
+    display: none !important;
+}
+
+.mud-drawer--closed ::deep .version-text {
+    display: none !important;
+}
+
+/* Ensure link text is hidden in mini mode to prevent clunky clipping */
+.mud-drawer--closed ::deep .custom-nav-link .mud-nav-link-text {
+    display: none !important;
+}
+
+/* Center link icons when mini and adjust spacing */
+.mud-drawer--closed ::deep .custom-nav-link {
+    margin: 4px 6px !important;
+    padding: 8px 0 !important;
+    justify-content: center !important;
+    min-height: 40px !important;
+    display: flex !important;
+    align-items: center !important;
+}
+
+.mud-drawer--closed ::deep .custom-nav-link .mud-nav-link-icon-default {
+    margin-right: 0 !important;
 }

timetracker.Client/Components/Pages/AdminUsers.razor

@@ -22,7 +22,7 @@ else
 
         @* ── Header ── *@
         <MudPaper Elevation="4" Class="pa-5 rounded-xl"
-                  Style="background: linear-gradient(135deg, #B71C1C 0%, #7F0000 100%); color:white;">
+                  Style="background: #991B1B; color:white;">
             <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
                 <MudIcon Icon="@Icons.Material.Filled.AdminPanelSettings" Style="color:white; font-size:2rem" />
                 <MudStack Spacing="0">

timetracker.Client/Components/Pages/Agb.razor

@@ -0,0 +1,139 @@
+@page "/agb"
+@rendermode InteractiveWebAssembly
+@attribute [AllowAnonymous]
+
+<PageTitle>AGB – Timetracker</PageTitle>
+
+<MudContainer MaxWidth="MaxWidth.Medium" Class="mt-8 pb-8">
+    <MudStack Spacing="4">
+        
+        @* ── Header ── *@
+        <MudPaper Elevation="4" Class="pa-5 rounded-xl" Style="background: #1E293B; color: white;">
+            <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
+                <MudIcon Icon="@Icons.Material.Filled.Gavel" Style="color: white; font-size: 2.2rem;" />
+                <MudStack Spacing="0">
+                    <MudText Typo="Typo.h5" Style="color: white; font-weight: 700;">Allgemeine Geschäftsbedingungen (AGB)</MudText>
+                    <MudText Typo="Typo.caption" Style="color: rgba(255,255,255,0.72);">
+                        Rechtlich absolut unverbindliches Kauderwelsch und Flachwitze
+                    </MudText>
+                </MudStack>
+            </MudStack>
+        </MudPaper>
+
+        @* ── Paragraphs with Flachwitze ── *@
+        <MudCard Elevation="2" Class="rounded-xl">
+            <MudCardContent>
+                <MudText Typo="Typo.h6" Style="font-weight: 700; color: var(--mud-palette-primary);" Class="mb-2">
+                    § 1 Geltungsbereich & Transparenz
+                </MudText>
+                <MudText Typo="Typo.body2" Class="mb-3">
+                    Diese Bedingungen gelten für die gesamte Nutzung dieses Zeiterfassungs-Tools. Transparenz ist uns extrem wichtig.
+                </MudText>
+                <MudAlert Severity="Severity.Info" Dense="true" Class="rounded-lg">
+                    <b>Warum können Geister eigentlich so schlecht lügen?</b><br />
+                    Weil sie einfach extrem leicht zu durchschauen sind!
+                </MudAlert>
+            </MudCardContent>
+        </MudCard>
+
+        <MudCard Elevation="2" Class="rounded-xl">
+            <MudCardContent>
+                <MudText Typo="Typo.h6" Style="font-weight: 700; color: var(--mud-palette-primary);" Class="mb-2">
+                    § 2 Pflichten des Nutzers & Gärtnerklauseln
+                </MudText>
+                <MudText Typo="Typo.body2" Class="mb-3">
+                    Jeder Nutzer verpflichtet sich, seine Arbeitszeiten wahrheitsgemäß und pünktlich einzutragen. Bei Zuwiderhandlung behalten wir uns vor, den Garten des Nutzers aufzuräumen.
+                </MudText>
+                <MudAlert Severity="Severity.Normal" Dense="true" Class="rounded-lg" Style="border-left: 4px solid #EF6C00; background: rgba(239, 108, 0, 0.05);">
+                    <b>Was sagt ein Gärtner, wenn er seinen Arbeitsplatz vorzeitig verlässt?</b><br />
+                    "Ich mach mich dann mal vom Acker!"
+                </MudAlert>
+            </MudCardContent>
+        </MudCard>
+
+        <MudCard Elevation="2" Class="rounded-xl">
+            <MudCardContent>
+                <MudText Typo="Typo.h6" Style="font-weight: 700; color: var(--mud-palette-primary);" Class="mb-2">
+                    § 3 Haftungsausschluss & Straßenverkehr
+                </MudText>
+                <MudText Typo="Typo.body2" Class="mb-3">
+                    Wir übernehmen keinerlei Haftung für vergessene Pausenzeiten, verpasste Feierabende oder schlechtes Wetter.
+                </MudText>
+                <MudAlert Severity="Severity.Warning" Dense="true" Class="rounded-lg">
+                    <b>Was ist rot, rund und steht am Straßenrand?</b><br />
+                    Eine Spargelampel!<br /><br />
+                    <b>Und warum dürfen Bienen eigentlich nicht in die Kirche?</b><br />
+                    Weil sie in der Sekte sind!
+                </MudAlert>
+            </MudCardContent>
+        </MudCard>
+
+        <MudCard Elevation="2" Class="rounded-xl">
+            <MudCardContent>
+                <MudText Typo="Typo.h6" Style="font-weight: 700; color: var(--mud-palette-primary);" Class="mb-2">
+                    § 4 Datensicherheit & Physikalische Grundgesetze
+                </MudText>
+                <MudText Typo="Typo.body2" Class="mb-3">
+                    Ihre Daten werden nach modernsten Verschlüsselungsstandards (nicht) an Dritte weitergegeben. Unsere Magnetbänder sind streng gesichert.
+                </MudText>
+                <MudAlert Severity="Severity.Normal" Dense="true" Class="rounded-lg" Style="border-left: 4px solid #00897B; background: rgba(0, 137, 123, 0.05);">
+                    <b>Treffen sich zwei Magnete im Rechenzentrum. Sagt der eine ganz verzweifelt:</b><br />
+                    "Du, sag mal... Was soll ich heute bloß anziehen?"
+                </MudAlert>
+            </MudCardContent>
+        </MudCard>
+
+        <MudCard Elevation="2" Class="rounded-xl">
+            <MudCardContent>
+                <MudText Typo="Typo.h6" Style="font-weight: 700; color: var(--mud-palette-primary);" Class="mb-2">
+                    § 5 Rückgaberecht & Büroalltag
+                </MudText>
+                <MudText Typo="Typo.body2" Class="mb-3">
+                    Erfasste Arbeitszeiten können nicht zurückgenommen, umgetauscht oder bar ausgezahlt werden.
+                </MudText>
+                <MudAlert Severity="Severity.Normal" Dense="true" Class="rounded-lg" Style="border-left: 4px solid #5E35B1; background: rgba(94, 53, 177, 0.05);">
+                    <b>Was macht ein gelangweilter Clown im Büro?</b><br />
+                    Er macht Faxen!<br /><br />
+                    <b>Und warum steht ein einsamer Pilz mitten im tiefen Wald?</b><br />
+                    Weil die Tannen zapfen!
+                </MudAlert>
+            </MudCardContent>
+        </MudCard>
+
+        <MudCard Elevation="2" Class="rounded-xl">
+            <MudCardContent>
+                <MudText Typo="Typo.h6" Style="font-weight: 700; color: var(--mud-palette-primary);" Class="mb-2">
+                    § 6 Schlussbestimmungen & Salatgesetze
+                </MudText>
+                <MudText Typo="Typo.body2" Class="mb-3">
+                    Sollten einzelne Bestimmungen dieser AGB unwirksam sein, bleibt die Fröhlichkeit aller anderen Bestimmungen unberührt.
+                </MudText>
+                <MudAlert Severity="Severity.Success" Dense="true" Class="rounded-lg">
+                    <b>Wie nennt man ein plötzlich spurlos verschwundenes Stück Rindfleisch?</b><br />
+                    Gulasch!<br /><br />
+                    <b>Was ist grün, gesund und klopft nachts an die Haustür?</b><br />
+                    Ein Klopfsalat!<br /><br />
+                    <b>Und zu guter Letzt: Warum fliegen Vögel im Winter eigentlich nach Süden?</b><br />
+                    Weil es zu Fuß einfach viel zu weit wäre!
+                </MudAlert>
+            </MudCardContent>
+        </MudCard>
+
+        @* ── Back Button ── *@
+        <MudStack Row="true" Justify="Justify.Center" Class="mt-4">
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.ArrowBack" OnClick="GoBack" Style="border-radius: 20px;">
+                Zurück zur Anmeldung
+            </MudButton>
+        </MudStack>
+
+    </MudStack>
+</MudContainer>
+
+@code {
+    [Inject] private NavigationManager Nav { get; set; } = default!;
+
+    private void GoBack()
+    {
+        Nav.NavigateTo("/login");
+    }
+}

timetracker.Client/Components/Pages/Changelog.razor

@@ -1,6 +1,6 @@
 @page "/changelog"
 @rendermode InteractiveWebAssembly
-@attribute [Authorize]
+@attribute [AllowAnonymous]
 
 <PageTitle>Changelog – Timetracker</PageTitle>
 
@@ -8,7 +8,7 @@
 
     @* ── Header ── *@
     <MudPaper Elevation="4" Class="pa-5 rounded-xl"
-              Style="background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%); color:white;">
+              Style="background: #1E293B; color:white;">
         <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
             <MudIcon Icon="@Icons.Material.Filled.NewReleases" Style="color:white; font-size:2rem" />
             <MudStack Spacing="0">
@@ -68,13 +68,24 @@
 
     private readonly List<Release> _releases =
     [
-        new("1.2", "08.06.2026", true,
+        new("1.4", "08.06.2026", true,
+        [
+            new("Neu",     "Timebot implementiert"),
+            new("Neu",     "Onboarding Tour"),
+            new("Upgrade", "Security hardening"),
+            new("Upgrade", "Changed coloring"),
+        ]),
+        new("1.3", "08.06.2026", false,
+        [
+            new("Fix",     "Browser-Tab hat statischen Text angezeigt und sich nicht dynamisch an die jeweilige Seite angepasst"),
+
+        ]),
+        new("1.2", "08.06.2026", false,
         [
             new("Upgrade", "Architektur-Migration auf Hosted Blazor WebAssembly (.NET 10) mit sauberer Projektstruktur (Client, Server, Shared)"),
             new("Neu",     "Unterstützung für PostgreSQL-Datenbanken als produktive und skalierbare Alternative zu SQLite"),
             new("Neu",     "Dynamische DB-Provider-Weiche (SQLite vs. PostgreSQL) über Konfigurations- und Umgebungsvariablen"),
             new("Neu",     "Docker-Compose-Konfiguration inklusive PostgreSQL-Container für vereinfachten Deployment-Betrieb"),
-            new("Neu",     "Lokales Ausführungsskript (run-local.sh) für einfaches Testen auf dem Entwicklungsrechner"),
         ]),
         new("1.1", "08.06.2026", false,
         [

timetracker.Client/Components/Pages/Feiertage.razor

@@ -20,7 +20,7 @@ else
 
         @* ── Header ── *@
         <MudPaper Elevation="4" Class="pa-5 rounded-xl"
-                  Style="background: linear-gradient(135deg, #00897B 0%, #004D40 100%); color: white;">
+                  Style="background: #0F766E; color: white;">
             <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                 <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft"
                                Style="color:white" Size="Size.Large" OnClick="PrevYear" />
@@ -140,7 +140,7 @@ else
 
             @* ── Zusammenfassung ── *@
             <MudPaper Elevation="2" Class="pa-4 rounded-xl"
-                      Style="background: linear-gradient(90deg, rgba(0,137,123,0.08) 0%, transparent 100%); border-left: 4px solid #00897B;">
+                      Style="background: linear-gradient(90deg, rgba(15,118,110,0.08) 0%, transparent 100%); border-left: 4px solid #0F766E;">
                 <MudStack Row="true" Spacing="4" Wrap="Wrap.Wrap" AlignItems="AlignItems.Center">
                     <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
                         <MudIcon Icon="@Icons.Material.Filled.Celebration" Style="color:#00897B" />

timetracker.Client/Components/Pages/Home.razor

@@ -5,6 +5,7 @@
 @inject IHolidayService HolidayService
 @inject ISnackbar Snackbar
 @inject AuthenticationStateProvider AuthStateProvider
+@inject IJSRuntime JSRuntime
 
 <PageTitle>KW @_kw – Wochenübersicht – Timetracker</PageTitle>
 
@@ -20,8 +21,8 @@ else
     <MudStack Spacing="3">
 
         @* ── Wochen-Header ── *@
-        <MudPaper Elevation="4" Class="pa-5 rounded-xl"
-                  Style="background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%); color: white;">
+        <MudPaper Elevation="4" Class="pa-5 rounded-xl onboarding-week-header"
+                  Style="background: #1E293B; color: white;">
             <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                 <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft"
                                Style="color:white" Size="Size.Large" OnClick="PrevWeek" />
@@ -93,9 +94,9 @@ else
             else
             {
                 @* ── Arbeitstag: vollständige Karte ── *@
-                <MudCard @key="@day.Date" Elevation="@(isToday ? 6 : 2)" Class="rounded-xl"
+                <MudCard @key="@day.Date" Elevation="@(isToday ? 6 : 2)" Class="rounded-xl onboarding-day-card"
                          Style="@($"border-left: 4px solid {borderColor};")">
-                    <MudCardHeader Style="@(isToday ? "background: linear-gradient(90deg, rgba(63,81,181,0.07) 0%, transparent 100%);" : "")">
+                    <MudCardHeader Style="@(isToday ? "background: linear-gradient(90deg, rgba(14,165,233,0.07) 0%, transparent 100%);" : "")">
                         <CardHeaderContent>
                             <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                                 <MudStack Spacing="0">
@@ -269,8 +270,8 @@ else
         }
 
         @* ── Wochensumme ── *@
-        <MudPaper Elevation="4" Class="pa-5 rounded-xl"
-                  Style="background: linear-gradient(135deg, #1A237E 0%, #283593 100%); color:white;">
+        <MudPaper Elevation="4" Class="pa-5 rounded-xl onboarding-week-summary"
+                  Style="background: #0F172A; color:white;">
             <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="mb-4">
                 <MudIcon Icon="@Icons.Material.Filled.Summarize" Style="color:rgba(255,255,255,0.8)" />
                 <MudText Typo="Typo.h6" Style="color:white; font-weight:600">Wochensumme</MudText>
@@ -306,7 +307,7 @@ else
         </MudPaper>
 
         @* ── Gleitzeitkonto ── *@
-        <MudPaper Elevation="3" Class="pa-5 rounded-xl"
+        <MudPaper Elevation="3" Class="pa-5 rounded-xl onboarding-overtime-balance"
                   Style="@($"border-left: 6px solid {(_totalOvertime >= TimeSpan.Zero ? "#4CAF50" : "#FF9800")};")">
             <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Wrap="Wrap.Wrap" Spacing="3">
                 <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
@@ -328,6 +329,11 @@ else
         </MudPaper>
 
     </MudStack>
+
+    @if (_showOnboarding)
+    {
+        <OnboardingTour OnFinished="HandleOnboardingFinished" />
+    }
 }
 
 @code {
@@ -347,6 +353,7 @@ else
     private TimeSpan _totalOvertime;
     private Dictionary<DateOnly, string> _holidays = [];
     private int _holidayYear = -1;
+    private bool _showOnboarding;
 
     private bool IsCurrentWeek => _monday == GetMonday(DateOnly.FromDateTime(DateTime.Today));
 
@@ -358,20 +365,56 @@ else
         _userId = int.Parse(claim.Value);
         _monday = GetMonday(DateOnly.FromDateTime(DateTime.Today));
         _settings = await TrackerService.GetSettingsAsync(_userId);
-        await LoadWeek();
-        _totalOvertime = await TrackerService.GetTotalOvertimeAsync(_userId, _settings);
+        
+        var loadWeekTask = LoadWeek();
+        var overtimeTask = TrackerService.GetTotalOvertimeAsync(_userId, _settings);
+        
+        await Task.WhenAll(loadWeekTask, overtimeTask);
+        _totalOvertime = await overtimeTask;
+
+        try
+        {
+            var showOnb = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "showOnboarding");
+            _showOnboarding = showOnb == "true";
+        }
+        catch
+        {
+            // Ignored during prerendering/SSR
+        }
+
         _loading = false;
     }
 
+    private async Task HandleOnboardingFinished()
+    {
+        _showOnboarding = false;
+        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "showOnboarding", "false");
+    }
+
     private async Task LoadWeek()
     {
+        Task<List<PublicHoliday>> holidaysTask;
         if (_monday.Year != _holidayYear)
         {
-            var list = await HolidayService.GetHolidaysAsync(_monday.Year, _settings.GermanState);
+            holidaysTask = HolidayService.GetHolidaysAsync(_monday.Year, _settings.GermanState);
+        }
+        else
+        {
+            holidaysTask = Task.FromResult(new List<PublicHoliday>());
+        }
+
+        var dbDaysTask = TrackerService.GetWeekAsync(_userId, _monday);
+
+        await Task.WhenAll(holidaysTask, dbDaysTask);
+
+        if (_monday.Year != _holidayYear)
+        {
+            var list = await holidaysTask;
             _holidays = list.ToDictionary(h => h.Date, h => h.Name);
             _holidayYear = _monday.Year;
         }
-        var dbDays = await TrackerService.GetWeekAsync(_userId, _monday);
+
+        var dbDays = await dbDaysTask;
         _days = Enumerable.Range(0, 7).Select(i =>
         {
             var date = _monday.AddDays(i);

timetracker.Client/Components/Pages/Login.razor

@@ -3,6 +3,7 @@
 @attribute [AllowAnonymous]
 @inject IAuthService AuthService
 @inject NavigationManager Nav
+@inject IJSRuntime JSRuntime
 
 <PageTitle>Anmelden – Timetracker</PageTitle>
 
@@ -12,8 +13,8 @@
         @* ── Logo / Header ── *@
         <MudStack AlignItems="AlignItems.Center" Spacing="1">
             <MudIcon Icon="@Icons.Material.Filled.AccessTime"
-                     Style="font-size:4rem; color:#1565C0" />
-            <MudText Typo="Typo.h4" Style="font-weight:700; color:#1565C0">Timetracker</MudText>
+                     Style="font-size:4rem; color:#0EA5E9" />
+            <MudText Typo="Typo.h4" Style="font-weight:700; color:#0EA5E9">Timetracker</MudText>
         </MudStack>
 
         <MudPaper Elevation="4" Class="pa-6 rounded-xl" Style="width:100%">
@@ -106,6 +107,12 @@
                                           @bind-Value="_registerModel.Password"
                                           Required="true"
                                           HelperText="Mindestens 6 Zeichen" />
+                            <input type="text" style="display: none;" tabindex="-1" autocomplete="off" @bind="_honeypot" />
+                            
+                            <MudCheckBox @bind-Value="_acceptAgb" Color="Color.Secondary" Class="mt-1">
+                                <MudText Typo="Typo.body2">Ich akzeptiere die <a href="/agb" target="_blank" style="color: var(--mud-palette-secondary); text-decoration: underline; font-weight: 600;">AGB</a>.</MudText>
+                            </MudCheckBox>
+
                             <MudButton ButtonType="ButtonType.Submit"
                                        Variant="Variant.Filled"
                                        Color="Color.Secondary"
@@ -113,7 +120,7 @@
                                        Size="Size.Large"
                                        StartIcon="@Icons.Material.Filled.PersonAdd"
                                        Class="mt-2"
-                                       Disabled="_loading">
+                                       Disabled="_loading || !_acceptAgb">
                                 @if (_loading)
                                 {
                                     <MudProgressCircular Size="Size.Small" Indeterminate="true" Class="mr-2" />
@@ -132,6 +139,8 @@
     private int _activeTab = 0;
     private string? _error;
     private bool _loading;
+    private string _honeypot = "";
+    private bool _acceptAgb;
 
     private readonly AuthModel _loginModel = new();
     private readonly AuthModel _registerModel = new();
@@ -187,13 +196,19 @@
 
     private async Task HandleRegister()
     {
+        if (!_acceptAgb)
+        {
+            _error = "Du musst die AGB akzeptieren.";
+            return;
+        }
         _loading = true;
         _error = null;
         try
         {
-            var (user, error) = await AuthService.RegisterAsync(_registerModel.Username, _registerModel.Password);
+            var (user, error) = await AuthService.RegisterAsync(_registerModel.Username, _registerModel.Password, _honeypot);
             if (user != null)
             {
+                await JSRuntime.InvokeVoidAsync("localStorage.setItem", "showOnboarding", "true");
                 Nav.NavigateTo("/", forceLoad: true);
             }
             else

timetracker.Client/Components/Pages/Month.razor

@@ -20,7 +20,7 @@ else
 
         @* ── Monats-Header ── *@
         <MudPaper Elevation="4" Class="pa-5 rounded-xl"
-                  Style="background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%); color: white;">
+                  Style="background: #1E293B; color: white;">
             <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                 <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft"
                                Style="color:white" Size="Size.Large" OnClick="PrevMonth" />
@@ -51,7 +51,7 @@ else
             <MudCardContent Class="pa-0">
                 <MudSimpleTable Dense="true" Striped="false" Hover="true" Style="overflow-x:auto">
                     <thead>
-                        <tr style="background: rgba(63,81,181,0.08);">
+                        <tr style="background: rgba(14,165,233,0.08);">
                             <th style="font-weight:700; padding:10px 16px">Tag</th>
                             <th style="font-weight:700; padding:10px 16px">Start</th>
                             <th style="font-weight:700; padding:10px 16px">Ende</th>
@@ -95,7 +95,7 @@ else
 
         @* ── Monatszusammenfassung ── *@
         <MudPaper Elevation="4" Class="pa-5 rounded-xl"
-                  Style="background: linear-gradient(135deg, rgba(63,81,181,0.08) 0%, rgba(26,35,126,0.04) 100%); border-left: 6px solid #3F51B5;">
+                  Style="background: linear-gradient(135deg, rgba(14,165,233,0.08) 0%, rgba(14,165,233,0.02) 100%); border-left: 6px solid #0EA5E9;">
             <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2" Class="mb-4">
                 <MudIcon Icon="@Icons.Material.Filled.CalendarViewMonth" Color="Color.Primary" />
                 <MudText Typo="Typo.h6" Style="font-weight:700">Monatszusammenfassung</MudText>
@@ -181,9 +181,15 @@ else
 
     private async Task LoadMonth()
     {
-        var workDays = await TrackerService.GetMonthAsync(_userId, _year, _month);
-        var holidays = await HolidayService.GetHolidaysAsync(_year, _settings.GermanState);
-        var vacations = await TrackerService.GetVacationDaysAsync(_userId, _year);
+        var workDaysTask = TrackerService.GetMonthAsync(_userId, _year, _month);
+        var holidaysTask = HolidayService.GetHolidaysAsync(_year, _settings.GermanState);
+        var vacationsTask = TrackerService.GetVacationDaysAsync(_userId, _year);
+
+        await Task.WhenAll(workDaysTask, holidaysTask, vacationsTask);
+
+        var workDays = await workDaysTask;
+        var holidays = await holidaysTask;
+        var vacations = await vacationsTask;
 
         var holidayMap = holidays.ToDictionary(h => h.Date, h => h.Name);
         var vacationSet = vacations.Select(v => v.Date).ToHashSet();

timetracker.Client/Components/Pages/OnboardingTour.razor

@@ -0,0 +1,179 @@
+@inject IJSRuntime JS
+
+@if (_active)
+{
+    @* Dark Backdrop Overlay *@
+    <div class="onboarding-backdrop"></div>
+
+    @* Onboarding Instruction Card *@
+    <div class="onboarding-card-container">
+        <MudCard Class="onboarding-info-card pa-5 rounded-xl shadow-2xl">
+            <MudCardContent Class="pa-0">
+                <MudStack Spacing="3">
+                    @* Header / Title *@
+                    <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
+                        <MudIcon Icon="@Icons.Material.Filled.AutoAwesome" Style="color: #0EA5E9;" />
+                        <MudText Typo="Typo.h6" Style="font-weight: 700; color: white;">
+                            @_steps[_currentStep].Title
+                        </MudText>
+                    </MudStack>
+
+                    @* Explanation Text *@
+                    <MudText Typo="Typo.body2" Style="color: #CBD5E1; line-height: 1.6; min-height: 60px;">
+                        @_steps[_currentStep].Content
+                    </MudText>
+
+                    @* Footer / Progress & Buttons *@
+                    <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="mt-2">
+                        @* Step Count *@
+                        <MudText Typo="Typo.caption" Style="color: #94A3B8; font-weight: 600;">
+                            Schritt @(_currentStep + 1) von @_steps.Count
+                        </MudText>
+
+                        @* Navigation Button Stack *@
+                        <MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
+                            @if (_currentStep > 0)
+                            {
+                                <MudButton Variant="Variant.Text" 
+                                           Style="color: #94A3B8; text-transform: none; border-radius: 12px;" 
+                                           OnClick="PrevStep" 
+                                           Size="Size.Small">
+                                    Zurück
+                                </MudButton>
+                            }
+                            else
+                            {
+                                <MudButton Variant="Variant.Text" 
+                                           Style="color: #94A3B8; text-transform: none; border-radius: 12px;" 
+                                           OnClick="CompleteTour" 
+                                           Size="Size.Small">
+                                    Überspringen
+                                </MudButton>
+                            }
+
+                            <MudButton Variant="Variant.Filled" 
+                                       Color="Color.Secondary" 
+                                       Style="text-transform: none; border-radius: 12px; font-weight: 700; min-width: 80px;" 
+                                       OnClick="NextStep" 
+                                       Size="Size.Small">
+                                @(_currentStep == _steps.Count - 1 ? "Fertig" : "Weiter")
+                            </MudButton>
+                        </MudStack>
+                    </MudStack>
+                </MudStack>
+            </MudCardContent>
+        </MudCard>
+    </div>
+}
+
+<style>
+    /* Backdrop behind cards but below the spotlight highlight */
+    .onboarding-backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(15, 23, 42, 0.4);
+        backdrop-filter: blur(2px);
+        z-index: 9999;
+        pointer-events: all;
+    }
+
+    /* Fixed positioned instruction box at the bottom center */
+    .onboarding-card-container {
+        position: fixed;
+        bottom: 32px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 90%;
+        max-width: 480px;
+        z-index: 10001;
+        transition: all 0.3s ease;
+    }
+
+    /* Dark theme styling for the instruction card */
+    .onboarding-info-card {
+        background: rgba(15, 23, 42, 0.9) !important;
+        backdrop-filter: blur(16px) !important;
+        -webkit-backdrop-filter: blur(16px) !important;
+        border: 1px solid rgba(255, 255, 255, 0.08) !important;
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4) !important;
+    }
+</style>
+
+@code {
+    [Parameter] public EventCallback OnFinished { get; set; }
+
+    private bool _active = true;
+    private int _currentStep = 0;
+
+    private readonly List<OnboardingStep> _steps =
+    [
+        new(".onboarding-nav-menu", "Die Navigation", "Hier auf der linken Seite findest du das Hauptmenü. Du kannst ganz einfach zwischen der Wochen- und Monatsübersicht wechseln oder deine Statistiken einsehen."),
+        new(".onboarding-week-header", "Kalenderwoche blättern", "Hier siehst du die aktuell ausgewählte Woche. Verwende die Pfeiltasten links und rechts, um in vergangenen oder zukünftigen Wochen deine Zeiten zu erfassen."),
+        new(".onboarding-day-card", "Zeiterfassung pro Tag", "Das Herzstück des Timetrackers. Trage hier deine täglichen Start- und Endzeiten sowie deine Pausen ein. Das System errechnet die Zeiten und Überstunden in Echtzeit."),
+        new(".onboarding-week-summary", "Wochenzusammenfassung", "Hier siehst du auf einen Blick, wie viele Stunden du in dieser Woche gearbeitet hast, wie viel Pause du gemacht hast und wie sich dein Stundensaldo verändert hat."),
+        new(".onboarding-overtime-balance", "Gleitzeitkonto", "Hier wird dein gesamtes Gleitzeitkonto über das Jahr hinweg zusammengerechnet. So weißt du immer genau, wie viele Überstunden du angesammelt hast.")
+    ];
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await HighlightStep();
+        }
+    }
+
+    private async Task HighlightStep()
+    {
+        if (_active && _steps.Count > 0)
+        {
+            var step = _steps[_currentStep];
+            await JS.InvokeVoidAsync("window.onboarding.highlight", step.TargetSelector);
+        }
+    }
+
+    private async Task NextStep()
+    {
+        if (_currentStep < _steps.Count - 1)
+        {
+            _currentStep++;
+            await HighlightStep();
+        }
+        else
+        {
+            await CompleteTour();
+        }
+    }
+
+    private async Task PrevStep()
+    {
+        if (_currentStep > 0)
+        {
+            _currentStep--;
+            await HighlightStep();
+        }
+    }
+
+    private async Task CompleteTour()
+    {
+        _active = false;
+        await JS.InvokeVoidAsync("window.onboarding.clear");
+        await OnFinished.InvokeAsync();
+    }
+
+    private class OnboardingStep
+    {
+        public string TargetSelector { get; }
+        public string Title { get; }
+        public string Content { get; }
+
+        public OnboardingStep(string targetSelector, string title, string content)
+        {
+            TargetSelector = targetSelector;
+            Title = title;
+            Content = content;
+        }
+    }
+}

timetracker.Client/Components/Pages/Settings.razor

@@ -5,6 +5,9 @@
 @inject IHolidayService HolidayService
 @inject ISnackbar Snackbar
 @inject AuthenticationStateProvider AuthStateProvider
+@inject IJSRuntime JSRuntime
+@inject NavigationManager Nav
+
 
 <PageTitle>Einstellungen – Timetracker</PageTitle>
 
@@ -20,7 +23,7 @@ else
 
         @* ── Header ── *@
         <MudPaper Elevation="4" Class="pa-5 rounded-xl"
-                  Style="background: linear-gradient(135deg, #3F51B5 0%, #1A237E 100%); color:white;">
+                  Style="background: #1E293B; color:white;">
             <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
                 <MudIcon Icon="@Icons.Material.Filled.Settings" Style="color:white; font-size:2rem" />
                 <MudStack Spacing="0">
@@ -187,6 +190,33 @@ else
                 </MudCard>
             </MudItem>
 
+            @* ── Hilfe & Einführung ── *@
+            <MudItem xs="12" md="6">
+                <MudCard Elevation="3" Class="rounded-xl h-100">
+                    <MudCardHeader>
+                        <CardHeaderContent>
+                            <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
+                                <MudIcon Icon="@Icons.Material.Filled.HelpOutline" Color="Color.Primary" />
+                                <MudText Typo="Typo.h6" Style="font-weight:600">Hilfe & Einführung</MudText>
+                            </MudStack>
+                        </CardHeaderContent>
+                    </MudCardHeader>
+                    <MudCardContent>
+                        <MudStack Spacing="4">
+                            <MudText Typo="Typo.body2" Color="Color.Secondary">
+                                Wenn du die interaktive Einführung (Onboarding Tour) noch einmal sehen möchtest, kannst du sie hier zurücksetzen und neu starten.
+                            </MudText>
+                            <MudButton Variant="Variant.Outlined" Color="Color.Primary"
+                                       StartIcon="@Icons.Material.Filled.PlayCircleOutline"
+                                       OnClick="RepeatOnboarding"
+                                       Style="max-width:250px;">
+                                Onboarding wiederholen
+                            </MudButton>
+                        </MudStack>
+                    </MudCardContent>
+                </MudCard>
+            </MudItem>
+
         </MudGrid>
 
         @* ── Speichern-Button ── *@
@@ -495,8 +525,12 @@ else
         if (claim == null) return;
         _userId = int.Parse(claim.Value);
         _settings = await TrackerService.GetSettingsAsync(_userId);
-        await LoadVacations();
-        _holHolidays = await HolidayService.GetHolidaysAsync(_holYear, _settings.GermanState);
+
+        var loadVacationsTask = LoadVacations();
+        var loadHolidaysTask = HolidayService.GetHolidaysAsync(_holYear, _settings.GermanState);
+
+        await Task.WhenAll(loadVacationsTask, loadHolidaysTask);
+        _holHolidays = await loadHolidaysTask;
     }
 
     private async Task LoadVacations()
@@ -574,6 +608,20 @@ else
         Snackbar.Add("Feiertag entfernt", Severity.Info);
     }
 
+    private async Task RepeatOnboarding()
+    {
+        try
+        {
+            await JSRuntime.InvokeVoidAsync("localStorage.setItem", "showOnboarding", "true");
+            Snackbar.Add("Onboarding zurückgesetzt. Leite weiter zur Startseite...", Severity.Info);
+            Nav.NavigateTo("/");
+        }
+        catch (Exception ex)
+        {
+            Snackbar.Add($"Fehler beim Zurücksetzen des Onboardings: {ex.Message}", Severity.Error);
+        }
+    }
+
     private static string FormatHours(double hours)
     {
         var ts = TimeSpan.FromHours(hours);

timetracker.Client/Components/Pages/Stats.razor

@@ -0,0 +1,382 @@
+@page "/stats"
+@rendermode InteractiveWebAssembly
+@attribute [Authorize]
+@inject ITimetrackerService TrackerService
+@inject AuthenticationStateProvider AuthStateProvider
+@using System.Security.Claims
+@using timetracker.Shared
+
+<PageTitle>Statistiken – Timetracker</PageTitle>
+
+@if (_loading)
+{
+    <MudStack AlignItems="AlignItems.Center" Class="mt-16" Spacing="3">
+        <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
+        <MudText Color="Color.Secondary">Lade Statistiken…</MudText>
+    </MudStack>
+}
+else
+{
+    <MudStack Spacing="4">
+        
+        @* ── Header ── *@
+        <MudPaper Elevation="4" Class="pa-5 rounded-xl" Style="background: #1E293B; color: white;">
+            <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="3">
+                <MudIcon Icon="@Icons.Material.Filled.BarChart" Style="color:white; font-size:2.2rem" />
+                <MudStack Spacing="0">
+                    <MudText Typo="Typo.h5" Style="color:white; font-weight:700">Statistiken</MudText>
+                    <MudText Typo="Typo.caption" Style="color:rgba(255,255,255,0.72)">Auswertung deiner Arbeitsleistung und Gleitzeitkonto</MudText>
+                </MudStack>
+            </MudStack>
+        </MudPaper>
+
+        <MudGrid Spacing="4">
+            @* ── Card 1: Wochen-Fortschritt ── *@
+            <MudItem xs="12" md="4">
+                <MudCard Elevation="3" Class="rounded-xl" Style="height:100%;">
+                    <MudCardContent>
+                        <MudStack AlignItems="AlignItems.Center" Spacing="3">
+                            <MudText Typo="Typo.subtitle1" Style="font-weight:700; color:#475569">Wochenfortschritt</MudText>
+                            
+                            @{
+                                var pct = _weekTargetHours > 0 ? (int)Math.Min((_weekWorkedHours / _weekTargetHours) * 100, 100) : 0;
+                                var displayPct = _weekTargetHours > 0 ? (int)Math.Round((_weekWorkedHours / _weekTargetHours) * 100) : 0;
+                            }
+                            
+                            <div style="position:relative; display:inline-flex;">
+                                <MudProgressCircular Value="@pct" Color="Color.Secondary" Size="Size.Large" StrokeWidth="6" Style="height:120px; width:120px;" />
+                                <div style="position:absolute; top:0; left:0; bottom:0; right:0; display:flex; align-items:center; justify-content:center; flex-direction:column;">
+                                    <MudText Typo="Typo.h5" Style="font-weight:800; color:#0F172A;">@displayPct%</MudText>
+                                    <MudText Typo="Typo.caption" Color="Color.Secondary">Erreicht</MudText>
+                                </div>
+                            </div>
+
+                            <MudStack Spacing="1" Style="width:100%;" Class="mt-2">
+                                <MudStack Row="true" Justify="Justify.SpaceBetween">
+                                    <MudText Typo="Typo.body2" Color="Color.Secondary">Arbeitszeit (Ist):</MudText>
+                                    <MudText Typo="Typo.body2" Style="font-weight:700; color:#0F172A">@FormatHours(_weekWorkedHours) Std.</MudText>
+                                </MudStack>
+                                <MudStack Row="true" Justify="Justify.SpaceBetween">
+                                    <MudText Typo="Typo.body2" Color="Color.Secondary">Wochensoll (Soll):</MudText>
+                                    <MudText Typo="Typo.body2" Style="font-weight:700">@FormatHours(_weekTargetHours) Std.</MudText>
+                                </MudStack>
+                            </MudStack>
+                        </MudStack>
+                    </MudCardContent>
+                </MudCard>
+            </MudItem>
+
+            @* ── Card 2: Wochensaldo ── *@
+            <MudItem xs="12" sm="6" md="4">
+                <MudCard Elevation="3" Class="rounded-xl" Style="height:100%; border-left: 6px solid #0EA5E9;">
+                    <MudCardContent>
+                        <MudStack Spacing="2">
+                            <MudText Typo="Typo.subtitle1" Style="font-weight:700; color:#475569">Wochensaldo</MudText>
+                            
+                            <MudStack Row="true" AlignItems="AlignItems.Center" Class="py-3">
+                                <MudIcon Icon="@(_weekOvertimeHours >= 0 ? Icons.Material.Filled.TrendingUp : Icons.Material.Filled.TrendingDown)"
+                                         Style="@($"color:{(_weekOvertimeHours >= 0 ? "#10B981" : "#EF4444")}; font-size:3rem")" />
+                                <MudStack Spacing="0">
+                                    <MudText Typo="Typo.h3" Style="@($"font-weight:800; color:{(_weekOvertimeHours >= 0 ? "#10B981" : "#EF4444")};")">
+                                        @FormatTs(TimeSpan.FromHours(_weekOvertimeHours), sign: true)
+                                    </MudText>
+                                    <MudText Typo="Typo.caption" Color="Color.Secondary">Überstunden-Veränderung diese Woche</MudText>
+                                </MudStack>
+                            </MudStack>
+                        </MudStack>
+                    </MudCardContent>
+                </MudCard>
+            </MudItem>
+
+            @* ── Card 3: Gesamtsaldo ── *@
+            <MudItem xs="12" sm="6" md="4">
+                <MudCard Elevation="3" Class="rounded-xl" Style="@($"height:100%; border-left: 6px solid {(_totalOvertime >= TimeSpan.Zero ? "#10B981" : "#EF4444")};")">
+                    <MudCardContent>
+                        <MudStack Spacing="2">
+                            <MudText Typo="Typo.subtitle1" Style="font-weight:700; color:#475569">Gleitzeitkonto</MudText>
+                            
+                            <MudStack Row="true" AlignItems="AlignItems.Center" Class="py-3">
+                                <MudIcon Icon="Icons.Material.Filled.AccountBalance"
+                                         Style="@($"color:{(_totalOvertime >= TimeSpan.Zero ? "#10B981" : "#EF4444")}; font-size:3rem")" />
+                                <MudStack Spacing="0">
+                                    <MudText Typo="Typo.h3" Style="@($"font-weight:800; color:{(_totalOvertime >= TimeSpan.Zero ? "#10B981" : "#EF4444")};")">
+                                        @FormatTs(_totalOvertime, sign: true)
+                                    </MudText>
+                                    <MudText Typo="Typo.caption" Color="Color.Secondary">Gesamtsaldo aller erfassten Tage</MudText>
+                                </MudStack>
+                            </MudStack>
+                        </MudStack>
+                    </MudCardContent>
+                </MudCard>
+            </MudItem>
+
+            @* ── Säulendiagramm (Tagesverteilung) ── *@
+            <MudItem xs="12">
+                <MudCard Elevation="3" Class="rounded-xl">
+                    <MudCardHeader>
+                        <CardHeaderContent>
+                            <MudText Typo="Typo.h6" Style="font-weight:700; color:#0F172A">Arbeitszeitverteilung diese Woche</MudText>
+                            <MudText Typo="Typo.caption" Color="Color.Secondary">Geleistete Nettoarbeitsstunden pro Wochentag</MudText>
+                        </CardHeaderContent>
+                    </MudCardHeader>
+                    <MudCardContent>
+                        <div class="chart-container" style="width:100%; overflow-x:auto;">
+                            <svg viewBox="0 0 640 320" width="100%" height="320" style="min-width: 500px; display: block; overflow: visible;">
+                                <style>
+                                    .chart-bar {
+                                        transition: height 0.4s ease, y 0.4s ease, fill 0.3s;
+                                        cursor: pointer;
+                                    }
+                                    .chart-bar:hover {
+                                        filter: brightness(1.1) drop-shadow(0px 4px 8px rgba(14, 165, 233, 0.3));
+                                    }
+                                </style>
+
+                                @{
+                                    double plotLeft = 50;
+                                    double plotRight = 580;
+                                    double plotTop = 30;
+                                    double plotBottom = 270;
+                                    double plotWidth = plotRight - plotLeft;
+                                    double plotHeight = plotBottom - plotTop;
+                                    double barWidth = 36;
+                                    double spacing = plotWidth / 7;
+                                }
+
+                                <!-- Horizontal Grid Lines -->
+                                @for (int i = 0; i <= 4; i++)
+                                {
+                                    double val = (_maxHoursValue / 4.0) * i;
+                                    double yPos = plotBottom - (val / _maxHoursValue) * plotHeight;
+                                    <line x1="@plotLeft" y1="@yPos" x2="@plotRight" y2="@yPos" stroke="#E2E8F0" stroke-width="1" stroke-dasharray="2" />
+                                    @((MarkupString)$"<text x=\"{plotLeft - 8}\" y=\"{yPos + 4}\" fill=\"#64748B\" font-size=\"11\" font-weight=\"500\" text-anchor=\"end\">{val:F1}h</text>")
+                                }
+
+                                <!-- Bars and Labels -->
+                                @for (int i = 0; i < 7; i++)
+                                {
+                                    var d = _days[i];
+                                    double xPos = plotLeft + (i * spacing) + (spacing - barWidth) / 2;
+                                    double bHeight = (d.WorkedHours / _maxHoursValue) * plotHeight;
+                                    double yPos = plotBottom - bHeight;
+
+                                    string fillCol = "#94A3B8"; // Default light slate
+                                    if (d.IsToday)
+                                    {
+                                        fillCol = "#0EA5E9"; // Sky Blue for today
+                                    }
+                                    else if (d.WorkedHours >= d.TargetHours && d.TargetHours > 0)
+                                    {
+                                        fillCol = "#475569"; // Slate Blue for normal completed target
+                                    }
+                                    else if (d.WorkedHours > 0 && d.TargetHours == 0)
+                                    {
+                                        fillCol = "#10B981"; // Emerald Green for weekend work (pure overtime)
+                                    }
+                                    else if (d.WorkedHours > 0)
+                                    {
+                                        fillCol = "#64748B"; // Slate Medium for incomplete target
+                                    }
+                                    else
+                                    {
+                                        fillCol = "#E2E8F0"; // Very light grey for zero hours
+                                    }
+
+                                    <!-- Render Rect with hover tooltip -->
+                                    <rect x="@xPos" y="@(d.WorkedHours > 0 ? yPos : plotBottom - 4)" width="@barWidth" height="@(d.WorkedHours > 0 ? bHeight : 4)" 
+                                          rx="6" fill="@fillCol" class="chart-bar">
+                                        <title>@d.DayName: @FormatHours(d.WorkedHours) Std. (Soll: @FormatHours(d.TargetHours) Std.)</title>
+                                    </rect>
+
+                                    <!-- Value Label above bar -->
+                                    @if (d.WorkedHours > 0)
+                                    {
+                                        @((MarkupString)$"<text x=\"{xPos + barWidth / 2}\" y=\"{yPos - 6}\" fill=\"#0F172A\" font-size=\"11\" font-weight=\"700\" text-anchor=\"middle\">{FormatHours(d.WorkedHours)}</text>")
+                                    }
+
+                                    <!-- Wochentag Text -->
+                                    @((MarkupString)$"<text x=\"{xPos + barWidth / 2}\" y=\"{plotBottom + 20}\" fill=\"#64748B\" font-size=\"11\" font-weight=\"700\" text-anchor=\"middle\">{d.DayShortName}</text>")
+                                }
+
+                                <!-- Sollzeit Target Line (Only if target hours > 0) -->
+                                @if (_settings.DailyTargetHours > 0)
+                                {
+                                    double yTarget = plotBottom - (_settings.DailyTargetHours / _maxHoursValue) * plotHeight;
+                                    <line x1="@plotLeft" y1="@yTarget" x2="@plotRight" y2="@yTarget" stroke="#EF4444" stroke-width="2" stroke-dasharray="4" style="opacity: 0.75;" />
+                                    @((MarkupString)$"<text x=\"{plotRight - 10}\" y=\"{yTarget - 6}\" fill=\"#EF4444\" font-size=\"10\" font-weight=\"700\" text-anchor=\"end\">Soll ({_settings.DailyTargetHours} h)</text>")
+                                }
+                            </svg>
+                        </div>
+                    </MudCardContent>
+                </MudCard>
+            </MudItem>
+            
+            @* ── Diagnostics Panel ── *@
+            <MudItem xs="12">
+                <MudExpansionPanels>
+                    <MudExpansionPanel Text="Diagnose-Daten (Debug)">
+                        <MudText Typo="Typo.body2">Benutzer-ID: @_userId</MudText>
+                        <MudText Typo="Typo.body2">Wochensoll: @_weekTargetHours Std. | Netto-Arbeitszeit: @_weekWorkedHours Std. | Wochensaldo: @_weekOvertimeHours Std.</MudText>
+                        <MudText Typo="Typo.body2">Anzahl erfasste Tage aus DB: @_rawDbDaysCount</MudText>
+                        
+                        <MudSimpleTable Style="margin-top: 10px;">
+                            <thead>
+                                <tr>
+                                    <th>Datum</th>
+                                    <th>Tag</th>
+                                    <th>Ist (Std)</th>
+                                    <th>Soll (Std)</th>
+                                    <th>Ist > 0</th>
+                                    <th>Arbeitstag (Einst.)</th>
+                                    <th>Aus DB zugeordnet</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                @foreach (var d in _days)
+                                {
+                                    <tr>
+                                        <td>@d.Date.ToString("yyyy-MM-dd")</td>
+                                        <td>@d.DayName</td>
+                                        <td>@d.WorkedHours</td>
+                                        <td>@d.TargetHours</td>
+                                        <td>@(d.WorkedHours > 0 ? "Ja" : "Nein")</td>
+                                        <td>@(d.IsWorkDay ? "Ja" : "Nein")</td>
+                                        <td>@(_dbMatchStatus.GetValueOrDefault(d.Date, "Nein"))</td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </MudSimpleTable>
+                    </MudExpansionPanel>
+                </MudExpansionPanels>
+            </MudItem>
+        </MudGrid>
+    </MudStack>
+}
+
+@code {
+    private bool _loading = true;
+    private int _userId;
+    private AppSettings _settings = new();
+    private List<DayStat> _days = [];
+    private TimeSpan _totalOvertime;
+    private double _weekWorkedHours;
+    private double _weekTargetHours;
+    private double _weekOvertimeHours;
+    private double _maxHoursValue = 10.0;
+    
+    // Debug variables
+    private int _rawDbDaysCount = 0;
+    private Dictionary<DateOnly, string> _dbMatchStatus = new();
+    
+    private static readonly System.Globalization.CultureInfo _deCulture = new("de-DE");
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        var claim = authState.User.FindFirst(ClaimTypes.NameIdentifier);
+        if (claim == null) return;
+        _userId = int.Parse(claim.Value);
+
+        _settings = await TrackerService.GetSettingsAsync(_userId);
+        
+        var today = DateOnly.FromDateTime(DateTime.Today);
+        var monday = GetMonday(today);
+        
+        var dbDays = await TrackerService.GetWeekAsync(_userId, monday);
+        _rawDbDaysCount = dbDays.Count;
+        _totalOvertime = await TrackerService.GetTotalOvertimeAsync(_userId, _settings);
+
+        _weekTargetHours = 0;
+        _weekWorkedHours = 0;
+        _dbMatchStatus.Clear();
+
+        _days = Enumerable.Range(0, 7).Select(i =>
+        {
+            var date = monday.AddDays(i);
+            bool isWorkDay = _settings.IsWorkDay(date.DayOfWeek);
+            double target = isWorkDay ? _settings.DailyTargetHours : 0.0;
+            
+            if (isWorkDay)
+            {
+                _weekTargetHours += _settings.DailyTargetHours;
+            }
+
+            var wd = dbDays.FirstOrDefault(d => d.Date == date);
+            double worked = 0.0;
+            
+            if (wd != null)
+            {
+                _dbMatchStatus[date] = $"Ja (Id={wd.Id}, Start={wd.StartTime}, Ende={wd.EndTime})";
+                
+                if (wd.StartTime != null && wd.EndTime != null)
+                {
+                    var gross = wd.EndTime.Value.ToTimeSpan() - wd.StartTime.Value.ToTimeSpan();
+                    if (gross > TimeSpan.Zero)
+                    {
+                        var breakTotal = wd.Breaks
+                            .Where(b => b.StartTime.HasValue && b.EndTime.HasValue && b.EndTime > b.StartTime)
+                            .Aggregate(TimeSpan.Zero, (s, b) =>
+                                s + (b.EndTime!.Value.ToTimeSpan() - b.StartTime!.Value.ToTimeSpan()));
+                        worked = (gross - breakTotal).TotalHours;
+                        if (worked < 0) worked = 0.0;
+                    }
+                }
+            }
+            else
+            {
+                _dbMatchStatus[date] = "Nein";
+            }
+            
+            _weekWorkedHours += worked;
+
+            return new DayStat
+            {
+                Date = date,
+                DayName = date.ToString("dddd", _deCulture),
+                DayShortName = date.ToString("ddd", _deCulture),
+                WorkedHours = worked,
+                TargetHours = target,
+                IsToday = date == today,
+                IsWorkDay = isWorkDay
+            };
+        }).ToList();
+
+        _weekOvertimeHours = _weekWorkedHours - _weekTargetHours;
+        
+        var maxWorked = _days.Max(d => d.WorkedHours);
+        _maxHoursValue = Math.Max(10.0, Math.Max(maxWorked, _settings.DailyTargetHours));
+        
+        _loading = false;
+    }
+
+    private static DateOnly GetMonday(DateOnly date)
+    {
+        int diff = ((int)date.DayOfWeek - (int)DayOfWeek.Monday + 7) % 7;
+        return date.AddDays(-diff);
+    }
+
+    private string FormatHours(double hours)
+    {
+        var ts = TimeSpan.FromHours(hours);
+        return $"{(int)ts.TotalHours}:{ts.Minutes:D2}";
+    }
+
+    private string FormatTs(TimeSpan ts, bool sign = false)
+    {
+        if (ts == TimeSpan.Zero && sign) return "±0:00";
+        var prefix = sign ? (ts >= TimeSpan.Zero ? "+" : "−") : (ts < TimeSpan.Zero ? "−" : "");
+        var abs = ts.Duration();
+        return $"{prefix}{(int)abs.TotalHours}:{abs.Minutes:D2}";
+    }
+
+    private sealed class DayStat
+    {
+        public DateOnly Date { get; set; }
+        public string DayName { get; set; } = "";
+        public string DayShortName { get; set; } = "";
+        public double WorkedHours { get; set; }
+        public double TargetHours { get; set; }
+        public bool IsToday { get; set; }
+        public bool IsWorkDay { get; set; }
+    }
+}

timetracker.Client/Components/Pages/UrlaubsMaximizer.razor

@@ -21,7 +21,7 @@ else
 
         @* ── Header ── *@
         <MudPaper Elevation="4" Class="pa-5 rounded-xl"
-                  Style="background: linear-gradient(135deg, #F57F17 0%, #E65100 100%); color:white;">
+                  Style="background: #C2410C; color:white;">
             <MudStack Row="true" AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween">
                 <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft"
                                Style="color:white" Size="Size.Large" OnClick="PrevYear" />
@@ -249,8 +249,13 @@ else
 
     private async Task LoadYear()
     {
-        var holidays    = await HolidayService.GetHolidaysAsync(_year, _settings.GermanState);
-        var vacations   = await TrackerService.GetVacationDaysAsync(_userId, _year);
+        var holidaysTask = HolidayService.GetHolidaysAsync(_year, _settings.GermanState);
+        var vacationsTask = TrackerService.GetVacationDaysAsync(_userId, _year);
+
+        await Task.WhenAll(holidaysTask, vacationsTask);
+
+        var holidays    = await holidaysTask;
+        var vacations   = await vacationsTask;
         _holidays       = holidays.ToDictionary(h => h.Date, h => h.Name);
         _vacationSet    = vacations.Select(v => v.Date).ToHashSet();
         _remainingDays  = Math.Max(0, _settings.VacationDaysPerYear - vacations.Count);

timetracker.Client/Services/ClientAuthService.cs

@@ -32,9 +32,9 @@ public class ClientAuthService : IAuthService
         return null;
     }
 
-    public async Task<(User? User, string? Error)> RegisterAsync(string username, string password)
+    public async Task<(User? User, string? Error)> RegisterAsync(string username, string password, string? honeypot = null)
     {
-        var response = await _http.PostAsJsonAsync("api/auth/register", new { Username = username, Password = password });
+        var response = await _http.PostAsJsonAsync("api/auth/register", new { Username = username, Password = password, Honeypot = honeypot });
         if (response.IsSuccessStatusCode)
         {
             var userInfo = await response.Content.ReadFromJsonAsync<UserInfo>();

timetracker.Client/Services/ClientHolidayService.cs

@@ -6,6 +6,7 @@ namespace timetracker.Client.Services;
 public class ClientHolidayService : IHolidayService
 {
     private readonly HttpClient _http;
+    private readonly Dictionary<(int Year, string StateCode), List<PublicHoliday>> _holidayCache = new();
 
     public ClientHolidayService(HttpClient http)
     {
@@ -14,12 +15,21 @@ public class ClientHolidayService : IHolidayService
 
     public async Task<List<PublicHoliday>> GetHolidaysAsync(int year, string? stateCode = null)
     {
+        var sc = stateCode ?? "";
+        var key = (year, sc);
+        if (_holidayCache.TryGetValue(key, out var cached))
+        {
+            return cached;
+        }
+
         var url = $"api/holidays?year={year}";
         if (!string.IsNullOrEmpty(stateCode))
         {
             url += $"&stateCode={stateCode}";
         }
-        return await _http.GetFromJsonAsync<List<PublicHoliday>>(url) ?? [];
+        var result = await _http.GetFromJsonAsync<List<PublicHoliday>>(url) ?? [];
+        _holidayCache[key] = result;
+        return result;
     }
 
     public async Task<(bool Success, string Message)> FetchAndStoreAsync(int year)
@@ -30,6 +40,12 @@ public class ClientHolidayService : IHolidayService
             var result = await response.Content.ReadFromJsonAsync<FetchResponse>();
             if (result != null)
             {
+                // Invalidate the cache for this year
+                var keysToRemove = _holidayCache.Keys.Where(k => k.Year == year).ToList();
+                foreach (var k in keysToRemove)
+                {
+                    _holidayCache.Remove(k);
+                }
                 return (result.Success, result.Message);
             }
         }
@@ -39,6 +55,8 @@ public class ClientHolidayService : IHolidayService
     public async Task DeleteAsync(int id)
     {
         await _http.DeleteAsync($"api/holidays/{id}");
+        // Invalidate all caches since we deleted a holiday
+        _holidayCache.Clear();
     }
 
     private class FetchResponse

timetracker.Client/Services/ClientTimetrackerService.cs

@@ -6,6 +6,7 @@ namespace timetracker.Client.Services;
 public class ClientTimetrackerService : ITimetrackerService
 {
     private readonly HttpClient _http;
+    private AppSettings? _cachedSettings;
 
     public ClientTimetrackerService(HttpClient http)
     {
@@ -14,7 +15,7 @@ public class ClientTimetrackerService : ITimetrackerService
 
     public async Task<List<WorkDay>> GetWeekAsync(int userId, DateOnly monday)
     {
-        return await _http.GetFromJsonAsync<List<WorkDay>>($"api/tracker/week?userId={userId}&monday={monday:yyyy-MM-dd}") ?? [];
+        return await _http.GetFromJsonAsync<List<WorkDay>>($"api/tracker/week?monday={monday:yyyy-MM-dd}") ?? [];
     }
 
     public async Task UpsertWorkDayAsync(WorkDay workDay)
@@ -24,17 +25,24 @@ public class ClientTimetrackerService : ITimetrackerService
 
     public async Task<AppSettings> GetSettingsAsync(int userId)
     {
-        return await _http.GetFromJsonAsync<AppSettings>($"api/tracker/settings/{userId}") ?? new AppSettings { UserId = userId };
+        if (_cachedSettings != null && _cachedSettings.UserId == userId)
+        {
+            return _cachedSettings;
+        }
+        var settings = await _http.GetFromJsonAsync<AppSettings>("api/tracker/settings");
+        _cachedSettings = settings ?? new AppSettings { UserId = userId };
+        return _cachedSettings;
     }
 
     public async Task SaveSettingsAsync(AppSettings settings)
     {
         await _http.PostAsJsonAsync("api/tracker/settings", settings);
+        _cachedSettings = settings;
     }
 
     public async Task<List<VacationDay>> GetVacationDaysAsync(int userId, int year)
     {
-        return await _http.GetFromJsonAsync<List<VacationDay>>($"api/tracker/vacation/{userId}/{year}") ?? [];
+        return await _http.GetFromJsonAsync<List<VacationDay>>($"api/tracker/vacation/{year}") ?? [];
     }
 
     public async Task AddVacationDayAsync(VacationDay vacationDay)
@@ -44,12 +52,12 @@ public class ClientTimetrackerService : ITimetrackerService
 
     public async Task RemoveVacationDayAsync(int userId, int id)
     {
-        await _http.DeleteAsync($"api/tracker/vacation/{userId}/{id}");
+        await _http.DeleteAsync($"api/tracker/vacation/{id}");
     }
 
     public async Task<TimeSpan> GetTotalOvertimeAsync(int userId, AppSettings settings)
     {
-        var response = await _http.PostAsJsonAsync($"api/tracker/overtime/{userId}", settings);
+        var response = await _http.PostAsJsonAsync("api/tracker/overtime", settings);
         if (response.IsSuccessStatusCode)
         {
             var hours = await response.Content.ReadFromJsonAsync<double>();
@@ -60,6 +68,6 @@ public class ClientTimetrackerService : ITimetrackerService
 
     public async Task<List<WorkDay>> GetMonthAsync(int userId, int year, int month)
     {
-        return await _http.GetFromJsonAsync<List<WorkDay>>($"api/tracker/month?userId={userId}&year={year}&month={month}") ?? [];
+        return await _http.GetFromJsonAsync<List<WorkDay>>($"api/tracker/month?year={year}&month={month}") ?? [];
     }
 }

timetracker.Server/Components/App.razor

@@ -9,17 +9,45 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link rel="stylesheet" href="_content/MudBlazor/MudBlazor.min.css" />
     <link rel="stylesheet" href="@Assets["app.css"]" />
-    <link rel="stylesheet" href="@Assets["timetracker.styles.css"]" />
+    <link rel="stylesheet" href="@Assets["timetracker.Client.styles.css"]" />
     <ImportMap />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <link rel="alternate icon" type="image/png" href="favicon.png" />
-    <HeadOutlet />
+    <style>
+        .onboarding-active-target {
+            position: relative !important;
+            z-index: 10000 !important;
+            box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.75), 0 0 15px rgba(14, 165, 233, 0.5) !important;
+            pointer-events: none !important;
+            transition: all 0.3s ease !important;
+        }
+    </style>
+    <HeadOutlet @rendermode="InteractiveWebAssembly" />
 </head>
 
 <body>
     <Routes />
     <script src="@Assets["_framework/blazor.web.js"]"></script>
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script>
+        window.onboarding = {
+            highlight: function (selector) {
+                document.querySelectorAll('.onboarding-active-target').forEach(function(el) {
+                    el.classList.remove('onboarding-active-target');
+                });
+                var target = document.querySelector(selector);
+                if (target) {
+                    target.classList.add('onboarding-active-target');
+                    target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            },
+            clear: function () {
+                document.querySelectorAll('.onboarding-active-target').forEach(function(el) {
+                    el.classList.remove('onboarding-active-target');
+                });
+            }
+        };
+    </script>
 </body>
 
 </html>

timetracker.Server/Data/AuthService.cs

@@ -55,7 +55,7 @@ public class AuthService(IDbContextFactory<TimetrackerDbContext> factory, UserNo
         return null;
     }
 
-    public async Task<(User? User, string? Error)> RegisterAsync(string username, string password)    {
+    public async Task<(User? User, string? Error)> RegisterAsync(string username, string password, string? honeypot = null)    {
         if (string.IsNullOrWhiteSpace(username) || username.Length < 3)
             return (null, "Benutzername muss mindestens 3 Zeichen lang sein.");
         if (string.IsNullOrWhiteSpace(password) || password.Length < 6)

timetracker.Server/Program.cs

@@ -1,4 +1,5 @@
 using System.Security.Claims;
+using System.Threading.RateLimiting;
 using Microsoft.AspNetCore.Authentication;
 using Microsoft.AspNetCore.Authentication.Cookies;
 using Microsoft.AspNetCore.HttpOverrides;
@@ -19,6 +20,9 @@ builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationSc
         options.LogoutPath = "/auth/logout";
         options.ExpireTimeSpan = TimeSpan.FromDays(30);
         options.SlidingExpiration = true;
+        options.Cookie.HttpOnly = true;
+        options.Cookie.SameSite = SameSiteMode.Strict;
+        options.Cookie.SecurePolicy = CookieSecurePolicy.SameAsRequest;
         // Cookie-Konfiguration für APIs & WASM
         options.Events.OnRedirectToLogin = context =>
         {
@@ -60,6 +64,22 @@ builder.Services.AddRazorComponents()
 builder.Services.AddMudServices();
 builder.Services.AddHttpClient<HolidayService>();
 
+builder.Services.AddRateLimiter(options =>
+{
+    options.RejectionStatusCode = StatusCodes.Status429TooManyRequests;
+    options.AddPolicy("auth-limit", httpContext =>
+        RateLimitPartition.GetFixedWindowLimiter(
+            partitionKey: httpContext.Connection.RemoteIpAddress?.ToString() 
+                ?? httpContext.Request.Headers["X-Forwarded-For"].ToString() 
+                ?? "unknown",
+            factory: _ => new FixedWindowRateLimiterOptions
+            {
+                Window = TimeSpan.FromMinutes(1),
+                PermitLimit = 5,
+                QueueLimit = 0
+            }));
+});
+
 var dbProvider = builder.Configuration["DB_PROVIDER"] ?? "SQLite";
 
 if (dbProvider.Equals("PostgreSQL", StringComparison.OrdinalIgnoreCase))
@@ -120,6 +140,7 @@ if (app.Configuration.GetValue("EnableHttpsRedirect", !app.Environment.IsDevelop
 }
 
 app.UseStaticFiles();
+app.UseRateLimiter();
 app.UseAuthentication();
 app.UseAuthorization();
 app.UseAntiforgery();
@@ -165,10 +186,16 @@ app.MapPost("/api/auth/login", async (HttpContext ctx, [FromBody] LoginRequest r
         new AuthenticationProperties { IsPersistent = true });
 
     return Results.Ok(new UserInfo { Id = user.Id, Username = user.Username });
-});
+}).RequireRateLimiting("auth-limit");
 
-app.MapPost("/api/auth/register", async (HttpContext ctx, [FromBody] LoginRequest req, IAuthService authService) =>
+app.MapPost("/api/auth/register", async (HttpContext ctx, [FromBody] RegisterRequest req, IAuthService authService) =>
 {
+    if (!string.IsNullOrEmpty(req.Honeypot))
+    {
+        // Silently reject bots
+        return Results.BadRequest("Registrierung fehlgeschlagen.");
+    }
+
     var (user, error) = await authService.RegisterAsync(req.Username, req.Password);
     if (user == null)
         return Results.BadRequest(error ?? "Registrierung fehlgeschlagen.");
@@ -183,7 +210,7 @@ app.MapPost("/api/auth/register", async (HttpContext ctx, [FromBody] LoginReques
         new AuthenticationProperties { IsPersistent = true });
 
     return Results.Ok(new UserInfo { Id = user.Id, Username = user.Username });
-});
+}).RequireRateLimiting("auth-limit");
 
 app.MapGet("/auth/logout", async (HttpContext ctx) =>
 {
@@ -219,8 +246,11 @@ usersApi.MapPut("/{userId:int}/rename", async (int userId, [FromBody] RenameRequ
 // ── Timetracker-API-Endpoints (Protected) ─────────────────────────────────────
 var trackerApi = app.MapGroup("/api/tracker").RequireAuthorization();
 
-trackerApi.MapGet("/week", async ([FromQuery] int userId, [FromQuery] string monday, ITimetrackerService trackerService) =>
+trackerApi.MapGet("/week", async (ClaimsPrincipal claimsPrincipal, [FromQuery] string monday, ITimetrackerService trackerService) =>
 {
+    var idClaim = claimsPrincipal.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    if (!int.TryParse(idClaim, out var userId)) return Results.Unauthorized();
+
     if (DateOnly.TryParse(monday, out var date))
     {
         var days = await trackerService.GetWeekAsync(userId, date);
@@ -229,50 +259,78 @@ trackerApi.MapGet("/week", async ([FromQuery] int userId, [FromQuery] string mon
     return Results.BadRequest("Ungültiges Datum.");
 });
 
-trackerApi.MapPost("/workday", async ([FromBody] WorkDay workDay, ITimetrackerService trackerService) =>
+trackerApi.MapPost("/workday", async (ClaimsPrincipal claimsPrincipal, [FromBody] WorkDay workDay, ITimetrackerService trackerService) =>
 {
+    var idClaim = claimsPrincipal.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    if (!int.TryParse(idClaim, out var userId)) return Results.Unauthorized();
+
+    workDay.UserId = userId; // Enforce owner
     await trackerService.UpsertWorkDayAsync(workDay);
     return Results.Ok();
 });
 
-trackerApi.MapGet("/settings/{userId:int}", async (int userId, ITimetrackerService trackerService) =>
+trackerApi.MapGet("/settings", async (ClaimsPrincipal claimsPrincipal, ITimetrackerService trackerService) =>
 {
+    var idClaim = claimsPrincipal.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    if (!int.TryParse(idClaim, out var userId)) return Results.Unauthorized();
+
     var settings = await trackerService.GetSettingsAsync(userId);
     return Results.Ok(settings);
 });
 
-trackerApi.MapPost("/settings", async ([FromBody] AppSettings settings, ITimetrackerService trackerService) =>
+trackerApi.MapPost("/settings", async (ClaimsPrincipal claimsPrincipal, [FromBody] AppSettings settings, ITimetrackerService trackerService) =>
 {
+    var idClaim = claimsPrincipal.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    if (!int.TryParse(idClaim, out var userId)) return Results.Unauthorized();
+
+    settings.UserId = userId; // Enforce owner
     await trackerService.SaveSettingsAsync(settings);
     return Results.Ok();
 });
 
-trackerApi.MapGet("/vacation/{userId:int}/{year:int}", async (int userId, int year, ITimetrackerService trackerService) =>
+trackerApi.MapGet("/vacation/{year:int}", async (ClaimsPrincipal claimsPrincipal, int year, ITimetrackerService trackerService) =>
 {
+    var idClaim = claimsPrincipal.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    if (!int.TryParse(idClaim, out var userId)) return Results.Unauthorized();
+
     var days = await trackerService.GetVacationDaysAsync(userId, year);
     return Results.Ok(days);
 });
 
-trackerApi.MapPost("/vacation", async ([FromBody] VacationDay vacationDay, ITimetrackerService trackerService) =>
+trackerApi.MapPost("/vacation", async (ClaimsPrincipal claimsPrincipal, [FromBody] VacationDay vacationDay, ITimetrackerService trackerService) =>
 {
+    var idClaim = claimsPrincipal.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    if (!int.TryParse(idClaim, out var userId)) return Results.Unauthorized();
+
+    vacationDay.UserId = userId; // Enforce owner
     await trackerService.AddVacationDayAsync(vacationDay);
     return Results.Ok();
 });
 
-trackerApi.MapDelete("/vacation/{userId:int}/{id:int}", async (int userId, int id, ITimetrackerService trackerService) =>
+trackerApi.MapDelete("/vacation/{id:int}", async (ClaimsPrincipal claimsPrincipal, int id, ITimetrackerService trackerService) =>
 {
+    var idClaim = claimsPrincipal.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    if (!int.TryParse(idClaim, out var userId)) return Results.Unauthorized();
+
     await trackerService.RemoveVacationDayAsync(userId, id);
     return Results.NoContent();
 });
 
-trackerApi.MapPost("/overtime/{userId:int}", async (int userId, [FromBody] AppSettings settings, ITimetrackerService trackerService) =>
+trackerApi.MapPost("/overtime", async (ClaimsPrincipal claimsPrincipal, [FromBody] AppSettings settings, ITimetrackerService trackerService) =>
 {
+    var idClaim = claimsPrincipal.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    if (!int.TryParse(idClaim, out var userId)) return Results.Unauthorized();
+
+    settings.UserId = userId; // Enforce owner
     var ts = await trackerService.GetTotalOvertimeAsync(userId, settings);
     return Results.Ok(ts.TotalHours);
 });
 
-trackerApi.MapGet("/month", async ([FromQuery] int userId, [FromQuery] int year, [FromQuery] int month, ITimetrackerService trackerService) =>
+trackerApi.MapGet("/month", async (ClaimsPrincipal claimsPrincipal, [FromQuery] int year, [FromQuery] int month, ITimetrackerService trackerService) =>
 {
+    var idClaim = claimsPrincipal.FindFirst(ClaimTypes.NameIdentifier)?.Value;
+    if (!int.TryParse(idClaim, out var userId)) return Results.Unauthorized();
+
     var days = await trackerService.GetMonthAsync(userId, year, month);
     return Results.Ok(days);
 });
@@ -302,4 +360,5 @@ app.Run();
 
 // ── Models for Request Bodies ──────────────────────────────────────────────────
 public record LoginRequest(string Username, string Password);
+public record RegisterRequest(string Username, string Password, string? Honeypot = null);
 public record RenameRequest(string Username);

timetracker.Shared/IAuthService.cs

@@ -6,5 +6,5 @@ public interface IAuthService
     Task<List<User>> GetAllUsersAsync();
     Task DeleteUserAsync(int userId);
     Task<string?> RenameUserAsync(int userId, string newUsername);
-    Task<(User? User, string? Error)> RegisterAsync(string username, string password);
+    Task<(User? User, string? Error)> RegisterAsync(string username, string password, string? honeypot = null);
 }

wasm.md

@@ -1,183 +0,0 @@
-# Blazor WASM Migration – Aufwandsanalyse
-
-> Analysiert am 08.06.2026  
-> Aktueller Stack: Blazor Server (.NET 10, InteractiveServer, SQLite, MudBlazor 9.4)
-
----
-
-## TL;DR
-
-Eine vollständige Migration auf Blazor WebAssembly ist **technisch möglich**, aber ein **erheblicher Umbau**. Der Aufwand liegt bei schätzungsweise **3–5 Wochen** für einen Entwickler. Der Hauptgrund: Blazor WASM läuft vollständig im Browser – kein direkter DB-Zugriff, keine Cookie-Auth serverseitig, keine gemeinsamen In-Process-Events zwischen Nutzern.
-
-**Empfehlung:** Hybrid-Modell (Blazor Auto oder WASM + ASP.NET Core API auf demselben Server) ist der pragmatischste Weg.
-
----
-
-## Was WASM bringt
-
-| Vorteil | Erklärung |
-|---|---|
-| Keine SignalR-Verbindung nötig | WASM lädt den Code einmalig herunter, kein dauerhafter WebSocket |
-| Besser skalierbar | Server hält keine Circuits pro User im Speicher |
-| Offline-fähig (theoretisch) | Progressive Web App möglich |
-| Geringere Serverauslastung | UI-Logik läuft im Browser |
-
-**Aber Achtung:** Der initiale Download ist größer (~10–20 MB .NET Runtime im Browser), erste Ladezeit spürbar langsamer als Blazor Server.
-
----
-
-## Aktuelle Blocker (nach Schwere)
-
-### 🔴 KRITISCH – muss komplett umgebaut werden
-
-#### 1. Datenbankzugriff – EF Core / SQLite
-
-Alle drei Services greifen direkt per `IDbContextFactory<TimetrackerDbContext>` auf die SQLite-DB zu:
-
-- `AuthService` → Login, Registrierung, User-CRUD
-- `TimetrackerService` → Arbeitstage, Pausen, Einstellungen, Urlaub, Überstunden
-- `HolidayService` → Feiertage speichern/lesen
-
-**WASM kann nicht direkt auf eine Datenbank zugreifen.** Browser hat keinen Dateisystemzugriff.
-
-→ **Lösung:** Alle Service-Methoden als REST-API-Endpoints auf dem Server exponieren. WASM-Client ruft diese per `HttpClient` auf.
-
-**Aufwand:** ~10–15 Tage (je nach gewähltem API-Stil: Minimal API vs. Controller)
-
----
-
-#### 2. Cookie-Authentifizierung
-
-Aktuell läuft der gesamte Auth-Flow serverseitig:
-- `POST /auth/login` → `HttpContext.SignInAsync()` → Cookie setzen
-- `GET /auth/logout` → `HttpContext.SignOutAsync()`
-- Blazor-Komponenten lesen den Cookie über `CascadingAuthenticationState`
-
-In WASM gibt es keinen direkten Zugriff auf `HttpContext`. Die Cookie-Auth muss weiterhin **serverseitig** verbleiben, aber das Login-Formular muss über die API kommunizieren.
-
-→ **Lösung A (einfacher):** Cookie-Auth beibehalten, aber Login-Formular als API-Call (kein HTML-Form-Post mehr). WASM erhält Auth-State über einen `/auth/me`-Endpoint.  
-→ **Lösung B (aufwändiger):** JWT-Token-Auth einführen, Token im Browser-Speicher halten.
-
-**Empfehlung:** Lösung A, da Cookie-Auth bereits implementiert ist und sicherer gegen XSS ist als localStorage-JWTs.
-
-**Aufwand:** ~3–4 Tage
-
----
-
-#### 3. Projektstruktur – neue Build-Konfiguration
-
-Aktuell: 1 Projekt (`Microsoft.NET.Sdk.Web`), alles in einem.
-
-WASM benötigt mindestens:
-- **`timetracker.Client`** – Blazor WASM-Projekt (läuft im Browser)
-- **`timetracker.Server`** – ASP.NET Core-Projekt (hostet API + WASM-App)
-- Optional: **`timetracker.Shared`** – DTOs/Models geteilt zwischen Client & Server
-
-Alle `@inject`-Direktiven, die auf Server-Services zeigen, müssen im Client auf `HttpClient`-basierte Services umgestellt werden.
-
-**Aufwand:** ~3–4 Tage (Projektaufspaltung, DI-Umverdrahtung)
-
----
-
-### ⚠️ MITTEL – umbaubar, aber aufwändig
-
-#### 4. UserNotificationService (Live-Updates)
-
-Aktuell: Singleton mit C#-Events, der zwischen Blazor Server-Circuits kommuniziert:
-- Admin löscht User → Event feuert → alle aktiven `MainLayout`-Instanzen reagieren
-- Neuer User registriert → `AdminUsers` aktualisiert sich live
-
-In WASM gibt es keine gemeinsamen In-Process-Events. Jeder Browser ist isoliert.
-
-→ **Lösung:** **SignalR Hub** einführen. Server sendet Push-Nachrichten an alle verbundenen Clients.
-
-```
-[Browser A – Admin]           [Server]            [Browser B – normaler User]
-    löscht User C   →   Hub.Clients.All.SendAsync   →   empfängt "UserDeleted(C)"
-                                                          → NavigateTo("/auth/logout")
-```
-
-**Aufwand:** ~2–3 Tage (Hub einrichten, Client-seitig `HubConnection` einbauen)
-
----
-
-#### 5. Formular-basiertes Login/Register
-
-Login und Registrierung verwenden aktuell native HTML-Forms (`method="post"`) die direkt an `/auth/login` und `/auth/register` posten. Das funktioniert in WASM nicht mehr sauber, weil WASM SPA-Navigation nutzt.
-
-→ **Lösung:** Login-Formular auf `@code`-basierten `HttpClient.PostAsync`-Call umstellen, Redirect über `NavigationManager`.
-
-**Aufwand:** ~1 Tag
-
----
-
-#### 6. Docker-Deployment
-
-Aktuell: 1 Container, alles drin.
-
-WASM + API = zwei Artefakte:
-- Die WASM-App sind statische Dateien (HTML/JS/WASM)
-- Die API läuft als ASP.NET Core-Server
-
-→ **Lösung A (einfach):** Hosted WASM – API-Server liefert auch die WASM-Dateien aus (1 Container, 1 Dockerfile, wie heute)  
-→ **Lösung B (komplex):** Getrennte Container (Nginx für WASM, API separat)
-
-**Empfehlung:** Lösung A (Hosted WASM) – minimaler Deployment-Overhead.
-
-**Aufwand:** ~0,5 Tage bei Lösung A
-
----
-
-### ✅ KEIN UMBAU NÖTIG
-
-| Komponente | Warum kein Umbau |
-|---|---|
-| **MudBlazor 9.4** | Vollständig WASM-kompatibel |
-| **Alle `.razor`-Seiten (UI)** | Markup bleibt identisch, nur `@inject` ändert sich |
-| **Entity Models** (User, WorkDay, etc.) | Können ins Shared-Projekt verschoben werden |
-| **HttpClient für Feiertage** (nager.at) | Funktioniert in WASM nativ |
-| **Business-Logik in Komponenten** | Bleibt unverändert |
-| **CSS / MudBlazor Theme** | Unverändert |
-
----
-
-## Gesamtaufwand-Schätzung
-
-| Aufgabe | Geschätzter Aufwand |
-|---|---|
-| Projektstruktur aufteilen (Client/Server/Shared) | 2–3 Tage |
-| REST-API für TimetrackerService | 4–5 Tage |
-| REST-API für AuthService + HolidayService | 2–3 Tage |
-| Cookie-Auth auf API-Flow umstellen | 2–3 Tage |
-| Client-Services (HttpClient-basiert) erstellen | 3–4 Tage |
-| SignalR für Live-Notifications | 2–3 Tage |
-| Login/Register-Formulare anpassen | 1 Tag |
-| Docker/Deployment anpassen | 0,5–1 Tag |
-| Testen & Debugging | 2–3 Tage |
-| **Gesamt** | **~18–26 Tage** |
-
----
-
-## Empfohlene Alternative: Blazor Auto
-
-.NET 8+ bietet **Blazor Auto**-Rendermodus: Seiten starten als Server-Rendering, wechseln dann automatisch zu WASM sobald die Runtime heruntergeladen ist. Das gibt sofortige Interaktivität (Server) + langfristig WASM-Performance.
-
-**Vorteil:** DB-Zugriff und Auth bleiben wie heute, kein API-Layer nötig.  
-**Aufwand:** ~3–5 Tage (Projektstruktur, Shared-Projekt, WASM-Client-Projekt anlegen).
-
-**Für dieses Projekt sehr empfehlenswert**, da:
-1. Minimaler Umbau der bestehenden Logik
-2. Spürbare Performance-Verbesserung nach erstem Laden
-3. Kein SignalR-Umbau notwendig (Server-Circuit bleibt beim ersten Laden aktiv)
-
----
-
-## Fazit
-
-| Option | Aufwand | Performance-Gewinn | Empfehlung |
-|---|---|---|---|
-| Blazor WASM (pure) | ~20–25 Tage | Hoch (nach erstem Laden) | Nur bei hoher Nutzerzahl sinnvoll |
-| Blazor Auto | ~3–5 Tage | Mittel-Hoch | ✅ **Empfohlen** |
-| Blazor Server (wie heute) | 0 | – | Gut für kleine Nutzerzahl |
-
-Für den aktuellen Use-Case (internes Uni-Tool, überschaubare Nutzerzahl) ist **Blazor Auto** das beste Kosten-Nutzen-Verhältnis. Eine vollständige WASM-Migration lohnt sich erst, wenn die App deutlich mehr parallele User hat oder offline-Fähigkeit gefordert wird.