/*
 * APC Hero – eigenständige Fassung des Hero aus dem Theme APC Neo.
 * Läuft mit jedem Theme. Werte entsprechen apc-neo/assets/css/tokens.css.
 */

.neo-hero {
	--apc-accent:         #B8106E;
	--apc-accent-hover:   #9C0D5D;
	--apc-accent-on-dark: #F04C9B;
	--apc-ink:            #1D1D1F;
	--apc-ink-2:          #6E6E73;
	--apc-white:          #FFFFFF;
	--apc-black:          #000000;
	--apc-on-dark:        #F5F5F7;
	--apc-on-dark-2:      #A1A1A6;
	--apc-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--apc-size-hero:  clamp(44px, 7.2vw, 88px);
	--apc-size-lead:  clamp(19px, 1.8vw, 21px);
	--apc-size-small: 14px;
	--apc-wide: 1120px;
	--apc-radius-pill: 980px;
	--apc-radius-media: 24px;
	--apc-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
	box-sizing: border-box;
	font-family: var(--apc-font) !important;
	-webkit-font-smoothing: antialiased;
}
.neo-hero *, .neo-hero *::before, .neo-hero *::after { box-sizing: border-box; }
.neo-hero :is(h1, h2, p, a, span) { font-family: var(--apc-font) !important; text-transform: none !important; }

/* Button und Textlink (im Theme in base.css) */
body .neo-hero .neo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 0 !important;
	border-radius: var(--apc-radius-pill) !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.18 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color 0.2s var(--apc-ease), filter 0.2s var(--apc-ease), transform 0.2s var(--apc-ease);
}
body .neo-hero .neo-btn:active { transform: scale(0.98); }
/* Zweiter Button: umrandet, ordnet sich dem Hauptbutton unter */
body .neo-hero .neo-btn.neo-btn--secondary,
body .neo-hero .neo-btn.neo-btn--secondary:hover {
	background: transparent !important;
	color: var(--hero-ink) !important;
	box-shadow: inset 0 0 0 1.5px var(--hero-ink) !important;
	filter: none;
}
body .neo-hero .neo-btn.neo-btn--secondary:hover { background: rgba(255, 255, 255, 0.12) !important; }
body .neo-hero--light .neo-btn.neo-btn--secondary:hover { background: rgba(0, 0, 0, 0.05) !important; }

body .neo-hero .neo-link { color: var(--hero-accent) !important; opacity: 1 !important; text-decoration: none !important; }
body .neo-hero .neo-link:hover { color: var(--hero-accent) !important; }
body .neo-hero .neo-btn, body .neo-hero .neo-btn:hover { opacity: 1 !important; }
body .neo-hero .neo-link::after {
	content: "\203A";
	display: inline-block;
	margin-left: 0.3em;
	transition: transform 0.2s var(--apc-ease);
}
body .neo-hero .neo-link:hover { text-decoration: underline !important; text-underline-offset: 3px; }
body .neo-hero .neo-link:hover::after { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
	.neo-hero, .neo-hero * { animation: none !important; transition: none !important; }
}

/*
 * APC Neo – Hero [apc_hero]
 * Ersetzt den Slider: ein Bild in voller Breite, eine Botschaft, ein Button, ein Textlink.
 */

body .neo-hero {
	--hero-bg: var(--apc-black);
	--hero-ink: var(--apc-on-dark);
	--hero-ink-2: var(--apc-on-dark-2);
	--hero-accent: var(--apc-accent-on-dark);
	--hero-btn-ink: var(--apc-black);
	--hero-height: 600px;
	--hero-shade: 0.65;
	--hero-focus: 70% 30%;
	--hero-focus-m: 70% 30%;

	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: clamp(72px, 11vw, 148px) 22px clamp(64px, 9vw, 120px);
	background: var(--hero-bg);
	color: var(--hero-ink);
	text-align: center;
	overflow: hidden;
}

body .neo-hero--light {
	--hero-bg: var(--apc-white);
	--hero-ink: var(--apc-ink);
	--hero-ink-2: var(--apc-ink-2);
	--hero-accent: var(--apc-accent);
	--hero-btn-ink: var(--apc-white);
}

/* ---------- Text ---------- */

body .neo-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 980px;
	animation: neo-rise 0.9s var(--apc-ease) both;
}

body .neo-hero .neo-hero__eyebrow {
	margin: 0 !important;
	color: var(--hero-accent) !important;
	font-size: clamp(17px, 1.6vw, 21px) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
}

body .neo-hero .neo-hero__title {
	margin: 0 !important;
	color: var(--hero-ink) !important;
	font-size: var(--apc-size-hero) !important;
	font-weight: 700 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.035em !important;
	text-wrap: balance;
}

body .neo-hero .neo-hero__text {
	max-width: 640px;
	margin: 2px 0 0 !important;
	color: var(--hero-ink-2) !important;
	font-size: var(--apc-size-lead) !important;
	line-height: 1.42 !important;
	letter-spacing: -0.005em;
}

body .neo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 16px;
	margin-top: 10px;
}

body .neo-hero .neo-btn {
	min-height: 50px;
	padding: 14px 28px !important;
	background: var(--hero-accent) !important;
	color: var(--hero-btn-ink) !important;
	font-size: 17px !important;
}
body .neo-hero .neo-btn:hover {
	background: var(--hero-accent) !important;
	color: var(--hero-btn-ink) !important;
	filter: brightness(1.08);
}
body .neo-hero--light .neo-btn:hover {
	background: var(--apc-accent-hover) !important;
	filter: none;
}

body .neo-hero .neo-link {
	color: var(--hero-accent);
	font-size: 17px;
}

body .neo-hero .neo-hero__proof {
	margin: 6px 0 0 !important;
	color: var(--hero-ink-2) !important;
	font-size: var(--apc-size-small) !important;
	letter-spacing: 0;
}

/* ---------- Mit Bild: Bild füllt die Fläche, Text links darauf ---------- */

body .neo-hero--image {
	--hero-ink-2: rgba(245, 245, 247, 0.82);
	min-height: var(--hero-height);
	padding: 64px max(22px, calc((100% - var(--apc-wide)) / 2));
	align-items: stretch;
}

body .neo-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	animation: neo-fade 1.2s var(--apc-ease) both;
}
body .neo-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(0, 0, 0, var(--hero-shade)) 0%,
		rgba(0, 0, 0, calc(var(--hero-shade) * 0.75)) 35%,
		rgba(0, 0, 0, 0) 70%);
}
body .neo-hero--center .neo-hero__media::after {
	background: rgba(0, 0, 0, calc(var(--hero-shade) * 0.8));
}

body .neo-hero__image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: var(--hero-focus);
	border-radius: 0 !important;
}
body .neo-hero__image--mobile { display: none; }

body .neo-hero--image.neo-hero--left { text-align: left; }
body .neo-hero--image.neo-hero--left .neo-hero__inner {
	align-items: flex-start;
	justify-content: center;
	max-width: 620px;
	margin: 0;
}
body .neo-hero--image.neo-hero--left .neo-hero__actions { justify-content: flex-start; }
body .neo-hero--image .neo-hero__title { font-size: clamp(40px, 5vw, 64px) !important; }
body .neo-hero--image .neo-hero__text { max-width: 540px; }
body .neo-hero--image .neo-hero__inner { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.25); }
body .neo-hero--image .neo-btn { text-shadow: none; }

/* Handy: Bild oben, Text darunter auf Schwarz. Gut lesbar, Gesicht bleibt frei. */
@media (max-width: 767px) {
	body .neo-hero--image {
		min-height: 0;
		padding: 0 0 56px;
		text-align: center !important;
	}
	body .neo-hero--image .neo-hero__media {
		position: relative;
		inset: auto;
		z-index: 0;
		width: 100%;
		aspect-ratio: 4 / 3;
	}
	body .neo-hero--image .neo-hero__media::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, var(--apc-black) 100%);
	}
	body .neo-hero__image { object-position: var(--hero-focus-m); }
	body .neo-hero__image--mobile { display: block; }
	body .neo-hero__image--desktop { display: none; }
	body .neo-hero--image .neo-hero__inner,
	body .neo-hero--image.neo-hero--left .neo-hero__inner {
		align-items: center;
		max-width: none;
		margin-top: -8px;
		padding: 0 22px;
		text-shadow: none;
	}
	body .neo-hero--image.neo-hero--left .neo-hero__actions { justify-content: center; }
	body .neo-hero--image .neo-hero__title { font-size: clamp(36px, 10vw, 44px) !important; }
	body .neo-hero .neo-hero__text { font-size: 17px !important; }
	body .neo-hero__actions { flex-direction: column; gap: 14px; width: 100%; }
	body .neo-hero .neo-btn { width: 100%; max-width: 340px; }
}

/* Nur Bewegung, keine Unsichtbarkeit: So zählt Google den Hero sofort als geladen (LCP). */
@keyframes neo-rise {
	from { transform: translateY(16px); }
	to   { transform: none; }
}
@keyframes neo-fade {
	from { transform: scale(1.04); }
	to   { transform: none; }
}

/* Elementor-Container um den Shortcode ohne Innenabstand, damit der Hero randlos ist */
body .elementor-widget-shortcode:has(.neo-hero),
body .elementor-widget-shortcode:has(.neo-hero) > .elementor-widget-container,
body .elementor-widget-shortcode:has(.neo-hero) .elementor-shortcode {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}
body .e-con:has(> .elementor-widget-shortcode .neo-hero),
body .e-con:has(> .e-con-inner > .elementor-widget-shortcode .neo-hero),
body .e-con:has(> .elementor-widget-shortcode .neo-hero) > .e-con-inner,
body .e-con:has(> .e-con-inner > .elementor-widget-shortcode .neo-hero) > .e-con-inner {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	--content-width: 100%;
	max-width: none !important;
	padding: 0 !important;
}

/* Etwas Luft zwischen Hero und dem nächsten Abschnitt (altes Theme) */
body .elementor-section:has(.neo-hero),
body .e-con:has(> .elementor-widget-shortcode .neo-hero),
body .e-con:has(> .e-con-inner > .elementor-widget-shortcode .neo-hero) { margin-bottom: 40px !important; }