HTML-Templates & Modul-Architektur

01

Modul-Struktur

Das Grundgerüst jeder Inhaltssektion

Jede Kursseite besteht aus einer Abfolge von .moduleEine fullscreen-Sektion mit scroll-snap-align: start, die den gesamten Viewport einnimmt.-Sektionen. Jedes Modul ist ein eigenständiger Inhaltsblock mit einer großen, gefadeten Nummer (01, 02, ...), einem Titel und einem Body-Bereich.

Die CSS-Klassen-Hierarchie folgt einem festen Muster:

Klasse	Rolle	Besonderheit
.module	Äußerer Container	`min-height: 100dvh`, scroll-snap, alternierender Hintergrund
.module-content	Zentrierter Inhaltsbereich	`max-width: 820px`, horizontal zentriert
.module-header	Nummer + Titel	Flexbox, `align-items: flex-start`
.module-number	Grosse gefadete Nummer	`opacity: .12`, `font-size: clamp(4rem,10vw,7rem)`
.module-body	Fliesstext + Code	`max-width: 70ch` auf Absätzen
.screen	Optionaler Vollbild-Container	Wird für einzelne "Screens" innerhalb eines Moduls genutzt

          <!-- Das HTML-Template eines Moduls -->
<section class="module" id="mod1">
  <div class="module-content">

    <!-- Header: Grosse Nummer + Titel -->
    <div class="module-header">
      <span class="module-number">01</span>
      <div>
        <div class="module-title">Titel hier</div>
        <div class="module-subtitle">Untertitel</div>
      </div>
    </div>

    <!-- Body: Fliesstext, Code-Blöcke, Toggles -->
    <div class="module-body">
      <p>Inhalt des Moduls...</p>

      <!-- Code-Block -->
      <div class="code-block">
        <code>...</code>
      </div>
    </div>

  </div>
</section>

<!-- CSS: Alternierender Hintergrund -->
.module:nth-child(odd)  { background: #fff }
.module:nth-child(even) { background: var(--color-warm-gray-bg) }
        

section.module ist der äussere Container. Er nimmt mindestens die volle Viewport-Höhe ein (min-height: 100dvh) und nutzt scroll-snap-align: start, damit der Browser beim Scrollen sanft an Modul-Grenzen einrastet.

.module-content begrenzt die Inhaltsbreite auf 820px und zentriert den Block horizontal. Das sorgt für optimale Lesbarkeit.

.module-number zeigt eine dekorative Nummer (01, 02, ...) in sehr grosser Schriftgrösse mit nur 12% Deckkraft. Sie dient der visuellen Orientierung, nicht der Navigation.

Alternierende Hintergründe: Ungerade Module bekommen weiss, gerade Module den warmen Grauton #F3EFEB. Das erzeugt einen subtilen Rhythmus beim Scrollen.

02

Hero-Templates

Zwei Varianten: L0-Hero und L1-L3-Hero

Der Learning Skill verwendet zwei unterschiedliche Hero-Varianten. Der L0-Hero (Überblicksseite) zeigt den Skill-Titel, ein Zielgruppen-Badge und die Anzahl der Module. Der L1-L3-Hero (Detail-Seiten) zeigt stattdessen einen Back-Button, den Level-Indicator, eine Page-Overview-Liste und den Seitentitel.

          <!-- ========== L0 HERO (Überblicksseite) ========== -->
<section class="hero" id="hero">
  <div>
    <!-- Badge: Zielgruppe -->
    <span class="hero-badge">
      Entwickler-Perspektive
    </span>

    <!-- Titel -->
    <h1>Learning Skill v2.0</h1>

    <!-- Untertitel -->
    <p class="hero-sub">
      Wie der Skill Codebases versteht und
      in interaktive Kurse verwandelt.
    </p>

    <!-- Modul-Counter -->
    <div class="hero-count">
      5 Module · 15 Min. Lesezeit
    </div>
  </div>
</section>
        

L0-Hero ist die Einstiegsseite. Sie zeigt ein .hero-badge mit der Zielgruppe (Anwender/Entwickler), den grossen Titel des Skills, einen Untertitel und optional einen Modul-Counter.

Kein Back-Button, kein Level-Indicator: L0 ist die oberste Ebene. Der User kommt hierher, nicht von hier zurück.

Hintergrund: Immer var(--color-deep-blue) (#000099) mit weisser Schrift.

          <!-- ========== L1-L3 HERO (Detail-Seiten) ========== -->
<section class="hero" id="hero">
  <div>
    <!-- Back-Button: Link zur übergeordneten Seite -->
    <a href="../l1/kurs-pipeline_dev_de.html"
       class="hero-back">
      <svg viewBox="0 0 16 16">
        <path d="M9.78 12.78a.75.75..."/>
      </svg>
      Zurück zur Kurs-Pipeline
    </a>

    <!-- Level-Indicator: 4 Dots -->
    <div class="level-indicator">
      <div class="level-dot done"></div>  <!-- L0 -->
      <div class="level-dot done"></div>  <!-- L1 -->
      <div class="level-dot active"></div> <!-- L2 = aktuell -->
      <div class="level-dot empty"></div>  <!-- L3 -->
    </div>

    <!-- Badge + Titel -->
    <span class="hero-badge">Level 2 — Detail</span>
    <h1>HTML-Templates & Modul-Architektur</h1>
    <p class="hero-sub">Beschreibungstext...</p>

    <!-- Page-Overview -->
    <div class="page-overview">
      <div class="page-overview-title">
        Auf dieser Seite
      </div>
      <ul class="page-overview-list">
        <li>Modul-Struktur — ...</li>
        <li>Hero-Templates — ...</li>
        <li>Navigation — ...</li>
      </ul>
    </div>
  </div>
</section>
        

L1-L3-Hero enthält immer einen Back-Button (.hero-back), der zur übergeordneten Seite verlinkt. Der SVG-Pfeil zeigt nach links.

Level-Indicator: 4 Punkte, die den aktuellen Level visuell anzeigen. .done = orange gefüllt, .active = orange mit weissem Rand + Glow, .empty = transparent.

Page-Overview: Eine kompakte Inhaltsübersicht mit orangenen Bullet-Points. Hilft dem Leser, schnell zu entscheiden, ob die Seite relevant ist.

03

Navigation-Komponenten

Breadcrumbs, Deep-Dive-Links, Sibling-Nav und mehr

Die Navigation des Learning Skill besteht aus mehreren unabhängigen Komponenten, die je nach Seitentyp kombiniert werden. Alle leben in der fixierten .nav-Bar am oberen Bildschirmrand.

.nav-breadcrumb Pfad-Anzeige: L0 > L1 > L2 Nur auf L1-L3 Seiten

.nav-dots Modul-Punkte zum Springen Per JS generiert

.level-indicator 4 Dots im Hero-Bereich done / active / empty

.sibling-nav Links zu Geschwister-Seiten Vor dem Footer, blauer BG

.hero-back Zurück-Link im Hero SVG-Pfeil + Text

.nav-right Sprache + GitHub-Icon Flagge + SVG-Icon

          <!-- ===== BREADCRUMB (L1-L3 Nav-Bar) ===== -->
<div class="nav-breadcrumb">
  <a href="../index_dev_de.html">L0 Überblick</a>
  <span class="sep">&#9656;</span>
  <a href="../l1/kurs-pipeline_dev_de.html">L1 Kurs-Pipeline</a>
  <span class="sep">&#9656;</span>
  <span class="current">L2 HTML-Templates</span>
</div>

<!-- ===== DEEP-DIVE LINK (in Modul-Body) ===== -->
<a href="../l3/detail-seite.html"
   class="deep-dive-link">
  Deep-Dive: Detail-Seite →
</a>

<!-- ===== SIBLING-NAV (vor Footer) ===== -->
<section class="sibling-nav">
  <div class="sibling-nav-inner">
    <div class="sibling-nav-title">
      Weitere Entwickler-L2-Seiten
    </div>
    <div class="sibling-nav-grid">
      <a href="seite.html"
         class="sibling-nav-link">
        <div class="sibling-nav-link-title">
          Seitenname
        </div>
        <div class="sibling-nav-link-sub">
          Kurzbeschreibung
        </div>
      </a>
      <!-- .active auf der aktuellen Seite -->
      <a class="sibling-nav-link active">...</a>
    </div>
  </div>
</section>

<!-- ===== NAV-BAR: L0 vs. L1-L3 ===== -->
<!-- L0: Nur Logo/Titel + Sprach-Switch -->
<nav class="nav">
  <div class="nav-title">Learning Skill</div>
  <div class="nav-right">...</div>
</nav>

<!-- L1-L3: Breadcrumb + Dots + Sprach-Switch -->
<nav class="nav">
  <div class="nav-breadcrumb">...</div>
  <div class="nav-dots"></div>
  <div class="nav-right">...</div>
</nav>

<!-- ===== ZIELGRUPPEN-SWITCH (L0 only) ===== -->
<div class="audience-switch">
  <a href="index_de.html"
     class="audience-btn">Anwender</a>
  <a href="index_dev_de.html"
     class="audience-btn active">Entwickler</a>
</div>
        

Breadcrumb: Zeigt den hierarchischen Pfad. Jede Ebene ist ein Link, die aktuelle Seite wird fett dargestellt (.current). Die Trennzeichen (.sep) nutzen das Unicode-Dreieck ▸.

Deep-Dive-Link: Erscheint am Ende eines Moduls, wenn ein L3-Deep-Dive existiert. Pfeil-Icon (→) deutet auf tiefere Ebene hin.

Sibling-Nav: Grid-Layout mit allen Geschwister-Seiten derselben Ebene. Die aktuelle Seite bekommt .active (orangener Rand).

Nav-Bar-Unterschiede: L0 zeigt nur einen Titel + Sprach-Switch. L1-L3 ersetzen den Titel durch Breadcrumbs und fügen die Modul-Dots hinzu.

Zielgruppen-Switch: Nur auf L0-Seiten. Zwei Buttons: Anwender und Entwickler. Die aktive Perspektive ist hervorgehoben.

04

Interaktive Elemente

Toggle, Tooltips, Quiz, FAQ-Akkordeon und Flow-Diagramme

Der Learning Skill nutzt mehrere interaktive Komponenten, um komplexe Inhalte zugänglich zu machen. Das zentrale Element ist der Code/Klartext-Toggle — jeder Code-Block hat eine Klartext-Erklärung als Alternative.

.toggle-block Code ↔ Klartext umschalten Tabs + Panels + JS

.tooltip Hover-Erklärungen Dashed underline + Popup

.quiz-block Multiple-Choice-Fragen Antwort-Buttons + Feedback

.faq-item Aufklappbare Fragen Click-to-expand Akkordeon

.flow-diagram Prozess-Visualisierung CSS-Grid + Pfeile

          <!-- ===== CODE/KLARTEXT TOGGLE ===== -->
<div class="toggle-block" id="toggle1">

  <!-- Tab-Leiste -->
  <div class="toggle-tabs">
    <button class="toggle-tab active"
      onclick="toggleView('toggle1','code')">
      Code
    </button>
    <button class="toggle-tab"
      onclick="toggleView('toggle1','text')">
      Klartext
    </button>
  </div>

  <!-- Code-Panel -->
  <div class="toggle-panel code-panel active"
       data-panel="code">
    <code>...formatierter Code...</code>
  </div>

  <!-- Klartext-Panel -->
  <div class="toggle-panel text-panel"
       data-panel="text">
    <p>Verständliche Erklärung...</p>
  </div>

</div>

/* ===== JavaScript: toggleView() ===== */
function toggleView(blockId, panel) {
  const block = document.getElementById(blockId);

  // Alle Tabs deaktivieren
  block.querySelectorAll('.toggle-tab')
    .forEach(t => t.classList.remove('active'));

  // Alle Panels verstecken
  block.querySelectorAll('.toggle-panel')
    .forEach(p => p.classList.remove('active'));

  // Gewähltes Panel aktivieren
  block.querySelector(
    `[data-panel="${panel}"]`
  ).classList.add('active');

  // Passenden Tab aktivieren
  block.querySelectorAll('.toggle-tab')
    .forEach(t => {
      if (
        (panel === 'code' &&
         t.textContent === 'Code') ||
        (panel === 'text' &&
         t.textContent === 'Klartext')
      ) t.classList.add('active');
    });
}

/* ===== TOOLTIP: CSS + Positionierung ===== */
.tooltip {
  position: relative;
  border-bottom: 1px dashed var(--color-impulse-orange);
  cursor: help;
}

.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: fixed;  /* fixed statt absolute! */
  z-index: 2000;
  max-width: 280px;
  transition: opacity .2s;
}

/* JS positioniert den Tooltip per mouseenter */
document.querySelectorAll('.tooltip').forEach(tip => {
  tip.addEventListener('mouseenter', e => {
    const tt = tip.querySelector('.tooltip-text');
    const rect = tip.getBoundingClientRect();
    tt.style.left = rect.left + 'px';
    tt.style.top = (rect.bottom + 8) + 'px';
  });
});
        

Toggle-Mechanik: Jeder Toggle-Block hat eine eindeutige ID. Die toggleView()-Funktion schaltet zwischen Code- und Klartext-Panel um, indem sie die .active-Klasse verschiebt.

Code-Panel: Dunkler Hintergrund (#000066), monospace Schrift, syntax-highlighted mit Span-Klassen (.code-keyword, .code-string, .code-orange, .code-comment).

Klartext-Panel: Weisser Hintergrund, normaler Body-Font. Erklärt den Code in verständlicher Sprache, ohne technische Vorkenntnisse vorauszusetzen.

Tooltip: Nutzt position: fixed statt absolute, damit der Tooltip nicht von overflow-hidden-Containern abgeschnitten wird. JavaScript berechnet die Position dynamisch per getBoundingClientRect().

Quiz/FAQ: Folgen dem gleichen Pattern: ein Container mit Klick-Handler, der .active-Klassen toggled. Quiz-Antworten bekommen .correct oder .wrong nach dem Klick.

05

Responsive & Integrationsmodus

Breakpoints, Standalone vs. Eingebettet

Die Kursseiten sind für zwei Breakpoints optimiert und unterstützen sowohl den Standalone-Betrieb (eigene URL) als auch die Einbettung in eine übergeordnete Anwendung.

Breakpoints:

Desktop

> 768px

Tablet

481 - 768px

Mobile

≤ 480px

          /* ===== MEDIA QUERIES ===== */

/* Tablet: Kompaktere Module */
@media (max-width: 768px) {
  .module {
    padding: 4rem 1.2rem 3rem;
    min-height: auto;  /* Kein Fullscreen */
  }
  .module-header {
    flex-direction: column;
    gap: .5rem;
  }
  .module-number {
    font-size: 3.5rem;
  }
  .hero h1 {
    font-size: 1.8rem;
  }
  .nav-breadcrumb {
    font-size: .72rem;
  }
  .sibling-nav-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile: Einspaltiges Layout */
@media (max-width: 480px) {
  .nav {
    padding: .5rem .8rem;
  }
  .nav-dots {
    display: none;  /* Dots ausblenden */
  }
  .hero {
    padding: 4.5rem 1rem 2.5rem;
    min-height: 60dvh;
  }
  .code-block code {
    font-size: .7rem;
  }
  .toggle-tabs {
    flex-direction: column;
  }
}

<!-- ===== FOOTER: STANDALONE ===== -->
<footer style="background:#F3EFEB;
  border-top:2px solid #E4DAD4;
  padding:2rem">
  <div style="max-width:820px; margin:0 auto;
    display:flex; justify-content:space-between;
    align-items:center; flex-wrap:wrap;
    gap:1rem; font-size:.85rem;
    color:#6B6560">
    <span>&copy; 2026 Mark Zimmermann</span>
    <div style="display:flex; gap:1.5rem">
      <a href="...impressum...">Impressum</a>
      <a href="...github...">GitHub</a>
    </div>
  </div>
</footer>

<!-- ===== FOOTER: EINGEBETTET (iframe) ===== -->
<!-- Kein eigener Footer — die Host-App
     liefert Header und Footer.
     Die Nav-Bar und der Footer werden
     per CSS ausgeblendet: -->
<style>
  /* Wenn ?embedded=true in der URL */
  .embedded .nav { display: none; }
  .embedded footer { display: none; }
  .embedded .hero {
    padding-top: 2rem;  /* Kein Nav-Offset */
  }
</style>
        

768px-Breakpoint: Module verlieren min-height: 100dvh und werden so hoch wie ihr Inhalt. Der Header wechselt von horizontal (Nummer neben Titel) zu vertikal (Nummer über Titel). Breadcrumbs werden kleiner.

480px-Breakpoint: Die Modul-Dots in der Nav-Bar werden ausgeblendet (zu wenig Platz). Toggle-Tabs stapeln sich vertikal. Code-Blöcke bekommen eine noch kleinere Schrift für bessere Lesbarkeit auf schmalen Screens.

Standalone-Footer: Zeigt Copyright, Impressum-Link und GitHub-Link. Warmer Grau-Hintergrund (#F3EFEB) mit dunklerem Rand oben (#E4DAD4).

Integrationsmodus: Wenn die Seite per iframe eingebettet wird, können Nav und Footer per CSS ausgeblendet werden. Die Host-Anwendung übernimmt dann die äussere Navigation. Der Hero-Padding wird reduziert, da kein fixierter Nav-Balken mehr Platz benötigt.

Kein Deep-Dive auf L3: Dieses Thema hat keinen L3-Deep-Dive. Die hier gezeigten Templates und Patterns decken die gesamte HTML-Architektur des Learning Skill ab. Für CSS-Variablen und Design-Tokens siehe die Design-System-Seite.