/* DeutschMachen palette: cool blue identity, warm next step, green completion. */
html:root {
  --teal: #1e5a8a;
  --teal-press: #174b73;
  --teal2: #e8f0f8;
  --ink: #0f172a;
  --muted: #475569;
  --bg: #f8fafc;
  --paper: #ffffff;
  --mint: #edf4fa;
  --line: #d8e2ec;
  --line-strong: #94a3b8;
  --gold: #f59e0b;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --success: #10b981;
  --success-text: #047857;
  --success-bg: #ecfdf5;
  --success-line: #6ee7b7;
  --dm-type-ink: #0f172a;
  --dm-type-muted: #475569;
}
html, body { background-color: var(--bg); color: var(--ink); }
body { background-color: #f8fafc !important; color: #0f172a !important; }
/* Keep the established green-blue hero/header gradients intact. */
.lesson-card, .card, .level-card, .info-card {
  background-color: #fff;
  border-color: #d8e2ec;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .055);
}
.lesson-card p, .card p, .level-card p, .info-card p { color: #475569; }
.lesson-card h3, .card h3, .level-card h3, .info-card h3 { color: #0f172a; }
/* Map state styling is driven by each level's existing local progress. */
.lesson-card.done, .card.done {
  background: #ecfdf5 !important;
  border: 1.5px solid #6ee7b7 !important;
  box-shadow: 0 5px 16px rgba(16, 185, 129, .08);
}
.lesson-card.done .lesson-number, .card.done .num {
  background: #d1fae5 !important;
  color: #047857 !important;
}
.lesson-card.current, .card.current {
  border: 1.5px solid #f59e0b !important;
}
.lesson-card.current .lesson-number, .card.current .num {
  background: #fef3c7 !important;
  color: #b45309 !important;
}
.lesson-card .done input, .card input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #10b981;
  outline: 1.5px solid #94a3b8;
  outline-offset: 1px;
}
.lesson-card.done .done input, .card.done input[type="checkbox"] {
  accent-color: #10b981;
  outline-color: #10b981;
}
.lesson-card .open, .card .open {
  color: #b45309 !important;
  font-weight: 800;
}
.lesson-card .open:hover, .card .open:hover { color: #92400e !important; }
.progressbox .bar i, .bar i, #progressBar { background-color: #10b981 !important; }

@media screen and (max-width: 760px) {
  .hero-note {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    text-align: center !important;
  }
  .hero-note > span {
    width: fit-content;
    max-width: 100%;
    text-align: center !important;
  }
}

/* Match the level-map lesson links on the home level cards. */
.level-card > a { color: #b45309 !important; }
.level-card > a:hover { color: #92400e !important; }

/* German flag mark; dimensions remain defined by each existing logo slot. */
.german-flag {
  background: linear-gradient(to bottom, #000000 0 33.333%, #dd0000 33.333% 66.666%, #ffce00 66.666% 100%) !important;
  color: transparent !important;
  font-size: 0 !important;
}