@font-face{font-family:MWReverseNewLato;src:url("fonts/lato-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:MWReverseNewLato;src:url("fonts/lato-black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
/* Abgestimmt auf gitarrenakkorde/css/style.css. Nur dieses Tool wird gestaltet. */
.mw-reverse-new{--mwrn-accent:#9a0002;--mwrn-ink:#202020;--mwrn-line:#dedede;box-sizing:border-box;width:100%;max-width:1120px;margin:0 auto;background:#fff;color:var(--mwrn-ink);font:400 16px/1.55 MWReverseNewLato,sans-serif;text-align:left}
.mw-reverse-new *,.mw-reverse-new *::before,.mw-reverse-new *::after{box-sizing:border-box}
.mw-reverse-new h2,.mw-reverse-new h3,.mw-reverse-new p{font-family:inherit;color:inherit;letter-spacing:normal;text-transform:none;margin:0}
.mw-reverse-new .mwrn-header{padding:36px 32px 24px;border-bottom:1px solid var(--mwrn-line)}
.mw-reverse-new h2{font-size:32px;line-height:1.2;font-weight:900;margin:6px 0 12px}
.mw-reverse-new .mwrn-kicker{font-size:14px;color:var(--mwrn-accent);font-weight:900}
.mw-reverse-new .mwrn-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mw-reverse-new .mwrn-builder,.mw-reverse-new .mwrn-results{padding:28px 32px;min-width:0}
.mw-reverse-new .mwrn-results{background:#f7f7f7;border-left:1px solid var(--mwrn-line)}
.mw-reverse-new .mwrn-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.mw-reverse-new label{font:inherit;margin:0;display:block}
.mw-reverse-new button,.mw-reverse-new select{font:inherit;text-transform:none;letter-spacing:normal;box-shadow:none;cursor:pointer;color:var(--mwrn-ink)}
.mw-reverse-new select{display:block;width:155px;max-width:100%;height:48px;padding:8px 12px;border:1px solid var(--mwrn-line);border-radius:15px;background:#fff;margin-top:6px}
.mw-reverse-new .mwrn-reset{background:var(--mwrn-accent);color:#fff;border:1px solid var(--mwrn-accent);border-radius:15px;min-height:48px;padding:5px 15px;margin:0}
.mw-reverse-new .mwrn-reset:hover{background:#202020;border-color:#202020;border-radius:25px}
.mw-reverse-new :is(button,select):focus-visible{outline:3px solid var(--mwrn-accent);outline-offset:2px;z-index:3}
.mw-reverse-new .mwrn-board{display:grid;grid-template-columns:24px repeat(6,minmax(0,1fr));width:100%;max-width:350px;margin:0 auto 20px}
.mw-reverse-new .mwrn-string{font-size:14px;text-align:center;padding:4px 0}
.mw-reverse-new .mwrn-row-label{align-self:center;font-size:14px;color:#555;text-align:left}
.mw-reverse-new .mwrn-board button{display:grid;place-items:center;position:relative;width:100%;min-width:0;margin:0;padding:0;border-radius:0;touch-action:manipulation}
.mw-reverse-new .mwrn-state{height:44px;background:transparent;border:0;font-size:24px}
.mw-reverse-new .mwrn-state[aria-pressed=true]{color:var(--mwrn-accent);font-weight:900;background:#faf0f0;border-radius:12px}
.mw-reverse-new .mwrn-cell{height:58px;background:linear-gradient(to right,transparent calc(50% - .75px),#777 calc(50% - .75px),#777 calc(50% + .75px),transparent calc(50% + .75px));border:0;border-top:1px solid #888}
.mw-reverse-new .mwrn-cell:nth-last-child(-n+6){border-bottom:1px solid #888}
.mw-reverse-new .mwrn-cell[data-fret="0"]{margin-top:12px}
.mw-reverse-new.mwrn-nut .mwrn-cell[data-fret="0"],.mw-reverse-new .mwrn-nut .mwrn-cell[data-fret="0"]{border-top:4px solid #202020}
.mw-reverse-new .mwrn-dot{width:27px;height:27px;background:var(--mwrn-accent);border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px var(--mwrn-accent)}
@media(hover:hover){.mw-reverse-new .mwrn-cell:hover{background-color:#faf0f0}.mw-reverse-new .mwrn-state:hover{background-color:#f4e5e5}}
.mw-reverse-new .mwrn-help{font-size:14px;color:#555;margin-top:18px}
.mw-reverse-new .mwrn-position{margin-top:12px;letter-spacing:2px;font-size:14px}
.mw-reverse-new .mwrn-empty{font-weight:900;font-size:24px;line-height:1.3;margin:12px 0}
.mw-reverse-new .mwrn-symbol{font-weight:900;font-size:clamp(30px,4vw,50px);line-height:1.2;overflow-wrap:anywhere;margin:10px 0 12px}
.mw-reverse-new .mwrn-tones{padding:16px 0;margin:16px 0;border-top:1px solid var(--mwrn-line);border-bottom:1px solid var(--mwrn-line)}
.mw-reverse-new .mwrn-alternative-title{font-size:18px;font-weight:900;margin:22px 0 12px}
.mw-reverse-new .mwrn-alternative-title span{font-size:16px;font-weight:400;color:#555}
.mw-reverse-new .mwrn-alternatives{list-style:none;margin:0;padding:0;max-height:390px;overflow-y:auto;overscroll-behavior:contain}
.mw-reverse-new .mwrn-alternatives li{background:#fff;border:1px solid var(--mwrn-line);border-radius:15px;padding:12px 16px;margin:0 0 8px;overflow-wrap:anywhere}
.mw-reverse-new .mwrn-alternatives strong{display:block;font-size:20px;font-weight:900}
.mw-reverse-new .mwrn-alternatives li span{display:block;font-size:14px;color:#555}
.mw-reverse-new .mwrn-footer{padding:16px 32px;border-top:1px solid var(--mwrn-line);font-size:14px;color:#555}
@media(max-width:720px){.mw-reverse-new .mwrn-layout{grid-template-columns:1fr}.mw-reverse-new .mwrn-results{border-left:0;border-top:1px solid var(--mwrn-line)}.mw-reverse-new .mwrn-header,.mw-reverse-new .mwrn-builder,.mw-reverse-new .mwrn-results{padding:24px 20px}.mw-reverse-new .mwrn-footer{padding:16px 20px}}
@media(max-width:400px){.mw-reverse-new h2{font-size:28px}.mw-reverse-new .mwrn-header,.mw-reverse-new .mwrn-builder,.mw-reverse-new .mwrn-results{padding:24px 12px}.mw-reverse-new .mwrn-toolbar{gap:12px}.mw-reverse-new select{width:138px}.mw-reverse-new .mwrn-reset{padding:5px 12px}.mw-reverse-new .mwrn-board{grid-template-columns:20px repeat(6,minmax(0,1fr))}}
@media(max-width:991px){.mw-reverse-new .mwrn-reset{border-radius:25px}}

.mw-reverse-new :is(h2,h3,p,label){color:inherit!important}
.mw-reverse-new .mwrn-kicker{color:var(--mwrn-accent)!important}
.mw-reverse-new .mwrn-reset{color:#fff!important}
.mw-reverse-new :is(button,select):focus-visible{outline:3px solid var(--mwrn-accent)!important;outline-offset:2px}
.mw-reverse-new{container-type:inline-size}
@container(max-width:650px){.mw-reverse-new .mwrn-layout{grid-template-columns:1fr}.mw-reverse-new .mwrn-results{border-left:0;border-top:1px solid var(--mwrn-line)}}