/**
 * Ergänzende Stile für die vom Plugin erzeugten Bausteine.
 *
 * Das Layout kommt weiterhin aus dem Theme. Hier stehen nur Regeln, die das
 * Plugin selbst mitbringen muss, damit die Darstellung auch in einem fremden
 * Theme lesbar bleibt.
 */

.nexlas-results-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
	align-items: baseline;
}

.nexlas-updated {
	opacity: 0.75;
	font-size: 0.85em;
}

.nexlas-filters {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.nexlas-filter {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border: 1px solid currentColor;
	border-radius: 3px;
	text-decoration: none;
}

.nexlas-filter.is-active {
	font-weight: 700;
}

/*
 * Die Blätterung trägt beide Klassen: `pagination` aus dem Theme und
 * `nexlas-pagination` aus dem Plugin. Das Theme zentriert sie über
 * `text-align`, was ein Flex-Container nicht beachtet - die Leiste stand
 * deshalb links, mit doppelten Abständen aus `gap` und `margin`. Beides
 * wird hier zusammengeführt, statt gegeneinander zu arbeiten.
 */
.nexlas-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	justify-content: center;
}

.nexlas-pagination a,
.nexlas-pagination span {
	margin: 0;
	padding: 0.3rem 0.6rem;
	text-decoration: none;
	line-height: 1.2;
}

.nexlas-pagination span[aria-current] {
	font-weight: 700;
}

/*
 * Die Seite ohne Treffer.
 *
 * Sie wird häufiger gesehen, als einem lieb ist: falsch geschriebene Suche,
 * zu enge Filter, ein Produkt, das der Händler zurückgezogen hat. Deshalb ist
 * sie hier kein Restzustand, sondern ein eigener Baustein - mit einem
 * Suchfeld, das ohne die Kopfleiste des Themes auskommt, und mit Wegen, die
 * nachweislich irgendwo hinführen.
 *
 * Die Akzentfarbe lässt sich vom Theme setzen; ohne Angabe gilt das Grün.
 */
.nexlas-empty {
	--nexlas-accent: #84b03d;

	display: block;
	padding: 1.5rem;
	background: #f8f8fa;
	border: 1px solid #dadae5;
	border-radius: 3px;
}

/*
 * Gegen die Inhaltsregeln des Themes.
 *
 * Das Theme gibt Absätzen und Listen im Inhaltsbereich `display:inline-block`
 * mit, Listen zusätzlich Aufzählungspunkte - über `.aac-main-right-content p`
 * und `.aac-main-right-content ul`. Eine Regel mit nur einer Klasse verliert
 * dagegen; deshalb stehen hier zwei. Ohne das stand der Baustein mit
 * Aufzählungspunkten und untereinander statt im Raster.
 */
.nexlas-empty p,
.nexlas-empty ul,
.nexlas-empty li {
	display: block;
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: left;
	font-size: 1rem;
	line-height: 1.5;
}

.nexlas-empty .nexlas-empty__headline {
	margin: 0 0 0.75rem;
	padding-bottom: 0.5rem;
	font-size: 1.35rem;
	line-height: 1.3;
}

.nexlas-empty .nexlas-empty__lead {
	margin: 0 0 1.25rem;
	max-width: 44rem;
}

.nexlas-empty .nexlas-empty__filters {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	background: #fff;
	border-left: 3px solid var(--nexlas-accent);
}

.nexlas-empty .nexlas-empty__filters-lead {
	margin: 0 0 0.5rem;
	font-weight: 700;
}

.nexlas-empty ul.nexlas-empty__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.5rem;
}

.nexlas-empty .nexlas-empty__filters p:last-child {
	margin: 0;
}

/* Das Suchfeld bringt seine Darstellung mit, statt sie sich zu borgen. */
.nexlas-empty .nexlas-empty__search {
	margin: 0 0 1.5rem;
	max-width: 34rem;
}

.nexlas-empty .nexlas-empty__search label {
	display: block;
	margin: 0 0 0.35rem;
	font-weight: 700;
}

.nexlas-empty .nexlas-empty__search-row {
	display: flex;
	gap: 0.5rem;
}

.nexlas-empty .nexlas-empty__search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 2.5rem;
	padding: 0 0.75rem;
	background: #fff;
	border: 1px solid #dadae5;
	border-top-color: #cbcbdb;
	box-shadow: inset 0 1px 1px #dadae5;
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
}

.nexlas-empty .nexlas-empty__search input[type="search"]:focus {
	outline: 2px solid var(--nexlas-accent);
	outline-offset: 1px;
}

.nexlas-empty .nexlas-empty__search button {
	flex: 0 0 auto;
	height: 2.5rem;
	padding: 0 1.25rem;
	background: var(--nexlas-accent);
	border: 0 none;
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.nexlas-empty .nexlas-empty__suggestions h2 {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
}

.nexlas-empty ul.nexlas-empty__links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.5rem;
}

.nexlas-empty .nexlas-empty__links a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: #fff;
	border: 1px solid #dadae5;
	text-decoration: none;
}

.nexlas-empty .nexlas-empty__links a:hover,
.nexlas-empty .nexlas-empty__links a:focus {
	border-color: var(--nexlas-accent);
}

.nexlas-empty .nexlas-empty__link-count {
	flex: 0 0 auto;
	font-size: 0.85em;
	opacity: 0.75;
}

@media (max-width: 40rem) {
	.nexlas-empty {
		padding: 1rem;
	}

	.nexlas-empty .nexlas-empty__search-row {
		flex-wrap: wrap;
	}

	.nexlas-empty .nexlas-empty__search button {
		width: 100%;
	}
}

.nexlas-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.nexlas-brands ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nexlas-facts {
	display: grid;
	grid-template-columns: minmax(11rem, 15rem) 1fr;
	gap: 0.25rem 1rem;
	margin: 1rem 0;
}

/*
 * Die Breitenangaben des Themes gelten hier nicht.
 *
 * Das Theme gibt den Bezeichnungen `width:35%` und den Werten `width:44%` -
 * geschrieben für nebeneinanderstehende Blöcke. In einem Raster bezieht sich
 * das Prozent auf die Rasterspalte: aus 35 % von 12 rem wurden gut vier
 * Zentimeter, und "Ersparnis:" brach mitten im Wort um. Zwei Klassen plus
 * Elementname, damit die Regel gegen `.swiperOffer .swiperPrice` besteht.
 */
/*
 * Die neuen Zeilen der Angabentabelle brauchen dieselbe Darstellung wie die
 * aus dem Theme; deren Regel zaehlt die Klassen einzeln auf.
 */
.swiperOffer .nexlas-facts .swiperTotal,
.swiperOffer .nexlas-facts .swiperDelivery,
.swiperOffer .nexlas-facts .swiperAvailability {
	padding: 16px;
	border-bottom: 1px solid #7e707045;
	word-break: break-word;
}

.swiperOffer .nexlas-facts > div,
.nexlas-facts > div {
	width: auto;
	margin-top: 0;
}

@media (max-width: 36rem) {
	.nexlas-facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Einspaltig gehört die Trennlinie nur unter den Wert. */
	.swiperOffer .nexlas-facts > div:nth-child(odd) {
		border-bottom: 0 none;
		padding-bottom: 0;
	}
}

/*
 * Galerie der Produktseite - nur vorhanden, wenn der Feed mehr als ein Bild
 * geliefert hat.
 */
.nexlas-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0 0 1rem;
}

.nexlas-gallery__thumb {
	padding: 2px;
	border: 1px solid #dadae5;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	line-height: 0;
}

.nexlas-gallery__thumb.is-active,
.nexlas-gallery__thumb:hover {
	border-color: #84b03d;
}

.nexlas-gallery__thumb img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

/* Hinweis auf zusammengefasste Varianten in der Ergebnisliste. */
.nexlas-card-variants {
	margin: 0.15rem 0 0.25rem;
	font-size: 0.78rem;
	color: #7e7070;
	opacity: 0.9;
}

.nexlas-offer-link {
	display: block;
	text-decoration: none;
}

/*
 * Aehnliche Produkte und Varianten.
 *
 * Frueher ein Flexlayout mit fester Kartenbreite von 200 Pixeln. Auf einem
 * Telefon mit 360 Pixeln Breite brauchen zwei solche Karten 416 - also passte
 * nur eine je Zeile, und der Block stand untereinander statt nebeneinander.
 *
 * Jetzt ein Raster: so viele Spalten, wie hineinpassen, mindestens 9rem
 * breit. Damit stehen auf jedem Telefon zwei nebeneinander, auf breiten
 * Schirmen vier oder fuenf - dieselbe Rechnung wie bei den Produktkacheln.
 */
.nexlas-variants {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: 1rem;
}

.nexlas-variants h2 {
	grid-column: 1 / -1;
}

.nexlas-variants .variants {
	min-width: 0;
}

.nexlas-variants img {
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Die Begruendung gehoert zur Karte, nicht in den Fliesstext daneben. */
.nexlas-variants .variants .nexlas-section-note {
	margin: .35rem 0 0;
	font-size: 0.8rem;
}

.nexlas-price-notice {
	font-size: 0.8em;
	opacity: 0.85;
}

/* Angebotsvergleich auf der Produktseite (Modul 7). */
.nexlas-offers {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}

.nexlas-offers th,
.nexlas-offers td {
	padding: 0.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	text-align: left;
	vertical-align: top;
}

.nexlas-offers .is-best {
	font-weight: 700;
}

.nexlas-unknown {
	font-style: italic;
	opacity: 0.8;
}

/* Preisbewertung (Modul 8). */
.nexlas-deal {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	border: 1px solid currentColor;
	font-size: 0.85em;
}

.nexlas-deal--very-good,
.nexlas-deal--good {
	color: #1d7a3c;
}

.nexlas-deal--high {
	color: #a3401b;
}

.nexlas-price-history {
	margin: 1rem 0;
}

.nexlas-price-history dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 0.5rem;
	margin: 0;
}

.nexlas-price-history dt {
	font-size: 0.8em;
	opacity: 0.8;
}

/* Trefferabschnitte nach Relationstyp (Modul 4/16). */
.nexlas-section-title {
	margin: 1.5rem 0 0.5rem;
}

.nexlas-section-note {
	font-size: 0.85em;
	opacity: 0.8;
	margin-bottom: 0.5rem;
}

/*
 * Die Filterleiste.
 *
 * Ein Kasten, ein Formular. Angeordnet wird in einem Raster, das sich selbst
 * umbricht - keine festen Spaltenzahlen, keine Breiten in Prozent. Auf einem
 * Telefon steht dasselbe Markup einspaltig da, ohne eigene Regel dafuer.
 */
.nexlas-facets-form {
	--nexlas-accent: #84b03d;
	--nexlas-line: #dadae5;

	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--nexlas-line);
	border-radius: 6px;
	background: #fff;
}

.nexlas-facets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.9rem 1.1rem;
	align-items: end;
	margin: 0;
}

.nexlas-facets-form p {
	margin: 0;
}

.nexlas-facet {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.nexlas-facet__label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	opacity: 0.75;
}

.nexlas-facets-form input[type="number"],
.nexlas-facets-form select {
	width: 100%;
	min-width: 0;
	height: 2.35rem;
	padding: 0 0.6rem;
	border: 1px solid var(--nexlas-line);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	font-size: 0.9rem;
	color: inherit;
}

.nexlas-facets-form input[type="number"]:focus,
.nexlas-facets-form select:focus {
	outline: 2px solid var(--nexlas-accent);
	outline-offset: 1px;
}

/* Preis: zwei Zahlenfelder mit Gedankenstrich, darueber der Schieber. */
.nexlas-facet__pair {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.nexlas-facet__pair label {
	flex: 1 1 0;
	min-width: 0;
}

.nexlas-facet__dash {
	flex: 0 0 auto;
	opacity: 0.5;
}

/*
 * Zwei Schieber uebereinander.
 *
 * Beide liegen auf derselben Flaeche; durchgelassen werden nur die Griffe.
 * Ohne JavaScript bleibt der Baustein unsichtbar - die Zahlenfelder darunter
 * tun dann die ganze Arbeit.
 */
.nexlas-range {
	position: relative;
	height: 1.6rem;
	margin: 0.2rem 0 0.1rem;
	display: none;
}

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

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

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

.nexlas-range__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

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

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

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

.nexlas-range__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(132, 176, 61, 0.35);
}

.nexlas-range__input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(132, 176, 61, 0.35);
}

/*
 * Ja-Nein-Merkmale als Schaltflaechen, nicht als Kaestchen in einer Reihe
 * mit Zahlenfeldern. Vorher standen sie zwischen "Gesamtpreis ab" und
 * "Gesamtpreis bis" und trennten, was zusammengehoert.
 */
.nexlas-facet-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.9rem 0 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid var(--nexlas-line);
}

.nexlas-facet-flag {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--nexlas-line);
	border-radius: 999px;
	font-size: 0.85rem;
	line-height: 1.4;
	cursor: pointer;
	user-select: none;
}

.nexlas-facet-flag:hover {
	border-color: var(--nexlas-accent);
}

.nexlas-facet-flag.is-active {
	border-color: var(--nexlas-accent);
	background: rgba(132, 176, 61, 0.1);
	font-weight: 600;
}

.nexlas-facet-flag input {
	margin: 0;
	accent-color: var(--nexlas-accent);
}

.nexlas-facets-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin: 0.9rem 0 0;
}

.nexlas-facets-submit {
	padding: 0.45rem 1.2rem;
	border: 0 none;
	border-radius: 4px;
	background: var(--nexlas-accent);
	color: #fff;
	font: inherit;
	cursor: pointer;
}

/* Was gerade eingegrenzt ist - und wie man es wieder loswird. */
.nexlas-facets-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	margin: 0 0 0.9rem;
	padding: 0 0 0.9rem;
	border-bottom: 1px solid var(--nexlas-line);
	font-size: 0.85em;
}

.nexlas-facets-active__label {
	opacity: 0.75;
}

.nexlas-facet-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--nexlas-accent);
	border-radius: 999px;
	background: rgba(132, 176, 61, 0.08);
	text-decoration: none;
	line-height: 1.7;
}

.nexlas-facet-chip span {
	opacity: 0.6;
}

.nexlas-facet-chip:hover span {
	opacity: 1;
}

.nexlas-facets-form .nexlas-section-note {
	flex: 1 1 18rem;
	margin: 0;
	font-size: 0.8em;
	opacity: 0.8;
}

@media (max-width: 36rem) {
	.nexlas-facets-form {
		padding: 0.9rem;
	}

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

	.nexlas-facets-submit {
		width: 100%;
	}
}


/*
 * Kennzahlen als schmale Zeile, nicht als Kachelwand.
 *
 * Fünf Kacheln in Kartenbreite standen vor den Produkten und beanspruchten
 * mehr Platz als die erste Produktreihe. Sie sind Begleitinformation und
 * gehören in eine Zeile: Wert und Bezeichnung nebeneinander, durch Punkte
 * getrennt, umbrechend wenn der Platz nicht reicht.
 */
.nexlas-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1.25rem;
	margin: 0.5rem 0 1rem;
	font-size: 0.85em;
	line-height: 1.5;
	color: #7e7070;
}

.nexlas-stats div {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35rem;
}

.nexlas-stats div + div::before {
	content: "·";
	margin-right: 0.35rem;
	opacity: 0.5;
}

.nexlas-stats strong {
	font-weight: 700;
}

.nexlas-category-facts {
	margin: 0;
}

/*
 * Kaufberater.
 *
 * Er steht in Beitraegen und Seiten - also dort, wo das Theme nichts ueber
 * ihn weiss. Fruehrer erbte er deshalb, was das Theme fuer Formulare gerade
 * vorsah: nackte Felder in einer Zeile, ein Systemknopf, keine Abgrenzung
 * zum Fliesstext. Er bringt sein Aussehen jetzt selbst mit.
 *
 * Die Farben kommen aus denselben Eigenschaften wie im Theme, mit
 * Rueckfallwerten - so passt er sich an, wenn das Theme sie setzt, und sieht
 * auch ohne Theme ordentlich aus.
 */
.nexlas-advisor {
	--nxa-green: var(--nx-green, #84b03d);
	--nxa-green-dark: var(--nx-green-dark, #6d9432);
	--nxa-line: var(--nx-line, #e5e7eb);
	--nxa-muted: var(--nx-muted, #7b7f86);
	--nxa-surface: var(--nx-surface, #fff);

	margin: 1.75rem 0;
	padding: 1.25rem;
	border: 1px solid var(--nxa-line);
	border-radius: 10px;
	background: var(--nxa-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
}

.nexlas-advisor__head {
	margin-bottom: 1rem;
}

.nexlas-advisor__title {
	margin: 0 0 .25rem;
	font-size: 1.25rem;
	line-height: 1.25;
}

.nexlas-advisor__intro {
	margin: 0;
	color: var(--nxa-muted);
	font-size: .9rem;
}

.nexlas-advisor__form {
	margin: 0;
}

/*
 * Ein Feld je Spalte, so viele Spalten wie hineinpassen. Auf dem Handy wird
 * daraus von selbst eine Spalte - ohne eigene Regel fuer schmale Schirme.
 */
.nexlas-advisor__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: .85rem;
	align-items: end;
}

.nexlas-advisor__field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}

.nexlas-advisor__label {
	color: var(--nxa-muted);
	font-size: .8rem;
	font-weight: 600;
}

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

.nexlas-advisor input:focus,
.nexlas-advisor select:focus {
	outline: 2px solid var(--nxa-green);
	outline-offset: 1px;
}

.nexlas-advisor__check {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	height: 2.5rem;
	padding: 0 .85rem;
	border: 1px solid var(--nxa-line);
	border-radius: 999px;
	font-size: .88rem;
	cursor: pointer;
}

.nexlas-advisor__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1rem;
}

.nexlas-advisor__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.6rem;
	padding: 0 1.4rem;
	border: 1px solid var(--nxa-green);
	border-radius: 6px;
	background: var(--nxa-green);
	color: #fff;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}

.nexlas-advisor__submit:hover {
	background: var(--nxa-green-dark);
	border-color: var(--nxa-green-dark);
}

.nexlas-advisor__reset {
	color: var(--nxa-muted);
	font-size: .85rem;
}

.nexlas-advisor__rules {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--nxa-line);
}

.nexlas-advisor__rules h3 {
	margin: 0 0 .5rem;
	font-size: .95rem;
}

.nexlas-advisor__rules dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: .5rem 1rem;
	margin: 0;
}

.nexlas-advisor__rules dt {
	color: var(--nxa-muted);
	font-size: 0.8rem;
}

.nexlas-advisor__rules dd {
	margin: 0;
	font-size: 0.92rem;
}

.nexlas-advisor__resulthead {
	margin: 1.25rem 0 .75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--nxa-line);
	font-size: 1rem;
}

.nexlas-advisor__note {
	margin: .75rem 0;
	padding-left: .7rem;
	border-left: 3px solid var(--nxa-green);
	font-size: 0.9rem;
}

.nexlas-advisor__disclaimer {
	margin: 1.25rem 0 0;
	color: var(--nxa-muted);
	font-size: 0.8rem;
}

@media (max-width: 640px) {
	.nexlas-advisor {
		padding: 1rem;
	}

	.nexlas-advisor__actions {
		gap: .6rem;
	}

	.nexlas-advisor__submit {
		width: 100%;
	}
}

/*
 * Hinweis eines Shortcodes an die Redaktion.
 *
 * Er erscheint nur für angemeldete Bearbeiter und sagt, warum an dieser
 * Stelle nichts steht - eine abgeschaltete Funktion oder ein Berater, den es
 * nicht gibt. Besucher sehen ihn nie.
 */
.nexlas-shortcode-hint {
	padding: 0.75rem 1rem;
	border: 1px dashed #c9a227;
	border-radius: 6px;
	background: #fdf8e6;
	color: #6b5600;
	font-size: 0.9rem;
}

/*
 * Beschreibungstext unter der Ergebnisliste.
 *
 * Er trug die Klassen `aac-additional aac-boxed` des abgeloesten Themes und
 * stand danach ohne jede Gestaltung im Raum. Er bringt sie jetzt selbst mit.
 */
.nexlas-category-text {
	--nxt-line: var(--nx-line, #e5e7eb);
	--nxt-muted: var(--nx-muted, #7b7f86);
	--nxt-surface: var(--nx-surface, #fff);

	margin: 1.5rem 0 0;
	padding: 1.25rem;
	border: 1px solid var(--nxt-line);
	border-radius: 10px;
	background: var(--nxt-surface);
}

.nexlas-category-text > *:first-child {
	margin-top: 0;
}

.nexlas-category-text > *:last-child {
	margin-bottom: 0;
}

.nexlas-category-text h2,
.nexlas-category-text h3 {
	font-size: 1.05rem;
}

.nexlas-price-notice {
	color: var(--nxt-muted);
	font-size: 0.8rem;
}

/*
 * Markenuebersicht: mehrere Spalten, so viele wie hineinpassen. Die
 * Aufteilung in Bloecke kommt aus der Vorlage; hier steht nur, wie sie
 * nebeneinander stehen.
 */
.nexlas-brands {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0 1.5rem;
}

.nexlas-brands ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nexlas-brands li {
	padding: .35rem 0;
	border-bottom: 1px solid var(--nx-line-soft, #f1f2f4);
	font-size: .92rem;
}

.nexlas-brands li:last-child {
	border-bottom: 0;
}

/* Die Händlerzahl unter dem Preis (Modul 12) - eine Zeile, kein Kasten. */
.nexlas-card-merchants {
	margin: 0.15rem 0 0;
	color: #6b6b6b;
	font-size: 0.9em;
}