/* EP Black Month – Bausteine der Black-Month-Seite ([epbf_*]-Shortcodes, Row-Klassen epbf-*).
   Gestaltung: flaches Gold auf Schwarz, keine Verläufe (ALEX 03.11.). */

:root {
	--epbf-gold: #c9a24d;
	--epbf-gold-hell: #d9b866;
	--epbf-schwarz: #0b0b0b;
	--epbf-creme: #ece6da;
	--epbf-grau: #a59f94;
	--epbf-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Hero: Bild/Video hinter der Row ---------- */
.epbf-hero { position: relative; overflow: hidden; background-color: #050505 !important; }
.epbf-hero-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #050505 var(--epbf-poster) 80% 55% / cover no-repeat;
	pointer-events: none;
}
.epbf-hero-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 80% 55%;
	opacity: 0;
	transition: opacity 900ms ease;
}
.epbf-hero-video video.laeuft { opacity: 1; }
.epbf-hero > *:not(.epbf-hero-video) { position: relative; z-index: 1; }
.epbf-hero .row-background, .epbf-hero .background-wrapper { display: none; }

@media (max-width: 959px) {
	.epbf-hero-video { background-image: var(--epbf-poster-klein); background-position: 80% 50%; }
	.epbf-hero-video video { object-position: 80% 50%; }
	/* Handy: Text liegt über dem Bild, deshalb gleichmäßig abdunkeln (kein Verlauf) */
	.epbf-hero-video::after { content: ""; position: absolute; inset: 0; background: rgba(5, 5, 5, 0.62); }
}

/* Kicker über Überschriften */
.epbf-kicker p {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--epbf-gold) !important;
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.epbf-kicker p::before {
	content: "";
	width: 42px;
	height: 1px;
	background: var(--epbf-gold);
}

/* Goldene Überschrift (flach) */
.epbf-glanz > *, .epbf-glanz h1, .epbf-glanz h2, .epbf-glanz span { color: var(--epbf-gold) !important; }

/* ---------- Monatsleiste ---------- */
.epbf-monat { max-width: 560px; margin: 4px 0 0; }
.epbf-monat-kopf {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
	color: var(--epbf-creme);
	font-size: 14px;
	letter-spacing: 0.02em;
}
.epbf-monat-kopf b { color: var(--epbf-gold); font-weight: 700; }
.epbf-monat-rest { color: var(--epbf-grau); }
.epbf-monat-leiste {
	display: grid;
	grid-template-columns: repeat(30, minmax(0, 1fr));
	gap: 4px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.epbf-monat-leiste li {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 34px;
	margin: 0 !important;
	padding: 0 0 3px;
	border: 1px solid rgba(201, 162, 77, 0.32);
	border-radius: 3px;
	color: rgba(236, 230, 218, 0.45);
	font-size: 9px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	list-style: none !important;
}
.epbf-monat-leiste li::before { display: none !important; }
.epbf-monat-leiste li.vorbei {
	background: rgba(201, 162, 77, 0.22);
	border-color: rgba(201, 162, 77, 0.45);
	color: rgba(236, 230, 218, 0.7);
}
.epbf-monat-leiste li.heute {
	height: 46px;
	margin-top: -12px !important;
	background: var(--epbf-gold);
	border-color: transparent;
	color: #111;
	font-weight: 800;
	font-size: 11px;
}
@media (prefers-reduced-motion: no-preference) {
	.epbf-monat.ist-bereit .epbf-monat-leiste li {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 500ms var(--epbf-ease), transform 500ms var(--epbf-ease);
		transition-delay: calc(var(--i, 0) * 22ms);
	}
	.epbf-monat.ist-bereit.ist-da .epbf-monat-leiste li { opacity: 1; transform: none; }
}
@media (max-width: 959px) {
	.epbf-monat-leiste { gap: 2px; }
	.epbf-monat-leiste li { height: 24px; font-size: 0; padding: 0; }
	.epbf-monat-leiste li.heute { height: 32px; margin-top: -8px !important; font-size: 10px; padding-bottom: 3px; }
}

/* ---------- Laufband ----------
   Liegt schräg über der Kante Header/Kracher: Row ohne eigenen Grund, ragt nach oben und unten heraus,
   seitlich abgeschnitten (clip statt hidden, damit es vertikal sichtbar bleibt und kein Querscrollen entsteht). */
.epbf-lb-row {
	position: relative;
	z-index: 20;
	margin: -36px 0 -36px !important;
	background: transparent !important;
	overflow: visible !important;
	overflow-x: clip !important;
}
.epbf-lb-row .row, .epbf-lb-row .row-inner, .epbf-lb-row .uncell, .epbf-lb-row .uncol, .epbf-lb-row .uncoltable { background: transparent !important; overflow: visible !important; }
.epbf-laufband {
	position: relative;
	margin: 0 -2%;
	padding: 15px 0 13px;
	overflow: hidden;
	background: var(--epbf-gold);
	transform: rotate(-1.4deg);
	box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.8);
}
.epbf-lb-spur { display: flex; width: max-content; }
.epbf-lb-teil {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: #0b0b0b !important;
	font-size: clamp(18px, 2.2vw, 30px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.epbf-lb-eintrag { padding: 0 26px; }
.epbf-lb-stern { font-size: 0.7em; opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
	.epbf-lb-spur { animation: epbf-lauf 38s linear infinite; }
	.epbf-laufband:hover .epbf-lb-spur { animation-play-state: paused; }
}
@keyframes epbf-lauf {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---------- Kracher-Bereich (Row-Klasse epbf-kracher) ---------- */
.epbf-kracher { position: relative; overflow: hidden; background: var(--epbf-schwarz) !important; }
.epbf-kracher::before {
	content: "KRACHER";
	position: absolute;
	right: -0.04em;
	top: 0.12em;
	z-index: 0;
	font-family: ClashDisplay-Variable, sans-serif;
	font-weight: 700;
	font-size: clamp(120px, 19vw, 360px);
	line-height: 0.8;
	letter-spacing: -0.02em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(201, 162, 77, 0.18);
	pointer-events: none;
	white-space: nowrap;
}
.epbf-kracher > * { position: relative; z-index: 1; }
.epbf-kracher .heading-text > *, .epbf-kracher h2 { color: var(--epbf-gold) !important; }
.epbf-kracher .uncode_text_column p { color: var(--epbf-creme); }

/* Raster mit breiten und normalen Kacheln. Die stärksten Rabatte (je Marke einer) werden breit; start.js
   setzt ist-gross und die Reihenfolge so, dass jede Reihe aufgeht und die breiten Karten links/rechts wechseln.
   Spalten: 5 / 4 / 2. */
.epbf-kracher .epsc-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	grid-auto-flow: row dense;
	gap: 16px !important;
}
@media (max-width: 1399px) { .epbf-kracher .epsc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 959px) { .epbf-kracher .epsc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } }

.epbf-kracher .epsc-product {
	border-radius: 10px;
	box-shadow: 0 0 0 1px rgba(201, 162, 77, 0.22);
	transition: transform 300ms var(--epbf-ease), box-shadow 300ms ease;
}
/* Große Kracher = breite Querkarte über 2 Spalten: Bild links, Name und Preis groß rechts */
.epbf-kracher .epsc-product.ist-gross {
	grid-column: span 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
}
.epbf-kracher .epsc-product.ist-gross .epsc-product-image { aspect-ratio: auto; height: 100%; min-height: 0; max-height: none; border-radius: 10px 0 0 10px; }
.epbf-kracher .epsc-product.ist-gross .epsc-product-image img { width: 100%; height: 100%; max-height: none; object-fit: contain; padding: 8%; }
.epbf-kracher .epsc-product.ist-gross .epsc-product-info { display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 2vw, 36px); }
.epbf-kracher .epsc-product.ist-gross .epsc-product-footer { margin-top: 18px; }
.epbf-kracher .epsc-product.ist-gross .epsc-product-title { font-size: clamp(20px, 1.6vw, 30px) !important; line-height: 1.2 !important; font-weight: 600; }
.epbf-kracher .epsc-product.ist-gross .epsc-price-wrap,
.epbf-kracher .epsc-product.ist-gross .epsc-price-wrap .amount { font-size: clamp(22px, 2vw, 36px) !important; }
.epbf-kracher .epsc-product.ist-gross .epsc-discount-badge { font-size: clamp(16px, 1.3vw, 24px); padding: 0.35em 0.6em; }
@media (max-width: 959px) {
	.epbf-kracher .epsc-product.ist-gross { grid-template-columns: 44% 56%; }
	.epbf-kracher .epsc-product.ist-gross .epsc-product-info { padding: 14px; }
}
@media (hover: hover) and (pointer: fine) {
	.epbf-kracher .epsc-product:hover {
		transform: translateY(-4px);
		box-shadow: 0 0 0 2px var(--epbf-gold), 0 22px 44px -24px rgba(0, 0, 0, 0.9);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.epbf-kracher.ist-bereit .epsc-product {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 700ms var(--epbf-ease), transform 700ms var(--epbf-ease), box-shadow 300ms ease;
		transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0ms;
	}
	.epbf-kracher.ist-bereit .epsc-product.ist-da { opacity: 1; transform: none; }
	.epbf-kracher.ist-bereit .epsc-product.ist-da:hover { transform: translateY(-4px); }
}

/* ---------- 15-%-Band: Goldstaub + Zähler ---------- */
.epbf-band { position: relative; overflow: hidden; }
.epbf-staub { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.epbf-band > *:not(.epbf-staub) { position: relative; z-index: 1; }
.epbf-zahl { font-variant-numeric: tabular-nums; }

/* Hero-Text nicht ins Bild laufen lassen */
.epbf-hero .uncode_text_column p { max-width: 34em; }
/* Lesbarkeit über hellen Lichtpunkten im Video (Schatten statt Verlauf) */
.epbf-hero .uncode_text_column:not(.epbf-kicker) p, .epbf-hero .epbf-monat-kopf { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 18px rgba(0, 0, 0, 0.85); }

/* Header-Bild: rechts ausgerichtet und nach Breite skaliert, damit die Maschinen
   immer in der rechten Hälfte bleiben und nicht unter die Überschrift laufen. Die Bildränder links, oben und unten
   sind in der Bilddatei weich auf #050505 ausgeblendet (= Hintergrund), deshalb ist keine Kante sichtbar. */
@media (min-width: 960px) {
	.epbf-hero-video {
		background-color: #050505;
		background-repeat: no-repeat;
		background-position: right 2% center;
		background-size: 92% auto;
	}
}
@media (min-width: 960px) and (min-aspect-ratio: 5/2) {
	.epbf-hero-video { background-size: auto 100%; }
}