/* ==========================================================================
   EOS — Bedarfs-Check (Lead-Qualifizierung, leistungen.html #bedarfscheck)
   --------------------------------------------------------------------------
   Ergänzungs-Stylesheet zu main.css. Verwendet ausschließlich die Tokens und
   Klassen des Design-Systems (--c-*, --f-mono, --e-expo, --gutter, --colpad …).
   Keine eigene Farbwelt, keine Änderung an main.css.
   ========================================================================== */

/* — Sektion: Haarlinie oben, weil Vorgänger- und Folgeabschnitt denselben
     Grund tragen können. — */
#bedarfscheck{border-top:1px solid var(--c-line)}

/* Fallback-Liste (ohne JS) ⇄ Widget (mit JS).
   check.js entfernt [hidden] am Widget und setzt es an der Liste. */
.check__fallback{margin-top:clamp(2rem,4vw,3rem)}
.check__fallback-l{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  column-gap:clamp(1.5rem,3vw,3rem);
  border-top:1px solid var(--c-line);
}
.check__fallback-l li{border-bottom:1px solid var(--c-line)}
.check__fallback-l a{
  display:flex;align-items:center;gap:.8rem;
  padding:1rem 0;font-size:var(--t-sm);font-weight:500;
}
.check__fallback-l a:hover,.check__fallback-l a:focus-visible{color:var(--c-petrol)}
.check__fallback-l .check__n{color:var(--c-gold);flex:none}
.check__fallback-l svg{margin-left:auto;flex:none;
  transition:transform var(--d-base,.34s) var(--e-out)}
.check__fallback-l a:hover svg{transform:translateX(4px)}

/* — Mono-Ziffer / Kleinlabel — */
.check__n{
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;
}

/* — Rahmen des Werkzeugs — */
.check{
  margin-top:clamp(2rem,4vw,3rem);
  border:1px solid var(--c-line);
  background:var(--c-ground-2);
  padding:clamp(1.25rem,3vw,2.25rem);
  max-width:var(--w-narrow);
}

/* Kopfzeile: Fortschrittstext + Neustart */
.check__head{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.6rem 1.25rem;margin-bottom:.85rem;
}
.check__status{
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--c-ink-3);margin:0;min-width:0;overflow-wrap:break-word;
}
.check__reset{
  margin-left:auto;background:none;border:0;padding:.15rem 0;cursor:pointer;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--c-ink-3);
  border-bottom:1px solid var(--c-line-2);
  transition:color var(--d-fast,.22s) var(--e-out),border-color var(--d-fast,.22s) var(--e-out);
}
.check__reset:hover,.check__reset:focus-visible{color:var(--c-ink);border-bottom-color:var(--c-petrol)}
.check__reset[hidden]{display:none}

/* — Fortschrittsbalken — */
.check__bar{height:2px;background:var(--c-line);overflow:hidden}
.check__bar i{
  display:block;height:100%;background:var(--c-gold);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s var(--e-expo);
}

/* — Chips der bisherigen Antworten — */
.check__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.check__chips:empty{display:none}
.check__chip{
  display:inline-flex;align-items:center;gap:.5rem;max-width:100%;
  padding:.42rem .7rem;cursor:pointer;
  background:var(--c-ground);border:1px solid var(--c-line);border-radius:var(--radius);
  font-size:var(--t-xs);color:var(--c-ink-2);text-align:left;
  transition:border-color var(--d-fast,.22s) var(--e-out),color var(--d-fast,.22s) var(--e-out);
}
.check__chip:hover,.check__chip:focus-visible{border-color:var(--c-petrol);color:var(--c-ink)}
.check__chip b{
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--ls-label);color:var(--c-gold);flex:none;
}
.check__chip span{overflow-wrap:break-word;min-width:0}
.check__chip i{
  font-style:normal;flex:none;color:var(--c-ink-3);
  font-family:var(--f-mono);font-size:var(--t-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  padding-left:.15rem;
}
.check__chip:hover i,.check__chip:focus-visible i{color:var(--c-petrol)}

/* — Bühne: alle Schritte + Ergebnis liegen in derselben Rasterzelle.
     Dadurch entspricht die Höhe stets dem höchsten Panel – kein Springen. — */
.check__stage{
  display:grid;align-items:start;
  margin-top:clamp(1.25rem,2.5vw,1.9rem);
  min-height:15rem;overflow:hidden;
  transition:height .4s var(--e-expo);
}
.check__panel{
  grid-area:1/1;min-width:0;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .38s var(--e-expo),transform .38s var(--e-expo),
             visibility 0s linear .38s;
}
.check__panel[data-on="true"]{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .38s var(--e-expo),transform .38s var(--e-expo),visibility 0s linear 0s;
}

/* — Frage — */
.check__q{
  font-size:var(--t-h4);font-weight:600;letter-spacing:var(--ls-h3);line-height:1.3;
  margin:.55rem 0 0;overflow-wrap:break-word;
}
.check__q:focus{outline:0}
.check__q:focus-visible{outline:2px solid var(--c-petrol-2);outline-offset:3px}
.check__k{color:var(--c-gold);display:block;margin-bottom:.2rem}

/* — Optionen — */
.check__opts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr));
  gap:.6rem;margin-top:clamp(1.1rem,2vw,1.5rem);
}
.check__opt{
  display:flex;align-items:flex-start;gap:.75rem;
  width:100%;min-width:0;text-align:left;cursor:pointer;
  padding:.95rem 1rem;
  background:var(--c-ground);
  border:1px solid var(--c-line);border-radius:var(--radius);
  font-size:var(--t-sm);line-height:1.45;color:var(--c-ink);
  position:relative;
  transition:border-color var(--d-base,.34s) var(--e-out),
             background-color var(--d-base,.34s) var(--e-out),
             transform var(--d-base,.34s) var(--e-out);
}
.check__opt::before{
  content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;
  background:var(--c-gold);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .34s var(--e-expo);
}
.check__opt:hover,.check__opt:focus-visible{border-color:var(--c-line-2)}
.check__opt:hover::before,.check__opt:focus-visible::before{transform:scaleY(1)}
.check__opt[aria-pressed="true"]{border-color:var(--c-petrol)}
.check__opt[aria-pressed="true"]::before{transform:scaleY(1);background:var(--c-petrol)}
.check__opt-k{
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--ls-label);color:var(--c-ink-3);
  flex:none;padding-top:.18rem;
}
.check__opt-t{min-width:0;overflow-wrap:break-word}

/* — Fuß: Zurück — */
.check__foot{
  display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;
  margin-top:clamp(1.25rem,2.5vw,1.8rem);
  padding-top:1.1rem;border-top:1px solid var(--c-line);
}
.check__back{
  display:inline-flex;align-items:center;gap:.55rem;
  background:none;border:0;padding:.2rem 0;cursor:pointer;
  font-size:var(--t-sm);font-weight:500;color:var(--c-ink-2);
  transition:color var(--d-fast,.22s) var(--e-out),opacity var(--d-fast,.22s) var(--e-out);
}
.check__back svg{transition:transform var(--d-base,.34s) var(--e-out)}
.check__back:hover:not(:disabled),.check__back:focus-visible:not(:disabled){color:var(--c-ink)}
.check__back:hover:not(:disabled) svg{transform:translateX(-4px)}
.check__back:disabled{opacity:.34;cursor:default}
.check__hint{
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--c-ink-3);margin-left:auto;min-width:0;
}

/* — Ergebnis — */
.check__res-lead{
  font-size:var(--t-sm);color:var(--c-ink-2);line-height:1.55;
  margin-top:.85rem;max-width:60ch;
}
.check__areas{margin-top:1.15rem;border-top:1px solid var(--c-line)}
.check__area{border-bottom:1px solid var(--c-line)}
.check__area a{
  display:grid;grid-template-columns:minmax(0,1fr) 16px;
  align-items:center;gap:.4rem 1rem;padding:.85rem 0;
}
.check__area-r{
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--c-gold);
  display:block;margin-bottom:.25rem;
}
.check__area--sec .check__area-r{color:var(--c-ink-3)}
.check__area-t{font-size:var(--t-sm);font-weight:550;letter-spacing:-.015em;overflow-wrap:break-word}
.check__area a:hover .check__area-t,.check__area a:focus-visible .check__area-t{color:var(--c-petrol)}
.check__area svg{justify-self:end;flex:none;color:var(--c-ink-3);
  transition:transform var(--d-base,.34s) var(--e-out)}
.check__area a:hover svg{transform:translateX(3px)}

.check__first{
  margin-top:1.25rem;padding:1rem 1.1rem;
  background:var(--c-ground);border:1px solid var(--c-line);
}
.check__first .check__n{color:var(--c-gold);display:block;margin-bottom:.45rem}
.check__first p{font-size:var(--t-sm);line-height:1.55;color:var(--c-ink);overflow-wrap:break-word}
.check__note{font-size:var(--t-xs);color:var(--c-ink-3);line-height:1.55;margin-top:.9rem;max-width:64ch}
.check__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;margin-top:1.35rem}
.check__acts .btn{max-width:100%}

/* — Reduzierte Bewegung: nur direkte Zustandswechsel — */
@media (prefers-reduced-motion:reduce){
  .check__stage,
  .check__panel,.check__panel[data-on="true"],
  .check__bar i,.check__opt,.check__opt::before,
  .check__chip,.check__back,.check__back svg,.check__area svg{
    transition:none!important;
  }
  .check__panel{transform:none}
}

/* — Schmale Viewports — */
@media (max-width:719px){
  .check{padding:clamp(1rem,4vw,1.35rem)}
  .check__hint{margin-left:0;width:100%}
  .check__acts .btn{width:100%}
}
@media (max-width:400px){
  .check__opt{padding:.85rem .8rem;gap:.6rem}
  .check__stage{min-height:20rem}
}