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

templates/_navigation.html

@@ -0,0 +1,80 @@
+{% if session_id and current_page and current_page >= 2 %}
+<nav class="progress-navigation" aria-label="Bewerbungsfortschritt">
+    <ol class="progress-steps">
+        <!-- Step 1: Email -->
+        <li class="progress-step {% if current_page == 1 %}active{% elif current_page > 1 %}completed{% else %}disabled{% endif %}">
+            {% if current_page >= 1 %}
+                <a href="{{ url_for('page1_email') }}" class="progress-link">
+                    <span class="progress-icon">{% if current_page > 1 %}✓{% else %}1{% endif %}</span>
+                    <span class="progress-label">E-Mail</span>
+                </a>
+            {% else %}
+                <span class="progress-link">
+                    <span class="progress-icon">1</span>
+                    <span class="progress-label">E-Mail</span>
+                </span>
+            {% endif %}
+        </li>
+
+        <!-- Step 2: Personal Info -->
+        <li class="progress-step {% if current_page == 2 %}active{% elif current_page > 2 %}completed{% else %}disabled{% endif %}">
+            {% if current_page >= 2 %}
+                <a href="{{ url_for('page2_personal', session_id=session_id) }}" class="progress-link">
+                    <span class="progress-icon">{% if current_page > 2 %}✓{% else %}2{% endif %}</span>
+                    <span class="progress-label">Daten</span>
+                </a>
+            {% else %}
+                <span class="progress-link">
+                    <span class="progress-icon">2</span>
+                    <span class="progress-label">Daten</span>
+                </span>
+            {% endif %}
+        </li>
+
+        <!-- Step 3: Motivation -->
+        <li class="progress-step {% if current_page == 3 %}active{% elif current_page > 3 %}completed{% else %}disabled{% endif %}">
+            {% if current_page >= 3 %}
+                <a href="{{ url_for('page3_motivation', session_id=session_id) }}" class="progress-link">
+                    <span class="progress-icon">{% if current_page > 3 %}✓{% else %}3{% endif %}</span>
+                    <span class="progress-label">Motivation</span>
+                </a>
+            {% else %}
+                <span class="progress-link">
+                    <span class="progress-icon">3</span>
+                    <span class="progress-label">Motivation</span>
+                </span>
+            {% endif %}
+        </li>
+
+        <!-- Step 4: Upload -->
+        <li class="progress-step {% if current_page == 4 %}active{% elif current_page > 4 %}completed{% else %}disabled{% endif %}">
+            {% if current_page >= 4 %}
+                <a href="{{ url_for('page4_upload', session_id=session_id) }}" class="progress-link">
+                    <span class="progress-icon">{% if current_page > 4 %}✓{% else %}4{% endif %}</span>
+                    <span class="progress-label">Dokumente</span>
+                </a>
+            {% else %}
+                <span class="progress-link">
+                    <span class="progress-icon">4</span>
+                    <span class="progress-label">Dokumente</span>
+                </span>
+            {% endif %}
+        </li>
+
+        <!-- Step 5: Confirmation -->
+        <li class="progress-step {% if current_page == 5 %}active{% elif current_page > 5 %}completed{% else %}disabled{% endif %}">
+            {% if current_page >= 5 %}
+                <a href="{{ url_for('page5_confirmation', session_id=session_id) }}" class="progress-link">
+                    <span class="progress-icon">{% if current_page > 5 %}✓{% else %}5{% endif %}</span>
+                    <span class="progress-label">Bestätigung</span>
+                </a>
+            {% else %}
+                <span class="progress-link">
+                    <span class="progress-icon">5</span>
+                    <span class="progress-label">Bestätigung</span>
+                </span>
+            {% endif %}
+        </li>
+    </ol>
+</nav>
+{% endif %}

templates/base.html

@@ -12,6 +12,9 @@
             <h1>{% block header %}Bewerbungsformular{% endblock %}</h1>
         </header>
 
+        <!-- Progress Navigation -->
+        {% include '_navigation.html' %}
+
         <main>
             {% with messages = get_flashed_messages(with_categories=true) %}
                 {% if messages %}

templates/page2_personal.html

@@ -1,12 +1,12 @@
 {% extends "base.html" %}
 
-{% block title %}Bewerbung - Persönliche Daten{% endblock %}
+{% block title %}Bewerbung - Daten{% endblock %}
 
 {% block header %}Bewerbung: {{ job_name }}{% endblock %}
 
 {% block content %}
 <div class="page-intro">
-    <h2>Schritt 1 von 3: Persönliche Daten</h2>
+    <h2>Schritt 1 von 3: Daten</h2>
     <p>Bitte geben Sie Ihre persönlichen Informationen ein. Alle Felder mit * sind Pflichtfelder.</p>
 </div>
 

templates/page3_motivation.html

@@ -8,6 +8,7 @@
 <div class="page-intro">
     <h2>Schritt 2 von 3: Motivation und Qualifikationen</h2>
     <p>Bitte beantworten Sie die folgenden Fragen. Alle Angaben sind optional, helfen uns aber, Sie besser kennenzulernen.</p>
+    <p>Falls sie ein Motivationsschreiben einreichen wollen haben Sie im nächsten Schritt die Möglichkeit dazu.</p>
     <p><small>Maximal ca. 3000 Zeichen pro Antwort (etwa eine A4-Seite)</small></p>
 </div>