/* LCC Embed */

.lcc {
	position: relative;
	display: block;
	width: 100%;
	overscroll-behavior: contain;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	background: var(--lcc-bg, #0c0d0f);
	border-radius: var(--lcc-radius, 6px);
	overflow: hidden;
	isolation: isolate;
}

.lcc__stage {
	position: relative;
	width: 100%;
	height: var(--lcc-height, 640px);
}

.lcc--ratio .lcc__stage {
	height: auto;
	aspect-ratio: var(--lcc-ratio, 16/9);
}

.lcc__stage iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Vorschaubild / Klick zum Laden */

.lcc__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: var(--lcc-bg, #0c0d0f);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.lcc__posterLabel {
	padding: var(--lcc-poster-pad, .7em 1.4em);
	border-radius: var(--lcc-poster-radius, 999px);
	background: var(--lcc-poster-bg, rgba(12, 13, 15, .72));
	color: var(--lcc-poster-color, #fff);
	font-size: .95rem;
	line-height: 1;
	transition: background .2s ease;
}

.lcc__poster:hover .lcc__posterLabel,
.lcc__poster:focus-visible .lcc__posterLabel {
	background: var(--lcc-poster-bg-hover, rgba(12, 13, 15, .92));
}

/* Vollbild-Schalter: nur das PNG, sonst nichts.
   Der Reset ueberschreibt Theme- und Elementor-Styles fuer button-Elemente,
   die sonst Hintergrund, Rahmen und Innenabstand mitbringen. */

.lcc .lcc__fs,
.lcc .lcc__fs:hover,
.lcc .lcc__fs:focus,
.lcc .lcc__fs:active,
.lcc .lcc__fs:visited {
	position: absolute;
	z-index: 5;
	display: block;
	box-sizing: border-box !important;
	width: var(--lcc-btn-size, 40px) !important;
	height: var(--lcc-btn-size, 40px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
	transform: none !important;
	font: inherit;
	line-height: 0 !important;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	overflow: visible;
	cursor: pointer;
	-webkit-appearance: none !important;
	appearance: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: opacity .2s ease;
}

.lcc .lcc__fs:hover {
	opacity: var(--lcc-btn-opacity-hover, .8);
}

.lcc .lcc__fs:focus-visible {
	outline: 2px solid #fff !important;
	outline-offset: 3px;
	border-radius: 12px !important;
}

/* Standardplatzierung des Schalters an der Leiste des XGRIDS-Viewers */

.lcc--toolbar {
	--lcc-btn-size: 40px;
	--lcc-btn-x: 160px;
	--lcc-btn-y: 14px;
}

.lcc--br .lcc__fs { right: var(--lcc-btn-x, 14px); bottom: var(--lcc-btn-y, 14px); }
.lcc--bl .lcc__fs { left:  var(--lcc-btn-x, 14px); bottom: var(--lcc-btn-y, 14px); }
.lcc--tr .lcc__fs { right: var(--lcc-btn-x, 14px); top:    var(--lcc-btn-y, 14px); }
.lcc--tl .lcc__fs { left:  var(--lcc-btn-x, 14px); top:    var(--lcc-btn-y, 14px); }

.lcc .lcc__icon {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: contain;
	pointer-events: none;
}

/* Umschaltung: immer nur eines der beiden Symbole.
   Braucht !important, weil die Grundregel oben ebenfalls damit arbeitet. */

.lcc .lcc__icon--exit { display: none !important; }
.lcc.is-full .lcc__icon--open { display: none !important; }
.lcc.is-full .lcc__icon--exit { display: block !important; }

/* Echtes Vollbild */

.lcc:fullscreen,
.lcc:-webkit-full-screen {
	border-radius: 0;
	background: #000;
}

.lcc:fullscreen .lcc__stage,
.lcc:-webkit-full-screen .lcc__stage {
	height: 100%;
	aspect-ratio: auto;
}

/* Ersatz-Vollbild für iOS */

.lcc.is-faux {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	border-radius: 0;
	background: #000;
}

.lcc.is-faux .lcc__stage {
	height: 100%;
	aspect-ratio: auto;
}

html.lcc-locked,
body.lcc-locked {
	overflow: hidden !important;
	touch-action: none;
}

/* Seite gesperrt, solange der Zeiger ueber dem Viewer steht.
   Der Ausgleich haelt die Breite der Scrollleiste frei, damit das
   Layout beim Betreten des Viewers nicht springt. */

/* Platz der Scrollleiste dauerhaft reservieren. Dann aendert sich beim
   Sperren gar nichts an der Fensterbreite - auch nicht fuer Elemente mit
   100vw oder fuer feststehende Kopfbereiche, die ein Innenabstand nicht
   erreichen wuerde. Die Klasse setzt das Skript nur, wenn der Browser
   scrollbar-gutter kennt. */

html.lcc-gutter {
	scrollbar-gutter: stable;
}

html.lcc-noscroll {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* Rueckfallweg fuer Browser ohne scrollbar-gutter: gemessener Ausgleich. */

html.lcc-noscroll:not(.lcc-gutter) {
	padding-right: var(--lcc-scrollbar, 0px);
}

body.lcc-noscroll {
	overscroll-behavior: none;
}

/* Im Elementor-Editor bleibt das Widget anklickbar */

.lcc__guard {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.lcc .lcc__fs,
	.lcc .lcc__posterLabel { transition: none; }
}