/* ==========================================================================
   Kreislaufkraft · Bedienung der Karussells
   --------------------------------------------------------------------------
   Gilt seitenweit fuer jedes Karussell, damit Cross-Selling, Magazin und alles
   Spaetere dieselben Pfeile tragen.

   Ausgangslage: Elementor zeichnet die Pfeile als 25 Pixel grosse Zeichen ohne
   Flaeche in hsla(0,0%,93%,.9), also fast weiss. Auf dem hellgrauen
   Seitenhintergrund waren sie praktisch unsichtbar und sassen ausserdem
   mitten auf der ersten und letzten Karte.

   Wichtig zur Vorgehensweise: Groesse, Farbe und Versatz der Pfeile steuert
   Elementor ueber eigene CSS-Variablen, und zwar aus Regeln mit hoeherer
   Gewichtung als eine Theme-Datei sie erreicht. Dagegen anzuschreiben
   funktioniert nicht. Deshalb werden hier die Variablen gesetzt, und nur was
   Elementor gar nicht vorsieht (Flaeche, Kreisform, Schatten) kommt als eigene
   Regel dazu.
   ========================================================================== */

.elementor-widget-loop-carousel {
	--arrow-size: 18px;
	--arrow-normal-color: #FFFFFF;
	--arrow-hover-color: #FFFFFF;

}

/* Wie weit aussen die Pfeile stehen, regelt Elementor selbst: die Einstellung
   Navigation -> Position auf "Outside" setzt am Widget die Klasse
   .elementor-arrows-position-outside und rueckt die Pfeile neben die Karten.
   Sie steht bei allen vier Karussells der Seite, deshalb wird sie hier nicht
   nachgebaut. Ein eigener Versatz per CSS waere ohnehin aussichtslos: Elementor
   schreibt den Reglerwert je Widget in die Seiten-CSS und damit mit hoeherer
   Gewichtung, als eine Theme-Datei sie erreicht. */

/* Auf Telefonen etwas kleiner, damit der Pfeil die Karte nicht zudeckt. */
@media (max-width: 767px) {
	.elementor-widget-loop-carousel {
		--arrow-size: 16px;
	}
}

/* Die Pfeile stehen neben den Karten, nicht darauf. Statt die Kartenspur
   einzuruecken (das haette die Karten schmaler gemacht) werden die Pfeile per
   negativem Versatz nach aussen geschoben.

   Der Versatz ist gedeckelt, damit er nie aus dem Fenster ragt:
   (100% - 100vw) / 2 ist der Rand, der neben dem Karussell gerade frei ist,
   16 Pixel bleiben als Sicherheitsabstand fuer die Scrollleiste. clamp() nimmt
   davon hoechstens 60 Pixel und im Zweifel 0. Auf breiten Bildschirmen stehen
   die Pfeile also ganz aussen, auf schmalen ruecken sie von selbst zurueck an
   den Rand des Karussells. Ohne diese Deckelung scrollte die Seite quer, sobald
   der Rand schmaler als der Versatz ist, etwa bei 1200 Pixeln Fensterbreite.

   Zum !important: Elementor schreibt den Reglerwert je Widget in die Seiten-CSS
   (.elementor-738 .elementor-element.elementor-element-xxxxxxx) und damit mit
   hoeherer Gewichtung, als eine Theme-Datei sie erreichen kann. Und der Regler
   selbst kann keinen gedeckelten Wert ausdruecken. */
.elementor-widget-loop-carousel.elementor-arrows-position-outside {
	--kk-pfeil-versatz: clamp(-60px, calc((100% - 100vw) / 2 + 16px), 0px);

	--arrow-prev-left-position: var(--kk-pfeil-versatz) !important;
	--arrow-next-right-position: var(--kk-pfeil-versatz) !important;
}

/* Elementor verschmaelert die Kartenspur bei "Outside" um 60 Pixel, um Platz
   fuer die Pfeile zu schaffen. Den brauchen wir nicht mehr, die Pfeile stehen
   ja ausserhalb: die Karten bekommen ihre volle Breite zurueck. */
.elementor-widget-loop-carousel.elementor-arrows-position-outside .swiper {
	width: 100%;
}

/* Flaeche, Kreisform und Schatten kennt Elementor nicht als Variable. Die
   doppelte Klasse im Selektor gibt der Regel das noetige Gewicht. */
.elementor-swiper-button.elementor-swiper-button-prev,
.elementor-swiper-button.elementor-swiper-button-next {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;

	background: var(--e-global-color-accent);
	border-radius: 50%;
	box-shadow: 0 4px 16px rgba(23, 23, 23, .18);

	transition: background-color .2s ease;
	z-index: 2;
}

.elementor-swiper-button.elementor-swiper-button-prev svg,
.elementor-swiper-button.elementor-swiper-button-next svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.elementor-swiper-button.elementor-swiper-button-prev:hover,
.elementor-swiper-button.elementor-swiper-button-next:hover {
	background: #548A0B;
}

/* Sichtbarer Fokus fuer die Tastatur: der weisse Pfeil auf Gruen allein zeigt
   nicht, wo man gerade steht. */
.elementor-swiper-button.elementor-swiper-button-prev:focus-visible,
.elementor-swiper-button.elementor-swiper-button-next:focus-visible {
	outline: 2px solid #171717;
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.elementor-swiper-button.elementor-swiper-button-prev,
	.elementor-swiper-button.elementor-swiper-button-next {
		width: 44px;
		height: 44px;
	}
}

/* Die Punkte unter dem Karussell. Der aktive Punkt traegt die Markenfarbe und
   folgt damit der globalen Elementor-Farbe. */
.swiper-pagination-bullet {
	background: rgba(0, 0, 0, .18);
	opacity: 1;
}

.swiper-pagination-bullet-active {
	background: var(--e-global-color-accent);
}