/*
 * Verlinkte Kletterer („KLETTERN“ → Buchung)
 *
 * Gilt für jede SVG mit id="Klettern_Button…", die einen Link enthält. Die Grafiken sind 189 Einheiten
 * breit: oben das Seil, darunter Figur und Button (zusammen rund 218 Einheiten hoch).
 *
 * - Breite Bildschirme: Der Kletterer hängt mittig im freien Rand neben dem Inhalt, das Seil kommt von der
 *   Oberkante der Sektion. Die Größe richtet sich nach der Randbreite (höchstens 150px).
 * - Darunter: Der Kletterer steht oben in der Sektion, bündig zur Inhaltsspalte, mit kurzem Seilstück.
 *   Der Inhalt folgt darunter, nichts wird überdeckt.
 *
 * Je Kletterer einstellbar (unten):
 *   --kl-seil    Seillänge über der Figur in viewBox-Einheiten (hängt von der Grafik ab)
 *   --kl-inhalt  Inhaltsbreite der Sektion; daraus ergibt sich der freie Rand
 *   Seite        links (Standard) oder rechts
 */

svg[id^="Klettern_Button"]:has(a) {
	--kl-seil: 615;
	--kl-inhalt: var(--wp--style--global--wide-size);
	--kl-breite: clamp(110px, 12vw, 140px);
	--kl-seil-sichtbar: 2.5rem;

	display: block;
	position: relative !important;
	inset: auto !important;
	float: none !important;
	z-index: 1;
	width: var(--kl-breite) !important;
	height: auto !important;
	max-width: none !important;
	/* Inline-Attribute wie transform="translate(0, -28) scale(0.8)" neutralisieren */
	transform: none !important;
	transform-origin: 50% 0;
	/* Seil bis auf ein kurzes Stück nach oben aus der Sektion schieben (dort abgeschnitten) */
	margin: calc(var(--kl-seil) / -189 * var(--kl-breite) + var(--kl-seil-sichtbar)) 0 0 max(0px, calc((100% - var(--kl-inhalt)) / 2)) !important;
	transition: scale .2s ease-in-out;
}

svg[id^="Klettern_Button"]:has(a):hover {
	scale: 1.03;
}

svg[id^="Klettern_Button"]:has(a:focus-visible) {
	outline: 3px solid var(--wp--preset--color--accent-3);
	outline-offset: 4px;
}

svg[id^="Klettern_Button"] a:focus {
	outline: none;
}

/* Sektion mit Kletterer: abgeschnittenes Seil nicht zeigen, negativen Rand nicht nach außen durchreichen */
:has(> svg[id^="Klettern_Button"] a) {
	position: relative;
	overflow: hidden;
}

/* Grafiken mit kürzerem Seil */
svg:is(#Klettern_Button_Angebote, #Klettern_Button_Einstiegsseite_Angebote, #Klettern_Button):has(a) {
	--kl-seil: 82;
}

svg#Klettern_Button_Oeffnungszeiten:has(a) {
	--kl-seil: 137;
}

/* Sektionen mit normaler Inhaltsbreite (sonst: breite Inhalte); Liste auch in @media (min-width: 1400px) pflegen */
svg:is(#Klettern_Button_Angebote, #Klettern_Button_Einstiegsseite_Angebote, #Klettern_Button, #Klettern_Button_Oeffnungszeiten, #Klettern_Button_Impressum, #Klettern_Button_agb, #Klettern_Button_FAQ_2):has(a) {
	--kl-inhalt: var(--wp--style--global--content-size);
}

/* Kletterer auf der rechten Seite */
svg:is(#Klettern_Button_Angebote, #Klettern_Button_Einstiegsseite_Angebote):has(a) {
	margin-left: auto !important;
	margin-right: max(0px, calc((100% - var(--kl-inhalt)) / 2)) !important;
}

/*
 * Im Rand hängen, sobald dort mindestens ~110px Platz sind (Rand = (Breite − Inhalt) / 2, abzüglich je 20px Luft).
 * Normale Inhaltsbreite (1077px) ab 1400px, breite Inhalte (1560px) ab 1860px.
 */
@media (min-width: 1400px) {
	svg:is(#Klettern_Button_Angebote, #Klettern_Button_Einstiegsseite_Angebote, #Klettern_Button, #Klettern_Button_Oeffnungszeiten, #Klettern_Button_Impressum, #Klettern_Button_agb, #Klettern_Button_FAQ_2):has(a) {
		--kl-rand: calc((100% - var(--kl-inhalt)) / 2);
		--kl-breite: min(150px, calc(var(--kl-rand) - 40px));
		position: absolute !important;
		top: 0 !important;
		left: max(1rem, calc((var(--kl-rand) - var(--kl-breite)) / 2)) !important;
		margin: 0 !important;
	}
}

@media (min-width: 1860px) {
	svg[id^="Klettern_Button"]:has(a) {
		--kl-rand: calc((100% - var(--kl-inhalt)) / 2);
		--kl-breite: min(150px, calc(var(--kl-rand) - 40px));
		position: absolute !important;
		top: 0 !important;
		left: max(1rem, calc((var(--kl-rand) - var(--kl-breite)) / 2)) !important;
		margin: 0 !important;
	}
}

@media (min-width: 1400px) {
	svg:is(#Klettern_Button_Angebote, #Klettern_Button_Einstiegsseite_Angebote):has(a) {
		left: auto !important;
		right: max(1rem, calc((var(--kl-rand) - var(--kl-breite)) / 2)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	svg[id^="Klettern_Button"]:has(a) {
		transition: none;
	}
}