/*
 * Farbwerk: die Seite "Malerbetrieb" (Widget fwk-maler, inc/widget-szene.php,
 * Skript assets/js/szene.js aus src/szene.js). Original component written for this template.
 *
 * Schwebende 3D-Werkzeuge machen eine alte Wand neu (Tapete ab, spachteln, streichen oder tapezieren):
 * sechs bildschirmhohe Abschnitte, darüber eine feste 3D-Bühne (Canvas), Erklär-Schilder,
 * Statuskarte und Ladezeichen.
 * Alles hängt unter .fws (keine Regeln für section/body/html allein), Zustände
 * stehen als is-… am Wurzelelement, Keyframes heißen fws-…. 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 */
.fws {
	--fws-ink: #1d1f24;
	--fws-muted: #585b62;
	--fws-grund: #f5f1ea;
	--fws-num: #e0d7c9;
	--fws-num-dark: rgba(255, 207, 138, 0.22);
	--fws-akzent: #a84d2c;
	/* die Wandfarbe, die der Besucher in 03 wählt (das Skript setzt sie an der Wurzel) */
	--fws-farbe: #8a9a7b;
	--fws-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(--fws-ink);
	background: var(--fws-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;
}
.fws *,
.fws *::before,
.fws *::after {
	box-sizing: border-box;
}
/* doppelte Klasse: schlägt Abstände, Schrift- und Linkfarben aus Theme oder Elementor-Website-Einstellungen */
.fws.fws :is(h1, h2, p, ul, li) {
	margin: 0;
	padding: 0;
}
.fws.fws :is(h1, h2, a, button) {
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: none;
}
/* …die große Überschrift behält trotzdem ihren engen Buchstabenabstand */
.fws.fws .fws-h1 {
	letter-spacing: -0.035em;
}
.fws.fws :is(h1, h2) {
	color: inherit;
}
.fws.fws ul {
	list-style: none;
}
.fws.fws a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}
.fws svg {
	display: block;
}

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

/* Status unten rechts – eigene Karte, Farbe nach dem Abschnitt unten am Bildschirm */
.fws-badge {
	position: fixed;
	z-index: 30;
	right: var(--fws-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) */
.fws.is-preis-unten .fws-badge {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}
.fws .fws-badge b {
	font-weight: 700;
	color: var(--fws-akzent);
}
.fws.is-badge-dark .fws-badge {
	background: rgba(20, 24, 32, 0.66);
	color: #fff;
}
.fws.is-badge-dark .fws-badge b {
	color: #ffcf8a;
}
.fws-badge svg {
	width: 20px;
	height: 20px;
}

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

.fws-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 */
.fws-sec + .fws-sec {
	margin-top: -2px;
}
.fws .fws-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) */
.fws-field {
	position: absolute;
	pointer-events: none;
	aspect-ratio: 1.5 / 1;
}

/* ------------------------------------------------------------------ Hero */
.fws .fws-hero {
	background: #f1ece3 url(../images/szene/himmel.webp) center / cover no-repeat;
	overflow: visible;
	z-index: 3;
}
.fws .fws-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(--fws-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 */
.fws .fws-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.2em;
	margin-bottom: -0.14em;
}
.fws .fws-line > span {
	display: inline-block;
}
.fws.is-js .fws-line > span {
	transform: translateY(130%);
}
.fws.is-loaded .fws-line > span {
	animation: fws-rise 1.1s cubic-bezier(0.2, 0.8, 0.15, 1) forwards;
}
.fws.is-loaded .fws-line:nth-child(2) > span {
	animation-delay: 0.12s;
}
@keyframes fws-rise {
	to {
		transform: translateY(0);
	}
}
.fws-hero-side {
	position: absolute;
	right: clamp(24px, 6.5vw, 120px);
	top: 59vh;
	width: min(270px, 80vw);
	z-index: 2;
}
.fws.is-js .fws-hero-side {
	opacity: 0;
}
.fws.is-loaded .fws-hero-side {
	animation: fws-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) */
.fws.is-late :is(.fws-line > span, .fws-hero-side) {
	opacity: 1;
	transform: none;
	animation: none;
}
.fws.fws .fws-hero-side p {
	font-size: clamp(15px, 1.45vw, 20px);
	line-height: 1.32;
	color: var(--fws-muted);
	font-weight: 400;
}
@keyframes fws-fade {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
.fws.fws .fws-join {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 40px;
	font-weight: 600;
	font-size: clamp(15px, 1.4vw, 19px);
}
.fws-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;
}
.fws-join i svg {
	width: 9px;
	height: 9px;
}
.fws-join:hover i,
.fws-join:focus-visible i {
	transform: translateX(4px);
}
/* von rechts nach links (ar): der Pfeil zeigt in Leserichtung, also nach links */
[dir="rtl"] .fws-join i svg {
	transform: scaleX(-1);
}
[dir="rtl"] .fws-join:is(:hover, :focus-visible) i {
	transform: translateX(-4px);
}
.fws .fws-deco--maler {
	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 */
.fws .fws-num {
	font-weight: 600;
	line-height: 0.8;
	letter-spacing: -0.06em;
	font-size: clamp(64px, min(15vw, 24vh), 250px);
	color: var(--fws-num);
}
.fws.fws .fws-title {
	font-weight: 700;
	font-size: clamp(24px, min(3.4vw, 6.6vh), 56px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.fws.fws .fws-copy {
	margin-top: min(22px, 2.6vh);
	font-size: clamp(12.5px, min(1.05vw, 2.1vh), 16px);
	line-height: 1.6;
	color: var(--fws-muted);
	max-width: 440px;
}
.fws .fws-reveal {
	transition: opacity 1s ease, transform 1.1s cubic-bezier(0.2, 0.8, 0.15, 1);
}
.fws.is-js .fws-reveal {
	opacity: 0;
	transform: translateY(40px);
}
.fws.is-js .fws-sec.is-in .fws-reveal {
	opacity: 1;
	transform: none;
}
.fws .fws-sec.is-in .fws-d1 {
	transition-delay: 0.1s;
}
.fws .fws-sec.is-in .fws-d2 {
	transition-delay: 0.22s;
}
.fws .fws-sec.is-in .fws-d3 {
	transition-delay: 0.34s;
}

/* ------------------------------------------------------- 01 – Über Nacht besprüht */
.fws .fws-s1 {
	background: linear-gradient(180deg, #ece5d9 0%, #f7f4ee 100%);
	z-index: 2;
}
/* der abgelöste Streifen der alten Tapete oben links */
.fws .fws-deco--tapete {
	width: clamp(130px, 12vw, 230px);
	left: 4vw;
	top: -3vw;
	transform-origin: 50% 0%;
	filter: drop-shadow(0 20px 30px rgba(40, 30, 20, 0.16));
}
.fws-s1 .fws-field {
	left: 3vw;
	bottom: 5vh;
	width: 42vw;
}
.fws-s1 .fws-text {
	position: absolute;
	left: 52vw;
	top: 22vh;
	width: min(500px, 40vw);
}
.fws.fws .fws-s1 .fws-title {
	margin-top: 22px;
}
.fws.fws .fws-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}
.fws.fws .fws-chips li {
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 12px;
	border-radius: 99px;
	background: rgba(168, 77, 44, 0.08);
	color: #3b3f47;
}

/* -------------------------------------------------- 02 – Einweichen und Abkratzen */
/* ein Hauch dunkler als die Nachbarn (Sand statt Kalkweiß), oben und unten weich in sie übergehend */
.fws .fws-s2 {
	background: linear-gradient(180deg, #f5f1ea 0%, #ede5d7 18%, #ede5d7 82%, #f5f1ea 100%);
	z-index: 3;
}
.fws .fws-s2 .fws-num {
	position: relative;
}
.fws-s2 .fws-text {
	position: absolute;
	left: 6vw;
	top: 20vh;
	width: min(500px, 42vw);
}
.fws.fws .fws-s2 .fws-title {
	margin-top: 22px;
}
.fws-s2 .fws-field {
	right: 5vw;
	bottom: 8vh;
	width: 40vw;
}

/* ---------------------------------------------- Anzeigen (Abkratzen + Streichen/Tapezieren) */
.fws .fws-meter {
	margin-top: 26px;
	max-width: 380px;
	font-size: 13px;
	font-weight: 500;
}
.fws-meter-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.fws.fws .fws-meter-row b {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.fws-meter-bar {
	height: 6px;
	border-radius: 99px;
	background: rgba(168, 77, 44, 0.14);
	overflow: hidden;
}
.fws-meter-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--fws-farbe);
	transition: width 0.25s linear, background-color 0.4s ease;
}
/* 03: feiner Rand, damit auch helle Töne (Altweiß, Sand) auf der hellen Leiste sichtbar bleiben */
.fws-s3 .fws-meter-bar i {
	box-shadow: inset 0 0 0 1px rgba(29, 31, 36, 0.22);
}
/* 02: der Balken in der Farbe des freigelegten Putzes */
.fws-s2 .fws-meter-bar i {
	background: #9a8b74;
}
/* Farbwahl in 03: sechs ruhige Malertöne (nie Regenbogen); die gewählte Farbe färbt Balken und Rolle */
.fws.fws .fws-pick {
	margin-top: 14px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fws-muted);
}
.fws .fws-farben {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 2px;
}
.fws .fws-farbe {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--f);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fws .fws-farbe:hover {
	transform: scale(1.08);
}
.fws .fws-farbe.is-on {
	transform: scale(1.12);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 0 3px var(--fws-grund), 0 0 0 5px var(--fws-ink);
}
.fws .fws-farbe:focus-visible {
	outline: 2px solid var(--fws-ink);
	outline-offset: 5px;
}
.fws .fws-farben[hidden] {
	display: none;
}
/* die Tapeten-Knöpfe zeigen einen Ausschnitt ihres Musters */
.fws .fws-tapete {
	background: var(--bild) center / 420% auto no-repeat, #e8e1d4;
}
/* 03: Streichen oder Tapezieren – zwei Knöpfe nebeneinander wie ein Umschalter */
.fws .fws-modi {
	display: inline-flex;
	gap: 2px;
	margin-top: 14px;
	padding: 3px;
	border-radius: 99px;
	background: rgba(29, 31, 36, 0.06);
}
.fws .fws-modus {
	padding: 7px 16px;
	border: 0;
	border-radius: 99px;
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--fws-muted);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.fws .fws-modus:hover {
	color: var(--fws-ink);
}
.fws .fws-modus.is-on {
	background: #fff;
	color: var(--fws-ink);
	box-shadow: 0 1px 3px rgba(29, 31, 36, 0.14);
}
.fws .fws-modus:focus-visible {
	outline: 2px solid var(--fws-ink);
	outline-offset: 2px;
}

/* -------------------------------------------------------------- Preisrechner */
/* der Knopf in 04: eine Pille in Terrakotta mit Rechner-Zeichen, scrollt zum Rechner */
.fws.fws .fws-rechnen {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
	padding: 12px 20px;
	border: 0;
	border-radius: 99px;
	background: var(--fws-akzent);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(168, 77, 44, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.fws.fws .fws-rechnen:hover {
	background: #923f22;
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(168, 77, 44, 0.34);
}
.fws.fws .fws-rechnen:focus-visible {
	outline: 2px solid var(--fws-ink);
	outline-offset: 3px;
}
.fws .fws-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 die Farbrolle, und nichts Schwebendes liegt auf den Feldern */
.fws .fws-preis {
	position: relative;
	z-index: 26;
	margin-top: -2px;
	padding: clamp(84px, 13vh, 140px) var(--fws-pad) clamp(72px, 12vh, 130px);
	background: #efe9df;
	color: var(--fws-ink);
}
.fws .fws-preis + .fws-sec {
	margin-top: -2px;
}
.fws .fws-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);
}
.fws .fws-preis .fws-num {
	grid-row: 1 / span 2;
	font-size: clamp(64px, min(11vw, 18vh), 170px);
}
.fws.fws .fws-preis .fws-title {
	margin: 0;
}
.fws.fws .fws-preis .fws-rechner-intro {
	max-width: 560px;
	margin-top: 10px;
	font-size: 15px;
}
/* links die Rechnung, rechts Richtpreis und Anfrage */
.fws .fws-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;
}
.fws .fws-preis-links,
.fws .fws-preis-rechts {
	display: grid;
	align-content: start;
	gap: 18px;
	min-width: 0;
}
/* je eine helle Karte */
.fws .fws-preis-links,
.fws .fws-preis .fws-rechner-anfrage,
.fws .fws-preis .fws-rechner-danke {
	padding: clamp(20px, 2.4vw, 30px);
	border-radius: 22px;
	background: #f7f3ec;
	box-shadow: 0 18px 44px rgba(40, 30, 20, 0.08);
}
.fws .fws-preis .fws-rechner-anfrage {
	border-top: 0;
}
.fws.fws .fws-rechner h2 {
	margin: 0;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}
.fws.fws .fws-rechner h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}
.fws.fws .fws-rechner-intro,
.fws.fws .fws-rechner-hinweis {
	margin: 0;
	color: var(--fws-muted);
	font-size: 14px;
	line-height: 1.5;
}
.fws.fws .fws-rechner-hinweis {
	font-size: 12.5px;
}
.fws .fws-rechner-flaeche {
	display: grid;
	gap: 8px;
}
.fws .fws-rechner-flaeche > label,
.fws .fws-rechner-arbeiten legend {
	font-weight: 600;
	font-size: 14px;
}
.fws .fws-rechner-zahl {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.fws .fws-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(--fws-ink);
}
.fws .fws-rechner-zahl span {
	font-weight: 600;
	color: var(--fws-muted);
}
.fws .fws-rechner-typ {
	justify-self: start;
	margin-top: 2px;
}
.fws .fws-rechner-arbeiten {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}
.fws .fws-rechner-arbeiten legend {
	margin-bottom: 8px;
	padding: 0;
}
.fws .fws-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;
}
.fws .fws-rechner-arbeit:has(input:checked) {
	border-color: var(--fws-akzent);
	box-shadow: 0 0 0 3px rgba(168, 77, 44, 0.12);
}
/* die echten Kästchen bleiben bedienbar (Tastatur, Vorleser), sichtbar ist der eigene Haken */
.fws .fws-rechner-arbeit input,
.fws .fws-rechner-zustimmung input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.fws .fws-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;
}
.fws input:checked + .fws-rechner-haken {
	background: var(--fws-akzent);
	border-color: var(--fws-akzent);
}
.fws input:checked + .fws-rechner-haken::after {
	content: "";
	width: 10px;
	height: 6px;
	border: 2px solid #fff;
	border-top: 0;
	border-right: 0;
	transform: translate(1px, -1px) rotate(-45deg);
}
.fws input:focus-visible + .fws-rechner-haken {
	outline: 2px solid var(--fws-ink);
	outline-offset: 2px;
}
.fws .fws-rechner-name {
	font-weight: 600;
	font-size: 15px;
}
.fws .fws-rechner-preis {
	font-size: 12.5px;
	color: var(--fws-muted);
	white-space: nowrap;
}
.fws .fws-rechner-ergebnis {
	display: grid;
	gap: 4px;
	padding: 18px 20px;
	border-radius: 16px;
	background: #1d1f24;
	color: #f5f1ea;
}
.fws .fws-rechner-ergebnis span {
	font-size: 13px;
	opacity: 0.75;
}
.fws.fws .fws-rechner-ergebnis strong {
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.fws.fws .fws-rechner-ergebnis strong.is-leer {
	font-size: 15px;
	font-weight: 600;
}
.fws .fws-rechner-ergebnis small {
	font-size: 12px;
	line-height: 1.45;
	opacity: 0.7;
}
.fws .fws-rechner-anfrage {
	display: grid;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid rgba(29, 31, 36, 0.1);
}
.fws .fws-rechner-anfrage[hidden],
.fws .fws-rechner-danke[hidden],
.fws .fws-rechner-wahl[hidden] {
	display: none;
}
.fws.fws .fws-rechner-wahl {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--fws-akzent);
}
.fws .fws-rechner-felder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.fws .fws-rechner-felder label {
	display: grid;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fws-muted);
}
.fws .fws-rechner-breit {
	grid-column: 1 / -1;
}
.fws .fws-rechner-felder input,
.fws .fws-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(--fws-ink);
	resize: vertical;
}
.fws .fws-rechner-felder :is(input, textarea):focus {
	outline: none;
	border-color: var(--fws-akzent);
	box-shadow: 0 0 0 3px rgba(168, 77, 44, 0.15);
}
/* Falle für Programme: für Menschen unsichtbar */
.fws .fws-rechner-website {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.fws .fws-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(--fws-muted);
	cursor: pointer;
}
.fws .fws-rechner-zustimmung a {
	color: var(--fws-ink);
	text-decoration: underline;
}
.fws.fws .fws-rechner-senden {
	justify-self: start;
	margin-top: 2px;
}
.fws.fws .fws-rechner-senden:disabled {
	opacity: 0.6;
	cursor: wait;
}
.fws.fws .fws-rechner-status {
	min-height: 1.3em;
	margin: 0;
	font-size: 13px;
	color: var(--fws-muted);
}
.fws.fws .fws-rechner-status.is-fehler {
	color: #b3261e;
}
.fws.fws .fws-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) {
	.fws .fws-preis {
		padding: 76px 16px 64px;
	}
	.fws .fws-preis-kopf {
		column-gap: 14px;
	}
	/* auch auf niedrigen Handys (dort fehlen die Nummern der Abschnitte): der Rechner scrollt, Platz ist genug */
	.fws .fws-preis .fws-num {
		display: block;
		font-size: 64px;
	}
	.fws.fws .fws-preis .fws-title {
		font-size: clamp(24px, 7vw, 30px);
	}
	.fws.fws .fws-preis .fws-rechner-intro {
		grid-column: 1 / -1;
		font-size: 14px;
	}
	.fws .fws-rechner-form {
		grid-template-columns: minmax(0, 1fr);
	}
	.fws .fws-rechner-felder {
		grid-template-columns: 1fr;
	}
	.fws .fws-rechner-arbeit {
		grid-template-columns: 24px 1fr;
	}
	.fws .fws-rechner-preis {
		grid-column: 2;
	}
	/* Eingabefelder mit 16 px: sonst vergrößert iOS die Seite beim Antippen */
	.fws .fws-rechner-felder input,
	.fws .fws-rechner-felder textarea {
		font-size: 16px;
	}
}
@media (max-width: 760px) {
	/* am Handy groß genug für den Finger */
	.fws .fws-farbe {
		width: 40px;
		height: 40px;
	}
	.fws .fws-modus {
		padding: 9px 18px;
		font-size: 14px;
	}
	.fws .fws-farben {
		gap: 8px;
	}
}
.fws.fws .fws-meter-note {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--fws-muted);
	min-height: 1.4em;
}
.fws.fws .fws-again {
	margin-top: 14px;
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	background: none;
	border: 0;
	color: var(--fws-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;
}
.fws.fws .fws-again.is-shown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.fws-again svg {
	width: 14px;
	height: 14px;
}
/* ohne 3D (Modell oder WebGL fehlt), ohne Skript und im Editor: die Wand als Foto
   (die alte Wand), 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 */
.fws .fws-field {
	background: #cfc8bc 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;
}
/* 01 und 02: dort klebt noch die alte Tapete */
.fws :is(.fws-s1, .fws-s2) .fws-field {
	background-image: url(../images/szene/tapete-ersatz.webp);
}
.fws.is-3d .fws-field {
	opacity: 0;
}
.fws:not(.is-js) :is(.fws-meter, .fws-labels),
.fws.is-no-3d :is(.fws-meter, .fws-labels),
.fws.is-no-drone :is(.fws-meter, .fws-labels) {
	display: none;
}

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

/* ------------------------------------------------------------ 04 – Wie oft */
.fws .fws-s4 {
	background: linear-gradient(180deg, #f5f1ea 0%, #f7f4ee 100%);
	z-index: 1;
}
.fws-s4 .fws-text {
	position: absolute;
	left: 6vw;
	top: 14vh;
	width: min(560px, 46vw);
}
.fws.fws .fws-s4 .fws-title {
	margin-top: 22px;
}
.fws.fws .fws-takt {
	margin-top: 26px;
	border-top: 1px solid rgba(22, 24, 29, 0.12);
}
.fws.fws .fws-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);
}
.fws.fws .fws-takt b {
	font-weight: 600;
	font-size: clamp(15px, 1.15vw, 18px);
}
.fws.fws .fws-takt span {
	grid-column: 1;
	font-size: 13.5px;
	color: var(--fws-muted);
}
.fws.fws .fws-takt em {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-style: normal;
	font-weight: 700;
	color: var(--fws-akzent);
	font-size: clamp(14px, 1.1vw, 17px);
	white-space: nowrap;
}
.fws.fws .fws-note {
	margin-top: 16px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fws-muted);
	max-width: 460px;
}
/* der Farbfächer unten rechts */
/* Fotos vom Maler bei der Arbeit, unten am Abschnitt wie im Hero: in 02 und 03 steht er zwischen Text und Wand
   (sein Werkzeug darf hinter die Wand reichen), in 04 rechts unten. In 03 und 04 gespiegelt, damit er zur Wand und
   zum Text schaut. */
.fws .fws-deco--foto {
	height: min(38vh, 26vw, 400px);
	width: auto;
	bottom: -3vh;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 24px 34px rgba(40, 30, 20, 0.16));
	z-index: 0;
}
.fws .fws-deco--kratzen {
	left: calc(7vw + min(500px, 42vw)); /* gleich rechts neben der Textspalte (.fws-s2 .fws-text) */
}
.fws .fws-deco--spachteln {
	left: 44vw;
	scale: -1 1;
}
.fws .fws-deco--tapezieren {
	right: 1vw;
	scale: -1 1;
}

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

/* ------------------------------------------ Erklär-Schilder an der Farbrolle (nur im Hero) */
.fws-labels {
	position: fixed;
	inset: 0;
	z-index: 25;
	pointer-events: none;
}
.fws-labels > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.fws-labels line {
	stroke: rgba(22, 24, 29, 0.42);
	stroke-width: 1;
}
.fws-labels circle {
	fill: #fff;
	stroke: var(--fws-akzent);
	stroke-width: 2;
}
.fws-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(--fws-muted);
	opacity: 0;
	will-change: transform, opacity;
}
.fws.fws .fws-callout b {
	display: block;
	color: var(--fws-ink);
	font-weight: 600;
	font-size: 13.5px;
}
.fws-callout.is-left {
	text-align: right;
}
.fws-hot {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 9px;
	border-radius: 99px;
	background: rgba(13, 17, 23, 0.8);
	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;
}
.fws-hot i {
	width: 9px;
	height: 9px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #ffcf8a;
	box-shadow: 0 0 0 0 rgba(255, 207, 138, 0.7);
	animation: fws-pulse 1.4s ease-out infinite;
}
@keyframes fws-pulse {
	to {
		box-shadow: 0 0 0 10px rgba(255, 207, 138, 0);
	}
}
/* Farbrolle greifen und selbst bewegen (Klassen am <html>, damit der Zeiger überall gilt) */
html.fws-grab,
html.fws-grab * {
	cursor: grab !important;
}
html.fws-grabbing,
html.fws-grabbing * {
	cursor: grabbing !important;
	-webkit-user-select: none;
	user-select: none;
}
.fws-tip {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px 6px 10px;
	border-radius: 99px;
	/* fast deckend: die Stange läuft 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(--fws-ink);
	white-space: nowrap;
	opacity: 0;
	will-change: transform, opacity;
}
.fws-tip svg {
	width: 17px;
	height: 17px;
	color: var(--fws-akzent);
}

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

/* --------------------------------------------------------------- Handy */
@media (max-width: 760px) {
	.fws-nav {
		gap: 6px;
		padding: 10px 14px 0;
	}
	.fws-nav-links {
		display: none;
	}
	/* Handy: Logo (ohne Namen, wenn es eng wird), Sprache, Teilen und der Angebots-Knopf in einer Zeile */
	.fws .fws-logo {
		justify-content: center;
		min-width: 44px;
		margin-inline-end: 0;
		font-size: 15px;
	}
	.fws .fws-logo-img {
		max-width: 110px;
		height: 32px;
	}
	.fws-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 */
	.fws.fws .fws-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(--fws-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;
	}
	.fws.fws.is-on-dark .fws-nav-cta {
		background: #fff;
		color: var(--fws-ink);
	}
}
@media (max-width: 480px) {
	.fws .fws-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. */
	.fws .fws-sec,
	.fws .fws-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 .fws.fws :is(h1, …) { padding: 0 } */
	.fws.fws .fws-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 Farbrolle und Stange), nie unter dem Status */
	.fws-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);
	}
	.fws.fws .fws-hero-side .fws-join {
		margin-top: 16px;
	}
	/* Knöpfe zum Antippen: mindestens 44 px hoch */
	.fws.fws .fws-join {
		min-height: 44px;
	}
	/* das Himmelsbild endet weich (keine harte Kante zu 01 beim Scrollen) */
	.fws .fws-hero::after {
		content: "";
		position: absolute;
		inset: auto 0 0;
		z-index: 0;
		height: 16vh;
		height: 16svh;
		background: linear-gradient(180deg, rgba(236, 229, 217, 0) 0%, #ece5d9 100%);
		pointer-events: none;
	}
	.fws .fws-deco--maler {
		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"] .fws .fws-deco--maler {
		left: auto;
		right: -6vw;
		scale: -1 1;
	}
	/* die große Nummer kleiner: die Wand liegt nie darauf */
	.fws .fws-num {
		font-size: min(64px, 8.5vh);
		font-size: min(64px, 8.5svh);
	}
	.fws.fws .fws-title {
		font-size: clamp(24px, 4.4vh, 30px);
		font-size: clamp(24px, 4.4svh, 30px);
	}
	.fws.fws .fws-copy {
		font-size: 14px;
		line-height: 1.5;
	}
	.fws.fws :is(.fws-chips li, .fws-meter-note, .fws-note) {
		font-size: 13px;
	}
	.fws .fws-meter {
		margin-top: 16px;
		font-size: 13.5px;
	}
	.fws.fws .fws-again {
		min-height: 44px;
		margin-top: 4px;
	}
	.fws .fws-deco--tapete {
		width: 20vw;
		left: 2vw;
		top: -6vw;
	}
	.fws-field {
		aspect-ratio: auto;
	}
	.fws-s1 .fws-field,
	.fws-s3 .fws-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 */
	.fws-s3 .fws-field {
		top: 21vh;
		top: 21svh;
		height: 24vh;
		height: 24svh;
	}
	.fws-s1 .fws-text,
	.fws-s3 .fws-text {
		left: 18px;
		right: 18px;
		width: auto;
		top: auto;
		bottom: 8vh;
		bottom: 8svh;
	}
	.fws-s2 .fws-text {
		left: 18px;
		right: 18px;
		width: auto;
		top: 10vh;
		top: 10svh;
	}
	.fws-s2 .fws-field {
		left: 8vw;
		right: auto;
		width: 84vw;
		bottom: 3vh;
		bottom: 3svh;
		height: 30vh;
		height: 30svh;
	}
	.fws-s4 .fws-text {
		left: 18px;
		right: 18px;
		width: auto;
		top: 11vh;
		top: 11svh;
	}
	/* 04: rechts oben neben der Überschrift hält die Farbrolle – lange erste Zeilen (fr, pt) brechen vorher um
	   (logisch, also für Arabisch gespiegelt). Was trotzdem hineinragt, umfliegt sie (src/szene.js, halt). */
	.fws.fws .fws-s4 .fws-title {
		padding-inline-end: 30vw;
	}
	/* Handy: nur in 04 ein Maler-Foto (klein rechts unten); in 02 und 03 ist neben Wand und Text kein Platz */
	.fws .fws-deco--foto {
		height: auto;
		width: 34vw;
		bottom: 0;
	}
	.fws :is(.fws-deco--kratzen, .fws-deco--spachteln) {
		display: none;
	}
	/* klein in der Ecke, halb hinter dem Rand: so bleibt auch längerer Text (fr, es) frei */
	.fws .fws-deco--tapezieren {
		width: 24vw;
		right: -5vw;
		bottom: -5vw;
	}
	/* Fuß im Fluss statt fest gesetzt: oben das Angebot, unten die Fußleiste, dazwischen das freie Band für die
	   Farbrolle (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 die Farbrolle auf dem Firmennamen hält. */
	.fws.fws .fws-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;
	}
	.fws .fws-cta {
		position: relative;
		left: auto;
		top: auto;
		align-self: center;
		transform: none;
	}
	/* Firmenname über den Spalten; Kontakt und Rechtliches nebeneinander, die Logos darunter */
	.fws-footbar {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		margin: auto 18px 0;
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
	}
	.fws-cols {
		gap: 12px 20px;
		justify-content: space-between;
	}
	.fws-col--social {
		order: 3;
		flex-basis: 100%;
	}
	.fws .fws-social {
		max-width: none;
	}
	.fws.fws .fws-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. */
	.fws .fws-col--legal {
		display: flex;
		flex-wrap: wrap;
		flex-grow: 1;
		column-gap: 20px;
		width: min-content;
	}
	.fws.fws .fws-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;
	}
	.fws .fws-social .fws-social-link {
		width: 44px;
		height: 44px;
	}
	.fws-labels .fws-callout,
	.fws-labels > svg {
		display: none;
	}
	/* 04: lange Angaben (Fassade, fr, pt) brechen um statt über den Rand zu laufen */
	.fws.fws .fws-takt em {
		white-space: normal;
		text-align: end;
	}
}
/* niedrige Handys (z. B. iPhone mit eingeblendeten Safari-Leisten, etwa 390 × 664) */
@media (max-width: 760px) and (max-height: 760px) {
	.fws .fws-num {
		display: none;
	}
	/* das Foto in 04 kleiner: es lag sonst auf dem Ende der Liste */
	.fws .fws-deco--tapezieren {
		width: 20vw;
	}
	.fws.fws .fws-copy {
		font-size: 13.5px;
	}
}
@media (max-width: 760px) and (max-height: 700px) {
	.fws.fws .fws-chips {
		display: none;
	}
	/* 04: der Hinweis unter der Liste liefe in längeren Sprachen (fr, ru, tr) unter die Statuskarte */
	.fws.fws .fws-s4 .fws-note {
		display: none;
	}
	.fws.fws .fws-s4 .fws-rechnen {
		display: none;
	}
	.fws.fws .fws-s4 .fws-takt li {
		padding: 9px 0;
	}
	/* Fuß: Angebot höher und dichter, Fußleiste enger – so bleibt dazwischen meist Platz für die Farbrolle */
	.fws.fws .fws-foot {
		padding-top: 12vh;
		padding-top: 12svh;
	}
	.fws.fws .fws-cta .fws-join {
		margin-top: 18px;
	}
	.fws-footbar {
		gap: 14px;
	}
	.fws.fws .fws-brand strong {
		line-height: 1.15;
	}
}
/* niedrige Handys bis 650 px Höhe (z. B. 360 × 640): 03 ohne Absatz (die Beschriftung „Farbe wählen“ sagt dasselbe)
   – sonst bliebe über der Überschrift kaum Platz für die Wand, sie fiele weg und die Rolle schrumpfte mit ihr */
@media (max-width: 760px) and (max-height: 650px) {
	.fws.fws .fws-s3 .fws-copy {
		display: none;
	}
}
/* 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 Farbrolle (fr, pt, pl) */
	.fws.fws .fws-h1 {
		font-size: clamp(26px, 8vw, 34px);
	}
	/* 01: der Text etwas höher – seine letzte Zeile lief sonst unter die Statuskarte */
	.fws-s1 .fws-text {
		bottom: 64px;
	}
	/* 03: kleinere Farbknöpfe, damit über der Überschrift Platz für die Wand bleibt (siehe oben) */
	.fws .fws-farbe {
		width: 36px;
		height: 36px;
	}
	/* 04: die Liste dichter, die Überschrift hat hier oft eine Zeile mehr (siehe oben) */
	.fws.fws .fws-s4 .fws-takt {
		margin-top: 18px;
	}
	.fws.fws .fws-s4 .fws-takt li {
		padding: 6px 0;
	}
	/* Fuß: Angebot und Fußleiste dichter, damit er samt Band für die Farbrolle bildschirmhoch bleibt (siehe oben) */
	.fws.fws .fws-cta .fws-title {
		font-size: clamp(21px, 6.6vw, 24px);
	}
	.fws.fws .fws-cta .fws-join {
		margin-top: 12px;
	}
	.fws.fws .fws-foot {
		padding-bottom: 60px;
	}
	.fws-footbar {
		gap: 10px;
	}
	.fws.fws .fws-brand strong {
		font-size: 24px;
	}
	.fws.fws .fws-col--contact > * {
		line-height: 1.7;
	}
}
/* schmale und niedrige Handys (320 × 568): die Social-Knöpfe im Fuß etwas höher, über der Statuskarte */
@media (max-width: 340px) and (max-height: 600px) {
	.fws.fws .fws-foot {
		padding-bottom: 70px;
	}
}
/* 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 der Stange, die rechts über der Liste endet. */
	.fws.fws .fws-takt span {
		grid-column: 1 / -1;
	}
	.fws.fws .fws-takt em {
		grid-row: 1;
	}
	.fws.fws .fws-s4 .fws-takt {
		margin-top: 12px;
	}
	.fws.fws .fws-s4 .fws-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) {
	.fws.fws .fws-copy {
		font-size: 15px;
	}
	.fws.fws :is(.fws-chips li, .fws-meter-note, .fws-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
   Farbrolle beim Streichen schwebt */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
	.fws-s3 .fws-text {
		top: 9vh;
	}
}
/* niedrige Desktop-Fenster (z. B. 1280 × 720): 04 höher ansetzen, die Nummer kleiner und die Liste dichter – sonst
   liefe der Hinweis unten aus dem Abschnitt (und die Nummer stieße oben an die Navigation) */
@media (min-width: 761px) and (max-height: 780px) {
	/* 03 ebenso: mit der Wahl Streichen | Tapezieren ist der Text dort am längsten */
	:is(.fws-s3, .fws-s4) .fws-text {
		top: 11vh;
	}
	.fws :is(.fws-s3, .fws-s4) .fws-num {
		font-size: 15vh;
	}
	.fws.fws .fws-s4 .fws-takt li {
		padding: 9px 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.fws-hot i {
		animation: none;
	}
	.fws .fws-reveal,
	.fws.is-js .fws-reveal {
		transform: none;
		transition: opacity 0.4s ease;
	}
	.fws.is-js .fws-line > span {
		transform: none;
	}
	.fws.is-loaded .fws-line > span {
		animation: none;
	}
	.fws-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-fws,
.elementor-widget-fws > .elementor-widget-container,
.e-con.e-transform:has(.elementor-widget-fws),
.elementor-widget-fws.e-transform .elementor-widget-container,
:is(.elementor-element, .e-con, .e-con-inner, .elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap):has(.fws) {
	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-fws.animated,
:is(.elementor-element, .e-con, .elementor-section, .elementor-column).animated:has(.fws) {
	animation: none !important;
}

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

/* ------------------------------------------- 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) .fws :is(.fws-loader, .fws-canvas, .fws-labels),
.fws.is-static :is(.fws-loader, .fws-canvas, .fws-labels) {
	display: none;
}
:is(body.elementor-editor-active) .fws :is(.fws-nav, .fws-badge),
.fws.is-static :is(.fws-nav, .fws-badge) {
	position: absolute;
}
:is(body.elementor-editor-active) .fws .fws-field,
.fws.is-static .fws-field {
	background: #cfc8bc 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) .fws :is(.fws-s1, .fws-s2) .fws-field,
.fws.is-static :is(.fws-s1, .fws-s2) .fws-field {
	background-image: url(../images/szene/tapete-ersatz.webp);
}
:is(body.elementor-editor-active) .fws :is(.fws-reveal, .fws-hero-side, .fws-line > span),
.fws.is-static :is(.fws-reveal, .fws-hero-side, .fws-line > span) {
	opacity: 1;
	transform: none;
	animation: none;
}
:is(body.elementor-editor-active) .fws .fws-meter,
.fws.is-static .fws-meter {
	display: block;
}