/*
 * E-Bike verkaufen (page-verkaufen.php) – Ergänzungen zu atoms.css.
 * Auswahlfelder sind echte Radio-/Kontrollkästchen in <label>; der gewählte Zustand kommt über :has(:checked)
 * (wie die sc-if-Zustände sel/idle im Prototyp). Funktioniert auch ohne JavaScript.
 */

/* Fokus für Tastatur auf dem Label sichtbar machen */
.eb-vk-form label:has(> input.eb-sr:focus-visible) { outline: 2px solid #0a7a08; outline-offset: 2px; }

/* Schritt-Chips: aktuell grün, erledigt weiß, offen dunkel */
.eb-vk-chip-schritt[data-zustand="cur"] { background: #0ee90b; }
.eb-vk-chip-schritt[data-zustand="cur"] > span { color: #fff; }
.eb-vk-chip-schritt[data-zustand="done"] { background: #fff; }
.eb-vk-chip-schritt[data-zustand="done"] > span { color: #141414; }
.eb-vk-chip-schritt[data-zustand="todo"] { background: #262624; }
.eb-vk-chip-schritt[data-zustand="todo"] > span { color: #a5a5a0; }

/* Verkäufer: gewählt grün ohne Rahmen */
.eb-vk-tab:has(:checked) { border: 0; background: #0ee90b; cursor: default; }
.eb-vk-tab:has(:checked) > span { color: #fff; }

/* Zustand: gewählt schwarz */
.eb-vk-zustand:has(:checked) { border-color: #141414; background: #141414; color: #fff; }
.eb-vk-zustand:has(:checked) .c-muted { color: #c9c9c4; }

/* E-Bike-Check: Rahmen und Schalter */
.eb-vk-check:has(:checked) { border-color: #0ee90b; }
.eb-vk-check:has(:checked) .eb-vk-schalter { background: #0ee90b; }
.eb-vk-schalter > span { transition: left .12s; }
.eb-vk-check:has(:checked) .eb-vk-schalter > span { left: 21px; }

/* Zubehör, VB, Versand: an = schwarz mit Haken */
.eb-vk-chip:has(:checked) { border: 0; background: #141414; color: #fff; font-weight: 800; }
.eb-vk-chip:not(:has(:checked)) .eb-vk-an { display: none; }

/* Upgrades: Rahmen und Kästchen grün */
.eb-vk-upgrade:has(:checked) { border-color: #0ee90b; }
.eb-vk-upgrade:has(:checked) .eb-vk-kasten { border: 0; background: #0ee90b; }
.eb-vk-upgrade:not(:has(:checked)) .eb-vk-kasten svg { display: none; }

/* Einschätzung für Käufer (prColor) und in der dunklen Vorschau (prDark) */
.eb-vk-urteil { color: #5a5a57; }
.eb-vk-urteil[data-urteil="good"] { color: #0a7a08; }
.eb-vk-urteil[data-urteil="high"] { color: #9a4a00; }
.eb-vk-urteil-dunkel { color: #c9c9c4; }
.eb-vk-urteil-dunkel[data-urteil="good"] { color: #0ee90b; }
.eb-vk-urteil-dunkel[data-urteil="high"] { color: #ffb066; }

/* Vorschau: Highlight-Rahmen und Etiketten je nach Auswahl */
.eb-vk-form:has(input[name="upgrades[]"][value="hl"]:checked) .eb-vk-vorschau { border-color: #0ee90b; }
.eb-vk-tag-top, .eb-vk-tag-check { display: none; }
.eb-vk-form:has(input[name="upgrades[]"][value="top"]:checked) .eb-vk-tag-top { display: block; }
.eb-vk-form:has(input[name="check"]:checked) .eb-vk-tag-check { display: block; }
.eb-vk-pv-img { object-fit: cover; display: block; max-width: none; }

/* Fotos */
.eb-vk-foto { transition: box-shadow .12s; }
.eb-vk-foto.ist-ziel, .eb-vk-foto:hover { box-shadow: inset 0 0 0 2px #141414; }
.eb-vk-foto[data-voll] .eb-vk-leer { display: none; }
.eb-vk-bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.eb-vk-weg {
	position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 6px; border: 0;
	background: rgba(20, 20, 20, .8); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2;
}
.eb-vk-foto.laedt::after {
	content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .55) linear-gradient(90deg, #0ee90b 0 var(--fortschritt, 30%), transparent 0) no-repeat 0 100% / 100% 4px;
}

/* Mobil (≤640px): wie die Knöpfe im Prototyp mindestens 44px hoch */
@media (max-width: 640px) {
	.eb-vk-tab:not(:has(:checked)), .eb-vk-chip { min-height: 44px; }
	/* Abweichung vom Prototyp: dort überdeckt die Vorschau (min. 320px) bei 375px das Formular.
	   Nach der Regel des Handoffs „ab ≤640px stapeln“: Formular, darunter die Vorschau. */
	.eb-vk-raster { grid-template-columns: minmax(0, 1fr); }
	.eb-vk-raster > aside { position: static; }
}

/* Handy (unter 640 px): Vorschau erst im letzten Schritt (vorher nur eine leere Fläche unter dem Formular). */
@media (max-width: 639.98px) {
	.eb-vk-raster > aside { display: none; }
	.eb-vk-raster:has([data-eb-schritt="5"]:not([hidden])) > aside { display: flex; }
}

/* Informationsbereich unter dem Formular (parts/b-verkaufen-info.php) */
.eb-vk-text p { margin: 0; font-size: 17px; line-height: 1.6; color: #3c3c3a; }
.eb-vk-text a { font-weight: 700; color: #141414; }
.eb-vk-text h3 { margin-top: 8px; }
.w-26 { width: 26px; }
.h-26 { height: 26px; }
.mt-1 { margin-top: 1px; }
.fs-56 { font-size: 56px; }
.p-72-clamp-16-4vw-32-0 { padding: 72px clamp(16px, 4vw, 32px) 0; }
.p-72-clamp-16-4vw-32-88 { padding: 72px clamp(16px, 4vw, 32px) 88px; }
.ls-none { list-style: none; }
.maxw-860 { max-width: 860px; }
@media (max-width: 639.98px) {
	.eb-vk-schritte { gap: 18px; }
	.eb-vk-schritte > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
	.eb-vk-schritte > div > span:nth-child(1) { grid-row: 1 / span 3; font-size: 40px; }
	.eb-vk-schritte > div > span:nth-child(2) { display: none; }
	.eb-vk-schritte > div > span:nth-child(3) { margin-top: 2px; font-size: 18px; }
	.eb-vk-info h2 { font-size: 30px; }
}