:root {
  --bg: #f5f3ec;
  --paneel: #ffffff;
  --inkt: #1c2330;
  --zacht: #667085;
  --lijn: #e2ded2;
  --top: #ffffff;
  --top-inkt: #1c2330;
  --top-zacht: #667085;
  --top-chip: #f5f3ec;
  --top-actief: #ebe7da;
  --top-rand: #d5d0c2;
  --toast: #1c2330;
  --goud: #b8891f;
  --zilver: #8a94a3;
  --accent: #1f5f8b;
  --plus: #1c7a4c;
  --min: #b3372f;
  --radius: 10px;
  --serie1: #1a6fb0;
  --serie2: #b8891f;
}
:root[data-thema="donker"] {
  color-scheme: dark;
  --serie1: #3f90c8;
  --serie2: #b5881f;
  --bg: #10151e;
  --paneel: #19202c;
  --inkt: #e8ebf0;
  --zacht: #98a2b3;
  --lijn: #2a3342;
  --top: #0b1018;
  --top-inkt: #eef0f4;
  --top-zacht: #aab3c2;
  --top-chip: #1e2839;
  --top-actief: #26324a;
  --top-rand: #3a4558;
  --toast: #26324a;
  --accent: #5aa9dc;
  --plus: #4cc38a;
  --min: #f0766c;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--inkt);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 22px; }
h3 { font-size: 16px; margin-bottom: 12px; }
.muted { color: var(--zacht); }
small.muted { display: block; margin-top: 4px; font-weight: 400; }

/* Merk */
.brand { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; }
.brand.small { font-size: 18px; color: var(--top-inkt); }
.brand-mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3d98a, var(--goud) 60%, #7a5a10);
  box-shadow: 9px 0 0 -3px var(--zilver);
  margin-right: 6px;
}

/* Formulieren */
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--zacht); }
input, select {
  font: inherit; color: var(--inkt); background: var(--paneel);
  border: 1px solid var(--lijn); border-radius: 7px; padding: 8px 10px; min-width: 0;
}
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--lijn); background: var(--paneel); color: var(--inkt);
  border-radius: 7px; padding: 8px 14px;
}
.btn:hover { border-color: var(--zacht); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.link { border: 0; background: none; color: var(--accent); padding: 4px 0; }
.btn.tiny { padding: 3px 9px; font-size: 12px; background: transparent; color: var(--top-inkt); border-color: #3a4558; }
.btn.icon { padding: 4px 8px; font-size: 13px; }
.btn.gevaar { color: var(--min); }
.btn:disabled { opacity: .6; cursor: wait; }

/* Inloggen */
.auth { min-height: calc(100vh - 50px); display: grid; place-items: center; padding: 16px; }
.auth-card {
  width: 100%; max-width: 400px; background: var(--paneel);
  border: 1px solid var(--lijn); border-radius: 14px; padding: 28px;
}
.auth-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.tabs { display: flex; gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--lijn); }
.tab {
  font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer;
  padding: 8px 12px; color: var(--zacht); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--inkt); border-bottom-color: var(--goud); }
.melding { margin: 14px 0 0; padding: 10px 12px; border-radius: 7px; background: var(--bg); font-size: 14px; }
.melding.fout { color: var(--min); }

/* Bovenbalk */
.top { background: var(--top); color: var(--top-inkt); padding: 12px 20px 14px; position: sticky; top: 0; z-index: 5; }
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.menu { display: flex; gap: 4px; }
.menu-item {
  font: inherit; font-weight: 600; cursor: pointer; background: none; border: 0;
  color: #aab3c2; padding: 6px 12px; border-radius: 7px;
}
.menu-item:hover { color: #fff; }
.menu-item.active { background: #26324a; color: #fff; }
.koersen { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.koers {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  padding: 7px 14px; border-radius: 8px; background: #1e2839; border-left: 4px solid;
}
.koers.goud { border-color: var(--goud); }
.koers.zilver { border-color: var(--zilver); }
.koers-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #aab3c2; }
.koers-waarde { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.koers-eenheid, .koers-sub { font-size: 12px; color: #aab3c2; }
.koers-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #aab3c2; flex-wrap: wrap; }

/* Pagina */
main { padding: 22px 20px 30px; max-width: 1700px; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.filters .grow { flex: 1 1 180px; }
.filters .smal { width: 110px; }

/* Tabel */
.tabel-wrap { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius); overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; white-space: nowrap; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--lijn); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); user-select: none; }
th[data-sort] { cursor: pointer; }
th[data-sort]:hover { color: var(--inkt); }
th.sorted::after { content: " ▲"; font-size: 9px; }
th.sorted.desc::after { content: " ▼"; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--inkt); background: var(--bg); }
.thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; display: block; cursor: zoom-in; border: 1px solid var(--lijn); }
.thumb.leeg { padding: 0; cursor: default; background: var(--bg); }
.pil { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid; }
.pil.goud { color: var(--goud); }
.pil.zilver { color: var(--zilver); }
.pil.anders { color: var(--zacht); }
.plus { color: var(--plus); }
.min { color: var(--min); }
.acties { display: flex; gap: 4px; }
.leeg { padding: 34px 16px; text-align: center; color: var(--zacht); margin: 0; }

.totalen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.totaal { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 12px 14px; }
.totaal > span { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); }
.totaal strong { font-size: 19px; font-variant-numeric: tabular-nums; }

/* Profiel */
.profiel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.kaart { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.kaart h3, .kaart p { margin: 0; }

/* Dialogen */
dialog { border: 1px solid var(--lijn); border-radius: 14px; background: var(--paneel); color: var(--inkt); padding: 0; max-width: min(720px, 94vw); width: 100%; }
dialog::backdrop { background: rgba(10, 14, 22, .6); }
#item-form { padding: 22px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.form-grid .breed { grid-column: 1 / -1; }
.foto-preview { max-height: 130px; max-width: 100%; border-radius: 8px; margin-top: 6px; align-self: flex-start; }
.berekend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; padding: 12px; border-radius: 8px; background: var(--bg); }
.berekend > div > span { display: block; font-size: 12px; color: var(--zacht); }
.berekend strong { font-variant-numeric: tabular-nums; }
.dialog-knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
#foto-dialog { width: auto; background: transparent; border: 0; }
#foto-groot { max-width: 90vw; max-height: 85vh; border-radius: 10px; display: block; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--top); color: #fff; padding: 10px 18px; border-radius: 8px; max-width: 90vw;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
.toast.fout { background: var(--min); }

/* Klikbaar logo */
button.brand { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
button.brand:hover { color: #fff; }

/* Extra filters */
.filters-extra { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; width: 100%; padding-top: 10px; border-top: 1px solid var(--lijn); }

/* Productnaam opent het detailscherm */
.naam-knop { font: inherit; font-weight: 650; color: var(--inkt); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.naam-knop:hover { color: var(--accent); text-decoration: underline; }
tbody td { padding-top: 11px; padding-bottom: 11px; }

/* Detailscherm */
.detail { padding: 22px; }
.detail-kop { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.detail-kop h3 { font-size: 20px; margin-bottom: 4px; }
.detail-kop p { margin: 0; }
.detail-foto { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; border: 1px solid var(--lijn); cursor: zoom-in; flex: none; }
.detail-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 18px; margin: 0; }
.detail-lijst dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--zacht); }
.detail-lijst dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.detail-geld { margin-top: 18px; padding: 14px; border-radius: 8px; background: var(--bg); }
.dialog-knoppen .vul { flex: 1; }

/* Versie */
.versie { text-align: center; color: var(--zacht); font-size: 12px; padding: 14px 16px 18px; }

/* Taalkeuze */
.auth-card { position: relative; }
.taal-kies { position: absolute; top: 18px; right: 18px; padding: 4px 6px; font-size: 13px; }
label small { font-weight: 400; }
label .btn.link { align-self: flex-start; font-size: 12px; padding: 0; }

/* Schuifje gram / troy ounce */
.gewicht-rij { display: flex; align-items: center; gap: 10px; }
.gewicht-rij input[type="number"] { flex: 1; }
.schuif { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--inkt); }
.schuif input { appearance: none; -webkit-appearance: none; width: 38px; height: 22px; padding: 0; border-radius: 99px; background: var(--lijn); border: 1px solid var(--zacht); position: relative; cursor: pointer; flex: none; }
.schuif input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); transition: transform .15s; }
.schuif input:checked::before { transform: translateX(16px); }

/* Bereikfilters (van – t/m) */
.veld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--zacht); }
.bereik { display: flex; gap: 4px; }
.bereik input { width: 88px; }
.bereik input[type="date"] { width: 138px; }

/* Waardeverloop */
.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--zacht); }
.legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.sleutel { display: inline-block; width: 16px; height: 0; border-top: 2px solid; }
.sleutel.s1 { border-color: var(--serie1); }
.sleutel.s2 { border-color: var(--serie2); }
.grafiek { position: relative; }
.grafiek svg { display: block; }
.grafiek .raster { stroke: var(--lijn); stroke-width: 1; }
.grafiek .as { fill: var(--zacht); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafiek .eind { fill: var(--zacht); font-size: 12px; font-weight: 600; }
.grafiek .serie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafiek .punt { stroke: var(--paneel); stroke-width: 2; }
.grafiek .s1 { stroke: var(--serie1); } .grafiek .punt.s1 { fill: var(--serie1); stroke: var(--paneel); }
.grafiek .s2 { stroke: var(--serie2); } .grafiek .punt.s2 { fill: var(--serie2); stroke: var(--paneel); }
.grafiek .haar { stroke: var(--zacht); stroke-width: 1; }
.gtip { position: absolute; top: 8px; pointer-events: none; background: var(--paneel); border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); white-space: nowrap; }
.gtip div { display: flex; align-items: center; gap: 6px; }
.gtip .kop { color: var(--zacht); margin-bottom: 2px; }
.gtip strong { font-variant-numeric: tabular-nums; }
.gtip span { color: var(--zacht); }
details summary { cursor: pointer; color: var(--accent); font-weight: 600; margin-bottom: 10px; }
.kaart .btn { align-self: flex-start; }
.kaart .btn.primary { align-self: stretch; }

/* Profiel: knoppen onderaan het blok, op één lijn */
.profiel-grid .kaart > .btn.primary { margin-top: auto; }

/* Aantal ligt vast op 1 zodra er een serienummer is */
input[readonly] { opacity: .6; cursor: not-allowed; }

/* Bovenbalk volgt het thema (licht of donker) */
.top { border-bottom: 1px solid var(--lijn); }
.menu-item { color: var(--top-zacht); }
.menu-item:hover, button.brand:hover { color: var(--top-inkt); }
.menu-item.active { background: var(--top-actief); color: var(--top-inkt); }
.koers { background: var(--top-chip); }
.koers-label, .koers-eenheid, .koers-sub, .koers-meta { color: var(--top-zacht); }
.btn.tiny { border-color: var(--top-rand); }
.toast { background: var(--toast); }
.toast.fout { background: var(--min); }

/* Vorm van de foto: rond voor munten en rounds, liggend rechthoekig voor baren en biljetten */
.thumb.recht { width: 62px; height: 40px; border-radius: 5px; }
.detail-foto.recht { width: 170px; height: 108px; border-radius: 8px; }
.bewerkt { margin: 14px 0 0; font-size: 13px; }

/* Kleine vensters: bevestiging en handmatige koers */
dialog.klein { max-width: min(440px, 94vw); }
dialog.klein form { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
dialog.klein h3, dialog.klein p { margin: 0; }
dialog.klein .dialog-knoppen { margin-top: 8px; }
.btn.primary.gevaarlijk { background: var(--min); border-color: var(--min); }
dialog { max-height: calc(100dvh - 24px); overflow: auto; }

/* Twee foto's: voorkant en achterkant */
.detail-fotos { display: flex; gap: 8px; flex: none; }
.foto-previews { display: flex; gap: 10px; flex-wrap: wrap; }
.foto-previews .foto-preview { margin-top: 0; }
.bewerkt span + span::before { content: " · "; }

/* ---------- Mobiel ---------- */
@media (max-width: 720px) {
  input, select { font-size: 16px; }            /* voorkomt inzoomen op iPhone */
  .top { position: static; padding: 10px 12px 12px; }
  .menu { flex-wrap: wrap; }
  .menu-item { padding: 6px 9px; }
  .koersen { gap: 8px; }
  .koers { flex: 1 1 140px; padding: 6px 10px; }
  .koers-waarde { font-size: 17px; }
  main { padding: 16px 12px 24px; }
  h2 { font-size: 20px; }

  .filters { padding: 10px; }
  .filters > label, .filters-extra > label, .filters-extra .veld { flex: 1 1 130px; }
  .filters .grow { flex-basis: 100%; }
  .filters > .btn { flex: 1 1 auto; }
  .bereik input, .bereik input[type="date"] { width: 100%; min-width: 0; flex: 1; }

  /* Overzicht: minder kolommen, details via de productnaam */
  .m-weg { display: none; }
  table { white-space: normal; font-size: 13px; }
  th, td { padding: 8px 6px; }
  th:first-child, td:first-child { padding-left: 10px; }
  .thumb { width: 34px; height: 34px; }
  .thumb.recht { width: 46px; height: 30px; }
  td.num { white-space: nowrap; }

  .totalen { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .totaal strong { font-size: 16px; }

  dialog { width: calc(100vw - 16px); max-width: none; }
  #item-form, .detail, dialog.klein form { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .berekend { grid-template-columns: 1fr; }
  .detail-kop { flex-wrap: wrap; }
  .detail-foto { width: 84px; height: 84px; }
  .detail-foto.recht { width: 130px; height: 82px; }
  .detail-lijst { grid-template-columns: repeat(2, 1fr); }
  .dialog-knoppen { flex-wrap: wrap; }
  .dialog-knoppen .btn { flex: 1 1 auto; }
  .dialog-knoppen .vul { display: none; }
  .auth-card { padding: 20px; }
  .versie { font-size: 11px; }
}

/* Mobiel: formulier en tabel passen binnen het scherm */
@media (max-width: 720px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid input, .form-grid select { max-width: 100%; }
  dialog { overflow-x: hidden; }
  th { font-size: 10px; letter-spacing: 0; }
  th, td { padding: 8px 4px; }
  th:last-child, td:last-child { padding-right: 10px; }
  .pil { padding: 1px 7px; font-size: 11px; }
}

/* Materiaal papier: neutrale kleur, wit in de donkere modus */
.pil.papier { color: var(--inkt); }
:root[data-thema="donker"] .pil.papier { color: #fff; }

/* Postzegel: staand rechthoekig */
.thumb.staand { width: 30px; height: 42px; border-radius: 4px; }
.detail-foto.staand { width: 92px; height: 126px; border-radius: 8px; }

/* Fotovelden: voorkant op één rij, achterkant eronder */
.foto-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.foto-rij > * { min-width: 0; }
.foto-rij input { max-width: 100%; }
#i-cover-anders { margin-top: 2px; }

/* Kolommen kiezen */
.vinkjes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.vinkjes label { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--inkt); cursor: pointer; }
.vinkjes input { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); flex: none; }

@media (max-width: 720px) {
  .foto-rij { grid-template-columns: minmax(0, 1fr); }
  .thumb.staand { width: 26px; height: 36px; }
  .detail-foto.staand { width: 70px; height: 96px; }
}

/* Notities */
textarea { font: inherit; color: var(--inkt); background: var(--paneel); border: 1px solid var(--lijn); border-radius: 7px; padding: 8px 10px; resize: vertical; min-height: 64px; }
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.notitie { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--lijn); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
#i-conditie-anders { margin-top: 2px; }

/* Eigen keuzelijst met productsuggesties (werkt ook op telefoons) */
.form-grid > label { position: relative; }
.suggesties { position: absolute; top: 100%; left: 0; right: 0; z-index: 6; margin-top: 2px; display: flex; flex-direction: column; max-height: 264px; overflow: auto;
  background: var(--paneel); border: 1px solid var(--zacht); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.suggesties button { font: inherit; font-weight: 500; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--lijn); background: none; color: var(--inkt); cursor: pointer; }
.suggesties button:last-child { border-bottom: 0; }
.suggesties button:hover, .suggesties button:focus-visible { background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 720px) { textarea { font-size: 16px; } }

/* Accountmenu */
.account { position: relative; }
.account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; display: flex; flex-direction: column; padding: 6px;
  background: var(--paneel); border: 1px solid var(--lijn); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.account-menu > button, .account-menu > a { font: inherit; font-weight: 600; text-align: left; text-decoration: none; padding: 9px 12px; border: 0; border-radius: 6px; background: none; color: var(--inkt); cursor: pointer; }
.account-menu > button:hover, .account-menu > a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.thema-rij { display: flex; justify-content: space-between; align-items: center; padding: 5px 12px; font-weight: 600; color: var(--inkt); }
.thema-knop { width: 36px; height: 30px; padding: 0; font-size: 16px; line-height: 1; }
#account-naam { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* Beheer en privacy */
.beheer-grid { display: grid; gap: 14px; }
.beheer-grid td.tekst { white-space: normal; min-width: 180px; }
.privacy h4 { margin: 16px 0 4px; font-size: 15px; }
.privacy p { margin: 0; line-height: 1.55; }
#privacy-auth { margin-top: 12px; }
@media (max-width: 720px) { .account-menu { right: auto; left: 0; } }

/* Statistieken */
.stat-tabellen { margin-top: 14px; }
.stat-tabellen table td { border-bottom: 1px solid var(--lijn); padding: 7px 0; }
.stat-tabellen table tr:last-child td { border-bottom: 0; }
#stat-melding:empty { display: none; }

/* Logo: hetzelfde beeldmerk als het logobestand */
.brand-mark { width: 30px; height: 30px; margin-right: 0; border-radius: 0; box-shadow: none; background: url(icoon.svg) center / contain no-repeat; }
.brand.small .brand-mark { width: 26px; height: 26px; }

/* Tekstherkenning en nominale waarde */
.herken { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn); }
.herken small { flex: 1 1 220px; }
.herken details { flex-basis: 100%; }
.herken details summary { font-size: 13px; margin-bottom: 6px; }
.herken pre { margin: 0; padding: 10px; max-height: 160px; overflow: auto; white-space: pre-wrap; font-size: 12px; background: var(--bg); border-radius: 6px; }
#i-nominaal-eenheid { width: 120px; flex: none; }

/* Doneren */
.doneer { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.doneer h3, .doneer p { margin: 0; }
.doneer p { line-height: 1.55; }
.paypal-knop { align-self: center; margin-top: 6px; padding: 11px 34px; border-radius: 99px; background: #ffc439; color: #111; font-weight: 700; text-decoration: none; }
.paypal-knop:hover { filter: brightness(.95); }
.versie-regel { margin: 18px 0 0; font-size: 13px; }
@media (max-width: 720px) { .doneer { padding: 16px; } }

/* Formulier in stappen */
.stappen { display: flex; gap: 6px; margin: 12px 0 16px; border-bottom: 1px solid var(--lijn); }
.stap-tab { font: inherit; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--zacht); cursor: pointer; }
.stap-tab b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; background: var(--lijn); color: var(--inkt); }
.stap-tab.actief { color: var(--inkt); border-bottom-color: var(--goud); }
.stap-tab.actief b { background: var(--accent); color: #fff; }
#item-form h3 { margin-bottom: 0; }
#meer-opties summary { font-size: 14px; }
@media (max-width: 720px) { .stap-tab span { display: none; } .stap-tab.actief span { display: inline; } }

/* Meldingen staan in de bovenste laag, dus altijd boven een open venster */
.toast[popover] { inset: auto; bottom: 20px; left: 50%; margin: 0; border: 0; overflow: visible; }
#herken-foto { padding: 7px 8px; }
#opslag-status { align-self: center; font-size: 12px; }

/* Bijsnijden */
.snij-voorbeeld { margin-top: 10px; padding: 14px; border-radius: 8px; background: #8a94a3; display: grid; place-items: center; }
.snij-voorbeeld img { max-width: 100%; max-height: 58vh; display: block; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
#snij-info { margin: 6px 0 0; }

/* ---------- Versie 2.7: kop op één regel, terug-naar-boven, grafiekvenster ---------- */
.top-row { justify-content: flex-start; gap: 14px; }
.top-row .koersen { margin-top: 0; }
.pagina-titel { margin: 0 0 0 auto; font-size: 16px; font-weight: 600; color: var(--top-inkt); white-space: nowrap; }
.icoon-knop { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--top-rand); border-radius: 50%; background: transparent; color: var(--top-zacht); cursor: pointer; }
.icoon-knop:hover { color: var(--top-inkt); }
.icoon-knop.bezig svg { animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .icoon-knop.bezig svg { animation: none; } }
.filters #nieuw-btn { margin-left: auto; }
.omhoog { position: fixed; right: 18px; bottom: 18px; z-index: 6; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--lijn); border-radius: 50%; background: var(--paneel); color: var(--inkt); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); cursor: pointer; }
.omhoog[hidden] { display: none; }
button.totaal { font: inherit; color: inherit; text-align: left; }
.klik { cursor: pointer; }
.klik:hover, .klik:focus-visible { border-color: var(--serie1); }
.grafiek .balk { fill: var(--serie1); }
#grafiek-dialog h3 { margin: 0 0 4px; }
#grafiek-dialog .grafiek { margin-top: 12px; }
@media (max-width: 720px) {
  .pagina-titel { order: 2; }
  .top-row .menu { order: 3; }
  .top-row .koersen { order: 4; flex-basis: 100%; }
  .filters #nieuw-btn { margin-left: 0; }
}

/* ---------- Versie 2.8: titel links van de koers, bijsnijden naast de foto, uitleg bij tekstherkenning, fotoalbum ---------- */
.pagina-titel { margin: 0; }
.top-row .menu { margin-left: auto; }
.foto-vak { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.foto-vak:not(:has(> :not([hidden]))) { display: none; }
.info-knop { width: 24px; height: 24px; padding: 0; border: 1px solid var(--lijn); border-radius: 50%; background: var(--paneel); color: var(--zacht); font: italic 700 13px/1 Georgia, serif; cursor: help; }
.info-knop:hover, .info-knop[aria-expanded="true"] { color: var(--inkt); border-color: var(--serie1); }
.herken .info-tekst { flex-basis: 100%; margin: 0; padding: 8px 10px; font-size: 13px; background: var(--bg); border-radius: 6px; }
#foto-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; overflow: hidden; }
.album { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px 56px 40px; }
#foto-groot { max-width: 100%; max-height: 100%; object-fit: contain; }
.album-knop { position: absolute; width: 44px; height: 44px; padding: 0 0 4px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1c2333; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.album-knop[hidden] { display: none; }
.album-knop.vorige { left: 8px; top: 50%; margin-top: -22px; }
.album-knop.volgende { right: 8px; top: 50%; margin-top: -22px; }
.album-knop.sluit { right: 8px; top: 8px; z-index: 1; }
.album-voet { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; color: #fff; font-size: 13px; }
@media (max-width: 720px) {
  .pagina-titel { order: 0; }
  .top-row .menu { order: 3; margin-left: 0; flex-basis: 100%; }
  .album { padding: 56px 8px 40px; }
}

/* ---------- Versie 2.9: titel boven de pagina, fotocontrole voor de beheerder, bulk import ---------- */
main > .pagina-titel { margin: 0 0 14px; font-size: 20px; font-weight: 700; color: var(--inkt); white-space: normal; }
.bfotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.bfotos:empty { display: none; }
.bfoto { margin: 0; border: 1px solid var(--lijn); border-radius: 8px; overflow: hidden; background: var(--bg); }
.bfoto img, .bfoto-leeg { display: block; width: 100%; height: 110px; object-fit: cover; cursor: zoom-in; }
.bfoto figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 7px; font-size: 12px; color: var(--zacht); background: var(--paneel); }
#bulk-dialog { max-width: min(1100px, 96vw); }
.bulk-kop { margin: 18px 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--zacht); }
.bulk-herken { margin-top: 12px; border-bottom: 0; padding-bottom: 0; }
.bulk-wrap { margin-top: 12px; }
.bulk-tabel td { padding: 6px 8px; vertical-align: middle; }
.bulk-tabel input { width: 100%; min-width: 120px; }
.bulk-tabel input.smal { min-width: 80px; width: 100px; }
.bulk-fotos { display: flex; gap: 4px; }
.bulk-fotos img { width: 62px; height: 44px; object-fit: cover; border-radius: 5px; border: 1px solid var(--lijn); cursor: zoom-in; display: block; }
.bulk-tabel tr.fout td { background: color-mix(in srgb, var(--min) 8%, transparent); }
.bulk-fout { display: block; color: var(--min); margin-top: 3px; white-space: normal; }
#bulk-dialog .gewicht-rij input[type="number"] { flex: 1 1 70px; min-width: 60px; }
#bulk-dialog .gewicht-rij input[type="text"] { flex: 2 1 80px; min-width: 0; width: 0; }

/* ---------- Versie 3.0: catalogusregel bewerken ---------- */
#cat-dialog .info-tekst { margin: 0 0 12px; padding: 8px 10px; font-size: 13px; background: var(--bg); border-radius: 6px; }
#cat-dialog .vink { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; margin-top: 14px; }
#cat-dialog .vink input { width: auto; flex: 0 0 auto; margin: 0; }
#cat-dialog .gewicht-rij input[type="number"] { flex: 1 1 70px; min-width: 60px; }
#cat-dialog .gewicht-rij input[type="text"] { flex: 2 1 80px; min-width: 0; width: 0; }
#cat-dialog .gewicht-rij select { flex: 0 0 auto; width: auto; }

/* ---------- Versie 3.1: pagina Bulkbewerkingen met bulk bewerken ---------- */
.be-kaart { margin-top: 14px; }
.be-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.be-kop .vul { flex: 1; }
.be-kop .btn, .be-kop .btn.primary { align-self: center; }
.be-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.be-filters .grow { flex: 1 1 220px; }
.be-tabel th { white-space: nowrap; }
.be-tabel td, .be-tabel th { padding: 5px 6px; }
.be-tabel input, .be-tabel select { width: 100%; min-width: 110px; padding: 6px 8px; }
.be-tabel input[type="number"] { min-width: 80px; }
.be-tabel td:nth-child(2) input { min-width: 220px; }
.be-tabel .gewijzigd { border-color: var(--serie2); background: color-mix(in srgb, var(--serie2) 14%, var(--paneel)); }
.be-tabel input[readonly] { opacity: .6; }
.be-tabel .be-alles th { background: var(--bg); font-weight: 500; text-transform: none; letter-spacing: 0; }
.be-tabel thead { position: sticky; top: 0; z-index: 1; background: var(--paneel); }
.be-kaart .tabel-wrap { max-height: 70vh; overflow: auto; }

/* ---------- Versie 3.2: bulk bewerken slaat direct op; kolomkeuze; ook voor de catalogus ---------- */
.be-kolommen summary { cursor: pointer; font-size: 13px; color: var(--zacht); }
.be-kolommen .vinkjes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.be-kolommen .vinkjes label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.be-kolommen .vinkjes input { width: auto; margin: 0; }
.be-tabel .opgeslagen { border-color: var(--plus, #2e8b57); background: color-mix(in srgb, var(--plus, #2e8b57) 14%, var(--paneel)); transition: background .3s; }
.be-tabel .fout { border-color: var(--min); background: color-mix(in srgb, var(--min) 12%, var(--paneel)); }
.be-tabel select:disabled { opacity: .6; }
.beheer-grid .be-tabel td:nth-child(1) input { min-width: 220px; }
.beheer-grid .be-tabel td:nth-child(2) input { min-width: 80px; }
.beheer-grid > .kaart, .be-kaart { min-width: 0; }
.beheer-grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- Versie 3.3: pagina's in het overzicht, bel, feedback, blokkeren ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.pager[hidden] { display: none; }
.pager label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--zacht); }
.pager select { width: auto; padding: 6px 8px; }
.pager-tekst { font-size: 13px; color: var(--zacht); margin-left: auto; font-variant-numeric: tabular-nums; }
.pager-knoppen { display: inline-flex; gap: 8px; }
.bel { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border: 1px solid var(--top-rand); border-radius: 999px; background: transparent; color: var(--top-inkt); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; }
.bel[hidden] { display: none; }
.bel span { background: var(--min); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 12px; }
tr.ongelezen td { font-weight: 700; }
.beheer-grid td.tekst { white-space: pre-wrap; }
.bfoto figcaption .acties { display: inline-flex; gap: 4px; }
.bfoto figcaption { flex-wrap: wrap; }
#feedback-form textarea, #blok-form textarea { width: 100%; resize: vertical; }
#wis-dialog .vink { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; }
#wis-dialog .vink input { width: auto; flex: 0 0 auto; margin: 3px 0 0; }
.btn.primary.gevaarlijk:disabled { opacity: .45; cursor: not-allowed; }
.auth .melding { white-space: pre-line; }
@media (max-width: 720px) { .pager-tekst { margin-left: 0; flex-basis: 100%; } }

/* ---------- Versie 3.4: introductiepagina, veelgestelde vragen en de pagina Over AgAurium ---------- */
html.ingelogd #auth-view { display: none; }
.landing[hidden] { display: none; }
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: var(--top); border-bottom: 1px solid var(--lijn); }
.lp-top .brand { font-size: 20px; color: var(--top-inkt); }
.lp-top-rechts { display: inline-flex; align-items: center; gap: 10px; }
.lp-top .taal-kies { position: static; }
.lp-hero { position: relative; background: #0b0f17; color: #fff; overflow: hidden; }
.lp-hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; opacity: .55; }
.lp-hero-in { position: relative; max-width: 1200px; margin: 0 auto; padding: 56px 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 400px); gap: 40px; align-items: center; }
.lp-hero h1 { margin: 0 0 16px; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.lp-lead { font-size: 18px; line-height: 1.55; margin: 0 0 14px; max-width: 56ch; color: #e6e9ef; }
.lp-gratis { font-size: 14px; font-weight: 600; color: #f0c94b; margin: 0 0 20px; }
.lp-knop { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: #fff; }
.lp-knop:hover { background: rgba(255, 255, 255, .22); }
.lp-hero .auth-card { color: var(--inkt); width: 100%; margin: 0; }
.lp-hero .auth-card .tabs { margin-top: 0; }
.info-blok { max-width: 1200px; margin: 0 auto; }
.lp-sectie { padding: 44px 20px 8px; }
.lp-sectie h2, .lp-eind h2 { margin: 0 0 18px; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.01em; }
.lp-sectie h3 { margin: 22px 0 6px; font-size: 18px; }
.lp-sectie p { line-height: 1.6; max-width: 68ch; }
.lp-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.lp-kaart { background: var(--paneel); border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.lp-kaart img, .lp-kaart .lp-illu { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.lp-kaart div { padding: 14px 16px 18px; }
.lp-kaart h3 { margin: 0 0 6px; }
.lp-kaart p { margin: 0; font-size: 15px; color: var(--zacht); }
.lp-twee { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: center; }
.lp-twee.omgekeerd > img { order: -1; }
.lp-twee > img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.lp-lijst { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lp-lijst li { position: relative; padding-left: 26px; line-height: 1.5; }
.lp-lijst li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--goud); }
.lp-faq details { background: var(--paneel); border: 1px solid var(--lijn); border-radius: 10px; padding: 0 16px; margin-bottom: 8px; }
.lp-faq summary { padding: 14px 0; margin: 0; color: var(--inkt); font-weight: 600; }
.lp-faq details p { margin: 0 0 14px; color: var(--zacht); }
.lp-eind { text-align: center; padding: 48px 20px; }
.lp-voet { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; padding: 8px 20px 4px; font-size: 14px; }
.lp-voet a { color: var(--accent); align-self: center; }
#page-over .info-blok { max-width: none; }
#page-over .lp-sectie { padding-left: 0; padding-right: 0; }
.over-steun { max-width: 760px; }
.over-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.over-knoppen .btn, .over-knoppen .btn.primary { align-self: auto; }
@media (max-width: 860px) {
  .lp-hero-in { grid-template-columns: minmax(0, 1fr); padding: 32px 16px; gap: 24px; }
  .lp-twee { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp-twee.omgekeerd > img { order: 0; }
  .lp-sectie { padding: 32px 16px 4px; }
  .lp-top { padding: 10px 12px; }
}
.lp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 15, 23, .88) 0%, rgba(11, 15, 23, .55) 45%, rgba(11, 15, 23, .1) 100%); }
.lp-hero-in { z-index: 1; }
@media (max-width: 860px) { .lp-hero-foto { opacity: .35; } .lp-hero::after { background: rgba(11, 15, 23, .55); } }

/* ---------- Versie 3.5: meer materialen ---------- */
.pil { color: var(--zacht); }
.pil.platina, .pil.palladium, .pil.rhodium { color: var(--zilver); }
.pil.koper, .pil.brons, .pil.messing { color: #b0672f; }

/* ---------- Versie 3.6: koersen voor platina en palladium; de vier koersen compact naast elkaar ---------- */
.koers.platina { border-color: #c9d1d9; }
.koers.palladium { border-color: #6f8296; }
.top-row .koersen { gap: 8px; }
.top-row .koers { padding: 5px 10px; gap: 5px; }
.top-row .koers-waarde { font-size: 16px; }
.top-row .koers-label { font-size: 11px; }
@media (max-width: 1500px) { #koers-status { display: none; } }
@media (max-width: 720px) { .top-row .koers { flex: 1 1 calc(50% - 8px); } }

/* ---------- Versie 3.7: afdrukken en een gedeelde verzameling ---------- */
html.deelweergave #auth-view, html.deelweergave #app-view { display: none !important; }
#deel-view[hidden] { display: none; }
.deel-titel { margin: 0 0 6px; font-size: clamp(22px, 3vw, 30px); }
.deel-cta { margin-top: 22px; align-items: flex-start; }
.deel-cta .btn.primary { align-self: flex-start; text-decoration: none; }
#deel-view .brand { text-decoration: none; }
#deel-view .lp-top .taal-kies { position: static; }
.deel-kop { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--zacht); }
.print-opties { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.print-opties label { align-items: flex-start; }
#deel-url { flex: 1; min-width: 0; font-size: 13px; }
#print-view { display: none; }
@media print {
  body > *:not(#print-view) { display: none !important; }
  body { background: #fff; color: #000; }
  #print-view { display: block; font-size: 10pt; }
  #print-view h1 { font-size: 16pt; margin: 0 0 4pt; }
  #print-view p { margin: 0 0 10pt; color: #444; }
  #print-view table { width: 100%; border-collapse: collapse; }
  #print-view th, #print-view td { border-bottom: 1px solid #bbb; padding: 3pt 5pt; text-align: left; vertical-align: middle; white-space: normal; }
  #print-view th { font-size: 8pt; text-transform: uppercase; }
  #print-view .num { text-align: right; }
  #print-view thead { display: table-header-group; }
  #print-view tr { break-inside: avoid; }
  #print-view img { width: 32pt; height: 32pt; object-fit: cover; display: block; }
  #print-view .pil { border: 0; padding: 0; color: #000; font-weight: 400; font-size: inherit; }
  #print-view .plus, #print-view .min { color: #000; }
  .print-totalen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6pt; margin-top: 12pt; }
  .print-totalen .totaal { border: 1px solid #bbb; padding: 5pt 7pt; background: none; break-inside: avoid; }
  .print-totalen .totaal span { display: block; font-size: 8pt; text-transform: uppercase; }
  @page { margin: 14mm; }
}

/* ---------- Versie 3.8: verzamelingen, karaat ---------- */
.verz { display: inline-flex; align-items: center; gap: 2px; }
.verz .account-menu { left: 0; right: auto; }
.plus-knop { padding: 4px 10px; font-size: 18px; line-height: 1.1; }
.plus-knop[hidden] { display: none; }
.account-menu > button small { color: var(--zacht); font-weight: 500; margin-left: 6px; }
.account-menu > button.gekozen { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.account-menu > button.lijn { border-top: 1px solid var(--lijn); border-radius: 0 0 6px 6px; margin-top: 4px; }
.verz-beheer { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.verz-beheer h3, .verz-beheer p { margin: 0; }
.verz-lijst { display: flex; flex-direction: column; gap: 8px; }
.verz-rij { display: flex; align-items: center; gap: 8px; }
.verz-rij input { flex: 1; min-width: 0; }
.verz-rij small { white-space: nowrap; }
@media (max-width: 720px) { .verz .account-menu { max-width: 92vw; } }
.koers-los { display: none; }
@media (min-width: 721px) and (max-width: 1500px) { .top-row .koers .koers-eenheid { display: none; } .koers-los { display: inline; align-self: center; } }

/* ---------- Versie 3.9: edelstenen en parels, een item in meerdere verzamelingen ---------- */
.lp-kaarten { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.veld-blok { display: flex; flex-direction: column; gap: 6px; }
.veld-blok[hidden] { display: none; }
.veld-kop { font-size: 13px; font-weight: 600; color: var(--zacht); }
#stenen-blok summary { font-size: 14px; }
#stenen-blok[hidden] { display: none; }
.steen-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: end; padding: 10px; margin-bottom: 8px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--bg); }
.steen-rij label { min-width: 0; }
.steen-rij input, .steen-rij select { width: 100%; }
.steen-rij > .btn { grid-column: 5; grid-row: 1 / span 2; align-self: center; }
.verz-vinkjes { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.verz-vinkjes label { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.be-tabel .verz-vinkjes input { width: auto; min-width: 0; margin: 0; padding: 0; }
.pil.edelsteen, .pil.parel { color: #8a4fa3; }
@media (max-width: 720px) { .steen-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steen-rij > .btn { grid-column: 1 / -1; grid-row: auto; } }

/* ---------- Versie 4.0 ---------- */
.faq-doneer { display: inline-block; margin: 4px 0 10px; padding: 9px 26px; }
.plus-knop { font-size: inherit; padding: 6px 12px; white-space: nowrap; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
@media (max-width: 700px) { .plus-knop .plus-tekst { display: none; } .plus-knop { padding: 4px 11px; font-size: 18px; line-height: 1.1; } }

html.alleen-app:not(.ingelogd) #info-plek, html.alleen-app .lp-eind { display: none; }
html.alleen-app .lp-hero { min-height: calc(100vh - 110px); }