/* KI-Suche in der Hero-Section (keyvisualnew) – Templates/Extensions/DmAiSearch/HeroSearch.html */
@property --hero-ai-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.hero-ai-search {
	--hero-ai-blue: #0e79c0;
	--hero-ai-light-blue: #80e3ff;
	--hero-ai-cyan: #29e8ff;
	--hero-ai-dark-blue: #0b2f57;
	--hero-ai-height: 72px;
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 760px;
	margin: 0 0 1.75rem;
	color: #fff;
	font-family: "DINPro-Regular", Geneva, Tahoma, sans-serif;
}

/* Hero mit Suche: Text weiter oben beginnen und Überschrift etwas kleiner, damit Suche und der
   Pause-Button des Videos über den überlappenden Karten bleiben */
@media (min-width: 992px) {
	.backendlayout-startpage .pagehead.video .header-text:has(.hero-ai-search) {
		top: 190px;
	}

	.backendlayout-startpage header.pagehead .header-text:has(.hero-ai-search) .pagehead-heading-no-mobile,
	.backendlayout-startpage header.pagehead .container:has(.hero-ai-search) .pagehead-heading-no-mobile {
		font-size: 3.25rem;
		line-height: 4rem;
		margin-bottom: 1.75rem;
	}
}

/* "Mehr erfahren" gehört nicht zur Suche, wirkt unter ihr aber so: ausblenden, solange die Suche im Hero steht */
.backendlayout-startpage header.pagehead .header-text:has(.hero-ai-search) .pagehead-link,
.backendlayout-startpage header.pagehead .container:has(.hero-ai-search) .pagehead-link {
	display: none;
}

/* Mobil überlappen die Karten den Hero um etwa 80px */
@media (max-width: 991px) {
	.backendlayout-startpage header.pagehead.mobile:has(.hero-ai-search),
	.backendlayout-startpage header.pagehead:not(.video):has(.hero-ai-search) {
		padding-bottom: 7rem;
	}
}

.hero-ai-search .hero-ai-search__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Label mit Badge */
.hero-ai-search .hero-ai-search__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 0 0 .875rem;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, .92);
	cursor: pointer;
}

.hero-ai-search .hero-ai-search__badge {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .25rem .75rem .25rem .625rem;
	border: 1px solid rgba(128, 227, 255, .55);
	border-radius: 999px;
	background: rgba(128, 227, 255, .14);
	color: var(--hero-ai-light-blue);
	font-family: "DINPro-Medium", "DINPro-Regular", Geneva, Tahoma, sans-serif;
	font-size: .8125rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hero-ai-search .hero-ai-search__badge-icon {
	animation: hero-ai-twinkle 2.4s ease-in-out infinite;
}

/* Suchfeld: Glas mit umlaufendem Farbverlauf und Leuchten dahinter */
.hero-ai-search .hero-ai-search__box {
	position: relative;
	isolation: isolate;
}

.hero-ai-search .hero-ai-search__field {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: .75rem;
	height: var(--hero-ai-height);
	padding: 0 .5rem 0 1.375rem;
	border-radius: 999px;
	background: rgba(8, 40, 90, .38);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	box-shadow: 0 18px 50px -12px rgba(0, 10, 40, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
	transition: transform .25s ease, box-shadow .25s ease;
}

.hero-ai-search .hero-ai-search__field::before,
.hero-ai-search .hero-ai-search__glow {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: conic-gradient(from var(--hero-ai-angle), var(--hero-ai-light-blue), var(--hero-ai-blue) 25%, var(--hero-ai-cyan) 50%, var(--hero-ai-blue) 75%, var(--hero-ai-light-blue));
	animation: hero-ai-spin 6s linear infinite;
	pointer-events: none;
}

/* Rahmen: nur der 2px-Rand des Verlaufs ist sichtbar */
.hero-ai-search .hero-ai-search__field::before {
	padding: 2px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Leuchten hinter dem Feld */
.hero-ai-search .hero-ai-search__glow {
	z-index: 0;
	filter: blur(22px);
	opacity: .45;
	transition: opacity .25s ease;
}

.hero-ai-search .hero-ai-search__box:hover .hero-ai-search__glow,
.hero-ai-search .hero-ai-search__box:focus-within .hero-ai-search__glow {
	opacity: .8;
}

.hero-ai-search .hero-ai-search__field:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 24px 60px -12px rgba(0, 10, 40, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hero-ai-search .hero-ai-search__sparkle {
	flex: 0 0 auto;
	color: var(--hero-ai-light-blue);
	filter: drop-shadow(0 0 8px rgba(128, 227, 255, .7));
}

.hero-ai-search .hero-ai-search__sparkle-small {
	transform-origin: 19px 5px;
	animation: hero-ai-twinkle 2.4s ease-in-out infinite .8s;
}

.hero-ai-search .hero-ai-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff;
	font-family: inherit;
	font-size: 1.25rem;
	line-height: 1.2;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.hero-ai-search .hero-ai-search__input::placeholder {
	color: rgba(255, 255, 255, .72);
	opacity: 1;
}

.hero-ai-search .hero-ai-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.hero-ai-search .hero-ai-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: calc(var(--hero-ai-height) - 16px);
	margin: 0 !important;
	padding: 0 1.5rem 0 1.75rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, #8ff4ff, var(--hero-ai-cyan));
	box-shadow: 0 8px 22px -6px rgba(41, 232, 255, .6);
	/* Dunkle Schrift: Weiß hätte auf dem hellen Cyan nur 1,5:1 Kontrast */
	color: var(--hero-ai-dark-blue);
	font-family: "DINPro-Medium", "DINPro-Regular", Geneva, Tahoma, sans-serif;
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.hero-ai-search .hero-ai-search__submit svg {
	transition: transform .2s ease;
}

.hero-ai-search .hero-ai-search__submit:hover {
	filter: brightness(1.08);
	box-shadow: 0 12px 28px -6px rgba(41, 232, 255, .8);
}

.hero-ai-search .hero-ai-search__submit:hover svg {
	transform: translateX(3px);
}

.hero-ai-search .hero-ai-search__submit:focus-visible,
.hero-ai-search .hero-ai-search__chip:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Vorschläge */
.hero-ai-search .hero-ai-search__suggestions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
}

.hero-ai-search .hero-ai-search__suggestions-label {
	margin-right: .25rem;
	font-size: .9375rem;
	color: rgba(255, 255, 255, .75);
}

.hero-ai-search .hero-ai-search__chip {
	/* Hält den unsichtbaren Text für Screenreader im Vorschlag und damit im Scrollbereich */
	position: relative;
	margin: 0 !important;
	padding: .4375rem .9375rem;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	font-family: inherit;
	font-size: .9375rem;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.hero-ai-search .hero-ai-search__chip:hover {
	border-color: var(--hero-ai-light-blue);
	background: rgba(128, 227, 255, .2);
	transform: translateY(-1px);
}

@keyframes hero-ai-spin {
	to {
		--hero-ai-angle: 360deg;
	}
}

@keyframes hero-ai-twinkle {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: .55;
		transform: scale(.82);
	}
}

/* Smartphone und Tablet hochkant: kompakter, Vorschläge seitlich scrollbar */
@media (max-width: 767px) {
	.hero-ai-search {
		--hero-ai-height: 60px;
		margin-bottom: 1.5rem;
	}

	.hero-ai-search .hero-ai-search__label {
		font-size: .9375rem;
	}

	.hero-ai-search .hero-ai-search__field {
		gap: .5rem;
		padding-left: 1rem;
	}

	.hero-ai-search .hero-ai-search__sparkle {
		width: 22px;
		height: 22px;
	}

	.hero-ai-search .hero-ai-search__input {
		font-size: 1rem;
	}

	.hero-ai-search .hero-ai-search__submit {
		width: calc(var(--hero-ai-height) - 14px);
		height: calc(var(--hero-ai-height) - 14px);
		padding: 0;
		justify-content: center;
	}

	.hero-ai-search .hero-ai-search__submit-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* Ein Scrollbereich schneidet auch oben und unten ab: Platz für Anheben und Fokusrahmen der Vorschläge,
	   per negativem Margin ausgeglichen */
	.hero-ai-search .hero-ai-search__suggestions {
		flex-wrap: nowrap;
		margin: calc(1rem - 6px) -15px -6px -6px;
		padding: 6px 15px 6px 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hero-ai-search .hero-ai-search__suggestions::-webkit-scrollbar {
		display: none;
	}

	.hero-ai-search .hero-ai-search__suggestions-label {
		display: none;
	}
}

/* Auf Touch-Geräten bleibt :hover nach dem Antippen hängen */
@media (hover: none) {
	.hero-ai-search .hero-ai-search__chip:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-ai-search .hero-ai-search__field::before,
	.hero-ai-search .hero-ai-search__glow,
	.hero-ai-search .hero-ai-search__badge-icon,
	.hero-ai-search .hero-ai-search__sparkle-small {
		animation: none;
	}

	.hero-ai-search .hero-ai-search__field,
	.hero-ai-search .hero-ai-search__submit,
	.hero-ai-search .hero-ai-search__submit svg,
	.hero-ai-search .hero-ai-search__chip {
		transition: none;
	}
}