/**
 * 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;
}

.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;
}

.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;
}

/* ── Kopfbereich zusammenlegen ────────────────────── */

/* WoltLab stapelt zwei Zeilen: die fixierte Menuezeile und darunter ein
   124 px hohes Band, das im Ruhezustand nur ein 44 px kleines Logo und sonst
   Leere traegt — die Suchleiste darin ist bis zum Klick auf die Lupe
   ausgeblendet. Beides wird hier zu einer Zeile: das Logo wandert nach oben,
   das Band faellt auf null und klappt nur noch fuer die Suche auf.

   Nur ab 1025 px: darunter baut WoltLab den Kopf voellig anders auf
   (display:contents, eigenes Mobil-Logo, Hamburger). Dort waeren diese
   Regeln nicht nur wirkungslos, sondern wuerden das Logo verschlucken. */
@media screen and (min-width: 1025px) {
	/* Das Logo liegt im DOM im Band darunter. Feste Positionierung mit
	   derselben Layoutbreite wie die Menuezeile setzt es trotzdem buendig
	   links in diese Zeile. */
	#pageHeaderLogo {
		align-items: center;
		display: flex;
		height: 50px;
		left: 0;
		margin: 0 auto;
		max-width: var(--wcfLayoutMaxWidth, 1400px);
		padding: 0 20px;
		/* Der Kasten liegt ueber der ganzen Zeilenbreite — ohne das hier
		   waeren die Menuepunkte darunter nicht mehr anklickbar. */
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 301;
	}

	#pageHeaderLogo a {
		align-items: center;
		display: flex;
		pointer-events: auto;
	}

	#pageHeaderLogo img {
		height: 34px;
		width: auto;
	}

	/* Die kleine Fassung ist fuer das Mobil-Layout gedacht. */
	#pageHeaderLogo .pageHeaderLogoSmall {
		display: none;
	}

	/* Platz fuer das Logo, damit der erste Menuepunkt nicht darunter liegt. */
	#pageHeaderPanel .mainMenu {
		padding-left: 54px;
	}

	/* Der Innenabstand ist die ganze Hoehe des Bandes: das Logo ist durch die
	   feste Positionierung aus dem Fluss, die Suche ist geschlossen
	   ausgeblendet. Bleibt er stehen, bleiben 60 px Leere. */
	#pageHeader:not(.searchBarOpen) #pageHeaderFacade > .layoutBoundary {
		padding-bottom: 0;
		padding-top: 0;
	}

	/* Geoeffnet traegt das Band nur noch die Suchleiste — knapper als die
	   urspruenglichen 30 px oben und unten. */
	#pageHeader.searchBarOpen #pageHeaderFacade > .layoutBoundary {
		padding-bottom: 11px;
		padding-top: 11px;
	}
}


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

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

.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;
}

.dfTags--box .dfTags__item {
	background-color: transparent;
	border: 1px solid var(--wcfContentBorderInner);
	color: var(--wcfContentLink, #2563EB);
	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;
}