/* KMB Heinen Fuhrparktausch
   Farben und Schrift der Heinen-Website (Rot #e00002, Text schwarz, Roboto) –
   bewusst fest gesetzt und nicht aus dem Elementor-Kit geerbt, dessen
   Globalfarben (Blau/Grün) nicht zur Seite passen. Anderer Ton: die
   --hft-*-Variablen unten überschreiben.
   Layout hängt an der Containerbreite, nicht am Viewport – deshalb keine
   @media-Queries, sondern auto-fit-Grids: breit = Optionen nebeneinander,
   schmal (Mobil) = untereinander. */

.hft {
	--hft-accent: #e00002;
	--hft-accent-ink: #fff;
	--hft-accent-soft: color-mix(in srgb, var(--hft-accent) 9%, #fff);
	--hft-heading: #000;
	--hft-text: #000;
	--hft-muted: #707273;
	--hft-line: #d5d9de;
	--hft-error: #c0392b;
	--hft-ok: #1f8a4c;
	--hft-radius: 12px;

	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--hft-text);
	text-align: left;
	box-sizing: border-box;

	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	scroll-margin-top: 90px; /* Luft unter einem klebrigen Header */
}

/* Immer volle Breite des Containers, unabhängig vom Schrittinhalt.
   Schrumpft der Elternteil auf seinen Inhalt (Flex-Spalte mit zentrierter
   Ausrichtung, inline-block …), folgte die Breite sonst dem jeweiligen
   Schritt: breit beim Kontakt mit seinem langen Einwilligungstext, schmal bei
   den kurzen Kachelfragen. Der unsichtbare Textstreifen gibt dem Elternteil
   eine sehr große Wunschbreite (max-content), erzwingt aber keine
   Mindestbreite, weil sich Text umbrechen lässt (min-content = ein Buchstabe).
   Der Elternteil nimmt so den ganzen verfügbaren Platz. */
.hft::before {
	content: "x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x";
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	font-size: 16px;
}

.hft *,
.hft *::before,
.hft *::after {
	box-sizing: inherit;
}

/* Theme-Resets (z. B. Hello Elementor färbt button:hover rosa) sollen die
   eigenen Zustände nicht überstimmen – deshalb unten pro Element explizit. */

/* ── Kopf ────────────────────────────────────────────────────────────── */

.hft-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 2.25rem;
	margin-bottom: .5rem;
}

.hft-stepinfo {
	margin: 0 0 0 auto;
	font-size: .85em;
	color: var(--hft-muted);
}

.hft-back,
.hft-back:hover,
.hft-back:focus {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin: 0;
	padding: .35rem .6rem .35rem 0;
	font: inherit;
	font-size: .9em;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	color: var(--hft-text);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.hft-back:hover {
	color: var(--hft-accent);
}

.hft-back:focus-visible {
	outline: 2px solid var(--hft-accent);
	outline-offset: 2px;
}

.hft-back-icon {
	width: 1.1em;
	height: 1.1em;
	display: block;
}

.hft-back-icon svg,
.hft-tile-icon svg,
.hft-tile-check svg,
.hft-success-icon svg,
.hft-btn svg {
	width: 100%;
	height: 100%;
	display: block;
}

.hft-progress {
	height: 6px;
	background: var(--hft-line);
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 1.25rem;
}

.hft-progress-bar {
	display: block;
	height: 100%;
	width: 10%;
	background: var(--hft-accent);
	border-radius: 3px;
	transition: width .35s ease;
}

/* ── Schritte ────────────────────────────────────────────────────────── */

.hft-step {
	display: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.hft-step.is-visible {
	display: block;
	animation: hft-in .3s ease;
}

@keyframes hft-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hft-step.is-visible { animation: none; }
	.hft-progress-bar { transition: none; }
}

.hft-h {
	margin: 0 0 .25rem;
	font-size: 1.4em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--hft-heading);
}

.hft-sub {
	margin: 0 0 1.25rem;
	font-size: 1em;
	font-weight: 400; /* die Seite setzt Absätze dünn (300) */
	color: var(--hft-text);
}

.hft-h + .hft-field,
.hft-h + .hft-group {
	margin-top: 1.1rem;
}

/* ── Kacheln ─────────────────────────────────────────────────────────── */

.hft-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	width: 100%;
	max-width: none;
}

.hft-tiles {
	display: grid;
	/* auto-fill statt auto-fit: die Spaltenbreite hängt nur am Container, nicht
	   an der Zahl der Optionen. So sind alle Kacheln in jedem Schritt gleich
	   groß, und zwei Optionen werden nicht auf die ganze Breite gezogen. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	width: 100%;
	gap: .75rem;
}

.hft-tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: .75rem;
	min-height: 64px;
	min-width: 0;
	margin: 0;
	padding: .8rem 2.2rem .8rem .85rem;
	border: 1.5px solid var(--hft-line);
	border-radius: var(--hft-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .1s;
}

.hft-tile:hover {
	border-color: var(--hft-accent);
}

.hft-tile:active {
	transform: scale(.985);
}

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

.hft-tile-icon {
	flex: none;
	width: 38px;
	height: 38px;
	padding: 9px;
	border-radius: 10px;
	background: var(--hft-accent-soft);
	color: var(--hft-accent);
}

.hft-tile-txt {
	min-width: 0;
	font-weight: 600;
	font-size: .98em;
	line-height: 1.3;
	color: var(--hft-heading);

	/* Lange Einzelwörter sollen umbrechen statt aus der Kachel zu ragen. */
	overflow-wrap: break-word;
	hyphens: manual; /* kein automatisches Trennen („informie-ren“) */
}

.hft-tile-txt small {
	display: block;
	margin-top: .1rem;
	font-size: .82em;
	font-weight: 400;
	color: var(--hft-muted);
}

.hft-badge {
	display: inline-block;
	margin-left: .4rem;
	padding: .1rem .4rem;
	vertical-align: middle;
	font-size: .7em;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hft-accent-ink);
	background: var(--hft-accent);
	border-radius: 6px;
}

.hft-tile-check {
	position: absolute;
	top: 50%;
	right: .7rem;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	color: var(--hft-accent);
	opacity: 0;
	transition: opacity .15s;
}

.hft-tile input:checked ~ .hft-tile-check {
	opacity: 1;
}

.hft-tile:has(input:checked) {
	border-color: var(--hft-accent);
	background: var(--hft-accent-soft);
}

.hft-tile:focus-within {
	outline: 2px solid var(--hft-accent);
	outline-offset: 2px;
}

/* Hinweiskasten unter den Kacheln (Loyalitätsprämie) */
.hft-note {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	margin: 1.25rem 0 0;
	padding: .9rem 1rem;
	/* max-width setzt das JS auf die Breite der Kacheln darüber */
	background: #fff;
	border: 1.5px dashed var(--hft-accent);
	border-radius: var(--hft-radius);
}

.hft-note p {
	margin: 0;
	font-size: .95em;
	line-height: 1.5;
	color: var(--hft-text);
}

.hft-note-icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: .1rem;
	color: var(--hft-accent);
}

.hft-note-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Textfelder ──────────────────────────────────────────────────────── */

.hft-field {
	margin-bottom: 1.5rem;
}

.hft-label {
	display: block;
	margin: 0 0 .55rem;
	padding: 0;
	font-size: .9em;
	font-weight: 600;
	color: var(--hft-text);
}

.hft-optional {
	font-weight: 400;
	color: var(--hft-muted);
}

.hft-input {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: .65rem .85rem;
	font: inherit;
	font-size: 16px; /* verhindert den iOS-Zoom beim Fokus */
	color: var(--hft-heading);
	background: #fff;
	border: 1.5px solid var(--hft-line);
	border-radius: var(--hft-radius);
	box-shadow: none;
	appearance: none;
}

.hft-input:focus {
	outline: 2px solid var(--hft-accent);
	outline-offset: 1px;
	border-color: var(--hft-accent);
	background: #fff;
	color: var(--hft-heading);
}

.hft-group {
	margin-bottom: 1.5rem;
}

.hft-group .hft-field {
	margin-bottom: 0;
}

/* Erklärtext zwischen Frage und Eingabefeld: nah am Feld, zu dem er gehört */
.hft-fieldhint {
	margin: 0 0 .65rem;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.5;
	color: var(--hft-text);
}

/* Telefon im Fokus: größer und mit Akzentrahmen, denn das Gespräch ist das Ziel */
.hft-field--phone .hft-label {
	margin-bottom: .25rem;
	font-size: 1em;
	color: var(--hft-heading);
}

.hft-field--phone .hft-input {
	min-height: 56px;
	font-size: 18px;
	border-color: var(--hft-accent);
}

.hft-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0 1rem;
}

/* Erreichbarkeit */
.hft-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
}

.hft-chip {
	position: relative;
	margin: 0;
	cursor: pointer;
}

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

.hft-chip span {
	display: block;
	padding: .5rem .95rem;
	font-size: .92em;
	font-weight: 600;
	color: var(--hft-heading);
	background: #fff;
	border: 1.5px solid var(--hft-line);
	border-radius: 999px;
	transition: border-color .15s, background .15s;
}

.hft-chip:hover span {
	border-color: var(--hft-accent);
}

.hft-chip input:checked + span {
	border-color: var(--hft-accent);
	background: var(--hft-accent-soft);
}

.hft-chip input:focus-visible + span {
	outline: 2px solid var(--hft-accent);
	outline-offset: 2px;
}

/* Datenschutzhinweis (ohne Checkbox: das Absenden gilt als Einwilligung) */
.hft-privacy {
	margin: 0 0 1.5rem;
	font-size: .85em;
	line-height: 1.5;
	color: var(--hft-muted);
}

.hft-privacy a {
	color: var(--hft-accent);
	text-decoration: underline;
}

/* ── Fehler ──────────────────────────────────────────────────────────── */

.hft-err {
	margin: .35rem 0 0;
	font-size: .85em;
	color: var(--hft-error);
}

.hft-field.has-error .hft-input,
.hft-field.has-error .hft-tile {
	border-color: var(--hft-error);
}

.hft-senderr {
	margin: 1rem 0 0;
	padding: .7rem .85rem;
	font-size: .9em;
	color: var(--hft-error);
	background: #fdeeee;
	border-radius: var(--hft-radius);
}

/* ── Absenden ────────────────────────────────────────────────────────── */

.hft-btn,
.hft-btn:hover,
.hft-btn:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	min-height: 54px;
	margin: .5rem 0 0;
	padding: .85rem 1.1rem;
	font: inherit;
	font-size: 1.1em;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--hft-accent-ink);
	background: var(--hft-accent);
	border: 0;
	border-radius: var(--hft-radius);
	box-shadow: 0 10px 24px -12px var(--hft-accent);
	cursor: pointer;
}

.hft-btn:hover {
	background: color-mix(in srgb, var(--hft-accent) 88%, #000);
}

.hft-btn:focus-visible {
	outline: 2px solid var(--hft-heading);
	outline-offset: 2px;
}

.hft-btn svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.hft-btn[disabled] {
	opacity: .65;
	cursor: wait;
}

.hft-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.75rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 1em;
	color: var(--hft-muted);
}

.hft-trust li {
	margin: 0;
	padding: 0;
}

.hft-trust li::before {
	content: "✓ ";
	font-weight: 700;
	color: var(--hft-ok);
}

/* ── Bestätigung ─────────────────────────────────────────────────────── */

.hft-success {
	padding: 1rem 0;
}

.hft-success-icon {
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 0 1rem;
	color: var(--hft-ok);
}

.hft-success p {
	margin: 0;
}

.hft-noscript {
	margin: 1rem 0 0;
	font-size: .9em;
}

/* ── Hilfsklassen ────────────────────────────────────────────────────── */

.hft-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld.
   Kein display:none – das überspringen viele Bots gezielt. */
.hft-hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* [hidden] muss die display-Regeln oben schlagen: .hft-back und .hft-btn
   bringen eigene display-Werte mit und blieben sonst trotz hidden sichtbar. */
.hft [hidden] {
	display: none !important;
}