/**
 * Amzly Price Badge
 *
 * Die Pille bleibt neutral, die Signalfarbe steckt ausschließlich im Punkt.
 * Eine flächig eingefärbte Pille mitten im Fließtext liest sich wie eine
 * Fehlermeldung und kollidiert mit fremden Theme-Farben.
 *
 * Farbmodus: --light und --dark erzwingen. --auto folgt beim Badge und beim
 * Chart der Systemeinstellung, weil beide eine eigene Flaeche mitbringen;
 * bei Liste und Vergleich dagegen der Schriftfarbe des Themes, weil sie
 * ohne eigenen Hintergrund direkt auf der Seite stehen.
 * Die Umschaltung passiert rein in CSS, damit das Badge serverseitig aus dem
 * Cache gerendert werden kann und sich trotzdem je Besucher anpasst.
 */

/*
 * Polsterung zaehlt zur Breite, nicht dazu.
 *
 * Themes setzen das meist global, verlassen darf man sich darauf nicht: Ohne
 * die Zeile ist ein Kasten mit `width: 100%` und Innenabstand breiter als
 * sein Platz, und die ganze Seite bekommt einen waagerechten Rollbalken. Nur
 * die eigenen Bausteine, nichts im Theme drumherum.
 */
.amzly-badge,
.amzly-badge-wrap,
.amzly-badge-group,
.amzly-badge-figure,
.amzly-badge-figure__body,
.amzly-list,
.amzly-list__row,
.amzly-list__main,
.amzly-compare,
.amzly-compare__card,
.amzly-compare__head,
.amzly-matrix,
.amzly-matrix__table,
.amzly-matrix__product,
.amzly-matrix__label,
.amzly-matrix__value,
.amzly-chart-scope,
.amzly-chart {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Tokens */

.amzly-badge {
	--amzly-bg: #ffffff;
	--amzly-line: #dde3ea;
	--amzly-ink: #11151b;
	--amzly-muted: #6a7583;

	--amzly-green: #12a257;
	--amzly-blue: #3b82f6;
	--amzly-amber: #f0a020;
	--amzly-red: #e0464a;
	--amzly-grey: #9aa5b1;

	--amzly-sig: var(--amzly-grey);
	--amzly-shadow: 0 1px 2px rgba(17, 21, 27, 0.06), 0 10px 26px -20px rgba(17, 21, 27, 0.35);
}

.amzly-badge--dark {
	--amzly-bg: #171b21;
	--amzly-line: #2b333d;
	--amzly-ink: #f0f3f7;
	--amzly-muted: #97a2af;

	--amzly-green: #25c464;
	--amzly-blue: #61a2fa;
	--amzly-amber: #f5a623;
	--amzly-red: #f0575b;
	--amzly-grey: #97a2af;

	--amzly-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 28px -20px rgba(0, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
	.amzly-badge--auto {
		--amzly-bg: #171b21;
		--amzly-line: #2b333d;
		--amzly-ink: #f0f3f7;
		--amzly-muted: #97a2af;

		--amzly-green: #25c464;
		--amzly-blue: #61a2fa;
		--amzly-amber: #f5a623;
		--amzly-red: #f0575b;
		--amzly-grey: #97a2af;

		--amzly-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 28px -20px rgba(0, 0, 0, 1);
	}
}

/* Signalfarbe je Bewertungsstufe. Farbe kommt aus rating, Text aus label_de. */
.amzly-badge--great   { --amzly-sig: var(--amzly-green); }
.amzly-badge--good    { --amzly-sig: var(--amzly-blue); }
.amzly-badge--average { --amzly-sig: var(--amzly-amber); }
.amzly-badge--high    { --amzly-sig: var(--amzly-red); }
.amzly-badge--unknown { --amzly-sig: var(--amzly-grey); }

/* ------------------------------------------------------------- Grundform */

/*
 * Doppelte Klasse hebt die Spezifität über typische Theme-Regeln wie
 * `.entry-content a { color: … }`, ohne zu !important greifen zu müssen.
 */
.amzly-badge.amzly-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 9px;
	border: 1px solid var(--amzly-line);
	border-radius: 999px;
	background: var(--amzly-bg);
	color: var(--amzly-ink);
	font-size: 0.82em;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: baseline;
	box-shadow: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.amzly-badge.amzly-badge:hover,
.amzly-badge.amzly-badge:focus {
	color: var(--amzly-ink);
	text-decoration: none;
}

/*
 * Der Anheber gilt für Maus und Tastatur, nicht für den Fokus nach einem
 * Klick: Sonst bliebe das Badge nach dem Anklicken dauerhaft angehoben, wenn
 * der Link in einem neuen Tab öffnet und die Seite darunter stehen bleibt.
 */
.amzly-badge.amzly-badge:hover,
.amzly-badge.amzly-badge:focus-visible {
	transform: translateY(-1px);
	box-shadow: var(--amzly-shadow);
}

.amzly-badge.amzly-badge:focus-visible {
	outline: 2px solid var(--amzly-sig);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- Bausteine */

.amzly-badge__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.amzly-badge__logo {
	flex: none;
	display: block;
	width: auto;
	height: 13px;
	box-sizing: content-box;
	padding-right: 9px;
	margin-right: 1px;
	border-right: 1px solid var(--amzly-line);
	color: var(--amzly-ink);
}

.amzly-badge__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--amzly-sig);
	box-shadow: 0 0 0 0 var(--amzly-sig);
}

.amzly-badge__label {
	color: var(--amzly-ink);
	font-weight: 500;
}

.amzly-badge__price {
	color: var(--amzly-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.amzly-badge__delta {
	color: var(--amzly-muted);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Größen */

.amzly-badge--sm.amzly-badge--sm {
	gap: 6px;
	padding: 3px 9px 3px 7px;
	font-size: 0.72em;
}

.amzly-badge--sm .amzly-badge__logo {
	height: 10px;
	padding-right: 7px;
}

.amzly-badge--sm .amzly-badge__dot {
	width: 6px;
	height: 6px;
}

.amzly-badge--lg.amzly-badge--lg {
	gap: 10px;
	padding: 7px 15px 7px 11px;
	font-size: 0.95em;
}

.amzly-badge--lg .amzly-badge__logo {
	height: 16px;
	padding-right: 11px;
}

.amzly-badge--lg .amzly-badge__dot {
	width: 9px;
	height: 9px;
}

/* ------------------------------------------------------------------- Puls */

.amzly-badge--pulse .amzly-badge__dot {
	animation: amzly-badge-pulse 2.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes amzly-badge-pulse {
	0% {
		box-shadow: 0 0 0 0 var(--amzly-sig);
		opacity: 1;
	}
	70% {
		box-shadow: 0 0 0 6px transparent;
		opacity: 0.72;
	}
	100% {
		box-shadow: 0 0 0 0 transparent;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.amzly-badge--pulse .amzly-badge__dot {
		animation: none;
	}

	.amzly-badge.amzly-badge,
	.amzly-badge.amzly-badge:hover,
	.amzly-badge.amzly-badge:focus,
	.amzly-badge.amzly-badge:focus-visible {
		transition: none;
		transform: none;
	}
}

/* -------------------------------------------------------------- Varianten */

.amzly-badge-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 1.2em 0;
	align-items: flex-start;
}

.amzly-badge-wrap--block-center {
	align-items: center;
}

.amzly-badge-wrap--block-right {
	align-items: flex-end;
}

.amzly-badge__credit {
	color: var(--amzly-muted, #6a7583);
	font-size: 0.72em;
	line-height: 1.4;
}

/* ---------------------------------------------------------------- Hinweis */

/* Nur für angemeldete Redakteure sichtbar, siehe Renderer. */
.amzly-badge--notice.amzly-badge--notice {
	border-style: dashed;
	border-color: #e0464a;
	color: #e0464a;
	background: transparent;
	cursor: help;
}

.amzly-badge--notice.amzly-badge--notice:hover {
	transform: none;
	box-shadow: none;
	color: #e0464a;
}

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

/*
 * Eigenes <a> neben dem Badge, nicht darin: Beide führen an verschiedene Ziele,
 * und verschachtelte Links sind ungültiges HTML. Per CSS wirken sie als Einheit.
 */
.amzly-badge-group {
	display: inline-flex;
	align-items: stretch;
	vertical-align: baseline;
	max-width: 100%;

	/*
	 * Umbrechen statt herausragen — in jeder Breite, nicht nur unter einer
	 * bestimmten Fenstergroesse. Die Gruppe steht auch in Karten und Zeilen,
	 * die viel schmaler sind als das Fenster; eine Regel am Fenster kann das
	 * nicht wissen. Ohne Spalte kein Spalt: unumgebrochen sieht sie aus wie
	 * vorher, umgebrochen trennt der Zeilenabstand die Stuecke.
	 */
	flex-wrap: wrap;
	row-gap: 6px;
}

/*
 * In der Gruppe hebt sich nur das überfahrene Stück, nicht die ganze Pille.
 *
 * Damit das nach Tiefe aussieht und nicht nach einer gerissenen Form, legt
 * sich das angehobene Stück über seine Nachbarn: Ohne die Stapelreihenfolge
 * verschwände sein Schatten unter dem Nachbarstück, und die abgeflachte
 * Naht bekäme eine sichtbare Kerbe. Die Nachbarn bleiben liegen — genau das
 * macht die Bewegung ja lesbar.
 */
.amzly-badge-group > * {
	position: relative;
	z-index: 1;
}

.amzly-badge-group > :hover,
.amzly-badge-group > :focus-visible {
	z-index: 2;
}

.amzly-badge__alert.amzly-badge__alert {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border: 1px solid #d98a12;
	border-radius: 999px;
	background: #f59c1a;
	color: #2a1c05;
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.12s ease, transform 0.12s ease;
}

/*
 * Dunkles Braun auf dem Markenorange statt Weiß: Weiß auf #f59c1a erreicht den
 * Kontrastwert für Fließtext nicht.
 */
.amzly-badge__alert.amzly-badge__alert:hover,
.amzly-badge__alert.amzly-badge__alert:focus {
	color: #2a1c05;
	text-decoration: none;
	filter: brightness(1.06);
}

.amzly-badge__alert.amzly-badge__alert:hover,
.amzly-badge__alert.amzly-badge__alert:focus-visible {
	transform: translateY(-1px);
}

.amzly-badge__alert.amzly-badge__alert:focus-visible {
	outline: 2px solid #2a1c05;
	outline-offset: 2px;
}

.amzly-badge__bell {
	width: 12px;
	height: 12px;
	flex: none;
	display: block;
}

.amzly-badge__alert--sm.amzly-badge__alert--sm {
	gap: 4px;
	padding: 3px 9px;
	font-size: 0.72em;
}

.amzly-badge__alert--sm .amzly-badge__bell {
	width: 10px;
	height: 10px;
}

.amzly-badge__alert--lg.amzly-badge__alert--lg {
	gap: 7px;
	padding: 7px 14px;
	font-size: 0.95em;
}

.amzly-badge__alert--lg .amzly-badge__bell {
	width: 15px;
	height: 15px;
}

/* Auf sehr schmalen Anzeigen nur die Glocke, damit nichts umbricht. */
@media (max-width: 380px) {
	.amzly-badge__alert-text {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.amzly-badge__alert.amzly-badge__alert,
	.amzly-badge__alert.amzly-badge__alert:hover,
	.amzly-badge__alert.amzly-badge__alert:focus-visible {
		transition: none;
		transform: none;
	}
}

/* ------------------------------------------------- Produktbild daneben */

/*
 * Bild links, daneben das, was sonst allein stünde.
 *
 * `align-items: stretch` erledigt die Höhe: Das Bild wird so hoch wie sein
 * Nachbar — beim Badge allein also badgehoch, bei einem Namen darüber so hoch
 * wie Name und Badge zusammen. Nichts davon ist als Pixelwert hinterlegt,
 * damit es auch bei anderer Schriftgröße oder umgebrochenem Namen stimmt.
 */
.amzly-badge-figure {
	/* Badge allein: ungefaehr badgehoch. */
	--amzly-thumb: 1.9em;

	display: inline-flex;
	align-items: stretch;
	gap: 8px;
	vertical-align: baseline;
	max-width: 100%;
}

/* Name darueber: so hoch wie Name und Badge zusammen. */
.amzly-badge-figure--tall {
	--amzly-thumb: 4.4em;
}

.amzly-badge-figure__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 4px;
	min-width: 0;
}

.amzly-badge__thumb.amzly-badge__thumb {
	flex: none;

	/*
	 * Feste Breite, mitwachsende Hoehe.
	 *
	 * Umgekehrt waere es schoener — Breite aus der Hoehe —, aber ein Bild,
	 * dessen Hoehe erst durch `stretch` entsteht, liefert dem Browser keine
	 * Breite: Bis es geladen ist, waere es null Pixel breit und das Badge
	 * daneben spraenge beim Nachladen zur Seite. Mit fester Breite steht der
	 * Platz von Anfang an, die Hoehe folgt trotzdem dem Nachbarn, und
	 * `contain` haelt das Seitenverhaeltnis.
	 */
	align-self: stretch;
	width: var(--amzly-thumb, 1.9em);
	object-fit: contain;
	border-radius: 4px;
}

/* ------------------------------------------------- Produktname */

.amzly-badge__title.amzly-badge__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 46em;
	color: inherit;
	font-size: 0.98em;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.amzly-badge__title.amzly-badge__title:hover,
.amzly-badge__title.amzly-badge__title:focus {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Unter dem Badge tritt der Name zurück: Dort ist er Beleg dafür, welches
 * Produkt gemeint ist, nicht die Überschrift des Absatzes. Kleiner und
 * gedämpft, damit das Badge die Hauptsache bleibt.
 */
.amzly-badge__title--below.amzly-badge__title--below {
	margin-top: 2px;

	/*
	 * Gedämpft über die Deckkraft statt über einen festen Grauton: Der Name
	 * steht ausserhalb des Badges und sieht dessen Farbtoken nicht — und ein
	 * fester Wert waere je nach Theme entweder zu blass oder zu hart.
	 */
	opacity: 0.72;
	font-size: 0.82em;
	font-weight: 400;
}

/*
 * Ohne Datensatz ist das Badge ein <span> statt eines Verweises: Es führt
 * nirgendwohin, also darf es sich auch nicht wie ein Knopf anfassen lassen.
 */
.amzly-badge--flat.amzly-badge--flat {
	cursor: default;
}

.amzly-badge--flat.amzly-badge--flat:hover {
	transform: none;
	box-shadow: none;
}

/* ══════════════════════════════════════════════ Vergleichstabelle

   Eine echte <table>: Bei fuenf Produkten und zehn Zeilen muss das, was
   verglichen werden soll, nebeneinander stehen. Auf schmalen Anzeigen scrollt
   der Rahmen seitlich, statt die Spalten umzubrechen — umgebrochen waere es
   kein Vergleich mehr.
   ══════════════════════════════════════════════════════════════════════ */

.amzly-matrix {
	--m-line:  #e3e7ec;
	--m-ink:   #11151b;
	--m-muted: #6a7583;
	--m-head:  #f6f7f9;

	/* Sanftes Gruen: hebt hervor, ohne wie eine Warnung zu wirken. */
	--m-pick:      #edf8f0;
	--m-pick-line: #1aa64b;
	--m-zebra:     #fafbfc;

	display: block;
	margin: 1.2em 0;
	color: var(--m-ink);
}

.amzly-matrix--dark {
	--m-line:  #2a323c;
	--m-ink:   #eef2f7;
	--m-muted: #97a2af;
	--m-head:  #12161c;

	--m-pick:      #14251a;
	--m-pick-line: #25c464;
	--m-zebra:     #171b21;

	padding: 14px 16px;
	border-radius: 12px;
	background: #12161c;
}

.amzly-matrix--light {
	padding: 14px 16px;
	border-radius: 12px;
	background: #ffffff;
}

.amzly-matrix--sm { font-size: 0.9em; }
.amzly-matrix--md { font-size: 1em; }
.amzly-matrix--lg { font-size: 1.1em; }

.amzly-matrix__caption {
	display: block;
	margin-bottom: 8px;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.35;
}

.amzly-matrix__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;

	/*
	 * Feste Aufteilung: Ohne sie richtet der Browser die Spaltenbreite nach dem
	 * laengsten Wort und schiebt die Tabelle ueber den Rand hinaus. So teilen
	 * sich die Produkte den Platz gleichmaessig und brechen um, statt zu
	 * scrollen — seitlich schieben muss hier niemand.
	 */
	table-layout: fixed;
}

.amzly-matrix__corner {
	border: 0;
	width: 8.5em;
}

.amzly-matrix__product,
.amzly-matrix__label,
.amzly-matrix__value {
	padding: 10px 12px;
	vertical-align: middle;

	/*
	 * `break-word`, nicht `anywhere`: Beides bricht ein Wort, das allein nicht
	 * in die Spalte passt — eine Modellnummer ohne Trennstelle also schon.
	 * `anywhere` bricht darueber hinaus auch dann, wenn es nur enger werden
	 * soll, und machte aus „Normaler Preis" ein „Normale r Preis".
	 */
	overflow-wrap: break-word;
}

/*
 * Senkrechte Linien zwischen den Spalten.
 *
 * Ohne sie lief die Tabelle als eine Flaeche zusammen: Bei drei Produkten war
 * auf den ersten Blick nicht zu sehen, welcher Wert zu welchem Produkt gehoert.
 * Waagerechte Linien allein reichen dafuer nicht.
 */
.amzly-matrix__product + .amzly-matrix__product,
.amzly-matrix__label + .amzly-matrix__value,
.amzly-matrix__value + .amzly-matrix__value {
	border-left: 1px solid var(--m-line);
}

/* ── Kopfzeile ── */

.amzly-matrix__product {
	padding: 4px 12px 14px;
	border-bottom: 2px solid var(--m-line);
	font-weight: 400;

	/* Bild, Name und Fahne stehen mittig unter- und uebereinander: Die Spalte
	   gehoert einem Produkt, nicht einer Textzeile. */
	text-align: center;
	vertical-align: bottom;
}

.amzly-matrix__thumb {
	display: block;
	width: 5.6em;
	height: 5.6em;
	margin: 0 auto 8px;
}

.amzly-matrix__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.amzly-matrix .amzly-matrix__name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--m-ink);
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.amzly-matrix .amzly-matrix__name:hover,
.amzly-matrix .amzly-matrix__name:focus {
	color: var(--m-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ── Zeilen ── */

.amzly-matrix__label {
	/* Abgesetzt, damit das Auge beim Wandern nach rechts die Zeile haelt. */
	background: var(--m-head);
	color: var(--m-muted);
	font-size: 0.86em;
	font-weight: 600;

}

.amzly-matrix__value {
	border-top: 1px solid var(--m-line);
	text-align: center;
	font-size: 0.92em;
	font-variant-numeric: tabular-nums;
}

.amzly-matrix__label + .amzly-matrix__value,
.amzly-matrix__label {
	border-top: 1px solid var(--m-line);
}

/*
 * Jede zweite Zeile leicht hinterlegt: hilft beim Wandern ueber die Breite.
 *
 * Die Empfehlungsspalte bleibt ausgenommen. Ihre eigene Regel ist weniger
 * spezifisch als diese hier und verlor deshalb jede zweite Zeile — die gruene
 * Spalte war gestreift statt durchgehend, und damit als Spalte nicht mehr zu
 * erkennen.
 */
.amzly-matrix__table tbody tr:nth-child(even) .amzly-matrix__value:not(.amzly-matrix__value--pick) {
	background: var(--m-zebra);
}

.amzly-matrix__empty {
	color: var(--m-muted);
}

/* Der Punkt sitzt mittig neben seinem Text, nicht am Zellenrand. */
.amzly-matrix__stock,
.amzly-matrix__verdict {
	justify-content: center;
}


/*
 * Zehn Farben fuer die Empfehlungsspalte.
 *
 * Jeweils ein sehr heller Ton fuer die Flaeche und ein kraeftiger fuer Linie
 * und Faehnchen. Zu jeder gehoert eine dunkle Fassung — auf dunklem Grund
 * waere der helle Ton eine leuchtende Flaeche statt einer Hervorhebung.
 */
.amzly-matrix--pick-green {
	--m-pick:      #edf8f0;
	--m-pick-line: #1aa64b;
}

.amzly-matrix--pick-blue {
	--m-pick:      #eaf2fe;
	--m-pick-line: #2f6fdd;
}

.amzly-matrix--pick-orange {
	--m-pick:      #fef3e6;
	--m-pick-line: #e8890f;
}

.amzly-matrix--pick-red {
	--m-pick:      #fdeeee;
	--m-pick-line: #d9403f;
}

.amzly-matrix--pick-purple {
	--m-pick:      #f3eefb;
	--m-pick-line: #7a4fd1;
}

.amzly-matrix--pick-teal {
	--m-pick:      #e8f6f5;
	--m-pick-line: #12907f;
}

.amzly-matrix--pick-amber {
	--m-pick:      #fdf6e3;
	--m-pick-line: #c98a06;
}

.amzly-matrix--pick-pink {
	--m-pick:      #fdeef5;
	--m-pick-line: #d4418e;
}

.amzly-matrix--pick-slate {
	--m-pick:      #eef1f5;
	--m-pick-line: #52657d;
}

.amzly-matrix--pick-lime {
	--m-pick:      #f1f8e4;
	--m-pick-line: #6a9c1a;
}

/* Dunkle Fassung derselben zehn. */
.amzly-matrix--dark.amzly-matrix--pick-green {
	--m-pick:      #14251a;
	--m-pick-line: #25c464;
}

.amzly-matrix--dark.amzly-matrix--pick-blue {
	--m-pick:      #111d2e;
	--m-pick-line: #61a2fa;
}

.amzly-matrix--dark.amzly-matrix--pick-orange {
	--m-pick:      #2a1d0d;
	--m-pick-line: #f5a623;
}

.amzly-matrix--dark.amzly-matrix--pick-red {
	--m-pick:      #2b1416;
	--m-pick-line: #f0575b;
}

.amzly-matrix--dark.amzly-matrix--pick-purple {
	--m-pick:      #1e1730;
	--m-pick-line: #a78bfa;
}

.amzly-matrix--dark.amzly-matrix--pick-teal {
	--m-pick:      #0f2422;
	--m-pick-line: #2dd4bf;
}

.amzly-matrix--dark.amzly-matrix--pick-amber {
	--m-pick:      #2a2410;
	--m-pick-line: #fbbf24;
}

.amzly-matrix--dark.amzly-matrix--pick-pink {
	--m-pick:      #2c1420;
	--m-pick-line: #f472b6;
}

.amzly-matrix--dark.amzly-matrix--pick-slate {
	--m-pick:      #161c24;
	--m-pick-line: #94a3b8;
}

.amzly-matrix--dark.amzly-matrix--pick-lime {
	--m-pick:      #1c240f;
	--m-pick-line: #a3e635;
}

/* ── Empfehlung ── */

/*
 * Eine Spalte darf herausstechen, ohne zu schreien: ein sanftes Gruen hinter
 * der ganzen Spalte und eine Zeile darueber, die sagt, warum.
 */
.amzly-matrix__product--pick,
.amzly-matrix__value--pick {
	background: var(--m-pick);
}

.amzly-matrix__product--pick {
	border-top: 2px solid var(--m-pick-line);
}

/* Platzhalter in den uebrigen Spalten: nimmt Raum ein, ist aber weder zu
   sehen noch fuer Vorlesegeraete vorhanden. */
.amzly-matrix__pick--ghost {
	visibility: hidden;
}

.amzly-matrix__pick {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--m-pick-line);
	color: #ffffff;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ── Punkt bei Verfuegbarkeit und Preisbewertung ── */

.amzly-matrix__stock,
.amzly-matrix__verdict {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.amzly-matrix__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;

	/*
	 * Die gemeinsame Animation baut ihren Ring aus `--amzly-sig` — dem Token
	 * des Badges. In der Tabelle gibt es das nicht, der Ring blieb deshalb
	 * unsichtbar und der Punkt sah aus, als pulsiere er gar nicht. Hier wird
	 * das Token auf die Zustandsfarbe gesetzt, statt die Animation zu doppeln.
	 */
	--amzly-sig: var(--m-state);

	background: var(--m-state);
	box-shadow: 0 0 0 0 var(--m-state);
	animation: amzly-badge-pulse 2.4s ease-out infinite;
}

.amzly-matrix__stock--in_stock     { --m-state: #1aa64b; }
.amzly-matrix__stock--out_of_stock { --m-state: #e0464a; }
.amzly-matrix__stock--unknown      { --m-state: #9aa5b1; }

/* Dieselben Farben wie am Badge, damit dasselbe Wort dieselbe Farbe hat. */
.amzly-matrix__verdict--great   { --m-state: #1aa64b; }
.amzly-matrix__verdict--good    { --m-state: #3b82f6; }
.amzly-matrix__verdict--average { --m-state: #f0a020; }
.amzly-matrix__verdict--high    { --m-state: #e0464a; }
.amzly-matrix__verdict--unknown { --m-state: #9aa5b1; }

.amzly-matrix--dark .amzly-matrix__verdict--great   { --m-state: #25c464; }
.amzly-matrix--dark .amzly-matrix__verdict--good    { --m-state: #61a2fa; }
.amzly-matrix--dark .amzly-matrix__verdict--average { --m-state: #f5a623; }
.amzly-matrix--dark .amzly-matrix__verdict--high    { --m-state: #f0575b; }
.amzly-matrix--dark .amzly-matrix__stock--in_stock  { --m-state: #25c464; }
.amzly-matrix--dark .amzly-matrix__stock--out_of_stock { --m-state: #f0575b; }

@media (prefers-reduced-motion: reduce) {
	.amzly-matrix__dot {
		animation: none;
	}
}

.amzly-matrix__thumb {
	display: block;
	width: 4.6em;
	height: 4.6em;
	margin-bottom: 6px;
}

.amzly-matrix__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.amzly-matrix .amzly-matrix__name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--m-ink);
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.amzly-matrix .amzly-matrix__name:hover,
.amzly-matrix .amzly-matrix__name:focus {
	color: var(--m-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Schmale Anzeigen: Die Tabelle bleibt eine Tabelle, nur enger.
 *
 * Der erste Versuch stapelte je Zeile die Werte untereinander, jeder mit dem
 * Produktnamen davor. Das las sich schlechter als alles andere: Der Name nahm
 * die halbe Breite, der Wert wurde in den Rest gequetscht und brach mitten in
 * der Zahl um — „53,9 / 8 €". Und verglichen wird so auch nichts mehr, denn
 * die Werte stehen untereinander statt nebeneinander.
 *
 * Nebeneinander ist der ganze Zweck. Also bleibt die Tabelle, und stattdessen
 * geben Schrift, Polsterung, Bild und Beschriftungsspalte Platz ab. Drei
 * Produkte passen damit auf 320 Pixel; wer sechs vergleicht, sollte das seinen
 * Lesern auf dem Telefon ohnehin nicht zumuten.
 */
@media (max-width: 600px) {
	.amzly-matrix {
		font-size: 0.86em;
	}

	.amzly-matrix--light,
	.amzly-matrix--dark {
		padding: 10px;
	}

	.amzly-matrix__corner {
		width: 6.6em;
	}

	/*
	 * Kleinere Beschriftungen: Sonst passt ein Wort wie „Verfuegbarkeit" nicht
	 * in die Spalte und bricht mitten durch. Die Werte bleiben in ihrer
	 * Groesse — sie sind das, was verglichen wird.
	 */
	.amzly-matrix__label {
		font-size: 0.78em;
	}

	.amzly-matrix__product,
	.amzly-matrix__label,
	.amzly-matrix__value {
		padding: 7px 5px;
	}

	.amzly-matrix__thumb {
		width: 3.4em;
		height: 3.4em;
		margin-bottom: 5px;
	}

	.amzly-matrix .amzly-matrix__name {
		-webkit-line-clamp: 2;
		font-size: 0.86em;
	}

	/* Die Fahne nimmt sonst mehr Platz als der Produktname darunter. */
	.amzly-matrix__pick {
		padding: 1px 5px;
		font-size: 0.62em;
	}

	/* Der Punkt steht ueber dem Text, sonst bleibt fuer beides zu wenig. */
	.amzly-matrix__stock,
	.amzly-matrix__verdict {
		flex-direction: column;
		gap: 3px;
	}

	/*
	 * In der Tabelle bleibt vom Amazon-Knopf nur der Einkaufswagen.
	 *
	 * Er ist der einzige Teil, der nicht schrumpfen kann, und ragte damit aus
	 * seiner Spalte. Anderswo waere ein Knopf ohne Wort mehrdeutig — neben dem
	 * Preisalarm sind zwei orangefarbene Sinnbilder nicht zu unterscheiden.
	 * Hier steht die Bedeutung in der Zeilenbeschriftung daneben.
	 */
	.amzly-matrix__value .amzly-badge__amazon-text {
		display: none;
	}

	.amzly-matrix__value .amzly-badge__amazon {
		padding: 4px 9px;
	}
}

.amzly-matrix-block > .amzly-matrix {
	width: 100%;
}

/* ═══════════════════════════════════════════════════ Preisverlauf-Chart

   Farben und Aufbau 1:1 aus der Design-Referenz des Browser-Plugins
   (amzly_preischart_design.css, Stand v1.4.15). Zwei Abweichungen, beide
   erzwungen:

   1. `#amzly-chart` ist hier eine Klasse. Im Browser-Plugin gibt es genau einen
      Chart, in einem Blogbeitrag können viele stehen — eine ID darf nicht
      mehrfach vorkommen.
   2. `.ac-area { fill: url(#amzly-cg) }` steht als Attribut am Element statt
      hier: Jeder Chart braucht eine eigene Verlaufs-ID, und ein CSS-Selektor
      kann keine laufende Nummer kennen. Die Farbstopps bleiben im Stylesheet.
   ═════════════════════════════════════════════════════════════════════════ */

/*
 * Der Automatik-Modus richtet sich nach dem Blog, nicht nach dem Betriebssystem.
 *
 * Vorher folgte der Chart `prefers-color-scheme`: Ein dunkel eingestellter
 * Rechner machte die Chart-Karte dunkel, auch mitten in einem hellen Beitrag.
 * Die Systemeinstellung sagt nichts darueber, wie der Blog aussieht. Wie bei
 * Liste und Vergleich nimmt „automatisch" deshalb die helle Palette an; wer
 * einen dunklen Blog betreibt, stellt „Dunkel" ein und bekommt sie ueber
 * `data-theme` erzwungen.
 */
.amzly-chart-scope {
	--w-bg:        #ffffff;
	--w-surface:   #f0f2f5;
	--w-border:    #e0e3ea;
	--w-text-sec:  #6b7280;

	--w-orange:      #d97706;
	--w-great-text:  #15803d;
	--w-deal:        #ef4444;
	--w-coupon:      #f59e0b;

	display: block;
	margin: 0.9em 0 0;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}


.amzly-chart-scope[data-theme="dark"] {
	--w-bg:       #18181f;
	--w-surface:  #1e1e28;
	--w-border:   #252530;
	--w-text-sec: #9ca3af;

	--w-orange:     #fbbf24;
	--w-great-text: #4ade80;
	--w-deal:       #ef4444;
	--w-coupon:     #f59e0b;
}

.amzly-chart-scope .amzly-chart {
	display: block;
	padding: 10px 0 4px;
	border-top: 1px solid var(--w-border);
}

.amzly-chart-scope .amzly-chart-title {
	display: block;
	margin-bottom: 5px;
	color: var(--w-text-sec);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.amzly-chart-scope--large .amzly-chart-title {
	font-size: 12px;
}

.amzly-chart-scope .amzly-chart-inner {
	position: relative;
	display: block;
	min-height: 80px;
}

.amzly-chart-scope--large .amzly-chart-inner {
	min-height: 160px;
}

/*
 * Schmale Anzeigen: Die Mindesthoehe faellt weg.
 *
 * Der grosse Chart ist dreimal so breit wie hoch. Auf 320 Pixel Breite wird er
 * damit rund 77 Pixel hoch — die reservierten 160 blieben als leere Flaeche
 * darunter stehen. Der Chart bringt sein Verhaeltnis selbst mit, die Reserve
 * ist nur fuer den Moment vor dem Zeichnen gedacht.
 */
@media (max-width: 600px) {
	.amzly-chart-scope--large .amzly-chart-inner {
		min-height: 0;
	}

	.amzly-chart-scope--large .amzly-chart {
		padding: 10px 10px 8px;
	}

	/*
	 * Kopfzeile nicht in drei Zeilen: Logo und Titel bleiben zusammen, der
	 * Verweis und die Zahl der Messpunkte ruecken darunter.
	 */
	.amzly-chart-head {
		flex-wrap: wrap;
		row-gap: 2px;
	}
}

/*
 * Produktname und Badge ueber dem Chart.
 *
 * Eigene Zeilen, damit beides ueber der Kurve steht statt daneben. Der Abstand
 * nach unten ist klein, weil der Chart selbst schon einen Aussenabstand
 * mitbringt.
 */
.amzly-chart-lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-bottom: 2px;
}

.amzly-chart-lead .amzly-badge__title {
	max-width: 100%;
}

/*
 * „Kompakt" heisst kompakt.
 *
 * Die Blockregeln weiter unten geben dem Chart die volle Spaltenbreite — das
 * ist fuer den grossen richtig, den kleinen zog es aber auf Beitragsbreite
 * auseinander: ein 260 breites Bild auf 760 gestreckt, ein Strich in der
 * Landschaft. Die Hoechstbreite deckelt das, `width: 100%` bleibt daneben
 * bestehen, damit er auf schmalen Anzeigen weiter mitschrumpft.
 */
.amzly-chart-scope--small {
	max-width: 300px;
}

/* overflow sichtbar, damit Preis-Label und ATL-Text nicht abgeschnitten werden */
.amzly-chart-scope .amzly-chart-inner svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.amzly-chart-scope .amzly-chart-lastcheap {
	display: block;
	margin-top: 6px;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--w-surface);
	color: var(--w-text-sec);
	font-size: 11px;
	font-weight: 600;
	text-align: center;
}

.amzly-chart-scope .amzly-chart-legend {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 3px;
}

.amzly-chart-scope .amzly-legend-deal   { color: var(--w-deal);   font-size: 10px; }
.amzly-chart-scope .amzly-legend-coupon { color: var(--w-coupon); font-size: 10px; }

/* Farben der SVG-Elemente. Präsentationsattribute können kein var(), CSS schon. */
.amzly-chart-scope .ac-grad-0    { stop-color: var(--w-orange); stop-opacity: 0.28; }
.amzly-chart-scope .ac-grad-1    { stop-color: var(--w-orange); stop-opacity: 0.02; }
.amzly-chart-scope .ac-line      { fill: none; stroke: var(--w-orange); }
.amzly-chart-scope .ac-atl-line  { stroke: var(--w-great-text); opacity: 0.65; }
.amzly-chart-scope .ac-atl-text  { fill: var(--w-great-text); opacity: 0.85; }
.amzly-chart-scope .ac-dot-deal   { fill: var(--w-deal);   opacity: 0.9; }
.amzly-chart-scope .ac-dot-coupon { fill: var(--w-coupon); opacity: 0.9; }
.amzly-chart-scope .ac-dot-now    { fill: var(--w-orange); stroke: var(--w-bg); }
.amzly-chart-scope .ac-price      { fill: var(--w-orange); font-weight: 700; }
.amzly-chart-scope .ac-axis       { fill: var(--w-text-sec); }

/* ───────────────────────────────── Großer Preisverlauf-Chart

   Karte mit Kopfzeile, Preisachse und Gitternetz, nach Deal-Zeitraum
   eingefärbter Linie, Punkten je Messtag und Rauten an Deal-Tagen.
   ──────────────────────────────────────────────────────────────────────── */

.amzly-chart-scope--large {
	--w-card:      #ffffff;
	--w-card-line: #e2e5ec;
	--w-title:     #11151b;
	--w-meta:      #2563eb;
	--w-grid:      #eceff3;
	--w-axis:      #94711a;
	--w-orange:    #d97706;
	--w-deal:      #dc2626;
	--w-atl:       #0d9488;
	--w-mark:      #d97706;
}


.amzly-chart-scope--large[data-theme="dark"] {
	--w-card:      #16161a;
	--w-card-line: #2a2a31;
	--w-title:     #f4f4f5;
	--w-meta:      #60a5fa;
	--w-grid:      #26262d;
	--w-axis:      #d9a441;
	--w-orange:    #fbbf24;
	--w-deal:      #ef4444;
	--w-atl:       #2dd4bf;
	--w-mark:      #fbbf24;
}

.amzly-chart-scope--large .amzly-chart {
	padding: 14px 16px 12px;
	border: 1px solid var(--w-card-line);
	border-radius: 12px;
	background: var(--w-card);
}

/* ── Kopfzeile ── */

.amzly-chart-head {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.amzly-chart-head__left {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	min-width: 0;
}

.amzly-chart-logo {
	flex: none;
	display: block;
	width: auto;
	height: 15px;
	color: var(--w-title);
}

.amzly-chart-head__title {
	color: var(--w-title);
	font-size: 14px;
	font-weight: 700;
}

.amzly-chart-scope--large .amzly-chart-head__link {
	color: var(--w-orange);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

.amzly-chart-scope--large .amzly-chart-head__link:hover {
	text-decoration: underline;
}

.amzly-chart-head__count {
	color: var(--w-meta);
	font-size: 12px;
}

/* ── Zeichenfläche ── */

.amzly-chart-scope--large .ac-grid   { stroke: var(--w-grid); stroke-width: 1; }
.amzly-chart-scope--large .ac-axis-y { fill: var(--w-axis); }
.amzly-chart-scope--large .ac-axis   { fill: var(--w-axis); }

.amzly-chart-scope--large .ac-line {
	fill: none;
	stroke: var(--w-orange);
}

.amzly-chart-scope--large .ac-line--deal { stroke: var(--w-deal); }

.amzly-chart-scope--large .ac-atl-line {
	stroke: var(--w-atl);
	opacity: 0.9;
}

.amzly-chart-scope--large .ac-mark        { fill: var(--w-mark); }
.amzly-chart-scope--large .ac-mark-deal   { fill: var(--w-deal); }
.amzly-chart-scope--large .ac-mark-coupon { fill: var(--w-coupon, #f59e0b); }

/* ── Fußzeile ── */

.amzly-chart-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.amzly-chart-scope--large .amzly-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	justify-content: flex-start;
	margin-top: 0;
}

.amzly-chart-key {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--w-axis);
	font-size: 12px;
}

.amzly-chart-key--deal   { color: var(--w-deal); }
.amzly-chart-key--atl    { color: var(--w-atl); }
.amzly-chart-key--coupon { color: var(--w-coupon, #f59e0b); }

.amzly-chart-swatch {
	flex: none;
	width: 20px;
	height: 8px;
}

.amzly-chart-swatch--dot {
	width: 10px;
	height: 10px;
}

.amzly-chart-swatch .ac-line-deal { stroke: var(--w-deal); }

.amzly-chart-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.amzly-chart-verdict {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border-radius: 999px;
	background: #6b7280;
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.amzly-chart-verdict--great   { background: #16a34a; }
.amzly-chart-verdict--good    { background: #16a34a; }
.amzly-chart-verdict--average { background: #d97706; }
.amzly-chart-verdict--high    { background: #dc2626; }

.amzly-chart-scope--large .amzly-chart-cta {
	display: inline-flex;
	align-items: center;
	padding: 5px 14px;
	border-radius: 999px;
	background: #f59c1a;
	color: #2a1c05;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.amzly-chart-scope--large .amzly-chart-cta:hover,
.amzly-chart-scope--large .amzly-chart-cta:focus {
	color: #2a1c05;
	text-decoration: none;
	filter: brightness(1.06);
}

/* Auf schmalen Anzeigen rutschen Legende und Knöpfe untereinander. */
@media (max-width: 600px) {
	.amzly-chart-foot,
	.amzly-chart-head {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ══════════════════════════════════════════ Preisliste und Vergleich

   Kein <table>: Eine echte Tabelle bricht auf Telefonen unschön um. Das Raster
   sieht auf dem Bildschirm aus wie eine Tabelle und stapelt sich auf schmalen
   Anzeigen von selbst.
   ═══════════════════════════════════════════════════════════════════════ */

.amzly-list,
.amzly-compare {
	--l-line:  #e3e7ec;
	--l-ink:   #11151b;
	--l-muted: #6a7583;
	--l-row:   transparent;

	display: block;
	margin: 1.2em 0;
}

/*
 * Der Automatik-Modus nimmt die helle Palette an — dunkle Schrift.
 *
 * Zwei Wege wurden verworfen: Die Systemeinstellung des Besuchers sagt nichts
 * darueber, ob der Blog hell oder dunkel ist (dunkles System auf hellem Blog
 * ergab weisse Schrift auf Weiss). Und `currentColor` erbt zwar zuverlaessig,
 * uebernimmt aber auch blasse Grundfarben: Ein Theme mit #777 als Fliesstext
 * liess den Produktnamen ausgewaschen aussehen, obwohl er die wichtigste
 * Angabe der Zeile ist.
 *
 * Liste und Vergleich haben keinen eigenen Hintergrund, also braucht es eine
 * Annahme — und die grosse Mehrheit der Blogs ist hell. Wer einen dunklen
 * Blog betreibt, stellt „Dunkel" ein; genau dafuer gibt es die Einstellung.
 */
.amzly-list--dark,
.amzly-compare--dark {
	--l-line:    #2a323c;
	--l-ink:     #eef2f7;
	--l-muted:   #97a2af;
	--l-surface: #12161c;
}

.amzly-list--light,
.amzly-compare--light {
	--l-surface: #ffffff;
}

/*
 * „Hell" und „Dunkel" bringen ihre eigene Fläche mit.
 *
 * Das Badge malt ohnehin eine Pille — dort betrifft die Einstellung nur das
 * Badge selbst. Liste und Vergleich haben dagegen keinen Hintergrund: Dort
 * legt die Einstellung nur die Schriftfarbe fest, und die steht dann auf der
 * Seite. Wer „Dunkel" wählt, weil die Badges so besser aussehen, bekam so
 * helle Schrift auf einer hellen Seite. Mit eigener Fläche ist jede der vier
 * Kombinationen lesbar, unabhängig davon, wie das Theme aussieht.
 *
 * „Automatisch" bleibt bewusst durchsichtig: Dort soll sich die Liste in den
 * Beitrag einfügen und nicht als Kasten absetzen.
 */
.amzly-list--light,
.amzly-list--dark,
.amzly-compare--light,
.amzly-compare--dark {
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--l-surface);
}

/*
 * Textgroesse fuer Tabelle und Vergleich.
 *
 * Die Klasse stand schon am Wrapper, nur nutzte sie niemand — die Auswahl
 * aenderte bisher allein die Badges darin. Alles im Inneren ist in `em`
 * bemessen, ein Wert am Wrapper skaliert deshalb Namen, Marke, Kennzahlen
 * und Bilder gleichmaessig mit.
 */
.amzly-list--sm,
.amzly-compare--sm {
	font-size: 0.9em;
}

.amzly-list--md,
.amzly-compare--md {
	font-size: 1em;
}

.amzly-list--lg,
.amzly-compare--lg {
	font-size: 1.1em;
}

.amzly-list__caption {
	display: block;
	margin-bottom: 8px;
	color: var(--l-ink);
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.35;
}

/* ── Liste ── */

.amzly-list__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	align-items: center;
	padding: 10px 0;
	border-top: 1px solid var(--l-line);
}

.amzly-list__row:last-of-type {
	border-bottom: 1px solid var(--l-line);
}

.amzly-list__no {
	flex: none;
	min-width: 1.6em;
	color: var(--l-muted);
	font-size: 0.86em;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.amzly-list__thumb {
	flex: none;
	display: block;

	/* In em, damit das Bild der gewaehlten Textgroesse folgt. */
	width: 2.9em;
	height: 2.9em;
}

.amzly-list__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.amzly-list__main {
	flex: 1 1 14em;
	min-width: 0;
}

.amzly-list .amzly-list__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--l-ink);
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.amzly-list .amzly-list__name:hover,
.amzly-list .amzly-list__name:focus {
	color: var(--l-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.amzly-list__brand {
	display: block;
	margin-top: 2px;
	color: var(--l-muted);
	font-size: 0.78em;
}

.amzly-list__badge {
	flex: none;
	margin-left: auto;
}

/*
 * Feste Mindestbreite als letztes Element der Zeile: Dadurch endet die Spalte
 * ueberall an derselben Stelle, und die Badges davor fluchten mit ihrer
 * rechten Kante gleich mit. Ziffern mit fester Laufweite, damit auch die
 * Kommastellen untereinander stehen.
 */
.amzly-list__price {
	flex: none;
	min-width: 5.5em;
	color: var(--l-ink);
	font-size: 0.95em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

/* ── Vergleich ── */

.amzly-compare__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 12px;
	align-items: stretch;
}

.amzly-compare__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	padding: 14px;
	border: 1px solid var(--l-line);
	border-radius: 12px;
	min-width: 0;
}

/*
 * Bild und Name in einer Zeile, an den Aussenrand gespiegelt.
 *
 * Untereinander brauchte der Kopf zwei Bloecke Hoehe und das eigentlich
 * Wichtige — Badge und Kennzahlen — rutschte weit nach unten. Nebeneinander
 * ist es kompakter; die Spiegelung stellt die beiden Bilder links und rechts
 * des VS gegenueber statt beide an den linken Rand.
 */
.amzly-compare__head {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
}

.amzly-compare__card:first-of-type .amzly-compare__head {
	flex-direction: row-reverse;
}

.amzly-compare__thumb {
	flex: none;
	display: block;
	width: 5.25em;
	height: 5.25em;
}

.amzly-compare__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.amzly-compare .amzly-compare__name {
	flex: 1 1 auto;
	min-width: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--l-ink);
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.amzly-compare .amzly-compare__name:hover,
.amzly-compare .amzly-compare__name:focus {
	color: var(--l-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.amzly-compare__vs {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	background: #f59c1a;
	color: #2a1c05;
	font-size: 0.82em;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.amzly-compare__facts {
	display: block;
	width: 100%;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--l-line);
}

.amzly-compare__fact {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	padding: 3px 0;
	font-size: 0.82em;
}

/*
 * Die Werte stehen sich ueber dem VS gegenueber.
 *
 * Wie beim Bild: In der linken Karte liegt der Wert innen, also rechts — das
 * war schon so. In der rechten lag er aussen und damit am weitesten von seinem
 * Gegenstueck entfernt; umgedreht stehen die beiden Zahlen, die man
 * vergleichen soll, direkt nebeneinander. Die Beschriftungen wandern dafuer an
 * die Aussenkanten, wo sie sich nicht in die Quere kommen.
 */
.amzly-compare__card:last-of-type .amzly-compare__fact {
	flex-direction: row-reverse;
}

.amzly-compare__fact-key { color: var(--l-muted); }
.amzly-compare__fact-val { color: var(--l-ink); font-weight: 600; }

/*
 * Untereinander, sobald eine Karte unter rund 400 Pixel fiele.
 *
 * Bei 560 war die Grenze zu spaet: Auf einem Tablet hochkant blieben zwei
 * Karten nebeneinander, je 350 Pixel breit — die Badge-Gruppe braucht allein
 * schon so viel und schob die ganze Seite auf. Untereinander hat jede Karte
 * die volle Breite, und auf einem Tablet ist das ohnehin besser zu lesen als
 * zwei enge Spalten.
 */
@media (max-width: 820px) {
	.amzly-compare__grid {
		grid-template-columns: 1fr;
	}

	.amzly-compare__vs {
		justify-self: center;
	}

	/*
	 * Untereinander gibt es kein Links und Rechts mehr, das gespiegelte Bild
	 * saehe dann willkuerlich aus.
	 */
	.amzly-compare__card:first-of-type .amzly-compare__head,
	.amzly-compare__card:last-of-type .amzly-compare__fact {
		flex-direction: row;
	}

	/*
	 * Schmale Anzeige: Nummer, Bild, Name und Preis in einer Zeile, das Badge
	 * darunter ueber die volle Breite.
	 *
	 * Ausschlaggebend ist die Grundbreite des Namens: Mit den 14em vom
	 * Grossbildschirm passte er nicht mehr neben Nummer und Bild und rutschte
	 * allein auf eine zweite Zeile, waehrend Bild und Nummer oben verwaist
	 * stehenblieben. Mit 6em teilt er sich die Zeile und waechst in den Rest.
	 */
	.amzly-list__main {
		flex: 1 1 6em;
	}

	.amzly-list__price {
		order: 1;
		min-width: 0;
		margin-left: 0;
	}

	.amzly-list__badge {
		order: 2;
		margin-left: 0;
		flex-basis: 100%;
	}
}

/* ─────────────────────────── Breite innerhalb der gestapelten Darstellung

   `.amzly-badge-wrap` ist eine Spalten-Flexbox mit `align-items: flex-start`.
   Das ist für die Badge-Pille richtig — sie soll auf Inhaltsbreite bleiben und
   nicht über die ganze Zeile gehen. Chart, Liste und Vergleich erben diese
   Regel aber mit und schrumpfen dadurch ebenfalls, obwohl ihr `width: 100%`
   die volle Spaltenbreite meint. Sie holen sie sich hier ausdrücklich zurück.
   ══════════════════════════════════════════════════════════════════════ */

.amzly-badge-wrap > .amzly-chart-scope,
.amzly-badge-wrap > .amzly-list,
.amzly-badge-wrap > .amzly-compare {
	align-self: stretch;
	width: 100%;
}

/* Der Produktname darf ebenfalls die volle Breite nutzen, statt bei langen
   Titeln eine schmale Säule zu bilden. */
.amzly-badge-wrap > .amzly-badge__title {
	align-self: stretch;
}

/* Eigenständige Blöcke: Der Wrapper von WordPress ist ein <div>, der Chart ein
   <span> — ohne display:block bliebe er ein Inline-Element und damit schmal. */
.amzly-chart-block > .amzly-chart-scope,
.amzly-list-block > .amzly-list,
.amzly-compare-block > .amzly-compare {
	display: block;
	width: 100%;
}

/* ─────────────────────────────────────────────── Knopf zu Amazon

   Optional und nur wirksam, wenn der Betreiber ein eigenes Partner-Tag
   hinterlegt hat. Amzly-Orange wie der Preisalarm, aber mit Einkaufswagen
   statt Glocke — die beiden Knöpfe stehen nebeneinander und müssen ohne
   Lesen unterscheidbar bleiben.
   ══════════════════════════════════════════════════════════════════════ */

/*
 * Radien und Trennlinien gelten nach Position, nicht nach Bauteil: So sieht die
 * Gruppe mit einem, zwei oder drei Elementen gleich richtig aus.
 *
 * Der doppelte Klassenname ist Absicht: Die Knopfregeln setzen ihre volle
 * Rundung ebenfalls doppelt, und bei gleicher Spezifitaet gaebe sonst die
 * Reihenfolge im Stylesheet den Ausschlag. Mit dem Zusatz gewinnt die
 * Position unabhaengig davon, wo ein neuer Knopf spaeter eingefuegt wird.
 */
.amzly-badge-group.amzly-badge-group > :first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.amzly-badge-group.amzly-badge-group > :last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.amzly-badge-group.amzly-badge-group > :not(:first-child):not(:last-child) {
	border-radius: 0;
}

.amzly-badge-group.amzly-badge-group > :not(:last-child) {
	border-right: 0;
}

.amzly-badge__amazon.amzly-badge__amazon {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border: 1px solid #c97f10;
	border-radius: 999px;
	background: #e8890f;
	color: #ffffff;
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.12s ease, transform 0.12s ease;
}

/*
 * Etwas dunkleres Orange als der Preisalarm, dazu weiße Schrift: So sind die
 * beiden Knöpfe nebeneinander sofort auseinanderzuhalten, und der Kontrast
 * stimmt in beide Richtungen.
 */
.amzly-badge__amazon.amzly-badge__amazon:hover,
.amzly-badge__amazon.amzly-badge__amazon:focus {
	color: #ffffff;
	text-decoration: none;
	filter: brightness(1.08);
}

.amzly-badge__amazon.amzly-badge__amazon:hover,
.amzly-badge__amazon.amzly-badge__amazon:focus-visible {
	transform: translateY(-1px);
}

.amzly-badge__amazon.amzly-badge__amazon:focus-visible {
	outline: 2px solid #2a1c05;
	outline-offset: 2px;
}

.amzly-badge__cart {
	width: 13px;
	height: 13px;
	flex: none;
	display: block;
}

.amzly-badge__amazon--sm.amzly-badge__amazon--sm {
	gap: 4px;
	padding: 3px 9px;
	font-size: 0.72em;
}

.amzly-badge__amazon--sm .amzly-badge__cart {
	width: 11px;
	height: 11px;
}

.amzly-badge__amazon--lg.amzly-badge__amazon--lg {
	gap: 7px;
	padding: 7px 15px;
	font-size: 0.95em;
}

.amzly-badge__amazon--lg .amzly-badge__cart {
	width: 16px;
	height: 16px;
}

/*
 * Schmale Anzeigen: Die Gruppe bricht um, jedes Stueck wird wieder rund.
 *
 * Badge, Preisalarm und Amazon-Knopf zusammen sind rund 350 Pixel breit und
 * koennen nicht schrumpfen — auf einem Telefon ragten sie aus der Seite und
 * gaben ihr einen waagerechten Rollbalken. Umgebrochen sitzen sie
 * untereinander; die abgeflachten Naehte muessen dann weg, sonst haette jedes
 * Stueck eine gerade Kante ins Leere.
 */
@media (max-width: 480px) {
	.amzly-badge-group {
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 6px;
	}

	.amzly-badge-group.amzly-badge-group > :first-child,
	.amzly-badge-group.amzly-badge-group > :last-child,
	.amzly-badge-group.amzly-badge-group > :not(:first-child):not(:last-child) {
		border-radius: 999px;
	}

	.amzly-badge-group.amzly-badge-group > :not(:last-child) {
		border-right: 1px solid var(--amzly-line);
	}

	.amzly-badge__alert.amzly-badge__alert,
	.amzly-badge__amazon.amzly-badge__amazon {
		border-right-color: #d98a12;
	}

	/*
	 * Das Badge behaelt `white-space: nowrap`. Mit erlaubtem Umbruch schrumpft
	 * seine Grundbreite auf null, es fuellt dann die ganze Zeile und der Text
	 * bricht mitten im Wort um — schlechter als das, was es loesen sollte.
	 */
	.amzly-badge.amzly-badge {
		max-width: 100%;
	}

	/*
	 * Auf sehr schmalen Anzeigen kuerzt der Bewertungstext, statt dass etwas
	 * verschwindet. Er ist der einzige Teil, von dem ein Anfang schon genuegt —
	 * Preis, Prozentwert und Punkt bleiben vollstaendig, denn eine halbe Zahl
	 * waere schlimmer als gar keine.
	 */
	.amzly-badge__label {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}



@media (prefers-reduced-motion: reduce) {
	.amzly-badge__amazon.amzly-badge__amazon,
	.amzly-badge__amazon.amzly-badge__amazon:hover,
	.amzly-badge__amazon.amzly-badge__amazon:focus-visible {
		transition: none;
		transform: none;
	}
}

/*
 * Der Amazon-Knopf steht auch allein — im Fuß des großen Charts. Dort braucht
 * er die volle Rundung und etwas Abstand; innerhalb der Badge-Gruppe flachen
 * ihn die Positionsregeln weiter oben ab.
 */
.amzly-chart-actions .amzly-badge__amazon.amzly-badge__amazon {
	border-radius: 999px;
}