/**
 * .angebot-categories – Loop Grid der Angebots-Kategorien.
 * Elementor rendert dieses Loop Grid standardmässig als CSS-Grid
 * (+ Masonry-JS mit absoluter Positionierung einzelner Items).
 * Hier stattdessen: Flexbox, Items so breit wie ihr Inhalt,
 * gleichmässiger Abstand, Zeilenumbruch nur zwischen Items – nie
 * innerhalb eines Begriffs (white-space: nowrap auf dem Titel).
 */

.angebot-categories.elementor-widget-loop-grid .elementor-loop-container {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	gap: 1px 40px !important;
	grid-template-columns: none !important;
}

.angebot-categories .e-loop-item {
	position: static !important;
	top: auto !important;
	left: auto !important;
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
	/* Elementors Masonry-JS positioniert Items per translate3d(x,y,0) statt
	   top/left – ohne diesen Reset bleibt der ursprüngliche Y-Versatz erhalten
	   und einzelne Items (meist das letzte) wirken vertikal verschoben. */
	transform: none !important;
}

.angebot-categories .e-loop-item .e-flexbox-base {
	width: fit-content;
}

.angebot-categories .e-loop-item h2,
.angebot-categories .e-loop-item .e-heading-link-base {
	white-space: nowrap;
}