/* Händler-Registrierung (Onboarding.dc.html): Ergänzungen zu den Einzelklassen.
   Auswahlen sind echte Checkboxen/Radios im Label (funktionieren ohne JavaScript); die Zustände kommen über :has(). */

/* Formular und Schritte stehen wie im Prototyp direkt in der Spalte der Karte (gap 26). */
.eb-reg-formular,
.eb-reg-schritt { display: contents; }

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

/* Services im Laden: an = dunkel mit Haken, ohne Rahmen. */
.eb-reg-haken { display: none; }
.eb-reg-service:has(input:checked) { border: 0; background: #141414; color: #fff; font-weight: 800; }
.eb-reg-service:has(input:checked) .eb-reg-haken { display: inline; }

/* Anbindung: gewählte Karte dunkel. */
.eb-reg-quelle:has(input:checked) { border-color: #141414; background: #141414; color: #fff; }
.eb-reg-quelle:has(input:checked) .eb-reg-quelle-text { color: #c9c9c4; }

/* Feld je Anbindung (Feed-URL, API-Schlüssel, Datei). */
.eb-reg-feld { display: none; }
.eb-reg-formular:has(input[name="quelle"][value="feed"]:checked) [data-reg-feld="feed"],
.eb-reg-formular:has(input[name="quelle"][value="api"]:checked) [data-reg-feld="api"],
.eb-reg-formular:has(input[name="quelle"][value="csv"]:checked) [data-reg-feld="csv"] { display: flex; }
.eb-reg-datei { padding-top: 11px; padding-bottom: 11px; font-size: 14px; cursor: pointer; }
.eb-reg-datei::file-selector-button { margin-right: 12px; height: 26px; padding: 0 12px; border: 0; border-radius: 4px; background: #141414; color: #fff; font: 800 italic 12px/26px 'Barlow', system-ui, sans-serif; text-transform: uppercase; cursor: pointer; }

/* Kaufwege: Schalter 44 × 26 wie im Prototyp (an grün, Knopf rechts). */
.eb-reg-schalter { background: #d5d5d1; }
.eb-reg-schalter > span { left: 3px; }
.eb-reg-weg:has(input:checked) .eb-reg-schalter { background: #0ee90b; }
.eb-reg-weg:has(input:checked) .eb-reg-schalter > span { left: auto; right: 3px; }

/* AGB-Haken. */
.eb-reg-box { border: 2px solid #d5d5d1; }
.eb-reg-box svg { display: none; }
.eb-reg-agb:has(input:checked) .eb-reg-box { border: 0; background: #0ee90b; }
.eb-reg-agb:has(input:checked) .eb-reg-box svg { display: block; }

/* Tastaturfokus auf den versteckten Auswahlfeldern sichtbar machen. */
.eb-reg-service:has(input:focus-visible),
.eb-reg-quelle:has(input:focus-visible),
.eb-reg-weg:has(input:focus-visible),
.eb-reg-agb:has(input:focus-visible) .eb-reg-box { outline: 2px solid #0a7a08; outline-offset: 2px; }

/* Mobil: Chips mindestens 44 px hoch wie die Knöpfe im Prototyp. */
@media (max-width: 640px) { .eb-reg-service { min-height: 44px; } }

/* Fehlerhafte Felder. */
.eb-reg-fehlerfeld { border-color: #b3261e !important; }

/* Schmale Bildschirme: Vorschau unter das Formular (im Prototyp überlagern sich die Spalten unter 860 px). */
@media (max-width: 860px) {
	.eb-reg-raster { grid-template-columns: minmax(0, 1fr); }
	.eb-reg-raster > aside { position: static; }
}

/* Handy (unter 640 px): Kacheln mit großen Zahlen passen in drei Spalten */
@media (max-width: 639.98px) {
	.eb-reg-kacheln > div { padding: 12px; }
	.eb-reg-kacheln > div > span:first-child { font-size: 24px; }
}