/* Biwak-Typ-Test: ablenkungsfreier Funnel. Jeder Schritt passt ins Fenster, nur das Ergebnis darf lang sein. */
body.q{background:radial-gradient(1200px 600px at 70% -10%,#1b2a23 0,var(--night) 60%) fixed;color:var(--bone);min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.qtop{display:flex;justify-content:center;padding:12px 20px 6px}
.qtop .logo{font-size:20px;cursor:default}
.qchain{display:flex;gap:5px;width:min(760px,100% - 40px);margin:6px auto 0}
.qchain i{flex:1;height:5px;border-radius:3px;background:#26332d;transition:background .4s}
.qchain i.is-done{background:var(--signal)}
.qchain i.is-act{background:var(--signal);animation:q-puls 1.4s ease-in-out infinite}
.qstep{width:min(760px,100% - 40px);margin:6px auto 0;font-size:13px;color:#9fb3a8}
.qstage{flex:1;width:min(980px,100% - 40px);margin:0 auto;display:flex;align-items:center;justify-content:center;padding:10px 0 12px}
.qstage>section{width:100%}
.qfoot{display:flex;justify-content:center;gap:22px;padding:8px 20px 14px;font-size:12.5px}
.qfoot a{color:#8b9a92;text-decoration:none}
.qfoot a:hover{color:var(--bone)}
.qnoscript{padding:40px;text-align:center}

.q-kicker{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700;color:var(--signal);margin-bottom:8px}
.q h1{font-size:clamp(24px,3.4vw,38px);color:var(--bone);text-transform:none;letter-spacing:-.01em;line-height:1.15;margin-bottom:6px;max-width:26ch}
.q-hint{font-size:14px;color:#9fb3a8;margin-bottom:6px}

/* Frage */
.q-frage{text-align:left}
.q-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.q-karte{font:inherit;color:inherit;text-align:left;cursor:pointer;border:1.5px solid #2f3e37;background:#141c18;border-radius:6px;transition:transform .2s,border-color .2s,background .2s}
.q-karte:hover{border-color:var(--signal);transform:translateY(-2px)}
.q-karte:active{transform:scale(.985)}
.q-karte.is-on{border-color:var(--signal);background:#261a12}
.q-opt{display:flex;gap:14px;align-items:center;padding:16px 18px;min-height:68px}
.q-opt__box{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #5b6b63;transition:.2s}
.q-opts--multi .q-opt__box{border-radius:5px}
.q-opt.is-on .q-opt__box{background:var(--signal);border-color:var(--signal);box-shadow:inset 0 0 0 4px #261a12}
.q-opt__t{display:grid;gap:2px}
.q-opt b{font-family:var(--f-body);font-weight:600;font-size:16.5px;line-height:1.35}
.q-opt small{color:#9fb3a8;font-size:13px}

/* Bildkacheln der ersten Frage */
.q-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.q-tile{position:relative;overflow:hidden;padding:0;height:min(44vh,360px);min-height:240px;border:0}
.q-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.q-tile:hover img{transform:scale(1.07)}
.q-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,19,17,.1) 25%,rgba(14,19,17,.88))}
.q-tile__lab{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:14px 14px 15px;display:grid;gap:3px}
.q-tile__lab b{font-family:var(--f-display);font-size:19px;line-height:1.15;font-weight:700}
.q-tile__lab small{color:#cfd8d2;font-size:12.5px}
.q-tile__lab em{font-style:normal;font-size:13px;font-weight:700;color:var(--signal);opacity:0;transform:translateY(6px);transition:.25s}
.q-tile:hover .q-tile__lab em,.q-tile:focus-visible .q-tile__lab em{opacity:1;transform:none}
.q-tile.is-on{outline:3px solid var(--signal)}
.q-skip{margin-top:14px;font-size:13.5px}
.q-link{background:none;border:0;padding:0;font:inherit;color:#9fb3a8;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.q-link:hover{color:var(--bone)}
.q-cta{margin-top:18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.q .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.q-pfeil{display:inline-block;animation:q-nick 1.4s ease-in-out infinite}

/* Brücke */
.q-bruecke,.q-abk{max-width:640px;margin:0 auto;text-align:left}
.q-ringe{position:relative;width:64px;height:64px;margin-bottom:16px}
.q-ringe i{position:absolute;inset:0;border:2px solid var(--signal);border-radius:50%;opacity:0;animation:q-welle 2.4s ease-out infinite}
.q-ringe i:nth-child(2){animation-delay:.8s}.q-ringe i:nth-child(3){animation-delay:1.6s}
.q-ringe b{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;background:var(--signal);border-radius:50%}
.q-bt{font-size:clamp(19px,2.4vw,24px);line-height:1.45;color:var(--bone);font-weight:600;font-family:var(--f-body);margin-bottom:10px}
.q-bt--lang{font-size:clamp(16px,1.9vw,19px);font-weight:400;line-height:1.55;color:#dfe6e1}
.q-deshalb{color:#cfd8d2;font-size:17px}
.is-bruecke::before{content:"";position:fixed;left:50%;top:40%;width:560px;height:560px;margin:-280px;background:radial-gradient(circle,rgba(255,106,43,.14),transparent 65%);pointer-events:none;z-index:-1}
.q-cta--zwei{gap:22px}

/* Rechnen */
.q-rechnen{display:grid;justify-items:center;gap:18px}
.q-kreis{position:relative;width:132px;height:132px}
.q-kreis svg{width:100%;height:100%;transform:rotate(-90deg)}
.q-kreis circle{fill:none;stroke-width:8}
.q-kreis__bg{stroke:#26332d}
.q-kreis__fg{stroke:var(--signal);stroke-linecap:round}
.q-kreis span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:28px}
.q-schritte{list-style:none;padding:0;display:grid;gap:10px;min-width:min(380px,100%)}
.q-schritte li{position:relative;padding-left:34px;color:#7f8e86;font-size:16px;transition:color .3s}
.q-schritte li.is-act{color:var(--bone)}
.q-schritte li.is-done{color:var(--bone)}
.q-spin,.q-haken{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%}
.q-spin{border:2.5px solid #3a4a42;border-top-color:transparent;opacity:0}
.q-schritte li.is-act .q-spin{opacity:1;border-top-color:var(--signal);animation:q-dreh .8s linear infinite}
.q-haken{background:var(--signal);opacity:0;transform:scale(.4);transition:.3s}
.q-haken::after{content:"";position:absolute;left:6px;top:3px;width:6px;height:10px;border:solid var(--night);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.q-schritte li.is-done .q-haken{opacity:1;transform:none}
.q-schimmer{width:min(380px,100%);height:6px;border-radius:3px;background:linear-gradient(90deg,#26332d 0,#3d5247 40%,#26332d 80%) 0 0/200% 100%;animation:q-sch 1.4s linear infinite}

/* Zwischenstand: Bild in der Seitenspalte, EINE feste Achse */
.q-zw{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:28px;align-items:stretch;background:#141c18;border:1.5px solid #2f3e37;border-radius:8px;overflow:hidden}
.q-zw__bild{position:relative;min-height:340px}
.q-zw__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.q-zw__bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,19,17,.05) 55%,rgba(14,19,17,.55))}
.q-badge{position:absolute;z-index:1;left:12px;bottom:12px;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;padding:6px 11px;border-radius:3px}
.q-badge--hebel{background:#e9b44c;color:#2b1d00}
.q-badge--basis{background:#6fbf8e;color:#0b2416}
.q-zw__inhalt{padding:22px 26px 22px 0;display:flex;flex-direction:column;justify-content:center}
.q-label{color:#cfd8d2;font-size:15px;margin-bottom:2px}
.q-wertzeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.q-wert{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,5.4vw,58px);line-height:1.05;color:var(--signal)}
.q-wert.is-blur{filter:blur(9px);user-select:none}
.q-pill{font-family:var(--f-display);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.06em;background:var(--signal);color:var(--night);padding:6px 12px;border-radius:99px}
.q-deutung{margin:8px 0 6px;font-size:16px;line-height:1.5;color:#dfe6e1;max-width:46ch}
.q-graf{width:100%;max-width:20rem;height:auto;margin:4px 0 2px;overflow:visible}
.q-gt{fill:#cfd8d2;font:600 12px var(--f-body)}
.q-gz{fill:var(--bone);font:700 13px var(--f-display)}
.q-gz--b{fill:var(--signal)}
.q-bar--a{fill:#9fb3a8;transform-origin:left;animation:q-wachs 1s .15s cubic-bezier(.22,1,.36,1) both}
.q-bar--b{fill:var(--signal);transform-origin:left;transform-box:fill-box;animation:q-wachs 1s .5s cubic-bezier(.22,1,.36,1) both}
.q-bar--a{transform-box:fill-box}
.q-stufe rect{fill:#2d3d35}
.q-stufe text{fill:var(--bone);font:700 14px var(--f-display);text-transform:uppercase}
.q-stufe--3 rect{fill:#3d2a1c;stroke:var(--signal);stroke-dasharray:5 4}
.q-stufe--3 text{filter:blur(4px)}
.q-stufe{transform-box:fill-box;transform-origin:bottom;animation:q-stuf .7s cubic-bezier(.22,1,.36,1) both}
.q-stufe--2{animation-delay:.25s}.q-stufe--3{animation-delay:.5s}

/* Ergebnis */
.is-erg{align-items:flex-start;padding-top:14px}
.q-erg{max-width:860px;margin:0 auto;padding-bottom:30px}
.q-erg__kopf{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:24px;align-items:center}
.q-erg__kopf figure{height:240px;border-radius:8px;overflow:hidden}
.q-erg__kopf img{width:100%;height:100%;object-fit:cover}
.q-erg h1{font-size:clamp(30px,4.6vw,50px);max-width:none;color:var(--bone)}
.q-passung{color:var(--signal);font-family:var(--f-display);font-weight:700;font-size:20px;margin:2px 0 4px}
.q-deutung--gross{font-size:18px;max-width:none}
.q-erg h2{font-size:clamp(22px,2.6vw,28px);color:var(--bone);margin:34px 0 12px;text-transform:none}
.q-offen{margin-top:20px;border:1.5px solid #2f3e37;border-radius:6px;padding:12px 16px;background:#141c18;font-size:15px}
.q-offen summary{cursor:pointer;font-weight:600}
.q-offen p,.q-offen ul{margin-top:8px;color:#cfd8d2}
.q-offen ul{padding-left:20px}
.q-spiegel{list-style:none;padding:0;display:grid;gap:8px}
.q-spiegel li{padding:12px 16px;border-left:4px solid var(--signal);background:#141c18;border-radius:0 6px 6px 0;font-size:16.5px}
.q-setup{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.q-setup div{background:#1b2a23;border-radius:6px;padding:14px 16px;display:grid;gap:3px}
.q-setup small{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;color:var(--signal)}
.q-setup b{font-family:var(--f-body);font-weight:600;font-size:16px}
.q-befunde{display:grid;gap:12px}
.q-befunde article{position:relative;padding:16px 18px 16px 56px;background:#141c18;border:1.5px solid #2f3e37;border-radius:6px}
.q-nr{position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;background:var(--signal);color:var(--night);display:grid;place-items:center;font-family:var(--f-display);font-weight:900}
.q-befunde h3{font-size:19px;text-transform:none;color:var(--bone);margin-bottom:4px}
.q-befunde p{color:#cfd8d2;font-size:15.5px}
.q-warn{margin-top:20px;padding:14px 18px;border:1.5px solid #e9b44c;background:#2b2210;border-radius:6px;color:#f3e3bc;font-size:15.5px}
.q-konsequenz{color:#dfe6e1;margin-bottom:8px}
.q-links{padding-left:20px;display:grid;gap:6px}
.q-links a{color:var(--signal)}
.q-fuss{margin-top:22px;font-size:13px;color:#8b9a92;max-width:70ch}

/* Animationen */
.q-rein{animation:q-rein .5s cubic-bezier(.22,1,.36,1) both}
@keyframes q-rein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes q-puls{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes q-nick{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes q-welle{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes q-dreh{to{transform:rotate(360deg)}}
@keyframes q-sch{to{background-position:-200% 0}}
@keyframes q-wachs{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes q-stuf{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}

@media (max-width:860px){
  .q-tiles{grid-template-columns:1fr 1fr}
  .q-tile{height:min(26vh,190px);min-height:150px}
  .q-opts{grid-template-columns:1fr}
  .q-erg__kopf,.q-zw{grid-template-columns:1fr}
  .q-zw__bild{min-height:0;height:120px}
  .q-zw__inhalt{padding:4px 18px 18px}
  .q-erg__kopf figure{height:150px}
  .q-setup{grid-template-columns:1fr}
}
@media (max-width:480px){
  .qstage{width:calc(100% - 28px)}
  .q-opt{padding:12px 14px;min-height:56px}
  .q-opt b{font-size:15.5px}
  .q-opts{gap:8px;margin-top:12px}
  .q h1{font-size:23px}
  .q-tile__lab b{font-size:16px}
  .q-tile__lab small,.q-tile__lab em{display:none}
  .q-wert{font-size:38px}
  .q-deutung{font-size:15px}
  .q-bt{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .q-rein,.q-pfeil,.q-ringe i,.q-schimmer,.q-spin,.q-bar--a,.q-bar--b,.q-stufe,.qchain i.is-act{animation:none!important}
  .q-ringe i{opacity:.5;transform:scale(1)}
  .q-ringe i:nth-child(2){transform:scale(1.3);opacity:.3}
  .q-ringe i:nth-child(3){transform:scale(1.6);opacity:.15}
  .q-tile img,.q-karte{transition:none}
}