/* IQ-Analyse – Kognitiver Schnelltest
   Heller Stil, konsistent mit main.css + matoki.css (gws_v1).
   Open Sans, Grün-Akzent (#7bbb3c), weiße Karten, radius 1rem/20px.
   Quiz-spezifische Elemente unter #iq-app. Das Matoki-Formular wird von
   matoki.css gestylt – hier nicht überschrieben. */
:root{
  --green:#7bbb3c;
  --green-hover:#69a830;
  --green-deep:#4f8a26;
  --green-soft:#eef6e4;
  --ink:#2c2c2c;
  --text:#444;
  --muted:#7a7f87;
  --faint:#9aa0a8;
  --line:#e3e6e2;
  --surface:#fff;
  --surface-2:#f5f6f3;
  --surface-3:#ececec;
  --danger:#d9534f;
  --gold:#e0a92e;
  --r-card:20px;
  --r:1rem;
  --r-sm:10px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* Heller Hintergrund (überschreibt das Produktbild aus main.css .content).
   Flex-Column: Inhalt vertikal zentriert, Footer klebt am Viewport-Boden. */
.iq-content{
  background-image:
    radial-gradient(60% 50% at 50% 0%, #ffffff, rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#eef3ea 0%,#e4ece0 40%,#dde7d8 100%) !important;
  background-attachment:scroll !important;
  min-height:100vh;
  padding-bottom:0;
  display:flex;
  flex-direction:column;
}

/* Mittige Hülle: nimmt den freien Raum, zentriert den Test vertikal + horizontal */
.iq-shell{
  flex:1 0 auto;
  width:100%;
  max-width:680px;
  margin-inline:auto;
  padding:26px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Footer unten am Viewport (bzw. unter langem Inhalt) */
.iq-content > .footer{flex-shrink:0}

/* Topbar */
.iq-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;color:var(--ink)}
.iq-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px}
.iq-brand .mark{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--green);color:#fff}
.iq-brand .mark svg{width:18px;height:18px}
.iq-brand small{color:var(--muted);font-weight:400;font-size:12.5px}
.iq-secure{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.iq-secure svg{width:14px;height:14px}

/* Karte: nutzt .form + .form-header + .matoki aus main.css.
   Hier nur Feinschliff. */
.iq-shell .form{max-width:none;margin:0 auto}
.iq-shell .form-header{background:var(--green);}
.iq-shell .form-header .form-headline{color:#fff}
.iq-shell .matoki{min-height:0;padding:30px 28px 34px}

/* Screens */
.iq-screen{display:none;animation:iq-rise .45s var(--ease) both}
.iq-screen.active{display:block}
@keyframes iq-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Eyebrow */
.iq-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);font-weight:700;padding:5px 11px;border-radius:100px;background:var(--green-soft)}
.iq-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:iq-pulse 1.8s infinite}
@keyframes iq-pulse{0%,100%{opacity:1}50%{opacity:.3}}

#iq-app h1{font-family:'Open Sans',sans-serif;font-weight:800;font-size:clamp(1.8rem,5.5vw,2.5rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink);margin:16px 0 12px}
#iq-app h1 em{font-style:normal;color:var(--green)}
.iq-lead{color:var(--text);font-size:15.5px;line-height:1.55;max-width:46ch}

/* Stats */
.iq-stats{display:flex;margin:22px 0 26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.iq-stat{flex:1;padding:15px 10px;text-align:center;border-right:1px solid var(--line)}
.iq-stat:last-child{border-right:0}
.iq-stat b{display:block;font-size:22px;font-weight:800;color:var(--green-deep);line-height:1}
.iq-stat span{font-size:11px;color:var(--faint);letter-spacing:.04em;text-transform:uppercase;margin-top:6px;display:block}

/* Buttons */
.iq-btn{appearance:none;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:1.05rem;border-radius:var(--r);padding:0 24px;height:50px;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;transition:background .2s,transform .2s var(--ease)}
.iq-btn-primary{background:var(--green);color:#fff}
.iq-btn-primary:hover{background:var(--green-hover);transform:translateY(-1px)}
.iq-btn-ghost{background:#fff;color:var(--text);border:1px solid var(--line)}
.iq-btn-ghost:hover{border-color:var(--muted);color:var(--ink)}
.iq-btn .arrow{transition:transform .2s var(--ease)}
.iq-btn-primary:hover .arrow{transform:translateX(3px)}
.iq-microcopy{margin-top:12px;text-align:center;font-size:12.5px;color:var(--faint)}

/* Progress */
.iq-progress{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.iq-progress .track{flex:1;height:8px;border-radius:100px;background:#e6e9e3;overflow:hidden}
.iq-progress .fill{height:100%;width:0;border-radius:100px;background:var(--green);transition:width .5s var(--ease)}
.iq-progress .count{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}

.iq-kind{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.iq-kind svg{width:15px;height:15px}
.iq-qtext{font-family:'Open Sans',sans-serif;font-size:clamp(1.35rem,4vw,1.7rem);font-weight:800;line-height:1.2;color:var(--ink);margin-bottom:6px}
.iq-qhint{color:var(--muted);font-size:14px;margin-bottom:20px}

/* Options */
.iq-options{display:grid;gap:10px}
.iq-opt{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:15px 16px;cursor:pointer;font-family:inherit;font-size:16px;color:var(--ink);display:flex;align-items:center;gap:13px;transition:all .18s var(--ease)}
.iq-opt .key{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);font-size:13px;font-weight:700;color:var(--muted);transition:all .18s}
.iq-opt:hover{border-color:var(--green);background:var(--green-soft);transform:translateX(2px)}
.iq-opt:hover .key{background:var(--green);color:#fff}
.iq-opt.correct{border-color:var(--green);background:var(--green-soft)}
.iq-opt.wrong{border-color:var(--danger);background:#fbeceb}
.iq-opt.correct .key{background:var(--green);color:#fff}
.iq-opt.wrong .key{background:var(--danger);color:#fff}

/* Memory grid */
.iq-pad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:4px auto 0;max-width:320px}
.iq-pad{aspect-ratio:1;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface-2);cursor:pointer;transition:all .12s;position:relative}
.iq-pad::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--green);opacity:0;transition:opacity .1s}
.iq-pad.lit::after{opacity:1}
.iq-pad.lit{transform:scale(.96);box-shadow:0 6px 18px rgba(123,187,60,.45)}
.iq-pad.tapped::after{opacity:.45}
.iq-game-status{text-align:center;color:var(--muted);font-size:14px;margin:18px 0 4px;min-height:20px;font-weight:600}

/* Visual search */
.iq-vs-grid{display:grid;gap:9px;margin:4px auto 0;justify-content:center}
.iq-vs-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--surface-2);border:1.5px solid var(--line);cursor:pointer;font-size:22px;color:var(--muted);transition:all .12s;user-select:none}
.iq-vs-cell:hover{border-color:var(--green);color:var(--green-deep);transform:scale(1.05);background:var(--green-soft)}
.iq-vs-cell.hit{border-color:var(--green);background:var(--green-soft);color:var(--green-deep)}
.iq-vs-cell.miss{border-color:var(--danger);background:#fbeceb}

/* Analyzing */
.iq-analyze{text-align:center;padding:10px 0}
.iq-scan{width:112px;height:112px;margin:4px auto 22px;position:relative}
.iq-scan svg{width:100%;height:100%;transform:rotate(-90deg)}
.iq-scan .ring-bg{fill:none;stroke:#e6e9e3;stroke-width:9}
.iq-scan .ring-fg{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-dasharray:339;stroke-dashoffset:339;transition:stroke-dashoffset .4s linear}
.iq-scan .pct{position:absolute;inset:0;display:grid;place-items:center;font-size:27px;font-weight:800;color:var(--ink)}
#iq-app .iq-analyze h2{font-weight:800;font-size:1.4rem;color:var(--ink);margin-bottom:16px}
.iq-steps{text-align:left;max-width:300px;margin:0 auto;display:grid;gap:11px}
.iq-astep{display:flex;align-items:center;gap:11px;color:var(--faint);font-size:14px;transition:color .3s;font-weight:600}
.iq-astep .ic{width:22px;height:22px;flex:none;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;transition:all .3s}
.iq-astep .ic svg{width:12px;height:12px;opacity:0;transition:opacity .3s}
.iq-astep.done{color:var(--ink)}
.iq-astep.done .ic{background:var(--green);border-color:var(--green)}
.iq-astep.done .ic svg{opacity:1;color:#fff}

/* Gate */
.iq-lock-badge{width:58px;height:58px;margin:0 auto 16px;border-radius:16px;display:grid;place-items:center;background:var(--green-soft);color:var(--green-deep);position:relative}
.iq-lock-badge svg{width:26px;height:26px}
.iq-lock-badge::after{content:"";position:absolute;inset:-5px;border-radius:20px;border:1.5px solid rgba(123,187,60,.3);animation:iq-halo 2.4s infinite}
@keyframes iq-halo{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.22);opacity:0}}
.iq-gate-result{text-align:center;margin:2px 0 20px}
.iq-gate-result .ready{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);font-weight:700}
.iq-blurwrap{font-size:66px;font-weight:800;line-height:1;margin:6px 0 6px;color:var(--green-deep);position:relative;display:inline-block}
.iq-blurwrap .val{filter:blur(10px);opacity:.75;user-select:none}
.iq-gate-result small{display:block;color:var(--muted);font-size:13.5px}
.iq-benefits{display:grid;gap:10px;margin:18px 0 22px;padding:18px;background:var(--surface-2);border-radius:var(--r-sm)}
.iq-benefit{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--text)}
.iq-benefit .ck{width:21px;height:21px;flex:none;border-radius:50%;background:var(--green);display:grid;place-items:center;color:#fff}
.iq-benefit .ck svg{width:12px;height:12px}
.iq-benefit b{color:var(--ink);font-weight:700}
.iq-gate-cta{text-align:center;font-weight:800;font-size:1.05rem;color:var(--ink);margin-bottom:14px}

/* Result / Zertifikat */
.iq-cert{text-align:center}
.iq-cert .frame{border:2px solid var(--green);border-radius:var(--r-card);padding:30px 22px;background:linear-gradient(180deg,var(--green-soft),#fff)}
.iq-cert .label{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);font-weight:700}
.iq-cert .score{font-size:84px;font-weight:800;line-height:.95;color:var(--green-deep);margin:8px 0 2px;font-variant-numeric:tabular-nums}
.iq-cert .tier{font-size:20px;font-weight:800;color:var(--ink)}
.iq-cert .desc{color:var(--text);font-size:14px;line-height:1.55;margin:12px auto 0;max-width:40ch}
.iq-bell{display:flex;align-items:flex-end;gap:4px;justify-content:center;height:58px;margin:22px 0 6px}
.iq-bell i{width:9px;border-radius:3px 3px 0 0;background:#dfe4da;transition:background .3s}
.iq-bell i.you{background:var(--green);box-shadow:0 4px 14px rgba(123,187,60,.5)}
.iq-cert .pctline{font-size:13px;color:var(--muted);margin-top:6px;font-weight:600}
.iq-confirm{margin-top:20px;text-align:left}
.iq-confirm h3{font-weight:800;font-size:1.1rem;color:var(--ink);margin-bottom:5px}
.iq-confirm p{color:var(--muted);font-size:13.5px;margin-bottom:14px}

/* Footnote unter der Karte */
.iq-disclaimer{text-align:center;color:var(--muted);font-size:11.5px;margin:16px auto 0;max-width:540px;line-height:1.5}

@media screen and (max-width:520px){
  .iq-shell .matoki{padding:24px 18px 28px}
  .iq-shell{padding:0 12px}
  .iq-cert .score{font-size:70px}
}