/* =========================================================================
   Staude Datenschutz — Schulungsplattform
   Design-Richtung (Redesign, Brief vom Kunden): hochwertige, ruhige
   Streaming-/Mediathek-Optik statt klassischer E-Learning-Seite. Warmes
   Creme/Weiß, anthrazitfarbener Text, Kupfer/Terrakotta als einzige
   Akzentfarbe (kein Blau), große Radien, sehr dezente Schatten, viel
   Weißraum, ruhige Mikro-Animationen.

   Stack note: statische FTP-Seite ohne Build-Schritt, keine externen
   Font-Requests (Systemschrift, wie im Brief gefordert — "keine externen
   Fonts unnötig laden"). Alle IDs/Klassen, auf die script.js zugreift,
   bleiben erhalten — nur die visuelle Ebene wurde neu gebaut.

   Handschrift-Akzent (Caveat, lokal gehostet, SIL OFL) auf genau eine
   Stelle beschränkt (Hero-Bild-Zitat), auf Wunsch des Kunden erneut
   eingesetzt, um sich eng an der mitgeschickten Bildreferenz zu orientieren.
   ========================================================================= */

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("assets/fonts/caveat-latin.woff2") format("woff2");
}

:root {
  --bg: #faf6f1;
  --bg-soft: #f2ebe2;
  --surface: #ffffff;
  --surface-tint: rgba(255, 255, 255, 0.7);
  --ink: #211c18;
  --ink-soft: #766b62;
  --line: rgba(33, 25, 19, 0.09);

  --accent: #a35a32;        /* Kupfer/Terrakotta — Buttons, Links, Fokus (WCAG AA auf Weiß) */
  --accent-hover: #8a4a27;
  --accent-soft: #d6ac8d;   /* helleres Kupfer — Badges, Ränder, Dekoration */
  --accent-pale: #f3e3d5;   /* sehr helle Kupfer-Tönung — Flächen */

  --ink-invert: #f6f1ea;
  --dark-panel-1: #201a16;
  --dark-panel-2: #3a2f27;

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;

  --font-hand: "Caveat", "Segoe Script", cursive;

  --shadow-sm: 0 3px 16px rgba(32, 24, 18, 0.05);
  --shadow-md: 0 18px 46px rgba(32, 24, 18, 0.09);
  --shadow-lg: 0 26px 70px rgba(32, 24, 18, 0.14);
  --shadow-dark: 0 26px 70px rgba(15, 10, 7, 0.4);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* KEIN eigenes overflow-x hier: html (oben) blendet horizontales
     Scrollen bereits aus. Wenn sowohl html als auch body overflow-x
     gesetzt haben, macht der Browser aus dem fehlenden overflow-y auf
     BEIDEN Elementen automatisch "auto" -> zwei verschachtelte
     Scroll-Container statt einem. Das bringt scrollIntoView() und die
     fixe Navigationsleiste (position: sticky) durcheinander, besonders
     auf mobilen Browsern — genau das Verhalten aus dem Kundenbericht. */
  overflow-wrap: break-word;
  word-break: break-word;
}

img { max-width: 100%; display: block; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.section { max-width: var(--maxw); margin: 0 auto; padding: 0 28px 60px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Nav (reduziert) ---------- */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 246, 241, 0.86);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}
nav.wrap {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { height: 30px; width: auto; border-radius: 7px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.22; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.brand-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-soft); white-space: nowrap; }

.nav-right { display: flex; align-items: center; gap: 26px; }
.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s var(--ease);
}
.nav-link:hover { color: var(--accent); }

.nav-progress { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.nav-progress-top { display: flex; align-items: center; gap: 10px; }
.nav-progress-bar {
  width: 64px; height: 5px; border-radius: var(--radius-pill);
  background: var(--accent-pale); overflow: hidden; flex-shrink: 0;
}
.nav-progress-bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.6s var(--ease); }
.nav-progress-count { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.nav-progress-note { font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; margin-top: 3px; }
.nav-progress .np-short { display: none; }

/* ---------- Buttons ---------- */
.btn-primary {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  padding: 13px 24px;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); }

.btn-outline {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  padding: 12px 24px;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline:active { transform: scale(0.97); }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 0; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 44px;
  align-items: center;
}
.hero-copy { max-width: 460px; }
.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
h1.headline {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.hero p.sub {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  max-width: 42ch;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.hero-facts {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.hero-facts span { display: inline-flex; align-items: center; gap: 6px; }
.hero-facts svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.hero-facts .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); opacity: 0.6; flex-shrink: 0; }

.hero-media { position: relative; }

/* ---------- Video-Player (Hero, "großes Filmstill") ---------- */
.player-shell {
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Damit die fixe Navigationsleiste (.nav-wrap, sticky, 76px hoch)
     den Player beim Hinscrollen (playChapter -> scrollIntoView) nicht
     überdeckt — Wert wird bei 700px zusammen mit der Nav-Höhe angepasst. */
  scroll-margin-top: 92px;
}
.video-box {
  position: relative;
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  background: var(--dark-panel-1);
}
.video-box video { width: 100%; height: 100%; display: block; background: #000; }

.poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: opacity 0.4s var(--ease);
  border: 0;
  padding: 0;
  width: 100%;
}
.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 15, 12, 0.06) 0%, rgba(20, 15, 12, 0.62) 100%);
}
.poster.hidden { opacity: 0; pointer-events: none; }

.poster-caption {
  position: absolute;
  left: 28px;
  bottom: 26px;
  right: 100px;
  z-index: 1;
  color: #fff;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.poster-kicker {
  position: absolute;
  left: 28px;
  top: 24px;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.poster-hand {
  position: absolute;
  right: 28px;
  top: 26px;
  z-index: 1;
  max-width: 46%;
  text-align: right;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.poster-hand::after {
  content: "";
  display: block;
  margin-top: 8px;
  margin-left: auto;
  width: 40px;
  height: 2px;
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
}

.play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.poster:hover .play-btn { transform: translate(-50%, -50%) scale(1.07); background: rgba(255, 255, 255, 0.26); }
.play-btn svg { width: 22px; height: 22px; margin-left: 3px; }

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 4px 0;
  color: var(--ink-soft);
  font-size: 13px;
  flex-wrap: wrap;
}
.video-meta strong { color: var(--ink); font-weight: 650; }

/* ---------- "Ihre Schulung" ---------- */
.my-training-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 56px;
  flex-wrap: wrap;
}
.my-training-head h2 {
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing: -0.025em;
  font-weight: 700;
}
.progress-bar-wrap { display: flex; align-items: center; gap: 16px; min-width: 240px; }
.progress-bar-track {
  width: 180px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--accent-pale);
  overflow: hidden;
  flex-shrink: 0;
}
.progress-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.7s var(--ease); }
.progress-bar-wrap b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }

.continue-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
  gap: 16px;
  align-items: stretch;
}
.continue-card {
  display: grid;
  grid-template-columns: minmax(0, 260px) 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.continue-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.continue-thumb-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dark-panel-1);
}
.continue-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.continue-card:hover .continue-thumb-wrap img { transform: scale(1.03); }
.continue-play {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.continue-play svg { width: 14px; height: 14px; margin-left: 2px; color: var(--ink); }

.continue-info { padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.continue-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.continue-title { font-size: clamp(17px, 1.8vw, 20px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.continue-sub { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; max-width: 48ch; }
.continue-meta { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.continue-meta span { display: inline-flex; align-items: center; gap: 6px; }
.continue-meta svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; }
.continue-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-soft); opacity: 0.6; }
.continue-info .btn-primary { margin-top: 6px; align-self: flex-start; padding: 11px 20px; font-size: 13.5px; }

.quote-card {
  border-radius: var(--radius-lg);
  background: var(--dark-panel-1);
  color: var(--ink-invert);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.quote-mark { width: 20px; height: 20px; color: var(--accent-soft); margin-bottom: 10px; }
.quote-card p { font-size: 14.5px; line-height: 1.4; font-weight: 550; letter-spacing: -0.01em; }
.quote-attr { display: block; margin-top: 12px; font-size: 11.5px; color: rgba(246, 241, 234, 0.6); }

/* ---------- Vorteile (reduziert, 3 Punkte) ---------- */
.benefits-row {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.benefit-item { display: flex; align-items: flex-start; gap: 12px; }
.benefit-item svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.benefit-item b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.benefit-item span { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-soft); line-height: 1.42; }

/* ---------- Praxissituationen ---------- */
.section-heading { max-width: 620px; margin: 64px auto 28px; text-align: center; }
.section-heading.left-align { text-align: left; margin-left: 0; max-width: none; }
.section-heading h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.section-heading p {
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.section-heading-row p { margin-top: 0; max-width: 36ch; flex-shrink: 0; }

.practice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.practice-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.practice-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.practice-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark-panel-1); }
.practice-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.practice-card:hover .practice-media img { transform: scale(1.04); }
.practice-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--dark-panel-1);
  color: #fff;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.practice-icon svg { width: 16px; height: 16px; }
.practice-copy { padding: 20px 18px 22px; display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }
.practice-text h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.practice-text p { font-size: 13px; line-height: 1.42; color: var(--ink-soft); max-width: 32ch; }

.practice-flow {
  margin-top: 22px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.practice-flow span { color: var(--ink); }
.practice-flow svg { width: 15px; height: 15px; color: var(--accent-soft); flex-shrink: 0; }

/* ---------- Chapter grid ("Mediathek") — kompaktes, umbrechendes Grid ---------- */
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.card {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  opacity: 0;
  transform: translateY(16px);
}
.card.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .card { opacity: 1; transform: none; transition: none; }
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card:active { transform: translateY(-1px) scale(0.99); }

.card.now-playing {
  background: linear-gradient(155deg, var(--dark-panel-1) 0%, var(--dark-panel-2) 100%);
  box-shadow: var(--shadow-dark);
}

.thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--dark-panel-1);
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .duration {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(20, 15, 12, 0.68);
  color: #fff;
  font-size: 10.5px;
  font-weight: 650;
  padding: 3px 8px;
  border-radius: 6px;
}
.thumb .watched-badge {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  display: none;
  align-items: center;
  justify-content: center;
}
.thumb .watched-badge svg { width: 12px; height: 12px; }
.card.watched .thumb .watched-badge { display: flex; }

.thumb .play-chip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 15, 12, 0);
  opacity: 0;
  transition: opacity 0.25s var(--ease), background 0.25s var(--ease);
}
.thumb .play-chip svg { width: 14px; height: 14px; margin-left: 2px; }
.thumb .play-chip .circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.86);
  transition: transform 0.25s var(--ease);
}
.card:hover .thumb .play-chip { opacity: 1; background: rgba(20, 15, 12, 0.14); }
.card:hover .thumb .play-chip .circle { transform: scale(1); }
@media (hover: none) {
  .thumb .play-chip { opacity: 1; background: rgba(20, 15, 12, 0.08); }
  .thumb .play-chip .circle { transform: scale(1); }
}

.card .body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card .kap-no { font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: 0.01em; }
.card.now-playing .kap-no { color: var(--accent-soft); }
.card .kap-title {
  font-size: 13px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card.now-playing .kap-title { color: #fff; }
.card .kap-desc {
  font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card.now-playing .kap-desc { color: rgba(246, 241, 234, 0.62); }

.card .kap-status {
  margin-top: 8px;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.card .kap-status svg { width: 10px; height: 10px; flex-shrink: 0; }
.card .kap-status.status-done { color: var(--accent); border-color: var(--accent-pale); background: var(--accent-pale); }
.card .kap-status.status-active { color: #fff; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12); }
.card.now-playing .kap-status.status-start { color: rgba(246, 241, 234, 0.7); border-color: rgba(255, 255, 255, 0.2); }

/* ---------- Quiz section ---------- */
.quiz-section { margin-top: 64px; max-width: 760px; margin-left: auto; margin-right: auto; }

.quiz-intro { text-align: center; max-width: 520px; margin: 0 auto 28px; }
.quiz-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-pale); color: var(--accent);
  margin: 0 auto 14px;
}
.quiz-icon svg { width: 20px; height: 20px; }
.quiz-intro .eyebrow { display: block; }
.quiz-intro h2 { font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -0.03em; font-weight: 700; margin-bottom: 10px; }
.quiz-intro p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.quiz-intro p + p { margin-top: 4px; }

.quiz-list { display: flex; flex-direction: column; gap: 12px; }

.quiz-item {
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
}
.quiz-item .quiz-eyebrow { font-size: 11.5px; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.quiz-item .quiz-question { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; line-height: 1.38; margin-bottom: 14px; }

.quiz-options { display: flex; flex-direction: column; gap: 9px; }
.quiz-option {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.quiz-option .dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-soft);
  position: relative;
}
.quiz-option.selected { border-color: var(--accent); background: var(--accent-pale); }
.quiz-option.selected .dot { border-color: var(--accent); }
.quiz-option.selected .dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent);
}
.quiz-option:hover:not(.selected) { border-color: var(--accent-soft); }
.quiz-option:disabled { cursor: default; }

.quiz-item.graded .quiz-option { pointer-events: none; }
.quiz-item.graded .quiz-option.correct-answer { border-color: #4f7a52; background: rgba(79, 122, 82, 0.1); }
.quiz-item.graded .quiz-option.correct-answer .dot { border-color: #4f7a52; }
.quiz-item.graded .quiz-option.correct-answer .dot::after { background: #4f7a52; }
.quiz-item.graded .quiz-option.wrong-answer { border-color: #a8503e; background: rgba(168, 80, 62, 0.08); }
.quiz-item.graded .quiz-option.wrong-answer .dot { border-color: #a8503e; }
.quiz-item.graded .quiz-option.wrong-answer .dot::after { background: #a8503e; }

.quiz-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.quiz-progress { font-size: 13px; color: var(--ink-soft); }

.quiz-result {
  margin-top: 28px;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, var(--dark-panel-1) 0%, var(--dark-panel-2) 100%);
  color: var(--ink-invert);
  text-align: center;
  box-shadow: var(--shadow-dark);
}
.quiz-result .quiz-result-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.quiz-result .quiz-result-icon svg { width: 24px; height: 24px; }
.quiz-result h3 { font-size: 25px; letter-spacing: -0.02em; margin-bottom: 10px; }
.quiz-result p { color: rgba(246, 241, 234, 0.72); font-size: 15px; line-height: 1.6; max-width: 48ch; margin: 0 auto 6px; }
.quiz-result .quiz-score { font-size: 14px; color: var(--accent-soft); font-weight: 650; margin-top: 14px; }

.quiz-merksatz {
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(246, 241, 234, 0.2);
  max-width: 48ch;
}
.quiz-merksatz b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 6px;
}
.quiz-merksatz span { display: block; font-size: 16px; font-style: italic; color: var(--ink-invert); line-height: 1.5; }

.quiz-result-explanations {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 241, 234, 0.14);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.quiz-result-explain {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(246, 241, 234, 0.06);
}
.quiz-result-explain b {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 6px;
}
.quiz-result-explain span { display: block; font-size: 13.5px; line-height: 1.5; color: rgba(246, 241, 234, 0.78); }

.quiz-result-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.quiz-result .quiz-retry {
  border-color: rgba(246, 241, 234, 0.3);
  color: var(--ink-invert);
}
.quiz-result .quiz-retry:hover { border-color: var(--accent-soft); color: var(--accent-soft); }

/* ---------- Zertifikat per E-Mail (eigenes, immer sichtbares Panel) ----------
   #cert-email-zone (siehe index.html) sitzt als eigenständiges Element
   NACH dem Test-Ergebnis-Panel, nicht mehr darin verschachtelt — dadurch
   ist es von Anfang an sichtbar, auch bevor der Besucher überhaupt ein
   Video gesehen oder den Test gestartet hat. Solange die Bedingungen
   nicht erfüllt sind, bekommt der innere Wrapper .is-disabled (gegraut,
   Felder per HTML disabled-Attribut inaktiv) plus einen erklärenden
   Hinweistext (.quiz-cert-note) statt der normalen Anleitung. */
.cert-email-panel {
  /* Gleiche Breite/Abstand/Optik wie .privacy darunter (max-width 860px,
     zentriert, padding 44px, heller Kartenhintergrund) — vorher steckte
     dieser Bereich noch innerhalb von .quiz-section (max-width 760px, und
     war dunkel) und war dadurch schmaler als der Vertrauen-Bereich.
     Heller Hintergrund hat außerdem einen praktischen Nebeneffekt: die
     Siegel-Grafik (weißer Hintergrund, nicht freigestellt) verschmilzt
     dadurch nahtlos mit dem Panel, kein sichtbarer weißer Kasten mehr. */
  margin-top: 64px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding: 44px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.quiz-cert-email {
  text-align: left;
  transition: opacity 0.2s ease;
}
.quiz-cert-email.is-disabled { opacity: 0.55; }

/* Zwei Spalten: Text/Formular links, Siegel-Grafik rechts. */
.cert-email-columns {
  display: flex;
  align-items: center;
  gap: 44px;
}
.cert-email-copy { flex: 1; min-width: 0; }
.cert-email-illustration {
  flex-shrink: 0;
  width: 260px;
  height: auto;
}

.quiz-cert-email h4 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  margin-bottom: 6px;
}
.cert-email-copy > p,
.quiz-cert-note {
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 52ch;
  margin-bottom: 18px;
}

.cert-email-form { max-width: 420px; }
.cert-email-row { margin-bottom: 12px; }
.cert-email-row label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.cert-email-row input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.cert-email-row input::placeholder { color: rgba(33, 25, 19, 0.32); }
.cert-email-row input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}
.cert-email-row input:disabled {
  cursor: not-allowed;
  background: rgba(33, 25, 19, 0.03);
  border-color: var(--line);
}

/* Honeypot: für echte Nutzer unsichtbar, aber im DOM vorhanden — einfache
   Spam-Bremse, siehe certificate.php. Nicht mit display:none verstecken
   (manche Bots überspringen das gezielt), sondern optisch aus dem
   sichtbaren Bereich schieben. */
.cert-email-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cert-email-submit { margin-top: 4px; }
.cert-email-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.cert-email-status {
  margin-top: 12px;
  font-size: 13px;
  color: var(--accent);
}
.cert-email-status.is-error { color: #b23b2c; }

/* ---------- Datenschutz-Hinweis ---------- */
.privacy {
  margin-top: 64px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  padding: 44px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.privacy-icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-pale); color: var(--accent);
  margin: 0 auto 14px;
}
.privacy-icon svg { width: 20px; height: 20px; }
.privacy .label {
  font-size: 12px; color: var(--accent); font-weight: 700; margin-bottom: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.privacy h2 { font-size: clamp(21px, 2.8vw, 27px); letter-spacing: -0.025em; line-height: 1.18; margin-bottom: 12px; }
.privacy p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; max-width: 62ch; margin: 0 auto; }
.privacy p + p { margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap {
  padding: 32px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 13px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { height: 22px; border-radius: 5px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy { max-width: none; }
  .practice-row { grid-template-columns: 1fr; }
  .continue-row { grid-template-columns: 1fr; }
  .continue-card { grid-template-columns: 1fr; }
  .continue-thumb-wrap { aspect-ratio: 16 / 9; }
  .section-heading-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-heading-row p { max-width: none; }
}

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 380px) {
  .grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .wrap { padding: 0 18px; }
  .section { padding: 0 18px 68px; }
  nav.wrap { height: 62px; }
  .player-shell { scroll-margin-top: 78px; }
  .brand img { height: 26px; }
  .brand-name { font-size: 14px; }
  .brand-tag { display: none; }
  .nav-link { display: none; }

  .hero { padding: 28px 0 0; }
  h1.headline { font-size: 28px; }
  .hero p.sub { font-size: 15px; }
  .hero-actions { gap: 12px; }
  .hero-actions .btn-primary, .hero-actions .btn-outline { width: 100%; justify-content: center; }

  .play-btn { width: 56px; height: 56px; }
  .play-btn svg { width: 20px; height: 20px; }
  .poster-caption { right: 24px; bottom: 20px; left: 20px; }

  .my-training-head { margin-top: 40px; }
  .progress-bar-wrap { min-width: 0; width: 100%; }
  .progress-bar-track { flex: 1; width: auto; }
  .continue-info { padding: 20px; }
  .benefits-row { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }

  .section-heading { margin: 44px auto 24px; }

  .privacy { margin-top: 44px; padding: 28px; border-radius: var(--radius-lg); }

  .site-footer .wrap { flex-direction: column; align-items: flex-start; }

  .quiz-section { margin-top: 44px; }
  .quiz-item { padding: 17px; }
  .quiz-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .quiz-actions .btn-primary { width: 100%; }
  .quiz-result { padding: 28px; }
  .cert-email-panel { margin-top: 44px; padding: 28px; }
  .cert-email-columns { flex-direction: column; gap: 24px; }
  .cert-email-illustration { width: 190px; align-self: center; }
}

@media (max-width: 400px) {
  .brand-name { display: none; }
  .nav-progress-count { font-size: 12px; }
  .nav-progress-bar { width: 40px; }
}