/* Gestaltung der fünf Blöcke.
 *
 * Alle Farben, Schriften und Abstände kommen aus den Variablen, die WordPress aus der
 * theme.json des Themes erzeugt (--wp--preset--…). Ändert Remy im Editor eine Farbe,
 * ändern sich auch diese Blöcke. Es gibt hier bewusst keine festen Farbwerte.
 *
 * Bewegungen halten sich an die Ruhe-Einstellung des Betriebssystems
 * (prefers-reduced-motion) — siehe ganz unten.
 */

/* ======================================================================
   1. Vorher und Nachher
   ====================================================================== */

.klwb-vergleich {
	--klwb-pos: 50%;
	--klwb-verhaeltnis: 4 / 3;
	margin: 0;
}

.klwb-vergleich__buehne {
	position: relative;
	aspect-ratio: var(--klwb-verhaeltnis);
	overflow: hidden;
	background: var(--wp--preset--color--grund, #f1f1f0);
	touch-action: pan-y;
}

.klwb-vergleich__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Das linke Bild wird beschnitten. Alles hängt an der einen Variablen, die das
   Bedienelement setzt. */
.klwb-vergleich__schnitt {
	position: absolute;
	inset: 0;
	width: var(--klwb-pos);
	overflow: hidden;
}

.klwb-vergleich__schnitt .klwb-vergleich__bild {
	/* Das Bild darf nicht mitschrumpfen — sonst verschöbe sich der Ausschnitt. */
	width: 100cqw;
}

.klwb-vergleich__buehne {
	container-type: inline-size;
}

.klwb-vergleich__linie {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--klwb-pos);
	width: 2px;
	margin-left: -1px;
	background: var(--wp--preset--color--weiss, #fff);
	pointer-events: none;
}

.klwb-vergleich__marke {
	position: absolute;
	bottom: 12px;
	padding: 4px 10px;
	font-family: var(--wp--preset--font-family--source-sans, sans-serif);
	font-size: var(--wp--preset--font-size--etikett, 13px);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--weiss, #fff);
	background: rgb(0 0 0 / .55);
	pointer-events: none;
}

.klwb-vergleich__marke--links { left: 12px; }
.klwb-vergleich__marke--rechts { right: 12px; }

/* Das Bedienelement liegt über dem ganzen Bild. Die Bahn wird unsichtbar, sichtbar
   bleibt nur der Griff — der sitzt dank der Variablen genau auf der Trennlinie. */
.klwb-vergleich__regler {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: ew-resize;
}

.klwb-vergleich__regler::-webkit-slider-runnable-track { background: none; height: 100%; }
.klwb-vergleich__regler::-moz-range-track { background: none; height: 100%; }

.klwb-vergleich__regler::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--weiss, #fff);
	border: 2px solid var(--wp--preset--color--anthrazit, #1d1d1b);
	cursor: ew-resize;
}

.klwb-vergleich__regler::-moz-range-thumb {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--weiss, #fff);
	border: 2px solid var(--wp--preset--color--anthrazit, #1d1d1b);
	cursor: ew-resize;
}

/* Der Fokusrahmen gehört sichtbar um das ganze Bild — sonst weiss man bei
   Tastaturbedienung nicht, wo man ist. */
.klwb-vergleich__regler:focus-visible {
	outline: 2px solid var(--wp--preset--color--rot, #cd1316);
	outline-offset: 4px;
}

.klwb-vergleich__bildtext {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--source-sans, sans-serif);
	font-size: var(--wp--preset--font-size--klein, 15px);
	opacity: .78;
}

/* ======================================================================
   2. Arbeitsproben
   ====================================================================== */

.klwb-proben {
	--klwb-spalten: 3;
	--klwb-verhaeltnis: 4 / 3;
}

.klwb-proben__raster {
	display: grid;
	grid-template-columns: repeat(var(--klwb-spalten), minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 780px) {
	.klwb-proben__raster { grid-template-columns: repeat(min(2, var(--klwb-spalten)), minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.klwb-proben__raster { grid-template-columns: 1fr; }
}

.klwb-proben__feld { margin: 0; }
.klwb-proben__stueck { margin: 0; }

.klwb-proben__bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--klwb-verhaeltnis);
	object-fit: cover;
	background: var(--wp--preset--color--grund, #f1f1f0);
}

.klwb-proben[style*="auto"] .klwb-proben__bild { aspect-ratio: auto; }

.klwb-proben__oeffner {
	display: block;
	overflow: hidden;
}

.klwb-proben__oeffner .klwb-proben__bild {
	transition: transform .6s cubic-bezier(.25, .74, .22, .99);
}

.klwb-proben__oeffner:hover .klwb-proben__bild,
.klwb-proben__oeffner:focus-visible .klwb-proben__bild {
	transform: scale(1.03);
}

.klwb-proben__legende {
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--source-sans, sans-serif);
	font-size: var(--wp--preset--font-size--klein, 15px);
	opacity: .78;
}

/* Das Vergrösserungsfenster */
.klwb-lupe {
	max-width: min(94vw, 1400px);
	max-height: 94vh;
	padding: 0;
	border: 0;
	background: none;
}

.klwb-lupe::backdrop { background: rgb(0 0 0 / .82); }

.klwb-lupe__bild {
	display: block;
	max-width: 100%;
	max-height: 94vh;
	width: auto;
	height: auto;
}

.klwb-lupe__zu {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	line-height: 1;
	color: var(--wp--preset--color--anthrazit, #1d1d1b);
	background: var(--wp--preset--color--weiss, #fff);
	border: 0;
	cursor: pointer;
}

.klwb-lupe__zu:focus-visible {
	outline: 2px solid var(--wp--preset--color--rot, #cd1316);
	outline-offset: 2px;
}

/* ======================================================================
   3. Kurz gefragt
   ====================================================================== */

.klwb-fragen > * + * { margin-top: 0; }

.klwb-frage__frage {
	margin-top: var(--wp--preset--spacing--30, 32px);
	margin-bottom: 6px;
}

.klwb-fragen > .klwb-frage__frage:first-of-type { margin-top: 0; }

.klwb-frage__antwort {
	margin: 0;
	max-width: 52ch;
}

/* ======================================================================
   4. Kontaktformular
   ====================================================================== */

/* Nach dem Absenden springt die Seite zum Formular. Ohne Abstand verdeckt die stehende
   Kopfzeile die Rückmeldung. */
.klwb-formular { scroll-margin-top: 120px; }

.klwb-formular__form { max-width: none; }

/* Zwei Spalten für die kurzen Felder, Anrede, Mitteilung, Sachfrage und Knopf über die
   ganze Breite. Unter 600 px alles untereinander. Der Abstand kommt aus dem Raster, nicht
   aus dem Rand der Absätze: Das Theme setzt Absatzränder in manchen Abschnitten auf null.
   Knapp gehalten nach Remy, 14.09.2026: „Das Formular ist viel zu groß gestaltet." */
.klwb-formular__gruppe {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.klwb-formular__feld--breit { grid-column: 1 / -1; }

@media (max-width: 600px) {
	.klwb-formular__gruppe { grid-template-columns: 1fr; }
}

.klwb-formular__feld { margin: 0; }

.klwb-formular__marke {
	display: block;
	margin-bottom: 6px;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
}

.klwb-formular__freiwillig {
	font-weight: 400;
	opacity: .72;
}

/* Aussehen der Felder kommt aus dem Theme (grund.css), hier nur die Breite. */
.klwb-formular__eingabe { box-sizing: border-box; width: 100%; }

.klwb-formular__eingabe--gross { resize: vertical; min-height: 120px; }

/* Hinweis über dem Formular und Anrede als Knopfreihe (Remy, 18.09.2026) */
.klwb-formular__vorab {
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--wp--preset--color--nebentext, inherit);
}
.klwb-formular__anrede {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.klwb-formular__anrede > legend { width: 100%; }

/* Anrede als Pillen wie die Knöpfe der Seite. Der Auswahlknopf bleibt als echtes
   Eingabeelement erhalten (unsichtbar, aber bedienbar): Tastatur mit Pfeiltasten,
   Bildschirmleser sagt „Anrede, eins von drei“. 44 px hoch zum Antippen. */
.klwb-formular__pille { position: relative; cursor: pointer; }
.klwb-formular__pille input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.klwb-formular__pille span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 20px;
	border: 2px solid var(--wp--preset--color--anthrazit, #1d1d1b);
	border-radius: 999px;
	font-size: 15px;
	line-height: 1;
	transition: background-color .2s, color .2s;
}
.klwb-formular__pille:hover span { background: var(--wp--preset--color--flaeche, #eeeeeb); }
/* Gewählt: gefüllt UND mit Häkchen, nicht nur über die Farbe erkennbar. */
.klwb-formular__pille input:checked + span {
	background: var(--wp--preset--color--anthrazit, #1d1d1b);
	color: var(--wp--preset--color--weiss, #fff);
}
.klwb-formular__pille input:checked + span::before { content: "✓"; content: "✓" / ""; }
.klwb-formular__pille input:focus-visible + span {
	outline: 3px solid var(--wp--preset--color--rot, #cd1316);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .klwb-formular__pille span { transition: none; } }

/* Fehler in Worten unter dem Feld */
.klwb-formular__fehler {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--rot, #cd1316);
}

/* Budgetrahmen: Felder zum Anklicken statt Auswahlliste (Remy, 14.09.2026). Der Knopf
   selbst ist unsichtbar, aber bedienbar; sichtbar ist das Feld daneben. Gewählt = rot,
   wie die rote Marke im Leitsatz. */
.klwb-formular__wahl {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.klwb-formular__wahl > legend { padding: 0; }

.klwb-formular__kacheln {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.klwb-formular__kachel {
	position: relative;
	display: block;
	cursor: pointer;
}

.klwb-formular__kachel input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.klwb-formular__kachel span {
	display: block;
	box-sizing: border-box;
	height: 100%;
	padding: 7px 10px;
	font-family: var(--wp--preset--font-family--source-sans, sans-serif);
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
	border: 1px solid currentColor;
	transition: background-color .2s, border-color .2s, color .2s;
}

.klwb-formular__kachel:hover span { border-color: var(--wp--preset--color--rot, #cd1316); }

.klwb-formular__kachel input:checked + span {
	color: var(--wp--preset--color--weiss, #fff);
	background: var(--wp--preset--color--rot, #cd1316);
	border-color: var(--wp--preset--color--rot, #cd1316);
}

.klwb-formular__kachel input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--rot, #cd1316);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.klwb-formular__kacheln { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.klwb-formular__kachel span { transition: none; }
}
.klwb-formular__eingabe--klein { max-width: 12rem; }


.klwb-formular__hilfe {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--wp--preset--color--nebentext, inherit);
}

/* Die Honigtöpfe: für Menschen nicht erreichbar, für Programme aber vorhanden.
   Kein display:none und kein hidden — manche Programme überspringen Felder, die
   erkennbar ausgeblendet sind. Aus dem Bild geschoben wirkt es unauffälliger. */
.klwb-formular__topf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.klwb-formular__absenden { margin: 0; }

/* Der Knopf trägt die Knopfgestaltung des Themes (wp-element-button), festgelegt unter
   „Website bearbeiten → Stile → Knopf“. Hier nur, was ein Formularknopf zusätzlich braucht. */
.klwb-formular__knopf { cursor: pointer; }

/* Doppelte Klasse: Die Absatzregeln des Theme setzen sonst Schrift und Grösse der Einleitung. */
.klwb-formular .klwb-formular__fusszeile {
	margin: 0;
	line-height: 1.5;
	font-size: 13px;
	color: var(--wp--preset--color--nebentext, inherit);
}

.klwb-formular__meldung:empty { display: none; }

.klwb-formular__meldung-text {
	margin: 0 0 14px;
	padding: 8px 14px;
	border-left: 3px solid currentColor;
}

/* Nach erfolgreichem Absenden steht nur noch diese Meldung da (Entwurf 18.09.2026). */
.klwb-formular__meldung-text--gut {
	padding: 24px;
	border: 0;
	background: var(--wp--preset--color--flaeche, transparent);
	font-size: 19px;
}

/* Die Schrift folgt dem Grund; rot ist nur die Kante. Roter Text auf dunklem Grund
   wäre zu schwach im Kontrast. */
.klwb-formular__meldung-text--fehler { border-left-color: var(--wp--preset--color--rot, #cd1316); }

.klwb-formular__warnung {
	padding: 12px 14px;
	border: 1px dashed var(--wp--preset--color--rot, #cd1316);
	font-family: var(--wp--preset--font-family--source-sans, sans-serif);
	font-size: var(--wp--preset--font-size--klein, 15px);
}

/* ======================================================================
   5. Nur im Editor
   ====================================================================== */

.klwb-e-bild { margin-bottom: 18px; }
.klwb-e-bild__marke { margin: 0 0 6px; font-weight: 600; }
.klwb-e-bild__probe { display: block; margin-top: 8px; max-width: 100%; height: auto; }

.klwb-e-hinweis,
.klwb-e-warnung {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
}

.klwb-e-hinweis { opacity: .7; }

.klwb-e-warnung {
	padding: 8px 10px;
	color: #8a1a00;
	background: #fff4e5;
	border-left: 3px solid #d97706;
}

.editor-styles-wrapper .klwb-e-frage { margin-bottom: 22px; }

/* ======================================================================
   Ruhe-Einstellung des Betriebssystems achten
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.klwb-proben__oeffner .klwb-proben__bild,
	.klwb-formular__knopf {
		transition: none;
	}

	.klwb-proben__oeffner:hover .klwb-proben__bild,
	.klwb-proben__oeffner:focus-visible .klwb-proben__bild {
		transform: none;
	}
}

/* ======================================================================
   6. Schaubild der Bausteine
   Farben aus der Textfarbe des Abschnitts (currentColor). Auf Anthrazit ergeben
   13 Prozent das dunkle Grau der Kernfläche und 40 Prozent die Umrandung. Die
   Umrandung erreicht so rund 3,8:1 gegen Anthrazit; WCAG verlangt für Grafik 3:1.
   ====================================================================== */

.klwb-schaubild { margin: 0; }

.klwb-schaubild__zeichnung {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.klwb-band {
	fill: transparent;
	stroke: color-mix(in srgb, currentColor 40%, transparent);
	stroke-width: 1.5;
	transition: fill .3s var(--wp--custom--takt, ease), stroke .3s var(--wp--custom--takt, ease), opacity .35s var(--wp--custom--takt, ease);
}

.klwb-band--kern {
	fill: color-mix(in srgb, currentColor 13%, transparent);
	stroke: none;
}

.klwb-band.klwb-aktiv {
	fill: var(--wp--preset--color--rot);
	stroke: var(--wp--preset--color--rot);
}

.klwb-nr {
	font: 600 15px/1 var(--wp--preset--font-family--source-sans);
	fill: color-mix(in srgb, currentColor 66%, transparent);
	transition: fill .3s var(--wp--custom--takt, ease);
}

.klwb-nr.klwb-aktiv { fill: currentColor; }

.klwb-schaubild__legende {
	margin-top: 14px;
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.4;
	color: color-mix(in srgb, currentColor 66%, transparent);
}

/* Erscheinen: nur wenn das Skript die Klasse --bereit gesetzt hat. Ohne Skript und im
   Editor sind die Bänder sofort da. Verzögert wird nur die Deckkraft, nicht der Farbwechsel. */
.klwb-schaubild--bereit .klwb-band { opacity: 0; }

.klwb-schaubild--bereit.klwb-schaubild--gezeigt .klwb-band {
	opacity: 1;
	transition-delay: 0s, 0s, calc(var(--b, 0) * 70ms);
}

@media (max-width: 900px) {
	.klwb-schaubild--bereit .klwb-band { opacity: 1; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.klwb-band,
	.klwb-nr { transition: none; }

	.klwb-schaubild--bereit .klwb-band { opacity: 1; }
}