/* Self-hosted (offline-first: no CDN fonts, per DEUTSCHLAB_UI_UX_DESIGN_DIRECTION_v1.md §22).
   Variable fonts — one file covers the whole weight range (400/500/650/700 per §5). */
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Italic-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/SourceSerif4-Variable.ttf") format("truetype-variations"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../assets/fonts/SourceSerif4-Italic-Variable.ttf") format("truetype-variations"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  /* Abdalan DeutschLab brand palette — see DEUTSCHLAB_UI_UX_DESIGN_DIRECTION_v1.md §7.
     --color-primary carries the doc's "accent" role (identity/active/selection/focus/links);
     --color-accent/--color-warn carry the doc's semantic success/error roles. Values only —
     which selector uses which token is unchanged from before this pass (lower-risk retint). */
  --color-bg: #f7f7f4;
  --color-surface: #ffffff;
  --color-border: #dededa;
  --color-text: #181818;
  --color-text-muted: #666666;
  --color-primary: #2457d6;
  --color-primary-dark: #1b3fa6;
  --color-accent: #287a55;
  --color-accent-soft: #eef8f2;
  --color-warn: #a94442;
  --color-warn-soft: #f7e7e5;
  --color-highlight: #f7e2b8;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 3px rgba(24, 24, 24, 0.08), 0 1px 2px rgba(24, 24, 24, 0.06);
  --nav-height: 60px;
  --safe-area-top: env(safe-area-inset-top, 0px);

  /* Typography roles — §5: sans = interaction/structure, serif = extended reading. */
  --font-sans: "Inter", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-display: 2.25rem;

  /* Spacing scale — §6. */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #16181c;
    --color-surface: #202329;
    --color-border: #343841;
    --color-text: #f0f1f3;
    --color-text-muted: #9aa0ac;
    --color-primary: #5b8def;
    --color-primary-dark: #7fa8f5;
    --color-accent: #5fbe94;
    --color-accent-soft: #1e332a;
    --color-warn: #e2897e;
    --color-warn-soft: #3a2422;
    --color-highlight: #4a3c1e;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app.is-loading .app-main {
  opacity: 0.4;
}

/* ---------- header ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + var(--safe-area-top)) 16px 14px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-header__logo {
  flex: none;
  display: block;
  border-radius: 6px;
}

.app-header__brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-header__title {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__motto {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.app-header__admin-link {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.app-header__admin-link:hover {
  color: inherit;
}

/* ---------- main / nav ---------- */

.app-main {
  flex: 1;
  padding: 16px 16px calc(var(--nav-height) + 24px);
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
}

.app-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 10;
}

.nav-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
}

.nav-link.is-active {
  color: var(--color-primary);
}

@media (min-width: 720px) {
  .app-nav {
    position: static;
    height: auto;
    border-top: none;
    border-bottom: 1px solid var(--color-border);
    justify-content: flex-start;
    gap: 8px;
    padding: 0 24px;
    order: -1;
  }

  .nav-link {
    flex: none;
    padding: 14px 4px;
    border-bottom: 2px solid transparent;
  }

  .nav-link.is-active {
    border-bottom-color: var(--color-primary);
  }

  .app {
    flex-direction: column;
  }

  .app-main {
    padding: 24px 16px 40px;
  }
}

/* ---------- shared primitives ---------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-bottom: 14px;
}

.btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn:active:not(:disabled) { transform: scale(.97); }

.btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.btn--ghost {
  background: transparent;
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.view-header {
  margin-bottom: 16px;
}

.view-header h1 {
  margin: 4px 0 0;
  font-size: 1.5rem;
}

.view-subtitle {
  color: var(--color-text-muted);
  margin: 2px 0 0;
}

.level-badge,
.domain-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.progress-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 100px;
}

.progress-bar__track {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.progress-bar__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* gesehen -> verstanden -> produziert -> wiederholt (UI-DESIGN §11) */
.progress-dots { display: inline-flex; align-items: center; gap: 4px; }
.progress-dots__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-border); transition: background-color .18s ease; }
.progress-dots__dot.is-filled { background: var(--color-primary); }

.status-badge {
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.status-badge--begonnen {
  background: var(--color-highlight);
  color: #6b4d0e;
}

.status-badge--geübt {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

.status-badge--gemeistert {
  background: var(--color-primary);
  color: #fff;
}

.xp-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--color-highlight);
  color: #6b4d0e;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.xp-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -12px);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 50;
  pointer-events: none;
}

.xp-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Tabellen list ---------- */

.table-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .table-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.table-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
  text-decoration: none;
  color: var(--color-text);
}

.table-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.table-card__id {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.table-card__title {
  margin: 2px 0 0;
  font-size: 1.1rem;
}

.table-card__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.table-card__goal {
  margin: 4px 0 0;
  font-size: 0.85rem;
}

.table-card__footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ---------- Fortschritt ---------- */

.xp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.xp-hero__value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-primary);
}

.xp-hero__label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.progress-summary {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 10px;
}

.progress-ring-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 16px;
  padding: 20px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.progress-ring-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.progress-ring {
  --pct: 0;
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--color-primary) calc(var(--pct) * 1%), var(--color-border) 0);
  transition: background .4s ease;
}
.progress-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--color-surface);
}
.progress-ring__value { position: relative; font-weight: 800; font-size: .92rem; color: var(--color-text); }
.progress-ring-item__label { font-size: .76rem; font-weight: 700; color: var(--color-text); }
.progress-ring-item__count { font-size: .72rem; color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) {
  .progress-ring { transition: none; }
}

.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
}

.progress-row__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 600;
  min-width: 0;
}

.progress-row__title span:first-child {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-weight: 700;
}

.progress-row__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Tabelle detail ---------- */

.back-link {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
}

.table-detail-header__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.learning-goal {
  margin: 8px 0 0;
  font-size: 0.95rem;
}

.table-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 16px;
  background: #25d366;
  color: #08331d;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.85rem;
}

.teacher-card {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.teacher-card__motto {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.8rem;
  margin-bottom: 6px;
}

.teacher-card__de {
  margin: 0 0 4px;
}

.teacher-card__pt {
  margin: 0;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.section__title {
  margin: 0 0 10px;
  font-size: 1rem;
}

.table-scroll {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th,
.data-table td {
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}

.data-table th {
  background: var(--color-bg);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.col--highlight {
  background: var(--color-highlight) !important;
}

.example-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.example-strip__item {
  padding: 8px 12px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}

.rule-box {
  margin: 0;
  padding: 10px 14px;
  background: var(--color-warn-soft);
  border-left: 3px solid var(--color-warn);
  border-radius: 4px;
  font-weight: 600;
}

.rule-box__pt {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-style: italic;
  font-weight: 400;
  font-size: 0.9rem;
}

.paradigm-endings {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.contrast-axis {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin: 0 0 8px;
}

.contrast-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}

.contrast-row:last-child {
  border-bottom: none;
}

.contrast-row__a,
.contrast-row__b {
  flex: 1;
}

.contrast-row__vs {
  color: var(--color-text-muted);
}

.pattern-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pattern-list__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--color-bg);
  border-radius: 999px;
  font-size: 0.85rem;
}

.pattern-list__arrow {
  color: var(--color-text-muted);
}

.discovery__prompt {
  font-weight: 600;
  margin: 0 0 10px;
}

.discovery__answer {
  padding: 10px 12px;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
  margin: 10px 0 0;
}

.is-hidden {
  display: none !important;
}

.listening-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.9rem;
}

.listening-row__arrow {
  color: var(--color-text-muted);
}

.listening-goal {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.number-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.number-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.number-chip.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.number-chips__detail {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
}

.number-chips__detail strong {
  display: block;
}

.number-chips__breakdown {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.number-reveal__item {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.number-reveal__item:last-child {
  border-bottom: none;
}

.number-reveal__number {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.number-reveal__breakdown {
  margin: 8px 0 0;
  color: var(--color-accent);
  font-weight: 600;
}

.phonetics-challenge__display {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.phonetics-challenge__buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.phonetics-challenge__buttons .btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.grouped-pairs--boxed {
  padding: 12px 14px;
  background: var(--color-accent-soft);
  border-radius: var(--radius-md);
}

.grouped-pairs__group {
  margin-bottom: 10px;
}

.grouped-pairs__group:last-child {
  margin-bottom: 0;
}

.grouped-pairs__group-title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.grouped-pairs__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95rem;
}

.grouped-pairs__highlight {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.grouped-pairs__highlight p {
  margin: 0;
}

.fallback-content {
  white-space: pre-wrap;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ---------- exercises ---------- */

.exercises-heading {
  margin: 18px 0 10px;
  font-size: 1.15rem;
}

.exercise-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.exercise-card__type {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}

.exercise-done-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
}

.exercise-card__prompt {
  margin: 0 0 4px;
  font-weight: 600;
}

.exercise-card__support-pt {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 0.85rem;
}

.exercise-stimulus {
  background: var(--color-bg);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  margin: 8px 0;
}

.exercise-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.exercise-feedback {
  min-height: 1.2em;
  margin: 8px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.exercise-feedback--correct {
  color: var(--color-accent);
}

.exercise-feedback--wrong {
  color: var(--color-warn);
}

.exercise-reveal {
  margin: 6px 0 0;
  padding: 10px 12px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-accent);
}

.exercise-feedback--info {
  color: var(--color-text-muted);
  font-weight: 400;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option-btn {
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.92rem;
  cursor: pointer;
}

.option-btn--correct {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.option-btn--wrong {
  border-color: var(--color-warn);
  background: var(--color-warn-soft);
}

.word-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  padding: 8px;
  border-radius: var(--radius-md);
}

.word-strip--chosen {
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  margin-bottom: 8px;
}

.word-strip__placeholder {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-style: italic;
}

.word-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: grab;
  font-size: 0.9rem;
  touch-action: none;
}

.word-chip:active {
  cursor: grabbing;
}

.word-chip--chosen {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.word-strip--pool,
.word-strip--chosen {
  transition: background-color 0.15s ease;
  border-radius: var(--radius-md);
}

.text-input {
  flex: 1;
  min-width: 160px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.92rem;
}

.text-input--area {
  width: 100%;
  resize: vertical;
  font-family: inherit;
}

.match-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.match-row__label {
  font-weight: 600;
}

.match-select {
  padding: 7px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.exercise-body--unsupported {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---------- Wortschatz / SRS ---------- */

.section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 700;
  margin: 18px 0 8px;
}

.eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  font-weight: 700;
}

.counter {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.wortschatz-hero {
  align-items: stretch;
  text-align: center;
}

.level-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.level-filter__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.88rem;
}

.level-filter__text small {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.level-filter__buttons {
  display: flex;
  gap: 7px;
}

.level-filter__button {
  min-width: 48px;
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.level-filter__button.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.wortschatz-hero__label {
  margin: 0 0 10px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wortschatz-hero__row {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.wortschatz-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.wortschatz-stat strong {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

.wortschatz-stat small {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wortschatz-legend {
  margin-bottom: 16px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.dot--neu {
  background: var(--color-border);
}

.dot--gesehen {
  background: var(--color-highlight);
}

.dot--geuebt {
  background: var(--color-accent);
}

.dot--sicher {
  background: var(--color-primary);
}

.srs-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.srs-topline__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wortschatz-card {
  text-align: center;
  padding: 24px 20px;
}

.wortschatz-card__word {
  margin: 0 0 6px;
  font-size: 1.6rem;
}

.wortschatz-card__citation {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.wortschatz-card .example-strip__item {
  display: inline-block;
  max-width: 34ch;
}

.translation {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 14px 0 0;
}

.wortschatz-card__translation--pending {
  color: var(--color-text-muted);
  font-weight: 400;
  font-style: italic;
  font-size: 0.9rem;
}

.srs-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.srs-actions button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.srs-actions button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.srs-actions button small {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

@media (max-width: 480px) {
  .level-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .level-filter__buttons {
    width: 100%;
  }

  .level-filter__button {
    flex: 1;
  }

  .srs-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Über Abdalan */
.about-view { width: min(940px, 100%); margin: 0 auto; padding-bottom: 56px; }
.about-hero { display: flex; align-items: center; gap: 24px; margin: 8px 0 34px; padding: 28px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 11%, white), var(--color-surface)); border: 1px solid var(--color-border); }
.about-monogram { display: block; width: 78px; height: 78px; flex: none; border-radius: 24px; object-fit: cover; }
.about-hero h1 { margin: 0 0 8px; }
.about-hero--product { align-items: flex-start; }
.about-tagline { margin: 0 0 8px; color: var(--color-primary); font-size: 1.14rem; font-weight: 800; }
.about-lead { margin: 0; color: var(--color-text-muted); }
.about-version { display: inline-block; margin-top: 12px; padding: 5px 10px; border-radius: 999px; background: var(--color-bg); color: var(--color-text-muted); font-size: .8rem; }
.about-intro { max-width: 760px; margin: 0 0 28px; line-height: 1.7; }
.about-intro h2 { margin-bottom: 10px; }
.about-intro p { margin: 0 0 10px; }
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 34px; }
.about-stat { padding: 16px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.about-stat span, .about-stat strong { display: block; }
.about-stat span { color: var(--color-text-muted); font-size: .78rem; }
.about-stat strong { margin-top: 3px; color: var(--color-primary); font-size: 1.35rem; }
.about-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 34px; align-items: start; }
.about-prose { font-size: 1.02rem; line-height: 1.75; }
.about-prose p { margin: 0 0 1.35em; }
.about-origin { padding: 17px 20px; border-left: 4px solid var(--color-primary); border-radius: 0 12px 12px 0; background: var(--color-bg); font-size: 1.08rem; }
.about-prose blockquote { margin: 6px 0 0; padding: 22px 24px; border-radius: 16px; background: var(--color-primary); color: white; font-size: 1.22rem; font-weight: 800; line-height: 1.45; }
.about-section { margin-bottom: 14px; padding: 0 20px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.about-section summary { margin: 0 -20px; padding: 18px 20px; cursor: pointer; color: var(--color-text); font-weight: 800; }
.about-section[open] { padding-bottom: 20px; }
.about-section[open] summary { margin-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.about-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; padding-left: 20px; }
.about-tech { display: grid; grid-template-columns: minmax(145px, .7fr) 1.3fr; gap: 8px 18px; margin: 0; }
.about-tech dt { color: var(--color-text-muted); }
.about-tech dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.about-contact { position: sticky; top: 100px; padding: 20px; border: 1px solid var(--color-border); border-radius: 17px; background: var(--color-surface); }
.about-author { display: block; margin-top: 12px; }
.about-contact small { display: block; margin-top: 3px; color: var(--color-text-muted); }
.about-contact a { display: block; margin-top: 10px; padding: 12px; border-radius: 11px; background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.about-contact a:hover { box-shadow: inset 0 0 0 1px var(--color-primary); }
.about-contact strong, .about-contact span { display: block; }
.about-contact span { margin-top: 3px; color: var(--color-primary); font-size: .85rem; }
.about-copyright { margin: 18px 0 0; color: var(--color-text-muted); font-size: .75rem; line-height: 1.45; }
.micro-dialogue { display: grid; gap: 8px; }
.micro-dialogue p { width: fit-content; max-width: 85%; margin: 0; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--color-bg); }
.micro-dialogue .micro-dialogue__reply { justify-self: end; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--color-primary) 12%, white); }
.expansion-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.expansion-summary p { flex: 1 1 420px; margin: 0; }
.expansion-summary small { width: 100%; color: var(--color-text-muted); }
.timeline-block p { margin: 8px 0; }
.decision-steps { display: grid; gap: 8px; margin-bottom: 0; padding-left: 24px; }
.exercise-series-header { margin: 30px 0 14px; padding: 20px 22px; border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); border-radius: 17px; background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.exercise-series-header h3 { margin: 2px 0 7px; font-size: 1.3rem; }
.exercise-series-header p { margin: 0; color: var(--color-text-muted); }
.completion-feedback { display: flex; flex-direction: column; gap: 6px; }
.completion-feedback__answer { font-size: 1.08rem; }
.completion-feedback__sentence { display: block; }
.completion-feedback small { color: var(--color-text-muted); font-weight: 500; line-height: 1.45; }
@media (max-width: 700px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-contact { position: static; }
  .about-hero { align-items: flex-start; padding: 22px; }
  .about-monogram { width: 58px; height: 58px; border-radius: 17px; }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-principles { grid-template-columns: 1fr; }
  .about-tech { grid-template-columns: 1fr; gap: 2px; }
  .about-tech dd { margin-bottom: 9px; }
}

.hilfe-view { width: min(860px, 100%); margin: 0 auto; padding-bottom: 56px; }
.hilfe-langswitch { display: flex; gap: 8px; margin-bottom: 20px; }
.hilfe-langswitch .btn { border-radius: 999px; padding: 8px 18px; }
.hilfe-langswitch .btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.hilfe-hero { margin-bottom: 22px; }
.hilfe-hero h1 { margin: 4px 0 10px; }
.hilfe-hero p { margin: 0 0 10px; line-height: 1.7; color: var(--color-text-muted); }
.hilfe-hero p strong { color: var(--color-text); }
.hilfe-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.hilfe-toc a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: .82rem; font-weight: 700; text-decoration: none; }
.hilfe-toc a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.hilfe-sections { display: grid; gap: 12px; }
.hilfe-section > summary { display: flex; align-items: center; gap: 12px; }
.hilfe-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--color-accent-soft); color: var(--color-accent); font-size: .82rem; font-weight: 800; }
.hilfe-toc .hilfe-icon { width: 22px; height: 22px; border-radius: 7px; font-size: .74rem; }
.hilfe-section p { margin: 0 0 1.1em; line-height: 1.7; }
.hilfe-section p:last-child { margin-bottom: 0; }
.hilfe-section h2 { margin: 22px 0 8px; font-size: 1.12rem; }
.hilfe-section h2:first-child { margin-top: 4px; }
.hilfe-section h3 { margin: 16px 0 6px; font-size: .96rem; color: var(--color-text-muted); }
.hilfe-section ul { margin: 0 0 1.1em; padding-left: 22px; line-height: 1.65; }
.hilfe-section blockquote { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--color-accent); border-radius: var(--radius-lg); background: var(--color-accent-soft); }
.hilfe-section blockquote p { margin: 0 0 6px; }
.hilfe-section blockquote p:first-child { color: var(--color-accent); font-weight: 700; }
.hilfe-section blockquote p:last-child { margin-bottom: 0; }
.hilfe-loading, .hilfe-error { color: var(--color-text-muted); }
.hilfe-error { color: var(--color-warn); }

@media (max-width: 700px) {
  .hilfe-hero { padding: 0; }
}

/* ---------- Contextual help ("?" per page) ---------- */

.contextual-help { position: fixed; right: 16px; bottom: calc(var(--nav-height) + 16px); z-index: 40; }

.contextual-help__toggle {
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-primary); color: #fff; font-weight: 800; font-size: 1.05rem;
  box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.contextual-help__toggle:hover { transform: scale(1.06); }
.contextual-help__toggle.is-active { background: var(--color-primary-dark); }

.contextual-help__panel {
  position: absolute; right: 0; bottom: calc(100% + 10px); width: min(320px, calc(100vw - 32px));
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 14px 16px; max-height: min(60vh, 420px); overflow-y: auto;
}

.contextual-help__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.contextual-help__panel-title { font-weight: 800; color: var(--color-text); }
.contextual-help__close {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; background: transparent;
  color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.contextual-help__close:hover { background: var(--color-accent-soft); color: var(--color-text); }

.contextual-help__body h3 { margin: 0 0 6px; font-size: .92rem; color: var(--color-text-muted); }
.contextual-help__body p { margin: 0 0 10px; line-height: 1.6; font-size: .92rem; }
.contextual-help__body p:last-child { margin-bottom: 0; }
.contextual-help__loading { color: var(--color-text-muted); }

.contextual-help__more { display: inline-block; margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.contextual-help__more:hover { text-decoration: underline; }

.status-badge--gesehen {
  background: var(--color-highlight);
  color: #6b4d0e;
}

.status-badge--sicher {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- Suche ---------- */

.search-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  margin-bottom: 14px;
}

.search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.search-result {
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  cursor: pointer;
}

.search-result:hover {
  border-color: var(--color-primary);
}

.search-result__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
}

.search-result__meta {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.search-detail-host .s-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-detail-host h2 {
  margin: 0;
}

.search-tables {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.search-table-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.85rem;
}

.search-table-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.search-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.search-context__level {
  flex: none;
}

/* Lernmenü und Zusatzübungen */
.menu-toggle, .menu-close { border: 0; background: transparent; color: inherit; cursor: pointer; }
.menu-toggle { width: 42px; height: 42px; border-radius: 12px; display: grid; place-content: center; gap: 4px; flex: none; }
.menu-toggle:hover { background: var(--color-bg); }
.menu-toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.menu-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(18, 26, 23, .42); backdrop-filter: blur(2px); }
.app-drawer { position: fixed; z-index: 90; inset: 0 auto 0 0; width: min(360px, 88vw); padding: calc(22px + var(--safe-area-top)) 22px 22px; background: var(--color-surface); box-shadow: 18px 0 45px rgba(18, 26, 23, .18); transform: translateX(-105%); transition: transform .24s ease; }
.app-drawer.is-open { transform: translateX(0); }
.app-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 8px 6px 24px; border-bottom: 1px solid var(--color-border); }
.app-drawer__head strong { display: block; font-size: 1.25rem; }
.app-drawer__head span { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: .88rem; }
.menu-close { font-size: 1.8rem; line-height: 1; padding: 0 6px; }
.drawer-nav { display: flex; flex-direction: column; padding-top: 16px; }
.drawer-nav__label { padding: 16px 10px 7px; color: var(--color-text-muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.drawer-nav a { display: flex; align-items: center; gap: 13px; padding: 12px 10px; border-radius: 14px; color: var(--color-text); text-decoration: none; }
.drawer-nav a:hover { background: var(--color-bg); }
.drawer-nav a > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--color-bg); color: var(--color-primary); font-weight: 800; }
.drawer-nav a strong, .drawer-nav a small { display: block; }
.drawer-nav a small { margin-top: 2px; color: var(--color-text-muted); }
.drawer-open { overflow: hidden; }

/* ---------- Startseite / editorial discovery ---------- */

.app-header__motto { display: none; }
.route-start .app-header__motto { display: block; }
.route-start .app-header__title { letter-spacing: .045em; text-transform: uppercase; }
.start-view { width: min(940px, 100%); margin: 0 auto; padding: 6px 0 34px; }
.start-intro { margin: 0 0 18px; }
.start-intro .eyebrow { margin-bottom: 5px; color: var(--color-accent); }
.start-intro h1 { max-width: 680px; margin: 0; font-size: clamp(1.55rem, 5vw, 2.4rem); line-height: 1.15; letter-spacing: -.025em; }
.discovery-host { transition: opacity .14s ease; }
.discovery-host.is-changing { opacity: .18; }
.discovery-loading, .discovery-error { min-height: 360px; display: grid; place-content: center; padding: 28px; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-surface); color: var(--color-text-muted); text-align: center; }
.discovery-error strong, .discovery-error small { display: block; }
.discovery-error small { margin-top: 7px; }
.discovery-card { position: relative; min-height: 390px; overflow: hidden; padding: clamp(24px, 5vw, 44px); border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-surface); box-shadow: 0 10px 34px rgba(36, 31, 24, .055); }
.discovery-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--color-accent); }
.discovery-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.discovery-card__kind { color: var(--color-text-muted); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.discovery-card__lemma { max-width: 100%; margin: 28px 0 14px; font-size: clamp(2.1rem, 9vw, 4.8rem); line-height: .98; letter-spacing: -.055em; overflow-wrap: anywhere; hyphens: auto; }
.discovery-card__lemma.is-long { font-size: clamp(1.85rem, 7.5vw, 3.9rem); }
.discovery-card__hook { max-width: 720px; margin: 0 0 18px; font-family: var(--font-serif); font-size: clamp(1.2rem, 3.6vw, 1.65rem); line-height: 1.42; }
.discovery-card__translation { margin: 0 0 18px; color: var(--color-primary); font-size: 1.02rem; font-weight: 750; line-height: 1.5; }
.discovery-parts { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.discovery-parts__part { padding: 6px 10px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent); font-size: .86rem; font-weight: 750; overflow-wrap: anywhere; }
.discovery-parts__plus { color: var(--color-text-muted); }
.discovery-card__glimpse { max-width: 670px; margin: 18px 0 4px; padding-left: 15px; border-left: 2px solid var(--color-border); color: var(--color-text-muted); font-size: .92rem; line-height: 1.58; }
.discovery-card__details { display: grid; grid-template-rows: 0fr; opacity: 0; }
.discovery-card__details.is-expanded { grid-template-rows: 1fr; margin-top: 30px; opacity: 1; }
.discovery-detail { padding: 20px 0; border-top: 1px solid var(--color-border); }
.discovery-detail__label { display: block; margin-bottom: 10px; color: var(--color-text-muted); font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.discovery-detail p { max-width: 720px; margin: 0; line-height: 1.65; }
.discovery-detail blockquote { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.55; }
.discovery-detail__translation { margin-top: 8px !important; color: var(--color-text-muted); font-size: .9rem; }
.discovery-related { display: flex; flex-wrap: wrap; gap: 7px; }
.discovery-related span { padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 999px; font-size: .85rem; }
.discovery-building-blocks { display: flex; flex-wrap: wrap; gap: 9px; }
.discovery-building-blocks > div { min-width: 120px; padding: 10px 12px; border-radius: 11px; background: var(--color-bg); }
.discovery-building-blocks strong, .discovery-building-blocks small { display: block; }
.discovery-building-blocks small { margin-top: 3px; color: var(--color-text-muted); }
.discovery-card__toggle { display: block; min-height: 44px; margin: 22px 0 0 auto; padding: 9px 0 9px 16px; border: 0; background: transparent; color: var(--color-primary); font: inherit; font-weight: 800; cursor: pointer; }
.another-word { display: block; min-height: 44px; margin: 9px auto 28px; padding: 8px 14px; border: 0; background: transparent; color: var(--color-text-muted); font: inherit; font-weight: 700; cursor: pointer; }
.another-word:hover, .another-word:focus-visible { color: var(--color-primary); }
.another-word:disabled { opacity: .45; cursor: default; }
.start-section { margin: 42px 0; }
.start-section > .section-label { margin-bottom: 5px; color: var(--color-accent); }
.start-section__title { margin: 0 0 15px; font-size: clamp(1.3rem, 3.5vw, 1.75rem); }
.continue-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 24px; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.continue-card strong, .continue-card small { display: block; }
.continue-card strong { font-size: 1.08rem; }
.continue-card small { margin-top: 5px; color: var(--color-text-muted); }
.continue-card > span { color: var(--color-primary); font-weight: 800; white-space: nowrap; }
.start-door-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.start-door { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; min-height: 104px; padding: 17px; border: 1px solid var(--color-border); border-radius: 17px; background: var(--color-surface); color: var(--color-text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.start-door:hover { border-color: var(--color-primary); }
.start-door__symbol { color: var(--color-primary); font-size: 1.35rem; font-weight: 800; }
.start-door__copy { min-width: 0; }
.start-door__copy strong, .start-door__copy small { display: block; }
.start-door__copy small { margin-top: 4px; color: var(--color-text-muted); line-height: 1.35; }
.start-door__arrow { color: var(--color-text-muted); }
.start-door--future { color: var(--color-text-muted); }
.texte-status { margin: 10px 0 0; padding: 10px 13px; border-radius: 10px; background: var(--color-accent-soft); color: var(--color-accent); font-size: .86rem; }
.start-progress { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid var(--color-border); color: var(--color-text-muted); text-decoration: none; font-size: .88rem; }
.start-progress strong { color: var(--color-text); text-align: right; }

@media (min-width: 760px) {
  .start-door-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .start-door { grid-template-columns: 1fr auto; align-content: start; }
  .start-door__symbol { grid-column: 1; }
  .start-door__copy { grid-column: 1 / -1; }
  .start-door__arrow { grid-column: 2; grid-row: 1; }
}

@media (max-width: 480px) {
  .app-header { gap: 7px; padding-inline: 9px; }
  .route-start .app-header__title { font-size: .82rem; letter-spacing: .025em; }
  .app-header__motto { font-size: .65rem; white-space: nowrap; }
  .xp-badge { white-space: nowrap; }
  .discovery-card { min-height: 370px; padding: 24px 21px 24px 25px; border-radius: 20px; }
  .discovery-card__lemma { margin-top: 24px; }
  .start-door { min-height: 116px; padding: 14px 12px; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .start-door__arrow { display: none; }
  .start-door__copy small { font-size: .76rem; }
  .continue-card { align-items: flex-start; flex-direction: column; gap: 14px; }
}

@media (max-width: 350px) {
  .start-door-grid { grid-template-columns: 1fr; }
  .app-header__motto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .discovery-host, .app-drawer, .module-card { transition: none; }
}

/* ---------- Texte L001–L100 ---------- */
.texte-view { width: 100%; margin: 0 auto; padding-bottom: 48px; }
.texte-lesson__header { margin: 0 0 16px; }
.texte-lesson__header h1 { margin: 4px 0 0; font-size: 1.5rem; line-height: 1.2; }
.texte-can-do { margin: 0 0 14px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.texte-can-do p { margin: 5px 0 4px; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.texte-can-do > small { color: var(--color-text-muted); line-height: 1.5; }
.can-do-controls { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.can-do-controls button { min-height: 40px; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border)); border-radius: 999px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.can-do-controls button.is-selected { border-color: var(--color-accent); background: var(--color-accent); color: white; }
.texte-reading { margin-bottom: 14px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.texte-reading > .section-label { margin-bottom: 12px; }
.texte-scene { margin: 18px 0 10px; padding: 12px 15px; border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text-muted); font-style: italic; line-height: 1.55; }
.texte-sentence { border-top: 1px solid var(--color-border); scroll-margin-top: 100px; }
.texte-sentence:last-child { border-bottom: 1px solid var(--color-border); }
.texte-sentence.is-sprechsatz { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary) 55%, transparent); }
.texte-sentence__trigger { display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; gap: 10px; align-items: baseline; width: 100%; min-height: 58px; padding: 14px 12px; border: 0; background: transparent; color: var(--color-text); text-align: left; cursor: pointer; }
.texte-sentence__trigger:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.texte-sentence__number { color: var(--color-text-muted); font-size: .73rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.texte-sentence__text { font-size: 1rem; line-height: 1.5; }
.texte-sentence__speak { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); font-size: .68rem; font-weight: 800; }
.texte-sentence__details { margin: 0 12px 18px 46px; padding: 16px 18px; border-radius: 13px; background: var(--color-bg); }
.texte-sentence__translation { margin: 0; color: var(--color-primary); font-weight: 700; line-height: 1.55; }
.texte-note { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--color-border); }
.texte-note__label { display: block; margin-bottom: 6px; color: var(--color-accent); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.texte-note__trigger { padding: 0; border: 0; background: transparent; color: var(--color-accent); cursor: pointer; font: inherit; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.texte-note p { margin: 0; white-space: pre-wrap; line-height: 1.62; }
.texte-connections { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--color-border); }
.texte-connections .texte-note__label { width: 100%; }
.texte-connections a, .texte-source-link { color: var(--color-accent); font-weight: 750; }
.texte-sentence__search { display: inline-block; margin-top: 14px; color: var(--color-text-muted); font-size: .8rem; text-decoration: none; }
.texte-block { margin: 0 0 14px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-card); }
.texte-block h2 { margin: 5px 0 8px; font-size: 1rem; }
.texte-block__intro { margin: 0 0 15px; color: var(--color-text-muted); font-size: .9rem; }
.sprechsaetze-list { display: grid; gap: 8px; }
.sprechsaetze-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 68px; padding: 13px 15px; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-surface); color: var(--color-text); text-align: left; cursor: pointer; }
.sprechsaetze-item:hover { border-color: var(--color-primary); }
.sprechsaetze-item > span:first-child { min-width: 0; }
.sprechsaetze-item small, .sprechsaetze-item strong { display: block; }
.sprechsaetze-item small { margin-bottom: 3px; color: var(--color-text-muted); }
.sprechsaetze-item strong { line-height: 1.4; }
.sprechsaetze-item__action { flex: none; color: var(--color-primary); font-size: .8rem; font-weight: 800; }
.sprechsaetze-item.is-practiced { border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border)); }
.sprechsaetze-item.is-practiced .sprechsaetze-item__action { color: var(--color-accent); }
.texte-teacher { margin: 0 0 16px; padding: 6px 0 6px 18px; border: none; border-left: 3px solid var(--color-primary); border-radius: 0; background: none; color: var(--color-text); }
.texte-teacher .section-label { color: var(--color-primary); opacity: 1; }
.texte-teacher p { margin: 0 0 8px; white-space: pre-wrap; font-family: var(--font-serif); line-height: 1.6; }
.texte-teacher small { display: block; color: var(--color-text-muted); opacity: 1; white-space: pre-wrap; font-size: .9rem; font-style: italic; line-height: 1.55; }
.texte-review__section { margin: 9px 0; padding: 0 18px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.texte-review__section summary { margin: 0 -18px; padding: 15px 18px; cursor: pointer; font-weight: 800; }
.texte-review__section--transfer { border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border)); }
.texte-review__summary--transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; }
.texte-review__summary--transfer > span { color: var(--color-primary); letter-spacing: .035em; }
.texte-review__summary--transfer > small { color: var(--color-text-muted); font-size: .7rem; font-weight: 700; letter-spacing: 0; }
.texte-review__section--transfer[open] > .texte-review__summary--transfer { border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); }
.texte-review__content { padding: 2px 0 16px; }
.texte-review__content p { margin: 8px 0; white-space: pre-wrap; line-height: 1.55; }
.texte-review__content p:has(.texte-source-link:only-child) { margin-top: 15px; }
.texte-review-quiz > p:first-child { color: var(--color-text-muted); }
.texte-review-question { min-width: 0; margin: 16px 0; padding: 0; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-bg); overflow: hidden; }
.texte-review-question legend { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 14px 15px 10px; font-weight: 750; line-height: 1.4; }
.texte-review-question__number { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-size: .76rem; font-weight: 900; }
.texte-review-choices { display: grid; gap: 7px; padding: 3px 12px 12px; }
.texte-review-choice { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.texte-review-choice:hover { border-color: var(--color-accent); }
.texte-review-choice__label { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: var(--color-bg); color: var(--color-text-muted); font-size: .76rem; font-weight: 900; }
.texte-review-choice.is-correct { border-color: var(--color-accent); background: var(--color-accent-soft); }
.texte-review-choice.is-correct .texte-review-choice__label { background: var(--color-accent); color: #fff; }
.texte-review-choice.is-wrong { border-color: var(--color-warn); background: var(--color-warn-soft); }
.texte-review-choice.is-wrong .texte-review-choice__label { background: var(--color-warn); color: #fff; }
.texte-review-question__feedback { min-height: 1.4em; margin: 0 !important; padding: 0 15px 12px; color: var(--color-warn); font-size: .82rem; font-weight: 800; }
.texte-review-question__feedback.is-correct { color: var(--color-accent); }
.texte-transfer__instruction { margin: 12px 0 !important; color: var(--color-text-muted); font-size: .86rem; }
.texte-transfer__pool { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; padding: 12px; border: 1px dashed var(--color-accent); border-radius: 13px; background: var(--color-accent-soft); }
.texte-transfer__chip { padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: .86rem; line-height: 1.35; text-align: left; cursor: grab; box-shadow: var(--shadow-card); }
.texte-transfer__chip.is-selected { border-color: var(--color-primary); outline: 2px solid color-mix(in srgb, var(--color-primary) 25%, transparent); }
.texte-transfer__chip.is-placed { width: 100%; border-color: var(--color-accent); background: var(--color-accent-soft); cursor: default; box-shadow: none; }
.texte-transfer__targets { display: grid; gap: 10px; }
.texte-transfer__target { min-height: 88px; padding: 13px; border: 1px dashed var(--color-border); border-radius: 12px; background: var(--color-bg); cursor: pointer; transition: border-color .16s, background .16s; }
.texte-transfer__target:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.texte-transfer__target.is-correct { border-style: solid; border-color: var(--color-accent); }
.texte-transfer__target.is-wrong { border-color: var(--color-warn); background: var(--color-warn-soft); }
.texte-transfer__prompt { display: block; margin-bottom: 8px; color: var(--color-text); font-size: .78rem; font-weight: 800; letter-spacing: .015em; }
.texte-transfer__drop-hint { display: block; color: var(--color-text-muted); font-size: .78rem; font-style: italic; }
.texte-transfer__target.is-correct .texte-transfer__drop-hint { display: none; }
.texte-transfer__feedback { min-height: 1.45em; margin: 12px 0 0 !important; color: var(--color-text-muted); font-size: .82rem; font-weight: 800; }
.texte-transfer__feedback.is-correct { color: var(--color-accent); }
@media (min-width: 680px) {
  .texte-transfer__targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.texte-review-footer { margin: 18px 0 2px; padding: 12px 14px; border-left: 3px solid var(--color-accent); border-radius: 0 10px 10px 0; background: var(--color-accent-soft); color: var(--color-text-muted); }
.texte-review-footer__label { display: block; margin-bottom: 3px; color: var(--color-accent); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.texte-review-footer p { margin: 0 !important; font-size: .84rem; line-height: 1.5; }
.texte-certainty__intro { color: var(--color-text-muted); }
.texte-certainty__axis { display: flex; justify-content: space-between; gap: 16px; margin: 16px 0 8px; color: var(--color-text-muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.texte-certainty__scale { display: grid; gap: 7px; }
.texte-certainty__step { display: grid; grid-template-columns: 26px minmax(120px, auto) minmax(60px, 1fr); align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.texte-certainty__step:hover, .texte-certainty__step.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); }
.texte-certainty__rank { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--color-bg); color: var(--color-text-muted); font-size: .7rem; font-weight: 900; }
.texte-certainty__term { font-weight: 800; }
.texte-certainty__bar { display: block; width: var(--certainty-width); height: 7px; justify-self: start; border-radius: 999px; background: var(--color-accent); opacity: .82; }
.texte-certainty__example { display: grid; gap: 5px; min-height: 70px; margin-top: 12px; padding: 13px 14px; border-radius: 11px; background: var(--color-bg); color: var(--color-text-muted); }
.texte-certainty__example strong { color: var(--color-text); font-size: .95rem; }
.texte-certainty__source { color: var(--color-accent); font-size: .7rem; font-weight: 900; letter-spacing: .05em; }
@media (max-width: 480px) {
  .texte-certainty__step { grid-template-columns: 24px minmax(0, 1fr); }
  .texte-certainty__bar { grid-column: 2; width: var(--certainty-width); }
}
.texte-guided-transfer__context { margin: 6px 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--color-accent-soft); }
.texte-guided-transfer__eyebrow { display: block; margin-bottom: 5px; color: var(--color-accent); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.texte-guided-transfer__context p { margin: 2px 0 !important; color: var(--color-text); font-size: .9rem; }
.texte-guided-transfer__steps { position: relative; display: grid; gap: 9px; }
.texte-guided-transfer__steps::before { content: ""; position: absolute; top: 25px; bottom: 25px; left: 20px; width: 1px; background: var(--color-border); }
.texte-guided-transfer__step { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: start; padding: 12px 13px 12px 0; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.texte-guided-transfer__number { z-index: 1; display: grid; place-items: center; width: 29px; height: 29px; margin: 2px 0 0 6px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: .68rem; font-weight: 900; }
.texte-guided-transfer__copy { min-width: 0; }
.texte-guided-transfer__action { display: block; margin-bottom: 4px; color: var(--color-text-muted); font-size: .73rem; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; }
.texte-guided-transfer__copy strong { display: block; color: var(--color-text); font-size: 1rem; line-height: 1.42; }
.texte-phrase-bank__head { margin: 8px 0 14px; }
.texte-phrase-bank__label { display: block; color: var(--color-accent); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.texte-phrase-bank__head h3 { margin: 4px 0 2px; color: var(--color-text); font-size: 1.05rem; }
.texte-phrase-bank__head p { margin: 0 !important; color: var(--color-text-muted); font-size: .82rem; }
.texte-phrase-bank__grid { display: grid; gap: 8px; }
.texte-phrase-bank__item { display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; align-items: center; gap: 9px; width: 100%; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); color: var(--color-text); font: inherit; line-height: 1.4; text-align: left; cursor: pointer; }
.texte-phrase-bank__item:hover { border-color: var(--color-accent); }
.texte-phrase-bank__item.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); }
.texte-phrase-bank__index { color: var(--color-text-muted); font-size: .68rem; font-weight: 900; }
.texte-phrase-bank__check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--color-text-muted); font-weight: 900; }
.texte-phrase-bank__item.is-selected .texte-phrase-bank__check { background: var(--color-accent); color: #fff; }
.texte-phrase-bank__status { margin: 10px 0 0 !important; color: var(--color-text-muted); font-size: .78rem; font-weight: 800; text-align: right; }
.texte-phrase-bank__status.is-complete { color: var(--color-accent); }
@media (min-width: 680px) {
  .texte-phrase-bank__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.texte-information-task__head { margin: 18px 0 12px; }
.texte-information-task__eyebrow, .texte-narrative-transfer__eyebrow { display: block; color: var(--color-accent); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.texte-information-task__head h3, .texte-narrative-transfer__head h3 { margin: 4px 0 3px; font-size: 1.05rem; }
.texte-information-task__head p, .texte-narrative-transfer__head p { margin: 0 !important; color: var(--color-text-muted); font-size: .84rem; }
.texte-information-task__source { margin: 6px 0 20px; padding: 17px 18px; border-left: 4px solid var(--color-primary); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); }
.texte-information-task__source p { margin: 7px 0 0 !important; color: var(--color-text); font-size: 1rem; line-height: 1.65; }
.texte-information-task__questions { display: grid; gap: 8px; }
.texte-information-task__question { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 10px; width: 100%; padding: 12px 13px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.texte-information-task__question:hover, .texte-information-task__question.is-open, .texte-information-task__question.is-found { border-color: var(--color-accent); }
.texte-information-task__question.is-found { background: var(--color-accent-soft); }
.texte-information-task__number, .texte-information-task__check { color: var(--color-text-muted); font-size: .7rem; font-weight: 900; }
.texte-information-task__check { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; }
.texte-information-task__question.is-found .texte-information-task__check { background: var(--color-accent); color: #fff; }
.texte-information-task__qa { display: grid; gap: 4px; min-width: 0; }
.texte-information-task__qa strong, .texte-information-task__question > strong { line-height: 1.45; }
.texte-information-task__answer { display: none; color: var(--color-accent); font-weight: 800; line-height: 1.45; }
.texte-information-task__question.is-open .texte-information-task__answer { display: block; }
.texte-information-task__reveal { color: var(--color-accent); font-size: 1.15rem; font-weight: 500; text-align: center; }
.texte-information-task__status { margin: 10px 0 0 !important; color: var(--color-text-muted); font-size: .78rem; font-weight: 800; text-align: right; }
.texte-information-task__status.is-complete { color: var(--color-accent); }
.texte-narrative-transfer__head { margin: 7px 0 18px; }
.texte-narrative-transfer__timeline { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.texte-narrative-transfer__timeline::before { content: ""; position: absolute; top: 19px; bottom: 19px; left: 12px; width: 2px; background: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); }
.texte-narrative-transfer__timeline li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 11px; min-height: 42px; }
.texte-narrative-transfer__timeline li > span { z-index: 1; width: 12px; height: 12px; margin-left: 7px; border: 3px solid var(--color-surface); border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.texte-narrative-transfer__timeline strong { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); font-size: .9rem; line-height: 1.4; }
.texte-narrative-transfer__toolbox { margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--color-accent-soft); }
.texte-narrative-transfer__connectors { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.texte-narrative-transfer__connectors span { padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: .82rem; font-weight: 800; }
.texte-narrative-transfer__interaction { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; margin-top: 12px; padding: 13px 14px; border: 1px dashed var(--color-primary); border-radius: 12px; }
.texte-narrative-transfer__icon { color: var(--color-primary); font-size: 1.35rem; font-weight: 900; }
.texte-narrative-transfer__interaction strong { display: block; font-size: .86rem; }
.texte-narrative-transfer__interaction p { margin: 3px 0 0 !important; color: var(--color-text-muted); font-size: .82rem; line-height: 1.45; }
.texte-repair-transfer__eyebrow { display: block; color: var(--color-accent); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.texte-repair-transfer__situation { margin: 7px 0 18px; padding: 15px 16px; border-radius: 12px; background: var(--color-accent-soft); }
.texte-repair-transfer__situation p { margin: 5px 0 7px !important; color: var(--color-text-muted); font-size: .82rem; }
.texte-repair-transfer__situation blockquote { margin: 0; color: var(--color-text); font-size: 1.12rem; font-weight: 800; line-height: 1.45; }
.texte-repair-transfer__situation small { display: block; margin-top: 8px; color: var(--color-accent); font-weight: 800; }
.texte-repair-transfer__flow { display: grid; gap: 9px; }
.texte-repair-transfer__step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 13px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.texte-repair-transfer__number { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: .68rem; font-weight: 900; }
.texte-repair-transfer__role { display: block; color: var(--color-accent); font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.texte-repair-transfer__step small { display: block; margin: 3px 0 5px; color: var(--color-text-muted); }
.texte-repair-transfer__step strong { display: block; color: var(--color-text); font-size: 1rem; line-height: 1.45; }
.texte-repair-transfer__pause { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 11px; padding: 5px 13px; color: var(--color-text-muted); font-size: .78rem; }
.texte-repair-transfer__pause > span { color: var(--color-accent); font-size: 1.1rem; text-align: center; }
.texte-action-script__context { margin: 7px 0 16px; padding: 14px 16px; border-radius: 12px; background: var(--color-accent-soft); }
.texte-action-script__eyebrow { display: block; color: var(--color-accent); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.texte-action-script__context p { margin: 4px 0 !important; color: var(--color-text-muted); font-size: .84rem; }
.texte-action-script__context > strong { display: block; margin-top: 6px; color: var(--color-text); font-size: 1rem; line-height: 1.45; }
.texte-action-script__head { margin: 15px 0 10px; }
.texte-action-script__head p { margin: 3px 0 0 !important; color: var(--color-text-muted); font-size: .82rem; }
.texte-action-script__steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.texte-action-script__step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 13px 12px 8px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); }
.texte-action-script__number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary); font-size: .68rem; font-weight: 900; }
.texte-action-script__action { display: block; margin-bottom: 4px; color: var(--color-text-muted); font-size: .7rem; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.texte-action-script__step strong { display: block; color: var(--color-text); font-size: .98rem; line-height: 1.45; }
@media (min-width: 680px) {
  .texte-action-script__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.texte-memory__head { margin: 7px 0 15px; }
.texte-memory__eyebrow { display: block; color: var(--color-accent); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.texte-memory__head h3 { margin: 4px 0 3px; font-size: 1.05rem; }
.texte-memory__head p { margin: 0 !important; color: var(--color-text-muted); font-size: .82rem; }
.texte-memory__grid { display: grid; gap: 8px; }
.texte-memory__card { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; padding: 12px 13px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); }
.texte-memory__number { color: var(--color-text-muted); font-size: .68rem; font-weight: 900; }
.texte-memory__card > p { margin: 0 !important; color: var(--color-text); font-size: .94rem; line-height: 1.5; }
.texte-memory__card > a { grid-column: 2; display: flex; justify-content: space-between; gap: 10px; color: var(--color-text-muted); font-size: .7rem; text-decoration: none; }
.texte-memory__card > a strong { color: var(--color-accent); }
.texte-review__content--structured { display: grid; gap: 7px; }
.texte-review__content--structured > p { margin: 0 !important; }
.texte-review__instruction { margin-top: 8px !important; color: var(--color-accent); font-size: .7rem; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; }
.texte-review__line-group { display: grid; gap: 6px; padding: 11px 13px; border-left: 3px solid color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); border-radius: 0 10px 10px 0; background: var(--color-bg); }
.texte-review__line-group p { margin: 0 !important; line-height: 1.48; }
.texte-review__content--structured .is-relation { color: var(--color-primary); font-weight: 800; }
.texte-review__content--structured .is-gap { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-bg); font-family: inherit; }
.texte-review__reference { margin-top: 9px !important; font-size: .72rem; font-weight: 850; }
@media (min-width: 680px) {
  .texte-memory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.texte-l056__head { margin: 7px 0 14px; }
.texte-l056__label { display: block; color: var(--color-accent); font-size: .68rem; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }
.texte-l056__head h3, .texte-l056__scenario h3 { margin: 4px 0 0; font-size: 1.05rem; line-height: 1.35; }
.texte-l056__grid, .texte-l056__pattern-list, .texte-l056__conditions, .texte-l056__production { display: grid; gap: 8px; }
.texte-l056__card { padding: 12px 13px; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface); }
.texte-l056__card > strong { display: block; margin: 4px 0 7px; line-height: 1.4; }
.texte-l056__card > p { margin: 4px 0 !important; line-height: 1.48; }
.texte-l056__card.is-solution > p { margin-top: 10px !important; padding-top: 9px; border-top: 1px solid var(--color-border); color: var(--color-accent); font-weight: 800; }
.texte-l056__card.is-pattern { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr); gap: 4px 16px; align-items: center; }
.texte-l056__card.is-pattern .texte-l056__label { grid-column: 1 / -1; }
.texte-l056__card.is-pattern > strong { margin: 0; color: var(--color-text-muted); font-size: .82rem; }
.texte-l056__card.is-pattern > p { color: var(--color-text); font-weight: 750; }
.texte-l056__card.is-ob { border-left: 4px solid var(--color-primary); }
.texte-l056__card.is-w { border-left: 4px solid var(--color-accent); }
.texte-l056__conditions { counter-reset: conditions; }
.texte-l056__card.is-condition { border-left: 4px solid var(--color-primary); }
.texte-l056__facts { display: grid; grid-template-columns: minmax(100px, .55fr) minmax(0, 1.45fr); margin: 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.texte-l056__facts dt, .texte-l056__facts dd { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.texte-l056__facts dt { background: var(--color-bg); color: var(--color-text-muted); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.texte-l056__facts dd { font-weight: 750; }
.texte-l056__facts > :nth-last-child(-n+2) { border-bottom: 0; }
.texte-l056__before-after { display: grid; gap: 9px; }
.texte-l056__card.is-before, .texte-l056__card.is-current { border-top: 4px solid var(--color-text-muted); }
.texte-l056__card.is-after, .texte-l056__card.is-new { border-top: 4px solid var(--color-accent); }
.texte-l056__card.is-question { margin-top: 10px; border-style: dashed; background: var(--color-accent-soft); }
.texte-l056__decision-scale { display: grid; gap: 8px; }
.texte-l056__decision-scale .texte-l056__card { position: relative; padding-left: 17px; }
.texte-l056__decision-scale .texte-l056__card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 11px 0 0 11px; }
.texte-l056__decision-scale .is-yes::before { background: var(--color-accent); }
.texte-l056__decision-scale .is-maybe::before { background: var(--color-primary); }
.texte-l056__decision-scale .is-no::before { background: var(--color-warn); }
.texte-l056__summary { margin: 0; padding: 17px 19px; border-left: 4px solid var(--color-primary); border-radius: 0 12px 12px 0; background: var(--color-bg); color: var(--color-text); font-size: .96rem; line-height: 1.65; }
.texte-l056__card.is-perspective { border-top: 3px solid var(--color-primary); }
.texte-l056__scenario { margin: 7px 0 15px; padding: 15px 16px; border-radius: 12px; background: var(--color-accent-soft); }
.texte-l056__scenario p { margin: 6px 0 10px !important; color: var(--color-text-muted); }
.texte-l056__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.texte-l056__chips span { padding: 6px 9px; border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: .78rem; font-weight: 800; }
.texte-l056__card.is-prompt { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.texte-l056__card.is-prompt .texte-l056__label { margin: 0; }
.texte-l056__card.is-prompt > p { color: var(--color-text); font-weight: 800; }
@media (min-width: 680px) {
  .texte-l056__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .texte-l056__before-after { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .texte-l056__decision-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .texte-l056__card.is-pattern, .texte-l056__card.is-prompt { grid-template-columns: 1fr; }
}
.texte-complete { display: block; min-height: 46px; margin: 24px 0 0 auto; }
.texte-back-to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom)); z-index: 8; display: grid; grid-template-columns: 24px auto; align-items: center; gap: 6px; min-height: 44px; padding: 8px 13px 8px 9px; border: 1px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); border-radius: 999px; background: var(--color-surface); color: var(--color-primary); font: inherit; box-shadow: 0 8px 24px rgba(36, 31, 24, .16); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .16s, transform .16s; }
.texte-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.texte-back-to-top > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 900; }
.texte-back-to-top strong { font-size: .76rem; }
@media (min-width: 720px) {
  .texte-back-to-top { bottom: 24px; }
}
@media (max-width: 480px) {
  .texte-review__summary--transfer { grid-template-columns: 1fr; gap: 2px; }
  .texte-back-to-top { right: 10px; padding-right: 9px; }
  .texte-back-to-top strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .texte-back-to-top { transition: none; }
}
.texte-next { display: inline-block; margin: 14px 0 0; text-decoration: none; }
.texte-overview-summary { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 20px 0 24px; padding: 18px 20px; border-radius: 15px; background: var(--color-accent-soft); }
.texte-overview-summary strong { font-size: 1.3rem; color: var(--color-accent); }
.texte-overview-summary span { color: var(--color-text-muted); }
.texte-overview-summary a { color: var(--color-accent); font-weight: 800; text-decoration: none; }
.texte-lesson-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.texte-lesson-card { display: flex; flex-direction: column; min-height: 180px; padding: 18px; border: 1px solid var(--color-border); border-radius: 15px; background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.texte-lesson-card.is-current { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.texte-lesson-card__id { color: var(--color-text-muted); font-size: .73rem; font-weight: 800; }
.texte-lesson-card strong { margin: 9px 0 6px; font-size: 1.08rem; }
.texte-lesson-card small { color: var(--color-text-muted); line-height: 1.4; }
.texte-lesson-card__foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.texte-lesson-card__state { color: var(--color-primary); font-size: .8rem; font-weight: 800; }
.texte-progress-panel { margin-bottom: 24px; padding: 20px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); }
.texte-progress-panel__head { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.texte-progress-panel__head h2 { margin: 3px 0 0; }
.texte-progress-panel__head a { color: var(--color-accent); font-weight: 800; text-decoration: none; }
.texte-progress-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.texte-progress-stats span { padding: 12px; border-radius: 11px; background: var(--color-bg); }
.texte-progress-stats strong, .texte-progress-stats small { display: block; }
.texte-progress-stats strong { color: var(--color-accent); font-size: 1.25rem; }
.texte-progress-stats small { margin-top: 2px; color: var(--color-text-muted); }
.stat-label { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px; }
.dein-lernweg__position { display: block; margin-top: 10px; font-size: 1.05rem; color: var(--color-accent); }
.dein-lernweg__title { margin-top: 2px; color: var(--color-text-muted); }
.dein-lernweg__bar { margin-top: 14px; }
.search-result--texte { text-decoration: none; }
.search-result__translation { display: block; margin-top: 4px; color: var(--color-primary); font-size: .82rem; }

@media (max-width: 620px) {
  .texte-lesson-grid { grid-template-columns: 1fr; }
  .texte-overview-summary { grid-template-columns: auto 1fr; }
  .texte-overview-summary a { grid-column: 1 / -1; }
  .texte-progress-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .texte-sentence__trigger { grid-template-columns: 27px minmax(0, 1fr) 24px; padding-inline: 8px; }
  .texte-sentence__details { margin-left: 35px; padding: 14px; }
  .sprechsaetze-item { align-items: flex-start; flex-direction: column; gap: 8px; }
  .texte-progress-panel__head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .app-nav .nav-link { font-size: .76rem; padding-inline: 2px; }
}

.extra-view { width: min(980px, 100%); margin: 0 auto; padding-bottom: 48px; }
.eyebrow { display: block; margin-bottom: 6px; color: var(--color-primary); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--color-text-muted); text-decoration: none; font-weight: 700; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.module-card { display: flex; gap: 18px; padding: 22px; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); color: var(--color-text); text-decoration: none; box-shadow: 0 7px 24px rgba(25, 44, 37, .05); transition: transform .18s ease, border-color .18s ease; }
.module-card:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.module-card__icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: color-mix(in srgb, var(--color-primary) 12%, white); color: var(--color-primary); font-size: 1.7rem; }
.module-card__body { flex: 1; min-width: 0; }
.module-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.module-card h2 { margin: 0; font-size: 1.25rem; min-width: 0; }
.module-card p { color: var(--color-text-muted); }
.module-card__count { color: var(--color-text-muted); font-size: .76rem; white-space: nowrap; flex-shrink: 0; }
.module-card__action { color: var(--color-primary); font-weight: 800; }

.lex-format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 22px 0 14px; }
.lex-format-grid[hidden] { display: none; }
.lex-back-button { padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.lex-back-button[hidden] { display: none; }
.lex-format-card { display: flex; gap: 14px; padding: 18px; text-align: left; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-surface); color: var(--color-text); cursor: pointer; font: inherit; transition: transform .18s ease, border-color .18s ease; }
.lex-format-card:not(.lex-format-card--locked):hover { transform: translateY(-2px); border-color: var(--color-primary); }
.lex-format-card--locked { cursor: default; opacity: .55; }
.lex-format-card__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--color-primary) 12%, white); color: var(--color-primary); font-family: var(--font-sans); font-size: .82rem; font-weight: 800; letter-spacing: -.02em; }
.lex-format-card__body { flex: 1; min-width: 0; }
.lex-format-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lex-format-card h2 { margin: 0; font-size: 1.05rem; }
.lex-format-card p { margin: 4px 0 0; color: var(--color-text-muted); font-size: .85rem; }
.lex-format-card__soon { color: var(--color-text-muted); font-size: .72rem; font-weight: 800; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }

.geg-mode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 14px; }
.mode-card { min-height: 100px; padding: 15px; text-align: left; border: 1px solid var(--color-border); border-radius: 15px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.mode-card strong, .mode-card span { display: block; }
.mode-card span { margin-top: 6px; color: var(--color-text-muted); font-size: .8rem; line-height: 1.35; }
.mode-card.is-active { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.filter-panel { margin-bottom: 18px; padding: 0 18px; border: 1px solid var(--color-border); border-radius: 15px; background: var(--color-surface); }
.filter-panel summary { display: flex; justify-content: space-between; gap: 12px; padding: 15px 0; cursor: pointer; font-weight: 700; }
.filter-panel summary strong { color: var(--color-text-muted); font-size: .82rem; }
.filter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0 0 17px; }
.geg-filter span { display: block; margin-bottom: 5px; color: var(--color-text-muted); font-size: .75rem; font-weight: 700; }
.geg-filter select { width: 100%; padding: 9px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); color: var(--color-text); }
.geg-exercise-host, .loading-card { min-height: 360px; padding: 24px; border: 1px solid var(--color-border); border-radius: 20px; background: var(--color-surface); box-shadow: 0 7px 24px rgba(25, 44, 37, .05); }
.geg-exercise-host button, .geg-exercise-host input { font-family: var(--font-sans); }
.exercise-progress { margin-bottom: 22px; color: var(--color-text-muted); font-size: .8rem; font-weight: 700; }
.geg-prompt { text-align: center; }
.geg-prompt span, .geg-prompt strong { display: block; }
.geg-prompt span { color: var(--color-text-muted); }
.geg-prompt strong { margin: 12px 0 22px; font-size: clamp(1.7rem, 5vw, 2.8rem); }
.context-note { display: flex; flex-direction: column; gap: 3px; width: fit-content; max-width: 560px; margin: -8px auto 20px; padding: 9px 13px; border-radius: 11px; background: #fff6dc; color: #765c17; font-size: .8rem; }
.geg-task { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.geg-answer { padding: 18px 26px; border-radius: 15px; background: var(--color-bg); color: var(--color-primary); font-size: 1.65rem; font-weight: 800; }
.primary-btn, .secondary-btn { padding: 11px 18px; border-radius: 12px; font-weight: 800; cursor: pointer; }
.primary-btn { border: 1px solid var(--color-primary); background: var(--color-primary); color: white; }
.secondary-btn { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); }
.self-check { display: flex; gap: 9px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(150px, 260px)); gap: 10px; }
.choice-grid--wide { width: min(760px, 100%); grid-template-columns: repeat(2, minmax(240px, 1fr)); }

.lex-translation-reveal { display: grid; justify-items: center; gap: 8px; margin: -8px 0 4px; }
.lex-translation-toggle { padding: 6px 10px; font-size: .78rem; }
.lex-translation { max-width: 620px; margin: 0; color: var(--color-text-muted); font-size: .9rem; line-height: 1.5; text-align: center; }
.lex-translation[hidden] { display: none; }
.choice-grid button, .matching-column button { padding: 13px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); color: var(--color-text); cursor: pointer; font-weight: 700; }
.choice-grid button.is-correct, .matching-column button.is-solved { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.choice-grid button.is-wrong, .matching-column button.is-wrong { border-color: var(--color-warn); background: var(--color-warn-soft); color: var(--color-warn); }
.strict-input { width: min(420px, 100%); padding: 13px 15px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg); color: var(--color-text); font-size: 1rem; }
.answer-feedback { font-weight: 800; }.answer-feedback.is-correct { color: var(--color-accent); }.answer-feedback.is-wrong { color: var(--color-warn); }
.matching-task { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.matching-column { display: flex; flex-direction: column; gap: 9px; }
.matching-column button.is-selected { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.word-mask { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 2px 0 8px; font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 800; letter-spacing: .04em; }
.word-mask__letter { min-width: .8em; text-align: center; }
.word-mask__separator { min-width: .45em; color: var(--color-text-muted); }
.session-result { display: grid; place-items: center; text-align: center; padding-top: 40px; }
.session-result__icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: color-mix(in srgb, var(--color-primary) 12%, white); color: var(--color-primary); font-size: 2rem; }

@media (max-width: 760px) {
  .geg-mode-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .app-header__admin-link { display: none; }
}
@media (max-width: 480px) {
  .choice-grid { grid-template-columns: 1fr; width: 100%; }
  .matching-task { gap: 9px; }
  .matching-column button { padding: 11px 7px; font-size: .85rem; }
  .geg-exercise-host { padding: 18px 14px; }
}

/* ---------- Station (curricular layer between lessons) ---------- */
.station-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-3) 0 var(--space-6); }
.station-nav__link { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-decoration: none; min-width: 0; }
.station-nav__link--next { text-align: right; align-items: flex-end; }
.station-nav__link span:first-child { color: var(--color-text-muted); font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.station-nav__link strong { font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.station-nav__link:hover { border-color: var(--color-primary); }

.texte-lesson-card--station { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)); }
.texte-lesson-card--station .texte-lesson-card__id { color: var(--color-primary); }

.station-view { max-width: 720px; margin: 0 auto; padding-bottom: var(--space-12); overflow-wrap: anywhere; }
.station-view p { white-space: pre-line; }
.station-hero { margin: var(--space-6) 0 var(--space-12); padding: var(--space-8) var(--space-6); border: 1px solid var(--color-border); border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)), var(--color-surface)); text-align: center; }
.station-hero .eyebrow { text-align: center; }
.station-hero__progress { display: block; margin: -2px 0 var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.station-hero h1 { margin: var(--space-1) 0 var(--space-2); font-family: var(--font-serif); font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.15; }
.station-hero__subtitle { margin: 0 auto var(--space-6); max-width: 460px; color: var(--color-text-muted); font-size: 1.02rem; }
.station-hero__intro { max-width: 520px; margin: 0 auto; text-align: left; }
.station-hero__intro p { margin: 0 0 var(--space-2); font-family: var(--font-serif); line-height: 1.6; font-size: 1.02rem; }
.station-hero__intro-pt { max-width: 520px; margin: var(--space-4) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .9rem; line-height: 1.6; text-align: left; }

.station-group-divider { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-12) 0 var(--space-6); color: var(--color-text-muted); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.station-group-divider::before, .station-group-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.station-module { margin: 0 0 var(--space-8); }
.station-module__head { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); }
.station-module__number { flex: none; font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; color: color-mix(in srgb, var(--color-primary) 45%, var(--color-text-muted)); line-height: 1; }
.station-module__head h2 { margin: 0; font-size: 1.25rem; }
.station-module__subtitle { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: .92rem; }
.station-module__body { display: grid; gap: var(--space-4); padding-left: 2px; }

.station-note { margin: 0; color: var(--color-text-muted); font-size: .86rem; line-height: 1.5; }
.station-closing { margin: var(--space-1) 0 0; font-weight: 700; font-style: italic; color: var(--color-text); }

.station-scenario { display: grid; gap: var(--space-2); }
.station-scenario > .station-note { font-weight: 800; letter-spacing: .02em; }
.station-reveal { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.station-reveal__prompt p { margin: 0 0 var(--space-1); line-height: 1.5; }
.station-reveal__attempt { margin-top: var(--space-2); min-height: 44px; }
.station-reveal__toggle { margin-top: var(--space-2); }
.station-reveal__answer { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }
.station-reveal__model { margin: 0; color: var(--color-accent); font-weight: 700; line-height: 1.5; }
.station-answer-list { margin: 0; padding-left: 20px; color: var(--color-accent); font-weight: 700; line-height: 1.6; }

.station-particle-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.station-particle-card { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: 999px; font-family: var(--font-serif); font-weight: 700; letter-spacing: .02em; }
.station-particle-grid.station-particle-grid--wide { display: grid; gap: var(--space-2); }

.station-progression { display: grid; gap: var(--space-1); }
.station-progression__line { margin: 0; line-height: 1.5; }
.station-progression__arrow { color: var(--color-text-muted); }
.station-subblock { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: grid; gap: var(--space-3); }
.station-subblock__label { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-accent); }
.station-fields { display: grid; gap: var(--space-2); }
.station-field { display: grid; gap: var(--space-1); }
.station-contrast { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg); }
.station-example-list { display: grid; gap: var(--space-1); }

.station-cue, .station-cue-task { display: grid; gap: var(--space-2); }

.station-chat { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.station-chat__timestamp { text-align: center; margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: .74rem; font-weight: 800; letter-spacing: .06em; }
.station-chat__thread { display: grid; gap: var(--space-2); }
.station-chat__bubble { max-width: 78%; padding: var(--space-2) var(--space-3); border-radius: 15px; line-height: 1.4; }
.station-chat__bubble.is-them { justify-self: start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 4px; }
.station-chat__bubble.is-you { justify-self: end; background: var(--color-primary); color: #fff; border-bottom-right-radius: 4px; }

.station-timeline { position: relative; display: grid; gap: var(--space-6); padding-left: 26px; }
.station-timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; width: 1px; background: var(--color-border); }
.station-timeline__moment { position: relative; }
.station-timeline__moment::before { content: ""; position: absolute; top: 6px; left: -26px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); }
.station-timeline__time { margin-bottom: var(--space-1); color: var(--color-primary); font-size: .78rem; font-weight: 800; }
.station-timeline__beats { margin: var(--space-1) 0 var(--space-2); padding-left: 18px; color: var(--color-text-muted); font-size: .88rem; line-height: 1.55; }

.station-attempt { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: grid; gap: var(--space-2); }
.station-attempt__prompt { margin: 0; font-weight: 700; }
.station-attempt__input { min-height: 44px; }
.station-attempt__followups { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.station-attempt__feedback { color: var(--color-accent); font-size: .82rem; font-weight: 700; }

.station-matching__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.station-matching__col { display: grid; gap: var(--space-2); }
.station-matching__feedback { margin: var(--space-3) 0 0; font-weight: 800; color: var(--color-text-muted); }
.station-matching__feedback.is-correct { color: var(--color-accent); }
.station-matching__helper { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-accent-soft); }
@media (max-width: 560px) { .station-matching__grid { grid-template-columns: 1fr; } }

.station-function-groups { display: grid; gap: var(--space-4); }
.station-function-group { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg); }
.station-function-group strong { display: block; margin-bottom: var(--space-2); color: var(--color-accent); }

.station-pairs__grid { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.station-pairs__row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: 10px; }
.station-question__prompt { margin: 0 0 var(--space-1); font-weight: 700; }

.station-experiment-part { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: grid; gap: var(--space-2); }
.station-review-footer { margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-accent); background: var(--color-accent-soft); border-radius: 0 8px 8px 0; }

.station-completion { margin: var(--space-12) 0 var(--space-8); padding: var(--space-8) var(--space-6); border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface); }
.station-completion h2 { margin: 0 0 var(--space-6); font-family: var(--font-serif); font-size: 1.5rem; text-align: center; }
.station-completion__grid { display: grid; gap: var(--space-3); }
.station-completion__group { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg); }
.station-completion__group strong { display: block; margin-bottom: var(--space-2); }
.station-completion__phrases { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.station-completion__highlight { margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-accent-soft); text-align: center; }
.station-completion__competence { margin: var(--space-1) 0 var(--space-2); font-weight: 700; }
.station-completion__steps { margin: 0; padding-left: 22px; text-align: left; display: inline-grid; gap: var(--space-1); color: var(--color-accent); font-weight: 700; }
.station-completion__button { display: block; margin: var(--space-6) auto 0; }

.station-abdalan p { white-space: pre-wrap; }
.station-pending { margin: 0; padding: var(--space-2); border: 1px dashed var(--color-border); border-radius: 8px; color: var(--color-text-muted); font-style: italic; font-size: .86rem; }
.station-hero__cta { display: inline-block; margin-top: var(--space-6); padding: var(--space-2) var(--space-6); border-radius: 999px; background: var(--color-primary); color: #fff; font-weight: 800; letter-spacing: .02em; }

.station-chat__bubble { display: grid; gap: var(--space-1); }
.station-chat__meta { color: inherit; opacity: .65; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.station-timeline__context p { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: .92rem; line-height: 1.5; }
.station-timeline__context:last-child p:last-child { margin-bottom: var(--space-2); }

.station-order { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: grid; gap: var(--space-3); }
.station-order__target { min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-border); border-radius: 10px; background: var(--color-bg); }
.station-order__sequence { margin: 0; font-weight: 700; color: var(--color-text); }
.station-order__target--list { margin: 0; padding-left: 22px; }
.station-order__target--list li { margin: var(--space-1) 0; font-weight: 700; }
.station-segments { display: grid; gap: var(--space-4); }
.station-epilogue { margin: var(--space-8) 0 var(--space-12); padding: var(--space-8) var(--space-6); border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-surface); }
.station-script { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); display: grid; gap: var(--space-2); }
.station-script p { margin: 0; line-height: 1.5; }
.station-script__direction { color: var(--color-text-muted); font-style: italic; font-size: .88rem; }

.station-ladder { display: grid; gap: var(--space-2); padding-left: var(--space-1); }
.station-ladder__rung { padding: var(--space-3); border-left: 3px solid var(--color-accent); border-radius: 0 10px 10px 0; background: var(--color-accent-soft); }
.station-ladder__rung strong { display: block; margin-bottom: var(--space-1); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent); }
.station-ladder__examples { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.station-ladder__examples span { padding: var(--space-1) var(--space-2); border-radius: 8px; background: var(--color-surface); font-size: .9rem; }

.station-progressive { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); display: grid; gap: var(--space-2); }
.station-progressive__revealed { display: grid; gap: var(--space-1); }
.station-progressive__tail { display: grid; gap: var(--space-2); }

.station-checklist { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: repeating-linear-gradient(var(--color-surface), var(--color-surface) 30px, color-mix(in srgb, var(--color-border) 40%, transparent) 31px); }
.station-checklist__head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.station-checklist__head strong { font-size: 1.05rem; }
.station-checklist__items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.station-checklist__items li { display: flex; align-items: center; gap: var(--space-2); }
.station-checklist__mark { color: var(--color-text-muted); }
.station-checklist__update { margin-top: var(--space-4); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-primary); border-radius: 0 8px 8px 0; background: var(--color-warn-soft); }
.station-checklist__update .station-note { color: var(--color-primary); font-weight: 800; }

@media (min-width: 680px) {
  .station-completion__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .station-hero { padding: var(--space-8) var(--space-4); }
  .station-module__number { font-size: 1.7rem; }
  .station-chat__bubble { max-width: 88%; }
}

/* CSS grid items default to min-width:auto (content-based), so a single
   long unbroken run of text can stretch these "vertical stack" grids past
   their container instead of wrapping — the classic grid overflow trap
   (UI-DESIGN §20 "ausência de overflow horizontal"). minmax(0, 1fr) lets
   the (implicit) single column shrink to the container width again. */
.station-module__body, .station-scenario, .station-particle-grid.station-particle-grid--wide,
.station-progression, .station-subblock, .station-fields, .station-field, .station-example-list,
.station-cue, .station-cue-task, .station-chat__thread, .station-timeline, .station-attempt,
.station-matching__col, .station-function-groups, .station-pairs__grid, .station-experiment-part,
.station-completion__grid, .station-chat__bubble, .station-order, .station-segments, .station-script,
.station-ladder, .station-progressive, .station-progressive__revealed, .station-progressive__tail,
.station-checklist__items {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Microinteractions (UI-DESIGN §9) — feedback and state
   changes should be felt, not just snapped. transform/opacity only,
   150–600ms, one milestone animation up to ~900ms; see reduced-motion
   override below. ---------- */
@keyframes station-reveal-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@keyframes station-pop {
  0% { transform: scale(.97); }
  60% { transform: scale(1.015); }
  100% { transform: scale(1); }
}
@keyframes station-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@keyframes station-milestone {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.station-reveal__answer { animation: station-reveal-in .3s ease; }

.texte-review-choice,
.station-order__target,
.matching-column button,
.texte-transfer__chip,
.texte-phrase-bank__item,
.texte-certainty__step { transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .12s ease; }
.texte-review-choice:active:not(.is-correct):not(.is-wrong),
.texte-transfer__chip:active { transform: scale(.97); }

.texte-review-choice.is-correct,
.texte-transfer__target.is-correct,
.choice-grid button.is-correct,
.matching-column button.is-solved { animation: station-pop .3s ease; }

.texte-review-choice.is-wrong,
.texte-transfer__target.is-wrong,
.choice-grid button.is-wrong,
.matching-column button.is-wrong { animation: station-shake .3s ease; }

.station-completion__button:disabled { animation: station-milestone .5s ease; }

@media (prefers-reduced-motion: reduce) {
  .station-reveal__answer,
  .texte-review-choice.is-correct, .texte-review-choice.is-wrong,
  .texte-transfer__target.is-correct, .texte-transfer__target.is-wrong,
  .choice-grid button.is-correct, .choice-grid button.is-wrong,
  .matching-column button.is-solved, .matching-column button.is-wrong,
  .station-completion__button:disabled { animation: none; }
  .texte-review-choice, .station-order__target, .matching-column button,
  .texte-transfer__chip, .texte-phrase-bank__item, .texte-certainty__step,
  .btn { transition: none; }
}

/* Kreuzworträtsel */
.kw-catalog-grid { margin-top: 18px; }
.kw-card .table-card__subtitle { color: var(--color-text-muted); }

.kw-view { max-width: 1040px; }
.kw-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) {
  .kw-layout { grid-template-columns: 1fr; }
}

.kw-grid-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kw-grid-wrap { position: relative; overflow-x: auto; padding-bottom: 4px; }
.kw-special-keys { display: flex; justify-content: center; gap: 6px; }
.kw-special-key {
  min-width: 34px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.kw-special-key:hover, .kw-special-key:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }
.kw-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--kw-cols), 1fr);
  grid-template-rows: repeat(var(--kw-rows), 1fr);
  width: min(100%, 620px);
  min-width: calc(var(--kw-cols) * 22px);
  aspect-ratio: var(--kw-cols) / var(--kw-rows);
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
  gap: 1px;
}
.kw-cell {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 0;
  padding: 0;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(.6rem, 2.6vw, 1rem);
  cursor: pointer;
}
.kw-cell:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; z-index: 2; }
.kw-cell--blank { background: var(--color-bg); cursor: default; }
.kw-cell__number { position: absolute; top: 1px; left: 2px; font-size: .55em; font-weight: 800; color: var(--color-primary); line-height: 1; }
.kw-cell__letter { text-transform: uppercase; }
.kw-cell.is-word-active { background: var(--color-accent-soft); }
.kw-cell.is-active { background: var(--color-primary); color: white; }
.kw-cell.is-active .kw-cell__number { color: rgba(255, 255, 255, .8); }
.kw-cell.is-check-correct { box-shadow: inset 0 0 0 2px var(--color-accent); }
.kw-cell.is-check-wrong { box-shadow: inset 0 0 0 2px var(--color-warn); }

.kw-catcher {
  position: absolute;
  opacity: 0;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 16px;
  background: transparent;
  caret-color: transparent;
  pointer-events: none;
}

.kw-side { display: flex; flex-direction: column; gap: 16px; }
.kw-active-clue { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: 16px 18px; }
.kw-active-clue__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.kw-active-clue__head:hover .kw-active-clue__text,
.kw-active-clue__head:focus-visible .kw-active-clue__text { color: var(--color-primary); }
.kw-active-clue__number { color: var(--color-primary); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.kw-active-clue__text { margin: 0; font-weight: 700; transition: color .15s ease; }
.kw-active-clue__text.is-solved { text-decoration: line-through; text-decoration-color: var(--color-accent); font-weight: 500; color: var(--color-text-muted); }
.kw-active-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.kw-active-controls .secondary-btn { padding: 8px 14px; font-size: .85rem; }
.kw-active-clue__translation { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); }
.kw-active-clue__translation[hidden] { display: none; }

.kw-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kw-message { margin: 0; color: var(--color-text-muted); font-size: .85rem; min-height: 1.2em; }

.kw-completion { border: 1px solid var(--color-accent); border-radius: var(--radius-lg); background: var(--color-accent-soft); padding: 16px 18px; }
.kw-completion__title { margin: 0 0 12px; font-weight: 800; color: var(--color-accent); }
.kw-completion__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kw-completion__actions a { text-decoration: none; }

.kw-clue-lists { display: grid; grid-template-columns: 1fr; gap: 16px; }
.kw-clue-list h3 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); }
.kw-clue-list__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.kw-clue-item { display: flex; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: var(--radius-md); color: var(--color-text); cursor: pointer; font-size: .88rem; }
.kw-clue-item strong { color: var(--color-text-muted); min-width: 1.4em; }
.kw-clue-list li.is-active .kw-clue-item { background: var(--color-accent-soft); color: var(--color-accent); }
.kw-clue-list li.is-active .kw-clue-item strong { color: var(--color-accent); }
.kw-clue-list li.is-solved .kw-clue-item span { text-decoration: line-through; text-decoration-color: var(--color-accent); color: var(--color-text-muted); }
.kw-clue-list li.is-solved .kw-clue-item strong { color: var(--color-accent); }
.kw-clue-list li.is-solved.is-active .kw-clue-item { background: var(--color-accent-soft); }