/**
 * RD Hero Slider
 * Custom Properties kommen aus den Einstellungen (siehe rdhs_inline_css()).
 */

.rdhs {
	--rdhs-from: #75B94E;
	--rdhs-to: #00463E;
	--rdhs-text: #ffffff;
	--rdhs-btn-bg: #75B94E;
	--rdhs-btn-color: #111111;
	--rdhs-btn-hover-bg: #ffffff;
	--rdhs-btn-hover-color: #111111;
	--rdhs-h: 720px;
	--rdhs-h-min: 420px;
	/* Aus den ARVAG-Originalbildern gemessen: oben 36 %, Knick nach innen
	   auf 27 % bei halber Höhe, unten 44 %. */
	--rdhs-panel: 36%;
	--rdhs-peak: 27%;
	--rdhs-peak-at: 50%;
	--rdhs-foot: 44%;
	/* Verschiebt die komplette Form nach rechts, ohne die Prozente zu ändern. */
	--rdhs-shift: 10px;
	--rdhs-speed: 900ms;
	--rdhs-text-left: 8%;

	/* Framer-Gefühl: träge anlaufen, kräftig durchziehen, weich auslaufen. */
	--rdhs-ease: cubic-bezier(0.76, 0, 0.24, 1);

	position: relative;
	width: 100%;
	/*
	 * Höhe wächst mit der Bildschirmbreite statt fix zu bleiben: 50vw
	 * entspricht ungefähr dem Seitenverhältnis der Fotos (2200 × 1040).
	 * Bei 1440 px Fenster ergibt das genau die eingestellten --rdhs-h,
	 * darunter wird der Header proportional flacher – nach unten begrenzt
	 * durch --rdhs-h-min.
	 */
	height: max(var(--rdhs-h-min), min(var(--rdhs-h), 50vw));
	overflow: hidden;
	background: var(--rdhs-to);
	isolation: isolate;
	/* Ziehbar – Maus, Finger und Stift. */
	cursor: grab;
	touch-action: pan-y;
}

.rdhs.is-grabbing {
	cursor: grabbing;
	user-select: none;
}

/* Beim Ziehen darf das Bild nicht als Datei mitgehen. */
.rdhs-slide__img {
	-webkit-user-drag: none;
	user-select: none;
}

/* ------------------------------------------------------------- Bildebene */

.rdhs-stage {
	position: absolute;
	inset: 0;
}

.rdhs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
}

.rdhs-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/*
 * Kein Zoom auf dem Bild: Die ARVAG-Fotos haben die grüne Form bereits
 * eingebrannt. Die Form des Plugins liegt deckungsgleich darüber – sobald
 * das Bild skaliert, wandert die eingebrannte Kante darunter hervor.
 * Mit freigestellten Fotos (ohne Form) kann hier wieder eine Kamerafahrt rein.
 */
.rdhs-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.rdhs-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ---------------------------------------------------------------- Form */

.rdhs-shape {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--rdhs-from) 0%, var(--rdhs-to) 78%);
	clip-path: polygon(
		0 0,
		calc(var(--rdhs-panel) + var(--rdhs-shift)) 0,
		calc(var(--rdhs-peak) + var(--rdhs-shift)) var(--rdhs-peak-at),
		calc(var(--rdhs-foot) + var(--rdhs-shift)) 100%,
		0 100%
	);
	transition: clip-path var(--rdhs-speed) var(--rdhs-ease);
	will-change: clip-path;
}

/*
 * Übergang: Die Form fährt nach rechts über die ganze Fläche, darunter wird
 * das Bild getauscht, danach zieht sie sich wieder in ihre Ruhelage zurück.
 * Die Schräge bleibt dabei erhalten und läuft sichtbar durch.
 */
.rdhs.is-sweeping .rdhs-shape {
	clip-path: polygon(
		0 0,
		100% 0,
		100% var(--rdhs-peak-at),
		100% 100%,
		0 100%
	);
}

/* ---------------------------------------------------------------- Texte */

.rdhs-texts {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rdhs-text {
	position: absolute;
	left: var(--rdhs-text-left);
	top: 0;
	bottom: 0;
	/* Rechte Kante der Textspalte = die Ecke des Knicks, damit die weiße
	   Linie exakt dort andockt. Versatz der Form wird mitgerechnet. */
	width: calc(var(--rdhs-peak) + var(--rdhs-shift) - var(--rdhs-text-left));
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: clamp(32px, 6vh, 76px) 0;
	box-sizing: border-box;
	color: var(--rdhs-text);
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition:
		opacity 420ms linear,
		transform 620ms var(--rdhs-ease),
		visibility 0s linear 420ms;
}

.rdhs-text.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 520ms linear 120ms,
		transform 760ms var(--rdhs-ease) 120ms,
		visibility 0s linear 0s;
	pointer-events: auto;
}

/*
 * Kein automatischer Silbentrenner: Sonst bricht „Objektmanagement" in drei
 * Zeilen. Der Umbruch gehört in den Text selbst (weiches Trennzeichen).
 *
 * Doppelte Klasse im Selektor mit Absicht: YOOtheme färbt jede h2 grau
 * (.tm-page h2 o. ä.). Ohne die höhere Spezifität gewinnt das Theme und die
 * Überschrift wird nicht weiß.
 */
.rdhs .rdhs-text .rdhs-text__title {
	color: inherit;
	font-family: inherit;
}

.rdhs .rdhs-text__title {
	margin: 0;
	font-size: clamp(1.6rem, 2.5vw, 2.6rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.01em;
	hyphens: manual;
	/* Sicherheitsnetz für lange Komposita ohne gesetzte Trennstelle. */
	overflow-wrap: break-word;
}

/*
 * Liegt auf der Höhe des Knicks (= halbe Höhe) und läuft bis genau an dessen
 * Ecke. Deshalb absolut positioniert und an --rdhs-peak-at gekoppelt: Verschiebt
 * man den Knick in den Einstellungen, wandert die Linie mit.
 */
.rdhs-text__rule {
	position: absolute;
	left: 0;
	top: var(--rdhs-peak-at);
	display: block;
	width: 100%;
	height: 1px;
	margin: 0;
	background: currentColor;
	opacity: 0.85;
	transform-origin: left center;
	transform: translateY(-50%) scaleX(0);
	transition: transform 700ms var(--rdhs-ease) 260ms;
}

.rdhs-text.is-active .rdhs-text__rule {
	transform: translateY(-50%) scaleX(1);
}

/* Schiebt Fließtext und Link gemeinsam an den unteren Rand. */
.rdhs .rdhs-text__body {
	margin: auto 0 0;
	color: inherit;
	font-family: inherit;
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	line-height: 1.5;
}

/*
 * Button: grüner Block, schwarze Schrift, Pfeil vor dem Text.
 * Beim Überfahren fährt die Fläche von links nach rechts herein –
 * dasselbe Prinzip wie der CTA auf der CFW-/TopFuge-Seite.
 */
.rdhs-text__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	align-self: flex-start;
	margin-top: 26px;
	padding: 16px 30px;
	overflow: hidden;
	background: var(--rdhs-btn-bg);
	color: var(--rdhs-btn-color);
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	transition: color 350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rdhs-text__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--rdhs-btn-hover-bg);
	transform: translateX(-101%);
	transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rdhs-text__link:hover::before,
.rdhs-text__link:focus-visible::before {
	transform: translateX(0);
}

.rdhs-text__link:hover,
.rdhs-text__link:focus-visible {
	color: var(--rdhs-btn-hover-color);
}

/* Pfeil und Beschriftung bleiben über der einfahrenden Fläche. */
.rdhs-text__link > * {
	position: relative;
	z-index: 1;
}

.rdhs-text__link:focus-visible {
	outline: 2px solid var(--rdhs-btn-bg);
	outline-offset: 3px;
}

.rdhs-text__arrow {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 260ms var(--rdhs-ease);
}

.rdhs-text__link:hover .rdhs-text__arrow {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------- Pfeile */

.rdhs-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(44px, 3.4vw, 64px);
	height: clamp(44px, 3.4vw, 64px);
	margin: 0;
	padding: 0;
	border: 0;
	background: #ffffff;
	color: #111111;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background 220ms linear, color 220ms linear;
	-webkit-appearance: none;
	appearance: none;
}

.rdhs-arrow--prev { left: 0; }
.rdhs-arrow--next { right: 0; }

/*
 * Auf Geräten mit Maus erscheinen die Pfeile erst beim Überfahren des Sliders
 * und schieben sich dabei leicht herein. Touch-Geräte kennen kein Hover –
 * dort bleiben sie dauerhaft sichtbar.
 */
@media (hover: hover) {
	.rdhs-arrow {
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 260ms linear,
			transform 380ms var(--rdhs-ease),
			visibility 0s linear 260ms,
			background 220ms linear,
			color 220ms linear;
	}

	.rdhs-arrow--prev { transform: translate(-14px, -50%); }
	.rdhs-arrow--next { transform: translate(14px, -50%); }

	.rdhs:hover .rdhs-arrow,
	.rdhs-arrow:focus-visible {
		opacity: 1;
		visibility: visible;
		transform: translate(0, -50%);
		transition-delay: 0s;
	}
}

.rdhs-arrow:hover {
	background: var(--rdhs-from);
	color: #ffffff;
}

.rdhs-arrow:focus-visible {
	outline: 2px solid var(--rdhs-from);
	outline-offset: 3px;
}

.rdhs-arrow svg {
	width: 46%;
	height: 46%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

/* ---------------------------------------------------------------- Punkte */

.rdhs-dots {
	position: absolute;
	left: 50%;
	bottom: clamp(16px, 3vh, 30px);
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 2;
}

.rdhs-dot {
	position: relative;
	width: 26px;
	height: 14px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.rdhs-dot::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background: #ffffff;
	opacity: 0.45;
	transform: translateY(-50%);
	transition: opacity 260ms linear, transform 260ms var(--rdhs-ease);
}

.rdhs-dot:hover::after {
	opacity: 0.8;
}

.rdhs-dot.is-active::after {
	opacity: 1;
	transform: translateY(-50%) scaleY(2);
}

.rdhs-dot:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* ------------------------------------------------------------ Hilfsmittel */

.rdhs .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------ Responsive */

/*
 * Schmale Schirme: Foto oben, Form unten – die Form ist um 90° gedreht,
 * der Knick zeigt dadurch nach unten statt nach links. Die Werte entsprechen
 * der gedrehten Desktop-Geometrie, nur mit mehr Höhe für den Text.
 */
@media (max-width: 900px) {
	.rdhs {
		--rdhs-m-left: 46%;   /* Oberkante der Form am linken Rand */
		--rdhs-m-notch: 56%;  /* Knick in der Mitte – zeigt nach unten */
		--rdhs-m-right: 39%;  /* Oberkante am rechten Rand */

		height: max(var(--rdhs-h-min), 78vh);
	}

	.rdhs-shape {
		clip-path: polygon(
			0 100%,
			0 var(--rdhs-m-left),
			50% var(--rdhs-m-notch),
			100% var(--rdhs-m-right),
			100% 100%
		);
		/* Verlauf folgt der gedrehten Form: hell oben links, dunkel unten rechts. */
		background: linear-gradient(150deg, var(--rdhs-from) 0%, var(--rdhs-to) 82%);
	}

	/* Wischer: die Kante fährt nach oben und deckt das Bild zu. */
	.rdhs.is-sweeping .rdhs-shape {
		clip-path: polygon(0 100%, 0 0, 50% 0, 100% 0, 100% 100%);
	}

	/* Text sitzt unten in der Form, gestapelt. */
	.rdhs-text {
		left: 7%;
		right: 7%;
		top: auto;
		bottom: 0;
		width: auto;
		justify-content: flex-end;
		padding: 0 0 clamp(52px, 8vh, 76px);
	}

	.rdhs-text__title {
		font-size: clamp(1.7rem, 7vw, 2.4rem);
	}

	/* Linie läuft hier im Fluss mit, nicht mehr an der Ecke angedockt. */
	.rdhs-text__rule {
		position: static;
		width: 100%;
		max-width: 220px;
		margin: 16px 0 18px;
		transform: scaleX(0);
	}

	.rdhs-text.is-active .rdhs-text__rule {
		transform: scaleX(1);
	}

	.rdhs-text__body {
		margin: 0;
	}

	.rdhs-text__link {
		margin-top: 20px;
		padding: 14px 24px;
	}

	/* Pfeile über das Foto, damit sie nicht im Text stehen. */
	.rdhs-arrow {
		top: calc(var(--rdhs-m-right) / 2);
	}

	.rdhs-dots {
		bottom: clamp(18px, 3vh, 26px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rdhs-shape,
	.rdhs-slide__img,
	.rdhs-text,
	.rdhs-text__rule,
	.rdhs-dot::after {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}