Die verbindlichen HTML-Strukturen für Hero-Sektionen und Content-Module — von L0 bis L3
Die L0-Seite (Landing Page) hat ein spezielles Hero-Pattern: Zentrierter Titel, Untertitel auf rgba(255,255,255,.85), ein Badge und — wenn mehrere Zielgruppen existieren — einen Audience-Switch.
<!-- L0 Hero: Landing Page --> <section class="module module-hero" id="hero"> <div class="module-content" style="text-align:center"> <!-- Badge --> <span class="hero-badge"> 🔧 Entwickler </span> <!-- Titel: Weiß auf dunklem Gradient --> <h1 style="color:#FFFFFF; font-family:var(--font-display); font-size:var(--text-5xl); font-weight:800"> Kurstitel </h1> <!-- Untertitel: NICHT #FFFFFF --> <p style="color:rgba(255,255,255,.85); font-size:var(--text-xl)"> Beschreibung des Kurses ... </p> <!-- Audience Switch (nur bei >1 Audience) --> <div class="audience-switch"> <a href="index_dev_de.html" class="active">🔧 Entwickler</a> <a href="index_mgr_de.html"> 📊 Manager</a> </div> </div> </section>
L0-Hero Bestandteile:
Badge — Zeigt Emoji + Audience-Name an. Auf dem Gradient-Hintergrund mit leichtem transparenten Hintergrund.
Titel (h1) — Weiß (#FFFFFF) auf dem dunklen Gradient. font-weight: 800, font-size: --text-5xl.
Untertitel — rgba(255,255,255,.85) — leicht transparent, NICHT reines Weiß. Schafft visuelle Hierarchie.
Audience Switch — Nur vorhanden, wenn mehrere Zielgruppen generiert wurden. Links zu den anderen L0-Seiten.
Kein page-overview! L0 hat KEINE Seitenübersicht, weil die Karten auf der L0-Seite bereits die Navigation darstellen.
Wichtig: Die L0-Seite hat keine Level-Dots und keinen Zurück-Button. Sie ist der Einstiegspunkt — es gibt nichts, wohin man zurück navigieren könnte.
Ab L1 verwenden alle Seiten das gleiche Hero-Pattern mit Level-Dots, Zurück-Button, Titel und PAGE-OVERVIEW (Pflicht!). Die Page-Overview listet alle Sektionen mit Anchor-Links auf.
<!-- L1-L3 Hero: Mit Level-Dots + Page-Overview --> <section class="module module-hero" id="hero"> <div class="module-content" style="text-align:center"> <!-- Level-Dots: done/done/active/empty --> <div class="level-indicator"> <span class="level-dot level-dot-done"></span> <span class="level-dot level-dot-done"></span> <span class="level-dot level-dot-active"></span> <span class="level-dot"></span> </div> <!-- Zurück-Button --> <a href="../l1/parent.html" class="back-button"> ← Zurück zu ... </a> <!-- Titel --> <h1 style="color:#FFFFFF; ..."> Seitentitel </h1> <p style="color:rgba(255,255,255,.85); ..."> Beschreibung </p> <!-- PAGE-OVERVIEW: PFLICHT ab L1! --> <div class="page-overview"> <div class="page-overview-title"> Auf dieser Seite </div> <div class="page-overview-items"> <a href="#section-1" class="page-overview-item"> <span class="page-overview-num">01</span> <span class="page-overview-text"> Sektions-Titel </span> </a> <!-- ... weitere Items --> </div> </div> </div> </section>
L1–L3 Hero Bestandteile:
Level-Dots — 4 Punkte für L0–L3. Abgeschlossene Levels: orange (.level-dot-done). Aktuelles Level: dunkelblau (.level-dot-active). Zukünftige: leer.
Zurück-Button — Verlinkt zur Elternseite. Bei L1 zur L0-Seite, bei L2 zur L1-Seite, bei L3 zur L2-Seite. Immer relativer Pfad.
Titel + Untertitel — Gleiche Regeln wie L0: Weißer Titel, rgba-Untertitel.
PAGE-OVERVIEW (PFLICHT!) — Listet alle Sektionen mit Nummern und Anchor-Links. Ohne Page-Overview kann der Nutzer nicht sehen, was auf der Seite kommt. Häufigster Fehler: Hero ohne Page-Overview.
Level-Dot-Logik für L2: L0 = done (orange), L1 = done (orange), L2 = active (dunkelblau, etwas größer), L3 = leer (nur Border). Die Dot-Klassen sind: level-dot-done, level-dot-active, und keine Klasse für leer.
Jede Content-Sektion ist ein Modul mit einer festen Verschachtelung: .module → .module-content → Header + Body → Screens.
<!-- Modul-Pattern: Jede Content-Sektion --> <section class="module" id="section-1" style="background:var(--color-bg-warm)"> <!-- min-height: 100dvh (per CSS) scroll-snap-align: start Alternierende BGs: warm / weiß / warm / weiß --> <div class="module-content"> <!-- max-width: 820px, zentriert --> <header class="module-header animate-in"> <!-- Modul-Nummer: Groß, transparent --> <span class="module-number">01</span> <!-- font-size: 3.75rem, opacity: .15 --> <h2 class="module-title"> Sektions-Titel </h2> </header> <div class="module-body"> <!-- flex-direction: column, gap: 2rem --> <section class="screen animate-in"> <!-- Erster Inhaltsblock --> <p>Einleitungstext ...</p> </section> <section class="screen animate-in"> <!-- Visualisierung, Cards, etc. --> </section> </div> </div> </section> <!-- Nächstes Modul: ANDERER Hintergrund --> <section class="module" id="section-2" style="background:var(--color-bg)"> <!-- ... --> </section>
Modul-Verschachtelung:
.module — Außencontainer. min-height: 100dvh. scroll-snap-align: start. Hintergrund alternierend: --color-bg-warm / --color-bg.
.module-content — Innerer Container. max-width: 820px. margin: 0 auto. Hält den Inhalt zentriert.
.module-header — Enthält .module-number (01, 02 ...) und .module-title (h2). Die Nummer ist riesig und fast transparent (opacity: .15).
.module-body — Flexbox column mit gap. Enthält die .screen-Elemente.
.screen — Einzelne Inhaltsblöcke innerhalb eines Moduls. Jeder Screen hat animate-in für Scroll-Animation.
Alternierende Hintergründe: Modul 1 = --color-bg-warm (#F3EFEB), Modul 2 = --color-bg (#FFFFFF), Modul 3 = warm, Modul 4 = weiß ... Dieses Muster MUSS eingehalten werden.
Die fünf häufigsten Fehler bei der Implementierung der Modul-Patterns — mit konkreten Falsch/Richtig-Vergleichen.
Fehler 1: Nackte Sektion ohne Modul-Wrapper
<!-- Fehlt: .module, .module-content, .module-header, .module-number --> <section id="thema"> <h2>Thema</h2> <p>Inhalt ...</p> </section>
<section class="module" id="section-1" style="background:var(--color-bg-warm)"> <div class="module-content"> <header class="module-header animate-in"> <span class="module-number">01</span> <h2 class="module-title">Thema</h2> </header> <div class="module-body"> <section class="screen animate-in"> <p>Inhalt ...</p> </section> </div> </div> </section>
Fehler 2: Hero ohne Page-Overview
<section class="module module-hero"> <div class="module-content"> <h1>Titel</h1> <p>Beschreibung</p> <!-- KEIN page-overview! --> </div> </section>
<section class="module module-hero"> <div class="module-content"> <h1>Titel</h1> <p>Beschreibung</p> <div class="page-overview"> <div class="page-overview-title"> Auf dieser Seite</div> <div class="page-overview-items"> <!-- Anchor-Links --> </div> </div> </div> </section>
min-height: 100dvh brechen das Scroll-Snap-Verhalten. Jedes Modul MUSS die volle Viewport-Höhe einnehmen..content-section statt .module. Die Foundation kennt nur die vordefinierten Klassen.Was ist falsch an diesem Code?<section id="thema"><h2>Thema</h2>...</section>