/**
 * Block: Technologien Info-Panel
 */

/* Technologie Circle Elements in SVG */
.technologie-circle {
	cursor: pointer;
	outline: none;
	transition: all 0.2s ease;
	pointer-events: bounding-box;
}

.technologie-circle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.technologie-circle path[fill] {
	transition: fill 0.2s ease;
	pointer-events: none;
}

.technologie-circle path[stroke] {
	transition: stroke 0.2s ease;
	pointer-events: none;
}

/* Active State */
.technologie-circle.is-active path[fill] {
	fill: #8cbf94;
}

.technologie-circle.is-active path[stroke] {
	stroke: #8cbf94;
}

/* Hover/Focus State */
/* :hover nur für echte Zeigegeräte: iOS/Touch lösen :hover per Tap aus und
   heben es nie wieder auf ("sticky hover") - der Kreis bliebe sonst nach
   jedem Tap grün, unabhängig vom Fokus-Status. */
@media (hover: hover) {
	.technologie-circle:hover path[fill] {
		fill: #8cbf94;
	}

	.technologie-circle:hover path[stroke] {
		stroke: #8cbf94;
	}
}

/* focus-visible statt focus-within: sonst bleibt ein per Klick fokussierter
   Kreis dauerhaft grün eingefärbt, auch wenn er gar nicht mehr aktiv ist -
   der Browser entfernt den Fokus nach einem Klick nicht von selbst.
   (frontend.js entfernt den Fokus zusätzlich per blur() nach Klick/Tap,
   für Browser die auch Touch als :focus-visible werten.) */
.technologie-circle:focus-visible path[fill] {
	fill: #8cbf94;
}

.technologie-circle:focus-visible path[stroke] {
	stroke: #8cbf94;
}

/* Info Panel */
/* position: relative macht den Wrapper zum offsetParent der Schritte -
   frontend.js nutzt step.offsetTop, um beim Klick auf eine Zahl
   innerhalb des Wrappers an die richtige Stelle zu scrollen. */
.technologien-map__wrapper {
	position: relative;
}

.technologien-map__info {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 420px;
}

.technologien-map__step {
	box-sizing: border-box;
	background: white;
	border: 1px solid black;
	padding: 20px;
	border-radius: 12px;
}

.technologien-map__info h3 {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: 600;
}

.technologien-map__info p:last-child {
	margin-bottom: 0;
}

/* Desktop: Wrapper scrollt seinen Inhalt intern. */
@media (min-width: 783px) {
	.technologien-map__wrapper {
		max-height: 575px;
		overflow-y: auto;
		padding-right: 6px;
		scrollbar-width: thin;
		scrollbar-color: #8cbf94 #deefdf00;
	}

	/* Scrollbar wie bei den Meilensteinen */
	.technologien-map__wrapper::-webkit-scrollbar {
		width: 12px;
	}

	.technologien-map__wrapper::-webkit-scrollbar-track {
		background: #deefdf00;
		border-radius: 6px;
	}

	.technologien-map__wrapper::-webkit-scrollbar-thumb {
		background: #8cbf94;
		border-radius: 6px;
	}

	.technologien-map__wrapper::-webkit-scrollbar-thumb:hover {
		background: #709976;
	}
}

/* Mobile: Schritte horizontal zum Durchswipen */
@media (max-width: 782px) {
	.technologien-map__wrapper {
		overflow: hidden;
		max-width: calc(100vw - var(--wp--preset--spacing--40));
	}

	.technologien-map__info {
		flex-direction: row;
		align-items: flex-start;
		max-width: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.5rem;
		/* Sonst hat nur die letzte Karte keinen Abstand nach rechts,
		   da sonst keine weitere Karte danach den Platz reserviert. */
		padding-right: var(--wp--preset--spacing--40);
	}

	/* start statt center: sonst können Karten am Rand (erste/letzte)
	   nicht bis zur Mitte scrollen und der Abstand nach links wirkt
	   von Karte zu Karte unterschiedlich groß. */
	.technologien-map__step {
		flex: 0 0 100%;
		width: 100%;
		max-width: calc(100% - var(--wp--preset--spacing--40));
		scroll-snap-align: start;
	}

	.technologien-map__info h3 {
		font-size: 1.25rem;
		margin-bottom: 0;
	}
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.technologie-circle,
	.technologie-circle path[fill],
	.technologie-circle path[stroke] {
		transition: none;
	}
}