/* Seitliches Kontaktpanel — Werte aus dem Original uebernommen.
   Das gesamte Element liegt fest am rechten Rand und faehrt von
   right:-410px auf right:0; die 80px breiten Tabs bleiben dadurch sichtbar. */
/* Elementor setzt fuer Container eigene Positionierung; deshalb hier bewusst
   mit hoher Spezifitaet und !important, sonst bleibt das Panel relativ im
   Seitenfluss stehen statt am Bildschirmrand zu kleben. */
.elementor .floating-contact,
.floating-contact.e-con,
.floating-contact {
	display: flex !important;
	position: fixed !important;
	right: -410px;
	top: 33%;
	z-index: 101 !important;
	width: auto !important;
	max-width: none !important;
	align-items: flex-start;
	--width: auto;
}

/* Fahrt nur waehrend .animiert (setzt sidepanel.js beim Oeffnen/Schliessen fuer
   350ms). Ohne diese Bindung blitzt das Panel bei jedem Wechsel des
   Elementor-Geraetemodus auf - beim Ziehen der Fensterbreite und beim Laden
   auf dem Handy, bevor Elementor den Modus gesetzt hat. */
.floating-contact.animiert { transition: right .25s ease-in-out; }

/* Muss die Grundregel sicher schlagen — Elementor erzeugt fuer denselben
   Container eigene Regeln gleicher Spezifitaet, die spaeter im Dokument stehen. */
.elementor .floating-contact.offen,
.floating-contact.offen { right: 0 !important; }

/* --- Tabs (linke Spalte) ---
   Elementor-Container bringen eigene Breiten ueber die Variable --width mit,
   deshalb hier ausdruecklich festsetzen. */
.floating-contact .floating-left {
	width: 80px !important;
	max-width: 80px !important;
	flex: 0 0 80px !important;
	--width: 80px;
}

/* Akzentfarbe kommt aus dem Elementor-Kit, damit ein Farbwechsel im Kit hier
   automatisch mitgeht. Fallback = Markenfarbe #20D5D2.
   Beschriftung dunkelblau statt weiss: auf dem hellen Tuerkis waere Weiss
   nicht lesbar, die Designvorlage setzt dort ebenfalls dunkle Schrift. */
.floating-contact .floating-left .elementor-widget {
	background: var(--e-global-color-accent, #20D5D2);
	color: var(--e-global-color-primary, #0B2B49);
	cursor: pointer;
	padding: 14px 6px;
	transition: background-color .25s ease-in-out;
}

.floating-contact.offen .floating-left .elementor-widget { background: rgba(32, 213, 210, .85); }
.floating-contact .floating-left .elementor-widget.aktiv   { background: var(--e-global-color-accent, #20D5D2); }

.floating-contact .floating-left .elementor-icon,
.floating-contact .floating-left .elementor-icon-box-title { color: var(--e-global-color-primary, #0B2B49); }
.floating-contact .floating-left .elementor-icon svg { fill: var(--e-global-color-primary, #0B2B49); width: 22px; height: 22px; }

/* --- Panel (rechte Spalte) --- */
.floating-contact .floating-right {
	width: 410px !important;
	max-width: 410px !important;
	flex: 0 0 410px !important;
	--width: 410px;
}
.floating-contact .content-solution,
.floating-contact .content-contact { display: none; }
.floating-contact .content-solution.sichtbar,
.floating-contact .content-contact.sichtbar { display: block; }

.floating-contact .floating-right .elementor-icon-list-item a { color: #50555a; text-decoration: none; }
.floating-contact .floating-right .elementor-icon-list-item a:hover { text-decoration: underline; }

/* --- Mobil: Panel klappt in der Breite auf statt seitlich einzufahren ---
   Frueher galt hier right:calc(-100vw + 80px) in einer @media-Regel. Die war
   schwaecher als die Grundregel (.elementor .floating-contact), es blieb bei
   right:-410px: Das Panel ragte rechts aus dem Bild, Handybrowser verbreiterten
   daraufhin die Seite, sie liess sich seitlich verschieben und die Tabs hingen
   mitten im Inhalt. Jetzt liegt das Element mobil immer bei right:0 und die
   rechte Spalte ist geschlossen 0px breit - es ragt nichts mehr ueber den Rand.
   Umschaltung ueber Elementors Geraetemodus. */
body[data-elementor-device-mode="mobile"] .floating-contact {
	right: 0 !important;
}
body[data-elementor-device-mode="mobile"] .floating-contact .floating-right {
	flex: 0 0 0px !important;
	width: 0 !important;
	max-width: 0 !important;
	--width: 0px;
	padding: 0 !important;
	overflow: hidden;
}
body[data-elementor-device-mode="mobile"] .floating-contact.animiert .floating-right {
	transition: flex-basis .25s ease-in-out, width .25s ease-in-out, max-width .25s ease-in-out;
}
body[data-elementor-device-mode="mobile"] .floating-contact.offen .floating-right {
	flex: 0 0 calc(100vw - 80px) !important;
	width: calc(100vw - 80px) !important;
	max-width: calc(100vw - 80px) !important;
	--width: calc(100vw - 80px);
	padding: 20px !important;
}

/* --- Bei reduzierter Bewegung ohne Fahrt umschalten --- */
@media (prefers-reduced-motion: reduce) {
	.floating-contact,
	.floating-contact .floating-right { transition: none !important; }
}