/**
 * Produktkatalog: Raster und Filter.
 *
 * Farben und Schriften stammen aus dem Elementor-Kit, also aus den
 * --e-global-*-Variablen auf :root. Damit die Darstellung auch dann nicht
 * auseinanderfällt, wenn der Kit einmal nicht geladen ist (Vorschau, abgeschaltetes
 * Elementor), werden sie hier einmal in eigene Variablen mit Rückfallwert
 * übersetzt - der zweite Wert in var() greift nur in diesem Fall.
 */

/* .sana-filter-wrap steht mit in der Liste, weil der Knopf zum Zurücksetzen
   außerhalb der Filterkarte liegt und die Variablen trotzdem braucht. */
.sana-catalog,
.sana-farben,
.sana-varianten,
.sana-zufall,
.sana-filter-wrap,
.sana-filter {
	--sana-primary: var(--e-global-color-primary, #1f2937);
	--sana-secondary: var(--e-global-color-secondary, #54595f);
	--sana-accent: var(--e-global-color-accent, #4f46e5);
	--sana-invert: var(--e-global-color-m1qrwis, #ffffff);

	/* Trennlinien im Filter: dieselbe Farbe wie der Text, nur schwach */
	--sana-divider: color-mix(in srgb, var(--sana-invert) 25%, transparent);

	--sana-border: #e5e7eb;
	--sana-muted: #6b7280;
	--sana-radius: 8px;

	box-sizing: border-box;
	color: #1f2937;
}

.sana-catalog *,
.sana-farben *,
.sana-varianten *,
.sana-zufall *,
.sana-filter-wrap * {
	box-sizing: border-box;
}

/* -------------------------------------------------- Raster */

.sana-catalog__count {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	color: var(--sana-muted);
}

.sana-grid {
	display: grid;
	/* --sana-columns kommt aus dem Shortcode-Attribut, Standard 3 */
	grid-template-columns: repeat(var(--sana-columns, 3), minmax(0, 1fr));
	gap: 1.25rem;
	/* Wäre auch die Vorgabe - steht hier, weil die gleiche Kartenhöhe daran
	   hängt: alle Karten einer Reihe werden auf die höchste gezogen. */
	align-items: stretch;
}

@media (max-width: 1024px) {
	.sana-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.sana-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------- Karte */

.sana-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--sana-border);
	border-radius: var(--sana-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sana-card:hover {
	border-color: #d1d5db;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Bildfläche randlos. Die Höhe gibt das Hauptbild selbst vor - eine fest
   quadratische Fläche ließe bei querformatigen Produktfotos oben und unten
   Weißraum stehen, weil contain das Bild dann einpasst statt es zu füllen.
   Das zweite Bild liegt darüber und blendet sich beim Überfahren ein. */
.sana-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #fff;
	border-bottom: 1px solid var(--sana-border);
}

.sana-card__img {
	transition: opacity 0.35s ease;
}

.sana-card__img--main {
	display: block;
	width: 100%;
	height: auto;
}

/* Das Hover-Bild liegt über dem ersten und übernimmt dessen Fläche. */
.sana-card__img--hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
}

/* Nur umschalten, wenn es ein zweites Bild gibt - :has hält das ohne JS zusammen */
.sana-card:hover .sana-card__img--hover,
.sana-card:focus-within .sana-card__img--hover {
	opacity: 1;
}

.sana-card:hover .sana-card__media:has(.sana-card__img--hover) .sana-card__img--main,
.sana-card:focus-within .sana-card__media:has(.sana-card__img--hover) .sana-card__img--main {
	opacity: 0;
}

/* Rückfall für Browser ohne :has - dort wird das zweite Bild überblendet,
   statt das erste auszublenden. Sieht bei freigestellten Produktfotos gleich aus. */
@supports not selector(:has(*)) {
	.sana-card__img--hover {
		background: #fff;
	}
}

/* Das Polster sitzt allein hier - das Bild darüber läuft bis an den Rand.
   Die Abstände zwischen Artikelnummer, Titel, Badges und Knopf macht row-gap;
   die Elemente selbst tragen deshalb keinen eigenen Außenabstand mehr.

   flex-grow zieht den Textteil auf die volle Kartenhöhe, der Knopf hängt sich
   darin mit margin-top: auto ans untere Ende. Zusammen mit den gleich hohen
   Karten steht er dadurch in jeder Karte einer Reihe auf derselben Höhe -
   auch wenn der Titel darüber unterschiedlich viele Zeilen braucht. */
.sana-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	row-gap: 15px;
	padding: 0.875rem;
}

.sana-card__sku {
	margin: 0;
	font-family: var(--e-global-typography-5cnihjb-font-family), Sans-serif;
	font-size: var(--e-global-typography-5cnihjb-font-size);
	font-weight: var(--e-global-typography-5cnihjb-font-weight);
	line-height: var(--e-global-typography-5cnihjb-line-height);
	letter-spacing: var(--e-global-typography-5cnihjb-letter-spacing);
	color: var(--sana-secondary);
}

/* Kein line-clamp: der Titel läuft über so viele Zeilen, wie er braucht. Die
   Karte fängt das ab, indem sie sich auf die höchste der Reihe zieht. */
.sana-card__title {
	margin: 0;
	font-family: var(--e-global-typography-z8yxp8z-font-family), Sans-serif;
	font-size: var(--e-global-typography-z8yxp8z-font-size);
	font-weight: var(--e-global-typography-z8yxp8z-font-weight);
	line-height: var(--e-global-typography-z8yxp8z-line-height);
	color: var(--sana-primary);
}

/* Der Elementor-Kit färbt Links über .elementor-kit-N a - eine Klasse und ein
   Element. Damit die Farbe hier gewinnt, braucht es eine Klasse mehr. */
.sana-card .sana-card__title a {
	color: inherit;
	text-decoration: none;
}

.sana-card .sana-card__title a:hover,
.sana-card .sana-card__title a:focus-visible {
	color: var(--sana-accent);
}

/* -------------------------------------------------- Badges */

.sana-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

/* Jedes Badge ist ein Link, der seinen Filter an- und wieder abschaltet.
   Der Elementor-Kit färbt Links über .elementor-kit-N a und .elementor-kit-N
   a:hover; deshalb steht vor jeder Regel hier eine Klasse mehr, als der Kit
   mitbringt - sonst gewinnt seine Linkfarbe. */
.sana-card__badges .sana-badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	text-decoration: none;
	font-family: var(--e-global-typography-5cnihjb-font-family), Sans-serif;
	font-size: var(--e-global-typography-5cnihjb-font-size);
	font-weight: var(--e-global-typography-5cnihjb-font-weight);
	line-height: var(--e-global-typography-5cnihjb-line-height);
	letter-spacing: var(--e-global-typography-5cnihjb-letter-spacing);
	color: var(--sana-secondary);
	border: 1px solid var(--sana-secondary);
	/* Die erste Zeile ist der Rückfall für Browser ohne color-mix (vor 2023) */
	background: #f3f4f6;
	background: color-mix(in srgb, var(--sana-secondary) 10%, white);
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

/* Der Filter dieses Badges ist gesetzt: gefüllt statt nur umrandet. */
.sana-card__badges .sana-badge.is-active {
	color: var(--sana-invert);
	background: var(--sana-secondary);
	border-color: var(--sana-secondary);
}

/* Überfahren schlägt beide Zustände - deshalb hinter der Aktiv-Regel */
.sana-card__badges .sana-badge:hover,
.sana-card__badges .sana-badge:focus-visible {
	color: var(--sana-accent)!important;
	border-color: var(--sana-accent);
}

/* Auf einem gefüllten Badge bleibt der Text hell - Akzent auf Akzent wäre
   nicht zu lesen. Die Rückmeldung beim Überfahren gibt hier der Rahmen. */
.sana-card__badges .sana-badge.is-active:hover,
.sana-card__badges .sana-badge.is-active:focus-visible {
	color: var(--sana-invert);
	border-color: var(--sana-accent);
}

/* -------------------------------------------------- Knopf */

/* Die Knöpfe sind Elementor-Buttons und holen Farbe, Schrift, Polster und
   Rundung aus den Button-Einstellungen des Kits. Hier steht nur die Lage:
   unten in der Karte, über die volle Breite. Für einen Knopf in eigener
   Breite die Regel .sana-card__more .elementor-button löschen. */
.sana-card__more {
	margin-top: auto;
}

.sana-card__more .elementor-button {
	display: block;
	width: 100%;
}

/* -------------------------------------------------- Leerzustand & Hinweise */

.sana-catalog__empty {
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--sana-muted);
	background: #fff;
	border: 1px dashed #d1d5db;
	border-radius: var(--sana-radius);
}

.sana-catalog__empty-title {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: #374151;
}

.sana-notice {
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	color: #92400e;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 6px;
}

/* -------------------------------------------------- Blättern */

.sana-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	justify-content: center;
	margin-top: 2rem;
}

.sana-pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.875rem;
	text-decoration: none;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-size: var(--e-global-typography-text-font-size);
	font-weight: var(--e-global-typography-text-font-weight);
	line-height: var(--e-global-typography-text-line-height);
	letter-spacing: var(--e-global-typography-text-letter-spacing);
	color: var(--sana-primary);
	background: var(--sana-invert);
	border: 1px solid var(--sana-primary);
	border-radius: 6px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sana-pagination a.page-numbers:hover,
.sana-pagination a.page-numbers:focus,
.sana-pagination .page-numbers.current {
	color: var(--sana-invert);
	background: var(--sana-primary);
	border-color: var(--sana-primary);
}

.sana-pagination .page-numbers.dots {
	color: var(--sana-primary);
	background: transparent;
	border-color: transparent;
}

/* -------------------------------------------------- Filter */

/* Die Karte ist das Formular selbst. Der Knopf zum Zurücksetzen steht darunter
   und außerhalb - er soll die angehakten Kästchen gerade nicht mitsenden.
   Deshalb die Klammer darum. */
.sana-filter {
	padding: 1rem;
	color: var(--sana-invert);
	background: var(--sana-primary);
	border-radius: var(--sana-radius);
}

/* Ab Tablet-Breite steht der Filter meist als Spalte neben dem Raster - und oft
   in einer mitlaufenden (sticky) Spalte. Wird er dort höher als der Bildschirm,
   käme man an sein unteres Ende sonst nicht mehr heran, weil die Spalte beim
   Rollen stehen bleibt. Deshalb rollt er ab dieser Höhe in sich selbst.

   Passt er auf den Schirm, greift nichts davon - und innerhalb einer Gruppe wird
   weiterhin nirgends gerollt. Auf dem Telefon steht der Filter im normalen Fluss,
   dort rollt die Seite.

   Läuft die Spalte mit Abstand nach oben mit, den Abstand hier nachziehen:
   .sana-filter { --sana-filter-offset: 120px; } */
@media (min-width: 768px) {
	.sana-filter {
		/* Die erste Zeile ist der Rückfall; dvh rechnet auf dem Telefon die
		   ein- und ausfahrende Adressleiste mit. */
		max-height: calc(100vh - var(--sana-filter-offset, 2rem));
		max-height: calc(100dvh - var(--sana-filter-offset, 2rem));
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
	}
}

/* Die erste Zeile ist jeweils der Rückfall für Browser ohne color-mix */
.sana-filter__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.75rem;
	margin-bottom: 0.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	border-bottom: 1px solid var(--sana-divider);
}

.sana-filter__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	font-family: var(--e-global-typography-155qtwi-font-family), Sans-serif;
	font-size: var(--e-global-typography-155qtwi-font-size);
	font-weight: var(--e-global-typography-155qtwi-font-weight);
	line-height: var(--e-global-typography-155qtwi-line-height);
	color: var(--sana-invert);
	/* Am Schreibtisch ist die Überschrift nur Überschrift - dort klappt nichts. */
	cursor: default;
}

.sana-filter__group {
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	border-bottom: 1px solid var(--sana-divider);
}

.sana-filter__group:last-of-type {
	border-bottom: 0;
}

.sana-filter__summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 0.25rem;
	font-family: var(--e-global-typography-z8yxp8z-font-family), Sans-serif;
	font-size: var(--e-global-typography-z8yxp8z-font-size);
	font-weight: var(--e-global-typography-z8yxp8z-font-weight);
	line-height: var(--e-global-typography-z8yxp8z-line-height);
	letter-spacing: var(--e-global-typography-z8yxp8z-letter-spacing);
	color: var(--sana-invert);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.sana-filter__summary::-webkit-details-marker {
	display: none;
}

/* Das Symbol steht inline im Markup und nimmt über currentColor die Farbe des
   Kopfes an. Zugeklappt zeigt es nach unten, aufgeklappt gedreht nach oben. */
.sana-filter__arrow {
	flex: none;
	margin-left: auto;
	transition: transform 0.2s ease;
}

.sana-filter__group[open] .sana-filter__arrow {
	transform: rotate(180deg);
}

/* Wie viele Einträge in dieser Gruppe angehakt sind - hell auf dunkel,
   sonst verschwände die Blase im Untergrund der Karte. */
.sana-filter__count {
	padding: 0.0625rem 0.375rem;
	font-size: 0.625rem;
	color: var(--sana-primary);
	background: var(--sana-invert);
	border-radius: 999px;
}

/* Kein eigener Rollbereich: eine aufgeklappte Gruppe zeigt alle ihre Werte auf
   einmal. Lang wird der Filter davon nicht, weil die Gruppen zugeklappt starten -
   offen ist nur, was per open-Attribut gesetzt ist oder einen Filter trägt. */
.sana-filter__options {
	padding: 0.25rem 0.25rem 0.75rem;
}

/* Die Farbgruppe steht als Raster; alle anderen als Liste. Welche das ist,
   entscheidet das Layout in SANA_Catalog::FILTERS. */
.sana-filter__options--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* Gemeinsam ist beiden Darstellungen nur die Farbe - Schrift und Anordnung nicht. */
.sana-filter__option,
.sana-filter__swatch {
	color: var(--sana-invert);
	cursor: pointer;
}

.sana-filter__option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3125rem 0.375rem;
	font-family: var(--e-global-typography-uichqbl-font-family), Sans-serif;
	font-size: var(--e-global-typography-uichqbl-font-size);
	font-weight: var(--e-global-typography-uichqbl-font-weight);
	line-height: var(--e-global-typography-uichqbl-line-height);
	border-radius: 4px;
}

.sana-filter__option:hover,
.sana-filter__swatch:hover {
	background: rgba(255, 255, 255, 0.12);
}

.sana-filter__option.is-disabled,
.sana-filter__swatch.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.sana-filter__label {
	flex-grow: 1;
}

/* Im Raster steht die Beschriftung unter der Grafik und soll sich nicht dehnen.
   Polster und Rundung tragen die Hervorhebung beim Überfahren - ohne sie klebte
   die Fläche direkt am Kreis. Wer sie eng haben will, streicht beide Zeilen. */
.sana-filter__swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.25rem;
	border-radius: 4px;
	font-family: var(--e-global-typography-5cnihjb-font-family), Sans-serif;
	font-size: var(--e-global-typography-5cnihjb-font-size);
	font-weight: var(--e-global-typography-5cnihjb-font-weight);
	line-height: var(--e-global-typography-5cnihjb-line-height);
	letter-spacing: var(--e-global-typography-5cnihjb-letter-spacing);
	text-align: center;
}

.sana-filter__swatch .sana-filter__label {
	flex-grow: 0;
}

/* Die Hülle gibt nur die Fläche vor. Sie trägt das Häkchen, das am Rand sitzt -
   im Kreis darunter wäre es abgeschnitten, der beschneidet ja das Bild rund. */
.sana-filter__swatch-figure {
	position: relative;
	display: block;
	flex: none;
	width: 50px;
	height: 50px;
}

/* Der Kreis trägt den Rahmen, das Bild darin läuft randlos bis an die Kante.
   50 px ist die Außenkante - box-sizing: border-box gilt im ganzen Filter, der
   Rahmen zählt also mit. Ohne hinterlegte Grafik bleibt der Kreis leer; die
   schwache Fläche lässt ihn dann gewollt aussehen statt vergessen. */
.sana-filter__swatch-media {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.12);
	border: 2px solid var(--sana-invert);
	border-radius: 100%;
	transition: border-color 0.15s ease;
}

.sana-filter__swatch-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Das Häkchen auf dem Rand des Kreises. Es liegt auf der Grafik, deshalb der
   Ring in der Farbe der Karte - sonst verschwimmt es mit dem Bild darunter. */
.sana-filter__swatch-check {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 18px;
	height: 18px;
	background: var(--sana-secondary);
	border-radius: 100%;
	box-shadow: 0 0 0 2px var(--sana-primary);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Derselbe Haken wie an den Kästchen: zwei Kanten eines gedrehten Rechtecks. */
.sana-filter__swatch-check::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 6px;
	width: 4px;
	height: 7px;
	border: solid var(--sana-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Ausgewählt: Rahmen auf --secondary wie beim Kästchen, dazu das Häkchen. */
.sana-filter__swatch input:checked + .sana-filter__swatch-figure .sana-filter__swatch-media {
	border-color: var(--sana-secondary);
}

.sana-filter__swatch input:checked + .sana-filter__swatch-figure .sana-filter__swatch-check {
	opacity: 1;
	transform: none;
}

.sana-filter__swatch input:focus-visible + .sana-filter__swatch-figure {
	outline: 2px solid var(--sana-invert);
	outline-offset: 2px;
	border-radius: 100%;
}

/* ---- Ausprägung "icon": nur das Symbol, hochkant und ohne alles Drumherum.
   Fehlt an einem Begriff die Grafik, bleibt die Fläche leer - anders als beim
   Kreis gibt es hier bewusst keinen Platzhalter, sonst stünde ein grauer Balken
   im Raster. Die Zeile bleibt trotzdem gleichmäßig, weil die Hülle ihre Maße
   auch ohne Bild behält. */
.sana-filter__swatch--icon .sana-filter__swatch-figure {
	width: 32px;
	height: 76px;
}

.sana-filter__swatch--icon .sana-filter__swatch-media {
	background: none;
	border: 0;
	border-radius: 0;
}

/* contain statt cover: ein Symbol darf nicht beschnitten werden. */
.sana-filter__swatch--icon .sana-filter__swatch-media img {
	object-fit: contain;
}

/* Ohne Kreis gibt es keinen Rand, auf dem das Häkchen sitzen könnte. Es rückt
   deshalb nach außen an die obere Ecke und verdeckt das Symbol nicht - bei nur
   32 px Breite läge es unten sonst mitten darauf. */
.sana-filter__swatch--icon .sana-filter__swatch-check {
	top: -6px;
	right: -6px;
	bottom: auto;
}

.sana-filter__swatch--icon input:focus-visible + .sana-filter__swatch-figure {
	border-radius: 4px;
}

/* ---- Ausprägung "row": Symbol links, Beschriftung rechts daneben, alle
   Einträge untereinander. Steht deshalb nicht im Raster, sondern in derselben
   Liste wie die Gruppen mit Kästchen - und hält sich an deren Polsterung, damit
   die Zeilen im Filter dieselbe Höhe bekommen. */
.sana-filter__swatch--row {
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
	padding: 0.3125rem 0.375rem;
	text-align: left;
}

/* Die feste Breite hält die Beschriftungen aller Zeilen auf einer Flucht.
   Die Maße selbst stehen weiter unten je Gruppe. */
.sana-filter__swatch--row .sana-filter__swatch-figure {
	width: 56px;
	height: 56px;
}

.sana-filter__swatch--row .sana-filter__swatch-media {
	background: none;
	border: 0;
	border-radius: 0;
}

.sana-filter__swatch--row .sana-filter__swatch-media img {
	object-fit: contain;
}

/* Die Beschriftung nimmt den Rest der Zeile ein - sonst endete die Fläche beim
   Überfahren mitten im Eintrag. */
.sana-filter__swatch--row .sana-filter__label {
	flex-grow: 1;
}

.sana-filter__swatch--row input:focus-visible + .sana-filter__swatch-figure {
	border-radius: 4px;
}

/* ---- Maße je Gruppe.
   Die Ausprägungen oben geben nur die Anordnung vor. Wie groß ein Symbol am Ende
   erscheint, entscheidet sein Zuschnitt: object-fit: contain passt es vollständig
   ein, und die knappere der beiden Seiten begrenzt. Ein quer geschnittenes Symbol
   in einer schmalen Fläche schrumpft deshalb auf einen Bruchteil - bei den queren
   Gruppen ist die Spaltenbreite der Engpass, und der lässt sich nur über weniger
   Spalten lösen.

   Wirkt ein Symbol zu klein, ist das hier die Stelle: die Fläche in Richtung
   seines Zuschnitts vergrößern, bei queren Symbolen notfalls eine Spalte weniger.
   Diese Blöcke müssen hinter denen der Ausprägungen stehen - gleiche Gewichtung,
   es entscheidet die Reihenfolge. */

/* Zwei statt drei Einträge je Reihe: bei der Aufstellart, weil die langen
   Beschriftungen in einem Drittel der Breite zu oft umbrächen, bei den Abteilen,
   weil ihre queren Symbole Breite brauchen. */
.sana-filter__options--aufstellart,
.sana-filter__options--abteile {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Hochkant: begrenzt wird von der Höhe, die Breite braucht nur so viel, wie das
   Symbol dabei einnimmt. */
.sana-filter__swatch--aufstellart .sana-filter__swatch-figure {
	width: 40px;
	height: 70px;
}

/* Flach und breit: fünf Abteile nebeneinander ergeben ein Verhältnis von gut
   3 : 1, das in eine hohe Fläche nur einen schmalen Streifen legen würde. */
.sana-filter__swatch--abteile .sana-filter__swatch-figure {
	width: 65px;
	height: 20px;
}

/* Schloss steht als Zeile untereinander - "Zylinderschloss" bliebe neben dem
   Symbol in einer halben Spalte kaum lesbar. Innerhalb der Fläche sitzt das
   Symbol mittig; darum kümmert sich object-fit: contain von selbst. */
.sana-filter__swatch--schlosstyp .sana-filter__swatch-figure {
	width: 50px;
	height: 50px;
}

/* -------------------------------------------------- Kästchen */

/* Das echte Kästchen bleibt bedienbar und mit der Tastatur erreichbar, ist aber
   unsichtbar; gezeichnet wird das Element dahinter - in der Liste das Kästchen,
   im Raster der Kreis. Nur so lassen sich Rahmen, Fläche und Haken getrennt
   einfärben; ein natives Kästchen gibt davon höchstens die Fläche her. */
.sana-filter__options input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.sana-filter__box {
	position: relative;
	flex: none;
	width: 1rem;
	height: 1rem;
	background: transparent;
	border: 1px solid var(--sana-invert);
	border-radius: 3px;
	transition: background-color 0.15s ease;
}

/* Der Haken: die rechte und die untere Kante eines gedrehten Rechtecks. */
.sana-filter__box::after {
	content: "";
	position: absolute;
	top: 0.0625rem;
	left: 0.3125rem;
	width: 0.25rem;
	height: 0.5rem;
	border: solid var(--sana-accent);
	border-width: 0 2px 2px 0;
	opacity: 0;
	transform: rotate(45deg);
	transition: opacity 0.15s ease;
}

/* Angehakt wird das Kästchen zur vollen Fläche - Rahmen mit in --secondary,
   sonst bliebe ein weißer Ring darum stehen. */
.sana-filter__option input:checked + .sana-filter__box {
	background: var(--sana-secondary);
	border-color: var(--sana-secondary);
}

.sana-filter__option input:checked + .sana-filter__box::after {
	opacity: 1;
}

/* Der Fokusrahmen liegt am Ersatz, weil das echte Kästchen nicht zu sehen ist */
.sana-filter__option input:focus-visible + .sana-filter__box {
	outline: 2px solid var(--sana-invert);
	outline-offset: 2px;
}

/* -------------------------------------------------- Zurücksetzen */

/* Elementor-Button unter der Karte. Beim Überfahren wird er rot: Zurücksetzen
   ist die einzige Stelle im Katalog, die etwas wegnimmt. Der Selektor trägt
   eine Klasse mehr als .elementor-kit-N .elementor-button:hover, sonst
   entscheidet die Ladereihenfolge über die Farbe. */
.sana-filter__reset {
	margin-top: 0.75rem;
}

/* Die Rundung weicht hier bewusst vom Kit ab. */
.sana-filter-wrap .sana-filter__reset .elementor-button {
	display: block;
	width: 100%;
	border-radius: 10px;
}

.sana-filter-wrap .sana-filter__reset .elementor-button:hover,
.sana-filter-wrap .sana-filter__reset .elementor-button:focus {
	color: var(--sana-invert);
	background-color: #b91c1c;
	border-color: #b91c1c;
}

/* Während des Neuladens sichtbar machen, dass etwas passiert */
.sana-filter.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* -------------------------------------------------- Filter auf dem Telefon */

/* Bis 767 px steht nur die Überschrift da; ein Tippen darauf fährt den Rest aus.
   Getragen wird das von einem Kästchen vor der Karte, das die Überschrift als
   <label> bedient - deshalb ohne JavaScript, ohne Flackern beim Laden und ohne
   dass beim Absenden etwas Zusätzliches mitginge.

   Das Kästchen bleibt mit der Tastatur erreichbar, ist aber unsichtbar; den
   Fokus zeigt darum die Überschrift an. */
.sana-filter__switch {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.sana-filter__switch-arrow {
	display: none;
	flex: none;
	margin-left: auto;
	transition: transform 0.2s ease;
}

.sana-filter__switch:focus-visible ~ .sana-filter .sana-filter__title {
	outline: 2px solid var(--sana-invert);
	outline-offset: 4px;
}

@media (max-width: 767px) {
	.sana-filter__switch-arrow {
		display: block;
	}

	.sana-filter__title {
		cursor: pointer;
	}

	/* Zugeklappt ist die Überschrift alles, was die Karte hergibt - dann braucht
	   sie auch keine Trennlinie und keinen Abstand darunter. */
	.sana-filter__head {
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: 0;
	}

	.sana-filter__panel,
	.sana-filter__reset {
		display: none;
	}

	.sana-filter__switch:checked ~ .sana-filter .sana-filter__head {
		padding-bottom: 0.75rem;
		margin-bottom: 0.25rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		border-bottom: 1px solid var(--sana-divider);
	}

	.sana-filter__switch:checked ~ .sana-filter .sana-filter__switch-arrow {
		transform: rotate(180deg);
	}

	.sana-filter__switch:checked ~ .sana-filter .sana-filter__panel {
		display: block;
	}

	.sana-filter__switch:checked ~ .sana-filter__reset {
		display: block;
	}
}

/* -------------------------------------------------- Weitere Farben */

/* Die übrigen Farben desselben Artikels, dargestellt wie die Farbgruppe im
   Filter: Grafik im runden Ausschnitt, der Name darunter.

   Umgebrochen wird von selbst. auto-fill legt so viele Spalten an, wie bei einer
   Mindestbreite von --sana-farben-min hineinpassen, und 1fr macht sie alle
   gleich breit. Deshalb steht hier weder eine Zahl je Reihe noch ein
   Umbruchpunkt - es ergibt sich aus der Breite, die der Shortcode gerade hat.

   auto-fill und nicht auto-fit: leere Spalten bleiben stehen. Sonst zöge eine
   kurze Farbreihe die wenigen Einträge auf die volle Breite auseinander. */
.sana-farben {
	--sana-farben-min: 90px;
	--sana-farben-size: 56px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--sana-farben-min), 1fr));
	gap: 8px;
	align-items: start;
}

.sana-farben__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.25rem;
	border-radius: var(--sana-radius);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/* Der Elementor-Kit färbt Links über .elementor-kit-N a - eine Klasse und ein
   Element. Damit die Farbe hier gewinnt, braucht es eine Klasse mehr. */
.sana-farben .sana-farben__item,
.sana-farben .sana-farben__item:hover,
.sana-farben .sana-farben__item:focus-visible {
	color: var(--sana-primary);
}

.sana-farben__item:hover,
.sana-farben__item:focus-visible {
	background: color-mix(in srgb, var(--sana-secondary) 10%, white);
}

.sana-farben__label {
	font-family: var(--e-global-typography-5cnihjb-font-family), Sans-serif;
	font-size: var(--e-global-typography-5cnihjb-font-size);
	font-weight: var(--e-global-typography-5cnihjb-font-weight);
	line-height: var(--e-global-typography-5cnihjb-line-height);
	letter-spacing: var(--e-global-typography-5cnihjb-letter-spacing);
}

/* Der Kreis. Die Fläche darunter bleibt sichtbar, wenn am Begriff der Farbe
   kein Bild hinterlegt ist - so bleibt die Reihe gleichmäßig. */
.sana-farben__media {
	display: block;
	overflow: hidden;
	flex: none;
	width: var(--sana-farben-size);
	height: var(--sana-farben-size);
	border: 2px solid var(--sana-secondary);
	border-radius: 100px;
	background: color-mix(in srgb, var(--sana-secondary) 25%, white);
	transition: border-color 0.15s ease;
}

.sana-farben__item:hover .sana-farben__media,
.sana-farben__item:focus-visible .sana-farben__media {
	border-color: var(--sana-primary);
}

.sana-farben__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------- Weitere Aufstellarten, Zufall */

/* Dieselben Karten wie in der Uebersicht, nur ohne Badges - fuer [variant] und
   [coincidence]. Das Raster steht hier eigens, weil [sana-products] andere
   Umbrueche hat: dort drei je Reihe und ab 600 px eine, hier vier, ab 1024 px
   zwei und ab 767 px eine. Wie viele es am Schreibtisch sind, gibt der Shortcode
   als --sana-karten-columns mit. */
.sana-varianten,
.sana-zufall {
	display: grid;
	grid-template-columns: repeat(var(--sana-karten-columns, 4), minmax(0, 1fr));
	gap: 1.25rem;
	align-items: stretch;
}

@media (max-width: 1024px) {
	.sana-varianten,
	.sana-zufall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.sana-varianten,
	.sana-zufall {
		grid-template-columns: minmax(0, 1fr);
	}
}