/* Fahrzeug-Assistent. Alles unter .fza gekapselt.
   Datei: /fileadmin/pflege/css/fahrzeug-assistent.css
   Reines CSS, keine Grafiken (CSP). */

.fza {
	--fza-orange: #F47825;
	--fza-orange-dark: #d9620f;
	--fza-orange-soft: #fff3ea;
	--fza-text: #1f2d3a;
	--fza-muted: #6b7782;
	--fza-line: #dfe4e8;
	--fza-field: #f6f8f9;
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	gap: 0 40px;
	margin: 10px 0 40px;
	padding: 36px 36px 32px;
	background: #fff;
	border: 1px solid #e3e7ea;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(20, 40, 60, 0.10), 0 2px 6px rgba(20, 40, 60, 0.06);
	color: var(--fza-text);
	font-size: 16px;
	line-height: 1.45;
}
.fza *, .fza *::before, .fza *::after { box-sizing: border-box; }
.fza button, .fza input, .fza select { font: inherit; color: inherit; }
.fza svg { fill: currentColor; }
.fza-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Linke Spalte ---------- */
.fza-side { border-right: 1px solid var(--fza-line); padding-right: 32px; }
.fza-headline { margin: 0 0 8px; font-size: 30px; line-height: 1.15; color: var(--fza-text); }
.fza-subline { margin: 0 0 28px; color: var(--fza-muted); font-size: 17px; }

.fza-steps { list-style: none; margin: 0; padding: 0; }
.fza-step { position: relative; margin: 0; padding: 0 0 18px; }
/* Verbindungslinie zwischen den Punkten */
.fza-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 13px; top: 30px; bottom: 2px;
	width: 2px;
	background: var(--fza-line);
}
.fza-step.is-done:not(:last-child)::before { background: var(--fza-orange); }

.fza-step-btn {
	display: flex; align-items: center; gap: 12px;
	width: 100%; padding: 0; margin: 0;
	background: none; border: 0; text-align: left;
	color: var(--fza-muted);
}
button.fza-step-btn { cursor: pointer; }
button.fza-step-btn:hover .fza-step-title { text-decoration: underline; }
button.fza-step-btn:focus-visible { outline: 2px solid var(--fza-orange); outline-offset: 4px; border-radius: 6px; }

.fza-dot {
	flex: 0 0 28px; width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 2px solid #c9d0d6; border-radius: 50%;
	background: #fff; font-size: 13px; font-weight: 700;
	position: relative; z-index: 1;
}
.fza-dot-icon { width: 16px; height: 16px; }
.fza-step-title { flex: 1 1 auto; }
.fza-step-icon { flex: 0 0 auto; width: 30px; height: 30px; color: #b8c0c6; }

.fza-step.is-done .fza-step-btn { color: var(--fza-text); font-weight: 600; }
.fza-step.is-done .fza-dot { background: var(--fza-orange); border-color: var(--fza-orange); color: #fff; }
.fza-step.is-current .fza-step-btn { color: var(--fza-orange-dark); font-weight: 700; }
.fza-step.is-current .fza-dot { background: var(--fza-orange); border-color: var(--fza-orange); color: #fff; box-shadow: 0 0 0 4px var(--fza-orange-soft); }
.fza-step.is-current .fza-step-icon { color: var(--fza-orange); }

.fza-badge {
	flex: 0 0 auto;
	min-width: 26px; padding: 2px 8px;
	border-radius: 999px;
	background: var(--fza-orange-soft); color: var(--fza-orange-dark);
	font-size: 13px; font-weight: 700; text-align: center;
}
.fza-badge--text { font-weight: 600; }

.fza-mobil { display: none; }

/* ---------- Rechte Spalte ---------- */
.fza-main { min-width: 0; }
.fza-form { margin: 0; }
.fza-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.fza-nr {
	flex: 0 0 38px; width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--fza-text); color: #fff;
	font-weight: 700; font-size: 18px;
}
.fza-nr--done { background: var(--fza-orange); }
.fza-nr .fza-dot-icon { width: 22px; height: 22px; }
.fza-title { margin: 3px 0 4px; font-size: 24px; line-height: 1.25; color: var(--fza-text); }
.fza-title:focus { outline: none; }
.fza-lead { margin: 0; color: var(--fza-muted); }

.fza-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fza-small { display: block; font-size: 13px; color: var(--fza-muted); margin-bottom: 2px; }

/* Schritt 1: Fahrzeugtypen */
.fza-typen { display: grid; gap: 12px; }
.fza-typ { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; }
.fza-typ-check {
	display: flex; align-items: center; gap: 12px;
	min-height: 58px; padding: 10px 16px;
	border: 2px solid var(--fza-line); border-radius: 10px;
	background: #fff; cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.fza-typ-check:hover { border-color: #b9c2c9; }
.fza-typ-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fza-box {
	flex: 0 0 22px; width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 2px solid #b9c2c9; border-radius: 5px; color: transparent; background: #fff;
}
.fza-box-icon { width: 16px; height: 16px; }
.fza-typ-name { flex: 1 1 auto; font-weight: 700; }
.fza-typ-icon { flex: 0 0 auto; width: 36px; height: 36px; color: #b8c0c6; }
.fza-typ-check input:focus-visible + .fza-box { outline: 2px solid var(--fza-orange); outline-offset: 2px; }
.fza-typ.is-on .fza-typ-check { border-color: var(--fza-orange); background: var(--fza-orange-soft); }
.fza-typ.is-on .fza-box { background: var(--fza-orange); border-color: var(--fza-orange); color: #fff; }
.fza-typ.is-on .fza-typ-icon { color: var(--fza-orange); }

.fza-typ-count, .fza-field {
	display: block; padding: 7px 14px 6px;
	border: 1px solid var(--fza-line); border-radius: 10px; background: var(--fza-field);
}
.fza-typ-count input, .fza-field input, .fza-field select {
	display: block; width: 100%; padding: 0; margin: 0;
	border: 0; background: transparent; font-weight: 700; font-size: 17px;
	-moz-appearance: textfield; appearance: none;
}
.fza-typ-count input:disabled { color: #aab3ba; }
.fza-typ-count:has(input:disabled) { background: #fafbfc; }
.fza-typ-count:focus-within, .fza-field:focus-within { border-color: var(--fza-orange); box-shadow: 0 0 0 3px var(--fza-orange-soft); }
.fza input:focus, .fza select:focus { outline: none; }
.fza input[type=number]::-webkit-inner-spin-button,
.fza input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Detail-Schritte */
.fza-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fza-unit-wrap { display: flex; align-items: baseline; gap: 8px; }
.fza-unit { color: var(--fza-muted); font-weight: 600; }
.fza-select { position: relative; display: block; }
.fza-select::after {
	content: ""; position: absolute; right: 2px; top: 50%;
	width: 8px; height: 8px; margin-top: -6px;
	border-right: 2px solid var(--fza-text); border-bottom: 2px solid var(--fza-text);
	transform: rotate(45deg); pointer-events: none;
}
.fza-field select { padding-right: 22px; cursor: pointer; }

/* Kauf oder Miete */
.fza-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fza-choice {
	position: relative; display: block;
	padding: 18px 18px 18px 50px;
	border: 2px solid var(--fza-line); border-radius: 12px; cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.fza-choice:hover { border-color: #b9c2c9; }
.fza-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fza-choice::before {
	content: ""; position: absolute; left: 18px; top: 20px;
	width: 20px; height: 20px; border: 2px solid #b9c2c9; border-radius: 50%; background: #fff;
}
.fza-choice:has(input:checked) { border-color: var(--fza-orange); background: var(--fza-orange-soft); }
.fza-choice:has(input:checked)::before { border: 6px solid var(--fza-orange); }
.fza-choice:has(input:focus-visible) { outline: 2px solid var(--fza-orange); outline-offset: 2px; }
.fza-choice-title { display: block; font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.fza-choice-text { display: block; color: var(--fza-muted); font-size: 14px; }

/* Ergebnis */
.fza-sums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fza-sum {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 16px 18px; border: 1px solid var(--fza-line); border-radius: 12px; background: var(--fza-field);
}
.fza-sum-icon { flex: 0 0 40px; width: 40px; height: 40px; color: var(--fza-orange); }
.fza-sum-title { margin: 6px 0 6px; font-weight: 700; font-size: 18px; }
.fza-sum-list { margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--fza-muted); }
.fza-sum-list li { margin: 2px 0; }
.fza-sum-list strong { color: var(--fza-text); }

/* Fehler und Buttons */
.fza-error { margin: 14px 0 0; padding: 10px 14px; border-radius: 8px; background: #fdecec; color: #a12020; font-size: 15px; }
.fza-error[hidden] { display: none; }
.fza-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 26px; }
.fza-nav--end { justify-content: flex-start; }
.fza-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 150px; min-height: 50px; padding: 12px 28px;
	border: 2px solid var(--fza-orange); border-radius: 8px;
	background: var(--fza-orange); color: #fff !important;
	font-weight: 700; font-size: 16px; text-decoration: none !important; cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.fza-btn:hover { background: var(--fza-orange-dark); border-color: var(--fza-orange-dark); }
.fza-btn:focus-visible { outline: 3px solid var(--fza-text); outline-offset: 2px; }
.fza-btn--ghost { background: #fff; color: var(--fza-text) !important; border-color: var(--fza-line); }
.fza-btn--ghost:hover { background: #fff; border-color: var(--fza-text); }

.fza-note {
	margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--fza-line);
	color: var(--fza-muted); font-size: 13px;
}
.fza-note p { margin: 0 0 6px; }
.fza-note:empty { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
	.fza { grid-template-columns: 240px minmax(0, 1fr); gap: 0 28px; padding: 28px; }
	.fza-side { padding-right: 24px; }
	.fza-choices { grid-template-columns: minmax(0, 1fr); }
	.fza-sums { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
	.fza { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; border-radius: 12px; }
	.fza-side { border-right: 0; padding-right: 0; }
	.fza-headline { font-size: 24px; }
	.fza-subline { margin-bottom: 16px; font-size: 16px; }
	.fza-steps { display: none; }
	.fza-mobil {
		display: block; margin: 0 0 22px; padding: 12px 14px;
		border-radius: 10px; background: var(--fza-orange-soft); font-size: 15px;
	}
	.fza-mobil-text { display: block; margin-bottom: 8px; }
	.fza-mobil-bar {
		display: block; width: 100%; height: 6px; border: 0; border-radius: 3px;
		background: #fff; color: var(--fza-orange); overflow: hidden;
		-webkit-appearance: none; appearance: none;
	}
	.fza-mobil-bar::-webkit-progress-bar { background: #fff; border-radius: 3px; }
	.fza-mobil-bar::-webkit-progress-value { background: var(--fza-orange); border-radius: 3px; }
	.fza-mobil-bar::-moz-progress-bar { background: var(--fza-orange); border-radius: 3px; }
	.fza-head { gap: 10px; }
	.fza-nr { flex-basis: 32px; width: 32px; height: 32px; font-size: 16px; }
	.fza-title { font-size: 20px; margin-top: 2px; }
	.fza-typ { grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; }
	.fza-typ-check { padding: 8px 12px; gap: 10px; }
	.fza-typ-icon { width: 28px; height: 28px; }
	.fza-typ-count { padding: 6px 10px; }
	.fza-plural { display: none; }
	.fza-typ-name { font-size: 15px; }
	.fza-grid { grid-template-columns: minmax(0, 1fr); }
	.fza-nav { flex-direction: column-reverse; }
	.fza-btn { width: 100%; }
}