/*
 * Laserklar: die Seite "Graffiti-Laser" (Widget lkl-laser, inc/widget-szene.php,
 * Skript assets/js/szene.js aus src/szene.js). Original component written for this template.
 *
 * Ein schwebender Laserkopf prüft eine besprühte Wand mit UV-Licht und lasert das Graffiti weg:
 * sechs bildschirmhohe Abschnitte, darüber eine feste 3D-Bühne (Canvas), Erklär-Schilder,
 * Statuskarte und Ladezeichen.
 * Alles hängt unter .lks (keine Regeln für section/body/html allein), Zustände
 * stehen als is-… am Wurzelelement, Keyframes heißen lks-…. Nur auf dieser
 * Seite geladen (inc/solar.php). Ohne JavaScript bleibt alles sichtbar; im
 * Elementor-Editor steht die Seite still (ohne 3D, ohne feste Ebenen).
 */

/* ---------------------------------------------------------------- Wurzel */
.lks {
	--lks-ink: #16181d;
	--lks-muted: #555a63;
	--lks-grund: #f1eee8;
	--lks-num: #ddd5c8;
	--lks-num-dark: rgba(155, 114, 255, 0.34);
	--lks-akzent: #c2410c;
	--lks-pad: clamp(18px, 3.2vw, 46px);
	position: relative;
	/* Poppins hat kein Kyrillisch, Arabisch, Chinesisch: dann Geist bzw. die Schrift des Geräts */
	font-family: "Poppins", "Geist Cyrillic", system-ui, sans-serif;
	font-weight: 400;
	color: var(--lks-ink);
	background: var(--lks-grund);
	/* gegen die Grundregeln der Seite (Zeilenhöhe 1.5, Wortbruch überall) */
	line-height: normal;
	overflow-wrap: normal;
	text-align: start;
	-webkit-font-smoothing: antialiased;
	/* die Deko-Bilder ragen hinaus: abschneiden, ohne einen Scrollbereich zu machen */
	overflow-x: clip;
}
.lks *,
.lks *::before,
.lks *::after {
	box-sizing: border-box;
}
/* doppelte Klasse: schlägt Abstände, Schrift- und Linkfarben aus Theme oder Elementor-Website-Einstellungen */
.lks.lks :is(h1, h2, p, ul, li) {
	margin: 0;
	padding: 0;
}
.lks.lks :is(h1, h2, a, button) {
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: none;
}
/* …die große Überschrift behält trotzdem ihren engen Buchstabenabstand */
.lks.lks .lks-h1 {
	letter-spacing: -0.035em;
}
.lks.lks :is(h1, h2) {
	color: inherit;
}
.lks.lks ul {
	list-style: none;
}
.lks.lks a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}
.lks svg {
	display: block;
}

/* ---------------------------------------------------------- Navigation */
.lks-nav {
	position: fixed;
	z-index: 30;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	padding: 18px var(--lks-pad) 0;
	pointer-events: none;
	transition: color 0.5s ease;
}
.lks-nav > * {
	pointer-events: auto;
}
/* das Logo wie oben auf der Startseite (lkl_logo_mark()): das Laserklar-Zeichen oder das eigene Logo-Bild, daneben der Firmenname */
.lks .lks-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	min-height: 44px;
	margin-inline-end: clamp(28px, 5vw, 66px);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
.lks .lks-mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 12px;
	color: #ff6a2b;
	background:
		radial-gradient(60% 50% at 40% 50%, rgba(255, 90, 31, 0.28), transparent 70%),
		linear-gradient(160deg, #2c2f36 0%, #16181d 70%);
	box-shadow: 0 10px 22px -12px rgba(22, 24, 29, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lks .lks-mark-icon {
	width: 22px;
	height: 22px;
	filter: drop-shadow(0 0 3px rgba(255, 90, 31, 0.9));
}
.lks .lks-logo-img {
	display: block;
	width: auto;
	max-width: 150px;
	height: 38px;
	object-fit: contain;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lks-logo:hover :is(.lks-mark, .lks-logo-img) {
	transform: rotate(-8deg) scale(1.05);
}
.lks-nav-links {
	display: flex;
	gap: clamp(22px, 4.5vw, 58px);
	font-size: 15.5px;
	font-weight: 400;
}
.lks-nav-links a {
	position: relative;
	white-space: nowrap;
}
.lks-nav-links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}
.lks-nav-links a:hover::after,
.lks-nav-links a:focus-visible::after {
	transform: scaleX(1);
}
/* Sprachmenü und Teilen-Knopf (inc/nav.php) rechts vor dem Angebots-Link; Farbe wie die Navigation (hell auf der Nacht) */
.lks-nav-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
	margin-inline-end: clamp(14px, 2.4vw, 34px);
}
.lks-nav-tools:empty {
	display: none;
}
/* ohne Sprachmenü und Teilen-Knopf steht der Angebots-Link trotzdem rechts */
.lks-nav-tools:empty + .lks-nav-cta {
	margin-inline-start: auto;
}
.lks.lks .lks-lang {
	height: 36px;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	background: color-mix(in srgb, currentColor 6%, transparent);
	color: inherit;
	font-family: inherit;
	font-size: 13px;
}
.lks .lks-lang select {
	color: inherit;
}
/* die Auswahl selbst zeigt keinen Fokusrahmen (outline-none): der Ring wird kräftiger, solange sie den Fokus hat */
.lks.lks .lks-lang:focus-within {
	border-color: currentColor;
}
.lks.lks.lks .lks-lang option {
	color: #16181d;
	background: #fff;
}
.lks.lks .lks-share-btn {
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	color: inherit;
}
.lks.lks :is(.lks-share-btn:hover, .lks-share-btn:focus-visible, .lks-share.is-open .lks-share-btn) {
	border-color: currentColor;
	background-color: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
}
/* schmale Handys: das Teilen-Fenster hängt an der Navigation (12 px vom Rand) statt am Knopf, sonst ragte es
   links (rechts bei Arabisch) aus dem Bild */
@media (max-width: 480px) {
	.lks .lks-share {
		position: static;
	}
	.lks .lks-share-panel {
		inset-inline-end: 12px;
	}
}
/* Tablets mit Sprachmenü: die Abschnitts-Links weichen, sonst liefen sie in das Menü und der Angebots-Link wurde abgeschnitten */
@media (max-width: 1080px) {
	.lks-nav:has(.lks-lang) .lks-nav-links {
		display: none;
	}
}
/* das Teilen-Fenster auf der hellen Seite: eine weiße Karte, auch wenn die Startseite im Tag-Look steht
   (doppelte Klasse: die Tag-Regeln wiegen sonst mehr) */
.lks.lks .lks-share-panel {
	border-color: rgba(232, 80, 26, 0.18);
	background: #fff;
	color: #16181d;
	box-shadow: 0 24px 46px -20px rgba(40, 30, 20, 0.35);
}
.lks.lks .lks-share-item .lks-share-icon,
.lks.lks .lks-share-item.is-done {
	color: #c2410c;
}
.lks.lks .lks-share-item:is(:hover, :focus-visible) {
	background: rgba(232, 80, 26, 0.08);
}
.lks .lks-nav-cta {
	font-weight: 600;
	font-size: 16px;
	padding-inline-end: clamp(0px, 4vw, 70px);
	white-space: nowrap;
}
.lks.is-on-dark .lks-nav {
	color: #fff;
}
/* unter 1280 px: die Sprache als runder Globus-Knopf (44 px). Die Auswahl liegt unsichtbar darüber, so zeigt
   Handy oder Tablet beim Antippen die eigene Liste mit den vollen Namen. Der Teilen-Knopf ist ebenso 44 px groß. */
@media (max-width: 1279px) {
	.lks.lks .lks-lang {
		position: relative;
		justify-content: center;
		gap: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
	}
	.lks.lks .lks-lang select {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		opacity: 0;
		/* iOS Safari vergrößert die Seite bei Eingabefeldern unter 16 px */
		font-size: 16px;
	}
	.lks .lks-share-btn {
		width: 44px;
		height: 44px;
	}
}
/* Tablets und kleine Laptops: "Startseite" verlässt die Leiste zuerst (das Logo führt ja dorthin) … */
@media (min-width: 761px) and (max-width: 1279px) {
	.lks-nav-links a[href]:not([href^="#"]) {
		display: none;
	}
	.lks .lks-logo {
		margin-inline-end: 22px;
	}
	.lks-nav-links {
		gap: 22px;
		font-size: 15px;
	}
	.lks.lks .lks-nav-cta {
		padding-inline-end: 0;
	}
}
/* … und auf Tablets hochkant auch die Abschnitts-Links (wie auf dem Handy) */
@media (min-width: 761px) and (max-width: 1023px) {
	.lks-nav-links {
		display: none;
	}
}
/* sobald gescrollt wird: weicher Schleier hinter der Navigation, damit Text darunter nicht mit den Links kollidiert */
.lks-nav::before {
	content: "";
	position: absolute;
	inset: 0 0 -34px;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease, background 0.5s ease;
	background: linear-gradient(180deg, rgba(241, 238, 232, 0.94) 0%, rgba(241, 238, 232, 0.75) 60%, rgba(241, 238, 232, 0) 100%);
}
.lks.is-on-dark .lks-nav::before {
	background: linear-gradient(180deg, rgba(11, 14, 25, 0.85) 0%, rgba(11, 14, 25, 0.6) 60%, rgba(11, 14, 25, 0) 100%);
}
.lks.is-scrolled .lks-nav::before,
.lks:not(.is-js):not(.is-static) .lks-nav::before {
	opacity: 1;
}
/* angemeldet: unter die Werkzeugleiste von WordPress */
.admin-bar .lks-nav,
.admin-bar .lks-loader {
	top: var(--wp-admin--admin-bar--height, 32px);
}
/* unter 600 px scrollt die WordPress-Leiste mit weg – dann bliebe oben eine Lücke */
@media (max-width: 600px) {
	.admin-bar .lks-nav,
	.admin-bar .lks-loader {
		top: 0;
	}
}

/* Status unten rechts – eigene Karte, Farbe nach dem Abschnitt unten am Bildschirm */
.lks-badge {
	position: fixed;
	z-index: 30;
	right: var(--lks-pad);
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px 7px 10px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.78);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px rgba(40, 30, 20, 0.12);
	font-size: 12.5px;
	font-weight: 500;
	color: #2a2d33;
	transition: color 0.4s ease, background 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
}
/* über dem Preisrechner tritt sie zurück (siehe onScroll) */
.lks.is-preis-unten .lks-badge {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}
.lks .lks-badge b {
	font-weight: 700;
	color: var(--lks-akzent);
}
.lks.is-badge-dark .lks-badge {
	background: rgba(14, 16, 30, 0.66);
	color: #fff;
}
.lks.is-badge-dark .lks-badge b {
	color: #c9b5ff;
}
.lks-badge svg {
	width: 20px;
	height: 20px;
}

/* ------------------------------------------------------------- 3D-Bühne */
.lks-canvas {
	position: fixed;
	inset: 0;
	z-index: 20;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.lks-canvas.is-ready {
	opacity: 1;
}

.lks-sec {
	position: relative;
	min-height: 100vh;
	height: 100vh;
	overflow: hidden;
}
/* die Abschnitte überlappen sich um 2 px: bei Höhen mit Pixelbruchteil bliebe sonst eine Haarlinie
   zwischen ihnen, durch die der dunkle Seitenhintergrund schimmert */
.lks-sec + .lks-sec {
	margin-top: -2px;
}
.lks .lks-deco {
	position: absolute;
	max-width: none;
	height: auto;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	will-change: transform;
}
/* Ankerfläche: hier liegt die 3D-Wand (gezeichnet im Canvas) */
.lks-field {
	position: absolute;
	pointer-events: none;
	aspect-ratio: 1.5 / 1;
}

/* ------------------------------------------------------------------ Hero */
.lks .lks-hero {
	background: #f1ece3 url(../images/szene/himmel.webp) center / cover no-repeat;
	overflow: visible;
	z-index: 3;
}
.lks .lks-h1 {
	position: absolute;
	left: 0;
	right: 0;
	top: 15.5vh;
	text-align: center;
	font-weight: 800;
	font-size: clamp(42px, 6.25vw, 112px);
	line-height: 1.04;
	letter-spacing: -0.035em;
	color: var(--lks-ink);
	text-shadow: 0 0 40px rgba(255, 255, 255, 0.35);
	will-change: transform;
	z-index: 2;
}
/* Maske für das Hereinfahren: unten genug Luft für Unterlängen (g), der Zeilenabstand bleibt gleich */
.lks .lks-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.2em;
	margin-bottom: -0.14em;
}
.lks .lks-line > span {
	display: inline-block;
}
.lks.is-js .lks-line > span {
	transform: translateY(130%);
}
.lks.is-loaded .lks-line > span {
	animation: lks-rise 1.1s cubic-bezier(0.2, 0.8, 0.15, 1) forwards;
}
.lks.is-loaded .lks-line:nth-child(2) > span {
	animation-delay: 0.12s;
}
@keyframes lks-rise {
	to {
		transform: translateY(0);
	}
}
.lks-hero-side {
	position: absolute;
	right: clamp(24px, 6.5vw, 120px);
	top: 59vh;
	width: min(270px, 80vw);
	z-index: 2;
}
.lks.is-js .lks-hero-side {
	opacity: 0;
}
.lks.is-loaded .lks-hero-side {
	animation: lks-fade 1s 0.7s ease forwards;
}
/* das Skript kam erst nach dem 4-s-Notausgang des Ladezeichens: die Seite stand schon, nichts neu einfahren
   (gleiche Gewichtung wie die Regeln darüber, deshalb danach) */
.lks.is-late :is(.lks-line > span, .lks-hero-side) {
	opacity: 1;
	transform: none;
	animation: none;
}
.lks.lks .lks-hero-side p {
	font-size: clamp(15px, 1.45vw, 20px);
	line-height: 1.32;
	color: var(--lks-muted);
	font-weight: 400;
}
@keyframes lks-fade {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.lks.lks .lks-join {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 40px;
	font-weight: 600;
	font-size: clamp(15px, 1.4vw, 19px);
}
.lks-join i {
	width: 25px;
	height: 32px;
	flex-shrink: 0;
	border: 1.8px solid currentColor;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-style: normal;
	transition: transform 0.35s ease, background 0.35s;
}
.lks-join i svg {
	width: 9px;
	height: 9px;
}
.lks-join:hover i,
.lks-join:focus-visible i {
	transform: translateX(4px);
}
/* von rechts nach links (ar): der Pfeil zeigt in Leserichtung, also nach links */
[dir="rtl"] .lks-join i svg {
	transform: scaleX(-1);
}
[dir="rtl"] .lks-join:is(:hover, :focus-visible) i {
	transform: translateX(-4px);
}
.lks .lks-deco--person {
	width: clamp(240px, 25vw, 470px);
	left: 1vw;
	bottom: -2vh;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 24px 34px rgba(40, 30, 20, 0.16));
	z-index: 1;
}

/* ----------------------------------------------------- Gemeinsame Schrift */
/* Größen hängen auch von der Bildschirmhöhe ab, damit auf niedrigen Laptops nichts abgeschnitten wird */
.lks .lks-num {
	font-weight: 600;
	line-height: 0.8;
	letter-spacing: -0.06em;
	font-size: clamp(64px, min(15vw, 24vh), 250px);
	color: var(--lks-num);
}
.lks.lks .lks-title {
	font-weight: 700;
	font-size: clamp(24px, min(3.4vw, 6.6vh), 56px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.lks.lks .lks-copy {
	margin-top: min(22px, 2.6vh);
	font-size: clamp(12.5px, min(1.05vw, 2.1vh), 16px);
	line-height: 1.6;
	color: var(--lks-muted);
	max-width: 440px;
}
.lks .lks-reveal {
	transition: opacity 1s ease, transform 1.1s cubic-bezier(0.2, 0.8, 0.15, 1);
}
.lks.is-js .lks-reveal {
	opacity: 0;
	transform: translateY(40px);
}
.lks.is-js .lks-sec.is-in .lks-reveal {
	opacity: 1;
	transform: none;
}
.lks .lks-sec.is-in .lks-d1 {
	transition-delay: 0.1s;
}
.lks .lks-sec.is-in .lks-d2 {
	transition-delay: 0.22s;
}
.lks .lks-sec.is-in .lks-d3 {
	transition-delay: 0.34s;
}

/* ------------------------------------------------------- 01 – Über Nacht besprüht */
.lks .lks-s1 {
	background: linear-gradient(180deg, #ebe6dd 0%, #f4f1ec 100%);
	z-index: 2;
}
.lks .lks-deco--spray {
	width: clamp(200px, 19vw, 360px);
	left: 2vw;
	top: -4vw;
	transform-origin: 50% 0%;
	filter: drop-shadow(0 20px 30px rgba(40, 30, 20, 0.14));
}
.lks-s1 .lks-field {
	left: 3vw;
	bottom: 5vh;
	width: 42vw;
}
.lks-s1 .lks-text {
	position: absolute;
	left: 52vw;
	top: 22vh;
	width: min(500px, 40vw);
}
.lks.lks .lks-s1 .lks-title {
	margin-top: 22px;
}
.lks.lks .lks-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}
.lks.lks .lks-chips li {
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 99px;
	background: rgba(232, 80, 26, 0.08);
	color: #3b3f47;
}

/* -------------------------------------------------- 02 – UV-Check (dunkel) */
/* oben und unten geht die Nacht weich in den hellen Grund der Nachbarabschnitte über (statt einer harten Kante);
   Text und Wand beginnen erst darunter. Die Nacht liegt auf ::before und wird an den Rändern
   per Maske ausgeblendet; darunter ist der Abschnitt hell. So bleibt auch an einer Kante mit Pixelbruchteil
   (z. B. 750,4 px hoch) keine dunkle Haarlinie stehen. */
.lks .lks-s2 {
	background: #f4f1ec;
	color: #fff;
	z-index: 3;
}
.lks-s2::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8, 10, 20, 0.55) 0%, rgba(8, 10, 20, 0) 55%),
		url(../images/szene/nacht.webp) center / cover no-repeat,
		#0b0e19;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 3px, rgba(0, 0, 0, 0.45) 4vh, #000 12vh, #000 calc(100% - 12vh), rgba(0, 0, 0, 0.45) calc(100% - 4vh), transparent calc(100% - 3px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, transparent 3px, rgba(0, 0, 0, 0.45) 4vh, #000 12vh, #000 calc(100% - 12vh), rgba(0, 0, 0, 0.45) calc(100% - 4vh), transparent calc(100% - 3px), transparent 100%);
}
.lks .lks-s2 .lks-num {
	color: var(--lks-num-dark);
	position: relative;
}
.lks-s2 .lks-text {
	position: absolute;
	left: 6vw;
	top: 20vh;
	width: min(500px, 42vw);
}
.lks.lks .lks-s2 .lks-title {
	margin-top: 22px;
}
.lks.lks .lks-s2 .lks-copy {
	color: rgba(240, 238, 255, 0.82);
}
.lks-s2 .lks-field {
	right: 5vw;
	bottom: 8vh;
	width: 40vw;
}

/* ---------------------------------------------- Anzeigen (UV-Check + Lasern) */
.lks .lks-meter {
	margin-top: 26px;
	max-width: 380px;
	font-size: 13px;
	font-weight: 500;
}
.lks-meter-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.lks.lks .lks-meter-row b {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.lks-meter-bar {
	height: 6px;
	border-radius: 99px;
	background: rgba(232, 80, 26, 0.14);
	overflow: hidden;
}
.lks-meter-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #ffb347, #ff5a1f);
	transition: width 0.25s linear;
}
.lks-s2 .lks-meter {
	color: rgba(240, 238, 255, 0.9);
}
.lks-s2 .lks-meter-bar {
	background: rgba(255, 255, 255, 0.14);
}
.lks-s2 .lks-meter-bar i {
	background: linear-gradient(90deg, #6d4bff, #b18cff);
}
.lks.lks .lks-meter-note {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--lks-muted);
	min-height: 1.4em;
}
.lks.lks .lks-s2 .lks-meter-note {
	color: rgba(240, 238, 255, 0.7);
}
.lks.lks .lks-again {
	margin-top: 14px;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	background: none;
	border: 0;
	color: var(--lks-akzent);
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.4s ease, visibility 0.4s;
}
.lks.lks .lks-again.is-shown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.lks-again svg {
	width: 14px;
	height: 14px;
}
/* ohne 3D (Modell oder WebGL fehlt), ohne Skript und im Editor: die Wand als Foto
   (mit Graffiti), keine Anzeigen, die sich nie bewegen würden. Das Foto steht auch, bis die 3D-Bühne bereit ist
   (Skript oder Modell kommen spät, man liest schon weiter unten), und blendet dann aus, während das 3D-Feld
   einblendet (is-3d, gleiche Dauer wie der Canvas) – nie ein leeres Feld dazwischen */
.lks .lks-field {
	background: #b39a76 url(../images/szene/wand-ersatz.webp) center / 100% 100% no-repeat;
	border-radius: 3px;
	box-shadow: 0 20px 40px rgba(40, 30, 20, 0.18);
	transition: opacity 1.2s ease;
}
.lks.is-3d .lks-field {
	opacity: 0;
}
.lks:not(.is-js) :is(.lks-meter, .lks-labels),
.lks.is-no-3d :is(.lks-meter, .lks-labels),
.lks.is-no-drone :is(.lks-meter, .lks-labels) {
	display: none;
}

/* ------------------------------------------------------------- 03 – Lasern */
.lks .lks-s3 {
	background: linear-gradient(180deg, #f4f1ec 0%, #f1eee8 100%);
	z-index: 1;
}
.lks-s3 .lks-field {
	left: 2vw;
	bottom: 5vh;
	width: 42vw;
}
.lks-s3 .lks-text {
	position: absolute;
	left: 62vw;
	top: 20vh;
	width: min(440px, 34vw);
}
.lks.lks .lks-s3 .lks-title {
	margin-top: 24px;
}

/* ------------------------------------------------------------ 04 – Wie oft */
.lks .lks-s4 {
	background: linear-gradient(180deg, #f1eee8 0%, #f4f1ec 100%);
	z-index: 1;
}
.lks-s4 .lks-text {
	position: absolute;
	left: 6vw;
	top: 14vh;
	width: min(560px, 46vw);
}
.lks.lks .lks-s4 .lks-title {
	margin-top: 22px;
}
.lks.lks .lks-takt {
	margin-top: 26px;
	border-top: 1px solid rgba(22, 24, 29, 0.12);
}
.lks.lks .lks-takt li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 16px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(22, 24, 29, 0.12);
}
.lks.lks .lks-takt b {
	font-weight: 600;
	font-size: clamp(15px, 1.15vw, 18px);
}
.lks.lks .lks-takt span {
	grid-column: 1;
	font-size: 13.5px;
	color: var(--lks-muted);
}
.lks.lks .lks-takt em {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-style: normal;
	font-weight: 700;
	color: var(--lks-akzent);
	font-size: clamp(14px, 1.1vw, 17px);
	white-space: nowrap;
}
.lks.lks .lks-note {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--lks-muted);
	max-width: 460px;
}
/* die Wandecke (halb besprüht, halb gelasert) unten rechts */
.lks .lks-deco--wall {
	width: clamp(220px, 22vw, 420px);
	right: 3vw;
	bottom: -6vw;
	transform-origin: 50% 60%;
	filter: drop-shadow(0 30px 50px rgba(40, 30, 20, 0.22));
}

/* -------------------------------------------------------------- Preisrechner */
/* der Knopf in 04: eine Pille in Orange mit Rechner-Zeichen, scrollt zum Rechner */
.lks.lks .lks-rechnen {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding: 12px 20px;
	border: 0;
	border-radius: 99px;
	background: var(--lks-akzent);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(194, 65, 12, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.lks.lks .lks-rechnen:hover {
	background: #9a3412;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(194, 65, 12, 0.34);
}
.lks.lks .lks-rechnen:focus-visible {
	outline: 2px solid var(--lks-ink);
	outline-offset: 3px;
}
.lks .lks-rechnen svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
/* der Rechner: ein eigener Block zwischen 04 und dem Fuß, so hoch wie sein Inhalt. Er liegt über der 3D-Bühne
   (z-index über dem Canvas und den Schildern, unter Navigation und Statuskarte): beim Scrollen schiebt er sich wie
   ein Blatt über den Laserkopf, und nichts Schwebendes liegt auf den Feldern */
.lks .lks-preis {
	position: relative;
	z-index: 26;
	margin-top: -2px;
	padding: clamp(84px, 13vh, 140px) var(--lks-pad) clamp(72px, 12vh, 130px);
	background: #e9e5de;
	color: var(--lks-ink);
}
.lks .lks-preis + .lks-sec {
	margin-top: -2px;
}
.lks .lks-preis-kopf {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: end;
	column-gap: clamp(18px, 3vw, 40px);
	max-width: 1180px;
	margin: 0 auto clamp(28px, 5vh, 52px);
}
.lks .lks-preis .lks-num {
	grid-row: 1 / span 2;
	font-size: clamp(64px, min(11vw, 18vh), 170px);
}
.lks.lks .lks-preis .lks-title {
	margin: 0;
}
.lks.lks .lks-preis .lks-rechner-intro {
	max-width: 560px;
	margin-top: 10px;
	font-size: 15px;
}
/* links die Rechnung, rechts Richtpreis und Anfrage */
.lks .lks-rechner-form {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(18px, 2.4vw, 32px);
	max-width: 1180px;
	margin: 0 auto;
}
.lks .lks-preis-links,
.lks .lks-preis-rechts {
	display: grid;
	align-content: start;
	gap: 18px;
	min-width: 0;
}
/* je eine helle Karte */
.lks .lks-preis-links,
.lks .lks-preis .lks-rechner-anfrage,
.lks .lks-preis .lks-rechner-danke {
	padding: clamp(20px, 2.4vw, 30px);
	border-radius: 22px;
	background: #f7f5f1;
	box-shadow: 0 18px 44px rgba(40, 30, 20, 0.08);
}
.lks .lks-preis .lks-rechner-anfrage {
	border-top: 0;
}
.lks.lks .lks-rechner h2 {
	margin: 0;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}
.lks.lks .lks-rechner h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}
.lks.lks .lks-rechner-intro,
.lks.lks .lks-rechner-hinweis {
	margin: 0;
	color: var(--lks-muted);
	font-size: 14px;
	line-height: 1.5;
}
.lks.lks .lks-rechner-hinweis {
	font-size: 12.5px;
}
.lks .lks-rechner-flaeche {
	display: grid;
	gap: 8px;
}
.lks .lks-rechner-flaeche > label,
.lks .lks-rechner-arbeiten legend {
	font-weight: 600;
	font-size: 14px;
}
.lks .lks-rechner-zahl {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.lks .lks-rechner-zahl input {
	width: 120px;
	padding: 10px 14px;
	border: 1.5px solid rgba(29, 31, 36, 0.18);
	border-radius: 12px;
	background: #fff;
	font: inherit;
	font-size: 20px;
	font-weight: 700;
	color: var(--lks-ink);
}
.lks .lks-rechner-zahl span {
	font-weight: 600;
	color: var(--lks-muted);
}
.lks .lks-rechner-arbeiten {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}
.lks .lks-rechner-arbeiten legend {
	margin-bottom: 8px;
	padding: 0;
}
.lks .lks-rechner-arbeit {
	position: relative;
	display: grid;
	grid-template-columns: 24px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid rgba(29, 31, 36, 0.12);
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lks .lks-rechner-arbeit:has(input:checked) {
	border-color: var(--lks-akzent);
	box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.12);
}
/* die echten Kästchen bleiben bedienbar (Tastatur, Vorleser), sichtbar ist der eigene Haken */
.lks .lks-rechner-arbeit input,
.lks .lks-rechner-zustimmung input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.lks .lks-rechner-haken {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border: 1.8px solid rgba(29, 31, 36, 0.3);
	border-radius: 7px;
	background: #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lks input:checked + .lks-rechner-haken {
	background: var(--lks-akzent);
	border-color: var(--lks-akzent);
}
.lks input:checked + .lks-rechner-haken::after {
	content: "";
	width: 10px;
	height: 6px;
	border: 2px solid #fff;
	border-top: 0;
	border-right: 0;
	transform: translate(1px, -1px) rotate(-45deg);
}
.lks input:focus-visible + .lks-rechner-haken {
	outline: 2px solid var(--lks-ink);
	outline-offset: 2px;
}
.lks .lks-rechner-name {
	font-weight: 600;
	font-size: 15px;
}
.lks .lks-rechner-preis {
	font-size: 12.5px;
	color: var(--lks-muted);
	white-space: nowrap;
}
.lks .lks-rechner-ergebnis {
	display: grid;
	gap: 4px;
	padding: 18px 20px;
	border-radius: 16px;
	background: var(--lks-ink);
	color: #f5f1ea;
}
.lks .lks-rechner-ergebnis span {
	font-size: 13px;
	opacity: 0.75;
}
.lks.lks .lks-rechner-ergebnis strong {
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.lks.lks .lks-rechner-ergebnis strong.is-leer {
	font-size: 15px;
	font-weight: 600;
}
.lks .lks-rechner-ergebnis small {
	font-size: 12px;
	line-height: 1.45;
	opacity: 0.7;
}
.lks .lks-rechner-anfrage {
	display: grid;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid rgba(29, 31, 36, 0.1);
}
.lks .lks-rechner-anfrage[hidden],
.lks .lks-rechner-danke[hidden] {
	display: none;
}
.lks .lks-rechner-felder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.lks .lks-rechner-felder label {
	display: grid;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lks-muted);
}
.lks .lks-rechner-breit {
	grid-column: 1 / -1;
}
.lks .lks-rechner-felder input,
.lks .lks-rechner-felder textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid rgba(29, 31, 36, 0.16);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--lks-ink);
	resize: vertical;
}
.lks .lks-rechner-felder :is(input, textarea):focus {
	outline: none;
	border-color: var(--lks-akzent);
	box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15);
}
/* Falle für Programme: für Menschen unsichtbar */
.lks .lks-rechner-website {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.lks .lks-rechner-zustimmung {
	position: relative;
	display: grid;
	grid-template-columns: 24px 1fr;
	align-items: start;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--lks-muted);
	cursor: pointer;
}
.lks .lks-rechner-zustimmung a {
	color: var(--lks-ink);
	text-decoration: underline;
}
.lks.lks .lks-rechner-senden {
	justify-self: start;
	margin-top: 2px;
}
.lks.lks .lks-rechner-senden:disabled {
	opacity: 0.6;
	cursor: wait;
}
.lks.lks .lks-rechner-status {
	min-height: 1.3em;
	margin: 0;
	font-size: 13px;
	color: var(--lks-muted);
}
.lks.lks .lks-rechner-status.is-fehler {
	color: #b3261e;
}
.lks.lks .lks-rechner-danke {
	margin: 0;
	padding: 18px 20px;
	border-radius: 16px;
	background: rgba(138, 154, 123, 0.18);
	color: #2f3b27;
	font-weight: 600;
	line-height: 1.5;
}
/* Handy: alles untereinander, die Felder auch */
@media (max-width: 760px) {
	.lks .lks-preis {
		padding: 76px 16px 64px;
	}
	.lks .lks-preis-kopf {
		column-gap: 14px;
	}
	/* auch auf niedrigen Handys (dort fehlen die Nummern der Abschnitte): der Rechner scrollt, Platz ist genug */
	.lks .lks-preis .lks-num {
		display: block;
		font-size: 64px;
	}
	.lks.lks .lks-preis .lks-title {
		font-size: clamp(24px, 7vw, 30px);
	}
	.lks.lks .lks-preis .lks-rechner-intro {
		grid-column: 1 / -1;
		font-size: 14px;
	}
	.lks .lks-rechner-form {
		grid-template-columns: minmax(0, 1fr);
	}
	.lks .lks-rechner-felder {
		grid-template-columns: 1fr;
	}
	.lks .lks-rechner-arbeit {
		grid-template-columns: 24px 1fr;
	}
	.lks .lks-rechner-preis {
		grid-column: 2;
	}
	/* Eingabefelder mit 16 px: sonst vergrößert iOS die Seite beim Antippen */
	.lks .lks-rechner-felder input,
	.lks .lks-rechner-felder textarea {
		font-size: 16px;
	}
}
/* ------------------------------------------------------------------ Fuß */
.lks .lks-foot {
	background: #f1eee8;
	height: 100vh;
	z-index: 1;
}
/* Firmenname links, Spalten rechts – in einer Leiste: bei langen Namen oder Sprachen brechen sie um, statt sich zu überlagern */
.lks-footbar {
	position: absolute;
	left: var(--lks-pad);
	right: calc(var(--lks-pad) + 120px);
	bottom: 80px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px 48px;
}
.lks-brand {
	min-width: 0;
}
.lks.lks .lks-brand strong {
	display: block;
	font-size: clamp(30px, 3vw, 46px);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.lks.lks .lks-brand span {
	font-size: 14px;
	color: var(--lks-muted);
}
.lks-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 56px;
	font-size: 14.5px;
	font-weight: 500;
}
.lks .lks-col > :not(.lks-social) {
	display: block;
	line-height: 1.9;
}
.lks .lks-col .stamp {
	line-height: 1.35;
	margin: 0.2em 0;
}
.lks.lks a.lks-link:hover,
.lks.lks a.lks-link:focus-visible {
	color: var(--lks-akzent);
}
/* die Logos der Netzwerke (cm_social_html): violette Ringe auf dem hellen Grund */
.lks .lks-social {
	gap: 8px;
	max-width: 124px;
	padding-top: 4px;
}
.lks .lks-social .lks-social-link {
	width: 36px;
	height: 36px;
	border-color: rgba(232, 80, 26, 0.35);
	color: var(--lks-akzent);
}
.lks .lks-social a.lks-social-link:hover,
.lks .lks-social a.lks-social-link:focus-visible {
	border-color: var(--lks-akzent);
	background-color: rgba(232, 80, 26, 0.1);
	color: var(--lks-akzent);
}
.lks .lks-cta {
	position: absolute;
	left: 50%;
	top: 18vh;
	transform: translateX(-50%);
	text-align: center;
	width: max-content;
	max-width: 92vw;
}
.lks.lks .lks-cta .lks-title {
	font-size: clamp(28px, min(3.6vw, 7vh), 60px);
}

/* ------------------------------------------ Erklär-Schilder an dem Laserkopf (nur im Hero) */
.lks-labels {
	position: fixed;
	inset: 0;
	z-index: 25;
	pointer-events: none;
}
.lks-labels > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.lks-labels line {
	stroke: rgba(22, 24, 29, 0.42);
	stroke-width: 1;
}
.lks-labels circle {
	fill: #fff;
	stroke: var(--lks-akzent);
	stroke-width: 2;
}
.lks-callout {
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	padding: 7px 12px 8px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(40, 30, 20, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--lks-muted);
	opacity: 0;
	will-change: transform, opacity;
}
.lks.lks .lks-callout b {
	display: block;
	color: var(--lks-ink);
	font-weight: 600;
	font-size: 13.5px;
}
.lks-callout.is-left {
	text-align: right;
}
.lks-hot {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 9px;
	border-radius: 99px;
	background: rgba(20, 10, 50, 0.72);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	will-change: transform, opacity;
}
.lks-hot i {
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #8dffb0;
	box-shadow: 0 0 0 0 rgba(141, 255, 176, 0.7);
	animation: lks-pulse 1.4s ease-out infinite;
}
@keyframes lks-pulse {
	to {
		box-shadow: 0 0 0 10px rgba(141, 255, 176, 0);
	}
}
/* Laserkopf greifen und selbst bewegen (Klassen am <html>, damit der Zeiger überall gilt) */
html.lks-grab,
html.lks-grab * {
	cursor: grab !important;
}
html.lks-grabbing,
html.lks-grabbing * {
	cursor: grabbing !important;
	-webkit-user-select: none;
	user-select: none;
}
.lks-tip {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px 6px 10px;
	border-radius: 99px;
	/* fast deckend: der Schlauch hängt genau hier herunter und schien sonst als grauer Streifen durch */
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px rgba(40, 30, 20, 0.12);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lks-ink);
	white-space: nowrap;
	opacity: 0;
	will-change: transform, opacity;
}
.lks-tip svg {
	width: 17px;
	height: 17px;
	color: var(--lks-akzent);
}

/* ------------------------------------------------------------ Ladezeichen */
.lks-loader {
	position: fixed;
	inset: 0;
	z-index: 50;
	background: var(--lks-grund);
	display: grid;
	place-items: center;
	transition: opacity 0.8s ease, visibility 0.8s;
	/* ohne Skript geht es nach 4 s von selbst */
	animation: lks-loader-out 0.8s ease 4s forwards;
}
.lks-loader.is-done {
	opacity: 0;
	visibility: hidden;
}
.lks-loader svg {
	width: 46px;
	height: 46px;
	animation: lks-spin 1.6s linear infinite;
}
@keyframes lks-spin {
	to {
		transform: rotate(360deg);
	}
}
@keyframes lks-loader-out {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* --------------------------------------------------------------- Handy */
@media (max-width: 760px) {
	.lks-nav {
		gap: 6px;
		padding: 10px 14px 0;
	}
	.lks-nav-links {
		display: none;
	}
	/* Handy: Logo (ohne Namen, wenn es eng wird), Sprache, Teilen und der Angebots-Knopf in einer Zeile */
	.lks .lks-logo {
		justify-content: center;
		min-width: 44px;
		margin-inline-end: 0;
		font-size: 15px;
	}
	.lks .lks-logo-img {
		max-width: 110px;
		height: 32px;
	}
	.lks-nav-tools {
		gap: 6px;
		margin-inline-end: 2px;
	}
	/* der Angebots-Link als echter Knopf: 44 px hoch und gefüllt; ein langer Text (it) bricht im Knopf um */
	.lks.lks .lks-nav-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		max-width: 46vw;
		padding: 4px 16px;
		border-radius: 99px;
		background: var(--lks-ink);
		color: #fff;
		font-size: 14px;
		line-height: 1.15;
		text-align: center;
		white-space: normal;
		transition: background-color 0.5s ease, color 0.5s ease;
	}
	.lks.lks.is-on-dark .lks-nav-cta {
		background: #fff;
		color: var(--lks-ink);
	}
}
@media (max-width: 480px) {
	.lks .lks-logo-name {
		display: none;
	}
}
@media (max-width: 760px) {
	/* Abschnitte so hoch wie der sichtbare Bildschirm bei eingeblendeten Browser-Leisten (iOS Safari: 100vh gilt
	   für ausgeblendete Leisten, dann läge unten Text hinter der Leiste). Darum hier überall svh, vh davor für ältere Browser. */
	.lks .lks-sec,
	.lks .lks-foot {
		min-height: 0;
		height: 100vh;
		height: 100svh;
	}
	/* Überschrift mit Rand und einer Größe nach der Breite: lange Wörter (tr, ru, fr) stoßen nicht an den Rand.
	   Doppelte Klasse: schlägt die Grundregel .lks.lks :is(h1, …) { padding: 0 } */
	.lks.lks .lks-h1 {
		top: 12vh;
		top: 12svh;
		padding-inline: 18px;
		font-size: clamp(30px, 9.6vw, 44px);
	}
	/* der Textkasten auf der Endseite (für Arabisch gespiegelt wie Laserkopf und Kabel), nie unter dem Status */
	.lks-hero-side {
		top: auto;
		bottom: max(64px, 9vh);
		bottom: max(64px, 9svh);
		right: auto;
		inset-inline-end: 18px;
		width: min(62vw, 300px);
		padding: 14px 16px;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.62);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	.lks.lks .lks-hero-side .lks-join {
		margin-top: 16px;
	}
	/* Knöpfe zum Antippen: mindestens 44 px hoch */
	.lks.lks .lks-join {
		min-height: 44px;
	}
	/* das Himmelsbild endet weich (keine harte Kante zu 01 beim Scrollen) */
	.lks .lks-hero::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		z-index: 0;
		height: 16vh;
		height: 16svh;
		background: linear-gradient(180deg, rgba(235, 230, 221, 0) 0%, #ebe6dd 100%);
		pointer-events: none;
	}
	.lks .lks-deco--person {
		width: min(52vw, 260px);
		left: -6vw;
		bottom: 0;
	}
	/* Arabisch: der Textkasten steht links, der Spezialist darum rechts (gespiegelt, die Hand zeigt zur Mitte) */
	[dir="rtl"] .lks .lks-deco--person {
		left: auto;
		right: -6vw;
		scale: -1 1;
	}
	/* die große Nummer kleiner: die Wand liegt nie darauf */
	.lks .lks-num {
		font-size: min(64px, 8.5vh);
		font-size: min(64px, 8.5svh);
	}
	.lks.lks .lks-title {
		font-size: clamp(24px, 4.4vh, 30px);
		font-size: clamp(24px, 4.4svh, 30px);
	}
	.lks.lks .lks-copy {
		font-size: 14px;
		line-height: 1.5;
	}
	.lks.lks :is(.lks-chips li, .lks-meter-note, .lks-note) {
		font-size: 13px;
	}
	.lks .lks-meter {
		margin-top: 16px;
		font-size: 13.5px;
	}
	.lks.lks .lks-again {
		min-height: 44px;
		margin-top: 4px;
	}
	.lks .lks-deco--spray {
		width: 30vw;
		left: -2vw;
		top: -8vw;
	}
	.lks-field {
		aspect-ratio: auto;
	}
	.lks-s1 .lks-field,
	.lks-s3 .lks-field {
		left: 8vw;
		width: 84vw;
		top: 22vh;
		top: 22svh;
		height: 26vh;
		height: 26svh;
		bottom: auto;
	}
	/* 03: etwas höher und flacher, damit das Feld nicht auf der großen Nummer liegt */
	.lks-s3 .lks-field {
		top: 21vh;
		top: 21svh;
		height: 24vh;
		height: 24svh;
	}
	.lks-s1 .lks-text,
	.lks-s3 .lks-text {
		left: 18px;
		right: 18px;
		width: auto;
		top: auto;
		bottom: 8vh;
		bottom: 8svh;
	}
	.lks-s2 .lks-text {
		left: 18px;
		right: 18px;
		width: auto;
		top: 10vh;
		top: 10svh;
	}
	.lks-s2 .lks-field {
		left: 8vw;
		right: auto;
		width: 84vw;
		bottom: 3vh;
		bottom: 3svh;
		height: 30vh;
		height: 30svh;
	}
	.lks-s4 .lks-text {
		left: 18px;
		right: 18px;
		width: auto;
		top: 11vh;
		top: 11svh;
	}
	/* 04: rechts oben neben der Überschrift hält der Laserkopf – lange erste Zeilen (fr, pt) brechen vorher um
	   (logisch, also für Arabisch gespiegelt). Was trotzdem hineinragt, umfliegt sie (src/szene.js, halt). */
	.lks.lks .lks-s4 .lks-title {
		padding-inline-end: 30vw;
	}
	.lks .lks-deco--wall {
		width: 36vw;
		right: -4vw;
		bottom: -8vw;
	}
	/* Fuß im Fluss statt fest gesetzt: oben das Angebot, unten die Fußleiste, dazwischen das freie Band für die
	   Laserkopf (mindestens so hoch, wie sie samt Schweben in kleiner Größe braucht, src/szene.js halt). Alles darum
	   ist so dicht gesetzt, dass der Abschnitt bildschirmhoch bleibt – wäre er höher, läge am Ende der Seite das
	   Angebot unter der Navigation. Nur sehr lange eigene Texte machen ihn noch höher, statt dass sich
	   Angebots-Knopf und Firmenname überlagern oder der Laserkopf auf dem Firmennamen hält. */
	.lks.lks .lks-foot {
		display: flex;
		flex-direction: column;
		row-gap: calc(24px + 11vh);
		row-gap: calc(24px + 11svh);
		height: auto;
		min-height: 100vh;
		min-height: 100svh;
		padding: 18vh 0 66px;
		padding-top: 18svh;
	}
	.lks .lks-cta {
		position: relative;
		left: auto;
		top: auto;
		align-self: center;
		transform: none;
	}
	/* Firmenname über den Spalten; Kontakt und Rechtliches nebeneinander, die Logos darunter */
	.lks-footbar {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		margin: auto 18px 0;
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
	}
	.lks-cols {
		gap: 12px 20px;
		justify-content: space-between;
	}
	.lks-col--social {
		order: 3;
		flex-basis: 100%;
	}
	.lks .lks-social {
		max-width: none;
	}
	.lks.lks .lks-brand strong {
		font-size: 28px;
	}
	/* Rechtliches: jeder Link 44 px hoch; die Logos als 44-px-Ringe. Passt es in seiner schmalsten Form neben die
	   Kontaktangaben, steht es dort (die Links dann untereinander), sonst darunter in einer Reihe. Zwei Links teilen
	   sich eine Reihe, wenn jeder dort mindestens 6em bekommt – ein langer bricht dann in sich um (ru auf schmalen
	   Handys), statt eine zweite Reihe zu brauchen. */
	.lks .lks-col--legal {
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
		column-gap: 20px;
		width: min-content;
	}
	.lks.lks .lks-col--legal > a {
		display: inline-flex;
		flex: 1 1 6em;
		align-items: center;
		min-width: min-content;
		max-width: max-content;
		min-height: 44px;
		line-height: 1.2;
	}
	.lks .lks-social .lks-social-link {
		width: 44px;
		height: 44px;
	}
	.lks-labels .lks-callout,
	.lks-labels > svg {
		display: none;
	}
}
/* niedrige Handys (z. B. iPhone mit eingeblendeten Safari-Leisten, etwa 390 × 664) */
@media (max-width: 760px) and (max-height: 760px) {
	.lks .lks-num {
		display: none;
	}
	/* die Wandecke in 04 kleiner: sie lag auf dem Ende des Hinweises */
	.lks .lks-deco--wall {
		width: 26vw;
		bottom: -12vw;
	}
	.lks.lks .lks-copy {
		font-size: 13.5px;
	}
}
@media (max-width: 760px) and (max-height: 700px) {
	.lks.lks .lks-chips {
		display: none;
	}
	.lks.lks .lks-s4 .lks-takt li {
		padding: 9px 0;
	}
	/* 04: kein Platz für den Knopf zum Preisrechner und den Hinweis unter der Liste (in längeren Sprachen wie fr, pl, ru
	   lägen sie unter der Statuskarte); der Rechner folgt gleich darunter und sagt dasselbe */
	.lks.lks .lks-s4 :is(.lks-rechnen, .lks-note) {
		display: none;
	}
	/* Fuß: Angebot höher und dichter, Fußleiste enger – so bleibt dazwischen meist Platz für der Laserkopf */
	.lks.lks .lks-foot {
		padding-top: 12vh;
		padding-top: 12svh;
	}
	.lks.lks .lks-cta .lks-join {
		margin-top: 18px;
	}
	.lks-footbar {
		gap: 14px;
	}
	.lks.lks .lks-brand strong {
		line-height: 1.15;
	}
}
/* sehr niedrige Handys (z. B. iPhone SE mit eingeblendeten Safari-Leisten, 375 × 553) */
@media (max-width: 760px) and (max-height: 600px) {
	/* Überschrift kleiner: sonst bliebe zwischen ihr und dem Textkasten kein Platz für der Laserkopf (fr, pt, pl) */
	.lks.lks .lks-h1 {
		font-size: clamp(26px, 8vw, 34px);
	}
	/* 01: der Text etwas höher – seine letzte Zeile lief sonst unter die Statuskarte */
	.lks-s1 .lks-text {
		bottom: 64px;
	}
	/* 04: die Liste dichter, die Überschrift hat hier oft eine Zeile mehr (siehe oben) */
	.lks.lks .lks-s4 .lks-takt {
		margin-top: 18px;
	}
	.lks.lks .lks-s4 .lks-takt li {
		padding: 6px 0;
	}
	/* Fuß: Angebot und Fußleiste dichter, damit er samt Band für der Laserkopf bildschirmhoch bleibt (siehe oben) */
	.lks.lks .lks-cta .lks-title {
		font-size: clamp(21px, 6.6vw, 24px);
	}
	.lks.lks .lks-cta .lks-join {
		margin-top: 12px;
	}
	.lks.lks .lks-foot {
		padding-bottom: 60px;
	}
	.lks-footbar {
		gap: 10px;
	}
	.lks.lks .lks-brand strong {
		font-size: 24px;
	}
	.lks.lks .lks-col--contact > * {
		line-height: 1.7;
	}
}
/* schmale Handys (320 px breit, z. B. das erste iPhone SE) */
@media (max-width: 340px) {
	/* 04: die Beschreibung unter Name und Takt über die ganze Breite. Neben dem Takt bräche sie hier in zwei Zeilen
	   um (fr, pt), die Liste würde höher und der Hinweis darunter liefe unter den Status. Erst hier: breiter steht der
	   Takt mittig zwischen den Zeilen, aus dem Weg des Schlauchs, der rechts über der Liste aus dem Bild hängt. */
	.lks.lks .lks-takt span {
		grid-column: 1 / -1;
	}
	.lks.lks .lks-takt em {
		grid-row: 1;
	}
	.lks.lks .lks-s4 .lks-takt {
		margin-top: 12px;
	}
	.lks.lks .lks-s4 .lks-note {
		margin-top: 10px;
	}
}
/* Tablets hochkant: der Text wäre dort nur 12,5 px groß (min(1.05vw, 2.1vh) läuft in die untere Grenze) */
@media (min-width: 761px) and (max-width: 1100px) {
	.lks.lks .lks-copy {
		font-size: 15px;
	}
	.lks.lks :is(.lks-chips li, .lks-meter-note, .lks-note) {
		font-size: 13.5px;
	}
}
/* … dafür steht der Text von 03 hochkant etwas höher: der größere Text schob die Anzeige sonst dorthin, wo die
   Laserkopf beim Lasern schwebt */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
	.lks-s3 .lks-text {
		top: 9vh;
	}
}
/* niedrige Desktop-Fenster (z. B. 1280 × 720): 04 höher ansetzen, die Nummer kleiner und die Liste dichter – sonst
   liefe der Knopf zum Preisrechner unten aus dem Abschnitt */
@media (min-width: 761px) and (max-height: 800px) {
	.lks-s4 .lks-text {
		top: 11vh;
	}
	.lks .lks-s4 .lks-num {
		font-size: 15vh;
	}
	.lks.lks .lks-s4 .lks-title {
		margin-top: 14px;
	}
	.lks.lks .lks-s4 .lks-takt li {
		padding: 9px 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lks-hot i {
		animation: none;
	}
	.lks .lks-reveal,
	.lks.is-js .lks-reveal {
		transform: none;
		transition: opacity 0.4s ease;
	}
	.lks.is-js .lks-line > span {
		transform: none;
	}
	.lks.is-loaded .lks-line > span {
		animation: none;
	}
	.lks-loader svg {
		animation-duration: 4s;
	}
}

/* -------------------------------------- Schutz gegen Einstellungen in Elementor */
/* Transformationen, Filter und Eingangs-Animationen an den Hüllen um das Widget würden die
   festen Ebenen (Canvas, Navigation, Schilder) an die Hülle binden statt an den Bildschirm */
.elementor-widget-lks,
.elementor-widget-lks > .elementor-widget-container,
.e-con.e-transform:has(.elementor-widget-lks),
.elementor-widget-lks.e-transform .elementor-widget-container,
:is(.elementor-element, .e-con, .e-con-inner, .elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap):has(.lks) {
	transform: none !important;
	filter: none !important;
	perspective: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	contain: none !important;
	will-change: auto !important;
}
.elementor-widget-lks.animated,
:is(.elementor-element, .e-con, .elementor-section, .elementor-column).animated:has(.lks) {
	animation: none !important;
}

/* ---------------------------------------- Die Seite selbst: immer hell */
/* Die Laser-Seite hat kein Nachtbild: Tag oder Nacht der übrigen Seiten gilt hier nicht */
html:has(body.lks-page),
html[data-lks-theme]:has(body.cm-page.lks-page) {
	color-scheme: light !important;
	background: #f1eee8;
	scrollbar-color: #555a63 #f1eee8;
}
body.lks-page,
html[data-lks-theme] body.cm-page.lks-page {
	background: #f1eee8;
}

/* ------------------------------------------- Elementor-Editor: steht still */
/* Kein 3D und keine festen Ebenen: die Abschnitte liegen lesbar untereinander,
   die Wände zeigen das Foto, Navigation und Status liegen im Widget */
:is(body.elementor-editor-active) .lks :is(.lks-loader, .lks-canvas, .lks-labels),
.lks.is-static :is(.lks-loader, .lks-canvas, .lks-labels) {
	display: none;
}
:is(body.elementor-editor-active) .lks :is(.lks-nav, .lks-badge),
.lks.is-static :is(.lks-nav, .lks-badge) {
	position: absolute;
}
:is(body.elementor-editor-active) .lks .lks-field,
.lks.is-static .lks-field {
	background: #b39a76 url(../images/szene/wand-ersatz.webp) center / 100% 100% no-repeat;
	border-radius: 3px;
	box-shadow: 0 20px 40px rgba(40, 30, 20, 0.18);
}
:is(body.elementor-editor-active) .lks :is(.lks-reveal, .lks-hero-side, .lks-line > span),
.lks.is-static :is(.lks-reveal, .lks-hero-side, .lks-line > span) {
	opacity: 1;
	transform: none;
	animation: none;
}
:is(body.elementor-editor-active) .lks .lks-meter,
.lks.is-static .lks-meter {
	display: block;
}