/*
Theme Name: Nexlas
Theme URI: https://www.avuco.de
Author: avuco
Description: Darstellung des Produktvergleichs. Die Produktlogik – Datenbank, Suche, Produktseiten, Marken, Bilder, Klicks, SEO und Sitemaps – liefert das Plugin Nexlas; dieses Theme ist ausschließlich für die Darstellung zuständig.
Version: 2.37.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: nexlas-theme
*/

/*
 * Warum alles hier steht und nicht in css/theme.css:
 *
 * WordPress verlangt style.css, damit ein Theme ueberhaupt als Theme gilt -
 * diese Datei ist die einzige, die jede Auslieferung zwangslaeufig mitnimmt.
 * Liegt die Gestaltung in einem Unterordner, genuegt ein vergessenes
 * Verzeichnis beim Hochladen, und die Seite steht ohne Layout da: Inhalte
 * ueber die volle Breite, Seitenleiste ueber dem Inhalt. Genau das ist
 * passiert.
 */

/**
 * Darstellung des Themes.
 *
 * Aufgebaut auf wenigen Festlegungen ganz oben: Farben, Abstände, Radien.
 * Wer die Anmutung ändern will, ändert sie dort - nicht an achtzig Stellen.
 *
 * Es gibt keine externen Schriften und keine externen Bibliotheken. Beides
 * wären zusätzliche Anfragen vor dem ersten Bild, und der erste Eindruck
 * einer Vergleichsseite ist das Bild.
 */

:root {
	--nx-green: #84b03d;
	--nx-green-dark: #6d9432;
	--nx-green-soft: #f2f8e8;
	--nx-ink: #2f3033;
	--nx-muted: #7b7f86;
	--nx-line: #e5e7eb;
	--nx-line-soft: #f1f2f4;
	--nx-bg: #fafafa;
	--nx-surface: #fff;
	--nx-radius: 10px;
	--nx-radius-sm: 6px;
	--nx-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
	--nx-wrap: 1360px;
}

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

/*
 * `hidden` muss ausblenden.
 *
 * Die Vorgabe des Browsers dafür ist schwächer als jede Klasse, die `display`
 * setzt. Ein per Skript ausgeblendeter Knopf mit `.nx-btn { display: inline-flex }`
 * blieb deshalb sichtbar - genau so stand der Knopf „Sortieren“ noch neben
 * einer Auswahl, die sich längst selbst abschickt.
 */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	background: var(--nx-bg);
	color: var(--nx-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--nx-green-dark);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

h1, h2, h3 {
	margin: 0 0 .5rem;
	line-height: 1.25;
	font-weight: 700;
}

.nx-wrap {
	width: 100%;
	max-width: var(--nx-wrap);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.screen-reader-text,
.nx-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.nx-skip:focus {
	position: fixed;
	top: .5rem;
	left: .5rem;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: .6rem 1rem;
	background: var(--nx-surface);
	border-radius: var(--nx-radius-sm);
	box-shadow: var(--nx-shadow);
}

.nx-icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
}

/* --- Kopf --------------------------------------------------------------- */

.nx-head {
	background: var(--nx-surface);
	border-bottom: 1px solid var(--nx-line);
}

.nx-head__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.nx-logo {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	text-decoration: none;
}

/*
 * Die Breite kommt aus dem Customizer (Kopfbereich → Breite des Logos) und
 * steht als --nx-logo-width am Wurzelelement. Der Rueckfallwert hier gilt,
 * solange nichts eingestellt ist.
 *
 * Die Hoehe folgt dem Seitenverhaeltnis: Ein Logo, das sich mit dem Regler
 * verzerrt, waere kein Regler, sondern ein Fehler.
 */
.nx-logo img {
	width: var(--nx-logo-width, 160px);
	max-width: 100%;
	height: auto;
}

.nx-logo:hover {
	text-decoration: none;
}

.nx-logo__claim {
	font-size: .62rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--nx-muted);
}

.nx-search {
	position: relative;
	flex: 1 1 22rem;
	max-width: 34rem;
	margin: 0 auto;
}

.nx-search input[type="search"] {
	width: 100%;
	height: 2.75rem;
	padding: 0 3rem 0 1rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	background: var(--nx-surface);
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.nx-search input[type="search"]:focus {
	outline: 2px solid var(--nx-green);
	outline-offset: 1px;
}

.nx-search button {
	position: absolute;
	top: 50%;
	right: .35rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: var(--nx-radius-sm);
	background: none;
	color: var(--nx-muted);
	cursor: pointer;
}

.nx-search button:hover {
	color: var(--nx-green-dark);
}

/*
 * Kategorien-Knopf im Kopf.
 *
 * Nur auf schmalen Bildschirmen. Darueber stehen die Kategorien als Leiste
 * unter dem Kopf und brauchen keinen Knopf.
 */
.nx-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.nx-burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: var(--nx-ink);
}

/* --- Merkzettel im Kopf ------------------------------------------------- */

.nx-head__actions {
	position: relative;
	flex: 0 0 auto;
}

.nx-headlink {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .15rem;
	padding: .25rem .5rem;
	border: 0;
	background: none;
	color: var(--nx-ink);
	font: inherit;
	font-size: .78rem;
	cursor: pointer;
}

.nx-headlink:hover {
	color: var(--nx-green-dark);
}

.nx-headlink .nx-icon {
	width: 1.5rem;
	height: 1.5rem;
}

.nx-headlink__count {
	position: absolute;
	top: -.15rem;
	right: 0;
	min-width: 1.15rem;
	padding: 0 .25rem;
	border-radius: 999px;
	background: var(--nx-green);
	color: #fff;
	font-size: .7rem;
	line-height: 1.15rem;
	text-align: center;
}

.nx-saved {
	position: absolute;
	top: calc(100% + .6rem);
	right: 0;
	z-index: 30;
	width: min(22rem, calc(100vw - 2rem));
	max-height: 70vh;
	overflow-y: auto;
	padding: 1rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	background: var(--nx-surface);
	box-shadow: var(--nx-shadow);
}

.nx-saved__title {
	margin: 0 0 .6rem;
	font-size: 1rem;
}

.nx-saved__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-saved__item {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 0;
	border-top: 1px solid var(--nx-line-soft);
}

.nx-saved__item:first-child {
	border-top: 0;
}

.nx-saved__link {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
}

.nx-saved__link:hover {
	text-decoration: none;
	color: var(--nx-green-dark);
}

.nx-saved__link img {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	object-fit: contain;
	border-radius: var(--nx-radius-sm);
	background: var(--nx-surface-soft, #f7f6f3);
}

.nx-saved__text {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.nx-saved__name {
	font-size: .85rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nx-saved__price {
	font-size: .85rem;
	font-weight: 600;
}

.nx-saved__remove {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--nx-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.nx-saved__remove:hover {
	background: var(--nx-line-soft);
	color: var(--nx-ink);
}

.nx-saved__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .8rem;
	padding-top: .8rem;
	border-top: 1px solid var(--nx-line-soft);
}

.nx-saved__copied {
	color: var(--nx-green-dark);
	font-size: .78rem;
}

.nx-saved__empty,
.nx-saved__note {
	margin: .6rem 0 0;
	color: var(--nx-muted);
	font-size: .78rem;
}

/* --- Hauptnavigation ---------------------------------------------------- */

.nx-nav {
	background: var(--nx-surface);
	border-bottom: 1px solid var(--nx-line);
}

/*
 * Das Kategoriemenue am Burger. Sichtbar erst auf schmalen Schirmen und erst
 * nach einem Klick - `display: none` statt `hidden`, denn die Breite kennt
 * nur das Stylesheet. Hier stand `.nx-nav__toggle`; der Knopf war nie
 * sichtbar, weil zwei Media-Bloecke ihn nacheinander ein- und ausschalteten.
 */
.nx-mobilecats {
	display: none;
	background: var(--nx-surface);
	border-bottom: 1px solid var(--nx-line);
}

.nx-mobilecats__head {
	margin: 0 0 .5rem;
	padding-top: .9rem;
	font-size: .95rem;
	font-weight: 600;
}

.nx-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-nav__link {
	display: inline-block;
	padding: .85rem 0;
	border-bottom: 2px solid transparent;
	color: var(--nx-ink);
	font-size: .95rem;
}

.nx-nav__link:hover {
	color: var(--nx-green-dark);
	text-decoration: none;
}

.nx-nav__link.is-active {
	border-bottom-color: var(--nx-green);
	color: var(--nx-green-dark);
	font-weight: 600;
}

/* --- Brotkrumen --------------------------------------------------------- */

.nx-crumbs {
	padding: .75rem 0;
	font-size: .85rem;
	color: var(--nx-muted);
}

.nx-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-crumbs li + li::before {
	content: "›";
	margin-right: .35rem;
	color: var(--nx-line);
}

.nx-crumbs a {
	display: inline-flex;
	align-items: center;
	color: var(--nx-muted);
}

.nx-crumbs a:hover {
	color: var(--nx-green-dark);
}

.nx-crumbs [aria-current] {
	color: var(--nx-green-dark);
}

/* --- Aufteilung --------------------------------------------------------- */

.nx-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	padding-bottom: 3rem;
}

.nx-main {
	min-width: 0;
}

.nx-card {
	background: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	padding: 1.15rem;
	margin: 0 0 1rem;
}

.nx-card__title {
	margin: 0 0 .75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--nx-line-soft);
	font-size: 1rem;
}

/* --- Kategorien in der Seitenleiste ------------------------------------- */

.nx-cats {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-cats--sub {
	margin: .35rem 0 .5rem .75rem;
	padding-left: .75rem;
	border-left: 1px solid var(--nx-line-soft);
}

.nx-cats__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: .1rem 0;
	border-bottom: 1px solid var(--nx-line-soft);
}

.nx-cats--sub .nx-cats__item {
	border-bottom: 0;
}

.nx-cats__item:last-child {
	border-bottom: 0;
}

.nx-cats__link {
	flex: 1 1 auto;
	min-width: 0;
	padding: .55rem 0;
	color: var(--nx-ink);
	font-size: .95rem;
}

.nx-cats__link:hover {
	color: var(--nx-green-dark);
	text-decoration: none;
}

.nx-cats__count {
	color: var(--nx-muted);
	font-size: .82em;
}

.nx-cats__item.is-current > .nx-cats__link {
	color: var(--nx-green-dark);
	font-weight: 600;
}

.nx-cats__dot {
	display: inline-block;
	width: .5rem;
	height: .5rem;
	margin-left: .4rem;
	border-radius: 50%;
	background: var(--nx-green);
	vertical-align: middle;
}

.nx-cats__toggle {
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	background: none;
	color: var(--nx-muted);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.nx-cats__toggle::before {
	content: "+";
}

.nx-cats__toggle[aria-expanded="true"]::before {
	content: "–";
}

.nx-cats__children {
	flex: 0 0 100%;
}

/*
 * Widgets der Seitenleiste sehen aus wie die Karten daneben.
 *
 * Ohne diese Regeln stand dort eine nackte Aufzaehlung mit Punkten - im
 * Screenshot gut zu sehen. Ein Widget ist der uebliche Weg, Links zu
 * pflegen; es darf nicht aussehen wie ein Versehen.
 */
.nx-widget {
	background: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	padding: 1.15rem;
	margin: 0 0 1rem;
}

.nx-widget__title {
	margin: 0 0 .75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--nx-line-soft);
	font-size: 1rem;
}

.nx-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-widget li + li {
	border-top: 1px solid var(--nx-line-soft);
}

.nx-widget li a {
	display: block;
	padding: .6rem 0;
	color: var(--nx-ink);
	font-size: .95rem;
}

.nx-widget li a:hover {
	color: var(--nx-green-dark);
	text-decoration: none;
}

.nx-sidelink {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem 0;
	color: var(--nx-ink);
	font-size: .95rem;
}

.nx-sidelink + .nx-sidelink {
	border-top: 1px solid var(--nx-line-soft);
}

.nx-sidelink:hover {
	color: var(--nx-green-dark);
	text-decoration: none;
}

.nx-sidelink .nx-icon {
	color: var(--nx-muted);
}

/* --- Kopf der Ergebnisliste --------------------------------------------- */

.nx-listhead {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	justify-content: space-between;
	margin: 0 0 .5rem;
}

.nx-listhead__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem;
}

.nx-listhead__title h1 {
	margin: 0;
	font-size: 1.6rem;
}

.nx-listhead__count {
	color: var(--nx-muted);
	font-size: .95rem;
}

.nx-listhead__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
}

.nx-listhead__common {
	margin: 0 0 .35rem;
	color: var(--nx-muted);
	font-size: .85rem;
}

.nx-listhead__common span {
	font-weight: 600;
}

/*
 * Der Knopf, der die Filterleiste aufklappt.
 *
 * Er steht per Vorgabe auf `hidden`; das Skript nimmt es weg. Ohne
 * JavaScript liesse sich die Leiste nicht aufklappen - dann bleibt sie
 * offen, und ein Knopf, der nichts tut, waere schlimmer als keiner.
 */
.nx-filtertoggle {
	display: none;
	align-items: center;
	gap: .4rem;
	height: 2.5rem;
	padding: 0 .9rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-sm);
	background: var(--nx-surface);
	color: var(--nx-ink);
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
}

.nx-filtertoggle__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 .3rem;
	border-radius: 999px;
	background: var(--nx-green-soft);
	color: var(--nx-green-dark);
	font-size: .78rem;
	font-weight: 600;
}

.nx-viewswitch {
	display: inline-flex;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-sm);
	overflow: hidden;
	background: var(--nx-surface);
}

.nx-viewswitch__btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .85rem;
	color: var(--nx-muted);
	font-size: .88rem;
}

.nx-viewswitch__btn:hover {
	text-decoration: none;
	color: var(--nx-green-dark);
}

.nx-viewswitch__btn.is-active {
	background: var(--nx-green-soft);
	color: var(--nx-green-dark);
	font-weight: 600;
}

.nx-sort select, .nexlas-offer-sort select,
.nx-filters select,
.nx-filters input[type="number"] {
	height: 2.5rem;
	padding: 0 .7rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-sm);
	background: var(--nx-surface);
	font: inherit;
	font-size: .9rem;
	color: inherit;
	width: 100%;
}

/*
 * Die Sortierung steht in einer Zeile mit dem Umschalter Raster/Liste.
 *
 * Die volle Breite oben gilt den Feldern im Filterkasten, die in einem Raster
 * stehen. Das Auswahlfeld der Sortierung steht frei und richtet sich nach
 * seinem längsten Eintrag, statt den Kopf der Liste auszufüllen.
 */
.nx-sort, .nexlas-offer-sort {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.nx-sort select, .nexlas-offer-sort select {
	width: auto;
	max-width: 100%;
}

.nx-sort select:focus, .nexlas-offer-sort select:focus,
.nx-filters select:focus,
.nx-filters input:focus {
	outline: 2px solid var(--nx-green);
	outline-offset: 1px;
}

/* --- Knöpfe ------------------------------------------------------------- */

.nx-btn, .nexlas-offer-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	height: 2.5rem;
	padding: 0 1.1rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-sm);
	background: var(--nx-surface);
	color: var(--nx-ink);
	font: inherit;
	font-size: .9rem;
	cursor: pointer;
}

.nx-btn:hover, .nexlas-offer-go:hover {
	border-color: var(--nx-green);
	color: var(--nx-green-dark);
	text-decoration: none;
}

.nx-btn--small, .nexlas-offer-go {
	height: 2.1rem;
	padding: 0 .75rem;
	font-size: .82rem;
}

.nx-btn--primary, .nexlas-offer-go {
	background: var(--nx-green);
	border-color: var(--nx-green);
	color: #fff;
}

.nx-btn--primary:hover, .nexlas-offer-go:hover {
	background: var(--nx-green-dark);
	border-color: var(--nx-green-dark);
	color: #fff;
}

.nx-btn--buy {
	width: 100%;
	height: 3.25rem;
	margin: 1rem 0 .5rem;
	background: var(--nx-green);
	border-color: var(--nx-green);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.nx-btn--buy:hover {
	background: var(--nx-green-dark);
	color: #fff;
}

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

.nx-filters {
	background: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	padding: 1.1rem;
	margin: 0 0 1.25rem;
}

/*
 * Felder nebeneinander, so viele wie hineinpassen.
 *
 * Vorher ein Raster mit gleich breiten Spalten. Das Kaestchen "nur
 * reduzierte" ist aber viel schmaler als ein Auswahlfeld und belegte
 * trotzdem eine ganze Spalte - reichte der Platz nicht, stand es allein in
 * einer zweiten Zeile, obwohl daneben noch Platz war.
 *
 * Mit flex nehmen die Auswahlfelder den verfuegbaren Platz zu gleichen
 * Teilen und das Kaestchen nur so viel, wie es braucht.
 */
.nx-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
}

/*
 * 11rem als Ausgangsbreite, nicht 12: Der Umbruch richtet sich nach dieser
 * Zahl, nicht nach der Breite, die ein Feld nachher einnimmt. Bei 12rem
 * fehlten genau die zwei Zentimeter, die das Kaestchen daneben braucht.
 *
 * Die Obergrenze verhindert, dass drei Felder in einer Zeile jeweils ein
 * Drittel der Breite einnehmen. Ein Auswahlfeld wird davon nicht besser
 * bedienbar, nur breiter.
 */
.nx-filters__row > .nx-field {
	flex: 1 1 11rem;
	max-width: 20rem;
	min-width: 0;
}

.nx-filters__row > .nx-field--flags {
	flex: 0 1 auto;
	max-width: none;
}

/* Die zweite Zeile steht dichter unter der ersten als ein voller Abstand. */
.nx-filters__row--offering {
	margin-top: 1rem;
}

.nx-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 0;
}

.nx-field__label {
	font-size: .82rem;
	font-weight: 600;
	color: var(--nx-muted);
}

.nx-field__pair {
	display: flex;
	gap: .5rem;
}

.nx-field--flags {
	flex-direction: row;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.nx-check {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .8rem;
	border: 1px solid var(--nx-line);
	border-radius: 999px;
	font-size: .88rem;
	cursor: pointer;
	user-select: none;
}

.nx-check:hover {
	border-color: var(--nx-green);
}

.nx-check.is-active {
	border-color: var(--nx-green);
	background: var(--nx-green-soft);
	font-weight: 600;
}

.nx-check input {
	accent-color: var(--nx-green);
	margin: 0;
}

.nx-filters__active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .9rem;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--nx-line-soft);
	font-size: .88rem;
	color: var(--nx-muted);
}

.nx-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .25rem .7rem;
	border: 1px solid var(--nx-green);
	border-radius: 999px;
	background: var(--nx-green-soft);
	color: var(--nx-green-dark);
	font-size: .85rem;
}

.nx-chip:hover {
	text-decoration: none;
	background: #e8f2d8;
}

.nx-filters__note {
	margin: .9rem 0 0;
	color: var(--nx-muted);
	font-size: .8rem;
}

/* Preisschieber: zwei Griffe auf einer Fläche. */
.nx-range {
	position: relative;
	height: 1.5rem;
	display: none;
}

.nx-range.is-ready {
	display: block;
}

.nx-range__track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	margin-top: -2px;
	border-radius: 999px;
	background: var(--nx-line);
}

.nx-range__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 999px;
	background: var(--nx-green);
}

.nx-range__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.nx-range__input:focus {
	outline: none;
}

.nx-range__input::-webkit-slider-thumb {
	pointer-events: auto;
	width: 1.05rem;
	height: 1.05rem;
	border: 2px solid var(--nx-green);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.nx-range__input::-moz-range-thumb {
	pointer-events: auto;
	width: 1.05rem;
	height: 1.05rem;
	border: 2px solid var(--nx-green);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

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

.nexlas-section-title {
	margin: 1.25rem 0 .75rem;
	font-size: 1.05rem;
}

/*
 * Varianten und Alternativen stehen nebeneinander, nicht untereinander.
 *
 * Beide Abschnitte stehen unter dem Produkt, wo weniger Breite zur Verfuegung
 * steht als in einer Kategorie. Das allgemeine Raster verlangt 15rem je Spalte
 * und rechnet in einem schmalen Bereich auf eine Spalte herunter - die drei
 * Ausfuehrungen desselben Waschekorbs standen dann untereinander, jede so
 * gross wie ein einzelnes Produkt. Wer vergleichen will, scrollt dann.
 *
 * Hier ist der Vergleich der ganze Zweck: Die Karten zeigen dasselbe Produkt
 * in anderer Ausfuehrung, und der Unterschied ist nur nebeneinander zu sehen.
 * Deshalb ein eigenes Mass - 10rem genuegt fuer Bild, Titel und Preis, und
 * damit stehen auch auf einem Telefon zwei Karten in einer Zeile.
 */
/*
 * Erst die Breite, dann die Spalten.
 *
 * Die Kacheln standen zuletzt vier nebeneinander auf zweihundert Pixeln - also
 * je fuenfundvierzig, mit einem Buchstaben je Zeile. Nicht das Raster war
 * falsch, sondern sein Platz: Der Abschnitt liegt in einem Raster (`.nx-product`)
 * und bekam eine einzelne Spalte davon, statt die ganze Zeile.
 *
 * `grid-column: 1 / -1` steht am Abschnitt selbst, nicht nur an seinem
 * Behaelter. Damit gilt es auch dort, wo eine Vorlage die beiden Abschnitte
 * anders einhaengt - und wo es kein Raster gibt, ist es wirkungslos statt
 * schaedlich.
 */
.nexlas-family,
.nexlas-alternatives {
	grid-column: 1 / -1;
	width: 100%;
	margin-top: 1.5rem;
}

/*
 * Feste Spaltenzahl statt `auto-fill`.
 *
 * `repeat(auto-fill, minmax(10rem, 1fr))` haengt an der Breite des Containers:
 * Passen keine zwei Spalten von 10rem hinein, rechnet der Browser auf eine
 * herunter - und die Ausfuehrungen stehen wieder untereinander, jetzt nur
 * schmaler als vorher. Unter einem Produkt ist genau das passiert.
 *
 * `minmax(0, 1fr)` kennt keine Mindestbreite und kann deshalb nicht
 * zurueckfallen. Vier Spalten, mit zwoelf sichtbaren Karten also drei Zeilen;
 * darunter der Knopf fuer den Rest.
 *
 * Angesprochen wird `.nx-grid`, nicht `.nx-grid--raster`: Die Ansicht „Liste“
 * steht in der Adresse und gilt fuer jedes Raster der Seite - auch fuer dieses,
 * wo sie nichts zu suchen hat. Eine Familie ist ein Vergleich, keine Liste.
 */
/*
 * Drei Spalten, drei Zeilen - neun Ausfuehrungen auf einen Blick, danach der
 * Knopf. Dieselbe Karte wie in der Ergebnisliste, nur in fester Spaltenzahl:
 * `auto-fill` haengt an der Breite des Behaelters und faellt dort, wo weniger
 * Platz ist, auf eine Spalte zurueck.
 *
 * Angesprochen wird `.nx-grid`, nicht `.nx-grid--raster`: Die Ansicht „Liste“
 * steht in der Adresse und gilt fuer jedes Raster der Seite - auch fuer dieses,
 * wo sie eine Familie in eine Spalte legen wuerde.
 */
/*
 * Dieselbe Optik wie in der Ergebnisliste.
 *
 * Hier standen drei feste Spalten. Das war die Notloesung gegen ein
 * kaputtes Raster und blieb danach stehen: Auf der Produktseite standen
 * drei Karten in einer Reihe und die vierte allein darunter, waehrend
 * dieselben Karten in der Kategorie zu viert nebeneinander passen.
 *
 * Jetzt gilt `--raster` wie ueberall: so viele Spalten, wie 15rem breite
 * Karten hineinpassen. Damit sehen Kategorie, Produktseite und Shortcode
 * gleich aus, und die Breite entscheidet der Platz, nicht die Vorlage.
 */

/*
 * Der Hinweis auf den abgeschnittenen Rest gehoert unter das Raster, nicht
 * hinein.
 */
.nexlas-family > .nexlas-help {
	margin-top: .75rem;
}

.nx-grid {
	display: grid;
	gap: 1rem;
	width: 100%;
	/*
	 * Das Raster bringt seine eigene Textbehandlung mit.
	 *
	 * Steht der Shortcode in einem vorformatierten Block, erbt alles darin
	 * `white-space: pre` und Festbreitenschrift - die Karten stehen dann
	 * untereinander in einer schmalen Spalte, in Schreibmaschinenschrift.
	 * Das Raster gehoert nicht zum Textfluss, also setzt es beides zurueck.
	 */
	white-space: normal;
	font-family: inherit;
	text-align: left;
}

.nx-grid--raster {
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.nx-grid--liste {
	grid-template-columns: minmax(0, 1fr);
}

.nx-tile {
	position: relative;
	display: flex;
	/*
	 * Der Inhalt stapelt sich, er steht nicht nebeneinander.
	 *
	 * Ohne Richtung galt `row` - und solange die Kachel nur ihren Link
	 * enthielt, sah man das nicht. Seit die Ausfuehrungen als eigene Liste
	 * dazukommen, wurde sie zum Nachbarn des Links: schmale Bildchen oben
	 * rechts, quer ueber dem Produktbild.
	 */
	flex-direction: column;
	background: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	overflow: hidden;
	transition: border-color .12s ease-in-out, transform .12s ease-in-out;
}

.nx-tile:hover {
	border-color: var(--nx-green);
	transform: translateY(-1px);
}

.nx-tile__link {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	width: 100%;
	padding: 1rem;
	color: inherit;
	text-align: center;
}

.nx-tile__link:hover {
	text-decoration: none;
}

.nx-tile__image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 11rem;
	margin-bottom: .5rem;
}

.nx-tile__image img {
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

/*
 * Die Ausfuehrungen unter der Kachel.
 *
 * Vier Bilder beantworten „ist meine Farbe dabei?“ ohne einen Klick. Sie
 * stehen ausserhalb des Kartenlinks - ein Link in einem Link gibt es nicht -
 * und sind deshalb eigene Ziele.
 *
 * Feste Groesse statt `1fr`: Bei zwei Ausfuehrungen sollen die Felder nicht
 * auf die halbe Kartenbreite wachsen. Vier davon plus Abstand passen unter
 * jede Kachel, auch die schmalste.
 */
/*
 * Zwei Eigenschaften unter dem Namen - kleiner als der Titel, ruhiger als der
 * Preis. Sie sollen beim Vergleichen helfen, nicht um Aufmerksamkeit werben.
 */
/*
 * Titel und Eigenschaften mit fester Hoehe.
 *
 * Ohne sie war jede Karte anders hoch: ein Titel ueber eine Zeile, daneben
 * einer ueber drei, mal mit Eigenschaften, mal ohne. Der Preis stand dadurch
 * auf jeder Karte woanders, und weil das Raster seine Zeilen an der hoechsten
 * Kachel ausrichtet, blieb der Platz darunter leer.
 *
 * Zwei Zeilen Titel und eine Zeile Eigenschaften ergeben eine feste Hoehe -
 * von da an beginnt der Preis auf jeder Karte an derselben Stelle. Der Titel
 * wird dafuer auf zwei Zeilen begrenzt; abgeschnitten wird mit Auslassung,
 * nicht mitten im Wort.
 */
.nx-tile__head {
	display: block;
	/* 2 Zeilen Titel (1.3) + 1 Zeile Eigenschaften (.82rem × 1.4) + Abstand. */
	min-height: calc(2 * .95rem * 1.3 + .82rem * 1.4 + .2rem);
}

.nx-tile__facts {
	display: block;
	min-height: calc(.82rem * 1.4);
	margin: .2rem 0 0;
	font-size: .82rem;
	line-height: 1.4;
	color: var(--nx-muted, #666);
}

/*
 * Das Auto steht vor der Angabe, nicht darueber - und etwas groesser als die
 * Schrift daneben, sonst verschwindet es in der Zeile.
 */
.nx-tile__shipping .nx-icon {
	width: 1.35em;
	height: 1.35em;
	margin-right: .3rem;
	vertical-align: -.28em;
}

/*
 * Vier Felder, eine Zeile - auch auf einem Telefon.
 *
 * Vorher stand hier `flex-wrap: wrap` mit Feldern von 2,75rem. Auf einer
 * Kachel von 264 Pixeln - zwei Spalten auf einem 390er Bildschirm - passten
 * drei davon nebeneinander; das vierte Bild und das „+4“ rutschten in eine
 * zweite Zeile, und die Karte wuchs um deren Hoehe. Auf dem Bildschirm sah
 * das aus wie ein zweiter, angefangener Block.
 *
 * Ein Raster aus vier gleichen Spalten kann nicht umbrechen. Die Felder
 * teilen sich, was die Kachel hergibt, und werden auf einer schmalen Kachel
 * eben kleiner statt zahlreicher. Nach oben begrenzt, damit sie auf einer
 * breiten Kachel nicht zu Bildern werden.
 *
 * Wie viele Felder es gibt, entscheidet nicht das Stylesheet: `Variant_Swatches`
 * liefert hoechstens vier, das „+N“ eingerechnet. Beides muss zusammenpassen -
 * das Raster ist die Zusicherung, dass es nie mehr werden.
 */
.nx-tile__swatches {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .35rem;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}

.nx-swatch {
	margin: 0;
	padding: 0;
}

.nx-swatch__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 3.25rem;
	/* Quadratisch, ohne feste Hoehe: Die Breite gibt das Raster vor. */
	aspect-ratio: 1;
	margin: 0 auto;
	padding: .2rem;
	border: 1px solid var(--nx-line);
	border-radius: .4rem;
	background: #fff;
	overflow: hidden;
}

.nx-swatch__box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

a.nx-swatch__box:hover,
a.nx-swatch__box:focus-visible {
	border-color: var(--nx-accent, #6a9a3a);
}

/*
 * Das gezeigte Produkt ist markiert, nicht anklickbar.
 *
 * Ohne den zusaetzlichen Ring: Zusammen mit dem Rahmen waren das zwei Pixel,
 * und neben den duennen Rahmen der uebrigen Felder wirkte das gezeigte wie
 * eingerahmt statt wie ausgewaehlt.
 */
.nx-swatch.is-active .nx-swatch__box {
	border-color: var(--nx-accent, #6a9a3a);
}

.nx-swatch--more .nx-swatch__box {
	font-size: .8rem;
	font-weight: 600;
	color: var(--nx-muted, #666);
	text-decoration: none;
}

.nx-tile__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: .95rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--nx-green-dark);
}

.nx-tile__variants,
.nx-tile__shipping {
	margin: 0;
	font-size: .8rem;
	color: var(--nx-muted);
}

/*
 * Die Familie unter der Trennlinie: erst wie viele, dann welche.
 *
 * Die Linie sitzt an diesem Block, nicht mehr an der Bildreihe - sonst stuende
 * die Zeile „3 Farben“ oberhalb der Trennung und damit bei den Angaben zu
 * diesem einen Produkt. Sie gehoert zur Auswahl darunter.
 */
.nx-tile__family {
	margin: .8rem .9rem .9rem;
	padding-top: .7rem;
	border-top: 1px solid var(--nx-line);
	text-align: center;
}

/*
 * Die Begruendung einer Empfehlung, unter dem Preis.
 *
 * Nur auf Karten, die eine mitbekommen - unter der Produktseite bei
 * "Aehnlich, laut Haendler schneller lieferbar". Im Kategorieraster gibt es
 * keine, und dort steht dann auch nichts.
 */
.nx-tile__note {
	margin: .35rem 0 0;
	font-size: .8rem;
	line-height: 1.35;
	color: var(--nx-muted);
}

.nx-tile__prices {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .5rem;
	margin: .25rem 0 0;
}

.nx-tile__old {
	color: var(--nx-muted);
	font-size: .85rem;
	text-decoration: line-through;
}

.nx-tile__price {
	font-size: 1.05rem;
}

/*
 * Die Haendlerzahl unter dem Preis - „bei 8 Haendlern“.
 *
 * Eine Zeile, kein Kasten. Auf der Kachel beantwortet sie eine einzige Frage:
 * Gibt es das Produkt woanders auch? Welche Haendler es sind, steht auf der
 * Produktseite; dafuer ist auf einer 264 Pixel breiten Kachel kein Platz.
 */
.nx-tile__merchants {
	margin: .1rem 0 0;
	color: var(--nx-muted);
	font-size: .82rem;
	text-align: center;
}

.nx-grid--liste .nx-tile__merchants {
	text-align: right;
}

.nx-tile__badge {
	position: absolute;
	top: .65rem;
	left: .65rem;
	z-index: 2;
	padding: .1rem .5rem;
	border: 1px solid var(--nx-green);
	border-radius: var(--nx-radius-sm);
	background: var(--nx-green-soft);
	color: var(--nx-green-dark);
	font-size: .78rem;
	font-weight: 700;
}

.nx-tile__save {
	position: absolute;
	top: .5rem;
	right: .5rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--nx-muted);
	cursor: pointer;
}

.nx-tile__save:hover,
.nx-tile__save[aria-pressed="true"] {
	color: var(--nx-green);
}

.nx-tile__save[aria-pressed="true"] .nx-icon {
	fill: var(--nx-green);
}

/* Listenansicht: dasselbe Markup, andere Anordnung. */
.nx-grid--liste .nx-tile__link {
	flex-direction: row;
	align-items: center;
	gap: 1.25rem;
	text-align: left;
}

.nx-grid--liste .nx-tile__image {
	flex: 0 0 8rem;
	height: 8rem;
	margin: 0;
}

.nx-grid--liste .nx-tile__prices {
	margin-left: auto;
	justify-content: flex-end;
}

/* --- Produktseite ------------------------------------------------------- */

.nx-product {
	display: grid;
	/*
	 * Die mittlere Spalte trägt Titel, Preis und den Knopf - sie darf nicht
	 * die schmalste sein. Ein Produktname, der über vier Zeilen bricht,
	 * schiebt den Kaufknopf aus dem sichtbaren Bereich.
	 */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 17.5rem;
	gap: 1.5rem;
	align-items: start;
}

.nx-product__media {
	display: flex;
	gap: .75rem;
	background: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	padding: 1rem;
}

.nx-thumbs {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 0 0 auto;
}

.nx-thumbs__item {
	width: 4.5rem;
	height: 4.5rem;
	padding: .25rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-sm);
	background: var(--nx-surface);
	cursor: pointer;
	line-height: 0;
}

.nx-thumbs__item.is-active,
.nx-thumbs__item:hover {
	border-color: var(--nx-green);
}

.nx-thumbs__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.nx-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 22rem;
}

.nx-stage img {
	max-height: 26rem;
	width: auto;
	object-fit: contain;
}

.nx-product__buy {
	position: relative;
}

.nx-product__tools {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: .5rem;
}

.nx-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--nx-line);
	border-radius: 50%;
	background: var(--nx-surface);
	color: var(--nx-muted);
	cursor: pointer;
}

.nx-round:hover,
.nx-round[aria-pressed="true"] {
	border-color: var(--nx-green);
	color: var(--nx-green);
}

.nx-round[aria-pressed="true"] .nx-icon {
	fill: var(--nx-green);
}

.nx-product__brand {
	display: inline-block;
	margin-bottom: .35rem;
	color: var(--nx-muted);
	font-size: .88rem;
}

.nx-product__title {
	margin: 0 0 1rem;
	font-size: 1.75rem;
	padding-right: 6rem;
}

.nx-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .6rem;
}

.nx-price__now {
	font-size: 2rem;
	line-height: 1.1;
}

.nx-price__old {
	color: var(--nx-muted);
	text-decoration: line-through;
}

.nx-price__badge {
	padding: .1rem .5rem;
	border: 1px solid var(--nx-green);
	border-radius: var(--nx-radius-sm);
	background: var(--nx-green-soft);
	color: var(--nx-green-dark);
	font-size: .85rem;
	font-weight: 700;
}

.nx-price__shipping {
	margin: .35rem 0 1rem;
	color: var(--nx-muted);
	font-size: .9rem;
}

.nx-avail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-weight: 600;
}

.nx-avail--in {
	color: var(--nx-green-dark);
}

/* Nicht lieferbar ist keine gute Nachricht - und sieht auch nicht so aus. */
.nx-avail--out {
	color: #a3401b;
}

/*
 * Die Lieferzeit steht unter der Angabe, eingerueckt bis unter den Text.
 *
 * Eingerueckt wurde mit `margin-left` neben `flex-basis: 100%` - zusammen sind
 * das hundert Prozent plus 1,65rem, und genau um diesen Betrag stand die Seite
 * ueber ihren Rand hinaus. Auf einem Tablet liess sich die Produktseite
 * seitlich schieben, ohne dass etwas Sichtbares dort gestanden haette.
 *
 * Der Abstand gehoert deshalb nach innen: `padding` zaehlt bei
 * `box-sizing: border-box` zur Breite, `margin` kommt obendrauf.
 */
.nx-avail small {
	flex: 1 1 100%;
	min-width: 0;
	padding-left: 1.65rem;
	color: var(--nx-muted);
	font-weight: 400;
}

.nx-product__handover {
	margin: 0;
	color: var(--nx-muted);
	font-size: .82rem;
}

/*
 * Die dritte Spalte: Haendlerkasten und Merkmale untereinander.
 *
 * Sie stehen im Umschlag `.nx-product__side`, weil das Raster der Seite nur
 * drei Spalten hat - ein viertes Feld begaenne eine neue Zeile.
 */
.nx-product__side {
	display: grid;
	gap: 1.5rem;
	align-content: start;
}

/*
 * Der Kasten „Bei anderen Haendlern erhaeltlich“.
 *
 * Name und Preis in einer Zeile, darunter der Versand, rechts der Weg zum
 * Shop. Keine Logos und keine Sterne: Beides steht nicht in den Daten.
 */
.nx-merchants {
	background: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	padding: 1.1rem;
}

.nx-merchants__head {
	margin: 0 0 .75rem;
	font-size: .95rem;
	font-weight: 700;
}

.nx-merchants__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nx-merchant {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .15rem .75rem;
	padding: .7rem 0;
	border-top: 1px solid var(--nx-line);
}

.nx-merchant:first-child {
	border-top: 0;
	padding-top: 0;
}

.nx-merchant__name {
	font-size: 1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nx-merchant__price {
	text-align: right;
	font-size: 1.05rem;
}

/*
 * Versand, Verfuegbarkeit und Lieferzeit stehen in der linken Spalte
 * untereinander - die rechte gehoert Preis und Knopf. Ohne `grid-column: 1`
 * rutscht die Lieferzeit neben den Knopf, weil das Raster sie als naechste
 * freie Zelle nimmt.
 */
.nx-merchant__shipping,
.nx-merchant__stock,
.nx-merchant__delivery {
	grid-column: 1;
	color: var(--nx-muted);
	font-size: .78rem;
}

.nx-btn--shop {
	grid-column: 2;
	justify-self: end;
	padding: .35rem .8rem;
	background: var(--nx-green);
	border-color: var(--nx-green);
	color: #fff;
	font-size: .82rem;
	font-weight: 600;
}

.nx-btn--shop:hover {
	background: var(--nx-green-dark);
	color: #fff;
}

.nx-merchants__more {
	margin: .75rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid var(--nx-line);
	color: var(--nx-muted);
	font-size: .85rem;
	text-align: center;
}

.nx-facts {
	background: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	padding: .5rem 1.1rem;
}

.nx-facts__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--nx-line-soft);
	font-size: .9rem;
}

.nx-facts__row:last-child {
	border-bottom: 0;
}

/*
 * Der Gesamtpreis ist die Zahl, nach der entschieden wird.
 *
 * Er steht deshalb zuletzt und leicht abgesetzt - ein heller Streifen und
 * eine kraeftigere Schrift, keine Farbe: Grün ist in dieser Oberflaeche das
 * Zeichen fuer „guenstig“ und wuerde hier eine Wertung behaupten, die die
 * Zahl allein nicht traegt.
 */
.nx-facts__row--total {
	margin-top: .35rem;
	padding: .8rem .7rem;
	border-bottom: 0;
	border-radius: var(--nx-radius-sm);
	background: var(--nx-surface-soft, #f7f6f3);
	font-size: .95rem;
	font-weight: 700;
}

.nx-facts__label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--nx-muted);
}

.nx-facts__value {
	font-weight: 600;
	text-align: right;
}

/* --- Reiter ------------------------------------------------------------- */

/*
 * Die Preisentwicklung steht offen unter dem Angebot.
 *
 * Sie ist der Grund, aus dem jemand einen Preisvergleich aufruft. Hinter
 * einem Reiter beantwortet sie die Frage nur denen, die auf den Verdacht
 * kommen, dort nachzusehen.
 */
.nx-history-block {
	grid-column: 1 / -1;
	background: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	padding: 1.25rem;
	margin-top: .5rem;
}

/*
 * Alternativen und verwandte Produkte stehen unter der Produktseite, ueber
 * deren ganze Breite.
 *
 * Ohne diese Zeile war der Block ein gewoehnliches Rasterfeld und landete in
 * einer der drei Spalten - also auf einem Drittel der Breite. Die Karten des
 * Plugins sind 200 Pixel breit und brachen dort auf eine je Zeile um: "Aehnlich,
 * aber guenstiger" stand untereinander statt nebeneinander.
 */
.nx-product__more {
	grid-column: 1 / -1;
}

.nx-product__more:empty {
	display: none;
}

.nx-details, .nexlas-offer-comparison {
	grid-column: 1 / -1;
	background: var(--nx-surface);
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
	margin-top: .5rem;
}





.nx-details, .nexlas-offer-comparison {
	padding: 1.25rem;
}


/*
 * „Passend dazu“ steht nach dem Text, nicht in ihm.
 *
 * Kein Kasten und keine Aufzählung: Der Hinweis gehört zum Absatz darüber und
 * soll sich nicht wie ein zweiter Baustein lesen. Der Abstand nach oben trennt
 * ihn, die kleinere Schrift ordnet ihn unter.
 */
.nx-related {
	margin: 1.25rem 0 0;
	color: var(--nx-muted);
	font-size: .9rem;
}

.nx-related a {
	color: var(--nx-green-dark);
}

.nx-history {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18rem;
	gap: 1.5rem;
	align-items: start;
}

.nx-history__span {
	margin: -.25rem 0 .75rem;
	color: var(--nx-muted);
	font-size: .85rem;
}

/*
 * Die Kurve und ihr Ablesestrich.
 *
 * Der Kasten darum traegt die Position: Der Hinweis steht in Prozent der
 * Breite, damit er mit der Zeichnung mitwandert, wenn sie sich streckt.
 */
.nx-chart-wrap {
	position: relative;
}

.nx-chart-wrap:focus-visible {
	outline: 2px solid var(--nx-green);
	outline-offset: 4px;
	border-radius: var(--nx-radius-sm);
}

.nx-chart {
	width: 100%;
	height: 10rem;
	overflow: visible;
}

.nx-chart__cursor {
	stroke: var(--nx-green);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	vector-effect: non-scaling-stroke;
}

.nx-chart__tip {
	position: absolute;
	top: -.35rem;
	transform: translate(-50%, -100%);
	background: var(--nx-ink);
	color: #fff;
	border-radius: var(--nx-radius-sm);
	padding: .3rem .55rem;
	font-size: .8rem;
	white-space: nowrap;
	pointer-events: none;
}

.nx-chart__line {
	stroke: var(--nx-green);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.nx-chart__area {
	fill: var(--nx-green-soft);
}

.nx-history__facts {
	margin: 0;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-sm);
	padding: .25rem 1rem;
}

.nx-history__facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--nx-line-soft);
}

.nx-history__facts > div:last-child {
	border-bottom: 0;
}

.nx-history__facts dt {
	color: var(--nx-muted);
	font-size: .9rem;
}

.nx-history__facts dd {
	margin: 0;
	text-align: right;
}

.nx-history__facts small {
	display: block;
	color: var(--nx-muted);
	font-size: .78rem;
	font-weight: 400;
}

.nx-note {
	margin: 1rem 0 0;
	color: var(--nx-muted);
	font-size: .82rem;
}

/* --- Einwilligung ------------------------------------------------------- */

.nx-consent {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: rgba(20, 22, 25, .45);
}

.nx-consent[hidden] {
	display: none;
}

.nx-consent__box {
	max-width: 34rem;
	padding: 1.5rem;
	background: var(--nx-surface);
	border-radius: var(--nx-radius);
}

.nx-consent__box p {
	color: var(--nx-muted);
	font-size: .9rem;
}

.nx-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1rem;
}

/* --- Fuß ---------------------------------------------------------------- */

.nx-foot {
	background: var(--nx-surface);
	border-top: 1px solid var(--nx-line);
	padding: 1.5rem 0 1rem;
	margin-top: 2rem;
}

/*
 * Eine Zeile: Seitenname links, Rechtliches rechts.
 *
 * Hier stand einmal ein Absatz ueber Preise und Verfuegbarkeiten. Er steht
 * bereits an jedem Produkt und unter jeder Ergebnisliste - ein dritter Ort
 * macht ihn nicht wahrer, nur den Fuss laenger.
 */
.nx-foot__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.5rem;
	justify-content: space-between;
}

.nx-foot__brand {
	color: var(--nx-ink);
	font-weight: 700;
}

.nx-foot__brand:hover {
	color: var(--nx-green-dark);
	text-decoration: none;
}

.nx-foot__links ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}

.nx-foot__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--nx-line-soft);
	color: var(--nx-muted);
	font-size: .8rem;
}

/* --- Schmale Bildschirme ------------------------------------------------ */

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

	.nx-product__media {
		order: -1;
	}

	.nx-history {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

	.nx-side {
		order: 2;
	}

	/*
	 * Die Leiste der obersten Ebene entfaellt hier ganz: zehn Namen ohne
	 * Zahlen und ohne Unterkategorien. Was der Knopf oeffnet, steht in
	 * `.nx-mobilecats`.
	 */
	.nx-nav {
		display: none;
	}

	/*
	 * Und die Kategorie-Karte der Seitenleiste ebenso: Derselbe Baum stuende
	 * sonst zweimal auf der Seite - einmal am Knopf und einmal unter dem
	 * letzten Produkt. Die uebrigen Karten der Seitenleiste bleiben.
	 */
	.nx-card--cats {
		display: none;
	}
}

@media (max-width: 900px) {
	/*
	 * Kopf wie im Entwurf: Kategorien-Knopf links, Logo mittig, Merkzettel
	 * rechts, Suchfeld ueber die volle Breite darunter. Die Kategorienleiste
	 * unter dem Kopf entfaellt - sie haengt jetzt am Knopf.
	 */
	.nx-burger {
		display: flex;
	}

	/*
	 * Raster statt Flex: Knopf, Logo, Merkzettel stehen fest in einer Zeile,
	 * das Suchfeld darunter ueber die volle Breite.
	 *
	 * Mit Flex hing es an der Breite des Logos, ob der Merkzettel noch
	 * danebenpasste - auf schmalen Geraeten rutschte er in eine eigene Zeile
	 * unter das Logo. Ein Raster kann das nicht: Die drei Spalten stehen,
	 * und die mittlere gibt nach.
	 */
	.nx-head__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: .5rem;
	}

	/*
	 * Jedes Feld steht ausdruecklich.
	 *
	 * Die automatische Verteilung reicht hier nicht: Das Suchfeld geht ueber
	 * alle drei Spalten und beginnt deshalb eine neue Zeile - der Merkzettel
	 * rutschte dahinter in eine dritte. Genau so stand das Herz unter der
	 * Suche statt rechts vom Logo.
	 */
	.nx-burger {
		grid-column: 1;
		grid-row: 1;
	}

	.nx-logo {
		grid-column: 2;
		grid-row: 1;
		flex-direction: column;
		align-items: center;
		min-width: 0;
	}

	.nx-head__actions {
		grid-column: 3;
		grid-row: 1;
	}

	.nx-logo img {
		/* Auf dem Handy nimmt das Logo hoechstens, was die Spalte hergibt. */
		max-width: 100%;
	}

	/* Ein langer Zusatz darf die Spalte nicht sprengen. */
	.nx-logo__claim {
		max-width: 100%;
		text-align: center;
		overflow-wrap: anywhere;
	}

	.nx-search {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: none;
		margin: 0;
	}

	.nx-mobilecats.is-open {
		display: block;
	}

	.nx-mobilecats .nx-cats {
		padding-bottom: .9rem;
	}

	/*
	 * Die Filterleiste ist zu, bis der Knopf sie oeffnet. Zugeklappt nimmt
	 * sie keinen Platz, damit das erste Produkt oben steht.
	 */
	.nx-filtertoggle {
		display: inline-flex;
	}

	.nx-filters {
		display: none;
	}

	.nx-filters.is-open {
		display: block;
	}

	/* Filter und Sortierung in einer Zeile, Raster/Liste darunter. */
	.nx-listhead {
		align-items: stretch;
	}

	.nx-listhead__tools {
		flex-wrap: wrap;
		width: 100%;
	}

	.nx-filtertoggle,
	.nx-listhead__tools .nx-sort {
		flex: 1 1 10rem;
	}

	.nx-listhead__tools .nx-sort select {
		width: 100%;
	}

	.nx-viewswitch {
		order: 3;
		flex: 0 0 auto;
	}
}

@media (max-width: 640px) {
	/*
	 * Zwei Karten nebeneinander statt einer.
	 *
	 * Eine Karte je Zeile lohnt den Platz nicht: Der Bildschirm zeigt dann
	 * ein Produkt, und wer vergleichen will, scrollt. Zwei passen bequem,
	 * auch auf den schmalsten Geraeten.
	 */
	.nx-grid--raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .75rem;
	}

	/*
	 * Auf dem Telefon zwei je Zeile - dieselbe Entscheidung, die das
	 * allgemeine Raster hier ohnehin trifft.
	 */
	.nx-tile__title {
		font-size: .9rem;
	}

	.nx-tile__shipping,
	.nx-tile__variants {
		font-size: .78rem;
	}

	.nx-product__title {
		font-size: 1.35rem;
		padding-right: 0;
	}

	.nx-product__tools {
		position: static;
		margin-bottom: .75rem;
	}

	/*
	 * Preis, Verfuegbarkeit und Kaufknopf als ein Block.
	 *
	 * Auf dem Handy stehen sie sonst frei auf dem Seitenhintergrund und
	 * zerfallen in Einzelteile. Zusammen gefasst sind sie das, was sie sind:
	 * die Entscheidung.
	 */
	.nx-product__buy {
		background: var(--nx-surface);
		border: 1px solid var(--nx-line);
		border-radius: var(--nx-radius);
		box-shadow: var(--nx-shadow);
		padding: 1rem;
	}

	.nx-thumbs {
		flex-direction: row;
		order: 2;
		overflow-x: auto;
	}

	.nx-product__media {
		flex-direction: column;
	}

	.nx-grid--liste .nx-tile__link {
		flex-direction: column;
		text-align: center;
	}

	.nx-grid--liste .nx-tile__prices {
		margin-left: 0;
		justify-content: center;
	}
}

/* --- Blaetterung und Nachladen ------------------------------------------ */

/*
 * Beides steht da, und das ist Absicht.
 *
 * Der Knopf haengt die naechste Seite an - bequemer fuer Besucher. Die
 * Seitenlinks darunter bleiben echte Adressen: Ein Crawler folgt ihnen und
 * findet jedes Produkt. Ohne JavaScript ist der Knopf aus und die Blaetterung
 * traegt allein.
 */
.nx-more {
	display: flex;
	justify-content: center;
	margin: 1.5rem 0 1rem;
}

.nx-more__btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 2.9rem;
	padding: 0 1.6rem;
	border: 1px solid var(--nx-line);
	border-radius: 999px;
	background: var(--nx-surface);
	color: var(--nx-ink);
	font: inherit;
	font-size: .95rem;
	cursor: pointer;
}

.nx-more__btn:hover {
	border-color: var(--nx-green);
	color: var(--nx-green-dark);
}

.nx-more__btn.is-loading {
	opacity: .6;
	cursor: progress;
}

.nx-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .4rem;
	margin: 1rem 0 0;
}

.nx-pager__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 .7rem;
	border: 1px solid var(--nx-line);
	border-radius: var(--nx-radius-sm);
	background: var(--nx-surface);
	color: var(--nx-ink);
	font-size: .9rem;
}

.nx-pager__item:hover {
	border-color: var(--nx-green);
	color: var(--nx-green-dark);
	text-decoration: none;
}

.nx-pager__item.is-current {
	background: var(--nx-green-soft);
	border-color: var(--nx-green);
	color: var(--nx-green-dark);
	font-weight: 600;
}

.nx-pager__gap {
	color: var(--nx-muted);
	padding: 0 .2rem;
}