/**
 * SmartConversionBox — CTA-Karte fuer Hotelangebote
 * BEM: .kw-conversion (Root), .kw-conv__* (Elemente)
 *
 * Button: Via [data-kwl-btn] Shared Component (kwl-shared-components.css)
 * Card:   Via [data-kwl-card] Shared Component (kwl-shared-components.css)
 */

/* === Card (Custom Properties + Layout) === */
.kw-conversion {
	--kwl-conv-card-bg: var(--kwl-bg, #ffffff);
	--kwl-conv-title-color: var(--kwl-text, #1a202c);
	--kwl-conv-desc-color: var(--kwl-text-muted, #64748b);
	--kwl-conv-validity-color: var(--kwl-text-muted, #64748b);
	--kwl-conv-price-bg: var(--kwl-accent, #BD9B5C);
	--kwl-conv-price-color: var(--kwl-primary, #00315d);
	--kwl-conv-price-shadow: var(--kwl-shadow-sm);
	--kwl-conv-price-shadow-glow: var(--kwl-shadow-sm), 0 0 16px 2px rgba(189, 155, 92, 0.18);
	--kwl-conv-transition: 250ms var(--kwl-ease-default);

	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-width: 420px;
}

/* Kein physischer Lift — Shadow-only Hover verhindert Overflow im Elementor-Container */
.kw-conversion[data-kwl-card] {
	--kwl-card-lift: 0;
}

/* === Image === */
.kw-conv__image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	line-height: 0;
}

.kw-conv__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--kwl-conv-transition);
}

/* Gold-Overlay beim Hover (nur Card-Layout) */
.kw-conv__image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent), transparent);
	opacity: 0;
	transition: opacity var(--kwl-conv-transition);
	pointer-events: none;
	z-index: 1;
}

@media (hover: hover) {
	.kw-conversion:hover .kw-conv__image img {
		transform: scale(1.05);
	}

	.kw-conversion:hover .kw-conv__image::after {
		opacity: 0.15;
	}
}

/* === Price Badge (Card + Banner) === */
.kw-conv__price {
	position: absolute;
	bottom: var(--kwl-space-sm, 0.5rem);
	right: var(--kwl-space-sm, 0.5rem);
	padding: 0.3rem 0.75rem;
	border-radius: var(--kwl-radius-full, 9999px);
	background: var(--kwl-conv-price-bg);
	color: var(--kwl-conv-price-color);
	border: 1px solid color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent);
	box-shadow: var(--kwl-conv-price-shadow);
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-relaxed);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.kw-conv__price--pulse {
	animation: kw-conv-price-pulse 4s ease-in-out infinite;
}

@keyframes kw-conv-price-pulse {
	0%, 100% {
		box-shadow: var(--kwl-conv-price-shadow);
	}
	50% {
		box-shadow: var(--kwl-conv-price-shadow-glow);
	}
}

/* === Content === */
.kw-conv__content {
	flex: 1;
	padding: var(--kwl-space-md, 1rem);
	container-type: inline-size;
}

@media (min-width: 481px) {
	.kw-conv__content {
		padding: var(--kwl-space-lg, 1.5rem);
	}
}

/* === §445: Section-Heading (über der Card) === */
.kw-conv__section-heading {
	margin: 0 0 var(--kwl-space-md, 1rem);
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h2, 1.75rem);
	font-weight: var(--kwl-fw-semibold, 600);
	line-height: var(--kwl-lh-heading, 1.2);
	color: var(--kwl-text);
}

/* === Title === */
.kw-conv__title {
	margin: 0 0 var(--kwl-space-sm, 0.5rem);
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h4, 1.25rem);
	line-height: var(--kwl-lh-heading, 1.2);
	color: var(--kwl-conv-title-color);
}

/* Gold-Gradient-Underline (Card + Banner) */
.kw-conv__title::after {
	content: '';
	display: block;
	width: 50%;
	height: 2px;
	margin-top: 0.5rem;
	background: linear-gradient(to right, var(--kwl-accent, #BD9B5C), color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent), transparent);
	border-radius: 1px;
}

/* === Description === */
.kw-conv__desc {
	margin: 0 0 var(--kwl-space-sm, 0.5rem);
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body, 0.9375rem);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-conv-desc-color);
}

/* === Validity === */
.kw-conv__validity {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: var(--kwl-space-xs, 0.25rem);
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	line-height: var(--kwl-lh-relaxed);
	color: var(--kwl-conv-validity-color);
}

.kw-conv__validity > svg {
	width: 14px;
	height: 14px;
}

/* === Footer === */
.kw-conv__footer {
	padding: 0 var(--kwl-space-md, 1rem) var(--kwl-space-md, 1rem);
}

@media (min-width: 481px) {
	.kw-conv__footer {
		padding: 0 var(--kwl-space-lg, 1.5rem) var(--kwl-space-lg, 1.5rem);
	}
}

/* === Button-Arrow (Disruptor) === */
.kw-conv__btn-arrow {
	margin-left: 0.5rem;
	display: inline-block;
	transition: transform var(--kwl-conv-transition);
}

@media (hover: hover) {
	.kw-conv__btn:hover .kw-conv__btn-arrow {
		transform: translateX(4px);
	}
}

/* === Container Query === */
@container (max-width: 250px) {
	.kw-conv__content {
		padding: var(--kwl-space-md, 1rem);
	}

	.kw-conv__footer {
		padding: 0 var(--kwl-space-md, 1rem) var(--kwl-space-md, 1rem);
	}
}

/* ===================================================================
   Banner Layout (.kw-conversion--banner)
   Mobile-First: Vertikal stapeln, ab 769px horizontal
   =================================================================== */
.kw-conversion--banner {
	flex-direction: column;
	max-width: none;
	min-height: auto;
}

.kw-conversion--banner .kw-conv__image {
	flex: none;
	max-width: none;
	aspect-ratio: 21 / 9;
}

.kw-conversion--banner .kw-conv__image img {
	height: 100%;
}

/* Gold-Akzent-Linie am rechten Bildrand */
.kw-conversion--banner .kw-conv__image::after {
	content: '';
	position: absolute;
	right: 0;
	top: 10%;
	height: 80%;
	width: 3px;
	background: linear-gradient(to bottom, transparent, var(--kwl-accent, #BD9B5C), color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent), transparent);
	z-index: 2;
	pointer-events: none;
	border-radius: 2px;
}

/* Gradient-Overlay: Mobile = von unten, Desktop = von rechts */
.kw-conversion--banner .kw-conv__image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--kwl-conv-card-bg) 0%, transparent 60%);
	opacity: var(--kwl-conv-overlay-opacity, 0.6);
	z-index: 1;
	pointer-events: none;
}

.kw-conversion--banner .kw-conv__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--kwl-space-xl, 2rem);
}

.kw-conversion--banner .kw-conv__title {
	font-size: var(--kwl-fsize-h3, 1.5rem);
	font-weight: var(--kwl-fw-bold);
	margin-bottom: var(--kwl-space-md, 1rem);
}

.kw-conversion--banner .kw-conv__desc {
	margin-bottom: var(--kwl-space-md, 1rem);
}

.kw-conversion--banner .kw-conv__footer {
	align-self: stretch;
	padding: 0 var(--kwl-space-lg, 1.5rem) var(--kwl-space-lg, 1.5rem);
}

.kw-conversion--banner .kw-conv__btn {
	max-width: none;
}

.kw-conversion--banner .kw-conv__price {
	bottom: auto;
	top: var(--kwl-space-sm, 0.5rem);
	right: var(--kwl-space-sm, 0.5rem);
	z-index: 2;
}

@media (min-width: 769px) {
	.kw-conversion--banner {
		flex-direction: row;
		min-height: 220px;
	}

	.kw-conversion--banner .kw-conv__image {
		flex: 0 0 40%;
		max-width: 40%;
		aspect-ratio: auto;
	}

	.kw-conversion--banner .kw-conv__image::before {
		background: linear-gradient(to right, transparent 50%, var(--kwl-conv-card-bg) 100%);
	}

	.kw-conversion--banner .kw-conv__footer {
		align-self: center;
		padding: 0 var(--kwl-space-xl, 2rem);
	}

	.kw-conversion--banner .kw-conv__btn {
		max-width: 280px;
	}
}

/* ===================================================================
   Disruptor Layout — Goldband
   Elegante Card mit Icon-Circle, typografischem Preis, Shared Components.
   Kein Bild, keine Endlos-Animationen — Aufmerksamkeit durch Typografie.
   =================================================================== */
/* Eigener Background — Disruptor hat kein data-kwl-card */
.kw-conversion--disruptor {
	max-width: none;
	background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 4%, var(--kwl-bg, #ffffff));
	border: 1px solid var(--kwl-border, #e2e8f0);
	border-top: 3px solid var(--kwl-accent, #BD9B5C);
	border-radius: var(--kwl-radius-lg, 12px);
	box-shadow: var(--kwl-shadow-md);
}

/* Body: Icon + Content — Mobile: gestapelt, zentriert */
.kw-conv__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--kwl-space-md, 1rem);
	padding: var(--kwl-space-md, 1rem);
}

/* Icon Circle: 48px, sanfte Drehung beim Scroll-Reveal */
.kw-conv__icon {
	--kwl-icon-size: 48px;
	flex-shrink: 0;
	transition: transform 400ms var(--kwl-ease-default);
}

@media (hover: hover) {
	.kw-conversion--disruptor:hover .kw-conv__icon {
		transform: rotate(12deg) scale(1.06);
	}
}

/* Content: kompakt, kein extra Padding */
.kw-conversion--disruptor .kw-conv__content {
	flex: 1;
	min-width: 0;
	padding: 0;
	container-type: normal;
}

/* Titel: kompakt, Platz fuer Shared Separator */
.kw-conversion--disruptor .kw-conv__title {
	margin: 0;
	padding-bottom: var(--kwl-space-sm, 0.5rem);
}

/* Card/Banner-Underline im Disruptor ausblenden (Shared Separator uebernimmt) */
.kw-conversion--disruptor .kw-conv__title::after {
	display: none;
}

/* Preis: typografischer Akzent — Quincy CF in Gold */
.kw-conv__price-display {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.25rem;
	margin-top: var(--kwl-space-xs, 0.25rem);
}

.kw-conv__price-prefix {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body, 0.9375rem);
	color: var(--kwl-text-muted, #64748b);
}

.kw-conv__price-value {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h3, 1.5rem);
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-accent, #BD9B5C);
	line-height: var(--kwl-lh-none);
	font-variant-numeric: tabular-nums;
}

.kw-conv__price-currency {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body, 0.9375rem);
	color: var(--kwl-accent, #BD9B5C);
}

/* Separator: nur auf Mobile sichtbar */
.kw-conv__divider {
	margin: 0 var(--kwl-space-md, 1rem);
	padding: 0;
	min-height: 2px;
}

/* Footer: Button */
.kw-conversion--disruptor .kw-conv__footer {
	padding: 0 var(--kwl-space-md, 1rem) var(--kwl-space-md, 1rem);
}

/* Desktop: Einzeilig — Icon + Content links, Button rechts */
@media (min-width: 481px) {
	.kw-conversion--disruptor {
		flex-direction: row;
		align-items: center;
	}

	.kw-conv__body {
		flex: 1;
		flex-direction: row;
		min-width: 0;
		text-align: left;
		padding: var(--kwl-space-md, 1rem) var(--kwl-space-lg, 1.5rem);
	}

	.kw-conv__price-display {
		justify-content: flex-start;
	}

	.kw-conv__divider {
		display: none;
	}

	.kw-conversion--disruptor .kw-conv__footer {
		flex-shrink: 0;
		padding: var(--kwl-space-md, 1rem) var(--kwl-space-lg, 1.5rem) var(--kwl-space-md, 1rem) 0;
	}
}

/* === Dark Mode === */
@media (prefers-color-scheme: dark) {
	/* Intentional Dark-Shadow-Override (0.25/0.3 statt Standard) */
	.kw-conversion[data-kwl-card] {
		--kwl-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.3);
		--kwl-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.4);
	}

	/* Price-Badge: Kontrast + Border im Dark Mode (Navy auf Gold = 7.4:1) */
	.kw-conv__price {
		--kwl-conv-price-color: #00315d;
		border-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent);
	}

	/* Banner-Akzent-Linie: etwas kraeftiger im Dark Mode */
	.kw-conversion--banner .kw-conv__image::after {
		opacity: 0.85;
	}
}

/* ===================================================================
   Hover: Gold Border-Top Glow
   Ersetzt physischen Lift — sanfter Goldschein auf dem Akzent-Rand.
   =================================================================== */

@media (hover: hover) {
	.kw-conversion[data-kwl-card] {
		transition: box-shadow var(--kwl-transition, 200ms ease);
	}

	.kw-conversion[data-kwl-card]:hover {
		box-shadow:
			var(--kwl-shadow-hover),
			0 -2px 12px -2px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 30%, transparent);
	}
}

@media (prefers-color-scheme: dark) {
	@media (hover: hover) {
		.kw-conversion[data-kwl-card]:hover {
			box-shadow:
				var(--kwl-card-shadow-hover, var(--kwl-shadow-hover)),
				0 -2px 12px -2px rgba(189, 155, 92, 0.2);
		}
	}
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
	.kw-conv__image img,
	.kw-conv__image::after {
		transition: none;
	}

	@media (hover: hover) {
		.kw-conversion:hover .kw-conv__image img {
			transform: none;
		}

		.kw-conversion:hover .kw-conv__image::after {
			transition: none;
		}
	}

	.kw-conv__price--pulse {
		animation: none;
	}

	.kw-conv__btn-arrow,
	.kw-conv__icon {
		transition: none;
	}

	@media (hover: hover) {
		.kw-conversion--disruptor:hover .kw-conv__icon {
			transform: none;
		}
	}

}