/* Nunito (SIL Open Font License, zie vendor/fonts/Nunito-OFL.txt) voor koppen */
@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(vendor/fonts/nunito-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-display: swap; font-weight: 200 1000; src: url(vendor/fonts/nunito-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Bladmuziek — rustig indigo, veel wit voor de muziek. Licht en donker thema. */
:root {
  --primair: #8a3b6e; --primair-donker: #4a1d3d; --primair-licht: #f6e9f1;
  --achter: #f8f5f8; --vlak: #ffffff; --tekst: #241c25; --zacht: #75687a; --lijn: #ebe2ea;
  --gevaar: #b3423a; --ok: #1f7a5a;
  --schaduw: 0 1px 2px rgb(20 24 50 / .06), 0 4px 14px rgb(20 24 50 / .06);
  --rond: 12px;
  color-scheme: light; accent-color: #8a3b6e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --primair: #e3a3c9; --primair-donker: #f4d6e7; --primair-licht: #3a1f33;
    --achter: #141015; --vlak: #1e1720; --tekst: #f0e9ef; --zacht: #a698a8; --lijn: #352a36; --gevaar: #f0a0a0;
    --schaduw: 0 1px 2px rgb(0 0 0 / .3); color-scheme: dark;
  }
}
:root[data-thema="donker"] {
  --primair: #e3a3c9; --primair-donker: #f4d6e7; --primair-licht: #3a1f33;
  --achter: #141015; --vlak: #1e1720; --tekst: #f0e9ef; --zacht: #a698a8; --lijn: #352a36; --gevaar: #f0a0a0;
  --schaduw: 0 1px 2px rgb(0 0 0 / .3); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--achter); color: var(--tekst); font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
body { min-height: 100dvh; }
a { color: var(--primair); }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.05rem; margin: 1.4em 0 .5em; color: var(--zacht); font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
.zacht { color: var(--zacht); }
.fout { color: var(--gevaar); }
.laden { display: grid; place-items: center; min-height: 60dvh; font-size: 1.2rem; color: var(--zacht); }

/* ---- omlijsting ---- */
.kop { display: flex; align-items: center; justify-content: space-between; padding: max(10px, env(safe-area-inset-top)) 16px 10px; background: var(--primair-donker); color: #fff; }
:root[data-thema="donker"] .kop { background: #2c1428; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .kop { background: #2c1428; } }
.merk { display: flex; gap: 10px; align-items: center; }
.merk b { display: block; line-height: 1.1; }
.merk small { opacity: .75; font-size: .8rem; }
.logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(255 255 255 / .14); font-size: 1.3rem; }
.offline-label { font-size: .8rem; background: rgb(255 255 255 / .16); padding: 3px 10px; border-radius: 99px; }
.tabs { display: flex; gap: 4px; padding: 0 12px; background: var(--vlak); border-bottom: 1px solid var(--lijn); position: sticky; top: 0; z-index: 5; overflow-x: auto; }
.tabs a { display: flex; gap: 6px; align-items: center; padding: 12px 12px; text-decoration: none; color: var(--zacht); border-bottom: 3px solid transparent; white-space: nowrap; font-weight: 500; }
.tabs a.actief { color: var(--primair); border-color: var(--primair); }
.tabs .ic { font-size: 1.05rem; }
main { max-width: 900px; margin: 0 auto; padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
main.smal { max-width: 440px; }
@media (max-width: 600px) {
  /* op de telefoon de tabs onderin, binnen bereik van de duim */
  .tabs { position: fixed; bottom: 0; top: auto; left: 0; right: 0; border-top: 1px solid var(--lijn); border-bottom: 0; justify-content: space-around; padding: 0 0 env(safe-area-inset-bottom); }
  .tabs a { flex-direction: column; gap: 0; font-size: .72rem; padding: 8px 6px; border-bottom: 0; border-top: 3px solid transparent; }
  .tabs a.actief { border-top-color: var(--primair); }
  .tabs .ic { font-size: 1.25rem; }
  main { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .breed-alleen { display: none; }
}

/* ---- knoppen en velden ---- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; padding: 10px 16px; background: var(--primair); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 44px; }
:root[data-thema="donker"] .knop:not(.licht) { color: #141015; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .knop:not(.licht) { color: #141015; } }
.knop.licht { background: var(--primair-licht); color: var(--primair-donker); }
.knop.gevaar { background: transparent; color: var(--gevaar); box-shadow: inset 0 0 0 1px currentColor; }
.knop.gevaar:not(.licht) { background: var(--gevaar); color: #fff; box-shadow: none; }
.knop:disabled { opacity: .45; cursor: default; }
.knop.breed { width: 100%; }
.link { background: none; border: 0; padding: 0; color: var(--primair); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link.actief { font-weight: 700; text-decoration: none; }
.link.gevaar { color: var(--gevaar); }
.knoppenrij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.veld { display: grid; gap: 4px; margin: 12px 0; font-size: .9rem; color: var(--zacht); }
.veld input, .veld select, .veld textarea, input[type=search], select { width: 100%; padding: 11px 12px; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vlak); color: var(--tekst); font-size: 1rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--primair); outline-offset: 2px; }
.balk { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.balk input[type=search] { flex: 1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.chip { border: 1px solid var(--lijn); background: var(--vlak); border-radius: 99px; padding: 6px 14px; cursor: pointer; }
.chip.actief { background: var(--primair-licht); border-color: var(--primair); color: var(--primair-donker); font-weight: 600; }
.ic-knop { display: inline-grid; place-items: center; min-width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 1.25rem; color: inherit; }
.ic-knop:disabled { opacity: .3; }
.ic-knop.klein { min-width: 36px; height: 36px; font-size: .95rem; }
.label { font-size: .8rem; background: var(--primair-licht); color: var(--primair-donker); padding: 2px 10px; border-radius: 99px; }

/* ---- bibliotheek ---- */
.liederen { background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); overflow: clip; }
.letter { padding: 6px 16px; font-size: .8rem; font-weight: 700; color: var(--primair); background: var(--primair-licht); position: sticky; top: 52px; z-index: 1; }
@media (max-width: 600px) { .letter { top: 0; } }
.rij { display: flex; align-items: center; border-top: 1px solid var(--lijn); }
.letter + .rij, .rij:first-child { border-top: 0; }
.rij .titel { flex: 1; display: grid; padding: 12px 16px; text-decoration: none; color: var(--tekst); min-width: 0; }
.rij .titel span { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rij .titel small { color: var(--zacht); font-size: .8rem; }
.rij .titel:active { background: var(--primair-licht); }
.meer { border: 0; background: none; color: var(--zacht); font-size: 1.4rem; width: 52px; align-self: stretch; cursor: pointer; }
.leeg { padding: 40px 20px; text-align: center; color: var(--zacht); }

/* ---- setlijsten ---- */
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.kaart { display: grid; gap: 2px; padding: 14px 16px; background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); text-decoration: none; color: var(--tekst); border-left: 4px solid var(--primair); }
.kaart small { color: var(--zacht); }
.setlijst { list-style: none; padding: 0; margin: 12px 0; background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); overflow: hidden; }
.setlijst li { display: flex; align-items: center; border-top: 1px solid var(--lijn); }
.setlijst li:first-child { border-top: 0; }
.setlijst a { flex: 1; display: flex; gap: 12px; align-items: center; padding: 12px 16px; color: var(--tekst); text-decoration: none; min-width: 0; }
.setlijst .nr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primair-licht); color: var(--primair-donker); font-weight: 700; font-size: .85rem; flex: none; }
.setlijst .acties { display: flex; padding-right: 6px; }
.blok { background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 4px 16px 16px; margin-bottom: 14px; }
.blok h2 { margin-top: 14px; }
.simpel, .leden { list-style: none; padding: 0; margin: 10px 0 0; }
.simpel li, .leden li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--lijn); }
.leden .wie { display: grid; flex: 1; min-width: 0; }
.leden .wie small { color: var(--zacht); overflow: hidden; text-overflow: ellipsis; }
.leden select { width: auto; padding: 6px 8px; }
.uitleg { padding-left: 18px; color: var(--zacht); }
.uitleg li { margin: 6px 0; }

/* ---- inloggen ---- */
.inlog { text-align: center; padding-top: 10vh; }
.inlog form { text-align: left; }
.groot-logo { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: var(--primair-donker); color: #fff; font-size: 2.4rem; margin-bottom: 10px; }
.inlog .sub { color: var(--zacht); margin-top: 2px; }
.taalkeuze { margin-top: 24px; color: var(--zacht); }

/* ---- dialoog ---- */
.dialoog { border: 0; border-radius: 16px; padding: 20px; width: min(92vw, 440px); background: var(--vlak); color: var(--tekst); box-shadow: 0 20px 60px rgb(0 0 0 / .3); }
.dialoog::backdrop { background: rgb(15 18 35 / .45); }
.dialoog h2 { margin: 0 0 8px; color: var(--tekst); font-size: 1.15rem; }
.dialoog .knoppen { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.dialoog .kopieer { width: 100%; padding: 10px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--achter); color: var(--tekst); }
.kiezer { width: min(94vw, 520px); }
.kieslijst { max-height: 55dvh; overflow: auto; margin-top: 8px; border: 1px solid var(--lijn); border-radius: 10px; }
.kies { display: flex; width: 100%; justify-content: space-between; gap: 8px; padding: 11px 12px; border: 0; border-top: 1px solid var(--lijn); background: none; text-align: left; cursor: pointer; }
.kies:first-child { border-top: 0; }
.kies.actief { background: var(--primair-licht); }
.kies b { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--primair); color: #fff; font-size: .8rem; }
.kies small { color: var(--zacht); }

#melding { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; pointer-events: none; background: #20232e; color: #fff; padding: 10px 18px; border-radius: 99px; transition: .25s; z-index: 50; max-width: 90vw; text-align: center; }
#melding.zichtbaar { opacity: 1; transform: translate(-50%, 0); }
#melding.fout { background: var(--gevaar); }
@media (max-width: 600px) { #melding { bottom: calc(84px + env(safe-area-inset-bottom)); } body.standaard-open #melding { bottom: 24px; } }

/* ---- muziekstandaard ---- */
body.standaard-open { overflow: hidden; background: #2a2c33; }
.standaard { position: fixed; inset: 0; background: #2a2c33; color: #fff; user-select: none; -webkit-user-select: none; }
.podium { position: absolute; inset: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); touch-action: none; }
.podium .laden { min-height: 100%; color: #c9cbd6; }
.weergave { overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.vel { will-change: transform; }
.vel { width: 100%; height: 100%; display: flex; gap: 6px; align-items: center; justify-content: center; }
.blad { position: relative; background: #fff; box-shadow: 0 2px 12px rgb(0 0 0 / .4); flex: none; }
.blad canvas { position: absolute; inset: 0; display: block; }
.bovenbalk { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 4px; padding: max(6px, env(safe-area-inset-top)) 8px 6px; background: rgb(24 27 40 / .88); backdrop-filter: blur(8px); transition: transform .2s, opacity .2s; z-index: 3; }
.bovenbalk.weg { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.bovenbalk .info { flex: 1; min-width: 0; display: grid; padding: 0 6px; }
.bovenbalk .info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bovenbalk .info small { color: #b9bccb; font-size: .8rem; }
.setpos { font-size: .85rem; color: #b9bccb; padding: 0 2px; }
.gereedschap { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; max-width: calc(100vw - 16px); background: rgb(24 27 40 / .94); border-radius: 16px; box-shadow: 0 6px 24px rgb(0 0 0 / .4); z-index: 3; }
.gereedschap[hidden] { display: none; }
.gk { display: grid; justify-items: center; min-width: 48px; padding: 4px 6px; border: 0; border-radius: 10px; background: none; color: #fff; cursor: pointer; }
.gk span { font-size: 1.15rem; line-height: 1.3; }
.gk small { font-size: .65rem; color: #b9bccb; }
.gk.actief { background: #8a3b6e; }
.gk.actief small { color: #fff; }
.kleur { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; }
.kleur i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / .25); }
.kleur.actief i { box-shadow: 0 0 0 3px #fff; }
.dikte { width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; cursor: pointer; }
.dikte i { width: 20px; background: #fff; border-radius: 4px; min-height: 2px; }
.dikte.actief { background: rgb(255 255 255 / .16); }
.scheiding { width: 1px; height: 28px; background: rgb(255 255 255 / .18); margin: 0 4px; }
.gereedschap select { width: auto; padding: 6px 8px; background: #352a36; color: #fff; border: 0; }
.gereedschap .knop { min-height: 38px; padding: 6px 14px; }
@media (max-width: 700px) {
  /* telefoon: één rij die je opzij kunt schuiven, zodat de muziek zichtbaar blijft */
  .gereedschap { left: 8px; right: 8px; transform: none; max-width: none; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .gereedschap > * { flex: none; }
  .gk small { display: none; } .gk { min-width: 40px; }
}

/* ---- oefenen ---- */
:root { --rol-zwart: rgba(20, 24, 50, .045); }
:root[data-thema="donker"] { --rol-zwart: rgba(255, 255, 255, .04); }
@media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) { --rol-zwart: rgba(255, 255, 255, .04); } }
body.oefen-open { overflow: hidden; }
.oefen { display: flex; flex-direction: column; height: 100dvh; max-width: 1200px; margin: 0 auto; padding: 0 12px env(safe-area-inset-bottom); }
.oefenkop { display: flex; align-items: center; gap: 6px; padding: max(8px, env(safe-area-inset-top)) 0 6px; }
.oefenkop .ic-knop { text-decoration: none; }
.oefenkop .info { display: grid; min-width: 0; }
.oefenkop .info b { font-size: 1.1rem; }
.oefenkop .info small { color: var(--zacht); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oefenvak { background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 6px 12px; display: grid; gap: 2px; }
.rij-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.rij-l .lbl { width: 120px; color: var(--zacht); font-size: .85rem; }
.rij-l .chips { margin: 0; }
.chip.partij { display: inline-flex; align-items: center; gap: 6px; }
.chip.partij i { width: 10px; height: 10px; border-radius: 50%; }
.chip.klein { padding: 4px 10px; font-size: .85rem; }
.segment { display: inline-flex; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.segment button { border: 0; background: var(--vlak); padding: 7px 14px; cursor: pointer; border-left: 1px solid var(--lijn); }
.segment button:first-child { border-left: 0; }
.segment button.actief { background: var(--primair-licht); color: var(--primair-donker); font-weight: 600; }
.stukje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stukje label { display: inline-flex; gap: 6px; align-items: center; color: var(--zacht); font-size: .9rem; }
.stukje input { width: 72px; padding: 7px 8px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); color: var(--tekst); }
.rolvak { flex: 1; min-height: 200px; margin: 10px 0 8px; background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); overflow: hidden; }
.rolvak canvas, .klaviervak canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.rolvak canvas { touch-action: none; cursor: grab; }
.zoomknoppen { display: inline-flex; align-items: center; gap: 2px; }
.zoomknoppen .zacht { min-width: 4.5em; text-align: center; font-size: .85rem; }
.bediening { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bediening .speel { min-width: 64px; font-size: 1.2rem; }
.tempo { display: inline-flex; align-items: center; gap: 8px; color: var(--zacht); font-size: .9rem; }
.tempo input { width: 140px; accent-color: var(--primair); }
.vink { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.vink input { width: 18px; height: 18px; accent-color: var(--primair); }
.nu { margin-left: auto; min-width: 8.5em; text-align: right; white-space: nowrap; font-weight: 600; color: var(--primair-donker); font-variant-numeric: tabular-nums; }
.klaviervak { height: clamp(90px, 18dvh, 150px); margin: 8px 0 10px; border-radius: 10px; overflow: hidden; box-shadow: var(--schaduw); }
@media (max-width: 600px) { .rij-l .lbl { width: 100%; } .tempo input { width: 110px; } .nu { margin-left: 0; width: 100%; } }
.waarschuwing { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: #fff4c2; color: #5c4a00; font-size: .9rem; }
:root[data-thema="donker"] .waarschuwing { background: #3b3417; color: #f5e3a1; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .waarschuwing { background: #3b3417; color: #f5e3a1; } }
.oefenkop #bewerkKnop { margin-left: auto; }
.oefenkop #bewerkKnop.actief { background: var(--primair); color: #fff; }
.bewerkvak { background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 10px 12px; margin-bottom: 8px; }
.bewerkvak[hidden] { display: none; }
.bewerkkop { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-bottom: 6px; }
.bewerkkop .zacht { font-size: .8rem; }
.label.geel { background: #fff0a8; color: #5c4a00; }
.maatregel { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: center; margin: 4px 0; font-size: .9rem; }
.maatregel span { display: inline-flex; gap: 6px; align-items: center; color: var(--zacht); }
.maatregel i { width: 10px; height: 10px; border-radius: 50%; }
.maatregel input { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; padding: 7px 9px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); color: var(--tekst); width: 100%; }
.maatregel input.mis { border-color: var(--gevaar); box-shadow: 0 0 0 1px var(--gevaar); }
.bewerkvak .knoppenrij .knop { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
.oefenwacht h1 { margin-top: 12px; }
.draaier { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--primair); border-right-color: transparent; border-radius: 50%; animation: draai 0.9s linear infinite; vertical-align: -2px; }
@keyframes draai { to { transform: rotate(360deg) } }
@media (max-width: 600px) { .maatregel { grid-template-columns: 1fr; gap: 2px; } }

/* ---- koren, teksten, luisteren, agenda ---- */
.merk select { background: rgb(255 255 255 / .14); color: #fff; border: 0; border-radius: 8px; padding: 3px 8px; font-size: .85rem; max-width: 52vw; }
.merk select option { color: #20232e; }
.welkom h1 { margin-top: 14px; }
.lijstknoppen { margin: 4px 0 8px; }
.liedtekst { white-space: pre-wrap; font-size: 1.12rem; line-height: 1.65; background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 18px 20px; margin: 12px 0; max-width: 680px; }
.tekstblok .liedtekst { box-shadow: none; padding: 0; margin: 4px 0 8px; }
.inhoud { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 14px; }
.inhoud a { color: var(--primair); text-decoration: none; font-size: .92rem; }
.linkknop { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: var(--primair-licht); color: var(--primair-donker); text-decoration: none; font-size: .9rem; font-weight: 500; }
.linkknop.youtube { background: #fde8e8; color: #9b1c1c; }
.linkknop.spotify { background: #e3f6ea; color: #14633a; }
:root[data-thema="donker"] .linkknop.youtube { background: #3a1f22; color: #f3b4b4; }
:root[data-thema="donker"] .linkknop.spotify { background: #17301f; color: #9fe0b8; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .linkknop.youtube { background: #3a1f22; color: #f3b4b4; } :root:not([data-thema="licht"]) .linkknop.spotify { background: #17301f; color: #9fe0b8; } }
.afspraak { display: flex; gap: 14px; align-items: flex-start; background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 12px 14px; margin: 10px 0; border-left: 4px solid var(--primair); }
.afspraak.optreden { border-left-color: #c9761d; }
.afspraak.afgemeld { opacity: .7; }
.afspraak.geweest { opacity: .6; }
.datumblok { display: grid; justify-items: center; min-width: 44px; padding: 4px 0; border-radius: 10px; background: var(--primair-licht); color: var(--primair-donker); }
.datumblok b { font-size: 1.35rem; line-height: 1.1; }
.datumblok small { font-size: .72rem; text-transform: uppercase; }
.afspraakinfo { flex: 1; display: grid; gap: 2px; min-width: 0; }
.afspraakinfo small { color: var(--zacht); }
.afspraakinfo p { margin: 4px 0 0; font-size: .9rem; }
.afmeldlijst { color: var(--zacht); }
.afspraakacties { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.oefenreeks { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.oefenreeks .ic-knop { text-decoration: none; }

/* ---- akkoordenblad en beamer-bediening ---- */
.toonknop { flex-direction: row; width: auto; padding: 0 10px; gap: 4px; font-size: .9rem; white-space: nowrap; }
.dialoog textarea[name=akkoorden] { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .9rem; min-height: 40vh; white-space: pre; }
.beamerbalk { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 0; background: var(--achter); }
.beamerliederen { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.beamerliederen .chip { white-space: nowrap; }
.beamerblokken { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 40px; }
.beamerblok { text-align: left; padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--vlak); color: var(--tekst); font: inherit; font-size: .92rem; line-height: 1.35; cursor: pointer; }
.beamerblok small { display: block; color: var(--zacht); font-weight: 600; margin-bottom: 4px; }
.beamerblok.actief { border-color: var(--primair); box-shadow: 0 0 0 2px var(--primair); }
#zwart.actief { background: #000; color: #fff; }
.setlijst a small.zacht { margin-left: auto; padding-left: 8px; }

/* ---- voorkant (inloggen) ---- */
.voorkant { min-height: 100dvh; display: grid; grid-template-columns: 1.15fr 1fr; }
.held { position: relative; overflow: hidden; color: #fff; padding: clamp(28px, 6vw, 72px); display: flex; align-items: center;
  background:
    repeating-linear-gradient(180deg, transparent 0 46px, rgb(255 255 255 / .07) 46px 48px) 0 50% / 100% 240px no-repeat,
    radial-gradient(120% 90% at 0% 0%, #9a4a7e 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 100%, #c9708f 0%, transparent 55%),
    linear-gradient(160deg, #4a1d3d, #2a1026); }
.held-binnen { position: relative; z-index: 1; max-width: 520px; }
.held-merk { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.15rem; letter-spacing: .01em; }
.held-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgb(255 255 255 / .14); color: #fff; padding: 8px; }
.held-logo svg { width: 100%; height: 100%; }
.held h1 { font-family: "Nunito", system-ui, sans-serif; font-weight: 600; font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.08; margin: 1.1em 0 .45em; letter-spacing: -.01em; }
.held-tekst { font-size: 1.12rem; opacity: .88; max-width: 34em; margin: 0 0 1.6em; }
.kenmerken { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kenmerken li { display: flex; align-items: center; gap: 14px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); border-radius: 14px; padding: 12px 16px; backdrop-filter: blur(4px); }
.kenmerken b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(255 255 255 / .14); font-size: 1.1rem; flex: none; }
.zwevende-noten i { position: absolute; font-style: normal; color: rgb(255 255 255 / .1); font-size: 5rem; animation: zweef 14s ease-in-out infinite; }
.zwevende-noten i:nth-child(1) { right: 8%; top: 12%; }
.zwevende-noten i:nth-child(2) { right: 22%; bottom: 10%; font-size: 7rem; animation-delay: -4s; }
.zwevende-noten i:nth-child(3) { right: 4%; top: 52%; font-size: 3.5rem; animation-delay: -8s; }
.zwevende-noten i:nth-child(4) { left: 6%; bottom: 4%; font-size: 4rem; animation-delay: -2s; }
.zwevende-noten i:nth-child(5) { left: 48%; top: 4%; font-size: 3rem; animation-delay: -10s; }
@keyframes zweef { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .zwevende-noten i { animation: none; } }
.inlogvak { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px calc(24px + env(safe-area-inset-bottom)); }
.inlogkaart { width: 100%; max-width: 400px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 20px; padding: 32px 28px; box-shadow: 0 1px 2px rgb(20 24 50 / .05), 0 18px 50px rgb(20 24 50 / .10); }
.inlogkaart h2 { color: var(--tekst); font-size: 1.4rem; margin: 0 0 .35em; }
.inlogkaart .zacht { margin: 0 0 1em; }
.inlogkaart input[type=email] { padding: 13px 14px; font-size: 1.05rem; }
.inlogkaart input[type=email]:focus { outline: 2px solid var(--primair); outline-offset: 1px; }
.knop.groot { min-height: 50px; font-size: 1.05rem; margin-top: 4px; }
.uitnodiging { display: inline-block; background: var(--primair-licht); color: var(--primair-donker); border-radius: 99px; padding: 5px 12px; font-size: .9rem; font-weight: 600; margin: 0 0 14px; }
.mailicoon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: var(--primair-licht); color: var(--primair); font-size: 1.8rem; margin-bottom: 14px; }
.inlogkaart .taalkeuze { margin-top: 20px; text-align: center; }
.voetregel { color: var(--zacht); font-size: .85rem; margin-top: 18px; }
@media (max-width: 820px) {
  .voorkant { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .held { padding: max(28px, env(safe-area-inset-top)) 22px 64px; }
  .held h1 { margin-top: .8em; }
  .kenmerken { display: none; }
  .held-tekst { margin-bottom: 0; font-size: 1rem; }
  .inlogvak { justify-content: flex-start; margin-top: -40px; position: relative; z-index: 2; padding-top: 0; }
  .zwevende-noten i { font-size: 3rem; }
}

/* ---- oefenopnames per partij ---- */
.opnames { display: grid; gap: 8px; margin: 12px 0; }
.opname { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 10px; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 12px; padding: 8px 12px; }
.opnamenaam { font-weight: 600; }
.opname audio { width: 100%; height: 36px; }
@media (max-width: 600px) { .opname { grid-template-columns: 1fr; gap: 4px; } }
.segment.klein button { padding: 5px 10px; font-size: .88rem; }

/* ---- details: een beetje sfeer (pruim) ---- */
.kop { position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(180deg, transparent 0 9px, rgb(255 255 255 / .06) 9px 10px) 0 50% / 100% 50px no-repeat,
    radial-gradient(80% 140% at 100% 0%, #9a4a7e 0%, transparent 60%),
    linear-gradient(120deg, #4a1d3d, #2a1026); }
.kop::after { content: '♫'; position: absolute; right: 22%; top: -14px; font-size: 4.4rem; color: rgb(255 255 255 / .07); transform: rotate(-12deg); pointer-events: none; }
.logo { padding: 6px; color: #fff; }
.logo svg { width: 100%; height: 100%; }
h1, .letter { font-family: "Nunito", system-ui, sans-serif; }
h1 { font-weight: 600; letter-spacing: -.01em; }
.letter { font-size: .95rem; font-style: italic; }
@media (min-width: 601px) {
  .tabs a { border-bottom: 0; margin: 6px 0; padding: 8px 14px; border-radius: 99px; transition: background .15s, color .15s; }
  .tabs a:hover { background: var(--primair-licht); color: var(--primair-donker); }
  .tabs a.actief { background: var(--primair); color: #fff; }
}
.knop { transition: filter .15s, transform .1s; }
.knop:hover { filter: brightness(1.08); }
.knop:active { transform: scale(.97); }
.rij { transition: background .12s; }
.rij:hover { background: color-mix(in srgb, var(--primair-licht) 55%, transparent); }
.kaart { position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; border-left: 0; padding-left: 20px; }
.kaart::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--primair), #c9708f); }
.kaart::after { content: '♪'; position: absolute; right: 12px; bottom: -8px; font-size: 3rem; color: var(--primair); opacity: .08; }
.kaart:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgb(74 29 61 / .12); }
.leeg::before { content: '♫'; display: block; font-size: 2.6rem; color: var(--primair); opacity: .35; margin-bottom: 6px; }
#melding { background: #3a1832; box-shadow: 0 8px 24px rgb(42 16 38 / .3); }
#melding:not(.fout)::before { content: '♪ '; opacity: .7; }
.chip.actief { background: var(--primair); border-color: var(--primair); color: #fff; }
.setlijst .nr { background: linear-gradient(135deg, var(--primair), #c9708f); color: #fff; }
/* groet bovenaan het koor */
.groet { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 4px 0 14px; padding: 14px 18px; border-radius: var(--rond); background: linear-gradient(120deg, var(--primair-licht), color-mix(in srgb, var(--primair-licht) 40%, var(--vlak))); }
.groet b { font-family: "Nunito", system-ui, sans-serif; font-size: 1.2rem; font-weight: 600; color: var(--primair-donker); }
.groet .volgende { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--tekst); }
.groet .dagen { display: grid; place-items: center; min-width: 48px; height: 48px; border-radius: 14px; background: var(--primair); color: #fff; line-height: 1; font-weight: 700; font-size: 1.15rem; }
.groet .dagen small { font-size: .62rem; font-weight: 500; opacity: .85; }
.groet .volgende span small { display: block; color: var(--zacht); }
/* kleurverloop: knoppen, tabs, actieve keuzes */
.knop:not(.licht):not(.gevaar) { background: linear-gradient(120deg, #8a3b6e, #b4567f 60%, #c9708f); }
@media (min-width: 601px) { .tabs a.actief { background: linear-gradient(120deg, #8a3b6e, #c9708f); } }
.chip.actief { background: linear-gradient(120deg, #8a3b6e, #c9708f); }
.knop.licht { background: linear-gradient(120deg, var(--primair-licht), color-mix(in srgb, var(--primair-licht) 60%, #fde8ee)); }
body { background: radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--primair-licht) 70%, transparent), transparent 60%) fixed, var(--achter); }
.groet { background: linear-gradient(120deg, color-mix(in srgb, #8a3b6e 14%, var(--vlak)), color-mix(in srgb, #c9708f 12%, var(--vlak)) 70%, var(--vlak)); }
.groet .dagen { background: linear-gradient(135deg, #8a3b6e, #c9708f); }
:root[data-thema="donker"] .knop:not(.licht):not(.gevaar) { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="licht"]) .knop:not(.licht):not(.gevaar) { color: #fff; } }
.groet .dagen { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; min-width: 52px; height: 52px; }

/* ---- omgevingen bovenin ---- */
.kop { display: block; padding: max(10px, env(safe-area-inset-top)) 16px 0; }
.kopregel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.merk { color: #fff; text-decoration: none; }
.merk b { font-size: 1.05rem; }
.koprechts { display: flex; align-items: center; gap: 8px; }
.instelknop { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; text-decoration: none; font-size: 1.15rem; background: rgb(255 255 255 / .1); }
.instelknop:hover, .instelknop.actief { background: rgb(255 255 255 / .22); }
.omgevingen { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 12px; scrollbar-width: none; position: relative; z-index: 1; }
.omgevingen::-webkit-scrollbar { display: none; }
.om { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 14px; border-radius: 99px; color: #fff; text-decoration: none; font-size: .9rem; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .12); transition: background .15s; }
.om:hover { background: rgb(255 255 255 / .2); }
.om.actief { background: linear-gradient(120deg, #c9708f, #e39ab4); border-color: transparent; font-weight: 600; box-shadow: 0 4px 14px rgb(201 112 143 / .35); }
.om.plus { padding: 6px 12px; }

/* ---- dashboard ---- */
.dashkop { margin: 6px 0 14px; }
.dashkop h1 { font-size: 1.7rem; }
.dashkop p { margin: 2px 0 0; }
.dashraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.dashkaart { display: block; position: relative; overflow: hidden; background: var(--vlak); border-radius: 16px; box-shadow: var(--schaduw); padding: 14px 16px 16px; color: var(--tekst); text-decoration: none; }
.dashkaart.groot { grid-column: 1 / -1; background: linear-gradient(120deg, color-mix(in srgb, #8a3b6e 12%, var(--vlak)), color-mix(in srgb, #c9708f 10%, var(--vlak)) 60%, var(--vlak)); }
.dashkaart h2 { margin: 0 0 10px; font-size: 1rem; color: var(--primair-donker); font-family: "Nunito", system-ui, sans-serif; }
.dashkaart .volgende { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.dashkaart .volgende b { display: block; font-size: 1.05rem; }
.dashkaart .volgende small { color: var(--zacht); }
.dashkaart .dagen { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #8a3b6e, #c9708f); color: #fff; font-weight: 700; font-size: 1.3rem; line-height: 1; box-shadow: 0 6px 16px rgb(138 59 110 / .3); }
.dashkaart .dagen small { font-size: .62rem; font-weight: 500; color: #fff; opacity: .9; margin-top: 2px; }
.dashrij { display: flex; gap: 10px; align-items: center; padding: 8px 6px; margin: 0 -6px; border-radius: 10px; color: var(--tekst); text-decoration: none; }
.dashrij:hover { background: var(--primair-licht); }
.dashrij .wat { flex: 1; min-width: 0; display: grid; }
.dashrij .wat b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashrij .wat small { color: var(--zacht); font-size: .8rem; }
.dashrij .nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--primair-licht); color: var(--primair-donker); font-size: .78rem; font-weight: 700; flex: none; }
.dashrij.afgemeld .wat b { text-decoration: line-through; opacity: .6; }
.soorticoon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--primair-licht); color: var(--primair); flex: none; font-weight: 700; }
.soorticoon.optreden { background: linear-gradient(135deg, #8a3b6e, #c9708f); color: #fff; }
.meer-link { display: inline-block; margin-top: 8px; font-size: .9rem; }
.dashkaart.let-op { border-left: 5px solid var(--gevaar); }
.dashkaart.goed { border-left: 5px solid var(--ok); }
.dashkaart.groepkaart { transition: transform .15s, box-shadow .15s; }
.dashkaart.groepkaart:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgb(74 29 61 / .14); }
.dashkaart.groepkaart::after { content: '♫'; position: absolute; right: 14px; bottom: -10px; font-size: 4rem; color: var(--primair); opacity: .07; }
.dashkaart.groepkaart.band::after { content: '♪'; }
.stappen { margin: 0; padding-left: 20px; }
.stappen li { margin: 6px 0; }
.groepchip { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--primair-licht); color: var(--primair-donker); font-size: .75rem; font-weight: 600; text-decoration: none; vertical-align: middle; }

/* ---- welkomstvragen ---- */
.keuzes { display: grid; gap: 10px; margin: 14px 0; }
.keuze { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border: 1.5px solid var(--lijn); border-radius: 14px; background: var(--vlak); cursor: pointer; transition: border-color .15s, background .15s; }
.keuze > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primair-licht); font-size: 1.2rem; flex: none; }
.keuze span { display: grid; }
.keuze small { color: var(--zacht); }
.keuze:hover { border-color: var(--primair); }
.keuze.actief { border-color: var(--primair); background: color-mix(in srgb, var(--primair-licht) 70%, var(--vlak)); }
.keuze.actief > b { background: linear-gradient(135deg, #8a3b6e, #c9708f); color: #fff; }
@media (max-width: 600px) { .dashraster { grid-template-columns: 1fr; } .dashkop h1 { font-size: 1.4rem; } }
.infoblok { background: linear-gradient(120deg, color-mix(in srgb, #8a3b6e 9%, var(--vlak)), var(--vlak)); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 4px 16px 14px; margin: 10px 0 14px; }
.infoblok h2 { margin: 12px 0 6px; color: var(--primair-donker); }
.infoblok .liedtekst, .infokaart .liedtekst { margin: 0; font-size: .95rem; }
/* luisterlijst: titel bovenaan, daaronder de knoppen en de spelers, netjes ingesprongen */
.luisterlijst li { display: block; padding-bottom: 12px; }
.luisterlijst .links { padding: 0 16px 0 56px; }
.luisterlijst .linkrij { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.luisterlijst .linkrij:empty { display: none; }
.luisterlijst .linkknop { flex: none; padding: 5px 12px; font-size: .85rem; }
.luisterlijst .opnames { margin: 8px 0 0; }
.luisterlijst .opname { padding: 6px 10px; }
@media (max-width: 600px) { .luisterlijst .links { padding-left: 16px; } }
/* gekozen knop in een keuzerij: duidelijk oplichten */
.segment button { transition: background .15s, color .15s; }
.segment button.actief { background: linear-gradient(120deg, #8a3b6e, #c9708f); color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); }
.segment { border-color: color-mix(in srgb, var(--primair) 30%, var(--lijn)); }
.chip.partij.actief i { box-shadow: 0 0 0 2px #fff; }
/* de omgeving waar je bent: wit en oplichtend in de donkere balk */
.om.actief { background: #fff; color: #4a1d3d; border-color: #fff; font-weight: 700; box-shadow: 0 0 0 3px rgb(255 255 255 / .25), 0 0 18px rgb(255 214 236 / .7); }
.om .stip { width: 8px; height: 8px; border-radius: 50%; background: #ffcf5c; box-shadow: 0 0 6px #ffcf5c; margin-left: 2px; }

/* ---- berichten ---- */
.bericht { background: var(--vlak); border-radius: 14px; box-shadow: var(--schaduw); padding: 12px 14px; margin: 10px 0; }
.dashkaart .bericht { box-shadow: none; background: color-mix(in srgb, var(--primair-licht) 60%, var(--vlak)); margin: 0 0 10px; }
.bericht.nieuw { box-shadow: 0 0 0 2px #c9708f, var(--schaduw); }
.berichtkop { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.berichtkop small { color: var(--zacht); }
.berichttekst { white-space: pre-wrap; line-height: 1.5; }
.nieuwlabel { background: linear-gradient(120deg, #8a3b6e, #c9708f); color: #fff; border-radius: 99px; padding: 1px 9px; font-size: .72rem; font-weight: 700; font-family: system-ui, sans-serif; }
.schrijfvak { background: var(--vlak); border-radius: 14px; box-shadow: var(--schaduw); padding: 12px; margin: 12px 0; }
.schrijfvak textarea { width: 100%; border: 1px solid var(--lijn); border-radius: 10px; padding: 10px; background: var(--achter); resize: vertical; }
.schrijfvak .knoppenrij { align-items: center; margin-top: 8px; }
.meldkeuzes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 4px; font-size: .9rem; }
.meldkeuzes .vink { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.meldkeuzes input { accent-color: #8a3b6e; width: 18px; height: 18px; }
.berichtkaart.heeft-nieuw { box-shadow: 0 0 0 2px #c9708f, var(--schaduw); }
.simpel li .meldkeuzes { flex-basis: 100%; order: 3; margin: 0; }
.simpel li { flex-wrap: wrap; }
.link.klein { font-size: .85rem; }
.kaartlink { color: var(--primair); text-decoration: none; white-space: nowrap; }
.kaartlink:hover { text-decoration: underline; }
.vinklijst { display: grid; gap: 6px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: 10px; max-height: 40dvh; overflow: auto; }
.vinklijst .vink { display: flex; gap: 8px; align-items: center; }
.vinklijst input { accent-color: #8a3b6e; width: 18px; height: 18px; }
.gastlabel { background: #fff3d6; color: #7a5200; }
.vinkkop { font-size: .9rem; margin: 12px 0 4px; color: var(--primair-donker); }

/* ---- Mijn: tegels naar je koren/bands en mini-dashboards ---- */
.groeptegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0 0 16px; }
.groeptegel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #fff; background: linear-gradient(120deg, #4a1d3d, #8a3b6e 60%, #b4567f); box-shadow: 0 6px 18px rgb(74 29 61 / .2); transition: transform .15s, box-shadow .15s; }
.groeptegel.band { background: linear-gradient(120deg, #2a1026, #6b2f62 55%, #c9708f); }
.groeptegel.nieuw { background: var(--vlak); color: var(--primair-donker); box-shadow: inset 0 0 0 2px var(--lijn); }
.groeptegel:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(74 29 61 / .28); }
.tegelicoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / .16); font-size: 1.2rem; flex: none; }
.groeptegel.nieuw .tegelicoon { background: var(--primair-licht); }
.tegeltekst { flex: 1; min-width: 0; display: grid; }
.tegeltekst b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tegeltekst small { opacity: .85; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groeptegel .pijl { opacity: .7; }
.groepblok { border-top: 5px solid transparent; border-image: linear-gradient(90deg, #8a3b6e, #c9708f) 1; border-image-slice: 1 0 0 0; }
.groepblokkop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; text-decoration: none; margin-bottom: 6px; }
.groepblokkop h2 { margin: 0; }
.groepblokkop small { color: var(--primair); white-space: nowrap; }
.blokbericht { display: grid; gap: 2px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--primair-licht) 60%, var(--vlak)); color: var(--tekst); text-decoration: none; font-size: .9rem; }
.blokbericht small { color: var(--zacht); }
.blokbericht.nieuw { box-shadow: 0 0 0 2px #c9708f; }
.blokregel { margin: 6px 0; font-size: .92rem; }
.snelknoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.snelknoppen .knop { min-height: 34px; padding: 5px 11px; font-size: .85rem; }
.snelknoppen > a:first-child { display: none; }
.waarbalk { display: inline-block; margin: 0 0 8px; padding: 3px 12px; border-radius: 99px; background: var(--primair-licht); color: var(--primair-donker); font-size: .8rem; font-weight: 600; }
.groepblokkop { flex-direction: column; align-items: flex-start; gap: 2px; }
.reacties { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--lijn); display: grid; gap: 8px; }
.reactie { padding: 6px 10px; border-radius: 10px; background: var(--achter); font-size: .92rem; }
.reactie small { color: var(--zacht); }
.reactie div { white-space: pre-wrap; }
.reageer { display: flex; gap: 6px; }
.reageer input { flex: 1; padding: 8px 12px; border: 1px solid var(--lijn); border-radius: 99px; background: var(--vlak); }
.reageer .knop { min-height: 36px; padding: 6px 14px; }

/* koppen in Nunito: rond en vriendelijk */
h1, h2, .letter, .dashkaart h2, .groet b, .held h1, .merk b, .tegeltekst b { font-family: "Nunito", system-ui, sans-serif; }
h1 { font-weight: 800; letter-spacing: -.01em; }
.dashkaart h2, .infoblok h2 { font-weight: 800; }
.letter { font-style: normal; font-weight: 800; }
.held h1 { font-weight: 800; }
/* akkoordenblad: één witte doorlopende pagina om te scrollen */
.standaard.akk { background: #fff; color: var(--tekst); }
.standaard.akk .podium { background: #fff; }
.weergave.doorlopend { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.weergave.doorlopend .vel { display: block; height: auto; padding: 8px 0 40vh; }
.weergave.doorlopend .blad { margin: 0 auto; box-shadow: none; }
:root[data-thema="donker"] .standaard.akk, :root[data-thema="donker"] .standaard.akk .podium { background: #fff; }

/* ---- soort-labels, notities, slepen ---- */
.soortlabel { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; vertical-align: 2px; font-family: "Nunito", system-ui, sans-serif; }
.soortlabel.vast { background: #ece8ee; color: #5c5463; }
.soortlabel.aanpasbaar { background: linear-gradient(120deg, #f6e9f1, #fde8ee); color: #8a3b6e; }
.notitie-ic { font-style: normal; font-size: .85rem; }
.notitieblok { white-space: pre-wrap; padding: 8px 10px; margin: 6px 0; border-radius: 10px; background: var(--primair-licht); color: var(--tekst); font-size: .92rem; text-align: left; }
.notitieblok.mijn { background: #fff6dc; }
.notitieblok small { display: block; color: var(--zacht); font-weight: 700; margin-bottom: 2px; }
.sleepgreep { display: grid; place-items: center; width: 34px; align-self: stretch; color: var(--zacht); cursor: grab; touch-action: none; user-select: none; font-size: 1.1rem; flex: none; }
.sleepgreep:active { cursor: grabbing; }
.kaart .sleepgreep { position: absolute; right: 4px; top: 6px; width: 30px; height: 30px; border-radius: 8px; z-index: 1; }
.kaart .sleepgreep:hover { background: var(--primair-licht); }
.sleepkloon { position: fixed; z-index: 100; pointer-events: none; opacity: .92; box-shadow: 0 14px 34px rgb(42 16 38 / .3); background: var(--vlak); border-radius: 12px; list-style: none; display: flex; align-items: center; }
.sleepplek { opacity: .35; outline: 2px dashed var(--primair); outline-offset: -2px; }
.setlijst li { touch-action: pan-y; }

/* ---- lieddashboard ---- */
.liedkop h1 { font-size: 1.8rem; margin-top: 4px; }
.liedkop p { margin: 4px 0 14px; }
.liedknoppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.liedknop { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; text-decoration: none; color: #fff; background: linear-gradient(120deg, #4a1d3d, #8a3b6e 60%, #b4567f); box-shadow: 0 6px 18px rgb(74 29 61 / .2); transition: transform .15s; }
.liedknop:hover { transform: translateY(-2px); }
.liedknop > b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgb(255 255 255 / .16); font-size: 1.3rem; flex: none; }
.liedknop span { display: grid; font-weight: 700; font-size: 1.05rem; font-family: "Nunito", system-ui, sans-serif; }
.liedknop small { font-weight: 400; opacity: .85; font-size: .8rem; font-family: system-ui, sans-serif; }
.oefentekst { margin: 0 0 8px; background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 8px 14px; }
.oefentekst summary { cursor: pointer; font-weight: 700; color: var(--primair-donker); font-family: "Nunito", system-ui, sans-serif; }
.oefentekst .liedtekst { max-height: 26dvh; overflow: auto; margin: 6px 0 0; font-size: .95rem; }
.dashkaart .opname { grid-template-columns: 1fr; gap: 2px; }
.overzichtvak { height: 56px; margin: 10px 0 0; background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); padding: 6px 8px 2px; }
.overzichtvak canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

/* ---- mobiel: alles binnen het scherm ---- */
.kaartlink { white-space: normal; overflow-wrap: anywhere; }
.dashkaart .volgende > span:not(.dagen) { min-width: 0; }
.afspraakinfo, .afspraakinfo * { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  /* koppen met knoppen: knoppen onder de titel */
  .balk { flex-wrap: wrap; }
  .balk > h1 { flex: 1 1 100%; }
  .balk > .knoppenrij { flex: 1 1 100%; margin: 0; }
  .balk > .knop { margin-left: auto; }
  /* afspraak: datum + info, knoppen eronder over de volle breedte */
  .afspraak { flex-wrap: wrap; gap: 10px 12px; }
  .afspraakinfo { flex: 1 1 calc(100% - 60px); }
  .afspraakacties { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
  /* setlijst: titel en afspeelknop onder elkaar */
  .balk > div:first-child { flex: 1 1 100%; }
  .dashkop h1 { font-size: 1.35rem; }
  .liedknoppen { grid-template-columns: 1fr 1fr; }
  .liedknop { padding: 10px 12px; gap: 8px; }
  .liedknop > b { width: 34px; height: 34px; font-size: 1.1rem; }
  .groeptegels { grid-template-columns: 1fr; }
  .opname { padding: 6px 8px; }
}
@media (max-width: 600px) {
  /* oefenen op de telefoon: keuzes compact in schuifbare rijen, de pagina mag scrollen */
  .oefen { height: auto; min-height: 100dvh; }
  .oefenvak { padding: 8px 10px; }
  .oefenvak .rij-l { gap: 4px; margin: 4px 0; }
  .oefenvak .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .oefenvak .chips::-webkit-scrollbar { display: none; }
  .oefenvak .chip { white-space: nowrap; flex: none; }
  .stukje { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .stukje .chips { flex: 1 1 100%; }
  .rolvak { min-height: 300px; flex: none; height: 46dvh; }
  .waarschuwing { font-size: .85rem; padding: 6px 10px; }
  .bediening { gap: 6px 8px; }
  .bediening .tempo input { width: 100px; }
}
@media (max-width: 600px) { body.oefen-open { overflow: auto; } }
.ic-knop.spoel { font-size: 1.5rem; font-weight: 700; color: var(--primair); line-height: 1; }
.dashkaart .dagen, .groet .dagen { flex: none; }
.ic-mail { color: var(--primair); font-size: 1.05rem; }
.weergave.doorlopend .vel { padding-top: calc(56px + env(safe-area-inset-top)); }

/* ---- profielfoto's, logo's, leden ---- */
.avatar { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; flex: none; vertical-align: middle; background: linear-gradient(135deg, #8a3b6e, #c9708f); color: #fff; font-weight: 800; font-family: "Nunito", system-ui, sans-serif; }
.avatar.m20 { width: 20px; height: 20px; font-size: 9px; } .avatar.m22 { width: 22px; height: 22px; font-size: 10px; }
.avatar.m28 { width: 28px; height: 28px; font-size: 12px; } .avatar.m32 { width: 32px; height: 32px; font-size: 13px; }
.avatar.m38 { width: 38px; height: 38px; font-size: 15px; } .avatar.m52 { width: 52px; height: 52px; font-size: 20px; }
.avatar.m64 { width: 64px; height: 64px; font-size: 24px; }
.om .avatar { box-shadow: 0 0 0 2px rgb(255 255 255 / .6); }
.logo-mini { width: 20px; height: 20px; border-radius: 6px; object-fit: contain; background: #fff; }
.tegelicoon img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; background: #fff; }
.logo-groot { max-width: 160px; max-height: 160px; display: block; margin: 8px auto; }
.dashlogo { float: right; width: 64px; height: 64px; object-fit: contain; border-radius: 14px; background: #fff; box-shadow: var(--schaduw); }
.berichtkop { align-items: center; }
.profielkop { display: flex; gap: 14px; align-items: center; margin: 6px 0; }
.profielkop p { margin: 0; }
.leden li { gap: 10px; }
.leden .over { display: block; font-size: .85rem; color: var(--tekst); margin: 2px 0; }
.ledenkaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.lidkaart { display: flex; gap: 12px; align-items: flex-start; background: var(--vlak); border-radius: 16px; box-shadow: var(--schaduw); padding: 12px 14px; }
.lidkaart p { margin: 4px 0 0; font-size: .92rem; white-space: pre-wrap; }
.soortlabel.internet { background: #fff3d6; color: #7a5200; }
/* ---- CCLI-rapport ---- */
.tabelvak { overflow-x: auto; background: var(--vlak); border-radius: var(--rond); box-shadow: var(--schaduw); margin: 10px 0; }
.rapport { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rapport th { text-align: left; padding: 10px 12px; color: var(--zacht); font-weight: 700; border-bottom: 1px solid var(--lijn); }
.rapport td { padding: 9px 12px; border-top: 1px solid var(--lijn); vertical-align: top; }
.rapport td small { display: block; color: var(--zacht); }
.waarschuwing-tekst { color: #9a6700; font-weight: 600; }
p.klein { font-size: .85rem; margin-top: -8px; }

/* bladmuziek: ook witte achtergrond, bladen gescheiden door een dun lijntje */
body.standaard-open, .standaard { background: #fff; }
.podium .laden { color: var(--zacht); }
.blad { box-shadow: 0 0 0 1px #e4dde3; }
.weergave.doorlopend .blad { box-shadow: none; }

/* profiel van een koor of band */
.groepkop { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: linear-gradient(120deg, var(--primair-licht), var(--vlak)); border-radius: 22px; padding: 20px; margin-bottom: 18px; box-shadow: var(--schaduw); }
.groepkop h1 { margin: 0 0 4px; }
.groeplogo { display: grid; justify-items: center; gap: 8px; }
.groeplogo img, .groeplogo > span { width: 104px; height: 104px; border-radius: 24px; object-fit: contain; background: #fff; box-shadow: var(--schaduw); display: grid; place-items: center; font-size: 2.6rem; }
.waarbalk a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.waarbalk a::after { content: '›'; opacity: .6; }
.nootbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.nootbalk .nootnaam { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.nootbalk .nootnaam i { width: 10px; height: 10px; border-radius: 50%; }
.nootbalk .duren { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.nootbalk .duur { min-width: 40px; padding: 4px 8px; font-size: 1.15rem; }
.nootbalk .duur.actief { background: var(--primair); color: #fff; }
details.geavanceerd { margin: 8px 0; }
details.geavanceerd summary { cursor: pointer; color: var(--zacht); }
/* akkoordenblad in het donkere thema (alleen als je dat kiest; bladmuziek blijft wit) */
.standaard.akk.donker, .standaard.akk.donker .podium, :root[data-thema="donker"] .standaard.akk.donker, :root[data-thema="donker"] .standaard.akk.donker .podium { background: #17131a; color: #ece6ee; }
.standaard.akk.donker .blad { background: #17131a; }
body.standaard-open:has(.standaard.akk.donker) { background: #17131a; }
.dialoog .veld[hidden] { display: none; }
button.liedknop { border: 0; font: inherit; text-align: left; cursor: pointer; } button.liedknop:disabled { opacity: .6; }
.avatar.leeg { padding: 0; color: #fff; text-align: center; } .avatar.leeg::before { content: none; }
/* liedtekst met vertaling en de keuze ervoor */
.liedtekst.vertaald { white-space: normal; }
.liedtekst.vertaald .org, .liedtekst.vertaald .vert { display: block; }
.liedtekst.vertaald .vert { font-style: italic; color: var(--primair); font-size: .92em; margin-bottom: 4px; }
.liedtekst.vertaald .wit { display: block; height: 1em; }
.vertaalkeuze { display: inline-flex; align-items: center; gap: 4px; }
.vertaalkeuze select { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); font: inherit; }
.dialoog .naast { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--primair-licht); font-size: .85rem; max-height: 30vh; overflow: auto; }
/* liedvolgorde: stukken met een letter */
.stuklabel { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; background: linear-gradient(135deg, #8a3b6e, #c9708f); color: #fff; font-weight: 800; font-size: .8rem; }
.volgorderij { display: flex; flex-wrap: wrap; gap: 4px; }
.stukkenlijst { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.stukkenlijst small { display: inline-block; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.stukkenkies { display: grid; gap: 6px; margin-top: 10px; }
.stukknop { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; text-align: left; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); border-radius: 12px; padding: 8px 10px; cursor: pointer; font: inherit; }
.stukknop b { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #8a3b6e, #c9708f); color: #fff; }
.stukknop small { color: var(--zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stukknop:active { transform: scale(.98); }
.beamertalen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.schakel { display: inline-flex; border-radius: 12px; overflow: hidden; }
.schakel .knop { border-radius: 0; }
.schakel .knop.actief { background: var(--primair); color: #fff; }
/* hoofdtaal duidelijker dan de vertaling */
.liedtekst.vertaald .org { font-weight: 700; }
/* opnames: knoppen die de zwevende speler starten */
.opnames { display: flex; flex-wrap: wrap; gap: 6px; }
.opnameknop { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 99px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); font: inherit; font-weight: 600; cursor: pointer; }
.opnameknop .ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #8a3b6e, #c9708f); color: #fff; font-size: .7rem; }
.opnameknop.speelt { border-color: var(--primair); background: var(--primair-licht); }
/* zwevende speler: altijd in beeld, boven de tabbalk op de telefoon */
.zweefspeler { position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 32px)); display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #4a1d3d, #8a3b6e 60%, #b4567f); box-shadow: 0 10px 30px rgb(74 29 61 / .35); }
.zweefspeler[hidden] { display: none; }
.zs-speel { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: #8a3b6e; font-size: 1rem; font-weight: 800; cursor: pointer; }
.zs-midden { flex: 1; min-width: 0; }
.zs-naam { display: flex; gap: 6px; align-items: baseline; overflow: hidden; white-space: nowrap; }
.zs-naam b { overflow: hidden; text-overflow: ellipsis; }
.zs-naam small { opacity: .8; }
.zs-balk { display: flex; align-items: center; gap: 6px; font-size: .72rem; opacity: .9; }
.zs-balk input { flex: 1; min-width: 0; accent-color: #fff; }
.zs-klein { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .15); color: #fff; font-weight: 800; cursor: pointer; }
body.met-speler main { padding-bottom: 96px; }
body.standaard-open .zweefspeler { bottom: auto; top: calc(64px + env(safe-area-inset-top)); }
@media (max-width: 600px) { .zweefspeler { right: 8px; width: calc(100vw - 16px); bottom: calc(72px + env(safe-area-inset-bottom)); } }
/* agenda: de latere vaste repetities ingeklapt */
.meerreeks { margin: 6px 0 14px; }
.meerreeks summary { cursor: pointer; padding: 10px 14px; border-radius: 14px; background: var(--primair-licht); color: var(--primair-donker); font-weight: 700; list-style: none; }
.meerreeks summary::-webkit-details-marker { display: none; }
.meerreeks[open] summary { margin-bottom: 8px; }
/* oefenen met een opname */
.opnamevak { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; padding: 10px 12px; border-radius: 14px; background: var(--vlak); box-shadow: var(--schaduw); }
.aanwijs { flex-basis: 100%; }
.aanwijs .knoppenrij { align-items: center; }
.aanwijs input[type=number] { width: 5em; }
/* installeerknop bovenin */
.installknop { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; padding: 6px 12px; border: 0; border-radius: 99px; background: rgb(255 255 255 / .18); color: #fff; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; }
.installknop[hidden] { display: none; }
.blok .installknop { background: linear-gradient(120deg, #4a1d3d, #8a3b6e 60%, #b4567f); padding: 10px 18px; }
@media (max-width: 600px) { .kop .installknop span { display: none; } }
/* tekst zoeken op internet */
.tekstzoek { display: flex; gap: 6px; margin: 10px 0; }
.tekstzoek input { flex: 1; min-width: 0; }
.tztreffers { display: grid; gap: 6px; max-height: 45vh; overflow: auto; margin-bottom: 10px; }
.tztreffer { display: grid; text-align: left; gap: 2px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); font: inherit; cursor: pointer; }
.tztreffer:hover { border-color: var(--primair); }
.tztreffer small { color: var(--zacht); }
.tztreffer:disabled { opacity: .6; }
.leeg .knoppenrij.midden { justify-content: center; margin-top: 12px; }
/* lieddashboard: acties direct en "beschikbaar in" */
.dashkaart.breed { grid-column: 1 / -1; }
.dashkaart .vinklijst { display: grid; gap: 6px; }
.vink.hier { font-weight: 700; }
.dashraster.tweede { margin-top: 14px; }
.akkzoek { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--primair-licht); display: block; }
.akkzoek summary { cursor: pointer; font-weight: 800; color: var(--primair-donker); }
.akkzoek[open] > * + * { margin-top: 8px; }
.akkzoek textarea { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.akkzoek .knoppenrij { display: flex; flex-wrap: wrap; gap: 6px; }
/* knoppen onderin een dialoog altijd in beeld */
.dialoog { max-height: 92vh; }
.dialoog .knoppen { position: sticky; bottom: -20px; margin: 16px -20px -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: var(--vlak); border-top: 1px solid var(--lijn); z-index: 2; }
.dialoog textarea[name=akkoorden] { min-height: 30vh; }
.liedknop.klein { background: var(--vlak); color: var(--tekst); border: 1px solid var(--lijn); box-shadow: none; } .liedknop.klein small { color: var(--zacht); }
/* balk bovenin de muziekstandaard: altijd witte tekst op de donkere balk (ook bij een wit akkoordenblad) */
.standaard .bovenbalk, .standaard .bovenbalk b, .standaard .bovenbalk button, .standaard .bovenbalk a { color: #fff; }
.standaard .bovenbalk small { color: #c9cbd6; }
.potlood { border: 0; background: var(--primair-licht); color: var(--primair); width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; vertical-align: middle; cursor: pointer; margin-left: 6px; } .potlood:hover { background: var(--primair); color: #fff; }
/* lieddashboard: potloodje op de grote knoppen */
.liedknopvak { position: relative; display: grid; }
.liedknopvak .potlood { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; margin: 0; background: rgb(255 255 255 / .9); }
.liedknopvak .liedknop { padding-right: 46px; }
.potlood.klein { width: 26px; height: 26px; font-size: .85rem; }
.knoppenrij.onderaan { margin-top: 18px; justify-content: flex-end; }
/* toevoegen: vier grote keuzetegels */
.keuzetegels { display: grid; gap: 8px; margin: 4px 0 12px; }
.keuzetegel { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--lijn); background: var(--vlak); color: var(--tekst); font: inherit; cursor: pointer; transition: border-color .15s, transform .15s; }
.keuzetegel:hover { border-color: var(--primair); transform: translateY(-1px); }
.keuzetegel > b { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #8a3b6e, #c9708f); color: #fff; font-size: 1.2rem; }
.keuzetegel span { display: grid; gap: 2px; }
.keuzetegel small { color: var(--zacht); }
.tztreffer .label { font-size: .7rem; font-weight: 600; vertical-align: middle; } .tzakkregel { margin: 4px 2px; font-size: .9rem; }
.uitlegvak { margin: 10px 0; padding: 8px 12px; border-radius: 12px; background: var(--primair-licht); } .uitlegvak summary { cursor: pointer; font-weight: 700; } .uitlegvak .uitleg { margin: 8px 0 4px; }
.nieuweversie { position: fixed; z-index: 60; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 10px 18px; border: 0; border-radius: 99px; background: linear-gradient(120deg, #4a1d3d, #8a3b6e 60%, #b4567f); color: #fff; font: inherit; font-weight: 700; box-shadow: 0 8px 24px rgb(74 29 61 / .35); cursor: pointer; max-width: calc(100vw - 24px); }
.dialoog { position: relative; } .dialoogkruis { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--primair-licht); color: var(--primair-donker); font-size: 1rem; cursor: pointer; }
.dialoog .knoppen:not(:has(button)) { display: none; }
#bladwijzerTekst { width: 100%; box-sizing: border-box; font-family: ui-monospace, Consolas, monospace; font-size: .75rem; word-break: break-all; }
/* volgorde-vakje: voorbeeldregel netjes afkappen binnen de kaart */
.stukkenlijst li { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.stukkenlijst li .stuklabel { flex: none; }
.stukkenlijst small { flex: 1; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; }
/* oefenpagina: gewoon scrollen; de notenbalk een vaste hoogte, de afspeelbalk blijft onderin in beeld */
body.oefen-open { overflow: auto; }
.oefen { height: auto; min-height: 100dvh; }
.rolvak { flex: none; height: 46dvh; min-height: 280px; }
.oefen .bediening { position: sticky; bottom: 0; z-index: 5; background: var(--achter); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
.opnamevak .koppelen { display: inline-flex; gap: 6px; align-items: center; }
.opnamevak .opnames { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.meeloop .tr { display: block; padding: 2px 8px; border-radius: 8px; transition: background .2s; cursor: pointer; } .meeloop .tr.nu { background: var(--primair-licht); color: var(--primair-donker); font-weight: 700; } .meeloop .trmaat { color: var(--zacht); font-size: .75em; font-weight: 400; } .meeloop.koppelen .tr:hover { outline: 2px dashed var(--primair); } .meeloop .wit { display: block; height: .8em; }
.label.groen { background: #e3f4e8; color: #1f6b3a; }

/* vertaalde tekst: lange regels lopen netjes door */
.liedtekst.vertaald .org, .liedtekst.vertaald .vert { white-space: normal; overflow-wrap: anywhere; }
.afmeldlink { font-size: .85rem; color: var(--zacht); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; padding: 4px 2px; } .afmeldlink:hover { color: var(--primair); }
/* vertaling naast de tekst (niet eronder) */
.liedtekst.vertaald.naast { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; max-width: 980px; }
.liedtekst.vertaald.naast .org, .liedtekst.vertaald.naast .vert { display: block; margin: 0; }
.liedtekst.vertaald.naast .org { font-weight: 400; }
.liedtekst.vertaald.naast .vert { font-size: 1em; }
.liedtekst.vertaald.naast .wit { grid-column: 1 / -1; height: 1em; }
@media (max-width: 600px) { .liedtekst.vertaald.naast { column-gap: 12px; font-size: .9rem; } }
.dialoog h2 { padding-right: 40px; }
/* agenda: compacte kaarten met icoontjes, klikbaar naar het dashboard van de afspraak */
.afspraak.compact { align-items: center; }
.afspraak.compact .afspraakinfo { display: grid; gap: 2px; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.afspraak.compact .afspraakinfo:hover b { color: var(--primair); }
.icoontjes { display: flex; gap: 10px; font-size: .95rem; min-height: 1.2em; }
.icoontjes span { display: inline-flex; align-items: baseline; gap: 1px; }
.icoontjes small { font-size: .72rem; font-weight: 700; color: var(--zacht); }
.afspraak.compact .afspraakacties { flex-direction: row; align-items: center; }
/* dashboard van één afspraak */
.afspraakkop { display: flex; gap: 18px; align-items: flex-start; background: linear-gradient(120deg, var(--primair-licht), var(--vlak)); border-radius: 22px; padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--schaduw); }
.afspraakkop h1 { margin: 0 0 4px; }
.afspraakkop p { margin: 2px 0; }
.datumblok.groot { transform: scale(1.25); transform-origin: top left; margin-right: 10px; }
.kortelijst { margin: 8px 0; padding-left: 22px; display: grid; gap: 3px; }
.dashkaart h3 { font-size: .95rem; margin: 12px 0 4px; }
/* akkoorden verschuiven */
body.akkedit-open { overflow: hidden; }
.akkedit { position: fixed; inset: 0; z-index: 70; background: #fff; color: #1b1d24; display: flex; flex-direction: column; }
.akkedit-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 16px; border-bottom: 1px solid var(--lijn); background: var(--primair-licht); }
.akkedit-kop .zacht { flex: 1; min-width: 220px; font-size: .85rem; }
.akkedit-blad { flex: 1; overflow: auto; padding: 18px 20px 60px; }
.akr { margin: 0 0 6px; }
.akr-akk { position: relative; height: 26px; cursor: copy; }
.akr-tekst { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 1.05rem; white-space: pre; }
.akchip { position: absolute; top: 0; transform: translateX(-2px); padding: 1px 6px; border-radius: 8px; background: linear-gradient(135deg, #8a3b6e, #c9708f); color: #fff; font: 700 .9rem system-ui, sans-serif; cursor: grab; touch-action: none; user-select: none; white-space: nowrap; }
.akchip:active { cursor: grabbing; }
.akr-vast { font-weight: 800; margin: 14px 0 4px; }
.akr-wit { height: 12px; }