/* ═══════════════════════════════════════════════════════════════
   elearning-base.css
   Reset + Body + Typografie-Defaults + globale Patterns.
   Lädt NACH elearning-tokens.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Modern Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--es-sans);
  font-size: var(--es-body-l);
  line-height: 1.6;
  color: var(--es-ink-light);
  background: var(--es-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* ── Links ────────────────────────────────────────────────── */
a {
  color: var(--es-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 180ms var(--es-ease);
}
a:hover { color: var(--es-blue-deep); }
a:focus-visible {
  outline: 2px solid var(--es-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Headlines ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--es-serif);
  color: var(--es-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 500;
}
h1 { font-size: var(--es-display-2); }
h2 { font-size: var(--es-h2); }
h3 { font-size: var(--es-h3); }

/* Italic-Akzent für Headlines (»fast echt war.«) */
em, h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--es-blue);
  font-weight: 400;
}

/* Body-Text */
p { font-size: var(--es-body-l); line-height: 1.7; }
p + p { margin-top: 1em; }

/* ── Mono-Label-Pattern ───────────────────────────────────── *
 * Wiederkehrend für Topbar-Crumbs, Karten-Header, Captions.   */
.es-mono-label {
  font-family: var(--es-mono);
  font-size: var(--es-mono-s);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--es-ink-muted);
  display: inline-block;
}
.es-mono-label--accent { color: var(--es-blue); }
.es-mono-label--ink    { color: var(--es-ink); }

/* ── Section-Marker · ▎-Bullet vor Mono-Label ────────────── */
.es-section-marker::before {
  content: '▎';
  color: var(--es-blue);
  margin-right: 0.4em;
  font-weight: 700;
}

/* ── Page-Container · responsive Padding ─────────────────── */
.es-page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--es-page-pad-mobile);
  padding-right: var(--es-page-pad-mobile);
}
@media (min-width: 768px) {
  .es-page {
    padding-left: var(--es-page-pad-tablet);
    padding-right: var(--es-page-pad-tablet);
  }
}
@media (min-width: 1024px) {
  .es-page {
    padding-left: var(--es-page-pad);
    padding-right: var(--es-page-pad);
  }
}

/* ── Selektion ────────────────────────────────────────────── */
::selection { background: var(--es-blue); color: white; }

/* ── Reduzierte Bewegung ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   Override · Alte Akzent-Boxen auf Editorial-Sprache mappen
   Diese Regeln überstimmen den alten <style>-Block in index.html
   ═══════════════════════════════════════════════════════════════ */

/* ── Warn / Alert / Danger ──────────────────────────────────── */
.alert-box {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.alert-box::before {
  display: none !important;
}
.alert-box.warn::before {
  display: none !important;
}
.alert-box.safe {
  background: var(--es-paper) !important;
  border-color: var(--es-line) !important;
}
.alert-box.safe::before {
  display: none !important;
}

/* ── Emergency-Karten (introEmergency) ─────────────────────── */
.emergency-card {
  background: var(--es-paper);
  border: 1px solid var(--es-line);
  border-radius: 0;
  padding: 24px;
}
.emergency-card h3 {
  font-family: var(--es-serif);
  color: var(--es-ink);
  margin-top: 0;
}
.emergency-hint {
  background: transparent;
  border: 1px solid var(--es-line);
  border-radius: 0;
  padding: 12px 16px;
  margin-top: 1rem;
}

.mission-box {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
}

/* ── Narrator ───────────────────────────────────────────────── */
.narrator-box {
  background: linear-gradient(135deg, var(--c-narrator-bg-a) 0%, var(--c-narrator-bg-b) 100%) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
}
.narrator-text {
  font-family: var(--es-serif) !important;
  font-style: italic !important;
  color: var(--es-ink-light) !important;
}

/* ── Info / Tipp / Erklärung ────────────────────────────────── */
.info-box {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
}
.info-box h3 {
  color: var(--es-ink) !important;
}
.info-box li {
  color: var(--es-ink-light) !important;
}
.info-card {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.info-card img {
  border-radius: 0 !important;
}
.info-card:hover {
  transform: none !important;
}

/* ── Takeaway-Karten ────────────────────────────────────────── */
.takeaway-card {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
}
.takeaway-title {
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  letter-spacing: -0.005em !important;
  color: var(--es-ink) !important;
}

/* ── Fact-Karten ────────────────────────────────────────────── */
.fact-card {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
}
.fact-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.fact-icon {
  background: var(--es-blue) !important;
  background-image: none !important;
  color: white !important;
  border-radius: 0 !important;
}

/* ── Intro-Karten (Vishing / Social) ────────────────────────── */
.intro-card {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
}
.intro-card.vishing h3 {
  color: var(--es-ink) !important;
}
.intro-card.social h3 {
  color: var(--es-ink) !important;
}

/* ── Crew-Karten ────────────────────────────────────────────── */
.crew-card {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
}
.crew-avatar {
  box-shadow: none !important;
  border: 1px solid var(--es-line) !important;
}

/* ── Passwort-Manager-Geräte-Karten ─────────────────────────── */
.pm-device-card {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pm-device-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── Stats-Dot ──────────────────────────────────────────────── */
.stats-dot {
  background: var(--es-blue) !important;
}

/* ── Badge / Pill → Mono-Label ──────────────────────────────── */
.module-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  color: var(--es-blue) !important;
  font-family: var(--es-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

/* ── Modul-Titelbild ───────────────────────────────────────── */
.module-media {
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 24px 0 !important;
  transition: none !important;
}
.module-media:hover {
  transform: none !important;
  box-shadow: none !important;
}
.module-intro .module-media {
  margin: 24px 0 0 0 !important;
}
.module-intro .module-media + .es-modul__audio-bar {
  margin-top: 0 !important;
}

/* ── Modul-Intro Lead + Divider ────────────────────────────── */
.module-intro .lead {
  font-family: var(--es-serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--es-ink);
  margin: 8px 0 32px 0;
  max-width: 38em;
}
hr.es-divider {
  border: none;
  border-top: 1px solid var(--es-line);
  margin: 32px 0;
}

.panel-number {
  background: transparent !important;
  color: var(--es-blue) !important;
  font-family: var(--es-mono) !important;
  font-size: var(--es-mono-s) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  box-shadow: none !important;
}
.panel-number::before {
  display: none !important;
}

/* ── Buttons → Royal Blue ───────────────────────────────────── */
.btn-primary {
  background: var(--es-blue) !important;
  background-image: none !important;
  color: white !important;
  border-radius: 0 !important;
  font-family: var(--es-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--es-blue-deep) !important;
  box-shadow: none !important;
}
.cf-submit {
  background: var(--es-blue) !important;
  background-image: none !important;
  color: white !important;
  border-radius: 0 !important;
  font-family: var(--es-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.cf-submit:hover:not(:disabled) {
  background: var(--es-blue-deep) !important;
  box-shadow: none !important;
}
.quiz-btn {
  background: var(--es-blue) !important;
  background-image: none !important;
  color: white !important;
  border-radius: 0 !important;
  font-family: var(--es-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.quiz-btn:hover {
  background: var(--es-blue-deep) !important;
  box-shadow: none !important;
}
.quiz-question-num {
  background: var(--es-blue) !important;
  background-image: none !important;
  color: white !important;
  font-family: var(--es-mono) !important;
}

/* ── WHGame Mockup größer auf Schritt 5 (TASK 26) ─────────── */
.wh-simulation-screen { min-height: 440px !important; }
@media (max-width: 768px) {
  .wh-simulation-screen { min-height: 400px !important; }
}

/* ── Exit-Button → Mono-Caps wie Nav-Items (TASK 26) ──────── */
.exit-btn {
  background: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--es-ink-muted) !important;
  padding: 6px 10px !important;
}
.exit-btn:hover {
  color: var(--es-ink) !important;
  background: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   TASK 15 — Display-Headlines & Karten-Titel → EB Garamond
   ═══════════════════════════════════════════════════════════════ */

/* Kategorie A — Display-Headlines (Garamond, groß) */
.display-title,
.game-title,
.mission-title,
.ai-video-section h3,
.modal-title,
.quiz-certificate h2 {
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  letter-spacing: -0.015em !important;
  color: var(--es-ink) !important;
}
/* A — Sonderfälle auf dunklem Hintergrund */
.quiz-result-title {
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  letter-spacing: -0.015em !important;
  color: white !important;
}

/* Kategorie B — Karten-Titel (Garamond, 22px) */
.card-title,
.pm-device-name {
  font-family: var(--es-serif) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  letter-spacing: -0.005em !important;
}

/* Kategorie C — Karten-Sub-Headlines (Garamond, 19px)
   .takeaway-title ist oben im TASK-12-Block bereits erweitert */
.alert-title,
.info-box h3 {
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  letter-spacing: -0.005em !important;
  color: var(--es-ink) !important;
}

/* Kategorie D1 — Mono-Caps-Labels */
.cf-label,
.panel-number,
.rank-badge {
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--es-ink-muted) !important;
}

/* Kategorie D2 — Stat-Zahlen (Garamond, prominent) */
.stat-value {
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(36px, 5vw, 56px) !important;
  color: var(--es-ink) !important;
}

/* Kategorie E — Bullet-Punkte → Royal Blue */
.takeaway-list li::before {
  color: var(--es-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TASK 18 — Pre-Assessment-Quiz → Editorial (dunkler Container)
   ═══════════════════════════════════════════════════════════════ */

/* Container & Karten — dunkel bleibt, scharfe Ecken */
.quiz-container {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.quiz-question-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Frage-Text (Multiple-Choice) → Garamond, konsistent zur Likert-Frage */
.quiz-question-text {
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
  font-size: 1.5rem !important;
  letter-spacing: -0.005em !important;
  line-height: 1.4 !important;
}

/* Frage-Zähler-Badge (eckig, Mono-Caps) */
.quiz-question-num {
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: white !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

/* Antwort-Optionen — scharfe Ecken */
.quiz-option {
  border-radius: 0 !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  font-family: var(--es-serif) !important;
  font-weight: 400 !important;
  font-size: 1.0625rem !important;
  line-height: 1.5 !important;
}

/* A/B/C/D-Letter-Badge (eckig, Mono) */
.quiz-option-letter {
  border-radius: 0 !important;
  font-family: var(--es-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}

/* Progress-Bar */
.quiz-progress {
  border-radius: 0 !important;
}
.quiz-progress-fill {
  border-radius: 0 !important;
  background: var(--es-blue) !important;
}

/* Result-Page */
.quiz-result {
  border-radius: 0 !important;
}
.quiz-result-score {
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
}

/* Zertifikat — scharfe Ecken, dezenter Rahmen */
.quiz-certificate {
  border-radius: 0 !important;
  border-width: 1px !important;
  border-color: var(--es-ink-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TASK 19.1 — Password-Checker → Editorial (Cream-Container)
   ═══════════════════════════════════════════════════════════════ */

/* Container — Cream statt Slate-Gradient */
.pw-checker {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-ink-muted) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--es-ink) !important;
  padding: 32px !important;
}

/* Eingabefeld — Mono, eckig, dezenter Border */
.pw-checker-input {
  font-family: var(--es-mono) !important;
  font-size: 1rem !important;
  letter-spacing: 0.04em !important;
  background: white !important;
  color: var(--es-ink) !important;
  border: 1px solid var(--es-ink-muted) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pw-checker-input:focus {
  outline: none !important;
  border-color: var(--es-blue) !important;
  background: white !important;
}

/* Strength-Bar — eckig, JS-Fill-Farbe bleibt unangetastet */
.pw-strength-bar {
  background: rgba(15,23,42,0.08) !important;
  border-radius: 0 !important;
  height: 6px !important;
  border: 0 !important;
}
.pw-strength-fill {
  border-radius: 0 !important;
  /* width und background werden per JS gesetzt — NICHT überschreiben */
  transition: width 0.2s ease, background 0.2s ease !important;
}

/* Strength-Label — Mono-Caps, JS-Color bleibt unangetastet */
.pw-strength-label {
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  /* color wird per JS gesetzt — NICHT überschreiben */
}

/* Requirements-Container — keine Box mehr, nur Liste */
.pw-requirements {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Einzelnes Requirement — Default-Zustand auf Cream */
.pw-req {
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1px solid var(--es-ink-muted) !important;
  border-radius: 0 !important;
  color: var(--es-ink-muted) !important;
}

/* Requirement valid — grün getintet */
.pw-req.valid {
  background: rgba(34,197,94,0.08) !important;
  border-color: rgba(34,197,94,0.4) !important;
  color: #16a34a !important;
}

/* Requirement invalid — dezent rot getintet */
.pw-req.invalid {
  background: rgba(239,68,68,0.06) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #dc2626 !important;
}

/* Requirement-Icon — eckig statt rund, kompakt */
.pw-req-icon {
  border-radius: 0 !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
}
.pw-req.valid .pw-req-icon {
  background: #22c55e !important;
  color: white !important;
}
.pw-req.invalid .pw-req-icon {
  background: rgba(239,68,68,0.15) !important;
  color: #dc2626 !important;
}

/* Requirement-Text erbt font-family von .pw-req */
.pw-req-text {
  font-size: 11px !important;
  color: inherit !important;
}

/* Notice — Gold/Warnung bleibt, nur eckig + left-Border */
.pw-notice {
  border-radius: 0 !important;
  border-width: 0 0 0 2px !important;
  border-style: solid !important;
  border-left-color: #fbbf24 !important;
  background: rgba(251,191,36,0.12) !important;
}
.pw-notice p {
  color: var(--es-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TASK 19.2 — Password-Game → Editorial (Cream-Container)
   ═══════════════════════════════════════════════════════════════ */

/* Container & Inner */
.game-container {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 32px !important;
}
/* Accent-Stripe — dünner */
.game-container-inner::before {
  height: 2px !important;
}

/* Game-Badge — eckig, Mono-Caps, Royal Blue */
.game-badge {
  background: var(--es-blue) !important;
  color: white !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
}

/* Subtitle */
.game-subtitle {
  color: var(--es-ink-muted) !important;
  font-size: 1rem !important;
}

/* Stat-Grid — transparent, eckig */
.stat-card {
  background: transparent !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  padding: 16px !important;
  box-shadow: none !important;
}
.stat-label {
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--es-ink-muted) !important;
}
/* .stat-value: TASK 15 D2 clamp(36-56px) ist im 3-Spalten-Grid zu groß */
.game-stats .stat-value {
  font-size: clamp(28px, 4vw, 38px) !important;
  color: var(--es-ink) !important;
}

/* Hearts → Mini-Quadrate */
.hearts-display {
  gap: 6px !important;
}
.heart {
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background: var(--es-blue) !important;
  border-radius: 0 !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  transition: opacity 0.3s ease, background 0.3s ease !important;
}
.heart:hover {
  transform: none !important;
}
.heart.lost {
  background: var(--es-line) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Progress-Bar — eckig, Royal Blue */
.game-progress {
  background: rgba(15,23,42,0.08) !important;
  border-radius: 0 !important;
  height: 4px !important;
}
.game-progress-fill {
  background: var(--es-blue) !important;
  border-radius: 0 !important;
}

/* Passwort-Karte */
.password-card {
  background: white !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.password-label {
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--es-ink-muted) !important;
}
.password-text {
  font-family: var(--es-mono) !important;
  color: var(--es-ink) !important;
}
.password-hint {
  font-style: italic !important;
  color: var(--es-ink-muted) !important;
}

/* Aktions-Buttons — beide Royal Blue, Mono-Caps, eckig */
.game-btn {
  background: var(--es-blue) !important;
  color: white !important;
  border: 1px solid var(--es-blue) !important;
  border-radius: 0 !important;
  font-family: var(--es-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  padding: 20px !important;
}
.game-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--es-blue-deep) !important;
  border-color: var(--es-blue-deep) !important;
}
.game-btn:active {
  transform: none !important;
}
.game-btn.reject,
.game-btn.accept {
  border-color: var(--es-blue) !important;
}
.game-btn.reject:hover,
.game-btn.accept:hover {
  background: var(--es-blue-deep) !important;
  border-color: var(--es-blue-deep) !important;
}
.game-btn-icon {
  color: white !important;
}
.game-btn-label {
  color: white !important;
  font-family: var(--es-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.game-btn-hint {
  color: rgba(255,255,255,0.7) !important;
  font-family: var(--es-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Modal — Editorial, dunkles Backdrop bleibt */
.game-modal {
  background: rgba(15,23,42,0.7) !important;
  border-radius: 0 !important;
}
.modal-content {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.game-modal .modal-title {
  font-size: clamp(22px, 3vw, 32px) !important;
}
.modal-text {
  color: var(--es-ink) !important;
}
.modal-password {
  background: white !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
}
.modal-password-label {
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--es-ink-muted) !important;
}
.modal-password-text {
  font-family: var(--es-mono) !important;
  color: var(--es-ink) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TASK 19.4 — Windows-Hello-Game → Editorial (Cream-Container)
   ═══════════════════════════════════════════════════════════════ */

/* Container — Cream statt Navy→Indigo Gradient */
.wh-dark-container {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 32px !important;
  min-height: auto !important;
}
/* Glow-Effekt (radialer Gradient oben rechts) entfernen */
.wh-dark-container::before {
  display: none !important;
}

/* Hero-Icon — eckig, Royal Blue Hero-Akzent */
.wh-hero-icon {
  background: var(--es-blue) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 80px !important;
  height: 80px !important;
}
.wh-hero-icon i {
  color: white !important;
  font-size: 2.5rem !important;
}

/* Hero-Title — Garamond, ink (Container ist Cream) */
.wh-hero-title {
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  letter-spacing: -0.015em !important;
  color: var(--es-ink) !important;
  margin-bottom: 8px !important;
}

/* Hero-Subtitle — auf Cream lesbar */
.wh-hero-subtitle {
  color: var(--es-ink-muted) !important;
  font-size: 1.0625rem !important;
}

/* Glass-Cards → analog .stat-card aus TASK 19.2 */
.wh-glass-card {
  background: transparent !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  color: var(--es-ink) !important;
}

/* Primary-Button — Royal Blue, eckig, Mono-Caps */
.wh-gradient-btn {
  background: var(--es-blue) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--es-mono) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: white !important;
  padding: 14px 28px !important;
  transition: background 0.15s ease !important;
}
.wh-gradient-btn:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--es-blue-deep) !important;
}

/* Secondary-Button — outline-style auf Cream */
.wh-secondary-btn {
  background: transparent !important;
  border: 1px solid var(--es-blue) !important;
  border-radius: 0 !important;
  color: var(--es-blue) !important;
  font-family: var(--es-mono) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
}
.wh-secondary-btn:hover {
  background: rgba(37,99,235,0.08) !important;
}

/* Score-Badge — eckig, Mono-Caps */
.wh-score-badge {
  background: white !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  color: var(--es-ink) !important;
  font-family: var(--es-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
}

/* Progress-Bar — eckig, Royal Blue Fill */
.wh-progress-bar {
  background: rgba(15,23,42,0.08) !important;
  border-radius: 0 !important;
  height: 4px !important;
}
.wh-progress-bar .wh-progress-fill {
  background: var(--es-blue) !important;
  border-radius: 0 !important;
}

/* Question-Icon (gelb-orange Gradient-Hintergrund) → eckig, dezenter */
.wh-question-icon {
  background: rgba(251,191,36,0.12) !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
  border-radius: 0 !important;
  width: 56px !important;
  height: 56px !important;
}

/* Benefit-Cards — drei Farben (green/blue/purple) auf Cream */
.wh-benefit-card {
  border-radius: 0 !important;
  padding: 20px !important;
}
.wh-benefit-card.green {
  background: rgba(34,197,94,0.06) !important;
  border: 1px solid rgba(34,197,94,0.3) !important;
}
.wh-benefit-card.blue {
  background: rgba(37,99,235,0.06) !important;
  border: 1px solid rgba(37,99,235,0.3) !important;
}
.wh-benefit-card.purple {
  background: rgba(139,92,246,0.06) !important;
  border: 1px solid rgba(139,92,246,0.3) !important;
}
.wh-benefit-card h3 {
  color: var(--es-ink) !important;
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
  font-size: 1.0625rem !important;
}
.wh-benefit-card p {
  color: var(--es-ink-muted) !important;
}

/* Benefit-Icon — eckig, dezent in jeweiliger Farbe */
.wh-benefit-icon {
  border-radius: 0 !important;
  width: 40px !important;
  height: 40px !important;
}
.wh-benefit-icon.green {
  background: rgba(34,197,94,0.15) !important;
  color: #16a34a !important;
}
.wh-benefit-icon.blue {
  background: rgba(37,99,235,0.15) !important;
  color: var(--es-blue) !important;
}
.wh-benefit-icon.purple {
  background: rgba(139,92,246,0.15) !important;
  color: #8b5cf6 !important;
}

/* ── Quiz-Stage (Fragen + Antworten + Erklärung) ── */

/* Quiz-Headline-h2 (Inline-fontFamily wird durch CSS überschrieben) */
.wh-dark-container h2 {
  color: var(--es-ink) !important;
  font-family: var(--es-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  letter-spacing: -0.005em !important;
  margin-bottom: 24px !important;
}

/* "Frage X/Y"-Label oben links — Mono-Caps */
.wh-dark-container > div > span,
.wh-dark-container > span {
  color: var(--es-ink-muted) !important;
}

/* Quiz-Option Default — auf Cream lesbar, eckig */
.wh-option {
  background: white !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  color: var(--es-ink) !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
  padding: 14px 16px !important;
}
.wh-option:hover:not(:disabled) {
  background: var(--es-paper) !important;
  border-color: var(--es-blue) !important;
}

/* Option-States — Original-Farben (grün/rot) auf Cream */
.wh-option.correct {
  background: rgba(34,197,94,0.08) !important;
  border-color: #22c55e !important;
  color: var(--es-ink) !important;
}
.wh-option.incorrect {
  background: rgba(239,68,68,0.08) !important;
  border-color: #ef4444 !important;
  color: var(--es-ink) !important;
}
.wh-option.disabled {
  opacity: 0.6 !important;
}

/* Letter-Badge A/B/C/D — eckig, Mono */
.wh-option-letter {
  background: var(--es-paper) !important;
  border: 1px solid var(--es-line) !important;
  border-radius: 0 !important;
  font-family: var(--es-mono) !important;
  font-weight: 500 !important;
  width: 28px !important;
  height: 28px !important;
}
.wh-option.correct .wh-option-letter {
  background: #22c55e !important;
  border-color: #22c55e !important;
  color: white !important;
}
.wh-option.incorrect .wh-option-letter {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: white !important;
}

/* Explanation-Box — eckig, dezenter, auf Cream */
.wh-explanation-box {
  border-radius: 0 !important;
  margin-top: 24px !important;
  padding: 16px !important;
}
.wh-explanation-box.success {
  background: rgba(34,197,94,0.06) !important;
  border: 1px solid rgba(34,197,94,0.3) !important;
}
.wh-explanation-box.info {
  background: rgba(37,99,235,0.06) !important;
  border: 1px solid rgba(37,99,235,0.3) !important;
}

/* Explanation-Icon — eckig, Original-Farben bleiben */
.wh-explanation-icon {
  border-radius: 0 !important;
  width: 28px !important;
  height: 28px !important;
}
.wh-explanation-icon.success {
  background: #22c55e !important;
}
.wh-explanation-icon.info {
  background: var(--es-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TASK 22.2 — Feedback-Form → Editorial
   ═══════════════════════════════════════════════════════════════ */

/* Sterne — Gold-Aktivzustand bleibt, transition entschärfen */
.feedback-star {
  transition: color 0.15s ease, filter 0.15s ease !important;
  transform: none !important;
}
.feedback-star:hover,
.feedback-star.active {
  transform: none !important;
}

/* Textarea — eckig, dezenter Border */
.feedback-textarea {
  border-radius: 0 !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  padding: 14px 16px !important;
  resize: vertical !important;
}
.feedback-textarea:focus {
  outline: none !important;
  border-color: var(--es-blue) !important;
  background: rgba(255,255,255,0.08) !important;
}
.feedback-textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
  font-style: italic !important;
}

/* ── Comic Page outer card — Editorial: scharfe Ecken ──── */
.comic-page {
  border-radius: var(--es-radius) !important;
}

/* ── Print · Zertifikat-Setup ─────────────────────────────── */
@media print {
  body { background: white; color: black; }
  .es-topbar, .es-bottomnav, button { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   TASK 20 — Clean Desk Challenge (CDG) → Editorial (Cream-Container)
   Overrides der dark/glassy .cdg-* Styles aus games.js.
   Funktionale Item-/Zone-Emojis bleiben; nur Chrome wird editorial.
   ═══════════════════════════════════════════════════════════════ */
.cdg-wrap { background: var(--es-paper) !important; color: var(--es-ink) !important; border: 1px solid var(--es-line) !important; border-radius: 0 !important; font-family: var(--es-sans) !important; }
#clean-desk-game-root { border-radius: 0 !important; }

.cdg-header h2 { font-family: var(--es-serif) !important; font-weight: 500 !important; color: var(--es-ink) !important; }
.cdg-header p { color: var(--es-ink-muted) !important; }

.cdg-stat { background: transparent !important; border: 1px solid var(--es-line) !important; border-radius: 0 !important; }
.cdg-stat-label { color: var(--es-ink-muted) !important; font-family: var(--es-mono) !important; letter-spacing: 0.06em !important; }
.cdg-stat-value { font-family: var(--es-serif) !important; }

.cdg-desk { background: transparent !important; border: 1px dashed var(--es-line) !important; border-radius: 0 !important; }
.cdg-desk.empty { border-color: var(--es-blue) !important; }

.cdg-item { background: var(--es-paper) !important; border: 1px solid var(--es-line) !important; border-radius: 0 !important; }
.cdg-item:hover { background: #f4f1ea !important; border-color: var(--es-ink-muted) !important; }
.cdg-item.selected { border-color: var(--es-blue) !important; background: rgba(45,78,216,0.06) !important; box-shadow: none !important; }
.cdg-item-name { color: var(--es-ink) !important; }
.cdg-item-desc { color: var(--es-ink-muted) !important; }

.cdg-zone { background: var(--es-paper) !important; border: 1px solid var(--es-line) !important; border-radius: 0 !important; }
.cdg-zone:hover { background: #f4f1ea !important; border-color: var(--es-ink-muted) !important; }
.cdg-zone.highlight { border-color: var(--es-blue) !important; background: rgba(45,78,216,0.06) !important; box-shadow: none !important; }
.cdg-zone-label { color: var(--es-ink) !important; font-family: var(--es-mono) !important; }

.cdg-feedback { background: #f4f1ea !important; border: 1px solid var(--es-line) !important; border-radius: 0 !important; }
.cdg-feedback-text { color: var(--es-ink) !important; }

.cdg-hint { color: var(--es-ink-muted) !important; }

.cdg-result-title { font-family: var(--es-serif) !important; font-weight: 500 !important; color: var(--es-ink) !important; }
.cdg-wrap [style*="rgba(255,255,255,.7)"] { color: var(--es-ink-muted) !important; }

.cdg-retry-btn { background: var(--es-blue) !important; color: #fff !important; border: 1px solid var(--es-blue) !important; border-radius: 0 !important; font-family: var(--es-mono) !important; font-weight: 500 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; box-shadow: none !important; }
.cdg-retry-btn:hover { transform: none !important; background: var(--es-blue-deep) !important; border-color: var(--es-blue-deep) !important; box-shadow: none !important; }



/* ═══════════════════════════════════════════════════════════════
   TASK 21 — Lowkey's Sabotage (PTG) → Editorial (nur Chrome)
   Overrides der dark/glassy .ptg-* Chrome-Styles aus components.js.
   Spielbrett (.ptg-desk-viewport, .ptg-dev-*, .ptg-ditem ...) bleibt
   bewusst DUNKEL = funktionales Spielbrett. Lowkey-Avatar bleibt.
   ═══════════════════════════════════════════════════════════════ */
.page-content[style*="#1e3a5f"] { background: var(--es-paper) !important; }
#physical-threat-game-root [style*="rgba(147,197,253"] { color: var(--es-ink-muted) !important; }

.ptg-wrap { color: var(--es-ink) !important; font-family: var(--es-sans) !important; }
.ptg-intro-title { background: none !important; -webkit-text-fill-color: var(--es-ink) !important; color: var(--es-ink) !important; font-family: var(--es-serif) !important; font-weight: 500 !important; }
.ptg-speech { background: var(--c-villain-bubble) !important; border: 1px solid rgba(217,119,6,0.25) !important; color: var(--es-ink-light) !important; border-radius: 0 !important; }
.ptg-speech-prefix { color: var(--c-villain) !important; opacity: 1 !important; }
.ptg-instructions { color: var(--es-ink-muted) !important; }
.ptg-instructions li::before { color: var(--es-blue) !important; }

.ptg-btn { font-family: var(--es-mono) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border-radius: 0 !important; box-shadow: none !important; }
.ptg-btn:hover { transform: none !important; box-shadow: none !important; background: var(--es-blue-deep) !important; }

.ptg-score-bar { background: transparent !important; border: 1px solid var(--es-line) !important; border-radius: 0 !important; }
.ptg-score-label { color: var(--es-ink-muted) !important; }
.ptg-progress-ring { background: conic-gradient(#10b981 calc(var(--pct)*1%), var(--es-line) 0) !important; }
.ptg-progress-ring-inner { background: var(--es-paper) !important; }

.ptg-feedback { background: #f4f1ea !important; border: 1px solid var(--es-line) !important; border-radius: 0 !important; }
.ptg-feedback.danger-found { border-color: rgba(244,63,94,0.4) !important; background: rgba(244,63,94,0.06) !important; }
.ptg-feedback.safe-item { border-color: rgba(16,185,129,0.3) !important; background: rgba(16,185,129,0.06) !important; }
.ptg-feedback.wrong { border-color: rgba(245,158,11,0.4) !important; background: rgba(245,158,11,0.06) !important; }
.ptg-fb-title { font-family: var(--es-sans) !important; font-weight: 600 !important; }
.ptg-fb-text { color: var(--es-ink-muted) !important; }
.ptg-fb-text strong { color: var(--es-ink) !important; }

.ptg-btn-decision { font-family: var(--es-sans) !important; }
.ptg-btn-decision:hover { box-shadow: none !important; }

.ptg-win-title { font-family: var(--es-serif) !important; font-weight: 500 !important; color: var(--es-ink) !important; }
.ptg-win-stat-val { font-family: var(--es-serif) !important; }
.ptg-win-stat-label { color: var(--es-ink-muted) !important; font-family: var(--es-mono) !important; }
.ptg-win-summary { background: #f4f1ea !important; border: 1px solid var(--es-line) !important; border-radius: 0 !important; }
.ptg-win-summary h4 { font-family: var(--es-serif) !important; font-weight: 500 !important; color: var(--es-ink) !important; }
.ptg-win-summary li { color: var(--es-ink-light) !important; }
.ptg-win-summary li::before { content: "\25B8" !important; color: var(--es-blue) !important; font-size: 0.75rem !important; }

.ptg-wrap [style*="rgba(255,255,255,.5)"] { color: var(--es-ink-muted) !important; }
.ptg-wrap [style*="rgba(255,255,255,.4)"] { color: var(--es-ink-muted) !important; }



/* ===== CREW-GRID-5TH — alleinstehende 5. Karte mittig (nur >=640px) ===== */
@media (min-width: 640px){
  .grid-container > .crew-card:last-child:nth-child(odd){
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: calc(50% - 10px) !important;
  }
}


/* ===== MODULE-BADGE-FIT — Modul-Eyebrow im es-modul Header hugt den Text (Flex-Header streckt sonst) ===== */
.es-modul__header .module-badge{
  width: fit-content;
  align-self: flex-start;
}