/* =========================================================
   WIDGET: RCE EVENT — Veranstaltungskalender (iFrame)
   Premium Card 2026 — Token-Kaskade, Gold-Akzent,
   Dark Mode, Reduced Motion, Responsive, BFSG
   ========================================================= */

/* ---------------------------------------------------------
   1. Custom Properties
   --------------------------------------------------------- */
/* Mobile-First: kleinste Höhe als Basis, ab 481px 800px, ab 769px 1200px */
.kw-rce {
	--kwl-rce-height: 600px;
	--kwl-rce-bg: var(--kwl-bg, #ffffff);
	--kwl-rce-loading-color: var(--kwl-text-muted, #64748b);
	--kwl-rce-heading-color: var(--kwl-text, #1a202c);
	--kwl-rce-disclaimer-color: var(--kwl-text-muted, #64748b);
	--kwl-rce-link-color: var(--kwl-primary, #00315d);
	position: relative;
	overflow: hidden;
}

/* ---------------------------------------------------------
   2. Überschrift — Gold-Gradient-Separator
   --------------------------------------------------------- */
/* Mobile-First: kompakterer Abstand als Basis, ab 769px größere Margins */
.kw-rce__heading {
	color: var(--kwl-rce-heading-color);
	font-family: var(--kwl-font-heading);
	line-height: var(--kwl-lh-heading, 1.2);
	margin: var(--kwl-space-md, 1rem) var(--kwl-space-md, 1rem) 0;
	padding-bottom: var(--kwl-space-md, 1rem);
}

/* ---------------------------------------------------------
   3. Hinweistext
   --------------------------------------------------------- */
/* Mobile-First: kompakter Abstand als Basis, ab 769px größere Margins */
.kw-rce__disclaimer {
	--kwl-link-color: var(--kwl-rce-link-color);
	--kwl-link-hover-color: var(--kwl-primary-hover, #1e3a5f);
	color: var(--kwl-rce-disclaimer-color);
	font-size: var(--kwl-fsize-body, 1rem);
	line-height: var(--kwl-lh-body, 1.5);
	margin: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem) var(--kwl-space-sm, 0.5rem);
}

.kw-rce__disclaimer a {
	color: var(--kwl-rce-link-color);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
	.kw-rce__disclaimer a:hover {
		color: var(--kwl-primary-hover, #1e3a5f);
	}
}

.kw-rce__disclaimer a:active {
	opacity: 0.8;
}

.kw-rce__disclaimer a:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* ---------------------------------------------------------
   4. iFrame
   --------------------------------------------------------- */
.kw-rce__iframe {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	height: var(--kwl-rce-height);
	border: none;
	background: var(--kwl-rce-bg);
}

/* ---------------------------------------------------------
   5. Ladetext (hinter dem iFrame via z-index)
   --------------------------------------------------------- */
.kw-rce__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kwl-rce-loading-color);
	font-size: var(--kwl-fsize-body, 1rem);
	pointer-events: none;
	z-index: 0;
}

/* ---------------------------------------------------------
   6. Focus-within (BFSG)
   --------------------------------------------------------- */
.kw-rce:focus-within {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* ---------------------------------------------------------
   7. Dark Mode
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.kw-rce {
		--kwl-rce-bg: var(--kwl-bg, #1a202c);
		--kwl-rce-loading-color: var(--kwl-text-muted, #a0aec0);
		--kwl-rce-heading-color: var(--kwl-text, #f7fafc);
		--kwl-rce-disclaimer-color: var(--kwl-text-muted, #cbd5e0);
		--kwl-rce-link-color: var(--kwl-text, #e2e8f0);
	}

	@media (hover: hover) {
		.kw-rce__disclaimer a:hover {
			color: var(--kwl-primary, #63b3ed);
		}
	}

	.kw-rce__disclaimer a:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}

	.kw-rce:focus-within {
		outline-color: var(--kwl-focus, #c9a84c);
	}
}

/* ---------------------------------------------------------
   8. Reduced Motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kw-rce__disclaimer a {
		transition: none;
	}
}

/* ---------------------------------------------------------
   9. Responsive — Mobile-First
   --------------------------------------------------------- */
@media (min-width: 481px) {
	.kw-rce {
		--kwl-rce-height: 800px;
	}
}

@media (min-width: 769px) {
	.kw-rce {
		--kwl-rce-height: 1200px;
	}

	.kw-rce__heading {
		margin: var(--kwl-space-lg, 1.5rem) var(--kwl-space-lg, 1.5rem) 0;
	}

	.kw-rce__disclaimer {
		margin: var(--kwl-space-sm, 0.5rem) var(--kwl-space-lg, 1.5rem) var(--kwl-space-md, 1rem);
	}
}

/* --- Elementor V4 Reset — Spezifität (0,2,1) gegen Pink-Hover --- */

/* V4 Pink-Reset: zentral via [data-kwl-link-scope] auf .kw-rce__disclaimer (§281) */