/**
 * CarCascade – Gestaltung.
 *
 * Der Fragenkatalog des Ankaufsformulars: Fragen
 * untereinander, jede mit fetter Beschriftung, darunter entweder ein Dropdown
 * oder ein Feld aus Kacheln. Die gewählte Kachel bleibt sichtbar markiert.
 *
 * Alles läuft über CSS-Variablen und lässt sich am Container überschreiben:
 *
 *   .carcascade { --cc-accent: #c8102e; --cc-tile-min: 140px; }
 */

.carcascade {
	--cc-accent: #14507d;
	--cc-accent-soft: #f2f6fa;
	--cc-border: #cbd2d9;
	--cc-border-strong: #9aa2ae;
	--cc-bg: #fff;
	--cc-text: #1c2b3a;
	--cc-text-muted: #5b6472;
	--cc-radius: 4px;
	--cc-gap: 18px;
	--cc-control-height: 48px;

	/* Bestimmt, wie viele Kacheln nebeneinander passen. Zwei Spalten bei
	   üblicher Formularbreite, wie im Original. */
	--cc-tile-min: 200px;

	box-sizing: border-box;
	color: var(--cc-text);
	max-width: 100%;
	text-align: left;
}

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

.carcascade__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 var(--cc-gap);
}

.carcascade__questions {
	display: flex;
	flex-direction: column;
	gap: var(--cc-gap);
}

/* --- Eine Frage ---------------------------------------------------------- */

.carcascade__question {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.carcascade__label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
	width: 100%;
}

/* --- Dropdown ------------------------------------------------------------ */

.carcascade__select {
	appearance: none;
	background-color: var(--cc-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314507d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	border: 1px solid var(--cc-border-strong);
	border-radius: var(--cc-radius);
	color: inherit;
	font: inherit;
	min-height: var(--cc-control-height);
	padding: 10px 42px 10px 16px;
	width: 100%;
}

.carcascade__select:focus-visible {
	border-color: var(--cc-accent);
	outline: 2px solid var(--cc-accent);
	outline-offset: -2px;
}

/* --- Kacheln ------------------------------------------------------------- */

.carcascade__tiles {
	display: grid;
	gap: 12px;
	grid-auto-rows: 1fr;    /* alle Kacheln einer Frage gleich hoch */
	grid-template-columns: repeat(auto-fit, minmax(var(--cc-tile-min), 1fr));
}

.carcascade__tile {
	align-items: center;
	background: var(--cc-bg);
	border: var(--cc-border-width, 1px) solid var(--cc-border);
	border-radius: var(--cc-radius);
	color: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: var(--cc-tile-direction, column);
	font: inherit;
	gap: var(--cc-tile-gap, 2px);
	justify-content: var(--cc-tile-justify, center);
	line-height: 1.3;
	min-height: var(--cc-tile-height, var(--cc-control-height));
	padding: 10px 14px;
	text-align: var(--cc-tile-align, center);
	transition: border-color 0.12s ease, background-color 0.12s ease;
	width: 100%;
}

/* Häkchen-Kästchen vor der Beschriftung – nur sichtbar, wenn in den
   Einstellungen „Checkboxen statt Kacheln" gewählt ist. */
.carcascade__tile::before {
	align-items: center;
	border: 2px solid var(--cc-border-strong);
	border-radius: 4px;
	content: "";
	display: var(--cc-check-display, none);
	flex: 0 0 auto;
	height: 18px;
	justify-content: center;
	width: 18px;
}

.carcascade__tile.is-selected::before {
	background-color: var(--cc-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	border-color: var(--cc-accent);
}

.carcascade__tile:hover {
	border-color: var(--cc-accent);
}

.carcascade__tile:focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: 1px;
}

/* Auswahl nur über Farbe und Rahmen zeigen – fette Schrift würde den Text
   umbrechen lassen und die Kachel größer machen als ihre Nachbarn. */
.carcascade__tile.is-selected {
	background: var(--cc-accent-soft);
	border-color: var(--cc-accent);
	box-shadow: inset 0 0 0 1px var(--cc-accent);
	color: var(--cc-accent);
}

.carcascade__tile-hint {
	color: var(--cc-text-muted);
	font-size: 13px;
	font-weight: 400;
}

.carcascade__tile.is-selected .carcascade__tile-hint {
	color: inherit;
}

/* --- Suche --------------------------------------------------------------- */

.carcascade__search input {
	background: var(--cc-bg);
	border: 1px solid var(--cc-border-strong);
	border-radius: var(--cc-radius);
	color: inherit;
	font: inherit;
	min-height: 42px;
	padding: 8px 14px;
	width: 100%;
}

.carcascade__search input:focus-visible {
	border-color: var(--cc-accent);
	outline: 2px solid var(--cc-accent);
	outline-offset: -2px;
}

/* --- Fußzeile ------------------------------------------------------------ */

.carcascade__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: var(--cc-gap);
}

.carcascade__summary {
	flex: 1 1 100%;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.carcascade__link {
	background: none;
	border: 0;
	color: var(--cc-accent);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	padding: 4px 0;
	text-decoration: underline;
}

.carcascade__link--muted {
	color: var(--cc-text-muted);
}

.carcascade__loading,
.carcascade__notice,
.carcascade__empty {
	color: var(--cc-text-muted);
	margin: 0;
	padding: 8px 0;
}

/* --- Felder, die vom Picker befüllt werden -------------------------------- */

.carcascade-hidden {
	display: none !important;
}

/* --- Eigenständiges Formular ([carcascade_form]) -------------------------- */

.carcascade--form {
	font-size: var(--cc-font-size, 14px);
	margin-left: auto;
	margin-right: auto;
	width: var(--cc-width, 100%);
}

/* Spaltenraster: Dropdowns und Eingaben teilen sich eine Zeile,
   Kachelfelder, Überschriften und Navigation nehmen die volle Breite. */
.carcascade--form .carcascade__questions {
	display: grid;
	grid-template-columns: repeat(var(--cc-cols, 1), minmax(0, 1fr));
	gap: var(--cc-gap);
	align-items: start;
}

.carcascade--form .carcascade__question--wide,
.carcascade--form .carcascade__question--input,
.carcascade--form .carcascade__section,
.carcascade--form .carcascade__pagenav {
	grid-column: 1 / -1;
}

/* Eingabefelder (Kilometerstand, FIN, Mindestpreis): die Frage nimmt die
   volle Breite ein, das Feld selbst steht mittig und zentriert seinen Text. */
.carcascade--form .carcascade__question--input .carcascade__number {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.carcascade--form .carcascade__question--input .carcascade__input {
	text-align: center;
}

.carcascade--form .carcascade__question--input .carcascade__actions {
	justify-content: center;
}

/* Kacheln im Checkbox-Modus: Kästchen links, Text linksbündig daneben.
   Die Richtungs- und Ausrichtungs-Variablen setzt das PHP nur, wenn der
   Modus in den Einstellungen aktiv ist. */
.carcascade--form .carcascade__tile {
	--cc-tile-gap: 10px;
}

.carcascade__input {
	background: var(--cc-bg);
	border: 1px solid var(--cc-border-strong);
	border-radius: var(--cc-radius);
	color: inherit;
	font: inherit;
	min-height: var(--cc-control-height);
	padding: 10px 14px;
	width: 100%;
}

.carcascade__input:focus-visible {
	border-color: var(--cc-accent);
	outline: 2px solid var(--cc-accent);
	outline-offset: -2px;
}

.carcascade__number {
	align-items: center;
	display: flex;
	gap: 10px;
	max-width: 320px;
}

.carcascade__suffix {
	color: var(--cc-text-muted);
	flex: 0 0 auto;
	font-weight: 600;
}

/* Einheiten-Umschalter (PS/kW) an Stelle der Einheit: kleiner
   Segment-Schalter, aktive Einheit in der Akzentfarbe. Die Grundwerte
   setzen Theme-Vorgaben für `button` (Divi) außer Kraft. */
.carcascade__units {
	background: var(--cc-bg);
	border: 1px solid var(--cc-border-strong);
	border-radius: var(--cc-radius);
	display: inline-flex;
	flex: 0 0 auto;
	gap: 2px;
	padding: 2px;
}

.carcascade__unit {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: calc(var(--cc-radius) - 1px);
	box-shadow: none;
	color: var(--cc-text-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1;
	margin: 0;
	min-height: 34px;
	min-width: 40px;
	padding: 0 8px;
	text-transform: none;
}

.carcascade__unit:hover {
	color: var(--cc-text);
}

.carcascade__unit[aria-pressed="true"] {
	background: var(--cc-accent);
	color: #fff;
}

/* Fokusrahmen wie bei den übrigen Bedienelementen nur per Tastatur. */
.carcascade__unit:focus {
	outline: none;
}

.carcascade__unit:focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: 1px;
}

.carcascade__actions {
	align-items: center;
	display: flex;
	gap: 8px 18px;
	margin-top: 4px;
}

.carcascade__button {
	background: var(--cc-accent);
	border: 0;
	border-radius: var(--cc-radius);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	min-height: var(--cc-control-height);
	padding: 10px 28px;
	transition: filter 0.12s ease;
}

.carcascade__button:hover {
	filter: brightness(0.92);
}

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

.carcascade__button:disabled {
	cursor: default;
	filter: grayscale(0.4) brightness(1.05);
}

.carcascade__button--submit {
	background: var(--cc-submit-bg, var(--cc-accent));
	font-size: 1.1em;
	padding: 12px 36px;
}

/* Seitenüberschrift wie im Original: „1 von 3  |  Zustand" */

.carcascade__section {
	border-bottom: 1px solid var(--cc-border);
	color: var(--cc-accent);
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	padding-bottom: 8px;
}

/* Seiten-Navigation („Zurück" / „weitere Details" / „Letzter Schritt") */

.carcascade__pagenav {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-top: 8px;
}

.carcascade__button--ghost {
	background: var(--cc-bg);
	border: var(--cc-border-width, 1px) solid var(--cc-accent);
	color: var(--cc-accent);
}

.carcascade__button--ghost:hover {
	filter: none;
	background: var(--cc-accent-soft);
}

/* Kontaktblock und Handeingabe */

.carcascade__contact-grid {
	display: grid;
	gap: 14px 18px;
	grid-template-columns: 1fr 1fr;
	max-width: 640px;
}

.carcascade__contact-late {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 4px;
}

.carcascade__contact-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 420px;
}

.carcascade__privacy {
	background: var(--cc-accent-soft);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	color: var(--cc-text-muted);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
	max-width: 640px;
	padding: 12px 16px;
}

.carcascade__field-label {
	color: var(--cc-text-muted);
	font-size: 14px;
	font-weight: 500;
}

.carcascade__consent {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	gap: 10px;
	max-width: 560px;
}

.carcascade__consent input {
	accent-color: var(--cc-accent);
	flex: 0 0 auto;
	height: 18px;
	margin-top: 2px;
	width: 18px;
}

/* Honigtopf: raus aus dem Bild, aber nicht display:none –
   simple Bots füllen nur sichtbare Strukturen nicht aus. */
.carcascade__hp {
	height: 1px;
	left: -9999px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.carcascade__error {
	color: #b3261e;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}

.carcascade__hint,
.carcascade__files {
	color: var(--cc-text-muted);
	font-size: 14px;
	margin: 0;
}

.carcascade__file {
	font: inherit;
}

/* Fortschritt */

.carcascade__progress {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: var(--cc-gap);
}

.carcascade__progress-track {
	background: var(--cc-accent-soft);
	border-radius: 99px;
	flex: 1 1 auto;
	height: 8px;
	overflow: hidden;
}

.carcascade__progress-bar {
	background: var(--cc-accent);
	border-radius: 99px;
	height: 100%;
	transition: width 0.25s ease;
}

.carcascade__progress-text {
	color: var(--cc-text-muted);
	flex: 0 0 auto;
	font-size: 13px;
}

/* Bestätigung nach dem Absenden */

.carcascade__success {
	background: var(--cc-accent-soft);
	border: 1px solid var(--cc-accent);
	border-radius: var(--cc-radius);
	padding: 24px;
}

/* Bekommt nach dem Absenden den Fokus (für Screenreader) – der Rahmen
   der Box zeigt ihn schon, ein zweiter Ring wäre doppelt. */
.carcascade__success:focus {
	outline: none;
}

.carcascade__success-text {
	font-size: 17px;
	font-weight: 600;
	margin: 0;
}

.carcascade__offer {
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cc-accent);
	text-align: center;
}

.carcascade__offer-label {
	font-size: 15px;
	margin: 0 0 6px;
}

.carcascade__offer-value {
	color: var(--cc-accent);
	font-size: clamp(26px, 6vw, 38px);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 8px;
}

.carcascade__offer-note {
	font-size: 13px;
	margin: 0 0 12px;
	opacity: .8;
}

/* --- Themes ---------------------------------------------------------------
   caradag: das Design von caradag.de – Grün, runde Ecken, Karte mit Schatten.
   ozean:   Blau, kantig, oranger Absenden-Knopf.
   Einstellungen (Akzentfarbe, Radius …) überschreiben das Theme per
   Inline-Variablen am Container. */

.carcascade--theme-caradag {
	--cc-accent: #4eb25c;
	--cc-accent-soft: #eef8f0;
	--cc-border: #e0e0e0;
	--cc-border-strong: #c4c9cf;
	--cc-border-width: 2px;
	--cc-radius: 8px;
	background: #fff;
	border-radius: 15px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	padding: 32px;
}

.carcascade--theme-ozean {
	--cc-accent: #0d4f78;
	--cc-accent-soft: #f8f8f8;
	--cc-border: #ccc;
	--cc-border-strong: #9aa2ae;
	--cc-radius: 3px;
	--cc-submit-bg: #e87524;
}

/* gravity: das bisherige Gravity-Forms-Ankaufsformular von caradag.de
   (Formular 7) – weiße Karte, Schrift der Seite, graue Felder mit 2 px
   Rand, Kacheln mit grünem Rand und grüner Schrift, grüne Knöpfe. Bleibt
   auch im dunklen Farbschema hell, wie das Original. */

.carcascade--theme-gravity {
	--cc-accent: #4eb25c;
	--cc-accent-soft: #eef8f0;
	--cc-border: #e0e0e0;
	--cc-border-strong: #e0e0e0;
	--cc-border-width: 2px;
	--cc-bg: #fff;
	--cc-text: #333;
	--cc-text-muted: #6b7280;
	--cc-radius: 8px;
	--cc-control-height: 38px;
	--cc-tile-height: 48px;
	--cc-tile-min: 120px;
	--cc-gap: 20px;
	background: #fff;
	border-radius: 12px;
	color: var(--cc-text);
	font-family: inherit;
	font-size: var(--cc-font-size, 14px);
	padding: 20px;
}

.carcascade--theme-gravity .carcascade__label {
	color: var(--cc-text);
	font-size: 1em;
	font-weight: 500;
}

.carcascade--theme-gravity .carcascade__select,
.carcascade--theme-gravity .carcascade__input,
.carcascade--theme-gravity .carcascade__search input {
	background-color: #fff;
	border: 2px solid var(--cc-border);
	border-radius: var(--cc-radius);
	color: var(--cc-text);
	font-size: 1em;
	min-height: var(--cc-control-height);
	padding: 6px 15px;
}

.carcascade--theme-gravity .carcascade__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	padding-right: 36px;
	text-align: center;
	text-align-last: center;
}

.carcascade--theme-gravity .carcascade__input {
	text-align: center;
}

.carcascade--theme-gravity .carcascade__select:focus-visible,
.carcascade--theme-gravity .carcascade__input:focus-visible,
.carcascade--theme-gravity .carcascade__search input:focus-visible {
	border-color: var(--cc-accent);
	outline: none;
}

.carcascade--theme-gravity .carcascade__tiles {
	gap: 12px 20px;
}

.carcascade--theme-gravity .carcascade__tile {
	background: #fff;
	border: 2px solid var(--cc-accent);
	color: var(--cc-accent);
	font-size: 1.1em;
	padding: 8px 12px;
}

.carcascade--theme-gravity .carcascade__tile:hover {
	background: var(--cc-accent-soft);
}

.carcascade--theme-gravity .carcascade__tile.is-selected {
	background: var(--cc-accent);
	box-shadow: none;
	color: #fff;
}

.carcascade--theme-gravity .carcascade__tile-hint {
	color: inherit;
	opacity: 0.75;
}

.carcascade--theme-gravity .carcascade__button {
	border-radius: var(--cc-radius);
	box-shadow: 0 1px 4px rgba(18, 25, 97, 0.08);
	font-size: 1.1em;
	font-weight: 500;
	min-height: 0;
	padding: 15px 40px;
}

.carcascade--theme-gravity .carcascade__button--ghost {
	border: 2px solid var(--cc-accent);
	padding: 13px 38px;
}

.carcascade--theme-gravity .carcascade__section {
	border-bottom: 2px solid var(--cc-border);
	color: var(--cc-text);
	font-size: 1.15em;
	font-weight: 500;
}

.carcascade--theme-gravity .carcascade__vehicle,
.carcascade--theme-gravity .carcascade__privacy {
	background: #f7f7f7;
	border: 2px solid var(--cc-border);
}

.carcascade--theme-gravity .carcascade__chip {
	background: #fff;
	border: 2px solid var(--cc-border);
}

.carcascade--theme-gravity .carcascade__offer-value {
	color: var(--cc-accent);
}

/* --- Gegen Theme-Vorgaben (Divi u. a.) ------------------------------------
   Divi gibt Absätzen unten 1em Innenabstand und Listen Einzüge – im
   Formular verschiebt das Hinweise, Fehlerzeilen und die Dateiliste. */

.carcascade p,
.carcascade ul,
.carcascade li {
	padding-bottom: 0;
}

.carcascade ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Eingabefelder (Kilometerstand, FIN, Mindestpreis) so breit wie die
   übrigen Felder; die Einheit steht im Feld rechts, damit der Wert mittig
   bleibt und nichts seitlich versetzt wirkt. */
.carcascade--form .carcascade__question--input .carcascade__number {
	display: block;
	max-width: none;
	position: relative;
	width: 100%;
}

.carcascade--form .carcascade__question--input .carcascade__suffix {
	pointer-events: none;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.carcascade--form .carcascade__question--input .carcascade__input {
	padding-left: 40px;
	padding-right: 40px;
}

/* Umschalter rechts im Feld wie die Einheit; beidseitig gleich viel
   Innenabstand, damit die Zahl mittig bleibt. */
.carcascade--form .carcascade__question--input .carcascade__units {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
}

.carcascade--form .carcascade__question--input .carcascade__number--units .carcascade__input {
	padding-left: 100px;
	padding-right: 100px;
}

.carcascade__consent {
	align-items: center;
	line-height: 1.4;
	max-width: none;
}

.carcascade__consent input {
	margin: 0;
}

.carcascade__contact-grid {
	max-width: none;
}

.carcascade__contact-field {
	max-width: none;
}

.carcascade__privacy {
	max-width: none;
}

.carcascade__button--submit {
	align-self: flex-start;
}

/* --- Upload als Ablagefläche ---------------------------------------------- */

.carcascade__drop {
	align-items: center;
	background: var(--cc-accent-soft);
	border: 2px dashed var(--cc-accent);
	border-radius: var(--cc-radius);
	color: var(--cc-text);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
	min-height: 150px;
	padding: 24px 16px;
	position: relative;
	text-align: center;
	transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.carcascade__drop:hover,
.carcascade__drop:focus-within {
	background: #e2f3e5;
}

.carcascade__drop.is-dragging {
	background: #d4eed8;
	border-style: solid;
	transform: scale(1.01);
}

.carcascade__drop.is-busy {
	cursor: progress;
	opacity: 0.6;
}

.carcascade__drop.has-files {
	border-style: solid;
}

.carcascade__drop-icon {
	background: var(--cc-accent);
	height: 40px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V4m0 0l-5 5m5-5l5 5M4 16v3a1 1 0 001 1h14a1 1 0 001-1v-3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V4m0 0l-5 5m5-5l5 5M4 16v3a1 1 0 001 1h14a1 1 0 001-1v-3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 40px;
}

.carcascade__drop-title {
	color: var(--cc-accent);
	font-size: 1.1em;
	font-weight: 600;
}

.carcascade__drop-hint {
	color: var(--cc-text-muted);
	font-size: 0.93em;
}

.carcascade__drop-badge {
	background: var(--cc-accent);
	border-radius: 99px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 10px;
	position: absolute;
	right: 12px;
	top: 12px;
}

/* Das echte Dateifeld bleibt bedienbar (Tastatur, Screenreader), ist aber
   unsichtbar über die ganze Fläche gelegt. */
.carcascade__drop .carcascade__file {
	cursor: pointer;
	height: 100%;
	inset: 0;
	opacity: 0;
	position: absolute;
	width: 100%;
}

.carcascade__files {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Gewählte Datei: Vorschau, Name, Größe, Entfernen. Farben und Breite
   ausdrücklich, weil Themes (Divi) Listenpunkte sonst weiß färben. */
.carcascade .carcascade__files-item {
	align-items: center;
	background: var(--cc-bg);
	border: 2px solid var(--cc-accent);
	border-radius: var(--cc-radius);
	color: var(--cc-text);
	display: flex;
	gap: 12px;
	line-height: 1.3;
	margin: 0;
	padding: 6px 8px 6px 6px;
	width: 100%;
}

.carcascade__files-thumb {
	border-radius: 6px;
	flex: 0 0 auto;
	height: 44px;
	object-fit: cover;
	width: 44px;
}

.carcascade__files-thumb--doc {
	align-items: center;
	background: var(--cc-accent-soft);
	color: var(--cc-accent);
	display: inline-flex;
	font-size: 11px;
	font-weight: 700;
	justify-content: center;
}

.carcascade__files-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.carcascade .carcascade__files-name {
	color: var(--cc-text);
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.carcascade .carcascade__files-size {
	color: var(--cc-text-muted);
	font-size: 12px;
}

.carcascade__files-remove {
	background: none;
	border: 0;
	color: var(--cc-text-muted);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 22px;
	line-height: 1;
	padding: 4px 8px;
}

.carcascade__files-remove:hover {
	color: #b3261e;
}

/* --- Ausgewählte Antworten als Marken ------------------------------------
   Die Reihe steht über den Fragen und führt mit einem Klick dorthin zurück.
   Auf schmalen Geräten wird sie zur waagerechten Rolle, damit sie nie mehr
   als zwei Zeilen einnimmt. */

.carcascade__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--cc-gap);
}

.carcascade__chip {
	align-items: center;
	background: var(--cc-accent-soft);
	border: 1px solid var(--cc-border);
	border-radius: 999px;
	color: var(--cc-text);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 13px;
	gap: 6px;
	line-height: 1.2;
	min-height: 32px;
	padding: 6px 12px;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.carcascade__chip::after {
	/* Stift als Hinweis, dass die Marke zum Ändern führt. */
	background: currentColor;
	content: "";
	flex: 0 0 auto;
	height: 12px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.5 1.5l3 3L5 14H2v-3z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0.55;
	width: 12px;
}

.carcascade__chip:hover,
.carcascade__chip:focus-visible {
	border-color: var(--cc-accent);
	color: var(--cc-accent);
}

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

/* --- Fahrzeug in einer Zeile, sobald es feststeht ------------------------- */

.carcascade__vehicle {
	background: var(--cc-accent-soft);
	border: 1px solid var(--cc-border);
	border-radius: var(--cc-radius);
	gap: 4px;
	padding: 14px 16px;
}

.carcascade__vehicle-text {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

/* Die Marke ganz rechts setzt die Fahrzeugauswahl zurück – ohne Stift, weil
   sie nicht zu einer einzelnen Frage führt. */
.carcascade__chip--reset {
	background: none;
	color: var(--cc-text-muted);
}

.carcascade__chip--reset::after {
	display: none;
}

/* --- Trefferzahl über den Kacheln ---------------------------------------- */

.carcascade__count {
	color: var(--cc-text-muted);
	font-size: 13px;
	margin: 0;
}

/* --- Platzhalter beim Laden ----------------------------------------------
   Gleiche Maße wie echte Kacheln: die Seite behält ihre Höhe. */

.carcascade__skeleton {
	background: linear-gradient(90deg,
		var(--cc-accent-soft) 0%,
		var(--cc-bg) 50%,
		var(--cc-accent-soft) 100%);
	background-size: 200% 100%;
	border-radius: var(--cc-radius);
	display: block;
	min-height: var(--cc-control-height);
	animation: carcascade-shimmer 1.4s linear infinite;
}

@keyframes carcascade-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

/* Freiraum am Ende, damit die offene Frage in die Fenstermitte rücken kann.
   Höhe setzt das Skript, sichtbar ist er nie. */
.carcascade__spacer {
	pointer-events: none;
}

/* --- Nur für Screenreader ------------------------------------------------- */

.carcascade__live {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* --- Dunkles Farbschema ---------------------------------------------------
   Nur wo die Seite selbst dunkel ist; die Themes setzen ihre Akzentfarbe
   danach erneut, damit eine eingestellte Farbe gewinnt. */

@media (prefers-color-scheme: dark) {
	.carcascade {
		--cc-accent-soft: #1b2733;
		--cc-border: #38424f;
		--cc-border-strong: #5a6675;
		--cc-bg: #141b23;
		--cc-text: #e7ecf2;
		--cc-text-muted: #a3adba;
	}

	.carcascade--theme-caradag {
		background: #141b23;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	}

	.carcascade__skeleton {
		background: linear-gradient(90deg, #1b2733 0%, #232f3d 50%, #1b2733 100%);
		background-size: 200% 100%;
	}

	/* Das Gravity-Theme bleibt hell wie das Original. Nur eine Klasse, damit
	   die Farben aus den Einstellungen (Inline-Variablen) weiter gewinnen. */
	.carcascade--theme-gravity {
		--cc-accent-soft: #eef8f0;
		--cc-border: #e0e0e0;
		--cc-border-strong: #e0e0e0;
		--cc-bg: #fff;
		--cc-text: #333;
		--cc-text-muted: #6b7280;
	}

	.carcascade--theme-gravity .carcascade__skeleton {
		background: linear-gradient(90deg, #eef8f0 0%, #fff 50%, #eef8f0 100%);
		background-size: 200% 100%;
	}
}

/* --- Weniger Bewegung ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.carcascade *,
	.carcascade *::before,
	.carcascade *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 860px) {
	.carcascade--form {
		width: 100%;
	}

	/* Auf dem Telefon rollt der Fortschritt mit: bei zehn Fragen ist er sonst
	   nach der zweiten Antwort außer Sicht. */
	.carcascade--form .carcascade__progress {
		background: var(--cc-bg);
		margin: 0 0 var(--cc-gap);
		padding: 10px 0;
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.carcascade--form .carcascade__questions {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.carcascade__unit {
		min-width: 36px;
		padding: 0 6px;
	}

	.carcascade--form .carcascade__question--input .carcascade__number--units .carcascade__input {
		padding-left: 88px;
		padding-right: 88px;
	}

	.carcascade {
		--cc-tile-min: 130px;
		--cc-gap: 14px;
		/* Finger brauchen mehr Fläche als ein Mauszeiger: 48 px sind die
		   Untergrenze der gängigen Zugänglichkeitsvorgaben. */
		--cc-control-height: 52px;
		--cc-tile-height: 52px;
	}

	.carcascade__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.carcascade__chip {
		flex: 0 0 auto;
		min-height: 36px;
	}

	.carcascade--theme-caradag,
	.carcascade--theme-gravity {
		padding: 18px;
	}

	.carcascade--theme-gravity .carcascade__button {
		padding: 13px 24px;
	}

	.carcascade__contact-grid {
		grid-template-columns: 1fr;
	}
}

/* --- Kontakt- und E-Mail-Block (seit 0.9, Ablauf seit 0.10) ----------------
   Fehler stehen am Feld; die Erfolgsseite zeigt Dank und Preisspanne. */

.carcascade__field-error {
	font-size: 13px;
}

.carcascade__contact-field.has-error .carcascade__input,
.carcascade--theme-gravity .carcascade__contact-field.has-error .carcascade__input {
	border-color: #b3261e;
}

.carcascade__consent.has-error {
	color: #b3261e;
}

.carcascade .carcascade__privacy-link {
	color: var(--cc-accent);
	text-decoration: underline;
}

.carcascade__pagenav {
	flex-wrap: wrap;
}

.carcascade__nav-error {
	flex: 1 1 100%;
}

.carcascade__success .carcascade__offer {
	border-bottom: 0;
	border-top: 1px solid var(--cc-accent);
	margin: 20px 0 0;
	padding: 20px 0 0;
}

.carcascade__success > .carcascade__actions {
	justify-content: center;
	margin-top: 16px;
}

.carcascade .carcascade__files-item.is-sent {
	border-style: dashed;
}

/* Tap-Ziele mindestens 44 × 44 px – auch im Gravity-Theme, dessen Felder
   sonst 38 px hoch sind. Steht am Ende, damit es Themes und die
   Telefon-Regeln oben schlägt. */
.carcascade--form .carcascade__button,
.carcascade--form .carcascade__link,
.carcascade--form .carcascade__chip,
.carcascade--form .carcascade__tile,
.carcascade--form .carcascade__input,
.carcascade--form .carcascade__select {
	min-height: 44px;
}

.carcascade--form .carcascade__link {
	align-items: center;
	display: inline-flex;
	text-align: left;
}

.carcascade--form .carcascade__files-remove {
	min-height: 44px;
	min-width: 44px;
}

.carcascade--form .carcascade__consent {
	min-height: 44px;
}

.carcascade--form .carcascade__consent input {
	height: 22px;
	width: 22px;
}

.carcascade .carcascade__privacy {
	padding-bottom: 12px;
}

.carcascade__button.is-busy {
	cursor: progress;
	filter: grayscale(0.4) brightness(1.05);
}

/* --- Erste Ansicht (0.9): Felder auf einer Linie, Bezeichnung im Feld ------- */

/* Nebeneinander stehende Felder enden auf derselben Linie, auch wenn eine
   Frage darüber zweizeilig umbricht. Kachelfragen und Überschriften nehmen
   ohnehin die volle Breite. */
.carcascade--form .carcascade__questions {
	align-items: end;
}

/* Kontaktfelder: Beschriftung, Feld und Fehlerzeile als Unterraster – das
   Feld steht in jeder Spalte auf derselben Zeile, eine Fehlermeldung schiebt
   nur ihre eigene Zeile. */
@supports (grid-template-rows: subgrid) {
	.carcascade__contact-grid {
		align-items: end;
		row-gap: 0;
	}

	.carcascade__contact-field {
		display: grid;
		gap: 4px;
		grid-row: span 3;
		grid-template-rows: subgrid;
		padding-bottom: 14px;
	}

	.carcascade__contact-field .carcascade__field-error {
		align-self: start;
	}
}

/* Nur für Screenreader: die Frage zu einem Dropdown, dessen Bezeichnung im
   Feld steht. */
.carcascade .carcascade__sr {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* „Fahrzeug nicht in der Liste? Von Hand eingeben" – leise Zeile unter den
   Feldern, der Link ohne Dauerunterstreichung. */
.carcascade--form .carcascade__missing {
	align-items: center;
	color: var(--cc-text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 0 6px;
	grid-column: 1 / -1;
	margin: -8px 0 0;
}

.carcascade--form .carcascade__link--quiet {
	color: var(--cc-accent);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.carcascade--form .carcascade__link--quiet:hover,
.carcascade--form .carcascade__link--quiet:focus-visible {
	text-decoration: underline;
}

/* --- Erste Maske (0.10): Marke, Modell, Jahr wie bei WKDA --------------------
   Drei Fragen untereinander, jede mit fetter Frage über dem Dropdown, darunter
   der Knopf „Jetzt Preis ermitteln ›" mittig. Auch bei mehreren Spalten
   (--cc-cols) einspaltig. */

.carcascade--form .carcascade__pick {
	align-items: stretch;
	grid-template-columns: minmax(0, 1fr);
}

.carcascade__pick .carcascade__question {
	gap: 6px;
}

.carcascade__pick .carcascade__label {
	font-size: 1.05em;
	font-weight: 700;
}

.carcascade__pick .carcascade__select {
	width: 100%;
}

.carcascade__pick .carcascade__select:disabled {
	background-color: var(--cc-accent-soft);
	cursor: not-allowed;
	opacity: 0.75;
}

.carcascade__pick .carcascade__pagenav {
	justify-content: center;
	margin-top: 4px;
}

.carcascade__button--go {
	align-items: center;
	display: inline-flex;
	gap: 10px;
	justify-content: center;
	min-width: min(100%, 320px);
}

.carcascade__chevron {
	font-size: 1.4em;
	line-height: 1;
	margin-top: -2px;
}

.carcascade--form .carcascade__pick .carcascade__missing {
	justify-content: center;
	margin: 0;
}

/* Mindesthöhe des Formulars, solange das Skript noch nicht gezeichnet hat
   (WP Rocket lädt es mit defer): so hoch wie die erste Maske, damit nichts
   darunter springt. Gemessen am Prüfstand mit Schriftgröße 16 px: 392 px
   bei 390–520 px Breite (435 px bei 360 px, dort bricht die Zeile „Von
   Hand eingeben" um), 412 px ab 768 px. Etwas knapper als gemessen, damit
   kurze Seiten (Erfolg) keine Lücke bekommen. */
.carcascade--form .carcascade__mount {
	min-height: 390px;
}

@media (min-width: 768px) {
	.carcascade--form .carcascade__mount {
		min-height: 410px;
	}
}

/* E-Mail-Seite: ein Feld, nicht im Kontaktraster verteilt. */
.carcascade__contact-grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 480px;
}

/* Nach „Weiter" auf einer unvollständigen Seite: offene Pflichtfragen. */
.carcascade__question.is-missing > .carcascade__label {
	color: #b3261e;
}

.carcascade__question.is-missing .carcascade__drop {
	border-color: #b3261e;
}

@media (max-width: 520px) {
	.carcascade__button--go {
		width: 100%;
	}
}