/* Quiz-Gerüst. Farben kommen als CSS-Variablen von der Seite (--q-ink, --q-bg, --q-accent, --q-line, --q-soft). */
#quiz{background:var(--q-bg,#fff);color:var(--q-ink,#0F1115);border:1px solid var(--q-line,#E7E9EE);border-radius:24px;padding:clamp(22px,4vw,40px);box-shadow:0 1px 2px rgba(15,17,21,.04),0 20px 50px -20px rgba(15,17,21,.18);max-width:720px;margin-inline:auto;min-height:340px;scroll-margin-top:80px}
.q-progress{height:6px;border-radius:99px;background:var(--q-line,#E7E9EE);overflow:hidden}
.q-progress i{display:block;height:100%;border-radius:99px;background:var(--q-accent,#FFD400);transition:width .35s ease}
.q-count{margin:14px 0 6px;font-weight:600;font-size:.82rem;color:var(--q-soft,#5B616E)}
.q-title{margin:0 0 8px;font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15;font-weight:700;letter-spacing:-.03em;outline:none;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
.q-hint{margin:0 0 4px;color:var(--q-soft,#5B616E)}
.q-options{display:grid;gap:10px;margin-top:22px}
.q-multi{grid-template-columns:repeat(2,minmax(0,1fr))}
.q-option{font:inherit;font-weight:600;text-align:left;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1.5px solid var(--q-line,#E7E9EE);background:#fff;color:var(--q-ink,#0F1115);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.q-option:hover{border-color:#C9CDD6;box-shadow:0 4px 14px rgba(15,17,21,.07)}
.q-option[aria-pressed=true]{background:#FFF9D6;border-color:var(--q-accent,#FFD400);box-shadow:0 0 0 3px rgba(255,212,0,.3)}
.q-ico{flex:none;width:40px;height:40px;border-radius:12px;background:#FFF6C2;color:#7A6000;display:grid;place-items:center;transition:background .15s}
.q-option[aria-pressed=true] .q-ico{background:var(--q-accent,#FFD400);color:#0F1115}
.q-lab{flex:1;min-width:0}
.q-option[aria-pressed=true]::after{content:"✓";flex:none;font-weight:800;color:#8A6D00}
.q-multi .q-option{padding:12px 14px}
.q-form{display:grid;gap:14px;margin-top:22px}
.q-field{display:grid;gap:6px}
.q-field label{font-weight:600;font-size:.92rem}
.q-field input,.q-field textarea,.q-field select{font:inherit;padding:13px 15px;border-radius:12px;border:1.5px solid var(--q-line,#E7E9EE);background:#fff;color:var(--q-ink,#0F1115);width:100%;transition:border-color .15s,box-shadow .15s}
.q-field input:focus,.q-field textarea:focus,.q-field select:focus{outline:none;border-color:var(--q-accent,#FFD400);box-shadow:0 0 0 4px rgba(255,212,0,.3)}
.q-consent{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;cursor:pointer}
.q-consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--q-ink,#0F1115)}
.q-err{color:#B3261E;font-weight:600;min-height:1.2em;margin:0}
.q-nav{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:24px;flex-wrap:wrap}
.q-back{font:inherit;font-weight:600;background:none;border:0;padding:10px 4px;cursor:pointer;color:var(--q-soft,#5B616E)}
.q-back:hover{color:var(--q-ink,#0F1115)}
.q-next{font:inherit;font-weight:600;padding:14px 26px;border-radius:12px;border:0;background:var(--q-ink,#0F1115);color:#fff;cursor:pointer;margin-left:auto;box-shadow:0 6px 18px rgba(15,17,21,.2);transition:transform .15s,box-shadow .15s}
.q-next:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,17,21,.26)}
.q-next:disabled{opacity:.4;cursor:not-allowed}
.q-upload{margin-top:22px;display:grid;gap:12px;justify-items:start}
.q-pick{display:inline-flex;align-items:center;gap:10px;font-weight:600;padding:14px 22px;border-radius:12px;border:1.5px dashed #C9CDD6;cursor:pointer;background:#FAFBFC}
.q-pick:hover{border-color:var(--q-accent,#FFD400);background:#FFF9D6}
.q-pick input{position:absolute;opacity:0;width:1px;height:1px}
.q-pick:focus-within{outline:3px solid var(--q-accent,#FFD400);outline-offset:3px}
.q-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.q-done{padding:12px 0;text-align:center}
.q-done .q-hint{max-width:46ch;margin:0 auto}
.q-check{width:84px;height:84px;margin:4px auto 18px}
.q-check svg{width:100%;height:100%;overflow:visible}
.q-check-c{fill:#E6F7EE;stroke:#14A26A;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:q-ring .6s ease-out forwards}
.q-check-k{fill:none;stroke:#14A26A;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:q-tick .4s .5s ease-out forwards}
.q-check{animation:q-pop .35s 1s ease-out both}
@keyframes q-ring{to{stroke-dashoffset:0}}
@keyframes q-tick{to{stroke-dashoffset:0}}
@keyframes q-pop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.q-consent a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.q-check-c,.q-check-k{animation:none;stroke-dashoffset:0}.q-check{animation:none}}
:where(#quiz) button:focus-visible{outline:3px solid var(--q-accent,#FFD400);outline-offset:3px}
@media (max-width:600px){.q-multi{grid-template-columns:1fr}.q-next{width:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}