/* Startseite: Mythen-Quiz "Stimmt's?" mit Stromkreis-Haus.
   Nur auf index.html eingebunden. Ohne JS bleibt die Sektion ausgeblendet. */
.quiz-wrap{display:grid;gap:clamp(24px,4vw,48px);margin-top:clamp(28px,4vw,48px);align-items:center}
@media(min-width:900px){.quiz-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}

.qh{width:100%;max-width:min(520px,62vh);height:auto;display:block;margin-inline:auto}
.qh .shell{fill:none;stroke:var(--line);stroke-width:2}
.qh .ground{stroke:var(--line);stroke-width:2}
.qh .riser{stroke:var(--line);stroke-width:3;stroke-linecap:round}
.qh .room{fill:var(--bg-elev);stroke:var(--line);stroke-width:1.5;transition:fill .5s ease}
.qh .wire-bg{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round}
.qh .wire{fill:none;stroke:var(--volt);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease}
.qh .lamp{fill:var(--bg-elev-2);stroke:var(--muted);stroke-width:1.5;transition:fill .3s ease .6s,stroke .3s ease .6s}
.qh .pv line,.qh .pv rect{stroke:var(--muted);stroke-width:1.5;fill:none}
.qh .pole{fill:var(--bg-elev);stroke:var(--muted);stroke-width:1.5}
.qh .lbl{font:700 9px/1 var(--f-mono);letter-spacing:.08em;fill:var(--muted);text-transform:uppercase}
.qh .slot.on .room{fill:color-mix(in srgb,var(--volt) 22%,var(--bg-elev))}
.qh .slot.on .wire{stroke-dashoffset:0}
.qh .slot.on .lamp{fill:var(--volt);stroke:var(--volt);filter:drop-shadow(0 0 6px var(--volt))}
.qh .slot.on .lbl{fill:var(--ink)}
.qh .slot.off .lamp{stroke:var(--error)}
.qh .slot.cur .room{stroke:var(--volt);stroke-dasharray:4 4}

.quiz-card{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3.5vw,36px)}
.quiz-meta{display:flex;justify-content:space-between;gap:12px;font:700 12px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--volt-text)}
.quiz-meta .quiz-score{color:var(--muted)}
.quiz-q{margin-top:18px;font-family:var(--f-display);font-weight:800;font-size:clamp(23px,3vw,30px);line-height:1.2;letter-spacing:-.015em;text-wrap:balance}
.quiz-q:focus{outline:none}
.quiz-q:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:4px}
.quiz-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.quiz-btns .btn{flex:1 1 110px;justify-content:center}
.quiz-btns .btn[disabled]{opacity:.45;cursor:default;transform:none}
.quiz-btns .btn.picked{opacity:1;border-color:var(--volt)}
.quiz-fb{margin-top:22px;font-size:18px;color:var(--ink-dim)}
.quiz-fb:empty{margin:0}
.quiz-fb strong{display:block;font-size:20px;margin-bottom:6px}
.quiz-fb .ok{color:var(--volt-text)}
.quiz-fb .no{color:var(--warn)}
.quiz-fb a{color:var(--volt);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.quiz-next{margin-top:22px}
.quiz-end .quiz-btns{margin-top:26px}

/* Mobile: small house pinned below the sticky header, so rooms light up in view */
@media(max-width:899px){
  .quiz-wrap{align-items:start;gap:16px}
  .qh{position:sticky;top:78px;z-index:2;width:100%;max-width:none;height:min(28vh,190px);
    padding-block:8px;background:var(--bg);box-shadow:0 10px 14px -10px var(--bg)}
}
@media(min-width:560px) and (max-width:899px){.qh{top:90px}}

@media(prefers-reduced-motion:reduce){
  .qh .wire,.qh .lamp,.qh .room{transition:none}
}

/* Hero-Button springt hierher: Platz für den Sticky-Header lassen */
#strom-quiz{scroll-margin-top:40px}