/**
 * Dealfuchs — Gestaltung.
 *
 * Komposition nach amplai.de (Gradient-Hero, Eyebrow-Pille, grosse zweifarbige
 * Headline, Kennzahlenreihe, gruppierte Karten-Raster), Farben und Funktion
 * nach dealfuchs.info. Die Werte sind dort direkt aus den berechneten Stilen
 * ausgelesen, nicht geschaetzt:
 *
 *   Kopfverlauf   #292524 -> #431407 -> #292524
 *   Primaerton    #C2410C
 *   Kacheln       acht Verlaeufe (Tailwind-Basis)
 *
 * Flaechen und Text folgen den WoltLab-Variablen, damit die Seite dem aktiven
 * Stil und dem Dunkelmodus folgt. Nur der Hero bringt eigene Farben mit — er
 * ist bewusst in jedem Theme dunkel.
 *
 * Flach geschrieben, ohne CSS-Verschachtelung.
 */

.dfWrap,
.dfHero__inner {
	margin: 0 auto;
	max-width: 1180px;
	padding-left: 20px;
	padding-right: 20px;
}

/* ── Hero ─────────────────────────────────────────────────── */

.dfHero {
	/* Randlos ueber die volle Breite, obwohl der Hero im begrenzten
	   Inhaltsbereich von WoltLab steckt: negative Raender in Hoehe des
	   Abstands zum Viewportrand.

	   Ob 100vw die Scrollleiste mitzaehlt, ist zwischen den Browsern
	   uneinheitlich — wo sie mitzaehlt, ragt der Hero um die Leistenbreite
	   hinaus. Dagegen steht die clip-Regel am Wurzelelement weiter unten. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #292524;
	background-image:
		radial-gradient(120% 140% at 50% -20%, rgb(194 65 12 / 45%) 0%, transparent 60%),
		linear-gradient(100deg, #292524 0%, #431407 55%, #292524 100%);
	color: #fff;
	margin-bottom: 32px;
	overflow: hidden;
	position: relative;
}

.dfHero__inner {
	padding-bottom: 44px;
	padding-top: 44px;
	text-align: center;
}

.dfHero__logo {
	display: block;
	height: 84px;
	/* Blockdarstellung erzwingen: als inline-Bild setzt es sich sonst neben
	   die Eyebrow-Pille statt darueber. */
	margin: 0 auto 16px;
	width: 84px;
}

.dfHero__eyebrow {
	align-items: center;
	background-color: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 999px;
	display: inline-flex;
	font-size: 13px;
	gap: 8px;
	letter-spacing: .01em;
	padding: 6px 14px;
}

.dfHero__dot {
	background-color: #4ADE80;
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgb(74 222 128 / 25%);
	display: inline-block;
	height: 7px;
	width: 7px;
}

.dfHero__title {
	font-size: clamp(2.1rem, 5.2vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.05;
	margin: 18px 0 0;
	text-wrap: balance;
}

.dfHero__titleAccent {
	color: #FB923C;
}

.dfHero__lede {
	color: rgb(255 255 255 / 78%);
	font-size: 1.05rem;
	line-height: 1.55;
	margin: 14px auto 0;
	max-width: 60ch;
}

/* ── Suche ────────────────────────────────────────────────── */

.dfSearch {
	display: flex;
	gap: 8px;
	margin: 22px auto 0;
	max-width: 560px;
}

.dfSearch__input {
	background-color: rgb(255 255 255 / 96%);
	border: 1px solid transparent;
	border-radius: 999px;
	color: #1F2937;
	flex: 1;
	font-size: 15px;
	min-width: 0;
	padding: 11px 18px;
}

.dfSearch__input:focus {
	border-color: #FB923C;
	outline: 2px solid rgb(251 146 60 / 45%);
	outline-offset: 1px;
}

/* Fassung fuer den hellen Inhaltsbereich. Ohne den dunklen Balken dahinter
   braucht das Feld eine sichtbare Kante, sonst schwimmt es auf der Flaeche.
   Farben aus den WoltLab-Variablen, damit es im Dunkelmodus mitgeht. */
.dfSearch--plain {
	/* Der contentHeader von WoltLab hat selbst keinen Abstand nach unten —
	   nachgemessen an einer Seite, die ihn schon nutzt. Ohne den Rand hier
	   klebte das Feld direkt unter der Ueberschrift. */
	margin: 20px 0 18px;
	max-width: 520px;
}

.dfSearch--plain .dfSearch__input {
	background-color: var(--wcfContentBackground, #fff);
	border-color: var(--wcfContentBorder, #D1D5DB);
	color: var(--wcfContentText, #1F2937);
}

.dfSearch__submit {
	background-color: #C2410C;
	border: 0;
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	padding: 11px 22px;
	white-space: nowrap;
}

.dfSearch__submit:hover {
	background-color: #9A3412;
}

/* ── Kennzahlen ───────────────────────────────────────────── */

/* Hoehere Spezifitaet als die dl-Regeln des WoltLab-Stils - ohne den
   Vorfahren-Selektor stapeln sich die Kennzahlen untereinander. */
.dfHero .dfStats {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 18px 56px;
	justify-content: center;
	margin: 32px 0 0;
}

.dfHero .dfStats__item {
	flex: 0 0 auto;
	min-width: 120px;
	text-align: center;
}

.dfHero .dfStats dt,
.dfHero .dfStats dd {
	float: none;
	margin-left: 0;
	padding: 0;
	text-align: center;
	width: auto;
}

.dfStats__value {
	font-size: 1.9rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	margin: 0;
}

.dfStats__label {
	color: rgb(255 255 255 / 70%);
	font-size: 13px;
	margin: 4px 0 0;
}

/* ── Seitenleistenboxen ───────────────────── */

/* Kategorien und Schnellauswahl stehen jetzt in WoltLab-Boxen in der
   Seitenleiste statt in der Inhaltsspalte. Sie kosten dort keine Hoehe im
   Lesefluss und lassen sich ueber das ACP verschieben oder abschalten.

   Untereinander statt als Chips: in der schmalen Spalte liest sich eine
   Liste ruhiger, und die Zahlen stehen rechtsbuendig untereinander. */

.dfBoxNav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dfBoxNav__item {
	align-items: center;
	border-radius: 6px;
	color: var(--wcfSidebarText);
	display: flex;
	font-size: 14px;
	gap: 8px;
	justify-content: space-between;
	padding: 6px 8px;
	text-decoration: none;
}

.dfBoxNav__item:hover {
	background-color: rgb(194 65 12 / 10%);
	color: var(--wcfSidebarLinkActive, #C2410C);
}

.dfBoxNav__item.is-active {
	background-color: #C2410C;
	color: #fff;
	font-weight: 600;
}

/* Das Symbol macht die Liste in der schmalen Spalte ueberfliegbar, ohne
   Platz zu kosten — es sitzt in der Zeile, nicht darueber. */
.dfBoxNav__icon {
	color: #C2410C;
	flex: 0 0 auto;
	opacity: .8;
}

.dfBoxNav__item.is-active .dfBoxNav__icon {
	color: #fff;
	opacity: 1;
}

.dfBoxNav__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dfBoxNav__count {
	flex: 0 0 auto;
	/* Gleiche Ziffernbreite, damit die Zahlen eine Spalte bilden. */
	font-variant-numeric: tabular-nums;
	font-size: 12px;
	opacity: .7;
}

.dfBoxNav__item.is-active .dfBoxNav__count {
	opacity: .9;
}

/* ── Bloecke ──────────────────────────────────────────────── */

.dfBlock {
	margin-bottom: 34px;
}

.dfBlock__header {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 14px;
}

.dfBlock__title {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}

.dfBlock__header .dfBlock__title {
	margin-bottom: 0;
}

/* ── Kategorieauswahl auf der Startseite ─────── */

/* Der Weg hierher in Zahlen: waagerechtes Karussell mit 3.222 px ausserhalb
   des Sichtfelds, dann 23 Farbkacheln mit 394 px, dann Chips mit 219 px.
   Jetzt ein Aufklappmenue — geschlossen eine Zeile. Die Kategorien sind
   damit nicht verschwunden: die fuenf staerksten stehen weiter unten mit
   echten Angeboten, alle 23 haengen in diesem Menue.

   WoltLab verschiebt .dropdownMenu beim Oeffnen in einen eigenen Container
   am Seitenende. Regeln fuer das Menue muessen deshalb an der Klasse des
   Menues selbst haengen, nicht an einem Elternteil — sonst greifen sie
   nach dem Verschieben nicht mehr. */

/* Eine Zeile fuer Kategoriemenue und Ausschnitte. Umbruch erlaubt, damit
   auf schmalen Bildschirmen nichts abgeschnitten wird. */
.dfPickRow {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.dfCatPicker {
	display: inline-block;
	margin: 0;
}

/* Gleiche Form wie das Kategoriemenue — der Unterschied liegt in der
   Funktion, nicht im Aussehen. */
.dfPickRow__link {
	white-space: nowrap;
}

.dfCatPicker__toggle {
	align-items: center;
	display: inline-flex;
	gap: 8px;
}

/* Bei 23 Eintraegen waere eine einspaltige Liste laenger als der Bildschirm. */
.dfCatPicker__menu {
	column-gap: 4px;
	columns: 2;
	max-width: 460px;
}

.dfCatPicker__menu > li {
	break-inside: avoid;
}

.dfCatPicker__count {
	/* Gleiche Ziffernbreite, damit die Zahlen eine Spalte bilden. */
	font-variant-numeric: tabular-nums;
	margin-left: 6px;
	opacity: .55;
}

/* ── Fliesstext am Seitenfuss ─────────────── */

.dfAbout p {
	color: var(--wcfContentDimmedText);
	line-height: 1.7;
	margin: 0 0 12px;
	/* Rund 70 Zeichen je Zeile — darueber wird das Zurueckspringen muehsam. */
	max-width: 68ch;
}

/* ── Filter ───────────────────────────────────────────────── */

.dfFilter {
	background-color: var(--wcfContentBackground);
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: 12px;
	padding: 4px 18px;
}

.dfFilter__toggle {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	padding: 12px 0;
}

.dfFilter__toggle::-webkit-details-marker {
	display: none;
}

.dfFilter__toggle::before {
	content: "\002B";
	display: inline-block;
	font-weight: 700;
	margin-right: 8px;
}

.dfFilter[open] .dfFilter__toggle::before {
	content: "\2212";
}

.dfFilter__form {
	padding-bottom: 16px;
}

.dfFilter__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.dfField {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.dfField__label {
	color: var(--wcfContentDimmedText);
	font-size: 13px;
}

.dfField__control {
	width: 100%;
}

.dfField--check {
	align-self: end;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding-bottom: 8px;
}

.dfFilter__actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.dfButton {
	background-color: var(--wcfContentBackground);
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: 999px;
	color: var(--wcfContentText);
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 9px 20px;
	text-decoration: none;
}

.dfButton:hover {
	border-color: #C2410C;
	color: #C2410C;
	text-decoration: none;
}

.dfButton--primary {
	background-color: #C2410C;
	border-color: #C2410C;
	color: #fff;
}

.dfButton--primary:hover {
	background-color: #9A3412;
	border-color: #9A3412;
	color: #fff;
}

/* ── Deal-Raster ──────────────────────────────────────────── */

.dfGrid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.dfCard {
	background-color: var(--wcfContentBackground);
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow .14s linear, transform .14s ease-out;
}

.dfCard:hover {
	box-shadow: 0 6px 22px -12px rgb(0 0 0 / 45%);
	transform: translateY(-2px);
}

.dfCard--expired {
	opacity: .62;
}

.dfCard__top {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	padding: 12px 14px 0;
}

.dfCard__tag {
	background-color: var(--wcfContentBorderInner);
	border-radius: 999px;
	color: var(--wcfContentText);
	font-size: 12px;
	font-weight: 600;
	max-width: 62%;
	overflow: hidden;
	padding: 3px 10px;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dfCard__tag:hover {
	background-color: #C2410C;
	color: #fff;
	text-decoration: none;
}

.dfCard__tag--muted {
	opacity: .5;
}

.dfCard__time {
	color: var(--wcfContentDimmedText);
	font-size: 12px;
	white-space: nowrap;
}

/* Festes Seitenverhaeltnis, damit die Karten beim Laden nicht springen:
   die importierten Bildmasse fehlen haeufig. */
.dfCard__media {
	aspect-ratio: 5 / 4;
	display: block;
	margin: 10px 14px 0;
	position: relative;
}

.dfCard__image {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.dfCard__imageEmpty {
	background-color: var(--wcfContentBorderInner);
	border-radius: 8px;
	display: block;
	height: 100%;
	width: 100%;
}

.dfBadge {
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .01em;
	padding: 3px 9px;
	white-space: nowrap;
}

.dfCard__media .dfBadge {
	position: absolute;
	top: 4px;
}

.dfBadge--flash {
	background-color: #EA580C;
	color: #fff;
	right: 4px;
}

.dfBadge--expired {
	background-color: #57534E;
	color: #fff;
	left: 4px;
}

.dfBadge--discount {
	background-color: #DC2626;
	color: #fff;
}

.dfCard__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px 14px;
}

.dfCard__title {
	/* Auf drei Zeilen begrenzen: ohne das reisst ein 95 Zeichen langer
	   Amazon-Titel die Karte auf ueber 580 px auf und das Raster franst aus. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
	max-height: 5.7em;
	overflow: hidden;
}

.dfCard__title > a {
	color: inherit;
	text-decoration: none;
}

.dfCard__title > a:hover {
	color: #C2410C;
	text-decoration: none;
}

.dfCard__prices {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.dfCard__price {
	font-size: 1.32rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.dfCard__oldPrice {
	color: var(--wcfContentDimmedText);
	font-size: 13px;
}

.dfCard__meta {
	color: var(--wcfContentDimmedText);
	display: flex;
	flex-wrap: wrap;
	font-size: 12px;
	gap: 10px;
}

.dfCard__cta {
	background-color: #C2410C;
	color: #fff;
	display: block;
	font-size: 14px;
	font-weight: 700;
	padding: 11px 14px;
	text-align: center;
	text-decoration: none;
}

.dfCard__cta:hover {
	background-color: #9A3412;
	color: #fff;
	text-decoration: none;
}

.dfCard__cta--muted {
	background-color: var(--wcfContentBorderInner);
	color: var(--wcfContentText);
}

.dfCard__cta--muted:hover {
	background-color: var(--wcfContentBorder);
	color: var(--wcfContentText);
}

.dfPagination {
	margin-top: 24px;
}

/* ── Detailseite ──────────────────────────────────────────── */

.dfDetail {
	display: grid;
	gap: 26px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 769px) {
	.dfDetail {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	}
}

.dfDetail__image {
	height: auto;
	max-width: 100%;
}

.dfDetail__prices {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dfDetail__price {
	font-size: 2.1rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.dfDetail__oldPrice {
	color: var(--wcfContentDimmedText);
}

.dfDetail__note {
	color: var(--wcfContentDimmedText);
	font-size: 14px;
	margin: 8px 0 0;
}

.dfDetail__cta {
	margin-top: 22px;
}

.dfDetail__description {
	/* Zeilenumbrueche aus der Quelle erhalten: das WCF-Template-System kennt
	   keinen nl2br-Modifier, und {$var} escapt ohnehin automatisch. */
	line-height: 1.65;
	white-space: pre-line;
}

.dfDetail__more {
	display: inline-block;
	margin-top: 10px;
	font-weight: 600;
}

.dfDetail__more::after {
	content: " \2192";
}

.dfOffers {
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dfOffers__item > a {
	align-items: center;
	border-bottom: 1px solid var(--wcfContentBorderInner);
	color: inherit;
	display: flex;
	justify-content: space-between;
	padding: 9px 0;
	text-decoration: none;
}

/* ── Schmale Bildschirme ──────────────────────────────────── */

@media (max-width: 600px) {
	.dfHero__inner {
		padding-bottom: 32px;
		padding-top: 32px;
	}

	.dfSearch {
		flex-direction: column;
	}

	.dfStats {
		gap: 14px 26px;
	}

	.dfStats__value {
		font-size: 1.5rem;
	}

	.dfGrid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 12px;
	}
}


.dfWrap--detail {
	padding-top: 26px;
}

/* Die Detailseite reiht viele kurze Abschnitte aneinander — Beschreibung,
   andere Angebote, Preisverlauf, verwandte Deals, Kommentare. Ohne
   groesseren Abstand verschwimmen sie zu einem Block. */
.dfWrap--detail .dfBlock {
	margin-bottom: 44px;
}

.dfDetail__media {
	align-items: flex-start;
	background-color: var(--wcfContentBackground);
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: 14px;
	display: flex;
	justify-content: center;
	overflow: hidden;
	padding: 18px;
}

.dfDetail__image {
	height: auto;
	/* Begrenzen, sonst sprengt ein 1500-px-Produktbild die Spalte. */
	max-height: 420px;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}

.dfDetail__imageEmpty {
	background-color: var(--wcfContentBorderInner);
	border-radius: 10px;
	display: block;
	height: 260px;
	width: 100%;
}

.dfDetail__tags {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.dfDetail__title {
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.25;
	margin: 0 0 16px;
	text-wrap: balance;
}

.dfDetail__note--good {
	color: #15803D;
	font-weight: 600;
}

.dfButton--large {
	font-size: 15px;
	padding: 13px 30px;
}

.dfDetail__cta {
	display: inline-block;
	margin: 20px 0 4px;
}

.dfFacts {
	border-top: 1px solid var(--wcfContentBorderInner);
	display: grid;
	gap: 6px 16px;
	grid-template-columns: auto 1fr;
	margin: 20px 0 0;
	padding-top: 16px;
}

.dfFacts > dt {
	color: var(--wcfContentDimmedText);
	font-size: 14px;
}

.dfFacts > dd {
	font-size: 14px;
	margin: 0;
}

.dfPriceHistory {
	max-width: 420px;
}

/* ── Startseite ───────────────────────────────────────────── */

.dfHero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
}

/* Sekundaerer Knopf auf dunklem Grund - der normale dfButton nimmt die
   Inhaltsflaeche als Hintergrund und waere hier unsichtbar. */
.dfButton--onDark {
	background-color: rgb(255 255 255 / 10%);
	border-color: rgb(255 255 255 / 30%);
	color: #fff;
}

.dfButton--onDark:hover {
	background-color: rgb(255 255 255 / 18%);
	border-color: rgb(255 255 255 / 55%);
	color: #fff;
}

.dfBlock__hint {
	color: var(--wcfContentDimmedText);
	font-size: 13px;
}

.dfBlock__more {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.dfFeature {
	background-color: var(--wcfContentBackground);
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: 16px;
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
}

@media (min-width: 769px) {
	.dfFeature {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	}
}

.dfFeature__media {
	align-items: center;
	aspect-ratio: 4 / 3;
	display: flex;
	justify-content: center;
	padding: 20px;
	position: relative;
}

.dfFeature__image {
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.dfFeature__badge {
	font-size: 15px;
	left: 16px;
	padding: 5px 12px;
	position: absolute;
	top: 16px;
}

.dfFeature__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
	padding: 24px 26px 26px;
}

.dfFeature__title {
	font-size: clamp(1.15rem, 2.2vw, 1.55rem);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	text-wrap: balance;
}

.dfFeature__title > a {
	color: inherit;
	text-decoration: none;
}

.dfFeature__title > a:hover {
	color: #C2410C;
}

.dfFeature__cta {
	align-self: flex-start;
	margin-top: 6px;
}


/* ── Absicherung fuer den randlosen Hero ──────────────────── */

/* clip statt hidden: hidden wuerde aus dem Wurzelelement einen
   Scrollcontainer machen und damit jedes position:sticky im Layout
   aushebeln. clip schneidet nur ab. */
html {
	overflow-x: clip;
}


/* ── Schlagworte ─────────────────────────── */

.dfTags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 36px;
}

.dfTags__item {
	background-color: var(--wcfContentBorderInner);
	border-radius: 999px;
	color: var(--wcfContentDimmedText);
	font-size: 13px;
	padding: 5px 12px;
	text-decoration: none;
}

.dfTags__item:hover {
	background-color: rgb(194 65 12 / 12%);
	color: #C2410C;
}

/* Fassung fuer die Seitenleiste, angelehnt an die beliebten Themen auf
   study-board.de: umrandete Pillen statt gefuellter Flaechen. Das wirkt in
   einer schmalen Spalte ruhiger und laesst die hervorgehobenen Eintraege
   ueberhaupt erst auffallen. */
.dfTags--box {
	margin: 0;
}

/* Bewusst in der Textfarbe, nicht in der Linkfarbe: waeren alle Schlagworte
   farbig, koennten sich die im ACP hervorgehobenen nicht mehr abheben — und
   genau dafuer ist die Hervorhebung da. */
.dfTags--box .dfTags__item {
	background-color: transparent;
	border: 1px solid var(--wcfContentBorderInner);
	color: var(--wcfContentText);
	font-size: 13px;
	padding: 5px 12px;
}

.dfTags--box .dfTags__item:hover {
	background-color: transparent;
	border-color: var(--wcfContentLink, #2563EB);
}

/* Vorgegebene Schlagworte in der Hausfarbe: sie sollen sich vom Rest
   abheben, ohne ihn zu ueberstrahlen. */
.dfTags--box .dfTags__item--featured {
	background-color: rgb(194 65 12 / 8%);
	border-color: rgb(194 65 12 / 35%);
	color: #C2410C;
}

.dfTags--box .dfTags__item--featured:hover {
	background-color: rgb(194 65 12 / 14%);
	border-color: #C2410C;
}


/* ── Statistikseite ──────────────────────── */

.dfStatGrid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 20px 0 8px;
}

.dfStatGrid__item {
	background-color: var(--wcfContentBackground);
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: 12px;
	padding: 18px;
	text-align: center;
}

.dfStatGrid__value {
	color: #C2410C;
	font-size: 1.9rem;
	font-weight: 700;
	/* Gleiche Ziffernbreite, damit die Karten nicht unterschiedlich wirken. */
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.dfStatGrid__label {
	color: var(--wcfContentDimmedText);
	font-size: 13px;
	margin: 6px 0 0;
}

.dfStatNote {
	color: var(--wcfContentDimmedText);
	font-size: 14px;
	margin: 0 0 24px;
}

/* Zahlenspalten rechtsbuendig und mit fester Ziffernbreite — nur so lassen
   sie sich ueberhaupt vergleichen. */
.dfStatTable__num {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}


/* ── Aufmacher mit Seitenspalte ─────────────── */

/* Anordnung der Vorgaengerseite: ein grosses Angebot, daneben drei kleine.
   Unter 900 px rutscht die Spalte darunter, sonst blieben fuer den Aufmacher
   keine 400 px mehr uebrig. */
.dfFeatureRow {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
	.dfFeatureRow {
		grid-template-columns: 1fr;
	}
}

.dfFeatureSide {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.dfFeatureSide__item {
	align-items: center;
	background-color: var(--wcfContentBackground);
	border: 1px solid var(--wcfContentBorderInner);
	border-radius: 12px;
	color: var(--wcfContentText);
	display: flex;
	gap: 12px;
	height: 100%;
	padding: 12px;
	text-decoration: none;
	transition: border-color .12s ease-out;
}

.dfFeatureSide__item:hover {
	border-color: #C2410C;
}

.dfFeatureSide__image {
	flex: 0 0 auto;
	height: 64px;
	object-fit: contain;
	width: 64px;
}

.dfFeatureSide__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dfFeatureSide__title {
	font-size: 13px;
	line-height: 1.3;
}

.dfFeatureSide__prices {
	align-items: baseline;
	display: flex;
	gap: 6px;
}

.dfFeatureSide__prices strong {
	font-size: 15px;
}

.dfFeatureSide__prices del {
	color: var(--wcfContentDimmedText);
	font-size: 12px;
}

.dfFeatureSide__badge {
	flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
	.dfFeatureSide__item {
		transition: none;
	}
}


/* ── Bilder ─────────────────────────────── */

/* Die width- und height-Angaben im HTML reservieren nur den Platz und
   verhindern das Nachrutschen. Wie das Bild darin tatsaechlich liegt,
   entscheidet das Stylesheet — sonst wuerden die Nennwerte die Darstellung
   verzerren. */
.dfCard__image,
.dfDetail__image {
	height: auto;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	width: auto;
}


/* ── Teilen ─────────────────────────────── */

/* Abstaende statt Trennlinien: Produktblock, Teilen und Schlagworte sind
   drei verschiedene Dinge und brauchen sichtbar unterschiedliche Abstaende.
   Vorher klebte die Zeile ohne jeden Abstand am Produktblock, darunter war
   alles gleichfoermig 24 px — dadurch wirkte die Seite gedraengt. */
.dfShare {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 30px 0 22px;
}

.dfShare__label {
	color: var(--wcfContentDimmedText);
	font-size: 14px;
	font-weight: 600;
}

/* Der Kern setzt die Knoepfe in eine Liste mit eigenen Abstaenden — die
   hier zuruecknehmen, damit sie in einer Zeile mit der Beschriftung sitzen. */
.dfShare .messageShareButtons {
	margin: 0;
}

.dfShare .inlineList {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}