Template-System & Seiten-Anatomie

Modul-Struktur, Hero-Varianten und die Bausteine jeder generierten Seite

Auf dieser Seite

01Modul-Struktur 02Hero-Varianten 03Hintergrund-Alternation 04Interaktive Elemente 05Responsive Patterns

01

Modul-Struktur

Jede Seite besteht aus identisch strukturierten Modulen. Es gibt keine nackten Sektionen. Die Hierarchie ist strikt: .module enthält .module-content, das wiederum Header und Body umschließt.

Verschachtelte Seiten-Anatomie

.module-number — große, verblasste Zahl (z.B. „01“, opacity: .15)

.module-title — Überschrift des Abschnitts

Inhalt: Text, Visualisierungen, Karten, Quizzes, Code-Blöcke, ...

// Minimales Modul-Skelett <section class="module" id="section-N"> <div class="module-content"> <header class="module-header animate-in"> <span class="module-number">0N</span> <h2 class="module-title">Titel</h2> </header> <div class="module-body"> <section class="screen animate-in"> <p>Inhalt hier ...</p> </section> </div> </div> </section> // Regeln: // 1. Jedes Modul hat min-height: 100dvh // 2. Scroll-Snap-Align: start // 3. Padding-Top berücksichtigt die fixe Navigation // 4. .animate-in triggert via IntersectionObserver

Strukturregel: Jede Sektion wird in ein Modul mit voller Viewport-Höhe gepackt. Das Modul enthält einen zentrierten Content-Bereich (max. 820px), darin einen Header mit großer verblasster Nummer und Titel, gefolgt vom Body mit beliebig vielen Screens. Die Screens enthalten den eigentlichen Inhalt — Text, Visualisierungen, Karten oder Code-Blöcke.

02

Hero-Varianten

Es gibt genau zwei Hero-Typen. Der L0-Hero ist die Einstiegsseite mit Zielgruppen-Wechsel. Alle tieferen Levels (L1–L3) verwenden den Deep-Hero mit Level-Dots, Zurück-Button und obligatorischer Seitenübersicht.

L0-Hero (Einstiegsseite)

BADGE

Titel

Untertitel

Entscheider Anwender Entwickler

Zentrierter Titel, Untertitel, Badge, Audience-Switch. Keine Level-Dots, kein Zurück-Button.

L1–L3-Hero (Vertiefung)

← Zurück

Titel

Auf dieser Seite

01 Abschnitt 02 Abschnitt

Level-Dots, Zurück-Button, Titel und PAGE-OVERVIEW (Pflicht!). Die Seitenübersicht listet alle Sektionen als Anchor-Links.

Harte Regel: Ein L1–L3-Hero ohne Page-Overview ist ein Fehler. Die Seitenübersicht mit Anchor-Links ist obligatorisch auf allen Vertiefungsseiten. Sie dient als Inhaltsverzeichnis und als Orientierungshilfe.

03

Hintergrund-Alternation

Module wechseln systematisch zwischen zwei Hintergrundfarben. Dieses Muster erzeugt visuellen Rhythmus und erleichtert die Orientierung beim Scrollen.

Farbschema der Module

Hero Deep Blue Gradient — #000077 → #0000AA

Ungerade Warm Gray — #F3EFEB

Gerade Weiß — #FFFFFF

Ungerade Warm Gray — #F3EFEB

// Hintergrund-Zuweisung <section class="module module-hero"> // Deep Blue (immer) <section class="module" style="background:var(--color-bg-warm)"> // #F3EFEB <section class="module" style="background:var(--color-bg)"> // #FFFFFF <section class="module" style="background:var(--color-bg-warm)"> // #F3EFEB <section class="module" style="background:var(--color-bg)"> // #FFFFFF // Regel: Der Hero ist IMMER Deep Blue. // Danach alternieren die Module: warm → weiß → warm → weiß // Textfarbe auf Warm Gray: var(--color-text) = #1A1A2E — Kontrast 10.2:1 // Textfarbe auf Weiß: var(--color-text) = #1A1A2E — Kontrast 15.4:1

Alternation: Der Hero-Bereich nutzt immer den Deep-Blue-Gradient. Danach wechseln die Module zwischen Warm Gray (#F3EFEB) und Weiß (#FFFFFF). Die Textfarbe (#1A1A2E) erreicht auf beiden Hintergründen WCAG AAA-Kontrast. Es wird niemals weißer Text auf hellem Hintergrund verwendet.

04

Interaktive Elemente

Jede Seite bietet mindestens ein interaktives Element. Die vier Kerntypen: Quizzes, Code-Toggles, Glossar-Tooltips und File-Tree-Visualisierungen.

Quiz (Click-to-Answer)

✏️ Mini-Beispiel

Welches HTML-Attribut bestimmt die korrekte Antwort?

class="correct"

data-correct="N" auf dem .quiz-Container

id="answer"

Code ↔ Klartext Toggle

// Code-Ansicht: technische Details .code-toggle-wrap .code-toggle-btn // Umschalt-Button oben rechts .code-toggle-code // Standard-Ansicht .code-toggle-plain // Alternative Klartext-Ansicht

Klartext-Ansicht: Jeder Code-Block hat eine alternative Erklärung in einfacher Sprache. Der Toggle wechselt zwischen technischer und verständlicher Darstellung.

Glossar-Tooltips

Technische Begriffe wie Helpfulness Score oder IntersectionObserver erhalten eine gestrichelte Unterstreichung. Beim Hover erscheint ein Popup mit der Definition.

File-Tree-Visualisierung

output/ l1/ orchestrator_dev_de.html orchestrator_dev_en.html templates_dev_de.html l2/ hero-modul-patterns_dev_de.html

05

Responsive Patterns

Drei Breakpoints steuern das Layout. Auf kleinen Bildschirmen werden mehrspaltige Layouts zu Single-Column umgebaut, Navigationstext wird ausgeblendet und Deep-Dive-Links stapeln sich vertikal.

🖥️

Desktop

Ab 769px Breite. Mehrspaltige Grids, horizontale Sibling-Nav, volle Textanzeige in der Navigation.

> 768px

📱

Tablet

481–768px. Karten werden einspaltig. Viz-Flow wechselt zu vertikal. Pfeile rotieren 90°.

481–768px

📲

Mobile

Unter 480px. Reduzierte Paddings, Deep-Dive-Links zentriert und gestapelt. .nav-link-text wird ausgeblendet.

≤ 480px

// Breakpoint-Übersicht @media (max-width: 768px) .cards-grid // → grid-template-columns: 1fr .viz-flow // → flex-direction: column .viz-flow-arrow // → transform: rotate(90deg) :root font-sizes // → text-4xl/5xl/6xl verkleinert @media (max-width: 480px) .module padding // → space-8 statt space-16 .deep-dive-link // → flex-direction: column; text-align: center .nav-link-text // → display: none .sibling-nav-items // → flex-direction: column

Responsive Strategie: Auf Tablets werden Kartenraster und Flussdiagramme einspaltig. Auf Mobilgeräten kommen kleinere Abstände, gestapelte Deep-Dive-Links und ausgeblendete Navigationstexte hinzu. Die Sibling-Navigation wechselt zu einer vertikalen Spalte. Alle Breakpoints nutzen die gleichen CSS-Variablen — nur die Layouts ändern sich.

✏️ Kurz getestet

Was stimmt nicht mit einem L1-Hero, der nur Titel und Zurück-Button zeigt?

Es fehlen die Level-Dots oben

Die Page-Overview fehlt — die Sektionsliste ist auf L1–L3 Pflicht

Der Hintergrund müsste Warm Gray sein

Im Detail Hero-Modul-Patterns im Detail → Alle Hero-Varianten, ihre CSS-Klassen und die exakten Einbettungsregeln

→

Weitere Vertiefungsseiten für Entwickler

01 Orchestrator 02 Helpfulness-Scoring 03 Pipelines 04 Design-System 05 Navigation 06 Templates 07 Qualitätssicherung