/* Isle of Mind · Gründerpotenzialtest · GESTALTUNG (für Kurs- und Leadmagnet-Version)
   Farben und Schriften nach Brand Board Isle of Mind Academy.
   Barrierefreiheit (BFSG / WCAG 2.1 AA): Auf Orange steht immer dunkle Schrift (#2D2D2D, ca. 6:1).
   Weiß auf Orange hat nur ca. 2,3:1 und ist nicht zulässig. Orange Schrift und Ränder auf Hell: #B5482E (ca. 5:1).
   Schrift: Brandon Grotesque, falls eingebunden (z. B. Adobe Fonts), sonst Figtree. */
#iom-test{
  --iom-orange:#FE8C71; --iom-orange-2:#FEAA71; --iom-orange-text:#B5482E; --iom-on-orange:#2D2D2D; --iom-orange-large:#E0603F;
  --iom-grad:linear-gradient(135deg,#FE8C71,#FEAA71);
  --iom-bg:#FDF9F7; --iom-bg-2:#F2EAE6; --iom-card:#FFFFFF; --iom-peach:#FFF2EC;
  --iom-text:#2D2D2D; --iom-mute:#6B6360; --iom-line:#EDE3DE; --iom-bar:#DCD0CA;
  --iom-font:"brandon-grotesque","Brandon Grotesque","Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --iom-shadow:0 24px 60px -36px rgba(80,45,30,.35),0 2px 6px rgba(80,45,30,.04);
  box-sizing:border-box; color:var(--iom-text);
  /* weiche Farbflächen im Hintergrund */
  background:
    radial-gradient(420px 420px at 100% 0%,rgba(254,170,113,.32),transparent 70%),
    radial-gradient(380px 380px at 0% 100%,rgba(254,140,113,.16),transparent 70%),
    var(--iom-bg);
  font-family:var(--iom-font); font-size:17px; line-height:1.6;
  padding:clamp(24px,5vw,64px) clamp(16px,4vw,48px); border-radius:8px;
  min-height:560px; display:flex; justify-content:center;
  align-items:center; /* Inhalt senkrecht mittig, v. a. auf dem Handy */
}
#iom-test *,#iom-test *::before,#iom-test *::after{box-sizing:border-box}
#iom-test .iom-wrap{width:100%; max-width:680px; display:flex; flex-direction:column}
#iom-test h2,#iom-test h3,#iom-test p{margin:0}
#iom-test button{font:inherit; color:inherit; cursor:pointer}
#iom-test a{color:var(--iom-orange-text)}
#iom-test :focus-visible{outline:2px solid var(--iom-text); outline-offset:3px}

/* Marke */
#iom-test .iom-brand{margin-bottom:clamp(32px,6vw,56px)}
#iom-test .iom-brand img{display:block; width:clamp(118px,22vw,150px); height:auto}

/* Karten */
#iom-test .iom-card{background:var(--iom-card); border-radius:24px; box-shadow:var(--iom-shadow); padding:clamp(24px,5vw,48px)}
#iom-test .iom-card + .iom-card{margin-top:20px}

/* Kopfzeile mit Fortschritt */
#iom-test .iom-top{display:flex; align-items:center; gap:16px; min-height:28px; margin-bottom:clamp(28px,6vw,48px)}
#iom-test .iom-back{display:grid; place-items:center; width:40px; height:40px; flex:none; padding:0; background:var(--iom-bg); border:1.5px solid var(--iom-line); border-radius:50%; color:var(--iom-text); transition:background .18s ease,border-color .18s ease}
#iom-test .iom-back svg{width:18px; height:18px}
#iom-test .iom-back:hover{background:var(--iom-orange); border-color:var(--iom-orange)}
#iom-test .iom-back[hidden]{display:inline-block; visibility:hidden}
#iom-test .iom-bar{flex:1; height:8px; background:var(--iom-bg-2); border-radius:99px; position:relative; overflow:hidden}
#iom-test .iom-bar span{position:absolute; inset:0 auto 0 0; background:var(--iom-grad); border-radius:99px; transition:width .35s ease}
#iom-test .iom-count{font-size:14px; font-weight:600; color:var(--iom-mute); font-variant-numeric:tabular-nums; min-width:52px; text-align:right}

/* Typografie */
#iom-test .iom-tag{display:inline-block; align-self:flex-start; padding:6px 14px; background:var(--iom-grad); color:var(--iom-on-orange);
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; border-radius:4px}
#iom-test .iom-display{font-weight:800; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(32px,6.4vw,52px); line-height:1.05; margin-top:20px}
#iom-test .iom-display em,#iom-test .iom-h em{font-style:normal; color:var(--iom-orange-large)} /* große Schrift: 3,4:1 */
#iom-test .iom-h{font-weight:800; text-transform:uppercase; letter-spacing:.01em; font-size:clamp(24px,4.6vw,34px); line-height:1.1; margin-top:14px}
#iom-test .iom-q{font-weight:700; font-size:clamp(23px,4.2vw,31px); line-height:1.25; min-height:3.75em}
#iom-test .iom-kicker{font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--iom-orange-text)}
#iom-test .iom-lead{color:var(--iom-mute); font-size:19px; max-width:32em; margin-top:20px}
#iom-test .iom-small{color:var(--iom-mute); font-size:14px}
#iom-test .iom-text p{margin-top:16px; max-width:38em}
#iom-test .iom-pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
#iom-test .iom-pills span{padding:7px 14px; background:var(--iom-card); border:1px solid var(--iom-line); border-radius:99px; font-size:14px; font-weight:600}

/* Skala: fünf wachsende Kreise */
#iom-test .iom-scale{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:36px}
#iom-test .iom-dot{display:grid; place-items:center; border-radius:50%; border:2px solid var(--iom-orange-text);
  background:var(--iom-card); font-size:16px; font-weight:700; color:var(--iom-orange-text);
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease; flex:none}
#iom-test .iom-dot:hover,#iom-test .iom-dot[aria-pressed="true"]{background:var(--iom-orange); border-color:var(--iom-orange); color:var(--iom-on-orange)}
#iom-test .iom-dot:hover{transform:scale(1.06)}
#iom-test .iom-dot[aria-pressed="true"]{box-shadow:0 10px 24px -10px rgba(254,140,113,.9)}
#iom-test .iom-dot:nth-child(1){width:46px;height:46px}
#iom-test .iom-dot:nth-child(2){width:56px;height:56px}
#iom-test .iom-dot:nth-child(3){width:66px;height:66px}
#iom-test .iom-dot:nth-child(4){width:76px;height:76px}
#iom-test .iom-dot:nth-child(5){width:88px;height:88px}
#iom-test .iom-ends{display:flex; justify-content:space-between; margin-top:14px; font-size:14px; color:var(--iom-mute)}

/* Auswahl-Karten (Vorab-Frage) */
#iom-test .iom-choices{display:grid; gap:12px; margin-top:28px}
#iom-test .iom-choice{text-align:left; padding:18px 20px; background:var(--iom-bg); border:1.5px solid var(--iom-line); border-radius:14px; font-weight:500; transition:border-color .18s ease,background .18s ease}
#iom-test .iom-choice:hover{border-color:var(--iom-orange-text); background:var(--iom-peach)}
#iom-test .iom-choice[aria-pressed="true"]{border-color:var(--iom-orange-text); background:var(--iom-peach)}

/* Buttons */
#iom-test .iom-btn{display:inline-flex; align-items:center; gap:10px; margin-top:36px; padding:17px 30px; background:var(--iom-grad); color:var(--iom-on-orange);
  border:0; border-radius:6px; font-weight:700; font-size:15px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; align-self:flex-start;
  box-shadow:0 14px 30px -14px rgba(254,140,113,.9); transition:transform .18s ease,box-shadow .18s ease}
#iom-test .iom-btn:hover{background:linear-gradient(135deg,#F2765A,#FB9A62); transform:translateY(-2px); box-shadow:0 20px 36px -14px rgba(242,118,90,1)} /* dunkle Schrift bleibt > 4,5:1 */
#iom-test .iom-btn::after{content:"→"; font-size:18px; letter-spacing:0}
#iom-test .iom-btn[disabled]{opacity:.6; cursor:wait}
#iom-test .iom-link{display:block; background:none; border:0; padding:0; margin-top:28px; color:var(--iom-mute); text-decoration:underline; font-size:14px; align-self:flex-start}

/* Formular */
#iom-test .iom-form{display:grid; gap:18px; margin-top:28px}
#iom-test label.iom-field{display:grid; gap:6px; font-size:14px; font-weight:600; color:var(--iom-mute)}
#iom-test input[type=text],#iom-test input[type=email]{width:100%; padding:15px 16px; background:var(--iom-bg); color:var(--iom-text);
  border:1.5px solid var(--iom-line); border-radius:12px; font:inherit; font-size:17px}
#iom-test input:focus{border-color:var(--iom-orange-text); outline:none; box-shadow:0 0 0 4px rgba(254,140,113,.18)}
#iom-test .iom-consent{display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--iom-mute); line-height:1.5}
#iom-test .iom-consent input{margin-top:3px; accent-color:var(--iom-orange); width:18px; height:18px; flex:none}
#iom-test .iom-error{color:#B2412A; font-size:14px; min-height:1.2em}

/* Ergebnis: Potenzial */
#iom-test .iom-hero{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,5vw,40px); align-items:center; margin-top:24px}
#iom-test .iom-ring{position:relative; width:clamp(150px,30vw,190px); aspect-ratio:1}
#iom-test .iom-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
#iom-test .iom-ring circle{fill:none; stroke-width:12}
#iom-test .iom-ring .iom-ring-bg{stroke:var(--iom-bg-2)}
#iom-test .iom-ring .iom-ring-fg{stroke:url(#iom-grad); stroke-linecap:round; transition:stroke-dashoffset 1.2s ease}
#iom-test .iom-ring div{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
#iom-test .iom-score{font-weight:800; font-size:clamp(40px,8vw,54px); line-height:1; font-variant-numeric:tabular-nums}
#iom-test .iom-score small{font-size:.5em; margin-left:2px}
#iom-test .iom-ring p{font-size:13px; font-weight:600; color:var(--iom-mute); margin-top:4px}
#iom-test .iom-hint{margin-top:24px; padding:14px 16px; background:var(--iom-bg); border-radius:12px; font-size:14px; color:var(--iom-mute); line-height:1.5}

/* Ergebnis: Profilbalken */
#iom-test .iom-profile{margin-top:28px; display:grid; gap:14px}
#iom-test .iom-row{display:grid; grid-template-columns:100px 1fr 48px; align-items:center; gap:14px; font-size:15px; font-weight:600}
#iom-test .iom-row .iom-track{height:10px; background:var(--iom-bg-2); border-radius:99px; overflow:hidden}
#iom-test .iom-row .iom-fill{height:100%; background:var(--iom-bar); border-radius:99px; transition:width .8s ease}
#iom-test .iom-row.is-win .iom-fill{background:var(--iom-grad)}
#iom-test .iom-row .iom-pct{text-align:right; color:var(--iom-mute); font-variant-numeric:tabular-nums; white-space:nowrap}

/* Ergebnis: nächster Schritt */
#iom-test .iom-card.is-offer{background:linear-gradient(160deg,#FFF6F2 0%,#FFE9DF 100%)}
#iom-test .iom-sessions{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px}
#iom-test .iom-sessions li{display:flex; gap:14px; align-items:center; padding:12px 16px; background:var(--iom-card); border-radius:14px; font-weight:600; font-size:16px; line-height:1.35}
#iom-test .iom-sessions li:has(.iom-lektion){padding:0}
#iom-test .iom-thumb{width:112px; height:auto; aspect-ratio:16/9; flex:none; border-radius:8px; border:1px solid var(--iom-line); object-fit:cover; background:var(--iom-bg)}
#iom-test .iom-snr{display:flex; flex-direction:column; gap:2px; min-width:0}
#iom-test .iom-skick{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--iom-orange-text)}
#iom-test .iom-stitel{font-weight:600}
#iom-test .iom-lektion:hover .iom-stitel{text-decoration:underline}
#iom-test .iom-lektion{display:flex; gap:14px; align-items:center; width:100%; padding:12px 16px; border-radius:14px; color:var(--iom-text); text-decoration:none; transition:background .18s ease}
#iom-test .iom-lektion:hover{background:var(--iom-peach)}
#iom-test .iom-go{margin-left:auto; font-size:18px; font-weight:700; color:var(--iom-orange-text)}
#iom-test .iom-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
#iom-test .iom-zurueck{margin-top:22px; align-self:flex-start; text-decoration:none}
#iom-test .iom-btn-sec.iom-zurueck::before{content:"←"}

/* Einwilligungsbanner (nur mit Meta-Pixel). Beide Knöpfe bewusst gleichwertig gestaltet. */
#iom-test .iom-consentbar{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:10; width:calc(100% - 32px); max-width:640px;
  background:var(--iom-card); border-radius:18px; box-shadow:0 20px 60px -20px rgba(80,45,30,.45),0 0 0 1px var(--iom-line); padding:20px 22px;
  font-size:14px; line-height:1.5; color:var(--iom-text)}
#iom-test .iom-consentbar div{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
#iom-test .iom-btn2{flex:1 1 140px; padding:12px 18px; background:var(--iom-card); border:1.5px solid var(--iom-text); border-radius:6px;
  font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--iom-text); transition:background .18s ease,border-color .18s ease}
#iom-test .iom-btn2:hover{background:var(--iom-orange); border-color:var(--iom-orange)}

/* Ergebnis: Tiefe */
#iom-test .iom-note{margin-bottom:20px; padding:14px 18px; background:var(--iom-card); border-left:3px solid var(--iom-orange); border-radius:10px; font-size:15px; box-shadow:var(--iom-shadow)}
#iom-test .iom-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px}
#iom-test .iom-btn-sec{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; background:var(--iom-card); border:1.5px solid var(--iom-text); border-radius:6px;
  font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--iom-text); transition:background .18s ease,border-color .18s ease}
#iom-test .iom-btn-sec::before{content:"↓"; font-size:16px; letter-spacing:0}
#iom-test .iom-btn-sec:hover{background:var(--iom-orange); border-color:var(--iom-orange)}
#iom-test .iom-deep{margin-top:28px; padding-top:24px; border-top:1px solid var(--iom-line)}
#iom-test .iom-h4{font-size:18px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin:0 0 4px}
#iom-test .iom-cols{display:grid; grid-template-columns:1fr 1fr; gap:8px 28px}
#iom-test .iom-sub{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--iom-orange-text); margin-top:18px}
#iom-test .iom-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:9px}
#iom-test .iom-list li{position:relative; padding-left:28px; font-size:16px; line-height:1.5}
#iom-test .iom-list li::before{position:absolute; left:0; top:2px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:12px; font-weight:800}
#iom-test .iom-list.is-plus li::before{content:"✓"; background:var(--iom-orange); color:var(--iom-on-orange)}
#iom-test .iom-list.is-minus li::before{content:"!"; background:var(--iom-bg-2); color:var(--iom-text)}
#iom-test .iom-list.is-arrow li::before{content:"→"; background:var(--iom-text); color:#fff}
#iom-test .iom-price-num{font-size:44px; font-weight:800; line-height:1}
#iom-test .iom-print-only{display:none}
/* Wert-Aufstellung */
#iom-test .iom-bausteine{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px}
#iom-test .iom-bausteine li{position:relative; display:flex; gap:16px; align-items:flex-start; padding:18px; background:var(--iom-bg); border:1.5px solid var(--iom-line); border-radius:16px}
#iom-test .iom-bausteine li.is-herz{border-color:var(--iom-orange-text); background:var(--iom-peach); margin-top:10px}
#iom-test .iom-badge{position:absolute; top:-11px; left:16px; padding:3px 10px; background:var(--iom-grad); color:var(--iom-on-orange); border-radius:4px; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase}
#iom-test .iom-bnum{display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:12px; background:var(--iom-bg-2); font-size:20px; font-weight:800}
#iom-test .is-herz .iom-bnum{background:var(--iom-grad); color:var(--iom-on-orange)}
#iom-test .iom-btitel{font-size:18px; font-weight:800; line-height:1.25; margin-top:4px}
#iom-test .iom-btext{font-size:15px; color:var(--iom-mute); margin-top:4px; line-height:1.5}
#iom-test .iom-bwert{font-size:14px; font-weight:700; margin-top:8px}
#iom-test .iom-summe{display:flex; justify-content:space-between; gap:12px; margin-top:22px; padding-top:16px; border-top:1px solid var(--iom-line); color:var(--iom-mute); font-size:15px}
#iom-test .iom-summe strong{color:var(--iom-text)}
#iom-test .iom-preisbox{margin-top:18px; padding:24px 22px; background:var(--iom-bg); border-radius:16px; text-align:center; display:flex; flex-direction:column; align-items:center}
#iom-test .iom-preisbox .iom-price-num{font-size:56px; margin:4px 0}
#iom-test .iom-preisbox .iom-list{text-align:left; margin-top:18px; align-self:stretch}
#iom-test .iom-btn-full{align-self:stretch; justify-content:center; margin-top:20px}
#iom-test .iom-mehr{margin-top:18px; font-size:15px; font-weight:600; color:var(--iom-orange-text)}

#iom-test .iom-screen{animation:iomIn .32s ease both; display:flex; flex-direction:column}
@keyframes iomIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (max-width:520px){
  #iom-test .iom-thumb{width:88px}
  #iom-test .iom-dot:nth-child(1){width:42px;height:42px}
  #iom-test .iom-dot:nth-child(2){width:49px;height:49px}
  #iom-test .iom-dot:nth-child(3){width:56px;height:56px}
  #iom-test .iom-dot:nth-child(4){width:63px;height:63px}
  #iom-test .iom-dot:nth-child(5){width:70px;height:70px}
  #iom-test .iom-row{grid-template-columns:84px 1fr 44px}
  #iom-test .iom-hero{grid-template-columns:1fr; justify-items:start}
  #iom-test .iom-btn{align-self:stretch; justify-content:center}
  #iom-test .iom-card{border-radius:20px}
  #iom-test .iom-cols{grid-template-columns:1fr}
}
/* PDF: „Als PDF speichern“ nutzt den Druckdialog des Browsers */
@media print{
  @page{margin:14mm}
  html,body{background:#fff!important}
  #iom-test{background:#fff!important; padding:0!important; min-height:0!important; display:block!important; font-size:12.5pt;
    -webkit-print-color-adjust:exact; print-color-adjust:exact}
  #iom-test .iom-wrap{max-width:none}
  #iom-test .iom-card{box-shadow:none; border:1px solid var(--iom-line); padding:22px}
  #iom-test .iom-hero,#iom-test .iom-profile,#iom-test .iom-cols,#iom-test .iom-list li,#iom-test .iom-sessions li,#iom-test .iom-bausteine li,#iom-test .iom-preisbox,#iom-test .iom-h{break-inside:avoid; page-break-inside:avoid}
  #iom-test .iom-h,#iom-test .iom-sub,#iom-test .iom-kicker{break-after:avoid; page-break-after:avoid}
  #iom-test :focus,#iom-test :focus-visible{outline:none!important}
  #iom-test .iom-noprint,#iom-test .iom-consentbar,#iom-test .iom-note{display:none!important}
  #iom-test .iom-print-only{display:block; margin-top:16px}
  #iom-test .iom-screen{animation:none}
  #iom-test .iom-fill,#iom-test .iom-ring-fg{transition:none!important}
}
@media (prefers-reduced-motion:reduce){
  #iom-test *{animation:none!important; transition:none!important}
}