/* KW Atelier – Geteilte Widget-Bausteine (Phase 4, Schicht 0).
   Eine Basis-Datei für alle Standard-Widgets: Widget-Wrapper-Fix, Scroll-Reveal,
   Karte, Link (+ Elementor-V4-Reset), Eyebrow/Badge, Bildausschnitt und Tooltip.
   button/heading/lightbox laden sie als Abhängigkeit → garantiert da, sobald ein
   Widget rendert. Tokens fallen auf die Marken-Tokens zurück. Regeln & Rationale:
   assets/css/CLAUDE.md + includes/Widgets/CLAUDE.md. */

/* ── #5 Widget-Wrapper (Elementor-Leerraum-Fix bei container-type) ───────────
   Ein container-type-Element treibt sonst die Höhe der indefinit gedehnten
   Elementor-Hülle auf ~2× (Chromium-Doppel-Layout) – sichtbar als riesiger
   Leerraum UNTER dem Widget, v. a. mobil/schmal. Definite Breite (width:100%)
   behebt es; gilt für ALLE kwat-Widgets, nicht nur die Überschrift.
   WICHTIG (wie KW Lobby/Biohof): Widgets liegen je nach Container-Typ direkt in
   .e-con ODER verschachtelt in .e-con > .e-con-inner (boxed Container) – BEIDE
   Fälle abdecken. Doppelte Klasse `.elementor-widget.elementor-widget` erhöht die
   Spezifität, um Elementors `align-self: stretch` zu schlagen. */
.e-con > .elementor-widget.elementor-widget[class*="elementor-widget-kwat_"],
.e-con > .e-con-inner > .elementor-widget.elementor-widget[class*="elementor-widget-kwat_"] {
	align-self: flex-start;
	width: 100%;
}

/* Editor-Hinweis für leere Widgets (Button/Heading/… in der Vorschau). */
.kwat-widget-empty {
	margin: 0;
	padding: var(--kwat-space-3) var(--kwat-space-4);
	color: var(--kwat-color-text-muted);
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-sm);
	border: 1px dashed var(--kwat-color-border-strong);
	border-radius: var(--kwat-radius-sm);
}

/* ── #2 Scroll-Reveal (View Timeline, JS-frei) ───────────────────────────────
   .kwat-reveal blendet beim Hereinscrollen ein; Richtungs-Modifier setzen die
   Anfangsverschiebung. Ohne View-Timeline-Support bleibt der Inhalt sichtbar
   (kein FOUC). Die Überschrift-Komponente nutzt ihre eigene Zwei-Element-
   Choreografie und ist bewusst nicht hierauf umgestellt. */
@supports (animation-timeline: view()) {
	.kwat-reveal {
		animation: kwat-reveal-in linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 40%;
	}
}

@keyframes kwat-reveal-in {
	from {
		opacity: 0;
		transform: translate(var(--kwat-reveal-x, 0), var(--kwat-reveal-y, 20px)) scale(var(--kwat-reveal-scale, 1));
	}

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

.kwat-reveal--left {
	--kwat-reveal-x: -24px;
	--kwat-reveal-y: 0;
}

.kwat-reveal--right {
	--kwat-reveal-x: 24px;
	--kwat-reveal-y: 0;
}

.kwat-reveal--scale {
	--kwat-reveal-y: 0;
	--kwat-reveal-scale: 0.94;
}

/* ── #3 Karte / Panel ────────────────────────────────────────────────────────
   Einheitliche Fläche für Feature-Kacheln, FAQ, Partner, später Speisekarte.
   Tokens je Karte überschreibbar (Hintergrund/Rand/Radius/Innenabstand). */
.kwat-card {
	--kwat-card-bg: var(--kwat-color-surface);
	--kwat-card-border: var(--kwat-color-border);
	--kwat-card-radius: var(--kwat-radius-lg);
	--kwat-card-pad: var(--kwat-space-5);

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--kwat-space-3);
	padding: var(--kwat-card-pad);
	background: var(--kwat-card-bg);
	border: 1px solid var(--kwat-card-border);
	border-radius: var(--kwat-card-radius);
	box-shadow: var(--kwat-shadow-lg);
}

/* Betonter Goldrand (z. B. hervorgehobene Kachel). */
.kwat-card--accent {
	--kwat-card-border: color-mix(in srgb, var(--kwat-color-accent) 55%, var(--kwat-color-border));
}

/* Interaktiv: sanftes Anheben + Gold-Glanzkante bei Hover (nur Zeigegeräte). */
@media (hover: hover) {
	.kwat-card--interactive {
		transition:
			transform var(--kwat-duration-base) var(--kwat-ease-standard),
			border-color var(--kwat-duration-base) var(--kwat-ease-standard),
			box-shadow var(--kwat-duration-base) var(--kwat-ease-standard);
	}

	.kwat-card--interactive:hover {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--kwat-color-accent) 45%, var(--kwat-card-border));
		box-shadow:
			var(--kwat-shadow-lg),
			0 0 0 1px color-mix(in srgb, var(--kwat-color-accent) 30%, transparent);
	}
}

/* ── #4 Link (+ zentraler Elementor-V4-„Pink"-Reset) ─────────────────────────
   Geteilter Textlink-Stil für alle Widgets. Der V4-Reset (unten) hält die Farbe
   in allen Zuständen, weil Elementor V4 <a> global pink färbt. */
.kwat-link {
	color: var(--kwat-color-accent);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--kwat-color-accent) 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	border-radius: 2px;
	transition:
		color var(--kwat-transition),
		text-decoration-color var(--kwat-transition);
}

.kwat-link:focus-visible {
	outline: var(--kwat-focus-width) solid var(--kwat-color-focus);
	outline-offset: var(--kwat-focus-offset);
}

@media (hover: hover) {
	.kwat-link:hover {
		color: var(--kwat-color-accent-hover);
		text-decoration-color: currentColor;
	}
}

/* ── #6 Eyebrow (Vorzeile) ───────────────────────────────────────────────────
   Kleines Gold-Label über Überschriften; optional mit Punkt oder Icon. */
.kwat-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
	margin: 0;
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-sm);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--kwat-color-accent-hover);
}

.kwat-eyebrow__dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--kwat-color-accent);
}

.kwat-eyebrow__icon {
	display: block;
	width: 1.2em;
	height: 1.2em;
}

/* ── #6 Badge (Pille) ────────────────────────────────────────────────────────
   Kompaktes Status-/Kategorie-Etikett. Standard: dezent Gold, --solid: voll Gold. */
.kwat-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-1);
	padding: 0.25em 0.7em;
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--kwat-color-accent-hover);
	background: var(--kwat-color-accent-soft);
	border: 1px solid color-mix(in srgb, var(--kwat-color-accent) 35%, transparent);
	border-radius: 999px;
}

.kwat-badge--solid {
	color: var(--kwat-color-text-inverse);
	background: var(--kwat-color-accent);
	border-color: transparent;
}

/* ── #7 Bildausschnitt (object-fit/position) ─────────────────────────────────
   Der Trait Widgets\Traits\ImagePositionControls schreibt --kwat-img-fit/-pos
   je Widget-Bild; ohne Vorgabe „cover/center" (üblichster Fall). */
.kwat-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--kwat-img-fit, cover);
	object-position: var(--kwat-img-pos, center center);
}

/* ── #8 Tooltip ──────────────────────────────────────────────────────────────
   Render-Schicht zu assets/js/widgets/tooltip.js: EIN wiederverwendetes Popover
   (#kwat-global-tooltip), position:fixed; JS berechnet Position + Auto-Flip und
   verankert den Pfeil am Anker-Center. Trigger: [data-kwat-tooltip]. Dunkler
   Tooltip mit Gold-Haarlinie (wie die Dropdowns/Panels der Hülle). */
.kwat-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483647;
	margin: 0;
	max-inline-size: min(280px, calc(100vw - 2 * var(--kwat-space-4)));
	inline-size: max-content;
	padding: var(--kwat-space-2) var(--kwat-space-3);
	background: var(--kwat-color-surface);
	color: var(--kwat-color-text);
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-xs);
	font-weight: 600;
	line-height: 1.4;
	white-space: normal;
	text-align: start;
	border: 1px solid color-mix(in srgb, var(--kwat-color-accent) 40%, var(--kwat-color-border-strong));
	border-radius: var(--kwat-radius-sm);
	box-shadow: var(--kwat-shadow-lg);
	pointer-events: none;
	overflow: visible;

	/* Initial unsichtbar (display:none verhindert Layout-Einfluss). */
	display: none;
	opacity: 0;
	transform: scale(0.96);
	transition:
		opacity var(--kwat-duration-fast) var(--kwat-ease-standard),
		transform var(--kwat-duration-fast) var(--kwat-ease-standard);
	transform-origin: center bottom;
}

.kwat-tooltip.is-open {
	display: block;
	opacity: 1;
	transform: scale(1);
}

.kwat-tooltip[data-placement="top"] {
	transform-origin: center bottom;
}

.kwat-tooltip[data-placement="bottom"] {
	transform-origin: center top;
}

.kwat-tooltip[data-placement="left"] {
	transform-origin: right center;
}

.kwat-tooltip[data-placement="right"] {
	transform-origin: left center;
}

/* Pfeil – eine Ecke pro Platzierung; Farbe folgt dem Tooltip-Hintergrund.
   JS setzt --kwat-tt-arrow-x / -y nach dem Viewport-Clamp (Fallback 50 %). */
.kwat-tooltip::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 6px solid transparent;
}

.kwat-tooltip[data-placement="top"]::after,
.kwat-tooltip[data-placement="bottom"][data-flipped="true"]::after {
	left: var(--kwat-tt-arrow-x, 50%);
	bottom: -12px;
	transform: translateX(-50%);
	border-top-color: var(--kwat-color-surface);
}

.kwat-tooltip[data-placement="bottom"]::after,
.kwat-tooltip[data-placement="top"][data-flipped="true"]::after {
	left: var(--kwat-tt-arrow-x, 50%);
	top: -12px;
	transform: translateX(-50%);
	border-bottom-color: var(--kwat-color-surface);
}

.kwat-tooltip[data-placement="right"]::after,
.kwat-tooltip[data-placement="left"][data-flipped="true"]::after {
	top: var(--kwat-tt-arrow-y, 50%);
	left: -12px;
	transform: translateY(-50%);
	border-right-color: var(--kwat-color-surface);
}

.kwat-tooltip[data-placement="left"]::after,
.kwat-tooltip[data-placement="right"][data-flipped="true"]::after {
	top: var(--kwat-tt-arrow-y, 50%);
	right: -12px;
	transform: translateY(-50%);
	border-left-color: var(--kwat-color-surface);
}

/* ── Bewegung reduzieren ─────────────────────────────────────────────────────
   Reveal sofort sichtbar; Tooltip ohne Fade/Scale (Snap). */
@media (prefers-reduced-motion: reduce) {
	.kwat-reveal {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.kwat-tooltip,
	.kwat-tooltip.is-open {
		transition: none;
		transform: none;
	}
}

/* ── Windows-Kontrastmodus ───────────────────────────────────────────────────
   Karte/Tooltip mit System-Rahmen, Tooltip-Pfeil aus. */
@media (forced-colors: active) {
	.kwat-card {
		border: 1px solid;
	}

	.kwat-tooltip {
		background: Canvas;
		color: CanvasText;
		border: 1px solid CanvasText;
		box-shadow: none;
	}

	.kwat-tooltip::after {
		display: none;
	}
}