/* ══ Redesign "Design perfekt" – Knoepfe & Auswahl in Braun ══════════════════
   Entscheid Leandro 11.10.2026 (protokoll.md): Haupt-Knoepfe und gewaehlte
   Optionen sind braun (--btn), Zweitknoepfe haben einen hellen, warmen Rand.
   Stellio Blue (--gold) bleibt fuer Figur, Marke, "Frag Stellio", Links,
   Fokus-Rahmen, Fortschritt und die aktive Sidebar-Markierung.
   Wird nur in app.html geladen (nach depth.css, vor helper.css) – Landing,
   Login und die uebrigen Seiten bleiben unveraendert. Farben nur als var(--…). */

/* ── Hauptknopf ── */
.btn-primary { background: var(--btn); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-hover); box-shadow: var(--btn-glow); }
.btn-primary:active { box-shadow: none; background: var(--btn-press); transform: scale(.98); }

/* ── Zweitknopf: heller, warmer Rand ── */
.btn-ghost:not(.btn-danger) { border-color: var(--btn-line); }
.btn-ghost:not(.btn-danger):hover { border-color: var(--btn-line-hover); }

/* ── Weitere Aktions-Knoepfe mit Glow ── */
.tracker-fab { background: var(--btn); color: var(--btn-ink); box-shadow: var(--btn-glow); }
.tracker-fab:hover { background: var(--btn-hover); box-shadow: var(--btn-glow-strong); }
.tour-next { background: var(--btn); color: var(--btn-ink); }
.coach-center-arrow { background: var(--btn); color: var(--btn-ink); }
.btn-voice-round { background: var(--btn); color: var(--btn-ink); }
.btn-voice-round:hover { background: var(--btn-hover); }
.ivv-mic { background: var(--btn); box-shadow: var(--btn-glow-strong); }
.ivv-mic:hover { background: var(--btn-hover); }
.ivv-mic::before, .ivv-mic::after { border-color: var(--btn); }
/* "Frag Stellio" bleibt Stellio Blue (dort kommt die Figur hin), aber mit warmem
   Schatten statt blauem Glow (helper.css wird spaeter geladen, daher mit body davor) */
body .sh-fab { box-shadow: var(--shadow-card-hi); }
body .sh-btn { background: var(--btn); color: var(--btn-ink); }
body .sh-btn:hover { background: var(--btn-hover); }
body .sh-btn-light { background: var(--btn-tint); color: var(--btn-text); }
body .sh-btn-light:hover { background: var(--btn-tint); box-shadow: inset 0 0 0 1px var(--btn-line); }
body .sh-panel .sh-check input { accent-color: var(--btn); }

/* ── Aktive Seitenzahl / Schritt-Nummer: brauner Kreis ── */
.mc-nav-num.active { background: var(--btn); color: var(--btn-ink); }
.step-num-badge { background: var(--btn); color: var(--btn-ink); }
.coaching-step.step-active .step-header { background: var(--btn-tint); }

/* ── Gewaehlte Option (Radio, Karten, Chips, Schalter) ── */
.mc-radio-option input[type="radio"],
.consent-toggle input, .combine-check-row input[type="checkbox"] { accent-color: var(--btn); }
.mc-radio-option:has(input:checked) { background: var(--btn-tint); border-color: var(--btn-line); }
.career-q-opt.selected, .career-q-opt-row.selected, .img-analogy-opt.selected,
.label-term.selected, .mr-option.selected { border-color: var(--btn); background: var(--btn-tint); }
.career-q-unsure-link.selected { color: var(--btn-text); text-decoration-color: var(--btn); }
.chip.selected { background: var(--btn-tint); border-color: var(--btn); color: var(--btn-text); }
/* Korrektur Live-Pruefung (7b), nur im Coach-Ablauf (Motivationsschreiben / Schnupperlehren): die helle
   Toenung war auf dem beigen Chip-Grund kaum zu sehen - gewaehlte Chips sind dort dunkelbraun gefuellt,
   weisse Schrift (--btn-press, ca. 6:1), gleiche Schriftstaerke (kein Springen der Breite). */
#cover-bubble-overlay .chip.selected,
#cover-bubble-overlay .chip.selected:hover { background: var(--btn-press); border-color: var(--btn-press); color: var(--btn-ink); }
/* Berufs-Finder (Pruefer 20.10.2026): gleiche Loesung wie oben - gewaehlte Antwort dunkelbraun
   gefuellt, weisse Schrift; Hover bleibt eine leichte Toenung und ist klar schwaecher. */
#page-career .career-q-opt:hover, #page-career .career-q-opt-row:hover { background: var(--btn-tint); border-color: var(--btn-line); }
#page-career .career-q-opt.selected, #page-career .career-q-opt-row.selected,
#page-career .career-q-opt.selected:hover, #page-career .career-q-opt-row.selected:hover,
#page-career .career-q-opt.selected:focus-visible, #page-career .career-q-opt-row.selected:focus-visible { background: var(--btn-press); border-color: var(--btn-press); color: var(--btn-ink); }
.creativity-tool-btn.active { background: var(--btn-tint); color: var(--btn-text); border-color: var(--btn); }
.speed-compare-btn.selected { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.bottom-sheet-option.selected { color: var(--btn-text); }
.switch input:checked + .switch-slider, .toggle.on { background: var(--btn); }

/* Handy: kein haengender Hover-Glow (wie components.css) */
@media (max-width: 760px) {
  .btn-primary:hover, .tracker-fab:hover { box-shadow: none; }
}