/* AK Ski Finder – minimales, themebares CSS. Branding via CSS-Variablen. */
.aksf-finder {
	--aksf-accent: #111;
	--aksf-accent-contrast: #fff;
	--aksf-border: #ddd;
	--aksf-muted: #666;
	--aksf-radius: 8px;
	--aksf-gap: 1rem;
	--aksf-maxw: 720px;

	max-width: var(--aksf-maxw);
	margin: 0 auto;
	font: inherit;
}

/* WICHTIG: das [hidden]-Attribut muss auch Buttons/Steps ausblenden.
 * Ohne diese Regel überschreibt `.aksf-btn { display:inline-block }` das
 * UA-`[hidden]{display:none}` – dann erschienen "Weiter" UND "Empfehlung
 * anzeigen" gleichzeitig. */
.aksf-finder [hidden] { display: none !important; }

.aksf-progress {
	height: 4px;
	background: var(--aksf-border);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: var(--aksf-gap);
}
.aksf-progress-bar {
	height: 100%;
	width: 0;
	background: var(--aksf-accent);
	transition: width .25s ease;
}

.aksf-step { border: 0; margin: 0; padding: 0; }

/* .aksf-q ist je nach Fragetyp ein <div> ODER ein <fieldset> – Reset für beide. */
.aksf-q { margin: 0 0 var(--aksf-gap); border: 0; padding: 0; min-width: 0; }
.aksf-q-label { display: block; font-weight: 600; margin-bottom: .4rem; padding: 0; font-size: 1.15rem; }
.aksf-q-help { color: var(--aksf-muted); margin: 0 0 .5rem; font-size: .9em; }
.aksf-req { color: var(--aksf-accent); }

.aksf-options { display: grid; gap: .55rem; }
.aksf-option {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .9rem 1rem;
	border: 1px solid var(--aksf-border);
	border-radius: var(--aksf-radius);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.aksf-option:hover { border-color: var(--aksf-accent); transform: translateY(-1px); }
.aksf-option:active { transform: translateY(0); }
.aksf-option input { margin: 0; flex: 0 0 auto; }
/* Eckigen Browser-Fokusrahmen vom Radio entfernen … */
.aksf-option input:focus,
.aksf-option input:focus-visible { outline: none; box-shadow: none; }
/* … und den Fokus stattdessen an der ganzen Karte anzeigen (barrierefrei). */
.aksf-option:focus-within {
	border-color: var(--aksf-accent);
	box-shadow: 0 0 0 2px color-mix( in srgb, var(--aksf-accent) 35%, transparent );
}
.aksf-option-icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.aksf-option-text { font-weight: 500; }

.aksf-q input[type="number"],
.aksf-q input[type="text"],
.aksf-q input[type="tel"],
.aksf-q input[type="email"] {
	width: 100%;
	padding: .65rem .8rem;
	border: 1px solid var(--aksf-border);
	border-radius: var(--aksf-radius);
	box-sizing: border-box;
}

.aksf-error { color: #b00020; font-size: .85em; margin: .35rem 0 0; }

.aksf-nav { display: flex; gap: .6rem; margin-top: var(--aksf-gap); }

.aksf-btn {
	display: inline-block;
	padding: .7rem 1.2rem;
	border: 1px solid var(--aksf-accent);
	border-radius: var(--aksf-radius);
	background: var(--aksf-accent);
	color: var(--aksf-accent-contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.aksf-btn.aksf-back {
	background: transparent;
	color: var(--aksf-accent);
}
.aksf-next,
.aksf-submit { margin-left: auto; }

/* Ergebnis */
.aksf-result { margin-top: var(--aksf-gap); }
.aksf-result-hint {
	padding: .8rem 1rem;
	background: #fff7e6;
	border: 1px solid #ffd591;
	border-radius: var(--aksf-radius);
}

.aksf-card {
	display: flex;
	gap: var(--aksf-gap);
	border: 1px solid var(--aksf-border);
	border-radius: var(--aksf-radius);
	padding: var(--aksf-gap);
	margin-bottom: var(--aksf-gap);
}
.aksf-card-top { border-width: 2px; border-color: var(--aksf-accent); }
.aksf-card-media { flex: 0 0 40%; max-width: 40%; }
.aksf-card-media img { width: 100%; height: auto; border-radius: var(--aksf-radius); display: block; }
.aksf-card-body { flex: 1; }
.aksf-card-title { margin: 0 0 .3rem; }
.aksf-card-length { margin: 0 0 .5rem; }
.aksf-card-desc { color: var(--aksf-muted); }
.aksf-card-specs { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .9em; }
.aksf-card-specs li { color: var(--aksf-muted); }

.aksf-alt-heading { margin: 1.4rem 0 .6rem; font-size: 1rem; }
.aksf-alts .aksf-card { flex-direction: row; }

@media ( max-width: 540px ) {
	.aksf-card { flex-direction: column; }
	.aksf-card-media, .aksf-alts .aksf-card-media { max-width: 100%; flex-basis: auto; }
	.aksf-alts .aksf-card { flex-direction: column; }
}

/* Ausgewählte Option hervorheben (Auto-Weiter-Feedback) */
.aksf-option:has(input:checked),
.aksf-option.is-selected {
	border-color: var(--aksf-accent);
	background: color-mix(in srgb, var(--aksf-accent) 8%, transparent);
}

/* Newsletter-Checkbox */
.aksf-check {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .7rem .9rem;
	border: 1px solid var(--aksf-border);
	border-radius: var(--aksf-radius);
	cursor: pointer;
}
.aksf-check:hover { border-color: var(--aksf-accent); }
.aksf-check input { margin: .15rem 0 0; }
.aksf-check input:focus,
.aksf-check input:focus-visible { outline: none; box-shadow: none; }
.aksf-check:focus-within {
	border-color: var(--aksf-accent);
	box-shadow: 0 0 0 2px color-mix( in srgb, var(--aksf-accent) 35%, transparent );
}

/* Kontakt-CTA unter dem Ergebnis */
.aksf-contact {
	margin-top: 1.6rem;
	padding: var(--aksf-gap);
	border: 1px solid var(--aksf-border);
	border-radius: var(--aksf-radius);
	background: color-mix(in srgb, var(--aksf-accent) 4%, transparent);
}
.aksf-contact-heading { margin: 0 0 .3rem; font-size: 1.05rem; }
.aksf-contact-text { margin: 0 0 .8rem; color: var(--aksf-muted); }
.aksf-contact-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.aksf-contact-mail { background: transparent; color: var(--aksf-accent); }
.aksf-contact-call { white-space: nowrap; }

@media ( max-width: 540px ) {
	.aksf-contact-actions { flex-direction: column; }
	.aksf-contact-actions .aksf-btn { text-align: center; }
}

/* Honeypot: für Menschen unsichtbar (Bots füllen es aus). */
.aksf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Schrittzähler unter dem Fortschrittsbalken */
.aksf-progress-text {
	margin: 0 0 var(--aksf-gap);
	font-size: .85em;
	color: var(--aksf-muted);
	letter-spacing: .02em;
}

/* Pflicht-Datenschutz-Checkbox dezent hervorheben */
.aksf-check-required { border-color: var(--aksf-accent); }

/* Ergebnis-Kopf (persönlich, belohnend) */
.aksf-result-head { text-align: center; margin: 0 0 1.2rem; }
.aksf-result-headline { margin: 0 0 .3rem; font-size: 1.6rem; line-height: 1.2; }
.aksf-result-sub { margin: 0; color: var(--aksf-muted); }

/* "Passt zu X%"-Badge */
.aksf-match-badge {
	display: inline-block;
	margin: 0 0 .5rem;
	padding: .25rem .7rem;
	border-radius: 999px;
	background: var(--aksf-accent);
	color: var(--aksf-accent-contrast);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* "Warum dieser Ski zu dir passt" */
.aksf-why {
	margin: .8rem 0;
	padding: .8rem 1rem;
	border-radius: var(--aksf-radius);
	background: color-mix(in srgb, var(--aksf-accent) 6%, transparent);
}
.aksf-why-title { margin: 0 0 .4rem; font-weight: 600; font-size: .95rem; }
.aksf-why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.aksf-why-list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: .92rem;
}
.aksf-why-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--aksf-accent);
	font-weight: 700;
}

/* Karten-CTA als Vollbreiten-Button hervorheben */
.aksf-cta { margin-top: .4rem; }
.aksf-card-top .aksf-cta { display: inline-block; }
.aksf-cta-alt {
	background: transparent;
	color: var(--aksf-accent);
}

/* Step-Intro (motivierender Satz oben im Schritt) */
.aksf-step-intro {
	margin: 0 0 1.1rem;
	color: var(--aksf-muted);
	font-size: 1rem;
}

/* Slider (Grösse / Gewicht) */
.aksf-slider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: .7rem;
}
.aksf-slider input[type="range"] {
	flex: 1 1 auto;
	width: 100%;
	height: 6px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--aksf-border);
	border-radius: 999px;
	margin: 1.1rem 0;
}
/* Eckigen Browser-Fokusrahmen vom Balken entfernen … */
.aksf-slider input[type="range"]:focus,
.aksf-slider input[type="range"]:focus-visible { outline: none; }
/* … und den Fokus als Ring am Schiebeknopf zeigen (barrierefrei). */
.aksf-slider input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .25 ), 0 0 0 4px color-mix( in srgb, var(--aksf-accent) 30%, transparent );
}
.aksf-slider input[type="range"]:focus-visible::-moz-range-thumb {
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .25 ), 0 0 0 4px color-mix( in srgb, var(--aksf-accent) 30%, transparent );
}
.aksf-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--aksf-accent);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .25 );
	cursor: grab;
}
.aksf-slider input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.aksf-slider input[type="range"]::-moz-range-thumb {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--aksf-accent);
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .25 );
	cursor: grab;
}
.aksf-slider input[type="range"]::-moz-range-track {
	height: 6px;
	background: var(--aksf-border);
	border-radius: 999px;
}
.aksf-slider-value {
	flex: 0 0 auto;
	min-width: 4.5rem;
	text-align: center;
	font-weight: 700;
	font-size: 1.25rem;
	padding: .55rem .7rem;
	border: 1px solid var(--aksf-border);
	border-radius: var(--aksf-radius);
	background: color-mix( in srgb, var(--aksf-accent) 6%, transparent );
}
.aksf-slider-scale {
	display: flex;
	justify-content: space-between;
	color: var(--aksf-muted);
	font-size: .8em;
	margin-top: -.4rem;
}