/* Design-Zusatz fuer die Uebungsseiten der Portal-Familie (Wortarten-Werkstatt, Doppelkonsonanten).
   Nach design.css einbinden. Ueberschreibt fest verdrahtete helle Farben der Seiten.
   Das Praefix :root:root erhoeht die Spezifitaet, weil diese Seiten Teile ihres CSS erst per Skript einfuegen. */
:root:root .card,:root:root .score-pill,:root:root .back-btn{background:var(--d-card-bg);border:var(--d-card-border);color:var(--d-ink);
  box-shadow:var(--d-card-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root:root .back-btn{box-shadow:var(--d-small-shadow);border-radius:var(--d-r-s)}
:root:root .score-pill{box-shadow:var(--d-small-shadow)}
:root:root .back-btn:active{transform:translateY(2px);box-shadow:none}
:root:root .brand-title,:root:root .eyebrow{color:var(--d-ink)}
:root:root .progress-track{background:rgba(255,255,255,.16)}
:root:root .progress-fill{background:var(--d-bar-fill)}

/* Antwort-Knoepfe, Chips, Eingaben */
:root:root .option-btn,:root:root .chip,:root:root .markword,:root:root .vkword,:root:root .answer-input,:root:root .resume-banner{
  background:rgba(255,255,255,.08);color:var(--d-ink);border-color:rgba(255,255,255,.26);box-shadow:none}
:root:root .answer-input::placeholder{color:var(--d-ink-soft)}
:root:root .option-btn.correct{color:var(--d-ok)}
:root:root .option-btn.wrong{color:var(--d-bad)}
:root:root .drag-ghost{background:var(--d-surface-2);color:var(--d-ink);border-color:var(--d-line)}
:root:root .tok.selected-error,:root:root .gap-hl,:root:root .mw-gap.filled .mw-letters{background:rgba(255,201,94,.22);color:var(--d-honig)}
:root:root .mw-seg.seg-wrong .mw-letters{color:var(--d-bad)}
:root:root .offline-note{color:var(--d-honig)}

/* Maskottchen, Dialoge, Hinweise */
:root:root .mascot-bubble,:root:root .modal-card{background:var(--d-surface);color:var(--d-ink);border-color:var(--d-honig)}
:root:root .modal-card{border:1px solid rgba(255,255,255,.3);box-shadow:var(--d-pop-shadow)}
:root:root .modal-overlay{background:rgba(3,10,40,.6)}
:root:root .result-note{background:var(--d-lila-bg);border-color:var(--d-lila);color:var(--d-ink)}
:root:root .btn-primary,:root:root .bonus-badge{color:#2B1F04}

/* Ziehen-und-Ablegen-Zonen (Farben stehen als Inline-Stil in den Seiten) und Doppelkonsonanten-Farben */
:root:root:root{--kurz:var(--d-lila);--kurz-bg:var(--d-lila-bg);--lang:var(--d-tuerkis);--lang-bg:var(--d-tuerkis-bg)}
:root:root .drop-zone{background:rgba(255,255,255,.08) !important}
:root:root .drop-zone .zone-label{filter:brightness(1.5)}