anleitungen_lul:onboarding_sus

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
anleitungen_lul:onboarding_sus [28/08/2025 13:09] – Till-Niels.Gades@bbz-rd-eck.deanleitungen_lul:onboarding_sus [04/09/2025 09:53] (aktuell) – Till-Niels.Gades@bbz-rd-eck.de
Zeile 2: Zeile 2:
 <html lang="de"> <html lang="de">
 <head> <head>
-  <meta charset="UTF-8"> +    <meta charset="UTF-8"> 
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"> +    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-  <title>BBZ Fortschritt</title> +    <title>Digitale Plattformen am BBZ RD-ECK - Onboarding Guide</title> 
-  <style> +    <style> 
-    body { +        html { 
-      font-family: Arial, sans-serif; +            scroll-behavior: smooth; 
-      margin: 0; +        }
-      padding: 0; +
-      background: #f9fafb; +
-      color: #111827; +
-    }+
  
-    header { +        * { 
-      background: #2563eb; +            margin: 0; 
-      color: white; +            padding: 0; 
-      padding: 20px; +            box-sizing: border-box; 
-      text-align: center; +        }
-    }+
  
-    main { +        body { 
-      max-width: 900px; +            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
-      margin: 20px auto; +            line-height: 1.6; 
-      padding: 20px; +            color: #333; 
-      background: white; +            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-      border-radius: 12px; +            min-height: 100vh; 
-      box-shadow: 0 2px 6px rgba(0,0,0,0.1); +        }
-    }+
  
-    h2 { +        .container { 
-      margin-top: 0; +            max-width: 1200px; 
-    }+            margin: 0 auto; 
 +            padding: 20px; 
 +        }
  
-    /* --- Stepper Basis --- */ +        .header { 
-    .bbz-stepper { position: relative; padding: 24px 0 8px; margin: 24px 0; } +            background: white; 
-    .bbz-stepper * { box-sizing: border-box; }+            border-radius: 15px; 
 +            padding: 30px; 
 +            margin-bottom: 30px; 
 +            text-align: center; 
 +            box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
 +        }
  
-    /* Grundlinie + Füllung */ +        .header h1 { 
-    .bbz-stepper .line, +            color: #2c3e50; 
-    .bbz-stepper .line-fill { +            font-size: 2.5em; 
-      position: absolute; left: 0; right: 0; height: 10px; top: 22px; border-radius: 999px; +            margin-bottom: 10px; 
-    } +        }
-    .bbz-stepper .line      { background: #e5e7eb; } +
-    .bbz-stepper .line-fill { background: #10b981; width: 0%; }+
  
-    /* Füllstände für 6 Schritte */ +        .welcome-text { 
-    .bbz-stepper.progress-0   .line-fill { width: 0%; } +            color: #7f8c8d; 
-    .bbz-stepper.progress-16  .line-fill { width: 16.6666%; } +            font-size: 1.2em; 
-    .bbz-stepper.progress-33  .line-fill { width: 33.3333%; } +            margin-bottom: 20px; 
-    .bbz-stepper.progress-50  .line-fill { width: 50%; } +        }
-    .bbz-stepper.progress-66  .line-fill { width: 66.6666%; } +
-    .bbz-stepper.progress-83  .line-fill { width: 83.3333%; } +
-    .bbz-stepper.progress-100 .line-fill { width: 100%; }+
  
-    /* Schritte */ +        .quick-start { 
-    .bbz-steps { +            background: linear-gradient(135deg, #f39c12, #e67e22); 
-      display: flex; justify-content: space-between; align-items: flex-start; +            color: white; 
-      list-style: none; margin: 0; padding: 0; +            padding: 20px; 
-    } +            border-radius: 10px; 
-    .bbz-steps li { width: 16.66%; text-align: center; position: relative; padding-top: 10px; }+            margin: 20px 0; 
 +            text-align: center; 
 +        }
  
-    /* Kreise */ +        .quick-start h3 { 
-    .bbz-steps .circle { +            margin-bottom: 10px; 
-      display: inline-flex; align-items: center; justify-content: center; +        }
-      width: 36px; height: 36px; border-radius: 999px; font-weight: 700; +
-      border: 2px solid #d1d5db; background: #fff; color: #374151; +
-    } +
-    .bbz-steps li.done    .circle { background: #10b981; border-color: #10b981; color: #fff; } +
-    .bbz-steps li.current .circle { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.2); }+
  
-    /* Beschriftung */ +        .quick-steps { 
-    .bbz-steps a { +            display: grid; 
-      display: block; margin-top: 8px; text-decoration: none; color: #111827; font-weight: 600; +            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
-    } +            gap: 10px; 
-    .bbz-steps small { display: block; color: #6b7280; font-weight: 400; }+            margin-top: 15px; 
 +        }
  
-    @media (max-width: 700px){ +        .quick-step { 
-      .bbz-steps a{ font-size: 13px; } +            background: rgba(255,255,255,0.2); 
-      .bbz-steps small{ font-size: 11px; } +            padding: 10px; 
-      .bbz-steps .circle{ width:28px; height:28px; font-size: 12px; } +            border-radius: 5px; 
-    }+            font-size: 0.9em; 
 +        }
  
-    section { +        .progress-container { 
-      margin: 40px 0; +            background: white; 
-    }+            border-radius: 15px; 
 +            padding: 20px; 
 +            margin-bottom: 30px; 
 +            box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
 +        }
  
-  </style>+        .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> </head>
 <body> <body>
-  <header> +    <div class="container"> 
-    <h1>BBZ – Ihr Fortschritt</h1> +        <div class="header"> 
-  </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>
  
-  <main> +            <div class="quick-start"> 
-    <div class="progress-container"> +                <h3>⚡ Quick Start - Für Eilige</h3> 
-      <div class="progress-header"> +                <p>Die wichtigsten ersten Schritte auf einen Blick:</p> 
-        <h2>📊 Ihr Fortschritt</h2> +                <div class="quick-steps"> 
-        <p>Folgen Sie den Schritten in der richtigen Reihenfolge</p> +                    <div class="quick-step">1. Schul-PC einschalten</div> 
-      </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>
  
-      <!-- Beispiel: Aktuell bei Schritt 2 = progress-33 --> +        <div class="section-group" id="erste-schritte"> 
-      <div class="bbz-stepper progress-33" aria-label="Fortschritt"> +            <div class="section-group-header"> 
-        <div class="line"></div> +                <h2>🚀 Erste Schritte - Login & Verbindung</h2> 
-        <div class="line-fill"></div>+                <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>
  
-        <ol class="bbz-steps"> 
-          <li class="done"> 
-            <span class="circle">1</span> 
-            <a href="#erste-schritte">Login<small>WLAN</small></a> 
-          </li> 
-          <li class="current"> 
-            <span class="circle">2</span> 
-            <a href="#untis">UNTIS</a> 
-          </li> 
-          <li> 
-            <span class="circle">3</span> 
-            <a href="#schulcloud">schul.cloud</a> 
-          </li> 
-          <li> 
-            <span class="circle">4</span> 
-            <a href="#moodle">Moodle</a> 
-          </li> 
-          <li> 
-            <span class="circle">5</span> 
-            <a href="#office">Office</a> 
-          </li> 
-          <li> 
-            <span class="circle">6</span> 
-            <a href="#bbzcloud">BBZ-Cloud</a> 
-          </li> 
-        </ol> 
-      </div> 
     </div>     </div>
  
-    <!-- Inhalt zu den Schritten --> +    <script> 
-    <section id="erste-schritte"> +        // Platform tab switching functionality 
-      <h2>Schritt 1 – Login & WLAN</h2> +        function showPlatformContent(contentId, tabElement) { 
-      <p>Hier kommt die Beschreibung für den Login und das WLAN.</p> +            // Hide all platform contents in the same container 
-    </section>+            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');
  
-    <section id="untis"> +            progressSteps.forEach(step => { 
-      <h2>Schritt 2 – UNTIS</h2> +                step.addEventListener('click', function(e) { 
-      <p>Hier kommt die Beschreibung für UNTIS.</p> +                    e.preventDefault();
-    </section>+
  
-    <section id="schulcloud"> +                    // Toggle completed state 
-      <h2>Schritt 3 – schul.cloud</h2> +                    this.classList.toggle('completed');
-      <p>Hier kommt die Beschreibung für schul.cloud.</p> +
-    </section>+
  
-    <section id="moodle"> +                    // Update progress bar 
-      <h2>Schritt 4 – Moodle</h2> +                    updateProgress();
-      <p>Hier kommt die Beschreibung für Moodle.</p> +
-    </section>+
  
-    <section id="office"> +                    // Scroll to section 
-      <h2>Schritt 5 – Office</h2> +                    const targetId = this.getAttribute('href'); 
-      <p>Hier kommt die Beschreibung für Office.</p> +                    const targetSection = document.querySelector(targetId); 
-    </section>+                    if (targetSection) { 
 +                        targetSection.scrollIntoView({ behavior: 'smooth' }); 
 +                    } 
 +                }); 
 +            });
  
-    <section id="bbzcloud"> +            // Initial progress update 
-      <h2>Schritt 6 – BBZ-Cloud</h2> +            updateProgress(); 
-      <p>Hier kommt die Beschreibung für die BBZ-Cloud.</p> +        }); 
-    </section> +    </script>
-  </main>+
 </body> </body>
 </html> </html>