/**
 * iv-sp-similar.css — "Ähnliche Produkte"-Block
 *
 * Layout-neutraler Wrapper NUR. Die Karten selbst (.iv-card*) kommen
 * vollständig aus iv-filter.css (271 !important-Regeln dort) -- diese Datei
 * definiert bewusst KEINE .iv-card*-Regel, sonst driften zwei Darstellungen
 * auseinander (Spec v2 §6). .iv-grid liefert die Breakpoints (4/3/2/1 an
 * 1280/900/320, iv-filter.css:74-77) unverändert mit.
 *
 * Nutzt dieselben Design-Tokens wie iv-single-product.css (--iv-space-*,
 * --iv-bg-alt, --iv-line, --iv-radius-*, --iv-text*, --iv-accent*, --iv-serif,
 * --iv-sans, --iv-ease) -- keine neuen Tokens, keine Duplikate.
 */

.iv-sp-similar {
	margin-top: var(--iv-space-xl);
}

/* Owner-Screenshot 05.08.: .iv-sp-similar__headline (Spezifitaet 0,1,0)
   verlor gegen die Theme-h2-Regel -- Element-Selektor + !important, exakt
   das Praezedenz-Muster von .iv-sp h1.iv-sp-title (iv-single-product.css
   :266-279). Werte 1:1 aus .iv-sp-cta-headline (iv-single-product.css
   :825-832) uebernommen -- dieselbe Optik wie "Direkt bei ... bestellen",
   keine dritte Typo-Variante. <h2> bleibt <h2>, nur das Styling aendert sich. */
.iv-sp h2.iv-sp-similar__headline {
	font-family: var(--iv-serif) !important;
	font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--iv-text) !important;
	text-align: center !important;
	margin: 0 0 var(--iv-space-l) !important;
}

.iv-sp-similar__grid {
	margin-bottom: var(--iv-space-l);
}

/* A-92 Gang 2 (05.09.2026, Owner-Screenshot: Attributzeilen brechen auf ein
   Zeichen/Zeile um). Ursache 1 von 2 (Vorarbeitsdokument): .iv-grid wird erst
   bei 320px einspaltig (iv-filter.css:95-98) -- kein reales Geraet ist so
   schmal, ein iPhone (390-430px CSS-Breite) traegt hier zwei 173px-Karten
   nebeneinander. Weg (b): NUR dieses Raster wird fruerer einspaltig, .iv-grid
   selbst bleibt unangetastet -- die Produkte-Seite (/produkte/) nutzt dieselbe
   Klasse .iv-grid ohne .iv-sp-similar__grid und ist damit nicht betroffen.
   Hoehere Spezifitaet (.iv-sp-similar .iv-sp-similar__grid, 0-2-0) statt nur
   .iv-sp-similar__grid (0-1-0) -- schlaegt iv-filter.css:97s .iv-grid-Regel
   unabhaengig von der Enqueue-Reihenfolge der beiden Stylesheets.

   Breakpoint 500px, gerechnet (nicht geraten), Live-Messung 05.09. per
   Iframe-Instrument (Messregel 26, Instrumenten-Check vorab bestanden):
     Kartenbreite im 2-Spalten-Raster (<=600px, gap 8px) faellt linear mit dem
     Viewport. Fixkosten je Karte: 32px Innenabstand (16px links/rechts,
     iv-sp-quick-overview) + 12px Spaltenabstand (:117) + 126,9px Labelspalte
     (auto-Breite, von "DARREICHUNGSFORM" bestimmt -- 3 feste Labels lt.
     class-quick-overview.php:76-78, "Darreichungsform" ist das laengste und
     aendert sich nie produktabhaengig) = 170,9px, BEVOR die Wertspalte
     ueberhaupt etwas abbekommt. Live gemessen: 600px->Karte 278px->Wert
     107,1px (gut lesbar) / 500px->228px->57,1px (Grenzfall) / 450px->203px->
     32,1px (schon unlesbar) / 390px (iPhone)->173px->2,1px (der gemeldete
     Fall). Linearer Fit aus den Messwerten: Wertspalte = 0,5*Viewport - 192,9
     -- bei einer Lesbarkeits-Untergrenze von 60px (muss einen Wert wie
     "Kapseln" tragen koennen, Auftrag woertlich) ergibt sich ein Nulldurchgang
     bei 505,8px. 500px gewaehlt: rundet auf die sicherere (einspaltige) Seite
     ab, keine erfundene Zahl. */
@media (max-width: 500px) {
	.iv-sp-similar .iv-sp-similar__grid {
		grid-template-columns: 1fr;
	}
}

.iv-sp-similar__compare-cta {
	display: flex;
	justify-content: center;
}

/* Owner-Entscheid 05.08.: Vergleichs-Button nutzt jetzt .iv-sp-btn--primary
   (dieselbe Klasse wie der Affiliate-CTA) statt einer eigenen --outline-
   Variante -- Farbwerte NICHT nachbauen, dieselbe Klasse wiederverwenden,
   sonst entsteht eine dritte Optik neben Theme-Override und Original.
   .iv-sp-btn--primary bringt width:100% mit (iv-single-product.css:386);
   im zentrierten Wrapper hier eingedaemmt, sonst liefe der Button ueber die
   volle Inhaltsbreite (~1240px). 480px, damit der volle Wortlaut
   ("Dieses Produkt + die 3 ähnlichsten vergleichen") auf Desktop einzeilig
   bleibt -- Wortlaut ist ein bewusster Spec-v2-§7-Entscheid, wird nicht
   gekuerzt. Ohne --large: der Affiliate-CTA (400px darueber) bleibt die
   groessere Aktion. */
.iv-sp-similar__compare-cta .iv-sp-btn {
	width: auto;
	max-width: min(100%, 480px);
}

@media (max-width: 600px) {
	.iv-sp-similar__compare-cta .iv-sp-btn {
		width: 100%;
	}
}

/* I-130 (02.08., Phase 5) / Feinschliff 05.08.: Kurzuebersicht innerhalb
   der Similar-Karten. Bewusst .iv-sp-quick-* statt .iv-card__* -- keine
   Kollision/Drift mit iv-filter.css (s. Datei-Kopfkommentar). Rendert NUR
   im 'similar'-Kontext (IV_SP_Quick_Overview::render(), $context-Guard),
   nie auf regulaeren Rasterkarten -- sitzt jetzt UNTER .iv-card__actions
   (ivf_card_after_actions, iv-filter.php), nicht mehr davor.
   Padding spiegelt .iv-card__pricing / .iv-card__actions (16px links/
   rechts, iv-filter.css:155/207) -- vorher direktes Kind von .iv-card ohne
   eigenes Padding, dadurch randbuendig und optisch abgerissen. */
.iv-sp-quick-overview {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);   /* minmax(0,…) = Wertspalte darf schrumpfen */
	column-gap: 12px;
	row-gap: 6px;
	align-items: baseline;
	margin: 0;
	padding: 10px 16px 14px;
	border-top: 1px solid var(--iv-line);
	/* I-144 (Owner-Auftrag 05.08., datenbelegt 06.08.: 147 Empfehlungskarten
	   vermessen, 122 mit 3 Zeilen/25 mit 2 Zeilen, gemessene Blockhoehen
	   80/102/118px). Ohne min-height fluchten .iv-card__actions nicht mehr
	   ueber die Kartenreihe (I-144-Nebeneffekt aus I-143, Cowork-Fund
	   06.08.) -- deckt 2-Zeilen-, 3-Zeilen- und 3-Zeilen-mit-einem-Umbruch-
	   Karten ab. Restrisiko bewusst akzeptiert (Cowork-Entscheid): eine
	   Karte mit zwei umbrechenden Werten (~134px) fluchtet weiterhin nicht
	   -- Heuristik, keine Garantie. */
	min-height: 118px;
}

.iv-sp-quick-line {                 /* display:contents -> Label/Wert richten sich am Grid aus,
                                        Spalten fluchten ueber alle Zeilen hinweg */
	display: contents;
}

/* Label-Typografie bewusst aus .iv-card__brand abgeleitet (iv-filter.css
   :150, 10px/uppercase/letter-spacing) -- die Karte hat diese Sprache
   schon, es entsteht kein neues Muster. */
.iv-sp-quick-line__label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--iv-text);
	opacity: 0.55;
	white-space: nowrap;
}

.iv-sp-quick-line__val {
	font-size: 12px;
	line-height: 1.35;
	color: var(--iv-text);
	text-align: right;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* A-92 Gang 2, Weg (c) -- zusaetzliche Absicherung, nicht die Loesung des
   gemeldeten Falls (das ist Weg (b) oben): unter 500px ist die Karte durch
   (b) bereits einspaltig und damit selbst am iPhone (390px) ~350px breit --
   fuer die Wertspalte bleibt dort reichlich Platz (Rechnung wie oben:
   350-32-12-126,9 = 179px), Stapeln waere hier reine Kosmetik ohne Nutzen
   (nur mehr Zeilenhoehe, mehr Scrollen). Diese Regel greift deshalb bewusst
   erst bei 320px -- derselbe Schwellenwert, den iv-filter.css:98 fuer die
   Katalogseite selbst als "kein reales Geraet mehr" fuehrt (keine neue Zahl,
   Wiederverwendung der einzigen bereits im Projekt begruendeten Grenze).
   Heute inert (kein Geraet im Feld ist so schmal) -- Versicherung fuer den
   Fall, dass .iv-grid/.iv-sp-similar__grid ihre Breakpoints kuenftig aendern
   ("wo sie kuenftig schmal wird", Auftrag woertlich), nicht fuer den
   gemeldeten Fall selbst. */
@media (max-width: 320px) {
	.iv-sp-similar .iv-sp-quick-line {
		display: block;
		grid-column: 1 / -1;
	}

	.iv-sp-similar .iv-sp-quick-line__label {
		display: block;
		margin-bottom: 2px;
	}

	.iv-sp-similar .iv-sp-quick-line__val {
		text-align: left;
	}
}