/* =============================================================================
   Foodlex — Allergen-Checker
   Bis zum 24.09.2026 ein <style>-Block in allergene-pruefen.html.
   Ausgelagert, damit die englische Fassung (/en/allergen-checker) exakt
   dasselbe Design nutzt. Eine Aenderung hier wirkt auf beide.
   ============================================================================= */
.checker { background: var(--color-paper); border: 1px solid var(--color-line-dark); border-radius: var(--radius-md); padding: 1.5rem; margin: 1.5rem 0 2rem; }
      .checker__input { width: 100%; min-height: 96px; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; padding: 0.75rem 0.85rem; border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm); background: var(--color-paper-shade); color: var(--color-ink); resize: vertical; box-sizing: border-box; }
      .checker__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.85rem; }
      .checker__hint { color: var(--color-ink-faded); font-size: 0.85rem; }
      .checker__results { margin-top: 1.4rem; }
      .checker__count { color: var(--color-ink-medium); font-size: 0.9rem; margin: 0 0 0.6rem; }
      .allergen-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
      .allergen-pill { font-size: 0.9rem; padding: 0.32rem 0.7rem; border-radius: var(--radius-sm); border: 1px solid transparent; }
      .allergen-pill--high { background: rgba(47, 74, 51, 0.10); color: var(--color-accent-green); border-color: rgba(47, 74, 51, 0.28); }
      .allergen-pill--medium { background: rgba(184, 138, 46, 0.13); color: var(--color-accent-gold-strong); border-color: rgba(184, 138, 46, 0.35); }
      .allergen-pill--low { background: var(--color-paper-shade); color: var(--color-ink-faded); border-color: var(--color-line-dark); }
      .allergen-pill__trigger { opacity: 0.72; }
      .checker__none { color: var(--color-ink-medium); }
      .checker__note { display: flex; gap: 0.55rem; margin-top: 1.1rem; padding: 0.7rem 0.9rem; background: var(--color-paper-shade); border-radius: var(--radius-sm); font-size: 0.82rem; color: var(--color-ink-faded); line-height: 1.55; }
      .allergen-index { columns: 2; column-gap: 1.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
      .allergen-index li { margin: 0 0 0.35rem; }
      @media (max-width: 520px) { .allergen-index { columns: 1; } }