/* ============================================================
   Gitaar — visueel systeem: "de toets"
   De ondergrond is palissander, het hout van de toets. Lijnen zijn
   nikkel, zoals de frets. Tekst en greeppunten zijn parelmoer, zoals
   de inlegpunten. Kleur draagt betekenis: brons is spelen (de omwonden
   snaren), staal is luisteren (gehoortraining).
   Het scherm staat op een standaard op een meter afstand: grote letters,
   grote knoppen, weinig tikken.
   ============================================================ */
:root{
  --palisander:#231814; --hout:#2E211B; --hout2:#3A2A22; --lijn:#4B3A30;
  --nikkel:#A7AAAD; --been:#E6DCC8; --parel:#F0EAE1; --stof:#B9AA9B;
  --brons:#D9A24B; --staal:#8FBCD4; --goed:#A5CF8F; --fout:#EC8C73;
  --accent:var(--brons);
  --r:10px; --tik:60px;
  color-scheme:dark;
}
[data-lijn="gehoortraining"]{--accent:var(--staal)}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:112.5%}
@media (min-width:820px){ html{font-size:125%} }
body{
  margin:0;background:var(--palisander);color:var(--parel);
  font-family:"Avenir Next","Avenir","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom);
}
.app{max-width:1080px;margin:0 auto;padding:24px 20px 56px}
[hidden]{display:none!important}

h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin:.2em 0 .25em}
h2{font-size:1.25rem;font-weight:600;line-height:1.3;margin:0 0 .4em}
h3{font-size:1rem;font-weight:600;color:var(--stof);margin:1.4em 0 .4em}
p{margin:0 0 .8em;max-width:62ch}
.sub{color:var(--stof)}
.muted{color:var(--stof);font-size:.9rem}
code{font-family:"Menlo","SF Mono",ui-monospace,monospace;font-size:.85em;background:var(--hout2);padding:.1em .35em;border-radius:5px}
a{color:var(--accent)}

/* ---- knoppen ---- */
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;padding:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.knop{display:block;width:100%;min-height:var(--tik);padding:14px 20px;border-radius:var(--r);
  background:var(--accent);color:var(--palisander);font-weight:700;font-size:1.05rem}
.knop:active{transform:translateY(1px)}
.knop-tweede{display:block;width:100%;min-height:var(--tik);padding:12px 18px;border-radius:var(--r);
  border:2px solid var(--accent);color:var(--accent);font-weight:600}
.knop-tweede:active{background:var(--hout2)}
.knop-stil{padding:10px 12px;border-radius:8px;color:var(--stof);font-size:.95rem}
.knop-stil:active{background:var(--hout2)}
.knop+.knop-tweede,.knop-tweede+.knop,.knop-tweede+.knop-tweede,.knop-tweede+.teller{margin-top:10px}

/* ---- profielen en nieuw profiel ---- */
.profielen{display:grid;gap:12px;margin:0 0 16px;max-width:640px}
.profiel{display:flex;gap:8px;align-items:center}
.profiel-knop{flex:1;text-align:left;padding:18px 20px;border-radius:var(--r);background:var(--hout);border:1px solid var(--lijn)}
.profiel-knop b{display:block;font-size:1.35rem}
.profiel-knop span{color:var(--stof);font-size:.9rem}
#profielen>.knop-tweede,#nieuw{max-width:640px}
.terug{margin-left:-12px}
.veld{display:block;margin:0 0 22px}
.veld span{display:block;color:var(--stof);margin-bottom:6px}
.veld input{width:100%;font:inherit;font-size:1.2rem;padding:14px 16px;border-radius:var(--r);
  border:1px solid var(--lijn);background:var(--hout);color:var(--parel)}
.keuzes{border:none;padding:0;margin:0 0 12px}
.keuzes legend{color:var(--stof);margin-bottom:8px;padding:0}
.keuze{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r);
  background:var(--hout);border:2px solid var(--lijn);margin-bottom:10px;cursor:pointer}
.keuze:has(input:checked){border-color:var(--brons)}
.keuze input{margin-top:5px;accent-color:var(--brons);width:22px;height:22px;flex:none}
.keuze span{color:var(--stof)}
.keuze b{display:block;font-size:1.1rem;color:var(--parel)}
.nw-etappe{display:block;width:100%;margin-top:10px;font:inherit;font-size:.95rem;padding:10px 36px 10px 12px;border-radius:8px;border:1px solid var(--lijn);color:var(--parel);-webkit-appearance:none;appearance:none;
  background:var(--hout2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23B9AA9B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center}
.nw-graden{display:grid;grid-template-columns:repeat(auto-fill,minmax(10em,1fr));gap:0 14px;margin:6px 0 10px}
.nw-graden .veld{margin:0 0 14px}
.lijn-stand{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(12em,1fr));gap:4px 24px}
.lijn-stand li{display:flex;flex-direction:column;padding:6px 0;border-bottom:1px solid var(--lijn)}
.lijn-stand li span:last-child{font-size:.9rem}
.lijn-stand .wacht{color:var(--staal);font-size:.9rem}
.nog{list-style:none;padding:0;margin:4px 0 12px;max-width:760px}
.nog li{display:flex;justify-content:space-between;gap:16px;padding:5px 0;border-bottom:1px solid var(--lijn)}
.nog li span:last-child{text-align:right}
@media (max-width:600px){ .nog li{flex-direction:column;gap:0} .nog li span:last-child{text-align:left} }
.stand .route-knop{margin-top:6px}
.stand .knop-tweede.route-knop{display:inline-block;width:auto;min-height:0;padding:10px 18px}
.kies{color:var(--parel);font-weight:600}
#route{max-width:760px}

/* ---- home ---- */
.kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.kop-knoppen{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.stand{padding:20px 22px;border-radius:var(--r);background:var(--hout);margin:6px 0 24px}
.stand p:last-child{margin-bottom:0}
.plek{color:var(--stof);margin:0 0 2px}

/* De modules van een etappe als de hals van de gitaar: de kam links,
   frets als nikkel strepen, inlegpunten op 3, 5 en 7. */
.hals{list-style:none;display:flex;padding:0;margin:14px 0 34px;max-width:620px;
  border-left:7px solid var(--been);border-radius:2px}
.hals li{position:relative;flex:1;height:46px;background:#3B261C;border-right:3px solid var(--nikkel)}
.hals li.inleg::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--parel);opacity:.4}
.hals li.af{background:linear-gradient(transparent 44%,var(--brons) 44%,var(--brons) 56%,transparent 56%),#3B261C}
.hals li.nu{box-shadow:inset 0 0 0 3px var(--brons)}
.hals li span{position:absolute;top:100%;left:0;right:0;text-align:center;font-size:.8rem;color:var(--stof);padding-top:4px}
.hals li.nu span{color:var(--brons);font-weight:700}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--lijn);margin:0 0 8px;overflow-x:auto}
.tabs button{padding:12px 16px;color:var(--stof);border-bottom:3px solid transparent;margin-bottom:-1px;font-weight:600;white-space:nowrap}
.tabs button.actief{color:var(--parel);border-color:var(--brons)}

.plan{list-style:none;padding:0;margin:0 0 22px}
.plan li{display:grid;grid-template-columns:6.5em 1fr auto;gap:14px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--lijn)}
.plan-rol{color:var(--stof)}
.plan-naam{font-weight:600}
.plan-lijn{color:var(--stof);font-size:.9rem;text-align:right}

section.groep{margin:18px 0 30px}
/* Alle oefeningen: uitleg om open te klappen, tabbladen per route en etappe, modules om in te klappen */
.samenhang{margin:14px 0 4px;padding:12px 16px;border-radius:var(--r);background:var(--hout);border:1px solid var(--lijn)}
.samenhang summary{cursor:pointer;font-weight:600}
.samenhang p{margin:.7em 0 0;color:var(--stof)}
.segment{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.segment button{padding:9px 16px;border-radius:999px;border:2px solid var(--lijn);color:var(--stof);font-weight:600}
.segment button[aria-pressed="true"]{border-color:var(--brons);color:var(--parel);background:var(--hout2)}
details.groep{margin:10px 0;border-bottom:1px solid var(--lijn)}
details.groep>summary{display:flex;justify-content:space-between;align-items:baseline;gap:14px;cursor:pointer;padding:14px 4px;list-style:none}
details.groep>summary::-webkit-details-marker{display:none}
details.groep>summary::before{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--stof);border-bottom:2px solid var(--stof);transform:rotate(-45deg);margin-right:4px;align-self:center;transition:transform .15s}
details.groep[open]>summary::before{transform:rotate(45deg)}
.groep-kop{flex:1;font-size:1.2rem;font-weight:600;color:var(--parel)}
.groep-stand{color:var(--stof);font-size:.9rem;white-space:nowrap}
.groep-stand.af{color:var(--brons)}
details.groep[open]{padding-bottom:12px}
.groep h4{font-size:1rem;font-weight:600;color:var(--stof);margin:1.2em 0 .3em}
@media (max-width:600px){
  details.groep>summary{flex-wrap:wrap;row-gap:2px}
  .groep-stand{flex-basis:100%;padding-left:17px}
  .segment button{padding:8px 13px}
}
.rij{display:grid;grid-template-columns:5.6em 1fr auto;gap:14px;width:100%;text-align:left;
  padding:13px 4px;border-bottom:1px solid var(--lijn);align-items:baseline}
.rij:active{background:var(--hout)}
.rij-nr{color:var(--stof);font-variant-numeric:tabular-nums}
.rij-naam em{font-style:normal;color:var(--staal);font-size:.85rem;margin-left:6px}
.rij-naam small{color:var(--stof);font-size:.85rem;margin-left:6px}
.rij-stand{color:var(--stof);font-size:.9rem;text-align:right}
.rij-stand.af{color:var(--brons)}
.rij.later{opacity:.55}

@media (max-width:600px){
  .plan li{grid-template-columns:1fr;gap:2px}
  .plan-lijn{text-align:left}
  .rij{grid-template-columns:4.6em 1fr;gap:4px 12px}
  .rij-stand{grid-column:2;text-align:left}
}

/* ---- speler ---- */
.sp-kop{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.rol{color:var(--accent);font-weight:600;margin:6px 0 0}
#sp-naam{margin-top:0}
/* Het beeld (tab, grepen, noten) over de volle breedte; daaronder links de uitleg en
   rechts het blok met metronoom en voorspelen. Op een smal scherm staat alles onder elkaar. */
.sp-vlak{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:18px}
.sp-rechts{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:820px){
  .sp-rechts{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
  .sp-rechts .bediening{position:sticky;top:16px;margin-top:0}
}
.zonder-beeld .sp-beeld{display:none}

.grepen{display:flex;flex-wrap:wrap;gap:18px 22px;margin-bottom:16px}
.fig-greep{margin:0;flex:0 1 220px;min-width:150px}
.fig-greep:only-child{flex-basis:290px}
.fig-greep svg{display:block;width:100%;height:auto}
.greep-knop{display:block;width:100%;border-radius:8px}
.greep-knop:active{transform:scale(.98)}
.tik-hint{margin:-6px 0 16px}
#schema-stop{margin-bottom:12px}
.fig-greep figcaption{text-align:center;font-size:1.7rem;font-weight:700;margin-top:2px}
.greep .toets{fill:#3B261C}
.greep .fret{stroke:var(--nikkel);stroke-width:2.4}
.greep .kam{stroke:var(--been);stroke-width:7}
.greep .snaar.brons{stroke:#C9A36A}
.greep .snaar.staal{stroke:#DADDE0}
.greep .inleg{fill:var(--parel);opacity:.3}
.greep .vinger{fill:var(--parel)}
.greep .vnr{fill:var(--palisander);font-weight:700;font-size:15px;text-anchor:middle;font-family:"Avenir Next",system-ui,sans-serif}
.greep .open{fill:none;stroke:var(--parel);stroke-width:2.2}
.greep .teken{fill:var(--stof);font-size:22px;text-anchor:middle}
.greep .fretnr{fill:var(--stof);font-size:14px;text-anchor:middle}

.fig-tekst{margin:0 0 14px}
.fig-tekst figcaption{color:var(--stof);margin-bottom:6px}
pre.tab,pre.tel{position:relative;margin:0;padding:12px 16px;background:var(--hout);border:1px solid var(--lijn);border-radius:var(--r);
  font-family:"Menlo","SF Mono",ui-monospace,monospace;font-size:clamp(.72rem,1.55vw,1rem);line-height:1.3;
  overflow-x:auto;color:var(--parel)}
/* de meelees-streep: loopt met de metronoom over de tab of het telschema */
.cursor{display:none;position:absolute;top:12px;bottom:12px;left:0;border-radius:4px;background:var(--accent);opacity:.38;pointer-events:none}
.cursor.aan{display:block}
.cursor.aftellen{opacity:.15}
/* de notenbalk: parelmoer op hout, zoals de tab; de noot die aan de beurt is licht brons op */
.fig-noten{margin:0 0 14px}
.fig-noten figcaption{color:var(--stof);margin-bottom:6px}
.notenbalk{padding:8px 6px 2px;background:var(--hout);border:1px solid var(--lijn);border-radius:var(--r)}
.notenbalk svg{display:block;width:100%;height:auto}
.nb-lijn{stroke:var(--nikkel);stroke-width:1.1}
.nb-sleutel{fill:none;stroke:var(--parel);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.nb-vol,.nb-kop{fill:var(--parel)}
.nb-hol{fill:none;stroke:var(--parel);stroke-width:2}
.nb-stok{stroke:var(--parel);stroke-width:1.5;fill:none}
.nb-boog{stroke:var(--parel);stroke-width:1.4;fill:none}
.nb-teken{fill:var(--parel);font-size:20px;text-anchor:middle;dominant-baseline:central}
.nb-maatsoort{fill:var(--parel);font-size:21px;font-weight:700;text-anchor:middle;dominant-baseline:central;font-family:"Avenir Next",system-ui,sans-serif}
.nb-swing{fill:var(--stof);font-size:13px;font-weight:600;font-style:italic;font-family:"Avenir Next",system-ui,sans-serif}
.nb-triool{fill:var(--stof);font-size:12px;font-weight:600;font-style:italic;text-anchor:middle;font-family:"Avenir Next",system-ui,sans-serif}
.nb-acht{fill:var(--parel);font-size:10px;text-anchor:middle;font-family:"Avenir Next",system-ui,sans-serif}
.nb-noot.klinkt .nb-kop,.nb-noot.klinkt .nb-vol{fill:var(--accent)}
.nb-noot.klinkt .nb-hol,.nb-noot.klinkt .nb-stok{stroke:var(--accent)}
/* het akkoordschema: vier maten tussen maatstrepen */
.schema{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--nikkel);border-radius:6px;margin:4px 0 14px;overflow:hidden}
.maat{padding:20px 6px;text-align:center;font-size:2.1rem;font-weight:700;border-right:2px solid var(--nikkel)}
.maat:last-child{border-right:none}
.maat.nu{background:var(--accent);color:var(--palisander)}
.knoppen2{display:grid;grid-template-columns:repeat(auto-fit,minmax(9em,1fr));gap:10px;margin-top:10px}
.knoppen2 .knop-tweede{margin:0}
table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:.95rem}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--lijn);vertical-align:top}
th{color:var(--stof);font-weight:600}

.sp-tekst ol{padding-left:1.3em;margin:0 0 1em}
.sp-tekst li{margin-bottom:.4em}
.links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.link{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid var(--lijn);text-decoration:none;color:var(--parel)}
.link:active{background:var(--hout2)}
.stappen{margin:6px 0 18px;color:var(--stof)}
.stappen summary{cursor:pointer;padding:8px 0;color:var(--parel)}
.stappen ol{padding-left:1.3em}

.bediening{margin-top:8px;padding:20px;border-radius:var(--r);background:var(--hout);border:1px solid var(--lijn)}
.teller{display:flex;align-items:center;justify-content:center;gap:20px;margin:4px 0 14px}
.rond{width:64px;height:64px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);font-size:1.9rem;line-height:1;flex:none}
.getal{text-align:center;min-width:4.5ch}
.getal span{display:block;font-size:3.4rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.getal small{color:var(--stof)}
.doel{color:var(--stof);margin:14px 0}
.klok{font-size:4.2rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;line-height:1.1;margin:6px 0 12px;color:var(--stof)}
.klok.loopt{color:var(--accent)}
.paar{font-size:1.2rem;margin-bottom:6px}
.oordeel{display:grid;gap:10px}
.oordeel>*{margin:0!important;white-space:nowrap}
@media (min-width:600px){ .oordeel{grid-template-columns:1.6fr 1fr 1fr} }
.vraagnr{color:var(--stof);margin:0}
.vraag{font-size:1.35rem;font-weight:600;margin:4px 0 14px}
.opties{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.optie{min-height:var(--tik);padding:12px;border-radius:var(--r);background:var(--hout2);border:2px solid var(--lijn);font-weight:600}
.optie.goed{border-color:var(--goed);color:var(--goed)}
.optie.fout{border-color:var(--fout);color:var(--fout)}
.optie:disabled{cursor:default}
.uitleg{margin:0}
.uitleg .knop,.uitleg .doel{margin-top:12px}

.sp-voet{display:flex;justify-content:space-between;margin-top:28px;border-top:1px solid var(--lijn);padding-top:12px}
.sp-voet button:last-child{margin-left:auto}
#sp-al{color:var(--stof)}

/* ---- zelf een aanslagpatroon maken ---- */
.patroon{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:6px 0 14px}
.pt{min-height:72px;border-radius:8px;border:2px solid var(--lijn);background:var(--hout2);font-size:1.5rem;font-weight:700;color:var(--stof)}
.pt small{display:block;font-size:.75rem;font-weight:500;color:var(--stof)}
.pt.N,.pt.O{border-color:var(--accent);color:var(--parel)}
.pt:disabled{opacity:.8;cursor:default}
#op-audio{width:100%;margin:10px 0}

/* ---- stemmer: luisteren, dus staal ---- */
.overlay{position:fixed;inset:0;z-index:20;overflow-y:auto;background:var(--palisander);--accent:var(--staal)}
.overlay-vlak{max-width:720px;margin:0 auto;padding:24px 20px 48px}
.st-meter{padding:26px 22px 14px;border-radius:var(--r);background:var(--hout);border:1px solid var(--lijn);text-align:center;margin:8px 0 12px}
.st-noot{font-size:5.5rem;font-weight:700;line-height:1}
.st-schaal{position:relative;height:54px;margin:20px 0 12px;border-radius:8px;background:var(--hout2);overflow:hidden}
.st-zone{position:absolute;top:0;bottom:0;left:45%;width:10%;background:var(--goed);opacity:.18}
.st-midden{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--nikkel)}
.st-naald{position:absolute;top:6px;bottom:6px;left:50%;width:6px;margin-left:-3px;border-radius:3px;background:var(--accent);transition:left .09s linear}
.st-uitleg{font-size:1.2rem;font-weight:600;margin:0 auto 4px}
.st-meter.goed .st-noot,.st-meter.goed .st-uitleg{color:var(--goed)}
.st-meter.goed .st-naald{background:var(--goed)}
.st-snaren{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.st-snaar{padding:14px 4px;border-radius:var(--r);border:2px solid var(--staal);color:var(--staal);font-size:1.7rem;font-weight:700;line-height:1.1}
.st-snaar small{display:block;font-size:.62rem;font-weight:500;color:var(--stof);margin-top:4px}
.st-open{margin-bottom:14px}
@media (max-width:600px){ .st-snaren{grid-template-columns:repeat(3,1fr)} }
@media (prefers-reduced-motion:reduce){ .st-naald{transition:none} }

/* ---- halskaart: spelen, dus brons ---- */
.hk{--accent:var(--brons)}
.hk .overlay-vlak{max-width:1080px}
.hk-keuzes{display:grid;grid-template-columns:2fr 1fr 1.6fr;gap:0 14px}
.hk-keuzes .veld{margin:0 0 16px}
.veld select{width:100%;min-height:52px;font:inherit;font-size:1.05rem;padding:10px 40px 10px 14px;border-radius:var(--r);
  border:1px solid var(--lijn);color:var(--parel);-webkit-appearance:none;appearance:none;
  background:var(--hout) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23B9AA9B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center}
@media (max-width:600px){ .hk-keuzes{grid-template-columns:1fr 2fr} .hk-keuzes .veld:first-child{grid-column:1/-1} }
#hk-naam{margin-top:6px}
/* de hals: e boven, zoals in de tab; op een smal scherm schuift hij opzij */
.hk-hals{overflow-x:auto;margin:10px 0 8px;-webkit-overflow-scrolling:touch}
.hk-hals svg{display:block;width:100%;min-width:760px;height:auto}
.hk-bord{fill:#3B261C}
.hk-vak{fill:var(--brons);opacity:.13}
.hk-fret{stroke:var(--nikkel);stroke-width:2}
.hk-kam{stroke:var(--been);stroke-width:6}
.hk-snaar.brons{stroke:#C9A36A}
.hk-snaar.staal{stroke:#DADDE0}
.hk-inleg{fill:var(--parel);opacity:.28}
.hk-snaarnaam,.hk-fretnr{fill:var(--stof);font-size:13px;text-anchor:middle;dominant-baseline:central;font-family:"Avenir Next",system-ui,sans-serif}
.hk-fretnr.inleg{fill:var(--parel)}
.hk-noot{cursor:pointer}
.hk-noot text{fill:var(--parel);font-size:12px;font-weight:700;text-anchor:middle;dominant-baseline:central;font-family:"Avenir Next",system-ui,sans-serif;pointer-events:none}
.hk-stip{fill:var(--hout2);stroke:var(--nikkel);stroke-width:1.5}
.hk-noot.grond .hk-stip{fill:var(--brons);stroke:none}
.hk-noot.akkoord .hk-stip{fill:var(--parel);stroke:none}
.hk-noot.grond text,.hk-noot.akkoord text{fill:var(--palisander)}
.hk-noot.kenmerk .hk-stip{fill:var(--hout);stroke:var(--brons);stroke-width:3}
.hk-noot.kenmerk text{fill:var(--brons)}
.hk-halo{fill:var(--brons);opacity:0}
.hk-noot.klinkt .hk-halo{opacity:.55}
.hk-legenda{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;padding:0;margin:0 0 18px;color:var(--stof);font-size:.9rem}
.hk-l{display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:-3px;margin-right:7px}
.hk-l.grond{background:var(--brons)}
.hk-l.akkoord{background:var(--parel)}
.hk-l.kenmerk{border:3px solid var(--brons)}
.hk-l.ladder{background:var(--hout2);border:1.5px solid var(--nikkel)}
.hk-onder{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:6px}
.hk-onder .bediening{order:-1}
@media (min-width:820px){
  .hk-onder{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
  .hk-onder .bediening{order:0;position:sticky;top:16px;margin-top:0}
}
.hk-hint{margin:12px 0 0}
.hk-uitleg>h3:first-child{margin-top:0}
.hk-uitleg h3{margin-top:1.1em}
.hk-uitleg ol{padding-left:1.3em;color:var(--stof)}
.hk-uitleg li{margin-bottom:.4em}
.hk-uitleg .knoppen2{margin-top:14px}
.hk-positie{color:var(--stof);margin:0 0 4px}
/* de hals als quizvraag: de snaar waarop je tikt is dikker en licht */
.hk-tik{fill:transparent;cursor:pointer}
.hk-tik:hover,.hk-tik:focus{fill:var(--brons);opacity:.22}
.hk-snaar.actief{stroke:var(--parel)}
.hk-snaarnaam.actief{fill:var(--parel);font-weight:700}
.q-hals svg{min-width:0}
/* de hals in de les, onder de tab */
.fig-hals{margin:0 0 14px}
.fig-hals figcaption{color:var(--stof);margin-bottom:6px}
.fig-hals .segment{margin:0 0 8px}
.hk-oefen{display:flex;gap:10px;align-items:center;margin:0 0 6px;cursor:pointer;font-weight:600}
.hk-oefen input{width:22px;height:22px;accent-color:var(--brons);margin:0}
#hk-gekozen:empty{display:none}


/* ---- klaar ---- */
.klaar-lijst{padding-left:1.3em;margin:0 0 26px;max-width:760px}
.klaar-lijst li{margin-bottom:14px}
.klaar-lijst span{display:block}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,16px);
  background:var(--parel);color:var(--palisander);padding:12px 18px;border-radius:10px;max-width:min(92vw,560px);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;font-weight:600}
.toast.zichtbaar{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* Voortgang bewaren, laden en verhuizen (verhuis.js) */
.voortgang-knoppen{margin-top:28px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.voortgang-knoppen .sub{width:100%;margin:0 0 4px}
.voortgang-knoppen .knop-tweede{margin-top:8px}