/* ==========================================================
   schulspanisch.de · Wimmelbild-Design (zentrale Gestaltungsschicht)
   Stand: 2026-10-14 (v2) · Referenz: Karte „Teste deinen Wortschatz“

   Wird in jedem Wimmelbild-Modul NACH der eigenen styles.css geladen:
     <link rel="stylesheet" href="/styles/wimmelbild-design.css?v=2">

   Grundsätze:
   - Nur Gestaltung (Farben, Schatten, Radien, Hintergründe). Keine Größen,
     Abstände, Breakpoints oder Lernlogik.
   - Blau sparsam: primäre Aktion, Auswahl/Fokus, Fortschritt.
     Labels, Chips und Hilfetexte neutral grau.
   - Funktionale Statusfarben bleiben: richtig/falsch (--good/--wrong),
     erledigte Bildpunkte und Stationen grün.
   - Entfernen der Link-Zeile stellt das alte Design vollständig wieder her.
   ========================================================== */

:root {
  /* Blau der Website (Auswahl, Fokus, Fortschritt) – Text-taugliche Variante */
  --accent: #0066d6;
  --accent-soft: #eef4fc;
  --wb-button: #0071e3;
  --wb-button-hover: #0068d6;
  --wb-button-shadow: 0 10px 28px rgba(0, 0, 0, .06);

  /* Neutrale Töne */
  --bg: #f6f8fb;
  --wb-bg-top: #f2f6fb;
  --border: #e3e8ee;
  --wb-hover-border: #c9d1db;
  --wb-chip-bg: #f1f3f6;
  --wb-done: #1d7562;
  --wb-chip-text: #5b6676;
  --wb-done-soft: rgba(37, 139, 117, .1);

  /* Karten und Overlays wie die Vokabeltest-Karte */
  --wb-card-border: rgba(82, 127, 168, .12);
  --wb-card-glow: rgba(82, 127, 168, .08);
  --shadow: 0 28px 70px rgba(20, 30, 45, .08), 0 4px 14px rgba(20, 30, 45, .04);
  --wb-shadow-soft: 0 12px 34px rgba(20, 30, 45, .05), 0 2px 8px rgba(20, 30, 45, .03);
  --wb-shadow-hover: 0 18px 44px rgba(20, 30, 45, .08), 0 3px 10px rgba(20, 30, 45, .04);
  --wb-modal-shadow: 0 30px 80px rgba(20, 30, 45, .2), 0 6px 18px rgba(20, 30, 45, .08);
  --wb-backdrop: rgba(16, 24, 34, .42);
  --wb-track: rgba(82, 127, 168, .15);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #5aa8ff;
    --accent-soft: #1a2633;
    --wb-button: #0071e3;
    --wb-button-hover: #0068d6;
    --wb-button-shadow: 0 10px 30px rgba(0, 0, 0, .45);

    --bg: #111315;
    --wb-bg-top: #13161a;
    --border: #33383f;
    --wb-hover-border: #4b525c;
    --wb-chip-bg: #2a2e33;
    --wb-done: #5dbca3;
    --wb-chip-text: #acb3bf;
    --wb-done-soft: rgba(93, 188, 163, .14);

    --wb-card-border: rgba(129, 169, 208, .13);
    --wb-card-glow: rgba(129, 169, 208, .08);
    --shadow: 0 28px 70px rgba(0, 0, 0, .26), 0 4px 14px rgba(0, 0, 0, .16);
    --wb-shadow-soft: 0 14px 36px rgba(0, 0, 0, .24), 0 2px 8px rgba(0, 0, 0, .14);
    --wb-shadow-hover: 0 20px 48px rgba(0, 0, 0, .32), 0 3px 10px rgba(0, 0, 0, .18);
    --wb-modal-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 6px 18px rgba(0, 0, 0, .3);
    --wb-backdrop: rgba(4, 8, 12, .58);
    --wb-track: rgba(129, 169, 208, .16);
  }
}

/* ---------- Seitenhintergrund: zarter Verlauf ---------- */
body {
  background:
    linear-gradient(180deg, var(--wb-bg-top) 0, var(--bg) 620px) no-repeat,
    var(--bg);
}

/* ---------- Dekorative Punkte entfernen ---------- */
.hero h1 .accent { display: none; }          /* „En el hotel.“ → „En el hotel“ */
.brand-dot { color: inherit; }               /* schulspanisch.de: Punkt ohne Farbe */

/* ---------- Eyebrows und Labels: dezent grau (wie „Neu · Vokabeltest“) ---------- */
.eyebrow,
.overline,
.modal-kicker,
.micro-label,
.exercise-title {
  color: var(--secondary);
  font-weight: 650;
}
.level-option small { color: var(--secondary); }
.indicator { background: var(--secondary); opacity: .55; }

/* ---------- Chips (Zeit, Situation, Verben): neutral ---------- */
.time-label,
.verb-chip {
  background: var(--wb-chip-bg);
  color: var(--wb-chip-text);
}

/* ---------- Buttons: Pillenform, Blau nur für die primäre Aktion ---------- */
.button { border-radius: 999px; }
.button-primary {
  background: var(--wb-button);
  color: #fff;
  box-shadow: var(--wb-button-shadow);
  transition: background .2s, box-shadow .2s, transform .2s;
}
.button-primary:hover { background: var(--wb-button-hover); }
.button-primary:disabled { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .button-primary:not(:disabled):hover { transform: translateY(-2px); }
}
.button-quiet { border-color: var(--border); }
.button-quiet:hover { color: var(--text); border-color: var(--wb-hover-border); }

/* ---------- Karten: weich schwebend ---------- */
.canvas-card {
  border-radius: 28px;
  border-color: var(--wb-card-border);
  background:
    radial-gradient(circle at 8% 0%, var(--wb-card-glow), transparent 32%),
    var(--card);
  box-shadow: var(--shadow);
}
.scene-scroll { border-radius: 18px; }
.chapters-toggle,
.transfer {
  border-color: var(--wb-card-border);
  box-shadow: var(--wb-shadow-soft);
}
.chapters-toggle { border-radius: 20px; }
.transfer { border-radius: 26px; }
.chapter {
  border-color: var(--border);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.chapter:hover {
  border-color: var(--wb-hover-border);
  box-shadow: var(--wb-shadow-hover);
}
/* Erledigte Stationen in der Übersicht: grün wie die erledigten Bildpunkte */
.chapter.done .number { background: var(--wb-done-soft); color: var(--wb-done); }

/* ---------- Fortschritt: blau; erledigte Bildpunkte bleiben grün ---------- */
.progress-track { background: var(--wb-track); }
.progress-fill { background: var(--wb-button); }
.hotspot {
  border-color: rgba(20, 30, 45, .08);
  box-shadow: 0 6px 18px rgba(18, 28, 37, .22), 0 1px 3px rgba(18, 28, 37, .12);
}

/* ---------- Overlays ---------- */
dialog { box-shadow: var(--wb-modal-shadow); }
dialog::backdrop { background: var(--wb-backdrop); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.level-modal { border-radius: 28px; }
.level-option {
  border-radius: 18px;
  transition: border-color .15s, background .15s;
}
.level-option:hover { border-color: var(--wb-hover-border); background: var(--card2); }
.level-option:focus-visible { border-color: var(--accent); background: var(--card2); }
@media (min-width: 821px) {
  .task-modal { border-radius: 26px; }
}

/* ---------- Aufgaben: neutrale Flächen, Blau nur für Auswahl und Fokus ---------- */
.error-sentence { border-left-color: var(--wb-hover-border); }
.choice-option:hover { border-color: var(--wb-hover-border); }
.choice-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.token-picked .token { border-color: var(--accent); background: var(--accent-soft); }
.exercise-write:focus,
.error-input:focus,
.gap-input:focus,
.match-select:focus,
.cloze-input:focus,
#final-answer:focus,
textarea:focus { border-color: var(--accent); }
.gap-input:focus-visible,
.error-input:focus-visible,
.match-select:focus-visible,
.cloze-input:focus-visible,
.exercise-write:focus-visible,
#final-answer:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Cookie-Banner (zentrales cookies.js; nur Optik) ---------- */
#cookie-banner {
  border-color: var(--wb-card-border);
  border-radius: 22px;
  box-shadow: var(--wb-modal-shadow);
}
#cookie-banner button { border-radius: 999px; }
#cookie-banner #accept-cookies {
  background: var(--wb-button);
  border-color: var(--wb-button);
  color: #fff;
}

/* „Weiter →“ einzeilig (in den neueren Modulen bereits in styles.css; ergänzt Mi rutina) */
.task-actions > #next-task { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .button-primary:not(:disabled):hover { transform: none; }
}