feat: add navigation bar with progress indicator and backward navigation

- Created _navigation.html component with 5-step progress indicator
- Added German labels (E-Mail, Persönliche Daten, Motivation, Dokumente, Bestätigung)
- Implemented can_access_page() validation in routes.py
- Users can navigate backward to completed pages (data preserved)
- Sequential forward progression enforced (cannot skip ahead)
- Visual states: completed (green checkmark), current (blue), future (gray)
- Added comprehensive CSS styling with responsive design
- Updated base.html to include navigation component
- Updated page templates to pass current_page context
- Navigation appears on pages 2-5 only
- All 102 tests passing with no regressions

static/style.css

@@ -366,6 +366,123 @@ header h1 {
     margin: 20px 0;
 }
 
+/* Progress Navigation */
+.progress-navigation {
+    margin-bottom: 30px;
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+}
+
+.progress-steps {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    counter-reset: step;
+}
+
+.progress-step {
+    flex: 1;
+    text-align: center;
+    position: relative;
+}
+
+.progress-step:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    width: 100%;
+    height: 2px;
+    background-color: #ddd;
+    z-index: 0;
+}
+
+.progress-step.completed:not(:last-child)::after {
+    background-color: #28a745;
+}
+
+.progress-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    color: #666;
+    position: relative;
+    z-index: 1;
+}
+
+.progress-step.completed .progress-link {
+    color: #28a745;
+    cursor: pointer;
+}
+
+.progress-step.active .progress-link {
+    color: #007bff;
+    font-weight: bold;
+}
+
+.progress-step.disabled .progress-link {
+    color: #999;
+    cursor: not-allowed;
+}
+
+.progress-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 1.1em;
+    background-color: white;
+    border: 2px solid #ddd;
+    transition: all 0.2s;
+}
+
+.progress-step.completed .progress-icon {
+    background-color: #28a745;
+    border-color: #28a745;
+    color: white;
+}
+
+.progress-step.active .progress-icon {
+    background-color: #007bff;
+    border-color: #007bff;
+    color: white;
+}
+
+.progress-step.disabled .progress-icon {
+    background-color: #f8f9fa;
+    border-color: #ddd;
+    color: #999;
+}
+
+.progress-step.completed a.progress-link:hover .progress-icon {
+    transform: scale(1.1);
+    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
+}
+
+.progress-step.completed a.progress-link:hover {
+    color: #1e7e34;
+}
+
+.progress-label {
+    font-size: 0.85em;
+    display: block;
+    max-width: 100px;
+    word-wrap: break-word;
+}
+
+.progress-step.active .progress-label {
+    font-weight: bold;
+}
+
 /* Footer */
 footer {
     margin-top: 40px;
@@ -411,4 +528,33 @@ footer {
     .page-intro h2 {
         font-size: 1.2em;
     }
+
+    /* Progress Navigation Mobile */
+    .progress-navigation {
+        padding: 15px 10px;
+    }
+
+    .progress-steps {
+        flex-wrap: wrap;
+        gap: 15px;
+    }
+
+    .progress-step {
+        flex: 0 0 calc(50% - 8px);
+    }
+
+    .progress-step:not(:last-child)::after {
+        display: none;
+    }
+
+    .progress-icon {
+        width: 35px;
+        height: 35px;
+        font-size: 1em;
+    }
+
+    .progress-label {
+        font-size: 0.75em;
+        max-width: 80px;
+    }
 }