/* =========================================================================
   views-misc.css
   Styles für Home, Search, Settings, Lernpfad, Glossary, WQ, Pruefung-Sim.
   Strict design-token only (theme.css). No hardcoded hex.
   ========================================================================= */

/* ---------- Lehrplan-Rechner (Lernpfad) ---------------------------------- */
.rechner {
  margin: 1.5rem 0 2rem;
  padding: 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.rechner__head { display: flex; flex-direction: column; gap: 0.35rem; }
.rechner__head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
}
.rechner__hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.rechner__form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.25rem;
}
.rechner__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 220px;
  justify-content: flex-end;
}
.rechner__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rechner__date {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface-hover);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
/* color-scheme koppelt den NATIVEN Date-Picker (Popup + Feld) ans App-Theme.
   data-theme wird vom Boot-Script auf dark/light gesetzt. */
[data-theme="dark"] .rechner__date { color-scheme: dark; }
[data-theme="light"] .rechner__date { color-scheme: light; }
/* Fallback ohne JS (data-theme bleibt evtl. "auto") -> System folgen */
[data-theme="auto"] .rechner__date,
:root:not([data-theme]) .rechner__date { color-scheme: light dark; }
.rechner__date:hover {
  background: var(--color-surface-active);
  border-color: var(--color-border-hover);
}
.rechner__date:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.rechner__date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.25rem;
  opacity: 0.7;
  transition: opacity 150ms ease;
}
[data-theme="dark"] .rechner__date::-webkit-calendar-picker-indicator { filter: invert(1); }
.rechner__date::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.rechner__date::-webkit-datetime-edit { padding: 0; }
.rechner__date::-webkit-datetime-edit-fields-wrapper { color: var(--color-text); }
.rechner__date::-webkit-datetime-edit-text { color: var(--color-text-muted); padding: 0 0.15rem; }
.rechner__date::-webkit-datetime-edit-day-field,
.rechner__date::-webkit-datetime-edit-month-field,
.rechner__date::-webkit-datetime-edit-year-field {
  color: var(--color-text);
  font-weight: 600;
}

.rechner__summary {
  flex: 1 1 200px;
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rechner__summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.rechner__summary-label { font-size: 0.85rem; color: var(--color-info-text); }
.rechner__summary-value { font-size: 1.5rem; font-weight: 700; color: var(--color-info-text); font-variant-numeric: tabular-nums; }
.rechner__summary-row--muted { font-size: 0.78rem; color: var(--color-info-text); opacity: 0.8; margin-top: 0.2rem; }

.rechner__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem;
}
.rechner__card {
  padding: 0.95rem 1rem;
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.rechner__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.rechner__card-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rechner__card-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.rechner__card-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.rechner__card--stoff .rechner__card-num { color: var(--color-success); }
.rechner__card--quiz .rechner__card-num { color: var(--color-primary); }
.rechner__card--cards .rechner__card-num { color: var(--color-warning); }
.rechner__card--total {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.rechner__card--total .rechner__card-num { color: var(--color-primary); }
.rechner__card--total .rechner__card-label,
.rechner__card--total .rechner__card-sub { color: var(--color-text); }

.rechner__advice {
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
  border-radius: 6px;
  color: var(--color-warning-text);
  font-size: 0.9rem;
  line-height: 1.5;
}
.rechner__placeholder {
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--bg-muted);
  border-radius: 8px;
}
@media (max-width: 480px) {
  .rechner { padding: 1.15rem 1rem; }
  .rechner__results { grid-template-columns: repeat(2, 1fr); }
  .rechner__card-num { font-size: 1.6rem; }
}


/* ---------- Home ---------------------------------------------------------- */
.home__hero {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active, var(--color-primary-hover)) 100%);
  color: var(--color-on-accent);
  border-radius: 12px;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.home__hero-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-on-accent);
  line-height: 1.2;
  flex-shrink: 0;
}
.home__hero-lead {
  display: none;
}
.home__hero-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.home__hero-actions .btn {
  padding: 0.45rem 0.95rem;
  font-size: 0.875rem;
}
.home__hero-actions .btn--exam {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #ffffff;
  border: none;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}
.home__hero-actions .btn--exam:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
}
/* Fallback für alte h2/p */
.home__hero h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.home__hero p {
  display: none;
}

.home__stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* Wiederholen-Button (ersetzt die 3 Stat-Pillen) */
.home__wiederholen {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  width: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-warning) 22%, var(--color-surface)) 0%, color-mix(in srgb, var(--color-danger) 18%, var(--color-surface)) 100%);
  border: 1px solid var(--color-warning-border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-text);
  transition: transform 150ms ease, box-shadow 200ms ease, border-color 150ms ease;
}
.home__wiederholen:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--color-warning);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--color-warning) 50%, transparent);
}
.home__wiederholen:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.home__wiederholen--empty {
  background: var(--color-surface);
  border-color: var(--color-border);
  opacity: 0.65;
  cursor: default;
}
.home__wiederholen-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--color-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.home__wiederholen-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.home__wiederholen-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.home__wiederholen-sub {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.home__wiederholen-breakdown {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
.home__wiederholen-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.home__wiederholen-pill--r1 { background: #ef4444; }
.home__wiederholen-pill--r2 { background: #f97316; }
.home__wiederholen-pill--r3 { background: #9ca3af; color: #1a1d23; }
.home__stat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.9rem 0.4rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease, box-shadow 200ms ease, border-color 150ms ease;
  overflow: hidden;
  min-height: 40px;
}
.home__stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--stat-accent, var(--color-primary));
}
.home__stat::after {
  content: var(--stat-icon, "\01F4CA");
  font-size: 0.95rem;
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stat-accent, var(--color-primary)) 18%, transparent);
  order: 3;
  margin-left: auto;
}
.home__stat:hover {
  transform: translateX(2px);
  border-color: var(--stat-accent, var(--color-primary));
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--stat-accent, var(--color-primary)) 35%, transparent);
}

/* Layout innen */
.home__stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--stat-accent, var(--color-primary));
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 2.4rem;
}
.home__stat-label {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.home__stat-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Farbcodierung pro Stat (Reihenfolge: Aufgaben / Karten / Stoff) */
.home__stat:nth-child(1) {
  --stat-accent: #facc15;   /* Gelb */
  --stat-icon: "\01F4DD";   /* memo */
}
.home__stat:nth-child(2) {
  --stat-accent: #f87171;   /* Rot */
  --stat-icon: "\01F0CF";   /* joker / card */
}
.home__stat:nth-child(3) {
  --stat-accent: #d4a574;   /* Hellbraun */
  --stat-icon: "\01F4DA";   /* books */
}

/* Legacy fallbacks (alte strong/span Variante) */
.home__stats > div:not(.home__stat) {
  background: var(--color-surface);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.home__stats strong {
  display: block;
  font-size: 1.5rem;
  color: var(--color-primary);
}
.home__stats span:not(.home__stat-sub) {
  display: block;
  font-size: .85rem;
  color: var(--color-text-muted);
  margin-top: .25rem;
}

/* Desktop: optional in einer Reihe nebeneinander */
@media (min-width: 768px) {
  .home__stats {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .home__stat {
    flex: 1 1 240px;
    min-width: 0;
  }
}

.home__bereiche-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  padding: 0.5rem;
}

/* ---------- Pastel-Akzente pro Prüfungsbereich (Home-Cards) ---------- */
/* Custom Properties pro Bereich: --bereich-bg, --bereich-border, --bereich-accent, --bereich-title */

.home__bereich[data-bereich-id="it-buero"] {
  --bereich-bg: #ecfdf5;
  --bereich-border: #86efac;
  --bereich-accent: #059669;
  --bereich-title: #065f46;
  --bereich-track: rgba(16, 185, 129, 0.18);
}
.home__bereich[data-bereich-id="kbp"] {
  --bereich-bg: #fdf2f8;
  --bereich-border: #f9a8d4;
  --bereich-accent: #db2777;
  --bereich-title: #831843;
  --bereich-track: rgba(236, 72, 153, 0.18);
}
.home__bereich[data-bereich-id="wiso"] {
  --bereich-bg: #f0fdfa;
  --bereich-border: #5eead4;
  --bereich-accent: #0d9488;
  --bereich-title: #134e4a;
  --bereich-track: rgba(20, 184, 166, 0.18);
}

[data-theme="dark"] .home__bereich[data-bereich-id="it-buero"],
:root:not([data-theme]) .home__bereich[data-bereich-id="it-buero"],
[data-theme="auto"] .home__bereich[data-bereich-id="it-buero"] {
  --bereich-bg: #0a2820;
  --bereich-border: #166534;
  --bereich-accent: #4ade80;
  --bereich-title: #86efac;
  --bereich-track: rgba(74, 222, 128, 0.18);
}
[data-theme="dark"] .home__bereich[data-bereich-id="kbp"],
:root:not([data-theme]) .home__bereich[data-bereich-id="kbp"],
[data-theme="auto"] .home__bereich[data-bereich-id="kbp"] {
  --bereich-bg: #2a0e22;
  --bereich-border: #9d174d;
  --bereich-accent: #f472b6;
  --bereich-title: #fbcfe8;
  --bereich-track: rgba(244, 114, 182, 0.18);
}
[data-theme="dark"] .home__bereich[data-bereich-id="wiso"],
:root:not([data-theme]) .home__bereich[data-bereich-id="wiso"],
[data-theme="auto"] .home__bereich[data-bereich-id="wiso"] {
  --bereich-bg: #04302d;
  --bereich-border: #0f766e;
  --bereich-accent: #2dd4bf;
  --bereich-title: #99f6e4;
  --bereich-track: rgba(45, 212, 191, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .home__bereich[data-bereich-id="it-buero"],
  [data-theme="auto"] .home__bereich[data-bereich-id="it-buero"] {
    --bereich-bg: #0a2820;
    --bereich-border: #166534;
    --bereich-accent: #4ade80;
    --bereich-title: #86efac;
    --bereich-track: rgba(74, 222, 128, 0.18);
  }
  :root:not([data-theme]) .home__bereich[data-bereich-id="kbp"],
  [data-theme="auto"] .home__bereich[data-bereich-id="kbp"] {
    --bereich-bg: #2a0e22;
    --bereich-border: #9d174d;
    --bereich-accent: #f472b6;
    --bereich-title: #fbcfe8;
    --bereich-track: rgba(244, 114, 182, 0.18);
  }
  :root:not([data-theme]) .home__bereich[data-bereich-id="wiso"],
  [data-theme="auto"] .home__bereich[data-bereich-id="wiso"] {
    --bereich-bg: #04302d;
    --bereich-border: #0f766e;
    --bereich-accent: #2dd4bf;
    --bereich-title: #99f6e4;
    --bereich-track: rgba(45, 212, 191, 0.18);
  }
}

/* Anwendung der Bereich-Tokens auf das Card-Markup */
.home__bereich[data-bereich-id] {
  background: var(--bereich-bg);
  border-color: var(--bereich-border);
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 150ms ease;
  box-shadow:
    0 0 0 1px var(--bereich-border),
    0 8px 24px -8px color-mix(in srgb, var(--bereich-accent) 35%, transparent),
    0 0 28px -12px color-mix(in srgb, var(--bereich-accent) 60%, transparent);
}
.home__bereich[data-bereich-id]:hover {
  border-color: var(--bereich-accent);
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px var(--bereich-accent),
    0 14px 32px -10px color-mix(in srgb, var(--bereich-accent) 55%, transparent),
    0 0 40px -8px color-mix(in srgb, var(--bereich-accent) 70%, transparent);
}
.home__bereich[data-bereich-id] .home__bereich-title,
.home__bereich[data-bereich-id] .home__bereich-nr {
  color: var(--bereich-title);
}
.home__bereich[data-bereich-id] .home__bereich-nr {
  font-weight: 700;
}
.home__bereich[data-bereich-id] .home__bereich-weight {
  color: var(--bereich-accent);
  font-weight: 600;
}
.home__bereich[data-bereich-id] .home__bereich-progress {
  background: var(--bereich-track);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
}
.home__bereich[data-bereich-id] .home__bereich-progress-bar {
  height: 100%;
  background: var(--bereich-accent);
  width: var(--progress, 0%);
  border-radius: 999px;
  transition: width 400ms ease-out;
}
.home__bereich[data-bereich-id] .home__bereich-progress-label,
.home__bereich[data-bereich-id] .home__bereich-progress-detail {
  color: var(--bereich-title);
  opacity: 0.85;
}

.home__bereich-card {
  display: block;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.home__bereich-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-hover);
}
.home__bereich-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.home__bereich-card h3 {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
}
.home__bereich-card p {
  margin: 0;
  font-size: .9rem;
  color: var(--color-text-muted);
}

/* ---------- Search -------------------------------------------------------- */
.search__input {
  width: 100%;
  padding: 1rem 1rem 1rem 2.75rem;
  font-size: 1.1rem;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat .9rem center;
  color: var(--color-text);
  margin-bottom: 1rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.search__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.search__filters button,
.search__filters .chip {
  padding: .4rem .9rem;
  font-size: .85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.search__filters button:hover,
.search__filters .chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.search__filters button:focus-visible,
.search__filters .chip:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.search__filters button[aria-pressed="true"],
.search__filters .chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
}

.search__results {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.search__result {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.search__result:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.search__result:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.search__result__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  margin-bottom: .35rem;
}
.search__result__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.search__result__badge {
  flex-shrink: 0;
  padding: .15rem .55rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 8px;
  background: var(--color-info-bg);
  color: var(--color-info-text);
}
.search__result__badge--quiz { background: var(--color-info-bg); color: var(--color-info-text); }
.search__result__badge--glossary { background: var(--color-success-bg); color: var(--color-success-text); }
.search__result__badge--reader { background: var(--color-warning-bg); color: var(--color-warning-text); }
.search__result__snippet {
  margin: 0;
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.search__result__snippet mark {
  background: var(--color-warning-bg);
  color: var(--color-text);
  padding: 0 .15rem;
  border-radius: 4px;
}

/* ---------- Settings ------------------------------------------------------ */
.settings__header {
  margin-bottom: 1.25rem;
}
.settings__header h1 {
  margin: 0 0 .25rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
}
.settings__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .95rem;
}

.settings__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.settings__section > h2,
.settings__section > h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-border);
}

/* Generic row helper (legacy markup) */
.settings__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .25rem 0;
}
.settings__row label {
  flex: 1;
  font-size: .95rem;
  color: var(--color-text);
}
.settings__row label small {
  display: block;
  font-size: .8rem;
  color: var(--color-text-muted);
  margin-top: .2rem;
  font-weight: normal;
}
.settings__row > select,
.settings__row > input,
.settings__row > button {
  flex-shrink: 0;
  min-width: 8rem;
}

/* Field wrapper inside a section */
.settings__field {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.settings__field > legend,
.settings__field > label {
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-text);
  padding: 0;
}
.settings__field > label small {
  display: block;
  font-size: .8rem;
  color: var(--color-text-muted);
  font-weight: normal;
  margin-top: .15rem;
}

/* Theme Pill-Toggle-Group */
.settings__radios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  padding: .25rem;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.settings__radio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  user-select: none;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.settings__radio input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  /* Reset browser-default radio appearance */
  -webkit-appearance: none;
  appearance: none;
}
.settings__radio > span {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.settings__radio:hover {
  color: var(--color-text);
}
.settings__radio:has(input[type="radio"]:checked) {
  background: var(--color-primary);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-sm);
}
.settings__radio:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Font-Size Range slider with clean tick-labels */
.settings__field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  margin: .25rem 0;
}
.settings__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 150ms ease;
}
.settings__field input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
.settings__field input[type="range"]::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.settings__field input[type="range"]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.settings__range-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 0 .25rem;
  margin-top: .15rem;
}
.settings__range-labels span {
  flex: 0 0 auto;
}

/* Toggle row inside settings section (overrides components.css inline-only) */
.settings__section .toggle {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: .65rem 0;
  cursor: pointer;
  position: relative;
}
.settings__section .toggle > .toggle__slider {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 30px;
  inset: auto;
  margin-top: .15rem;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.settings__section .toggle > .toggle__slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 22px;
  height: 22px;
  background: var(--color-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transform: translateY(-50%);
  transition: transform 150ms ease, background-color 150ms ease;
}
.settings__section .toggle input:checked + .toggle__slider {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.settings__section .toggle input:checked + .toggle__slider::before {
  transform: translate(26px, -50%);
  background: var(--color-on-accent);
}
.settings__section .toggle input:focus-visible + .toggle__slider {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.toggle__text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: .25rem;
}
.toggle__text strong {
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.toggle__text small {
  font-size: .82rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Settings: actions, info, hint, status */
.settings__hint {
  margin: 0;
  font-size: .9rem;
  color: var(--color-text-muted);
}
.settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
.settings__status {
  margin: 0;
  min-height: 1.2em;
  font-size: .85rem;
  color: var(--color-text-muted);
}
.settings__status[data-kind="success"] { color: var(--color-success-text); }
.settings__status[data-kind="danger"]  { color: var(--color-danger-text); }

.settings__info {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.25rem;
  margin: 0;
  font-size: .9rem;
}
.settings__info dt {
  color: var(--color-text-muted);
  font-weight: 500;
}
.settings__info dd {
  margin: 0;
  color: var(--color-text);
}

.settings__danger-zone {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.settings__danger-zone h3 {
  margin: 0;
  color: var(--color-danger-text);
  font-size: 1.05rem;
  font-weight: 600;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-danger-border);
}
.settings__danger-zone p {
  margin: 0;
  font-size: .9rem;
  color: var(--color-danger-text);
}
.settings__danger-zone button {
  align-self: flex-start;
  background: var(--color-danger);
  color: var(--color-danger-contrast);
  border: none;
  padding: .6rem 1.15rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.settings__danger-zone button:hover {
  background: var(--color-danger-hover);
}
.settings__danger-zone button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------- Lernpfad (Timeline) ------------------------------------------ */
.lernpfad {
  padding: 0 .25rem;
}
.lernpfad__head {
  margin-bottom: 1.25rem;
}
.lernpfad__head h1 {
  margin: 0 0 .35rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
}
.lernpfad__intro,
.lernpfad__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .95rem;
}

.lernpfad__timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 3rem;
}
.lernpfad__timeline::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: var(--color-border);
  border-radius: 999px;
}

.phase {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.phase:last-child {
  margin-bottom: 0;
}

/* Marker (filled circle on the line) */
.phase__marker {
  position: absolute;
  left: -2.5rem;
  top: 1.25rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 0 0 4px var(--bg);
  z-index: 1;
}
.phase__marker-num {
  line-height: 1;
}

/* Legacy data-step variant */
.phase::before {
  content: attr(data-step);
}
.phase:not([data-step])::before,
.phase[data-step=""]::before {
  content: none;
}
.phase[data-step]::before {
  position: absolute;
  left: -2.5rem;
  top: 1.25rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 0 0 4px var(--bg);
}

.phase__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
}
.phase__name,
.phase h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
}
.phase__wochen {
  flex: 0 0 auto;
  padding: .15rem .6rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.phase__begruendung,
.phase p {
  margin: 0 0 .75rem;
  color: var(--color-text-muted);
  font-size: .92rem;
  line-height: 1.5;
}

.phase__themen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 .85rem;
  padding: 0;
}
.phase__thema {
  padding: .2rem .65rem;
  font-size: .78rem;
  font-weight: 500;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-radius: 999px;
}

.phase__progress {
  position: relative;
  height: 8px;
  background: var(--color-surface-muted);
  border-radius: 999px;
  overflow: hidden;
  margin: .85rem 0 .25rem;
}
.phase__progress--empty {
  height: auto;
  padding: .4rem .65rem;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: .8rem;
}
.phase__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  border-radius: 999px;
  transition: width 200ms ease;
}
.phase__progress-label {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  color: var(--color-text-muted);
}

.phase--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.phase--active .phase__marker,
.phase--active::before {
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-color: var(--color-primary);
}

.phase--done::before {
  content: "\2713";
  background: var(--color-success);
  color: var(--color-on-accent);
  border-color: var(--color-success);
}
.phase--done .phase__marker {
  background: var(--color-success);
  color: var(--color-on-accent);
  border-color: var(--color-success);
}
.phase--done .phase__marker-num {
  display: none;
}
.phase--done .phase__marker::after {
  content: "\2713";
  font-size: 1rem;
  font-weight: 700;
}
.phase--done {
  opacity: .85;
}

.phase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.phase__actions button,
.phase__actions .btn {
  padding: .55rem 1rem;
  font-size: .9rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 500;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.phase__actions button:hover,
.phase__actions .btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.phase__actions button:focus-visible,
.phase__actions .btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.phase__actions button.primary {
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-color: var(--color-primary);
}
.phase__actions button.primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-accent);
}

/* ---------- Glossary ------------------------------------------------------ */
.glossary__head {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-bottom: 1rem;
}

.glossary__search {
  display: block;
  position: relative;
}
.glossary__search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.glossary__search-input {
  width: 100%;
  padding: .75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.glossary__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.glossary__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.glossary__chip {
  padding: .35rem .85rem;
  font-size: .82rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.glossary__chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.glossary__chip:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.glossary__chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
}

/* A-Z Index - sticky horizontal bar */
.glossary__azindex {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: .75rem .25rem;
  margin: 0 -.25rem 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  justify-content: center;
}
.glossary__azindex a,
.glossary__azindex-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 .35rem;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.glossary__azindex a:hover,
.glossary__azindex-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-primary);
  border-color: var(--color-border);
}
.glossary__azindex a:focus-visible,
.glossary__azindex-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.glossary__azindex a.is-active,
.glossary__azindex-btn.is-active,
.glossary__azindex-btn[aria-current="true"] {
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-color: var(--color-primary);
}
.glossary__azindex a.is-disabled,
.glossary__azindex-btn.is-empty,
.glossary__azindex-btn[disabled] {
  color: var(--color-text-placeholder);
  pointer-events: none;
  opacity: .5;
}

.glossary__list,
.glossary__group-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 640px) {
  .glossary__list,
  .glossary__group-items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .glossary__list,
  .glossary__group-items { grid-template-columns: repeat(3, 1fr); }
}

.glossary__group {
  margin-bottom: 1.5rem;
}
.glossary__group-title,
.glossary__letter {
  margin: 0 0 .75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  padding-bottom: .25rem;
  border-bottom: 2px solid var(--color-info-bg);
}

.glossary__term {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.glossary__term:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.glossary__term.is-expanded {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.glossary__term-head {
  display: block;
  width: 100%;
  padding: 1rem 1.15rem;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background-color 150ms ease;
}
.glossary__term-head:hover {
  background: var(--color-surface-hover);
}
.glossary__term-head:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
.glossary__term-head[data-no-details="1"] {
  cursor: default;
}

.glossary__term__name,
.glossary__term-title {
  margin: 0 0 .35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.glossary__term__def,
.glossary__term-def {
  margin: 0 0 .5rem;
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.glossary__term-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
.glossary__term-occ {
  font-size: .75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  padding: .15rem .55rem;
  border-radius: 999px;
}
.glossary__term-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.glossary__tag {
  font-size: .72rem;
  font-weight: 500;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.glossary__term-body {
  padding: 0 1.15rem 1rem;
  border-top: 1px solid var(--color-border);
  margin-top: -.25rem;
  padding-top: 1rem;
}
.glossary__term-section + .glossary__term-section {
  margin-top: 1rem;
}
.glossary__term-subtitle {
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}
.glossary__term-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .88rem;
  color: var(--color-text);
  line-height: 1.5;
}
.glossary__term-list li + li {
  margin-top: .25rem;
}

.glossary__empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}

/* ---------- WQ (Wahlqualifikationen) Grid -------------------------------- */
.wq-header {
  margin-bottom: 1rem;
}
.wq-title {
  margin: 0 0 .35rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
}
.wq-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .95rem;
  line-height: 1.5;
}

.wq-info {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: 12px;
  margin-bottom: 1rem;
}
.wq-info__icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1.2;
}
.wq-info__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  color: var(--color-info-text);
}
.wq-info__lead {
  margin: 0;
  font-size: .92rem;
  font-weight: 500;
}
.wq-info__sub {
  margin: 0;
  font-size: .85rem;
  opacity: .9;
}

.wq-summary {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.wq-summary--empty {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: .9rem;
  border-style: dashed;
}
.wq-summary__title {
  margin: 0 0 .65rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-text);
}
.wq-summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .9rem;
  color: var(--color-text);
}
.wq-summary__nr {
  display: inline-block;
  padding: .1rem .5rem;
  margin-right: .35rem;
  font-size: .75rem;
  font-weight: 700;
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-radius: 999px;
}

.wq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
@media (min-width: 640px) {
  .wq-grid { grid-template-columns: repeat(2, 1fr); }
}

.wq-card {
  position: relative;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background-color 150ms ease;
}
.wq-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.wq-card:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.wq-card h3,
.wq-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
}
.wq-card p {
  margin: 0;
  font-size: .85rem;
  color: var(--color-text-muted);
}

.wq-card__head {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  justify-content: space-between;
}
.wq-card__head-main {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  flex: 1 1 auto;
  min-width: 0;
}
.wq-card__nr {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 .55rem;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border-radius: 8px;
  font-weight: 700;
  font-size: .85rem;
}
.wq-card__expand {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.wq-card__expand:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.wq-card__expand:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.wq-card[aria-expanded="true"] .wq-card__chevron {
  transform: rotate(180deg);
}
.wq-card__chevron {
  display: inline-block;
  transition: transform 150ms ease;
}

.wq-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: var(--color-text-muted);
}
.wq-card__count {
  background: var(--color-surface-muted);
  padding: .15rem .55rem;
  border-radius: 999px;
}
.wq-card__badge {
  background: var(--color-success-bg);
  color: var(--color-success-text);
  padding: .15rem .65rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .75rem;
}

.wq-card__body {
  padding-top: .35rem;
  border-top: 1px solid var(--color-border);
  margin-top: .25rem;
}
.wq-card__inhalte {
  margin: .5rem 0 0;
  padding-left: 1.25rem;
  font-size: .88rem;
  color: var(--color-text);
  line-height: 1.5;
}
.wq-card__inhalt-item + .wq-card__inhalt-item {
  margin-top: .2rem;
}
.wq-card__empty {
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.wq-card__foot {
  padding-top: .5rem;
  display: flex;
  justify-content: flex-end;
}
.wq-card__toggle {
  padding: .5rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.wq-card__toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.wq-card__toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.wq-card__toggle--active {
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-color: var(--color-primary);
}
.wq-card__toggle--active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-accent);
}

.wq-card--selected {
  border-color: var(--color-primary);
  background: var(--color-info-bg);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
.wq-card--selected::after {
  content: "\2713";
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.wq-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}

/* ---------- Exam / Pruefung simulieren ----------------------------------- */
.exam__head {
  margin-bottom: 1rem;
}
.exam__head--run {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.exam__title {
  margin: 0 0 .25rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
}
.exam__lead,
.exam__progress-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: .9rem;
}
.exam__head-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.exam__head-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Start form */
.exam__start-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.exam__field {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.exam__field-legend {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-text);
  padding: 0;
}
.exam__radio {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  font-size: .92rem;
  color: var(--color-text);
  cursor: pointer;
}
.exam__radio input[type="radio"] {
  accent-color: var(--color-primary);
}
.exam__select {
  padding: .55rem .75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .95rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.exam__select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-primary);
}
.exam__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.exam__chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  font-size: .82rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.exam__chip:has(input[type="checkbox"]:checked),
.exam__chip:has(input[type="radio"]:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
}
.exam__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.exam__start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Timer — monospace, tabular-nums */
.exam__timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Consolas, "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .05em;
  box-shadow: var(--shadow-sm);
  min-width: 6.5ch;
  text-align: center;
}
.exam__timer--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.exam__timer--critical {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
  animation: exam-pulse 1s ease-in-out infinite;
}
@keyframes exam-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* Question navigation - pill grid with status indicators */
.exam__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .65rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.exam__nav button,
.exam__nav-item {
  position: relative;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .55rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.exam__nav button:hover,
.exam__nav-item:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}
.exam__nav button:focus-visible,
.exam__nav-item:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.exam__nav-item.is-answered,
.exam__nav button.is-answered {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
}
.exam__nav-item.is-flagged,
.exam__nav button.is-flagged {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}
.exam__nav-item.is-current,
.exam__nav button.is-current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-sm);
}
.exam__nav-item.is-answered::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-success);
  transform: translateX(-50%);
}
.exam__nav-item.is-current::after {
  display: none;
}

/* Question card */
.exam__question {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem 1.65rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.exam__question-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--color-border);
}
.exam__question__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .85rem;
  color: var(--color-text-muted);
  margin-bottom: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-border);
}
.exam__question-tag {
  display: inline-flex;
  align-items: center;
  padding: .15rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  border-radius: 999px;
}
.exam__question-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  flex: 1 1 100%;
}
.exam__flag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  font-size: .82rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  margin-left: auto;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.exam__flag input[type="checkbox"] {
  accent-color: var(--color-warning);
}
.exam__flag:has(input:checked) {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
}

.exam__question-body,
.exam__question__text,
.exam__question-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}
.exam__question-subtasks {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--color-text);
}
.exam__question-subtasks li + li {
  margin-top: .35rem;
}

.exam__question__options {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.exam__question__options label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.exam__question__options label:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
}
.exam__question__options label:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-info-bg);
}
.exam__question__options input {
  accent-color: var(--color-primary);
}

.exam__answer {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.exam__answer-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.exam__answer-input {
  width: 100%;
  min-height: 8rem;
  padding: .75rem .9rem;
  font-size: .95rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.exam__answer-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.exam__question-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

/* Result view */
.exam__result {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.exam__result__score {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--color-primary);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.exam__result__score--pass { color: var(--color-success); }
.exam__result__score--fail { color: var(--color-danger); }
.exam__result__label {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0 0 1.5rem;
}
.exam__result__breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  margin: 1.5rem 0;
  text-align: left;
}
.exam__result__breakdown > div {
  padding: .85rem 1rem;
  background: var(--color-surface-hover);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary);
}
.exam__result__breakdown strong {
  display: block;
  font-size: 1.25rem;
  color: var(--color-text);
}
.exam__result__breakdown span {
  font-size: .8rem;
  color: var(--color-text-muted);
}
.exam__result__actions {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.exam__result-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
  margin: 1.25rem 0;
}
.exam__result-stat {
  padding: 1rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.exam__result-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}
.exam__result-stat-label {
  font-size: .82rem;
  color: var(--color-text-muted);
  margin-top: .25rem;
}

.exam__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-top: 1rem;
}
.exam__result-status {
  margin: .65rem 0 0;
  font-size: .85rem;
  color: var(--color-text-muted);
  min-height: 1.2em;
}

.exam__result-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
}
.exam__result-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.exam__result-summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.15rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--color-text);
  list-style: none;
}
.exam__result-summary::-webkit-details-marker { display: none; }
.exam__result-summary:hover {
  background: var(--color-surface-hover);
}
.exam__result-num {
  font-weight: 700;
  color: var(--color-text-muted);
  min-width: 1.75rem;
}
.exam__result-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exam__result-flag {
  color: var(--color-warning);
}
.exam__result-state {
  flex: 0 0 auto;
  padding: .15rem .55rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 999px;
}
.exam__result-state.is-answered {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.exam__result-state.is-empty {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.exam__result-body {
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.exam__result-section {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.exam__result-section--ma {
  padding: 0.75rem 0.9rem;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: 10px;
  border-left: 3px solid var(--color-success);
}
.exam__result-section--ma .exam__result-h {
  color: var(--color-success-text);
}
.exam__ma-keypoints {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
  color: var(--color-success-text);
  font-size: 0.88rem;
  line-height: 1.5;
}
.exam__ma-keypoints li {
  margin-bottom: 0.15rem;
}
.exam__ma-text {
  margin: 0;
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.exam__ma-text--empty {
  color: var(--color-text-muted);
  font-style: italic;
}
.exam__result-section--mc {
  padding: 0.6rem 0.85rem;
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-radius: 8px;
}
.exam__result-section--mc .exam__result-h {
  color: var(--color-info-text);
}
.exam__mc-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-info-text);
}
.exam__mc-list li { margin-bottom: 0.15rem; }
.exam__result-h {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-text-muted);
}
.exam__result-text {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--color-text);
  white-space: pre-line;
}
.exam__result-answer {
  margin: 0;
  padding: .85rem 1rem;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-x: auto;
}
.exam__skills {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .88rem;
  color: var(--color-text);
}
.exam__skills li + li {
  margin-top: .2rem;
}
.exam__rates {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.exam__rate {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  font-size: .82rem;
  font-weight: 500;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.exam__rate:has(input:checked) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-accent);
}
.exam__rate input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.exam__loading,
.exam__error {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}
.exam__error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

/* ---------- Mobile responsiveness ----------------------------------------- */
@media (max-width: 480px) {
  /* iOS zoom-on-focus prevention: keep editable inputs >= 16px on mobile */
  .exam__select,
  .exam__answer-input {
    font-size: 16px;
  }
  .settings__section {
    padding: 1.15rem 1rem;
  }
  .settings__radios {
    gap: .25rem;
    padding: .2rem;
  }
  .settings__radio {
    font-size: .85rem;
    padding: .45rem .35rem;
    min-height: 2.35rem;
  }
  .settings__section .toggle > .toggle__slider {
    flex: 0 0 52px;
    width: 52px;
    height: 28px;
  }
  .settings__section .toggle > .toggle__slider::before {
    width: 20px;
    height: 20px;
  }
  .settings__section .toggle input:checked + .toggle__slider::before {
    transform: translate(24px, -50%);
  }
  .exam__question {
    padding: 1.15rem 1rem;
  }
  .exam__nav {
    padding: .5rem;
  }
  .exam__nav button,
  .exam__nav-item {
    min-width: 2.25rem;
    height: 2.25rem;
    font-size: .8rem;
  }
  .lernpfad__timeline {
    padding-left: 2.5rem;
  }
  .phase__marker,
  .phase[data-step]::before {
    left: -2.25rem;
    width: 1.75rem;
    height: 1.75rem;
    font-size: .8rem;
  }
}

/* ---------- Reduced Motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .home__bereich-card,
  .search__result,
  .glossary__term,
  .wq-card,
  .exam__nav button,
  .exam__nav-item,
  .exam__question__options label,
  .phase__progress-bar,
  .settings__radio,
  .settings__section .toggle > .toggle__slider,
  .settings__section .toggle > .toggle__slider::before,
  .settings__field input[type="range"]::-webkit-slider-thumb,
  .wq-card__chevron {
    transition: none;
  }
  .exam__timer--critical {
    animation: none;
  }
}