/*
 * FL Los-Konfigurator – Frontend-Styles
 * Alle Selektoren sind mit "flk-" präfixt. Kein CSS-Reset, keine globalen Element-Selektoren,
 * um Elementor/Theme-Styles nicht zu beeinflussen.
 *
 * Ausnahme: die --flk-*-Farb-/Radius-Tokens stehen auf :root statt auf
 * .flk-root. Zwei Overlays (.flk-loader--submit, .flk-lightbox) werden zur
 * Laufzeit per JS als direktes Kind von <body> statt von .flk-root platziert
 * (siehe FLKConfigurator.prototype.relocateSubmitLoader()/relocateLightbox()
 * in assets/js/flk.js – nötig für zuverlässiges position:fixed unabhängig
 * von einem transformierten Eltern-Containing-Block). Custom Properties
 * vererben sich nur innerhalb des DOM-Teilbaums ihrer Deklaration – auf
 * .flk-root wären sie für diese beiden, nun außerhalb liegenden Overlays
 * nicht mehr aufgelöst. :root ist dagegen Vorfahre von allem auf der Seite,
 * ändert aber – anders als ein Reset auf einem Element-Selektor – nichts am
 * Theme, solange niemand außerhalb dieser Datei dieselben Namen per var()
 * konsumiert.
 */
:root {
	--flk-navy: #000877;
	--flk-blue: #0073BE;
	--flk-blue-light: #a9d2e8;
	--flk-blue-medium: #67ABD2;
	--flk-card-blue: #0090c8;
	--flk-yellow: #fedc00;
	--flk-gray-dark: #878787;
	--flk-gray: #BCBCBC;
	--flk-gray-bright: #E3E3E3;
	--flk-gray-brightest: #f3f3f3;
	--flk-text: #1a1a2e;
	--flk-text-muted: #5b6472;
	--flk-white: #ffffff;
	--flk-green: #1a9c4a;
	--flk-red: #d32f2f;
	--flk-radius-lg: clamp(22px, 2.8vw, 40px);
	--flk-radius-md: clamp(14px, 1.7vw, 24px);
	--flk-radius-sm: clamp(9px, 1.1vw, 15px);
	--flk-radius-xsm: clamp(6px, 0.7vw, 9px);
	--flk-radius-pill: 999px;
	--flk-fontsize-normal: 18px;
}

.flk-root {
	box-sizing: border-box;
	position: relative;
	font-family: DFL, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--flk-text);
	line-height: 1.45;
}

.flk-root *,
.flk-root *::before,
.flk-root *::after {
	box-sizing: border-box;
}

.flk-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.flk-card {
	background: var(--flk-white);
	overflow: hidden;
}

/*
 * Konfigurator-Light ([fl_los_konfigurator_light]): volle Breite statt der
 * (impliziten) Content-Breite des umgebenden Containers, und ohne die weiße
 * Kartenfläche des Haupt-Konfigurators – fügt sich dadurch in den
 * Hintergrund der einbettenden Seite ein, statt als eigene Box abzusetzen.
 * .flk-card bleibt als Klasse erhalten (u. a. für die is-loading/
 * is-submitting-Sichtbarkeitsregeln oben), nur ihr Hintergrund wird hier
 * überschrieben.
 */
.flk-light-root {
	width: 100%;
}

.flk-light-root .flk-card {
	background: transparent;
}

/*
 * Anlass/Lospreis/Anzahl im Konfigurator-Light: eigene Klassen statt der
 * geteilten .flk-field-row/.flk-gesamtpreis (die im Haupt-Konfigurator ein
 * anderes Label-Layout brauchen) – hier steht das Label in jedem Feld immer
 * über dem Eingabeelement. Mobile und Tablet (< 879px) stapeln die drei
 * Felder untereinander, ab 879px stehen sie nebeneinander (spiegelt die
 * .flk-submit-row-Logik weiter unten: mehr Platz = eine Zeile).
 */
.flk-light-fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.flk-light-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 879px) {
	.flk-light-fields {
		flex-direction: row;
		align-items: flex-start;
		gap: 24px;
	}

	.flk-light-field {
		flex: 1 1 0;
		min-width: 0;
	}
}

/*
 * Test: Lospreis-Slider und Anzahl-Stepper im Konfigurator Light ausblenden,
 * nur Anlass bleibt sichtbar/auswählbar. Preis und Anzahl laufen im
 * Hintergrund unverändert mit ihren Defaultwerten (Settings/Shortcode-Attribut)
 * weiter – flk-light.js berechnet und verlinkt sie wie gewohnt, nur ohne
 * UI dafür. Einfach diese Regel entfernen, um beide Felder wieder einzublenden.
 */
.flk-light-field--hidden {
	display: none;
}

/*
 * Absenden-Button im Konfigurator-Light: mittig unter das (aktuell einzige
 * sichtbare) Auswahlfeld statt rechtsbündig wie .flk-actions im
 * Haupt-Konfigurator, mit etwas Abstand zu den Feldern darüber.
 */
.flk-light-root .flk-actions {
	justify-content: center;
	margin-top: 24px;
}

.flk-loader {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 10;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	background: var(--flk-white);
	border-radius: var(--flk-radius-lg);
	border: 1px solid var(--flk-blue);
	min-height: 320px;
}

/*
 * :not(.flk-loader--submit) ist hier Pflicht, kein Stilmittel: der
 * Submit-Loader trägt zusätzlich zu .flk-loader--submit auch die
 * gemeinsame Basisklasse .flk-loader und liegt im server-gerenderten
 * Ausgangsmarkup noch INNERHALB von .flk-root – seine Auslagerung zu
 * <body> passiert erst per JS (relocateSubmitLoader() beim Start von
 * init()). Ohne den Ausschluss trifft dieser Selektor bis zum
 * Skript-Start (nicht nur für einen kurzen Frame) auch auf ihn zu und
 * zeigt fälschlich das blickdichte "E-Mail wird gesendet …"-Overlay
 * (position:fixed, z-index:10000) über dem eigentlichen
 * Lade-Hinweis an.
 */
.flk-root.is-loading .flk-loader:not(.flk-loader--submit) {
	display: flex;
}

.flk-root.is-loading .flk-card {
	visibility: hidden;
}

/*
 * Overlay während des Formular-Versands (inkl. Bild-Uploads): blendet .flk-card
 * nur vorübergehend aus statt sie zu ersetzen – die eingegebenen Formulardaten
 * bleiben dabei unangetastet im DOM, nur unsichtbar (siehe
 * FLKConfigurator.prototype.submit).
 *
 * Anders als der initiale Lade-Zustand "position:fixed" statt "absolute" UND
 * (siehe FLKConfigurator.prototype.relocateSubmitLoader) als direktes Kind von
 * <body> statt von .flk-root: .flk-root steckt oft in einem Eltern-Element
 * mit eigenem CSS-Containing-Block (z. B. Elementor-Motion-Effects nutzen
 * "transform"), wodurch "position:fixed" sonst nicht mehr relativ zum
 * Browser-Viewport zentriert. Als Kind von <body> ist das ausgeschlossen –
 * dafür gilt hier auch NICHT mehr der ".flk-root *"-Reset weiter unten
 * (box-sizing), deshalb hier explizit gesetzt statt darauf zu vertrauen.
 */
.flk-loader--submit {
	position: fixed;
	z-index: 10000;
	background: rgba(0, 8, 119, 0.55);
	border: none;
	border-radius: 0;
	min-height: 0;
	gap: 0;
	box-sizing: border-box;
}

.flk-loader--submit.is-visible {
	display: flex;
}

.flk-root.is-submitting .flk-card {
	visibility: hidden;
}

.flk-loader--submit *,
.flk-loader--submit *::before,
.flk-loader--submit *::after {
	box-sizing: border-box;
}

.flk-loader__dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	background: var(--flk-white);
	border-radius: var(--flk-radius-lg);
	border: 1px solid var(--flk-blue);
	padding: 32px 28px;
	max-width: min(90vw, 360px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.flk-loader__spinner {
	/* explizit statt sich auf die Flex-Blockifizierung von <span> zu
	   verlassen: robust unabhängig vom Elternkontext. */
	display: block;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border: 4px solid var(--flk-blue-light);
	border-top-color: var(--flk-blue);
	border-radius: 50%;
	animation: flk-spin 0.8s linear infinite;
}

.flk-loader__text {
	margin: 0;
	font-size: var(--flk-fontsize-normal);
	font-weight: 600;
	color: var(--flk-navy);
	text-align: center;
}

.flk-loader__progress {
	width: 220px;
	max-width: 80%;
	height: 8px;
	background: var(--flk-gray-bright);
	border-radius: var(--flk-radius-pill);
	overflow: hidden;
}

.flk-loader__progress-bar {
	height: 100%;
	width: 0%;
	background: var(--flk-blue);
	border-radius: var(--flk-radius-pill);
	transition: width 0.15s ease-out;
}

@keyframes flk-spin {
	to {
		transform: rotate(360deg);
	}
}

.flk-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--flk-blue);
	color: var(--flk-white);
	padding: 16px 32px;
	font-size: 18px;
	font-weight: 600;
}

.flk-topbar__step {
	position: relative;
	padding-left: 20px;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.6);
}

.flk-topbar__step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
}

.flk-topbar__step.is-active {
	color: var(--flk-white);
}

.flk-topbar__step.is-active::before {
	background: var(--flk-white);
}

.flk-topbar__line {
	flex: 1;
	height: 1px;
	background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.4) 0 4px, transparent 4px 8px);
}

.flk-step {
	padding: clamp(16px, 2vw, 32px);
}

.flk-step[hidden] {
	display: none;
}

.flk-gesamtpreis {
	display: flex;
	align-items: baseline;
	flex-direction: row;
	gap: 24px;
	justify-content: space-between;
}

.flk-field-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0;
	/*border-bottom: 1px solid #eef0f3; */
}

.flk-field-row--slider {
	border-bottom: none;
	padding: 8px 0;
}

.flk-stepper {
	display: flex;
	align-items: center;
	gap: 4px;
	background: var(--flk-white);
	border-radius: var(--flk-radius-pill);
	padding: 6px 10px;
}

.flk-stepper__btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--flk-blue);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.flk-stepper__btn:hover {
	background: var(--flk-navy);
	color: var(--flk-white);
}

.flk-stepper__input {
	width: 90px;
	text-align: center;
	border: none;
	background: transparent;
	font-size: 24px;
	font-weight: 700;
	color: var(--flk-text);
	appearance: textfield;
}

.flk-stepper__input::-webkit-outer-spin-button,
.flk-stepper__input::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.flk-slider-value {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 14px;
	transform: translateX(-50%);
	background: var(--flk-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	border-radius: var(--flk-radius-md);
	padding: 6px 18px;
	font-size: 28px;
	font-weight: 700;
	color: var(--flk-text);
	min-width: 90px;
	text-align: center;
	pointer-events: none;
	white-space: nowrap;
}

.flk-slider-wrap {
	padding: 0px 4px 40px 4px;
}

.flk-slider-track {
	position: relative;
}

.flk-slider {
	width: calc(100% - 4px);
	appearance: none;
	height: 24px;
	border-radius: var(--flk-radius-pill);
	background: linear-gradient(to right, var(--flk-blue-medium) 0%, var(--flk-blue-medium) var(--flk-fill, 0%), var(--flk-gray-bright) var(--flk-fill, 0%), var(--flk-gray-bright) 100%);
	outline: none;
}

.flk-slider::-webkit-slider-thumb {
	appearance: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--flk-blue);
	border: 3px solid var(--flk-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.flk-slider::-moz-range-thumb {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--flk-blue);
	border: 3px solid var(--flk-white);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.flk-slider::-moz-range-track {
	height: 8px;
	border-radius: var(--flk-radius-pill);
	background: var(--flk-gray-bright);
}

.flk-slider::-moz-range-progress {
	height: 8px;
	border-radius: var(--flk-radius-pill);
	background: var(--flk-blue-medium);
}

.flk-slider-scale {
	display: flex;
	justify-content: space-between;
	margin: 0px 10px 10px;
	font-size: 12px;
	color: var(--flk-text-muted);
}
.flk-slider-scale__mark {
	width: 30px;
	text-align: center;
}

.flk-slider-scale__mark.is-current {
	color: var(--flk-gray);
	font-size: 12px;
	line-height: 1.4em;
}

.flk-slider-scale__mark.is-hidden-mobile {
	display: none;
}

.flk-fields-input__group {
	padding:var(--flk-radius-md);
	border: 1px solid var(--flk-gray-bright);
	border-radius: var(--flk-radius-md);
	background: var(--flk-gray-brightest);
	/*border-bottom: 1px solid #e6e9ee;*/
}

.flk-steuerhinweise {
	margin-top: 12px;
	font-size: 12px;
	color: var(--flk-text-muted);
}

.flk-gesamtsumme {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
	margin: 10px;
}

.flk-gesamtsumme__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--flk-text-muted);
}

.flk-gesamtsumme__wert {
	font-size: 28px;
	font-weight: 700;
	color: var(--flk-text);
}

.flk-ergebnisse {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin-top: 24px;
}

.flk-ergebnisse__karten {
	display: contents;
}

.flk-ergebnisse__hinweis {
	grid-column: 1 / -1;
	background: var(--flk-gray-brightest);
	border-radius: var(--flk-radius-md);
	padding: 16px 20px;
	font-size: 14px;
	animation: flk-fade-in 260ms ease-out;
}

.flk-los-card {
	border-radius: var(--flk-radius-md);
	overflow: hidden;
	background: var(--flk-white);
	border: 1px solid color-mix(in srgb, var(--flk-los-farbe, var(--flk-card-blue)) 30%, transparent);
	display: flex;
	flex-direction: column;
	animation: flk-fade-in 260ms ease-out;
	transition: box-shadow 0.15s ease, transform 0.15s ease;

}

.flk-los-card:hover {
	/*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	transform: translateY(-5px);*/
}

.flk-los-card.is-leaving,
.flk-ergebnisse__hinweis.is-leaving {
	animation: flk-fade-out 150ms ease-in forwards;
}

@keyframes flk-fade-in {
	from {
		opacity: 0;
		transform: scale(0.92);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes flk-fade-out {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(0.96);
	}
}

@media (prefers-reduced-motion: reduce) {
	.flk-los-card,
	.flk-ergebnisse__hinweis,
	.flk-los-card.is-leaving,
	.flk-ergebnisse__hinweis.is-leaving {
		animation-duration: 0.01ms;
	}
}

.flk-los-card--placeholder {
	background: transparent;
	border: 2px dashed #c7cdd6;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	padding: 20px;
}

.flk-los-card__placeholder-text {
	text-align: center;
	color: var(--flk-text-muted);
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.flk-los-card__header {
	background: var(--flk-los-farbe, var(--flk-card-blue));
	color: var(--flk-white);
	padding: 20px;
}

.flk-los-card__preis {
	font-size: 28px;
	line-height: 120%;
	font-weight: 700;
	margin: 0 0 8px 0;
}

.flk-los-card__hoechstgewinn {
	font-size: 18px;
	font-weight: 600;
	opacity: 0.95;
	margin:0;
}

.flk-los-card__meta {
	display: flex;
	gap: 16px;
	font-size: 15px;
	margin-top: 10px;
	opacity: 0.9;
}

.flk-los-card__meta-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.flk-los-card__meta-item::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.flk-los-card__meta-item--dauer::before {
	background-image: url("../images/dfl-icon-spieldauer-alt-weiss.svg");
}

.flk-los-card__meta-item--ziehungen::before {
	background-image: url("../images/dfl-icon-spiel-weiss.svg");
}

.flk-los-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	background-color: color-mix(in srgb, var(--flk-los-farbe, var(--flk-card-blue)) 10%, transparent);
}

.flk-los-card__body[hidden] {
	display: none;
}

.flk-los-card__toggle {
	display: block;
	width: 100%;
	background-color: color-mix(in srgb, var(--flk-los-farbe, var(--flk-card-blue)) 10%, transparent);
	color: var(--flk-blue);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-align: left;
	cursor: pointer;
	padding: 14px 20px;
}

.flk-los-card__toggle:hover {
	color: var(--flk-navy);
}

.flk-los-card__toggle:focus-visible {
	outline: 2px solid var(--flk-blue);
	outline-offset: -2px;
}

.flk-los-card__claim {
	margin: 0;
	padding: 14px 20px;
	font-size: 14px;
	font-style: italic;
	color: var(--flk-text-muted);
	background-color: color-mix(in srgb, var(--flk-los-farbe, var(--flk-card-blue)) 10%, transparent);
}

.flk-los-card__cta {
	align-self: center;
	margin-bottom: 8px;
}

.flk-los-card__leistungen-titel {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--flk-text-muted);
	letter-spacing: 0.04em;
	margin: 4px 0 0;
}

.flk-los-card__leistung {
	font-size: var(--flk-fontsize-normal);
	margin: 0;
}

.flk-los-card__leistung strong {
	display: block;
}

.flk-los-card__benefit--headline {
	margin: 0;
	padding-top:16px;
	border-top: 1px solid var(--flk-card-blue);
}
.flk-los-card__benefit {
	font-size: var(--flk-fontsize-normal);
	margin: 0;
}

.flk-los-card__benefit--checkmark {
	position: relative;
	padding-left: 20px;
}

.flk-los-card__benefit--checkmark::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 14px;
	height: 14px;
	background: url("../images/dfl-icon-check-circle-blue-28.png") no-repeat center / contain;
}



.flk-premium-card {
	border-radius: var(--flk-radius-md);
	padding: 20px;
	margin:20px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	background: var(--flk-gray-brightest);

}

.flk-teaser-image {
	width: 100%;
	height: auto;
	border-radius: var(--flk-radius-lg);
	object-fit: cover;
	display: block;
}

.flk-premium-card__badge {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: rgba(255, 255, 255, 0.55);
	color: var(--flk-navy);
	border-radius: var(--flk-radius-pill);
	padding: 4px 12px;
	align-self: flex-start;
}

.flk-premium-card__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--flk-navy);
	margin: 0;
}

.flk-premium-card__text {
	font-size: var(--flk-fontsize-normal);
	color: var(--flk-text);
}

.flk-premium-card__text ul {
	padding-left: 18px;
	margin: 0;
}

.flk-premium-card__preis {
	font-size: 16px;
	font-weight: 700;
	color: var(--flk-navy);
	margin: 0;
}

.flk-premium-card--inline {
	max-width: none;
	border: 1px solid #eef0f3;
}

.flk-premium-card--inline .flk-premium-card__title {
	color: var(--flk-blue);
	font-size: 24px;
}

.flk-premium-card--inline .flk-premium-card__preis {
	color: var(--flk-blue);
}

.flk-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--flk-radius-pill);
	padding: 12px 26px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	border: 2px solid transparent;
	transition: opacity 0.15s ease;
}

.flk-button:hover {
	opacity: 0.9;
}

.flk-button--primary {
	background: var(--flk-blue);
	color: var(--flk-white);
}

.flk-button--primary:hover {
	background: var(--flk-navy);
}

.flk-button--secondary {
	background: #fff!important;
	color: var(--flk-blue)!important;
	border: 2px solid var(--flk-blue)!important;
	height:max-content;
}

.flk-button--secondary:hover {
	color: var(--flk-navy)!important;
	border-color: var(--flk-navy)!important;
}

.flk-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ===================== Schritt 2 ===================== */

.flk-summary-card-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.flk-summary-card-wrap[hidden] {
	display: none;
}

.flk-summary-card-wrap__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

h3.flk-summary-card__headline {
	font-size: 24px;
	margin: 0;
	color: var(--flk-text-muted);
}

.flk-summary-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/*
 * Zurück-Button in Step 4: steht dort allein (keine Zwischenüberschrift auf
 * gleicher Höhe wie in Step 2/3, siehe .flk-summary-card-wrap__head) und
 * soll oben LINKS stehen statt wie die anderen Zurück-Buttons rechtsbündig
 * neben einem Titel – .flk-button ist standardmäßig inline-flex, bleibt also
 * ohnehin linksbündig; der Abstand grenzt ihn nur vom Inhalt darunter ab.
 */
.flk-step-back {
	margin-bottom: 20px;
}

/*
 * Zusammenfassung (Step 4): kompakte Label/Wert-Liste. Eigene, dedizierte
 * Klassen statt einer Wiederverwendung von .flk-form-grid o. ä., weil hier
 * anders als bei den Eingabefeldern Label UND Wert in einer Zeile stehen
 * sollen ("kurz und übersichtlich").
 */
.flk-recap-list {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.flk-recap-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--flk-gray-bright);
}

.flk-recap-row:last-child {
	border-bottom: none;
}

.flk-recap-row__label {
	margin: 0;
	font-weight: 700;
	color: var(--flk-text-muted);
	flex: 0 0 auto;
}

.flk-recap-row__value {
	margin: 0 0 0 auto;
	text-align: right;
	color: var(--flk-text);
	max-width:400px;
}

/* Kompakte Vorschau des gewählten Motivs (Standard- oder eigenes Motiv). */
img.flk-recap-motiv-preview {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	border-radius: var(--flk-radius-sm);
	margin-left: auto;
	border:#efefef 1px solid;
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
}

.flk-field-block {
	margin-bottom: 18px;
}

.flk-field-block--half {
	display: inline-block;
	width: calc(50% - 8px);
}

.flk-field-block--half:first-of-type {
	margin-right: 16px;
}

.flk-input,
.flk-textarea,
.flk-select {
	font-family: inherit;
	width: 100%;
	border: 1.5px solid #c7cdd6;
	border-radius: var(--flk-radius-md);
	padding: 14px 24px;
	font-size: 18px;
	color: var(--flk-text);
	background: var(--flk-white);
}

.flk-input:focus,
.flk-textarea:focus,
.flk-select:focus {
	outline: 2px solid var(--flk-blue);
	outline-offset: 1px;
	background: var(--flk-white);
}

.flk-textarea {
	resize: vertical;
	min-height: 100px;
	border-radius: var(--flk-radius-xsm);
}
.flk-select {
	font-weight:700;
}

/*
 * Natives <select> optisch an .flk-input/.flk-textarea angleichen: eigener
 * Chevron statt des Browser-/OS-Standardpfeils, der sonst nicht zum flachen
 * Rest-Design passt (appearance:none entfernt ihn, das SVG ersetzt ihn).
 */
.flk-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 16px;
	padding-right: 48px;
	cursor: pointer;
}

.flk-anlass-sonstiges {
	margin-top: 10px;
}

.flk-anlass-sonstiges[hidden] {
	display: none;
}

.flk-char-counter {
	font-size: 12px;
	color: var(--flk-text-muted);
	margin: 6px 0 0;
	text-align: right;
}

.flk-checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--flk-fontsize-normal);
	margin: 12px 0;
	cursor: pointer;
}

.flk-checkbox-row input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	min-width: 24px;
	margin: 0;
	border-radius: 50%;
	border: 1.5px solid #c7cdd6;
	background-color: var(--flk-white);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	cursor: pointer;
	flex: none;
}

.flk-checkbox-row input[type="checkbox"]:checked {
	border-color: transparent;
	background-image: url("../images/dfl-icon-check-circle-blue.svg");
}

.flk-checkbox-row input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--flk-blue);
	outline-offset: 2px;
}

p.flk-infotext {
	margin:0;
}

p.flk-infotext-wichtig {
	font-weight: 700;
	color: var(--flk-blue);
}

/*
 * Motivauswahl (Schritt 2, "Lose gestalten"): Bildkacheln statt Dropdown,
 * damit Besucher das Motiv tatsächlich sehen bevor sie wählen. "Eigenes
 * Motiv" ist als letzte Kachel immer vorhanden (siehe
 * FLKConfigurator.prototype.renderMotivGrid in assets/js/flk.js) und blendet
 * beim Auswählen das bestehende .flk-upload-field[data-flk-upload="motiv"]
 * ein. Die eigentlichen <input type="radio"> stecken unsichtbar
 * (.flk-visually-hidden) in jeder Kachel – der Auswahlzustand wird rein über
 * die :checked-Geschwister-Selektoren unten sichtbar gemacht.
 *
 * Maximal 3 Kacheln pro Zeile unter 879px, 7 ab 879px (spiegelt die an
 * anderer Stelle im Plugin etablierte Breakpoint-Logik) – anders als
 * "repeat(auto-fill, …)" bleibt die Spaltenzahl damit auch bei wenigen
 * Motiven vorhersehbar statt sich an die verfügbare Breite anzupassen.
 */
.flk-motiv-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 18px 0 24px;
}

@media (min-width: 415px) {
	.flk-motiv-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 879px) {
	.flk-motiv-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

.flk-motiv-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	text-align: center;
	position: relative;
}

/*
 * Bewusst kein festes Seitenverhältnis: Motive sollen in ihrem nativen
 * Format erscheinen (Hochformat, Querformat, DIN-Lang-Banner …), damit immer
 * das ganze Bild sichtbar ist statt beschnitten zu werden. Die Bildbreite
 * kommt vom Grid, die Höhe ergibt sich aus dem intrinsischen Seitenverhältnis
 * des jeweiligen Bildes – "object-fit: contain" ist hier nur eine
 * Absicherung, verändert das Ergebnis bei width:100%/height:auto aber nicht.
 */
.flk-motiv-tile__image {
	width: 100%;
	border-radius: 5px;
	border: 2px solid var(--flk-gray-bright);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--flk-white);
	position: relative;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.flk-motiv-tile__image img {
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

/* "Eigenes Motiv" hat kein Bild und bräuchte ohne festes Verhältnis keine
   sinnvolle Höhe – nur hier bleibt die Kachel quadratisch. */
.flk-motiv-tile__image--placeholder {
	aspect-ratio: 1;
	font-size: 32px;
	font-weight: 700;
	color: var(--flk-gray-dark);
	background: var(--flk-gray-brightest);
}

.flk-motiv-tile__titel {
	font-size: 13px;
	font-weight: 600;
	color: var(--flk-text-muted);
}

.flk-motiv-tile input:checked ~ .flk-motiv-tile__image {
	border-color: transparent;
	box-shadow: none;
	transform: scale(1.05);
}

/*
 * Auswahl-Overlay statt der früheren blauen Umrandung: navy Abtönung (80%)
 * plus zentrierter weißer Haken – deutlich klarer erkennbar, gerade bei
 * Motiven mit hellem Bildrand, wo eine reine Umrandung leicht untergeht.
 * Als ::after statt direkt auf dem <img>, damit dieses selbst unverändert
 * bleibt. Die Lupe (.flk-motiv-tile__preview) ist absolut auf dem
 * übergeordneten .flk-motiv-tile positioniert (nicht auf .flk-motiv-tile__image)
 * und liegt als einziges weiteres positioniertes Element ohne eigenes
 * z-index in DOM-Reihenfolge NACH diesem Overlay – bleibt also unabhängig
 * davon sichtbar darüber.
 */
.flk-motiv-tile input:checked ~ .flk-motiv-tile__image::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background:
		url("../images/dfl-icon-check-circle-weiss.svg") no-repeat center / 40px 40px,
		color-mix(in srgb, var(--flk-navy) 80%, transparent);
}

.flk-motiv-tile input:checked ~ .flk-motiv-tile__titel {
	color: var(--flk-navy);
}

.flk-motiv-tile input:focus-visible ~ .flk-motiv-tile__image {
	outline: 2px solid var(--flk-blue);
	outline-offset: 2px;
}

/*
 * Vorschau-Button (Lupe) oben rechts auf jeder echten Motiv-Kachel: öffnet
 * die Lightbox (siehe .flk-lightbox unten), ohne die Radio-Auswahl der
 * Kachel auszulösen (stopPropagation() in initMotivauswahl()). Nur bei
 * echten Motiven vorhanden, nicht bei der "Eigenes Motiv"-Kachel.
 */
.flk-motiv-tile__preview {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.9);
	color: var(--flk-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.flk-motiv-tile__preview:hover,
.flk-motiv-tile__preview:focus-visible {
	background: var(--flk-white);
	outline: 2px solid var(--flk-blue);
	outline-offset: 1px;
}

/*
 * Modale Lightbox für die Motiv-Vorschau: wie .flk-loader--submit als Kind
 * von <body> statt von .flk-root relozieren (siehe relocateLightbox() in
 * assets/js/flk.js) – aus demselben Grund (verlässliches position:fixed
 * unabhängig von einem transformierten Eltern-Containing-Block, z. B.
 * Elementor-Motion-Effects).
 */
.flk-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10001;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
}

.flk-lightbox.is-visible {
	display: flex;
}

.flk-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 14, 32, 0.7);
	backdrop-filter: blur(5px);
}

.flk-lightbox__dialog {
	position: relative;
	z-index: 1;
	max-width: min(90vw, 720px);
	max-height: 90vh;
	background: var(--flk-white);
	border-radius: var(--flk-radius-lg);
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.flk-lightbox__image {
	max-width: 100%;
	max-height: calc(90vh - 80px);
	object-fit: contain;
	display: block;
	border-radius: var(--flk-radius-sm);
}

.flk-lightbox__caption {
	margin: 0;
	font-weight: 700;
	color: var(--flk-navy);
	text-align: center;
}

.flk-lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: var(--flk-navy);
	color: var(--flk-white);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.flk-lightbox__close:hover,
.flk-lightbox__close:focus-visible {
	opacity: 0.85;
}

.flk-upload-field {
	margin-bottom: 22px;
}
.flk-upload-field__content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 8px;
}

.flk-upload-field__label {
	font-weight: 700;
	font-size: 20px;
	color: var(--flk-text);
	margin:0;
}

.flk-upload-field__hint {
	font-size: 13px;
	color: var(--flk-text-muted);
	margin: 0 0 10px;
}

.flk-upload-field__preview {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.flk-upload-field__preview img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--flk-radius-md);
}

.flk-upload-field__remove {
	background: transparent;
	border: none;
	color: var(--flk-red);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.flk-upload-field__error {
	color: var(--flk-red);
	font-size: 13px;
	margin: 8px 0 0;
}

.flk-form-grid {
	display: block;
	/*padding: 24px;
	border-radius: var(--flk-radius-md);
	background: var(--flk-gray-brightest);*/
}

.flk-required {
	color: var(--flk-red);
}

.flk-field-label {
	font-weight: 700;
	margin: 0px;
	display: inline-block; 
	font-size: 15px;
	color: var(--flk-text-muted);
}

.flk-field-error {
	color: var(--flk-red);
	font-size: 13px;
	margin: -10px 0 12px;
}

/*
 * Die E-Mail-Fehlermeldung sitzt direkt unter einem einzelnen <input>
 * (siehe .flk-field-block in templates/shortcode.php), nicht wie die
 * anderen Nutzer dieser Klasse unter einem Radiogroup/einer Checkbox mit
 * bereits vorhandenem Abstand – der sonst genutzte negative Top-Margin
 * würde den Text hier gegen das Feld drücken statt lesbar abzusetzen.
 */
.flk-field-error[data-flk-email-error] {
	margin: 8px 0 0;
}

.flk-jugendschutz {
	font-size: 13px;
	color: var(--flk-text-muted);
	margin: 18px 0 0;
}

.flk-jugendschutz a {
	color: var(--flk-blue);
}

.flk-honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.flk-form-error {
	color: var(--flk-red);
	font-size: 14px;
	margin: 10px 0;
}

.flk-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/*
 * Umschließt das Cloudflare-Turnstile-Widget (falls aktiv) und .flk-actions:
 * bis 878px übereinander (Widget oben, Button darunter), ab 879px
 * nebeneinander mit dem Widget links neben dem Absenden-Button.
 */
.flk-submit-row {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	margin-top: 40px;
}

@media (min-width: 879px) {
	.flk-submit-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.flk-error {
	color: var(--flk-red);
}

.flk-ergebnisse-dots {
	display: none;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;
}

.flk-ergebnisse-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--flk-gray-bright);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.flk-ergebnisse-dot.is-active {
	background: var(--flk-blue);
	transform: scale(1.25);
}

/* ===================== Responsive ===================== */

@media (max-width: 414px) {
	/* Fester Zeilenumbruch nach dem Preis statt einem beliebigen
	   Browser-Umbruch mitten im Preis- oder Losnamen-Text. */
	.flk-los-card__preis-losname {
		display: block;
	}

	.flk-topbar {
		font-size: 11px;
		gap: 8px;
		padding: 16px 20px;
	}

	.flk-field-row {
		display: flex;
    	flex-direction: column;
    	align-items: center;
    	gap: 0px;
    	padding: 14px 0;
    	width: 100%;
	}

	.flk-stepper {
		width: 100%;
		justify-content: space-between;
		margin-bottom: 8px;
	}

	.flk-gesamtpreis {
		align-items: center;
	}

	.flk-stepper__input {
    	/*width: auto;*/
	}

	.flk-slider-scale__mark {
		display: none;
	}

	.flk-slider-scale__mark--min,
	.flk-slider-scale__mark--max,
	.flk-slider-scale__mark--anchor {
		display: block;
	}

	.flk-gesamtpreis {
		flex-direction: column;
		gap:0px;
	}

	.flk-upload-field__hint {
		max-width:160px;
	}

	.flk-field-block--half {
		display: block;
		width: 100%;
	}

	.flk-field-block--half:first-of-type {
		margin-right: 0;
	}
	.flk-ergebnisse-dots {
		display: flex;
	}

	.flk-ergebnisse {
		grid-template-columns: none;
		grid-auto-flow: column;
		/*
		 * Card-Peeking: 85% statt einer festen Breite lässt am rechten Rand
		 * immer ein Stück der nächsten Karte stehen (unabhängig von der genauen
		 * Viewport-Breite) – das macht die Wischbarkeit auf den ersten Blick
		 * klar, deutlich wirksamer als Dots/Schatten allein.
		 */
		grid-auto-columns: 80%;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 8px;
		/*
		 * Rand-Fade: vorher ein inset box-shadow, der auf .flk-ergebnisse
		 * selbst lag – wurde von den undurchsichtigen Karten (.flk-los-card,
		 * Hintergrund weiß) einfach überdeckt, sichtbar nur im schmalen
		 * grid-gap zwischen den Karten. Eine Maske wirkt dagegen auf das
		 * gerenderte Element inkl. aller Kinder und bleibt zudem – anders als
		 * ein Kind mit position:absolute – am Rand des sichtbaren Ausschnitts
		 * fixiert statt mit dem Inhalt mitzuscrollen. Nur rechts, nicht
		 * links: die erste Karte soll direkt am linken Rand voll sichtbar
		 * sein, links gibt es nichts zu "verstecken".
		 */
		-webkit-mask-image: linear-gradient(to right, black, black calc(100% - 32px), transparent);
		mask-image: linear-gradient(to right, black, black calc(100% - 32px), transparent);
	}

	.flk-los-card,
	.flk-teaser-image {
		width: 100%;
		scroll-snap-align: start;
	}
}

@media (min-width: 415px) and (max-width: 879px) {
	.flk-ergebnisse {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 360px;
		overflow-x: auto;
		padding-bottom: 8px;
		/* Rand-Fade als Maske statt box-shadow, nur rechts, siehe Begründung oben. */
		-webkit-mask-image: linear-gradient(to right, black, black calc(100% - 32px), transparent);
		mask-image: linear-gradient(to right, black, black calc(100% - 32px), transparent);
	}

	.flk-los-card,
	.flk-teaser-image {
		width: 360px;
	}
}

/*
 * Blendet den Rand-Fade aus, sobald ganz nach rechts gescrollt ist (letzte
 * Karte vollständig sichtbar) – siehe FLKConfigurator.prototype.
 * updateErgebnisseFade() in flk.js. Bewusst außerhalb der beiden obigen
 * Media-Queries: eine einzelne, gleich spezifische Klassenregel, die per
 * Position im Stylesheet (nach beiden mask-image-Regeln) in der Kaskade
 * gewinnt, unabhängig davon, welcher der beiden Breakpoints aktiv ist.
 */
.flk-ergebnisse.is-scrolled-end {
	-webkit-mask-image: none;
	mask-image: none;
}

@media (min-width: 880px) {
	.flk-ergebnisse {
		grid-template-columns: repeat(3, 1fr);
	}
}