@import url("design-raetsel.css");
/* Design-Zusatz fuer die Lesehaeppchen (Seiten aus bereiche/lesehaeppchen/template.html).
   Nach design.css einbinden. Die Seiten kennen schon einen Dunkelmodus; hier wird er auf das gemeinsame
   Design (Dunkelblau, Glas) abgebildet. Kategorie-Farben: <html data-cat="..."> setzt die helle Fassung. */
: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);
  --gold:var(--d-honig);--gold-bg:var(--d-honig-bg);
  --teal:var(--d-tuerkis);--teal-bg:var(--d-tuerkis-bg);
  --berry:#E58BB6;--berry-bg:#4A2140;
  --green:var(--d-ok);--green-bg:var(--d-ok-bg);
  --red:var(--d-bad);--red-bg:var(--d-bad-bg);
  --radius-lg:var(--d-r-l);--radius-md:var(--d-r-m);--radius-sm:var(--d-r-s);
  --shadow:var(--d-card-shadow);
}
/* Kategorie-Farben (auf dunklem Grund aufgehellt; --cat = Ueberschrift/Rand, --cat-text = Etikett) */
html[data-cat="tiere"]{--cat:#5FD3B0;--cat-bg:rgba(95,211,176,.20);--cat-text:#B2F2DD}
html[data-cat="personen"]{--cat:#E5B65C;--cat-bg:rgba(229,182,92,.20);--cat-text:#F8DD9E}
html[data-cat="pflanzen"]{--cat:#A5C85A;--cat-bg:rgba(165,200,90,.20);--cat-text:#D3EAA0}
html[data-cat="berufe"]{--cat:#F0A15D;--cat-bg:rgba(240,161,93,.20);--cat-text:#FFCFA3}
html[data-cat="wissen"]{--cat:#A99BFF;--cat-bg:rgba(169,155,255,.22);--cat-text:#D6CEFF}
html[data-cat="bekannte-ereignisse"]{--cat:#7FB2FF;--cat-bg:rgba(127,178,255,.22);--cat-text:#C0D9FF}
html[data-cat="sportarten"]{--cat:#84B5D6;--cat-bg:rgba(132,181,214,.20);--cat-text:#C0D9EA}

/* Kopfleiste und Karten: Glas */
header.site{background:rgba(11,26,69,.78);border-bottom:var(--d-card-border);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
section.card,.steckbrief,.modal{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)}
.steckbrief{border:2.5px solid var(--cat)}
.modal{background:var(--d-surface)}
.modal-overlay{background:rgba(3,10,40,.65)}
.progress-track{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2)}
.badge-level{color:#FFD97A}
.reading-text span.hinweis{color:#1F1B14}
a{color:var(--d-tuerkis)}
.knifflig-tag,.task-number{color:#14123A}
.done-btn.is-done{color:#0E2A1A}
.mc-option,.neu-btn,button.level-switch{background:var(--d-card-bg);color:var(--d-ink)}
textarea{background:rgba(255,255,255,.08);color:var(--d-ink)}
textarea::placeholder{color:var(--d-ink-soft)}

/* Tippflaechen mindestens 44 px (Rahmen 6a) */
header.site .brand,.back-link,.portal-link{display:inline-flex;align-items:center;min-height:44px}