/* WhichWine — quiz page (welcher-wein-passt-zu-mir.html) on top of common.css + landing.css */

/* Progressive enhancement: without JS the quiz is hidden and all four
   result cards render as a static guide; with JS the steps run one at a
   time and only the chosen result shows. */
html:not(.js) .quiz{display:none;}
html.js .quiz .qstep{display:none;}
html.js .quiz .qstep.on{display:block;}
html.js .rcard{display:none;}
html.js .rcard.on{display:block;}
html:not(.js) .rcard-intro{display:block;}
html.js .rcard-intro{display:none;}

.qstep h2{font-size:1.2rem;}
.qcount{font-family:var(--sans);font-size:.85rem;color:var(--tan-deep);margin-bottom:.3rem;}
.answers{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem;}
.answers button{font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--head);
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:.65rem 1rem;cursor:pointer;}
.answers button:hover,.answers button:focus-visible{border-color:var(--tan-deep);}

.rcard h2{font-size:1.2rem;}
.rcard .echo{font-family:var(--sans);font-size:.9rem;color:var(--tan-deep);margin-bottom:.5rem;}
.rcard ul{list-style:none;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;}
.rcard li{margin:0;}
.rcard a{font-family:var(--sans);font-weight:500;text-decoration:underline;}
.restart{margin-top:1rem;}
.restart button{font-family:var(--sans);font-size:.9rem;color:var(--tan-deep);background:none;
  border:none;text-decoration:underline;cursor:pointer;padding:0;}