/* Design-Zusatz fuer Raetsel (Suchsel .sx, Kreuzwortraetsel .kz, Raetsel-Uebersicht) und die in Lesehaeppchen/Lektuere
   eingebetteten Raetsel. Nach design.css einbinden. Die Module (raetsel-basis.js, suchsel.js, kwr.js) fuegen ihr CSS
   zur Laufzeit ein und setzen ihre Farben ueber Variablen an .sx / .kz; hier werden diese Variablen ueberschrieben
   (:root:root:root .sx hat hoehere Spezifitaet als deren Hell- und Dunkel-Regeln). */
:root:root:root .sx,:root:root:root .kz{
  --from:#3F5BD0;--to:#2A9AC8;--from-t:#B3D2FF;
  --bg:transparent;--text:var(--d-ink);--text-2:var(--d-ink-soft);
  --card:rgba(255,255,255,.10);--frame:rgba(255,255,255,.10);
  --found:#2FAE6B;--selecting:#3D6FD6;--active:#3D6FD6;--linie:#2C4A94;--zelle:#1B3170;
  --tipp:#FFB020;--rand:rgba(255,255,255,.30);--fail:#E5484D;--ring:#FFD166;
}
:root:root .sx-viewport,:root:root .kz-viewport{box-shadow:var(--d-card-shadow)}
:root:root .sx-brett-rahmen,:root:root .sx-liste-kasten,:root:root .kz-rahmen,:root:root .kz-liste-kasten{
  border:var(--d-card-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root:root .sx-pille{box-shadow:var(--d-small-shadow);border:var(--d-card-border)}
:root:root .sx-hero,:root:root .kz-hero{box-shadow:var(--d-card-shadow)}
:root:root .rb-dialog{background:var(--d-surface);color:var(--d-ink);border:1px solid rgba(255,255,255,.3)}
:root:root .rb-dialog button{background:rgba(255,255,255,.08);color:var(--d-ink);border-color:rgba(255,255,255,.4)}
:root:root .rb-dialog button.rb-ja{background:var(--d-btn-bg);color:var(--d-btn-ink);border-color:transparent}
:root:root .rb-toast{background:var(--d-surface);color:var(--d-ink);border:1px solid rgba(255,255,255,.3)}

/* Zurueck-Link und Anmeldeleiste der Seiten */
.backlink{color:var(--d-nr-ink)}
.lw-leiste .lw-status{color:var(--d-ink-soft)}
.testbanner{color:#5a2d00}

/* Raetsel-Uebersicht (raetsel/index.html, raetsel/suchsel/index.html): gleiche Variablen wie die Lesehaeppchen-Seiten */
:root:root:root{
  --paper:rgba(255,255,255,.08);--card:rgba(255,255,255,.10);
  --ink:var(--d-ink);--ink-soft:var(--d-ink-soft);--line:rgba(255,255,255,.24);
  --accent:#7FB2FF;--accent-bg:#1E2B44;--gold:var(--d-honig);
  --radius-lg:var(--d-r-l);--radius-md:var(--d-r-m);--shadow:var(--d-card-shadow);
}
header.site{background:rgba(11,26,69,.78);border-bottom:var(--d-card-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.hero h1{color:var(--d-ink)}