/*
 * SLF Shop UX – Shop-Einstieg & Filterleiste
 *
 * Alles unter .slf-shop-start bzw. .slf-filterbar gekapselt, damit Divi
 * und WooCommerce unberührt bleiben. Farben: SLF-Pink #ff0077,
 * SLF-Navy #29314f.
 */

.slf-shop-start,
.slf-filterbar,
.slf-rubriken {
	--slf-pink: #ff0077;
	--slf-navy: #29314f;
	--slf-line: #e4e7ef;
	--slf-muted: #6b7280;
	--slf-bg: #f6f7fa;
	--slf-radius: 14px;
	box-sizing: border-box;
}

.slf-shop-start *,
.slf-filterbar *,
.slf-rubriken * {
	box-sizing: inherit;
}

/* ---------------------------------------------------------- Suche */

.slf-hero {
	background: var(--slf-bg);
	border-radius: 18px;
	padding: 34px 28px 28px;
	margin-bottom: 44px;
	text-align: center;
}

.slf-hero__title {
	margin: 0 0 6px;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--slf-navy);
}

.slf-hero__sub {
	margin: 0 0 20px;
	color: var(--slf-muted);
	font-size: 16px;
}

.slf-hero__form {
	display: flex;
	gap: 8px;
	max-width: 620px;
	margin: 0 auto;
}

.slf-hero__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	font-size: 16px;
	color: var(--slf-navy);
	background: #fff;
	border: 1px solid var(--slf-line);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(41, 49, 79, 0.06);
}

.slf-hero__input:focus {
	outline: none;
	border-color: var(--slf-pink);
	box-shadow: 0 0 0 3px rgba(255, 0, 119, 0.15);
}

.slf-hero__submit {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 26px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--slf-pink);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.slf-hero__submit:hover {
	background: #e0006a;
}

.slf-hero__quick {
	margin: 16px 0 0;
	font-size: 14px;
	color: var(--slf-muted);
}

.slf-hero__quick a {
	display: inline-block;
	margin: 4px 3px 0;
	padding: 5px 13px;
	color: var(--slf-navy);
	background: #fff;
	border: 1px solid var(--slf-line);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.slf-hero__quick a:hover {
	color: var(--slf-pink);
	border-color: var(--slf-pink);
}

/* -------------------------------------------------- Abschnitts-Titel */

.slf-section {
	margin-bottom: 44px;
}

.slf-section__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 18px;
}

.slf-section__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--slf-navy);
}

.slf-section__note {
	font-size: 14px;
	color: var(--slf-muted);
}

/* ------------------------------------------------- Produktart-Grid */

.slf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
}

.slf-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--slf-line);
	border-radius: var(--slf-radius);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.slf-card:hover {
	transform: translateY(-3px);
	border-color: #d6dae6;
	box-shadow: 0 10px 24px rgba(41, 49, 79, 0.12);
}

.slf-card__media {
	position: relative;
	aspect-ratio: 4 / 5;
	background: #eef0f5;
	overflow: hidden;
}

.slf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.slf-card:hover .slf-card__media img {
	transform: scale(1.04);
}

.slf-card__body {
	padding: 13px 14px 15px;
}

.slf-card__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--slf-navy);
}

.slf-card__count {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--slf-muted);
}

/* Kleine Variante für die Bereiche-Zeile. */

.slf-grid--small {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}

.slf-grid--small .slf-card__media {
	aspect-ratio: 16 / 10;
}

.slf-grid--small .slf-card__title {
	font-size: 14px;
}

/* -------------------------------------------------- Suchvorschläge */

.slf-hero__form {
	position: relative;
}

.slf-vorschlag {
	position: absolute;
	z-index: 50;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	max-height: 70vh;
	overflow-y: auto;
	padding: 6px;
	text-align: left;
	background: #fff;
	border: 1px solid var(--slf-line);
	border-radius: 12px;
	box-shadow: 0 16px 38px rgba(41, 49, 79, 0.18);
}

.slf-vorschlag__zeile {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--slf-navy);
}

.slf-vorschlag__zeile:hover {
	background: var(--slf-bg);
}

.slf-vorschlag__zeile img,
.slf-vorschlag__leer {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	object-fit: cover;
	border-radius: 6px;
	background: #eef0f5;
}

.slf-vorschlag__zeile--term .slf-vorschlag__name {
	font-weight: 600;
}

.slf-vorschlag__zeile--term::before {
	content: "";
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 6px;
	background: var(--slf-bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329314f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.slf-vorschlag__name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.slf-vorschlag__meta {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--slf-muted);
	white-space: nowrap;
}

.slf-vorschlag__meta del {
	display: none;
}

.slf-vorschlag__alle {
	display: block;
	margin-top: 4px;
	padding: 11px 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--slf-pink);
	text-align: center;
	text-decoration: none;
	border-top: 1px solid var(--slf-line);
}

.slf-vorschlag__nichts {
	margin: 0;
	padding: 14px 12px;
	font-size: 14px;
	color: var(--slf-muted);
}

/* ------------------------------------------- Hinweis auf die Seitensuche */

.slf-suche-hinweis {
	margin: 0 0 18px;
	font-size: 14px;
	color: var(--slf-muted, #6b7280);
}

.slf-suche-hinweis a {
	color: #ff0077;
	text-decoration: underline;
}

/* ------------------------------------------------------- Marken */

.slf-marken {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}

.slf-marke {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 86px;
	padding: 14px 12px;
	background: #fff;
	border: 1px solid var(--slf-line);
	border-radius: var(--slf-radius);
	text-decoration: none;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.slf-marke:hover {
	border-color: var(--slf-navy);
	box-shadow: 0 6px 18px rgba(41, 49, 79, 0.1);
}

/* Mit Logo: einheitliche Logofläche, damit breite Wortmarken (Cutter & Buck)
   und kompakte (Craft) gleich gewichtig wirken. */
.slf-marke--logo {
	position: relative;
	min-height: 104px;
	gap: 8px;
}

.slf-marke__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
}

/* Nicht auf das Theme verlassen: Name nur für Screenreader. */
.slf-marke .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.slf-marke__logo img {
	display: block;
	max-width: calc(72% * var(--slf-logo-skala, 1));
	max-height: calc(100% * var(--slf-logo-skala, 1));
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Linie einer Marke unter dem gemeinsamen Logo («Printer» → RED, PRIME …). */
.slf-marke__linie {
	margin-top: -4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slf-navy);
}

.slf-marke__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--slf-navy);
	line-height: 1.2;
}

.slf-marke__anzahl {
	font-size: 12px;
	color: var(--slf-muted);
}

/* ------------------------------------------------------- Teaser */

.slf-teaser {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding: 26px 28px;
	margin-bottom: 44px;
	background: var(--slf-navy);
	border-radius: 18px;
	color: #fff;
}

.slf-teaser__text {
	flex: 1 1 320px;
}

.slf-teaser__title {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 700;
	color: #fff;
}

.slf-teaser__sub {
	margin: 0;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
}

.slf-teaser__btn {
	flex: 0 0 auto;
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--slf-pink);
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.15s ease;
}

.slf-teaser__btn:hover {
	background: #e0006a;
	color: #fff;
}

/* ------------------------------------------- Divi-Seitenleiste weg */

/*
 * Auf Produktlisten stand rechts Divis Blog-Seitenleiste: Suchfeld,
 * «Neueste Beiträge», «Neueste Kommentare». Für einen Shop ist das
 * sinnlos – die Produktsuche steht im Kopf, Beiträge gehören ins Blog –
 * und sie nimmt ein Fünftel der Breite weg, die den Produktkacheln fehlt.
 *
 * Divi bietet die Wahl «Volle Breite» nur für Seiten und Beiträge, nicht
 * für Archive. Darum hier über die Darstellung. Kein !important nötig:
 * body.woocommerce-page #left-area sticht Divis #left-area bereits.
 *
 * Gilt nur auf WooCommerce-Seiten (Body-Klasse woocommerce-page) – das
 * Blog behält seine Seitenleiste. Das Stylesheet selbst lädt ohnehin nur
 * dort, wo Shop-UX etwas ausgibt.
 */

body.woocommerce-page #sidebar {
	display: none;
}

body.woocommerce-page #left-area {
	width: 100%;
	float: none;
	padding-right: 0;
}

/* Divi zieht die Trennlinie als Pseudo-Element des Containers. */
body.woocommerce-page.et_right_sidebar #main-content .container:before,
body.woocommerce-page.et_left_sidebar #main-content .container:before {
	display: none;
}

/* ------------------------------------------------------ Rubriken */

/*
 * Steht über der Filterleiste auf Markenseiten. Bewusst kräftiger als die
 * Filter-Chips – es ist der Einstieg, nicht eine Verfeinerung.
 */

.slf-rubriken {
	margin: 0 0 18px;
}

.slf-rubriken__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
}

.slf-rubriken__label {
	font-size: 16px;
	font-weight: 700;
	color: var(--slf-navy);
}

.slf-rubriken__note {
	font-size: 13px;
	color: var(--slf-muted);
}

.slf-rubriken__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slf-rubriken__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.slf-rubriken__item {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 9px 14px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--slf-navy);
	background: #fff;
	border: 1px solid var(--slf-line);
	border-radius: 999px;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.slf-rubriken__item:hover,
.slf-rubriken__item:focus {
	color: var(--slf-pink);
	border-color: var(--slf-pink);
	text-decoration: none;
}

.slf-rubriken__name {
	font-weight: 600;
}

.slf-rubriken__count {
	font-size: 12px;
	color: var(--slf-muted);
}

.slf-rubriken__item:hover .slf-rubriken__count {
	color: inherit;
}

/* --------------------------------------------------- Filterleiste */

.slf-filterbar {
	margin: 0 0 26px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--slf-line);
	border-radius: var(--slf-radius);
}

.slf-filterbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.slf-filterbar__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--slf-navy);
	margin-right: 2px;
}

.slf-drop {
	position: relative;
}

.slf-drop > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	font-size: 14px;
	color: var(--slf-navy);
	background: #fff;
	border: 1px solid var(--slf-line);
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
	user-select: none;
	white-space: nowrap;
}

.slf-drop > summary::-webkit-details-marker {
	display: none;
}

.slf-drop > summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	opacity: 0.55;
}

.slf-drop[open] > summary,
.slf-drop > summary:hover {
	border-color: var(--slf-navy);
}

.slf-drop--active > summary {
	color: #fff;
	background: var(--slf-navy);
	border-color: var(--slf-navy);
}

.slf-drop__panel {
	position: absolute;
	z-index: 40;
	top: calc(100% + 8px);
	left: 0;
	min-width: 240px;
	max-height: 340px;
	overflow-y: auto;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--slf-line);
	border-radius: 12px;
	box-shadow: 0 14px 34px rgba(41, 49, 79, 0.16);
}

.slf-drop__panel--wide {
	min-width: 320px;
}

.slf-opt {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 6px;
	font-size: 14px;
	color: var(--slf-navy);
	border-radius: 8px;
	cursor: pointer;
}

.slf-opt:hover {
	background: var(--slf-bg);
}

.slf-opt input {
	margin: 0;
	accent-color: var(--slf-pink);
}

.slf-opt__count {
	margin-left: auto;
	font-size: 12px;
	color: var(--slf-muted);
}

.slf-swatch {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(41, 49, 79, 0.2);
	flex: 0 0 auto;
}

/* Farb-Panel zweispaltig – 10 Familien passen so ohne Scrollen. */
.slf-drop__panel--colors {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 10px;
}

.slf-price {
	display: flex;
	align-items: center;
	gap: 8px;
}

.slf-price input {
	width: 92px;
	height: 38px;
	padding: 0 10px;
	font-size: 14px;
	border: 1px solid var(--slf-line);
	border-radius: 8px;
}

.slf-drop__apply {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 9px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: var(--slf-navy);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}

.slf-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--slf-line);
}

.slf-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 8px 5px 12px;
	font-size: 13px;
	color: var(--slf-navy);
	background: var(--slf-bg);
	border-radius: 999px;
	text-decoration: none;
}

.slf-chip__x {
	font-size: 15px;
	line-height: 1;
	color: var(--slf-muted);
}

.slf-chip:hover .slf-chip__x {
	color: var(--slf-pink);
}

.slf-chips__reset {
	font-size: 13px;
	color: var(--slf-muted);
	text-decoration: underline;
}

.slf-filterbar__count {
	margin-left: auto;
	font-size: 14px;
	color: var(--slf-muted);
}

/* ------------------------------------- Lücke vor dem ersten Artikel */

/*
 * WooCommerce räumt hinter der Produktliste die Floats auf – mit je einem
 * leeren ::before und ::after. Divi stellt die Liste in den Theme-Optionen
 * aber auf «display: grid» um, und dort zählt jedes Pseudo-Element als
 * vollwertiges Rasterfeld: Das ::before belegt Platz eins, jeder Artikel
 * rutscht eine Spalte nach rechts, und oben links klafft eine Lücke.
 * Im Raster gibt es keine Floats, also braucht es die Aufräumhilfe nicht.
 * Das führende body hebt die Regel knapp über die von WooCommerce –
 * ohne !important, damit sie überschreibbar bleibt.
 */
body.woocommerce-shop ul.products::before,
body.woocommerce-shop ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after,
body.tax-product_tag ul.products::before,
body.tax-product_tag ul.products::after,
body.tax-product_brand ul.products::before,
body.tax-product_brand ul.products::after,
body.tax-slf_produktart ul.products::before,
body.tax-slf_produktart ul.products::after,
body.tax-slf_bereich ul.products::before,
body.tax-slf_bereich ul.products::after {
	display: none;
}

/* --------------------------------- Stimmungsbild auf Markenseiten */

/*
 * Das Bild hängt sich an #left-area und liegt damit immer oben am
 * Seitenkopf – unabhängig davon, an welcher Stelle im Dokument es
 * ausgegeben wurde. Titel, Rubriken und Filterleiste bekommen eine eigene
 * Ebene, sonst verschwänden sie dahinter.
 *
 * Die weiche Unterkante ist kein Zierrat: Ohne sie bricht das Bild mitten
 * im Inhalt hart ab und sieht nach Fehler aus.
 */
body.tax-product_brand #left-area {
	position: relative;
}

.slf-markenbild {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 250px;
	z-index: 0;
	background-size: cover;
	background-position: center 22%;
	opacity: 0.3;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

body.tax-product_brand .woocommerce-products-header,
body.tax-product_brand .slf-rubriken,
body.tax-product_brand .slf-filterbar {
	position: relative;
	z-index: 1;
}

@media (max-width: 640px) {
	.slf-markenbild {
		height: 170px;
	}
}

/* ------------------------------------------ Dichteres Produktraster */

/*
 * Divi stellt die Produktliste nur auf den WooCommerce-eigenen Archiven auf
 * ein Raster um (Marke, Kategorie, Schlagwort, Shop). Unsere beiden eigenen
 * Achsen – /produktart/… und /einsatzbereich/… – kennt es nicht und zeigt
 * Divis Grundeinstellung: drei Kacheln pro Reihe, je 306 px. Die Bilder
 * liegen aber nur mit 300 px vor und wurden dort hochgerechnet, also leicht
 * unscharf. Schmaler ist hier zugleich schärfer.
 *
 * Darum ein gemeinsames Raster für alle Produktlisten. `auto-fill` bestimmt
 * die Spaltenzahl aus der verfügbaren Breite – auf dem Handy bleiben so von
 * selbst zwei Spalten, ohne eigene Umbruchregeln. 155 px ergeben auf dem
 * 1080-px-Inhaltsbereich sechs Kacheln pro Reihe statt drei.
 *
 * Das !important ist hier Notwendigkeit, nicht Bequemlichkeit: Divis Regel
 * aus den Theme-Optionen trägt selbst !important.
 *
 * Die Shop-Startseite bleibt bewusst aussen vor (`woocommerce-shop` fehlt
 * oben): Dort stehen keine Artikel, sondern die grossen Einstiegskacheln.
 */
body.tax-slf_produktart ul.products,
body.tax-slf_bereich ul.products,
body.tax-product_brand ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.search-results ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
	gap: 22px !important;
	margin: 0 0 28px !important;
}

/*
 * Divis Float-Layout gibt jeder Kachel feste Breite und Aussenabstände mit.
 * Im Raster regeln das Spalten und `gap`; bleiben die alten Werte stehen,
 * ragen die Kacheln aus ihren Feldern. `float`/`clear` ignoriert das Raster
 * ohnehin – sie stehen hier nur, damit nichts davon zurückkommt.
 */
body.tax-slf_produktart ul.products > li.product,
body.tax-slf_bereich ul.products > li.product,
body.tax-product_brand ul.products > li.product,
body.tax-product_cat ul.products > li.product,
body.tax-product_tag ul.products > li.product,
body.search-results ul.products > li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/*
 * Auf dem Handy bleibt vom Inhaltsbereich nur rund 312 px übrig. Zwei Kacheln
 * à 155 px plus 22 px Abstand brauchen 332 px – es fehlen zwanzig, und
 * `auto-fill` fällt auf eine einzige Riesenkachel pro Reihe zurück.
 * Nachgemessen: 312 px ergaben eine Spalte, erst ab 355 px waren es zwei.
 * Mit 130 px und schmalerem Abstand stehen schon ab 280 px zwei nebeneinander.
 */
@media (max-width: 640px) {
	body.tax-slf_produktart ul.products,
	body.tax-slf_bereich ul.products,
	body.tax-product_brand ul.products,
	body.tax-product_cat ul.products,
	body.tax-product_tag ul.products,
	body.search-results ul.products {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
		gap: 14px !important;
	}
}

/* ------------------------------------------------------- Mobile */

@media (max-width: 640px) {
	.slf-hero {
		padding: 24px 16px 20px;
	}

	.slf-hero__title {
		font-size: 22px;
	}

	.slf-hero__form {
		flex-direction: column;
	}

	.slf-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.slf-section__title {
		font-size: 19px;
	}

	.slf-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* Auf dem Handy bleiben im Divi-Inhalt rund 285 px – mit «mindestens
	   150 px» stand sonst jede der 15 Marken einzeln untereinander. */
	.slf-marken {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.slf-marke {
		min-height: 72px;
		padding: 12px 8px;
	}

	.slf-marke--logo {
		min-height: 88px;
	}

	.slf-marke__logo {
		height: 36px;
	}

	.slf-card__body {
		padding: 10px 11px 12px;
	}

	.slf-card__title {
		font-size: 14px;
	}

	.slf-filterbar__row {
		gap: 8px;
	}

	.slf-drop__panel {
		position: fixed;
		left: 12px;
		right: 12px;
		top: auto;
		min-width: 0;
	}

	.slf-filterbar__count {
		width: 100%;
		margin-left: 0;
	}
}