/**
 * micro.css – Mikro-Interaktions-Layer („die lebendigen 10 %").
 *
 * Rein ADDITIV. Wird als LETZTES Stylesheet geladen (nach preview.css,
 * theme.css, components.css, motion.css) und ergaenzt bestehende Komponenten
 * um sieben Detail-Effekte. Es werden ausschliesslich bestehende Design-Tokens
 * verwendet; keine neuen Farben, keine Fremd-Library, kein Extra-Request.
 *
 * Beruehrte Fremd-Selektoren (bewusst und minimal):
 *   .svk-btn / .wp-block-button__link  -> nur transition-* und transform
 *   .svk-info-card / .svk-news-card    -> nur transform, box-shadow, ::after
 *   .svk-kreide[data-micro-draw] path  -> nur transition (Zeichnen per JS)
 * Alles andere sind EIGENE Klassen mit Praefix .svk-mikro-*.
 *
 * Effekte:
 *   1. Ball-Physik auf Buttons (Feder-Hover, Anstoss-Impuls beim Klick)
 *   2. Selbstzeichnende Kreidelinien (Transition, gesteuert von micro.js)
 *   3. Flutlicht folgt der Maus (Hero, nur Pointer-Geraete)
 *   4. Karten heben ab (Lift + Schattentiefe + Glanzkante oben)
 *   5. Anzeigetafel-Zaehler (tabellarische Ziffern, kein Breiten-Zappeln)
 *   6. Sanfte Seiten-Uebergaenge (Fade-Veil)
 *   7. Scroll-Fortschrittsbalken
 *
 * prefers-reduced-motion: reduce -> Sammelblock ganz unten schaltet JEDE
 * Bewegung ab (zusaetzlich zur globalen Notbremse in theme.css).
 */

:root {
	/* Feder-Kurve mit leichtem Ueberschwingen. Identisch zur bereits im Projekt
	 * verwendeten Kurve (motion.css, svk-wappen-einflug) – kein neuer Wert. */
	--svk-mikro-feder: cubic-bezier(0.34, 1.4, 0.64, 1);
	/* Schneller Andruck („Fuss trifft Ball") */
	--svk-mikro-druck: cubic-bezier(0.4, 0, 0.6, 1);
	--svk-mikro-dur-feder: 300ms;
	--svk-mikro-dur-druck: 90ms;
}

/* ============================================================
 * 1) BALL-PHYSIK AUF BUTTONS
 * Hover: leichter Lift + minimales Aufblasen mit Ueberschwingen.
 * Klick/Enter/Space: kurzer Anstoss (scale-down) und Snap zurueck.
 * Der Fokus-Ring (outline aus components.css/theme.css) bleibt unberuehrt.
 * ============================================================ */

/* Nur die Timing-Funktion/Dauer der bestehenden Transition praezisieren –
 * Reihenfolge exakt wie in components.css (background-color, transform,
 * box-shadow, color), damit ausschliesslich transform federt. */
.svk-btn,
.wp-block-button__link {
	transition-property: background-color, transform, box-shadow, color;
	transition-duration: var(--dur), var(--svk-mikro-dur-feder), var(--dur), var(--dur);
	transition-timing-function: var(--ease), var(--svk-mikro-feder), var(--ease), var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.svk-btn:not(:disabled):not([aria-disabled="true"]):hover,
	.wp-block-button__link:hover {
		transform: translateY(-2px) scale(1.015);
	}
}

/* Anstoss: Maus (:active) und Tastatur (.is-anstoss aus micro.js) */
.svk-btn:not(:disabled):not([aria-disabled="true"]):active,
.svk-btn.is-anstoss,
.wp-block-button__link:active,
.wp-block-button__link.is-anstoss {
	transform: translateY(0) scale(0.965);
	transition-duration: var(--svk-mikro-dur-druck);
	transition-timing-function: var(--svk-mikro-druck);
}

/* ============================================================
 * 2) SELBSTZEICHNENDE KREIDELINIEN
 * micro.js misst jede Pfadlaenge, setzt stroke-dasharray/-dashoffset inline
 * (mit !important, damit die Keyframe-Animation aus motion.css nicht
 * dazwischenfunkt) und zieht den Offset beim Scroll-In auf 0.
 * Hier steht nur die Transition – ohne JS bleibt alles wie gehabt.
 * ============================================================ */
.svk-kreide[data-micro-draw] path,
.svk-kreide[data-micro-draw] line,
.svk-kreide[data-micro-draw] polyline {
	transition: stroke-dashoffset 600ms var(--ease);
}

/* ============================================================
 * 3) FLUTLICHT FOLGT DER MAUS (Hero)
 * Eigene, von micro.js erzeugte Ebene INNERHALB von .svk-hero. Liegt per
 * z-index unter .svk-hero__inner (z-index: 1) – der Schein wandert also
 * IMMER hinter Headline, Text und Buttons. Kein Kontrastverlust.
 * Farbe = --sv-gelb-300 (#f3e668), identisch zum bestehenden Flutlicht.
 * ============================================================ */
.svk-mikro-licht {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: min(85vw, 900px);
	height: min(85vw, 900px);
	pointer-events: none;
	opacity: 0;
	transform: translate3d(50vw, 0, 0) translate(-50%, -50%);
	transition: opacity 600ms var(--ease);
	background: radial-gradient(
		closest-side,
		rgba(243, 230, 104, 0.18) 0%,
		rgba(243, 230, 104, 0.09) 42%,
		rgba(243, 230, 104, 0) 72%
	);
}

@supports (background: radial-gradient(closest-side, color-mix(in srgb, #fff 10%, transparent), transparent)) {
	.svk-mikro-licht {
		background: radial-gradient(
			closest-side,
			color-mix(in srgb, var(--sv-gelb-300) 8%, transparent) 0%,
			color-mix(in srgb, var(--sv-gelb-300) 4%, transparent) 42%,
			transparent 72%
		);
	}
}

.svk-mikro-licht.is-an {
	opacity: 1;
}

/* Touch/grobe Zeiger: Effekt existiert gar nicht erst. */
@media (hover: none), (pointer: coarse) {
	.svk-mikro-licht {
		display: none;
	}
}

/* ============================================================
 * 4) KARTEN HEBEN AB
 * Feiner Lift, tieferer Schatten, dazu ein sehr dezenter warmer Glanz an der
 * Oberkante (wie Flutlicht, das die Karte streift). Nur auf Pointer-Geraeten,
 * nur transform/opacity/box-shadow – kein Layout-Shift, kein Wackeln.
 * ============================================================ */
@media (hover: hover) and (pointer: fine) {
	.svk-info-card {
		position: relative; /* Anker fuer die Glanzkante, ohne Offsets */
		transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	}

	.svk-info-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--shadow-md);
	}

	.svk-news-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-lg);
	}

	/* Glanzkante: rein dekorativ, klickdurchlaessig, liegt ueber dem Medienbild
	 * aber unter nichts Interaktivem (pointer-events: none). */
	.svk-info-card::after,
	.svk-news-card::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 38%;
		max-height: 130px;
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		pointer-events: none;
		opacity: 0;
		transition: opacity var(--dur) var(--ease);
		background: linear-gradient(
			180deg,
			rgba(243, 230, 104, 0.11) 0%,
			rgba(243, 230, 104, 0.04) 45%,
			rgba(243, 230, 104, 0) 100%
		);
	}

	.svk-info-card:hover::after,
	.svk-news-card:hover::after,
	.svk-news-card:focus-within::after {
		opacity: 1;
	}

	/* Ausnahme (Progressive Enhancement mit :has()): Karten, die ein Formular
	 * enthalten – Kontaktformular, Probetraining-Funnel –, bleiben ruhig.
	 * Ein Lift unter dem Cursor waehrend des Tippens waere reine Unruhe.
	 * Ohne :has()-Unterstuetzung wird dieser Block ignoriert; dann heben auch
	 * Formular-Karten leicht ab – unschoen, aber voellig unkritisch. */
	.svk-info-card:has(form):hover,
	.svk-info-card:has(input):hover,
	.svk-info-card:has(textarea):hover,
	.svk-info-card:has(select):hover {
		transform: none;
		box-shadow: var(--shadow-sm);
	}

	.svk-info-card:has(form)::after,
	.svk-info-card:has(input)::after,
	.svk-info-card:has(textarea)::after,
	.svk-info-card:has(select)::after {
		display: none;
	}
}

/* ============================================================
 * 5) ANZEIGETAFEL-ZAEHLER (Utility)
 * micro.js zaehlt Elemente mit [data-count-to] beim Sichtbarwerden hoch.
 * CSS sorgt nur dafuer, dass die Ziffern beim Zaehlen nicht in der Breite
 * springen (kein Layout-Jitter).
 * ============================================================ */
[data-count-to] {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ============================================================
 * 6) SANFTE SEITEN-UEBERGAENGE
 * Von micro.js erzeugter Schleier in Hintergrundfarbe (--bg, folgt Light/Dark).
 * Immer pointer-events: none -> selbst wenn er haengen bliebe, waere die Seite
 * weiter bedienbar. micro.js entfernt ihn zusaetzlich per Timeout und pageshow.
 * ============================================================ */
.svk-mikro-veil {
	position: fixed;
	inset: 0;
	z-index: 10060; /* ueber Lightbox (10050), unter nichts Kritischem */
	background: var(--bg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 170ms var(--ease);
}

.svk-mikro-veil.is-aktiv {
	opacity: 1;
}

/* ============================================================
 * 7) SCROLL-FORTSCHRITTSBALKEN
 * Ultraduenne Linie am oberen Rand, ueber dem Sticky-Header (z-index 100),
 * unter allen Overlays. Rein dekorativ (aria-hidden) und klickdurchlaessig,
 * damit die Header-Helligkeitsmessung (elementFromPoint) unberuehrt bleibt.
 * ============================================================ */
.svk-mikro-fortschritt {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 400;
	pointer-events: none;
	background: transparent;
}

.svk-mikro-fortschritt__bar {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	will-change: transform;
	background: linear-gradient(90deg, var(--sv-gelb-500) 0%, var(--sv-gelb-300) 100%);
}

/* ============================================================
 * REDUCED MOTION – Sammelblock
 * Zusaetzlich zur globalen Notbremse in theme.css werden hier alle
 * bewegten Zustaende hart auf „keine Bewegung" gesetzt. micro.js prueft
 * dieselbe Media Query nochmal in JS und startet die Effekte gar nicht erst.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.svk-btn,
	.wp-block-button__link {
		transition: none;
	}

	.svk-btn:hover,
	.svk-btn:active,
	.svk-btn.is-anstoss,
	.wp-block-button__link:hover,
	.wp-block-button__link:active,
	.wp-block-button__link.is-anstoss {
		transform: none;
	}

	.svk-kreide[data-micro-draw] path,
	.svk-kreide[data-micro-draw] line,
	.svk-kreide[data-micro-draw] polyline {
		transition: none;
	}

	.svk-info-card,
	.svk-news-card {
		transition: none;
	}

	.svk-info-card:hover,
	.svk-news-card:hover {
		transform: none;
	}

	/* Die Glanzkante bleibt: sie ist kein Bewegungseffekt, sondern eine
	 * statische Hover-Rueckmeldung – und erscheint hier ohne Blende sofort. */

	.svk-mikro-licht,
	.svk-mikro-veil,
	.svk-mikro-fortschritt {
		display: none;
	}
}

/* Druck: nichts Dekoratives mit auf's Papier. */
@media print {
	.svk-mikro-licht,
	.svk-mikro-veil,
	.svk-mikro-fortschritt {
		display: none !important;
	}
}