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 12:27] – Till-Niels.Gades@bbz-rd-eck.deanleitungen_lul:onboarding_sus [04/09/2025 09:53] (aktuell) – Till-Niels.Gades@bbz-rd-eck.de
Zeile 9: Zeile 9:
             scroll-behavior: smooth;             scroll-behavior: smooth;
         }         }
-        +
         * {         * {
             margin: 0;             margin: 0;
Zeile 15: Zeile 15:
             box-sizing: border-box;             box-sizing: border-box;
         }         }
-        +
         body {         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
Zeile 23: Zeile 23:
             min-height: 100vh;             min-height: 100vh;
         }         }
-        +
         .container {         .container {
             max-width: 1200px;             max-width: 1200px;
Zeile 29: Zeile 29:
             padding: 20px;             padding: 20px;
         }         }
-        +
         .header {         .header {
             background: white;             background: white;
Zeile 38: Zeile 38:
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         }         }
-        +
         .header h1 {         .header h1 {
             color: #2c3e50;             color: #2c3e50;
Zeile 44: Zeile 44:
             margin-bottom: 10px;             margin-bottom: 10px;
         }         }
-        +
         .welcome-text {         .welcome-text {
             color: #7f8c8d;             color: #7f8c8d;
Zeile 50: Zeile 50:
             margin-bottom: 20px;             margin-bottom: 20px;
         }         }
-        +
         .quick-start {         .quick-start {
             background: linear-gradient(135deg, #f39c12, #e67e22);             background: linear-gradient(135deg, #f39c12, #e67e22);
Zeile 59: Zeile 59:
             text-align: center;             text-align: center;
         }         }
-        +
         .quick-start h3 {         .quick-start h3 {
             margin-bottom: 10px;             margin-bottom: 10px;
         }         }
-        +
         .quick-steps {         .quick-steps {
             display: grid;             display: grid;
Zeile 70: Zeile 70:
             margin-top: 15px;             margin-top: 15px;
         }         }
-        +
         .quick-step {         .quick-step {
             background: rgba(255,255,255,0.2);             background: rgba(255,255,255,0.2);
Zeile 77: Zeile 77:
             font-size: 0.9em;             font-size: 0.9em;
         }         }
-        +
         .progress-container {         .progress-container {
             background: white;             background: white;
Zeile 85: Zeile 85:
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         }         }
-        +
         .progress-header {         .progress-header {
             text-align: center;             text-align: center;
             margin-bottom: 20px;             margin-bottom: 20px;
         }         }
-        +
         .progress-bar {         .progress-bar {
             width: 100%;             width: 100%;
Zeile 99: Zeile 99:
             overflow: hidden;             overflow: hidden;
         }         }
-        +
         .progress-fill {         .progress-fill {
             height: 100%;             height: 100%;
Zeile 107: Zeile 107:
             border-radius: 5px;             border-radius: 5px;
         }         }
-        +
         .progress-steps {         .progress-steps {
             display: grid;             display: grid;
Zeile 114: Zeile 114:
             margin-top: 20px;             margin-top: 20px;
         }         }
-        +
         .progress-step {         .progress-step {
             text-align: center;             text-align: center;
Zeile 127: Zeile 127:
             color: #333;             color: #333;
         }         }
-        +
         .progress-step.completed {         .progress-step.completed {
             background: linear-gradient(135deg, #2ecc71, #27ae60);             background: linear-gradient(135deg, #2ecc71, #27ae60);
Zeile 133: Zeile 133:
             border-color: #27ae60;             border-color: #27ae60;
         }         }
-        +
         .progress-step.completed::after {         .progress-step.completed::after {
             content: " ✓";             content: " ✓";
             font-weight: bold;             font-weight: bold;
         }         }
-        +
         .progress-step.active {         .progress-step.active {
             background: linear-gradient(135deg, #3498db, #2980b9);             background: linear-gradient(135deg, #3498db, #2980b9);
Zeile 145: Zeile 145:
             transform: scale(1.05);             transform: scale(1.05);
         }         }
-        +
         .section-group {         .section-group {
             margin-bottom: 40px;             margin-bottom: 40px;
         }         }
-        +
         .section-group-header {         .section-group-header {
             background: linear-gradient(135deg, #34495e, #2c3e50);             background: linear-gradient(135deg, #34495e, #2c3e50);
Zeile 157: Zeile 157:
             text-align: center;             text-align: center;
         }         }
-        +
         .section-group-header h2 {         .section-group-header h2 {
             margin: 0;             margin: 0;
             font-size: 1.5em;             font-size: 1.5em;
         }         }
-        +
         .section-group-content {         .section-group-content {
             background: white;             background: white;
Zeile 168: Zeile 168:
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         }         }
-        +
         .login-info {         .login-info {
             padding: 30px;             padding: 30px;
         }         }
-        +
         .login-credentials {         .login-credentials {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Zeile 183: Zeile 183:
             margin: 20px 0;             margin: 20px 0;
         }         }
-        +
         .step-container {         .step-container {
             padding: 30px;             padding: 30px;
             border-bottom: 1px solid #ecf0f1;             border-bottom: 1px solid #ecf0f1;
         }         }
-        +
         .step-container:last-child {         .step-container:last-child {
             border-bottom: none;             border-bottom: none;
             border-radius: 0 0 15px 15px;             border-radius: 0 0 15px 15px;
         }         }
-        +
         .step-container h2 {         .step-container h2 {
             color: #2c3e50;             color: #2c3e50;
Zeile 201: Zeile 201:
             padding-left: 15px;             padding-left: 15px;
         }         }
-        +
         .platform-tabs {         .platform-tabs {
             display: flex;             display: flex;
Zeile 209: Zeile 209:
             box-shadow: 0 2px 10px rgba(0,0,0,0.1);             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }         }
-        +
         .platform-tab {         .platform-tab {
             flex: 1;             flex: 1;
Zeile 222: Zeile 222:
             font-weight: bold;             font-weight: bold;
         }         }
-        +
         .platform-tab.active {         .platform-tab.active {
             background: linear-gradient(135deg, #3498db, #2980b9);             background: linear-gradient(135deg, #3498db, #2980b9);
             color: white;             color: white;
         }         }
-        +
         .platform-tab:hover:not(.active) {         .platform-tab:hover:not(.active) {
             background: #bdc3c7;             background: #bdc3c7;
         }         }
-        +
         .platform-content {         .platform-content {
             display: none;             display: none;
             margin: 20px 0;             margin: 20px 0;
         }         }
-        +
         .platform-content.active {         .platform-content.active {
             display: block;             display: block;
         }         }
-        +
         .steps {         .steps {
             counter-reset: step-counter;             counter-reset: step-counter;
         }         }
-        +
         .step {         .step {
             counter-increment: step-counter;             counter-increment: step-counter;
Zeile 255: Zeile 255:
             padding-left: 60px;             padding-left: 60px;
         }         }
-        +
         .step::before {         .step::before {
             content: counter(step-counter);             content: counter(step-counter);
Zeile 271: Zeile 271:
             font-weight: bold;             font-weight: bold;
         }         }
-        +
         .tip {         .tip {
             background: linear-gradient(135deg, #f39c12, #e67e22);             background: linear-gradient(135deg, #f39c12, #e67e22);
Zeile 279: Zeile 279:
             margin: 15px 0;             margin: 15px 0;
         }         }
-        +
         .tip::before {         .tip::before {
             content: "💡 Tipp: ";             content: "💡 Tipp: ";
             font-weight: bold;             font-weight: bold;
         }         }
-        +
         .info-box {         .info-box {
             background: linear-gradient(135deg, #17a2b8, #138496);             background: linear-gradient(135deg, #17a2b8, #138496);
Zeile 292: Zeile 292:
             margin: 15px 0;             margin: 15px 0;
         }         }
-        +
         .info-box::before {         .info-box::before {
             content: "ℹ️ Info: ";             content: "ℹ️ Info: ";
             font-weight: bold;             font-weight: bold;
         }         }
-        +
         .warning {         .warning {
             background: linear-gradient(135deg, #dc3545, #c82333);             background: linear-gradient(135deg, #dc3545, #c82333);
Zeile 305: Zeile 305:
             margin: 15px 0;             margin: 15px 0;
         }         }
-        +
         .warning::before {         .warning::before {
             content: "⚠️ Achtung: ";             content: "⚠️ Achtung: ";
             font-weight: bold;             font-weight: bold;
         }         }
-        +
         .password-requirements {         .password-requirements {
             background: #e8f4f8;             background: #e8f4f8;
Zeile 318: Zeile 318:
             margin: 15px 0;             margin: 15px 0;
         }         }
-        +
         .password-requirements h4 {         .password-requirements h4 {
             color: #2c3e50;             color: #2c3e50;
             margin-bottom: 10px;             margin-bottom: 10px;
         }         }
-        +
         .requirement {         .requirement {
             margin: 5px 0;             margin: 5px 0;
Zeile 329: Zeile 329:
             position: relative;             position: relative;
         }         }
-        +
         .requirement::before {         .requirement::before {
             content: "✓";             content: "✓";
Zeile 337: Zeile 337:
             font-weight: bold;             font-weight: bold;
         }         }
-        +
         .download-links {         .download-links {
             display: grid;             display: grid;
Zeile 344: Zeile 344:
             margin: 20px 0;             margin: 20px 0;
         }         }
-        +
         .download-link {         .download-link {
             background: linear-gradient(135deg, #8e44ad, #9b59b6);             background: linear-gradient(135deg, #8e44ad, #9b59b6);
Zeile 355: Zeile 355:
             display: block;             display: block;
         }         }
-        +
         .download-link:hover {         .download-link:hover {
             transform: translateY(-5px);             transform: translateY(-5px);
Zeile 361: Zeile 361:
             color: white;             color: white;
         }         }
-        +
         .expandable {         .expandable {
             margin: 20px 0;             margin: 20px 0;
         }         }
-        +
         .expandable-header {         .expandable-header {
             background: #f8f9fa;             background: #f8f9fa;
Zeile 374: Zeile 374:
             transition: all 0.3s ease;             transition: all 0.3s ease;
         }         }
-        +
         .expandable-header:hover {         .expandable-header:hover {
             background: #e9ecef;             background: #e9ecef;
             border-color: #3498db;             border-color: #3498db;
         }         }
-        +
         .expandable-header.active {         .expandable-header.active {
             background: linear-gradient(135deg, #3498db, #2980b9);             background: linear-gradient(135deg, #3498db, #2980b9);
Zeile 385: Zeile 385:
             border-color: #2980b9;             border-color: #2980b9;
         }         }
-        +
         .expandable-content {         .expandable-content {
             display: none;             display: none;
Zeile 394: Zeile 394:
             border-top: none;             border-top: none;
         }         }
-        +
         .expandable-content.active {         .expandable-content.active {
             display: block;             display: block;
         }         }
-        +
         .faq-section {         .faq-section {
             background: white;             background: white;
Zeile 406: Zeile 406:
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         }         }
-        +
         .faq-section h2 {         .faq-section h2 {
             color: #2c3e50;             color: #2c3e50;
Zeile 412: Zeile 412:
             text-align: center;             text-align: center;
         }         }
-        +
         .faq-item {         .faq-item {
             margin: 15px 0;             margin: 15px 0;
         }         }
-        +
         .faq-question {         .faq-question {
             background: linear-gradient(135deg, #e74c3c, #c0392b);             background: linear-gradient(135deg, #e74c3c, #c0392b);
Zeile 425: Zeile 425:
             font-weight: bold;             font-weight: bold;
         }         }
-        +
         .faq-question:hover {         .faq-question:hover {
             transform: translateY(-2px);             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(0,0,0,0.1);             box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         }         }
-        +
         .faq-answer {         .faq-answer {
             display: none;             display: none;
Zeile 439: Zeile 439:
             border-top: none;             border-top: none;
         }         }
-        +
         .faq-answer.active {         .faq-answer.active {
             display: block;             display: block;
         }         }
-        +
         .footer {         .footer {
             background: white;             background: white;
Zeile 451: Zeile 451:
             box-shadow: 0 10px 30px rgba(0,0,0,0.1);             box-shadow: 0 10px 30px rgba(0,0,0,0.1);
         }         }
-        +
         .contact-grid {         .contact-grid {
             display: grid;             display: grid;
Zeile 458: Zeile 458:
             margin: 20px 0;             margin: 20px 0;
         }         }
-        +
         .contact-card {         .contact-card {
             background: #f8f9fa;             background: #f8f9fa;
Zeile 465: Zeile 465:
             border-left: 5px solid #3498db;             border-left: 5px solid #3498db;
         }         }
-        +
         @media (max-width: 768px) {         @media (max-width: 768px) {
             .header h1 {             .header h1 {
                 font-size: 2em;                 font-size: 2em;
             }             }
-            +
             .container {             .container {
                 padding: 10px;                 padding: 10px;
             }             }
-            +
             .step {             .step {
                 padding-left: 50px;                 padding-left: 50px;
             }             }
-            +
             .progress-steps {             .progress-steps {
                 grid-template-columns: repeat(3, 1fr);                 grid-template-columns: repeat(3, 1fr);
                 gap: 5px;                 gap: 5px;
             }             }
-            +
             .progress-step {             .progress-step {
                 font-size: 0.7em;                 font-size: 0.7em;
                 padding: 5px;                 padding: 5px;
             }             }
-            +
             .platform-tabs {             .platform-tabs {
                 flex-direction: column;                 flex-direction: column;
Zeile 501: Zeile 501:
             <p class="welcome-text">Herzlich willkommen am BBZ Rendsburg-Eckernförde!</p>             <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>             <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">             <div class="quick-start">
                 <h3>⚡ Quick Start - Für Eilige</h3>                 <h3>⚡ Quick Start - Für Eilige</h3>
Zeile 511: Zeile 511:
                     <div class="quick-step">4. Apps auf eigenen Geräten installieren</div>                     <div class="quick-step">4. Apps auf eigenen Geräten installieren</div>
                 </div>                 </div>
-            </div> 
-        </div> 
- 
-        <div class="progress-container"> 
-            <div class="progress-header"> 
-                <h2>📊 Ihr Fortschritt</h2> 
-                <p>Folgen Sie den Schritten in der richtigen Reihenfolge</p> 
-            </div> 
-            <div class="progress-bar"> 
-                <div class="progress-fill" id="progressFill"></div> 
-            </div> 
-            <div class="progress-steps"> 
-                <a href="#erste-schritte" class="progress-step" data-step="1"> 
-                    <div>Schritt 1</div> 
-                    <div>Login & WLAN</div> 
-                </a> 
-                <a href="#untis" class="progress-step" data-step="2"> 
-                    <div>Schritt 2</div> 
-                    <div>UNTIS</div> 
-                </a> 
-                <a href="#schulcloud" class="progress-step" data-step="3"> 
-                    <div>Schritt 3</div> 
-                    <div>schul.cloud</div> 
-                </a> 
-                <a href="#moodle" class="progress-step" data-step="4"> 
-                    <div>Schritt 4</div> 
-                    <div>Moodle</div> 
-                </a> 
-                <a href="#office" class="progress-step" data-step="5"> 
-                    <div>Schritt 5</div> 
-                    <div>Office</div> 
-                </a> 
-                <a href="#bbzcloud" class="progress-step" data-step="6"> 
-                    <div>Schritt 6</div> 
-                    <div>BBZ-Cloud</div> 
-                </a> 
             </div>             </div>
         </div>         </div>
Zeile 559: Zeile 523:
                     <h2>🔐 Ihre Login-Daten</h2>                     <h2>🔐 Ihre Login-Daten</h2>
                     <p>Für alle wichtigen Dienste haben Sie die gleichen Anmeldedaten, die Sie von Ihrer Klassenlehrkraft bekommen:</p>                     <p>Für alle wichtigen Dienste haben Sie die gleichen Anmeldedaten, die Sie von Ihrer Klassenlehrkraft bekommen:</p>
-                    +
                     <div class="login-credentials">                     <div class="login-credentials">
                         vorname.nachname@sus.bbz-rd-eck.de                         vorname.nachname@sus.bbz-rd-eck.de
                     </div>                     </div>
-                    +
                     <div class="info-box">                     <div class="info-box">
                         Ihr Passwort legen Sie beim ersten Login am Schul-PC selbst fest.                         Ihr Passwort legen Sie beim ersten Login am Schul-PC selbst fest.
Zeile 582: Zeile 546:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="password-requirements">                     <div class="password-requirements">
                         <h4>Passwort-Anforderungen:</h4>                         <h4>Passwort-Anforderungen:</h4>
Zeile 591: Zeile 555:
                         <div class="requirement">Ein Sonderzeichen (z.B. Ausrufezeichen)</div>                         <div class="requirement">Ein Sonderzeichen (z.B. Ausrufezeichen)</div>
                     </div>                     </div>
-                    +
                     <div class="tip">                     <div class="tip">
                         Speichern Sie das Passwort in Ihrem Smartphone - entweder in Ihrem Passwortmanagement oder unter einem fiktiven Namen in den Kontakten.                         Speichern Sie das Passwort in Ihrem Smartphone - entweder in Ihrem Passwortmanagement oder unter einem fiktiven Namen in den Kontakten.
Zeile 600: Zeile 564:
                     <h2>📶 Schritt 2: WLAN-Einrichtung</h2>                     <h2>📶 Schritt 2: WLAN-Einrichtung</h2>
                     <p><strong>Netzwerk:</strong> BBZ-Clients</p>                     <p><strong>Netzwerk:</strong> BBZ-Clients</p>
-                    +
                     <div class="platform-tabs">                     <div class="platform-tabs">
                         <button class="platform-tab active" onclick="showPlatformContent('wifi-android', this)">🤖 Android</button>                         <button class="platform-tab active" onclick="showPlatformContent('wifi-android', this)">🤖 Android</button>
Zeile 607: Zeile 571:
                         <button class="platform-tab" onclick="showPlatformContent('wifi-chromebook', this)">💻 Chromebook</button>                         <button class="platform-tab" onclick="showPlatformContent('wifi-chromebook', this)">💻 Chromebook</button>
                     </div>                     </div>
-                    +
                     <div class="platform-content active" id="wifi-android">                     <div class="platform-content active" id="wifi-android">
                         <div class="steps">                         <div class="steps">
Zeile 618: Zeile 582:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="platform-content" id="wifi-ios">                     <div class="platform-content" id="wifi-ios">
                         <div class="steps">                         <div class="steps">
Zeile 627: Zeile 591:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="platform-content" id="wifi-windows">                     <div class="platform-content" id="wifi-windows">
                         <div class="steps">                         <div class="steps">
Zeile 636: Zeile 600:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="platform-content" id="wifi-chromebook">                     <div class="platform-content" id="wifi-chromebook">
                         <div class="steps">                         <div class="steps">
Zeile 649: Zeile 613:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="warning">                     <div class="warning">
                         Falls es nicht funktioniert: WLAN ausschalten → 5 Sekunden warten → WLAN einschalten. Der Verbindungsaufbau kann bis zu einer Minute dauern.                         Falls es nicht funktioniert: WLAN ausschalten → 5 Sekunden warten → WLAN einschalten. Der Verbindungsaufbau kann bis zu einer Minute dauern.
                     </div>                     </div>
-                    +
                     <div class="expandable">                     <div class="expandable">
                         <div class="expandable-header" onclick="toggleExpandable(this)">                         <div class="expandable-header" onclick="toggleExpandable(this)">
Zeile 680: Zeile 644:
                 <div class="step-container">                 <div class="step-container">
                     <h2>📅 Schritt 2: UNTIS - Der Stundenplan</h2>                     <h2>📅 Schritt 2: UNTIS - Der Stundenplan</h2>
-                    +
                     <div class="platform-tabs">                     <div class="platform-tabs">
                         <button class="platform-tab active" onclick="showPlatformContent('untis-android', this)">🤖 Android</button>                         <button class="platform-tab active" onclick="showPlatformContent('untis-android', this)">🤖 Android</button>
                         <button class="platform-tab" onclick="showPlatformContent('untis-ios', this)">🍎 iOS</button>                         <button class="platform-tab" onclick="showPlatformContent('untis-ios', this)">🍎 iOS</button>
                     </div>                     </div>
-                    +
                     <div class="platform-content active" id="untis-android">                     <div class="platform-content active" id="untis-android">
                         <div class="download-links">                         <div class="download-links">
Zeile 694: Zeile 658:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="platform-content" id="untis-ios">                     <div class="platform-content" id="untis-ios">
                         <div class="download-links">                         <div class="download-links">
Zeile 703: Zeile 667:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="steps">                     <div class="steps">
                         <div class="step">                         <div class="step">
Zeile 715: Zeile 679:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="tip">                     <div class="tip">
                         Über die UNTIS-App können Sie auch direkt Moodle und CryptPad öffnen - tippen Sie auf das "Start"-Symbol!                         Über die UNTIS-App können Sie auch direkt Moodle und CryptPad öffnen - tippen Sie auf das "Start"-Symbol!
Zeile 730: Zeile 694:
                 <div class="step-container">                 <div class="step-container">
                     <h2>💬 Schritt 3: schul.cloud für Smartphones</h2>                     <h2>💬 Schritt 3: schul.cloud für Smartphones</h2>
-                    +
                     <div class="download-links">                     <div class="download-links">
                         <a href="https://schul.cloud/#c435" class="download-link">                         <a href="https://schul.cloud/#c435" class="download-link">
Zeile 737: Zeile 701:
                         </a>                         </a>
                     </div>                     </div>
-                    +
                     <div class="steps">                     <div class="steps">
                         <div class="step">                         <div class="step">
Zeile 749: Zeile 713:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="warning">                     <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!                         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!
Zeile 764: Zeile 728:
                 <div class="step-container">                 <div class="step-container">
                     <h2>📚 Schritt 4: Moodle - Lernplattform</h2>                     <h2>📚 Schritt 4: Moodle - Lernplattform</h2>
-                    +
                     <div class="download-links">                     <div class="download-links">
                         <a href="https://moodle.bbz-rd-eck.de" class="download-link">                         <a href="https://moodle.bbz-rd-eck.de" class="download-link">
Zeile 771: Zeile 735:
                         </a>                         </a>
                     </div>                     </div>
-                    +
                     <div class="steps">                     <div class="steps">
                         <div class="step">                         <div class="step">
Zeile 780: Zeile 744:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="info-box">                     <div class="info-box">
                         Über die BBZ-Cloud-App sind Sie automatisch eingeloggt - einfach auf den "Moodle"-Button klicken!                         Über die BBZ-Cloud-App sind Sie automatisch eingeloggt - einfach auf den "Moodle"-Button klicken!
Zeile 795: Zeile 759:
                 <div class="step-container">                 <div class="step-container">
                     <h2>💻 Schritt 5: Microsoft Office</h2>                     <h2>💻 Schritt 5: Microsoft Office</h2>
-                    +
                     <h3 style="color: #2c3e50; margin: 20px 0;">Drei Nutzungsmöglichkeiten:</h3>                     <h3 style="color: #2c3e50; margin: 20px 0;">Drei Nutzungsmöglichkeiten:</h3>
-                    +
                     <div class="download-links">                     <div class="download-links">
                         <a href="https://office.com" class="download-link">                         <a href="https://office.com" class="download-link">
Zeile 812: Zeile 776:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="tip">                     <div class="tip">
                         Melden Sie sich mit Ihren Schul-Logindaten an, um alle Funktionen nutzen zu können.                         Melden Sie sich mit Ihren Schul-Logindaten an, um alle Funktionen nutzen zu können.
                     </div>                     </div>
-                    +
                     <div class="warning">                     <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!                         <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!
Zeile 832: Zeile 796:
                     <h2>☁️ Schritt 6: BBZ-Cloud-App Installation (Windows, Mac, Linux, Chromebook)</h2>                     <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>                     <p>Die BBZ-Cloud-App vereint alle wichtigen Funktionen in einer Anwendung.</p>
-                    +
                     <div class="platform-tabs">                     <div class="platform-tabs">
                         <button class="platform-tab active" onclick="showPlatformContent('bbz-windows', this)">🪟 Windows</button>                         <button class="platform-tab active" onclick="showPlatformContent('bbz-windows', this)">🪟 Windows</button>
Zeile 839: Zeile 803:
                         <button class="platform-tab" onclick="showPlatformContent('bbz-chromebook', this)">💻 Chromebook</button>                         <button class="platform-tab" onclick="showPlatformContent('bbz-chromebook', this)">💻 Chromebook</button>
                     </div>                     </div>
-                    +
                     <div class="platform-content active" id="bbz-windows">                     <div class="platform-content active" id="bbz-windows">
                         <div class="download-links">                         <div class="download-links">
Zeile 848: Zeile 812:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="platform-content" id="bbz-mac">                     <div class="platform-content" id="bbz-mac">
                         <div class="download-links">                         <div class="download-links">
Zeile 857: Zeile 821:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="platform-content" id="bbz-linux">                     <div class="platform-content" id="bbz-linux">
                         <div class="download-links">                         <div class="download-links">
Zeile 866: Zeile 830:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="platform-content" id="bbz-chromebook">                     <div class="platform-content" id="bbz-chromebook">
                         <div class="download-links">                         <div class="download-links">
Zeile 878: Zeile 842:
                         </div>                         </div>
                     </div>                     </div>
-                    +
                     <div class="steps">                     <div class="steps">
                         <div class="step">                         <div class="step">
Zeile 903: Zeile 867:
             <h2>📞 Support</h2>             <h2>📞 Support</h2>
             <h3>Wenden Sie sich bitte zuerst an Ihre Klassenlehrkraft bei Fragen und Problemen.</h3>             <h3>Wenden Sie sich bitte zuerst an Ihre Klassenlehrkraft bei Fragen und Problemen.</h3>
-            +
             <div class="contact-grid">             <div class="contact-grid">
                 <div class="contact-card">                 <div class="contact-card">
Zeile 914: Zeile 878:
                 </div>                 </div>
             </div>             </div>
-            +
             <div style="margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 10px;">             <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><strong>Version 2.0</strong> | Erstellt am: 29.08.2024</p>
Zeile 930: Zeile 894:
             const contents = container.querySelectorAll('.platform-content');             const contents = container.querySelectorAll('.platform-content');
             const tabs = container.querySelectorAll('.platform-tab');             const tabs = container.querySelectorAll('.platform-tab');
-            +
             contents.forEach(content => content.classList.remove('active'));             contents.forEach(content => content.classList.remove('active'));
             tabs.forEach(tab => tab.classList.remove('active'));             tabs.forEach(tab => tab.classList.remove('active'));
-            +
             // Show selected content and activate tab             // Show selected content and activate tab
             document.getElementById(contentId).classList.add('active');             document.getElementById(contentId).classList.add('active');
Zeile 950: Zeile 914:
             const steps = document.querySelectorAll('.progress-step');             const steps = document.querySelectorAll('.progress-step');
             const progressFill = document.getElementById('progressFill');             const progressFill = document.getElementById('progressFill');
-            +
             let completedSteps = 0;             let completedSteps = 0;
             steps.forEach((step, index) => {             steps.forEach((step, index) => {
Zeile 957: Zeile 921:
                 }                 }
             });             });
-            +
             const progressPercentage = (completedSteps / steps.length) * 100;             const progressPercentage = (completedSteps / steps.length) * 100;
             progressFill.style.width = progressPercentage + '%';             progressFill.style.width = progressPercentage + '%';
Zeile 965: Zeile 929:
         document.addEventListener('DOMContentLoaded', function() {         document.addEventListener('DOMContentLoaded', function() {
             const progressSteps = document.querySelectorAll('.progress-step');             const progressSteps = document.querySelectorAll('.progress-step');
-            +
             progressSteps.forEach(step => {             progressSteps.forEach(step => {
                 step.addEventListener('click', function(e) {                 step.addEventListener('click', function(e) {
                     e.preventDefault();                     e.preventDefault();
-                    +
                     // Toggle completed state                     // Toggle completed state
                     this.classList.toggle('completed');                     this.classList.toggle('completed');
-                    +
                     // Update progress bar                     // Update progress bar
                     updateProgress();                     updateProgress();
-                    +
                     // Scroll to section                     // Scroll to section
                     const targetId = this.getAttribute('href');                     const targetId = this.getAttribute('href');
Zeile 984: Zeile 948:
                 });                 });
             });             });
-            +
             // Initial progress update             // Initial progress update
             updateProgress();             updateProgress();