/* IQ-Check - zurueckhaltendes Layout, ein Akzent (#10A595), viel Weissraum.
   Bewusst ohne Framework: die Testseite soll auch bei schwacher Verbindung
   sofort stehen (Abnahmekriterium 8, Lighthouse >= 90). */
:root{
  --ak:#10A595; --ak-d:#0B7E72; --ink:#142826; --muted:#5b6b68; --line:#e2ebea;
  --bg:#f7fbfa; --card:#ffffff; --warn:#9a2424;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ---------- Kopf / Fuss ---------- */
.iq-head{display:flex;align-items:center;gap:20px;padding:14px 22px;background:#fff;border-bottom:1px solid var(--line)}
.iq-logo{text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:-.02em;font-size:18px}
.iq-logo span{color:var(--ak)}
.iq-head nav{margin-left:auto;display:flex;gap:18px}
.iq-head nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.iq-head nav a:hover{color:var(--ak-d)}
.iq-foot{max-width:820px;margin:56px auto 40px;padding:0 20px;color:var(--muted);font-size:12.5px;text-align:center}
.iq-foot .disclaimer{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 14px;margin:0 0 12px;line-height:1.5}
.iq-foot .links a{color:var(--muted)}
.iq-foot .anbieter{margin-top:8px;opacity:.85}

/* ---------- Grundbausteine ---------- */
.wrap{max-width:820px;margin:0 auto;padding:34px 20px 0}
.wrap.weit{max-width:1000px}
h1{font-size:31px;line-height:1.22;letter-spacing:-.02em;margin:0 0 10px;font-weight:800}
h2{font-size:20px;margin:34px 0 8px;letter-spacing:-.01em}
h3{font-size:16px;margin:22px 0 6px}
p.lead{font-size:17.5px;color:var(--muted);margin:0 0 22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:0 0 18px}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.btn{display:inline-block;background:var(--ak);color:#fff;border:0;border-radius:10px;padding:13px 24px;
     font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;font-family:inherit}
.btn:hover{background:var(--ak-d)}
.btn:disabled{opacity:.5;cursor:default}
.btn.sec{background:#eef7f5;color:var(--ak-d);border:1px solid #bfe0d9}
.btn.wide{width:100%;text-align:center}
.hinweis{background:#f0fdfa;border:1px solid #99f6e4;color:#115e59;border-radius:12px;padding:12px 15px;font-size:14px;margin:0 0 16px}
.warnung{background:#fef2f2;border:1px solid #fecaca;color:var(--warn);border-radius:12px;padding:12px 15px;font-size:14px;margin:0 0 16px}
.fehler{color:var(--warn);font-size:14px;margin:8px 0 0}
.hidden{display:none!important}
ul.check{list-style:none;padding:0;margin:14px 0}
ul.check li{padding:6px 0 6px 26px;position:relative;font-size:15px}
ul.check li:before{content:"·";position:absolute;left:8px;top:4px;color:var(--ak);font-weight:800;font-size:20px}
table.fakten{width:100%;border-collapse:collapse;font-size:14.5px;margin:6px 0}
table.fakten th,table.fakten td{text-align:left;padding:7px 4px;border-bottom:1px solid var(--line);vertical-align:top}
table.fakten th{color:var(--muted);font-weight:600;width:44%}

/* ---------- Testoberflaeche ---------- */
.testbar{position:sticky;top:0;z-index:5;background:rgba(247,251,250,.95);backdrop-filter:blur(6px);
         border-bottom:1px solid var(--line);padding:10px 20px}
.testbar .inner{max-width:820px;margin:0 auto;display:flex;align-items:center;gap:14px;font-size:13.5px;color:var(--muted)}
.testbar .fort{flex:1;height:6px;background:#e7f0ee;border-radius:99px;overflow:hidden}
.testbar .fort i{display:block;height:100%;background:var(--ak);width:0;transition:width .25s}
.testbar .zeit{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.testbar .zeit.knapp{color:var(--warn)}
.skala{font-weight:700;color:var(--ak-d)}
.frage{font-size:19px;font-weight:600;margin:0 0 18px;line-height:1.4}

.matrix3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:330px;margin:0 auto 6px}
.matrix3 .mz{aspect-ratio:1/1;background:#fff;border-radius:10px}
.netz{max-width:330px;margin:0 auto}
.reihe{font-size:23px;letter-spacing:.02em;text-align:center;margin:10px 0 4px;font-variant-numeric:tabular-nums}
.reihe .sep{color:#b8ccc8;margin:0 7px}
.reihe .q{color:var(--ak);font-weight:800}
.analogie{font-size:21px;text-align:center;margin:10px 0;font-weight:600;letter-spacing:.01em}
.memfrage{display:flex;justify-content:center;margin:6px 0 2px}
.mempairs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:14px 0}
.mempair{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1px solid var(--line);
         border-radius:12px;padding:10px 14px;min-width:74px}
.mempair .mn{font-size:22px;font-weight:800;color:var(--ak-d);font-variant-numeric:tabular-nums}
.merkzeit{text-align:center;font-size:14px;color:var(--muted);margin:2px 0 0}
.merkzeit b{color:var(--ak-d);font-variant-numeric:tabular-nums}

.opts{display:grid;gap:10px;margin:20px 0 0}
.opts.svg{grid-template-columns:repeat(3,1fr)}
.opts.zahl{grid-template-columns:repeat(3,1fr)}
.opts.text{grid-template-columns:1fr}
.opt{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;
     font-family:inherit;font-size:16px;color:var(--ink);text-align:center;transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--ak)}
.opt.sel{border-color:var(--ak);background:#eef7f5}
.opts.svg .opt{padding:8px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.opts.svg .opt svg{width:100%;height:100%}
.opts.zahl .opt{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;padding:14px 10px}
.opts.text .opt{text-align:left;padding:13px 16px;font-size:15.5px}
.testaktion{display:flex;gap:10px;align-items:center;margin:22px 0 0}
.testaktion .btn{flex:1}

/* ---------- Ergebnis ---------- */
.wert{font-size:64px;font-weight:200;letter-spacing:-.03em;line-height:1;color:var(--ak-d);font-variant-numeric:tabular-nums}
.wertzeile{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.perc{font-size:15px;color:var(--muted)}
.normhinweis{border-left:3px solid var(--ak);background:#f3faf9;padding:11px 15px;border-radius:0 10px 10px 0;
             font-size:14px;color:var(--ink);margin:14px 0 0}
.bar{margin:0 0 14px}
.bar .bl{display:flex;justify-content:space-between;font-size:14px;margin:0 0 5px}
.bar .bl b{font-variant-numeric:tabular-nums;color:var(--ak-d)}
.bar .bl .lock{color:#b8ccc8}
.btrack{height:9px;background:#e7f0ee;border-radius:99px;overflow:hidden}
.bfill{height:100%;background:var(--ak);border-radius:99px}
.bfill.placeholder{width:100%;background:repeating-linear-gradient(90deg,#dfe9e7 0 9px,#e9f1ef 9px 18px)}
.bar.locked .bl span{color:var(--muted)}
.paywall{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff,#f3faf9);border-radius:16px;padding:24px;margin:20px 0}
.preis{font-size:30px;font-weight:800;letter-spacing:-.02em}
.preis small{font-size:14px;font-weight:500;color:var(--muted)}
.report h2{font-size:18px;margin:24px 0 6px}
.report p{margin:0 0 12px}
.aihinweis{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;margin-top:18px}

/* ---------- Formular ---------- */
label.fld{display:block;margin:0 0 14px}
label.fld span{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin:0 0 5px}
input[type=text],input[type=email]{width:100%;padding:11px 13px;border:1px solid #cfdedb;border-radius:9px;
  font-size:15.5px;font-family:inherit;background:#fff;color:var(--ink)}
input[type=text]:focus,input[type=email]:focus{outline:2px solid #bfe0d9;border-color:var(--ak)}
label.cb{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:0 0 14px;line-height:1.5;cursor:pointer}
label.cb input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--ak)}
.rechnung{font-size:14px}
.rechnung .zeile{display:flex;justify-content:space-between;padding:4px 0}
.rechnung .summe{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-weight:700}

@media(max-width:560px){
  h1{font-size:25px}
  .wrap{padding:24px 16px 0}
  .card{padding:18px 16px}
  .opts.svg,.opts.zahl{grid-template-columns:repeat(2,1fr)}
  .wert{font-size:52px}
}