/*
 * Bumblebee Nährwerte – Leiste „Was steckt drin?“ (Histamin + Allergene), Version 1.
 * Farben nur aus dem CI-Guide: kein Rot, kein Grün als „sicher“; Bedeutung immer per Wort + Symbol,
 * nie nur über die Farbe. Alle Klassen beginnen mit „bbwsd-“.
 * Das Theme Creativeily färbt in Beiträgen alle Rahmen grau (.single .wrapmain article * { border-color }):
 * darum stehen die Rahmenfarben mit !important. Version 1.1.0.
 */

.bbwsd {
	--bbwsd-pflaume: #4b2a5c;
	--bbwsd-hummelgelb: #f5d12a;
	--bbwsd-flieder: #ba9bc4;
	--bbwsd-himbeere: #b0305a;
	--bbwsd-sahne: #fff9ef;
	--bbwsd-flieder-hell: #f3eaf5;
	--bbwsd-tinte: #2a2230;
	--bbwsd-gedaempft: #6a5e70;
	--bbwsd-linie: #e6dae8;
	--bbwsd-weiss: #ffffff;

	box-sizing: border-box;
	max-width: 720px;
	margin: 16px 0 32px;
	padding: 24px;
	background: var(--bbwsd-weiss);
	border: 1px solid var(--bbwsd-linie) !important;
	border-radius: 20px;
	color: var(--bbwsd-tinte);
	font-family: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.45;
}

.bbwsd *,
.bbwsd *::before,
.bbwsd *::after {
	box-sizing: border-box;
}

.bbwsd .bbwsd-titel {
	margin: 0;
	padding: 0;
	font-family: Fraunces, Georgia, serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--bbwsd-pflaume);
}

.bbwsd .bbwsd-bezug {
	margin: 2px 0 12px;
	font-size: 14px;
	color: var(--bbwsd-gedaempft);
}

/* Eine Zeile je Stoff: Name, Chip, Satz */
.bbwsd .bbwsd-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--bbwsd-linie) !important;
}

.bbwsd .bbwsd-stoff {
	flex: 0 0 96px;
	margin: 0;
	font-weight: 700;
	color: var(--bbwsd-pflaume);
}

.bbwsd .bbwsd-text {
	flex: 1 1 240px;
	margin: 0;
}

.bbwsd .bbwsd-chips {
	display: flex;
	flex: 1 1 240px;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bbwsd .bbwsd-chips li {
	margin: 0;
	list-style: none;
}

.bbwsd .bbwsd-chips li::before {
	content: none;
}

/* Chips */
.bbwsd .bbwsd-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 4px 12px;
	border: 1px solid transparent !important;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.bbwsd .bbwsd-symbol {
	display: inline-block;
	min-width: 1em;
	text-align: center;
	font-weight: 800;
}

/* viel: Hummelgelb mit Tinte (10,3 : 1) */
.bbwsd .bbwsd-chip--viel {
	background: var(--bbwsd-hummelgelb);
	color: var(--bbwsd-tinte);
}

/* etwas: Flieder hell mit Pflaume (10,0 : 1) */
.bbwsd .bbwsd-chip--etwas {
	background: var(--bbwsd-flieder-hell);
	border-color: var(--bbwsd-flieder) !important;
	color: var(--bbwsd-pflaume);
}

/* wenig: neutral, Sahne mit Rahmen in Linie, Schrift Gedämpft – bewusst kein Grün */
.bbwsd .bbwsd-chip--wenig {
	background: var(--bbwsd-sahne);
	border-color: var(--bbwsd-linie) !important;
	color: var(--bbwsd-gedaempft);
	font-weight: 600;
}

/* unklar: gestrichelter Rahmen und „?“ */
.bbwsd .bbwsd-chip--unklar {
	background: var(--bbwsd-weiss);
	border: 2px dashed var(--bbwsd-gedaempft) !important;
	color: var(--bbwsd-tinte);
}

/* Allergen enthalten: wie Info-Chip im CI */
.bbwsd .bbwsd-chip--allergen {
	background: var(--bbwsd-flieder-hell);
	color: var(--bbwsd-pflaume);
}

/* Allergen je nach Produkt: nur Umriss */
.bbwsd .bbwsd-chip--kann {
	background: var(--bbwsd-weiss);
	border-color: var(--bbwsd-flieder) !important;
	color: var(--bbwsd-pflaume);
}

.bbwsd .bbwsd-klein {
	font-weight: 400;
}

.bbwsd .bbwsd-merker {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--bbwsd-gedaempft);
}

/* Aufklappbar, gleiches Verhalten wie „Was ist das?“ in der Nährwert-Karte */
.bbwsd .bbwsd-info {
	margin: 12px 0 0;
	font-size: 14px;
}

.bbwsd .bbwsd-info summary {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 0;
	cursor: pointer;
	color: var(--bbwsd-himbeere);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	list-style: none;
}

.bbwsd .bbwsd-info summary::-webkit-details-marker {
	display: none;
}

.bbwsd .bbwsd-info summary::after {
	content: "\00a0+";
	content: "\00a0+" / "";
}

.bbwsd .bbwsd-info[open] summary::after {
	content: "\00a0–";
	content: "\00a0–" / "";
}

.bbwsd .bbwsd-info summary:focus-visible,
.bbwsd a:focus-visible {
	outline: 2px solid var(--bbwsd-himbeere);
	outline-offset: 2px;
	border-radius: 4px;
}

.bbwsd .bbwsd-info p {
	margin: 6px 0 2px;
}

.bbwsd .bbwsd-liste {
	display: grid;
	grid-template-columns: minmax(110px, max-content) 1fr;
	gap: 4px 12px;
	margin: 8px 0;
}

.bbwsd .bbwsd-liste dt {
	font-weight: 600;
	color: var(--bbwsd-pflaume);
}

.bbwsd .bbwsd-liste dd {
	margin: 0;
}

.bbwsd .bbwsd-quellen,
.bbwsd .bbwsd-stand {
	color: var(--bbwsd-gedaempft);
}

/* Pflicht-Kurzhinweis */
.bbwsd .bbwsd-hinweis {
	margin: 12px 0 0;
	padding: 10px 12px;
	background: var(--bbwsd-flieder-hell);
	border-radius: 12px;
	font-size: 14px;
	color: var(--bbwsd-pflaume);
}

.bbwsd a {
	color: var(--bbwsd-himbeere);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Nur für Redakteurinnen sichtbar */
.bbwsd-redaktion {
	max-width: 720px;
	margin: 0 0 24px;
	padding: 8px 12px;
	border: 2px dashed var(--bbwsd-gedaempft, #6a5e70) !important;
	border-radius: 12px;
	font-size: 14px;
}

@media (max-width: 480px) {
	.bbwsd {
		padding: 16px;
	}

	.bbwsd .bbwsd-stoff {
		flex-basis: 100%;
	}

	.bbwsd .bbwsd-liste {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.bbwsd .bbwsd-liste dd {
		margin-bottom: 6px;
	}
}

@media print {
	.bbwsd {
		break-inside: avoid;
		border-color: #999;
	}
}

/*
 * Theme-Festigung (getestet 9.11.2026 mit Theme- und Customizer-CSS der Live-Seite):
 * Das Zusätzliche CSS setzt „.wrapmain article .entry-content p, li“ auf 16px/400/1,4 und das Theme
 * färbt Text grau und richtet links aus. Diese Regeln sind spezifischer und stellen die Leiste wieder her.
 */
.wrapmain article .entry-content .bbwsd p,
.wrapmain article .entry-content .bbwsd li,
.wrapmain article .entry-content .bbwsd dt,
.wrapmain article .entry-content .bbwsd dd {
	color: var(--bbwsd-tinte);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
}

.wrapmain article .entry-content .bbwsd .bbwsd-bezug {
	font-size: 14px;
	color: var(--bbwsd-gedaempft);
}

.wrapmain article .entry-content .bbwsd .bbwsd-stoff {
	font-weight: 700;
	color: var(--bbwsd-pflaume);
}

.wrapmain article .entry-content .bbwsd .bbwsd-chip {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.wrapmain article .entry-content .bbwsd .bbwsd-chip--viel {
	color: var(--bbwsd-tinte);
}

.wrapmain article .entry-content .bbwsd .bbwsd-chip--etwas,
.wrapmain article .entry-content .bbwsd .bbwsd-chip--allergen,
.wrapmain article .entry-content .bbwsd .bbwsd-chip--kann {
	color: var(--bbwsd-pflaume);
}

.wrapmain article .entry-content .bbwsd .bbwsd-chip--wenig {
	color: var(--bbwsd-gedaempft);
	font-weight: 600;
}

.wrapmain article .entry-content .bbwsd .bbwsd-merker,
.wrapmain article .entry-content .bbwsd .bbwsd-quellen,
.wrapmain article .entry-content .bbwsd .bbwsd-stand {
	font-size: 14px;
	color: var(--bbwsd-gedaempft);
}

.wrapmain article .entry-content .bbwsd .bbwsd-info p,
.wrapmain article .entry-content .bbwsd .bbwsd-info dt,
.wrapmain article .entry-content .bbwsd .bbwsd-info dd {
	font-size: 14px;
}

.wrapmain article .entry-content .bbwsd .bbwsd-info dt {
	font-weight: 600;
	color: var(--bbwsd-pflaume);
}

.wrapmain article .entry-content .bbwsd .bbwsd-hinweis {
	font-size: 14px;
	color: var(--bbwsd-pflaume);
}