Huge updates

timetracker.Client/Components/Layout/MainLayout.razor

@@ -13,7 +13,11 @@
 
 <MudLayout>
     <MudAppBar Elevation="0" Style="background: #0F172A; border-bottom: 1px solid rgba(255, 255, 255, 0.08);">
-        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="ToggleDrawer" Class="d-flex d-md-none mr-2" />
+        <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"
@@ -21,9 +25,13 @@
                        Class="mr-2" />
     </MudAppBar>
 
-    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Never" Elevation="0" Variant="DrawerVariant.Mini" OpenMiniOnHover="false" Class="modern-drawer">
-        <NavMenu OnToggleDrawer="ToggleDrawer" />
-    </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">

timetracker.Client/Components/Layout/NavMenu.razor

@@ -1,4 +1,5 @@
-<div class="nav-container">
+@inject IJSRuntime JSRuntime
+<div class="nav-container onboarding-nav-menu">
     @* --- Brand / Logo Section --- *@
     <div class="nav-header">
         <div class="logo-wrapper">
@@ -50,18 +51,20 @@
     <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>
+                <NavLink href="/profile" class="user-profile-link">
+                    <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>
-                    <div class="user-info">
-                        <span class="user-name">@context.User.Identity?.Name</span>
-                        <span class="user-status">Online</span>
-                    </div>
-                </div>
+                </NavLink>
             </Authorized>
         </AuthorizeView>
 
@@ -74,8 +77,12 @@
                 </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 Href="/changelog" Icon="@Icons.Material.Filled.NewReleases" Class="custom-nav-link version-link" OnClick="ClearBadge">
+                    <span class="version-text">Version @timetracker.Client.Components.Pages.Changelog.LatestVersion</span>
+                    @if (_showVersionBadge)
+                    {
+                        <span class="version-badge">1</span>
+                    }
                 </MudNavLink>
             </MudTooltip>
         </MudNavMenu>
@@ -85,6 +92,33 @@
 @code {
     [Parameter] public EventCallback OnToggleDrawer { get; set; }
 
+    private bool _showVersionBadge;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            try
+            {
+                var lastSeen = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "lastSeenVersion");
+                var latest = timetracker.Client.Components.Pages.Changelog.LatestVersion;
+                var isHighlighted = timetracker.Client.Components.Pages.Changelog.IsLatestHighlighted;
+
+                _showVersionBadge = isHighlighted && lastSeen != latest;
+                StateHasChanged();
+            }
+            catch
+            {
+                // Ignored in SSR
+            }
+        }
+    }
+
+    private void ClearBadge()
+    {
+        _showVersionBadge = false;
+    }
+
     private string GetInitials(string? name)
     {
         if (string.IsNullOrWhiteSpace(name))

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

@@ -119,26 +119,54 @@
 }
 
 /* NavLink active state (Fixes active color contrast issue) */
-::deep .custom-nav-link.active {
+::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-icon-default {
+::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 */
+/* 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 .mud-nav-link-icon-default {
+
+::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);
@@ -149,7 +177,19 @@
     background: rgba(15, 23, 42, 0.2);
 }
 
-/* User profile card */
+/* User profile link */
+.user-profile-link {
+    text-decoration: none !important;
+    color: inherit !important;
+    display: block;
+    cursor: pointer;
+}
+
+.user-profile-link:hover .user-profile-card {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+}
+
 .user-profile-card {
     display: flex;
     align-items: center;
@@ -220,6 +260,37 @@
 }
 ::deep .version-link .mud-nav-link-text {
     font-size: 0.75rem !important;
+    display: flex !important;
+    align-items: center;
+    gap: 8px;
+}
+
+::deep .version-badge {
+    background-color: #EF4444;
+    color: white;
+    font-size: 0.65rem;
+    font-weight: 700;
+    min-width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
+    animation: pulse-badge 2s infinite;
+}
+
+@keyframes pulse-badge {
+    0% {
+        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+    }
 }
 
 /* --- COLLAPSED DRAWER (MINI STATE) STYLES --- */

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,7 @@
 @page "/changelog"
 @rendermode InteractiveWebAssembly
-@attribute [Authorize]
+@attribute [AllowAnonymous]
+@inject IJSRuntime JSRuntime
 
 <PageTitle>Changelog – Timetracker</PageTitle>
 
@@ -18,7 +19,7 @@
         </MudStack>
     </MudPaper>
 
-    @foreach (var release in _releases)
+    @foreach (var release in Releases)
     {
         <MudCard Elevation="2" Class="rounded-xl">
             <MudCardContent>
@@ -55,24 +56,23 @@
 </MudStack>
 
 @code {
-    private record ChangeEntry(string Tag, string Text);
-    private record Release(string Version, string Date, bool IsLatest, List<ChangeEntry> Entries);
+    public record ChangeEntry(string Tag, string Text);
+    public record Release(string Version, string Date, bool IsLatest, List<ChangeEntry> Entries, bool Highlighted = false);
 
-    private static Color GetTagColor(string tag) => tag switch
-    {
-        "Neu"     => Color.Success,
-        "Fix"     => Color.Error,
-        "Upgrade" => Color.Info,
-        _         => Color.Default
-    };
-
-    private readonly List<Release> _releases =
+    public static readonly List<Release> Releases =
     [
+        new("1.5", "25.06.2026", true,
+        [
+            new("Neu",     "Userprofil angelegt"),
+            new("Upgrade",     "Früheste Gehenszeit wird angezeigt"),
+            new("Upgrade", "Pausen werden dynamisch berechnet"),
+        ], Highlighted = 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("Upgrade", "Changed coloring"),
         ]),
         new("1.3", "08.06.2026", false,
         [
@@ -107,4 +107,30 @@
             new("Neu", "Registrierung und Login"),
         ]),
     ];
+
+    public static string LatestVersion => Releases.FirstOrDefault()?.Version ?? "";
+    public static bool IsLatestHighlighted => Releases.FirstOrDefault()?.Highlighted ?? false;
+
+    private static Color GetTagColor(string tag) => tag switch
+    {
+        "Neu"     => Color.Success,
+        "Fix"     => Color.Error,
+        "Upgrade" => Color.Info,
+        _         => Color.Default
+    };
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            try
+            {
+                await JSRuntime.InvokeVoidAsync("localStorage.setItem", "lastSeenVersion", LatestVersion);
+            }
+            catch
+            {
+                // Ignored in SSR
+            }
+        }
+    }
 }

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,7 +21,7 @@ else
     <MudStack Spacing="3">
 
         @* ── Wochen-Header ── *@
-        <MudPaper Elevation="4" Class="pa-5 rounded-xl"
+        <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"
@@ -93,7 +94,7 @@ 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(14,165,233,0.07) 0%, transparent 100%);" : "")">
                         <CardHeaderContent>
@@ -177,13 +178,13 @@ else
                                         <MudText Color="Color.Secondary" Class="mb-1">−</MudText>
                                         <MudStack Spacing="0">
                                             <MudText Typo="Typo.overline" Color="Color.Secondary">Pausen</MudText>
-                                            <MudText Typo="Typo.body1">@FormatTs(day.TotalBreakTime)</MudText>
+                                            <MudText Typo="Typo.body1">@FormatTs(GetEffectiveBreakTime(day))</MudText>
                                         </MudStack>
                                         <MudText Color="Color.Secondary" Class="mb-1">=</MudText>
                                         <MudStack Spacing="0">
                                             <MudText Typo="Typo.overline" Color="Color.Secondary">Netto</MudText>
                                             <MudText Typo="Typo.body1" Color="Color.Primary" Style="font-weight:700">
-                                                @FormatTs(day.NetWork!.Value)
+                                                @FormatTs(GetEffectiveNetWork(day)!.Value)
                                             </MudText>
                                         </MudStack>
                                         <MudDivider Vertical="true" FlexItem="true" Style="height:36px" />
@@ -191,6 +192,30 @@ else
                                             <MudText Typo="Typo.overline" Color="Color.Secondary">Soll</MudText>
                                             <MudText Typo="Typo.body1">@FormatTs(TimeSpan.FromHours(_settings.DailyTargetHours))</MudText>
                                         </MudStack>
+                                        <MudDivider Vertical="true" FlexItem="true" Style="height:36px" />
+                                        <MudStack Spacing="0">
+                                            <MudText Typo="Typo.overline" Color="Color.Secondary">Soll-Ende</MudText>
+                                            <MudText Typo="Typo.body1">@FormatTimeSpan(CalculateEarliestDeparture(day)) Uhr</MudText>
+                                        </MudStack>
+                                    </MudStack>
+                                </MudItem>
+                            }
+                            else if (day.Start.HasValue)
+                            {
+                                <MudItem xs="12" md="8">
+                                    <MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center" Class="h-100 pl-1">
+                                        <MudStack Spacing="0">
+                                            <MudText Typo="Typo.overline" Style="color: var(--mud-palette-info);">Früheste Gehenszeit</MudText>
+                                            <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="1">
+                                                <MudIcon Icon="@Icons.Material.Filled.ExitToApp" Color="Color.Info" Size="Size.Small" />
+                                                <MudText Typo="Typo.body1" Color="Color.Info" Style="font-weight:700">
+                                                    @FormatTimeSpan(CalculateEarliestDeparture(day)) Uhr
+                                                </MudText>
+                                                <MudText Typo="Typo.caption" Color="Color.Secondary" Class="ml-2">
+                                                     (Bei Soll: @FormatTs(TimeSpan.FromHours(_settings.DailyTargetHours))h + @((int)GetRequiredBreakForTarget(day).TotalMinutes) Min. Pause)
+                                                 </MudText>
+                                            </MudStack>
+                                        </MudStack>
                                     </MudStack>
                                 </MudItem>
                             }
@@ -199,7 +224,7 @@ else
                         @* ── Fortschrittsbalken ── *@
                         @if (progressPct >= 0)
                         {
-                            <MudTooltip Text="@($"Netto {FormatTs(day.NetWork ?? TimeSpan.Zero)} von {FormatTs(TimeSpan.FromHours(_settings.DailyTargetHours))} Soll")">
+                            <MudTooltip Text="@($"Netto {FormatTs(GetEffectiveNetWork(day) ?? TimeSpan.Zero)} von {FormatTs(TimeSpan.FromHours(_settings.DailyTargetHours))} Soll")">
                                 <MudProgressLinear Value="@Math.Min(progressPct, 100)"
                                                    Color="@(progressPct >= 100 ? Color.Success : Color.Primary)"
                                                    Rounded="true" Class="mt-3" Style="height:6px" />
@@ -269,7 +294,7 @@ else
         }
 
         @* ── Wochensumme ── *@
-        <MudPaper Elevation="4" Class="pa-5 rounded-xl"
+        <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)" />
@@ -306,7 +331,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 +353,11 @@ else
         </MudPaper>
 
     </MudStack>
+
+    @if (_showOnboarding)
+    {
+        <OnboardingTour OnFinished="HandleOnboardingFinished" />
+    }
 }
 
 @code {
@@ -347,6 +377,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));
 
@@ -364,9 +395,26 @@ else
         
         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;
@@ -452,21 +500,48 @@ else
     }
 
     // ── Berechnungen ─────────────────────────────────────────────
-    private TimeSpan? GetOvertime(DayVm day) =>
-        day.NetWork.HasValue ? day.NetWork.Value - TimeSpan.FromHours(_settings.DailyTargetHours) : null;
+    private TimeSpan GetEffectiveBreakTime(DayVm day)
+    {
+        var enteredBreak = day.Breaks
+            .Where(b => b.Duration.HasValue)
+            .Aggregate(TimeSpan.Zero, (s, b) => s + b.Duration!.Value);
+
+        if (!day.Start.HasValue || !day.End.HasValue)
+            return enteredBreak;
+
+        var gross = day.End.Value - day.Start.Value;
+        int minMinutes = gross.TotalHours >= 9.0 ? 45 : 30;
+        int finalMin = Math.Max(minMinutes, _settings.MinimumBreakMinutes);
+        var minBreak = TimeSpan.FromMinutes(finalMin);
+
+        return enteredBreak > minBreak ? enteredBreak : minBreak;
+    }
+
+    private TimeSpan? GetEffectiveNetWork(DayVm day)
+    {
+        if (!day.GrossWork.HasValue) return null;
+        return day.GrossWork.Value - GetEffectiveBreakTime(day);
+    }
+
+    private TimeSpan? GetOvertime(DayVm day)
+    {
+        var net = GetEffectiveNetWork(day);
+        return net.HasValue ? net.Value - TimeSpan.FromHours(_settings.DailyTargetHours) : null;
+    }
 
     private int GetProgressPercent(DayVm day)
     {
-        if (!day.NetWork.HasValue || _settings.DailyTargetHours <= 0) return -1;
-        return (int)(day.NetWork.Value.TotalHours / _settings.DailyTargetHours * 100);
+        var net = GetEffectiveNetWork(day);
+        if (!net.HasValue || _settings.DailyTargetHours <= 0) return -1;
+        return (int)(net.Value.TotalHours / _settings.DailyTargetHours * 100);
     }
 
-    private static string GetBorderColor(DayVm day, bool isWorkDay, List<string> errors)
+    private string GetBorderColor(DayVm day, bool isWorkDay, List<string> errors)
     {
         if (!isWorkDay) return "#CFD8DC";
         if (errors.Count > 0) return "#EF5350";
         if (!day.Start.HasValue && !day.End.HasValue) return "#B0BEC5";
-        if (!day.NetWork.HasValue) return "#B0BEC5";
+        if (!GetEffectiveNetWork(day).HasValue) return "#B0BEC5";
         return "#4CAF50";
     }
 
@@ -493,11 +568,17 @@ else
                     yield return $"Pause {i + 1} und Pause {j + 1} überschneiden sich.";
             }
         }
+
+        var net = GetEffectiveNetWork(day);
+        if (net.HasValue && net.Value.TotalHours > 10.0)
+        {
+            yield return "Die tägliche Arbeitszeit überschreitet das gesetzliche Maximum von 10 Stunden!";
+        }
     }
 
     private TimeSpan WeekGross => _days.Aggregate(TimeSpan.Zero, (s, d) => s + (d.GrossWork ?? TimeSpan.Zero));
-    private TimeSpan WeekBreaks => _days.Aggregate(TimeSpan.Zero, (s, d) => s + d.TotalBreakTime);
-    private TimeSpan WeekNet => _days.Aggregate(TimeSpan.Zero, (s, d) => s + (d.NetWork ?? TimeSpan.Zero));
+    private TimeSpan WeekBreaks => _days.Aggregate(TimeSpan.Zero, (s, d) => s + GetEffectiveBreakTime(d));
+    private TimeSpan WeekNet => _days.Aggregate(TimeSpan.Zero, (s, d) => s + (GetEffectiveNetWork(d) ?? TimeSpan.Zero));
     private TimeSpan WeekOvertime => _days.Aggregate(TimeSpan.Zero, (s, d) => s + (GetOvertime(d) ?? TimeSpan.Zero));
 
     private static string FormatTs(TimeSpan ts, bool sign = false)
@@ -508,6 +589,34 @@ else
         return $"{prefix}{(int)abs.TotalHours}:{abs.Minutes:D2}";
     }
 
+    private TimeSpan GetRequiredBreakForTarget(DayVm day)
+    {
+        var targetNet = _settings.DailyTargetHours;
+        var minMinutes = targetNet >= 8.5 ? 45 : 30;
+        var requiredBreak = TimeSpan.FromMinutes(Math.Max(minMinutes, _settings.MinimumBreakMinutes));
+
+        var enteredBreak = day.Breaks
+            .Where(b => b.Duration.HasValue)
+            .Aggregate(TimeSpan.Zero, (s, b) => s + b.Duration!.Value);
+
+        return enteredBreak > requiredBreak ? enteredBreak : requiredBreak;
+    }
+
+    private TimeSpan CalculateEarliestDeparture(DayVm day)
+    {
+        if (!day.Start.HasValue) return TimeSpan.Zero;
+        var target = TimeSpan.FromHours(_settings.DailyTargetHours);
+        var finalBreak = GetRequiredBreakForTarget(day);
+        return day.Start.Value + target + finalBreak;
+    }
+
+    private static string FormatTimeSpan(TimeSpan? ts)
+    {
+        if (!ts.HasValue) return "";
+        var hours = ((int)ts.Value.TotalHours) % 24;
+        return $"{hours:D2}:{ts.Value.Minutes:D2}";
+    }
+
     // ── ViewModels ────────────────────────────────────────────────
     private sealed class DayVm
     {

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>
 
@@ -107,6 +108,11 @@
                                           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"
@@ -114,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" />
@@ -134,6 +140,7 @@
     private string? _error;
     private bool _loading;
     private string _honeypot = "";
+    private bool _acceptAgb;
 
     private readonly AuthModel _loginModel = new();
     private readonly AuthModel _registerModel = new();
@@ -189,6 +196,11 @@
 
     private async Task HandleRegister()
     {
+        if (!_acceptAgb)
+        {
+            _error = "Du musst die AGB akzeptieren.";
+            return;
+        }
         _loading = true;
         _error = null;
         try
@@ -196,6 +208,7 @@
             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

@@ -210,7 +210,10 @@ else
                     .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()));
-                net = gross - breaks;
+                var minMinutes = gross.TotalHours >= 9.0 ? 45 : 30;
+                var minBreak = TimeSpan.FromMinutes(Math.Max(minMinutes, _settings.MinimumBreakMinutes));
+                var finalBreak = breaks > minBreak ? breaks : minBreak;
+                net = gross - finalBreak;
                 if (net < TimeSpan.Zero) net = null;
             }
 

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/Profile.razor

@@ -0,0 +1,281 @@
+@page "/profile"
+@rendermode InteractiveWebAssembly
+@attribute [Authorize]
+@using System.Security.Claims
+@inject IAuthService AuthService
+@inject ITimetrackerService TrackerService
+@inject ISnackbar Snackbar
+@inject AuthenticationStateProvider AuthStateProvider
+@inject NavigationManager Nav
+
+<PageTitle>Benutzerprofil – Timetracker</PageTitle>
+
+@if (_loading)
+{
+    <MudStack AlignItems="AlignItems.Center" Class="mt-16">
+        <MudProgressCircular Color="Color.Primary" Indeterminate="true" Size="Size.Large" />
+        <MudText Color="Color.Secondary">Lade Profil…</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.AccountCircle" Style="color:white; font-size:2.5rem" />
+                <MudStack Spacing="0">
+                    <MudText Typo="Typo.h5" Style="color:white; font-weight:700">Mein Profil</MudText>
+                    <MudText Typo="Typo.caption" Style="color:rgba(255,255,255,0.72)">
+                        Persönliche Details verwalten und Account sichern
+                    </MudText>
+                </MudStack>
+            </MudStack>
+        </MudPaper>
+
+        <MudGrid Spacing="4">
+
+            @* ── Übersicht & Details ── *@
+            <MudItem xs="12" md="4">
+                <MudCard Elevation="3" Class="rounded-xl h-100">
+                    <MudCardContent>
+                        <MudStack AlignItems="AlignItems.Center" Class="py-6" Spacing="3">
+                            <MudAvatar Style="width:96px; height:96px; font-size:2rem; font-weight:700; background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%); color: white;">
+                                @GetInitials(_username)
+                            </MudAvatar>
+                            <MudStack AlignItems="AlignItems.Center" Spacing="0">
+                                <MudText Typo="Typo.h6" Style="font-weight:700">@_username</MudText>
+                                <MudText Typo="Typo.caption" Color="Color.Secondary">@(_isAdmin ? "Administrator" : "Standardbenutzer")</MudText>
+                            </MudStack>
+                        </MudStack>
+
+                        <MudDivider Class="my-3" />
+
+                        <MudStack Spacing="2" Class="pa-2">
+                            <MudStack Row="true" Justify="Justify.SpaceBetween">
+                                <MudText Typo="Typo.body2" Color="Color.Secondary">Benutzer-ID</MudText>
+                                <MudText Typo="Typo.body2"><b>#@_userId</b></MudText>
+                            </MudStack>
+                            <MudStack Row="true" Justify="Justify.SpaceBetween">
+                                <MudText Typo="Typo.body2" Color="Color.Secondary">Gleitzeit-Saldo</MudText>
+                                <MudText Typo="Typo.body2" Color="@(_overtime >= TimeSpan.Zero ? Color.Success : Color.Warning)">
+                                    <b>@FormatTs(_overtime, sign: true)</b>
+                                </MudText>
+                            </MudStack>
+                            <MudStack Row="true" Justify="Justify.SpaceBetween">
+                                <MudText Typo="Typo.body2" Color="Color.Secondary">Sollstunden / Tag</MudText>
+                                <MudText Typo="Typo.body2"><b>@_settings.DailyTargetHours h</b></MudText>
+                            </MudStack>
+                        </MudStack>
+                    </MudCardContent>
+                </MudCard>
+            </MudItem>
+
+            @* ── Einstellungen verwalten ── *@
+            <MudItem xs="12" md="8">
+                <MudStack Spacing="4">
+
+                    @* Benutzername ändern *@
+                    <MudCard Elevation="3" Class="rounded-xl">
+                        <MudCardHeader>
+                            <CardHeaderContent>
+                                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
+                                    <MudIcon Icon="@Icons.Material.Filled.Badge" Color="Color.Primary" />
+                                    <MudText Typo="Typo.h6" Style="font-weight:600">Benutzername ändern</MudText>
+                                </MudStack>
+                            </CardHeaderContent>
+                        </MudCardHeader>
+                        <MudCardContent>
+                            <MudForm @ref="_renameForm" @bind-IsValid="_renameIsValid">
+                                <MudStack Spacing="3">
+                                    <MudTextField @bind-Value="_newUsername"
+                                                  Label="Neuer Benutzername"
+                                                  Variant="Variant.Outlined"
+                                                  Required="true"
+                                                  RequiredError="Bitte gib einen Benutzernamen ein."
+                                                  Validation="@(new Func<string, string?>(ValidateUsername))" />
+                                    <MudButton Variant="Variant.Filled"
+                                               Color="Color.Primary"
+                                               OnClick="HandleRename"
+                                               Disabled="!_renameIsValid || _newUsername == _username"
+                                               Class="align-self-start rounded-lg py-2 px-4"
+                                               StartIcon="@Icons.Material.Filled.Save">
+                                        Speichern
+                                    </MudButton>
+                                </MudStack>
+                            </MudForm>
+                        </MudCardContent>
+                    </MudCard>
+
+                    @* Passwort ändern *@
+                    <MudCard Elevation="3" Class="rounded-xl">
+                        <MudCardHeader>
+                            <CardHeaderContent>
+                                <MudStack Row="true" AlignItems="AlignItems.Center" Spacing="2">
+                                    <MudIcon Icon="@Icons.Material.Filled.Lock" Color="Color.Primary" />
+                                    <MudText Typo="Typo.h6" Style="font-weight:600">Passwort ändern</MudText>
+                                </MudStack>
+                            </CardHeaderContent>
+                        </MudCardHeader>
+                        <MudCardContent>
+                            <MudForm @ref="_passwordForm" @bind-IsValid="_passwordIsValid">
+                                <MudStack Spacing="3">
+                                    <MudTextField @bind-Value="_currentPassword"
+                                                  Label="Aktuelles Passwort"
+                                                  InputType="InputType.Password"
+                                                  Variant="Variant.Outlined"
+                                                  Required="true"
+                                                  RequiredError="Bitte gib dein aktuelles Passwort ein." />
+                                    <MudTextField @bind-Value="_newPassword"
+                                                  Label="Neues Passwort"
+                                                  InputType="InputType.Password"
+                                                  Variant="Variant.Outlined"
+                                                  Required="true"
+                                                  RequiredError="Bitte gib dein neues Passwort ein."
+                                                  Validation="@(new Func<string, string?>(ValidatePassword))" />
+                                    <MudTextField @bind-Value="_confirmPassword"
+                                                  Label="Neues Passwort bestätigen"
+                                                  InputType="InputType.Password"
+                                                  Variant="Variant.Outlined"
+                                                  Required="true"
+                                                  RequiredError="Bitte bestätige dein neues Passwort."
+                                                  Validation="@(new Func<string, string?>(ValidateConfirmPassword))" />
+                                    <MudButton Variant="Variant.Filled"
+                                               Color="Color.Primary"
+                                               OnClick="HandleChangePassword"
+                                               Disabled="!_passwordIsValid"
+                                               Class="align-self-start rounded-lg py-2 px-4"
+                                               StartIcon="@Icons.Material.Filled.VpnKey">
+                                        Passwort ändern
+                                    </MudButton>
+                                </MudStack>
+                            </MudForm>
+                        </MudCardContent>
+                    </MudCard>
+
+                </MudStack>
+            </MudItem>
+
+        </MudGrid>
+
+    </MudStack>
+}
+
+@code {
+    private bool _loading = true;
+    private int _userId;
+    private string _username = "";
+    private string _newUsername = "";
+    private bool _isAdmin;
+    private AppSettings _settings = new();
+    private TimeSpan _overtime;
+
+    // Formulare
+    private MudForm? _renameForm;
+    private bool _renameIsValid;
+    private MudForm? _passwordForm;
+    private bool _passwordIsValid;
+
+    // Passwörter
+    private string _currentPassword = "";
+    private string _newPassword = "";
+    private string _confirmPassword = "";
+
+    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);
+        _username = authState.User.Identity?.Name ?? "";
+        _newUsername = _username;
+        _isAdmin = _username.Equals("marc", StringComparison.OrdinalIgnoreCase);
+
+        _settings = await TrackerService.GetSettingsAsync(_userId);
+        _overtime = await TrackerService.GetTotalOvertimeAsync(_userId, _settings);
+        _loading = false;
+    }
+
+    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();
+    }
+
+    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}";
+    }
+
+    // Validierungen
+    private string? ValidateUsername(string val)
+    {
+        if (string.IsNullOrWhiteSpace(val) || val.Length < 3)
+            return "Benutzername muss mindestens 3 Zeichen lang sein.";
+        return null;
+    }
+
+    private string? ValidatePassword(string val)
+    {
+        if (string.IsNullOrWhiteSpace(val) || val.Length < 6)
+            return "Passwort muss mindestens 6 Zeichen lang sein.";
+        return null;
+    }
+
+    private string? ValidateConfirmPassword(string val)
+    {
+        if (val != _newPassword)
+            return "Die Passwörter stimmen nicht überein.";
+        return null;
+    }
+
+    // Aktionen
+    private async Task HandleRename()
+    {
+        if (_renameForm == null) return;
+        await _renameForm.ValidateAsync();
+        if (!_renameForm.IsValid) return;
+
+        var error = await AuthService.RenameUserAsync(_userId, _newUsername);
+        if (error != null)
+        {
+            Snackbar.Add(error, Severity.Error);
+        }
+        else
+        {
+            Snackbar.Add("Benutzername erfolgreich geändert. Bitte melde dich ggf. neu an, um alle Anzeigen zu aktualisieren.", Severity.Success);
+            _username = _newUsername;
+            // Umleitung zur Startseite, um die neue Identity zu laden
+            Nav.NavigateTo("/", forceLoad: true);
+        }
+    }
+
+    private async Task HandleChangePassword()
+    {
+        if (_passwordForm == null) return;
+        await _passwordForm.ValidateAsync();
+        if (!_passwordForm.IsValid) return;
+
+        var error = await AuthService.ChangePasswordAsync(_userId, _currentPassword, _newPassword);
+        if (error != null)
+        {
+            Snackbar.Add(error, Severity.Error);
+        }
+        else
+        {
+            Snackbar.Add("Passwort erfolgreich geändert.", Severity.Success);
+            _currentPassword = "";
+            _newPassword = "";
+            _confirmPassword = "";
+            if (_passwordForm != null) await _passwordForm.ResetAsync();
+        }
+    }
+}

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>
 
@@ -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 ── *@
@@ -578,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

@@ -317,7 +317,10 @@ else
                             .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;
+                        var minMinutes = gross.TotalHours >= 9.0 ? 45 : 30;
+                        var minBreak = TimeSpan.FromMinutes(Math.Max(minMinutes, _settings.MinimumBreakMinutes));
+                        var finalBreak = breakTotal > minBreak ? breakTotal : minBreak;
+                        worked = (gross - finalBreak).TotalHours;
                         if (worked < 0) worked = 0.0;
                     }
                 }

timetracker.Client/Services/ClientAuthService.cs

@@ -71,4 +71,14 @@ public class ClientAuthService : IAuthService
         }
         return null;
     }
+
+    public async Task<string?> ChangePasswordAsync(int userId, string currentPassword, string newPassword)
+    {
+        var response = await _http.PutAsJsonAsync($"api/users/{userId}/change-password", new { CurrentPassword = currentPassword, NewPassword = newPassword });
+        if (!response.IsSuccessStatusCode)
+        {
+            return await response.Content.ReadAsStringAsync();
+        }
+        return null;
+    }
 }

timetracker.Server/Components/App.razor

@@ -13,6 +13,15 @@
     <ImportMap />
     <link rel="icon" type="image/svg+xml" href="favicon.svg" />
     <link rel="alternate icon" type="image/png" href="favicon.png" />
+    <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>
 
@@ -20,6 +29,25 @@
     <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,6 +55,26 @@ public class AuthService(IDbContextFactory<TimetrackerDbContext> factory, UserNo
         return null;
     }
 
+    public async Task<string?> ChangePasswordAsync(int userId, string currentPassword, string newPassword)
+    {
+        if (string.IsNullOrWhiteSpace(newPassword) || newPassword.Length < 6)
+            return "Passwort muss mindestens 6 Zeichen lang sein.";
+
+        await using var db = await factory.CreateDbContextAsync();
+        var user = await db.Users.FindAsync(userId);
+        if (user == null) return "Benutzer nicht gefunden.";
+
+        if (!VerifyPassword(currentPassword, user.PasswordHash, user.PasswordSalt))
+            return "Das aktuelle Passwort ist nicht korrekt.";
+
+        var (hash, salt) = HashPassword(newPassword);
+        user.PasswordHash = hash;
+        user.PasswordSalt = salt;
+
+        await db.SaveChangesAsync();
+        return null;
+    }
+
     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.");

timetracker.Server/Data/TimetrackerService.cs

@@ -173,7 +173,10 @@ public class TimetrackerService(IDbContextFactory<TimetrackerDbContext> factory)
                         .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()));
-                    actual = (gross - breakTotal).TotalHours;
+                    var minMinutes = gross.TotalHours >= 9.0 ? 45 : 30;
+                    var minBreak = TimeSpan.FromMinutes(Math.Max(minMinutes, settings.MinimumBreakMinutes));
+                    var finalBreak = breakTotal > minBreak ? breakTotal : minBreak;
+                    actual = (gross - finalBreak).TotalHours;
                     if (actual < 0) actual = 0.0;
                 }
             }

timetracker.Server/Program.cs

@@ -243,6 +243,16 @@ usersApi.MapPut("/{userId:int}/rename", async (int userId, [FromBody] RenameRequ
     return Results.Ok();
 });
 
+usersApi.MapPut("/{userId:int}/change-password", async (int userId, [FromBody] ChangePasswordRequest req, IAuthService authService) =>
+{
+    var error = await authService.ChangePasswordAsync(userId, req.CurrentPassword, req.NewPassword);
+    if (error != null)
+    {
+        return Results.BadRequest(error);
+    }
+    return Results.Ok();
+});
+
 // ── Timetracker-API-Endpoints (Protected) ─────────────────────────────────────
 var trackerApi = app.MapGroup("/api/tracker").RequireAuthorization();
 
@@ -362,3 +372,4 @@ app.Run();
 public record LoginRequest(string Username, string Password);
 public record RegisterRequest(string Username, string Password, string? Honeypot = null);
 public record RenameRequest(string Username);
+public record ChangePasswordRequest(string CurrentPassword, string NewPassword);

timetracker.Shared/IAuthService.cs

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