/* KW Atelier – CTA-Box (Phase 4, Schicht 1).
   Eine einladende Handlungsaufforderung in drei Layouts über data-kwat-cta-layout:
   „card" (edle, mittige Karte, Breite gedeckelt), „banner" (volle Breite mit
   abgedunkeltem Foto), „disruptor" (kompakter Störer mit Maskottchen). Vier
   zuschaltbare Detail-Schichten als Modifier-Klassen: --glow (Gold-Aura), --sheen
   (Tresenlicht bei Hover/Fokus), --ornament (Eck-Motiv), --reveal (Einblenden beim
   Scrollen, JS-frei via View Timeline). Tokens --kwat-cta-* mit Marken-Fallback,
   vom Stil-Tab überschreibbar. Nutzt die Schicht-0-Bausteine (shared.css) + die
   Knopf-Optik (button.css). Reines CSS, kein !important. */

.kwat-cta {
	--kwat-cta-bg: var(--kwat-color-surface);
	--kwat-cta-border: var(--kwat-color-border);
	--kwat-cta-radius: var(--kwat-radius-lg);
	--kwat-cta-max: 52rem;
	--kwat-cta-overlay: 92%;
	--kwat-cta-title-color: var(--kwat-color-text);
	--kwat-cta-text-color: var(--kwat-color-text-muted);
	--kwat-cta-accent-color: var(--kwat-color-accent);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--kwat-cta-text-color);
	font-family: var(--kwat-font-body);
	background: var(--kwat-cta-bg);
	border: 1px solid var(--kwat-cta-border);
	border-radius: var(--kwat-cta-radius);
	box-shadow: var(--kwat-shadow-lg);
	/* Innerer Query-Container (Breite der Box, nicht des Viewports). Der Widget-
	   Wrapper-Fix (shared.css #5) fängt den container-type-Leerraum ab. */
	container-type: inline-size;
}

/* Inhalt liegt über Aura/Foto/Ornament, aber unter dem Tresenlicht. */
.kwat-cta__inner {
	position: relative;
	z-index: 2;
}

/* ── Copy (Einleitung, Titel, Text) ──────────────────────────────────────────── */
.kwat-cta__copy {
	display: flex;
	flex-direction: column;
	gap: var(--kwat-space-3);
	min-inline-size: 0;
}

.kwat-cta__eyebrow {
	margin: 0;
	color: var(--kwat-cta-accent-color);
}

.kwat-cta__eyebrow .kwat-eyebrow__dot {
	background: currentColor;
}

.kwat-cta__title {
	margin: 0;
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	line-height: 1.12;
	color: var(--kwat-cta-title-color);
	text-wrap: balance;
	overflow-wrap: break-word;
}

.kwat-cta__accent {
	color: var(--kwat-cta-accent-color);
}

.kwat-cta__lead {
	margin: 0;
	color: var(--kwat-cta-text-color);
	font-size: var(--kwat-text-base);
	line-height: 1.6;
	text-wrap: pretty;
}

/* ── Aktionen (Knöpfe + Vertrauenszeile) ─────────────────────────────────────── */
.kwat-cta__actions {
	display: flex;
	flex-direction: column;
	gap: var(--kwat-space-3);
}

.kwat-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwat-space-3);
}

.kwat-cta__reassure {
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
	color: var(--kwat-cta-text-color);
	font-size: var(--kwat-text-sm);
	line-height: 1.4;
}

.kwat-cta__reassure svg {
	flex: none;
	color: var(--kwat-color-accent-hover);
}

/* ── Dekorative Schichten ─────────────────────────────────────────────────────
   Aura (Gold-Glow), Tresenlicht (Hover-Sweep), Banner-Foto, Eck-Ornament. */
.kwat-cta__aura {
	position: absolute;
	inset: -2px;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		120% 120% at 50% 0%,
		color-mix(in srgb, var(--kwat-color-accent) 22%, transparent),
		transparent 60%
	);
}

.kwat-cta--glow {
	box-shadow: var(--kwat-shadow-lg), var(--kwat-shadow-cta);
}

.kwat-cta--glow .kwat-cta__aura {
	opacity: 0.5;
}

.kwat-cta__sheen {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		105deg,
		transparent 38%,
		color-mix(in srgb, #fff 22%, transparent) 50%,
		transparent 62%
	);
	translate: -130% 0;
}

@media (hover: hover) {
	.kwat-cta--sheen:is(:hover, :focus-within) .kwat-cta__sheen {
		opacity: 1;
		/* Dauer = 2× „slow" → 0 bei prefers-reduced-motion (Token wird dort 0). */
		animation: kwat-cta-sheen calc(var(--kwat-duration-slow) * 2) var(--kwat-ease-standard);
	}
}

@keyframes kwat-cta-sheen {
	from {
		translate: -130% 0;
	}

	to {
		translate: 130% 0;
	}
}

.kwat-cta__ornament {
	position: absolute;
	z-index: 1;
	inset-block-start: -14px;
	inset-inline-end: -14px;
	inline-size: 120px;
	block-size: 120px;
	color: var(--kwat-cta-accent-color);
	opacity: 0.16;
	pointer-events: none;
	transform-origin: top right;
	transition:
		opacity var(--kwat-duration-slow) var(--kwat-ease-standard),
		transform var(--kwat-duration-slow) var(--kwat-ease-emphasis);
}

@media (hover: hover) {
	.kwat-cta--ornament:hover .kwat-cta__ornament {
		opacity: 0.3;
		transform: scale(1.06) rotate(-3deg);
	}
}

/* ── Layout A: Edle Karte (mittig, Breite gedeckelt) ─────────────────────────── */
[data-kwat-cta-layout="card"] {
	margin-inline: auto;
	max-inline-size: var(--kwat-cta-max);
}

[data-kwat-cta-layout="card"] .kwat-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kwat-space-4);
	padding: clamp(1.6rem, 2.5cqi + 0.9rem, 2.75rem);
	text-align: center;
}

[data-kwat-cta-layout="card"] .kwat-cta__copy {
	align-items: center;
}

[data-kwat-cta-layout="card"] .kwat-cta__title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
}

[data-kwat-cta-layout="card"] .kwat-cta__lead {
	max-inline-size: 52ch;
}

[data-kwat-cta-layout="card"] .kwat-cta__actions {
	align-items: center;
	margin-block-start: var(--kwat-space-1);
}

[data-kwat-cta-layout="card"] .kwat-cta__buttons {
	justify-content: center;
}

/* Kartenbreiten (nur Layout „card"). */
.kwat-cta--w-compact {
	--kwat-cta-max: 34rem;
}

.kwat-cta--w-comfortable {
	--kwat-cta-max: 52rem;
}

.kwat-cta--w-wide {
	--kwat-cta-max: 66rem;
}

.kwat-cta--w-full {
	--kwat-cta-max: 100%;
}

/* ── Layout B: Breiter Banner (Foto-Hintergrund) ─────────────────────────────── */
[data-kwat-cta-layout="banner"] {
	border-color: color-mix(in srgb, var(--kwat-color-accent) 28%, var(--kwat-cta-border));
}

[data-kwat-cta-layout="banner"] .kwat-cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kwat-space-5);
	padding: var(--kwat-space-6);
}

[data-kwat-cta-layout="banner"] .kwat-cta__title {
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.95rem);
	text-shadow: 0 2px 16px color-mix(in srgb, #000 60%, transparent);
}

[data-kwat-cta-layout="banner"] .kwat-cta__lead {
	max-inline-size: 46ch;
	color: var(--kwat-color-text);
	opacity: 0.9;
}

/* Ab genug Breite: Text links, Aktion rechts. */
@container (min-width: 40rem) {
	[data-kwat-cta-layout="banner"] .kwat-cta__inner {
		grid-template-columns: 1.5fr auto;
		align-items: center;
		gap: var(--kwat-space-5) var(--kwat-space-7);
		padding: var(--kwat-space-6) var(--kwat-space-7);
	}

	[data-kwat-cta-layout="banner"] .kwat-cta__actions {
		min-inline-size: 12rem;
	}

	[data-kwat-cta-layout="banner"] .kwat-cta__reassure {
		justify-content: center;
	}
}

.kwat-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.kwat-cta__bgimg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: saturate(0.9) brightness(0.82);
}

/* Gerichtetes Overlay: Textseite (links) tief dunkel → rechts scheint das Foto
   durch. Stärke über --kwat-cta-overlay (Stil-Tab). Dazu ein Boden-Verlauf. */
.kwat-cta__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			95deg,
			color-mix(in srgb, var(--kwat-color-page) var(--kwat-cta-overlay), transparent) 0%,
			color-mix(in srgb, var(--kwat-color-page) calc(var(--kwat-cta-overlay) - 4%), transparent) 36%,
			color-mix(in srgb, var(--kwat-color-page) calc(var(--kwat-cta-overlay) - 30%), transparent) 68%,
			color-mix(in srgb, var(--kwat-color-page) calc(var(--kwat-cta-overlay) - 54%), transparent) 100%
		),
		linear-gradient(0deg, color-mix(in srgb, var(--kwat-color-page) 55%, transparent), transparent 58%);
}

[data-kwat-cta-layout="banner"] .kwat-cta__ornament {
	color: var(--kwat-color-accent-hover);
}

/* ── Layout C: Kompakter Störer (Maskottchen + Frage + Knopf) ────────────────── */
[data-kwat-cta-layout="disruptor"] {
	border-color: color-mix(in srgb, var(--kwat-color-accent) 24%, var(--kwat-cta-border));
}

[data-kwat-cta-layout="disruptor"] .kwat-cta__inner {
	display: flex;
	align-items: center;
	gap: var(--kwat-space-4);
	padding: var(--kwat-space-3) var(--kwat-space-4);
}

[data-kwat-cta-layout="disruptor"] .kwat-cta__copy {
	flex: 1 1 auto;
	gap: var(--kwat-space-1);
}

[data-kwat-cta-layout="disruptor"] .kwat-cta__title {
	font-size: var(--kwat-text-lg);
}

[data-kwat-cta-layout="disruptor"] .kwat-cta__actions {
	flex: none;
	margin-inline-start: auto;
}

.kwat-cta__mascot {
	flex: none;
	display: block;
	inline-size: 56px;
}

.kwat-cta__mascot-img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	filter: drop-shadow(0 6px 12px color-mix(in srgb, #000 50%, transparent));
}

/* Schmaler Störer: alles umbrechen, Knopf volle Breite. */
@container (max-width: 30rem) {
	[data-kwat-cta-layout="disruptor"] .kwat-cta__inner {
		flex-wrap: wrap;
	}

	[data-kwat-cta-layout="disruptor"] .kwat-cta__actions {
		margin-inline-start: 0;
		inline-size: 100%;
	}

	[data-kwat-cta-layout="disruptor"] .kwat-cta__buttons {
		inline-size: 100%;
	}

	[data-kwat-cta-layout="disruptor"] .kwat-cta__btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* ── Begleit-Zicklinde je Layout ──────────────────────────────────────────────
   Markup: .kwat-cta__mascot als erstes Kind von .kwat-cta__inner (Default an, in
   allen Layouts). Die Basis (56px, seitlich) steht oben beim Störer; Karte und
   Banner platzieren sie passend. */

/* Karte: über der zentrierten Copy (Inner ist flex-column, mittig), größer. */
[data-kwat-cta-layout="card"] .kwat-cta__mascot {
	inline-size: clamp(88px, 22cqi, 128px);
	margin-block-end: var(--kwat-space-1);
}

/* Banner: eigene Spalte neben dem Text (ab genug Breite), sonst oben gestapelt. */
[data-kwat-cta-layout="banner"] .kwat-cta__mascot {
	justify-self: start;
	align-self: center;
	inline-size: clamp(80px, 20cqi, 120px);
}

@container (min-width: 40rem) {
	[data-kwat-cta-layout="banner"].kwat-cta--has-mascot .kwat-cta__inner {
		grid-template-columns: auto 1.5fr auto;
	}
}

/* ── Einblenden beim Hereinscrollen (View Timeline, JS-frei) ──────────────────
   Die Box gleitet sanft hoch; bei aktiver Gold-Aura glüht sie dabei kurz auf und
   beruhigt sich (Aura-Opazität an den Scroll-Fortschritt gekoppelt). Ohne View-
   Timeline-Support bleibt alles sofort sichtbar (kein FOUC). */
@supports (animation-timeline: view()) {
	.kwat-cta--reveal {
		animation: kwat-cta-rise linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 45%;
	}

	.kwat-cta--reveal.kwat-cta--glow .kwat-cta__aura {
		animation: kwat-cta-glow-in linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 45%;
	}
}

@keyframes kwat-cta-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes kwat-cta-glow-in {
	from {
		opacity: 0;
	}

	60% {
		opacity: 0.85;
	}

	to {
		opacity: 0.5;
	}
}

/* ── Bewegung reduzieren (BFSG) ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.kwat-cta--reveal {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.kwat-cta--reveal.kwat-cta--glow .kwat-cta__aura {
		animation: none;
		opacity: 0.5;
	}

	.kwat-cta--sheen:is(:hover, :focus-within) .kwat-cta__sheen {
		animation: none;
	}

	.kwat-cta__ornament {
		transition: none;
	}
}

/* ── Windows-Kontrastmodus ────────────────────────────────────────────────────
   Dekoschichten aus, klarer Rahmen, Text auf Systemfläche. */
@media (forced-colors: active) {
	.kwat-cta {
		border: 1px solid;
	}

	.kwat-cta__aura,
	.kwat-cta__sheen,
	.kwat-cta__ornament,
	.kwat-cta__bg {
		display: none;
	}

	[data-kwat-cta-layout="banner"] .kwat-cta__title {
		text-shadow: none;
	}
}