/* allergen-alert.css
   Kompakte Allergen-Warnung für Produktkarten, Einkaufsliste und Einkaufsmodus.
   Bewusst auffällig: die Warnung ist die einzige Information auf der Karte, die
   gesundheitlich relevant ist. Farbe transportiert nur Verstärkung – Icon und
   Text tragen die Bedeutung allein (Barrierefreiheit). */

.allergen-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    margin: var(--space-4) 0;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
    font-size: var(--text-13);
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
}

.allergen-alert-icon {
    flex: 0 0 auto;
}

.allergen-alert-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.allergen-alert--danger {
    background: rgba(220, 38, 38, 0.14);
    border-left-color: rgb(220, 38, 38);
}

.allergen-alert--trace,
.allergen-alert--uncertain {
    background: rgba(217, 119, 6, 0.14);
    border-left-color: rgb(217, 119, 6);
}

/* Enge Kontexte (Checkliste im Laden): schmaler, aber gleich deutlich. */
.allergen-alert--compact {
    margin: 3px 0 0;
    padding: var(--space-2) var(--space-6);
    font-size: var(--text-12);
}

/* Die Markierung der ganzen Karte (linker Rand) steht bewusst NICHT hier,
   sondern bei den jeweiligen Kartenstilen (list-items-basics.css,
   einkaufsmodus-map-checklist.css): dort gewinnt sie die Kaskade gegen die
   bestehenden Randfarben (z. B. `.list-item.matched`). */