"""Companion Dashboard - HTML Template."""
def get_companion_html() -> str:
    """HTML Template für das Companion Dashboard."""
    return """
<!-- Companion Panel -->
<div class="panel panel-companion" id="panel-companion" style="display: none;">
    <div class="companion-container" id="companionDashboard">

        <!-- Mode Toggle -->
        <div class="mode-toggle">
            <button class="mode-btn active" id="modeCompanion" onclick="setMode('companion')">
                Begleiter
            </button>
            <button class="mode-btn" id="modeLesson" onclick="setMode('lesson')">
                Stunde
            </button>
            <button class="mode-btn" id="modeClassic" onclick="setMode('classic')">
                Klassisch
            </button>
        </div>

        <!-- Kontext-Info Zeile -->
        <div class="context-info" id="contextInfo">
            <span>📅 <span id="ctxYear">—</span></span>
            <span class="separator">·</span>
            <span>📍 <span id="ctxState">—</span></span>
            <span class="separator">·</span>
            <span>Woche <span id="ctxWeek">—</span></span>
        </div>

        <!-- Header -->
        <div class="companion-header">
            <h1>Was ist jetzt wichtig?</h1>
            <span class="phase-badge" id="phaseBadge">Lädt...</span>
        </div>

        <!-- Phase Indicator -->
        <div class="phase-indicator">
            <div class="phase-timeline" id="phaseTimeline">
                <!-- Dynamisch gefüllt -->
            </div>
        </div>

        <!-- Stats Grid -->
        <div class="stats-grid" id="statsGrid">
            <div class="stat-card">
                <div class="stat-value" id="statClasses">0</div>
                <div class="stat-label">Klassen</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="statStudents">0</div>
                <div class="stat-label">Schüler</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="statUnits">0</div>
                <div class="stat-label">Lerneinheiten</div>
            </div>
            <div class="stat-card">
                <div class="stat-value" id="statGrades">0</div>
                <div class="stat-label">Noten</div>
            </div>
        </div>

        <!-- Progress Card -->
        <div class="progress-card" id="progressCard">
            <div class="progress-header">
                <span class="progress-title">Fortschritt in dieser Phase</span>
                <span class="progress-percentage" id="progressPercent">0%</span>
            </div>
            <div class="progress-bar-container">
                <div class="progress-bar-fill" id="progressBar" style="width: 0%"></div>
            </div>
            <div class="progress-milestones" id="progressMilestones">
                0 von 0 Meilensteinen erreicht
            </div>
        </div>

        <!-- Suggestions -->
        <div class="suggestions-section">
            <div class="section-title">
                <span class="material-icons">lightbulb</span>
                Empfohlene Aktionen
            </div>
            <div id="suggestionsList">
                <!-- Dynamisch gefüllt -->
            </div>
        </div>

        <!-- Events -->
        <div class="events-card" id="eventsCard" style="display: none;">
            <div class="section-title" style="margin-bottom: 12px;">
                <span class="material-icons">event</span>
                Kommende Termine
            </div>
            <div id="eventsList">
                <!-- Dynamisch gefüllt -->
            </div>
        </div>
    </div>

    <!-- ============================================ -->
    <!-- LESSON MODE - Unterrichtsstunden-Container  -->
    <!-- ============================================ -->
    <div class="lesson-container" id="lessonContainer">
        <!-- Lesson Start Form (wenn keine aktive Session) -->
        <div id="lessonStartView">
            <div class="lesson-start-form">
                <div class="lesson-form-title">
                    <span class="material-icons">play_circle</span>
                    Neue Unterrichtsstunde starten
                </div>

                <!-- Template-Auswahl (Feature f37) -->
                <div class="lesson-form-group">
                    <label class="lesson-form-label">
                        <span class="material-icons" style="font-size: 16px; vertical-align: middle;">content_copy</span>
                        Vorlage verwenden
                    </label>
                    <select class="lesson-form-select" id="lessonTemplate" onchange="applyLessonTemplate()">
                        <option value="">-- Keine Vorlage --</option>
                        <optgroup label="System-Vorlagen" id="systemTemplatesGroup">
                            <!-- Dynamisch gefuellt -->
                        </optgroup>
                        <optgroup label="Meine Vorlagen" id="myTemplatesGroup" style="display: none;">
                            <!-- Dynamisch gefuellt -->
                        </optgroup>
                    </select>
                    <div class="template-info" id="templateInfo" style="display: none;">
                        <span class="template-duration" id="templateDuration"></span>
                    </div>
                </div>

                <div class="lesson-form-group">
                    <label class="lesson-form-label">Klasse</label>
                    <select class="lesson-form-select" id="lessonClassId">
                        <option value="7a">Klasse 7a</option>
                        <option value="7b">Klasse 7b</option>
                        <option value="8a">Klasse 8a</option>
                        <option value="9a">Klasse 9a</option>
                        <option value="10a">Klasse 10a</option>
                    </select>
                </div>

                <div class="lesson-form-group">
                    <label class="lesson-form-label">Fach</label>
                    <select class="lesson-form-select" id="lessonSubject">
                        <option value="Mathematik">Mathematik</option>
                        <option value="Deutsch">Deutsch</option>
                        <option value="Englisch">Englisch</option>
                        <option value="Physik">Physik</option>
                        <option value="Chemie">Chemie</option>
                        <option value="Biologie">Biologie</option>
                        <option value="Geschichte">Geschichte</option>
                        <option value="Informatik">Informatik</option>
                    </select>
                </div>

                <div class="lesson-form-group">
                    <label class="lesson-form-label">Thema (optional)</label>
                    <input type="text" class="lesson-form-input" id="lessonTopic" placeholder="z.B. Bruchrechnung, Lineare Funktionen...">
                </div>

                <!-- Phasendauern-Preview (Feature f37) -->
                <div class="phase-durations-preview" id="phaseDurationsPreview">
                    <div class="preview-title">Phasendauern:</div>
                    <div class="preview-phases" id="previewPhases">
                        <span class="preview-phase" data-phase="einstieg">E: 8</span>
                        <span class="preview-phase" data-phase="erarbeitung">A: 20</span>
                        <span class="preview-phase" data-phase="sicherung">S: 10</span>
                        <span class="preview-phase" data-phase="transfer">T: 7</span>
                        <span class="preview-phase" data-phase="reflexion">R: 5</span>
                    </div>
                    <div class="preview-total" id="previewTotal">Gesamt: 50 Min</div>
                </div>

                <button class="lesson-btn lesson-btn-primary" onclick="startNewLesson()" style="width: 100%; margin-top: 8px;">
                    <span class="material-icons">play_arrow</span>
                    Stunde starten
                </button>
            </div>
        </div>

        <!-- Active Lesson View -->
        <div id="lessonActiveView" style="display: none;">
            <!-- Lesson Header mit Visual Pie Timer (Feature f21) -->
            <div class="lesson-header" style="position: relative;">
                <!-- WebSocket Connection Status (Phase 6) -->
                <div id="wsConnectionStatus" class="ws-connection-status">
                    <span class="material-icons" style="font-size: 14px; color: #6b7280;">schedule</span>
                    <span style="font-size: 11px; color: #6b7280; margin-left: 4px;">Polling</span>
                </div>

                <h2 id="lessonSubjectDisplay">Mathematik - Klasse 7a</h2>

                <!-- Visual Pie Timer -->
                <div class="visual-timer-container">
                    <div class="visual-timer-wrapper">
                        <svg class="visual-timer-svg" viewBox="0 0 100 100">
                            <!-- Hintergrund-Kreis -->
                            <circle class="visual-timer-bg" cx="50" cy="50" r="42"></circle>
                            <!-- Fortschritts-Kreis (wird per JS animiert) -->
                            <circle
                                class="visual-timer-progress time-plenty"
                                id="visualTimerProgress"
                                cx="50" cy="50" r="42"
                                stroke-dasharray="263.89"
                                stroke-dashoffset="0"
                            ></circle>
                        </svg>
                        <!-- Zentrale Zeit-Anzeige -->
                        <div class="visual-timer-center">
                            <div class="visual-timer-time" id="lessonTimerDisplay">08:00</div>
                            <div class="visual-timer-phase" id="lessonPhaseLabel">Einstieg</div>
                        </div>
                    </div>
                </div>

                <div class="lesson-overtime-badge" id="lessonOvertimeBadge" style="display: none;">
                    +00:00 Overtime
                </div>
            </div>

            <!-- Quick Actions Bar (Feature f26) mit ARIA Labels (Feature f38) -->
            <div class="quick-actions-bar" role="toolbar" aria-label="Schnellaktionen">
                <button class="quick-action-btn extend-btn" onclick="lessonExtendTime(5)" title="+5 Minuten (Taste E)" aria-label="Zeit um 5 Minuten verlaengern" aria-keyshortcuts="e">
                    <span class="material-icons" aria-hidden="true">add_alarm</span>
                    +5 Min
                </button>
                <button class="quick-action-btn pause-btn" id="btnPauseResume" onclick="lessonTogglePause()" title="Pause/Fortsetzen (Leertaste)" aria-label="Timer pausieren oder fortsetzen" aria-keyshortcuts="Space">
                    <span class="material-icons" id="pauseIcon" aria-hidden="true">pause</span>
                    <span id="pauseLabel">Pause</span>
                </button>
                <button class="quick-action-btn skip-btn" onclick="lessonNextPhase()" title="Phase ueberspringen (Taste N)" aria-label="Zur naechsten Phase wechseln" aria-keyshortcuts="n">
                    <span class="material-icons" aria-hidden="true">skip_next</span>
                    Skip
                </button>
            </div>

            <!-- Progress Bar -->
            <div class="lesson-progress-container">
                <div class="lesson-progress-bar" id="lessonProgressBar" style="width: 0%"></div>
            </div>

            <!-- Lesson Timeline -->
            <div class="lesson-timeline" id="lessonTimeline">
                <!-- Dynamisch gefuellt -->
            </div>

            <!-- Control Buttons mit ARIA Labels (Feature f38) -->
            <div class="lesson-controls" role="group" aria-label="Unterrichtssteuerung">
                <button class="lesson-btn lesson-btn-primary" id="btnNextPhase" onclick="lessonNextPhase()" aria-label="Zur naechsten Unterrichtsphase wechseln">
                    <span class="material-icons" aria-hidden="true">skip_next</span>
                    Naechste Phase
                </button>
                <button class="lesson-btn lesson-btn-danger" onclick="lessonEnd()" aria-label="Unterrichtsstunde beenden">
                    <span class="material-icons" aria-hidden="true">stop</span>
                    Beenden
                </button>
            </div>

            <!-- Phasen-Suggestions -->
            <div class="lesson-suggestions" id="lessonSuggestions">
                <div class="lesson-suggestions-title">
                    <span class="material-icons">tips_and_updates</span>
                    Vorschlaege fuer diese Phase
                </div>
                <div id="lessonSuggestionsList">
                    <!-- Dynamisch gefuellt -->
                </div>
            </div>
        </div>

        <!-- Lesson Ended View -->
        <div id="lessonEndedView" style="display: none;">
            <div class="lesson-ended">
                <span class="material-icons">check_circle</span>
                <h3>Stunde beendet!</h3>
                <p id="lessonEndedTopic">Mathematik - Klasse 7a</p>

                <div class="lesson-summary" id="lessonSummary">
                    <div class="lesson-summary-item">
                        <span class="lesson-summary-label">Gesamtdauer</span>
                        <span class="lesson-summary-value" id="summaryDuration">--:--</span>
                    </div>
                    <div class="lesson-summary-item">
                        <span class="lesson-summary-label">Phasen</span>
                        <span class="lesson-summary-value" id="summaryPhases">0/5</span>
                    </div>
                </div>

                <!-- Hausaufgaben Section (Feature f20) -->
                <div class="homework-section">
                    <div class="homework-section-header">
                        <span class="material-icons">home_work</span>
                        Hausaufgaben
                    </div>
                    <div class="homework-input-group">
                        <input type="text" id="homeworkInput" class="homework-input" placeholder="Hausaufgabe eingeben..." onkeypress="if(event.key==='Enter')addHomework()">
                        <input type="date" id="homeworkDueDate" class="homework-input" style="flex: 0 0 150px;">
                        <button class="homework-add-btn" onclick="addHomework()">
                            <span class="material-icons" style="font-size: 18px;">add</span>
                        </button>
                    </div>
                    <div class="homework-list" id="homeworkList">
                        <!-- Dynamisch gefuellt -->
                    </div>
                </div>

                <!-- Materialien Section (Feature f19) -->
                <div class="materials-section">
                    <div class="materials-section-header">
                        <div class="materials-section-title">
                            <span class="material-icons">attach_file</span>
                            Materialien dieser Stunde
                        </div>
                        <button class="materials-add-btn" onclick="showAddMaterialModal()">
                            <span class="material-icons" style="font-size: 16px;">add</span>
                            Material hinzufuegen
                        </button>
                    </div>
                    <div class="materials-list" id="materialsList">
                        <!-- Dynamisch gefuellt -->
                    </div>
                </div>

                <!-- Analytics Section (Phase 5) -->
                <div class="analytics-section">
                    <div class="analytics-section-header">
                        <span class="material-icons">analytics</span>
                        Stunden-Analyse
                    </div>
                    <div class="analytics-grid" id="analyticsGrid">
                        <!-- Phase Statistics -->
                        <div class="analytics-card" id="analyticsPhases">
                            <div class="analytics-card-title">Phasen-Zeiten</div>
                            <div class="analytics-phase-bars" id="analyticsPhaseBars">
                                <!-- Dynamisch gefuellt -->
                            </div>
                        </div>
                        <!-- Overtime Summary -->
                        <div class="analytics-card" id="analyticsOvertime">
                            <div class="analytics-card-title">Overtime</div>
                            <div class="analytics-overtime-value" id="analyticsOvertimeValue">--:--</div>
                            <div class="analytics-overtime-phases" id="analyticsOvertimePhases">0 Phasen</div>
                        </div>
                    </div>
                </div>

                <!-- Reflection Section (Phase 5) -->
                <div class="reflection-section">
                    <div class="reflection-section-header">
                        <span class="material-icons">psychology</span>
                        Reflexion
                    </div>
                    <div class="reflection-form">
                        <div class="reflection-rating">
                            <span class="reflection-label">Wie lief die Stunde?</span>
                            <div class="rating-stars" id="ratingStars">
                                <button class="star-btn" onclick="setReflectionRating(1)" data-rating="1">★</button>
                                <button class="star-btn" onclick="setReflectionRating(2)" data-rating="2">★</button>
                                <button class="star-btn" onclick="setReflectionRating(3)" data-rating="3">★</button>
                                <button class="star-btn" onclick="setReflectionRating(4)" data-rating="4">★</button>
                                <button class="star-btn" onclick="setReflectionRating(5)" data-rating="5">★</button>
                            </div>
                        </div>
                        <div class="reflection-notes-group">
                            <label class="reflection-label">Notizen</label>
                            <textarea id="reflectionNotes" class="reflection-textarea" placeholder="Was hat gut funktioniert? Was wuerde ich anders machen?"></textarea>
                        </div>
                        <div class="reflection-next-group">
                            <label class="reflection-label">Fuer naechste Stunde</label>
                            <input type="text" id="reflectionNextLesson" class="reflection-input" placeholder="z.B. Wiederholung einplanen...">
                        </div>
                        <button class="reflection-save-btn" onclick="saveReflection()">
                            <span class="material-icons" style="font-size: 18px;">save</span>
                            Reflexion speichern
                        </button>
                    </div>
                </div>

                <div class="lesson-end-actions" style="display: flex; gap: 12px; margin-top: 20px;">
                    <button class="lesson-btn lesson-btn-secondary" onclick="exportSessionPDF()" style="flex: 1;">
                        <span class="material-icons">picture_as_pdf</span>
                        Exportieren
                    </button>
                    <button class="lesson-btn lesson-btn-primary" onclick="resetLesson()" style="flex: 1;">
                        <span class="material-icons">refresh</span>
                        Neue Stunde
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Feedback FAB Button (Phase 7) -->
    <button class="feedback-fab" onclick="openFeedbackModal()" title="Feedback senden" aria-label="Feedback an Entwickler senden">
        <span class="material-icons">feedback</span>
    </button>

    <!-- Feedback Modal (Phase 7) -->
    <div class="feedback-modal-overlay" id="feedbackModalOverlay" onclick="closeFeedbackModal(event)">
        <div class="feedback-modal" onclick="event.stopPropagation()">
            <div class="feedback-modal-header">
                <h3>Feedback senden</h3>
                <button class="feedback-modal-close" onclick="closeFeedbackModal()">
                    <span class="material-icons">close</span>
                </button>
            </div>
            <div class="feedback-modal-body" id="feedbackModalBody">
                <!-- Feedback Form -->
                <div id="feedbackForm">
                    <div class="feedback-form-group">
                        <label>Was moechten Sie uns mitteilen?</label>
                        <div class="feedback-type-selector">
                            <button type="button" class="feedback-type-btn active" data-type="improvement" onclick="setFeedbackType('improvement')">
                                Verbesserung
                            </button>
                            <button type="button" class="feedback-type-btn" data-type="bug" onclick="setFeedbackType('bug')">
                                Bug melden
                            </button>
                            <button type="button" class="feedback-type-btn" data-type="feature_request" onclick="setFeedbackType('feature_request')">
                                Feature-Wunsch
                            </button>
                            <button type="button" class="feedback-type-btn" data-type="praise" onclick="setFeedbackType('praise')">
                                Lob
                            </button>
                        </div>
                    </div>

                    <div class="feedback-form-group">
                        <label for="feedbackTitle">Kurzer Titel *</label>
                        <input type="text" id="feedbackTitle" placeholder="z.B. Timer ist manchmal ungenau" maxlength="200" required>
                    </div>

                    <div class="feedback-form-group">
                        <label for="feedbackDescription">Beschreibung *</label>
                        <textarea id="feedbackDescription" placeholder="Beschreiben Sie das Problem oder Ihren Vorschlag moeglichst genau..." required></textarea>
                    </div>

                    <div class="feedback-form-group">
                        <label for="feedbackName">Ihr Name (optional)</label>
                        <input type="text" id="feedbackName" placeholder="Fuer Rueckfragen">
                    </div>

                    <div class="feedback-form-group">
                        <label for="feedbackEmail">Ihre E-Mail (optional)</label>
                        <input type="email" id="feedbackEmail" placeholder="Fuer Rueckfragen">
                    </div>

                    <button type="button" class="feedback-submit-btn" id="feedbackSubmitBtn" onclick="submitFeedback()">
                        Feedback senden
                    </button>
                </div>

                <!-- Success Message -->
                <div id="feedbackSuccess" class="feedback-success" style="display: none;">
                    <span class="material-icons">check_circle</span>
                    <h3>Vielen Dank!</h3>
                    <p>Ihr Feedback wurde erfolgreich gesendet.<br>Wir melden uns bei Rueckfragen.</p>
                    <button class="feedback-submit-btn" onclick="closeFeedbackModal()" style="margin-top: 24px;">
                        Schliessen
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Settings FAB Button (Feature f16) -->
    <button class="settings-fab" onclick="openSettingsModal()" title="Einstellungen" aria-label="Phasen-Dauern anpassen">
        <span class="material-icons">settings</span>
    </button>

    <!-- Settings Modal (Feature f16) -->
    <div class="settings-modal-overlay" id="settingsModalOverlay" onclick="closeSettingsModal(event)">
        <div class="settings-modal" onclick="event.stopPropagation()">
            <div class="settings-modal-header">
                <h3>Meine Einstellungen</h3>
                <button class="settings-modal-close" onclick="closeSettingsModal()">
                    <span class="material-icons">close</span>
                </button>
            </div>
            <div class="settings-modal-body">
                <div class="settings-section">
                    <h4>
                        <span class="material-icons">timer</span>
                        Standard-Phasendauern
                    </h4>
                    <p style="font-size: 13px; color: #6b7280; margin: 0 0 16px 0;">
                        Legen Sie Ihre bevorzugten Dauern fuer jede Unterrichtsphase fest.
                        Diese werden bei neuen Stunden automatisch uebernommen.
                    </p>
                    <div class="phase-duration-grid" id="phaseDurationGrid">
                        <div class="phase-duration-row">
                            <label>Einstieg</label>
                            <input type="number" id="settingEinstieg" min="1" max="120" value="8">
                            <span>Min</span>
                        </div>
                        <div class="phase-duration-row">
                            <label>Erarbeitung</label>
                            <input type="number" id="settingErarbeitung" min="1" max="120" value="20">
                            <span>Min</span>
                        </div>
                        <div class="phase-duration-row">
                            <label>Sicherung</label>
                            <input type="number" id="settingSicherung" min="1" max="120" value="10">
                            <span>Min</span>
                        </div>
                        <div class="phase-duration-row">
                            <label>Transfer</label>
                            <input type="number" id="settingTransfer" min="1" max="120" value="7">
                            <span>Min</span>
                        </div>
                        <div class="phase-duration-row">
                            <label>Reflexion</label>
                            <input type="number" id="settingReflexion" min="1" max="120" value="5">
                            <span>Min</span>
                        </div>
                    </div>
                    <div style="margin-top: 12px; padding: 10px; background: #f3f4f6; border-radius: 6px; font-size: 13px; color: #6b7280;">
                        <strong>Gesamt:</strong> <span id="settingsTotalMinutes">50</span> Minuten
                    </div>
                </div>

                <button class="settings-save-btn" id="settingsSaveBtn" onclick="saveTeacherSettings()">
                    <span class="material-icons" style="font-size: 18px; margin-right: 8px;">save</span>
                    Einstellungen speichern
                </button>
                <button class="settings-reset-btn" onclick="resetToDefaults()">
                    Auf Standardwerte zuruecksetzen
                </button>
            </div>
        </div>
    </div>

    <!-- Settings Saved Toast -->
    <div class="settings-saved-toast" id="settingsSavedToast">
        Einstellungen gespeichert!
    </div>

    <!-- Onboarding Modal -->
    <div class="onboarding-modal-overlay" id="onboardingModalOverlay">
        <div class="onboarding-modal" onclick="event.stopPropagation()">
            <div class="onboarding-header">
                <h2>Willkommen beim Begleiter!</h2>
                <p>Richten Sie Ihren persönlichen Schuljahres-Begleiter ein.</p>
            </div>
            <div class="onboarding-body">
                <div class="onboarding-progress">
                    <div class="onboarding-dot active" id="onboardingDot1"></div>
                    <div class="onboarding-dot" id="onboardingDot2"></div>
                    <div class="onboarding-dot" id="onboardingDot3"></div>
                </div>

                <!-- Step 1: Bundesland -->
                <div class="onboarding-step active" id="onboardingStep1">
                    <div class="onboarding-label">In welchem Bundesland unterrichten Sie?</div>
                    <select class="onboarding-select" id="onboardingFederalState">
                        <option value="">Bitte wählen...</option>
                        <option value="BW">Baden-Württemberg</option>
                        <option value="BY">Bayern</option>
                        <option value="BE">Berlin</option>
                        <option value="BB">Brandenburg</option>
                        <option value="HB">Bremen</option>
                        <option value="HH">Hamburg</option>
                        <option value="HE">Hessen</option>
                        <option value="MV">Mecklenburg-Vorpommern</option>
                        <option value="NI">Niedersachsen</option>
                        <option value="NW">Nordrhein-Westfalen</option>
                        <option value="RP">Rheinland-Pfalz</option>
                        <option value="SL">Saarland</option>
                        <option value="SN">Sachsen</option>
                        <option value="ST">Sachsen-Anhalt</option>
                        <option value="SH">Schleswig-Holstein</option>
                        <option value="TH">Thüringen</option>
                    </select>
                    <div class="onboarding-buttons">
                        <button class="onboarding-btn onboarding-btn-primary" onclick="onboardingNext(1)">
                            Weiter →
                        </button>
                    </div>
                </div>

                <!-- Step 2: Schulart -->
                <div class="onboarding-step" id="onboardingStep2">
                    <div class="onboarding-label">An welcher Schulart unterrichten Sie?</div>
                    <select class="onboarding-select" id="onboardingSchoolType">
                        <option value="">Bitte wählen...</option>
                        <option value="grundschule">Grundschule</option>
                        <option value="mittelschule">Mittelschule/Hauptschule</option>
                        <option value="realschule">Realschule</option>
                        <option value="gymnasium">Gymnasium</option>
                        <option value="gesamtschule">Gesamtschule</option>
                        <option value="berufsschule">Berufsschule</option>
                        <option value="foerderschule">Förderschule</option>
                        <option value="other">Andere</option>
                    </select>
                    <div class="onboarding-buttons">
                        <button class="onboarding-btn onboarding-btn-secondary" onclick="onboardingBack(2)">
                            ← Zurück
                        </button>
                        <button class="onboarding-btn onboarding-btn-primary" onclick="onboardingNext(2)">
                            Weiter →
                        </button>
                    </div>
                </div>

                <!-- Step 3: Bestätigung -->
                <div class="onboarding-step" id="onboardingStep3">
                    <div class="onboarding-label">Ihre Einstellungen:</div>
                    <div style="background: #f9fafb; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
                        <div style="margin-bottom: 8px;"><strong>Bundesland:</strong> <span id="onboardingSummaryState">-</span></div>
                        <div><strong>Schulart:</strong> <span id="onboardingSummaryType">-</span></div>
                    </div>
                    <p style="font-size: 13px; color: #6b7280; margin-bottom: 0;">Sie können diese Einstellungen später in den Optionen ändern.</p>
                    <div class="onboarding-buttons">
                        <button class="onboarding-btn onboarding-btn-secondary" onclick="onboardingBack(3)">
                            ← Zurück
                        </button>
                        <button class="onboarding-btn onboarding-btn-primary" onclick="completeOnboarding()">
                            ✓ Fertig
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- /panel-companion -->
    """