/*
 * Clean Moon: die Seite "Solar" (Widget cm-solar, inc/elementor/widgets/solar.php,
 * Skript assets/js/solar.js aus src/solar.js).
 *
 * Eine Drohne prüft und reinigt Solarmodule: sechs bildschirmhohe Abschnitte, darüber
 * eine feste 3D-Bühne (Canvas), Erklär-Schilder, Statuskarte und Ladezeichen.
 * Alles hängt unter .cm-solar (keine Regeln für section/body/html allein), Zustände
 * stehen als is-… am Wurzelelement, Keyframes heißen cm-solar-…. 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 */
.cm-solar {
	--cm-solar-ink: #0d0b1a;
	--cm-solar-muted: #4a4568;
	--cm-solar-lilac: #e7e3fb;
	--cm-solar-num: #cfc6f6;
	--cm-solar-num-dark: rgba(214, 203, 255, 0.55);
	--cm-solar-violet: #5b3bd1;
	--cm-solar-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(--cm-solar-ink);
	background: var(--cm-solar-lilac);
	/* gegen die Grundregeln der Seite (Zeilenhöhe 1.5, Wortbruch überall) */
	line-height: normal;
	overflow-wrap: normal;
	text-align: start;
	-webkit-font-smoothing: antialiased;
	/* das Dach-Bild ragt links hinaus: abschneiden, ohne einen Scrollbereich zu machen */
	overflow-x: clip;
}
.cm-solar *,
.cm-solar *::before,
.cm-solar *::after {
	box-sizing: border-box;
}
/* doppelte Klasse: schlägt Abstände, Schrift- und Linkfarben aus Theme oder Elementor-Website-Einstellungen */
.cm-solar.cm-solar :is(h1, h2, p, ul, li) {
	margin: 0;
	padding: 0;
}
.cm-solar.cm-solar :is(h1, h2, a, button) {
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: none;
}
/* …die große Überschrift behält trotzdem ihren engen Buchstabenabstand */
.cm-solar.cm-solar .cm-solar-h1 {
	letter-spacing: -0.035em;
}
.cm-solar.cm-solar :is(h1, h2) {
	color: inherit;
}
.cm-solar.cm-solar ul {
	list-style: none;
}
.cm-solar.cm-solar a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}
.cm-solar svg {
	display: block;
}

/* ---------------------------------------------------------- Navigation */
.cm-solar-nav {
	position: fixed;
	z-index: 30;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	padding: 18px var(--cm-solar-pad) 0;
	pointer-events: none;
	transition: color 0.5s ease;
}
.cm-solar-nav > * {
	pointer-events: auto;
}
/* das Logo wie oben auf der Startseite (cm_logo_mark()): die goldene Mond-Medaille oder das eigene Logo-Bild, daneben der Firmenname */
.cm-solar .cm-solar-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;
}
.cm-solar .cm-solar-mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 12px;
	color: #0b1024;
	background:
		linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.3) 30%, transparent 42%),
		linear-gradient(180deg, #f7e7a6 0%, #f2d06b 24%, #d9a92c 58%, #a87a12 88%, #d9a92c 100%);
	box-shadow: 0 10px 22px -12px rgba(120, 82, 10, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cm-solar .cm-solar-mark-icon {
	width: 19px;
	height: 19px;
}
.cm-solar .cm-solar-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);
}
.cm-solar-logo:hover :is(.cm-solar-mark, .cm-solar-logo-img) {
	transform: rotate(-8deg) scale(1.05);
}
.cm-solar-nav-links {
	display: flex;
	gap: clamp(22px, 4.5vw, 58px);
	font-size: 15.5px;
	font-weight: 400;
}
.cm-solar-nav-links a {
	position: relative;
	white-space: nowrap;
}
.cm-solar-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;
}
.cm-solar-nav-links a:hover::after,
.cm-solar-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) */
.cm-solar-nav-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
	margin-inline-end: clamp(14px, 2.4vw, 34px);
}
.cm-solar-nav-tools:empty {
	display: none;
}
/* ohne Sprachmenü und Teilen-Knopf steht der Angebots-Link trotzdem rechts */
.cm-solar-nav-tools:empty + .cm-solar-nav-cta {
	margin-inline-start: auto;
}
.cm-solar.cm-solar .cm-solar-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;
}
.cm-solar .cm-solar-lang select {
	color: inherit;
}
/* die Auswahl selbst zeigt keinen Fokusrahmen (outline-none): der Ring wird kräftiger, solange sie den Fokus hat */
.cm-solar.cm-solar .cm-solar-lang:focus-within {
	border-color: currentColor;
}
.cm-solar.cm-solar.cm-solar .cm-solar-lang option {
	color: #0d0b1a;
	background: #fff;
}
.cm-solar.cm-solar .cm-share-btn {
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	color: inherit;
}
.cm-solar.cm-solar :is(.cm-share-btn:hover, .cm-share-btn:focus-visible, .cm-share.is-open .cm-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) {
	.cm-solar .cm-share {
		position: static;
	}
	.cm-solar .cm-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) {
	.cm-solar-nav:has(.cm-solar-lang) .cm-solar-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) */
.cm-solar.cm-solar .cm-share-panel {
	border-color: rgba(91, 59, 209, 0.18);
	background: #fff;
	color: #0d0b1a;
	box-shadow: 0 24px 46px -20px rgba(40, 20, 110, 0.35);
}
.cm-solar.cm-solar .cm-share-item .cm-share-icon,
.cm-solar.cm-solar .cm-share-item.is-done {
	color: #5b3bd1;
}
.cm-solar.cm-solar .cm-share-item:is(:hover, :focus-visible) {
	background: rgba(91, 59, 209, 0.08);
}
.cm-solar .cm-solar-nav-cta {
	font-weight: 600;
	font-size: 16px;
	padding-inline-end: clamp(0px, 4vw, 70px);
	white-space: nowrap;
}
.cm-solar.is-on-dark .cm-solar-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) {
	.cm-solar.cm-solar .cm-solar-lang {
		position: relative;
		justify-content: center;
		gap: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
	}
	.cm-solar.cm-solar .cm-solar-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;
	}
	.cm-solar .cm-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) {
	.cm-solar-nav-links a[href]:not([href^="#"]) {
		display: none;
	}
	.cm-solar .cm-solar-logo {
		margin-inline-end: 22px;
	}
	.cm-solar-nav-links {
		gap: 22px;
		font-size: 15px;
	}
	.cm-solar.cm-solar .cm-solar-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) {
	.cm-solar-nav-links {
		display: none;
	}
}
/* sobald gescrollt wird: weicher Schleier hinter der Navigation, damit Text darunter nicht mit den Links kollidiert */
.cm-solar-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(231, 227, 251, 0.94) 0%, rgba(231, 227, 251, 0.75) 60%, rgba(231, 227, 251, 0) 100%);
}
.cm-solar.is-on-dark .cm-solar-nav::before {
	background: linear-gradient(180deg, rgba(16, 10, 48, 0.85) 0%, rgba(16, 10, 48, 0.6) 60%, rgba(16, 10, 48, 0) 100%);
}
.cm-solar.is-scrolled .cm-solar-nav::before,
.cm-solar:not(.is-js):not(.is-static) .cm-solar-nav::before {
	opacity: 1;
}
/* angemeldet: unter die Werkzeugleiste von WordPress */
.admin-bar .cm-solar-nav,
.admin-bar .cm-solar-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 .cm-solar-nav,
	.admin-bar .cm-solar-loader {
		top: 0;
	}
}

/* Status unten rechts – eigene Karte, Farbe nach dem Abschnitt unten am Bildschirm */
.cm-solar-badge {
	position: fixed;
	z-index: 30;
	right: var(--cm-solar-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, 20, 110, 0.12);
	font-size: 12.5px;
	font-weight: 500;
	color: #2b2550;
	transition: color 0.4s ease, background 0.4s ease;
}
.cm-solar .cm-solar-badge b {
	font-weight: 700;
	color: var(--cm-solar-violet);
}
.cm-solar.is-badge-dark .cm-solar-badge {
	background: rgba(20, 12, 60, 0.66);
	color: #fff;
}
.cm-solar.is-badge-dark .cm-solar-badge b {
	color: #d9ccff;
}
.cm-solar-badge svg {
	width: 20px;
	height: 20px;
}

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

.cm-solar-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 */
.cm-solar-sec + .cm-solar-sec {
	margin-top: -2px;
}
.cm-solar .cm-solar-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 das 3D-Modulfeld (gezeichnet im Canvas) */
.cm-solar-field {
	position: absolute;
	pointer-events: none;
	aspect-ratio: 1.5 / 1;
}

/* ------------------------------------------------------------------ Hero */
.cm-solar .cm-solar-hero {
	background: #e4e0fa url(../images/solar/himmel.webp) center / cover no-repeat;
	overflow: visible;
	z-index: 3;
}
.cm-solar .cm-solar-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(--cm-solar-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 */
.cm-solar .cm-solar-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.2em;
	margin-bottom: -0.14em;
}
.cm-solar .cm-solar-line > span {
	display: inline-block;
}
.cm-solar.is-js .cm-solar-line > span {
	transform: translateY(130%);
}
.cm-solar.is-loaded .cm-solar-line > span {
	animation: cm-solar-rise 1.1s cubic-bezier(0.2, 0.8, 0.15, 1) forwards;
}
.cm-solar.is-loaded .cm-solar-line:nth-child(2) > span {
	animation-delay: 0.12s;
}
@keyframes cm-solar-rise {
	to {
		transform: translateY(0);
	}
}
.cm-solar-hero-side {
	position: absolute;
	right: clamp(24px, 6.5vw, 120px);
	top: 59vh;
	width: min(270px, 80vw);
	z-index: 2;
}
.cm-solar.is-js .cm-solar-hero-side {
	opacity: 0;
}
.cm-solar.is-loaded .cm-solar-hero-side {
	animation: cm-solar-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) */
.cm-solar.is-late :is(.cm-solar-line > span, .cm-solar-hero-side) {
	opacity: 1;
	transform: none;
	animation: none;
}
.cm-solar.cm-solar .cm-solar-hero-side p {
	font-size: clamp(15px, 1.45vw, 20px);
	line-height: 1.32;
	color: var(--cm-solar-muted);
	font-weight: 400;
}
@keyframes cm-solar-fade {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.cm-solar.cm-solar .cm-solar-join {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 40px;
	font-weight: 600;
	font-size: clamp(15px, 1.4vw, 19px);
}
.cm-solar-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;
}
.cm-solar-join i svg {
	width: 9px;
	height: 9px;
}
.cm-solar-join:hover i,
.cm-solar-join:focus-visible i {
	transform: translateX(4px);
}
/* von rechts nach links (ar): der Pfeil zeigt in Leserichtung, also nach links */
[dir="rtl"] .cm-solar-join i svg {
	transform: scaleX(-1);
}
[dir="rtl"] .cm-solar-join:is(:hover, :focus-visible) i {
	transform: translateX(-4px);
}
.cm-solar .cm-solar-deco--roof {
	width: clamp(420px, 56vw, 980px);
	left: -12vw;
	bottom: -17vw;
	transform-origin: 60% 40%;
	filter: drop-shadow(0 30px 40px rgba(80, 50, 160, 0.18));
	z-index: 1;
}

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

/* ------------------------------------------------------------ 01 – Schmutz */
.cm-solar .cm-solar-s1 {
	background: linear-gradient(180deg, #e4e0fa 0%, #ece9fc 100%);
	z-index: 2;
}
.cm-solar .cm-solar-deco--branch {
	width: clamp(260px, 26vw, 500px);
	left: 1vw;
	top: -6vw;
	transform-origin: 50% 0%;
}
.cm-solar-s1 .cm-solar-field {
	left: 3vw;
	bottom: 5vh;
	width: 42vw;
}
.cm-solar-s1 .cm-solar-text {
	position: absolute;
	left: 52vw;
	top: 22vh;
	width: min(500px, 40vw);
}
.cm-solar.cm-solar .cm-solar-s1 .cm-solar-title {
	margin-top: 22px;
}
.cm-solar.cm-solar .cm-solar-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}
.cm-solar.cm-solar .cm-solar-chips li {
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 99px;
	background: rgba(91, 59, 209, 0.08);
	color: #3a2f78;
}

/* -------------------------------------------------- 02 – Wärmebild (dunkel) */
/* oben und unten geht die Nacht weich in das helle Lila der Nachbarabschnitte über (statt einer harten Kante);
   Text, Mond und Modulfeld 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. */
.cm-solar .cm-solar-s2 {
	background: #ece9fc;
	color: #fff;
	z-index: 3;
}
.cm-solar-s2::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(12, 6, 40, 0.55) 0%, rgba(12, 6, 40, 0) 55%),
		url(../images/solar/nacht.webp) center / cover no-repeat,
		#1b1450;
	-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%);
}
.cm-solar .cm-solar-s2 .cm-solar-num {
	color: var(--cm-solar-num-dark);
	position: relative;
}
.cm-solar-s2 .cm-solar-text {
	position: absolute;
	left: 6vw;
	top: 20vh;
	width: min(500px, 42vw);
}
.cm-solar.cm-solar .cm-solar-s2 .cm-solar-title {
	margin-top: 22px;
}
.cm-solar.cm-solar .cm-solar-s2 .cm-solar-copy {
	color: rgba(240, 234, 255, 0.82);
}
.cm-solar .cm-solar-deco--moon {
	width: clamp(220px, 22vw, 420px);
	right: 8vw;
	top: 7vh;
	transform-origin: 50% 50%;
	filter: drop-shadow(0 0 70px rgba(190, 200, 255, 0.35));
	opacity: 0.92;
}
.cm-solar-s2 .cm-solar-field {
	right: 5vw;
	bottom: 8vh;
	width: 40vw;
}

/* --------------------------------------------- Anzeigen (Wärmebild + Reinigung) */
.cm-solar .cm-solar-meter {
	margin-top: 26px;
	max-width: 380px;
	font-size: 13px;
	font-weight: 500;
}
.cm-solar-meter-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.cm-solar.cm-solar .cm-solar-meter-row b {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cm-solar-meter-bar {
	height: 6px;
	border-radius: 99px;
	background: rgba(91, 59, 209, 0.14);
	overflow: hidden;
}
.cm-solar-meter-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #8b6cff, #5b3bd1);
	transition: width 0.25s linear;
}
.cm-solar-s2 .cm-solar-meter {
	color: rgba(240, 234, 255, 0.9);
}
.cm-solar-s2 .cm-solar-meter-bar {
	background: rgba(255, 255, 255, 0.14);
}
.cm-solar-s2 .cm-solar-meter-bar i {
	background: linear-gradient(90deg, #ff7a1a, #ffd36b);
}
.cm-solar.cm-solar .cm-solar-meter-note {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--cm-solar-muted);
	min-height: 1.4em;
}
.cm-solar.cm-solar .cm-solar-s2 .cm-solar-meter-note {
	color: rgba(240, 234, 255, 0.7);
}
.cm-solar.cm-solar .cm-solar-again {
	margin-top: 14px;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	background: none;
	border: 0;
	color: var(--cm-solar-violet);
	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;
}
.cm-solar.cm-solar .cm-solar-again.is-shown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.cm-solar-again svg {
	width: 14px;
	height: 14px;
}
/* ohne 3D (Modell oder WebGL fehlt), ohne Skript und im Editor: das Modulfeld als Foto
   (4 × 2 Module), 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 */
.cm-solar .cm-solar-field {
	background: #2a2833 url(../images/solar/modul.webp) 0 0 / 25% 50% repeat;
	border-radius: 3px;
	box-shadow: 0 20px 40px rgba(40, 20, 110, 0.18);
	transition: opacity 1.2s ease;
}
.cm-solar.is-3d .cm-solar-field {
	opacity: 0;
}
.cm-solar:not(.is-js) :is(.cm-solar-meter, .cm-solar-labels),
.cm-solar.is-no-3d :is(.cm-solar-meter, .cm-solar-labels),
.cm-solar.is-no-drone :is(.cm-solar-meter, .cm-solar-labels) {
	display: none;
}

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

/* ------------------------------------------------------------ 04 – Wie oft */
.cm-solar .cm-solar-s4 {
	background: linear-gradient(180deg, #e7e3fb 0%, #ece9fc 100%);
	z-index: 1;
}
.cm-solar-s4 .cm-solar-text {
	position: absolute;
	left: 6vw;
	top: 14vh;
	width: min(560px, 46vw);
}
.cm-solar.cm-solar .cm-solar-s4 .cm-solar-title {
	margin-top: 22px;
}
.cm-solar.cm-solar .cm-solar-takt {
	margin-top: 26px;
	border-top: 1px solid rgba(13, 11, 26, 0.12);
}
.cm-solar.cm-solar .cm-solar-takt li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 16px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(13, 11, 26, 0.12);
}
.cm-solar.cm-solar .cm-solar-takt b {
	font-weight: 600;
	font-size: clamp(15px, 1.15vw, 18px);
}
.cm-solar.cm-solar .cm-solar-takt span {
	grid-column: 1;
	font-size: 13.5px;
	color: var(--cm-solar-muted);
}
.cm-solar.cm-solar .cm-solar-takt em {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-style: normal;
	font-weight: 700;
	color: var(--cm-solar-violet);
	font-size: clamp(14px, 1.1vw, 17px);
	white-space: nowrap;
}
.cm-solar.cm-solar .cm-solar-note {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cm-solar-muted);
	max-width: 460px;
}
/* gespiegelt: die abgeschnittene Bildkante liegt so außerhalb des Bildschirms */
.cm-solar .cm-solar-deco--drop {
	width: clamp(300px, 34vw, 620px);
	right: -2vw;
	bottom: -9vw;
	scale: -1 1;
	transform-origin: 50% 60%;
	filter: drop-shadow(0 30px 50px rgba(40, 20, 120, 0.22));
}

/* ------------------------------------------------------------------ Fuß */
.cm-solar .cm-solar-foot {
	background: #e7e3fb;
	height: 100vh;
	z-index: 1;
}
/* Firmenname links, Spalten rechts – in einer Leiste: bei langen Namen oder Sprachen brechen sie um, statt sich zu überlagern */
.cm-solar-footbar {
	position: absolute;
	left: var(--cm-solar-pad);
	right: calc(var(--cm-solar-pad) + 120px);
	bottom: 80px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px 48px;
}
.cm-solar-brand {
	min-width: 0;
}
.cm-solar.cm-solar .cm-solar-brand strong {
	display: block;
	font-size: clamp(30px, 3vw, 46px);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.cm-solar.cm-solar .cm-solar-brand span {
	font-size: 14px;
	color: var(--cm-solar-muted);
}
.cm-solar-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 56px;
	font-size: 14.5px;
	font-weight: 500;
}
.cm-solar .cm-solar-col > :not(.cm-social) {
	display: block;
	line-height: 1.9;
}
.cm-solar .cm-solar-col .stamp {
	line-height: 1.35;
	margin: 0.2em 0;
}
.cm-solar.cm-solar a.cm-solar-link:hover,
.cm-solar.cm-solar a.cm-solar-link:focus-visible {
	color: var(--cm-solar-violet);
}
/* die Logos der Netzwerke (cm_social_html): violette Ringe auf dem hellen Grund */
.cm-solar .cm-solar-social {
	gap: 8px;
	max-width: 124px;
	padding-top: 4px;
}
.cm-solar .cm-solar-social .cm-social-link {
	width: 36px;
	height: 36px;
	border-color: rgba(91, 59, 209, 0.35);
	color: var(--cm-solar-violet);
}
.cm-solar .cm-solar-social a.cm-social-link:hover,
.cm-solar .cm-solar-social a.cm-social-link:focus-visible {
	border-color: var(--cm-solar-violet);
	background-color: rgba(91, 59, 209, 0.1);
	color: var(--cm-solar-violet);
}
.cm-solar .cm-solar-cta {
	position: absolute;
	left: 50%;
	top: 18vh;
	transform: translateX(-50%);
	text-align: center;
	width: max-content;
	max-width: 92vw;
}
.cm-solar.cm-solar .cm-solar-cta .cm-solar-title {
	font-size: clamp(28px, min(3.6vw, 7vh), 60px);
}

/* ------------------------------------------ Erklär-Schilder an der Drohne (nur im Hero) */
.cm-solar-labels {
	position: fixed;
	inset: 0;
	z-index: 25;
	pointer-events: none;
}
.cm-solar-labels > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.cm-solar-labels line {
	stroke: rgba(13, 11, 26, 0.42);
	stroke-width: 1;
}
.cm-solar-labels circle {
	fill: #fff;
	stroke: var(--cm-solar-violet);
	stroke-width: 2;
}
.cm-solar-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, 20, 110, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--cm-solar-muted);
	opacity: 0;
	will-change: transform, opacity;
}
.cm-solar.cm-solar .cm-solar-callout b {
	display: block;
	color: var(--cm-solar-ink);
	font-weight: 600;
	font-size: 13.5px;
}
.cm-solar-callout.is-left {
	text-align: right;
}
.cm-solar-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;
}
.cm-solar-hot i {
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #ffcf5a;
	box-shadow: 0 0 0 0 rgba(255, 207, 90, 0.7);
	animation: cm-solar-pulse 1.4s ease-out infinite;
}
@keyframes cm-solar-pulse {
	to {
		box-shadow: 0 0 0 10px rgba(255, 207, 90, 0);
	}
}
/* Drohne greifen und selbst bewegen (Klassen am <html>, damit der Zeiger überall gilt) */
html.cm-solar-grab,
html.cm-solar-grab * {
	cursor: grab !important;
}
html.cm-solar-grabbing,
html.cm-solar-grabbing * {
	cursor: grabbing !important;
	-webkit-user-select: none;
	user-select: none;
}
.cm-solar-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, 20, 110, 0.12);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cm-solar-ink);
	white-space: nowrap;
	opacity: 0;
	will-change: transform, opacity;
}
.cm-solar-tip svg {
	width: 17px;
	height: 17px;
	color: var(--cm-solar-violet);
}

/* ------------------------------------------------------------ Ladezeichen */
/* Das Zeichen aus dem Vorspann der Startseite (cm_intro() in template.php, clean-moon-gold.css): der
   Vollmond im feinen Goldring, darunter der Firmenname in goldener Schreibschrift (Allison; ein Name in
   Buchstaben, die die Schrift nicht hat, steht in der Serifenschrift: is-plain). Auf dem Nachthimmel des
   Vorspanns, nicht auf Lila: nur auf dunklem Grund leuchtet das Gold und der Name ist gut lesbar; beim
   Ausblenden steigt das Zeichen ein wenig, und die Nacht geht ruhig in den hellen Himmel des ersten
   Teils über. Eigene Farben statt der Variablen von Clean Moon: Mond Clean Solar nutzt diese Datei
   ohne Clean Moon. */
.cm-solar-loader {
	--cm-solar-gold-light: #e6c77d;
	--cm-solar-gold: #b48a36;
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.6rem, 2vh, 1.15rem);
	padding: 24px 16px;
	/* ein paar feine Sterne über dem Nachthimmel (Mitte etwas heller, wie im Vorspann) */
	background:
		radial-gradient(1.6px 1.6px at 16% 24%, rgba(255, 248, 225, 0.85) 50%, transparent 100%),
		radial-gradient(1.2px 1.2px at 82% 18%, rgba(255, 248, 225, 0.7) 50%, transparent 100%),
		radial-gradient(1.4px 1.4px at 74% 72%, rgba(255, 240, 200, 0.75) 50%, transparent 100%),
		radial-gradient(1px 1px at 27% 78%, rgba(255, 248, 225, 0.6) 50%, transparent 100%),
		radial-gradient(1.2px 1.2px at 90% 46%, rgba(255, 248, 225, 0.55) 50%, transparent 100%),
		radial-gradient(1px 1px at 8% 56%, rgba(255, 248, 225, 0.5) 50%, transparent 100%),
		radial-gradient(70% 60% at 50% 44%, #222a57 0%, #0b0f27 72%);
	color: var(--cm-solar-gold-light);
	transition: opacity 0.8s ease, visibility 0.8s;
	/* ohne Skript geht es nach 4 s von selbst */
	animation: cm-solar-loader-out 0.8s ease 4s forwards;
}
.cm-solar-loader.is-done {
	opacity: 0;
	visibility: hidden;
}
.cm-solar-loader-mark,
.cm-solar-loader-name {
	transition: translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
/* eigene Eigenschaft translate: transform gehört den Eingangs-Animationen */
.cm-solar-loader.is-done :is(.cm-solar-loader-mark, .cm-solar-loader-name) {
	translate: 0 -14px;
}
.cm-solar-loader-mark {
	position: relative;
	flex: none;
	width: clamp(130px, 17vw, 180px);
	aspect-ratio: 1;
}
.cm-solar-loader-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate(-90deg);
}
.cm-solar-loader-ring circle {
	fill: none;
	stroke: var(--cm-solar-gold-light);
	stroke-width: 1.2;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: cm-solar-ring 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}
.cm-solar-loader-moon {
	position: absolute;
	inset: 11%;
	width: 78%;
	height: 78%;
	max-width: none;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.88);
	filter: drop-shadow(0 0 24px rgba(230, 199, 125, 0.4));
	animation: cm-solar-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
/* der Name: Weißgold bis tiefes Gold wie im Vorspann; solange geladen wird, gleitet immer wieder ein
   weiches Licht darüber (statt des drehenden Sterns von früher; viermal, länger steht es nie da). Der Innenabstand gibt den Schwüngen
   der Schreibschrift Platz innerhalb der Fläche, die das Gold füllt. */
.cm-solar-loader-name {
	max-width: 100%;
	margin: 0;
	padding: 0.1em 0.3em 0.2em;
	font-family: "Allison", "Libre Caslon Text", Georgia, serif;
	font-size: clamp(3.4rem, 8vw, 5.4rem);
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	overflow-wrap: anywhere;
	background-image:
		linear-gradient(100deg, transparent 35%, rgba(255, 238, 178, 0.55) 44%, #fff 50%, rgba(255, 238, 178, 0.55) 56%, transparent 65%),
		linear-gradient(100deg, #fff6d8 0%, var(--cm-solar-gold-light) 32%, var(--cm-solar-gold) 68%, #fff1bd 100%);
	background-repeat: no-repeat;
	background-size: 300% 100%, 100% 100%;
	background-position: 100% 0, 0 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 0;
	transform: translateY(0.25em);
	animation:
		cm-solar-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s forwards,
		cm-solar-shine 2.4s ease-in-out 1.2s 4;
}
/* ein Name in Buchstaben, die die Schreibschrift nicht hat (Arabisch, Kyrillisch, Chinesisch ...) */
.cm-solar-loader-name.is-plain {
	font-family: "Libre Caslon Text", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	padding-block: 0.15em 0.25em;
}
/* ein arabischer Name steht aufrecht (Schräge zerrisse die verbundenen Buchstaben) */
.cm-solar-loader-name.is-plain.is-rtl {
	font-style: normal;
	font-weight: 600;
}
@keyframes cm-solar-ring {
	to {
		stroke-dashoffset: 0;
	}
}
@keyframes cm-solar-rise {
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes cm-solar-shine {
	from {
		background-position: 100% 0, 0 0;
	}
	60%,
	to {
		background-position: 0% 0, 0 0;
	}
}
@keyframes cm-solar-loader-out {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* --------------------------------------------------------------- Handy */
@media (max-width: 760px) {
	.cm-solar-nav {
		gap: 6px;
		padding: 10px 14px 0;
	}
	.cm-solar-nav-links {
		display: none;
	}
	/* Handy: Logo (ohne Namen, wenn es eng wird), Sprache, Teilen und der Angebots-Knopf in einer Zeile */
	.cm-solar .cm-solar-logo {
		justify-content: center;
		min-width: 44px;
		margin-inline-end: 0;
		font-size: 15px;
	}
	.cm-solar .cm-solar-logo-img {
		max-width: 110px;
		height: 32px;
	}
	.cm-solar-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 */
	.cm-solar.cm-solar .cm-solar-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(--cm-solar-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;
	}
	.cm-solar.cm-solar.is-on-dark .cm-solar-nav-cta {
		background: #fff;
		color: var(--cm-solar-ink);
	}
}
@media (max-width: 480px) {
	.cm-solar .cm-solar-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. */
	.cm-solar .cm-solar-sec,
	.cm-solar .cm-solar-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 .cm-solar.cm-solar :is(h1, …) { padding: 0 } */
	.cm-solar.cm-solar .cm-solar-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 Drohne und Schlauch), nie unter dem Status */
	.cm-solar-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);
	}
	.cm-solar.cm-solar .cm-solar-hero-side .cm-solar-join {
		margin-top: 16px;
	}
	/* Knöpfe zum Antippen: mindestens 44 px hoch */
	.cm-solar.cm-solar .cm-solar-join {
		min-height: 44px;
	}
	/* das Himmelsbild endet weich (keine harte Kante zu 01 beim Scrollen) */
	.cm-solar .cm-solar-hero::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		z-index: 0;
		height: 16vh;
		height: 16svh;
		background: linear-gradient(180deg, rgba(228, 224, 250, 0) 0%, #e4e0fa 100%);
		pointer-events: none;
	}
	.cm-solar .cm-solar-deco--roof {
		width: min(104vw, 560px);
		left: -30vw;
		bottom: max(-40vw, -230px);
	}
	/* die große Nummer kleiner: das Modulfeld liegt nie darauf */
	.cm-solar .cm-solar-num {
		font-size: min(64px, 8.5vh);
		font-size: min(64px, 8.5svh);
	}
	.cm-solar.cm-solar .cm-solar-title {
		font-size: clamp(24px, 4.4vh, 30px);
		font-size: clamp(24px, 4.4svh, 30px);
	}
	.cm-solar.cm-solar .cm-solar-copy {
		font-size: 14px;
		line-height: 1.5;
	}
	.cm-solar.cm-solar :is(.cm-solar-chips li, .cm-solar-meter-note, .cm-solar-note) {
		font-size: 13px;
	}
	.cm-solar .cm-solar-meter {
		margin-top: 16px;
		font-size: 13.5px;
	}
	.cm-solar.cm-solar .cm-solar-again {
		min-height: 44px;
		margin-top: 4px;
	}
	.cm-solar .cm-solar-deco--branch {
		width: 46vw;
		left: -6vw;
		top: -10vw;
	}
	.cm-solar-field {
		aspect-ratio: auto;
	}
	.cm-solar-s1 .cm-solar-field,
	.cm-solar-s3 .cm-solar-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 */
	.cm-solar-s3 .cm-solar-field {
		top: 21vh;
		top: 21svh;
		height: 24vh;
		height: 24svh;
	}
	.cm-solar-s1 .cm-solar-text,
	.cm-solar-s3 .cm-solar-text {
		left: 18px;
		right: 18px;
		width: auto;
		top: auto;
		bottom: 8vh;
		bottom: 8svh;
	}
	.cm-solar-s2 .cm-solar-text {
		left: 18px;
		right: 18px;
		width: auto;
		top: 10vh;
		top: 10svh;
	}
	.cm-solar-s2 .cm-solar-field {
		left: 8vw;
		right: auto;
		width: 84vw;
		bottom: 3vh;
		bottom: 3svh;
		height: 30vh;
		height: 30svh;
	}
	/* der Mond beginnt unter der Navigation (er lag hinter dem Angebots-Knopf) */
	.cm-solar .cm-solar-deco--moon {
		width: 34vw;
		right: -9vw;
		top: 10vh;
		top: 10svh;
	}
	.cm-solar-s4 .cm-solar-text {
		left: 18px;
		right: 18px;
		width: auto;
		top: 11vh;
		top: 11svh;
	}
	/* 04: rechts oben neben der Überschrift hält die Drohne – lange erste Zeilen (fr, pt) brechen vorher um
	   (logisch, also für Arabisch gespiegelt). Was trotzdem hineinragt, umfliegt sie (src/solar.js, halt). */
	.cm-solar.cm-solar .cm-solar-s4 .cm-solar-title {
		padding-inline-end: 30vw;
	}
	.cm-solar .cm-solar-deco--drop {
		width: 46vw;
		right: -10vw;
		bottom: -10vw;
	}
	/* Fuß im Fluss statt fest gesetzt: oben das Angebot, unten die Fußleiste, dazwischen das freie Band für die
	   Drohne (mindestens so hoch, wie sie samt Schweben in kleiner Größe braucht, src/solar.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 die Drohne auf dem Firmennamen hält. */
	.cm-solar.cm-solar .cm-solar-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;
	}
	.cm-solar .cm-solar-cta {
		position: relative;
		left: auto;
		top: auto;
		align-self: center;
		transform: none;
	}
	/* Firmenname über den Spalten; Kontakt und Rechtliches nebeneinander, die Logos darunter */
	.cm-solar-footbar {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		margin: auto 18px 0;
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
	}
	.cm-solar-cols {
		gap: 12px 20px;
		justify-content: space-between;
	}
	.cm-solar-col--social {
		order: 3;
		flex-basis: 100%;
	}
	.cm-solar .cm-solar-social {
		max-width: none;
	}
	.cm-solar.cm-solar .cm-solar-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. */
	.cm-solar .cm-solar-col--legal {
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
		column-gap: 20px;
		width: min-content;
	}
	.cm-solar.cm-solar .cm-solar-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;
	}
	.cm-solar .cm-solar-social .cm-social-link {
		width: 44px;
		height: 44px;
	}
	.cm-solar-labels .cm-solar-callout,
	.cm-solar-labels > svg {
		display: none;
	}
}
/* niedrige Handys (z. B. iPhone mit eingeblendeten Safari-Leisten, etwa 390 × 664) */
@media (max-width: 760px) and (max-height: 760px) {
	.cm-solar .cm-solar-num {
		display: none;
	}
	/* das dunkle Foto in 04 kleiner: es lag auf dem Ende des Hinweises */
	.cm-solar .cm-solar-deco--drop {
		width: 30vw;
		bottom: -12vw;
	}
	.cm-solar.cm-solar .cm-solar-copy {
		font-size: 13.5px;
	}
}
@media (max-width: 760px) and (max-height: 700px) {
	.cm-solar.cm-solar .cm-solar-chips {
		display: none;
	}
	.cm-solar.cm-solar .cm-solar-s4 .cm-solar-takt li {
		padding: 9px 0;
	}
	/* Fuß: Angebot höher und dichter, Fußleiste enger – so bleibt dazwischen meist Platz für die Drohne */
	.cm-solar.cm-solar .cm-solar-foot {
		padding-top: 12vh;
		padding-top: 12svh;
	}
	.cm-solar.cm-solar .cm-solar-cta .cm-solar-join {
		margin-top: 18px;
	}
	.cm-solar-footbar {
		gap: 14px;
	}
	.cm-solar.cm-solar .cm-solar-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 die Drohne (fr, pt, pl) */
	.cm-solar.cm-solar .cm-solar-h1 {
		font-size: clamp(26px, 8vw, 34px);
	}
	/* 04: die Liste dichter, die Überschrift hat hier oft eine Zeile mehr (siehe oben) */
	.cm-solar.cm-solar .cm-solar-s4 .cm-solar-takt {
		margin-top: 18px;
	}
	.cm-solar.cm-solar .cm-solar-s4 .cm-solar-takt li {
		padding: 6px 0;
	}
	/* Fuß: Angebot und Fußleiste dichter, damit er samt Band für die Drohne bildschirmhoch bleibt (siehe oben) */
	.cm-solar.cm-solar .cm-solar-cta .cm-solar-title {
		font-size: clamp(21px, 6.6vw, 24px);
	}
	.cm-solar.cm-solar .cm-solar-cta .cm-solar-join {
		margin-top: 12px;
	}
	.cm-solar.cm-solar .cm-solar-foot {
		padding-bottom: 60px;
	}
	.cm-solar-footbar {
		gap: 10px;
	}
	.cm-solar.cm-solar .cm-solar-brand strong {
		font-size: 24px;
	}
	.cm-solar.cm-solar .cm-solar-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. */
	.cm-solar.cm-solar .cm-solar-takt span {
		grid-column: 1 / -1;
	}
	.cm-solar.cm-solar .cm-solar-takt em {
		grid-row: 1;
	}
	.cm-solar.cm-solar .cm-solar-s4 .cm-solar-takt {
		margin-top: 12px;
	}
	.cm-solar.cm-solar .cm-solar-s4 .cm-solar-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) {
	.cm-solar.cm-solar .cm-solar-copy {
		font-size: 15px;
	}
	.cm-solar.cm-solar :is(.cm-solar-chips li, .cm-solar-meter-note, .cm-solar-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
   Drohne beim Reinigen schwebt */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
	.cm-solar-s3 .cm-solar-text {
		top: 9vh;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cm-solar-hot i {
		animation: none;
	}
	.cm-solar .cm-solar-reveal,
	.cm-solar.is-js .cm-solar-reveal {
		transform: none;
		transition: opacity 0.4s ease;
	}
	.cm-solar.is-js .cm-solar-line > span {
		transform: none;
	}
	.cm-solar.is-loaded .cm-solar-line > span {
		animation: none;
	}
	/* das Ladezeichen steht gleich ganz da, ohne Zeichnen, Steigen und Lichtschein */
	.cm-solar-loader :is(.cm-solar-loader-ring circle, .cm-solar-loader-moon, .cm-solar-loader-name) {
		animation: none;
		opacity: 1;
		transform: none;
		stroke-dashoffset: 0;
	}
	.cm-solar-loader :is(.cm-solar-loader-mark, .cm-solar-loader-name),
	.cm-solar-loader.is-done :is(.cm-solar-loader-mark, .cm-solar-loader-name) {
		transition: none;
		translate: none;
	}
}

/* -------------------------------------- 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-cm-solar,
.elementor-widget-cm-solar > .elementor-widget-container,
.e-con.e-transform:has(.elementor-widget-cm-solar),
.elementor-widget-cm-solar.e-transform .elementor-widget-container,
:is(.elementor-element, .e-con, .e-con-inner, .elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap):has(.cm-solar) {
	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-cm-solar.animated,
:is(.elementor-element, .e-con, .elementor-section, .elementor-column).animated:has(.cm-solar) {
	animation: none !important;
}

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

/* ------------------------------------------- Elementor-Editor: steht still */
/* Kein 3D und keine festen Ebenen: die Abschnitte liegen lesbar untereinander,
   die Modulfelder zeigen das Foto, Navigation und Status liegen im Widget */
:is(body.cm-editing, body.elementor-editor-active) .cm-solar :is(.cm-solar-loader, .cm-solar-canvas, .cm-solar-labels),
.cm-solar.is-static :is(.cm-solar-loader, .cm-solar-canvas, .cm-solar-labels) {
	display: none;
}
:is(body.cm-editing, body.elementor-editor-active) .cm-solar :is(.cm-solar-nav, .cm-solar-badge),
.cm-solar.is-static :is(.cm-solar-nav, .cm-solar-badge) {
	position: absolute;
}
:is(body.cm-editing, body.elementor-editor-active) .cm-solar .cm-solar-field,
.cm-solar.is-static .cm-solar-field {
	background: #2a2833 url(../images/solar/modul.webp) 0 0 / 25% 50% repeat;
	border-radius: 3px;
	box-shadow: 0 20px 40px rgba(40, 20, 110, 0.18);
}
:is(body.cm-editing, body.elementor-editor-active) .cm-solar :is(.cm-solar-reveal, .cm-solar-hero-side, .cm-solar-line > span),
.cm-solar.is-static :is(.cm-solar-reveal, .cm-solar-hero-side, .cm-solar-line > span) {
	opacity: 1;
	transform: none;
	animation: none;
}
:is(body.cm-editing, body.elementor-editor-active) .cm-solar .cm-solar-meter,
.cm-solar.is-static .cm-solar-meter {
	display: block;
}