/* ============================================================
   Aristé — stylesheet
   Tokens en waarden komen 1-op-1 uit de design handoff.
   ============================================================ */

/* ------------------------------------------------------------
   Het logo-font. Alleen voor de wordmark; koppen blijven Prata.
   sagara-logo.woff2 bevat alleen de letters van "Aristé" (14 KB).
   Wil je het font breder gebruiken, wissel dan naar sagara.woff2
   (67 KB, de volledige letterset).
   ------------------------------------------------------------ */
@font-face{
  font-family:"Sagara";
  src:url("../fonts/sagara-logo.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Zand */
  --zand:#F2ECE3;
  --zand-licht:#EDE3D9;
  --zand-mid:#E7DBCD;
  --zand-donker:#E1D4C4;
  --lijn-zand:#E0D2C2;
  --rand:#D6C4B1;
  --rand-licht:#C9B7A4;
  /* Bruin */
  --bruin:#3D2E24;
  --bruin-donker:#2E231C;
  --bruin-tekst:#4A3A2D;
  --bruin-zacht:#6B5C4F;
  /* Taupe */
  --taupe:#8C7A69;
  --taupe-licht:#9C8B7B;
  --taupe-lichtst:#A5917C;
  /* Matcha */
  --matcha:#6E7F45;
  --matcha-donker:#5C6B39;
  --matcha-licht:#7E9150;
  --matcha-helder:#97AC63;
  /* Crème */
  --creme:#FFFCF6;
  --creme-warm:#F6EFE4;
  /* Op donker */
  --op-donker-45:rgba(246,239,228,.45);
  --op-donker-50:rgba(246,239,228,.5);
  --op-donker-55:rgba(246,239,228,.55);
  --op-donker-60:rgba(246,239,228,.6);
  --lijn-donker:rgba(246,239,228,.14);
  --rand-donker:rgba(246,239,228,.18);
  /* Feedback */
  --fout:#A8503C;
  /* Prijs (AA-contrast bruin, één kleur voor elke prijs op de kaart) */
  --prijs:#6B5A49;
  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Layout */
  --marge:24px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scrollbar-gutter:stable; }

::selection{ background:var(--zand-donker); color:var(--bruin); }

body{
  margin:0;
  background:var(--zand-licht);
  color:var(--bruin);
  font-family:Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

body.op-donker{ background:var(--bruin-donker); }

img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }

a{ color:var(--bruin); text-decoration:none; }
@media (hover:hover){ a:hover{ color:var(--matcha); } }

:focus-visible{
  outline:2px solid var(--matcha-donker);
  outline-offset:3px;
  border-radius:4px;
}

.serif{ font-family:Prata, Georgia, "Times New Roman", serif; font-weight:400; }
.vloeiend{ text-wrap:pretty; }
.verborgen{ display:none !important; }
[hidden]{ display:none !important; }

/* Screenreader-only */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link */
.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--bruin); color:var(--creme);
  padding:12px 18px; border-radius:0 0 12px 0;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{ left:0; color:var(--creme); }

/* ============================================================
   Scherm-container
   Mobile first op 390px. Boven 480px centreren we op 480px.
   ============================================================ */
.scherm{
  position:relative;
  width:100%;
  max-width:480px;
  margin:0 auto;
  background:var(--zand-licht);
  min-height:100vh;
  min-height:100svh;
  animation:fade .7s ease both;
}
body.op-donker .scherm{ background:var(--bruin-donker); }

@media (min-width:481px){
  body{ background:var(--zand); }
  .scherm{ box-shadow:0 0 90px -40px rgba(61,46,36,.35); }
}

/* ============================================================
   Animaties
   ============================================================ */
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes burns{ from{ transform:scale(1.04) translateY(0); } to{ transform:scale(1.14) translateY(-10px); } }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes draai{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .scherm, .rise{ animation:fade .3s ease both !important; }
}

/* ============================================================
   Gedeelde onderdelen
   ============================================================ */

/* Kopregel (Menukaart, Inloggen, Stempelkaart, Beheer) */
.kopregel{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(22px + env(safe-area-inset-top)) var(--marge) 0;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bruin-zacht);
}
.kopregel a{ color:var(--bruin-zacht); }
.kopregel .terug{ display:inline-flex; align-items:center; min-height:44px; }
body.op-donker .kopregel{ color:var(--op-donker-50); padding-left:26px; padding-right:26px; }
body.op-donker .kopregel a{ color:var(--op-donker-50); }

/* Sectielabel */
.sectielabel{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bruin-zacht);
}

/* Footer */
.voet{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:34px var(--marge) 20px;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bruin-zacht);
}
.voet a{
  color:var(--bruin-zacht);
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:rgba(107,92,79,.45);
  display:inline-flex; align-items:center; padding:14px 0; margin:-14px 0;
}
@media (hover:hover){ .voet a:hover{ text-decoration-color:currentColor; } }
.voet__merk{ font-size:19px; letter-spacing:0; text-transform:none; color:var(--bruin); text-decoration:none; }

.voet-credit{
  text-align:center; margin:0;
  padding:0 var(--marge) 30px;
  padding-bottom:calc(30px + env(safe-area-inset-bottom));
  font-size:10px; letter-spacing:.04em;
  color:var(--bruin-zacht);
}
.voet-credit a{
  color:inherit; text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; text-decoration-color:rgba(107,92,79,.5);
  display:inline-flex; align-items:center; padding:14px 0; margin:-14px 0;
}
@media (hover:hover){ .voet-credit a:hover{ text-decoration-color:currentColor; } }

/* Knoppen */
.knop-primair{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:18px; border:0; border-radius:14px;
  background:var(--matcha); color:var(--creme);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; transition:background .25s ease, transform .18s var(--ease);
}
@media (hover:hover){ .knop-primair:hover{ background:var(--matcha-licht); color:var(--creme); } }
.knop-primair:active{ transform:scale(.985); }
.knop-primair[disabled]{ opacity:.6; cursor:default; }

.knop-rand{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:16px; border-radius:14px;
  border:1px solid var(--rand-donker); background:none;
  color:var(--creme-warm); font-size:13.5px; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .18s var(--ease);
}
@media (hover:hover){ .knop-rand:hover{ background:rgba(246,239,228,.07); color:var(--creme-warm); } }
.knop-rand:active{ transform:scale(.985); }

/* Spinner */
.spinner{
  width:15px; height:15px; border-radius:999px;
  border:2px solid rgba(255,252,246,.35); border-top-color:var(--creme);
  animation:draai .7s linear infinite; display:inline-block; vertical-align:-2px;
}

/* Horizontale scrollzones zonder scrollbar */
.geen-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.geen-scrollbar::-webkit-scrollbar{ display:none; }

/* Hoeveel stempels tegelijk */
.aantalkiezer{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.aantalkiezer button{
  min-height:52px; border-radius:12px; cursor:pointer;
  border:1px solid var(--rand); background:var(--zand-licht);
  color:var(--bruin); font-family:Prata, Georgia, serif; font-size:19px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.aantalkiezer button[aria-pressed="true"]{
  background:var(--matcha); border-color:var(--matcha); color:var(--creme);
}
@media (hover:hover){
  .aantalkiezer button:not([aria-pressed="true"]):hover{ border-color:var(--taupe); }
}

/* Collega's */
.teamrij{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--lijn-zand);
}
.teamrij > div:first-child{ min-width:0; flex:1; }
.teamrij:last-child{ border-bottom:0; }
.teamrij__naam{ font-size:14.5px; color:var(--bruin); }
.teamrij__naam .jij{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--matcha); margin-left:8px;
}
.teamrij__meta{ font-size:11.5px; color:var(--taupe-lichtst); margin-top:2px; word-break:break-all; }
.teamrij__rechts{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none; }
.teamrij select{
  padding:8px 10px; border-radius:10px; border:1px solid var(--rand);
  background:var(--zand-licht); font-family:inherit; font-size:12.5px; color:var(--bruin);
  -webkit-appearance:none; appearance:none;
}
.rolbadge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--zand-donker); color:var(--bruin-zacht);
}
.rolbadge.eigenaar{ background:var(--matcha); color:var(--creme); }
.rolbadge.beheerder{ background:var(--zand-donker); color:var(--matcha-donker); }

.uitnodiglink{
  margin-top:12px; padding:12px 14px; border-radius:12px;
  background:var(--zand-donker); font-size:11.5px; line-height:1.6; color:var(--bruin-zacht);
  word-break:break-all;
}
.uitnodiglink b{ display:block; margin-bottom:4px; font-weight:500; color:var(--bruin); }

/* Duidelijke foutmelding op een donker scherm */
.melding-fout{
  margin:20px 26px 0; padding:15px 17px; border-radius:14px;
  background:rgba(168,80,60,.16); border:1px solid rgba(168,80,60,.45);
  color:#F3C9BE; font-size:13px; line-height:1.65;
}
.melding-fout a{ color:#F3C9BE; border-bottom:1px solid rgba(243,201,190,.5); }

/* Oogje in het wachtwoordveld */
.wachtwoordveld{ position:relative; display:block; }
.wachtwoordveld input{ padding-right:52px !important; }
.oogknop{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:42px; height:42px; padding:0; border:0; border-radius:11px;
  background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:rgba(246,239,228,.5);
  transition:color .2s ease, background .2s ease;
}
@media (hover:hover){ .oogknop:hover{ color:var(--creme-warm); background:rgba(246,239,228,.08); } }
.oogknop:active{ background:rgba(246,239,228,.12); }
.oogknop:focus-visible{ outline:2px solid var(--matcha-helder); outline-offset:-2px; }

/* Op een lichte achtergrond, zoals het installatiescherm */
body:not(.op-donker) .oogknop{ color:var(--taupe); }
@media (hover:hover){
  body:not(.op-donker) .oogknop:hover{ color:var(--bruin); background:var(--zand-mid); }
}

/* Herinnering om het e-mailadres te bevestigen. Zacht van toon: het
   houdt niets tegen, het is alleen handig. */
.bevestigmelding{
  margin:22px var(--marge) 0; padding:16px 18px; border-radius:16px;
  background:var(--zand-donker); color:var(--bruin-zacht);
  font-size:12.5px; line-height:1.65;
}
.bevestigmelding p{ margin:0 0 10px; }
.bevestigmelding button{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--matcha-donker);
  border-bottom:1px solid rgba(92,107,57,.4);
}
.bevestigmelding button[disabled]{ opacity:.5; cursor:default; }

/* Wachtwoord tonen — werkt zowel op het donkere inlogscherm als in
   het lichte beheer, vandaar twee kleurstellingen. */
.ww-veld{ position:relative; display:block; }
.ww-veld input{ padding-right:52px !important; }
.ww-oog{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:40px; height:40px; padding:0; border:0; background:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--op-donker-50); cursor:pointer; border-radius:10px;
  transition:color .2s ease, background .2s ease;
}
@media (hover:hover){ .ww-oog:hover{ color:var(--creme-warm); background:rgba(246,239,228,.08); } }
.ww-oog:active{ background:rgba(246,239,228,.12); }
.ww-oog:focus-visible{ outline:2px solid var(--matcha-helder); outline-offset:-2px; }

/* In het beheer staat hetzelfde veld op een lichte ondergrond */
body[data-pagina="beheer"]:not(.op-donker) .ww-oog{ color:var(--taupe); }
@media (hover:hover){
  body[data-pagina="beheer"]:not(.op-donker) .ww-oog:hover{
    color:var(--bruin); background:var(--zand-mid);
  }
}

/* Ingelogd blijven */
.onthoud{
  display:flex; align-items:center; gap:11px;
  padding:6px 2px 0; cursor:pointer;
  font-size:13px; color:var(--op-donker-60);
}
.onthoud input{
  width:18px; height:18px; flex:none; accent-color:var(--matcha-helder);
  cursor:pointer;
}
@media (hover:hover){ .onthoud:hover{ color:var(--creme-warm); } }

/* Waarschuwing als de demo-modus per ongeluk op een echte site draait */
.demo-waarschuwing{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:var(--fout); color:#FFF6F2;
  font-size:12px; line-height:1.5; text-align:center;
}
.demo-waarschuwing b{ font-weight:500; }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px);
  z-index:80; max-width:calc(100% - 32px);
  padding:14px 20px; border-radius:14px;
  background:var(--bruin); color:var(--creme-warm);
  font-size:13px; line-height:1.5;
  box-shadow:0 18px 40px -18px rgba(61,46,36,.6);
  opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s var(--ease);
}
.toast.zichtbaar{ opacity:1; transform:translate(-50%,0); }
.toast.fout{ background:var(--fout); }

/* In het beheer staat de melding in de vaste onderbalk, boven de
   opslagbalk en de tabbalk. Zo dekt hij nooit iets af. */
.onderbalk > .toast{
  position:static; left:auto; bottom:auto; max-width:none;
  margin:0 16px 10px; transform:translateY(20px);
}
.onderbalk > .toast.zichtbaar{ transform:none; }

/* ============================================================
   1. Home
   ============================================================ */
.hero{
  position:relative; height:520px; overflow:hidden; background:var(--bruin);
}
.hero__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:burns 20s ease-in-out infinite alternate;
}
.hero__waas{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,22,19,.42) 0%, rgba(28,22,19,0) 40%, rgba(28,22,19,.7) 100%);
}
.hero__top{
  position:absolute; top:22px; left:var(--marge); right:var(--marge);
  top:calc(22px + env(safe-area-inset-top));
  display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,252,246,.85);
  animation:fade 1.2s .2s ease both;
}
.hero__logo{
  position:absolute; left:var(--marge); right:var(--marge); bottom:32px;
  display:flex; flex-direction:column; gap:16px;
  animation:rise 1.1s .15s ease both;
}
/* De wordmark. Sagara is optisch iets compacter dan Prata, dus een
   paar pixels groter zodat hij dezelfde ruimte pakt als in het ontwerp. */
.wordmark{
  font-family:"Sagara", Prata, Georgia, "Times New Roman", serif;
  font-weight:400;
  letter-spacing:.005em;
}
.hero__wordmark{ font-size:64px; line-height:1; color:var(--creme); }
.hero__wordmark img{ height:58px; width:auto; }
.status{ display:flex; align-items:center; gap:10px; }
.status__stip{
  width:7px; height:7px; border-radius:999px; flex:none;
  background:var(--matcha-helder);
  box-shadow:0 0 0 5px rgba(151,172,99,.22);
  animation:pulse 2.6s ease-in-out infinite;
}
.status[data-open="nee"] .status__stip{
  background:var(--taupe-lichtst);
  box-shadow:0 0 0 5px rgba(165,145,124,.22);
}
.status__tekst{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,252,246,.9);
}

/* Bruin intro-blok */
.intro{
  position:relative; z-index:2; margin-top:-18px;
  border-radius:20px 20px 0 0; background:var(--bruin);
  padding:27px var(--marge) 36px;
  display:flex; flex-direction:column; gap:30px;
}
.intro__pitch{ margin:0; font-size:24px; line-height:1.4; color:var(--creme-warm); }
.tijden{ display:flex; flex-direction:column; }
.tijden__label{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--op-donker-45); padding-bottom:12px;
}
/* Twee vaste kolommen in plaats van uit elkaar geduwd: de tijden
   vormen zo een nette rechte kolom, ook als de dagnamen verschillen. */
.tijden__rij{
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--lijn-donker);
  font-size:14px; color:var(--op-donker-60);
}
.tijden__rij span:last-child{
  color:var(--op-donker-55); white-space:nowrap;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
  letter-spacing:.02em;
}
/* Vandaag licht de hele regel op, niet alleen het getal */
.tijden__rij.vandaag{ color:var(--creme-warm); }
.tijden__rij.vandaag span:last-child{ color:var(--matcha-helder); }
.tijden__rij.vandaag span:first-child::before{
  content:""; display:inline-block; vertical-align:middle;
  width:5px; height:5px; margin-right:9px; border-radius:999px;
  background:var(--matcha-helder);
}
.tijden__rij:last-child{ border-bottom:0; }
.tijden__melding{
  margin-top:14px; font-size:12.5px; line-height:1.6; color:var(--op-donker-60);
}

.pijl-cirkel{
  width:36px; height:36px; flex:none; border-radius:999px;
  border:1px solid var(--rand);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--bruin-zacht);
}

/* Doorklik naar de kaart — trekt op als een licht paneel over het
   donkere intro-blok erboven, dezelfde -18px/ronde-hoek-truc als
   hero -> intro. var(--creme) is bewust een tikje witter dan de
   zand-tint van de sfeerfoto's eronder, zodat de twee niet in elkaar
   overlopen zoals bij een eerdere versie van deze link. */
.menutegel{
  position:relative; z-index:3; margin-top:-18px;
  border-radius:20px 20px 0 0; background:var(--creme);
  display:flex; align-items:center; gap:16px;
  padding:28px var(--marge) 30px;
  transition:background .25s ease, transform .18s var(--ease);
}
@media (hover:hover){ .menutegel:hover{ background:var(--zand-licht); } }
.menutegel:active{ background:var(--zand-mid); transform:scale(.99); }
.menutegel__fotos{ flex:none; display:flex; }
.menutegel__fotos img{
  width:46px; height:46px; border-radius:999px; object-fit:cover;
  border:2px solid var(--creme); position:relative;
}
.menutegel__fotos img:nth-child(1){ z-index:3; }
.menutegel__fotos img:nth-child(2){ z-index:2; margin-left:-14px; }
.menutegel__fotos img:nth-child(3){ z-index:1; margin-left:-14px; }
.menutegel__tekst{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.menutegel__titel{ font-size:18px; color:var(--bruin); }
.menutegel__sub{ font-size:11.5px; color:var(--bruin-zacht); }

/* Sfeerfoto's */
.sfeer{
  display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--zand-licht);
}
.sfeer__cel{ aspect-ratio:3 / 4; overflow:hidden; }
.sfeer__cel img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
@media (hover:hover){ .sfeer__cel:hover img{ transform:scale(1.06); } }

/* Socials */
.socials{ padding:40px var(--marge) 0; display:flex; flex-direction:column; gap:14px; }
.socials__kop{ display:flex; justify-content:space-between; align-items:baseline; }
.socials__handle{ font-size:11px; color:var(--taupe-lichtst); }
.socials__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tegel{
  position:relative; display:block; aspect-ratio:1 / 1;
  border-radius:20px; overflow:hidden;
}
.tegel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease);
}
.tegel__kleur{
  position:absolute; inset:0; background:rgba(61,46,36,.55);
  transition:background .5s ease;
}
@media (hover:hover){
  .tegel:hover img{ transform:scale(1.08); }
  .tegel:hover .tegel__kleur{ background:rgba(110,127,69,.62); }
}
.tegel:active .tegel__kleur{ background:rgba(110,127,69,.62); }
.tegel__icoon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.tegel__label{
  position:absolute; left:0; right:0; bottom:14px; text-align:center;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,252,246,.85);
}

/* Kaart + adres */
.locatie{ padding:40px var(--marge) 0; }
.locatie__kaart{
  height:250px; overflow:hidden; border-radius:24px;
  border:1px solid var(--rand); background:var(--zand-mid);
}
.locatie__kaart iframe{ width:100%; height:100%; border:0; filter:saturate(.5) contrast(.95); }
.locatie__onder{
  padding:20px 2px 0; display:flex; justify-content:space-between;
  align-items:flex-end; gap:16px;
}
.locatie__adres{ font-size:13px; line-height:1.6; color:var(--bruin-tekst); }
.route{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--rand-licht); padding-bottom:3px; white-space:nowrap;
}

/* Aristé Card-knop */
.cardknop-wrap{ padding:38px var(--marge) 0; }
.cardknop{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 22px; border-radius:16px;
  background:var(--matcha); color:var(--creme);
  transition:background .25s ease, transform .18s var(--ease);
}
@media (hover:hover){ .cardknop:hover{ background:var(--matcha-donker); color:var(--creme); } }
.cardknop:active{ transform:scale(.99); background:var(--matcha-donker); }
.cardknop__tekst{ display:flex; flex-direction:column; gap:3px; }
.cardknop__titel{ font-size:19px; }
.cardknop__sub{ font-size:11.5px; color:rgba(255,252,246,.75); }
.cardknop__pijl{ font-size:18px; }

/* ============================================================
   2. Menukaart
   ============================================================ */
.titelblok{ padding:79px var(--marge) 44px; display:flex; flex-direction:column; }
.titelblok__titel{ font-size:52px; line-height:1; color:var(--bruin); margin:0; animation:rise .9s ease both; }
.titelblok__intro{
  font-size:16px; line-height:1.55; color:var(--bruin-tekst); max-width:34ch; margin:34px 0 0;
}

.chips{
  overflow-x:auto; padding:14px var(--marge) 22px; margin-top:-14px;
  scroll-padding-inline:52px;
  -webkit-mask-image:none; mask-image:none;
}
/* De -14px hierboven compenseert ruimte vóór de sectie-chips (rij 1). Rij 2
   (de smaakfilter) heeft niets dergelijks vóór zich — zonder reset oogt de
   balk onderaan-zwaar (14 / 22 / 22 i.p.v. een gelijkmatige 22 / 22 / 22). */
.chips-sticky__filters-wrap .chips{ margin-top:0; padding-top:0; }
/* Alleen bijstellen zodra rij 2 er ook is — in de rest van de kaart (één
   rij) blijft de oorspronkelijk afgestemde 14px boven de sectie-chips staan.
   Getransitioned in de pas met de max-height hierboven, anders springt deze
   8px instant terwijl rij 2 nog aan het inschuiven is. */
[data-chips-wrap]{ transition:padding-top .25s var(--ease); }
.chips-sticky--met-filters [data-chips-wrap]{ padding-top:22px; }
.chips-sticky{
  position:sticky; top:env(safe-area-inset-top); z-index:5; background:var(--zand-licht);
  border-bottom:1px solid var(--lijn-zand);
}
/* De smaakfilter van Signatures leeft in dezelfde sticky balk als de
   sectienavigatie, maar is alleen ingeklapt zichtbaar terwijl je door
   Signatures scrolt (zetActief() in menu.js zet de modifier-klasse) —
   zo blijft filteren binnen handbereik in het grootste deel van de
   pagina, zonder dat de balk overal elders extra ruimte kost. */
.chips-sticky__filters-wrap{
  max-height:0; overflow:hidden;
  transition:max-height .25s var(--ease);
}
.chips-sticky--met-filters .chips-sticky__filters-wrap{ max-height:120px; }
/* Dekt de eventuele notch-strook boven de sticky balk af zodat er nooit
   pagina-inhoud onder de systeembalk door kan scrollen. Hoogte 0 op elk
   toestel zonder inset, dus onzichtbaar/onschadelijk overal elders. */
body[data-pagina="kaart"]::before{
  content:""; position:fixed; top:0; left:0; right:0;
  height:env(safe-area-inset-top);
  background:var(--zand-licht); z-index:6; pointer-events:none;
}
.chips.kan-links{
  -webkit-mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.4) 16px, black 44px);
  mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.4) 16px, black 44px);
}
.chips.kan-rechts{
  -webkit-mask-image:linear-gradient(to left, transparent, rgba(0,0,0,.4) 16px, black 44px);
  mask-image:linear-gradient(to left, transparent, rgba(0,0,0,.4) 16px, black 44px);
}
.chips.kan-links.kan-rechts{
  -webkit-mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.4) 16px, black 44px, black calc(100% - 44px), rgba(0,0,0,.4) calc(100% - 16px), transparent);
  mask-image:linear-gradient(to right, transparent, rgba(0,0,0,.4) 16px, black 44px, black calc(100% - 44px), rgba(0,0,0,.4) calc(100% - 16px), transparent);
}
.chips__rij{ display:flex; gap:8px; width:max-content; }
.chip{
  padding:12px 16px; border-radius:999px; border:1px solid var(--taupe);
  background:none; color:var(--bruin-zacht);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap; cursor:pointer; user-select:none;
  min-height:44px; display:inline-flex; align-items:center;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .12s var(--ease);
}
.chip[aria-selected="true"]{ background:var(--bruin); color:var(--creme-warm); border-color:var(--bruin); }
@media (hover:hover){ .chip:not([aria-selected="true"]):hover{ border-color:var(--bruin-zacht); } }
.chip:active{ background:var(--zand-mid); transform:scale(.96); }
.chip[aria-selected="true"]:active{ background:var(--bruin-donker); }

/* Zelfde vormtaal als .chip (pil, bruin actief) maar kleiner geschaald —
   dit is de ondergeschikte smaakfilter binnen Signatures, geen gelijkwaardig
   tweede navigatiesysteem naast de sectie-chips erboven. */
.chip--filter{
  padding:9px 14px; border-radius:999px; border:1px solid var(--taupe);
  background:none; color:var(--bruin-zacht);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  min-height:38px;
}
@media (hover:hover){
  .chip--filter:not([aria-pressed="true"]):hover{ border-color:var(--bruin-zacht); }
}
.chip--filter:active{ background:var(--zand-mid); transform:scale(.96); }
.chip--filter[aria-pressed="true"]{ background:var(--bruin); color:var(--creme-warm); border-color:var(--bruin); }
.chip--filter[aria-pressed="true"]:active{ background:var(--bruin-donker); }

/* Signatures: filterbaar tegelrooster i.p.v. horizontale swipe-rij
   (de swipe-rij versplinterde toen er 20+ smaken op stonden). Zelfde
   2-koloms grid-truc als .sfeer op de homepage. */
.rooster{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 var(--marge); }
.rooster__groep{
  grid-column:1 / -1; display:flex; align-items:center; gap:10px;
  font-family:Prata, Georgia, "Times New Roman", serif;
  font-size:15px; font-weight:400; color:var(--bruin-zacht);
  margin:6px 0 -2px;
}
.rooster__groep::after{ content:""; flex:1; height:1px; margin-bottom:3px; background:var(--lijn-zand); }
.rooster__groep:first-child{ margin-top:0; }
.kaarttegel{
  position:relative; border-radius:16px; background:var(--creme); padding:8px;
  border:0; text-align:left; font:inherit; color:inherit;
  display:flex; flex-direction:column; width:100%; height:100%;
  transition:transform .12s var(--ease);
}
/* Alleen tegels met een afgeknipte naam of omschrijving zijn tikbaar —
   zie tekenRooster() in menu.js. De rest is puur informatief, en blijft dus
   selecteerbaar (user-select alleen op de tikbare variant, net als cursor). */
.kaarttegel[role="button"]{ cursor:pointer; user-select:none; }
.kaarttegel[role="button"]:active{ transform:scale(.98); }
.kaarttegel__foto{ flex:none; aspect-ratio:900/1031; border-radius:8px; overflow:hidden; background:var(--zand-licht); }
.kaarttegel__foto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1s var(--ease); }
@media (hover:hover){ .kaarttegel[role="button"]:hover .kaarttegel__foto img{ transform:scale(1.05); } }
.kaarttegel__tekst{ flex:1; padding:10px 0 5px; display:flex; flex-direction:column; gap:2px; }
.kaarttegel__naamwrap{ min-height:39px; display:flex; align-items:flex-end; }
.kaarttegel__naam{
  font-size:15px; line-height:1.3; color:var(--bruin);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kaarttegel__prijs{ font-size:14.5px; color:var(--prijs); }
.kaarttegel__desc{
  font-size:12.5px; line-height:1.4; color:var(--bruin-zacht);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Detailkaart: tik op een tegel voor foto + volledige omschrijving,
   zelfde bottom-sheet als de klantdetail-modal in beheer. */
.kaartmodal-scrim{
  position:fixed; inset:0; z-index:150;
  background:rgba(46,35,28,.55);
  display:flex; align-items:flex-end; justify-content:center;
  overscroll-behavior:contain;
}
.kaartmodal-scrim.verborgen{ display:none; }
.kaartmodal{
  width:100%; max-width:480px; max-height:88svh; overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--creme); border-radius:24px 24px 0 0;
  padding:14px var(--marge) calc(26px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:16px;
  animation:rise .3s ease both;
}
.kaartmodal__handle{
  width:64px; height:44px; margin:-12px auto 0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.kaartmodal__handle::after{ content:""; width:40px; height:5px; border-radius:999px; background:var(--taupe); }
.kaartmodal__foto{
  flex:none; align-self:center; width:min(100%, calc(46svh * 900 / 1031)); max-width:100%;
  aspect-ratio:900/1031; max-height:46svh;
  border-radius:16px; overflow:hidden; background:var(--zand-licht);
}
.kaartmodal__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.kaartmodal__kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kaartmodal__naam{ font-size:29px; color:var(--bruin); margin:0; }
.kaartmodal__prijs{ font-size:15px; color:var(--prijs); margin:4px 0 0; }
.kaartmodal__sluit{
  flex:none; width:44px; height:44px; border-radius:999px; border:1px solid var(--lijn-zand);
  background:var(--creme); color:var(--bruin-zacht); font-size:20px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover:hover){ .kaartmodal__sluit:hover{ background:var(--zand-licht); color:var(--bruin); } }
.kaartmodal__sluit:active{ background:var(--zand-mid); }
.kaartmodal__desc{ font-size:13.5px; line-height:1.65; color:var(--bruin-zacht); margin:0; }

#signatures{ padding-top:44px; scroll-margin-top:80px; }
.lijst{ padding:44px var(--marge) 0; display:flex; flex-direction:column; scroll-margin-top:80px; }
.lijst__label{
  margin:0; padding-bottom:22px;
  font-family:Prata, Georgia, "Times New Roman", serif; font-weight:400;
  font-size:17px; letter-spacing:normal; text-transform:none; color:var(--bruin);
}
.lijst__rij{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 0; border-bottom:1px solid var(--lijn-zand);
  font-size:14.5px; color:var(--bruin);
}
.lijst__rechts{ flex:none; display:flex; align-items:center; gap:2px; }
.lijst__prijs{ color:var(--prijs); white-space:nowrap; }
.lijst__rij:last-child{ border-bottom:0; }
.lijst__foto-knop{
  flex:none; width:34px; height:34px; margin-right:2px; padding:0;
  border-radius:999px; border:1px solid var(--taupe); background:var(--creme);
  color:var(--bruin-zacht); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
@media (hover:hover){ .lijst__foto-knop:hover{ background:var(--zand-licht); color:var(--bruin); } }
.lijst__foto-knop:active{ background:var(--zand-mid); }

.notitie{
  margin:24px 0 0;
  border-radius:16px; padding:18px 20px; background:var(--zand-donker);
  font-size:12.5px; line-height:1.6; color:var(--bruin-tekst);
}

/* ============================================================
   3. Inloggen
   ============================================================ */
.inlog{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  background:var(--bruin-donker);
}
.inlog__titelblok{
  padding:64px 26px 0; display:flex; flex-direction:column; gap:12px;
  animation:rise .9s ease both;
}
.inlog__titel{ font-size:44px; line-height:1.05; color:var(--creme-warm); }
.inlog__sub{
  font-size:13.5px; line-height:1.7; color:var(--op-donker-60); max-width:280px;
}
.formulier{ padding:40px 26px 0; display:flex; flex-direction:column; gap:12px; }
.veld{ display:flex; flex-direction:column; gap:7px; }
.veld label{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--op-donker-45);
}
.veld input{
  width:100%; padding:16px 18px; border-radius:14px;
  border:1px solid var(--rand-donker); background:rgba(246,239,228,.06);
  color:var(--creme-warm); font-family:inherit; font-size:15px;
  -webkit-appearance:none; appearance:none;
}
.veld input::placeholder{ color:rgba(246,239,228,.35); }
.veld input:focus{ outline:none; border-color:var(--matcha-helder); }
.veld input:focus-visible{ outline:2px solid var(--matcha-helder); outline-offset:2px; }
.veld.mis input{ border-color:var(--fout); }
.veld__fout{ font-size:12px; color:var(--fout); }
.veld__fout:empty{ display:none; }

.formulier__fout{
  font-size:12.5px; line-height:1.5; color:var(--fout); padding-top:4px;
}
.formulier__fout:empty{ display:none; }
.formulier .knop-primair{ margin-top:8px; }
.link-zacht{
  text-align:center; font-size:12.5px; color:var(--op-donker-50);
  background:none; border:0; cursor:pointer; padding:12px 0;
}
@media (hover:hover){ .link-zacht:hover{ color:var(--creme-warm); } }

.demo-hint{
  margin:14px 0 0; padding:12px 14px; border-radius:12px;
  background:rgba(151,172,99,.1); border:1px solid rgba(151,172,99,.24);
  font-size:11.5px; line-height:1.7; color:var(--op-donker-60); text-align:center;
}
.demo-hint b{ font-weight:500; color:var(--matcha-helder); }

.scheiding{
  padding:30px 26px 0; display:flex; align-items:center; gap:14px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(246,239,228,.35);
}
.scheiding::before, .scheiding::after{
  content:""; flex:1; height:1px; background:var(--lijn-donker);
}
.social-login{ padding:24px 26px 0; display:flex; flex-direction:column; gap:10px; }
.inlog__onder{
  margin-top:auto; padding:40px 26px 34px;
  padding-bottom:calc(34px + env(safe-area-inset-bottom));
  text-align:center; font-size:12.5px; color:var(--op-donker-50);
}
.inlog__onder button{
  background:none; border:0; cursor:pointer; padding:0;
  color:var(--matcha-helder); border-bottom:1px solid rgba(151,172,99,.5);
  font-size:12.5px;
}

/* ============================================================
   4. Stempelkaart
   ============================================================ */
.card-kop{
  padding:40px var(--marge) 26px;
  font-size:34px; line-height:1.1; color:var(--bruin);
  animation:rise .9s ease both;
}
.stempelkaart-wrap{ padding:0 var(--marge); }
.stempelkaart{
  border-radius:22px; background:var(--bruin); padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:22px;
}
.stempelkaart__kop{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.stempelkaart__titel{ font-size:20px; color:var(--creme-warm); }
.stempelkaart__stand{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--op-donker-50);
}
.stempels{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.stempel{
  aspect-ratio:1; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(246,239,228,.3);
}
.stempel.vol{
  background:var(--matcha); border:1px solid var(--matcha);
  font-family:Prata, Georgia, serif; font-size:13px; color:var(--creme);
}
.stempelkaart__voet{ font-size:12.5px; line-height:1.6; color:var(--op-donker-60); }

.scanblok-wrap{ padding:26px var(--marge) 0; }
.scanblok{
  border-radius:22px; background:var(--zand-donker); padding:26px 24px 24px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.scanblok__titel{ font-size:20px; color:var(--bruin); }
.scanblok__sub{ font-size:12px; color:var(--bruin-zacht); text-align:center; }
.scanblok__badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--matcha); color:var(--creme);
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
  padding:6px 14px; border-radius:999px;
}
.scanblok--vol{ background:var(--matcha-helder); box-shadow:0 0 0 2px var(--matcha) inset; }
.scanblok--vol .scanblok__titel{ color:var(--bruin-donker); }
.scanblok--vol .scanblok__sub{ color:var(--bruin); }
.scanblok--vol .qr{ box-shadow:0 0 0 3px var(--matcha); }
.scanblok--vol .scanblok__id{ color:var(--bruin-donker); opacity:.65; }
.qr{
  padding:14px; background:var(--creme); border-radius:18px;
  width:178px; height:178px; display:flex; align-items:center; justify-content:center;
}
.qr svg{ width:150px; height:150px; display:block; }
.scanblok__id{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe-lichtst);
}

/* Voeg toe aan Google Wallet */
.wallet{ padding:16px var(--marge) 0; }
.walletknop{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:15px 18px; border-radius:14px; border:0;
  background:var(--bruin); color:var(--creme-warm);
  font-size:13.5px; cursor:pointer;
  transition:background .25s ease, transform .18s var(--ease);
}
@media (hover:hover){ .walletknop:hover{ background:var(--bruin-donker); color:var(--creme-warm); } }
.walletknop:active{ transform:scale(.99); }
.walletknop[disabled]{ opacity:.6; cursor:default; }
.walletknop svg{ flex:none; }
.wallet__hint{
  margin:10px 2px 0; font-size:11.5px; line-height:1.6; color:var(--taupe-lichtst); text-align:center;
}

/* Bewaren in Google Wallet */
.walletknop{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:2px; padding:15px 18px;
  border:1px solid var(--rand); border-radius:14px;
  background:var(--creme); color:var(--bruin-tekst);
  font-size:12.5px; letter-spacing:.06em; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, transform .18s var(--ease);
}
@media (hover:hover){
  .walletknop:hover{ background:var(--zand-licht); border-color:var(--taupe); color:var(--bruin); }
}
.walletknop:active{ transform:scale(.99); }
.walletknop[disabled]{ opacity:.6; cursor:default; }
.walletknop svg{ flex:none; color:var(--matcha); }

.historie{ padding:34px var(--marge) 0; display:flex; flex-direction:column; gap:10px; }
.historie__rij{
  display:flex; align-items:center; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--lijn-zand);
}
.historie__thumb{
  width:46px; height:46px; border-radius:12px; overflow:hidden; flex:none;
  background:var(--zand-mid);
}
.historie__thumb img{ width:100%; height:100%; object-fit:cover; }
.historie__tekst{ flex:1; display:flex; flex-direction:column; gap:2px; }
.historie__naam{ font-size:14.5px; color:var(--bruin); }
.historie__tijd{ font-size:11.5px; color:var(--taupe-lichtst); }
.leeg{
  font-size:12.5px; line-height:1.6; color:var(--bruin-zacht); padding:6px 0 2px;
}

.afsluiter{ padding:36px var(--marge) 34px; }
.knop-uitgelijnd{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; border-radius:16px; border:1px solid var(--rand);
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--bruin);
  background:none; width:100%; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
@media (hover:hover){
  .knop-uitgelijnd:hover{ background:var(--bruin); color:#F2ECE3; border-color:var(--bruin); }
}
.knop-uitgelijnd:active{ background:var(--bruin); color:#F2ECE3; border-color:var(--bruin); }

/* ============================================================
   Landingspagina "Maak een kaart" (/kaart) — voor social/QR
   Hero hergebruikt .hero/.hero__foto/.hero__waas/.hero__top 1-op-1
   van de homepage; alleen de koptekst-overlay is hier eigen.
   ============================================================ */
.kaartlanding__herokop{
  position:absolute; left:var(--marge); right:var(--marge); bottom:32px;
  animation:rise 1.1s .15s ease both;
}
.kaartlanding__eyebrow{
  display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,252,246,.7); margin-bottom:10px;
}
.kaartlanding__titel{ font-size:38px; line-height:1.08; color:var(--creme); }

.kaartlanding{
  padding:30px var(--marge) 40px;
  display:flex; flex-direction:column; align-items:center; gap:28px;
}
.kaartlanding .stempelkaart{ width:100%; max-width:340px; animation:rise .8s ease both; }
.kaartlanding .stempels{ grid-template-columns:repeat(5,1fr); }

.kaartlanding__voordelen{
  display:flex; flex-direction:column; gap:20px;
  width:100%; max-width:340px;
}
.kaartlanding__voordeel{ display:flex; gap:14px; align-items:flex-start; }
.kaartlanding__voordeel-icoon{
  flex:none; width:34px; height:34px; margin-top:1px; border-radius:999px;
  background:var(--zand-donker); color:var(--bruin);
  display:flex; align-items:center; justify-content:center;
}
.kaartlanding__voordeel-icoon--nadruk{ background:var(--matcha); color:var(--creme); }
.kaartlanding__voordeel-titel{ margin:0 0 3px; font-size:14px; color:var(--bruin); text-align:left; }
.kaartlanding__voordeel-tekst{ margin:0; font-size:12.5px; line-height:1.55; color:var(--taupe-lichtst); text-align:left; }

.kaartlanding__cta{ width:100%; max-width:340px; text-decoration:none; }
.kaartlanding__login{
  font-size:12.5px; color:var(--taupe-lichtst); text-decoration:none;
}
@media (hover:hover){ .kaartlanding__login:hover{ color:var(--bruin-zacht); } }

/* Beloning klaar */
.beloning{
  margin:26px var(--marge) 0; padding:20px 22px; border-radius:16px;
  background:var(--matcha); color:var(--creme);
  font-size:13.5px; line-height:1.6;
  display:flex; flex-direction:column; gap:6px;
}
.beloning__titel{ font-family:Prata, Georgia, serif; font-size:17px; }
.beloning__tekst{ opacity:.85; font-size:13px; }

/* ============================================================
   Installatiehint (PWA)
   ============================================================ */
.installhint{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:70;
  max-width:448px; margin:0 auto;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:16px;
  background:var(--bruin); color:var(--creme-warm);
  box-shadow:0 24px 50px -24px rgba(61,46,36,.7);
  animation:rise .5s ease both;
}
.installhint__tekst{ flex:1; font-size:12.5px; line-height:1.5; }
.installhint__tekst b{ font-family:Prata, Georgia, serif; font-weight:400; font-size:14px; display:block; margin-bottom:2px; }
.installhint__knop{
  flex:none; padding:10px 16px; border-radius:999px; border:0;
  background:var(--matcha); color:var(--creme);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
}
.installhint__dicht{
  flex:none; background:none; border:0; color:var(--op-donker-50);
  font-size:18px; line-height:1; cursor:pointer; padding:6px;
}

/* ============================================================
   Beheer — de app voor Aristé zelf
   Zelfde palet, maar dichter op elkaar en met een tabbalk onderin.
   ============================================================ */

body[data-pagina="beheer"]{ background:var(--zand); }
.beheer{
  max-width:560px; margin:0 auto; background:var(--zand-licht);
  overflow-x:clip;
  min-height:100vh; min-height:100svh;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
}
@media (min-width:561px){ .beheer{ box-shadow:0 0 90px -40px rgba(61,46,36,.35); } }

.beheer__balk{
  position:sticky; top:0; z-index:20;
  background:var(--bruin); color:var(--creme-warm);
  padding:calc(16px + env(safe-area-inset-top)) 22px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.beheer__titel{ font-family:Prata, Georgia, serif; font-size:19px; }
.beheer__wie{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--op-donker-50);
  background:none; border:0; cursor:pointer; padding:8px 0;
}

.paneel{ padding:26px 22px 0; display:none; animation:fade .35s ease both; }
.paneel.aan{ display:block; }
.paneel__kop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; }
.paneel__titel{ font-family:Prata, Georgia, serif; font-size:26px; color:var(--bruin); line-height:1.2; }
.paneel__uitleg{
  font-size:12.5px; line-height:1.65; color:var(--bruin-zacht); margin:8px 0 22px; max-width:44ch;
}

/* Tabbalk */
.tabbalk{
  position:relative; z-index:30;
  /* Automatisch verdelen: een medewerker ziet minder tabs dan de eigenaar */
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  background:var(--creme); border-top:1px solid var(--lijn-zand);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbalk button{
  background:none; border:0; cursor:pointer;
  padding:11px 4px 12px; min-height:60px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe-lichtst);
  transition:color .2s ease;
}
.tabbalk button svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.tabbalk button[aria-selected="true"]{ color:var(--bruin); }
.tabbalk button[aria-selected="true"] svg{ stroke:var(--matcha); }

/* Blokken en velden */
.blok{
  background:var(--creme); border:1px solid var(--lijn-zand); border-radius:18px;
  padding:18px; margin-bottom:14px;
}
.blok__kop{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:14px; flex-wrap:wrap;
}

/* Kop van een menucategorie: naam op een eigen regel, knoppen eronder.
   Naast elkaar liep "Weg" van het scherm af, en dan werd de hele pagina
   breder dan de telefoon. */
.cat-kop{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.cat-kop input{ flex:1 1 100%; min-width:0; }
.cat-kop .mini{ flex:0 0 auto; }
.cat-kop .mini.weg{ margin-left:auto; }
.blok__titel{ font-family:Prata, Georgia, serif; font-size:17px; color:var(--bruin); }

.invoer{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.invoer:last-child{ margin-bottom:0; }
.invoer > label{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--taupe);
}
.invoer input, .invoer textarea, .invoer select{
  width:100%; padding:13px 14px; border-radius:12px;
  border:1px solid var(--rand); background:var(--zand-licht);
  color:var(--bruin); font-family:inherit; font-size:14.5px;
  -webkit-appearance:none; appearance:none;
}
.invoer textarea{ min-height:80px; resize:vertical; line-height:1.6; font-size:14px; }
.invoer input:focus, .invoer textarea:focus, .invoer select:focus{
  outline:none; border-color:var(--matcha-helder); background:var(--creme);
}
.invoer__hint{ font-size:11.5px; line-height:1.5; color:var(--taupe-lichtst); }

.rij2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rij-item{
  display:grid; grid-template-columns:1fr 84px auto; gap:8px;
  align-items:center; margin-bottom:8px;
}
.rij-item > *{ min-width:0; }
.rij-item input{
  padding:11px 12px; border-radius:10px; border:1px solid var(--rand);
  background:var(--zand-licht); font-family:inherit; font-size:14px; color:var(--bruin); width:100%;
  -webkit-appearance:none; appearance:none;
}
.rij-item input:focus{ outline:none; border-color:var(--matcha-helder); background:var(--creme); }

.mini{
  border:1px solid var(--rand); background:var(--creme); color:var(--bruin-zacht);
  border-radius:10px; min-width:38px; min-height:38px; padding:0 10px;
  font-size:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
@media (hover:hover){ .mini:hover{ background:var(--zand-mid); border-color:var(--taupe); } }
.mini.weg{ color:var(--fout); border-color:rgba(168,80,60,.35); }
.mini.vol{ background:var(--matcha); border-color:var(--matcha); color:var(--creme); }

.knoprij{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* Dag-rijen openingstijden */
/* Dagrij. Op een telefoon staat de dagnaam boven de tijden: naast elkaar
   past het niet, en omdat "Donderdag" langer is dan "Vrijdag" begonnen de
   invoervelden op elke regel op een andere plek. Nu liggen ze recht
   onder elkaar. */
.dagrij{
  display:grid; grid-template-columns:1fr; gap:8px;
  padding:13px 0; border-bottom:1px solid var(--lijn-zand);
}
.dagrij:last-child{ border-bottom:0; }
.dagrij__naam{ font-size:13.5px; color:var(--bruin-zacht); }
.dagrij__tijden{
  display:grid; grid-template-columns:1fr auto 1fr auto;
  align-items:center; gap:8px;
}
.dagrij__tijden input{
  width:100%; min-width:0;
  padding:10px 8px; border-radius:10px; border:1px solid var(--rand);
  background:var(--zand-licht); font-family:inherit; font-size:14px; color:var(--bruin);
  text-align:center; -webkit-appearance:none; appearance:none;
}

/* Vanaf een wat breder scherm past de dagnaam er weer naast */
@media (min-width:430px){
  .dagrij{ grid-template-columns:96px 1fr; gap:12px; align-items:center; }
  .dagrij__naam{ font-size:14px; color:var(--bruin); }
}
.dagrij__tijden input:disabled{ opacity:.4; }
.dagrij__tijden span{ color:var(--taupe-lichtst); font-size:12px; }
.schakel{
  display:inline-flex; align-items:center; gap:7px; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); cursor:pointer;
  white-space:nowrap;
}
.schakel input{ width:16px; height:16px; accent-color:var(--matcha); }

/* Foto-beheer */
.fotorij{
  display:grid; grid-template-columns:74px 1fr; gap:14px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--lijn-zand);
}
.fotorij:last-child{ border-bottom:0; }
.fotorij__beeld{
  width:74px; height:74px; border-radius:12px; overflow:hidden;
  background:var(--zand-mid); border:1px solid var(--rand);
}
.fotorij__beeld img{ width:100%; height:100%; object-fit:cover; }
.fotorij__naam{ font-size:14px; color:var(--bruin); margin-bottom:3px; }
.fotorij__meta{ font-size:11.5px; color:var(--taupe-lichtst); margin-bottom:8px; }

/* Opslagbalk */
/* Onderbalk: opslagbalk en tabbalk in één vaste laag. Zolang ze los van
   elkaar zweefden kon de een de ander afdekken op schermen met een
   andere hoogte; nu staan ze gestapeld en kan dat niet meer. */
.onderbalk{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:560px; margin:0 auto;
  pointer-events:none;
}
.onderbalk > *{ pointer-events:auto; }

.opslagbalk{
  margin:0 16px 10px;
  display:flex; align-items:center; gap:12px;
  padding:12px 12px 12px 18px; border-radius:16px;
  background:var(--bruin); color:var(--creme-warm);
  box-shadow:0 22px 44px -22px rgba(61,46,36,.7);
  transform:translateY(calc(100% + 76px)); opacity:0;
  transition:transform .35s var(--ease), opacity .25s ease;
  pointer-events:none;
}
.opslagbalk.aan{ transform:none; opacity:1; pointer-events:auto; }

/* Zolang de opslagbalk er staat, houdt de pagina extra ruimte vrij */
.beheer.met-opslagbalk{ padding-bottom:calc(160px + env(safe-area-inset-bottom)); }
.opslagbalk__tekst{ flex:1; font-size:12.5px; line-height:1.4; }
.opslagbalk button{
  border:0; border-radius:999px; padding:11px 18px; cursor:pointer;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.opslagbalk .bewaar{ background:var(--matcha); color:var(--creme); }
.opslagbalk .terugdraai{ background:none; color:var(--op-donker-50); padding:11px 4px; }

/* Scanner */
.scanner{
  position:relative; width:100%; aspect-ratio:1; border-radius:22px; overflow:hidden;
  background:var(--bruin-donker); display:flex; align-items:center; justify-content:center;
}
.scanner video{ width:100%; height:100%; object-fit:cover; }
.scanner__raam{
  position:absolute; inset:16%; border-radius:18px;
  box-shadow:0 0 0 100vmax rgba(46,35,28,.45);
  border:2px solid rgba(255,252,246,.75);
}
.scanner__uit{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; padding:28px; text-align:center;
  color:var(--op-donker-60); font-size:13px; line-height:1.6;
}
.scanner__uit .knop-primair{ width:auto; padding:15px 26px; }

.treffer{
  margin-top:16px; padding:22px; border-radius:20px;
  background:var(--bruin); color:var(--creme-warm);
  animation:rise .4s ease both;
}
.treffer.goed{ background:var(--matcha); color:var(--creme); }
.treffer.mis{ background:var(--fout); color:var(--creme); }
.treffer__naam{ font-family:Prata, Georgia, serif; font-size:26px; line-height:1.15; margin-bottom:6px; }
.treffer__meta{ font-size:12.5px; opacity:.8; }
.treffer__stempels{ display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin:18px 0 0; }
.treffer__stempels .stempel{ border-color:rgba(255,252,246,.4); }
.treffer__stempels .stempel.vol{ background:rgba(255,252,246,.92); color:var(--matcha); border-color:transparent; }
.treffer .knoprij .mini{ background:rgba(255,252,246,.12); border-color:rgba(255,252,246,.3); color:var(--creme); }

/* Statistiektegels (Kaarten-tabblad) */
.stattegels{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px;
}
.stattegel{
  background:var(--creme); border:1px solid var(--lijn-zand); border-radius:16px;
  padding:14px 16px; display:flex; flex-direction:column; gap:4px;
}
.stattegel__waarde{ font-family:Prata, Georgia, serif; font-size:24px; color:var(--bruin); line-height:1; }
.stattegel__label{ font-size:11px; color:var(--taupe-lichtst); letter-spacing:.02em; }
.stattegel--nadruk{ background:var(--matcha); border-color:var(--matcha); }
.stattegel--nadruk .stattegel__waarde,
.stattegel--nadruk .stattegel__label{ color:var(--creme); }
@media (min-width:520px){
  .stattegels{ grid-template-columns:repeat(5,1fr); }
}

/* Klantenlijst */
.klantrij{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--lijn-zand);
}
.klantrij:last-child{ border-bottom:0; }
.klantrij__naam{ font-size:14.5px; color:var(--bruin); }
.klantrij__meta{ font-size:11.5px; color:var(--taupe-lichtst); margin-top:2px; }
.klantrij__stand{
  font-size:12px; letter-spacing:.1em; color:var(--matcha); white-space:nowrap;
}
.klantrij__rechts{
  display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex:none;
}
.klantrij > div:first-child{ min-width:0; flex:1; }
.klantrij--klikbaar{ cursor:pointer; border-radius:12px; margin:0 -8px; padding-left:8px; padding-right:8px; }
.klantrij--klikbaar:hover, .klantrij--klikbaar:focus-visible{ background:var(--zand-donker); outline:none; }

/* Klantdetail: statistieken en geschiedenis */
.klantmodal-scrim{
  position:fixed; inset:0; z-index:150;
  background:rgba(46,35,28,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.klantmodal-scrim.verborgen{ display:none; }
.klantmodal{
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  background:var(--creme); border-radius:24px 24px 0 0;
  padding:26px var(--marge) calc(26px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:20px;
  animation:rise .3s ease both;
}
.klantmodal__kop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.klantmodal__naam{ font-size:21px; color:var(--bruin); }
.klantmodal__sub{ font-size:12px; color:var(--taupe-lichtst); margin-top:4px; }
.klantmodal__sluit{
  flex:none; width:34px; height:34px; border-radius:999px; border:1px solid var(--lijn-zand);
  background:var(--creme); color:var(--bruin-zacht); font-size:20px; line-height:1; cursor:pointer;
}
.klantmodal__stand{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.klantmodal__stand .stempels{ grid-template-columns:repeat(10,1fr); gap:6px; width:100%; }
.klantmodal__stand .stempel{ border-color:var(--rand); }
.klantmodal__stand .stempel.vol{ background:var(--matcha); border-color:var(--matcha); }

.klanttijdlijn{ display:flex; flex-direction:column; gap:2px; }
.tijdlijnrij{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--lijn-zand);
}
.tijdlijnrij:last-child{ border-bottom:0; }
.tijdlijnrij__icoon{
  flex:none; width:28px; height:28px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--zand-donker); color:var(--bruin-zacht); margin-top:1px;
}
.tijdlijnrij__icoon--beloning{ background:var(--matcha); color:var(--creme); }
.tijdlijnrij__tekst{ font-size:13.5px; color:var(--bruin); }
.tijdlijnrij__meta{ font-size:11.5px; color:var(--taupe-lichtst); margin-top:2px; }

.melding{
  padding:14px 16px; border-radius:14px; font-size:12.5px; line-height:1.6;
  background:var(--zand-donker); color:var(--bruin-zacht); margin-bottom:16px;
}
.melding.let-op{ background:rgba(168,80,60,.1); color:#7d3c2c; }

/* Inlogscherm van het beheer hergebruikt .inlog */
body[data-pagina="beheer"].op-donker{ background:var(--bruin-donker); }
body[data-pagina="beheer"].op-donker .beheer{ background:transparent; box-shadow:none; padding-bottom:0; }

/* ============================================================
   Responsive — boven 900px
   ============================================================ */
@media (min-width:901px){
  .scherm{ max-width:560px; }
  .hero{ height:min(70vh,640px); }
  .kaartmodal{ max-width:560px; }
}