/* Wellumo DE admin – rustige beheeromgeving in de menopauze-kleuren. */
:root {
  --acc: #0b8f5f;
  --deep: #04502f;
  --soft: #eef8f2;
  --rule: #cfe5d9;
  --ink: #12211c;
  --text: #4f6159;
  --muted: #7b8d86;
  --line: #e6efeb;
  --bg: #f6f8f7;
  --wit: #fff;
  --fout: #9b2f36;
  --navy: #21477f;
  --groen: #4ea672;
  --zij: 264px;
  --font: Aptos, Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;
  --kop: "Source Serif 4", Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 15.5px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select { font: inherit; }
svg { width: 18px; height: 18px; flex: none; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
h1, h2 { color: var(--ink); font-family: var(--kop); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
h1 { font-size: 30px; }
h2 { font-size: 18px; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nowrap { white-space: nowrap; }

/* ---- knoppen ---- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--deep);
  background: var(--deep); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.knop:hover { background: var(--acc); border-color: var(--acc); }
.knop-licht { background: var(--wit); color: var(--deep); border-color: var(--rule); }
.knop-licht:hover { background: var(--soft); border-color: var(--acc); }
.knop-vol { width: 100%; padding: 13px 18px; }
.link { color: var(--deep); font-weight: 700; text-decoration: none; font-size: 14.5px; }
.link:hover { text-decoration: underline; }

/* ---- login ---- */
.login-body { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(60% 60% at 80% 0%, var(--soft), transparent 70%), var(--bg); }
.login { width: min(400px, 100%); }
.login-kaart { background: var(--wit); border: 1px solid var(--line); border-radius: 22px; padding: 36px 32px; box-shadow: 0 24px 60px -30px rgba(15,42,32,.35); }
.login-logo { width: 44px; height: auto; margin-bottom: 18px; }
.login-kaart h1 { font-size: 26px; margin-bottom: 22px; }
.login-kaart p { margin-bottom: 22px; }
.login-kaart code { background: var(--soft); color: var(--deep); padding: 2px 6px; border-radius: 6px; font-size: 13.5px; }
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.veld span { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.veld input { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; font-size: 16px; color: var(--ink); background: var(--wit); }
.veld input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(11,143,95,.16); }
.alert { background: #fbeef0; border: 1px solid #efc9cf; color: var(--fout); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; font-size: 14.5px; }

/* ---- indeling: zijbalk + inhoud ---- */
.app { display: grid; grid-template-columns: var(--zij) 1fr; min-height: 100vh; }
.zijbalk {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 28px;
  background: var(--wit); border-right: 1px solid var(--line); padding: 26px 16px;
}
.merk { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-decoration: none; padding: 0 10px; }
.merk img { grid-row: 1 / 3; width: 34px; height: auto; }
.merk span { display: flex; flex-direction: column; line-height: 1.05; font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.merk span i { font-style: normal; color: var(--navy); }
.merk span b { color: var(--groen); }
.merk em { grid-column: 1 / -1; margin-top: 14px; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a, .menu button {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 0; background: none; color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; text-align: left;
}
.menu a:hover, .menu button:hover { background: var(--bg); color: var(--ink); }
.menu a[aria-current] { background: var(--soft); color: var(--deep); }
.menu a[aria-current] svg { color: var(--acc); }
.teller { margin-left: auto; font-size: 12.5px; font-weight: 700; background: var(--bg); color: var(--text); padding: 1px 9px; border-radius: 999px; }
.menu a[aria-current] .teller { background: var(--wit); color: var(--deep); }
.menu-onder { margin-top: auto; border-top: 1px solid var(--line); padding-top: 14px; }

.inhoud { min-width: 0; padding: 40px 32px 64px; }
.inhoud-in { max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.kop p { margin-top: 4px; }

/* ---- tegels ---- */
.tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tegel { background: var(--wit); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.tegel span { display: block; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.tegel strong { display: block; margin-top: 6px; font-family: var(--kop); font-size: 34px; font-weight: 600; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tegel .tegel-split { font-size: 24px; padding-top: 6px; }
.tegel small { font-family: var(--font); font-size: 13px; color: var(--muted); font-weight: 700; }

/* ---- panelen ---- */
.paneel { background: var(--wit); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.paneel-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.paneel-kop .muted { font-size: 13.5px; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.leeg { color: var(--muted); padding: 18px 0; text-align: center; }

/* horizontale balken: één reeks, één kleur, waarde in tekstkleur ernaast */
.balken { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.balken li { display: grid; grid-template-columns: 112px 1fr 76px; align-items: center; gap: 12px; font-size: 14.5px; }
.balk-label { color: var(--ink); font-weight: 600; }
.balk-spoor { height: 10px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.balk { display: block; height: 100%; width: var(--w); background: var(--acc); border-radius: 0 4px 4px 0; }
.balk-spoor:hover .balk { background: var(--deep); }
.balk-waarde { text-align: right; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.balk-waarde small { color: var(--muted); font-weight: 600; font-size: 12.5px; }

/* aanmeldingen per dag: kolommetjes op een basislijn */
.dagen { display: grid; grid-template-columns: repeat(30, 1fr); align-items: end; gap: 4px; height: 150px; border-bottom: 1px solid var(--line); }
.dag { height: 100%; display: flex; align-items: flex-end; cursor: default; }
.dag-balk { width: 100%; height: var(--h); background: var(--acc); border-radius: 4px 4px 0 0; transition: background .12s; }
.dag:hover .dag-balk { background: var(--deep); }
.dagen-as { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* ---- tabel ---- */
.paneel-tabel { padding: 6px 0; }
.tabel-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); }
td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fafcfb; }
.paneel:not(.paneel-tabel) th, .paneel:not(.paneel-tabel) td { padding-left: 0; }
.label { display: inline-block; margin: 2px 4px 2px 0; font-size: 12.5px; font-weight: 700; color: var(--deep); background: var(--soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.taal { font-size: 12px; font-weight: 700; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.acties { width: 1%; text-align: right; }
.icoonknop { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.icoonknop:hover { color: var(--fout); background: #fbeef0; border-color: #efc9cf; }

/* ---- filters ---- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters select, .zoek {
  height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--wit); color: var(--ink); font-size: 14.5px;
}
.filters select { padding: 0 34px 0 12px; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 54%, calc(100% - 12px) 54%; background-size: 5px 5px; background-repeat: no-repeat; }
.zoek { display: flex; align-items: center; gap: 8px; padding: 0 12px; flex: 1 1 240px; color: var(--muted); }
.zoek input { border: 0; outline: 0; background: none; width: 100%; height: 100%; color: var(--ink); }
.zoek:focus-within, .filters select:focus { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(11,143,95,.14); outline: none; }
.filters .knop { height: 42px; padding: 0 18px; }
.melding { background: var(--soft); border: 1px solid var(--rule); color: var(--deep); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14.5px; }
.paginering { display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 14.5px; }
.paginering a { color: var(--deep); font-weight: 700; text-decoration: none; }

/* ---- smaller scherm: zijbalk wordt bovenbalk ---- */
@media (max-width: 1100px) { .tegels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .zijbalk { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .merk em { display: none; }
  .menu { flex-direction: row; flex-wrap: wrap; }
  .menu a, .menu button { width: auto; padding: 8px 10px; }
  .menu-onder { margin: 0 0 0 auto; border: 0; padding: 0; }
  .twee { grid-template-columns: 1fr; }
  .inhoud { padding: 24px 16px 48px; }
}
@media (max-width: 560px) {
  .tegels { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tegel strong { font-size: 28px; }
  .balken li { grid-template-columns: 96px 1fr 64px; }
  .dagen { gap: 2px; }
  .menu a span.teller { display: none; }
}

/* ---- gebruikers ---- */
.formulier { display: flex; flex-direction: column; }
.formulier h2 { margin-bottom: 4px; }
.formulier > p { font-size: 14px; margin-bottom: 18px; }
.formulier .veld { margin-bottom: 14px; }
.formulier .veld small { font-weight: 400; color: var(--muted); }
.formulier .knop { align-self: flex-start; margin-top: 4px; }
.ik { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik svg { flex: none; }
@media (max-width: 900px) { .ik { display: none; } }

/* ---- menu-groepen ---- */
.menu-groep { display: block; margin: 16px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .menu-groep { display: none; } }

/* ---- dashboard: een kaart per onderdeel ---- */
.modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.module {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icoon tekst pijl" "cijfers cijfers cijfers";
  gap: 14px 16px; align-items: center; padding: 22px; text-decoration: none;
  background: var(--wit); border: 1px solid var(--line); border-radius: 18px; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.module:hover { border-color: var(--rule); box-shadow: 0 18px 40px -28px rgba(15,42,32,.4); transform: translateY(-1px); }
.module-icoon { grid-area: icoon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--soft); color: var(--acc); }
.module-icoon svg { width: 22px; height: 22px; }
.module-tekst { grid-area: tekst; min-width: 0; }
.module-tekst strong { display: block; color: var(--ink); font-size: 16.5px; }
.module-tekst small { display: block; color: var(--muted); font-size: 13.5px; }
.module-pijl { grid-area: pijl; color: var(--muted); transition: color .15s, transform .15s; }
.module:hover .module-pijl { color: var(--acc); transform: translateX(2px); }
.module-cijfers { grid-area: cijfers; display: flex; gap: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.module-cijfers b { font-family: var(--kop); font-size: 22px; font-weight: 600; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }

/* ---- platform-aanvullingen ---- */
.inhoud { padding: 44px 5% 72px; }
.veld select { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; font-size: 16px; color: var(--ink); background: var(--wit); }
.veld select:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(11,143,95,.16); }
.modules { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.module { grid-template-areas: "icoon tekst pijl"; }
.cel-naam { display: block; color: var(--ink); font-weight: 700; }
.cel-sub { display: block; color: var(--muted); font-size: 13.5px; }
.label-admin { background: #eaf1fb; color: #21477f; }
.label-arts { background: var(--soft); color: var(--deep); }
.label-zacht { background: var(--bg); color: var(--text); }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.status.is-aan { color: var(--deep); } .status.is-aan::before { background: var(--acc); }
.status.is-uit { color: var(--muted); } .status.is-uit::before { background: #c5cfcb; }
.acties { white-space: nowrap; }
.acties form { display: inline-block; vertical-align: middle; }
.knop-tekst { border: 0; background: none; color: var(--deep); font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 10px; border-radius: 10px; }
.knop-tekst:hover { background: var(--soft); }
.knop-uit { opacity: .45; cursor: not-allowed; }
.knop-uit:hover { background: var(--deep); border-color: var(--deep); }
.leeg-paneel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 72px 24px; }
.leeg-paneel p { max-width: 46ch; margin-bottom: 8px; }
.leeg-icoon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--soft); color: var(--acc); margin-bottom: 8px; }
.leeg-icoon svg { width: 30px; height: 30px; }

/* ---- smalle formulierpagina's ---- */
.smal { width: min(720px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.terug { color: var(--muted); font-weight: 600; font-size: 14.5px; text-decoration: none; margin-bottom: -8px; }
.terug:hover { color: var(--deep); }
.velden-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.formulier-acties { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.formulier .formulier-acties .knop { align-self: auto; margin: 0; }
fieldset.veld { border: 0; padding: 0; min-width: 0; }
fieldset.veld legend { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rollen legend { grid-column: 1 / -1; }
.rol-keuze { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.rol-keuze:hover { border-color: var(--acc); }
.rol-keuze:has(input:checked) { border-color: var(--acc); background: var(--soft); box-shadow: inset 0 0 0 1px var(--acc); }
.rol-keuze input { margin-top: 3px; accent-color: var(--deep); }
.rol-keuze strong { display: block; color: var(--ink); font-size: 15px; }
.rol-keuze small { display: block; color: var(--muted); font-size: 13px; }
.gegevens { display: grid; gap: 14px; }
.gegevens div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; }
.gegevens dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.gegevens dd { color: var(--ink); font-weight: 600; }
.ik-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text); }
.ik-link:hover { background: var(--bg); }
.ik-link[aria-current] { background: var(--soft); color: var(--deep); }
.ik-link span { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ik-link strong { color: var(--ink); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-link small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 640px) { .velden-2, .rollen { grid-template-columns: 1fr; } .gegevens div { grid-template-columns: 1fr; gap: 2px; } }
@media (max-width: 900px) { .ik-link small { display: none; } }

/* ---- winkel ---- */
.veld textarea { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 15.5px; line-height: 1.5; color: var(--ink); background: var(--wit); resize: vertical; min-height: 84px; }
.veld textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(11,143,95,.16); }
.velden-3 { display: grid; grid-template-columns: 1.4fr .7fr 1fr; gap: 0 16px; }
.werkbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--wit); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; }
.chip:hover { border-color: var(--rule); color: var(--ink); }
.chip[aria-current] { background: var(--deep); border-color: var(--deep); color: #fff; }
.werkbalk .zoek { flex: 0 1 300px; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--wit); color: var(--muted); }
.werkbalk .zoek:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(11,143,95,.14); }
.werkbalk .zoek input { border: 0; outline: 0; background: none; width: 100%; height: 100%; font: inherit; font-size: 14.5px; color: var(--ink); }
.product-cel { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.product-cel:hover .cel-naam { color: var(--deep); text-decoration: underline; }
.duim { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; color: var(--muted); }
.duim img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.duim-groot { width: 84px; height: 84px; border-radius: 18px; }
.tabel-producten td { padding-top: 10px; padding-bottom: 10px; }
.product-kop { align-items: center; }
.product-titel { display: flex; align-items: center; gap: 18px; }
.labels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.paneel-kop-binnen { padding: 14px 16px 6px; margin: 0; }
.paneel-kop h2 .teller { margin-left: 6px; vertical-align: middle; }
.knop-klein { padding: 8px 14px; font-size: 14px; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--text); }
.dd-tekst { font-weight: 400 !important; color: var(--text) !important; line-height: 1.5; }
.vinklijst { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.vinklijst li { position: relative; padding-left: 28px; color: var(--ink); font-size: 14.5px; }
.vinklijst li::before { content: "✓"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--soft); color: var(--acc); font-size: 11px; font-weight: 800; }
.klein { font-size: 13px; margin-top: 16px; }
.cel-naam:is(a) { text-decoration: none; }
a.cel-naam:hover { color: var(--deep); text-decoration: underline; }
.gevaar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; border-color: #f0d5d8; }
.gevaar h2 { font-size: 16px; margin-bottom: 2px; }
.gevaar p { font-size: 14px; }
.knop-gevaar { background: var(--wit); color: var(--fout); border-color: #efc9cf; }
.knop-gevaar:hover { background: #fbeef0; border-color: var(--fout); color: var(--fout); }
.schakelaar { display: flex; align-items: center; gap: 14px; padding: 14px 0 4px; cursor: pointer; }
.schakelaar input { position: absolute; opacity: 0; pointer-events: none; }
.schakel { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: #d3ddd9; transition: background .15s; }
.schakel::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.schakelaar input:checked + .schakel { background: var(--acc); }
.schakelaar input:checked + .schakel::after { transform: translateX(18px); }
.schakelaar input:focus-visible + .schakel { outline: 3px solid var(--acc); outline-offset: 2px; }
.schakelaar strong { display: block; color: var(--ink); font-size: 15px; }
.schakelaar small { display: block; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .velden-3 { grid-template-columns: 1fr 1fr; } .velden-3 .veld:first-child { grid-column: 1 / -1; } .werkbalk .zoek { flex: 1 1 100%; } }
.uitklap { border-top: 1px solid var(--line); margin-top: 6px; }
.uitklap .velden-2 { padding-left: 58px; }
.uitklap:has(input[data-toon]:not(:checked)) .uitklap-inhoud { display: none; }
@media (max-width: 640px) { .uitklap .velden-2 { padding-left: 0; } }
.fotorij { display: flex; flex-wrap: wrap; gap: 8px; } .fotorij .duim { width: 44px; height: 44px; }
.kleuren { display: flex; flex-wrap: wrap; gap: 10px; }
.kleur-keuze { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.kleur-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.kleur-keuze span { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.kleur-keuze input:checked + span { box-shadow: 0 0 0 2px var(--ink); }
.kleur-keuze input:focus-visible + span { outline: 3px solid var(--acc); outline-offset: 2px; }
.kleur-keuze small { font-size: 12px; color: var(--muted); font-weight: 600; }
.kleur-groen { background: #0b8f5f; } .kleur-bruin { background: #96603a; } .kleur-paars { background: #7a3f63; } .kleur-blauw { background: #2f6090; } .kleur-mauve { background: #8f4f6b; }
.veld-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.categorie-foto { width: 220px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }

/* Intakes en vragenlijsten */
.filters + .paneel { margin-top: 18px; }
.chip .teller { margin-left: 4px; opacity: .7; font-weight: 600; }
.label-let { background: #fbf3e0; color: #7a5200; }
.label-stop, .label-gestopt { background: #fbeef0; color: #a3263a; }
.label-ingediend { background: var(--soft); color: var(--deep); }
.label-bezig { background: var(--bg); color: var(--text); }
.alert-let { background: #fbf3e0; border-color: #ecd8a6; color: #6b4800; }
.twee + .alert, .twee + .paneel { margin-top: 22px; }
.antwoorden { margin: 0; display: grid; }
.antwoorden div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.antwoorden div:last-child { border-bottom: 0; }
.antwoorden dt { color: var(--text); font-size: 14.5px; }
.antwoorden dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 14.5px; }
.antwoorden dd ul { margin: 0; padding-left: 18px; }
.antwoorden .is-stop { background: #fbeef0; margin: 0 -14px; padding: 13px 14px; border-radius: 10px; }
.stopregel { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; }
.stopregel-als { margin: 0 0 6px; }
.stopregel ul { margin: 0 0 12px; padding-left: 20px; color: var(--text); font-size: 14.5px; }
.vragen { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.vragen li strong { display: block; color: var(--ink); }
.vragen .labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
@media (max-width: 640px) { .antwoorden div { grid-template-columns: 1fr; gap: 4px; } }
.formulier .vinklijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.formulier .vinklijst label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14.5px; }
.smal-form { max-width: 760px; margin-top: 22px; }
.logboek { list-style: none; display: flex; flex-direction: column; }
.logboek li { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.logboek li:first-child { border-top: 0; }
a.cel-naam { text-decoration: none; }
a.cel-naam:hover { text-decoration: underline; }
@media (max-width: 700px) { .logboek li { grid-template-columns: 1fr; gap: 2px; } }
.kop-acties { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.testpaneel { border-style: dashed; border-color: #e6c77a; background: #fffcf3; }
.testpaneel-knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.testpaneel .knop[disabled] { opacity: .45; cursor: not-allowed; }
.omgeving { display: inline-block; margin: -6px 0 10px 16px; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.omgeving-staging { background: #fbf3e0; color: #7a5200; }
.omgeving-live { background: var(--soft); color: var(--deep); }
.vinklijst-niet li::before { content: "✕" !important; color: var(--fout) !important; }
.staging-status { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.staging-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--rule); border-top-color: var(--acc); animation: stagingdraai .8s linear infinite; }
@keyframes stagingdraai { to { transform: rotate(360deg); } }
.staging-laatst { margin-top: 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.staging-laatst.is-ok { background: var(--soft); border-color: var(--rule); }
.staging-laatst.is-fout { background: #fbeef0; border-color: #efc9cf; }
.staging-laatst ul { margin: 4px 0 0 18px; color: var(--text); }
.staging-fout { color: var(--fout); font-weight: 700; }
.vinklijst-niet li::before { background: #fbeef0 !important; }
.vinklijst + .paneel-kop { margin-top: 24px; }
.onderhoud-balk { background: #fbeef0; border: 1px solid #efc9cf; color: #7d1f2f; border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; font-size: 14.5px; }
.onderhoud-balk a { color: #7d1f2f; font-weight: 800; margin-left: 6px; }
.paneel-onderhoud { border-color: #efc9cf; box-shadow: 0 0 0 3px rgba(163,38,58,.08); }
.koppel-sleutel { word-break: break-all; user-select: all; }
.koppel-knoppen { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.inline-form { display: inline; margin-left: 6px; }
.mail-test { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.mail-test .veld { flex: 1 1 240px; }
.automail-lijst { margin: 6px 0 4px; }

/* ---------- Mail ---------- */
.mail-tabs { margin: -6px 0 18px; }
.mail-dialoog { border: 0; border-radius: 20px; padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 80px -30px rgba(18,33,28,.55); margin: auto; }
.mail-dialoog::backdrop { background: rgba(18,33,28,.45); }
.mail-dialoog > .formulier, .mail-dialoog > form { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.mail-fout { color: var(--fout); max-width: 360px; white-space: normal; }
.automail-hoofd { border-style: dashed; }
.automail-hoofd.is-aan { border-color: var(--rule); background: var(--soft); border-style: solid; }
.schakel-knop { width: 44px; height: 26px; border-radius: 999px; border: 0; background: #d3ddd9; position: relative; cursor: pointer; }
.schakel-knop span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.schakel-knop.is-aan { background: var(--acc); }
.schakel-knop.is-aan span { transform: translateX(18px); }
.schema-dag { padding: 12px 0; border-top: 1px solid var(--line); }
.schema-dag:first-of-type { border-top: 0; }
.schema-dag h3 { font-size: 14px; color: var(--ink); margin-bottom: 8px; }
.schema-dag h3::first-letter { text-transform: uppercase; }
.schema-lijst { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.schema-lijst li { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--ink); }
.schema-lijst li small { display: block; color: var(--muted); font-size: 13px; }
.schema-lijst li.is-uit { opacity: .55; }
.schema-lijst li.is-niet { background: #fffcf3; }
.schema-tijd { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.regel-form { gap: 16px; }
.regel-trigger { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.regel-trigger legend { font-weight: 800; color: var(--ink); padding: 0 6px; }
.regel-keuze { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.regel-keuze small { display: block; color: var(--muted); font-size: 13px; }
.regel-rij { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 26px; }
.regel-rij input, .regel-rij select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font: inherit; }
.regel-rij input[type=number] { width: 90px; }
.regel-hulp { font-size: 14px; }
.regel-hulp summary { cursor: pointer; color: var(--deep); font-weight: 700; }
.regel-hulp ul { margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.code-veld { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px !important; }

/* Editor */
.me { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); gap: 20px; align-items: start; }
.me-links, .me-rechts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.me-kop { display: flex; flex-direction: column; gap: 12px; }
.me-status { font-size: 13px; color: var(--muted); }
.me-status .is-ok { color: var(--deep); font-weight: 700; }
.me-status .is-fout { color: var(--fout); font-weight: 700; }
.me-medisch { background: #fbeef0; border: 1px solid #efc9cf; color: #7d1f2f; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 600; }
.me-paneel { padding: 0; overflow: hidden; }
.me-balk { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); background: #fafcfb; position: sticky; top: 0; z-index: 2; }
.me-balk button, .me-balk select, .me-kleur { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.me-balk button:hover { border-color: var(--rule); background: var(--soft); }
.me-balk .me-accent { color: var(--deep); font-weight: 700; }
.me-balk .is-aan { background: var(--deep); color: #fff; border-color: var(--deep); }
.me-kleur { display: inline-flex; align-items: center; gap: 6px; }
.me-kleur input { width: 22px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; }
.me-scheiding { width: 1px; background: var(--line); margin: 2px 4px; }
.me-ruimte { flex: 1; }
.me-vak { min-height: 420px; padding: 24px 28px; outline: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.6; color: #4f6159; }
.me-vak h1 { font-family: Georgia, serif; font-size: 26px; color: #12211c; margin: 0 0 14px; }
.me-vak h2 { font-family: Georgia, serif; font-size: 21px; color: #12211c; margin: 18px 0 10px; }
.me-vak h3 { font-size: 17px; color: #12211c; margin: 16px 0 8px; }
.me-vak p { margin: 0 0 12px; }
.me-vak ul, .me-vak ol { margin: 0 0 12px 22px; }
.me-vak blockquote { margin: 0 0 12px; padding: 12px 16px; background: #eef8f2; border-radius: 12px; color: #12211c; }
.me-vak a { color: #04502f; font-weight: 700; }
.me-vak a.wlm-knop { display: inline-block; padding: 12px 24px; border-radius: 999px; color: #fff; text-decoration: none; background: #04502f; }
.me-vak .wlm-foto { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; margin: 8px 0 16px; padding: 10px; border: 1px dashed var(--rule); border-radius: 12px; }
.me-vak .wlm-foto img { width: 160px; height: auto; border-radius: 10px; }
.me-vak hr { border: 0; border-top: 1px solid #e3ece8; margin: 18px 0; }
.me-bron { width: 100%; min-height: 420px; border: 0; padding: 18px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; color: var(--ink); background: #fbfdfc; resize: vertical; outline: none; }
.me-hulp { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.me-voorbeeld { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: 12px; background: #f4f7f6; }
.me-pid select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 13.5px; max-width: 220px; }
.me-waarden { margin-top: 12px; font-size: 13.5px; }
.me-waarden summary { cursor: pointer; color: var(--deep); font-weight: 700; }
.me-tabel { width: 100%; margin-top: 8px; border-collapse: collapse; }
.me-tabel td { padding: 5px 6px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink); word-break: break-word; }
.me-tabel td:first-child { white-space: nowrap; }
.me-publiceer { display: flex; gap: 8px; }
.me-publiceer input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.me-versies { list-style: none; display: flex; flex-direction: column; }
.me-versies li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.me-versies li:first-child { border-top: 0; }
.me-versies small { display: block; color: var(--muted); font-size: 12.5px; }
.me-var-dialoog { width: min(640px, calc(100vw - 32px)); }
.me-var-dialoog input[type=search] { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.me-var-lijst { max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.me-var-lijst h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 10px 0 4px; }
.me-var-lijst button { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.me-var-lijst button:hover { background: var(--soft); }
.me-var-lijst code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--deep); }
.me-var-lijst em { font-style: normal; font-size: 11px; font-weight: 800; color: #a3263a; background: #fbeef0; padding: 2px 8px; border-radius: 999px; }
.me-voorbeeld-code { display: block; padding: 8px 10px; }
@media (max-width: 1200px) { .me { grid-template-columns: 1fr; } }
.tegel-fout { color: var(--fout) !important; }
.gezond-balken { display: flex; gap: 6px; align-items: flex-end; height: 56px; margin-top: 8px; }
.gezond-balken span { flex: 1; display: flex; flex-direction: column-reverse; align-items: stretch; height: 100%; position: relative; }
.gezond-balken i { display: block; border-radius: 3px; }
.gezond-balken em { position: absolute; bottom: -16px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10.5px; color: var(--muted); }
.gb-ok { background: var(--acc); } .gb-fout { background: var(--fout); }
.gb-h0 { height: 0; } .gb-h1 { height: 10%; } .gb-h2 { height: 20%; } .gb-h3 { height: 30%; } .gb-h4 { height: 40%; } .gb-h5 { height: 50%; } .gb-h6 { height: 60%; } .gb-h7 { height: 70%; } .gb-h8 { height: 80%; } .gb-h9 { height: 90%; } .gb-h10 { height: 100%; }
.gezond-balken span .gb-h0.gb-ok { height: 3px; background: var(--line); }
.me-afmeld { padding: 2px 0; }
.me-word { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 6px 10px; font-size: 13.5px; color: var(--deep); font-weight: 700; cursor: pointer; }
.me-word:hover { background: var(--soft); }
.me-balk [data-snel] { max-width: 180px; color: var(--deep); font-weight: 700; }
.me-debug { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); }
.me-vak .wlm-prijstabel, .me-vak .wlm-enquete, .me-vak .wlm-handtekening { margin: 8px 0 16px; padding: 14px 16px; border: 1px dashed var(--acc); border-radius: 12px; background: var(--soft); color: var(--deep); font-weight: 700; font-size: 14px; }
.patient-sub { font-size: 15px; color: var(--ink); margin: 20px 0 8px; }
.regel-status { list-style: none; display: flex; flex-direction: column; }
.regel-status li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.regel-status li:first-child { border-top: 0; }
.regel-status .label { white-space: normal; text-align: right; }
/* Dashboard: omzet per maand */
.omzet-paneel { margin-top: 22px; }
.omzet-paneel h2 { margin: 0 0 12px; }
.omzet-grafiek { display: block; width: 100%; height: auto; overflow: visible; }
.og-lijn { stroke: var(--line); stroke-width: 1; }
.og-basis { stroke: var(--rule); }
.og-as { fill: var(--muted); font-size: 11.5px; font-family: var(--font); }
.og-waarde { fill: var(--ink); font-size: 12.5px; font-weight: 700; font-family: var(--font); }
.og-staaf path { fill: var(--groen); }
.og-staaf.og-nu path { fill: var(--deep); }
.og-staaf:hover path { fill: var(--acc); }
.og-raak { fill: transparent; }
.omzet-tabel { margin-top: 14px; }
.omzet-tabel summary { cursor: pointer; color: var(--text); font-weight: 700; font-size: 14px; }
.omzet-tabel table { margin-top: 10px; }
/* Importeren uit WooCommerce */
.kop-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.import-form { max-width: 560px; }
.import-uitkomst { margin-top: 22px; }
.import-form + .paneel, .import-uitkomst + .paneel { margin-top: 22px; }
.import-dialoog { width: min(1080px, calc(100vw - 32px)); }
.import-dialoog-kop { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 8px; }
.import-dialoog-kop h2 { margin: 0; }
.import-dialoog .tabel-wrap { max-height: min(60vh, 560px); overflow: auto; padding: 0 12px; }
.import-dialoog > form.import-dialoog-voet { flex-direction: row; justify-content: flex-end; gap: 10px; padding: 16px 24px 22px; border-top: 1px solid var(--line); }
/* Patiëntkiezer (mailschema en mail-log) */
.kiezer { position: relative; }
.kiezer-knop { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--wit); color: var(--ink); font-weight: 700; font-size: 14.5px; cursor: pointer; min-width: 220px; max-width: 320px; }
.kiezer-knop::-webkit-details-marker { display: none; }
.kiezer-knop:hover { border-color: var(--rule); }
.kiezer[open] .kiezer-knop, .kiezer-knop:focus-visible { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(11,143,95,.14); outline: 0; }
.kiezer-knop > svg:first-child { width: 17px; height: 17px; color: var(--muted); flex: none; }
.kiezer-knop span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiezer-pijl { width: 16px; height: 16px; color: var(--muted); flex: none; transition: transform .15s; }
.kiezer[open] .kiezer-pijl { transform: rotate(180deg); }
.kiezer-paneel { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(360px, calc(100vw - 32px)); background: var(--wit); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(18,33,28,.45); padding: 8px; }
.kiezer-zoek { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.kiezer-zoek:focus-within { border-color: var(--acc); }
.kiezer-zoek svg { width: 16px; height: 16px; flex: none; }
.kiezer-zoek input { border: 0; outline: 0; background: none; width: 100%; font: inherit; font-size: 14.5px; color: var(--ink); }
.kiezer-lijst { max-height: 320px; overflow-y: auto; margin-top: 6px; }
.kiezer-optie { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 14.5px; }
.kiezer-optie small { color: var(--muted); font-size: 12.5px; }
.kiezer-optie:hover, .kiezer-optie.is-actief { background: var(--soft); }
.kiezer-optie.is-gekozen strong { color: var(--deep); }
.kiezer-optie.is-gekozen strong::after { content: " ✓"; }
.kiezer-optie[hidden] { display: none; }
.kiezer-leeg { margin: 0; padding: 12px; color: var(--muted); font-size: 14px; }
.werkbalk + .paneel { margin-top: 16px; }
@media (max-width: 640px) { .kiezer, .kiezer-knop { width: 100%; max-width: none; } }
.werkbalk-rechts { justify-content: flex-end; }
/* Zoekbalk boven lijsten (abonnementen, bestellingen) */
.lijst-werkbalk { margin-bottom: 16px; }
.lijst-werkbalk .filters { margin: 0; }
.zoekbalk { position: relative; display: flex; align-items: center; gap: 10px; flex: 0 1 360px; height: 44px; padding: 0 12px 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--wit); color: var(--muted); box-shadow: 0 1px 2px rgba(18,33,28,.04); transition: border-color .15s, box-shadow .15s; }
.zoekbalk:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(11,143,95,.14); color: var(--acc); }
.zoekbalk > svg { width: 18px; height: 18px; flex: none; }
.zoekbalk input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: 100%; font: inherit; font-size: 14.5px; color: var(--ink); }
.zoekbalk input::-webkit-search-cancel-button { display: none; }
.zoekbalk-weg { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: var(--muted); flex: none; }
.zoekbalk-weg:hover { background: var(--soft); color: var(--ink); }
.zoekbalk-weg svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .zoekbalk { flex: 1 1 100%; } }
/* Audit-log */
.audit-soort select { height: 42px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--wit); color: var(--ink); font: inherit; font-weight: 700; font-size: 14.5px; max-width: 260px; }
.audit-soort select:focus { border-color: var(--acc); outline: 0; box-shadow: 0 0 0 3px rgba(11,143,95,.14); }
.audit-details { font-size: 13px; color: var(--text); max-width: 420px; }
.audit-paginas { margin-top: 16px; justify-content: center; }

/* Product: bestellen en verzenden */
.formulier-kop { font-size: 17px; margin: 14px 0 2px; padding-top: 18px; border-top: 1px solid var(--line); }
.staffel { display: flex; flex-direction: column; gap: 6px; }
.staffel-kop, .staffel-rij { display: grid; grid-template-columns: 140px 160px; gap: 10px; }
.staffel-kop span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.staffel-rij input { width: 100%; }
[hidden] { display: none !important; }
.pakket-items { display: flex; flex-direction: column; gap: 8px; }
.pakket-rij { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 10px; }
.pakket-rij-kop span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* Zoekbare keuzelijst in formulieren (select[data-zoekselect]) */
.kiezer-veld { width: 100%; }
.kiezer-veld .kiezer-knop { width: 100%; max-width: none; min-width: 0; height: 48px; font-weight: 400; font-size: 15px; padding: 0 14px; }
.kiezer-veld .kiezer-knop.is-leeg span { color: var(--muted); }
.kiezer-veld .kiezer-paneel { left: 0; right: auto; width: 100%; min-width: 280px; }
.kiezer-veld .kiezer-optie { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; font-size: 14.5px; }
.kiezer-veld .kiezer-optie strong { font-weight: 400; }
.kiezer-veld .kiezer-optie.is-gekozen strong { font-weight: 700; }
.kiezer-groep { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kosten-rijen { display: flex; flex-direction: column; gap: 8px; }
.kosten-rij { display: grid; grid-template-columns: 110px 180px; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink); }
.geld-veld { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--wit); overflow: hidden; max-width: 220px; }
.geld-veld:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(11,143,95,.14); }
.geld-veld b { padding: 0 2px 0 12px; color: var(--muted); font-weight: 400; }
.geld-veld input { border: 0 !important; box-shadow: none !important; background: none !important; width: 100%; }
[data-max-aantal] { max-width: 160px; }
.kosten-variant { padding: 4px 0 6px 58px; display: block; } @media (max-width: 640px) { .kosten-variant { padding-left: 0; } } .kosten-blok { display: flex; flex-direction: column; gap: 14px; }
.velden-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 760px) { .velden-4 { grid-template-columns: 1fr 1fr; } }
.recept-foto-veld { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.recept-foto-veld img { width: 160px; height: 110px; object-fit: cover; border-radius: 14px; }
.recept-foto-veld .veld { flex: 1; min-width: 220px; }
.vriend-paneel{margin-bottom:18px}
.vriend-kop{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vriend-kop h2{margin:0}
.vriend-korting{border:0;padding:0;margin:0}
.vriend-korting legend{font-weight:700;margin-bottom:6px}
.vriend-invoer{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px}
.vriend-cijfers{display:flex;gap:28px;flex-wrap:wrap;padding:14px 0 2px;border-top:1px solid var(--lijn,#e3ece8)}
.vriend-cijfers span{display:flex;flex-direction:column;font-size:13px;color:var(--grijs,#6b7d76)}
.vriend-cijfers strong{font-size:20px;color:inherit;color:var(--inkt,#12211c)}
.kijk-balk{display:flex;align-items:center;gap:10px;background:#fff8e6;border:1px solid #f0d58a;color:#6b4e00;border-radius:12px;padding:11px 16px;margin-bottom:18px;font-size:14.5px}
.kijk-balk svg{width:18px;height:18px;flex:none}
.alleen-kijken .is-op-slot{opacity:.55;pointer-events:none}
.rechten-tabel td,.rechten-tabel th{vertical-align:middle}
.rechten-groep th{background:var(--zacht,#f4f8f6);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs,#6b7d76)}
.niveau-keuze{display:inline-flex;border:1px solid var(--lijn,#e3ece8);border-radius:999px;padding:3px;gap:2px;background:#fff}
.niveau-keuze label{position:relative;cursor:pointer}
.niveau-keuze input{position:absolute;opacity:0;pointer-events:none}
.niveau-keuze span{display:block;padding:6px 14px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--grijs,#6b7d76)}
.niveau-keuze input:checked+span{background:var(--diep,#04502f);color:#fff}
.niveau-keuze input[value=geen]:checked+span{background:#8a948f}
.niveau-keuze input:focus-visible+span{outline:2px solid var(--diep,#04502f);outline-offset:2px}
.niveau-keuze input:disabled+span{opacity:.35;cursor:not-allowed}
.rechten-snel{display:flex;gap:8px;flex-wrap:wrap}
.rechten-volledig{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rechten-arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px}
[data-rechten-alles].is-volledig [data-rechten-detail]{opacity:.45;pointer-events:none}
.fotos-blok{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.fotos-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.foto-kaart{margin:0;border:1px solid var(--lijn,#e3ece8);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.foto-kaart img{width:100%;aspect-ratio:1;object-fit:contain;background:#f6f8f7;display:block}
.foto-kaart figcaption{display:flex;flex-direction:column;gap:4px;padding:8px 10px;font-size:13px}
.foto-kaart label{display:flex;align-items:center;gap:6px;cursor:pointer}
.foto-weg svg{width:14px;height:14px}
.foto-kaart:has(.foto-weg input:checked){opacity:.45}
.foto-kaart:has(.foto-hoofd input:checked){border-color:var(--diep,#04502f);box-shadow:0 0 0 1px var(--diep,#04502f)}
.foto-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1.5px dashed var(--lijn,#cfdcd6);border-radius:14px;padding:14px 16px;cursor:pointer;font-weight:700}
.foto-upload:hover{border-color:var(--diep,#04502f)}
.foto-upload input{position:absolute;opacity:0;width:1px;height:1px}
.foto-upload span{display:inline-flex;align-items:center;gap:6px}
.foto-upload svg{width:18px;height:18px}
.foto-upload small{font-weight:400;color:var(--grijs,#6b7d76)}
.overstap h2{margin:0 0 12px}
.overstap-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.overstap-knoppen form{margin:0}
.overstap .alert{margin:14px 0 0}
.overstap-stand{margin:16px 0 10px}
.tekst-rood{color:#b42318;font-weight:700}
.cat-sub .cel-naam{padding-left:6px;font-weight:600}.cat-tak{color:var(--grijs,#6b7d76);margin-right:8px;font-weight:400}
.cat-naam{display:inline-flex;align-items:center;gap:10px}
.kleur-eigen-keuze input[type=color]{position:static;opacity:1;pointer-events:auto;width:36px;height:36px;padding:0;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px var(--line);background:none;cursor:pointer;-webkit-appearance:none;appearance:none;overflow:hidden}
.kleur-eigen-keuze input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.kleur-eigen-keuze input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.kleur-eigen-keuze input[type=color]::-moz-color-swatch{border:0;border-radius:50%}
.kleur-eigen-keuze:has(input[type=radio]:checked) input[type=color]{box-shadow:0 0 0 2px var(--ink)}
.kleur-eigen-keuze:has(input[type=radio]:focus-visible) input[type=color]{outline:3px solid var(--acc);outline-offset:2px}
.live-modal{margin:auto;border:0;border-radius:22px;padding:0;width:min(520px,calc(100vw - 32px));box-shadow:0 30px 80px -30px rgba(10,30,20,.45)}
.live-modal::backdrop{background:rgba(10,30,20,.45);backdrop-filter:blur(3px)}
.live-modal-in{padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.live-modal h2{margin:0}
.live-modal .muted{margin:0}
.live-icoon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--zacht,#eef8f2);color:var(--diep,#04502f)}
.live-icoon svg{width:24px;height:24px}
.live-modal.is-fout .live-icoon{background:#fdecea;color:#b42318}
.live-balk{position:relative;height:12px;border-radius:999px;background:#e8efeb;overflow:hidden;margin-top:6px}
.live-balk span{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;background:linear-gradient(90deg,#0b8f5f,#04502f);transition:width .6s ease}
.live-balk.is-wachten span{width:35%!important;animation:live-wacht 1.4s ease-in-out infinite}
.live-modal.is-fout .live-balk span{background:#b42318}
@keyframes live-wacht{0%{left:-35%}100%{left:100%}}
.live-cijfers{display:flex;justify-content:space-between;font-size:14px;color:var(--grijs,#6b7d76)}
.live-cijfers strong{color:var(--inkt,#12211c)}
.live-stappen{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.live-stappen li{display:flex;gap:8px;font-size:14px;animation:live-in .3s ease}
.live-stappen li::before{content:"✓";color:#0b8f5f;font-weight:700}
.live-modal.is-fout .live-stappen li:last-child::before{content:"!";color:#b42318}
@keyframes live-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.live-balk span,.live-stappen li{transition:none;animation:none}}
.verkoop{display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.verkoop-keuze{display:flex;gap:28px;flex-wrap:wrap}
.verkoop:has(input[name=koop_abo]:not(:checked)) #abo-velden{display:none}
.veld-smal{max-width:320px}
.veld-breed{grid-column:1/-1}
.schema-uitleg{display:block;margin-top:6px;font-size:13px;color:var(--diep,#04502f);font-weight:600}
.schema-uitleg.is-fout{color:#b42318}
.leverschema-paneel{margin-bottom:18px}
.leverschema-rij{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.leverschema-rij .veld{flex:1;min-width:260px;margin:0}
.leverschema-rij .knop{margin-top:26px}
.schema-blokken{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.schema-blok{display:flex;flex-direction:column;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px 10px 26px;position:relative;cursor:grab;transition:border-color .15s,box-shadow .15s,opacity .15s}
.schema-blok:hover{border-color:var(--acc)}
.schema-blok.is-laatste{background:var(--zacht,#eef8f2);border-color:var(--acc)}
.schema-blok.is-sleep{opacity:.4}
.schema-blok.is-doel{box-shadow:0 0 0 3px var(--acc)}
.schema-blok small{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#6b7d76)}
.schema-greep{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--muted,#6b7d76);font-size:13px;letter-spacing:-2px}
.schema-velden{display:flex;gap:6px}
.schema-velden input{width:64px}
.schema-velden input,.schema-velden select{padding:7px 8px;font-size:14px;border-radius:10px}
.schema-acties{display:flex;gap:4px}
.schema-acties button{border:1px solid var(--line);background:#fff;border-radius:8px;width:28px;height:26px;cursor:pointer;font-size:15px;line-height:1;color:var(--ink)}
.schema-acties button:hover{border-color:var(--acc)}
.schema-acties .schema-weg:hover{border-color:#b42318;color:#b42318}
.schema-pijl{color:var(--muted,#6b7d76);font-size:18px}
.schema-plus{border:1.5px dashed var(--line);background:none;border-radius:14px;padding:12px 16px;font:inherit;font-weight:700;color:var(--diep,#04502f);cursor:pointer}
.schema-plus:hover{border-color:var(--acc)}
.leverschema-rij{align-items:flex-end}
.leverschema-rij .knop{margin-top:0}
.veld-link{display:inline-block;margin-top:6px;font-size:13px;font-weight:700}.prijs-welke{margin-bottom:6px}
.prijs-gepland{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
/* ---- Variant bewerken: breed met meelopende zijbalk ---- */
.variant-pagina{max-width:1240px;margin:0 auto}
.variant-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.variant-hoofd{display:flex;flex-direction:column;gap:18px;min-width:0}
.variant-hoofd>.paneel,.variant-hoofd>form.paneel{margin:0}
.variant-form{display:flex;flex-direction:column;gap:18px}
.variant-blok{margin:0;scroll-margin-top:20px}
.variant-hoofd>[id]{scroll-margin-top:20px}
.variant-kop{margin:0 0 4px;font-size:19px}
.variant-blok .formulier-kop:first-child{margin-top:0}
.variant-acties-mobiel{display:none}
.variant-zij{position:sticky;top:20px;display:flex;flex-direction:column;gap:14px}
.variant-overzicht{display:flex;flex-direction:column;gap:4px;margin:0}
.variant-zij-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#6b7d76)}
.variant-zij-naam{font-family:var(--kop,inherit);font-size:20px;line-height:1.2}
.variant-feiten{margin:12px 0 4px;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.variant-feiten div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.variant-feiten dt{color:var(--muted,#6b7d76)}
.variant-feiten dd{margin:0;text-align:right;font-weight:600}
.variant-actief{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.variant-zij-knoppen{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.variant-zij-knoppen .knop{width:100%;justify-content:center}
.variant-nav{display:flex;flex-direction:column;gap:2px;margin:0;padding:10px}
.variant-nav a{display:block;padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14.5px}
.variant-nav a:hover{background:var(--zacht,#f4f8f6)}
.variant-nav a.is-hier{background:var(--zacht,#eef8f2);color:var(--diep,#04502f)}
.variant-nav .variant-nav-gevaar{color:#b42318}
@media (max-width:1080px){
  .variant-raster{grid-template-columns:minmax(0,1fr)}
  .variant-zij{position:static;order:-1}
  .variant-nav{display:none}
  .variant-zij-knoppen{display:none}
  .variant-acties-mobiel{display:flex}
}
.pakket-form{max-width:980px}
.pakket-regel{display:grid;grid-template-columns:minmax(0,1fr) 170px 90px 40px;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.pakket-regel .veld{margin:0}
.pakket-regel-kop{padding:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#6b7d76)}
.pakket-uitleg{grid-column:1/-1;font-size:13px;color:var(--diep,#04502f);font-weight:600;margin-top:-2px}
.pakket-uitleg:empty{display:none}
.pakket-erbij{margin-top:12px}
@media (max-width:720px){.pakket-regel{grid-template-columns:1fr 1fr 40px}.pakket-product{grid-column:1/-1}.pakket-regel-kop{display:none}}
.kiezer-zoek input,.kiezer-zoek input:focus,.kiezer-zoek input:focus-visible{border:0!important;box-shadow:none!important;outline:0!important;padding:0!important;height:auto!important;background:none!important;border-radius:0!important}
.beschikbaar{margin-top:18px}
.beschikbaar .paneel-kop-binnen{display:flex;justify-content:space-between;align-items:center}
.beschikbaar-land{text-align:center;width:120px}
.beschikbaar-cat td{background:var(--zacht,#f4f8f6)}
.beschikbaar-prod .beschikbaar-naam{padding-left:16px;display:inline-block}
.beschikbaar-vink{display:inline-flex;padding:6px;cursor:pointer}
.beschikbaar-vink input{width:18px;height:18px;accent-color:var(--diep,#04502f);cursor:pointer}
.beschikbaar td.is-uit{opacity:.3}
.beschikbaar .formulier-acties{padding:14px 18px}