/* Design-Zusatz fuer die Lernwoerter-Wochenseiten (public/lernwoerter/woche-*.html, aus bereiche/Lernwörter/seite/woche.html).
   Nach design.css einbinden. Bildet die Variablen der Seite (--flaeche, --text, --akzent ...) auf das gemeinsame Design ab. */
:root:root:root{
  --bg:rgba(255,255,255,.07);--flaeche:rgba(255,255,255,.10);
  --text:var(--d-ink);--gedaempft:var(--d-ink-soft);
  --akzent:var(--d-honig);--akzent-dunkel:var(--d-honig);
  --richtig:var(--d-ok);--richtig-bg:var(--d-ok-bg);--falsch:var(--d-bad);--falsch-bg:var(--d-bad-bg);
  --violett:#7C69F0;--tuerkis:var(--d-tuerkis);--amber:var(--d-amber);
  --rand:rgba(255,255,255,.24);--schatten:var(--d-card-shadow);
  --r1:var(--d-r-l);--r2:var(--d-r-m);--r3:var(--d-r-s);
}
.zurueck,.merke,.karte,.buehne,.spalte,.btn.zweit{background:var(--d-card-bg);border:var(--d-card-border);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.zurueck{box-shadow:var(--d-small-shadow)}
.merke{border-left:8px solid var(--d-honig)}
.karte,.buehne{box-shadow:var(--d-card-shadow)}
.buehne{background:radial-gradient(ellipse at 50% 0,rgba(255,201,94,.22),transparent 70%),var(--d-card-bg)}
.btn.zweit{box-shadow:var(--d-small-shadow);color:var(--d-ink)}
.btn{color:#2B1F04}
.btn.richtig,.btn.falsch,.zelle.gut,.zelle.schlecht,.zelle.pfad{color:#0B1A45}
.meldung mark{background:#6A2B31;color:#FFC9CC}
.eingabe{background:rgba(255,255,255,.08);color:var(--d-ink)}
.eingabe::placeholder{color:var(--d-ink-soft)}

/* Menuekarten: Farbe als leuchtende Oberkante (wie die Kacheln der Startseite) */
.mkarte{--acc:var(--d-honig);position:relative;overflow:hidden;background:var(--d-card-bg);border:var(--d-card-border);
  box-shadow:var(--d-card-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.mkarte[data-farbe]{border:var(--d-card-border)}
.mkarte[data-farbe="1"]{--acc:var(--d-honig)}
.mkarte[data-farbe="2"]{--acc:var(--d-lila)}
.mkarte[data-farbe="3"]{--acc:var(--d-tuerkis)}
.mkarte[data-farbe="4"]{--acc:var(--d-amber)}
.mkarte::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--acc);box-shadow:0 0 14px var(--acc)}
.mkarte:active{box-shadow:var(--d-small-shadow)}