/* ===========================================================
   Beeldbank — stijl
   Overgenomen van de voorraad-app, en die weer van de receptenapp van Mams at Work:
   dezelfde tokens, dezelfde componenten en maten, zodat de apps op de telefoon familie
   van elkaar zijn. Alleen het gedeelde fundament staat hier; wat alleen voor deze app
   bestaat staat onderaan, onder "Beeldbank".

   ELKE kleur van de app staat in :root. Geen hex- of rgba-waarde hoort ergens anders.
   =========================================================== */

/* Lettertypen staan in /static/fonts en worden NIET bij Google geladen: dan gaat er geen
   IP-adres van een gebruiker naar Google. Zelfde aanpak als de band-app. SIL Open Font
   License. Alleen de Latijnse set. Een browser haalt een lettertype pas op als het gebruikt
   wordt: wie het MAW-thema heeft, laadt die van de andere thema's niet. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bebas-neue-latin.woff2) format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;
  src:url(../fonts/open-sans-latin.woff2) format('woff2');}
@font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/pacifico-latin.woff2) format('woff2');}
/* Voor de thema's (onderaan, "Thema's"). De cursieve DM Serif heeft een eigen familienaam, zodat
   een thema hem als --script kan kiezen zonder font-style op elk element. */
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/dm-serif-display-latin.woff2) format('woff2');}
@font-face{font-family:'DM Serif Cursief';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/dm-serif-display-italic-latin.woff2) format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/lora-latin.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/nunito-latin.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/space-grotesk-latin.woff2) format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/space-mono-latin.woff2) format('woff2');}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/josefin-sans-latin.woff2) format('woff2');}
/* Het woordmerk van VandePas Solutions (--merk), op het opstartscherm. Zelfde bestand als in de band-app. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin.woff2) format('woff2');}

/* [data-thema="maw"]: ook een voorbeeldtegel van MAW op een scherm in een ander thema ("Thema's", onderaan). */
:root, [data-thema="maw"]{
  color-scheme:light;
  /* Merkkleuren */
  --groen:#3B5B4C;        --groen-rgb:59,91,76;
  --groen-diep:#2C463A;
  --groen-zacht:#8E9D97;
  --lichtgroen:#D6E3D2;
  --lichtgroen-diep:#C9DAC4;
  --lichtgroen-zacht:#E9F0E6;
  --oranje:#E66204;       /* testomgeving */
  --goud-ster:#BFA14A;    /* open account-bolletje */

  /* Achtergronden */
  --creme:#FFFFFF;
  --creme-2:#F1F5F1;
  --card:var(--creme);

  /* Tekst en lijnen */
  --tekst:#231F20;
  --muted:#69786F;         /* 4,7:1 op wit */
  --placeholder:#B3AAA2;
  --rand:#E2E8E2;
  --rand-zacht:#EDF1EC;
  --op-accent:#FFFFFF;
  --op-fel:#141A16;

  /* Status: achtergrond + tekst, elk label minstens 4,5:1 */
  --ok-bg:#E8F0E5;            --ok:#516D48;
  --waarschuwing-bg:#F6EFD9;  --waarschuwing:#7E621A;
  --fout-bg:#F6E4DF;          --fout:#9A4736;
  --neutraal-bg:var(--creme-2); --neutraal:#5F6E68;
  --gevaar:#C0392B; --gevaar-diep:#A5301F;

  --schaduw-rgb:var(--groen-rgb);
  --overlay-rgb:35,31,32;

  /* De kop (balk bovenaan en het menu). Standaard de merkkleuren; een thema kan de kop los van
     de rest kleuren, en er een streep onder zetten (--kop-streep, een achtergrond). */
  --kop-bg:var(--lichtgroen);
  --kop-merk:var(--groen);
  --kop-tekst:var(--muted);
  --kop-hover:var(--lichtgroen-diep);
  --kop-rand:var(--rand);
  --kop-knop:var(--groen);  --kop-knop-tekst:var(--op-accent);
  --kop-streep:none;        --kop-streep-hoogte:0px;

  /* Knoppen: alles wat je aantikt is minstens 44px hoog. */
  --knop-hoogte:44px;
  --knop-hoogte-klein:32px;
  --knop-ruimte:16px;
  --knop-ruimte-klein:10px;
  --rand-dikte:1px;

  --icoon-s:16px; --icoon-m:20px; --icoon-l:24px;

  /* VandePas Solutions: het woordmerk en de neutrale kleuren van het app-icoon en het eerste opstartscherm.
     Voor elk thema hetzelfde, dus alleen hier (tools/maak_iconen.py en maak_opstartbeelden.py hebben ze ook).
     Niet te verwarren met --merk-gewicht en verder hieronder: die gaan over de naam van de app in de kop. */
  --merk:'Montserrat',Helvetica,Arial,sans-serif;
  --neutraal-app-bg:#222222; --neutraal-app-tekst:#F2F2F2;

  /* De hand van de iconen (.tekening): een thema tekent dezelfde tekeningen anders.
     --icoon-vlak vult het vlak van een tekening (het kader van de foto); een vlak met een eigen kleur houdt die. */
  --icoon-lijn:3.5; --icoon-uiteinde:round; --icoon-hoek:round;
  --icoon-vlak:none; --icoon-filter:none; --icoon-draai:none;

  --radius-xs:4px; --radius-s:6px; --radius-m:8px; --radius-l:10px; --radius-xl:14px;
  --radius-rond:50%; --radius-pil:999px;

  --schaduw-1:0 1px 4px rgba(var(--overlay-rgb),.12);
  --schaduw-2:0 4px 16px rgba(var(--schaduw-rgb),.06);
  --schaduw-3:0 8px 22px rgba(var(--schaduw-rgb),.12);
  --schaduw-4:0 18px 44px -14px rgba(var(--overlay-rgb),.5);
  --ring-focus:0 0 0 3px rgba(var(--schaduw-rgb),.18);

  /* Schermgrenzen (alleen als afspraak; @media kan geen var()): 400 / 640 / 900 */

  --tekst-xs:.68rem;  --tekst-s:.72rem;   --tekst-m:.78rem;  --tekst-l:.82rem;
  --tekst-xl:.9rem;   --tekst-2xl:1.05rem; --tekst-3xl:1.25rem; --tekst-4xl:1.4rem;
  --tekst-5xl:1.6rem; --tekst-6xl:1.9rem;

  --display:'Bebas Neue',Impact,sans-serif;
  --script:'Pacifico',cursive;
  --sans:'Open Sans',-apple-system,Segoe UI,sans-serif;
  /* Hoe de kopletter (--display) en de merknaam (--script) staan. Een thema met een andere letter
     past die hier aan, in plaats van per element. */
  --display-gewicht:400; --display-spatie:.03em; --display-kast:none; --h1-grootte:var(--tekst-6xl);
  --merk-gewicht:400;    --merk-spatie:0;        --merk-kast:none;    --merk-grootte:var(--tekst-5xl);
}

*{box-sizing:border-box;}

/* HIDDEN IS HIDDEN. De browserregel hiervoor is `[hidden]{display:none}` met de laagste
   soortelijkheid die er is, dus élke eigen `display` wint ervan. Dat ging hier drie keer mis:
   de selectiebalk, de pijlen van de lichtbak, en een ingeklapte dag in de inbox (`.raster` is
   `display:grid`, dus het raster bleef gewoon staan). Eén regel vóór alles, in plaats van het
   per component blijven repareren. */
[hidden]{display:none !important;}

/* Geen rechthoekige tap-highlight; in plaats daarvan licht het element zelf op binnen
   zijn eigen vorm (opacity). Zie de receptenapp voor het waarom. */
html{-webkit-tap-highlight-color:transparent;}
/* Tekst is te selecteren (kopiëren/plakken; Frank 14-10-2026, zoals de band-app). Alleen wat je
   aantikt niet: een lange druk op een knop, tegel of het menu hoort geen selectie te starten. */
.cat-tile, .lijst-rij-tik, .nav-avatar, .nav-home, .back-btn, .btn, .btn-small, .btn-small-outline,
.btn-small-danger, .btn-add, .btn-modal, .thema-keuze, .tegel, .kijker-knop, .filter-chip, nav, summary{-webkit-user-select:none;user-select:none;}

.cat-tile:active, .voorraad-kaart:active, .lijst-rij:active, .boeking-rij:active,
.nav-avatar:active, .nav-home:active, .back-btn:active,
.btn:active, .btn-small:active, .btn-small-outline:active, .btn-small-danger:active, .btn-add:active,
.btn-modal:active, .stepper-knop:active, .chip:active, .segment label:active{
  opacity:.72;
  transition:opacity .05s;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--tekst);
  background:var(--creme);
  line-height:1.6;
}

/* ---- Header ---- */
.site-header{
  background:var(--kop-bg);
  border-bottom:var(--rand-dikte) solid var(--kop-rand);
  position:sticky; top:0; z-index:500;
}
/* De streep van een thema onder de kop; telt mee in de hoogte die base.html meet (--kop-h). */
.site-header::after{content:"";display:block;height:var(--kop-streep-hoogte);background:var(--kop-streep);}
.header-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  padding:10px 24px;
  min-height:62px;
}
.header-top-test{background:var(--oranje);}
.header-left{display:flex;align-items:center;justify-self:start;min-width:38px;}
.header-center{display:flex;align-items:center;gap:10px;min-width:0;justify-self:center;}
.header-right{display:flex;align-items:center;justify-self:end;min-width:38px;}
.brand{
  font-family:var(--script); font-size:var(--merk-grootte); line-height:1.2;
  font-weight:var(--merk-gewicht); letter-spacing:var(--merk-spatie); text-transform:var(--merk-kast);
  color:var(--kop-merk); text-decoration:none;
}
.env-label{
  font-size:var(--tekst-s); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tekst); background:var(--card); border-radius:var(--radius-pil); padding:1px 8px;
}
.nav-home{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--radius-rond); color:var(--kop-merk);
}
.nav-home svg{width:var(--icoon-l);height:var(--icoon-l);}
.nav-home:hover{background:var(--kop-hover);}

.site-nav{display:flex;align-items:center;gap:8px 6px;padding:0 24px 10px 16px;flex-wrap:wrap;}
.nav-link{display:inline-flex;align-items:center;gap:6px;color:var(--kop-tekst);text-decoration:none;font-size:var(--tekst-l);
  font-weight:500;letter-spacing:.02em;}
.nav-link:hover{color:var(--kop-merk);}
.nav-link .icoon{width:18px;height:18px;flex:none;}
/* Waar je bent (Frank 15-10-2026): een vlak achter het menu-item, in de kleur van het merk. */
.site-nav .nav-link{padding:5px 10px;border-radius:var(--radius-pil);}
.site-nav .nav-link:hover{background:var(--kop-hover);}
.site-nav .nav-link[aria-current="page"]{background:var(--kop-hover);color:var(--kop-merk);font-weight:700;
  box-shadow:inset 0 -2px 0 var(--kop-merk);}
.btn-link{
  background:none;border:none;color:var(--muted);font-family:inherit;font-size:var(--tekst-l);
  font-weight:500;cursor:pointer;padding:0;letter-spacing:.02em;
}
.btn-link:hover{color:var(--groen);text-decoration:underline;}
.site-nav .btn-link{color:var(--kop-tekst);}
.site-nav .btn-link:hover{color:var(--kop-merk);text-decoration:none;}
.inline-form{display:inline;margin:0;}
.nav-versie{font-size:var(--tekst-s);color:var(--kop-tekst);margin-left:auto;}

.nav-toggle{display:none;}
.nav-avatar{
  align-items:center; justify-content:center; width:38px; height:38px; padding:0;
  border:none; border-radius:var(--radius-rond); cursor:pointer;
  background:var(--kop-knop); color:var(--kop-knop-tekst);
  font-family:var(--sans); font-weight:700; font-size:var(--tekst-2xl); line-height:1;
}
.nav-avatar[aria-expanded="true"]{background:var(--goud-ster);color:var(--op-fel);}

/* ---- Layout ---- */
.site-main{--main-boven:28px;width:100%;max-width:1100px;margin:0 auto;padding:var(--main-boven) 28px 40px;}

.card{
  background:var(--card);
  border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-xl);
  padding:18px 16px;
  box-shadow:var(--schaduw-2);
  margin-bottom:14px;
}
.auth-card{max-width:400px;margin:7vh auto 0;}
/* Boven het inlogscherm het woordmerk van VandePas Solutions met daaronder de naam van de app (Frank 15-10-2026). */
.auth-kop{display:flex;flex-direction:column;align-items:center;gap:6px;margin:7vh auto 20px;text-align:center;}
.auth-kop + .auth-card{margin-top:0;}
.auth-merk{font-size:clamp(1.55rem,7.5vw,2.1rem);color:var(--tekst);}
.auth-app{font-family:var(--merk);font-size:var(--tekst-l);font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);}

h1{
  font-family:var(--display); font-size:var(--h1-grootte); font-weight:var(--display-gewicht);
  letter-spacing:var(--display-spatie); text-transform:var(--display-kast);
  color:var(--groen); margin:0 0 14px; line-height:1.1;
}
h2{font-family:var(--display);font-weight:var(--display-gewicht);letter-spacing:var(--display-spatie);
  text-transform:var(--display-kast);color:var(--groen);}

label{display:block;font-size:var(--tekst-l);font-weight:500;margin:16px 0 6px;color:var(--muted);}
.optioneel{font-weight:400;}

input[type=email],input[type=password],input[type=number],input[type=text],input[type=date],
input[type=datetime-local],input[type=search],textarea,select{
  width:100%; min-height:var(--knop-hoogte); padding:10px 12px;
  border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-m);
  font-family:inherit; font-size:16px; /* 16px: anders zoomt iOS in bij het tikken */
  color:var(--tekst); background:var(--card);
}
textarea{resize:vertical;}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--groen);box-shadow:var(--ring-focus);}

/* ---- Knoppen ---- */
.btn{
  margin-top:20px; width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--knop-hoogte);
  background:var(--groen); color:var(--op-accent); text-decoration:none;
  border:none; padding:6px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-xl); font-weight:600; letter-spacing:.03em;
  cursor:pointer; transition:background .15s;
}
.btn:hover{background:var(--groen-diep);}
.btn:disabled{opacity:.6;cursor:default;}
.btn-gevaar{background:var(--gevaar);}
.btn-gevaar:hover{background:var(--gevaar-diep);}
.btn-bovenaan{margin-top:0;}
.btn-small{
  display:inline-flex; align-items:center; justify-content:center; min-height:var(--knop-hoogte);
  background:var(--groen); color:var(--op-accent); text-decoration:none; border:none;
  padding:4px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-l); font-weight:600; cursor:pointer;
}
.btn-small-outline, .btn-small-danger{
  display:inline-flex; align-items:center; justify-content:center; min-height:var(--knop-hoogte);
  background:none; padding:2px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-l); font-weight:600; cursor:pointer; text-decoration:none;
}
.btn-small-outline{border:var(--rand-dikte) solid var(--groen);color:var(--groen);}
.btn-small-outline:hover{background:var(--groen);color:var(--op-accent);}
.btn-small-danger{border:var(--rand-dikte) solid var(--gevaar);color:var(--gevaar);min-width:var(--knop-hoogte);}
.btn-small-danger:hover{background:var(--gevaar);color:var(--op-accent);}
.btn-add{
  margin-top:12px; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--knop-hoogte); background:none; border:var(--rand-dikte) dashed var(--groen);
  color:var(--groen); padding:4px var(--knop-ruimte); border-radius:var(--radius-m);
  font-weight:600; text-decoration:none;
}
.btn-add:hover{background:var(--creme-2);}
.btn-link-dark{color:var(--groen);font-weight:600;text-decoration:none;}
.btn-link-dark:hover{text-decoration:underline;}
.knop-los{margin-top:10px;}
.knoppen-rij{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.knoppen-rij form{margin:0;}

/* ---- Tekst ---- */
.muted{color:var(--muted);font-size:var(--tekst-xl);}
.muted a{color:var(--groen);font-weight:600;}
.klein{font-size:var(--tekst-m);}
.uitleg{color:var(--muted);font-size:var(--tekst-l);line-height:1.5;margin:6px 0 10px;}
a{color:var(--groen);}

/* ---- Meldingen (toast bovenaan) ---- */
.flashes{
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  width:calc(100% - 24px); max-width:420px; z-index:1000; pointer-events:none;
}
.flash{
  padding:10px 14px; border-radius:var(--radius-m); font-size:var(--tekst-xl); margin-bottom:10px;
  cursor:pointer; transition:opacity .4s ease; pointer-events:auto; box-shadow:var(--schaduw-3);
}
.flash-hide{opacity:0;}
.flash-error{background:var(--fout-bg);color:var(--fout);}
.flash-success{background:var(--ok-bg);color:var(--ok);}
.flash-warning{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.flash-inline{background:var(--fout-bg);color:var(--fout);padding:8px 12px;border-radius:var(--radius-m);font-size:var(--tekst-l);}
.melding-vlak{background:var(--waarschuwing-bg);border-color:var(--waarschuwing-bg);}
.melding-vlak p{margin:4px 0;}

/* ---- Badges ---- */
.badge{
  display:inline-block; font-size:var(--tekst-xs); font-weight:600; padding:2px 8px;
  border-radius:var(--radius-pil); white-space:nowrap; letter-spacing:.04em;
  font-family:var(--sans); vertical-align:middle; line-height:1.5;
}
.badge-ok{background:var(--ok-bg);color:var(--ok);}
.badge-concept{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.badge-neutraal{background:var(--neutraal-bg);color:var(--neutraal);}
.badge-ok{background:var(--ok-bg);color:var(--ok);}
.badge-fout{background:var(--fout-bg);color:var(--fout);}
.badge-bezig{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.badge-indicatie{background:var(--creme-2);color:var(--neutraal);border:var(--rand-dikte) solid var(--rand);}
.badge-levering{background:var(--ok-bg);color:var(--ok);}
.badge-overboeking{background:var(--lichtgroen);color:var(--groen);}
.badge-correctie{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.badge-verzending{background:var(--neutraal-bg);color:var(--groen);}
.badge-voorlopig{background:var(--card);color:var(--neutraal);border:var(--rand-dikte) dashed var(--rand);}

/* ---- Kop met terug-knop ---- */
/* Blijft staan onder de balk (--kop-h: hoogte van de balk, gezet in base.html), en wel precies op
   de plek waar hij al staat — anders schuift hij bij het scrollen eerst een stukje omhoog. Die plek
   is de balk plus de ruimte boven de inhoud (--main-boven) min de 10px padding. De schaduw in de
   achtergrondkleur dekt de strook tussen balk en kop af, zodat er niets tussendoor schuift. */
.page-head{
  display:flex;align-items:center;gap:10px;margin:-10px 0 4px;padding:10px 0;
  position:sticky;top:calc(var(--kop-h, 62px) + var(--main-boven, 28px) - 10px);z-index:400;
  background:var(--creme);box-shadow:0 calc(10px - var(--main-boven, 28px)) 0 var(--creme);
}
.page-head h1{margin:0;min-width:0;overflow-wrap:anywhere;}
.back-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-rond);
  background:var(--lichtgroen); color:var(--groen);
  text-decoration:none; font-size:var(--tekst-3xl); line-height:1;
}
.back-btn:hover{background:var(--groen);color:var(--op-accent);}

/* ---- Home: blokken en tegels ---- */
.home-section{margin-top:22px;}
.home-section:first-child{margin-top:0;}
.home-section-title{font-size:var(--tekst-4xl);margin:0 0 8px;}
.home-section-vlak{background:var(--lichtgroen-zacht);border-radius:var(--radius-xl);padding:18px 18px 20px;}

.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}
.cat-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:18px 12px 14px; background:var(--card);
  border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-xl);
  box-shadow:var(--schaduw-2); text-decoration:none; color:var(--muted); text-align:center;
  transition:box-shadow .18s, transform .18s, border-color .18s;
}
.cat-tile:hover{box-shadow:var(--schaduw-3);transform:translateY(-3px);border-color:var(--groen);}
.cat-tile-icon{width:50px;height:50px;color:var(--groen);}
.cat-tile-icon svg{width:100%;height:100%;}
.cat-tile-label{font-family:var(--display);font-size:var(--tekst-2xl);color:var(--groen);line-height:1.2;
  font-weight:var(--display-gewicht);letter-spacing:var(--display-spatie);text-transform:var(--display-kast);}

/* ---- Modal ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:1100; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--overlay-rgb),.5);
}
.modal{
  width:100%; max-width:340px; text-align:center; background:var(--card);
  border-radius:var(--radius-xl); padding:20px 24px 18px; box-shadow:var(--schaduw-4);
}
.modal h2{font-family:var(--sans);font-size:var(--tekst-2xl);font-weight:600;color:var(--groen);margin:0 0 14px;letter-spacing:normal;}
.modal-text{font-size:var(--tekst-xl);line-height:1.5;margin:2px 0 0;}
.modal-acties{display:flex;gap:10px;margin-top:18px;}
/* Een venster met een formulier (titel en omschrijving wijzigen): breder, links uitgelijnd. */
.modal-formulier{max-width:460px;text-align:left;}
.modal-formulier textarea{resize:vertical;}
.btn-modal{
  flex:1 1 0; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--knop-hoogte); padding:4px var(--knop-ruimte-klein); border-radius:var(--radius-m);
  cursor:pointer; font-family:inherit; font-size:var(--tekst-xl); font-weight:600;
}
.btn-modal-annuleer{background:none;border:var(--rand-dikte) solid var(--rand);color:var(--muted);}
.btn-modal-ok{background:var(--groen);border:var(--rand-dikte) solid var(--groen);color:var(--op-accent);}
.btn-modal-ok.btn-modal-gevaar{background:var(--gevaar);border-color:var(--gevaar);}
a.btn-modal{text-decoration:none;}
/* Een venster dat de server tekent (Mijn account, ?wijzig=..., 0.17.0): bovenaan, zelf scrollen, met een kop en een
   kruisje. Sluiten is een link (data-sluit-url, base.html). */
.modal-overlay.modal-open{align-items:flex-start;overflow-y:auto;}
.modal-open .modal-formulier{max-width:520px;margin:4vh 0;}
.modal-kop{display:flex;align-items:center;gap:8px;margin:0 0 6px;}
.modal-kop h2{flex:1;margin:0;}
.modal-sluit{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  font-size:1.6rem;line-height:1;color:var(--muted);text-decoration:none;border-radius:var(--radius-rond);}
.modal-sluit:active{opacity:.72;}
.modal-open .modal-formulier .modal-acties{position:sticky;bottom:-18px;background:var(--card);padding:10px 0 4px;}
body:has(.modal-open){overflow:hidden;}

/* ---- Tabel ---- */
.tabel-scroll{overflow-x:auto;}
.tabel{width:100%;border-collapse:collapse;font-size:var(--tekst-l);margin-top:10px;}
.tabel th{text-align:left;font-weight:600;color:var(--muted);border-bottom:var(--rand-dikte) solid var(--rand);padding:6px 8px;}
.tabel td{border-bottom:var(--rand-dikte) solid var(--rand-zacht);padding:8px;}
.tabel .getal{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}


/* ===========================================================
   Beeldbank
   Wat alleen deze app heeft. Groeit mee met de schermen; in 0.1.0 staat hier nog
   niet meer dan de lege galerij.
   =========================================================== */

/* De lege staat: geen foto's, wel uitleg over wat er moet gebeuren. */
.leeg{text-align:center;padding:32px 16px;color:var(--muted);}
.leeg h1{font-family:var(--display);letter-spacing:.5px;color:var(--groen-diep);margin:0 0 8px;}
.leeg p{margin:0 auto 12px;max-width:34em;font-size:var(--tekst-l);line-height:1.5;}
.leeg .stappen{text-align:left;max-width:34em;margin:0 auto;padding-left:20px;font-size:var(--tekst-l);line-height:1.6;}
.leeg .stappen li{margin-bottom:4px;}

/* Kleine regel onderaan een scherm: schijfruimte, aantallen, versie. */
.voetnoot{margin-top:18px;text-align:center;font-size:var(--tekst-s);color:var(--muted);}
.voetnoot.krap{color:var(--waarschuwing);font-weight:600;}

/* ---- Het raster ------------------------------------------------------------
   auto-fill met een minimum van 150px: op de telefoon twee kolommen, op een breed
   scherm zoveel als er passen, zonder media-queries. De tegels zijn vierkant
   (aspect-ratio) en de foto vult ze met object-fit:cover — anders wordt het een
   rommelige muur van verschillende hoogtes. */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.tegel{position:relative;display:block;aspect-ratio:1;border-radius:var(--radius-m);
  overflow:hidden;background:var(--creme-2);box-shadow:var(--schaduw-1);}
.tegel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .12s ease-out, border-radius .12s;}
.tegel:active{opacity:.72;}
.tegel-merk{position:absolute;left:6px;bottom:6px;background:rgba(var(--overlay-rgb),.62);
  color:var(--op-accent);font-size:var(--tekst-xs);padding:2px 6px;border-radius:var(--radius-pil);}

.galerij-kop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-bottom:10px;}
.groep-aantal{font-size:var(--tekst-s);color:var(--muted);font-weight:400;}
.galerij-aantal{font-size:var(--tekst-l);color:var(--muted);}
.galerij-meer{text-align:center;margin-top:16px;}
/* De voelspriet onder de tegels (doorscrollen.js): komt hij in beeld, dan laadt de volgende
   batch. Het schijfje draait alleen tijdens het laden. */
.meer-voelspriet{display:flex;align-items:center;justify-content:center;min-height:56px;margin:4px 0 8px;}
.meer-spinner{width:22px;height:22px;opacity:0;}
.meer-voelspriet.meer-bezig .meer-spinner{opacity:1;border:3px solid var(--rand);
  border-top-color:var(--groen);border-radius:var(--radius-rond);animation:meer-draai .8s linear infinite;}
@keyframes meer-draai{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.meer-voelspriet.meer-bezig .meer-spinner{animation:none;}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- Het bekijkscherm ------------------------------------------------------
   De kijker sluit om het beeld heen: geen donker vlak eromheen, dus een staande
   foto krijgt geen zwarte balken links en rechts. Het doek is precies zo groot
   als het beeld en knipt af wat er bij inzoomen buiten valt (kijker.js). De
   hoogte is begrensd zodat je de gegevens eronder nog ziet staan. */
.kijker{margin-bottom:14px;}
.kijker-beeld{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:120px;}
.kijker-doek{position:relative;max-width:100%;overflow:hidden;border-radius:var(--radius-xl);
  box-shadow:var(--schaduw-2);background:var(--op-fel);line-height:0;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;}
.kijker-doek.ingezoomd{touch-action:none;cursor:grab;}
.kijker-doek.slepen{cursor:grabbing;}
.kijker-doek img{max-width:100%;max-height:70vh;display:block;transform-origin:0 0;
  -webkit-user-drag:none;}
.kijker-doek video{max-width:100%;max-height:70vh;display:block;background:#000;}
/* Een video heeft geen intrinsieke maat tot hij laadt; zonder breedte zou hij als postzegel
   beginnen. */
.kijker-video .kijker-doek{width:100%;}
.kijker-video .kijker-doek video{width:100%;}
.kijker-pijl{position:absolute;top:0;bottom:0;display:flex;align-items:center;
  padding:0 14px;color:var(--op-accent);font-size:2.2rem;line-height:1;text-decoration:none;
  text-shadow:0 1px 6px rgba(var(--overlay-rgb),.8);z-index:1;
  /* In het detailpaneel is het een <button>: zonder dit krijgt hij de grijze knop van de browser. */
  background:none;border:0;font-family:inherit;cursor:pointer;}
.kijker-pijl:active{opacity:.72;}
.kijker-vorige{left:0;}
.kijker-volgende{right:0;}
/* Bij een video niet over de hele hoogte: onderin zit de bediening van de speler. */
.kijker-video .kijker-pijl{top:30%;bottom:30%;}
.kijker-doek.ingezoomd .kijker-pijl{display:none;}
.kijker-melding{margin:10px 0 0;color:var(--muted);text-align:center;line-height:1.5;}

.kijker-balk{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:10px;}
.kijker-knop{min-width:40px;height:36px;padding:0 10px;border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-pil);background:var(--card);color:var(--groen);font:inherit;
  font-size:1.1rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.kijker-knop:active{opacity:.72;}
.kijker-stand{font-size:var(--tekst-s);min-width:64px;font-variant-numeric:tabular-nums;}

/* Volledig scherm: nu hoort er wél een donkere achtergrond bij, en mag het beeld het hele
   scherm gebruiken. */
.kijker:fullscreen{background:#000;display:flex;flex-direction:column;justify-content:center;
  margin:0;padding:12px;}
.kijker:fullscreen .kijker-doek{box-shadow:none;border-radius:0;background:transparent;}
.kijker:fullscreen .kijker-doek img{max-height:calc(100vh - 80px);}
.kijker:fullscreen .kijker-knop{background:rgba(255,255,255,.12);color:#fff;border-color:transparent;}

.kijker-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.kijker-kop h1{margin-bottom:8px;min-width:0;overflow-wrap:anywhere;}
.kijker-kop-acties{display:flex;align-items:center;gap:2px;flex:none;margin:-6px -8px 0 0;}
.kijker-kop-acties .inline-form{margin:0;}
.detail-omschrijving{margin:0 0 12px;line-height:1.5;white-space:pre-line;}

/* Een knop met alleen een icoon, met een tikvlak van 44px (zoals de voorraad- en ceo-app). */
.btn-icoon{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:var(--knop-hoogte);height:var(--knop-hoogte);padding:0;border:none;border-radius:var(--radius-rond);
  background:none;color:var(--groen);cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;}
/* 24px met een fijne lijn (Frank 15-10-2026: groter, en minder grof). */
.btn-icoon .icoon{width:var(--icoon-l);height:var(--icoon-l);}
.btn-icoon:hover{background:var(--lichtgroen-zacht);}
.btn-icoon:active{opacity:.72;}
/* Bezig (data-bezig op het formulier, base.html): het icoon draait tot de nieuwe pagina er is. */
.btn-icoon.bezig .icoon{animation:meer-draai 1s linear infinite;}
@media (prefers-reduced-motion: reduce){.btn-icoon.bezig .icoon{animation:none;opacity:.5;}}
.galerij-knoppen{display:inline-flex;align-items:center;gap:2px;}
.btn-icoon-gevaar{color:var(--gevaar);}
.btn-icoon-gevaar:hover{background:var(--fout-bg);}
.kijker-acties{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;}

/* Vanaf 900px staan beeld en gegevens naast elkaar (PLAN.md §7). Onder die grens blijven ze
   onder elkaar: een paneel van 360px naast een foto laat op een telefoon van beide niets over.

   Het beeld blijft staan terwijl je door het paneel scrolt — met tags, voorstellen en twee
   formulieren wordt die kolom al gauw langer dan het scherm, en dan is het juist de foto waar
   je naar wilt blijven kijken. De plek onder de balk is dezelfde rekensom als bij `.page-head`. */
@media (min-width: 900px) {
  .kijker-scherm .detail{display:flex;align-items:flex-start;gap:14px;}
  .kijker-scherm .detail > .kijker{flex:1;min-width:0;margin-bottom:0;
    position:sticky;top:calc(var(--kop-h, 62px) + var(--main-boven, 28px));}
  .kijker-scherm .detail > .card{flex:none;width:380px;margin:0;}
  /* In een smalle kolom breekt "Opnamedatum" anders midden in het woord af en wordt de
     labelkolom onleesbaar smal. */
  .kijker-scherm .tabel th{white-space:nowrap;vertical-align:top;}
  .kijker-scherm .tabel td{overflow-wrap:anywhere;}
  /* Ruimer dan de 70vh van de smalle weergave: naast het paneel is er geen reden om de foto
     klein te houden, en onder de foto staat niets meer. */
  .kijker-scherm .kijker-doek img,
  .kijker-scherm .kijker-doek video{max-height:calc(100dvh - var(--kop-h, 62px) - 120px);}
}

/* Uitkomst van het toevoegen, per bestand. */
.merk{font-size:var(--tekst-s);padding:2px 8px;border-radius:var(--radius-pil);white-space:nowrap;}
.merk-nieuw{background:var(--ok-bg);color:var(--ok);}
.merk-bekend{background:var(--neutraal-bg);color:var(--neutraal);}
.merk-afgewezen{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.merk-geweigerd{background:var(--fout-bg);color:var(--fout);}

.vinkje-inline{display:inline-flex;align-items:center;gap:6px;font-size:var(--tekst-l);
  color:var(--muted);margin:0;}
.vinkje-inline input{width:auto;margin:0;}

/* ---- Tags ------------------------------------------------------------------
   Een chip toont de soort erboven, zodat "Schijndel" en "Joyce" niet door elkaar
   gaan lopen zodra er tientallen tags zijn. */
.tags-blok{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;}
.tag-chip{display:inline-flex;align-items:center;gap:6px;background:var(--lichtgroen-zacht);
  color:var(--groen-diep);border:var(--rand-dikte) solid var(--lichtgroen-diep);
  border-radius:var(--radius-pil);padding:3px 4px 3px 10px;font-size:var(--tekst-l);
  font-weight:600;line-height:1.4;}
.tag-chip small{display:block;font-size:var(--tekst-xs);font-weight:400;color:var(--muted);
  margin-right:2px;letter-spacing:.04em;}
.tag-chip form{margin:0;}
.tag-weg{border:0;background:none;color:var(--muted);font-size:1.1rem;line-height:1;
  cursor:pointer;padding:0 6px;border-radius:var(--radius-rond);}
.tag-weg:hover{color:var(--gevaar);background:var(--fout-bg);}
.tag-weg:active{opacity:.72;}

/* In het detail: achter de tags per soort een plus om er een bij te zetten (detail.js). De plus en
   zijn invulveld hebben de maat van een tag; de plus draagt de soort in zijn label, net als een tag. */
.tag-plus{display:inline-flex;margin:0;position:relative;}
/* De keuzelijst onder het invulveld van een plus (detail.js). */
.tag-keuzes{position:absolute;top:calc(100% + 4px);left:0;z-index:50;min-width:220px;max-width:320px;
  max-height:240px;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--card);
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-l);box-shadow:var(--schaduw-3);}
.tag-keuzes li{padding:6px 10px;border-radius:var(--radius-m);font-size:var(--tekst-l);cursor:pointer;
  color:var(--tekst);-webkit-tap-highlight-color:transparent;}
.tag-keuzes li:hover, .tag-keuzes li.actief{background:var(--lichtgroen-zacht);color:var(--groen-diep);}
.tag-keuzes li:active{opacity:.72;}
.tag-plus-knop{justify-content:center;min-width:34px;padding:3px 12px 3px 10px;cursor:pointer;font-family:inherit;
  background:none;border-style:dashed;color:var(--groen);}
.tag-plus-knop:hover{background:var(--lichtgroen-zacht);}
.tag-plus-knop:active{opacity:.72;}
.tag-plus .tag-plus-veld{width:150px;margin:0;padding:3px 10px;min-height:0;height:auto;font-size:var(--tekst-l);
  line-height:1.4;border-radius:var(--radius-pil);}
.tag-toevoegen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px;}
.tag-kiezer{display:flex;gap:6px;flex:1 1 260px;min-width:0;}
.tag-kiezer select{flex:0 0 auto;width:auto;min-width:120px;margin:0;}
.tag-kiezer input{flex:1 1 auto;min-width:0;margin:0;}

/* ---- Meerdere tegelijk -----------------------------------------------------
   Buiten de selecteermodus is een tegel gewoon een link; erin vangt het label de
   tik en is de link uitgeschakeld. Eén raster, twee standen. */
.tegel-kies{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;}

/* De ronde vinkbol op een tegel, in de hoek: in de galerij en in de inbox hetzelfde ding. */
.tegel-vink{width:26px;height:26px;flex:none;
  border-radius:var(--radius-rond);background:rgba(255,255,255,.85);color:transparent;
  border:2px solid var(--groen);align-items:center;justify-content:center;
  font-size:var(--tekst-l);font-weight:700;}
.tegel-vink{display:none;position:absolute;top:6px;right:6px;}
body.selecteren .tegel-vink{display:flex;}
body.selecteren .tegel-link{pointer-events:none;}
body.selecteren .tegel{cursor:pointer;}
.tegel:has(.tegel-kies:checked) .tegel-vink{background:var(--groen);color:var(--op-accent);}
/* Geselecteerd, zoals Google Foto's (Frank 14-10-2026: een dunne rand was niet duidelijk genoeg): de
   foto krimpt binnen zijn vak, het vak eromheen wordt lichtgroen met een groene rand, en het gevulde
   vinkje staat er altijd — ook bij selecteren met Ctrl of Shift, zonder de knop Selecteren. */
.tegel:has(.tegel-kies:checked){background:var(--lichtgroen);box-shadow:inset 0 0 0 3px var(--groen);}
.tegel:has(.tegel-kies:checked) img{transform:scale(.84);border-radius:var(--radius-m);}
.tegel:has(.tegel-kies:checked) .tegel-vink{display:flex;top:4px;right:4px;z-index:1;}
@media (prefers-reduced-motion: reduce){ .tegel img{transition:none;} }

.selectie-balk{position:sticky;bottom:0;z-index:300;display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;margin-top:12px;padding:10px 12px;background:var(--card);
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-xl);
  box-shadow:var(--schaduw-3);}
.selectie-aantal{font-size:var(--tekst-l);color:var(--muted);}
/* Het kruisje rechts in de balk: selectie opheffen (vervangt de knop Klaar, Frank 14-10-2026). */
.selectie-sluit{margin-left:auto;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:var(--radius-rond);
  background:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.selectie-sluit:hover{background:var(--creme-2);color:var(--tekst);}
.selectie-sluit:active{opacity:.72;}

/* ---- Beheer: lijsten met een greep om te slepen ---------------------------- */
.uitleg{color:var(--muted);font-size:var(--tekst-l);line-height:1.5;margin:6px 0 10px;}
.uitleg code{background:var(--creme-2);padding:1px 5px;border-radius:var(--radius-xs);
  font-size:var(--tekst-m);}

.badge{display:inline-block;font-size:var(--tekst-xs);font-weight:600;padding:2px 8px;
  border-radius:var(--radius-pil);white-space:nowrap;letter-spacing:.04em;
  font-family:var(--sans);vertical-align:middle;line-height:1.5;}
.badge-neutraal{background:var(--neutraal-bg);color:var(--neutraal);}
.badge-ok{background:var(--ok-bg);color:var(--ok);}
.badge-fout{background:var(--fout-bg);color:var(--fout);}
.badge-bezig{background:var(--waarschuwing-bg);color:var(--waarschuwing);}

.page-head{display:flex;align-items:center;gap:10px;margin:-10px 0 4px;padding:10px 0;
  position:sticky;top:calc(var(--kop-h, 62px) + var(--main-boven, 28px) - 10px);z-index:400;
  background:var(--creme);box-shadow:0 calc(10px - var(--main-boven, 28px)) 0 var(--creme);}
.page-head h1{margin:0;min-width:0;overflow-wrap:anywhere;}
.back-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--radius-rond);background:var(--lichtgroen);
  color:var(--groen);text-decoration:none;font-size:var(--tekst-3xl);line-height:1;}
.back-btn:hover{background:var(--groen);color:var(--op-accent);}

.lijst{background:var(--card);border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-xl);overflow:hidden;}
.lijst-rij{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;padding:10px 14px;color:var(--tekst);text-decoration:none;
  border-top:var(--rand-dikte) solid var(--rand-zacht);}
.lijst-rij:first-child{border-top:none;}
.lijst-rij-uit{color:var(--muted);}
.lijst-rij form{margin:0;}
.lijst-hoofd{display:flex;flex-direction:column;min-width:0;font-weight:600;font-size:var(--tekst-xl);}
.lijst-hoofd small{font-weight:400;color:var(--muted);font-size:var(--tekst-m);line-height:1.4;}
.lijst-rij-tik{position:relative;}
.rij-link{position:absolute;inset:0;z-index:1;}
.lijst-rij-tik:hover{background:var(--creme-2);}
.lijst-rij-tik:active{opacity:.72;transition:opacity .05s;}
.lijst-rij-tik .lijst-hoofd{flex:1 1 auto;}
.rij-rechts{position:relative;z-index:2;display:flex;align-items:center;gap:6px;flex:none;}

/* Laatste regel van een lijst: iets toevoegen */
.lijst-rij-toevoegen{width:100%;justify-content:flex-start;gap:10px;min-height:52px;
  background:none;border:0;border-top:var(--rand-dikte) solid var(--rand-zacht);
  font-family:inherit;font-size:var(--tekst-xl);font-weight:600;color:var(--groen);
  text-align:left;cursor:pointer;}
.lijst-rij-toevoegen:first-child{border-top:none;}
a.lijst-rij-toevoegen{text-decoration:none;}
.lijst-rij-toevoegen:hover{background:var(--creme-2);}
.lijst-rij-toevoegen:active{opacity:.72;transition:opacity .05s;}
.plus-rond{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-rond);border:1.5px dashed var(--groen);
  font-size:1.2rem;line-height:1;font-weight:400;}

/* Greep om een regel te slepen. Ligt boven het tikvlak; touch-action:none zodat de vinger
   op de greep sleept in plaats van de pagina te scrollen. Bewust smal: alleen wie echt aan
   de voorkant vasthoudt, versleept een regel. */
.sleep-greep{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;
  justify-content:center;width:20px;height:40px;margin:-8px -4px -8px -8px;color:var(--muted);
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;}
.sleep-greep .icoon{width:var(--icoon-s);height:var(--icoon-s);}
/* Slepen (static/js/volgorde.js, gelijk aan de ceo-app): de regel zweeft als kopie boven de lijst; op zijn plek een
   lege plek met een rand in de randkleur. */
.lijst-rij.sleept{background:var(--lichtgroen-zacht);box-shadow:inset 0 0 0 2px var(--rand);}
.lijst-rij.sleept > *{visibility:hidden;}
.lijst-zwevend{
  position:fixed; z-index:1200; margin:0; pointer-events:none; cursor:grabbing;
  background:var(--card); border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-m);
  box-shadow:var(--schaduw-4); transform:scale(1.03) rotate(-.6deg); opacity:.97;
}
.lijst-zwevend .sleep-greep{color:var(--groen);}
.lijst-zwevend.lijst-zwevend-neer{transform:none;box-shadow:var(--schaduw-1, none);}
/* ---- Snelmenu (0.17.0, snelmenu.py, _snelmenu.html, js/snelmenu.js) ----
   Overgenomen uit de band-app (0.41.0), en die uit de receptenapp: een half doorzichtige balk in de hoek linksonder
   die uit de zijkant van het scherm komt, tegen de linker- en onderrand, rechts boven en onder rond; elk icoon met zijn
   naam eronder. De kleuren komen uit het thema (--card, --groen) met color-mix, dus elk thema doet vanzelf mee en er
   komt geen eigen token bij. Standaard dicht: dan staat er een lipje met » aan de rand. `.vast` = altijd open (Mijn
   account). Laag 900: boven de kop (500), de selectiebalk (300) en de filterlade (700), onder de meldingen (1000) en
   modals (1100). `.sleept` zet de animatie uit tijdens het slepen en bij laden. */
.snelmenu{--snel-bg:color-mix(in srgb, var(--card) 88%, transparent);
  position:fixed;left:0;bottom:0;z-index:900;pointer-events:none;}
.snelmenu[hidden]{display:none;}
.snelmenu-balk, .snelmenu-lip, .snelmenu-meer-paneel{
  border-top-right-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl);
  background:var(--snel-bg);color:var(--groen);box-shadow:var(--schaduw-3);
  border:var(--rand-dikte) solid var(--rand);border-left:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.snelmenu-balk{
  pointer-events:auto;display:flex;align-items:stretch;max-width:100vw;padding:4px 2px 4px 4px;
  padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));
  transition:transform .22s ease;
  /* Horizontaal vegen is van ons (inklappen), verticaal blijft scrollen. */
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.snelmenu.dicht .snelmenu-balk{transform:translateX(calc(-100% - 8px));}
.snelmenu.sleept .snelmenu-balk{transition:none;}
.snelmenu-knop{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  /* Bij vijf knoppen samen de hele schermbreedte, minus de inklapknop en de rand; op een tablet niet breder dan
     84px. Als width en niet als flex-basis: de balk is fixed zonder `right`, dus zijn breedte komt uit de inhoud. */
  gap:4px;flex:0 1 auto;width:clamp(54px, calc((100vw - 40px) / 5), 84px);min-width:0;min-height:72px;
  padding:10px 2px 8px;border:0;border-radius:var(--radius-m);background:transparent;color:inherit;
  text-decoration:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .05s;
}
.snelmenu-knop[hidden]{display:none;}
.snelmenu-knop:active{opacity:.72;}
.snelmenu-icoon{flex:none;width:28px;height:28px;}
.snelmenu-pijl{flex:none;width:22px;height:22px;}
/* De naam onder het icoon: hoogstens twee regels; een lang woord breekt op zijn zachte afbreekstreepje. */
.snelmenu-tekst{font-size:var(--tekst-xs);font-weight:600;line-height:1.15;text-align:center;
  max-width:100%;overflow-wrap:normal;hyphens:manual;}
/* Wat er in de inbox ligt, als getal rechtsboven op het icoon (zoals de teller in het menu). */
.snelmenu-teller{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pil);
  background:var(--groen);color:var(--op-accent);font-size:var(--tekst-xs);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;}
/* De inklapknop is smal en zachter, zonder tekst: hij hoort bij de balk, niet bij de schermen. */
.snelmenu-in{flex:0 0 28px;width:28px;justify-content:center;opacity:.7;}
.snelmenu.vast .snelmenu-in{display:none;}
/* Het icoon waarvoor de balk vanzelf openging (event snelmenu-open), licht even op. */
.snelmenu-licht-op{animation:snelmenu-licht-op 1.2s ease-out 2;}
@keyframes snelmenu-licht-op{
  0%{background:color-mix(in srgb, var(--groen) 15%, transparent);transform:scale(1);}
  30%{background:color-mix(in srgb, var(--groen) 15%, transparent);transform:scale(1.1);}
  100%{background:transparent;transform:scale(1);}
}
/* Het lipje als hij dicht is: 40px zichtbaar met », aanraakbaar 48px, even hoog als de open balk. Een TIK opent hem;
   naar rechts trekken kan ook. */
.snelmenu-greep{pointer-events:auto;display:none;position:absolute;left:0;top:0;bottom:0;
  width:48px;padding:0;border:0;background:transparent;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;}
.snelmenu.dicht .snelmenu-greep{display:block;}
.snelmenu-lip{position:absolute;left:0;top:0;bottom:0;width:40px;display:flex;align-items:center;justify-content:center;}
.snelmenu-greep:active .snelmenu-lip{opacity:.72;}
/* De schermknoppen staan in een omhulsel (voor het indelen), maar tellen voor de opmaak als kinderen van de balk. */
.snelmenu-rij{display:contents;}
/* MEER: bij meer dan vijf gekozen de vijfde plek. Het paneel staat boven de balk, even breed, de knoppen van rechts
   af boven Meer (de rechterpadding is de breedte van «). */
.snelmenu-meer[hidden]{display:none;}
.snelmenu-meer-open{background:color-mix(in srgb, var(--groen) 12%, transparent);}
.snelmenu-meer-paneel{pointer-events:auto;position:absolute;left:0;right:0;bottom:calc(100% + 8px);
  display:flex;flex-wrap:wrap;justify-content:flex-end;padding:4px 28px 4px 4px;}
.snelmenu-meer-paneel[hidden]{display:none;}
/* Ruimte onder de inhoud, zodat de balk het laatste stuk van een pagina niet afdekt. */
.snelmenu-ruimte{height:96px;}
.snelmenu-ruimte[hidden]{display:none;}
/* Weg zolang je typt: anders ligt hij over het veld of het toetsenbord. */
body.snelmenu-weg .snelmenu{display:none;}
/* GALERIJ EN INBOX (drie panelen). Daar ligt onderin de selectiebalk met de batch-acties en links de filters. Zolang
   de selectiebalk of de filterlade (smal scherm) open is, gaat de balk weg: je bent dan met een selectie of een filter
   bezig, niet aan het wisselen van scherm, en de balk zou precies over het aantal en de tagkiezer vallen. Breed staat
   het filterpaneel naast de tegels tot onderaan het scherm: ruimte onderin, zodat de laatste filters boven de balk
   uit te scrollen zijn. */
body:has(#selectie-balk:not([hidden])) .snelmenu, body.nav-lade-open .snelmenu{display:none;}
body.galerij-pagina:has(.snelmenu:not([hidden])) .nav-paneel{padding-bottom:96px;}
/* De keuze onder Mijn account: greep, vinkje, het icoon zoals in de balk, en de naam. */
.snelmenu-keuze-rij{flex-wrap:nowrap;justify-content:flex-start;}
.snelmenu-keuze-rij .vinkje-inline{flex:1;gap:10px;color:var(--tekst);font-size:var(--tekst-xl);}
.snelmenu-keuze-rij .icoon-rij{flex:none;width:24px;height:24px;color:var(--groen);}
.snelmenu-vast-rij{margin-top:14px;color:var(--tekst);font-size:var(--tekst-xl);}
.snelmenu-vast-rij small{color:var(--muted);font-size:var(--tekst-m);}
.snelmenu-keuze-fout{margin:8px 0 0;color:var(--fout);}
/* Mijn account: wat er nu in het snelmenu staat, in volgorde, als labels met hun icoon. */
.snelmenu-samenvatting{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none;}
.snelmenu-samenvatting li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-pil);font-size:var(--tekst-l);color:var(--tekst);}
.snelmenu-samenvatting-icoon{flex:none;width:18px;height:18px;color:var(--groen);}

/* De tegel is sinds fase 2 een label (voor het vinkje); de link erbinnen moet zelf de
   hele tegel vullen, anders heeft de foto geen hoogte. */
.tegel-link{display:block;width:100%;height:100%;}

/* Teller bij de Inbox in het menu, en een stip op het account-bolletje als het menu dicht is. */
.nav-teller{display:inline-block;margin-left:6px;min-width:20px;padding:1px 6px;
  border-radius:var(--radius-pil);background:var(--kop-knop);color:var(--kop-knop-tekst);
  font-size:var(--tekst-xs);font-weight:700;text-align:center;vertical-align:middle;}
.nav-avatar-stip{position:relative;}
.nav-avatar-stip::after{content:'';position:absolute;top:0;right:0;width:10px;height:10px;
  border-radius:var(--radius-rond);background:var(--oranje);
  border:2px solid var(--kop-bg);}

/* Wachtwoordveld met een oogje om het zichtbaar te maken. Zelfde opzet als de receptenapp. */
.pw-wrap{position:relative;display:flex;align-items:center;}
.pw-wrap input[type=password],
.pw-wrap input[type=text]{flex:1;padding-right:42px;}
.pw-toggle{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:none;background:none;color:var(--muted);
  border-radius:var(--radius-rond);cursor:pointer;}
.pw-toggle:hover{color:var(--groen);background:var(--lichtgroen-zacht);}
.pw-toggle:active{opacity:.72;}

/* ---- Tagvoorstellen --------------------------------------------------------
   Bewust ánders dan een echte tag-chip: gestippelde rand en een neutrale kleur.
   Een voorstel is geen tag, en dat moet je op een halve meter afstand al zien —
   anders ga je denken dat de app tags zet. Dat doet ze nooit (zie voorstellen.py). */
.voorstellen-blok{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;}
.voorstellen-blok .uitleg{flex:1 1 100%;margin:0 0 2px;}
.voorstel-chip{display:inline-flex;align-items:center;gap:4px;background:var(--creme-2);
  color:var(--tekst);border:var(--rand-dikte) dashed var(--groen-zacht);
  border-radius:var(--radius-pil);padding:3px 4px 3px 10px;font-size:var(--tekst-l);
  font-weight:600;line-height:1.4;}
.voorstel-chip small{display:block;font-size:var(--tekst-xs);font-weight:400;color:var(--muted);
  margin-right:2px;letter-spacing:.04em;}
.voorstel-chip form{margin:0;}
.voorstel-ja,.voorstel-nee{border:0;background:none;font-size:1.1rem;line-height:1;
  cursor:pointer;padding:0 6px;border-radius:var(--radius-rond);}
.voorstel-ja{color:var(--groen);}
.voorstel-ja:hover{background:var(--ok-bg);}
.voorstel-nee{color:var(--muted);}
.voorstel-nee:hover{color:var(--gevaar);background:var(--fout-bg);}
.voorstel-ja:active,.voorstel-nee:active{opacity:.72;}

/* ===========================================================
   Thema's (Frank 30-09-2026, thema.py)
   Elk account kiest een thema onder Thema in het menu; base.html zet het als data-thema op <html>.
   Het MAW-thema is :root bovenaan en heeft hier geen blok; het standaardthema is sinds 15-10-2026
   VandePas Solutions (vdps, thema.py). Een thema zet ALLEEN tokens, plus een enkele eigen regel.
   Dezelfde thema's staan in de voorraad-app en de beeldbank; houd dit blok in beide apps gelijk.

   De selector is [data-thema=…] en niet :root[…]: zo kleurt dezelfde set ook een voorbeeldtegel
   op het themascherm. Daarom zet elk blok ook de tokens die in :root van een ander token
   afgeleid zijn (--card, --kop-*, --neutraal-bg, de schaduwen): een afgeleide wordt bij :root
   uitgerekend en erft als vaste waarde, dus in een tegel zou anders de MAW-waarde blijven staan.
   Wat een thema aan vorm en letter kan wijzigen, zet [data-thema] eerst terug op MAW: een tegel
   van Oceaan op een scherm in Grafiet erft anders de hoekige vormen van Grafiet.

   Contrast: tekst en labels minstens 4,5:1, net als MAW (nagerekend 30-09-2026).
   =========================================================== */

[data-thema]{
  color-scheme:light;
  --rand-dikte:1px;
  --radius-xs:4px; --radius-s:6px; --radius-m:8px; --radius-l:10px; --radius-xl:14px;
  --radius-rond:50%; --radius-pil:999px;
  --kop-streep:none; --kop-streep-hoogte:0px;
  --display:'Bebas Neue',Impact,sans-serif;
  --script:'Pacifico',cursive;
  --sans:'Open Sans',-apple-system,Segoe UI,sans-serif;
  --display-gewicht:400; --display-spatie:.03em; --display-kast:none; --h1-grootte:var(--tekst-6xl);
  --merk-gewicht:400;    --merk-spatie:0;        --merk-kast:none;    --merk-grootte:var(--tekst-5xl);
  --icoon-lijn:3.5; --icoon-uiteinde:round; --icoon-hoek:round;
  --icoon-vlak:none; --icoon-filter:none; --icoon-draai:none;
}

/* ---- Donker: de groene familie van MAW, maar dan 's avonds. Zelfde letters, mintgroen op antraciet. ---- */
[data-thema="donker"]{
  color-scheme:dark;
  --groen:#7FC8A0;        --groen-rgb:127,200,160;
  --groen-diep:#9DD9B8;
  --groen-zacht:#5F7D6E;
  --lichtgroen:#1F2A25;
  --lichtgroen-diep:#2A3832;
  --lichtgroen-zacht:#19221E;
  --goud-ster:#D9B95B;
  --creme:#111513;  --creme-2:#1A201D;  --card:#171C1A;
  --tekst:#E6EDE9;  --muted:#9EABA4;    --placeholder:#5E6A64;
  --rand:#2B3530;   --rand-zacht:#222A26;
  --op-accent:#0F1512; --op-fel:#111513;
  --ok-bg:#16291F;            --ok:#8FD6A4;
  --waarschuwing-bg:#2E2711;  --waarschuwing:#E8C86C;
  --fout-bg:#33191A;          --fout:#F29D91;
  --neutraal-bg:#1E2522;      --neutraal:#A9B5AF;
  --gevaar:#E86A5C; --gevaar-diep:#F28A7E;
  --schaduw-rgb:0,0,0; --overlay-rgb:0,0,0;
  --schaduw-1:0 1px 4px rgba(0,0,0,.5);
  --schaduw-2:0 4px 16px rgba(0,0,0,.35); --schaduw-3:0 8px 22px rgba(0,0,0,.5);
  --schaduw-4:0 18px 44px -14px rgba(0,0,0,.8);
  --ring-focus:0 0 0 3px rgba(127,200,160,.28);
  --kop-bg:#161D1A; --kop-merk:#7FC8A0; --kop-tekst:#A9B5AF; --kop-hover:#26332D; --kop-rand:#26302B;
  --kop-knop:#7FC8A0; --kop-knop-tekst:#0F1512;
  /* Iconen: iets dunner, met een zacht mintgroen vlak. */
  --icoon-lijn:3; --icoon-vlak:rgba(127,200,160,.16);
}

/* ---- Oceaan: fris blauw, een blauwe kop met witte letters, alles zacht en rond; Nunito. ---- */
[data-thema="oceaan"]{
  --groen:#0B65A8;        --groen-rgb:11,101,168;
  --groen-diep:#084F85;
  --groen-zacht:#7FA3C2;
  --lichtgroen:#D9EAF8;
  --lichtgroen-diep:#C4DDF3;
  --lichtgroen-zacht:#E8F2FB;
  --goud-ster:#FFB547;
  --creme:#F3F7FB;  --creme-2:#E6EFF7;  --card:#FFFFFF;
  --tekst:#0E2233;  --muted:#4E6275;    --placeholder:#9AABBB;
  --rand:#D3E1ED;   --rand-zacht:#E4ECF4;
  --op-accent:#FFFFFF; --op-fel:#0E2233;
  --ok-bg:#DCF2E8;            --ok:#1C6A48;
  --waarschuwing-bg:#FFF0D3;  --waarschuwing:#7A5200;
  --fout-bg:#FDE3E1;          --fout:#A8322B;
  --neutraal-bg:#E6EFF7;      --neutraal:#4E6275;
  --gevaar:#CC322A; --gevaar-diep:#A82821;
  --schaduw-rgb:11,101,168; --overlay-rgb:14,34,51;
  --schaduw-1:0 1px 4px rgba(14,34,51,.12);
  --schaduw-2:0 6px 20px rgba(11,101,168,.08); --schaduw-3:0 10px 28px rgba(11,101,168,.16);
  --schaduw-4:0 18px 44px -14px rgba(14,34,51,.5);
  --ring-focus:0 0 0 3px rgba(11,101,168,.22);
  --kop-bg:#0B65A8; --kop-merk:#FFFFFF; --kop-tekst:#E6F1FA; --kop-hover:#0A5896; --kop-rand:#0A5896;
  --kop-knop:#FFFFFF; --kop-knop-tekst:#0B65A8;
  --kop-streep:linear-gradient(90deg,#0B65A8,#35C4D6); --kop-streep-hoogte:4px;
  --radius-xs:6px; --radius-s:10px; --radius-m:14px; --radius-l:18px; --radius-xl:22px;
  --display:'Nunito',-apple-system,Segoe UI,sans-serif;
  --script:'Nunito',-apple-system,Segoe UI,sans-serif;
  --sans:'Nunito',-apple-system,Segoe UI,sans-serif;
  --display-gewicht:800; --display-spatie:0; --h1-grootte:var(--tekst-5xl);
  --merk-gewicht:900;    --merk-spatie:-.01em;
  /* Iconen: dik en rond, met een lichtblauw vlak (de kleur van de streep onder de kop). */
  --icoon-lijn:4.5; --icoon-vlak:rgba(53,196,214,.24);
}

/* ---- Zand: warm zand en terracotta, licht en luchtig; dunne Josefin Sans in kapitalen. ---- */
[data-thema="zand"]{
  --groen:#A34A26;        --groen-rgb:163,74,38;
  --groen-diep:#843A1C;
  --groen-zacht:#C9A488;
  --lichtgroen:#F2E1CC;
  --lichtgroen-diep:#E9D0B2;
  --lichtgroen-zacht:#F7ECDF;
  --goud-ster:#E3B04B;
  --creme:#FBF6EF;  --creme-2:#F3EADD;  --card:#FFFCF7;
  --tekst:#2E211A;  --muted:#735F4E;    --placeholder:#BCA893;
  --rand:#EADCC8;   --rand-zacht:#F1E6D6;
  --op-accent:#FFFCF7; --op-fel:#2E211A;
  --ok-bg:#E6EEDB;            --ok:#4A6331;
  --waarschuwing-bg:#F8EACB;  --waarschuwing:#6F500E;
  --fout-bg:#F6DED6;          --fout:#9A3921;
  --neutraal-bg:#F3EADD;      --neutraal:#6B594A;
  --gevaar:#B5311D; --gevaar-diep:#932718;
  --schaduw-rgb:163,74,38; --overlay-rgb:46,33,26;
  --schaduw-1:0 1px 4px rgba(46,33,26,.12);
  --schaduw-2:0 4px 16px rgba(163,74,38,.07); --schaduw-3:0 8px 22px rgba(163,74,38,.13);
  --schaduw-4:0 18px 44px -14px rgba(46,33,26,.5);
  --ring-focus:0 0 0 3px rgba(163,74,38,.2);
  --kop-bg:#F2E1CC; --kop-merk:#843A1C; --kop-tekst:#6B594A; --kop-hover:#E9D0B2; --kop-rand:#EADCC8;
  --kop-knop:#A34A26; --kop-knop-tekst:#FFFCF7;
  --radius-s:8px; --radius-m:10px; --radius-l:14px; --radius-xl:18px;
  --display:'Josefin Sans',Futura,sans-serif;
  --script:'Josefin Sans',Futura,sans-serif;
  --display-gewicht:600; --display-spatie:.08em; --display-kast:uppercase; --h1-grootte:var(--tekst-5xl);
  --merk-gewicht:300;    --merk-spatie:.22em;    --merk-kast:uppercase;    --merk-grootte:var(--tekst-3xl);
  /* Iconen: luchtig dun, met een terracotta-getint vlak. */
  --icoon-lijn:2.75; --icoon-vlak:rgba(163,74,38,.16);
}

/* ---- Papier: krantenpapier, zwarte inkt en een rode merknaam; schreefletters en een dubbele lijn. ---- */
[data-thema="papier"]{
  --groen:#1D1B18;        --groen-rgb:29,27,24;
  --groen-diep:#000000;
  --groen-zacht:#8F877A;
  --lichtgroen:#ECE4D3;
  --lichtgroen-diep:#E0D6C1;
  --lichtgroen-zacht:#F1EBDF;
  --goud-ster:#D4B24C;
  --creme:#F6F1E7;  --creme-2:#EDE6D8;  --card:#FBF8F1;
  --tekst:#1D1B18;  --muted:#5E574C;    --placeholder:#A89F90;
  --rand:#D9D0BF;   --rand-zacht:#E7E0D2;
  --op-accent:#FBF8F1; --op-fel:#1D1B18;
  --ok-bg:#E4EAD8;            --ok:#46562A;
  --waarschuwing-bg:#F3E6C4;  --waarschuwing:#6A5110;
  --fout-bg:#F2DCD6;          --fout:#982A20;
  --neutraal-bg:#EDE6D8;      --neutraal:#5E574C;
  --gevaar:#A3221B; --gevaar-diep:#7F1A14;
  --schaduw-rgb:29,27,24; --overlay-rgb:29,27,24;
  --schaduw-1:0 1px 3px rgba(29,27,24,.14);
  --schaduw-2:0 1px 0 rgba(29,27,24,.08); --schaduw-3:0 2px 0 rgba(29,27,24,.2);
  --schaduw-4:0 18px 44px -14px rgba(29,27,24,.5);
  --ring-focus:0 0 0 3px rgba(29,27,24,.15);
  --kop-bg:#F6F1E7; --kop-merk:#A3221B; --kop-tekst:#5E574C; --kop-hover:#ECE4D3; --kop-rand:#D9D0BF;
  --kop-knop:#1D1B18; --kop-knop-tekst:#FBF8F1;
  --kop-streep:linear-gradient(#1D1B18 0 2px,transparent 2px 4px,#1D1B18 4px 5px); --kop-streep-hoogte:5px;
  --radius-xs:0; --radius-s:2px; --radius-m:3px; --radius-l:3px; --radius-xl:4px; --radius-pil:3px;
  --display:'DM Serif Display',Georgia,serif;
  --script:'DM Serif Cursief',Georgia,serif;
  --sans:'Lora',Georgia,serif;
  --display-spatie:0; --merk-grootte:var(--tekst-6xl);
  /* Iconen: als inkt — dunne lijn, recht afgesneden, een licht ruwe rand (filter #inkt in base.html). */
  --icoon-lijn:2.5; --icoon-uiteinde:butt; --icoon-hoek:miter;
  --icoon-vlak:rgba(29,27,24,.07); --icoon-filter:url(#inkt);
}

/* ---- Grafiet: strak zwart-wit met signaalgeel; dikke lijnen, harde schaduw, geen ronde hoeken. ---- */
[data-thema="grafiet"]{
  --groen:#111111;        --groen-rgb:17,17,17;
  --groen-diep:#3A3A3A;
  --groen-zacht:#8A8A8A;
  --lichtgroen:#FFE600;
  --lichtgroen-diep:#F0D800;
  --lichtgroen-zacht:#F2F2F2;
  --goud-ster:#FFE600;
  --creme:#FFFFFF;  --creme-2:#F2F2F2;  --card:#FFFFFF;
  --tekst:#111111;  --muted:#545454;    --placeholder:#9A9A9A;
  --rand:#111111;   --rand-zacht:#DDDDDD;
  --op-accent:#FFFFFF; --op-fel:#111111;
  --ok-bg:#E1F4DF;            --ok:#1E6A1A;
  --waarschuwing-bg:#FFF5B0;  --waarschuwing:#5C5000;
  --fout-bg:#FFE0DC;          --fout:#AE2319;
  --neutraal-bg:#F2F2F2;      --neutraal:#545454;
  --gevaar:#CC2319; --gevaar-diep:#A51C14;
  --schaduw-rgb:17,17,17; --overlay-rgb:17,17,17;
  --schaduw-1:2px 2px 0 #111111;
  --schaduw-2:4px 4px 0 #111111; --schaduw-3:6px 6px 0 #111111;
  --schaduw-4:8px 8px 0 #111111;
  --ring-focus:0 0 0 3px #FFE600;
  --kop-bg:#111111; --kop-merk:#FFE600; --kop-tekst:#D4D4D4; --kop-hover:#2E2E2E; --kop-rand:#111111;
  --kop-knop:#FFE600; --kop-knop-tekst:#111111;
  --kop-streep:repeating-linear-gradient(-45deg,#FFE600 0 10px,#111111 10px 20px); --kop-streep-hoogte:6px;
  --rand-dikte:2px;
  --radius-xs:0; --radius-s:0; --radius-m:0; --radius-l:0; --radius-xl:0; --radius-rond:0; --radius-pil:0;
  --display:'Space Grotesk',Arial,sans-serif;
  --script:'Space Mono','Courier New',monospace;
  --sans:'Space Grotesk',Arial,sans-serif;
  --display-gewicht:700; --display-spatie:-.01em; --h1-grootte:var(--tekst-5xl);
  --merk-gewicht:700;    --merk-spatie:-.02em;    --merk-grootte:var(--tekst-3xl);
  /* Iconen: strak — vierkante uiteinden en scherpe hoeken, een signaalgeel vlak en de harde schaduw. */
  --icoon-lijn:4; --icoon-uiteinde:square; --icoon-hoek:miter;
  --icoon-vlak:#FFE600; --icoon-filter:drop-shadow(2px 2px 0 #111111);
}
/* De rand van het menu op de telefoon is in Grafiet zwart op zwart; een donkergrijze lijn scheidt de regels. */
[data-thema="grafiet"] .site-nav .nav-link, [data-thema="grafiet"] .site-nav .btn-link{border-bottom-color:#2E2E2E;}

/* ---- VandePas Solutions: de huisstijl van het bedrijf en het standaardthema (Frank 15-10-2026). Zwart, wit en
   grijs, zonder accentkleur: een antraciet kop zoals het app-icoon en het opstartscherm, witte kaarten op lichtgrijs, en
   de letter van het woordmerk (Montserrat) voor koppen en de naam van de app. Alleen de statuskleuren hebben kleur. ---- */
[data-thema="vdps"]{
  --groen:#222222;        --groen-rgb:34,34,34;
  --groen-diep:#000000;
  --groen-zacht:#8C8C8C;
  --lichtgroen:#E6E6E6;
  --lichtgroen-diep:#D9D9D9;
  --lichtgroen-zacht:#EFEFEF;
  --goud-ster:#BDBDBD;
  --creme:#F5F5F5;  --creme-2:#EBEBEB;  --card:#FFFFFF;
  --tekst:#1E1E1E;  --muted:#5E5E5E;    --placeholder:#A6A6A6;
  --rand:#DCDCDC;   --rand-zacht:#EBEBEB;
  --op-accent:#FFFFFF; --op-fel:#1E1E1E;
  --ok-bg:#E5F0E3;            --ok:#2F6A2B;
  --waarschuwing-bg:#F6EFD9;  --waarschuwing:#765B14;
  --fout-bg:#F6E2DF;          --fout:#A2352A;
  --neutraal-bg:#EBEBEB;      --neutraal:#5E5E5E;
  --gevaar:#C0392B; --gevaar-diep:#A5301F;
  --schaduw-rgb:0,0,0; --overlay-rgb:20,20,20;
  --schaduw-1:0 1px 4px rgba(0,0,0,.10);
  --schaduw-2:0 4px 16px rgba(0,0,0,.05); --schaduw-3:0 8px 22px rgba(0,0,0,.10);
  --schaduw-4:0 18px 44px -14px rgba(20,20,20,.45);
  --ring-focus:0 0 0 3px rgba(34,34,34,.18);
  --kop-bg:#222222; --kop-merk:#F2F2F2; --kop-tekst:#BDBDBD; --kop-hover:#333333; --kop-rand:#3A3A3A;
  --kop-knop:#F2F2F2; --kop-knop-tekst:#222222;
  --display:'Montserrat',Helvetica,Arial,sans-serif;
  --script:'Montserrat',Helvetica,Arial,sans-serif;
  --display-gewicht:700; --display-spatie:-.01em; --h1-grootte:var(--tekst-5xl);
  --merk-gewicht:600;    --merk-spatie:.01em;     --merk-grootte:var(--tekst-3xl);
  /* Iconen: een rustige lijn met een lichtgrijs vlak. */
  --icoon-lijn:3; --icoon-vlak:rgba(34,34,34,.07);
}

/* ---- Thema kiezen: per thema een tegel die zichzelf in dat thema tekent. ---- */
.thema-keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0 0;}
.thema-keuze{display:flex;flex-direction:column;margin:0;padding:0;cursor:pointer;color:var(--tekst);font:inherit;
  text-align:left;background:none;border:2px solid var(--rand);border-radius:var(--radius-l);overflow:hidden;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;}
.thema-keuze-actief{border-color:var(--groen);box-shadow:var(--ring-focus);}
.thema-keuze:focus-visible{outline:2px solid var(--groen);outline-offset:2px;}
.thema-keuze:active{opacity:.72;transition:opacity .05s;}
.thema-proef{display:flex;flex-direction:column;background:var(--creme);color:var(--tekst);font-family:var(--sans);}
.thema-proef-kop{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px;background:var(--kop-bg);}
.thema-proef-kop::after{content:"";width:16px;height:16px;flex:none;border-radius:var(--radius-rond);background:var(--kop-knop);}
.thema-proef-streep{display:block;height:var(--kop-streep-hoogte);background:var(--kop-streep);}
.thema-proef-merk{font-family:var(--script);font-size:var(--tekst-2xl);line-height:1.5;color:var(--kop-merk);
  /* Hooguit .1em letterafstand: de tegel is smaller dan de kop, en Zand liep er anders uit. */
  font-weight:var(--merk-gewicht);letter-spacing:min(var(--merk-spatie),.1em);text-transform:var(--merk-kast);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.thema-proef-vlak{display:flex;flex-direction:column;gap:6px;margin:8px;padding:8px 10px;background:var(--card);
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);box-shadow:var(--schaduw-2);}
.thema-proef-titel{font-family:var(--display);font-size:var(--tekst-2xl);line-height:1.1;color:var(--groen);
  font-weight:var(--display-gewicht);letter-spacing:var(--display-spatie);text-transform:var(--display-kast);}
.thema-proef-tekst{font-size:var(--tekst-s);color:var(--muted);line-height:1.3;}
.thema-proef-knop{align-self:flex-start;padding:2px 10px;border-radius:var(--radius-s);background:var(--groen);
  color:var(--op-accent);font-size:var(--tekst-s);font-weight:700;}
.thema-naam{display:flex;flex-direction:column;padding:6px 10px 8px;background:var(--card);border-top:var(--rand-dikte) solid var(--rand);}
.thema-naam strong{font-size:var(--tekst-xl);}
.thema-naam small{color:var(--muted);font-size:var(--tekst-m);line-height:1.35;}
/* Mijn account (0.17.0, zoals de band-app): het thema dat je nu hebt, klein, met naam en omschrijving; kiezen in een
   modal (potlood). In de modal twee tegels naast elkaar, ook op een telefoon. */
.smal{max-width:640px;margin-left:auto;margin-right:auto;}
.card-kop{display:flex;align-items:center;gap:10px;margin:0 0 10px;}
.card-kop h2{flex:1;margin:0;}
.card-kop .btn-icoon{margin:-8px -8px -8px 0;}
.thema-samenvatting{display:flex;align-items:center;gap:14px;}
.thema-samenvatting .thema-proef{flex:none;width:120px;border:2px solid var(--rand);border-radius:var(--radius-l);overflow:hidden;}
/* In het kleine voorbeeld past de naam van de app anders niet en wordt hij afgekapt: kleiner, zonder het bolletje. */
.thema-samenvatting .thema-proef-merk{font-size:var(--tekst-l);}
.thema-samenvatting .thema-proef-kop::after{display:none;}
.thema-naam-kort{display:flex;flex-direction:column;min-width:0;}
.thema-naam-kort strong{font-size:var(--tekst-xl);}
.thema-naam-kort small{color:var(--muted);font-size:var(--tekst-m);line-height:1.35;}
.modal .thema-keuzes{grid-template-columns:repeat(2, minmax(0, 1fr));}

/* ---- De iconen in de hand van het thema (tokens --icoon-* in :root en per thema). Een CSS-eigenschap wint van
   het attribuut op de <svg>, dus zonder stylesheet blijft de tekening zoals _macros.html hem schrijft. Een vlak met
   een eigen kleur (fill-attribuut, geen klasse vlak) houdt die kleur. Raster 64 is de maat van de tekeningen; de
   kleine UI-iconen (raster 24, tekening-24) krijgen naar verhouding een dunnere lijn. ---- */
.tekening{stroke-width:var(--icoon-lijn);stroke-linecap:var(--icoon-uiteinde);stroke-linejoin:var(--icoon-hoek);
  filter:var(--icoon-filter);transform:var(--icoon-draai);overflow:visible;}
.tekening .vlak{fill:var(--icoon-vlak);}
/* Sinds 0.15.2 fijner: 3/7 in plaats van 4/7 (MAW: 1,5 in plaats van 2). Een lijn met klasse `fijn` (de pijl van
   Naar de galerij) nog een slag dunner. */
.tekening-24{stroke-width:calc(var(--icoon-lijn) * 3 / 7);}
.tekening-24 .fijn{stroke-width:calc(var(--icoon-lijn) * 2.25 / 7);}
/* Niet display:none: dan vindt een browser het filter erin niet altijd. */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}
/* De tekening boven een lege staat (galerij, inbox). */
.leeg-tekening{display:block;width:72px;height:72px;margin:0 auto 10px;color:var(--groen);}

/* ---- Het woordmerk van VandePas Solutions: alleen letters, op één regel. VandePas vet (700), Solutions normaal (400)
   en grijs (huisstijl/README.md in de mainframe-root). Het grijs mengt de tekstkleur met de achtergrond, zodat het in
   elk thema past; op antraciet en op wit komt het uit op #8C8C8C (Frank 20-10-2026). ---- */
.vps-merk{font-family:var(--merk);font-weight:400;letter-spacing:.01em;white-space:nowrap;}
.vps-merk-vet{font-weight:700;}
.vps-merk-licht{color:color-mix(in srgb,currentColor 52%,transparent);}

/* ---- Het opstartscherm van de geïnstalleerde app (opstart.js). Twee lagen boven elkaar: de neutrale (antraciet met
   het woordmerk, net als het opstartscherm van de telefoon) ligt bovenop en vloeit weg naar die in het thema. ---- */
.opstart{display:none;}
.opstart-aan .opstart{position:fixed;inset:0;z-index:2000;display:block;transition:opacity .3s;}
.opstart-weg .opstart{opacity:0;}
.opstart-thema, .opstart-neutraal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;}
.opstart-thema{gap:18px;background:var(--kop-bg);}
.opstart-neutraal{background:var(--neutraal-app-bg);color:var(--neutraal-app-tekst);transition:opacity .4s;}
/* Even breed als op het opstartbeeld van iOS: 62% van de korte kant; het woordmerk is 10,2 em breed. */
.opstart-neutraal .vps-merk{font-size:calc(62vmin / 10.2);}
.opstart-fase-thema .opstart-neutraal{opacity:0;}
/* Het icoon als app-tegel: een dunne rand en een schaduw, anders valt zijn achtergrond weg in de kopkleur en
   zweeft wat er onderin getekend staat (een streep) los onder de tekening. */
.opstart img{width:128px;height:128px;border-radius:22%;box-shadow:0 0 0 1px color-mix(in srgb,var(--kop-merk) 30%,transparent),var(--schaduw-3);}
/* De naam van de app zoals in de kop (.brand): de merkletter van het thema, met zijn gewicht, spatie en kast. */
.opstart-naam{max-width:100%;padding:0 24px;text-align:center;overflow-wrap:anywhere;font-family:var(--script);
  font-size:var(--tekst-6xl);line-height:1.4;color:var(--kop-merk);font-weight:var(--merk-gewicht);
  letter-spacing:var(--merk-spatie);text-transform:var(--merk-kast);}
/* Onderin, zoals bij apps gebruikelijk: van wie de app is. */
.opstart-voet{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));display:flex;
  flex-direction:column;align-items:center;gap:2px;color:var(--kop-merk);opacity:.8;}
.opstart-van{font-size:var(--tekst-s);letter-spacing:.08em;text-transform:lowercase;color:var(--kop-tekst);}
.opstart-voet .vps-merk{font-size:var(--tekst-xl);}

/* ---- Stijl (menu → Stijl, stijl.html): het naslagscherm met alle tokens, per thema. De tokens komen er via
   data-stijl en stijl.js op; hier alleen de opmaak van het scherm zelf. ---- */
.stijl-themas{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px;}
.stijl-thema-knop{min-height:var(--knop-hoogte-klein);padding:2px 12px;border:var(--rand-dikte) solid var(--groen);
  border-radius:var(--radius-pil);background:none;color:var(--groen);font-family:inherit;font-size:var(--tekst-l);
  font-weight:600;cursor:pointer;}
.stijl-thema-knop[aria-pressed="true"]{background:var(--groen);color:var(--op-accent);}
.stijl-thema-knop:active{opacity:.72;transition:opacity .05s;}
.stijl-thema-naam{margin:4px 0 10px;color:var(--muted);}
.stijl-appiconen{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;}
.stijl-appiconen figure, .stijl-iconen figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;}
.stijl-appiconen img{border-radius:22%;box-shadow:var(--schaduw-1);}
.stijl-appiconen figcaption, .stijl-iconen figcaption{font-size:var(--tekst-s);color:var(--muted);text-align:center;}
.stijl-statusbalk{width:60px;height:24px;}
.stijl-kop{margin:28px 0 8px;}
.stijl-subkop{margin:16px 0 8px;font-family:var(--sans);font-size:var(--tekst-xl);color:var(--muted);font-weight:600;
  letter-spacing:normal;text-transform:none;}
.stijl-stalen{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.stijl-staal{display:flex;flex-direction:column;gap:2px;min-width:0;}
.stijl-staal code, .stijl-vorm code, .stijl-letter code, .stijl-regel code{font-size:var(--tekst-s);word-break:break-all;}
.stijl-vlak{display:block;height:44px;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);}
.stijl-waarde{font-size:var(--tekst-xs);color:var(--muted);word-break:break-all;}
.stijl-uitleg{font-size:var(--tekst-xs);color:var(--muted);font-style:italic;}
.stijl-streep{display:block;max-width:420px;}
.stijl-letters{display:grid;gap:12px;}
.stijl-letter{display:flex;flex-direction:column;gap:2px;}
.stijl-letter-voorbeeld{font-size:var(--tekst-5xl);line-height:1.3;color:var(--groen);}
.stijl-schaal{display:grid;gap:4px;margin-top:14px;}
.stijl-regel{display:grid;grid-template-columns:110px 1fr;align-items:baseline;gap:10px;}
.stijl-vormen{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;}
.stijl-vorm{display:flex;flex-direction:column;gap:4px;}
.stijl-blok{display:block;height:56px;background:var(--lichtgroen);border:var(--rand-dikte) solid var(--rand);}
.stijl-blok-kaart{background:var(--card);border-radius:var(--radius-l);}
.stijl-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0;}
.stijl-meldingen .flash{cursor:default;box-shadow:none;}
.stijl-proef{border:0;padding:0;min-width:0;}
.stijl-tabelwrap{overflow-x:auto;}
.stijl-tabel{border-collapse:collapse;font-size:var(--tekst-l);}
.stijl-tabel td{padding:4px 12px 4px 0;vertical-align:top;}
.stijl-tabel td:first-child{white-space:nowrap;}
.stijl-raster{max-width:340px;grid-template-columns:repeat(3,1fr);}
.stijl-tegel{display:flex;align-items:center;justify-content:center;color:var(--groen-zacht);}
.stijl-tegel .tekening{width:44%;height:44%;}
.stijl-iconen{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px;margin-top:12px;color:var(--groen);}
.stijl-iconen .icoon-groot{width:56px;height:56px;}
.stijl-iconen .icoon-klein{width:32px;height:32px;}

/* ---- De galerij in drie panelen (0.10.0) -----------------------------------
   Links de navigatie met de filters, in het midden de tegels, rechts het detail
   met de kijker. Over de hele breedte van het scherm. Vanaf 1100px naast
   elkaar; navigatie en detail blijven staan en scrollen elk zelf, de tegels
   scrollen met de pagina (daar hangt het doorscrollen aan). Smaller is de
   navigatie een lade en opent een tegel het losse bekijkscherm. */
body.galerij-pagina .site-main{max-width:none;padding:16px 16px 32px;--main-boven:16px;}
.galerij-midden{min-width:0;}
.galerij-kop{position:relative;}

.nav-paneel{background:var(--card);border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-xl);
  padding:12px;}
.nav-paneel-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.nav-paneel-kop h2{margin:0;font-size:1rem;}
.nav-zoek input[type=search]{width:100%;margin:0 0 10px;}
.nav-actief{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px;}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-pil);
  background:var(--groen);color:var(--op-accent);font-size:var(--tekst-s);text-decoration:none;}
.filter-chip span{font-size:1rem;line-height:1;opacity:.85;}
.filter-chip:active{opacity:.72;}
.nav-wissen{font-size:var(--tekst-s);color:var(--muted);}

/* Kop en waarden duidelijk uit elkaar (Frank 14-10-2026: "een grote brei"). De kop van een categorie is een eigen
   balk, vet en met een vlak als hij open staat; de waarden staan ingesprongen achter een lijn, zodat je ziet bij
   welke kop ze horen. */
.nav-groep{margin:2px 0;}
.nav-groep > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:9px 10px;border-radius:var(--radius-m);font-weight:700;color:var(--groen);
  -webkit-tap-highlight-color:transparent;}
.nav-groep > summary:hover{background:var(--creme-2);}
.nav-groep[open] > summary{background:var(--lichtgroen-zacht);}
.nav-groep > summary::-webkit-details-marker{display:none;}
/* Het uitklapteken mag rechts staan: het is een teken van de kop, geen pijl naar een ander scherm (S5.15). */
.nav-groep > summary::after{content:'+';font-weight:400;font-size:1.1rem;color:var(--muted);}
.nav-groep[open] > summary::after{content:'−';}
.nav-groep > summary:active{opacity:.72;}
.nav-waarden{list-style:none;margin:4px 0 12px 12px;padding:0 0 0 6px;
  border-left:2px solid var(--rand);}
.nav-waarde{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:5px 8px 5px calc(26px + var(--diepte, 0) * 14px);border-radius:var(--radius-m);
  font-size:var(--tekst-l);font-weight:400;color:var(--tekst);text-decoration:none;
  -webkit-tap-highlight-color:transparent;}
.nav-waarde:hover{background:var(--creme-2);}
.nav-waarde:active{opacity:.72;}
/* Een rondje waar je één waarde kiest (zoals een keuzerondje), een vierkantje waar het er meer mogen zijn. */
.nav-waarde::before{content:'';position:absolute;left:calc(8px + var(--diepte, 0) * 14px);top:50%;
  width:10px;height:10px;margin-top:-6px;border:1.5px solid var(--groen-zacht);background:var(--card);}
.nav-een .nav-waarde::before{border-radius:var(--radius-rond);}
.nav-meer .nav-waarde::before{border-radius:3px;}
/* Gekozen: licht vlak, het rondje of vierkantje gevuld, niet donker (Frank 14-10-2026). */
.nav-waarde.gekozen{background:var(--lichtgroen-zacht);color:var(--groen-diep);font-weight:600;}
.nav-waarde.gekozen::before{background:var(--groen);border-color:var(--groen);}
.nav-waarde-leeg{color:var(--placeholder);cursor:default;padding-left:8px;}
.nav-waarde-leeg::before{display:none;}
.nav-waarde-leeg:hover{background:none;}
/* De teller in de kop van een categorie: hoeveel waarden er aan staan, ook als hij dicht is. */
.nav-teller{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;margin-left:6px;border-radius:var(--radius-pil);background:var(--groen);color:var(--op-accent);
  font-size:var(--tekst-xs);font-weight:600;vertical-align:1px;}
.nav-naam{overflow-wrap:anywhere;}
.nav-aantal{flex:none;font-size:var(--tekst-s);color:var(--muted);font-variant-numeric:tabular-nums;}
.nav-waarde.gekozen .nav-aantal{color:var(--groen);}
.nav-paneel .voetnoot{text-align:left;}

.tegel.gekozen{outline:3px solid var(--groen);outline-offset:2px;}

.detail-paneel{min-width:0;transition:opacity .15s;}
.detail-paneel.laden{opacity:.55;}
.detail-paneel .card{margin:0;}
.detail-paneel .kijker{margin-bottom:12px;}
.detail-paneel .kijker-doek img,
.detail-paneel .kijker-doek video{max-height:60vh;}
.detail-paneel .tabel th{white-space:nowrap;vertical-align:top;}
.detail-paneel .tabel td{overflow-wrap:anywhere;}
.detail-leeg{border:var(--rand-dikte) dashed var(--rand);border-radius:var(--radius-xl);padding:40px 20px;
  text-align:center;color:var(--muted);}
.detail-leeg .leeg-tekening{width:64px;height:64px;opacity:.6;}

@media (min-width: 1100px) {
  .galerij-scherm{display:grid;grid-template-columns:260px minmax(0, 1fr) minmax(400px, 38%);gap:16px;
    align-items:start;}
  .nav-paneel, .detail-paneel{position:sticky;top:calc(var(--kop-h, 62px) + 16px);
    max-height:calc(100dvh - var(--kop-h, 62px) - 32px);overflow:auto;overscroll-behavior:contain;}
  .nav-open, .nav-paneel-dicht, .nav-scherm{display:none !important;}
  /* In het smalle middenvak passen de tegels kleiner. */
  .galerij-midden .raster{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
}

@media (max-width: 1099.98px) {
  .detail-paneel{display:none;}
  .nav-paneel{position:fixed;top:0;bottom:0;left:0;z-index:700;width:min(320px, 86vw);border-radius:0;
    border-width:0 var(--rand-dikte) 0 0;overflow:auto;transform:translateX(-105%);transition:transform .2s ease-out;
    padding-top:calc(12px + env(safe-area-inset-top));}
  body.nav-lade-open .nav-paneel{transform:none;box-shadow:var(--schaduw-2);}
  .nav-scherm{position:fixed;inset:0;z-index:690;background:rgba(var(--overlay-rgb),.35);}
  .galerij-kop{justify-content:flex-start;}
  .galerij-kop .galerij-knoppen{margin-left:auto;}
}
@media (prefers-reduced-motion: reduce){ .nav-paneel{transition:none;} }

/* Tags uit mappen (Beheer → Tagsoort): de kop van het blok en het voorbeeld van wat een regel oplevert. */
.blok-kop{font-size:1rem;margin:22px 0 4px;padding-top:14px;border-top:var(--rand-dikte) solid var(--rand-zacht);}
.mapregel-voorbeeld{margin:10px 0 14px;padding:10px 14px;background:var(--lichtgroen-zacht);border-radius:var(--radius-m);
  font-size:var(--tekst-l);}
.mapregel-voorbeeld ul{margin:6px 0;padding-left:18px;}
.mapregel-voorbeeld p{margin:0;}

/* De iconen rechts in Beheer → Tags en Tagsoorten: AI (doet mee aan de beeldherkenning) en map (komt uit een
   map). Klasse ai-merk voor allebei. */
.ai-merk{display:inline-flex;align-items:center;color:var(--groen);}
.ai-merk .icoon{width:var(--icoon-m);height:var(--icoon-m);}

/* Een venster met een vaste kop en voet (het snelmenu onder Mijn account): alleen de inhoud ertussen scrolt, zodat Klaar
   op zijn plek blijft. Een plakkende voet (position:sticky) in een venster dat zelf scrolt, schoof bij het scrollen een
   stukje mee. Slepen scrolt de inhoud mee (volgorde.js, scrollBak). Bewust onderaan: wint van de gewone vensterregels. */
.modal.modal-vast-voet{display:flex;flex-direction:column;max-height:calc(100dvh - 40px);overflow:hidden;margin:0;}
.modal.modal-vast-voet .modal-kop{flex:none;}
.modal.modal-vast-voet .modal-inhoud{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:0 -24px;padding:0 24px;}
.modal.modal-vast-voet .modal-acties{flex:none;position:static;padding:12px 0 0;margin-top:0;}