:root{
  --indigo:#4f56e8;
  --indigo-2:#6b5cf0;
  --indigo-soft:#5b62ff;
  --ink:#0b0d17;
  --muted:#5a6076;
  --card-1:#dde3fb;
  --card-2:#eceffe;
  --white:#fff;
  --line:#e6e8f0;
  --ok:#18a86b;
  --bad:#e04b4b;
  --radius:28px;
  --shadow:0 10px 30px rgba(31,38,92,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Segoe UI Variable Display","Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:#fbfbfd;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}

/* ---------- header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 34px;
  background:var(--white);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.logo{
  font-size:38px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;line-height:1;
}
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:14px;
  background:none;border:0;cursor:pointer;
  font-size:20px;color:var(--ink);padding:6px 4px;border-radius:10px;
}
.lang-btn:hover{color:var(--indigo)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;min-width:150px;
}
.lang-menu button{
  display:block;width:100%;text-align:left;background:none;border:0;
  padding:12px 18px;font-size:16px;cursor:pointer;color:var(--ink);
}
.lang-menu button:hover{background:#f2f4ff;color:var(--indigo)}

/* ---------- shared card ---------- */
main{padding:44px 20px 80px}
.card{
  position:relative;overflow:hidden;
  max-width:820px;margin:0 auto;
  border-radius:var(--radius);
  background:linear-gradient(155deg,var(--card-1) 0%,var(--card-2) 55%,#f4f5ff 100%);
  padding:44px 40px 46px;
  box-shadow:var(--shadow);
}

.dots-deco{
  position:absolute;top:56px;right:36px;width:150px;height:90px;opacity:.5;
  background-image:radial-gradient(#8f9bd8 1.6px,transparent 1.7px);
  background-size:18px 18px;
  pointer-events:none;
}

/* Direkteinstieg aus der Werbung (/start bzw. start.freyiq.com): der
   Startbildschirm wird gar nicht erst gezeigt. Muss über CSS laufen und
   nicht erst über iq.js — sonst blitzt er auf, solange die js-Dateien
   noch laden. Gesetzt wird die Klasse im Kopf von iq-test.html. */
html.direct-start #screen-start{display:none}

/* ---------- hero ---------- */
.hero{padding-top:52px}
.brain{
  position:absolute;left:50%;top:118px;transform:translateX(-50%);
  width:min(640px,92%);pointer-events:none;
}
.brain svg{width:100%;height:auto;display:block}
.hero-inner{position:relative;z-index:2}
.hero-title{
  margin:0 0 210px;text-align:center;
  font-size:clamp(38px,6.4vw,62px);font-weight:800;line-height:1.06;letter-spacing:-.02em;
}
.hero-title .accent{color:var(--indigo-soft)}

.bullets{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:18px}
.bullets li{
  display:flex;align-items:center;gap:22px;
  background:var(--white);border-radius:999px;
  padding:20px 30px;
  font-size:clamp(16px,2.1vw,21px);line-height:1.3;
  box-shadow:0 2px 10px rgba(31,38,92,.05);
}
.check{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  background:var(--indigo);position:relative;
}
.check::after{
  content:"";position:absolute;left:12px;top:9px;
  width:8px;height:15px;border:solid #fff;border-width:0 3px 3px 0;
  transform:rotate(42deg);
}

/* Preis- und Umfangshinweis über dem Startknopf. Bewusst ruhig gehalten —
   er soll den Knopf nicht überschreien, aber auch nicht zu übersehen sein:
   eigene weisse Fläche, linker Balken in Indigo, Preiszeile in voller
   Textgrösse statt Kleingedrucktes. */
.start-note{
  display:flex;flex-direction:column;gap:6px;
  margin:0 0 4px;padding:18px 24px;
  border-radius:20px;border-left:5px solid var(--indigo);
  background:var(--white);
  box-shadow:0 2px 10px rgba(31,38,92,.05);
  text-align:left;
}
.start-note-label{
  font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--indigo);
}
.start-note-facts{font-size:clamp(15px,1.9vw,18px);font-weight:700;line-height:1.35}
.start-note-price{font-size:clamp(14px,1.7vw,16px);line-height:1.5;color:var(--muted)}

/* Dieselbe Angabe für den Direkteinstieg aus der Werbung, nur schlank:
   über der Aufgabe, eine Zeile, ohne vom Test abzulenken. */
.quiz-note{
  margin:0 0 18px;padding:10px 16px;
  border-radius:999px;background:var(--white);
  font-size:14px;line-height:1.4;color:var(--muted);text-align:center;
  box-shadow:0 2px 10px rgba(31,38,92,.05);
}
.quiz-note[hidden]{display:none}

.cta{
  width:100%;margin-top:12px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  border:0;border-radius:999px;cursor:pointer;
  padding:26px 20px;
  font-size:clamp(19px,2.4vw,24px);font-weight:700;color:#fff;
  background:linear-gradient(100deg,var(--indigo) 0%,var(--indigo-2) 100%);
  box-shadow:0 12px 26px rgba(79,86,232,.32);
  transition:transform .12s ease,box-shadow .2s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(79,86,232,.4)}
.cta:active{transform:translateY(0)}
.sparkle{width:26px;height:26px;fill:#fff}

/* ---------- quiz ---------- */
.quiz{background:linear-gradient(160deg,#e7eafd 0%,#f3f4ff 60%,#fafaff 100%)}
.quiz-top{margin-bottom:26px}
.quiz-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:15px;font-weight:600;color:var(--muted);margin-bottom:10px;
}
/* Art der Aufgabe und Zähler teilen sich eine Reihe. Der automatische Rand
   rechts schiebt den Zähler ans Ende, egal wie kurz die Art ist. */
.quiz-meta .q-kind{
  margin:0 auto 0 0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.q-counter{flex:0 0 auto;font-variant-numeric:tabular-nums}

/* Fortschritt und Countdown in einer Zeile: links, wie weit man ist,
   rechts, wie lange die Frage noch läuft. */
.quiz-time{display:flex;align-items:center;gap:14px}
.quiz-time .progress{flex:1 1 auto}
.timer{
  flex:0 0 auto;min-width:56px;text-align:right;
  font-size:17px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.timer.warn{color:#c9781a}
.timer.danger{color:var(--bad);animation:timer-pulse .9s ease-in-out infinite}
@keyframes timer-pulse{50%{opacity:.4}}

/* „Zeit abgelaufen" liegt über der Karte, damit es nichts verschiebt.
   Eingeblendet von timeUp() über die Klasse .timeout am Fragebild. */
.q-timeout{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.92);
  margin:0;padding:13px 26px;border-radius:999px;z-index:5;
  background:rgba(11,13,23,.86);color:#fff;
  font-size:17px;font-weight:700;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.quiz.timeout .q-timeout{opacity:1;transform:translate(-50%,-50%) scale(1)}
.quiz.timeout .options{opacity:.4}

/* Eine Frage zurück. Bleibt bei Frage 1 als Lücke stehen (visibility statt
   display), damit die Reihe daneben nicht springt. */
.q-back{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin:-4px 8px -4px -6px;padding:0;
  border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;
}
.q-back svg{width:20px;height:20px}
.q-back:hover{background:#dfe4f7;color:var(--indigo)}
.q-back.off{visibility:hidden}
.progress{height:8px;border-radius:999px;background:#d6daf3;overflow:hidden}
.progress-bar{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--indigo),var(--indigo-2));
  transition:width .25s ease;
}
/* Der Balken im IQ-Test läuft rückwärts: er zeigt die restliche Zeit und
   wird alle 200 ms neu gesetzt. Deshalb linear und knapp so lang wie der
   Takt — mit der weichen Kurve oben würde er sichtbar ruckeln. */
.time-bar{width:100%;transition:width .22s linear}
.time-bar.warn{background:linear-gradient(90deg,#e0912f,#c9781a)}
.time-bar.danger{background:linear-gradient(90deg,#e04b4b,#c93a3a)}
.q-kind{
  margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--indigo);
}
.q-text{margin:0 0 22px;font-size:clamp(20px,2.8vw,27px);font-weight:700;line-height:1.3}

.figure-wrap{
  background:var(--white);border-radius:20px;padding:22px;
  display:flex;justify-content:center;align-items:center;
  margin-bottom:24px;box-shadow:0 2px 10px rgba(31,38,92,.05);
}
.figure-wrap:empty{display:none}
.figure-wrap svg{max-width:100%;height:auto;color:var(--ink)}
/* Zahlenreihe. flex-wrap ist die Sicherung: passt die Reihe auf einem
   schmalen Handy nicht in eine Zeile, bricht sie um, statt über den
   Kartenrand hinauszulaufen. Die Untergrenze der Schriftgröße lag bei
   24px — dadurch war die Reihe auf dem Handy breiter als die Karte. */
.figure-wrap .seq-text{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  width:100%;row-gap:6px;
  font-size:clamp(20px,5vw,38px);font-weight:700;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;text-align:center;
}
/* Der Trennpunkt hängt am Glied davor, damit er beim Umbruch nie allein
   am Zeilenanfang steht. */
.figure-wrap .seq-text > span:not(:last-child)::after{
  content:'·';margin:0 .42em;
}
.figure-wrap .seq-text .q{color:var(--bad)}

/* Die Zahl der Antworten wechselt je Aufgabe (4 oder 6) — iq.js hängt sie
   als Klasse opts-4 / opts-6 an. */
.options{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:0}
.options.opts-6{grid-template-columns:repeat(6,1fr)}
.options.text-opts{grid-template-columns:repeat(2,1fr)}
.options.text-opts.opts-6{grid-template-columns:repeat(3,1fr)}
/* Zwischen Antwort und nächster Frage liegen 260 ms (ADVANCE_DELAY in iq.js).
   In dieser Zeit soll nichts mehr auf Tipps reagieren — sichtbar bleibt die
   Karte, nur eben unbeteiligt. */
.options.locked{pointer-events:none}
.opt{
  background:var(--white);border:2px solid transparent;border-radius:18px;
  padding:16px;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:17px;font-weight:600;color:var(--ink);
  box-shadow:0 2px 10px rgba(31,38,92,.05);
  transition:border-color .12s ease,transform .12s ease;
}
.opt:hover{border-color:#b9c0f5;transform:translateY(-2px)}
/* Die Bestätigung muss in den 260 ms bis zur nächsten Frage ankommen —
   deshalb zusätzlich zum Rahmen ein Ring, der auch aus dem Augenwinkel
   und unter dem Daumen noch zu sehen ist. */
.opt.selected{
  border-color:var(--indigo);background:#f4f5ff;
  box-shadow:0 0 0 4px rgba(79,86,232,.16);
}
/* Die Antwortbilder passen alle in dasselbe 96er-Quadrat. Die Höhengrenze
   ist nötig, weil nicht jede Option quadratisch ist: eine hochkant stehende
   Form würde sonst dreimal so hoch wie eine liegende und die ganze
   Antwortreihe mit in die Höhe ziehen. */
.opt svg{width:100%;max-width:96px;max-height:96px;height:auto;color:var(--ink)}
.opt .tag{
  font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.1em;
}

.quiz-actions{display:flex;gap:14px}
.btn-primary,.btn-ghost{
  border-radius:999px;padding:16px 26px;font-size:17px;font-weight:700;cursor:pointer;
  border:0;transition:transform .12s ease,opacity .2s ease;
}
.btn-primary{
  flex:1;color:#fff;
  background:linear-gradient(100deg,var(--indigo),var(--indigo-2));
  box-shadow:0 10px 22px rgba(79,86,232,.28);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{background:var(--white);color:var(--indigo);box-shadow:0 2px 10px rgba(31,38,92,.05)}
.btn-ghost:hover{transform:translateY(-2px)}

/* ---------- bezahlseite ---------- */
.paywall{text-align:center}
.lock-badge{
  width:76px;height:76px;margin:4px auto 18px;border-radius:50%;
  background:var(--white);color:var(--indigo);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(31,38,92,.1);
}
.lock-badge svg{width:40px;height:40px}
.paywall-title{margin:0 0 8px;font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em}
.paywall-stats{margin:0 0 18px;font-size:17px;font-weight:600;color:var(--muted)}

/* Anteaser: der Bereich, in dem das Ergebnis liegt. Steht bewusst vor der
   Liste und vor dem Preis — er ist der Grund, überhaupt weiterzulesen. */
.teaser{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin:0 0 24px;padding:18px 20px 20px;border-radius:20px;
  background:var(--white);box-shadow:0 2px 12px rgba(31,38,92,.06);
}
.teaser-label{
  font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--indigo);
}
.teaser-range{
  font-size:clamp(36px,7vw,48px);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.teaser-note{margin-top:4px;max-width:360px;font-size:13px;line-height:1.5;color:var(--muted)}

.perk-list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:12px}
.perk-list li{
  display:flex;align-items:center;gap:16px;text-align:left;
  background:var(--white);border-radius:18px;padding:16px 22px;
  font-size:clamp(15px,1.9vw,17px);line-height:1.4;
  box-shadow:0 2px 10px rgba(31,38,92,.05);
}
.perk-list .check{width:28px;height:28px}
.perk-list .check::after{left:9px;top:6px;width:7px;height:13px;border-width:0 3px 3px 0}

.price-box{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  margin:0 0 20px;
}
.price{
  font-size:clamp(38px,6vw,52px);font-weight:800;
  letter-spacing:-.03em;line-height:1;color:var(--ink);
}
.price-note{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.paywall-error{margin:14px 0 0;font-size:15px;font-weight:600;color:var(--bad);min-height:20px}

/* ---------- Stripe-Overlay ----------
   Die Bezahlmaske von Stripe wird in dieses Fenster eingehängt, statt den
   Besucher auf eine fremde Seite zu schicken. */
.pay-modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(12px,4vh,48px) 14px;overflow-y:auto;
  background:rgba(11,13,23,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.pay-modal[hidden]{display:none}
.pay-modal-card{
  width:100%;max-width:560px;background:var(--white);
  border-radius:22px;box-shadow:0 24px 60px rgba(11,13,23,.3);overflow:hidden;
}
.pay-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 12px 16px 22px;border-bottom:1px solid var(--line);
  font-size:16px;font-weight:700;
}
.pay-modal-close{
  border:0;background:transparent;cursor:pointer;color:var(--muted);
  font-size:26px;line-height:1;padding:2px 10px;border-radius:10px;
}
.pay-modal-close:hover{background:#f1f2f8;color:var(--ink)}
.pay-modal-box{padding:10px 12px 16px;min-height:340px}
body.modal-open{overflow:hidden}

/* ---------- result ---------- */
.result{text-align:center}
.result-title{margin:0 0 8px;font-size:clamp(28px,4vw,40px);font-weight:800;letter-spacing:-.02em}
.score-ring{position:relative;width:230px;margin:18px auto 10px}
.score-ring svg{width:100%;height:auto;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:#d6daf3;stroke-width:14}
.ring-fg{
  fill:none;stroke:var(--indigo);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:540;stroke-dashoffset:540;
  transition:stroke-dashoffset 1s ease;
}
.score-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.iq-value{font-size:60px;font-weight:800;line-height:1;letter-spacing:-.03em}
.iq-label{font-size:14px;font-weight:600;color:var(--muted);margin-top:6px}
.result-summary{font-size:19px;font-weight:600;margin:6px 0 6px}
.result-band{font-size:16px;color:var(--muted);margin:0 0 24px}
.result-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.result-actions .btn-primary{flex:0 0 auto}

.review-list{margin-top:28px;text-align:left;display:flex;flex-direction:column;gap:10px}
.review-item{
  background:var(--white);border-radius:16px;padding:14px 18px;
  display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.45;
  box-shadow:0 2px 10px rgba(31,38,92,.05);
}
.review-item .mark{font-weight:800;flex:0 0 auto}
.review-item.ok .mark{color:var(--ok)}
.review-item.bad .mark{color:var(--bad)}
.review-part{
  margin:14px 0 2px;font-size:13px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--indigo);
}
.review-part:first-child{margin-top:0}
.review-item .rq{font-weight:700;display:block;margin-bottom:3px}
.review-item .ra{color:var(--muted)}
.disclaimer{margin:26px 0 0;font-size:13px;color:var(--muted);line-height:1.5}

.next-up{margin:24px 0 0;font-size:16px;color:var(--muted)}
.next-up a{color:var(--indigo);font-weight:700;text-decoration:none;margin-left:6px}
.next-up a:hover{text-decoration:underline}

/* ---------- homepage ---------- */
.home{max-width:900px;margin:0 auto}
.home-hero{max-width:none;text-align:center;padding:52px 40px 46px}
.home-hero .hero-title{margin-bottom:16px}
.home-sub{
  margin:0 auto;max-width:520px;
  font-size:clamp(16px,2.2vw,20px);line-height:1.5;color:#404866;
}
/* Was gratis ist und was nicht — steht direkt unter dem Untertitel, weil
   die Startseite sonst nirgends einen Preis nennt. */
.home-price{
  margin:14px auto 0;max-width:560px;
  padding:12px 20px;border-radius:16px;
  background:var(--white);box-shadow:0 2px 10px rgba(31,38,92,.05);
  font-size:clamp(13px,1.7vw,15px);line-height:1.5;color:var(--muted);
}
.section-title{
  max-width:900px;margin:44px auto 18px;padding:0 4px;
  font-size:22px;font-weight:800;letter-spacing:-.01em;
}
.test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
.test-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border-radius:22px;padding:26px 24px 24px;
  text-decoration:none;color:var(--ink);
  border:1px solid var(--line);box-shadow:0 2px 12px rgba(31,38,92,.05);
  transition:transform .14s ease,box-shadow .2s ease,border-color .2s ease;
}
a.test-card:hover{transform:translateY(-4px);border-color:#c3c9f7;box-shadow:0 14px 30px rgba(31,38,92,.12)}
.test-icon{
  width:62px;height:62px;border-radius:18px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
}
.test-icon svg{width:34px;height:34px}
.icon-iq{background:#e9ebff;color:#4f56e8}
.icon-pers{background:#eaf1ff;color:#3a72f0}
.icon-mem{background:#e8f6f0;color:#2fb283}
.icon-rea{background:#fff2e2;color:#e0912f}
.icon-eq{background:#ffeaf0;color:#e06a8b}
.test-card h3{margin:0 0 8px;font-size:21px;font-weight:800;letter-spacing:-.01em}
.test-card p{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--muted);flex:1}
.test-meta{font-size:13px;font-weight:700;color:#8a90a8;letter-spacing:.02em;margin-bottom:16px}
.test-go{
  align-self:flex-start;border-radius:999px;padding:11px 22px;
  font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(100deg,var(--indigo),var(--indigo-2));
}
.test-card.soon{opacity:.62;cursor:default}
.badge{
  position:absolute;top:18px;right:18px;
  background:#eef0f6;color:#6a7089;border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:700;
}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line);background:var(--white);
  padding:26px 34px;display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);
}
.site-footer nav{display:flex;gap:22px}
.site-footer a{color:var(--indigo);text-decoration:none;font-weight:600}
.site-footer a:hover{text-decoration:underline}

/* ---------- rechtstexte (impressum, datenschutz, rückerstattung) ----------
   Eigener Rahmen statt .card: der Farbverlauf der Karte ist für kurze
   Abschnitte gemacht, unter langem Fließtext wird er unruhig. Weiß liest
   sich ruhiger, die Zeilenbreite ist bewusst schmaler als die Karte. */
.legal{
  max-width:760px;margin:0 auto;
  background:var(--white);border-radius:var(--radius);
  padding:44px 44px 46px;box-shadow:var(--shadow);
}
.legal h1{
  margin:0 0 6px;font-size:clamp(28px,4vw,38px);font-weight:800;
  letter-spacing:-.025em;line-height:1.15;color:var(--ink);
}
.legal .updated{margin:0 0 30px;font-size:14px;font-weight:600;color:var(--muted)}
.legal h2{
  margin:34px 0 10px;font-size:20px;font-weight:800;
  letter-spacing:-.01em;color:var(--ink);
}
.legal p,.legal li{font-size:16px;line-height:1.65;color:#2b3049}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--indigo);font-weight:600}
.legal strong{color:var(--ink)}
.legal .box{
  background:#f4f5ff;border-radius:18px;padding:20px 24px;margin:0 0 18px;
}
.legal .box p:last-child{margin-bottom:0}
.legal .legal-nav{
  margin:36px 0 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;gap:22px;flex-wrap:wrap;font-size:15px;
}
/* Auffällig gelb markiert: hier fehlen noch echte Angaben. Absichtlich
   nicht zu übersehen — ein Impressum mit Platzhalter ist schlimmer als
   keines. Beim Ausfüllen das <span class="todo"> mit entfernen. */
.legal .todo{
  background:#fff3d0;border:2px dashed #d09a1e;border-radius:8px;
  padding:1px 9px;font-weight:700;color:#7d5800;
}

/* ---------- persönlichkeitstest ---------- */
.hero-pers .hero-title{margin-bottom:200px}
.pers-art{position:absolute;left:50%;top:126px;transform:translateX(-50%);width:min(560px,88%);pointer-events:none}
.pers-art svg{width:100%;height:auto;display:block}

.q-trait{font-weight:700}
.statement{margin:0 0 26px;font-size:clamp(21px,3vw,30px);font-weight:700;line-height:1.32}

.likert{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:26px}
.likert-opt{
  background:var(--white);border:2px solid transparent;border-radius:18px;
  padding:18px 8px 14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  box-shadow:0 2px 10px rgba(31,38,92,.05);
  transition:border-color .12s ease,transform .12s ease;
}
.likert-opt:hover{border-color:#b9c0f5;transform:translateY(-2px)}
.likert-opt .dot{
  width:var(--dot);height:var(--dot);border-radius:50%;
  border:2.5px solid #b9c0f5;background:#fff;transition:background .12s ease,border-color .12s ease;
}
.likert-opt:hover .dot{border-color:var(--indigo)}
.likert-opt.selected{border-color:var(--indigo);background:#f4f5ff}
.likert-opt.selected .dot{background:var(--indigo);border-color:var(--indigo)}
.lk-label{font-size:13px;font-weight:600;color:var(--muted);line-height:1.25;text-align:center}

.trait-bars{margin:24px 0 8px;text-align:left;display:flex;flex-direction:column;gap:18px}
.trait-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.trait-name{font-size:17px;font-weight:700}
.trait-pct{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.trait-track{height:14px;border-radius:999px;background:#dfe3f5;overflow:hidden}
.trait-fill{height:100%;width:0;border-radius:999px;transition:width .8s cubic-bezier(.3,.9,.3,1)}
.trait-sub{display:block;margin-top:6px;font-size:13px;color:var(--muted)}

.trait-details{margin-top:30px;text-align:left;display:flex;flex-direction:column;gap:14px}
.trait-card{
  background:var(--white);border-radius:18px;padding:18px 22px;
  border-left:5px solid var(--accent);box-shadow:0 2px 10px rgba(31,38,92,.05);
}
.trait-card h3{
  margin:0 0 8px;font-size:18px;font-weight:800;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.trait-card .lvl{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.trait-card p{margin:0;font-size:15px;line-height:1.55;color:#3c4257}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .home-hero{padding:34px 22px 30px}
  .test-grid{grid-template-columns:1fr}
  .section-title{margin:32px auto 14px}
  .site-footer{padding:20px;flex-direction:column;align-items:flex-start}
  .hero-pers .hero-title{margin-bottom:160px}
  .pers-art{top:104px}
  .likert{grid-template-columns:1fr;gap:9px}
  .likert-opt{flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 18px}
  .likert-opt .dot{width:26px;height:26px;flex:0 0 auto}
  .lk-label{font-size:15px;text-align:left}
  .trait-card{padding:16px 18px}
  .legal{padding:30px 22px 34px;border-radius:22px}
  .legal .legal-nav{gap:14px}
}
@media (max-width:640px){
  .site-header{padding:18px 20px}
  .logo{font-size:28px}
  .lang-btn{font-size:16px;gap:10px}
  main{padding:22px 16px 56px}
  .card{padding:30px 20px 34px;border-radius:22px}
  .hero-title{margin-bottom:170px}
  .brain{top:96px}
  .bullets li{padding:16px 20px;gap:16px}
  .check{width:30px;height:30px}
  .check::after{left:10px;top:7px;width:7px;height:13px}
  .cta{padding:20px}
  .dots-deco{display:none}
}

/* ---------- Startseite IQ-Test auf dem Handy ----------
   Der Startknopf muss ohne Scrollen zu sehen sein. Deshalb steht er hier
   direkt unter der Überschrift und die vier Punkte rutschen darunter —
   umsortiert über flex order, damit die Reihenfolge im HTML (und damit
   für Vorleseprogramme und Suchmaschinen) unverändert bleibt.
   Die Höhen sind so gewählt, dass der Knopf auch auf einem kleinen
   Bildschirm (nachgemessen bei 360 × 600) bei etwa 420 px endet und
   damit weit über der Falz liegt. */
@media (max-width:640px){
  .hero-iq{padding:18px 20px 26px}
  .hero-iq .hero-inner{display:flex;flex-direction:column}
  /* Der Abstand unter der Überschrift ist der Platz für die Grafik
     darunter — er muss zur Höhe von .brain passen, sonst liegt das
     Gehirn auf der Überschrift oder unter dem Knopf. */
  .hero-iq .hero-title{
    order:1;margin-bottom:185px;
    font-size:clamp(26px,7.4vw,34px);
  }
  .hero-iq .cta{order:2;margin-top:0;padding:17px 18px;font-size:19px}
  /* Der Preishinweis rutscht auf dem Handy unter den Knopf — darüber würde
     er den Knopf unter die Falz drücken und damit die ganze Sortierung
     hier aushebeln. Direkt darunter ist er beim Antippen trotzdem zu
     sehen: auf 360 × 600 liegt er zwischen etwa 430 und 570 px. */
  .hero-iq .start-note{
    order:3;margin:14px 0 0;padding:13px 16px;gap:4px;border-radius:16px;
  }
  .hero-iq .start-note-facts{font-size:15px}
  .hero-iq .start-note-price{font-size:13.5px;line-height:1.45}
  .hero-iq .bullets{order:4;margin:14px 0 0;gap:8px}
  .hero-iq .disclaimer{order:5;margin:16px 0 0;font-size:12px}
  .hero-iq .bullets li{padding:11px 16px;gap:12px;font-size:15px;line-height:1.3}
  .hero-iq .check{width:24px;height:24px}
  .hero-iq .check::after{left:8px;top:5px;width:6px;height:11px;border-width:0 2.5px 2.5px 0}
  .hero-iq .brain{top:82px;width:min(235px,68%)}
}

/* ---------- Fragen auf dem Handy ----------
   Ziel: Aufgabe und Antworten ohne Scrollen. Dafür verschwinden während
   des Tests Kopf- und Fußzeile (body.quiz-mode wird in show() gesetzt),
   die Karte füllt den Bildschirm, und die Figur bekommt den Platz, der
   nach Kopfzeile, Frage und Antworten übrig bleibt. */
@media (max-width:640px){
  body.quiz-mode .site-header,
  body.quiz-mode .site-footer{display:none}
  body.quiz-mode main{padding:0}
  body.quiz-mode .quiz{
    max-width:none;border-radius:0;
    /* svh = Bildschirm ohne die Leisten des Browsers. Die vh-Zeile davor
       bleibt für ältere Handy-Browser stehen, die svh nicht kennen. */
    min-height:100vh;
    min-height:100svh;
    padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px));
    display:flex;flex-direction:column;
  }

  /* Kopfzeile der Frage: zwei flache Zeilen, zusammen rund 40 px statt
     vorher etwa 70 px. body.quiz-mode davor, weil quiz-top, quiz-meta und
     progress auch der Persönlichkeitstest verwendet — der bleibt, wie er ist. */
  body.quiz-mode .quiz-top{margin-bottom:12px}
  body.quiz-mode .quiz-meta{font-size:12px;margin-bottom:7px}
  body.quiz-mode .quiz-meta .q-kind{font-size:11px;letter-spacing:.06em}
  body.quiz-mode .q-back{width:28px;height:28px;margin:-4px 6px -4px -4px}
  body.quiz-mode .q-back svg{width:18px;height:18px}
  body.quiz-mode .quiz-time{gap:10px}
  body.quiz-mode .progress{height:5px}
  body.quiz-mode .timer{font-size:15px;min-width:46px}

  .q-text{font-size:17px;line-height:1.3;margin-bottom:10px}

  /* Die Figur füllt die Breite; die Höhe ergibt sich aus ihrem eigenen
     Seitenverhältnis. Eine breite, flache Reihe bekommt so einen flachen
     Kasten statt eines halbleeren hohen — der Rest gehört den Antworten.
     Die Obergrenze in svh ist es, die zusammen mit den festen Höhen
     darüber und darunter das Scrollen verhindert. */
  body.quiz-mode .figure-wrap{
    flex:0 1 auto;min-height:0;
    padding:10px;margin-bottom:10px;border-radius:16px;
  }
  body.quiz-mode .figure-wrap svg{
    width:100%;height:auto;
    max-height:34vh;
    max-height:34svh;
  }

  /* Die Antworten nehmen den ganzen Rest: grid-auto-rows:1fr verteilt die
     übrige Höhe gleichmäßig auf die Reihen. Dadurch bleibt kein Loch
     zwischen Aufgabe und Antworten, und die Knöpfe werden so groß, wie
     der Bildschirm es hergibt — der Daumen trifft sie blind. */
  body.quiz-mode .options{flex:1 1 auto;min-height:0;grid-auto-rows:1fr}

  /* Bilder zu zweit bzw. zu dritt nebeneinander. Die Buchstaben A–F
     entfallen; auf dem Handy tippt man, man buchstabiert nicht. */
  .options{grid-template-columns:repeat(2,1fr);gap:8px}
  .options.opts-6{grid-template-columns:repeat(3,1fr);gap:7px}
  .options.text-opts,
  .options.text-opts.opts-6{grid-template-columns:1fr;gap:8px}
  .options.text-opts.short-opts{grid-template-columns:repeat(2,1fr)}
  .opt{padding:8px 6px;border-radius:14px;gap:0;justify-content:center}
  .opt .tag{display:none}
  .options.text-opts .opt{padding:12px;font-size:16px;line-height:1.3}
}

/* Auf niedrigen Bildschirmen bleibt für die Figur weniger übrig: Kopfzeile,
   Fragetext und Antwortknöpfe haben Mindesthöhen, die nicht mitschrumpfen —
   und der Fragetext bricht auf schmalen Geräten sogar in mehr Zeilen um.
   Deshalb sinkt die Obergrenze in zwei Stufen. Beide Werte sind an der
   engsten Aufgabe ausgemessen (3×3-Matrix mit sechs Bildantworten). */
@media (max-width:640px) and (max-height:640px){
  body.quiz-mode .figure-wrap svg{
    max-height:30vh;
    max-height:30svh;
  }
}
@media (max-width:640px) and (max-height:560px){
  body.quiz-mode .figure-wrap svg{
    max-height:22vh;
    max-height:22svh;
  }
}