/**
 * Konfigurator [konfigurator] (siehe inc/class-sana-configurator.php).
 *
 * Steht auf dunklem Grund - die Symbole an den Begriffen sind weiße Linien,
 * wie im Filter. Die Fläche bringt der Konfigurator nicht selbst mit; sie kommt
 * vom Elementor-Container, in dem er steht.
 *
 * Farben und Schriften kommen aus dem Elementor-Kit; der zweite Wert in var()
 * greift nur, wenn der Kit einmal fehlt.
 */

.sana-kf {
	--sana-kf-primary: var(--e-global-color-primary, #222d43);
	--sana-kf-secondary: var(--e-global-color-secondary, #d3d0c7);
	--sana-kf-accent: var(--e-global-color-accent, #707070);
	--sana-kf-white: var(--e-global-color-m1qrwis, #ffffff);

	/* Linien und Rahmen: Secondary, schwach */
	--sana-kf-line: color-mix(in srgb, var(--sana-kf-secondary) 25%, transparent);

	/* Einträge je Reihe */
	--sana-kf-columns: 5;

	box-sizing: border-box;
	width: 100%;
	color: var(--sana-kf-white);
	font-family: var(--e-global-typography-text-font-family, "Source Sans Pro"), sans-serif;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: var(--e-global-typography-text-letter-spacing, 0.05em);
}

.sana-kf *,
.sana-kf *::before,
.sana-kf *::after {
	box-sizing: border-box;
}

/* Das hidden-Attribut muss gegen die display-Regeln unten gewinnen */
.sana-kf [hidden] {
	display: none !important;
}

/* Bis das Skript übernimmt, nur den ersten Schritt zeigen - sonst stünden
   kurz alle fünf da. "is-js" setzt eine Zeile direkt hinter dem Formular. */
.sana-kf.is-js:not(.is-ready) .sana-kf__step ~ .sana-kf__step,
.sana-kf.is-js:not(.is-ready) .sana-kf__result {
	display: none;
}

/* ------------------------------------------------------------------
   Schritte
   ------------------------------------------------------------------ */

.sana-kf__step,
.sana-kf__result {
	padding: 30px 0;
	border-top: 1px solid var(--sana-kf-line);

	/* Beim Hinrollen nicht unter der klebenden Kopfzeile verschwinden */
	scroll-margin-top: 140px;
}

.sana-kf__step.is-done {
	padding: 20px 0;
}

.sana-kf__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 15px;
}

/* Nummer im Kreis; erledigt: gefüllt mit Häkchen */
.sana-kf__number {
	display: grid;
	place-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border: 1px solid var(--sana-kf-secondary);
	border-radius: 50%;
	color: var(--sana-kf-secondary);
	font-family: var(--e-global-typography-mvrlms8-font-family, "Brandon Grotesque"), sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}

.sana-kf__number .sana-kf__check {
	display: none;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

.sana-kf__step.is-current .sana-kf__number {
	background-color: var(--sana-kf-secondary);
	color: var(--sana-kf-primary);
}

.sana-kf__step.is-done .sana-kf__number {
	background-color: var(--sana-kf-secondary);
	color: var(--sana-kf-primary);
}

.sana-kf__step.is-done .sana-kf__digit {
	display: none;
}

.sana-kf__step.is-done .sana-kf__number .sana-kf__check {
	display: block;
}

.sana-kf .sana-kf__title {
	margin: 0;
	padding: 0;
	color: var(--sana-kf-white);
	font-family: var(--e-global-typography-mvrlms8-font-family, "Brandon Grotesque"), sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Erledigt: die Wahl rechts daneben, mit "Ändern". Bei mehreren Einträgen
   stehen die Symbole nebeneinander und brechen bei Bedarf um. */
.sana-kf__choice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 12px;
	margin-left: auto;
	color: var(--sana-kf-secondary);
}

.sana-kf__choice-media {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.sana-kf__choice-media:empty {
	display: none;
}

.sana-kf__choice-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
}

/* Feste Grenzen statt 100 %: Im Raster wächst die Zeile sonst mit dem Bild */
.sana-kf__choice-icon img {
	display: block;
	width: auto;
	height: auto;
	max-width: 28px;
	max-height: 28px;
}

.sana-kf__choice-icon.is-circle {
	overflow: hidden;
	border: 2px solid var(--sana-kf-white);
	border-radius: 50%;
}

.sana-kf__choice-icon.is-circle img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.sana-kf__choice-name {
	color: var(--sana-kf-white);
	font-weight: 700;
}

/* ------------------------------------------------------------------
   Einträge: Kacheln, höchstens fünf je Reihe
   ------------------------------------------------------------------ */

.sana-kf__options {
	display: grid;
	grid-template-columns: repeat(var(--sana-kf-columns), minmax(0, 1fr));
	gap: 20px;
	margin-top: 25px;
}

.sana-kf .sana-kf__option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 20px 10px 16px;
	border: 1px solid var(--sana-kf-line);
	border-radius: 10px;
	color: var(--sana-kf-white);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sana-kf .sana-kf__option:hover {
	border-color: var(--sana-kf-secondary);
}

/* Das echte Optionsfeld: unsichtbar, aber bedienbar */
.sana-kf .sana-kf__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.sana-kf .sana-kf__option:has(input:checked) {
	border-color: var(--sana-kf-secondary);
	background-color: color-mix(in srgb, var(--sana-kf-secondary) 14%, transparent);
}

.sana-kf .sana-kf__option:has(input:focus-visible) {
	outline: 2px solid var(--sana-kf-secondary);
	outline-offset: 2px;
}

/* Häkchen oben rechts */
.sana-kf__option-check {
	position: absolute;
	top: 8px;
	right: 8px;
	display: grid;
	place-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: var(--sana-kf-secondary);
	color: var(--sana-kf-primary);
	transform: scale(0);
	transition: transform 0.15s ease;
}

.sana-kf__option-check .sana-kf__check {
	display: block;
	width: 11px;
	height: 11px;
	fill: currentColor;
}

.sana-kf .sana-kf__option:has(input:checked) .sana-kf__option-check {
	transform: scale(1);
}

/* Fläche der Grafik: überall gleich hoch, damit die Beschriftungen einer
   Reihe auf einer Linie stehen */
.sana-kf__option-media {
	display: grid;
	place-items: center;
	width: 100%;
	height: 80px;
}

.sana-kf__option-media img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80px;
}

/* Maße je Schritt - die Symbole sind unterschiedlich geschnitten */
.sana-kf__options--produkt .sana-kf__option-media img {
	height: 76px;
}

.sana-kf__options--aufstellart .sana-kf__option-media img {
	height: 72px;
}

.sana-kf__options--abteile .sana-kf__option-media img {
	width: 72px;
}

.sana-kf__options--schlosstyp .sana-kf__option-media img {
	width: 50px;
	height: 50px;
}

/* Farbe: Foto im runden Ausschnitt */
.sana-kf__option--circle .sana-kf__option-media {
	width: 64px;
	height: 64px;
	margin: 8px 0;
	overflow: hidden;
	border: 2px solid var(--sana-kf-white);
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--sana-kf-white) 15%, transparent);
}

.sana-kf__option--circle .sana-kf__option-media img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.sana-kf__option-label {
	font-family: var(--e-global-typography-5cnihjb-font-family, "Source Sans Pro"), sans-serif;
	font-size: 14px;
	line-height: 1.3;
	text-wrap: balance;
	hyphens: auto;
}

/* ------------------------------------------------------------------
   Knöpfe
   ------------------------------------------------------------------ */

/* "Weiter" und daneben, wie viel gewählt ist */
.sana-kf__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: 25px;
}

.sana-kf__status {
	color: var(--sana-kf-secondary);
	font-size: 14px;
}

/* Beige mit dunkler Schrift - wie "Anmeldung" in der Kasse */
.sana-kf .sana-kf__next,
.sana-kf .sana-kf__submit {
	display: inline-block;
	margin: 0;
	padding: 16px 30px;
	border: 0;
	border-radius: 10px;
	background-color: var(--sana-kf-secondary);
	color: var(--sana-kf-primary);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: inherit;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Gesperrt, solange nichts gewählt ist */
.sana-kf .sana-kf__next:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.sana-kf .sana-kf__next:not(:disabled):hover,
.sana-kf .sana-kf__next:not(:disabled):focus-visible,
.sana-kf .sana-kf__submit:hover,
.sana-kf .sana-kf__submit:focus-visible {
	background-color: var(--sana-kf-accent);
	color: var(--sana-kf-white);
}

/* Textknöpfe: "Ändern", "Neu starten" */
.sana-kf .sana-kf__edit,
.sana-kf .sana-kf__restart {
	margin: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--sana-kf-secondary);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.3s ease;
}

.sana-kf .sana-kf__edit:hover,
.sana-kf .sana-kf__edit:focus,
.sana-kf .sana-kf__restart:hover,
.sana-kf .sana-kf__restart:focus {
	background: none;
	color: var(--sana-kf-white);
}

.sana-kf button:focus-visible {
	outline: 2px solid var(--sana-kf-secondary);
	outline-offset: 2px;
	box-shadow: none;
}

/* ------------------------------------------------------------------
   Ergebnis
   ------------------------------------------------------------------ */

.sana-kf__result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 30px;
}

.sana-kf .sana-kf__count {
	margin: 0;
	color: var(--sana-kf-white);
	font-family: var(--e-global-typography-3ylgj40-font-family, "Brandon Grotesque"), sans-serif;
	font-size: 25px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.sana-kf .sana-kf__count:empty {
	display: none;
}

.sana-kf__result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px 25px;
}

/* ------------------------------------------------------------------
   Einblenden des nächsten Schritts
   ------------------------------------------------------------------ */

@keyframes sana-kf-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.sana-kf .is-entering {
	animation: sana-kf-in 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.sana-kf .is-entering {
		animation: none;
	}
}

/* ------------------------------------------------------------------
   Tablet und Telefon
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.sana-kf {
		--sana-kf-columns: 4;
	}
}

@media (max-width: 767px) {
	.sana-kf {
		--sana-kf-columns: 3;
	}

	.sana-kf__options {
		gap: 10px;
	}

	.sana-kf .sana-kf__option {
		padding: 16px 6px 12px;
	}

	.sana-kf__option-media {
		height: 64px;
	}

	.sana-kf__option-media img {
		max-height: 64px;
	}

	.sana-kf__options--produkt .sana-kf__option-media img,
	.sana-kf__options--aufstellart .sana-kf__option-media img {
		height: 60px;
	}

	.sana-kf__options--abteile .sana-kf__option-media img {
		width: 56px;
	}

	.sana-kf__options--schlosstyp .sana-kf__option-media img {
		width: 40px;
		height: 40px;
	}

	.sana-kf__option--circle .sana-kf__option-media {
		width: 52px;
		height: 52px;
	}

	.sana-kf__option-label {
		font-size: 13px;
	}

	/* Die Wahl rutscht unter den Titel, eingerückt bis zum Titeltext */
	.sana-kf__choice {
		flex: 1 0 calc(100% - 51px);
		justify-content: flex-start;
		margin-left: 51px;
	}

	.sana-kf .sana-kf__count {
		font-size: 20px;
	}

	.sana-kf .sana-kf__submit {
		width: 100%;
	}
}

@media (max-width: 420px) {
	.sana-kf {
		--sana-kf-columns: 2;
	}
}