@font-face{font-family:"Lato-Regular";src:url("fonts/lato-regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:"Lato-Black";src:url("fonts/lato-black.woff2") format("woff2");font-style:normal;font-weight:900;font-display:swap;}
/* MusikWerkstatt Akkordfinder — alle Regeln auf .mw-akkord-v4 begrenzt. */
.mw-akkord-v4 { --mw-akkord-v4-ink:#202020; --mw-akkord-v4-accent:#9a0002; --mw-akkord-v4-tint:#faf0f0; --mw-akkord-v4-line:#dedede; box-sizing:border-box; width:100%; max-width:1120px; margin:24px auto; color:var(--mw-akkord-v4-ink); background:#fff; font:400 16px/1.55 "Lato-Regular", "Lato", sans-serif; text-align:left; border:1px solid var(--mw-akkord-v4-line); border-radius:20px; overflow:hidden; }
.mw-akkord-v4 *, .mw-akkord-v4 *::before, .mw-akkord-v4 *::after { box-sizing:border-box; }
.mw-akkord-v4 [hidden] { display:none !important; }
.mw-akkord-v4 h2, .mw-akkord-v4 h3, .mw-akkord-v4 p { color:inherit; font-family:inherit; margin:0; text-transform:none; letter-spacing:normal; }
.mw-akkord-v4 h2 { font-size:clamp(1.65rem,4vw,2.3rem); font-weight:750; line-height:1.2; }
.mw-akkord-v4 h3 { font-size:1.1rem; font-weight:700; }
.mw-akkord-v4 .mw-akkord-v4-header { padding:28px 32px 22px; border-bottom:1px solid var(--mw-akkord-v4-line); }
.mw-akkord-v4 .mw-akkord-v4-kicker { color:var(--mw-akkord-v4-accent); font-size:.875rem; font-weight:700; margin-bottom:6px; }
.mw-akkord-v4 .mw-akkord-v4-sub { margin-top:10px; color:#555555; }
.mw-akkord-v4 .mw-akkord-v4-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.mw-akkord-v4 .mw-akkord-v4-builder { padding:28px 32px; }
.mw-akkord-v4 .mw-akkord-v4-steps { display:flex; gap:8px; margin-bottom:28px; }
.mw-akkord-v4 button { font:inherit; letter-spacing:normal; text-transform:none; cursor:pointer; margin:0; box-shadow:none; }
.mw-akkord-v4 .mw-akkord-v4-step { width:44px; height:44px; padding:0; border:1px solid var(--mw-akkord-v4-line); border-radius:50%; color:var(--mw-akkord-v4-ink); background:#fff; font-weight:700; }
.mw-akkord-v4 .mw-akkord-v4-step[aria-current="step"] { background:var(--mw-akkord-v4-accent); color:#fff; border-color:var(--mw-akkord-v4-accent); }
.mw-akkord-v4 fieldset { min-width:0; padding:0; margin:0; border:0; }
.mw-akkord-v4 legend { float:none; width:100%; margin:0 0 18px; padding:0; color:inherit; font:700 1.25rem/1.4 "Lato-Regular", "Lato", sans-serif; }
.mw-akkord-v4 .mw-akkord-v4-choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mw-akkord-v4 .mw-akkord-v4-choice { position:relative; display:flex; align-items:center; gap:10px; padding:13px 12px; margin:0; border:1px solid var(--mw-akkord-v4-line); border-radius:10px; cursor:pointer; font-weight:500; }
.mw-akkord-v4 .mw-akkord-v4-choice:has(input:checked) { background:var(--mw-akkord-v4-tint); border-color:var(--mw-akkord-v4-accent); }
.mw-akkord-v4 input { appearance:auto; -webkit-appearance:auto; position:static; width:18px; height:18px; flex:0 0 18px; margin:0; opacity:1; accent-color:var(--mw-akkord-v4-accent); }
.mw-akkord-v4 select { width:100%; height:52px; padding:10px 12px; border:1px solid var(--mw-akkord-v4-line); border-radius:10px; color:var(--mw-akkord-v4-ink); background:#fff; font:inherit; }
.mw-akkord-v4 .mw-akkord-v4-help { font-size:.875rem; color:#555555; margin-top:16px; }
.mw-akkord-v4 .mw-akkord-v4-actions { display:flex; justify-content:space-between; gap:12px; margin-top:28px; }
.mw-akkord-v4 .mw-akkord-v4-button { min-height:44px; padding:10px 18px; border-radius:9px; border:1px solid var(--mw-akkord-v4-line); color:var(--mw-akkord-v4-ink); background:#fff; font-weight:650; }
.mw-akkord-v4 .mw-akkord-v4-primary { color:#fff; background:var(--mw-akkord-v4-accent); border-color:var(--mw-akkord-v4-accent); }
.mw-akkord-v4 button:disabled { opacity:.4; cursor:default; }
.mw-akkord-v4 button:hover:not(:disabled) { filter:brightness(.94); }
.mw-akkord-v4 :is(button,input,select):focus-visible { outline:3px solid #9a0002; outline-offset:3px; }
.mw-akkord-v4 .mw-akkord-v4-result { padding:28px 32px; background:#f7f7f7; border-left:1px solid var(--mw-akkord-v4-line); }
.mw-akkord-v4 .mw-akkord-v4-symbol { font-size:clamp(2rem,5vw,3.3rem); line-height:1.25; font-weight:750; margin:8px 0 14px; overflow-wrap:anywhere; }
.mw-akkord-v4 .mw-akkord-v4-notes { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.mw-akkord-v4 .mw-akkord-v4-note { display:inline-grid; text-align:center; min-width:48px; padding:6px 10px; background:#fff; border:1px solid var(--mw-akkord-v4-line); border-radius:8px; font-weight:700; }
.mw-akkord-v4 .mw-akkord-v4-note small { font-size:.75rem; font-weight:400; color:#555555; }
.mw-akkord-v4 .mw-akkord-v4-diagram { margin:14px auto 0; max-width:255px; }
.mw-akkord-v4 svg { display:block; width:100%; height:auto; overflow:visible; }
.mw-akkord-v4 svg text { font-family:"Lato-Regular", "Lato", sans-serif; }
.mw-akkord-v4 .mw-akkord-v4-variants { display:flex; justify-content:center; align-items:center; gap:14px; margin:8px 0 12px; }
.mw-akkord-v4 .mw-akkord-v4-variant-label { font-size:.875rem; min-width:100px; text-align:center; }
.mw-akkord-v4 .mw-akkord-v4-frets { font:600 1rem/1.5 "Lato-Regular", "Lato", sans-serif; text-align:center; letter-spacing:3px; }
.mw-akkord-v4 .mw-akkord-v4-footer { padding:16px 32px; border-top:1px solid var(--mw-akkord-v4-line); color:#555555; font-size:.875rem; }
@media(max-width:720px) { .mw-akkord-v4 .mw-akkord-v4-layout { grid-template-columns:1fr; } .mw-akkord-v4 .mw-akkord-v4-result { border-left:0; border-top:1px solid var(--mw-akkord-v4-line); } .mw-akkord-v4 .mw-akkord-v4-header,.mw-akkord-v4 .mw-akkord-v4-builder,.mw-akkord-v4 .mw-akkord-v4-result { padding:24px 20px; } .mw-akkord-v4 .mw-akkord-v4-footer { padding:16px 20px; } }
@media(max-width:360px) { .mw-akkord-v4 .mw-akkord-v4-choices { grid-template-columns:1fr; } }

/* Werte aus der Website: Lato, 16px, #202020, #9a0002, Buttonradius 15px. */
.mw-akkord-v4 {border-radius:0;border:0;margin:0 auto;}
.mw-akkord-v4 .mw-akkord-v4-header{padding-top:36px;}
.mw-akkord-v4 h2{font-size:32px;font-family:"Lato-Black", "Lato", sans-serif;font-weight:normal;}
.mw-akkord-v4 .mw-akkord-v4-button,.mw-akkord-v4 .mw-akkord-v4-choice,.mw-akkord-v4 select{border-radius:15px;font-size:16px;}
.mw-akkord-v4 .mw-akkord-v4-button{padding:5px 15px;font-weight:normal;}
.mw-akkord-v4 .mw-akkord-v4-button:hover:not(:disabled){border-radius:25px;background:#202020;color:#fff;filter:none;}
.mw-akkord-v4 .mw-akkord-v4-primary{color:#fff!important;}
.mw-akkord-v4 .mw-akkord-v4-actions{flex-wrap:wrap;}
.mw-akkord-v4 .mw-akkord-v4-step{border-radius:15px;}
.mw-akkord-v4 .mw-akkord-v4-choice{min-height:48px;}
.mw-akkord-v4 .mw-akkord-v4-symbol{font-family:"Lato-Black", "Lato", sans-serif;font-weight:normal;}
.mw-akkord-v4 .mw-akkord-v4-result{min-width:0;}
@media(max-width:400px){.mw-akkord-v4 .mw-akkord-v4-header,.mw-akkord-v4 .mw-akkord-v4-builder,.mw-akkord-v4 .mw-akkord-v4-result{padding:24px 16px}.mw-akkord-v4 h2{font-size:28px}.mw-akkord-v4 .mw-akkord-v4-actions{gap:8px}.mw-akkord-v4 .mw-akkord-v4-button{padding:7px 11px}}

/* Referenz: gitarrenakkorde/css/style.css. Beide Schriftdateien liegen lokal im fonts-Ordner. */
.mw-akkord-v4 :is(button,input,select):focus-visible {outline:3px solid #9a0002 !important;outline-offset:3px;}
.mw-akkord-v4 .mw-akkord-v4-button:hover:not(:disabled) {color:#fff !important;}
.mw-akkord-v4 .mw-akkord-v4-kicker {color:#9a0002 !important;}
.mw-akkord-v4 .mw-akkord-v4-choice {min-width:0;overflow-wrap:anywhere;}
@media(max-width:991px){.mw-akkord-v4 .mw-akkord-v4-button,.mw-akkord-v4 .mw-akkord-v4-step{border-radius:25px;}}
@media(prefers-reduced-motion:reduce){.mw-akkord-v4 button{transition:none;}}

.mw-akkord-v4 .mw-akkord-v4-add {margin-bottom:12px;}
.mw-akkord-v4 [data-mode-help] {margin:0 0 18px;}

.mw-akkord-v4 .mw-akkord-v4-root{color:#9a0002;border-color:#9a0002;}
.mw-akkord-v4 .mw-akkord-v4-root small{color:#9a0002;}
.mw-akkord-v4 .mw-akkord-v4-add{margin-top:16px;}
.mw-akkord-v4 .mw-akkord-v4-choice:has(input:disabled){opacity:.55;cursor:default;}