/* slot-finder.css — OSEG "Slot-Finder" quiz widget.
   "Welcher Slot passt zu dir?" — 3 taste questions → best-matching slot
   from the injected dataset, linking to our review. Geschmacks-Quiz,
   keine Gewinnstrategie.

   All colours flow through the site tokens (tokens.css) with fallbacks, so
   the widget inherits light/dark automatically ([data-theme="dark"]) and
   still renders standalone. Accents: Grün (--primary) = CTA/Weiter,
   Violett (--accent) = selection/focus, Gold (--star) = Volatilitäts-Punkte.

   Mobile-first, 44px touch targets, options stack at 375px without
   horizontal overflow, prefers-reduced-motion supported (the JS skips the
   transition; this file additionally kills all motion). */

/* ---------- design tokens (local aliases onto site tokens) ---------- */

.osf {
  --osf-surface: var(--surface, #FFFDF9);
  --osf-tint: var(--hero, #F9EFDD);
  --osf-line: var(--line, #E4DDD3);
  --osf-ink: var(--ink, #2E241D);
  --osf-muted: var(--sub, #6B6157);
  --osf-primary: var(--primary, #00945E);
  --osf-on-primary: var(--on-primary, #ffffff);
  --osf-accent: var(--accent, #8A5FC9);
  --osf-gold: var(--star, #D89529);

  --osf-font-display: var(--font-display, 'Sora', system-ui, sans-serif);
  --osf-radius: var(--radius, 1rem);
  --osf-radius-m: var(--radius-m, 0.75rem);
  --osf-radius-s: var(--radius-s, 0.5rem);
}

/* ---------- card ---------- */

.osf {
  color: var(--osf-ink);
  line-height: var(--lh-lead);
  background: var(--osf-surface);
  border: 1px solid var(--osf-line);
  border-radius: var(--osf-radius);
  padding: var(--s-20, 1.25rem) var(--s-16, 1rem);
}

@media (min-width: 640px) {
  .osf {
    padding: var(--s-24, 1.5rem);
  }
}

.osf *,
.osf *::before,
.osf *::after {
  box-sizing: border-box;
}

.osf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8, 0.5rem) var(--s-16, 1rem);
  margin-bottom: var(--s-12, 0.75rem);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s-12, 0.75rem);
}

.osf-title {
  margin: 0;
  font-weight: 800;
  color: var(--osf-ink);
}

.osf-note {
  margin: 0;
  padding: var(--s-4, 0.25rem) var(--s-12, 0.75rem);
  font-size: var(--fs-12, 0.75rem);
  font-weight: 700;
  color: var(--osf-gold);
  background: color-mix(in srgb, var(--osf-gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--osf-gold) 40%, transparent);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* graceful degrade where color-mix is unsupported */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .osf-note {
    background: rgba(216, 149, 41, 0.12);
    border-color: rgba(216, 149, 41, 0.4);
  }
}

/* ---------- step container + transition fallback ---------- */

.osf-step {
  min-width: 0;
}

/* CSS fallback when GSAP isn't on the page (JS adds the class) */
.osf-anim-in {
  animation: osf-in 0.35s ease-out both;
}

@keyframes osf-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- intro ---------- */

.osf-kicker {
  margin: 0 0 var(--s-4, 0.25rem);
  font-size: var(--fs-12, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kicker-main, var(--osf-primary));
}

.osf-qtitle {
  display: block;
  margin: 0 0 var(--s-12, 0.75rem);
  padding: 0;
  font-family: var(--osf-font-display);
  color: var(--osf-ink);
}

.osf-qtitle:focus-visible {
  outline: 2px solid var(--osf-accent);
  outline-offset: 4px;
  border-radius: var(--osf-radius-s);
}

.osf-introtext {
  margin: 0 0 var(--s-16, 1rem);
  font-size: var(--fs-16, 1rem);
  color: var(--osf-muted);
  max-width: 75ch;
}

/* ---------- progress ---------- */

.osf-progress {
  margin-bottom: var(--s-12, 0.75rem);
}

.osf-progress-label {
  margin: 0 0 var(--s-4, 0.25rem);
  font-size: var(--fs-12, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--osf-muted);
}

.osf-progress-bar {
  height: 6px;
  background: var(--osf-tint);
  border: 1px solid var(--osf-line);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.osf-progress-fill {
  display: block;
  height: 100%;
  background: var(--osf-primary);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

/* ---------- options ---------- */

.osf-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.osf-opts {
  display: grid;
  gap: var(--s-8, 0.5rem);
  margin-bottom: var(--s-16, 1rem);
}

.osf-opts-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.osf-opts-stack {
  grid-template-columns: 1fr;
}

/* visually hidden but focusable radio (native keyboard semantics stay) */
.osf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.osf-opt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--s-48);
  padding: var(--s-8, 0.5rem) var(--s-12, 0.75rem);
  background: var(--osf-surface);
  border: 1px solid var(--osf-line);
  border-radius: var(--osf-radius-s);
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.osf-opt:hover {
  background: var(--osf-tint);
}

/* selected state (JS toggles the class — no :has() dependency) */
.osf-opt.is-checked {
  border-color: var(--osf-accent);
  background: color-mix(in srgb, var(--osf-accent) 10%, var(--osf-surface));
  box-shadow: inset 0 0 0 1px var(--osf-accent);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .osf-opt.is-checked {
    background: rgba(138, 95, 201, 0.10);
  }
}

/* keyboard focus ring on the styled card */
.osf-opt.is-focus {
  outline: 2px solid var(--osf-accent);
  outline-offset: 2px;
}

.osf-opt-body {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

.osf-opt-label {
  font-size: var(--fs-14, 0.875rem);
  font-weight: 600;
  color: var(--osf-ink);
}

.osf-opt-sub {
  font-size: var(--fs-12, 0.75rem);
  color: var(--osf-muted);
}

/* ---------- nav buttons ---------- */

.osf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-8, 0.5rem) var(--s-12, 0.75rem);
}

/* Buttons reuse the global .btn system (system.css) — see the .osf .btn rule below. */

/* ---------- result ---------- */

.osf-result-name {
  margin: 0 0 var(--s-2, 0.125rem);
  font-weight: 800;
  color: var(--osf-ink);
}

.osf-result-name:focus-visible {
  outline: 2px solid var(--osf-accent);
  outline-offset: 4px;
  border-radius: var(--osf-radius-s);
}

.osf-result-sub {
  margin: 0 0 var(--s-12, 0.75rem);
  font-size: var(--fs-14, 0.875rem);
  color: var(--osf-muted);
}

.osf-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8, 0.5rem);
  margin-bottom: var(--s-8, 0.5rem);
}

.osf-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8, 0.5rem);
  padding: var(--s-4, 0.25rem) var(--s-12, 0.75rem);
  background: var(--osf-tint);
  border: 1px solid var(--osf-line);
  border-radius: var(--radius-pill);
}

.osf-meta-key {
  font-size: var(--fs-12, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--osf-muted);
}

.osf-meta-val {
  font-family: var(--osf-font-display);
  font-size: var(--fs-14, 0.875rem);
  font-weight: 700;
  color: var(--osf-ink);
}

/* volatility dots 1..5 — gold like the site's stars */
.osf-vola {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
}

.osf-vola-dot {
  width: var(--s-8);
  height: var(--s-8);
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--osf-gold);
  opacity: 0.55;
}

.osf-vola-dot.is-on {
  background: var(--osf-gold);
  opacity: 1;
}

.osf-feats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8, 0.5rem);
  margin-bottom: var(--s-16, 1rem);
}

.osf-feat {
  padding: var(--s-4, 0.25rem) var(--s-12, 0.75rem);
  font-size: var(--fs-12, 0.75rem);
  font-weight: 600;
  color: var(--osf-accent);
  background: color-mix(in srgb, var(--osf-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--osf-accent) 35%, transparent);
  border-radius: var(--radius-pill);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .osf-feat {
    background: rgba(138, 95, 201, 0.10);
    border-color: rgba(138, 95, 201, 0.35);
  }
}

.osf-reason {
  margin: 0 0 var(--s-16, 1rem);
  padding: var(--s-8, 0.5rem) var(--s-12, 0.75rem);
  font-size: var(--fs-14, 0.875rem);
  color: var(--osf-ink);
  background: var(--osf-tint);
  border: 1px dashed var(--osf-line);
  border-radius: var(--osf-radius-s);
  display: inline-flex;
}

.osf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8, 0.5rem) var(--s-16, 1rem);
  margin-bottom: var(--s-16, 1rem);
}

.osf-cta {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* buttons reuse the global .btn system (system.css); keep a consistent min-width in the widget */
.osf .btn {
  min-width: 9rem;
}

.osf-demo-note {
  margin: 0;
  font-size: var(--fs-14, 0.875rem);
  color: var(--osf-muted);
}

.osf-runners {
  padding-top: var(--s-16, 1rem);
  border-top: 1px solid var(--osf-line);
  margin-bottom: var(--s-16, 1rem);
}

.osf-runners-label {
  margin: 0 0 var(--s-4, 0.25rem);
  font-size: var(--fs-12, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--osf-muted);
}

.osf-runners-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2, 0.125rem);
}

.osf-runner-link {
  font-size: var(--fs-14, 0.875rem);
  font-weight: 700;
  color: var(--osf-accent);
  transition: color .25s ease;
}

.osf-runner-link:hover {
  color: var(--osf-primary);
}

.osf-runner-link:focus-visible {
  outline: 2px solid var(--osf-accent);
  outline-offset: 2px;
  border-radius: var(--osf-radius-s);
}

.osf-runner-sub {
  font-size: var(--fs-14, 0.875rem);
  color: var(--osf-muted);
}

/* ---------- disclaimer ---------- */

.osf-disclaimer {
  margin: var(--s-16, 1rem) 0 0;
  padding-top: var(--s-8, 0.5rem);
  border-top: 1px solid var(--osf-line);
  font-size: var(--fs-12, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--osf-muted);
}

/* ---------- narrow screens: everything stacks, no overflow ---------- */

@media (max-width: 28.75rem) { /* 460px — unified with the site's narrow-phone breakpoint */
  .osf-opts-grid {
    grid-template-columns: 1fr 1fr;
  }

  .osf-nav {
    justify-content: stretch;
  }

  .osf-nav .btn {
    flex: 1 1 auto;
  }
}

/* ---------- reduced motion: kill everything that moves ---------- */

@media (prefers-reduced-motion: reduce) {
  .osf *,
  .osf *::before,
  .osf *::after {
    animation: none !important;
    transition: none !important;
  }
}