anleitungen_lul:onboarding:onboarding_sus

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


Vorhergehende Überarbeitung
—anleitungen_lul:onboarding:onboarding_sus [2025/09/04 10:36] (aktuell) – angelegt till-niels.gades@bbz-rd-eck.de
Zeile 1: Zeile 1:
 +<html>
 +<html lang="de">
 +<head>
 +    <meta charset="UTF-8">
 +    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +    <title>Digitale Plattformen am BBZ RD-ECK - Onboarding Guide</title>
 +    <style>
 +        html {
 +            scroll-behavior: smooth;
 +        }
 +
 +        * {
 +            margin: 0;
 +            padding: 0;
 +            box-sizing: border-box;
 +        }
 +
 +        body {
 +            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 +            line-height: 1.6;
 +            color: #333;
 +            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 +            min-height: 100vh;
 +        }
 +
 +        .container {
 +            max-width: 1200px;
 +            margin: 0 auto;
 +            padding: 20px;
 +        }
 +
 +        .header {
 +            background: white;
 +            border-radius: 15px;
 +            padding: 30px;
 +            margin-bottom: 30px;
 +            text-align: center;
 +            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
 +        }
 +
 +        .header h1 {
 +            color: #2c3e50;
 +            font-size: 2.5em;
 +            margin-bottom: 10px;
 +        }
 +
 +        .welcome-text {
 +            color: #7f8c8d;
 +            font-size: 1.2em;
 +            margin-bottom: 20px;
 +        }
 +
 +        .quick-start {
 +            background: linear-gradient(135deg, #f39c12, #e67e22);
 +            color: white;
 +            padding: 20px;
 +            border-radius: 10px;
 +            margin: 20px 0;
 +            text-align: center;
 +        }
 +
 +        .quick-start h3 {
 +            margin-bottom: 10px;
 +        }
 +
 +        .quick-steps {
 +            display: grid;
 +            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 +            gap: 10px;
 +            margin-top: 15px;
 +        }
 +
 +        .quick-step {
 +            background: rgba(255,255,255,0.2);
 +            padding: 10px;
 +            border-radius: 5px;
 +            font-size: 0.9em;
 +        }
 +
 +        .progress-container {
 +            background: white;
 +            border-radius: 15px;
 +            padding: 20px;
 +            margin-bottom: 30px;
 +            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
 +        }
 +
 +        .progress-header {
 +            text-align: center;
 +            margin-bottom: 20px;
 +        }
 +
 +        .progress-bar {
 +            width: 100%;
 +            height: 10px;
 +            background: #ecf0f1;
 +            border-radius: 5px;
 +            margin: 10px 0;
 +            overflow: hidden;
 +        }
 +
 +        .progress-fill {
 +            height: 100%;
 +            background: linear-gradient(135deg, #2ecc71, #27ae60);
 +            width: 0%;
 +            transition: width 0.3s ease;
 +            border-radius: 5px;
 +        }
 +
 +        .progress-steps {
 +            display: grid;
 +            grid-template-columns: repeat(6, 1fr);
 +            gap: 10px;
 +            margin-top: 20px;
 +        }
 +
 +        .progress-step {
 +            text-align: center;
 +            padding: 10px 5px;
 +            border-radius: 10px;
 +            font-size: 0.8em;
 +            background: #f8f9fa;
 +            border: 2px solid #ecf0f1;
 +            cursor: pointer;
 +            transition: all 0.3s ease;
 +            text-decoration: none;
 +            color: #333;
 +        }
 +
 +        .progress-step.completed {
 +            background: linear-gradient(135deg, #2ecc71, #27ae60);
 +            color: white;
 +            border-color: #27ae60;
 +        }
 +
 +        .progress-step.completed::after {
 +            content: " ✓";
 +            font-weight: bold;
 +        }
 +
 +        .progress-step.active {
 +            background: linear-gradient(135deg, #3498db, #2980b9);
 +            color: white;
 +            border-color: #2980b9;
 +            transform: scale(1.05);
 +        }
 +
 +        .section-group {
 +            margin-bottom: 40px;
 +        }
 +
 +        .section-group-header {
 +            background: linear-gradient(135deg, #34495e, #2c3e50);
 +            color: white;
 +            padding: 20px;
 +            border-radius: 15px 15px 0 0;
 +            text-align: center;
 +        }
 +
 +        .section-group-header h2 {
 +            margin: 0;
 +            font-size: 1.5em;
 +        }
 +
 +        .section-group-content {
 +            background: white;
 +            border-radius: 0 0 15px 15px;
 +            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
 +        }
 +
 +        .login-info {
 +            padding: 30px;
 +        }
 +
 +        .login-credentials {
 +            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 +            color: white;
 +            padding: 20px;
 +            border-radius: 10px;
 +            text-align: center;
 +            font-size: 1.3em;
 +            font-weight: bold;
 +            margin: 20px 0;
 +        }
 +
 +        .step-container {
 +            padding: 30px;
 +            border-bottom: 1px solid #ecf0f1;
 +        }
 +
 +        .step-container:last-child {
 +            border-bottom: none;
 +            border-radius: 0 0 15px 15px;
 +        }
 +
 +        .step-container h2 {
 +            color: #2c3e50;
 +            margin-bottom: 20px;
 +            font-size: 1.8em;
 +            border-left: 5px solid #3498db;
 +            padding-left: 15px;
 +        }
 +
 +        .platform-tabs {
 +            display: flex;
 +            margin: 20px 0;
 +            border-radius: 10px;
 +            overflow: hidden;
 +            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 +        }
 +
 +        .platform-tab {
 +            flex: 1;
 +            background: #ecf0f1;
 +            color: #7f8c8d;
 +            padding: 15px;
 +            text-align: center;
 +            cursor: pointer;
 +            transition: all 0.3s ease;
 +            border: none;
 +            font-size: 1em;
 +            font-weight: bold;
 +        }
 +
 +        .platform-tab.active {
 +            background: linear-gradient(135deg, #3498db, #2980b9);
 +            color: white;
 +        }
 +
 +        .platform-tab:hover:not(.active) {
 +            background: #bdc3c7;
 +        }
 +
 +        .platform-content {
 +            display: none;
 +            margin: 20px 0;
 +        }
 +
 +        .platform-content.active {
 +            display: block;
 +        }
 +
 +        .steps {
 +            counter-reset: step-counter;
 +        }
 +
 +        .step {
 +            counter-increment: step-counter;
 +            background: #f8f9fa;
 +            padding: 20px;
 +            margin: 15px 0;
 +            border-radius: 10px;
 +            border-left: 5px solid #3498db;
 +            position: relative;
 +            padding-left: 60px;
 +        }
 +
 +        .step::before {
 +            content: counter(step-counter);
 +            position: absolute;
 +            left: 20px;
 +            top: 20px;
 +            background: #3498db;
 +            color: white;
 +            width: 30px;
 +            height: 30px;
 +            border-radius: 50%;
 +            display: flex;
 +            align-items: center;
 +            justify-content: center;
 +            font-weight: bold;
 +        }
 +
 +        .tip {
 +            background: linear-gradient(135deg, #f39c12, #e67e22);
 +            color: white;
 +            padding: 15px;
 +            border-radius: 10px;
 +            margin: 15px 0;
 +        }
 +
 +        .tip::before {
 +            content: "💡 Tipp: ";
 +            font-weight: bold;
 +        }
 +
 +        .info-box {
 +            background: linear-gradient(135deg, #17a2b8, #138496);
 +            color: white;
 +            padding: 15px;
 +            border-radius: 10px;
 +            margin: 15px 0;
 +        }
 +
 +        .info-box::before {
 +            content: "ℹ️ Info: ";
 +            font-weight: bold;
 +        }
 +
 +        .warning {
 +            background: linear-gradient(135deg, #dc3545, #c82333);
 +            color: white;
 +            padding: 15px;
 +            border-radius: 10px;
 +            margin: 15px 0;
 +        }
 +
 +        .warning::before {
 +            content: "⚠️ Achtung: ";
 +            font-weight: bold;
 +        }
 +
 +        .password-requirements {
 +            background: #e8f4f8;
 +            padding: 20px;
 +            border-radius: 10px;
 +            border: 2px solid #3498db;
 +            margin: 15px 0;
 +        }
 +
 +        .password-requirements h4 {
 +            color: #2c3e50;
 +            margin-bottom: 10px;
 +        }
 +
 +        .requirement {
 +            margin: 5px 0;
 +            padding-left: 20px;
 +            position: relative;
 +        }
 +
 +        .requirement::before {
 +            content: "✓";
 +            position: absolute;
 +            left: 0;
 +            color: #27ae60;
 +            font-weight: bold;
 +        }
 +
 +        .download-links {
 +            display: grid;
 +            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 +            gap: 15px;
 +            margin: 20px 0;
 +        }
 +
 +        .download-link {
 +            background: linear-gradient(135deg, #8e44ad, #9b59b6);
 +            color: white;
 +            padding: 20px;
 +            border-radius: 10px;
 +            text-align: center;
 +            text-decoration: none;
 +            transition: transform 0.3s ease;
 +            display: block;
 +        }
 +
 +        .download-link:hover {
 +            transform: translateY(-5px);
 +            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
 +            color: white;
 +        }
 +
 +        .expandable {
 +            margin: 20px 0;
 +        }
 +
 +        .expandable-header {
 +            background: #f8f9fa;
 +            padding: 15px;
 +            border-radius: 10px;
 +            cursor: pointer;
 +            border: 2px solid #ecf0f1;
 +            transition: all 0.3s ease;
 +        }
 +
 +        .expandable-header:hover {
 +            background: #e9ecef;
 +            border-color: #3498db;
 +        }
 +
 +        .expandable-header.active {
 +            background: linear-gradient(135deg, #3498db, #2980b9);
 +            color: white;
 +            border-color: #2980b9;
 +        }
 +
 +        .expandable-content {
 +            display: none;
 +            padding: 20px;
 +            background: #f8f9fa;
 +            border-radius: 0 0 10px 10px;
 +            border: 2px solid #ecf0f1;
 +            border-top: none;
 +        }
 +
 +        .expandable-content.active {
 +            display: block;
 +        }
 +
 +        .faq-section {
 +            background: white;
 +            border-radius: 15px;
 +            padding: 30px;
 +            margin: 30px 0;
 +            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
 +        }
 +
 +        .faq-section h2 {
 +            color: #2c3e50;
 +            margin-bottom: 20px;
 +            text-align: center;
 +        }
 +
 +        .faq-item {
 +            margin: 15px 0;
 +        }
 +
 +        .faq-question {
 +            background: linear-gradient(135deg, #e74c3c, #c0392b);
 +            color: white;
 +            padding: 15px;
 +            border-radius: 10px;
 +            cursor: pointer;
 +            font-weight: bold;
 +        }
 +
 +        .faq-question:hover {
 +            transform: translateY(-2px);
 +            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
 +        }
 +
 +        .faq-answer {
 +            display: none;
 +            padding: 15px;
 +            background: #f8f9fa;
 +            border-radius: 0 0 10px 10px;
 +            border: 2px solid #e74c3c;
 +            border-top: none;
 +        }
 +
 +        .faq-answer.active {
 +            display: block;
 +        }
 +
 +        .footer {
 +            background: white;
 +            border-radius: 15px;
 +            padding: 30px;
 +            text-align: center;
 +            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
 +        }
 +
 +        .contact-grid {
 +            display: grid;
 +            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 +            gap: 15px;
 +            margin: 20px 0;
 +        }
 +
 +        .contact-card {
 +            background: #f8f9fa;
 +            padding: 15px;
 +            border-radius: 10px;
 +            border-left: 5px solid #3498db;
 +        }
 +
 +        @media (max-width: 768px) {
 +            .header h1 {
 +                font-size: 2em;
 +            }
 +
 +            .container {
 +                padding: 10px;
 +            }
 +
 +            .step {
 +                padding-left: 50px;
 +            }
 +
 +            .progress-steps {
 +                grid-template-columns: repeat(3, 1fr);
 +                gap: 5px;
 +            }
 +
 +            .progress-step {
 +                font-size: 0.7em;
 +                padding: 5px;
 +            }
 +
 +            .platform-tabs {
 +                flex-direction: column;
 +            }
 +        }
 +    </style>
 +</head>
 +<body>
 +    <div class="container">
 +        <div class="header">
 +            <h1>🎓 Digitale Plattformen am BBZ RD-ECK</h1>
 +            <p class="welcome-text">Herzlich willkommen am BBZ Rendsburg-Eckernförde!</p>
 +            <p>Damit Sie schnell mit unseren digitalen Werkzeugen arbeiten können, folgen Sie einfach dieser Schritt-für-Schritt-Anleitung.</p>
 +
 +            <div class="quick-start">
 +                <h3>⚡ Quick Start - Für Eilige</h3>
 +                <p>Die wichtigsten ersten Schritte auf einen Blick:</p>
 +                <div class="quick-steps">
 +                    <div class="quick-step">1. Schul-PC einschalten</div>
 +                    <div class="quick-step">2. Passwort festlegen</div>
 +                    <div class="quick-step">3. WLAN einrichten</div>
 +                    <div class="quick-step">4. Apps auf eigenen Geräten installieren</div>
 +                </div>
 +            </div>
 +        </div>
 +
 +        <div class="section-group" id="erste-schritte">
 +            <div class="section-group-header">
 +                <h2>🚀 Erste Schritte - Login & Verbindung</h2>
 +                <p>Hier legen Sie die Grundlage für alle anderen Schritte</p>
 +            </div>
 +            <div class="section-group-content">
 +                <div class="login-info">
 +                    <h2>🔐 Ihre Login-Daten</h2>
 +                    <p>Für alle wichtigen Dienste haben Sie die gleichen Anmeldedaten, die Sie von Ihrer Klassenlehrkraft bekommen:</p>
 +
 +                    <div class="login-credentials">
 +                        vorname.nachname@sus.bbz-rd-eck.de
 +                    </div>
 +
 +                    <div class="info-box">
 +                        Ihr Passwort legen Sie beim ersten Login am Schul-PC selbst fest.
 +                    </div>
 +                </div>
 +
 +                <div class="step-container">
 +                    <h2>🖥️ Schritt 1: Anmeldung im Schulnetz</h2>
 +                    <div class="steps">
 +                        <div class="step">
 +                            Starten Sie einen PC im DV-Raum oder einen Laptop aus dem Laptopwagen.
 +                        </div>
 +                        <div class="step">
 +                            Loggen Sie sich mit den Daten ein, die Sie von Ihrer Klassenlehrkraft erhalten.
 +                        </div>
 +                        <div class="step">
 +                            Sie werden aufgefordert, ein neues Passwort zu vergeben.
 +                        </div>
 +                    </div>
 +
 +                    <div class="password-requirements">
 +                        <h4>Passwort-Anforderungen:</h4>
 +                        <div class="requirement">Mindestens 8 Zeichen lang</div>
 +                        <div class="requirement">Einen Großbuchstaben</div>
 +                        <div class="requirement">Einen Kleinbuchstaben</div>
 +                        <div class="requirement">Eine Zahl</div>
 +                        <div class="requirement">Ein Sonderzeichen (z.B. Ausrufezeichen)</div>
 +                    </div>
 +
 +                    <div class="tip">
 +                        Speichern Sie das Passwort in Ihrem Smartphone - entweder in Ihrem Passwortmanagement oder unter einem fiktiven Namen in den Kontakten.
 +                    </div>
 +                </div>
 +
 +                <div class="step-container">
 +                    <h2>📶 Schritt 2: WLAN-Einrichtung</h2>
 +                    <p><strong>Netzwerk:</strong> BBZ-Clients</p>
 +
 +                    <div class="platform-tabs">
 +                        <button class="platform-tab active" onclick="showPlatformContent('wifi-android', this)">🤖 Android</button>
 +                        <button class="platform-tab" onclick="showPlatformContent('wifi-ios', this)">🍎 iOS</button>
 +                        <button class="platform-tab" onclick="showPlatformContent('wifi-windows', this)">🪟 Windows</button>
 +                        <button class="platform-tab" onclick="showPlatformContent('wifi-chromebook', this)">💻 Chromebook</button>
 +                    </div>
 +
 +                    <div class="platform-content active" id="wifi-android">
 +                        <div class="steps">
 +                            <div class="step">WLAN-Einstellungen öffnen → "BBZ-Clients" auswählen</div>
 +                            <div class="step"><strong>EAP-Methode:</strong> PEAP</div>
 +                            <div class="step"><strong>Phase 2-Authentifizierung:</strong> MSCHAPv2</div>
 +                            <div class="step"><strong>CA-Zertifikat:</strong> nicht überprüfen</div>
 +                            <div class="step"><strong>Benutzername:</strong> vorname.nachname (ohne @sus.bbz-rd-eck.de)</div>
 +                            <div class="step"><strong>Passwort:</strong> Ihr selbst vergebenes Passwort</div>
 +                        </div>
 +                    </div>
 +
 +                    <div class="platform-content" id="wifi-ios">
 +                        <div class="steps">
 +                            <div class="step">Einstellungen → WLAN → "BBZ-Clients" auswählen</div>
 +                            <div class="step"><strong>Benutzername:</strong> vorname.nachname</div>
 +                            <div class="step"><strong>Passwort:</strong> Ihr selbst vergebenes Passwort</div>
 +                            <div class="step">Zertifikat-Warnung mit "Vertrauen" bestätigen</div>
 +                        </div>
 +                    </div>
 +
 +                    <div class="platform-content" id="wifi-windows">
 +                        <div class="steps">
 +                            <div class="step">WLAN-Symbol → "BBZ-Clients" → Verbinden</div>
 +                            <div class="step"><strong>Benutzername:</strong> vorname.nachname</div>
 +                            <div class="step"><strong>Passwort:</strong> Ihr selbst vergebenes Passwort</div>
 +                            <div class="step">Bei Zertifikat-Warnung "Verbinden" wählen</div>
 +                        </div>
 +                    </div>
 +
 +                    <div class="platform-content" id="wifi-chromebook">
 +                        <div class="steps">
 +                            <div class="step">Einstellungen → Internet → WLAN → "BBZ-Clients"</div>
 +                            <div class="step"><strong>EAP-Methode:</strong> PEAP</div>
 +                            <div class="step"><strong>Phase 2-Authentifizierung:</strong> MSCHAPv2</div>
 +                            <div class="step"><strong>Identität:</strong> vorname.nachname</div>
 +                            <div class="step"><strong>Passwort:</strong> Ihr selbst vergebenes Passwort</div>
 +                        </div>
 +                        <div class="info-box">
 +                            Ausführliche Anleitung: <a href="https://support.google.com/chromebook/answer/1047420?hl=de" style="color: white; text-decoration: underline;">Google Support</a>
 +                        </div>
 +                    </div>
 +
 +                    <div class="warning">
 +                        Falls es nicht funktioniert: WLAN ausschalten → 5 Sekunden warten → WLAN einschalten. Der Verbindungsaufbau kann bis zu einer Minute dauern.
 +                    </div>
 +
 +                    <div class="expandable">
 +                        <div class="expandable-header" onclick="toggleExpandable(this)">
 +                            🔧 Erweiterte Problemlösung (klicken zum Aufklappen)
 +                        </div>
 +                        <div class="expandable-content">
 +                            <p><strong>Bei Zertifikat-Problemen (Google Pixel):</strong></p>
 +                            <div class="download-links">
 +                                <a href="https://stash.cat/s/QCDdU6YnpQCIyy" class="download-link">
 +                                    📜 Zertifikat herunterladen<br>
 +                                    <small>Domain: snrd.local</small>
 +                                </a>
 +                            </div>
 +                            <p>Installation: Einstellungen → Sicherheit → Zertifikat installieren</p>
 +                        </div>
 +                    </div>
 +                </div>
 +            </div>
 +        </div>
 +
 +        <div class="section-group" id="untis">
 +            <div class="section-group-header">
 +                <h2>📅 Apps installieren - Stundenplan & mehr</h2>
 +            </div>
 +            <div class="section-group-content">
 +                <div class="step-container">
 +                    <h2>📅 Schritt 2: UNTIS - Der Stundenplan</h2>
 +
 +                    <div class="platform-tabs">
 +                        <button class="platform-tab active" onclick="showPlatformContent('untis-android', this)">🤖 Android</button>
 +                        <button class="platform-tab" onclick="showPlatformContent('untis-ios', this)">🍎 iOS</button>
 +                    </div>
 +
 +                    <div class="platform-content active" id="untis-android">
 +                        <div class="download-links">
 +                            <a href="https://play.google.com/store/apps/details?id=com.grupet.web.app" class="download-link">
 +                                📱 UNTIS Mobile<br>
 +                                <small>Google Play Store</small>
 +                            </a>
 +                        </div>
 +                    </div>
 +
 +                    <div class="platform-content" id="untis-ios">
 +                        <div class="download-links">
 +                            <a href="https://apps.apple.com/de/app/untis-mobile/id926186904" class="download-link">
 +                                📱 UNTIS Mobile<br>
 +                                <small>Apple App Store</small>
 +                            </a>
 +                        </div>
 +                    </div>
 +
 +                    <div class="steps">
 +                        <div class="step">
 +                            App herunterladen und installieren
 +                        </div>
 +                        <div class="step">
 +                            Schule suchen: <strong>bbz-rd-eck</strong> eingeben
 +                        </div>
 +                        <div class="step">
 +                            Mit Ihren Login-Daten anmelden
 +                        </div>
 +                    </div>
 +
 +                    <div class="tip">
 +                        Über die UNTIS-App können Sie auch direkt Moodle und CryptPad öffnen - tippen Sie auf das "Start"-Symbol!
 +                    </div>
 +                </div>
 +            </div>
 +        </div>
 +
 +        <div class="section-group" id="schulcloud">
 +            <div class="section-group-header">
 +                <h2>💬 schul.cloud - Kommunikation & Zusammenarbeit</h2>
 +            </div>
 +            <div class="section-group-content">
 +                <div class="step-container">
 +                    <h2>💬 Schritt 3: schul.cloud für Smartphones</h2>
 +
 +                    <div class="download-links">
 +                        <a href="https://schul.cloud/#c435" class="download-link">
 +                            📱 schul.cloud App<br>
 +                            <small>Android & iOS</small>
 +                        </a>
 +                    </div>
 +
 +                    <div class="steps">
 +                        <div class="step">
 +                            <strong>E-Mail-Adresse:</strong> vorname.nachname@sus.bbz-rd-eck.de
 +                        </div>
 +                        <div class="step">
 +                            <strong>Passwort:</strong> Ihr selbst vergebenes Passwort
 +                        </div>
 +                        <div class="step">
 +                            <strong>Verschlüsselungskennwort:</strong> Das bei der ersten Anmeldung vergebene Kennwort
 +                        </div>
 +                    </div>
 +
 +                    <div class="warning">
 +                        Bei der ersten Anmeldung in schul.cloud müssen Sie ein zusätzliches Verschlüsselungskennwort festlegen. Notieren Sie sich dieses gut - bei Verlust gehen möglicherweise Nachrichten verloren!
 +                    </div>
 +                </div>
 +            </div>
 +        </div>
 +
 +        <div class="section-group" id="moodle">
 +            <div class="section-group-header">
 +                <h2>📚 Moodle - Lernplattform</h2>
 +            </div>
 +            <div class="section-group-content">
 +                <div class="step-container">
 +                    <h2>📚 Schritt 4: Moodle - Lernplattform</h2>
 +
 +                    <div class="download-links">
 +                        <a href="https://moodle.bbz-rd-eck.de" class="download-link">
 +                            🌐 Moodle Web<br>
 +                            <small>Direkt im Browser</small>
 +                        </a>
 +                    </div>
 +
 +                    <div class="steps">
 +                        <div class="step">
 +                            <strong>Anmeldename:</strong> Ihre Schul-E-Mail-Adresse
 +                        </div>
 +                        <div class="step">
 +                            <strong>Kennwort:</strong> Ihr selbst vergebenes Passwort
 +                        </div>
 +                    </div>
 +
 +                    <div class="info-box">
 +                        Über die BBZ-Cloud-App sind Sie automatisch eingeloggt - einfach auf den "Moodle"-Button klicken!
 +                    </div>
 +                </div>
 +            </div>
 +        </div>
 +
 +        <div class="section-group" id="office">
 +            <div class="section-group-header">
 +                <h2>💻 Microsoft Office - Produktivität</h2>
 +            </div>
 +            <div class="section-group-content">
 +                <div class="step-container">
 +                    <h2>💻 Schritt 5: Microsoft Office</h2>
 +
 +                    <h3 style="color: #2c3e50; margin: 20px 0;">Drei Nutzungsmöglichkeiten:</h3>
 +
 +                    <div class="download-links">
 +                        <a href="https://office.com" class="download-link">
 +                            🌐 Office Online<br>
 +                            <small>Direkt im Browser</small>
 +                        </a>
 +                        <a href="https://office.com" class="download-link">
 +                            💻 Desktop Apps<br>
 +                            <small>Windows & Mac Download</small>
 +                        </a>
 +                        <div class="download-link" style="background: linear-gradient(135deg, #2ecc71, #27ae60);">
 +                            📱 Mobile Apps<br>
 +                            <small>App Store & Play Store</small>
 +                        </div>
 +                    </div>
 +
 +                    <div class="tip">
 +                        Melden Sie sich mit Ihren Schul-Logindaten an, um alle Funktionen nutzen zu können.
 +                    </div>
 +
 +                    <div class="warning">
 +                        <strong>Wichtiger Hinweis:</strong> Mails über Ihren Schüler-Account kommen bei Lehrkräften nicht an. Nutzen Sie schul.cloud für Nachrichten an Ihre Lehrkräfte!
 +                    </div>
 +                </div>
 +            </div>
 +        </div>
 +
 +        <div class="section-group" id="bbzcloud">
 +            <div class="section-group-header">
 +                <h2>☁️ BBZ-Cloud-App - Ihr digitaler Arbeitsplatz</h2>
 +            </div>
 +            <div class="section-group-content">
 +                <div class="step-container">
 +                    <h2>☁️ Schritt 6: BBZ-Cloud-App Installation (Windows, Mac, Linux, Chromebook)</h2>
 +                    <p>Die BBZ-Cloud-App vereint alle wichtigen Funktionen in einer Anwendung.</p>
 +
 +                    <div class="platform-tabs">
 +                        <button class="platform-tab active" onclick="showPlatformContent('bbz-windows', this)">🪟 Windows</button>
 +                        <button class="platform-tab" onclick="showPlatformContent('bbz-mac', this)">🍎 Mac</button>
 +                        <button class="platform-tab" onclick="showPlatformContent('bbz-linux', this)">🐧 Linux</button>
 +                        <button class="platform-tab" onclick="showPlatformContent('bbz-chromebook', this)">💻 Chromebook</button>
 +                    </div>
 +
 +                    <div class="platform-content active" id="bbz-windows">
 +                        <div class="download-links">
 +                            <a href="https://kurzelinks.de/bbz-cloud" class="download-link">
 +                                💻 BBZ-Cloud für Windows<br>
 +                                <small>Direkt herunterladen</small>
 +                            </a>
 +                        </div>
 +                    </div>
 +
 +                    <div class="platform-content" id="bbz-mac">
 +                        <div class="download-links">
 +                            <a href="https://kurzelinks.de/bbz-cloud" class="download-link">
 +                                🍎 BBZ-Cloud für Mac<br>
 +                                <small>Direkt herunterladen</small>
 +                            </a>
 +                        </div>
 +                    </div>
 +
 +                    <div class="platform-content" id="bbz-linux">
 +                        <div class="download-links">
 +                            <a href="https://kurzelinks.de/bbz-cloud" class="download-link">
 +                                🐧 BBZ-Cloud für Linux<br>
 +                                <small>Direkt herunterladen</small>
 +                            </a>
 +                        </div>
 +                    </div>
 +
 +                    <div class="platform-content" id="bbz-chromebook">
 +                        <div class="download-links">
 +                            <a href="https://app.schul.cloud" class="download-link">
 +                                🌐 Web-Version<br>
 +                                <small>Für Chromebooks</small>
 +                            </a>
 +                        </div>
 +                        <div class="info-box">
 +                            Alternativ: Linux-Subsystem aktivieren und Linux-Version verwenden
 +                        </div>
 +                    </div>
 +
 +                    <div class="steps">
 +                        <div class="step">
 +                            <strong>E-Mail-Adresse:</strong> vorname.nachname@sus.bbz-rd-eck.de
 +                        </div>
 +                        <div class="step">
 +                            <strong>Passwort:</strong> Ihr selbst vergebenes Passwort
 +                        </div>
 +                        <div class="step">
 +                            <strong>WebUntis Benutzername:</strong> vorname.nachname
 +                        </div>
 +                        <div class="step">
 +                            <strong>WebUntis Passwort:</strong> Ihr selbst vergebenes Passwort
 +                        </div>
 +                        <div class="step">
 +                            <strong>BigBlueButton-Passwort:</strong> LEER lassen!
 +                        </div>
 +                    </div>
 +                </div>
 +            </div>
 +        </div>
 +
 +        <div class="footer">
 +            <h2>📞 Support</h2>
 +            <h3>Wenden Sie sich bitte zuerst an Ihre Klassenlehrkraft bei Fragen und Problemen.</h3>
 +
 +            <div class="contact-grid">
 +                <div class="contact-card">
 +                    <strong>IT Service</strong><br>
 +                    <a href="mailto:it-service@bbz-rd-eck.de">it-service@bbz-rd-eck.de</a>
 +                </div>
 +                <div class="contact-card">
 +                    <strong>Verantwortlicher: Dennis Clausen</strong><br>
 +                    <a href="mailto:dennis.clausen@bbz-rd-eck.de">dennis.clausen@bbz-rd-eck.de</a>
 +                </div>
 +            </div>
 +
 +            <div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
 +                <p><strong>Version 2.0</strong> | Erstellt am: 29.08.2024</p>
 +                <p><a href="https://forms.microsoft.com/pages/responsepage.aspx?id=WOfuEATbPkS4I69P4tELUBPZgm7GeMFNgub9zuiLB8lUREM5Q0VSTDkwSjc4R0lPMjkxMEZORUJBUy4u&route=shorturl" style="color: #3498db; text-decoration: none;">📝 Feedback geben</a></p>
 +            </div>
 +        </div>
 +
 +    </div>
 +
 +    <script>
 +        // Platform tab switching functionality
 +        function showPlatformContent(contentId, tabElement) {
 +            // Hide all platform contents in the same container
 +            const container = tabElement.closest('.step-container');
 +            const contents = container.querySelectorAll('.platform-content');
 +            const tabs = container.querySelectorAll('.platform-tab');
 +
 +            contents.forEach(content => content.classList.remove('active'));
 +            tabs.forEach(tab => tab.classList.remove('active'));
 +
 +            // Show selected content and activate tab
 +            document.getElementById(contentId).classList.add('active');
 +            tabElement.classList.add('active');
 +        }
 +
 +        // Expandable content functionality
 +        function toggleExpandable(headerElement) {
 +            const content = headerElement.nextElementSibling;
 +            headerElement.classList.toggle('active');
 +            content.classList.toggle('active');
 +        }
 +
 +        // Progress tracking functionality
 +        function updateProgress() {
 +            const steps = document.querySelectorAll('.progress-step');
 +            const progressFill = document.getElementById('progressFill');
 +
 +            let completedSteps = 0;
 +            steps.forEach((step, index) => {
 +                if (step.classList.contains('completed')) {
 +                    completedSteps++;
 +                }
 +            });
 +
 +            const progressPercentage = (completedSteps / steps.length) * 100;
 +            progressFill.style.width = progressPercentage + '%';
 +        }
 +
 +        // Initialize progress tracking
 +        document.addEventListener('DOMContentLoaded', function() {
 +            const progressSteps = document.querySelectorAll('.progress-step');
 +
 +            progressSteps.forEach(step => {
 +                step.addEventListener('click', function(e) {
 +                    e.preventDefault();
 +
 +                    // Toggle completed state
 +                    this.classList.toggle('completed');
 +
 +                    // Update progress bar
 +                    updateProgress();
 +
 +                    // Scroll to section
 +                    const targetId = this.getAttribute('href');
 +                    const targetSection = document.querySelector(targetId);
 +                    if (targetSection) {
 +                        targetSection.scrollIntoView({ behavior: 'smooth' });
 +                    }
 +                });
 +            });
 +
 +            // Initial progress update
 +            updateProgress();
 +        });
 +    </script>
 +</body>
 +</html>