/*
 * RON Amazon-Produkte – Foto und Preis in den Produktkarten (.rna-pc).
 * Ohne !important; jede Regel mit Spezifität ≥ (0,2,1), damit Theme-Regeln wie
 * „.elementor img“ (0,1,1) und der Hello-Reset nicht durchschlagen.
 * Fotos nur proportional (object-fit: contain), nichts darüberlegen.
 */

/* Bildplatz mit Foto: weiß, feiner Rahmen */
.rna-art .rna-pc-img.ron-foto {
	background: #fff;
	border: 1px solid var(--rna-rule, #E3E9F2);
	overflow: hidden;
}

.rna-art .rna-pc-img.ron-foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 3px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	object-fit: contain;
	object-position: center;
}

/* Ergebnis-Panels des Kauf-Assistenten: größeres Foto */
.rna-art .rna-fx-pair .rna-pc.ron-foto .rna-pc-hd {
	grid-template-columns: 7.5rem minmax(0, 1fr);
}

.rna-art .rna-fx-pair .rna-pc-img.ron-foto {
	width: 7.5rem;
	height: 7.5rem;
}

/* Preiszeile: volle Breite über „Anzeige“ und dem Button */
.rna-art .rna-pc-buy .ron-preis {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	min-width: 0;
}

.rna-art .rna-pc-buy .ron-preis b {
	font-family: var(--rna-head, Manrope, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--rna-ink, #17233A);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.rna-art .rna-pc-buy .ron-preis small {
	font-size: .75rem;
	line-height: 1.4;
	color: var(--rna-ink-3, #5B6576);
}

/* „Details“: Knopf, der wie ein Textlink aussieht (Theme-Button-Stile neutralisieren) */
.rna-art .ron-preis .ron-details {
	display: inline;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: var(--rna-brand-dk, #1B4BB8);
	font: inherit;
	font-weight: 600;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	text-decoration-color: rgba(27, 75, 184, .4);
	white-space: normal;
	vertical-align: baseline;
	cursor: pointer;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
}

.rna-art .ron-preis .ron-details:hover,
.rna-art .ron-preis .ron-details:focus {
	background: none;
	background-color: transparent;
	color: var(--rna-brand-dk, #1B4BB8);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.rna-art .ron-preis .ron-details:focus-visible {
	outline: 2px solid var(--rna-brand, #2F6FED);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Haftungsausschluss 2(i), aufklappbar */
.rna-art .ron-preis .ron-details-text {
	display: block;
	flex: 1 1 100%;
	margin: 2px 0 0;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--rna-ink-3, #5B6576);
}

.rna-art .ron-preis .ron-details-text[hidden] {
	display: none;
}

/* Hinweis 2(k): Amazon-Vorlage in Versalien */
.rna-art .rna-fine .ron-2k {
	text-transform: uppercase;
	font-size: .6875rem;
}

/* ==========================================================================
   Version 1.1 – Darstellung „box“ (SPEZIFIKATION 5.3/5.4)
   Eigenes CSS, alle neuen Klassen ron-*.
   Regeln für verschobene Seitenelemente (a.rna-amz, .rna-pc-*) liegen über den
   Artikelregeln (bis (0,4,0)), weil der Artikel-<style> im Body nach dieser Datei steht.
   --rna-* nur mit Rückfallwerten: .ron-produkt funktioniert auch ohne rna-art-Stile.
   ========================================================================== */

/* --- Ausgeblendete Kartenteile (nicht gelöscht) --- */
.rna-art .rna-pc .ron-aus,
.ron-produkt .ron-aus {
	display: none;
}

/* Eigene Stichpunkte, die die Amazon-Merkmale in der Box ersetzen: nur ausblenden, solange die
   Merkmale zu sehen sind. Bis 480 px sind die Merkmale aus, dann bleiben die eigenen
   Stichpunkte unter der Box stehen – sonst stünde am Handy keiner da. */
@media (min-width: 481px) {
	.rna-art .rna-pc .rna-pc-pts.ron-punkte-ersetzt {
		display: none;
	}
}

.ron-ui,
.ron-ui *,
.ron-ui *::before,
.ron-ui *::after,
.ron-produkt,
.ron-produkt * {
	box-sizing: border-box;
}

.rna-art .ron-vh,
.ron-ui .ron-vh,
.ron-produkt .ron-vh,
.ron-produkt .rna-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Karten der Kaufberatung im Box-Modus: den Rahmen trägt jetzt die Box --- */
.rna-art .rna-pc.ron-an.ron-an-box,
.rna-art .rna-res .rna-pc.ron-an-box,
.rna-art .rna-grp .rna-pc.ron-an-box {
	row-gap: 10px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Kauf-Assistent: horizontale Boxen brauchen die volle Breite, Paar untereinander */
.rna-art .rna-fx-pair.ron-box-paar {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 28px;
}

.rna-art .rna-fx-pair.ron-box-paar > .rna-pc + .rna-pc {
	margin-top: 0;
}

.rna-art .rna-pc.ron-an.ron-an-liste {
	row-gap: 4px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Überblick: Listenzeile, darunter der Aufklapper „Unsere Einschätzung“ */
.rna-art .rna-grp .rna-pc.ron-an-liste {
	gap: 4px;
	padding: 14px 0 2px;
	border-top: 0;
}

.rna-art .rna-pc.ron-an-liste .rna-pc-d > summary.rna-pc-hd {
	grid-template-columns: minmax(0, 1fr) 16px;
	min-height: 44px;
}

.rna-art .rna-pc.ron-an-liste .ron-einschaetzung {
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--rna-brand-dk, #1B4BB8);
}

/* --- Kennzeile über der Box bzw. in der Zeile: „Erste Wahl“ + „Anzeige“ --- */
.rna-art .rna-pc .ron-kennzeile,
.ron-produkt .ron-kennzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-width: 0;
	margin: 0;
}

.rna-art .rna-pc .ron-kennzeile .rna-pc-k {
	margin: 0;
}

.ron-ui.ron-ui-box {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* --- Box (horizontal): Bild 160px links, Inhalt, Fuß rechtsbündig --- */
.ron-ui .ron-box {
	position: relative;
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	grid-template-areas: "bild inhalt" "bild fuss";
	grid-template-rows: auto 1fr;
	align-content: start;
	column-gap: 20px;
	row-gap: 12px;
	margin: 0;
	padding: 20px;
	border: 1px solid #ECECEC;
	border-radius: 0;
	background: #fff;
	color: var(--rna-ink-2, #333);
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
}

.ron-ui .ron-box.ron-box-band {
	padding-top: 35px;
}

.ron-ui .ron-box.ron-ohne-bild {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "inhalt" "fuss";
}

.ron-ui .ron-box.ron-ohne-bild .ron-box-bild {
	display: none;
}

.ron-ui .ron-box-bild {
	grid-area: bild;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
}

.ron-ui .ron-box-inhalt {
	grid-area: inhalt;
	min-width: 0;
}

.ron-ui .ron-box-fuss {
	grid-area: fuss;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	min-width: 0;
	text-align: right;
}

/* Band „Angebot“ (nur mit Ersparnis) */
.ron-ui .ron-band {
	position: absolute;
	top: -1px;
	right: -1px;
	padding: 0 15px;
	border-bottom-left-radius: 2px;
	background: rgba(39, 174, 96, .8);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* --- Bildplatz: Karten-SVG, bis das Foto freigegeben ist (über den eigenen Server sofort, direkt von Amazon
       erst nach Einwilligung), dann Amazon-Foto (proportional) --- */
.ron-ui .ron-bild {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
}

.ron-ui .ron-bild svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ron-ui .ron-bild img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
	object-position: center;
}

.ron-ui .ron-box .ron-bild {
	width: 160px;
	max-width: 100%;
}

.ron-ui .ron-box .ron-bild:not(.ron-foto) {
	width: 120px;
	height: 120px;
	border-radius: 10px;
	background: var(--rna-tint, #F5F8FD);
}

.ron-ui .ron-box .ron-bild:not(.ron-foto) svg {
	width: 96px;
	height: 96px;
}

.ron-ui .ron-box .ron-bild img {
	width: auto;
	max-height: 200px;
}

/* Feste Breite: Der Browser reserviert die Höhe aus width/height des img schon, bevor das Foto
   (lazy, über den Proxy) ankommt – sonst ist der Platz 160×0 und Titel und Knopf springen am Handy
   beim Eintreffen um bis zu 160 px nach unten. max-width/max-height begrenzen weiter. */
.ron-ui .ron-box .ron-bild.ron-foto img {
	width: 160px;
}

/* --- Titelzeile: zweiter Link zur selben detailPageURL, dahinter das Sternchen --- */
.ron-ui .ron-titelzeile {
	display: block;
	min-width: 0;
	margin: 0;
	color: var(--rna-brand-dk, #1B4BB8);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ron-ui a.ron-titel {
	/* Bezugsrahmen für den versteckten Zusatz „(öffnet neuen Tab)“ (span.ron-vh, absolut
	   positioniert). Ohne ihn säße der Span beim einzeilig gekürzten Titel am Ende des ungekürzten
	   Texts weit rechts außerhalb, würde nicht abgeschnitten und verbreiterte die Seite. */
	position: relative;
	display: inline;
	margin: 0;
	color: var(--rna-brand-dk, #1B4BB8);
	font: inherit;
	text-decoration: none;
}

.ron-ui a.ron-titel:hover,
.ron-ui a.ron-titel:focus {
	color: var(--rna-brand-dk, #1B4BB8);
	text-decoration: underline;
	text-underline-offset: .15em;
}

.ron-ui .ron-stern {
	flex: none;
	color: var(--rna-brand-dk, #1B4BB8);
}

/* Box: Titel und darunter die eigene Modellzeile (.rna-pc-m, verschoben) */
.ron-ui .ron-kopf {
	min-width: 0;
	margin: 0 0 12px;
}

.rna-art .ron-ui .rna-pc-m {
	max-width: 100%;
	overflow-wrap: break-word;
}

/* --- Amazon-Merkmale (höchstens drei) --- */
.ron-ui .ron-merkmale {
	margin: 0;
	padding: 0 0 0 20px;
	list-style: disc outside;
}

.ron-ui .ron-merkmale li {
	display: list-item;
	margin: 0;
	padding: 0;
	list-style: inherit;
	font-size: 15px;
	line-height: 1.6;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ron-ui .ron-merkmale li::before {
	content: none;
}

/* --- Preise: UVP (durchgestrichen, mit Amazons Bezeichnung), Ersparnis, Preis, Prime --- */
.ron-ui .ron-preise {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px 12px;
	margin: 0;
}

.ron-ui .ron-uvp {
	color: #666;
	font-size: 14px;
	line-height: 1.4;
}

.ron-ui .ron-uvp s {
	text-decoration: line-through;
}

.ron-ui .ron-spar {
	display: inline-block;
	padding: 4px 6px;
	border-radius: 2px;
	background: rgba(39, 174, 96, .8);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 12px;
	white-space: nowrap;
}

.ron-ui .ron-akt {
	color: var(--rna-ink, #17233A);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ron-ui .ron-prime {
	color: var(--rna-ink-2, #3E4859);
	font-size: 14px;
	line-height: 1.4;
}

.ron-ui .ron-prime .ron-prime-name {
	color: #0072A3; /* dunkleres Blau, Kontrast 5,3:1 auf Weiß (WCAG AA), seit 1.3.0 */
	font-weight: 700;
}

/* --- Knopf: der vorhandene a.rna-amz, gelber Verlauf, Einkaufswagen-Symbol (eigenes SVG) --- */
.ron-ui a.rna-amz.ron-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	grid-column: auto;
	justify-self: auto;
	width: auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 7px 16px;
	border: 1px solid;
	border-color: #9C7E31 #90742D #786025;
	border-radius: 3px;
	background-color: #F0C14B;
	background-image: linear-gradient(to bottom, #F7DFA5, #F0C14B);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset;
	color: #111;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	cursor: pointer;
}

.ron-ui a.rna-amz.ron-knopf::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.3a1.6 1.6 0 0 0 1.6 1.2h8.3a1.6 1.6 0 0 0 1.6-1.2l1.7-7H6.3'/%3E%3Ccircle cx='9.6' cy='20' r='1.4'/%3E%3Ccircle cx='17.4' cy='20' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ron-ui a.rna-amz.ron-knopf:hover,
.ron-ui a.rna-amz.ron-knopf:focus {
	background-color: #EEB933;
	background-image: linear-gradient(to bottom, #F5D78E, #EEB933);
	color: #111;
	text-decoration: none;
}

.ron-ui a.rna-amz.ron-knopf:active {
	background-image: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset;
}

.ron-ui a.rna-amz.ron-knopf:focus-visible {
	outline: 2px solid var(--rna-brand, #2F6FED);
	outline-offset: 2px;
}

/* Pfeil „öffnet neuen Tab“ bleibt im Link, im gelben Knopf nur ausgeblendet */
.ron-ui a.rna-amz.ron-knopf .rna-ico {
	display: none;
}

.ron-ui a.rna-amz.ron-knopf.ron-knopf-klein {
	gap: 6px;
	min-height: 44px;
	padding: 5px 12px;
	font-size: 13px;
}

.ron-ui a.rna-amz.ron-knopf.ron-knopf-klein::before {
	width: 16px;
	height: 16px;
}

/* --- Stand und „Details“ (2(i)) – gilt für alle Preise des Platzes --- */
.ron-ui .ron-stand {
	display: block;
	max-width: 100%;
	color: var(--rna-ink-3, #5B6576);
	font-size: 12px;
	line-height: 1.45;
}

.ron-ui .ron-stand .ron-details {
	display: inline;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: var(--rna-brand-dk, #1B4BB8);
	font: inherit;
	font-weight: 600;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	text-decoration-color: rgba(27, 75, 184, .4);
	white-space: normal;
	vertical-align: baseline;
	cursor: pointer;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
}

.ron-ui .ron-stand .ron-details:hover,
.ron-ui .ron-stand .ron-details:focus {
	background: none;
	background-color: transparent;
	color: var(--rna-brand-dk, #1B4BB8);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.ron-ui .ron-stand .ron-details:focus-visible {
	outline: 2px solid var(--rna-brand, #2F6FED);
	outline-offset: 2px;
	border-radius: 2px;
}

.ron-ui .ron-details-text {
	display: block;
	align-self: stretch;
	margin: 2px 0 0;
	color: var(--rna-ink-3, #5B6576);
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
}

.ron-ui .ron-details-text[hidden] {
	display: none;
}

/* --- Listenzeile: Bild 75px, Titel einzeilig --- */
.ron-ui.ron-liste {
	position: relative;
	display: grid;
	grid-template-columns: 75px minmax(0, 1fr);
	column-gap: 12px;
	align-items: start;
	margin: 0;
	padding: 10px;
	border: 1px solid #ECECEC;
	background: #fff;
	color: var(--rna-ink-2, #333);
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

.ron-ui.ron-liste.ron-ohne-bild {
	grid-template-columns: minmax(0, 1fr);
}

.ron-ui.ron-liste > .ron-bild {
	width: 75px;
	height: 75px;
}

.ron-ui.ron-liste .ron-liste-inhalt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
}

/* --- Kompakt: Bild 64px + Titel + Preis + Knopf in einer Zeile --- */
.ron-ui.ron-kompakt {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	column-gap: 12px;
	row-gap: 8px;
	align-items: center;
	margin: 0;
	padding: 10px;
	border: 1px solid #ECECEC;
	background: #fff;
	color: var(--rna-ink-2, #333);
	font-size: 15px;
	line-height: 1.45;
	text-align: left;
}

.ron-ui.ron-kompakt.ron-ohne-bild {
	grid-template-columns: minmax(0, 1fr) auto;
}

.ron-ui.ron-kompakt > .ron-bild {
	width: 64px;
	height: 64px;
}

.ron-ui.ron-kompakt .ron-kompakt-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

/* Gemeinsam für Liste und Kompakt */
.ron-ui.ron-liste.ron-ohne-bild > .ron-bild,
.ron-ui.ron-kompakt.ron-ohne-bild > .ron-bild {
	display: none;
}

.ron-ui.ron-liste > .ron-bild:not(.ron-foto),
.ron-ui.ron-kompakt > .ron-bild:not(.ron-foto) {
	border-radius: 8px;
	background: var(--rna-tint, #F5F8FD);
}

.ron-ui.ron-liste > .ron-bild:not(.ron-foto) svg,
.ron-ui.ron-kompakt > .ron-bild:not(.ron-foto) svg {
	width: 80%;
	height: 80%;
}

.ron-ui.ron-liste > .ron-bild img,
.ron-ui.ron-kompakt > .ron-bild img {
	width: 100%;
	height: 100%;
	max-height: none;
}

.ron-ui.ron-liste .ron-titelzeile,
.ron-ui.ron-kompakt .ron-titelzeile {
	display: flex;
	align-items: flex-start;
	align-self: stretch;
	font-size: 16px;
}

.ron-ui.ron-kompakt .ron-titelzeile {
	font-size: 15px;
}

/* Einzeilig mit „…“; das Sternchen steht daneben und bleibt sichtbar */
.ron-ui.ron-liste a.ron-titel,
.ron-ui.ron-kompakt a.ron-titel {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ron-ui.ron-liste .ron-preise,
.ron-ui.ron-kompakt .ron-preise {
	justify-content: flex-start;
	gap: 2px 10px;
}

.ron-ui.ron-liste .ron-akt,
.ron-ui.ron-kompakt .ron-akt {
	font-size: 17px;
}

.ron-ui.ron-liste a.rna-amz.ron-knopf {
	margin-top: 4px;
}

/* --- Produktplatz auf beliebigen Seiten: Rückfall (Anzeige + Suchlink) und Hinweis --- */
.ron-produkt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 16px 0;
}

.ron-produkt.ron-an {
	display: block;
}

.ron-produkt .rna-ad {
	display: inline-block;
	flex: none;
	padding: 2px 7px;
	border: 1px solid var(--rna-rule-2, #C9D5E6);
	border-radius: 4px;
	color: var(--rna-ink-3, #5B6576);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ron-produkt a.rna-amz {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 8px 13px;
	border: 1px solid var(--rna-ink, #17233A);
	border-radius: 8px;
	background: #fff;
	color: var(--rna-ink, #17233A);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.ron-produkt a.rna-amz:hover,
.ron-produkt a.rna-amz:focus {
	background: var(--rna-ink, #17233A);
	color: #fff;
	text-decoration: none;
}

.ron-produkt svg.rna-ico {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
}

/* Hinweis 2(k) am Platz (Produktplätze; Box ohne Gruppenhinweis) */
.rna-art .rna-pc .ron-hinweis,
.ron-produkt .ron-hinweis {
	margin: 8px 0 0;
	padding: 0;
	color: var(--rna-ink-3, #5B6576);
	font-size: 12px;
	line-height: 1.5;
}

.rna-art .rna-pc .ron-hinweis .ron-2k,
.ron-produkt .ron-hinweis .ron-2k {
	font-size: 11px;
	text-transform: uppercase;
}

/* ==========================================================================
   Version 1.3 – Felder (SPEZIFIKATION 7), z. B. der Spaltenvergleich der Kaufberatungen.
   Eigene Klassen ron-feld-*; Zelle, Abstände und Rückfall regelt die Seite. Selektoren mit
   Spezifität ≥ (0,2,0) bzw. ≥ (0,3,1) für den Knopf, damit Theme- und Kit-Regeln wie
   „.elementor-kit-5 button:hover“ (0,2,1) und Seitenregeln wie „.rna-art .rna-vg-c b“ (0,2,1)
   nicht durchschlagen. Mindestschrift 12 px. --rna-* nur mit Rückfallwerten.
   ========================================================================== */

/* Preis-Feld: eigener Größen-Container, damit der Preis in schmalen Spalten kleiner wird
   (Spaltenbreite 92 px am 320-px-Handy bis 196 px am PC). Das Feld steht als Block in
   seiner Zelle bzw. Spalte und nimmt deren Breite ein. */
.ron-feld-preis {
	display: block;
	container: ron-feld-preis / inline-size;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--rna-ink-2, #3E4859);
	font-family: var(--rna-text, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	-webkit-hyphens: manual;
	hyphens: manual;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.ron-feld-preis .ron-feld-uvp,
.ron-feld-preis .ron-feld-akt,
.ron-feld-preis .ron-feld-prime,
.ron-feld-preis .ron-feld-stand,
.ron-feld-preis .ron-details-text {
	display: block;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

/* UVP mit Amazons Bezeichnung, durchgestrichen; der Betrag bricht nicht um */
.ron-feld-preis .ron-feld-uvp {
	color: #666;
	font-size: 12px;
	line-height: 1.4;
}

.ron-feld-preis .ron-feld-uvp s {
	color: inherit;
	text-decoration: line-through;
	white-space: nowrap;
}

/* Preis für alle: fett, nie umbrechen */
.ron-feld-preis .ron-feld-akt {
	color: var(--rna-ink, #17233A);
	font-family: var(--rna-head, Manrope, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* „mit Prime: …“ – Prime als Text (blaues Wort wie in den Boxen), kein Logo; darf umbrechen */
.ron-feld-preis .ron-feld-prime {
	color: var(--rna-ink-2, #3E4859);
	font-size: 13px;
	line-height: 1.4;
}

.ron-feld-preis .ron-feld-prime b.ron-prime-name {
	color: #0072A3; /* dunkleres Blau, Kontrast 5,3:1 auf Weiß (WCAG AA), seit 1.3.0 */
	font-weight: 700;
}

.ron-feld-preis .ron-feld-prime .ron-feld-betrag {
	white-space: nowrap;
}

/* „Stand … – Details“ (2(i)) */
.ron-feld-preis .ron-feld-stand {
	margin-top: 4px;
	color: var(--rna-ink-3, #5B6576);
	font-size: 12px;
	line-height: 1.45;
}

/* „Details“: Knopf, der wie ein Textlink aussieht – voller Theme-Reset wie .ron-details */
.ron-feld-preis .ron-feld-stand button.ron-details,
.ron-feld-preis .ron-feld-stand button.ron-details:hover,
.ron-feld-preis .ron-feld-stand button.ron-details:focus,
.ron-feld-preis .ron-feld-stand button.ron-details:active {
	display: inline;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--rna-brand-dk, #1B4BB8);
	font: inherit;
	font-weight: 600;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	text-decoration-color: rgba(27, 75, 184, .4);
	white-space: normal;
	vertical-align: baseline;
	cursor: pointer;
	transition: none;
	-webkit-appearance: none;
	appearance: none;
}

.ron-feld-preis .ron-feld-stand button.ron-details:hover,
.ron-feld-preis .ron-feld-stand button.ron-details:focus {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

.ron-feld-preis .ron-feld-stand button.ron-details:focus-visible {
	outline: 2px solid var(--rna-brand, #2F6FED);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Haftungsausschluss 2(i), aufklappbar. Silbentrennung wie in der Zelle (hyphens: auto, wirkt mit
   <html lang="de">): In 74–96 px breiten Spalten bräche der Text sonst mitten im Wort ohne Trennstrich um.
   Preis, UVP und Prime-Betrag bleiben über nowrap geschützt. */
.ron-feld-preis .ron-details-text {
	margin-top: 4px;
	color: var(--rna-ink-2, #3E4859);
	font-size: 12px;
	line-height: 1.45;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.ron-feld-preis .ron-details-text[hidden] {
	display: none;
}

/* Schmale Spalten (Handy): Preis 16 px; in sehr schmalen Spalten mit der Feldbreite kleiner (18,5 % der
   Breite), damit ein vierstelliger Preis wie „1.199,00 €“ (in Manrope 800 das 5,25-Fache der
   Schriftgröße breit) ohne Umbruch hineinpasst: 320-px-Handy, Feld 74 px → 13,7 px; Feld ≥ 87 px → 16 px. */
@container ron-feld-preis (max-width: 159px) {
	.ron-feld-preis .ron-feld-akt {
		font-size: 16px;
		font-size: clamp(12px, 18.5cqi, 16px);
	}
}

/* Ohne Container-Abfragen (ältere Browser): die kleinere Größe für alle Spalten */
@supports not (container-type: inline-size) {
	.ron-feld-preis .ron-feld-akt {
		font-size: 16px;
	}
}

/* Foto-Feld: Größe und Lage regelt die Seite (fester Platz); hier nur proportional und nie breiter
   als das Feld (6(a): object-fit contain, nichts darüberlegen) */
img.ron-feld-foto {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Scroll-Verankerung (seit 1.3.0): Das klebende Inhaltsverzeichnis rechts (.rna-toc > .rna-toc-in, sticky)
   bewegt sich nie. Wählte der Browser es als Anker, glich er den Umbau der Karten im Überblick nicht aus:
   Wer per #rna-s3 oder mit gemerkter Scrollposition am Vergleich steht, rutschte am PC um 700–950 px
   weg (CLS 0,33–0,47, seit 1.1). Ohne Anker dort nimmt er ein Element der Hauptspalte (gemessen 07.10.2026). */
.rna-art .rna-toc {
	overflow-anchor: none;
}

/* Pflichthinweise unter dem Bereich (nach dessen Fußnote): Preise, Fotos, 2(k) in Versalien */
p.ron-hinweis.ron-feld-hinweis {
	display: block;
	margin: 6px 0 0;
	padding: 0;
	color: var(--rna-ink-3, #5B6576);
	font-family: var(--rna-text, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
}

p.ron-hinweis.ron-feld-hinweis .ron-2k {
	font-size: 12px;
	text-transform: uppercase;
}

/* --- Bis 768px: Bild zentriert über dem Text --- */
@media (max-width: 768px) {
	.ron-ui .ron-box {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "bild" "inhalt" "fuss";
		grid-template-rows: auto auto auto;
	}

	.ron-ui .ron-box.ron-ohne-bild {
		grid-template-areas: "inhalt" "fuss";
		grid-template-rows: auto auto;
	}

	.ron-ui .ron-box .ron-bild {
		margin: 0 auto;
	}
}

/* --- Bis 480px: Merkmale aus, Titel und Preis 16px --- */
@media (max-width: 480px) {
	.ron-ui .ron-box .ron-merkmale {
		display: none;
	}

	.ron-ui .ron-box .ron-kopf {
		margin-bottom: 5px;
	}

	.ron-ui .ron-box .ron-titelzeile {
		font-size: 16px;
	}

	.ron-ui .ron-box .ron-akt {
		font-size: 16px;
	}

	.ron-ui.ron-kompakt {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.ron-ui.ron-kompakt.ron-ohne-bild {
		grid-template-columns: minmax(0, 1fr);
	}

	.ron-ui.ron-kompakt > a.rna-amz.ron-knopf {
		grid-column: 1 / -1;
		justify-self: end;
	}
}