.hero-slider {
	position: relative;
	height: 100vh;
	min-height: 560px;
	overflow: hidden;
	background-color: var(--black);
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Kein Fade: der Wechsel selbst ist der Glitch (siehe ::before unten). */
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* Wechsel-Glitch: dieselbe Animation wie bei den Artikel-/Kartenbildern
   (@keyframes he-glitch-anim-2 in base.css), hier einmalig statt als
   Endlosschleife beim Hover. Die Kopie des Slide-Bildes kommt über
   background-image: inherit vom Inline-Style des Slides. */
.hero-slide.is-active::before {
	content: "";
	position: absolute;
	inset: 0;
	/* z-index 0 statt 1: das Pseudo-Element steht damit im DOM vor dem Overlay
	   und wird von dessen Verlauf mit abgedunkelt – sonst blitzen die
	   geglitchten Streifen ungedimmt hell auf. */
	z-index: 0;
	pointer-events: none;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Ausgangszustand komplett weggeclippt, damit vor und nach dem Wechsel
	   nichts davon zu sehen ist. */
	-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	-webkit-animation: he-glitch-anim-2 1.4s linear 1;
	animation: he-glitch-anim-2 1.4s linear 1;
}

/* Wer Bewegung reduziert, bekommt den ruhigen Übergang von früher zurück. */
@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: opacity 0.8s ease; }
	.hero-slide.is-active::before { animation: none; display: none; }
}

.hero-slide--noimg {
	background-color: var(--dark, #333);
}

.hero-slide__overlay {
	position: absolute;
	inset: 0;
	/* Unten volles Schwarz (Opacity 1), damit der Slider nahtlos in den schwarzen
	   Blog-Bereich darunter ausläuft statt einen sichtbaren Absatz zu lassen. */
	background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 15%, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0.05) 72%);
}

.hero-slide__content {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	/* Mehr Breite nach rechts: die Headline brach vorher unnötig früh um,
	   obwohl rechts daneben viel Fläche frei war. */
	max-width: 62rem;
	/* Bottom padding clears the nav row (arrows 46px tall at bottom 6.5rem)
	   plus a 1.5rem gap between meta and the bars. */
	padding: 2rem 1.5rem calc(6.5rem + 46px + 1.5rem) 6.5rem;
	color: var(--white);
}

.hero-slide__cats {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	color: var(--yellow);
	margin-bottom: 0.5rem;
}

.hero-slide__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	/* Fettere Schnitt-Familie wie bei den Artikel-Headlines – die Schrift hat je
	   Gewicht eine eigene Familie, font-weight allein reicht nicht. */
	font-family: 'blender_probold';
	font-weight: 700;
	/* Abstand zum rechten Rand, damit die Zeile nicht am Bildrand klebt. */
	padding-right: 3rem;
}

.hero-slide__title a {
	color: var(--white);
	text-decoration: none;
}

.hero-slide__meta {
	font-size: 0.9rem;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.hero-slider__arrow {
	position: absolute;
	/* Arrows are the lowest element of the nav row; their bottom edge keeps
	   the same 6.5rem inset as the left/right sides. */
	bottom: 6.5rem;
	z-index: 3;
	width: 46px;
	height: 46px;
	border: none;
	clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
	background: var(--yellow);
	color: var(--black);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Nur auf der Startseite: Pfeile und Fortschrittsbalken fahren beim Aufbau von
   unten herein. "backwards" sorgt dafür, dass sie schon vor dem Start der
   Verzögerung ausgeblendet sind statt kurz an ihrer Endposition aufzublitzen. */
body.home .hero-slider__arrow,
body.home .hero-slider__bars {
	animation: he-slide-in-bottom 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.35s backwards;
}
@keyframes he-slide-in-bottom {
	from { transform: translateY(60px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	body.home .hero-slider__arrow,
	body.home .hero-slider__bars { animation: none; }
}

/* Beim Hover einfach etwas anheben (weicher Schatten darunter betont das Anheben). */
.hero-slider__arrow:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.hero-slider__arrow-icon {
	display: inline-block;
}

.hero-slider__arrow--prev {
	right: calc(6.5rem + 46px + 0.5rem);
	/* Mirrored corner cut: top-left instead of bottom-right */
	clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
}
.hero-slider__arrow--next { right: 6.5rem; }

.hero-slider__bars {
	position: absolute;
	left: 6.5rem;
	/* Vertically centered on the arrows (46px tall, bottom at 6.5rem):
	   arrow center = 6.5rem + 23px, bar is 10px tall incl. borders. */
	bottom: calc(6.5rem + 18px);
	z-index: 3;
	display: flex;
	gap: 0.4rem;
	width: 14rem;
	max-width: calc(100% - 6.5rem - 1.5rem);
}

.hero-slider__bar {
	position: relative;
	flex: 1 1 0;
	height: 8px;
	padding: 0;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	cursor: pointer;
	overflow: hidden;
	/* 45°, damit die Schräge exakt der der angeschnittenen Bildecken entspricht
	   (dort ist der Versatz so groß wie die Ecke tief ist). Vorher 15°. */
	transform: skewX(-45deg);
}

.hero-slider__bar-fill {
	position: absolute;
	inset: -1px;
	transform: scaleX(0);
	transform-origin: left;
	background: var(--yellow);
	box-shadow: 0 0 8px var(--yellow);
}

.hero-slider__bar.is-filled .hero-slider__bar-fill {
	transform: scaleX(1);
}

.hero-slider__bar.is-active .hero-slider__bar-fill {
	animation: hero-bar-fill 6s linear forwards;
}

@keyframes hero-bar-fill {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@media (max-width: 767.9px) {
	.hero-slider { height: 85vh; min-height: 460px; }
	.hero-slider__arrow { display: none; }
	/* Mobil: Headline über die volle Breite (gleiches Seiten-Padding links wie
	   rechts) und weiter unten – sie muss nur die tief sitzende Balkenreihe
	   frei lassen. */
	.hero-slide__content { max-width: none; padding: 1.5rem 1.25rem calc(2rem + 10px + 1rem) 1.25rem; }
	/* Schrift jeweils ~2 Stufen größer (nur mobil). */
	.hero-slide__cats  { font-size: 1.2rem; }
	.hero-slide__title { padding-right: 0; font-size: 2.5rem; }
	.hero-slide__meta  { font-size: 1.25rem; }
	.hero-slider__bars { left: 1.25rem; bottom: 2rem; width: 10rem; max-width: calc(100% - 2.5rem); }
}