/* JH 06.10.2026: ## entfernt: .card, .card:hover, .zertifikat-hinweis (in keiner Seite verwendet) sowie die doppelten Regeln .logo-bos, .logo-ki und .bk-timeline .bk-tl-content h2 | Quelle: eigene Code-Analyse (csstree-validator, Stylelint) ## */
/* JH 03.10.2026: ## Format der Kommentare: Beschreibung | Quelle. Buehler = Buehler/Schlaich/Sinner (2017), HTML5 und CSS3, Springer Vieweg, Zahl = Seite im Buch; * = Seite nur aus dem Inhaltsverzeichnis ## */
/* JH 03.10.2026: ## Ursprung: KI-gestuetzt entwickelt (Uebergabe-Datei), Eigenanteil des Autors offen; der Abschnitt "Timeline" ist aus W3Schools "How TO - Timeline" uebernommen und angepasst ## */
/* JH 02.09.2026 - BOS-KI*/ 
/* BOS-KI Akademie Stylesheet */

/* JH 27.09.2026: definiert wiederverwendbare Farbwerte als CSS-Variablen (--name), die per var() ueberall referenziert werden (keine in den erlaubten Quellen (CSS-Variablen)) */
:root {
  --color-base: #F8F7F5;
  --color-white: #FFFFFF;
  --color-bos: #2C3E50;
  --color-bos-light: #34495E;
  --color-ki: #00A86B;
  --color-ki-dark: #008C5A;
  --color-gray-light: #F0EEEB;
  --color-gray-border: #E0DEDB;
  --color-text: #2C3E50;
  --color-text-gray: #6C757D;
  /* JH 01.10.2026: vgl. https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme - "only light" verbietet dem Browser, die Seite automatisch abzudunkeln (Auto Dark Mode) */
  color-scheme: only light;
}

/* JH 27.09.2026: box-sizing:border-box zaehlt Rahmen/Innenabstand zur angegebenen Breite; margin/padding-Reset: openbook.rheinwerk-verlag.de/it_handbuch/17_001.html (CSS-Grundlagen Boxmodell) (Bühler S. 66) */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* JH 27.09.2026: scroll-behavior:smooth laesst Sprungmarken/Anker sanft statt abrupt scrollen (keine in den erlaubten Quellen (scroll-behavior)) */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/* JH 27.09.2026: display:flex + flex-direction:column macht body zur Spalte, damit footer immer unten bleibt (min-height:100vh) (Bühler S. 71) */
body {
  background-color: var(--color-base);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== HEADER ===== */
/* JH 27.09.2026: vgl. position:sticky Bühler S. 68 und z-index Bühler S. 68 - Header bleibt beim Scrollen oben sichtbar und liegt ueber anderen Elementen; Ausrichtung per Flexbox Bühler S. 71 */
header {
  background: var(--color-white);
  border-bottom: 2px solid var(--color-ki);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* JH 27.09.2026: Logo-Bild und Text per Flexbox nebeneinander/mittig ausgerichtet (Bühler S. 71) */
.logo-header {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* JH 03.10.2026: ## Logo-Bild: feste Hoehe 48 px, die Breite passt sich im Seitenverhaeltnis an (auto) | Quelle: Bühler S. 57, 66 ## */
.logo-header img {
  height: 48px;
  width: auto;
}

/* JH 03.10.2026: ## Farbe des Wortteils "BOS" (Dunkelblau-Grau, Variable --color-bos). | Quelle: Bühler S. 58 ## */
.logo-bos {
  color: var(--color-bos);
}

/* JH 03.10.2026: ## Farbe des Wortteils "KI" (Gruen, Variable --color-ki) | Quelle: Bühler S. 58 ## */
.logo-ki {
  color: var(--color-ki);
}

/* nav desktop */





/* mobile menu - versteckt auf desktop */




/* ===== CONTENT ===== */
/* JH 27.09.2026: vgl. margin:0 auto https://openbook.rheinwerk-verlag.de/it_handbuch/17_001.html (Boxmodell-Grundlagen, hier zur horizontalen Zentrierung genutzt); flex:1 Bühler S. 71 - Inhalt fuellt den Platz zwischen Header und Footer */
main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 2rem 9rem 2rem;
  flex: 1;
  width: 100%;
}

/* JH 03.10.2026: ## Startbereich (Hero): zentrierter Text mit Abstand oben und unten | Quelle: Bühler S. 61 ## */
.hero {
  text-align: center;
  padding: 2rem 0;
}

/* JH 27.09.2026: clamp(min, bevorzugt, max) skaliert die Schriftgroesse fliessend zwischen 2rem und 3rem je nach Fensterbreite, ohne extra Media Query (keine in den erlaubten Quellen (clamp)) */
.hero h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  margin: 1rem 0;
  color: var(--color-bos);
  font-weight: 700;
}

/* JH 03.10.2026: ## Untertitel unter der Hauptueberschrift: normale Groesse, graue Schrift (Variable --color-text-gray) | Quelle: Bühler S. 60-61 ## */
.tagline {
  font-size: 1rem;
  color: var(--color-text-gray);
  margin: 1rem 0;
}

/* JH 03.10.2026: ## Ueberschrift 2: 1,8 rem gross, halbfett, Dunkelblau-Grau, Abstand oben groesser als unten | Quelle: Bühler S. 60-61 ## */
h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-bos);
  margin: 2rem 0 1rem 0;
}

/* JH 03.10.2026: ## Ueberschrift 3: 1,3 rem gross, halbfett, Dunkelblau-Grau | Quelle: Bühler S. 60-61 ## */
h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-bos);
  margin: 1.5rem 0 0.8rem 0;
}

/* JH 03.10.2026: ## Absaetze: Abstand nach unten und lockerer Zeilenabstand (1,6) fuer bessere Lesbarkeit | Quelle: Bühler S. 62, 66 ## */
p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* JH 03.10.2026: ## Listen: Abstand oben und unten | Quelle: Bühler S. 62, 66 ## */
ul {
  margin: 1rem 0;
}

/* buttons - zentral hier */
/* JH 27.09.2026: vgl. border-radius Bühler S. 62 und transition Bühler S. 79-82 - runde Ecken plus weicher Uebergang bei Hover-Effekten fuer alle Buttons zentral definiert */
button, .btn, a.btn {
  display: inline-block;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

/* JH 03.10.2026: ## Haupt-Button (z. B. "Kostenlos registrieren"): gruener Hintergrund mit weisser Schrift = Akzentfarbe (10 %) | Quelle: Bühler S. 58 ## */
.btn-primary {
  background-color: var(--color-ki);
  color: var(--color-white);
  border: 2px solid var(--color-ki);
}

/* JH 27.09.2026: vgl. transform/translateY Bühler S. 82 und box-shadow keine in den erlaubten Quellen (Schatten nicht ausgewiesen) - Button hebt sich beim Hover leicht an und wirft einen weichen Schatten */
.btn-primary:hover {
  background-color: var(--color-ki-dark);
  border-color: var(--color-ki-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,168,107,0.2);
}

/* JH 03.10.2026: ## Zweit-Button (z. B. "Login"): Dunkelblau-Grau = Sekundaerfarbe (30 %) | Quelle: Bühler S. 58 ## */
.btn-secondary {
  background-color: var(--color-bos);
  color: var(--color-white);
  border: 2px solid var(--color-bos);
}

/* JH 03.10.2026: ## Beim Ueberfahren etwas heller und leicht angehoben (translateY) | Quelle: Bühler S. 50, 84 ## */
.btn-secondary:hover {
  background-color: var(--color-bos-light);
  border-color: var(--color-bos-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44,62,80,0.2);
}

/* ===== KURS-CARDS (JH, Zerres Usability S. 45 - Responsive Bilddarstellung) ===== */
/* JH 27.09.2026: vgl. mehrere transition-Werte Bühler S. 79-82 - Schatten UND Anhebung werden gleichzeitig animiert; overflow:hidden schneidet das Bild an den runden Ecken sauber ab */
.kurs-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-gray-border);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  max-width: 100%;
  height: 100%;
}

/* JH 03.10.2026: ## Kurs-Karte hebt sich beim Ueberfahren an (translateY) und bekommt einen staerkeren Schatten | Quelle: keine in den erlaubten Quellen (Schatten nicht ausgewiesen) ## */
.kurs-card:hover {
  box-shadow: 0 8px 20px rgba(44,62,80,0.12);
  transform: translateY(-4px);
}

/* Kurs-Header */
/* JH 27.09.2026: Titel links, Schloss-Icon rechts per justify-content:space-between (Bühler S. 71) */
.kurs-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--color-base);
  border-bottom: 1px solid var(--color-gray-border);
}

/* JH 03.10.2026: ## Kleine Beschriftung "KURS 1": gruen, fett, Grossbuchstaben (text-transform), weiter Buchstabenabstand | Quelle: Bühler S. 60-61 ## */
.kurs-kennung {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-ki);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* JH 03.10.2026: ## Titel des Kurses in der Karte: 1,3 rem, halbfett, Dunkelblau-Grau | Quelle: Bühler S. 60-61 ## */
.kurs-titel {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-bos);
  margin: 0;
}

/* JH 03.10.2026: ## Schloss-Symbol; flex-shrink:0 verhindert, dass es in der Flex-Zeile zusammengedrueckt wird | Quelle: Bühler S. 71 ## */
.lock-badge {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Kurs-Body mit Bild */
/* JH 27.09.2026: vgl. flex-grow Bühler S. 71 - Zeile fuellt den restlichen Platz in der Karte, damit die Hinweis-Box unten bleibt */
.kurs-body-row {
  display: flex;
  flex-grow: 1;
  gap: 1.5rem;
  padding: 1.5rem;
}

/* JH 27.09.2026: vgl. min-width:0 Bühler S. 66* - verhindert, dass ein langer Titel den Flex-Container ueber die Karte hinaus verbreitert */
.kurs-inhalt {
  flex: 1;
  min-width: 0;
}

/* Bild — responsive & Cover-Modus */
/* JH 27.09.2026: object-fit:cover fuellt das feste 200x200px-Feld, ohne das Bild zu verzerren (beschneidet stattdessen) (keine in den erlaubten Quellen (object-fit)) */
.kurs-bild {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* JH 03.10.2026: ## Platzhalter in der Groesse des Kursbildes (grauer Hintergrund), falls kein Bild vorhanden ist; Inhalt mittig per Flexbox | Quelle: Bühler S. 64 ## */
.kurs-bild-platzhalter {
  width: 200px;
  height: 200px;
  background: var(--color-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border-radius: 6px;
  flex-shrink: 0;
}

/* Progress Bar */
/* JH 27.09.2026: vgl. https://www.w3schools.com/howto/howto_css_progressbar.asp - Aussenbalken als Rahmen fuer den Fortschrittsbalken (.progress-fill) */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--color-gray-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* JH 27.09.2026: vgl. transition: width Bühler S. 79-82 - Breitenaenderung (per JS/Django gesetzt) laeuft weich statt in einem Sprung */
.progress-fill {
  height: 100%;
  background: var(--color-ki);
  transition: width 0.3s ease;
}

/* Modul-Liste */
/* JH 03.10.2026: ## Modulliste ohne Aufzaehlungspunkte (list-style: none) | Quelle: Bühler S. 63 ## */
.modul-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

/* JH 03.10.2026: ## Jede Modulzeile: Name links, Status/Knopf rechts, duenne Trennlinie darunter | Quelle: Bühler S. 71 ## */
.modul-liste li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-gray-border);
  font-size: 0.95rem;
}

/* JH 03.10.2026: ## :last-child - die letzte Zeile hat keine Trennlinie | Quelle: Bühler S. 50, 84 ## */
.modul-liste li:last-child {
  border-bottom: none;
}

/* JH 03.10.2026: ## Statussymbol und Modulname nebeneinander mit kleinem Abstand (gap) | Quelle: Bühler S. 71 ## */
.modul-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text);
}

/* JH 03.10.2026: ## Kleines rundes Feld (20 x 20 px) fuer das Statussymbol, Inhalt mittig | Quelle: Bühler S. 57, 66 ## */
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 0.9rem;
}

/* JH 03.10.2026: ## Abgeschlossen: gruenes, fettes Haekchen | Quelle: Bühler S. 58 ## */
.status-icon.status-erledigt {
  color: var(--color-ki);
  font-weight: bold;
}

/* JH 03.10.2026: ## Gesperrt: graues Symbol | Quelle: Bühler S. 58 ## */
.status-icon.status-gesperrt {
  color: var(--color-text-gray);
}

/* JH 03.10.2026: ## Knopf "Starten/Fortsetzen" in der Modulzeile: kleiner Knopf mit gruenem Rahmen | Quelle: Bühler S. 62 ## */
.modul-link {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ki);
  text-decoration: none;
  border: 1px solid var(--color-ki);
  border-radius: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

/* JH 03.10.2026: ## Beim Ueberfahren gruen gefuellt, weisse Schrift | Quelle: Bühler S. 50, 84 ## */
.modul-link:hover {
  background-color: var(--color-ki);
  color: var(--color-white);
}

/* JH 03.10.2026: ## Gesperrtes Modul: grauer Text und Mauszeiger "nicht erlaubt" (cursor: not-allowed) | Quelle: Bühler S. 73 ## */
.modul-link-locked {
  padding: 0.375rem 0.875rem;
  font-size: 0.85rem;
  color: var(--color-text-gray);
  cursor: not-allowed;
}

/* Hinweis-Boxen */
/* JH 03.10.2026: ## Hinweisbox mit dickem farbigem Rand links | Quelle: Bühler S. 62 ## */
.hinweis-box {
  margin-top: 1rem;
  padding: 0.875rem;
  border-radius: 6px;
  font-size: 0.9rem;
  border-left: 4px solid var(--color-ki);
  background: rgba(0, 168, 107, 0.05);
}

/* JH 03.10.2026: ## Gruene Beschriftung "Zertifikat erhalten" | Quelle: Bühler S. 58 ## */
.zertifikat-badge {
  color: var(--color-ki);
  font-weight: 600;
}

/* JH 03.10.2026: ## Hinweis "Kurs gesperrt" in Rot (#D9534F) | Quelle: Bühler S. 58 ## */
.kurs-gesperrt-hinweis {
  color: #D9534F;
}

/* Kurs-Grid — mehrere Karten nebeneinander */
/* JH 27.09.2026: CSS Grid mit einer Spalte (1fr), oberhalb Media Queries passen das auf breiteren Screens an (keine in den erlaubten Quellen (Grid steht nicht im Inhaltsverzeichnis) und keine in den erlaubten Quellen (Grid)) */
.kurse-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

/* JH 03.10.2026: ## Abgeschlossener Kurs: minimal blasser (opacity 0,95) | Quelle: keine in den erlaubten Quellen ## */
.kurs-card.status-erledigt {
  opacity: 0.95;
}

/* JH 27.09.2026: vgl. opacity keine in den erlaubten Quellen (opacity) und pointer-events keine in den erlaubten Quellen (pointer-events) - gesperrte Kurs-Karte wird ausgegraut und ist nicht mehr anklickbar */
.kurs-card.status-gesperrt {
  opacity: 0.7;
  pointer-events: none;
}

/* footer */
/* JH 03.10.2026: ## Fusszeile: Dunkelblau-Grau, weisse kleine Schrift (ergaenzt durch footer.css) | Quelle: Bühler S. 60-61 ## */
footer {
  background-color: var(--color-bos);
  color: var(--color-white);
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  text-align: center;
  border-top: 2px solid var(--color-ki);
}
/* JH 03.10.2026: ## Links in der Fusszeile gruen, mit weichem Farbwechsel | Quelle: Bühler S. 79-82 ## */
footer a {
  color: var(--color-ki);
  text-decoration: none;
  transition: color 0.2s ease;
}

/* JH 03.10.2026: ## Beim Ueberfahren weiss | Quelle: Bühler S. 50, 84 ## */
footer a:hover {
  color: var(--color-white);
}

/* ===== RESPONSIVE ===== */
/* JH 27.09.2026: ab hier gelten die Regeln nur noch fuer Bildschirme bis 768px (Tablet/Handy) (Bühler S. 76-78) */
@media (max-width: 768px) {
  /* JH 03.10.2026: ## Schmale Bildschirme (bis 768 px): weniger Innenabstand im Kopfbereich | Quelle: Bühler S. 76-78 ## */
  header {
    padding: 1rem;
  }



  /* JH 03.10.2026: ## Weniger Seitenabstand auf kleinen Bildschirmen | Quelle: Bühler S. 62, 66 ## */
  main {
    padding: 2rem 1rem;
  }

  .hero h1 { /* JH 27.09.2026: vgl. clamp() keine in den erlaubten Quellen (clamp) - kleinere Schriftgroessen-Grenzen fuer Mobilgeraete */
    font-size: clamp(1.5rem, 4vw, 2rem);
  }

  /* JH 03.10.2026: ## Kleinere Ueberschrift 2 | Quelle: Bühler S. 60-61 ## */
  h2 {
    font-size: 1.4rem;
  }

  /* JH 03.10.2026: ## Buttons ueber die volle Breite - mit dem Daumen leichter zu treffen | Quelle: Bühler S. 57, 66 ## */
  .btn, .btn-primary, .btn-secondary {
    width: 100%;
  }

  /* Kurs-Cards auf Tablet */
  /* JH 03.10.2026: ## Kurs-Karten untereinander (eine Spalte), etwas weniger Abstand | Quelle: keine in den erlaubten Quellen (Grid steht nicht im Inhaltsverzeichnis) ## */
  .kurse-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* JH 03.10.2026: ## Bild und Text untereinander statt nebeneinander (flex-direction: column) | Quelle: Bühler S. 71 ## */
  .kurs-body-row {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }

  .kurs-bild, .kurs-bild-platzhalter { /* JH 27.09.2026: erzwingt ein 16:9-Seitenverhaeltnis, auch wenn width auf 100% laeuft (keine in den erlaubten Quellen (aspect-ratio)) */
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* JH 03.10.2026: ## Weniger Innenabstand im Kartenkopf | Quelle: Bühler S. 62, 66 ## */
  .kurs-header {
    padding: 1rem;
  }

  /* JH 03.10.2026: ## Etwas kleinere Titelschrift | Quelle: Bühler S. 60-61 ## */
  .kurs-titel {
    font-size: 1.1rem;
  }

  /* JH 03.10.2026: ## Modulzeile untereinander: Name oben, Knopf darunter | Quelle: Bühler S. 71 ## */
  .modul-liste li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* JH 03.10.2026: ## Knopf ueber die volle Breite, Text mittig | Quelle: Bühler S. 61 ## */
  .modul-link {
    width: 100%;
    text-align: center;
  }
}

/* Sehr kleine Screens (Mobile — unter 480px) */
/* JH 27.09.2026: zweite, engere Media Query fuer sehr kleine Bildschirme (unter 480px) (Bühler S. 76-78) */
@media (max-width: 480px) {
  /* JH 03.10.2026: ## Sehr kleine Bildschirme: eine Spalte, noch weniger Abstand | Quelle: Bühler S. 76-78 ## */
  .kurse-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* JH 03.10.2026: ## Bild und Text untereinander, engere Abstaende | Quelle: Bühler S. 71 ## */
  .kurs-body-row {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem;
  }

  /* JH 03.10.2026: ## Noch weniger Innenabstand im Kartenkopf | Quelle: Bühler S. 62, 66 ## */
  .kurs-header {
    padding: 0.875rem;
  }

  /* JH 03.10.2026: ## Bild ueber die volle Breite im Seitenverhaeltnis 4:3 (aspect-ratio) | Quelle: Bühler S. 57, 66 ## */
  .kurs-bild, .kurs-bild-platzhalter {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* JH 03.10.2026: ## Noch kleinere Titelschrift | Quelle: Bühler S. 60-61 ## */
  .kurs-titel {
    font-size: 1.05rem;
  }

  /* JH 03.10.2026: ## Kleinere Beschriftung "KURS 1" | Quelle: Bühler S. 60-61 ## */
  .kurs-kennung {
    font-size: 0.7rem;
  }

  /* JH 03.10.2026: ## Kleinere Schrift und weniger Abstand in der Modulzeile | Quelle: Bühler S. 60-61 ## */
  .modul-liste li {
    font-size: 0.9rem;
    padding: 0.375rem 0;
  }

  /* JH 03.10.2026: ## Kleinere Knoepfe | Quelle: Bühler S. 62, 66 ## */
  .modul-link, .modul-link-locked {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }

  /* JH 03.10.2026: ## Kleinere Schrift und weniger Innenabstand in Hinweisboxen | Quelle: Bühler S. 62, 66 ## */
  .hinweis-box {
    font-size: 0.85rem;
    padding: 0.65rem;
  }

  /* JH 03.10.2026: ## Noch weniger Seitenabstand | Quelle: Bühler S. 62, 66 ## */
  main {
    padding: 1.5rem 1rem;
  }

  /* JH 03.10.2026: ## Hauptueberschrift noch etwas kleiner (clamp passt sich der Fensterbreite an) | Quelle: Bühler S. 60-61 ## */
  .hero h1 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
  }

  /* JH 03.10.2026: ## Ueberschrift 2 kleiner, weniger Abstand | Quelle: Bühler S. 60-61 ## */
  h2 {
    font-size: 1.2rem;
    margin: 1.5rem 0 0.75rem 0;
  }

  /* JH 03.10.2026: ## Kopf des Dashboards zentriert, weniger Abstand | Quelle: Bühler S. 61 ## */
  .dashboard-header {
    text-align: center;
    padding: 1rem 0;
  }

  /* JH 03.10.2026: ## Dashboard-Ueberschrift kleiner | Quelle: Bühler S. 60-61 ## */
  .dashboard-header h1 {
    font-size: 1.5rem;
  }

  /* JH 03.10.2026: ## Dashboard-Untertitel kleiner | Quelle: Bühler S. 60-61 ## */
  .dashboard-header p {
    font-size: 0.95rem;
  }
}

/* JH 27.09.2026: @media print greift nur beim Ausdrucken der Seite; Header/Footer werden dabei ausgeblendet (Bühler S. 76-78) */
@media print {
  /* JH 03.10.2026: ## @media print: beim Drucken Kopf und Fuss ausblenden | Quelle: Bühler S. 76-78 ## */
  header, footer {
    display: none;
  }

  /* JH 03.10.2026: ## Beim Drucken weisser Hintergrund (spart Tinte) | Quelle: Bühler S. 64 ## */
  body {
    background-color: var(--color-white);
  }
}


/* =====================================================================
   Timeline – übernommen aus W3Schools "How TO - Timeline"
   Quelle: https://www.w3schools.com/howto/howto_css_timeline.asp
   Anpassungen: Präfix "bk-" (Namenskonflikt .container), Farben 60-30-10
   ===================================================================== */
.bk-timeline {                                  /* Rahmen – Quelle: tryhow_css_timeline (.timeline) */
  position: relative; max-width: 1200px; margin: 2rem auto;
  background-color: #2C3E50;                    /* dunkler Hintergrund wie body im Tryit (#474e5d → 30 %-Farbe) */
  padding: 20px 0; border-radius: 8px;          /* Abstand oben/unten, runde Ecken – Quelle: Bühler S. 62 */
}
.bk-timeline, .bk-timeline *, .bk-timeline *::before, .bk-timeline *::after { box-sizing: border-box; }   /* Quelle: tryhow_css_timeline (* box-sizing) */

.bk-timeline::after {                           /* senkrechte Linie – Quelle: tryhow_css_timeline (.timeline::after) */
  content: ''; position: absolute; width: 6px; background-color: #FFFFFF;
  top: 0; bottom: 0; left: 50%; margin-left: -3px;
}

.bk-tl-item { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; }   /* Eintrag – Quelle: tryhow_css_timeline (.container) */

.bk-tl-item::after {                            /* Kreis – Quelle: tryhow_css_timeline (.container::after) */
  content: ''; position: absolute; width: 25px; height: 25px; right: -17px;
  background-color: #FFFFFF; border: 4px solid #00A86B;                     /* Akzentgrün statt #FF9F55 */
  top: 15px; border-radius: 50%; z-index: 1;
}

.bk-tl-left  { left: 0; }                       /* Quelle: tryhow_css_timeline (.left) */
.bk-tl-right { left: 50%; }                     /* Quelle: tryhow_css_timeline (.right) */

.bk-tl-left::before {                           /* Pfeil nach rechts – Quelle: tryhow_css_timeline (.left::before) */
  content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px;
  border: medium solid #FFFFFF; border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #FFFFFF;
}

.bk-tl-right::before {                          /* Pfeil nach links – Quelle: tryhow_css_timeline (.right::before) */
  content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px;
  border: medium solid #FFFFFF; border-width: 10px 10px 10px 0;
  border-color: transparent #FFFFFF transparent transparent;
}

.bk-tl-right::after { left: -16px; }            /* Kreis rechts auf die Linie – Quelle: tryhow_css_timeline (.right::after) */

.bk-tl-content { padding: 20px 30px; background-color: #FFFFFF; position: relative; border-radius: 6px; color: #2C3E50; }   /* Kasten – Quelle: tryhow_css_timeline (.content) */
.bk-tl-content h2 { margin: 0 0 0.25rem; color: #2C3E50; }                                   /* Jahreszahl wie im Tryit als h2 – Quelle: Bühler S. 62, 66 */
.bk-tl-content h4 { margin: 0 0 0.5rem; color: #2C3E50; font-size: 1rem; }                  /* Ereignistitel – Quelle: Bühler S. 60-61 */

@media screen and (max-width: 600px) {          /* einspaltig auf schmalen Bildschirmen – Quelle: tryhow_css_timeline (Media Query) */
  .bk-timeline::after { left: 31px; }
  .bk-tl-item { width: 100%; padding-left: 70px; padding-right: 25px; }
  .bk-tl-item::before {
    left: 60px; border: medium solid #FFFFFF; border-width: 10px 10px 10px 0;
    border-color: transparent #FFFFFF transparent transparent;
  }
  .bk-tl-left::after, .bk-tl-right::after { left: 15px; }
  .bk-tl-right { left: 0%; }
}

.bk-timeline .bk-tl-content h2 { border: none; padding: 0; margin: 0 0 0.5rem; font-size: 1.5rem; color: #2C3E50; }   /* Jahreszahl ohne grüne Schritt-Unterstreichung; zwei Klassen = stärker als die Modul-Regel – Quelle: Bühler S. 54 */

/* JH 25.09.2026 Wissenscheck-Symbol auf Texthöhe skalieren
   Quelle Höhe in em (wächst mit der Schrift): Bühler S. 57
   Quelle vertikale Ausrichtung: keine in den erlaubten Quellen (vertical-align)
   Zerres (2017) Web-Usability-Leitfaden: Gestaltungselemente sparsam und einheitlich einsetzen */
.bk-wc-icon {
  height: 1.1em;
  width: auto;
  vertical-align: -0.15em;
  margin-right: 0.4rem;
}

/* =====================================================================================
   JH 07.10.2026: ## Seite Impressum – aus dem <style>-Block von impressum.html hierher verschoben.
   Alle Regeln gelten nur, wenn <body class="seite-impressum"> gesetzt ist, damit andere Seiten mit
   .container, .box oder .subtitle nicht veraendert werden | Quelle: https://www.w3schools.com/css/css_combinators.asp ##
   Nicht uebernommen: :root, *, header, footer – das regeln style.css, header.css und footer.css bereits.
   ===================================================================================== */
/* JH 07.10.2026: ## etwas groesserer Zeilenabstand fuer die Seite | Quelle: https://www.w3schools.com/cssref/pr_dim_line-height.php ## */
.seite-impressum {
  line-height: 1.6;
}

/* JH 07.10.2026: ## Inhalt mittig, hoechstens 700 px breit, mit Innenabstand | Quelle: https://www.w3schools.com/css/css_max-width.asp ## */
.seite-impressum .container {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
}

/* JH 07.10.2026: ## Ueberschrift: 28 px, normale Staerke (500), kleiner Abstand darunter | Quelle: https://www.w3schools.com/css/css_font_size.asp ## */
.seite-impressum h1 {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* JH 07.10.2026: ## Untertitel klein und grau; #666 statt --color-text-gray, weil kontrastreicher (5,4:1 statt 4,4:1 auf Off-White) | Quelle: https://www.w3schools.com/css/css_text.asp ## */
.seite-impressum .subtitle {
  font-size: 13px;
  color: #666;
  margin-bottom: 1.5rem;
}


/* ===== Seite Datenschutz (JH 07.10.2026: aus <style> in datenschutz.html verschoben) ===== */
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_max-width.asp - Groessengrenzen */
.privacy-container { max-width: 700px; margin: 0 auto; padding: 2.5rem 2rem 5rem; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css3_variables.asp - CSS-Variablen (Farbschema) */
.privacy-container h1 { font-size: 1.7rem; color: var(--color-bos); margin-bottom: 1.5rem; }
.privacy-container h2 { font-size: 1.05rem; color: var(--color-bos); margin-top: 1.8rem; margin-bottom: 0.5rem; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_text_spacing.asp - Textabstaende/-gestaltung */
.privacy-container p, .privacy-container li { font-size: 0.92rem; line-height: 1.6; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_margin.asp - Aussenabstand */
.privacy-container ul { margin: 0.4rem 0 0.4rem 1.2rem; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css3_borders.asp - abgerundete Kontakt-Box */
.contact-box { background: var(--color-base); border-radius: 8px; padding: 1rem 1.2rem; margin-top: 0.5rem; font-size: 0.9rem; }

/* ===== Seite Glossar (JH 08.10.2026: aus <style> in templates/glossar.html verschoben) ===== */
/* JH 27.09.2026: vgl. https://www.w3schools.com/cssref/pr_border-collapse.php - Tabellenzellen teilen sich einen Rahmen statt Doppellinien */
.glossar-tabelle { width: 100%; border-collapse: collapse; }
/* JH 27.09.2026: vgl. https://www.w3schools.com/css/css_table.asp - Tabellenkopf-Styling */
.glossar-tabelle th { text-align: left; padding: 8px 16px 8px 0; border-bottom: 2px solid #00A86B; color: #2C3E50; }
/* JH 27.09.2026: vgl. https://www.w3schools.com/css/css_table.asp - Zellen mit Abstand und Trennlinie */
.glossar-tabelle td { padding: 12px 16px 12px 0; border-bottom: 1px solid #E0DEDB; vertical-align: top; }
/* JH 27.09.2026: vgl. https://www.w3schools.com/cssref/sel_firstchild.php - erste Spalte (Begriff) fest breit und fett */
.glossar-tabelle td:first-child, .glossar-tabelle th:first-child { width: 180px; font-weight: 600; }
/* JH 27.09.2026: vgl. https://www.w3schools.com/cssref/sel_last-child.php - letzte Zeile ohne Trennlinie */
.glossar-tabelle tr:last-child td { border-bottom: none; }
/* JH 27.09.2026: vgl. https://www.w3schools.com/cssref/sel_target.php - per Sprungmarke (#g-ki) angesprungene Zeile hervorheben */
.glossar-tabelle tr:target td { background: #E5F5EE; }
/* JH 08.10.2026: vgl. https://www.w3schools.com/css/css_padding.asp - Innenabstand des Glossar-Bereichs (aus style-Attribut verschoben) */
.glossar-seite { padding: 3rem 2rem; }
/* JH 08.10.2026: vgl. https://www.w3schools.com/css/css_max-width.asp - Inhalt max. 700 px breit und mittig, ohne weiße Karte (grau in grau wie die übrigen Seiten) */
.glossar-karte { max-width: 700px; margin: 0 auto; padding: 2rem; }

/* ===== Seite Dashboard (JH 15.10.2026: aus <style> in templates/dashboard.html verschoben) ===== */
/* JH 15.10.2026: vgl. https://www.w3schools.com/css/css_combinators.asp - alle Regeln mit .seite-dashboard wirken nur auf <body class="seite-dashboard"> und ueberschreiben die aelteren allgemeinen Kurs-Regeln weiter oben */
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_max-width.asp - Groessengrenzen */
.seite-dashboard main { max-width: 900px; margin: 0 auto; padding: 2.5rem 2rem 9rem 2rem; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_margin.asp - Aussenabstand */
.seite-dashboard .dashboard-header { margin-bottom: 2rem; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_font.asp - Schrift */
.seite-dashboard .dashboard-header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.4rem; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_colors.asp - Textfarbe */
.seite-dashboard .dashboard-header p { color: #6C757D; }
/* JH 27.09.2026: vgl. https://www.w3schools.com/css/css_grid_container.asp - auto-fit/minmax: so viele 360px-Spalten wie passen */
.seite-dashboard .kurse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.5rem; align-items: stretch; margin: 0; }
/* JH 27.09.2026: vgl. https://www.w3schools.com/css/css3_flexbox.asp - Karte als Flex-Spalte */
.seite-dashboard .kurs-card { background: white; border-radius: 12px; border: 1.5px solid #E0DEDB; overflow: hidden; display: flex; flex-direction: column; }
.seite-dashboard .kurs-card.status-erledigt { border-color: #00A86B; opacity: 1; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_image_transparency.asp - Transparenz */
.seite-dashboard .kurs-card.status-gesperrt { opacity: 0.75; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css3_flexbox.asp - Flexbox-Anordnung */
.seite-dashboard .kurs-header { padding: 1.25rem 1.25rem 0.6rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; background: none; border-bottom: none; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_text_transformation.asp - Grossbuchstaben */
.seite-dashboard .kurs-kennung { font-size: 0.72rem; font-weight: 700; color: #00A86B; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_font.asp - Schrift */
.seite-dashboard .kurs-titel { font-size: 1.15rem; font-weight: 700; }
.seite-dashboard .kurs-meta { font-size: 0.78rem; color: #6C757D; margin-top: 0.3rem; }
.seite-dashboard .kurs-meta dl { margin: 0; font-size: 0.8rem; }
.seite-dashboard .kurs-meta dt { font-weight: 600; color: #2C3E50; margin-top: 0.4rem; }
.seite-dashboard .kurs-meta dd { margin: 0; color: #6C757D; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_margin.asp - Aussenabstand */
.seite-dashboard .kurs-info { margin-top: 0.4rem; }
.seite-dashboard .lock-badge { font-size: 1.2rem; flex-shrink: 0; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_padding.asp - Innenabstand */
.seite-dashboard .kurs-body-row { display: block; padding: 0.6rem 1.25rem 1.25rem; }
.seite-dashboard .kurs-inhalt { display: flex; flex-direction: column; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_dimension.asp - Bild ueber die volle Kartenbreite, 200 px hoch */
.seite-dashboard .kurs-bild { width: 100%; height: 200px; object-fit: contain; background: #2C3E50; display: block; border-radius: 0; aspect-ratio: auto; }
/* JH 27.09.2026: vgl. https://www.w3schools.com/css/css3_gradients.asp - Farbverlauf als Platzhalter ohne Kursbild */
.seite-dashboard .kurs-bild-platzhalter { width: 100%; height: 200px; background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; border-radius: 0; aspect-ratio: auto; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/howto/howto_js_progressbar.asp - Fortschrittsbalken */
.seite-dashboard .progress-bar { background: #E0DEDB; height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css3_transitions.asp - weicher Uebergang */
.seite-dashboard .progress-fill { background: #00A86B; height: 100%; transition: width 0.3s ease; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_list.asp - Liste ohne Aufzaehlungszeichen */
.seite-dashboard .modul-liste { list-style: none; margin: 0; }
.seite-dashboard .modul-liste li { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0.55rem 0; border-bottom: 1px solid #E0DEDB; font-size: 0.85rem; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/cssref/sel_last-child.php - letzte Zeile ohne Trennlinie */
.seite-dashboard .modul-liste li:last-child { border-bottom: none; }
.seite-dashboard .modul-status { display: flex; align-items: center; gap: 0.5rem; color: #2C3E50; }
.seite-dashboard .modul-status.gesperrt-text { color: #6C757D; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_background.asp - runde Status-Punkte */
.seite-dashboard .status-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; flex-shrink: 0; }
.seite-dashboard .status-icon.status-erledigt { background: #00A86B; color: white; }
.seite-dashboard .status-icon.open, .seite-dashboard .status-icon.status-gesperrt { background: #E0DEDB; color: #6C757D; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css_link.asp - Link als Text, nicht als Knopf */
.seite-dashboard .modul-link { color: #00A86B; text-decoration: none; font-size: 0.8rem; font-weight: 600; margin-left: 0.5rem; white-space: nowrap; padding: 0; border: none; width: auto; }
.seite-dashboard .modul-link:hover { text-decoration: underline; background: none; color: #00A86B; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/cssref/pr_class_cursor.php - Mauszeiger "nicht erlaubt" */
.seite-dashboard .modul-link-locked { color: #6C757D; font-size: 0.8rem; font-weight: 600; cursor: not-allowed; padding: 0; }
.seite-dashboard .hinweis-box { margin-top: auto; padding: 10px 0 0 0; border: none; border-radius: 0; background: none; font-size: inherit; }
.seite-dashboard .zertifikat-badge { background: #00A86B; color: white; border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.78rem; display: flex; align-items: center; gap: 0.5rem; }
/* JH 15.10.2026: vgl. https://www.w3schools.com/css/css_link.asp - Link im Zertifikat-Hinweis (vorher style-Attribut) */
.seite-dashboard .zertifikat-link { color: inherit; text-decoration: underline; }
/* JH 04.09.2026: vgl. https://www.w3schools.com/css/css3_borders.asp - gestrichelte Hinweisbox */
.seite-dashboard .kurs-gesperrt-hinweis { background: #FFF8E6; border: 1px dashed #E67E22; border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.75rem; color: #B9770E; text-align: center; }
/* JH 15.10.2026: vgl. https://www.w3schools.com/css/css_dimension.asp - Icon-Groessen (vorher style-Attribute) */
.seite-dashboard .icon-schloss { width: 16px; height: 16px; vertical-align: middle; }
.seite-dashboard .icon-schloss-klein { width: 14px; height: 14px; vertical-align: middle; }
.seite-dashboard .kurs-gesperrt-hinweis .icon-schloss { margin-right: 4px; }
.icon-nutzer { width: 20px; height: 20px; vertical-align: middle; margin-right: 4px; }
/* JH 27.09.2026: vgl. https://www.w3schools.com/css/css3_mediaqueries.asp - auf dem Handy eine Spalte */
@media (max-width: 768px) {
  .seite-dashboard main { padding: 1.5rem; }
  .seite-dashboard .kurse-grid { grid-template-columns: 1fr; }
}
/* JH 15.10.2026: vgl. https://www.w3schools.com/css/css3_flexbox_container.asp - Navigation ohne Hamburger: Links nebeneinander, bei schmalem Bildschirm Umbruch */
.nav-startseite { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: flex-end; }
/* JH 15.10.2026: vgl. https://www.w3schools.com/css/css_link.asp - Links dunkelblau ohne Unterstreichung, Hover gruen */
.nav-startseite a { color: #2C3E50; text-decoration: none; font-size: 0.9rem; }
.nav-startseite a:hover { color: #00A86B; }

/* ===== Profilseite: gilt nur bei body class="seite-profil" (vgl. https://www.w3schools.com/css/css_selectors.asp) ===== */
/* Inhalt schmal und mittig (vgl. https://www.w3schools.com/css/css_max-width.asp) */
.seite-profil main { max-width: 600px; margin: 0 auto; padding: 1.2rem 2rem; }
/* Abstand unter der Überschrift (vgl. https://www.w3schools.com/css/css_margin.asp) */
.seite-profil .profil-header { margin-bottom: 0.8rem; }
/* Schriftgröße und -stärke (vgl. https://www.w3schools.com/css/css_font.asp) */
.seite-profil .profil-header h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.2rem; }
/* graue Textfarbe (vgl. https://www.w3schools.com/css/css_colors.asp) */
.seite-profil .profil-header p { color: #6C757D; }
/* weiße Karte mit abgerundeten Ecken für Kontaktdaten, Zertifikate, Konto (vgl. https://www.w3schools.com/css/css3_borders.asp) */
.seite-profil .profil-card { background: white; border-radius: 10px; border: 1.5px solid #E0DEDB; padding: 1rem 1.25rem; margin-bottom: 0.7rem; }
/* grüne Zwischenüberschrift in Großbuchstaben (vgl. https://www.w3schools.com/css/css_text_transformation.asp) */
.seite-profil .profil-card h2 { font-size: 0.82rem; font-weight: 700; color: #00A86B; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
/* Zeile: Bezeichnung links, Wert rechts (vgl. https://www.w3schools.com/css/css3_flexbox.asp) */
.seite-profil .info-row { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #E0DEDB; font-size: 0.86rem; }
/* letzte Zeile ohne Trennlinie (vgl. https://www.w3schools.com/css/css_pseudo_classes.asp) */
.seite-profil .info-row:last-child { border-bottom: none; }
.seite-profil .info-label { color: #6C757D; }
.seite-profil .info-value { font-weight: 600; }
/* Liste ohne Aufzählungspunkte (vgl. https://www.w3schools.com/css/css_list.asp) */
.seite-profil .action-list { list-style: none; }
/* Trennlinie zwischen den Einträgen (vgl. https://www.w3schools.com/css/css_border.asp) */
.seite-profil .action-list li { border-bottom: 1px solid #E0DEDB; }
.seite-profil .action-list li:last-child { border-bottom: none; }
/* Link über die ganze Breite, Pfeil rechts (vgl. https://www.w3schools.com/css/css3_flexbox.asp) */
.seite-profil .action-list a { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0; color: #2C3E50; text-decoration: none; font-size: 0.92rem; }
/* Farbwechsel bei Maus darüber (vgl. https://www.w3schools.com/css/css_pseudo_classes.asp) */
.seite-profil .action-list a:hover { color: #00A86B; }
/* Zertifikat-Zeile: Name links, Download rechts (vgl. https://www.w3schools.com/css/css3_flexbox.asp) */
.seite-profil .zertifikat-zeile { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0; }
/* kleines graues Ausstellungsdatum (vgl. https://www.w3schools.com/css/css_font.asp) */
.seite-profil .zertifikat-datum { font-size: 0.75rem; color: #6C757D; }
/* grüner Download-Link; drei Klassen + Element, damit er stärker ist als .action-list a (vgl. https://www.w3schools.com/css/css_specificity.asp) */
.seite-profil .action-list a.zertifikat-download { color: #00A86B; font-weight: 600; font-size: 0.88rem; white-space: nowrap; }
/* Hinweis, wenn noch kein Zertifikat da ist */
.seite-profil .hinweis-leer { color: #6C757D; font-size: 0.9rem; }
/* auf schmalen Bildschirmen weniger Rand (vgl. https://www.w3schools.com/css/css3_mediaqueries.asp) */
@media (max-width: 768px) { .seite-profil main { padding: 1.5rem; } }

/* ===== Modulseiten: gilt nur bei body class="seite-modul" (vgl. https://www.w3schools.com/css/css_selectors.asp) ===== */
/* etwas mehr Zeilenhöhe für längere Lesetexte (vgl. https://www.w3schools.com/css/css_text.asp) */
.seite-modul { line-height: 1.6; }
/* Platz unter dem Footer für die feste Schritt-Leiste (vgl. https://www.w3schools.com/css/css_margin.asp) */
.seite-modul footer { margin-bottom: 84px; }
/* Links im Inhalt grün, beim Darüberfahren unterstrichen (vgl. https://www.w3schools.com/css/css_link.asp) */
.seite-modul main a { color: #00A86B; text-decoration: none; }
.seite-modul main a:hover { text-decoration: underline; }

/* Pfadleiste unter dem Kopf (vgl. https://www.w3schools.com/howto/howto_css_breadcrumbs.asp) */
.seite-modul .pfadleiste { background: white; border-bottom: 1px solid #E0DEDB; padding: 0.8rem 2rem; font-size: 0.85rem; color: #6C757D; }
.seite-modul .pfadleiste a { color: #00A86B; text-decoration: none; }
/* Inhalt mittig, höchstens 900px breit (vgl. https://www.w3schools.com/css/css_max-width.asp) */
.seite-modul .container { max-width: 900px; margin: 0 auto; padding: 2rem; }

/* dunkler Modulkopf mit Titel (vgl. https://www.w3schools.com/css/css3_borders.asp) */
.seite-modul .modul-kopf { background: #2C3E50; color: white; padding: 1.25rem 1.5rem; border-radius: 10px; margin-bottom: 1rem; text-align: center; transition: padding 0.25s ease; }
.seite-modul .modul-kopf .kurs-kennung { font-size: 0.75rem; font-weight: 700; color: #00A86B; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.seite-modul .modul-kopf h1 { margin-bottom: 4px; font-size: 1.4rem; font-weight: 700; }
/* Dauer, Schwierigkeit, Quiz nebeneinander (vgl. https://www.w3schools.com/css/css3_flexbox.asp) */
/* nach dem ersten Weiterklicken wird der Kopf kleiner (Klasse kompakt setzt das Skript) */
.seite-modul .modul-kopf.kompakt { padding: 0.6rem 1.5rem; text-align: left; }
.seite-modul .modul-kopf.kompakt .kurs-kennung { display: none; }
.seite-modul .modul-kopf.kompakt h1 { font-size: 1.05rem; margin-bottom: 0; }

/* Fortschrittsbereich (vgl. https://www.w3schools.com/howto/howto_css_progressbar.asp) */
.seite-modul .progress-container { margin-bottom: 1rem; background: white; padding: 10px 16px 14px; border-radius: 8px; border: 1px solid #E0DEDB; transition: padding 0.25s ease, margin-bottom 0.25s ease; }
.seite-modul .progress-label { font-size: 0.85em; color: #6C757D; margin-bottom: 6px; font-weight: 500; display: flex; justify-content: space-between; }
.seite-modul .progress-bar { width: 100%; height: 6px; background: #E0DEDB; border-radius: 4px; overflow: hidden; margin-bottom: 10px; }
.seite-modul .progress-fill { width: 0; height: 100%; background: #00A86B; transition: width 0.3s ease; }
.seite-modul .progress-container.kompakt { padding: 6px 16px 8px; margin-bottom: 0.6rem; }
.seite-modul .progress-container.kompakt .progress-label { display: none; }
.seite-modul .progress-container.kompakt .progress-bar { margin-bottom: 6px; height: 4px; }

/* Schrittanzeige als Reihe kleiner Kapseln, seitlich scrollbar (vgl. https://www.w3schools.com/css/css_overflow.asp) */
.seite-modul .stepper { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.seite-modul .step-pill { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; background: #F8F7F5; color: #6C757D; border: 1.5px solid #E0DEDB; transition: all 0.2s ease; flex-shrink: 0; }
.seite-modul .step-pill .step-icon { width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; flex-shrink: 0; background: #E0DEDB; color: #6C757D; }
.seite-modul .step-pill.status-erledigt { background: rgba(0, 168, 107, 0.08); border-color: #00A86B; color: #00754A; }
.seite-modul .step-pill.status-erledigt .step-icon { background: #00A86B; color: white; }
.seite-modul .step-pill.aktiv { background: #2C3E50; border-color: #2C3E50; color: white; }
.seite-modul .step-pill.aktiv .step-icon { background: #00A86B; color: white; }
/* nur der aktive Schritt zeigt seinen Namen (vgl. https://www.w3schools.com/cssref/sel_not.php) */
.seite-modul .step-pill:not(.aktiv) .step-label { display: none; }

/* Lernabschnitt: immer nur einer sichtbar (Klasse aktiv) (vgl. https://www.w3schools.com/css/css_display_visibility.asp) */
.seite-modul .schritt { background: white; padding: 2.5rem; border-radius: 10px; margin-bottom: 30px; border: 1px solid #E0DEDB; line-height: 1.8; display: none; animation: fadeIn 0.3s ease; }
.seite-modul .schritt.aktiv { display: block; }
/* sanftes Einblenden (vgl. https://www.w3schools.com/css/css3_animations.asp) */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.seite-modul .schritt h2 { color: #2C3E50; margin: 0 0 20px 0; font-size: 1.5rem; border-bottom: 2px solid #00A86B; padding-bottom: 12px; font-weight: 700; }
.seite-modul .schritt h3 { color: #2C3E50; margin: 25px 0 12px 0; font-size: 1.15rem; font-weight: 600; }
.seite-modul .schritt p { margin-bottom: 15px; }
.seite-modul .schritt ul, .seite-modul .schritt ol { margin-left: 30px; margin-bottom: 15px; }
.seite-modul .schritt li { margin-bottom: 10px; }

/* Hinweiskästen aus den Markdown-Dateien (!!! note / warning / success) */
.seite-modul .admonition { background: rgba(0, 168, 107, 0.06); border-left: 4px solid #00A86B; border-radius: 4px; padding: 15px 20px; margin: 20px 0; font-size: 0.95em; }
.seite-modul .admonition-title { color: #2C3E50; display: block; margin-bottom: 8px; font-weight: 700; }
.seite-modul .admonition.warning { background: #fff8e6; border-left-color: #E67E22; }
.seite-modul .admonition.warning .admonition-title { color: #B9770E; }
.seite-modul .admonition.success { background: rgba(0, 168, 107, 0.08); border-left-color: #00A86B; }
.seite-modul .admonition.success .admonition-title { color: #00754A; }

/* Quiz: Frage und Antwortkästen untereinander (vgl. https://www.w3schools.com/css/css3_flexbox.asp) */
.seite-modul .quiz-frage { margin-bottom: 20px; }
.seite-modul .quiz-question { font-weight: 600; color: #2C3E50; margin-bottom: 15px; font-size: 1.02em; }
.seite-modul .quiz-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.seite-modul .quiz-option { display: flex; align-items: center; padding: 12px 15px; background: #F8F7F5; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; border: 2px solid transparent; }
.seite-modul .quiz-option:hover { background: rgba(0, 168, 107, 0.06); border-color: #00A86B; }
/* Auswahlpunkt in Grün (vgl. https://www.w3schools.com/cssref/css_pr_accent-color.php) */
.seite-modul .quiz-option input[type="radio"] { margin-right: 12px; width: 18px; height: 18px; cursor: pointer; accent-color: #00A86B; }
.seite-modul .quiz-option label { cursor: pointer; flex: 1; margin: 0; }

/* Buttons (vgl. https://www.w3schools.com/css/css3_buttons.asp) */
.seite-modul .btn { background: #00A86B; color: white; border: none; padding: 12px 28px; border-radius: 6px; cursor: pointer; font-size: 1em; font-weight: 600; transition: all 0.2s ease; }
.seite-modul .btn:hover:not(:disabled) { background: #008C5A; transform: translateY(-2px); }
.seite-modul .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.seite-modul .btn-secondary { background: #2C3E50; }
.seite-modul .btn-secondary:hover:not(:disabled) { background: #34495E; }
.seite-modul .btn.btn-pruefen { padding: 8px 20px; font-size: 0.9em; }
.seite-modul .btn.btn-speichern-btn { background: transparent; color: #6C757D; border: 1.5px solid #E0DEDB; }
.seite-modul .btn-speichern-kurz { display: none; }

/* Rückmeldung zum Quiz: grün richtig, rot falsch */
.seite-modul .feedback { margin-top: 12px; padding: 12px 15px; border-radius: 6px; display: none; font-weight: 500; border-left: 4px solid; }
.seite-modul .feedback.rueckmeldung { display: block; }
.seite-modul .feedback.antwort-richtig { background: rgba(0, 168, 107, 0.08); color: #00754A; border-left-color: #00A86B; }
.seite-modul .feedback.antwort-falsch { background: #fdecea; color: #A93226; border-left-color: #E74C3C; }

/* Hinweise unter der Schritt-Leiste, zuerst versteckt, das Skript blendet sie ein */
.seite-modul .hinweis-abschluss { display: none; text-align: center; margin-top: 12px; padding: 10px; background: rgba(217,119,87,0.12); color: #9A4A2F; border-radius: 6px; font-size: 0.88rem; }
.seite-modul .hinweis-gespeichert { display: none; text-align: center; margin-top: 12px; padding: 10px; background: rgba(0,168,107,0.08); color: #00754A; border-radius: 6px; font-size: 0.88rem; }

/* Schritt-Leiste klebt unten am Bildschirm (vgl. https://www.w3schools.com/css/css_positioning_sticky.asp) */
.seite-modul .schritt-nav-spacer { height: 84px; }
.seite-modul .schritt-nav { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0; padding: 14px 1.5rem; background: white; border-top: 1px solid #E0DEDB; box-shadow: 0 -4px 12px rgba(0,0,0,0.06); border-radius: 10px 10px 0 0; z-index: 50; }

/* schmale Bildschirme (vgl. https://www.w3schools.com/css/css3_mediaqueries.asp) */
@media (max-width: 768px) {
  .seite-modul .container { padding: 15px; }
  .seite-modul .schritt { padding: 20px; }
  .seite-modul .schritt-nav { padding: 10px 0.75rem; border-radius: 0; margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); gap: 0.5rem; }
  .seite-modul .schritt-nav .btn { padding: 10px 14px; font-size: 0.9em; white-space: nowrap; }
  .seite-modul .btn-speichern-text { display: none; }
  .seite-modul .btn-speichern-kurz { display: inline; }
}

/* JH 17.10.2026: Klassen fuer das Modul-Skript – das Skript schaltet nur die Klasse um,
   das Aussehen steht hier (vgl. https://www.w3schools.com/css/css_display_visibility.asp) */
.seite-modul .hinweis-abschluss.sichtbar,
.seite-modul .hinweis-gespeichert.sichtbar { display: block; }   /* Hinweis einblenden */
.seite-modul .btn.versteckt { display: none; }                    /* Weiter-Button nach dem Abschluss ausblenden */

/* JH 17.10.2026: Modulseite – weniger Leerraum über dem Modulkopf (main oben ohne Innenabstand, Container oben 1rem) (vgl. https://www.w3schools.com/css/css_padding.asp) */
.seite-modul main { padding-top: 0; }
.seite-modul .container { padding-top: 1rem; }

/* JH 17.10.2026: Modulseite – Leerraum unten entfernen: die Schritt-Leiste ist sticky statt fixed, daher braucht sie keinen Platzhalter und keinen Abstand unter dem Footer mehr (vgl. https://www.w3schools.com/css/css_positioning_sticky.asp, https://www.w3schools.com/css/css_margin.asp) */
.seite-modul main { padding-bottom: 1.5rem; }
.seite-modul .schritt-nav-spacer { height: 0; }
.seite-modul footer { margin-bottom: 0; }
/* Leiste auf großen Bildschirmen als Karte mit Rahmen und runden Ecken, wie die Kästen darüber (vgl. https://www.w3schools.com/css/css3_borders.asp) */
@media (min-width: 769px) { .seite-modul .schritt-nav { border: 1px solid #E0DEDB; border-radius: 10px; } }

/* JH 17.10.2026: Popup im Seitendesign (Farben wie Seite: #2C3E50 / #00A86B); position: fixed legt das Fenster über die Seite – Quelle: keine im eigenen Quellenordner gefunden */
.popup-hintergrund { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(44,62,80,0.55); z-index: 1000; align-items: center; justify-content: center; padding: 16px; }
.popup-hintergrund.sichtbar { display: flex; }
.popup-fenster { background: #F8F7F5; border: 1px solid #E0DEDB; border-top: 5px solid #00A86B; border-radius: 10px; max-width: 460px; width: 100%; padding: 28px; box-shadow: 0 10px 30px rgba(44,62,80,0.3); text-align: left; }
.popup-fenster h2 { color: #2C3E50; font-size: 1.25rem; margin-bottom: 12px; }
.popup-fenster p { color: #2C3E50; margin-bottom: 12px; line-height: 1.5; }
.popup-fenster #popup-hinweis { color: #6C757D; font-size: 0.92rem; }
.popup-fenster .btn { margin-top: 8px; }