/* Nur für MW Griffbrett-Notentrainer. Farben und Typografie aus CSS_Neu/style.css. */
@font-face{font-family:MWGBNV5Lato;src:url('./fonts/mw-gbn-v5-lato-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:MWGBNV5Lato;src:url('./fonts/mw-gbn-v5-lato-black.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap}
.mw-gbn-v5{--mw-gbn-v5-accent:#9a0002;--mw-gbn-v5-ink:#202020;box-sizing:border-box;width:100%;max-width:960px;margin:24px auto;padding:clamp(16px,4vw,40px);border:1px solid #dedbd8;border-radius:20px;background:#fff;color:var(--mw-gbn-v5-ink);font:400 16px/1.55 MWGBNV5Lato,Arial,sans-serif;text-align:left;color-scheme:light}
.mw-gbn-v5 *{box-sizing:border-box}
.mw-gbn-v5 [hidden]{display:none!important}
.mw-gbn-v5 h2,.mw-gbn-v5 p,.mw-gbn-v5 label,.mw-gbn-v5 button,.mw-gbn-v5 select{font-family:MWGBNV5Lato,Arial,sans-serif;color:var(--mw-gbn-v5-ink)!important}
.mw-gbn-v5 h2{font-size:2em;line-height:1.2;font-weight:900;margin:10px 0 16px}
.mw-gbn-v5 p{font-size:16px;line-height:1.55;margin:0 0 20px}
.mw-gbn-v5 strong{font-weight:900}
.mw-gbn-v5__eyebrow{font-size:.9em;letter-spacing:.1em;color:var(--mw-gbn-v5-accent)}
.mw-gbn-v5__settings{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:20px 0;border-top:1px solid #eee}
.mw-gbn-v5__mode{display:grid;gap:6px;flex:1;min-width:0;font-size:16px}
.mw-gbn-v5 select{width:100%;min-height:46px;padding:9px 34px 9px 12px;border:1px solid #aaa;border-radius:8px;background:#fff;font-size:16px}
.mw-gbn-v5__check{display:flex;align-items:center;gap:10px;cursor:pointer;flex:1;min-width:220px}
.mw-gbn-v5 input{width:21px;height:21px;flex-shrink:0;accent-color:var(--mw-gbn-v5-accent);margin:0}
.mw-gbn-v5 small{display:block;font-size:.9em;color:#616161}
.mw-gbn-v5__toolbar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.9em;margin:8px 0 12px}
.mw-gbn-v5__toolbar>span:first-child{font-weight:900}
.mw-gbn-v5__board{padding:10px 0;background:#f7f5f2;border:1px solid #e4ded7;border-radius:12px;overflow:hidden}
.mw-gbn-v5__board svg{display:block;width:100%;height:auto}
.mw-gbn-v5 .mw-gbn-v5__hint{margin:16px 0;text-align:center}
.mw-gbn-v5__answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mw-gbn-v5 button{font-size:16px;line-height:1.3;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mw-gbn-v5 .mw-gbn-v5__answer{min-width:0;padding:8px 4px 12px;background:#fff;border:1px solid #c9c7c4;border-radius:12px;transition:background .15s,border-color .15s}
.mw-gbn-v5__answer svg{display:block;width:100%;height:154px;color:#202020}
.mw-gbn-v5__answer span{font-size:1.3em;font-weight:900}
.mw-gbn-v5 .mw-gbn-v5__answer:hover:not(:disabled){border-color:var(--mw-gbn-v5-accent);background:#fff7f7}
.mw-gbn-v5 .mw-gbn-v5__answer[data-result="correct"]{border:2px solid #25613d;background:#edf6ef}
.mw-gbn-v5 .mw-gbn-v5__answer[data-result="wrong"]{border:2px solid var(--mw-gbn-v5-accent);background:#fff0f0}
.mw-gbn-v5__answer:disabled{cursor:default;opacity:1}
.mw-gbn-v5__answer small{font-size:12px;margin-top:4px;min-height:19px}
.mw-gbn-v5 .mw-gbn-v5__feedback{text-align:center;min-height:50px;margin:18px 0 8px}
.mw-gbn-v5__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.mw-gbn-v5 .mw-gbn-v5__primary,.mw-gbn-v5 .mw-gbn-v5__reset{border:1px solid var(--mw-gbn-v5-accent);border-radius:25px;min-height:44px;padding:5px 15px;font-size:16px}
.mw-gbn-v5 .mw-gbn-v5__primary{background:var(--mw-gbn-v5-accent);color:#fff!important;min-width:160px}
.mw-gbn-v5 .mw-gbn-v5__reset{background:#fff;border-color:#aaa}
.mw-gbn-v5 .mw-gbn-v5__primary:hover{background:#202020;border-color:#202020}
.mw-gbn-v5 button:focus-visible,.mw-gbn-v5 select:focus-visible,.mw-gbn-v5 input:focus-visible{outline:3px solid #202020!important;outline-offset:4px}
.mw-gbn-v5__footer{font-size:.9em;color:#616161;margin-top:24px;padding-top:18px;border-top:1px solid #eee}
@media(max-width:575px){.mw-gbn-v5 h2{font-size:1.8em}.mw-gbn-v5__settings{gap:16px}.mw-gbn-v5__mode,.mw-gbn-v5__check{flex-basis:100%;min-width:0}.mw-gbn-v5__answers{gap:7px}.mw-gbn-v5__answer svg{height:138px}.mw-gbn-v5__actions>button{width:100%}}
@media(prefers-reduced-motion:reduce){.mw-gbn-v5 button{transition:none}}

/* Zweite Übungsrichtung; eigene Touch-Flächen über dem Griffbrett. */
.mw-gbn-v5__directions,.mw-gbn-v5__navigation{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.mw-gbn-v5__directions button,.mw-gbn-v5__navigation button{min-height:44px;padding:8px 15px;border:1px solid #aaa;border-radius:25px;background:#fff;flex:1}
.mw-gbn-v5__directions button[aria-pressed="true"]{background:#9a0002;color:#fff!important;border-color:#9a0002}
.mw-gbn-v5__navigation button:disabled{opacity:.45;cursor:default}
.mw-gbn-v5__target{width:160px;margin:0 auto 20px;text-align:center;border:1px solid #dedbd8;border-radius:12px;padding:8px}
.mw-gbn-v5__target svg{display:block;width:100%;height:165px;color:#202020}
.mw-gbn-v5__target strong{font-size:1.3em}
.mw-gbn-v5__board{position:relative;padding:0}
.mw-gbn-v5__frets{position:absolute;inset:0}
.mw-gbn-v5 .mw-gbn-v5__fret{position:absolute;transform:translate(-50%,-50%);min-width:24px;min-height:24px;border:1px solid transparent;border-radius:8px;background:transparent;padding:0;font-size:20px;line-height:1;touch-action:manipulation}
.mw-gbn-v5 .mw-gbn-v5__fret:hover:not(:disabled){background:rgba(154,0,2,.12);border-color:#9a0002}
.mw-gbn-v5 .mw-gbn-v5__fret[data-result="correct"]{background:#edf6ef;color:#25613d!important;border-color:#25613d}
.mw-gbn-v5 .mw-gbn-v5__fret[data-result="wrong"]{background:#fff0f0;color:#9a0002!important;border-color:#9a0002}
.mw-gbn-v5__fret:disabled{cursor:default}

/* V5: kompakteres Such-Griffbrett, mittig und ohne übermäßiges Hochskalieren. */
.mw-gbn-v5__board[data-direction="reverse"]{width:100%;max-width:560px;margin-inline:auto}