/*
 * 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 4 px — Gestaltungskatalog, Abschnitt 8.
 */

.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: 0.75rem;
	padding-top: 0.75rem;
}

.iz-buecher-widget__link {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 0.75rem;
	align-items: start;
	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 img,
.iz-buecher-widget__bild picture {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* 🔴 Der Kern dieser Datei: Titel und Preis stehen untereinander, nie
   nebeneinander. Genau das Zusammenlaufen war der Fehler vom 14.10. */
.iz-buecher-widget__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.iz-buecher-widget__titel {
	display: block;
	font-size: var(--fs-sm);
	line-height: 1.3;
	font-weight: 600;
}

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

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