/*
 * Widget "IZ Bücher" in der rechten Spalte.
 *
 * ANLASS, und er ist ein gemessener Fehler: Das Widget ist am 2026-10-14 ohne
 * eigenes Stylesheet ausgeliefert worden. Titel und Preis stehen in zwei
 * span-Elementen; ohne Regel sind beide "inline" und laufen in einer Zeile
 * zusammen. Auf der Seite stand dadurch "Sahih Muslim Band 124,00 €" — die
 * Eins aus "Band 1" klebte am Preis. Gefunden hat es Abdelkabir, nicht ich.
 *
 * Eigene Datei und nicht ins Basis-Stylesheet: Sie lässt sich einzeln
 * zurücknehmen, ohne den Rest der Spalte anzufassen — dasselbe Vorgehen wie
 * bei iz-anzeigen.css und iz-mein-konto.css.
 *
 * Farben und Größen ausschließlich über Tokens aus iz-tokens.css, Größen in
 * rem, Radius über --r-standard (4 px) — Gestaltungskatalog, Abschnitt 8.
 *
 * ⟲ 2026-10-14, ZWEITE FASSUNG durch A-0689 — angeordnet von Abdelkabir am
 * selben Tag zur rechten Spalte, im Wortlaut: größere Cover, Titel und Preis
 * rücken darunter. Die erste Fassung stellte das Bild in eine 3,5 rem breite
 * Rasterspalte neben den Text (am gelieferten HTML gemessen: 63 px bei einer
 * Spaltenbreite von 266 px). Aus dem Raster wird deshalb ein Stapel: Bild über
 * die volle Breite des Eintrags, darunter Titel, Preis und der Pflichtzusatz.
 *
 * 🔴 WAS DABEI NICHT ANGEFASST IST, und das ist Absicht: Schriftgrößen, Farben
 * und die Trennlinie zwischen den Einträgen bleiben, wie sie waren. Angeordnet
 * war die Größe des Bildes und die Reihenfolge, sonst nichts
 * (*Umbau ist kein Neuentwurf* — "wäre schöner" ist kein Anlass).
 *
 * MOBIL: in dieser Datei steht kein Breiten-Abschnitt. Die Regeln treffen
 * jede Breite, die mobile Darstellung also mit — der Testbrowser kommt hier
 * aber nicht unter rund 825 px und kann sie nicht belegen. Geführt in
 * IZ-Kompass/Mobil-Bestaetigungen.md.
 */

.iz-buecher-widget__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iz-buecher-widget__eintrag + .iz-buecher-widget__eintrag {
	border-top: 1px solid var(--iz-border-soft);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
}

/* 🔴 Der Kern dieser Fassung: ein Stapel, kein Raster. Bild oben, Text
   darunter. Vorher stand hier ein Raster mit 3.5rem für das Bild. */
.iz-buecher-widget__link {
	display: block;
	text-decoration: none;
	color: var(--iz-text);
}

.iz-buecher-widget__link:hover .iz-buecher-widget__titel,
.iz-buecher-widget__link:focus-visible .iz-buecher-widget__titel {
	color: var(--iz-rot-hover);
	text-decoration: underline;
}

.iz-buecher-widget__bild {
	display: block;
	margin-bottom: var(--sp-2);
}

.iz-buecher-widget__bild img,
.iz-buecher-widget__bild picture {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--r-standard);
}

/* 🔴 Titel und Preis stehen untereinander, nie nebeneinander. Genau das
   Zusammenlaufen war der Fehler vom 14.10. */
.iz-buecher-widget__titel {
	display: block;
	font-size: var(--fs-sm);
	line-height: 1.3;
	font-weight: 600;
}

.iz-buecher-widget__preis {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-xs);
	color: var(--iz-text-muted);
}

.iz-buecher-widget__preis .woocommerce-Price-amount {
	font-weight: 600;
	color: var(--iz-text);
}

/* Der Pflichtzusatz zu Umsatzsteuer und Versandkosten. Er kommt unverändert
   aus Germanized und bringt dessen eigene Klassen mit; hier wird nur der
   Abstand gesetzt, den Absätze in der Seitenleiste sonst mitbringen. */
.iz-buecher-widget__hinweise {
	margin-top: var(--sp-1);
}

.iz-buecher-widget__hinweise .wc-gzd-additional-info {
	margin: 0;
	font-size: var(--fs-xs);
	line-height: 1.35;
	color: var(--iz-text-muted);
}

.iz-buecher-widget__hinweise .wc-gzd-additional-info a {
	color: var(--iz-text-muted);
	text-decoration: underline;
}

.iz-buecher-widget__hinweise .wc-gzd-additional-info a:hover,
.iz-buecher-widget__hinweise .wc-gzd-additional-info a:focus-visible {
	color: var(--iz-rot-hover);
}

/* ===============================================================
 * ZWEITER EINSATZORT: der Kasten "Aus unserem Bücherregal" auf der
 * Startseite (.iz-mp-selection), seit dem 2026-10-21 durch A-1223.
 *
 * ANLASS: Abdelkabir am 2026-10-21, im Wortlaut: "wir hatten die bücher von
 * der startseite genommen. die müssen wieder drauf. an die stelle, von der
 * wir sie entfernt haben", eingegrenzt am selben Tag: "es sollen nur die
 * drei bücher auf die startseite, die auch in der sidebar sind".
 *
 * 🔴 WARUM HIER ÜBERHAUPT ETWAS STEHEN MUSS: Das Eltern-Theme legt für
 * diesen Kasten ein eigenes Kartenraster über jedes `li`
 * (`.iz-mp-selection li { display: grid; grid-template-columns: 85px 1fr 1fr }`,
 * style.css ab Zeile 2640). Es ist auf die Klassen der alten
 * Anzeigen-Bausteine gemünzt (`.iz-product-widget-image` und Geschwister).
 * Die Einträge dieses Widgets heißen anders und würden in dessen erste,
 * 85 px schmale Spalte fallen — die ganze Karte wäre 85 px breit.
 * Die Regeln unten nehmen das zurück und bauen die Karte so, wie der Kasten
 * sie vorher hatte: Umschlag links, Titel und Preis rechts daneben.
 *
 * 🔴 UND DER EINE PUNKT, AN DEM ES NICHT UM AUSSEHEN GEHT: Das Eltern-Theme
 * blendet in diesem Kasten `.shipping-costs-info` aus (`display: none`).
 * Für die Abo-Anzeigen, die bisher hier standen, mochte das richtig sein —
 * bei einem Buch mit Preis ist der Versandkostenhinweis Pflicht (PAngV).
 * Er wird unten ausdrücklich wieder eingeblendet. Ohne diese eine Regel
 * stünde der Preis hier ohne ihn.
 *
 * UMBAU IST KEIN NEUENTWURF: Schriftgrößen, Farben, Abstände und das
 * 85-px-Maß sind aus dem Kasten übernommen, nicht neu gewählt. In der
 * rechten Spalte ändert sich durch diesen Block nichts — jede Regel hier
 * ist an `.iz-mp-selection` gebunden.
 *
 * MOBIL: Die Spaltenzahl folgt denselben Breiten wie das Raster des
 * Eltern-Themes für diesen Kasten (1 / 2 / 3 / 4). Unter rund 825 px kann
 * der Testbrowser nichts belegen; geführt in
 * IZ-Kompass/Mobil-Bestaetigungen.md.
 * =============================================================== */

/* 🔴 Zuerst der Platz, dann die Karten — am Zustand gemessen, nicht gedacht:
   `.mp-product-list` ist selbst schon ein Raster des Eltern-Themes (bis zu
   vier Spalten). Das Widget ist darin EIN Baustein und landete deshalb in
   dessen erster Spalte: bei 1280 px blieben ihm 619 statt 1240 px, die Titel
   brachen auf drei Zeilen um. Es nimmt die ganze Reihe ein; die Aufteilung
   in Spalten macht die Liste darunter. */
.iz-mp-selection .mp-product-list > .iz-buecher-widget {
	grid-column: 1 / -1;
}

.iz-mp-selection .iz-buecher-widget__liste {
	/* Das Maß des Umschlags steht genau einmal: hier. Es ist dasselbe,
	   das das Eltern-Theme für die Karten dieses Kastens benutzt. */
	--iz-buch-umschlag: 85px;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--sp-4);
	row-gap: var(--sp-4);
}

@media (min-width: 768px) {
	.iz-mp-selection .iz-buecher-widget__liste {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.iz-mp-selection .iz-buecher-widget__liste {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1280px) {
	.iz-mp-selection .iz-buecher-widget__liste {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Hier stehen die Einträge nebeneinander, nicht untereinander: die
   Trennlinie der rechten Spalte und das Raster des Eltern-Themes entfallen. */
.iz-mp-selection .iz-buecher-widget__eintrag,
.iz-mp-selection .iz-buecher-widget__eintrag + .iz-buecher-widget__eintrag {
	display: block;
	border-top: 0;
	margin: 0;
	padding: 0;
}

.iz-mp-selection .iz-buecher-widget__link {
	display: grid;
	grid-template-columns: var(--iz-buch-umschlag) 1fr;
	column-gap: var(--sp-3);
	align-items: start;
}

.iz-mp-selection .iz-buecher-widget__bild {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin-bottom: 0;
}

.iz-mp-selection .iz-buecher-widget__titel {
	grid-column: 2;
	grid-row: 1;
}

.iz-mp-selection .iz-buecher-widget__preis {
	grid-column: 2;
	grid-row: 2;
}

/* Der Preis trägt in diesem Kasten seit jeher die Hausfarbe und eine
   größere Schrift als in der Spalte — beides aus dem Kasten übernommen. */
.iz-mp-selection .iz-buecher-widget__preis .woocommerce-Price-amount {
	color: var(--iz-rot);
}

/* Der Pflichtzusatz rückt unter den Text, nicht unter den Umschlag. */
.iz-mp-selection .iz-buecher-widget__hinweise {
	margin-left: calc(var(--iz-buch-umschlag) + var(--sp-3));
}

/* 🔴 Siehe Kopf dieses Blocks: Ohne diese Regel fehlt der
   Versandkostenhinweis, weil das Eltern-Theme ihn in diesem Kasten ausblendet. */
.iz-mp-selection .iz-buecher-widget__hinweise .shipping-costs-info {
	display: block;
}