/* ============================================================
   quiz.css  ·  Solar-Check Komponente
   Passt zum Dark-Theme (#071423), Manrope/Inter, Amber-Akzent.
   In index.html einbinden:  <link rel="stylesheet" href="assets/css/quiz.css">
   ============================================================ */

.sc-section{
  /* dunkler Abschnitt mit dezentem Solar-Glow */
  background:
    radial-gradient(900px 480px at 82% -10%, rgba(81,163,86,.16), transparent 60%),
    radial-gradient(700px 420px at 0% 115%, rgba(81,163,86,.06), transparent 55%),
    #071423;
  padding:92px 0;
}

/* Intro-Kopf über der Karte */
.sc-intro{max-width:640px;margin:0 auto 40px;text-align:center}
.sc-eyebrow{
  display:inline-block;font-family:'Inter',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.08em;color:#6FBF7C;
  background:rgba(81,163,86,.12);padding:.45rem 1rem;border-radius:999px;margin-bottom:18px;
}
.sc-heading{
  font-family:'Manrope',sans-serif;font-weight:800;color:#fff;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.14;letter-spacing:-.02em;margin-bottom:14px;
}
.sc-lede{color:#9fb2c6;font-size:1.08rem;line-height:1.6}

/* ---- Karte (hell, „schwebt" auf dunklem Abschnitt) ---- */
.sc-card{
  --sc-navy:#0C1E36; --sc-amber:#51A356; --sc-amber-d:#2A874A;
  --sc-ink:#0C1E36; --sc-muted:#61728a; --sc-line:#e6ebf2; --sc-paper:#f5f8fc; --sc-ok:#1FA971;
  width:100%;max-width:560px;margin:0 auto;background:#fff;border-radius:26px;
  box-shadow:0 50px 100px -45px rgba(0,0,0,.65);overflow:hidden;color:var(--sc-ink);
  font-family:'Inter',sans-serif;
}
.sc-card button{font-family:inherit;cursor:pointer;border:0;background:none}

/* Kopf: Marke + Fortschritt */
.sc-head{padding:20px 26px 0}
.sc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sc-brand{display:flex;align-items:center;gap:.5rem;font-family:'Manrope',sans-serif;font-weight:800;font-size:1.1rem;color:var(--sc-navy)}
.sc-badge{font-size:.74rem;font-weight:600;color:var(--sc-amber-d);background:rgba(81,163,86,.12);padding:.35rem .7rem;border-radius:999px;display:flex;align-items:center;gap:5px}
.sc-bar{height:7px;background:var(--sc-paper);border-radius:999px;overflow:hidden}
.sc-bar>i{display:block;height:100%;width:8%;border-radius:999px;background:linear-gradient(90deg,var(--sc-amber),var(--sc-amber-d));transition:width .45s cubic-bezier(.4,0,.2,1)}
.sc-steplbl{font-family:'Manrope',sans-serif;font-weight:600;font-size:.76rem;color:var(--sc-muted);margin:10px 2px 0}

/* Body */
.sc-bodywrap{padding:22px 26px 8px}
.sc-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.5rem;line-height:1.18;letter-spacing:-.02em;margin-bottom:6px}
.sc-sub{color:var(--sc-muted);font-size:.96rem;margin-bottom:22px}

.sc-opts{display:grid;gap:11px}
.sc-opts.two{grid-template-columns:1fr 1fr}
.sc-opt{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  padding:16px 18px;border:1.8px solid var(--sc-line);border-radius:16px;background:#fff;
  transition:border-color .15s,background .15s,transform .12s;
}
.sc-opt:hover{border-color:var(--sc-amber);transform:translateY(-2px)}
.sc-opt:focus-visible{outline:3px solid rgba(81,163,86,.4);outline-offset:2px}
.sc-opt.sel{border-color:var(--sc-amber);background:rgba(81,163,86,.08)}
.sc-opt .ic{font-size:1.5rem;flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;background:var(--sc-paper);border-radius:11px}
.sc-opt.sel .ic{background:rgba(81,163,86,.18)}
.sc-opt .txt b{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem}
.sc-opt .txt small{color:var(--sc-muted);font-size:.84rem}
.sc-opts.two .sc-opt{flex-direction:column;align-items:flex-start;gap:8px}

/* Inputs */
.sc-field{margin-bottom:14px}
.sc-field label{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:.85rem;margin-bottom:6px}
.sc-field input{
  width:100%;padding:.95rem 1.05rem;border:1.8px solid var(--sc-line);border-radius:13px;
  font-family:'Inter',sans-serif;font-size:1rem;background:var(--sc-paper);transition:border-color .15s,background .15s;
}
.sc-field input:focus{outline:none;border-color:var(--sc-amber);background:#fff}
.sc-plz{max-width:200px}

/* Foot */
.sc-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 26px 22px;margin-top:6px}
.sc-back{color:var(--sc-muted);font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:6px}
.sc-back:hover{color:var(--sc-navy)}
.sc-back[hidden]{visibility:hidden}
.sc-trust{color:var(--sc-muted);font-size:.8rem;display:flex;align-items:center;gap:6px}

.sc-card .sc-cta{
  background:linear-gradient(100deg,var(--sc-amber),var(--sc-amber-d));color:var(--sc-navy);
  font-family:'Manrope',sans-serif;font-weight:800;font-size:1rem;padding:1rem 1.7rem;border-radius:14px;width:100%;
  box-shadow:0 14px 30px -12px rgba(81,163,86,.75);transition:transform .15s;
}
.sc-card .sc-cta:hover{transform:translateY(-2px)}
.sc-card .sc-cta[disabled]{background:#d8ebdd;color:#5a7d64;box-shadow:none;cursor:not-allowed;transform:none}

/* Ersparnis-Interstitial */
.sc-reveal{text-align:center;padding:14px 6px 4px}
.sc-reveal .em{font-size:2.6rem;margin-bottom:8px}
.sc-savenum{font-family:'Manrope',sans-serif;font-weight:800;font-size:3rem;line-height:1;color:var(--sc-amber-d);letter-spacing:-.02em}
.sc-savelbl{color:var(--sc-muted);margin:8px 0 4px}
.sc-fine{font-size:.78rem;color:#9aa8ba;margin-top:10px}

/* Erfolg */
.sc-done{text-align:center;padding:30px 10px 10px}
.sc-check{width:78px;height:78px;border-radius:50%;background:rgba(31,169,113,.12);display:grid;place-items:center;margin:0 auto 18px;animation:sc-pop .5s cubic-bezier(.2,1.4,.4,1)}
.sc-check svg{width:40px;height:40px}
.sc-check path{stroke-dasharray:30;stroke-dashoffset:30;animation:sc-draw .5s .2s forwards}
@keyframes sc-draw{to{stroke-dashoffset:0}}
@keyframes sc-pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.sc-done h3{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.7rem;margin-bottom:10px;color:var(--sc-navy)}
.sc-done p{color:var(--sc-muted);max-width:400px;margin:0 auto 8px}
.sc-done .region{color:var(--sc-navy);font-weight:600}

.sc-fade{animation:sc-fadein .35s ease}
@keyframes sc-fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:520px){
  .sc-section{padding:64px 0}
  .sc-title{font-size:1.3rem}
  .sc-opts.two{grid-template-columns:1fr}
  .sc-savenum{font-size:2.4rem}
}
@media(prefers-reduced-motion:reduce){
  .sc-card *,.sc-section *{animation:none!important;transition:none!important}
}

/* ---- Utility classes (replace former inline styles; quiz visually unchanged) ---- */
.sc-mb-sm{margin-bottom:12px}
.sc-mt-md{margin-top:18px}
.sc-center{text-align:center}
.sc-note{margin-top:14px;font-size:.85rem;color:#9aa8ba}