/* ============================================================
 * HD Hero — hyperdigital Hero-Widget
 * Alles ueber CSS-Variablen steuerbar (vom Widget gesetzt), KEIN !important,
 * KEINE per-Instanz Inline-Regeln. Responsive rein ueber clamp() + svh.
 * ============================================================ */

.hd-hero {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	overflow: hidden;
	isolation: isolate;            /* eigener Stacking-Context -> saubere z-index-Ebenen */
	color: #fff;
	box-sizing: border-box;
	/* Brand-Font explizit (offizielles .rajdhani()-Mixin), nicht nur geerbt */
	font-family: 'Rajdhani', Helvetica, Arial, sans-serif;
}

/* Vertikale Ausrichtung des Inhalts (wo der Text beginnt) */
.hd-hero--valign-top    { align-items: flex-start; }
.hd-hero--valign-center { align-items: center; }
.hd-hero--valign-bottom { align-items: flex-end; }

/* Hoehe: svh-Fix gegen die Mobile-Adressleiste (vh springt, svh nicht).
   vh als Fallback fuer sehr alte Browser, svh gewinnt danach. */
.hd-hero--h-full   { min-height: 100vh; min-height: 100svh; }
.hd-hero--h-large  { min-height: 80vh;  min-height: 80svh; }
.hd-hero--h-medium { min-height: 60vh;  min-height: 60svh; }
.hd-hero--h-auto   { min-height: 0; }

/* --- Ebenen: Medium (-2), Overlay (-1), Inhalt (0) --- */
.hd-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* Bild-Optionen aus dem Widget: Helligkeit + Deckkraft */
	filter: brightness(var(--hd-hero-media-brightness, 1));
	opacity: var(--hd-hero-media-opacity, 1);
}
.hd-hero__media img,
.hd-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.hd-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--hd-hero-overlay, transparent);
}

/* --- Inhaltscontainer (boxed, zentriert) --- */
.hd-hero__inner {
	position: relative;
	z-index: 0;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(88px, 11vw, 128px) clamp(20px, 5vw, 64px);
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}
/* Bei "auto"-Hoehe kompaktere vertikale Polsterung */
.hd-hero--h-auto .hd-hero__inner {
	padding-top: clamp(56px, 8vw, 96px);
	padding-bottom: clamp(56px, 8vw, 96px);
}

.hd-hero__content {
	max-width: var(--hd-hero-maxw, 760px);
}

/* Zentrierte Variante */
.hd-hero--align-center .hd-hero__inner { justify-content: center; text-align: center; }
.hd-hero--align-center .hd-hero__content { margin: 0 auto; }
.hd-hero--align-center .hd-hero__cta { margin-left: auto; margin-right: auto; }

/* --- Typografie (Rajdhani erbt aus dem Theme) --- */
.hd-hero__eyebrow {
	margin: 0 0 clamp(12px, 1.6vw, 18px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	/* fluid: min = 85% der eingestellten Obergrenze */
	font-size: clamp(calc(var(--hd-hero-eyebrow-size, 14px) * 0.85), 1.3vw, var(--hd-hero-eyebrow-size, 14px));
	color: var(--hd-hero-eyebrow, #0796a6);
}

.hd-hero__heading {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.03;
	/* fluid: min = ~44% der Obergrenze -> skaliert proportional runter, nie zu gross auf Mobile */
	font-size: clamp(calc(var(--hd-hero-h-size, 70px) * 0.44), 6vw, var(--hd-hero-h-size, 70px));
	color: var(--hd-hero-h-color, #fff);
	text-wrap: balance;
}

/* Woerter trennen/umbrechen: Standard AUS (nie trennen), per Widget-Schalter AN */
.hd-hero--nobreak .hd-hero__heading,
.hd-hero--nobreak .hd-hero__sub {
	-webkit-hyphens: none;
	hyphens: none;
	word-break: normal;
	overflow-wrap: normal;
}
.hd-hero--breakable .hd-hero__heading,
.hd-hero--breakable .hd-hero__sub {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

.hd-hero__sub {
	margin: clamp(16px, 2.4vw, 22px) 0 0;   /* Standard: Unterzeile UNTER der Ueberschrift */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 1.3;
	/* fluid: min = 80% der Obergrenze */
	font-size: clamp(calc(var(--hd-hero-sub-size, 18px) * 0.8), 2vw, var(--hd-hero-sub-size, 18px));
	color: var(--hd-hero-sub-color, #fff);
}

/* Unterzeile UEBER der Ueberschrift -> Abstand nach unten statt oben */
.hd-hero--sub-above .hd-hero__sub {
	margin: 0 0 clamp(14px, 2vw, 20px);
}

.hd-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(26px, 4vw, 38px);
	padding: 14px 30px;
	border-radius: 6px;
	background: var(--hd-hero-cta-bg, #0796a6);
	color: var(--hd-hero-cta-color, #fff);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
}
.hd-hero__cta:hover { background: #0d5460; transform: translateY(-2px); }
.hd-hero__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* --- Vordergrund-Grafik (Desktop: rechts ODER links) --- */
.hd-hero__content { order: 0; }
.hd-hero__fg {
	flex: 0 0 auto;
	/* im Widget einstellbar; Default % -> fluid, skaliert mit dem Layout (responsive) */
	width: var(--hd-hero-fg-width, 24%);
	max-width: 45%;                          /* harte Obergrenze, damit nie zu breit */
}
.hd-hero__fg img { width: 100%; height: auto; display: block; }

/* Standard = rechts: Grafik ans rechte Ende, Text links */
.hd-hero--fg-right .hd-hero__fg { order: 1; margin-left: auto; }

/* Option = links: Grafik ans linke Ende, Text rechts */
.hd-hero--fg-left .hd-hero__fg { order: 0; }
.hd-hero--fg-left .hd-hero__content { order: 1; margin-left: auto; }

/* Option = oben/unten: Inner wird zur Spalte, Grafik ueber ODER unter dem Text */
.hd-hero--fg-top .hd-hero__inner,
.hd-hero--fg-bottom .hd-hero__inner {
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 44px);
}
.hd-hero--align-center.hd-hero--fg-top .hd-hero__inner,
.hd-hero--align-center.hd-hero--fg-bottom .hd-hero__inner {
	align-items: center;
}
.hd-hero--fg-top .hd-hero__fg { order: 0; margin: 0; max-width: 100%; }
.hd-hero--fg-top .hd-hero__content { order: 1; margin: 0; }
.hd-hero--fg-bottom .hd-hero__content { order: 0; margin: 0; }
.hd-hero--fg-bottom .hd-hero__fg { order: 1; margin: 0; max-width: 100%; }

/* --- Mobile: Grafik NICHT verstecken, sondern unter dem Text, ordentlich gross --- */
@media (max-width: 820px) {
	.hd-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: clamp(28px, 7vw, 44px);
	}
	.hd-hero--align-center .hd-hero__inner { align-items: center; }

	/* Text zuerst, Grafik darunter (egal ob Desktop links/rechts).
	   WICHTIG: gleiche Spezifitaet wie die Desktop-Regeln (.hd-hero--fg-*),
	   damit deren margin-left:auto hier wirklich neutralisiert wird. */
	.hd-hero--fg-left .hd-hero__content,
	.hd-hero--fg-right .hd-hero__content { order: 0; margin-left: 0; }
	.hd-hero--fg-left .hd-hero__fg,
	.hd-hero--fg-right .hd-hero__fg { order: 1; margin-left: 0; margin-right: auto; align-self: flex-start; }

	/* Mobile: fluid + gedeckelt -> nie massiv. ~140px auf typischem Handy,
	   skaliert mit der Screenbreite (38vw), min 96px, max 190px. */
	.hd-hero__fg { width: clamp(96px, 38vw, 190px); max-width: 100%; }

	/* zentrierter Hero -> Grafik ebenfalls mittig (steht spaeter -> gewinnt) */
	.hd-hero--align-center .hd-hero__fg { margin-left: auto; margin-right: auto; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
	.hd-hero__cta { transition: none; }
	.hd-hero__cta:hover { transform: none; }
	.hd-hero__video { display: none; }   /* kein Autoplay-Bewegtbild bei reduce */
}