.wsm-quiz{--wsm-text:#111;--wsm-muted:#666;--wsm-border:#d9d9d9;--wsm-soft:#f5f5f5;--wsm-good:#167a3f;--wsm-bad:#b42318;box-sizing:border-box;max-width:720px;margin:1.5rem auto;padding:clamp(18px,4vw,34px);background:#fff;color:var(--wsm-text);border:2px solid #111;border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,.08);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wsm-quiz *{box-sizing:border-box}.wsm-progress{height:12px;background:#ececec;border-radius:999px;overflow:hidden}.wsm-progress span{display:block;height:100%;width:0;background:#111;transition:width .25s ease}.wsm-counter{font-weight:700;color:var(--wsm-muted);margin:10px 0 16px}.wsm-question{font-size:clamp(1.35rem,5vw,2rem);line-height:1.2;margin:0 0 18px}.wsm-answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wsm-answer{display:flex;align-items:center;gap:12px;text-align:left;min-height:70px;width:100%;padding:12px 15px;background:#fff;border:2px solid #111;border-radius:16px;font-size:clamp(1.05rem,4vw,1.25rem);font-weight:700;cursor:pointer;transition:transform .08s ease,background .15s ease,border-color .15s ease;text-transform:none!important;font-variant-caps:normal!important}.wsm-answer:hover,.wsm-answer:focus-visible{transform:translateY(-1px);outline:4px solid rgba(0,0,0,.12);outline-offset:2px}.wsm-answer:disabled{cursor:default;opacity:1}.wsm-letter{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#111;color:#fff;font-weight:800;flex:0 0 36px}.wsm-answer.is-correct{border-color:var(--wsm-good);background:#ecfdf3}.wsm-answer.is-correct .wsm-letter{background:var(--wsm-good)}.wsm-answer.is-wrong{border-color:var(--wsm-bad);background:#fff1f0}.wsm-answer.is-wrong .wsm-letter{background:var(--wsm-bad)}.wsm-feedback{margin-top:14px;padding:12px 15px;border-radius:14px;font-size:1rem;font-weight:700;line-height:1.35}.wsm-feedback.is-correct{background:#ecfdf3;color:#0f5d30}.wsm-feedback.is-wrong{background:#fff1f0;color:#8f1912}.wsm-next,.wsm-restart{display:block;width:100%;margin-top:14px;padding:14px 18px;border:0;border-radius:14px;background:#111;color:#fff;font-size:1.08rem;font-weight:800;cursor:pointer}.wsm-next:focus-visible,.wsm-restart:focus-visible{outline:4px solid rgba(0,0,0,.2);outline-offset:3px}.wsm-result{text-align:center;padding:24px 0 8px}.wsm-score{font-size:clamp(2.4rem,12vw,4.5rem);font-weight:900;line-height:1}.wsm-result p{font-size:1.2rem}.wsm-footer{margin-top:20px;padding-top:14px;border-top:1px solid var(--wsm-border);color:var(--wsm-muted);font-size:.9rem;text-align:center}.wsm-qr{text-align:center}.wsm-qr img{max-width:100%;height:auto;background:#fff;padding:10px;border:1px solid #ddd}.wsm-qr p{overflow-wrap:anywhere}

/* Startseite */
.wsm-start{text-align:center;padding:6px 4px 10px}.wsm-start-art{height:150px;position:relative;max-width:360px;margin:0 auto 8px}.wsm-cartoon-bubble{position:absolute;left:32px;top:8px;background:#0b71b8;color:#fff;border-radius:28px;padding:16px 22px;font-weight:900;font-size:1.45rem;line-height:1.05;text-align:left;transform:rotate(-3deg);box-shadow:0 7px 0 rgba(0,0,0,.1)}.wsm-cartoon-bubble:after{content:"";position:absolute;right:-18px;bottom:10px;border:18px solid transparent;border-left-color:#0b71b8;border-right:0}.wsm-cartoon-pencil{position:absolute;right:40px;bottom:0;font-size:5rem;transform:rotate(-18deg);filter:drop-shadow(0 5px 0 rgba(0,0,0,.12))}.wsm-start-kicker{margin:0;color:var(--wsm-muted);font-size:1.05rem;font-weight:700}.wsm-start h1{margin:6px 0 10px;color:#0b71b8;font-size:clamp(2rem,8vw,3.15rem);line-height:1.02;text-transform:none}.wsm-start-text{max-width:520px;margin:0 auto 20px;color:#444;font-size:1.15rem;line-height:1.45}.wsm-start-button{width:100%;max-width:420px;padding:16px 24px;border:0;border-radius:16px;background:#111;color:#fff;font-size:1.25rem;font-weight:900;cursor:pointer;text-transform:none!important}

/* Kompakter Kopf während des Spiels */
.wsm-compact-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:var(--wsm-muted);font-size:.95rem;font-weight:700}.wsm-mini-badge{background:#111;color:#fff;border-radius:7px;padding:5px 9px;font-weight:900}.wsm-play[hidden],.wsm-start[hidden]{display:none!important}

/* Ergebnisaktionen */
.wsm-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.wsm-result-actions .wsm-restart,.wsm-result-actions .wsm-new-quiz{margin-top:0}.wsm-new-quiz{display:block;width:100%;padding:14px 18px;border:2px solid #111;border-radius:14px;background:#fff;color:#111;font-size:1.08rem;font-weight:800;cursor:pointer;text-transform:none!important}.wsm-new-quiz:focus-visible{outline:4px solid rgba(0,0,0,.2);outline-offset:3px}

/* Smartphone: möglichst komplette Frage ohne Scrollen */
@media(max-width:560px){
  .wsm-quiz{margin:0;border-left:0;border-right:0;border-radius:0;min-height:auto;padding:16px 18px 18px}
  .wsm-compact-head{margin-bottom:8px;font-size:.9rem}
  .wsm-progress{height:10px}
  .wsm-counter{font-size:1.08rem;margin:9px 0 13px}
  .wsm-question{font-size:clamp(1.45rem,6.4vw,1.85rem);line-height:1.15;margin-bottom:15px}
  .wsm-answers{grid-template-columns:1fr;gap:10px}
  .wsm-answer{min-height:64px;padding:10px 14px;gap:10px;font-size:clamp(1.45rem,6.4vw,1.72rem)!important;line-height:1.08;white-space:nowrap}
  .wsm-answer-text{min-width:0;white-space:nowrap;font-size:inherit!important;line-height:1.08!important;text-transform:none!important}
  .wsm-answer-text.is-long{font-size:.91em}
  .wsm-answer-text.is-very-long{font-size:.82em}
  .wsm-letter{width:38px;height:38px;flex-basis:38px;font-size:1.15rem}
  .wsm-next,.wsm-restart,.wsm-new-quiz{font-size:1.15rem;padding:13px 16px;margin-top:12px}
  .wsm-feedback{font-size:1.08rem;margin-top:12px;padding:11px 13px}
  .wsm-footer{margin-top:16px;padding-top:12px;font-size:.84rem}
  .wsm-result-actions{grid-template-columns:1fr}
  .wsm-start{padding-top:2px}
  .wsm-start-art{height:125px;margin-bottom:4px}
  .wsm-cartoon-bubble{left:14px;top:4px;font-size:1.2rem;padding:13px 18px;border-radius:22px}
  .wsm-cartoon-pencil{right:22px;font-size:4.2rem}
  .wsm-start h1{font-size:clamp(2rem,9vw,2.6rem)}
  .wsm-start-text{font-size:1.08rem;margin-bottom:18px}
}
@media(max-width:380px){
  .wsm-quiz{padding-left:14px;padding-right:14px}
  .wsm-question{font-size:clamp(1.32rem,6.1vw,1.62rem)}
  .wsm-answer{font-size:clamp(1.32rem,5.8vw,1.52rem)!important;padding-left:11px;padding-right:11px;gap:8px;min-height:60px}
  .wsm-letter{width:34px;height:34px;flex-basis:34px;font-size:1.05rem}
}
@media(max-height:760px) and (max-width:560px){
  .wsm-quiz{padding-top:12px;padding-bottom:12px}
  .wsm-compact-head{display:none}
  .wsm-counter{margin:7px 0 10px}
  .wsm-question{font-size:1.36rem;margin-bottom:11px}
  .wsm-answers{gap:8px}
  .wsm-answer{min-height:56px;padding-top:8px;padding-bottom:8px}
  .wsm-next{padding-top:11px;padding-bottom:11px}
  .wsm-footer{display:none}
}
@media(prefers-reduced-motion:reduce){.wsm-quiz *{transition:none!important;scroll-behavior:auto!important}}

/* v0.5.4: groessere Beschriftung der Navigationsbuttons */
.wsm-start-button,.wsm-next,.wsm-new-quiz{font-size:1.5rem!important;line-height:1.15!important;font-weight:800!important}
@media(max-width:560px){
  .wsm-start-button,.wsm-next,.wsm-new-quiz{font-size:clamp(1.42rem,6vw,1.65rem)!important;line-height:1.12!important}
}
@media(max-width:380px){
  .wsm-start-button,.wsm-next,.wsm-new-quiz{font-size:1.38rem!important}
}

/* v0.5.5: Ergebnisbutton Noch einmal spielen gleich gross wie Neues Quiz */
.wsm-result-actions .wsm-restart{font-size:1.5rem!important;line-height:1.15!important;font-weight:800!important}
@media(max-width:560px){.wsm-result-actions .wsm-restart{font-size:clamp(1.42rem,6vw,1.65rem)!important;line-height:1.12!important}}
@media(max-width:380px){.wsm-result-actions .wsm-restart{font-size:1.38rem!important}}

/* v0.5.7: Desktop-Bleistift rechts oben, ohne Textueberdeckung */
@media(min-width:561px){
  .wsm-start-art{max-width:520px;height:150px}
  .wsm-cartoon-bubble{left:35px;top:8px}
  .wsm-cartoon-pencil{right:18px;top:8px;bottom:auto;font-size:4.6rem;transform:rotate(-18deg)}
}

/* v0.5.8: Desktop-Startmotiv nach Referenzbild ausrichten */
@media(min-width:561px){
  .wsm-start-art{max-width:520px;height:175px;margin:0 auto 2px}
  .wsm-cartoon-bubble{left:34px;top:10px}
  .wsm-cartoon-pencil{right:42px;top:28px;bottom:auto;font-size:4.4rem;transform:rotate(-18deg)}
  .wsm-start-kicker{margin-top:0}
}

/* v0.5.9: Sprechblase ohne blaues Dreieck */
.wsm-cartoon-bubble:after{display:none!important;content:none!important}


/* v0.5.10: identisches Bleistiftmotiv auf Desktop und Mobilgeraeten (kein plattformabhaengiges Emoji) */
.wsm-cartoon-pencil{position:absolute;right:40px;bottom:0;width:58px;height:122px;font-size:0!important;line-height:0;transform:rotate(-10deg);filter:drop-shadow(0 5px 0 rgba(0,0,0,.12))}
.wsm-cartoon-pencil svg{display:block;width:100%;height:100%;overflow:visible}
@media(max-width:560px){
  .wsm-cartoon-pencil{right:24px;top:8px;bottom:auto;width:54px;height:112px;transform:rotate(-10deg)}
}
@media(min-width:561px){
  .wsm-cartoon-pencil{right:42px;top:24px;bottom:auto;width:54px;height:116px;transform:rotate(-10deg)}
}

/* v0.5.11: identische Referenz-Startseite auf Desktop und Mobil */
.wsm-start-image{padding:0!important;margin:0!important;text-align:initial}
.wsm-start-image-wrap{position:relative;width:100%;line-height:0}
.wsm-start-reference{display:block;width:100%;height:auto;margin:0;padding:0;border:0;border-radius:0;box-shadow:none}
.wsm-start-image-button{position:absolute;left:20.8%;top:81.9%;width:58.4%;height:11.8%;margin:0!important;padding:0!important;border:0!important;border-radius:18px;background:transparent!important;color:transparent!important;box-shadow:none!important;cursor:pointer;appearance:none;-webkit-appearance:none;line-height:1!important}
.wsm-start-image-button span{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.wsm-start-image-button:focus-visible{outline:5px solid rgba(0,113,184,.75)!important;outline-offset:4px!important}
.wsm-quiz:has(.wsm-start-image:not([hidden])){padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;overflow:visible}
@media(max-width:560px){
  .wsm-quiz:has(.wsm-start-image:not([hidden])){margin:0!important;padding:0!important}
  .wsm-start-image-button{border-radius:12px}
}


/* v0.5.12: Desktop-Referenzbild beibehalten; mobile Startseite wieder im Hochformat wie vor v0.5.11 */
.wsm-start-desktop{display:block}
.wsm-start-mobile{display:none}
@media(max-width:560px){
  .wsm-start-desktop{display:none!important}
  .wsm-start-mobile{display:block!important;text-align:center;padding:2px 0 10px}
  .wsm-quiz:has(.wsm-start-image:not([hidden])){padding:16px 18px 18px!important;background:#fff!important;border-top:0!important;border-bottom:2px solid #111!important;overflow:visible!important}
  .wsm-start-image{padding:0!important}
  .wsm-start-mobile .wsm-start-art{height:150px;max-width:360px;margin:0 auto 6px;position:relative}
  .wsm-start-mobile .wsm-cartoon-bubble{left:24px;top:8px;padding:14px 19px;border-radius:24px;font-size:1.35rem;line-height:1.04}
  .wsm-start-mobile .wsm-cartoon-pencil{right:28px;top:18px;bottom:auto;width:54px;height:116px;transform:rotate(-10deg)}
  .wsm-start-mobile .wsm-start-kicker{font-size:1.12rem;margin:0 0 5px}
  .wsm-start-mobile h1{font-size:clamp(2.05rem,9.1vw,2.62rem);line-height:1.04;margin:4px 0 12px}
  .wsm-start-mobile .wsm-start-text{font-size:1.12rem;line-height:1.42;margin:0 auto 18px;max-width:520px}
  .wsm-start-mobile .wsm-start-button{max-width:none;width:100%;padding:17px 20px;border-radius:18px;background:#f57900;color:#fff}
}
@media(max-width:380px){
  .wsm-start-mobile .wsm-start-art{height:138px}
  .wsm-start-mobile .wsm-cartoon-bubble{left:14px;font-size:1.23rem}
  .wsm-start-mobile .wsm-cartoon-pencil{right:18px;width:50px;height:108px}
  .wsm-start-mobile h1{font-size:2rem}
  .wsm-start-mobile .wsm-start-text{font-size:1.04rem}
}


/* v0.6.2: Social-Media-Abschluss mit Link zur Grundbildungs-Startseite */
.wsm-result-actions .wsm-info-link{display:flex;align-items:center;justify-content:center;width:100%;margin-top:0;padding:14px 18px;border:2px solid #111;border-radius:14px;background:#fff;color:#111;font-size:1.5rem!important;line-height:1.15!important;font-weight:800!important;text-decoration:none!important;text-transform:none!important;text-align:center}
.wsm-result-actions .wsm-info-link:hover,.wsm-result-actions .wsm-info-link:focus-visible{color:#111;text-decoration:none!important;outline:4px solid rgba(0,0,0,.2);outline-offset:3px}
@media(max-width:560px){.wsm-result-actions .wsm-info-link{font-size:clamp(1.42rem,6vw,1.65rem)!important;line-height:1.12!important;padding:13px 16px}}
@media(max-width:380px){.wsm-result-actions .wsm-info-link{font-size:1.38rem!important}}
