/* KW Atelier – Knopf-Widget (Phase 4, Schritt 2).
   Grundvarianten (Gold/Umriss) + drei Figuren (Bierglas/Burger/Spotlight).
   Reines CSS, JS-frei. Die Figur-SVGs erben die Knopf-Textfarbe (currentColor)
   und sind rein dekorativ (aria-hidden, pointer-events: none). Bewegung läuft
   nur bei :hover/:focus-visible und respektiert prefers-reduced-motion
   (Animationen aus, Endzustand bleibt). */

/* ── Box (Ausrichtung) ───────────────────────────────────────────────────── */
.kwat-btn-box {
	display: flex;
}

.kwat-btn-box--start {
	justify-content: flex-start;
}

.kwat-btn-box--center {
	justify-content: center;
}

.kwat-btn-box--end {
	justify-content: flex-end;
}

/* ── Grundknopf ──────────────────────────────────────────────────────────── */
.kwat-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--kwat-space-2);
	min-height: 44px;
	padding: 0 var(--kwat-space-5);
	font-family: var(--kwat-font-body);
	font-size: var(--kwat-text-base);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--kwat-radius-md);
	cursor: pointer;
	isolation: isolate;
	transition:
		transform var(--kwat-transition),
		border-color var(--kwat-transition),
		color var(--kwat-transition),
		background-color var(--kwat-transition),
		box-shadow var(--kwat-transition),
		filter var(--kwat-transition);
}

.kwat-btn__label {
	position: relative;
	z-index: 2;
}

.kwat-btn:active {
	transform: translateY(1px);
}

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

/* Gold (auffällig) – wie der Reservieren-CTA der Hülle. */
.kwat-btn--primary {
	background: linear-gradient(180deg, var(--kwat-color-accent-hover), var(--kwat-color-accent));
	color: var(--kwat-color-text-inverse);
	box-shadow: var(--kwat-shadow-cta);
}

/* Umriss (dezent) – ruhiger Geist-Knopf. */
.kwat-btn--ghost {
	background: color-mix(in srgb, #fff 5%, transparent);
	color: var(--kwat-color-text);
	border-color: var(--kwat-color-border-strong);
}

@media (hover: hover) {
	.kwat-btn--primary:hover {
		transform: translateY(-1px);
	}

	.kwat-btn--ghost:hover {
		color: var(--kwat-color-accent-hover);
		border-color: var(--kwat-color-accent);
	}
}

/* ── Messing-Schild (edel) ───────────────────────────────────────────────────
   Wie die Gold-Variante, aber mit Serifen-Beschriftung + kräftigerer Kante –
   ein graviertes Namensschild. Nutzt die Gold-CTA-Signatur (Glow + Glanzkante). */
.kwat-btn--messing {
	/* Metallischer 3-Stufen-Verlauf (Glanz oben, Schatten unten) = geprägte Platte. */
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--kwat-color-accent-hi) 88%, #fff) 0%,
		var(--kwat-color-accent) 46%,
		color-mix(in srgb, var(--kwat-color-accent) 70%, #000) 100%
	);
	color: var(--kwat-color-text-inverse);
	border: 1px solid color-mix(in srgb, var(--kwat-color-accent) 38%, #000);
	box-shadow:
		inset 0 1px 0 #fff2cf,
		inset 0 -2px 4px color-mix(in srgb, #000 38%, transparent),
		var(--kwat-shadow-cta);
}

/* Eingelassener Gravur-Rahmen (Namensschild-Look). */
.kwat-btn--messing::before {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: calc(var(--kwat-radius-md) - 3px);
	pointer-events: none;
	border: 1px solid color-mix(in srgb, #000 24%, transparent);
	box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
}

.kwat-btn--messing .kwat-btn__label {
	font-family: var(--kwat-font-heading);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 0 color-mix(in srgb, #fff 42%, transparent);
}

@media (hover: hover) {
	.kwat-btn--messing:hover {
		transform: translateY(-2px);
		filter: brightness(1.04);
	}
}

/* ── Eck-Klammer (Rahmen) ─────────────────────────────────────────────────────
   Ruhiger Umriss-Knopf mit zwei Gold-Ecken (oben-links + unten-rechts, die
   Passepartout-Sprache). Beim Überfahren schließen sie sich zum vollen Rahmen –
   reine Farb-/Deckkraft-Animation (keine Layout-Eigenschaften). */
.kwat-btn--klammer {
	background: transparent;
	color: var(--kwat-color-accent-hi);
	box-shadow: inset 0 0 0 2px transparent;
}

.kwat-btn--klammer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	transition: opacity var(--kwat-transition);
	background:
		linear-gradient(var(--kwat-color-accent), var(--kwat-color-accent)) top left / 16px 2px no-repeat,
		linear-gradient(var(--kwat-color-accent), var(--kwat-color-accent)) top left / 2px 16px no-repeat,
		linear-gradient(var(--kwat-color-accent), var(--kwat-color-accent)) bottom right / 16px 2px no-repeat,
		linear-gradient(var(--kwat-color-accent), var(--kwat-color-accent)) bottom right / 2px 16px no-repeat;
}

@media (hover: hover) {
	.kwat-btn--klammer:hover {
		color: #fff;
		background: color-mix(in srgb, var(--kwat-color-accent) 10%, transparent);
		box-shadow: inset 0 0 0 2px var(--kwat-color-accent);
	}

	.kwat-btn--klammer:hover::before {
		opacity: 0;
	}
}

/* ── Kerb-Knopf (angeschnitten) ───────────────────────────────────────────────
   Gefüllte Gold-Fläche mit angeschnittener unterer Ecke. Die Fläche liegt auf
   ::before (geclippt), der Fokus-Ring bleibt am Knopf selbst (nicht mitgeclippt). */
.kwat-btn--kerb {
	background: transparent;
	color: var(--kwat-color-text-inverse);
	box-shadow: var(--kwat-shadow-sm);
}

.kwat-btn--kerb::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, var(--kwat-color-accent-hover), var(--kwat-color-accent));
	box-shadow: inset 0 1px 0 #ffe9b8;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
	transition: filter var(--kwat-transition);
}

.kwat-btn--kerb .kwat-btn__fig {
	position: relative;
	z-index: 2;
}

@media (hover: hover) {
	.kwat-btn--kerb:hover {
		transform: translateY(-2px);
	}

	.kwat-btn--kerb:hover::before {
		filter: brightness(1.05);
	}
}

/* ── Figur-Hülle (gemeinsame Deko-Basis) ─────────────────────────────────── */
.kwat-btn__fig {
	display: inline-flex;
	flex: none;
	align-self: center;
	pointer-events: none;
	overflow: visible;
}

.kwat-btn__fig svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
}

.kwat-btn__fig--bierglas {
	inline-size: 1.05em;
	block-size: 1.35em;
}

.kwat-btn__fig--burger {
	inline-size: 1.45em;
	block-size: 1.3em;
}

.kwat-btn__fig--spotlight {
	inline-size: 1.3em;
	block-size: 1.35em;
}

/* ── Bierglas ────────────────────────────────────────────────────────────────
   In Ruhe halb gefüllt; beim Überfahren steigt der Pegel bis zur Schaumkrone
   und Perlen steigen auf. Bier/Schaum erben currentColor (Knopffarbe). */
.kwat-btn__beer-glass {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kwat-btn__beer-fill {
	fill: currentColor;
	opacity: 0.7;
	transform-box: fill-box;
	transform-origin: bottom;
	transform: scaleY(0.42);
	transition: transform var(--kwat-duration-slow) var(--kwat-ease-emphasis);
}

.kwat-btn__beer-foam {
	fill: currentColor;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center bottom;
	transform: scaleY(0.4);
	transition:
		opacity var(--kwat-duration-base) var(--kwat-ease-standard),
		transform var(--kwat-duration-base) var(--kwat-ease-spring);
}

.kwat-btn__beer-bubble {
	fill: currentColor;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.kwat-btn--bierglas:is(:hover, :focus-visible) .kwat-btn__beer-fill {
	transform: scaleY(0.92);
}

.kwat-btn--bierglas:is(:hover, :focus-visible) .kwat-btn__beer-foam {
	opacity: 0.9;
	transform: scaleY(1);
}

.kwat-btn--bierglas:is(:hover, :focus-visible) .kwat-btn__beer-bubble--1 {
	animation: kwat-beer-bubble 1.1s ease-in 120ms infinite;
}

.kwat-btn--bierglas:is(:hover, :focus-visible) .kwat-btn__beer-bubble--2 {
	animation: kwat-beer-bubble 1.1s ease-in 420ms infinite;
}

.kwat-btn--bierglas:is(:hover, :focus-visible) .kwat-btn__beer-bubble--3 {
	animation: kwat-beer-bubble 1.1s ease-in 760ms infinite;
}

@keyframes kwat-beer-bubble {
	0% { opacity: 0; transform: translateY(0) scale(0.6); }
	30% { opacity: 0.75; }
	100% { opacity: 0; transform: translateY(-7px) scale(1); }
}

/* ── Burger ──────────────────────────────────────────────────────────────────
   Gestapelte Schichten (per Deckkraft/Lücken getrennt); beim Überfahren hüpft
   die obere Brötchenhälfte hoch und landet wieder (Stauchung beim Aufprall). */
.kwat-btn__burger-bun-top,
.kwat-btn__burger-patty,
.kwat-btn__burger-bun-bottom {
	fill: currentColor;
}

.kwat-btn__burger-salad {
	fill: currentColor;
	opacity: 0.6;
}

.kwat-btn__burger-patty {
	opacity: 0.85;
}

.kwat-btn__burger-seed {
	fill: var(--kwat-color-accent);
}

.kwat-btn--ghost .kwat-btn__burger-seed {
	fill: var(--kwat-color-page);
}

.kwat-btn__burger-top {
	transform-box: fill-box;
	transform-origin: center bottom;
}

.kwat-btn__burger-salad {
	transform-box: fill-box;
	transform-origin: center;
}

.kwat-btn--burger:is(:hover, :focus-visible) .kwat-btn__burger-top {
	animation: kwat-burger-hop 900ms var(--kwat-ease-spring) infinite;
}

.kwat-btn--burger:is(:hover, :focus-visible) .kwat-btn__burger-salad {
	animation: kwat-burger-jiggle 900ms ease-in-out infinite;
}

@keyframes kwat-burger-hop {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	25% { transform: translateY(-3.5px) rotate(-5deg); }
	50% { transform: translateY(0) scaleX(1.06) scaleY(0.94); }
	62% { transform: translateY(0) scaleX(1); }
}

@keyframes kwat-burger-jiggle {
	0%, 100% { transform: translateY(0); }
	55% { transform: translateY(0.6px); }
}

/* ── Spotlight (Konzerte/Tickets) ────────────────────────────────────────────
   Ein Scheinwerfer wirft einen Lichtkegel; beim Überfahren schwenkt der Kegel,
   der Funke blitzt – und ein CSS-Glanz wandert über die Beschriftung. */
.kwat-btn__spot-lamp {
	fill: currentColor;
}

.kwat-btn__spot-beam {
	fill: currentColor;
	opacity: 0.18;
}

.kwat-btn__spot-spark {
	fill: currentColor;
	opacity: 0.4;
	transform-box: fill-box;
	transform-origin: center;
}

.kwat-btn__spot-arm {
	transform-box: fill-box;
	transform-origin: center top;
}

.kwat-btn--spotlight {
	overflow: hidden;
}

.kwat-btn--spotlight::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		105deg,
		transparent 30%,
		color-mix(in srgb, #fff 32%, transparent) 50%,
		transparent 70%
	);
	translate: -130% 0;
}

.kwat-btn--spotlight:is(:hover, :focus-visible) .kwat-btn__spot-arm {
	animation: kwat-spot-swing 1.8s ease-in-out infinite;
}

.kwat-btn--spotlight:is(:hover, :focus-visible) .kwat-btn__spot-spark {
	animation: kwat-spot-spark 1.8s ease-in-out infinite;
}

.kwat-btn--spotlight:is(:hover, :focus-visible) .kwat-btn__spot-beam {
	animation: kwat-spot-glow 1.8s ease-in-out infinite;
}

.kwat-btn--spotlight:is(:hover, :focus-visible)::after {
	animation: kwat-spot-sweep 1.8s var(--kwat-ease-standard) infinite;
}

@keyframes kwat-spot-swing {
	0%, 100% { transform: rotate(-11deg); }
	50% { transform: rotate(11deg); }
}

@keyframes kwat-spot-spark {
	0%, 100% { opacity: 0.3; transform: scale(0.8); }
	50% { opacity: 0.95; transform: scale(1.18); }
}

@keyframes kwat-spot-glow {
	0%, 100% { opacity: 0.14; }
	50% { opacity: 0.3; }
}

@keyframes kwat-spot-sweep {
	0% { translate: -130% 0; }
	60%, 100% { translate: 130% 0; }
}

/* ── Bewegungsarm: Endzustand zeigen, keine Endlos-Animation ─────────────────
   Über den Hover-Pfad formuliert (gleiche Spezifität wie die Hover-Regeln,
   spätere Quelle gewinnt) – die Token-basierten Übergänge sind bei
   prefers-reduced-motion ohnehin auf 0ms. */
@media (prefers-reduced-motion: reduce) {
	.kwat-btn:is(:hover, :focus-visible) :is(
		.kwat-btn__beer-bubble, .kwat-btn__burger-top, .kwat-btn__burger-salad,
		.kwat-btn__spot-arm, .kwat-btn__spot-spark, .kwat-btn__spot-beam
	) {
		animation: none;
	}

	.kwat-btn--spotlight:is(:hover, :focus-visible)::after {
		animation: none;
	}
}

/* ── Windows-Kontrastmodus ───────────────────────────────────────────────── */
@media (forced-colors: active) {
	.kwat-btn {
		border: 1px solid;
	}

	.kwat-btn:focus-visible {
		outline: 3px solid;
	}
}

/* ── Elementor-V4-Schutz ─────────────────────────────────────────────────────
   V4 färbt <a> global (Pink) – Knopffarbe je Variante/Zustand explizit halten.
   `:focus` ist Pflicht (nicht nur `:focus-visible`). */
.elementor-widget .kwat-btn--primary,
.elementor-widget .kwat-btn--primary:is(:hover, :active, :focus, :focus-visible) {
	color: var(--kwat-color-text-inverse);
}

.elementor-widget .kwat-btn--ghost {
	color: var(--kwat-color-text);
}

.elementor-widget .kwat-btn--ghost:is(:hover, :focus, :focus-visible) {
	color: var(--kwat-color-accent-hover);
}

/* Der generische Editor-Hinweis (.kwat-widget-empty) liegt jetzt zentral in
   shared.css (Shared Element #5) – button.css hängt daran. */