/* ============================================================
   erinnerungen.css — „Erinnerung an alle“ (ADR-077)
   Eine Karte, die man nicht übersieht: weiß, warme Kante, Glocke,
   großer Titel, ein Satz, darunter wie lange noch. Ruhig, nicht laut.
   ============================================================ */
.er-karten { display: grid; gap: 12px; margin: 0 0 20px; }
.er-karte {
  display: grid; gap: 14px; padding: 18px 20px; border-radius: 20px;
  background: color-mix(in srgb, var(--gold) 10%, var(--karte));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--gold) 14%, transparent);
}
.er-kopf { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.er-zeichen {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 28%, var(--karte)); color: var(--text);
}
.er-text { display: grid; gap: 4px; min-width: 0; }
.er-wort { font-size: .82rem; font-weight: 650; color: var(--text-leise); }
.er-titel { font-size: 1.25rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
#inhalt .er-satz { margin: 2px 0 0; font-size: 1.02rem; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.er-wann { justify-self: start; margin-top: 6px; font-size: .85rem; font-weight: 650; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--text); }
.er-wann.er-letzter { background: color-mix(in srgb, var(--rot) 16%, transparent); color: var(--rot-text); }
.er-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .er-knoepfe > * { flex: 1 1 100%; } }

/* Verwaltung */
.er-punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); }
.er-punkt.er-heute { background: var(--gold); }
.er-punkt.er-aus { background: var(--still); }
.er-frage { display: block; font-weight: 600; margin-bottom: 8px; }
.er-genauer { display: grid; gap: 12px; margin-top: 12px; }
.er-genauer[hidden] { display: none; }
.er-gruppe { border: 1px solid var(--linie); border-radius: 14px; padding: 10px 14px 12px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.er-gruppe legend { padding: 0 6px; font-size: .9rem; font-weight: 600; color: var(--text-leise); }
.er-haken { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.er-haken input { width: 20px; height: 20px; accent-color: var(--akzent); }
.er-aktiv { margin-top: 4px; }
.bs-feld[hidden] { display: none; }