/**
 * C031 � Radial Stepper � Styles
 *
 * BEM-Namenskonvention mit ti-Pr�fix.
 * Alle dynamischen Werte (Radius, Rotation, Schriftgr��en je Breakpoint-Tier,
 * Blockbreite, Claimbreite ...) werden vom JS als CSS Custom Properties
 * direkt auf .ti-c031-radial-stepper gesetzt (nicht auf :root!), damit
 * mehrere Instanzen der Komponente auf einer Seite sich nicht gegenseitig
 * �berschreiben (�8 der Anforderungen: "kann auch mehrere geben").
 *
 * Farb-Custom-Properties (--ti-c031-bg, --ti-c031-navy, --ti-c031-active)
 * werden zus�tzlich vom Elementor Style-Tab auf .ti-c031-radial-stepper__card
 * gesetzt (siehe PHP-Controls, register_controls()).
 */

.ti-c031-radial-stepper {
	/* Fallback-Defaults, falls JS aus irgendeinem Grund noch nicht gelaufen ist
	   (verhindert FOUC / einen Layout-Sprung beim Erstladen). */
	--ti-c031-dur: 790ms;
	--ti-c031-ease: cubic-bezier(0.25, 0.03, 0.15, 1);
	--ti-c031-pad: 10px;
	--ti-c031-radius: 20px;
	--ti-c031-rot: 0deg;
	--ti-c031-cy: 50%;
	--ti-c031-R: 200px;
	--ti-c031-seg: 90deg;
	--ti-c031-fs-claim: 34px;
	--ti-c031-fs-head: 24px;
	--ti-c031-fs-body: 14px;
	--ti-c031-fs-num: 20px;
	--ti-c031-fs-skip: 14px;
	--ti-c031-icon: 52px;
	--ti-c031-gap1: 10px;
	--ti-c031-gap2: 10px;
	--ti-c031-inward: 30px;
	--ti-c031-blockw: 300px;
	--ti-c031-claimw: 280px;
	--ti-c031-skipin: 10px;
	--ti-c031-claimy: 50%;

	/* Farb-Defaults (werden von den Style-Controls �berschrieben). */
	--ti-c031-bg: #fff554;
	--ti-c031-navy: #10203a;
	--ti-c031-active: #ffffff;

	display: block;
	position: relative;
	width: 100%;
}

/* ---------- Editor-Hinweis (nur sichtbar bei < 3 Stationen im Editor) ---------- */
.ti-c031-radial-stepper__notice {
	padding: 24px;
	border: 2px dashed #d9534f;
	border-radius: 8px;
	background: #fdf2f2;
	color: #a94442;
	font-family: ui-monospace, Menlo, monospace;
	font-size: 13px;
	line-height: 1.6;
}

/* ---------- Dial / Card ---------- */
.ti-c031-radial-stepper__dial {
	/* Die Komponente f�llt bewusst die volle Viewport-H�he (Sheet �2/�3).
	   Der umgebende Elementor-Container ist laut Anforderung ebenfalls auf
	   100vh gesetzt � beide Angaben decken sich, kollidieren also nicht. */
	height: 100vh;
	height: 100dvh;
	padding: var(--ti-c031-pad);
	box-sizing: border-box;
}

.ti-c031-radial-stepper__card {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: var(--ti-c031-bg);
	border-radius: var(--ti-c031-radius);
	box-sizing: border-box;
}

/* ---------- Ring ---------- */
.ti-c031-radial-stepper__ring {
	position: absolute;
	left: 50%;
	top: var(--ti-c031-cy);
	width: 0;
	height: 0;
	transform: rotate(var(--ti-c031-rot));
	transition: transform var(--ti-c031-dur) var(--ti-c031-ease);
	z-index: 1;
}

/* Modifier: unterdr�ckt die Rotationsanimation f�r den initialen Aufbau
   und f�r Resize-Events (Sheet: Klasse ".noanim"). */
.ti-c031-radial-stepper__ring--noanim {
	transition: none;
}

.ti-c031-radial-stepper__ring::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--ti-c031-R));
	top: calc(-1 * var(--ti-c031-R));
	width: calc(2 * var(--ti-c031-R));
	height: calc(2 * var(--ti-c031-R));
	border: 1px solid var(--ti-c031-navy);
	border-radius: 50%;
}

/* ---------- Punkt je Station ---------- */
.ti-c031-radial-stepper__point {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	transform: rotate(calc(-1 * var(--ti-c031-i) * var(--ti-c031-seg)));
}

.ti-c031-radial-stepper__dot {
	position: absolute;
	left: 0;
	top: calc(-1 * var(--ti-c031-R));
	width: 20px;
	height: 20px;
	margin: -10px;
	border-radius: 50%;
	background: var(--ti-c031-navy);
}

.ti-c031-radial-stepper__badge {
	position: absolute;
	left: 0;
	top: calc(-1 * (var(--ti-c031-R) + 52px));
	width: 44px;
	height: 44px;
	margin: -22px;
	border-radius: 50%;
	border: 1px solid var(--ti-c031-navy);
	background: transparent;
	display: grid;
	place-content: center;
	line-height: 1;
	font-size: var(--ti-c031-fs-num);
	letter-spacing: 0;
	color: var(--ti-c031-navy);
	transition: background 300ms ease, border-color 300ms ease;
}

.ti-c031-radial-stepper__badge--on {
	background: var(--ti-c031-active);
	border-color: var(--ti-c031-active);
}

/* ---------- Inhaltsblock (Icon, Titel, Text) je Station ---------- */
.ti-c031-radial-stepper__block {
	position: absolute;
	left: 0;
	top: calc(-1 * (var(--ti-c031-R) - var(--ti-c031-inward)));
	width: var(--ti-c031-blockw);
	margin-left: calc(var(--ti-c031-blockw) / -2);
	text-align: center;
	opacity: 0;
	transition: opacity 260ms ease;
	pointer-events: none;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

.ti-c031-radial-stepper__block--on {
	opacity: 1;
	transition: opacity 450ms ease 180ms;
}

.ti-c031-radial-stepper__icon {
	display: block;
	margin: 0 auto var(--ti-c031-gap1);
	width: var(--ti-c031-icon);
	height: var(--ti-c031-icon);
	color: var(--ti-c031-navy);
}

.ti-c031-radial-stepper__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.ti-c031-radial-stepper__heading {
	font-size: var(--ti-c031-fs-head);
	line-height: 1;
	font-weight: 500;
	margin: 0 0 var(--ti-c031-gap2);
	color: var(--ti-c031-navy);
}

.ti-c031-radial-stepper__text {
	font-size: var(--ti-c031-fs-body);
	line-height: 1.35;
	color: var(--ti-c031-navy);
}

.ti-c031-radial-stepper__text p {
	margin: 0;
}

.ti-c031-radial-stepper__text b,
.ti-c031-radial-stepper__text strong {
	font-weight: 700;
}

/* ---------- Claim ---------- */
.ti-c031-radial-stepper__claim {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--ti-c031-claimy);
	transform: translateY(-50%);
	text-align: center;
	z-index: 3;
	pointer-events: none;
	margin: 0;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.ti-c031-radial-stepper__claim-text {
	display: inline-block;
	max-width: var(--ti-c031-claimw);
	font-size: var(--ti-c031-fs-claim);
	line-height: 1;
	color: var(--ti-c031-navy);
}

/* ---------- Skip-Button ---------- */
.ti-c031-radial-stepper__skip {
	position: absolute;
	top: var(--ti-c031-skipin);
	right: var(--ti-c031-skipin);
	z-index: 10;
	font: inherit;
	color: var(--ti-c031-navy);
	background: none;
	border: 2px solid transparent;
	padding: 5px 6px 8px 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 16px;
}

.ti-c031-radial-stepper__skip:hover {
	background-color: transparent !important;
	color:var(--ti-c031-navy);
}

.ti-c031-radial-stepper__skip:focus {
	background-color: transparent !important;
	color:var(--ti-c031-navy);
}


.ti-c031-radial-stepper__skip:hover .ti-c031-radial-stepper__skip-label {
	text-decoration: none;
}

.ti-c031-radial-stepper__skip:focus-visible {
	border: 2px solid #10203a;
	border-radius: 4px !important;
	background-color: transparent !important;
	color:var(--ti-c031-navy);
}

.ti-c031-radial-stepper__skip-label {
	font-size: var(--ti-c031-fs-skip);
	line-height: 1;
}

/* ---------- Icon-Wechsel-Animation (vertikal: raus unten, rein oben) ----------
   Der Clip-Bereich ist bewusst GRÖSSER als das Icon selbst (32px statt
   16.72px Höhe): Bei einem exakt passenden Clip-Bereich wird die
   Slide-Bewegung nach wenigen Pixeln abgeschnitten und ist praktisch
   unsichtbar. Der zusätzliche Raum macht die Bewegung sichtbar, bevor
   das Icon aus dem Clip-Bereich läuft.
   Der Button nutzt bereits display:flex; align-items:center — der
   höhere Wrap zentriert sich dadurch automatisch, ohne die Buttonhöhe
   spürbar zu beeinflussen. */
.ti-c031-radial-stepper__skip-icon-wrap {
	position: relative;
	width: 9.12px;
	height: 32px; /* vergrößerter Reiseweg statt 16.72px */
	overflow: hidden;
	display: block;
	flex: none;
}

.ti-c031-radial-stepper__skip-icon-slot {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1),
		opacity 300ms ease;
	will-change: transform, opacity;
}

/* Sichtbares Icon im Ruhezustand */
.ti-c031-radial-stepper__skip-icon-slot--out {
	transform: translateY(0);
	opacity: 1;
}

/* Zweites Icon wartet oberhalb außerhalb der sichtbaren Fläche */
.ti-c031-radial-stepper__skip-icon-slot--in {
	transform: translateY(-140%);
	opacity: 0;
}

/* Hover: sichtbares Icon rutscht nach unten raus.
   Opacity-Transition ist bewusst genauso lang wie die Transform-Transition
   (statt kürzer): So bleibt das Icon während der GESAMTEN Bewegung
   sichtbar und blendet erst am Ende der Slide-Strecke aus, statt sofort
   unsichtbar zu werden, während es noch kaum Weg zurückgelegt hat. */
.ti-c031-radial-stepper__skip:hover .ti-c031-radial-stepper__skip-icon-slot--out,
.ti-c031-radial-stepper__skip:focus-visible .ti-c031-radial-stepper__skip-icon-slot--out {
	transform: translateY(140%);
	opacity: 0;
}

/* Hover: zweites Icon rutscht von oben rein */
.ti-c031-radial-stepper__skip:hover .ti-c031-radial-stepper__skip-icon-slot--in,
.ti-c031-radial-stepper__skip:focus-visible .ti-c031-radial-stepper__skip-icon-slot--in {
	transform: translateY(0);
	opacity: 1;
}

.ti-c031-radial-stepper__skip-icon {
	width: 9.12px;
	height: 16.72px;
	display: block;
	transform: rotate(0deg);
	transform-origin: 50% 50%;
	transition: transform 300ms var(--ti-c031-ease);
}

/* Aufwärts-Zustand: Pfeil zeigt nach oben (rotiert nur die SVG,
   nicht den Slot — daher keine Kollision mit der Slide-Animation). */
.ti-c031-radial-stepper__skip--up .ti-c031-radial-stepper__skip-icon {
	transform: rotate(180deg);
}

/* ---------- Umgekehrte Slide-Richtung im Aufwärts-Zustand ----------
   Wenn der Skip-Button nach oben zeigt (entryDir < 0, Klasse --up auf
   dem Button selbst gesetzt), soll die Wechsel-Animation ebenfalls
   gespiegelt ablaufen: Ruhezustand oben raus, Hover-Icon von unten rein
   — passend zur Blickrichtung des Pfeils.
   Wichtig: Diese Regeln überschreiben NUR die Ruhepositionen (--out/--in)
   und die Hover-Zielpositionen. Die SVG-Rotation selbst bleibt unberührt,
   da sie auf einem anderen Element (.skip-icon) sitzt. */

/* Ruhezustand im --up-Modus: identisch zum Normalzustand (Icon sichtbar),
   nur die STARTPOSITION des wartenden zweiten Icons ändert sich. */
.ti-c031-radial-stepper__skip--up .ti-c031-radial-stepper__skip-icon-slot--in {
	transform: translateY(140%); /* wartet jetzt UNTEN statt oben */
}

/* Hover im --up-Modus: sichtbares Icon rutscht nach OBEN raus */
.ti-c031-radial-stepper__skip--up:hover .ti-c031-radial-stepper__skip-icon-slot--out,
.ti-c031-radial-stepper__skip--up:focus-visible .ti-c031-radial-stepper__skip-icon-slot--out {
	transform: translateY(-140%);
}

/* Hover im --up-Modus: zweites Icon rutscht von UNTEN rein */
.ti-c031-radial-stepper__skip--up:hover .ti-c031-radial-stepper__skip-icon-slot--in,
.ti-c031-radial-stepper__skip--up:focus-visible .ti-c031-radial-stepper__skip-icon-slot--in {
	transform: translateY(0);
}


/* ---------- Body-Lock (global, nicht auf die Komponente scopebar) ----------
   Wird gesetzt, sobald die Komponente den Scroll "einf�ngt" (Sheet �11.2).
   Bewusst body-weit, da position:fixed auf dem <body> selbst gesetzt wird.
   Der bereits vorhandene fixed-Header der Seite bleibt davon unber�hrt,
   da er unabh�ngig vom Dokumentenfluss positioniert ist. */
body.ti-c031-body--locked {
	position: fixed;
	left: 0;
	right: 0;
}

/* ---------- Scrollbar-Stabilität (verhindert Layout-Sprung durch den
   fixed Header, siehe JS: TiC031Shared.ensureScrollbarStability()) ----------
   scrollbar-gutter reserviert den Platz der Scrollbar dauerhaft auf
   Viewport-Ebene. Anders als eine padding-right-Kompensation auf <body>
   wirkt das auch auf position:fixed-Elemente wie den Seiten-Header, da
   deren Containing Block der echte Browser-Viewport ist und NICHT durch
   Innenabstände auf <html>/<body> beeinflusst werden kann. */
html.ti-c031-scrollbar-stable {
	scrollbar-gutter: stable;
}

/* ---------- Reduced Motion (a11y, Sheet-Vorgabe 1:1 �bernommen) ---------- */
@media (prefers-reduced-motion: reduce) {
	.ti-c031-radial-stepper {
		--ti-c031-dur: 1ms;
	}

	.ti-c031-radial-stepper__block,
	.ti-c031-radial-stepper__block--on,
	.ti-c031-radial-stepper__badge,
	.ti-c031-radial-stepper__skip-icon,
	.ti-c031-radial-stepper__skip-icon-slot {
		transition-duration: 1ms !important;
		transition-delay: 0ms !important;
	}
}

/* ---------- Scroll-Kontrolle ----------
   Das Theme/Setup setzt html { scroll-behavior: smooth }. Jeder eigene
   window.scrollTo()-Aufruf würde dadurch zusätzlich nativ smooth animiert –
   unsere rAF-Animation und die Browser-Animation schreiben dann gleichzeitig
   die Scroll-Position (sichtbar als Hängen/Springen).
   Die Klasse wird vom JS NUR während Andock-/Freigabe-Animationen gesetzt
   und danach sofort entfernt, damit Anker-Links der Seite unangetastet bleiben. */
html.ti-c031-scroll-control {
	scroll-behavior: auto !important;
}