/* =========================================================
 *  LS Hotspot Container – Container-Erweiterung
 * ========================================================= */

/* WICHTIG: Diese hochspezifischen Regeln stellen sicher, dass die
   per Inline-Variablen gesetzten Stile gewinnen – auch gegen evtl.
   von Elementor generierte Regeln (z. B. globale Farben). Bewiesen
   per Live-Test im Editor. */
.elementor .elementor-element.lshc-has-hotspots .lshc-layer .lshc-marker {
	background: var(--lshc-marker-bg, #46c40f) !important;
	color: var(--lshc-icon-color, #fff) !important;
	width: var(--lshc-marker-size, 28px) !important;
	height: var(--lshc-marker-size, 28px) !important;
	border-radius: var(--lshc-marker-radius, 50%) !important;
}
.elementor .elementor-element.lshc-has-hotspots .lshc-layer .lshc-marker i,
.elementor .elementor-element.lshc-has-hotspots .lshc-layer .lshc-marker svg {
	width: var(--lshc-icon-size, 14px) !important;
	height: var(--lshc-icon-size, 14px) !important;
	font-size: var(--lshc-icon-size, 14px) !important;
}
.elementor .elementor-element.lshc-has-hotspots .lshc-layer .lshc-label {
	background: var(--lshc-label-bg, rgba(20,28,38,.92)) !important;
	color: var(--lshc-label-color, #fff) !important;
	border-radius: var(--lshc-label-radius, 10px) !important;
}
.elementor .elementor-element.lshc-has-hotspots .lshc-layer .lshc-hotspot.is-pulse .lshc-marker::after {
	box-shadow: 0 0 0 0 var(--lshc-pulse-color, rgba(70,196,15,.5));
}

/* Container braucht position:relative als Bezug für die Ebene. */
.elementor-element.lshc-has-hotspots {
	position: relative;
}

/* Hotspot-Ebene über dem Container – lässt Klicks auf Widgets durch. */
.lshc-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}

/* ---------- Hotspot ---------- */
/* Hotspot = Null-Größe-Ankerpunkt am exakten %-Punkt.
   Marker und Label werden RELATIV zu diesem Punkt platziert,
   sodass die Label-Länge den Ankerpunkt nie verschiebt.
   Frontend und Editor nutzen exakt diese Regeln → keine Abweichung. */
.lshc-layer .lshc-hotspot {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none; /* nur Marker/Label sind klickbar */
	text-decoration: none;
}

/* Marker: zentriert auf dem Ankerpunkt */
.lshc-layer .lshc-marker {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: transform .2s ease;
	pointer-events: auto;
	cursor: pointer;
	width: var(--lshc-marker-size, 28px);
	height: var(--lshc-marker-size, 28px);
	color: var(--lshc-icon-color, #fff);
	background: var(--lshc-marker-bg, #46c40f);
	border-radius: var(--lshc-marker-radius, 50%);
}

/* Label: absolut neben dem Marker, vertikal zentriert auf dem Punkt.
   Standard = rechts vom Marker. */
.lshc-layer .lshc-label {
	position: absolute;
	top: 0;
	left: calc(var(--lshc-marker-size, 28px) / 2 + 10px);
	transform: translateY(-50%);
	white-space: nowrap;
	pointer-events: auto;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	line-height: 1.2;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
	color: var(--lshc-label-color, #fff);
	background: var(--lshc-label-bg, rgba(20,28,38,.92));
	padding: 8px 14px;
	border-radius: var(--lshc-label-radius, 10px);
}

/* Label links vom Marker */
.lshc-has-hotspots[data-lshc-label="left"] .lshc-layer .lshc-label {
	left: auto;
	right: calc(var(--lshc-marker-size, 28px) / 2 + 10px);
}

.lshc-layer .lshc-hotspot:hover .lshc-marker,
.lshc-layer .lshc-hotspot:focus-visible .lshc-marker {
	transform: translate(-50%, -50%) scale(1.1);
}

.lshc-layer .lshc-marker i,
.lshc-layer .lshc-marker svg {
	width: var(--lshc-icon-size, 14px);
	height: var(--lshc-icon-size, 14px);
	font-size: var(--lshc-icon-size, 14px);
	fill: currentColor;
}

/* Puls */
.lshc-layer .lshc-hotspot.is-pulse .lshc-marker::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 var(--lshc-pulse-color, rgba(70,196,15,.5));
	animation: lshc-pulse 2s infinite;
}

@keyframes lshc-pulse {
	0%   { box-shadow: 0 0 0 0 var(--lshc-pulse-color, rgba(70,196,15,.5)); }
	70%  { box-shadow: 0 0 0 14px rgba(70,196,15,0); }
	100% { box-shadow: 0 0 0 0 rgba(70,196,15,0); }
}

@media (prefers-reduced-motion: reduce) {
	.lshc-layer .lshc-hotspot.is-pulse .lshc-marker::after { animation: none; }
}

/* ---------- Tooltip (verankert am Punkt, oberhalb des Markers) ---------- */
.lshc-layer .lshc-tooltip {
	position: absolute;
	left: 0;
	bottom: calc(50% + var(--lshc-marker-size, 28px) / 2 + 12px);
	transform: translateX(-50%) translateY(6px);
	min-width: 160px;
	max-width: 240px;
	padding: 10px 12px;
	background: #141c26;
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,.3);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 20;
	white-space: normal;
	pointer-events: none;
}

.lshc-layer .lshc-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #141c26;
}

.lshc-layer .lshc-tooltip-title { display: block; font-weight: 700; margin-bottom: 2px; }
.lshc-layer .lshc-tooltip-text  { display: block; font-size: 13px; opacity: .9; }

.lshc-tip-bottom .lshc-tooltip { bottom: auto; top: calc(50% + var(--lshc-marker-size, 28px) / 2 + 12px); }
.lshc-tip-bottom .lshc-tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #141c26; }
.lshc-tip-left .lshc-tooltip  { left: auto; right: calc(50% + var(--lshc-marker-size, 28px) / 2 + 12px); bottom: 50%; transform: translateY(50%); }
.lshc-tip-left .lshc-tooltip::after  { left: 100%; top: 50%; transform: translateY(-50%); border-top-color: transparent; border-left-color: #141c26; }
.lshc-tip-right .lshc-tooltip { left: calc(50% + var(--lshc-marker-size, 28px) / 2 + 12px); right: auto; bottom: 50%; transform: translateY(50%); }
.lshc-tip-right .lshc-tooltip::after { left: auto; right: 100%; top: 50%; transform: translateY(-50%); border-top-color: transparent; border-right-color: #141c26; }

/* Hover-Auslöser: feuert über Marker/Label, da der Anker selbst
   pointer-events:none hat. :hover am .lshc-hotspot via Kind-Hover. */
.lshc-trigger-hover:hover .lshc-tooltip,
.lshc-trigger-hover:focus-within .lshc-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.lshc-tip-left.lshc-trigger-hover:hover .lshc-tooltip,
.lshc-tip-right.lshc-trigger-hover:hover .lshc-tooltip { transform: translateY(50%); }

.lshc-layer .lshc-tooltip.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* ---------- Popup / Modal (am body) ---------- */
.lshc-popup-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.6);
	z-index: 99999;
	padding: 20px;
}
.lshc-popup-overlay.is-open { display: flex; }

.lshc-popup {
	position: relative;
	background: #fff;
	color: #1a1a1a;
	max-width: 560px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.lshc-popup-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #555;
}
.lshc-popup-close:hover { color: #000; }

/* ---------- Editor: Hotspots sichtbar über Elementor-Overlays ---------- */
.elementor-editor-active .lshc-layer {
	z-index: 1; /* unter Elementors Resize-Handles, über Inhalt */
}
.elementor-editor-active .lshc-layer .lshc-hotspot {
	pointer-events: auto;
}