/* Ciao! Parliamo! – Farben aus dem Logo: Dunkelgrün, Rot, Grün (Pinselstrich), Creme.
   Rot ist die Marke; in den Übungen bleibt es dem „falsch“ vorbehalten. */
:root {
  --navy: #022d1d;
  --blue: #c10302;
  --blue-2: #d9302a;
  --blue-soft: #fbe5e1;
  --bg: #fbf5ec;
  --card: #fffdf8;
  --text: #13241b;
  --muted: #6b6f69;
  --line: #e9e1d3;
  --no: #c62828;
  --sun: #038724;
  --sun-soft: #e3f3e6;
  --shadow: 0 1px 2px rgba(2, 45, 29, .06), 0 2px 10px rgba(2, 45, 29, .05);
  --ring: var(--sun);
  --note-bg: var(--sun-soft);
  --xp: var(--sun);
  --speak-bg: var(--sun-soft);
  --sel-bg: var(--sun-soft);
  --sel-ring: var(--sun);
  --goal: var(--sun);
  --logo-h: 52px;
  --logo-bg: #fbf5ec;
  --on-primary-dark: #1a0a08;
}
@media (prefers-color-scheme: dark) {
  :root {
    --navy: #f3efe6;
    --blue: #ff6b5e;
    --blue-2: #ff8a7f;
    --blue-soft: #3a1714;
    --bg: #0e1712;
    --card: #16221b;
    --text: #f1ede4;
    --muted: #a3ab9f;
    --line: #2b3a31;
    --sun: #3fbf62;
    --sun-soft: #143320;
  }
}

/* Akzent-Leiste: eine Reihe, Ausblenden-Knopf schmal */
.kb .k.sys { max-width: 44px; flex: 1; font-size: 14px; }

/* In Übungen ist Rot = falsch: Knöpfe dunkelgrün, nach richtiger Antwort grün */
.session .btn.primary { background: var(--navy); border-color: var(--navy); color: var(--bg); }
.session .fb.ok .btn.primary, .session .fb.almost .btn.primary { background: var(--ok); border-color: var(--ok); color: #fff; }
.session .end .btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.session .kb .k.mod.on { background: var(--navy); }