/* =========================================================
   Vlaerdingers - ontwerp "Prikbord"

   Kleur komt uit de Vlaardingse vlag: rood, geel, blauw. Die drie zitten in
   vlakken, randen en chips, nooit in de lopende tekst. Daardoor mag het
   knallen zonder dat het onleesbaar wordt voor wie wat minder scherp ziet.

   Rolverdeling van de kleuren, en daar wijken we niet van af:
     blauw  doen        knoppen, links, actieve navigatie
     rood   let op      nieuw, waarschuwingen, tellers
     geel   markeren    labels en highlights, nooit met witte tekst erop
     groen  gelukt      bevestigingen

   Vormsysteem: kaarten 14px | bediening 10px | chips rond | labels 6px
   Basistekst 16px.
   ========================================================= */
:root{
  --paper:#F7F4EC; --surface:#FFFFFF; --surface-2:#EFEADC; --surface-3:#FBF9F3;
  --ink:#17212E; --ink-muted:#5C6675; --line:#E2DCCD; --line-2:#EDE8DB;

  --rood:#D42A2A; --rood-diep:#A81F21; --rood-wash:#FBE9E7;
  --geel:#F2C230; --geel-tekst:#8A6206; --geel-wash:#FDF3D8;
  --blauw:#1B4C9B; --blauw-diep:#14396F; --blauw-wash:#E7EEF9;
  --groen:#1F7A4C; --groen-wash:#E2F1E8;

  --op-blauw:#FFFFFF; --op-rood:#FFFFFF; --op-geel:#3A2A00;

  --r-kaart:14px; --r-knop:10px; --r-label:6px;
  --schaduw:0 1px 2px rgba(23,33,46,.06), 0 3px 10px rgba(23,33,46,.07);
  --schaduw-op:0 3px 8px rgba(23,33,46,.10), 0 12px 32px rgba(23,33,46,.14);
  --fs:1;
}
/* Donkere modus staat uit.
   De tokens hierboven gelden altijd. Eerder schakelde het stylesheet bij
   prefers-color-scheme mee, maar dan draaide --ink om van donker naar licht,
   en kreeg het merkpaneel op de inlogpagina een lichte achtergrond met lichte
   tekst erop. Zetten we hem weer aan, dan moeten vlakken die bewust donker
   zijn een eigen token krijgen in plaats van --ink. */

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:Figtree,system-ui,-apple-system,sans-serif;
  font-size:calc(16px * var(--fs)); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* Plakvoet: de inhoud groeit, de voettekst blijft onderaan. */
  min-height:100dvh; display:flex; flex-direction:column;
}
/* Het hoofdblok groeit zodat de voettekst naar beneden wordt geduwd. */
.wrap, .inlogscherm{flex:1 0 auto}
.sitevoet{flex:0 0 auto}
h1,h2,.num,.tegel b,.statgetal{font-family:Archivo,system-ui,sans-serif;font-variant-numeric:tabular-nums;margin:0}
h1{font-size:calc(29px * var(--fs));font-weight:800;font-stretch:110%;letter-spacing:-.024em;line-height:1.08}
h2{font-size:calc(17px * var(--fs));font-weight:700;font-stretch:106%;letter-spacing:-.01em;line-height:1.2}
h3{font-size:calc(17.5px * var(--fs));font-weight:700;letter-spacing:-.012em;line-height:1.3;margin:0}
p{margin:0 0 10px}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blauw);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;z-index:60;background:var(--surface);padding:9px 13px;border-radius:var(--r-knop)}
.noscrollbar{scrollbar-width:none;-ms-overflow-style:none}
.noscrollbar::-webkit-scrollbar{width:0;height:0;display:none}
.grijs{color:var(--ink-muted)}
.klein{font-size:calc(13px * var(--fs))}

/* ---------- kopbalk met de vlag eronder ---------- */
.top{background:var(--surface);position:sticky;top:0;z-index:40}
.top::after{
  content:"";display:block;height:4px;
  background:linear-gradient(to right,
    var(--rood) 0 33.34%, var(--geel) 33.34% 66.67%, var(--blauw) 66.67% 100%);
}
.topin{max-width:1260px;margin:0 auto;display:flex;align-items:center;gap:16px;height:68px;padding:0 20px}
.merk{display:flex;align-items:center;flex:none;text-decoration:none}
.merk img{height:42px;width:auto;display:block}
.hoofdnav{display:flex;gap:3px;margin-left:6px}
.hoofdnav a{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:calc(14.5px * var(--fs));white-space:nowrap;color:var(--ink-muted)}
.hoofdnav a:hover{background:var(--surface-2);color:var(--ink)}
.hoofdnav a[aria-current="page"]{background:var(--blauw);color:var(--op-blauw)}
.toprechts{margin-left:auto;display:flex;align-items:center;gap:6px}
.wie{font-size:calc(14px * var(--fs));font-weight:600;color:var(--ink-muted);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.profielknop{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-muted);padding:3px 11px 3px 3px;border-radius:999px;transition:background .13s ease,color .13s ease}
.profielknop:hover{background:var(--surface-2);color:var(--ink)}
.profielknop[aria-current="page"]{background:var(--blauw);color:var(--op-blauw)}
.profielavatar{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--blauw);color:#fff;font-family:Archivo,sans-serif;font-weight:800;font-size:calc(13px * var(--fs))}
.profielknop[aria-current="page"] .profielavatar{background:#fff;color:var(--blauw)}
.profielnaam{font-size:calc(14px * var(--fs));font-weight:600;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.iconknop{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:0;background:transparent;color:var(--ink-muted);cursor:pointer}
.iconknop:hover{background:var(--surface-2);color:var(--ink)}
.iconknop:active{transform:translateY(1px)}
.bericht-icon{position:relative;text-decoration:none}
.chatbolletje{position:absolute;top:2px;right:1px;min-width:17px;height:17px;border-radius:9px;background:var(--rood);color:#fff;font-family:Archivo,sans-serif;font-size:calc(10.5px * var(--fs));font-weight:800;display:grid;place-items:center;padding:0 4px;border:2px solid var(--surface)}

/* ---------- chatdropdown (venster onder de chatballon) ---------- */
.chatdropdown{position:fixed;top:62px;right:16px;z-index:47;width:372px;max-width:calc(100vw - 24px);
  max-height:min(72vh,600px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);
  box-shadow:var(--schaduw-op);overflow:hidden;display:flex;flex-direction:column}
.chatdropdown[hidden]{display:none}
.cdkop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line-2);flex:none}
.cdkop b{font-family:Archivo,sans-serif;font-weight:800;font-size:calc(15px * var(--fs))}
.cdalle{color:var(--blauw);font-weight:700;font-size:calc(13px * var(--fs));text-decoration:none}
.cdalle:hover{text-decoration:underline;text-underline-offset:2px}
.cdlijst{overflow-y:auto}
.cdlijst .gesprekrij{padding:11px 14px}
.cdleeg{padding:22px 16px;text-align:center;color:var(--ink-muted);font-size:calc(13.5px * var(--fs));margin:0}
/* Als er een gesprek open staat in het venster: kop, berichten, invoerbalk. */
.chatdropdown.toont-gesprek .gesprekkop .terug{display:grid}
.chatdropdown .berichten{max-height:none}

.uitlog{display:flex;margin:0}

/* ---------- pagina ---------- */
.wrap{width:100%;max-width:1260px;margin:0 auto;padding:22px 20px 110px}
.kolommen{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}

/* ---------- welkomstblok ---------- */
.welkom{
  background:linear-gradient(180deg,#FFFFFF 0%, var(--surface-3) 100%);
  border-radius:var(--r-kaart);box-shadow:var(--schaduw);
  padding:18px 16px;margin-bottom:16px;position:relative;overflow:hidden;
  border:1px solid var(--line);
}
.welkom::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;z-index:1;
  background:linear-gradient(to bottom,
    var(--rood) 0 33.34%, var(--geel) 33.34% 66.67%, var(--blauw) 66.67% 100%);
}
/* Zachte, warme gloed rechtsboven — geeft wat gezelligheid zonder los plaatje. */
.welkom::after{
  content:"";position:absolute;right:-40px;top:-50px;width:200px;height:200px;pointer-events:none;
  background:radial-gradient(circle at center, var(--geel-wash) 0, transparent 70%);opacity:.7;
}
.welkom .binnen{position:relative;z-index:1}
/* De tekst begint even ver van de rand als de kaarten eronder (16px), zodat
   het welkomstblok links netjes uitlijnt met de rest van de pagina. */
.welkom .binnen{padding-left:0}
.welkom p{margin:4px 0 0;color:var(--ink-muted);font-size:calc(14.5px * var(--fs))}

/* ---------- statistiektegels ---------- */
.tegels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.tegel{
  border-radius:var(--r-kaart);padding:14px 15px;text-decoration:none;
  display:flex;flex-direction:column;gap:2px;min-height:92px;
  box-shadow:var(--schaduw);transition:transform .14s cubic-bezier(.16,1,.3,1), box-shadow .14s ease;
}
.tegel:hover{transform:translateY(-3px);box-shadow:var(--schaduw-op)}
.tegel:active{transform:translateY(0)}
.tegel b{font-size:calc(30px * var(--fs));font-weight:800;line-height:1}
.tegel span{font-size:calc(13.5px * var(--fs));font-weight:600;line-height:1.3}
.tegel .bij{margin-top:auto;font-size:calc(12px * var(--fs));opacity:.8}
.tegel.rood{background:var(--rood);color:var(--op-rood)}
.tegel.geel{background:var(--geel);color:var(--op-geel)}
.tegel.blauw{background:var(--blauw);color:var(--op-blauw)}
.tegel.inkt{background:var(--ink);color:var(--paper)}

/* ---------- knoppen en velden ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 17px;border-radius:var(--r-knop);border:1px solid var(--blauw);background:var(--blauw);color:var(--op-blauw);font-weight:700;font-size:calc(14.5px * var(--fs));cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s ease,border-color .15s ease,transform .1s ease,box-shadow .15s ease}
.knop:hover{background:var(--blauw-diep);border-color:var(--blauw-diep)}
.knop:active{transform:translateY(1px)}
.knop[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.knop.stil{background:var(--surface);color:var(--ink);border-color:var(--line)}
.knop.stil:hover{background:var(--surface-2);border-color:var(--ink-muted)}
.knop.breed{width:100%}
.veld{display:block;margin-bottom:12px}
.veld>span{display:block;font-weight:700;font-size:calc(14px * var(--fs));margin-bottom:5px}
.veld em{display:block;font-style:normal;font-size:calc(12.5px * var(--fs));color:var(--ink-muted);margin-top:5px}
.invoer{width:100%;padding:10px 13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-knop);font:inherit;font-size:calc(15px * var(--fs));color:var(--ink);transition:border-color .13s ease,box-shadow .13s ease}
.invoer:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-wash)}
textarea.invoer{resize:vertical;min-height:84px;line-height:1.5}
.vinkje{display:inline-flex;align-items:center;gap:7px;font-size:calc(14px * var(--fs));color:var(--ink-muted);margin-right:auto}
.melding{border-radius:var(--r-knop);padding:11px 13px;font-weight:600;font-size:calc(14.5px * var(--fs));margin:0 0 12px}
.melding.fout{background:var(--rood-wash);color:var(--rood-diep)}
.melding.goed{background:var(--groen-wash);color:var(--groen)}
.leeg{background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:34px 22px;text-align:center;color:var(--ink-muted)}
.leeg::before{content:"";display:block;width:48px;height:48px;margin:0 auto 14px;border-radius:50%;
  background:var(--blauw-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%231B4C9B' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M9.5 21v-6h5v6'/%3E%3C/svg%3E") center / 24px no-repeat;}
.leeg b{display:block;color:var(--ink);font-size:calc(17px * var(--fs));margin-bottom:4px}
.kaartleeg{padding:14px;color:var(--ink-muted);font-size:calc(14px * var(--fs));margin:0}

/* ---------- plaatsbalk ---------- */
.plaatsen{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:11px 13px;margin-bottom:16px}
.plaatsen .prompt{display:flex;align-items:center;gap:9px;width:100%;background:var(--surface-3);border:1.5px dashed var(--line);border-radius:var(--r-knop);min-height:42px;padding:0 14px;cursor:pointer;color:var(--ink-muted);font-size:calc(14.5px * var(--fs));font-weight:600;list-style:none}
.plaatsen .prompt::-webkit-details-marker{display:none}
.plaatsen .prompt::marker{content:""}
.plaatsen .prompt::before{content:"+";font-family:Archivo,sans-serif;font-weight:800;font-size:calc(19px * var(--fs));color:var(--blauw);line-height:1}
.plaatsen .prompt:hover{background:var(--blauw-wash);border-color:var(--blauw);border-style:solid;color:var(--ink)}
.plaatsen[open] .prompt{border-style:solid;border-color:var(--blauw);color:var(--ink)}
.plaatsvelden{display:grid;gap:9px;margin-top:11px}
.plaatsrij{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Vriendelijker "Iets aanbieden"-blok in Hebben en Houwen. */
.plaatsen .prompt.groot{align-items:center;min-height:58px;padding:10px 16px}
.plaatsen .prompt.groot::before{display:none}
.prompt.groot .promptic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blauw-wash);color:var(--blauw)}
.prompt.groot .prompttekst{display:flex;flex-direction:column;line-height:1.25}
.prompt.groot .prompttekst b{color:var(--ink);font-size:calc(15.5px * var(--fs));font-weight:800}
.prompt.groot .prompttekst span{font-size:calc(12.5px * var(--fs));color:var(--ink-muted);font-weight:500}
.plaatsen[open] .prompt.groot .promptic{background:var(--blauw);color:#fff}
.catchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.catchip{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px;font:inherit;font-size:calc(13px * var(--fs));font-weight:600;color:var(--ink);cursor:pointer}
.catchip:hover{border-color:var(--blauw);color:var(--blauw)}
.catchip.gekozen{background:var(--blauw);border-color:var(--blauw);color:#fff}
.prijsrij{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prijsinvoer{position:relative;flex:0 0 150px;max-width:150px}
.prijsinvoer .euro{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-muted);font-weight:700;pointer-events:none}
.prijsinvoer .invoer{padding-left:26px}
.gratistoggle{margin:0;font-weight:600;color:var(--ink)}
.prijsveld.uit .prijsinvoer{opacity:.45}

/* ---------- chiprij ---------- */
.chiprij{position:relative;margin-bottom:4px}
.chiprij::after{content:"";position:absolute;top:0;bottom:12px;right:0;width:40px;pointer-events:none;background:linear-gradient(to right,transparent,var(--paper))}
.chips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 13px}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1.5px solid var(--line);background:var(--surface);border-radius:999px;cursor:pointer;font-size:calc(14px * var(--fs));font-weight:600;white-space:nowrap;text-decoration:none;transition:border-color .13s ease,background .13s ease,color .13s ease}
.chip:hover{border-color:var(--ink-muted)}
.chip[aria-current="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip .n{font-family:Archivo,sans-serif;font-size:calc(11.5px * var(--fs));font-weight:800;background:var(--surface-2);color:var(--ink-muted);border-radius:999px;padding:1px 7px}
.chip[aria-current="true"] .n{background:rgba(255,255,255,.2);color:var(--paper)}
.stip{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}

/* ---------- briefjes op het prikbord ---------- */
.stroom{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.briefje{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);
  box-shadow:var(--schaduw);padding:0 0 0 0;overflow:hidden;
  transition:transform .16s cubic-bezier(.16,1,.3,1), box-shadow .16s ease;
}
.briefje:hover{transform:translateY(-2px) rotate(-.25deg);box-shadow:var(--schaduw-op)}
.briefje > *{padding-left:16px;padding-right:16px}
.briefje > .rand{padding:0}
.briefje > .draad{padding:0 0 18px}
.rand{height:6px;background:var(--bc)}
.kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:calc(12.5px * var(--fs));color:var(--ink-muted);padding-top:12px;margin-bottom:6px}
.buurtnaam{font-weight:800;color:var(--bc);font-size:calc(13px * var(--fs));text-decoration:none}
.buurtnaam:hover{text-decoration:underline;text-underline-offset:2px}
.punt{opacity:.4}
.soort{font-family:Archivo,sans-serif;font-size:calc(10.5px * var(--fs));font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-label);background:var(--surface-2);color:var(--ink-muted)}
.soort.vraag{background:var(--blauw-wash);color:var(--blauw)}
.soort.hulp{background:var(--groen-wash);color:var(--groen)}
.soort.gevonden{background:var(--geel-wash);color:var(--geel-tekst)}
.soort.belangrijk{background:var(--rood);color:var(--op-rood)}
.soort.belangrijk .soortic{vertical-align:-2px;margin-right:3px}
.buurtnaam.alle{color:var(--rood-diep)}

/* Belangrijk bericht: duidelijk anders dan een gewoon briefje. */
.briefje.belangrijk{background:var(--rood-wash);border-color:var(--rood);box-shadow:0 0 0 1px var(--rood), var(--schaduw)}
.briefje.belangrijk .rand{height:8px;background:var(--rood)}
.briefje.belangrijk h3{color:var(--rood-diep)}
.auteur{font-size:calc(13px * var(--fs));color:var(--ink-muted);margin:3px 0 0}
.stempel{display:inline-block;font-family:Archivo,sans-serif;font-size:calc(10px * var(--fs));font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);border-radius:var(--r-label);padding:2px 6px;margin-left:4px;vertical-align:1px}
.wacht{display:inline-flex;align-items:center;font-family:Archivo,sans-serif;font-size:calc(10.5px * var(--fs));font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--geel-wash);color:var(--geel-tekst);border-radius:var(--r-label);padding:2px 7px}
.wacht.aan{background:var(--groen-wash);color:var(--groen)}
.tekst{margin:9px 0 0;max-width:64ch;font-size:calc(15.5px * var(--fs))}
.tekst p{margin:0 0 9px}
.tekst p:last-child{margin-bottom:0}
.tekst img{max-width:100%;height:auto;border-radius:var(--r-knop);border:1px solid var(--line-2);margin:9px 0}
.tekst a{color:var(--blauw);font-weight:600;text-underline-offset:2px}
.tekst ul,.tekst ol{margin:0 0 9px;padding-left:20px}
.tekst h2,.tekst h3,.tekst h4{font-size:calc(17px * var(--fs));margin:12px 0 5px}
.tekst h2:first-child,.tekst h3:first-child{margin-top:0}
.tekst table{width:100%;border-collapse:collapse;margin:10px 0;font-size:calc(14.5px * var(--fs))}
.tekst th,.tekst td{border:1px solid var(--line-2);padding:6px 9px;text-align:left;vertical-align:top}
.tekst th{background:var(--surface-3);font-weight:700}
.tekst hr{border:0;border-top:1px solid var(--line);margin:14px 0}
.tekst blockquote{margin:10px 0;padding:2px 0 2px 12px;border-left:3px solid var(--geel);color:var(--ink-muted)}

.acties{display:flex;align-items:center;gap:3px;margin-top:12px;border-top:1px solid var(--line-2);padding:5px 9px 6px 10px}
.actie{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 11px;background:none;border:0;border-radius:var(--r-knop);cursor:pointer;color:var(--ink-muted);font-size:calc(13.5px * var(--fs));font-weight:600}
.actie .num{font-size:calc(13px * var(--fs));font-weight:800;font-family:Archivo,sans-serif}
.actie:hover{background:var(--surface-3);color:var(--ink)}
.actie:active{transform:translateY(1px)}
.actie[aria-pressed="true"]{color:var(--rood);background:var(--rood-wash)}
.actie.meer{margin-left:auto;padding:0}

.menu{position:relative}
.menuknop{width:36px;height:36px;display:grid;place-items:center;border:0;background:none;color:var(--ink-muted);border-radius:var(--r-knop);cursor:pointer}
.menuknop:hover{background:var(--surface-3);color:var(--ink)}
.menulijst{position:absolute;right:0;bottom:calc(100% + 5px);z-index:30;min-width:214px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-knop);box-shadow:var(--schaduw-op);padding:5px;display:grid;gap:2px}
.menulijst button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 11px;border-radius:var(--r-label);cursor:pointer;font-size:calc(14px * var(--fs));font-weight:600}
.menulijst button:hover{background:var(--surface-3)}
.menulijst button.gevaarlijk{color:var(--rood)}
.menulijst button.gevaarlijk:hover{background:var(--rood-wash)}

/* ---------- reacties ---------- */
.draad{border-top:1px solid var(--line-2);background:var(--surface-3);padding-bottom:18px}
.draadlijst{list-style:none;margin:0;padding:11px 16px 0}
.reactie{display:flex;gap:11px;padding:8px 0}
.reactie+.reactie{border-top:1px solid var(--line-2)}
.rlichaam{min-width:0;flex:1}
.rkop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:calc(12.5px * var(--fs));color:var(--ink-muted)}
.rkop b{font-size:calc(14px * var(--fs));color:var(--ink);font-weight:700}
.rtekst{margin:2px 0 0;font-size:calc(15px * var(--fs))}
.meeroud{margin:9px 0 0 16px;background:none;border:0;color:var(--blauw);font-weight:700;font-size:calc(13.5px * var(--fs));cursor:pointer;padding:4px 0}
.meeroud:hover{text-decoration:underline;text-underline-offset:2px}
.rform{display:flex;gap:11px;align-items:flex-start;padding:11px 16px 0;margin:7px 0 0;border-top:1px solid var(--line-2)}
.rveld{flex:1;min-width:0}
.rinvoer{width:100%;min-height:40px;max-height:180px;resize:none;overflow-y:auto;padding:9px 13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-knop);font:inherit;font-size:calc(15px * var(--fs));color:var(--ink);line-height:1.45}
.rinvoer:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-wash)}
.rrij{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.rhint{font-size:calc(12.5px * var(--fs));color:var(--ink-muted)}
.rrij .rolvink{margin:0;gap:6px;white-space:nowrap;font-size:calc(12.5px * var(--fs));color:var(--ink-muted);font-weight:600}
.rform .knop{height:36px;font-size:calc(13.5px * var(--fs));margin-left:auto}
.fotoknopmini{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-knop);color:var(--blauw);cursor:pointer;flex:0 0 auto}
.fotoknopmini:hover{background:var(--blauw-wash)}

/* Reacties: acties (duimpje, antwoorden, menu) */
.racties{display:flex;align-items:center;gap:2px;margin:5px 0 0;margin-left:-6px}
.ractie{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 8px;background:none;border:0;border-radius:var(--r-knop);cursor:pointer;color:var(--ink-muted);font-size:calc(13px * var(--fs));font-weight:700}
.ractie:hover{background:var(--surface);color:var(--ink)}
.ractie .num{font-family:Archivo,sans-serif;font-weight:800}
.rwaardeer.aan{color:var(--rood)}
.ractie.meer{padding:0 6px}
.reactie .menulijst{right:auto;left:0}

/* Antwoorden op een reactie: iets ingesprongen met een lijn ernaast */
.antwoorden{list-style:none;margin:6px 0 0;padding:0 0 0 14px;border-left:2px solid var(--line-2)}
.antwoorden .reactie{padding:6px 0}
.antwoorden .reactie:first-child{padding-top:2px}
.antwoordslot:not(:empty){padding-left:14px;margin-top:6px}
.antwoordslot .rform{border-top:0;padding:0;margin:0}
.reactie.antwoord .letter.klein{width:28px;height:28px;font-size:calc(12px * var(--fs))}
.reactie .fotos{max-width:360px;margin-top:8px}

/* Antwoorden in-/uitklappen */
.antwoordtoggle{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;background:none;border:0;cursor:pointer;color:var(--blauw);font-weight:700;font-size:calc(13.5px * var(--fs));padding:4px 2px 4px 0}
.antwoordtoggle:hover .atlabel{text-decoration:underline;text-underline-offset:2px}
.atchev{transition:transform .15s ease}
.antwoordtoggle[aria-expanded="true"] .atchev{transform:rotate(180deg)}
.antwoordblok{margin-top:2px}
.meerantwoorden{margin:2px 0 0 14px;font-size:calc(13px * var(--fs))}

/* Reactie bewerken */
.bewerkform{margin-top:6px}
.bewerkform .rrij{margin-top:6px;justify-content:flex-end}
.bewerkform .rrij .knop{margin-left:0}
.knop.bkmini{height:32px;padding:0 13px;font-size:calc(13px * var(--fs))}

/* Duidelijke fotoknop op de hoofd-reactie */
.fotoknopmini.metlabel{width:auto;gap:6px;padding:0 12px;font-weight:700;font-size:calc(13.5px * var(--fs))}
.fotolabel{display:inline}

/* "Nieuwe berichten"-balkje boven de tijdlijn */
.nieuwpill{display:block;margin:0 auto 12px;background:var(--blauw);color:#fff;border:0;border-radius:999px;padding:9px 18px;font-family:inherit;font-weight:700;font-size:calc(14px * var(--fs));cursor:pointer;box-shadow:var(--schaduw-op);position:sticky;top:78px;z-index:20}
.nieuwpill:hover{filter:brightness(1.06)}
.nieuw{animation:opkomst .22s cubic-bezier(.16,1,.3,1) both}
@keyframes opkomst{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.letter{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bc,var(--ink));color:#fff;font-family:Archivo,sans-serif;font-weight:800;font-size:calc(15px * var(--fs))}
.letter.klein{width:32px;height:32px;font-size:calc(13px * var(--fs));margin-top:2px}

/* ---------- rechterkolom ---------- */
.kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);overflow:hidden}
.kaart+.kaart{margin-top:14px}
.kaartkop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px 10px;border-bottom:1px solid var(--line-2)}
/* Padded kaart-inhoud, netjes uitgelijnd met de kop (15px). */
.kaartlijf{padding:13px 15px 15px}
.kaartlijf > :first-child{margin-top:0}
.kaartlijf > :last-child{margin-bottom:0}
.kaartkop a{font-size:calc(13px * var(--fs));color:var(--blauw);font-weight:700;text-decoration:none}
.kaartkop a:hover{text-decoration:underline;text-underline-offset:2px}

/* Het blokje staat twee keer in de HTML: een in de rechterkolom voor de pc,
   en een boven de tijdlijn voor de telefoon. Er is er altijd precies een
   zichtbaar. Let op de volgorde: deze regel moet voor de media queries
   staan, anders wint hij daarvan. */
.spelregels-boven{display:none}
.spelregels .kaartkop{padding:11px 15px 9px}
.spelregels .kaartkop h2{font-size:calc(15.5px * var(--fs))}
.regelblok{padding:9px 15px}
.regelblok+.regelblok{border-top:1px solid var(--line-2)}
.regelblok h3{display:flex;align-items:center;gap:6px;font-family:Archivo,sans-serif;font-size:calc(11px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.regelblok.wel h3{color:var(--groen)}
.regelblok.niet h3{color:var(--rood)}
.regelblok ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.regelblok li{position:relative;padding-left:14px;font-size:calc(13px * var(--fs));line-height:1.35}
.regelblok li::before{content:"";position:absolute;left:2px;top:.58em;width:5px;height:5px;border-radius:50%}
.regelblok.wel li::before{background:var(--groen)}
.regelblok.niet li::before{background:var(--rood)}
.regelvoet{margin:0;padding:8px 15px 10px;border-top:1px solid var(--line-2);font-size:calc(11.5px * var(--fs));color:var(--ink-muted);line-height:1.35}

.agenda{list-style:none;margin:0;padding:5px 15px 11px}
.agenda li{display:flex;gap:12px;padding:10px 0;align-items:flex-start}
.agenda li+li{border-top:1px solid var(--line-2)}
.dag{flex:none;width:44px;border-radius:var(--r-knop);overflow:hidden;text-align:center;border:1px solid var(--line)}
.dag .m{display:block;background:var(--rood);color:var(--op-rood);font-family:Archivo,sans-serif;font-size:calc(9.5px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.09em;padding:2px 0}
.dag .d{display:block;font-family:Archivo,sans-serif;font-size:calc(18px * var(--fs));font-weight:800;line-height:1.35}
.agenda .t{font-weight:700;font-size:calc(14.5px * var(--fs));line-height:1.3;text-decoration:none}
.agenda .t:hover{text-decoration:underline;text-underline-offset:2px}
.agenda .s{font-size:calc(13px * var(--fs));color:var(--ink-muted);line-height:1.4}

.zijaanbod{list-style:none;margin:0;padding:5px 15px 13px}
.zijaanbod li+li{border-top:1px solid var(--line-2)}
.zijaanbod a{display:block;padding:10px 0;text-decoration:none}
.zijaanbod .t{display:block;font-weight:700;font-size:calc(14.5px * var(--fs));line-height:1.3}
.zijaanbod .s{display:block;font-size:calc(12.5px * var(--fs));color:var(--ink-muted)}
.prijs{font-family:Archivo,sans-serif;font-weight:800}
.gratis{font-family:Archivo,sans-serif;font-weight:800;color:var(--groen);text-transform:uppercase;font-size:calc(11px * var(--fs));letter-spacing:.05em}
.team{list-style:none;margin:0;padding:7px 15px 13px}
.team li{display:flex;gap:11px;align-items:center;padding:8px 0}
.team li+li{border-top:1px solid var(--line-2)}
.team .t{font-weight:700;font-size:calc(14px * var(--fs));line-height:1.3}
.team .s{font-size:calc(12.5px * var(--fs));color:var(--ink-muted)}

/* ---------- dialoog ---------- */
dialog{border:0;padding:0;background:transparent;max-width:min(580px,calc(100vw - 28px));width:100%}
dialog::backdrop{background:rgba(23,33,46,.55)}
.paneel{background:var(--surface);border-radius:var(--r-kaart);box-shadow:var(--schaduw-op);overflow:hidden;max-height:min(86dvh,780px);display:flex;flex-direction:column}
.paneel form{display:contents}
.paneelkop{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line-2);flex:none}
.paneelkop h2{flex:1;min-width:0}
.sluit{width:38px;height:38px;border-radius:50%;border:0;background:var(--surface-3);color:var(--ink-muted);display:grid;place-items:center;cursor:pointer;flex:none}
.sluit:hover{background:var(--surface-2);color:var(--ink)}
.paneelbody{padding:15px;overflow-y:auto}
.paneelvoet{padding:13px 15px;border-top:1px solid var(--line-2);display:flex;gap:9px;align-items:center;flex-wrap:wrap;background:var(--surface-3);flex:none}

/* ---------- zwevende knoppen ---------- */
.zwevers{position:fixed;right:22px;bottom:22px;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:11px}
.zwever{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--blauw);box-shadow:var(--schaduw-op)}
.zwever:hover{border-color:var(--blauw);background:var(--blauw-wash)}
.zwever:active{transform:translateY(1px)}
.omhoog{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.omhoog.zichtbaar{opacity:1;visibility:visible;transform:none}
.zwever.beheer{background:var(--ink);color:var(--paper);border-color:var(--ink);width:54px;height:54px;position:relative}
.zwever.beheer:hover{background:#0D1520;border-color:#0D1520}
.zwever.beheer .n{position:absolute;top:-2px;right:-2px;min-width:21px;height:21px;border-radius:11px;background:var(--rood);color:var(--op-rood);font-family:Archivo,sans-serif;font-size:calc(11px * var(--fs));font-weight:800;display:grid;place-items:center;padding:0 5px;border:2px solid var(--paper)}
.zwever.beheer[aria-expanded="true"] svg{transform:rotate(45deg)}
.zwever.beheer svg{transition:transform .18s cubic-bezier(.16,1,.3,1)}
.beheerpaneel{position:fixed;right:22px;bottom:88px;z-index:46;width:304px;max-width:calc(100vw - 32px);background:var(--ink);color:var(--paper);border-radius:var(--r-kaart);box-shadow:0 12px 44px rgba(0,0,0,.4);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:bottom right;transition:opacity .16s ease,transform .16s cubic-bezier(.16,1,.3,1),visibility .16s}
.beheerpaneel.open{opacity:1;visibility:visible;transform:none}
.bpkop{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid rgba(255,255,255,.12)}
.bpkop h2{font-size:calc(14px * var(--fs));flex:1}
.bprol{font-family:Archivo,sans-serif;font-size:calc(10px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.07em;background:var(--geel);color:var(--op-geel);border-radius:var(--r-label);padding:2px 7px}
.bplijst{list-style:none;margin:0;padding:6px}
.bplijst a{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:0 11px;border-radius:var(--r-knop);text-decoration:none;font-size:calc(14.5px * var(--fs));font-weight:600}
.bplijst a:hover{background:rgba(255,255,255,.1)}
.bplijst .telling{margin-left:auto;font-family:Archivo,sans-serif;font-weight:800;font-size:calc(12px * var(--fs));background:var(--rood);color:var(--op-rood);border-radius:999px;min-width:23px;height:21px;display:grid;place-items:center;padding:0 6px}
.bplijst .telling.rustig{background:rgba(255,255,255,.16);color:var(--paper)}
.bpvoet{padding:9px 13px 13px;border-top:1px solid rgba(255,255,255,.12);margin:0 6px}
.bpvoet a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:41px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-knop);text-decoration:none;font-weight:700;font-size:calc(14px * var(--fs))}
.bpvoet a:hover{background:rgba(255,255,255,.1)}
.bpnoot{font-size:calc(11.5px * var(--fs));opacity:.65;margin:9px 0 0;text-align:center;line-height:1.35}

/* ---------- inlogscherm ----------
   Twee delen: links het merkpaneel op twee derde, rechts het formulier op een
   derde. Alles in de formulierkolom deelt dezelfde linkerkantlijn, van het logo
   tot de knop; dat is wat een inlogscherm rustig maakt.                     */
body.kaal{background:var(--paper)}
.inlogscherm{display:grid;grid-template-columns:2fr 1fr;min-height:100dvh}

.merkpaneel{
  position:relative;overflow:hidden;background:var(--ink);color:#FBF7ED;
  display:flex;align-items:center;padding:48px 56px;
}
/* Sfeerfoto van Vlaardingen achter een donkere waas, zodat de tekst leesbaar blijft. */
.merkpaneel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg, rgba(23,33,46,.74), rgba(23,33,46,.94)),
    url("/assets/img/wijken/havenhoofd.jpg") center/cover no-repeat;
}
.merkvlag{
  position:absolute;left:0;right:0;top:0;height:8px;
  background:linear-gradient(to right,
    var(--rood) 0 33.34%, var(--geel) 33.34% 66.67%, var(--blauw) 66.67% 100%);
}
.merkwatermerk{
  position:absolute;right:-70px;bottom:-70px;width:380px;height:380px;
  opacity:.09;pointer-events:none;
}
.merkbinnen{position:relative;max-width:460px}
.merkfoto-credit{position:absolute;right:16px;bottom:12px;z-index:2;font-size:calc(10.5px * var(--fs));color:rgba(251,247,237,.55);text-decoration:none}
.merkfoto-credit:hover{color:rgba(251,247,237,.85);text-decoration:underline}
.merklogo{display:block;height:54px;width:auto;margin-bottom:34px}
.merkkop{font-family:Archivo,sans-serif;font-size:calc(31px * var(--fs));font-weight:800;font-stretch:110%;letter-spacing:-.024em;line-height:1.1;margin:0 0 10px}
.merktekst{font-size:calc(16px * var(--fs));line-height:1.55;opacity:.8;margin:0 0 28px;max-width:44ch}
.merkpunten{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.merkpunten li{display:flex;gap:13px;align-items:flex-start}
.merkpunten b{display:block;font-size:calc(15.5px * var(--fs));font-weight:700;margin-bottom:1px}
.merkpunten span span,.merkpunten li > span:last-child{font-size:calc(14.5px * var(--fs));line-height:1.45}
.merkpunten li > span:last-child{opacity:.75}
.merkpunten li > span:last-child b{opacity:1}
.merkstip{width:12px;height:12px;border-radius:50%;flex:none;margin-top:5px}
.merkstip.rood{background:var(--rood)}
.merkstip.geel{background:var(--geel)}
.merkstip.blauw{background:#4E7FCE}
.merkstip.groen{background:#3FA06A}
.merkvoet{margin:32px 0 0;font-size:calc(13px * var(--fs));opacity:.55}

.formpaneel{background:var(--surface);display:flex;align-items:center;justify-content:center;padding:40px 32px}
.formbinnen{width:100%;max-width:340px}

.formbinnen h1{font-size:calc(26px * var(--fs));margin:0 0 6px}
.formbinnen > p.grijs{margin:0 0 22px;font-size:calc(14.5px * var(--fs));line-height:1.5}
.inlogform{margin:0}
.inlogform .veld{margin-bottom:14px}
.inlogform .vinkje.onthoud{display:flex;align-items:center;gap:8px;margin:-2px 0 14px;color:var(--ink);font-size:calc(14px * var(--fs))}
.inlogform .knop{margin-top:6px}
.formbinnen > p.klein{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line-2);line-height:1.5}
.formbinnen a{color:var(--blauw);font-weight:600;text-underline-offset:2px}
.invoer.code{font-family:Archivo,sans-serif;font-size:calc(25px * var(--fs));font-weight:800;letter-spacing:.35em;text-align:center}

/* Aanmelden: straat + huisnummer op een rij. */
.veldrij{display:flex;gap:10px}
.veldrij .veld.groot{flex:1 1 auto}
.veldrij .veld.klein{flex:0 0 84px}

/* Scheiding "nog geen account?" tussen inloggen en aanmelden. */
.inlogscheiding{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--ink-muted);font-size:calc(13px * var(--fs))}
.inlogscheiding::before,.inlogscheiding::after{content:"";flex:1;height:1px;background:var(--line-2)}

/* Smal scherm: het merkpaneel wordt een strook boven het formulier. */
@media(max-width:980px){
  /* De strook is zo hoog als hij nodig heeft, het formulier vult de rest. */
  .inlogscherm{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .merkpaneel{padding:0;align-items:stretch}
  .merkbinnen{max-width:none;padding:26px 22px 24px;width:100%}
  .merkwatermerk{display:none}
  .merklogo{height:44px;margin-bottom:0}
  .merkkop,.merktekst,.merkpunten,.merkvoet{display:none}
  .formpaneel{padding:30px 22px 48px;align-items:flex-start}
  .formbinnen{max-width:380px;margin:0 auto}
}

/* ---------- chat ----------
   Twee kolommen: links de gesprekken, rechts het open gesprek. Op de telefoon
   is er een kolom; dan toont het scherm de lijst, of het gesprek met een
   terug-pijl. Dat schakelt de klasse .toont-gesprek.                        */
.chat{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;align-items:start;
  height:calc(100dvh - 68px - 44px);min-height:460px}
.gesprekken{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);
  box-shadow:var(--schaduw);overflow-y:auto;height:100%}
.gesprekrij{display:flex;gap:11px;align-items:center;padding:12px 14px;text-decoration:none;border-bottom:1px solid var(--line-2)}
.gesprekrij:hover{background:var(--surface-3)}
.gesprekrij.actief{background:var(--blauw-wash)}
.gesprekrij .grow{flex:1;min-width:0}
.gesprekrij .regel1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.gesprekrij b{font-size:calc(15px * var(--fs));font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gesprekrij time{font-size:calc(11.5px * var(--fs));color:var(--ink-muted);flex:none}
.gesprekrij .overwat{display:block;font-size:calc(12px * var(--fs));color:var(--blauw);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gesprekrij .laatste{display:block;font-size:calc(13px * var(--fs));color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.gesprekrij.ongelezen b,.gesprekrij.ongelezen .laatste{color:var(--ink);font-weight:700}
.gesprekrij .bolletje{flex:none;min-width:20px;height:20px;border-radius:10px;background:var(--rood);color:#fff;
  font-family:Archivo,sans-serif;font-size:calc(11px * var(--fs));font-weight:800;display:grid;place-items:center;padding:0 5px}

.gesprek{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
  display:flex;flex-direction:column;height:100%;overflow:hidden}
.gesprekkop{display:flex;align-items:center;gap:11px;padding:12px 15px;border-bottom:1px solid var(--line-2);flex:none}
.gesprekkop .terug{display:none;width:34px;height:34px;place-items:center;border-radius:50%;color:var(--ink-muted);text-decoration:none}
.gesprekkop .terug:hover{background:var(--surface-3);color:var(--ink)}
.gesprekkop .wie{flex:1;min-width:0}
.gesprekkop .wie b{display:block;font-size:calc(15.5px * var(--fs));font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gesprekkop .overwat{font-size:calc(12.5px * var(--fs));color:var(--blauw);font-weight:600}
.gesprekverwijder{margin:0;flex:none}
.pictoknop{width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;background:none;border-radius:50%;color:var(--ink-muted);cursor:pointer}
.pictoknop:hover{background:var(--surface-3);color:var(--rood)}
.berichten{flex:1;overflow-y:auto;padding:16px 15px;display:flex;flex-direction:column;gap:8px;background:var(--surface-3)}
.startuitleg{align-self:center;max-width:44ch;text-align:center;font-size:calc(12.5px * var(--fs));color:var(--ink-muted);
  background:var(--geel-wash);border-radius:var(--r-knop);padding:9px 13px;margin:6px 0 4px}
.chatregel{display:flex;max-width:78%}
.chatregel.mij{align-self:flex-end}
.chatregel.ander{align-self:flex-start}
.bel{border-radius:14px;padding:8px 12px;box-shadow:var(--schaduw)}
.chatregel.mij .bel{background:var(--blauw);color:#fff;border-bottom-right-radius:4px}
.chatregel.ander .bel{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.btekst{margin:0;font-size:calc(15px * var(--fs));line-height:1.4;overflow-wrap:anywhere}
.verborgen{margin:0;font-size:calc(13.5px * var(--fs));font-style:italic;opacity:.7}
.bvoet{display:flex;align-items:center;gap:8px;margin-top:3px}
.bvoet time{font-size:calc(11px * var(--fs));opacity:.65}
.chatregel.mij .bvoet{justify-content:flex-end}
.meldknop{background:none;border:0;padding:0;font-size:calc(11px * var(--fs));color:var(--ink-muted);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.chatform{display:flex;gap:9px;align-items:flex-end;padding:11px 13px;border-top:1px solid var(--line-2);flex:none}
.chatinvoer{flex:1;min-height:42px;max-height:180px;resize:none;overflow-y:auto;padding:10px 13px;background:var(--surface-3);
  border:1px solid var(--line);border-radius:var(--r-knop);font:inherit;font-size:calc(15px * var(--fs));color:var(--ink);line-height:1.4}
.chatinvoer:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-wash)}
.chatverstuur{flex:none;width:42px;height:42px;padding:0;border-radius:50%}

/* ---------- chatmoderatie ---------- */
.meldlijst{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.meldkaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:14px 16px}
.meldkop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:calc(12.5px * var(--fs));color:var(--ink-muted);margin-bottom:6px}
.meldmeta{margin:0 0 8px;font-size:calc(14px * var(--fs))}
.meldcitaat{background:var(--surface-3);border-left:3px solid var(--rood);border-radius:6px;padding:10px 13px;font-size:calc(15px * var(--fs));line-height:1.45;overflow-wrap:anywhere}
.meldcitaat.isverborgen{border-left-color:var(--ink-muted);color:var(--ink-muted)}
.meldtoelichting{margin:8px 0 0;font-size:calc(13.5px * var(--fs));color:var(--ink-muted)}
.meldknoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.meldknoppen form{margin:0}
.gesprekcontext{margin-top:10px}
.knopschakel{background:none;border:0;padding:0;font-size:calc(13px * var(--fs));font-weight:600;color:var(--blauw);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.gesprekcontextinhoud{margin-top:10px}
.beheergesprek{background:var(--surface-3);border:1px solid var(--line);border-radius:8px;padding:12px 13px}
.bgdeelnemers{margin:0 0 10px;font-size:calc(13px * var(--fs));color:var(--ink-muted)}
.bgberichten{display:grid;gap:10px}
.bgregel{display:grid;gap:3px}
.bgkop{display:flex;align-items:baseline;gap:8px;font-size:calc(12.5px * var(--fs))}
.bgkop b{font-weight:700}
.bgkop time{color:var(--ink-muted);font-size:calc(11px * var(--fs))}
.bgbel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:calc(14.5px * var(--fs));line-height:1.45;overflow-wrap:anywhere}
.bgbel.isverborgen{color:var(--ink-muted);font-style:italic}

/* ---------- mailoverzicht ---------- */
.mailfilter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:16px}
.mailfilter .veld{margin:0}
.mailfilter .veld.grow{flex:1;min-width:200px}
.mailfilterknoppen{display:flex;gap:8px;align-items:center}
.testmailform{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.testmailform .knop{flex:none}
.soort.smtp{background:var(--blauw-wash);color:var(--blauw)}
.maillijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mailkaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:13px 15px}
.mailkop{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mailsubject{font-size:calc(15px * var(--fs));font-weight:700;flex:1;min-width:0;overflow-wrap:anywhere}
.mailkop time{font-size:calc(12px * var(--fs));color:var(--ink-muted);flex:none}
.mailmeta{margin:6px 0 0;font-size:calc(13px * var(--fs));color:var(--ink-muted);overflow-wrap:anywhere}
.mailbody{margin-top:9px}
.mailbody summary{cursor:pointer;font-size:calc(13px * var(--fs));font-weight:600;color:var(--blauw)}
.mailtekst{margin-top:9px;padding:11px 13px;background:var(--surface-3);border:1px solid var(--line);border-radius:8px;
  font-size:calc(14px * var(--fs));line-height:1.5;overflow-wrap:anywhere;white-space:normal}
.mailverwijder{margin:10px 0 0}
.knop.klein{padding:5px 11px;font-size:calc(12.5px * var(--fs))}

/* ---------- installatie ---------- */
.installscherm{min-height:100dvh;display:grid;place-items:center;padding:28px 16px;background:var(--paper)}
.installkaart{width:100%;max-width:560px;background:var(--surface);border-radius:var(--r-kaart);box-shadow:var(--schaduw-op);overflow:hidden}
.installbinnen{padding:26px}
.installform fieldset{border:1px solid var(--line);border-radius:var(--r-kaart);padding:15px 16px 6px;margin:0 0 16px}
.installform legend{font-family:Archivo,sans-serif;font-weight:800;font-size:calc(13px * var(--fs));text-transform:uppercase;letter-spacing:.06em;color:var(--blauw);padding:0 6px}
.installform fieldset>.grijs{margin:-4px 0 12px}
.tweekol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.installform .knop{margin-top:4px}
@media(max-width:520px){.tweekol{grid-template-columns:1fr}}

/* ---------- mobiel ---------- */
.tabbalk{display:none}
@media(max-width:1060px){
  html,body{scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
  .kolommen{grid-template-columns:minmax(0,1fr)}
  aside{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:16px}
  aside .kaart+.kaart{margin-top:0}
  .kaart+.kaart{margin-top:16px}
  .zwevers,.beheerpaneel{right:14px}
  .tegels{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .hoofdnav,.iconknop.verberg-sm,.profielnaam{display:none}
  .topin{height:60px;padding:0 14px}
  .merk img{height:36px}
  .wrap{padding:16px 14px 106px}
  h1{font-size:calc(24px * var(--fs))}
  aside{grid-template-columns:1fr}
  .spelregels-boven{display:block;margin-bottom:15px}
  .spelregels-zij{display:none}
  .tegel{min-height:80px}
  .tegel b{font-size:calc(25px * var(--fs))}
  .zwevers{bottom:calc(70px + env(safe-area-inset-bottom))}
  .beheerpaneel{bottom:calc(136px + env(safe-area-inset-bottom))}
  .chat{grid-template-columns:minmax(0,1fr);height:auto}
  .chat .gesprekken{height:auto;max-height:none}
  .chat .gesprek{display:none;height:calc(100dvh - 60px - 44px)}
  .chat.toont-gesprek .gesprekken{display:none}
  .chat.toont-gesprek .gesprek{display:flex}
  .gesprekkop .terug{display:grid}
  .chatdropdown{top:56px;left:10px;right:10px;width:auto;max-height:calc(100dvh - 72px)}
  .tabbalk{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbalk a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;text-decoration:none;font-size:calc(10.5px * var(--fs));font-weight:600;color:var(--ink-muted)}
  .tabbalk a[aria-current="page"]{color:var(--blauw)}
  .tabbalk a[aria-current="page"] .ic{background:var(--blauw-wash)}
  .tabbalk .ic{padding:3px 13px;border-radius:999px;display:block}
  .sitevoet{margin-bottom:calc(56px + env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:no-preference){
  .briefje,.kaart,.tegel{animation:opkomen .2s cubic-bezier(.16,1,.3,1) both}
  @keyframes opkomen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(root){animation-name:vt-uit}
::view-transition-new(root){animation-name:vt-in}
@keyframes vt-uit{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
.bezig{opacity:.5;pointer-events:none}

/* ---------- beveiliging (tweestapsverificatie) ---------- */
.knop.gevaarlijk{background:var(--rood-wash);color:var(--rood-diep);border-color:transparent}
.knop.gevaarlijk:hover{background:var(--rood);color:#fff}

.bevkaart{margin-bottom:16px}
.bevkaart p.grijs{margin:0 0 14px;line-height:1.5}
.statuslabel{font-size:calc(12px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:999px}
.statuslabel.aan{background:var(--groen-wash);color:var(--groen)}
.statuslabel.uit{background:var(--surface-2);color:var(--ink-muted)}

.bevstappen{margin:0 0 16px;padding-left:20px;line-height:1.55}
.bevstappen li{margin-bottom:6px}

.qrblok{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-knop);padding:16px;margin:0 0 16px;text-align:center}
.qr{display:flex;justify-content:center;margin-bottom:10px}
.qr img{width:180px;height:180px;image-rendering:pixelated;background:#fff;padding:8px;border-radius:8px}
.qr:empty{display:none}
.sleutel{display:inline-block;font-family:Archivo,monospace;font-size:calc(17px * var(--fs));font-weight:800;letter-spacing:.12em;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;word-break:break-all}
.bevbevestig{margin:0}
.bevbevestig .invoer.code{margin-bottom:10px}

/* Geavanceerde plaatsopties voor beheerders. */
.geavanceerd{border:1px solid var(--line);border-radius:var(--r-knop);padding:10px 13px 11px;margin:2px 0 12px}
.geavanceerd legend{font-family:Archivo,sans-serif;font-size:calc(10.5px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--geel-tekst);background:var(--geel-wash);border-radius:var(--r-label);padding:2px 8px}
.geavanceerd .vinkje{display:flex;align-items:flex-start;gap:8px;margin:0 0 7px;color:var(--ink)}
.geavanceerd .vinkje:last-child{margin-bottom:0}
.geavanceerd .vinkje input{margin-top:2px;flex:0 0 auto}

/* Mijn profiel. */
.gegevens{margin:0}
.gegevens dt{font-family:Archivo,sans-serif;font-size:calc(11px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);margin-top:10px}
.gegevens dt:first-child{margin-top:0}
.gegevens dd{margin:2px 0 0;font-size:calc(15px * var(--fs))}
.meldform{margin:0}
.schakelaar{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px;cursor:pointer;line-height:1.45}
.schakelaar input{margin-top:3px;flex:0 0 auto;width:18px;height:18px}
.schakelaar span b:first-child{display:block;margin-bottom:1px}
.schakelaar span{font-size:calc(14.5px * var(--fs));color:var(--ink-muted)}

/* Wijkteam: een lid tijdelijk schorsen, ingeklapt onder een melding. */
.schorsblok{margin-top:10px;border-top:1px solid var(--line-2);padding-top:10px}
.schorsblok summary{cursor:pointer;font-weight:700;font-size:calc(13.5px * var(--fs));color:var(--rood-diep);list-style:none}
.schorsblok summary::-webkit-details-marker{display:none}
.schorsblok summary::before{content:"\203A";margin-right:6px;font-weight:800}
.schorsblok[open] summary::before{content:"\2039"}
.schorsrij{display:flex;gap:10px;margin:10px 0 8px}
.schorsrij .veld{margin-bottom:0}
.schorsrij .veld.klein{flex:0 0 110px}
.schorsrij .veld.groot{flex:1 1 auto}

/* ---------- wijkenoverzicht ---------- */
.wijkrooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.wijkkaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);overflow:hidden;display:flex;flex-direction:column}
.wijkkaart .rand{height:6px;background:var(--bc)}
.wijkkaart.mijn{box-shadow:0 0 0 1px var(--bc), var(--schaduw)}
.wijkbanner{position:relative;height:200px;background:var(--surface-2) center/cover no-repeat}
.wijkbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,rgba(23,33,46,.30));pointer-events:none}
.wijkbanner-credit{position:absolute;right:8px;bottom:8px;z-index:1;font-size:calc(10.5px * var(--fs));color:rgba(255,255,255,.95);background:rgba(23,33,46,.5);padding:2px 9px;border-radius:999px;text-decoration:none}
.wijkbanner-credit:hover{background:rgba(23,33,46,.72);text-decoration:underline}
.wijkfotohuidig{height:120px;border-radius:var(--r-knop);background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line);margin-bottom:8px}
.wijkbinnen{padding:14px 16px 16px;display:flex;flex-direction:column;gap:11px;flex:1}
.wijkkop{display:flex;align-items:center;gap:9px}
.wijkkop .stip{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.wijkkop h2{margin:0;font-size:calc(18px * var(--fs))}
.mijnchip{margin-left:auto;font-family:Archivo,sans-serif;font-size:calc(10px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:var(--bc);color:#fff;border-radius:var(--r-label);padding:3px 8px}
.wijkcijfers{margin:0;display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:calc(13.5px * var(--fs));color:var(--ink-muted)}
.wijkcijfers b{color:var(--ink)}
.wijkcijfers .pc{font-family:Archivo,sans-serif;font-weight:700;letter-spacing:.04em}
.wijkteam{border-top:1px solid var(--line-2);padding-top:11px}
.wtkop{display:block;font-family:Archivo,sans-serif;font-size:calc(10.5px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-muted);margin-bottom:8px}
.wtleeg{margin:0;font-size:calc(13.5px * var(--fs));color:var(--ink-muted);line-height:1.45}
.wijkteam ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wijkteam li{display:flex;align-items:center;gap:9px;font-size:calc(14px * var(--fs))}
.wijkteam .t{font-weight:600}
.wijkteam .stempel{margin-left:auto}
.wtslot{margin:auto 0 0;font-size:calc(13px * var(--fs));color:var(--ink-muted)}
.wijkkaart .knop.breed{margin-top:auto}

/* ---------- beheercentrum ---------- */
.beheerlayout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:start}
.beheerlayout.zonder-nav{grid-template-columns:minmax(0,1fr)}
.beheerhoofd{min-width:0}
.beheernav{display:flex;flex-direction:column;gap:2px;position:sticky;top:84px;scrollbar-width:none;-ms-overflow-style:none}
.beheernav::-webkit-scrollbar{width:0;height:0;display:none}
.beheernav a{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-knop);color:var(--ink);text-decoration:none;font-weight:600;font-size:calc(14.5px * var(--fs))}
.beheernav a:hover{background:var(--surface-2)}
.beheernav a[aria-current="page"]{background:var(--blauw);color:#fff}
.beheernav .bnbadge{margin-left:auto;background:var(--rood);color:var(--op-rood);font-family:Archivo,sans-serif;font-weight:800;font-size:calc(11px * var(--fs));border-radius:999px;min-width:20px;height:19px;display:grid;place-items:center;padding:0 5px}
.beheernav a[aria-current="page"] .bnbadge{background:#fff;color:var(--rood)}

.beheerfilter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.beheerfilter .invoer{width:auto;flex:0 1 auto}
.beheerfilter input[type="search"]{flex:1 1 200px}

.beheertabel{display:flex;flex-direction:column;gap:8px}
.brij{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-knop);padding:10px 14px;text-decoration:none;color:var(--ink)}
a.brij:hover{border-color:var(--blauw);box-shadow:var(--schaduw)}
.brij .bnaam{display:flex;flex-direction:column;min-width:0;flex:1}
.brij .bmail{color:var(--ink-muted);font-size:calc(13px * var(--fs));overflow:hidden;text-overflow:ellipsis}
.brol{font-family:Archivo,sans-serif;font-size:calc(11px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:var(--r-label);white-space:nowrap}
.rol-admin{background:var(--rood-wash);color:var(--rood-diep)}
.rol-moderator{background:var(--blauw-wash);color:var(--blauw)}
.rol-user{background:var(--surface-2);color:var(--ink-muted)}
.bstatus{font-size:calc(12.5px * var(--fs));color:var(--ink-muted);white-space:nowrap}
.st-suspended,.st-geschorst-tijdelijk{color:var(--rood-diep);font-weight:700}
.st-pending{color:var(--geel-tekst);font-weight:700}
.bwijken{font-size:calc(12.5px * var(--fs));color:var(--ink-muted);white-space:nowrap}

.actierij{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px}
.inline-actie{margin:0;display:inline}
.rolform,.statusregel{margin:0}
.statusregel{margin:0 0 12px;font-size:calc(14.5px * var(--fs))}
.waarschuw{color:var(--rood-diep);font-weight:700}
.rolform{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;border-top:1px solid var(--line-2);padding-top:12px;margin-top:4px}
.rolform .veld{margin:0;flex:1 1 160px}
.gevaarkaart{border-color:var(--rood)}

.mini-lijst{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.mini-lijst li{display:flex;flex-direction:column;gap:1px;font-size:calc(14px * var(--fs))}
.wijktoggels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wijktoggels li{display:flex;align-items:center;gap:8px}
.wijktoggels .wnaam{flex:1;font-weight:600;font-size:calc(14px * var(--fs))}
.mini{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px;font-family:Figtree,sans-serif;font-size:calc(12.5px * var(--fs));font-weight:700;cursor:pointer;white-space:nowrap;color:var(--ink);transition:border-color .13s ease,background .13s ease,color .13s ease}
.mini:hover{border-color:var(--ink-muted)}
.mini.aan{background:var(--groen-wash);color:var(--groen);border-color:transparent}
.mini.uit{color:var(--ink-muted)}
a.mini{text-decoration:none;display:inline-block}
.brij.static{cursor:default}
.wijkkeuze{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:8px}
.kleurinvoer{height:42px;padding:4px;cursor:pointer}

/* ---------- gebruiker bewerken: alles-in-één met zwevende opslaanbalk ---------- */
.wijkvink{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wijkvink li{display:grid;grid-template-columns:1fr 62px 62px;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.wijkvink li:last-child{border-bottom:0}
.wijkvink .wnaam{font-weight:600;font-size:calc(14px * var(--fs))}
.wijkvink .vinkje{justify-content:center;margin:0}
.wijkvinkkop{color:var(--ink-muted);font-size:calc(11.5px * var(--fs));text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.wijkvinkkop span:first-child{text-transform:none;letter-spacing:0}
.opslaanbalk{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);
  box-shadow:0 -6px 18px rgba(23,33,46,.08)}
.opslaanbalk .knop{flex:none}
.opslaanbalk span{flex:1;min-width:180px}
.bewerkform+.kolommen{margin-top:20px}

/* Losse acties als uitklapbare blokken naast elkaar. */
.sectiekop{margin:24px 0 2px}
.sectieuitleg{margin:0 0 12px}
.actieblokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;align-items:start}
.actieblok{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);overflow:hidden}
.actieblok.gevaarkaart{border-color:var(--rood)}
.actieblok>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:13px 15px;
  font-family:Archivo,sans-serif;font-weight:700;font-size:calc(16px * var(--fs))}
.actieblok>summary::-webkit-details-marker{display:none}
.actieblok>summary .blokttl{flex:1}
.actieblok>summary::after{content:"";flex:none;width:8px;height:8px;margin-right:3px;
  border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);
  transform:rotate(45deg);transition:transform .15s ease}
.actieblok[open]>summary::after{transform:rotate(-135deg)}
.actieblok[open]>summary{border-bottom:1px solid var(--line-2)}
.actieblok .kaartlijf{padding:13px 15px 15px}
.infoblokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;margin-top:16px}

/* ---------- agenda (bewonerspagina) ---------- */
.agendalijst{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.agendamaand{font-family:Archivo,sans-serif;font-size:calc(14px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted);margin:14px 2px 2px}
.agendalijst .agendamaand:first-child{margin-top:0}
.agendadag{display:grid;grid-template-columns:52px 1fr;gap:15px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:14px 16px}
.agendadag.vandaag{border-color:var(--blauw);box-shadow:0 0 0 1px var(--blauw)}
.agendadatum{display:flex;flex-direction:column;align-items:center;gap:5px}
.agendadatum .wd{font-size:calc(10.5px * var(--fs));color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em}
.agendapunten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.agendapunten li+li{border-top:1px solid var(--line-2)}
.apt{display:flex;align-items:baseline;gap:12px;padding:9px 0;text-decoration:none;color:var(--ink)}
.apt .tijd{flex:none;width:44px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-muted);font-size:calc(13.5px * var(--fs))}
.apt .wat{flex:1;min-width:0}
.apt .wat b{display:block;font-size:calc(15px * var(--fs))}
.apt .wat .s{color:var(--ink-muted);font-size:calc(12.5px * var(--fs))}
.apt .wk{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:calc(11.5px * var(--fs));color:var(--ink-muted);font-weight:600;white-space:nowrap}
.apt .wk .stip{width:8px;height:8px;border-radius:50%;flex:none}
.apt:hover .wat b{text-decoration:underline;text-underline-offset:2px}
.agendawanneer{margin:0 0 10px;line-height:1.5}
.agendaregel{margin:6px 0;font-size:calc(14.5px * var(--fs))}
.agendaregel .lbl{display:inline-block;min-width:58px;color:var(--ink-muted);font-size:calc(12.5px * var(--fs))}
.agendatekst{margin:12px 0 0;line-height:1.55;overflow-wrap:anywhere}
.wijklegenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.wijklegenda li{display:flex;align-items:center;gap:9px;font-size:calc(14px * var(--fs))}
.wijklegenda .stip{flex:none;width:11px;height:11px;border-radius:50%}
.tipkop{margin:0 0 5px;font-weight:800;font-family:Archivo,sans-serif;font-size:calc(15px * var(--fs))}

/* ---------- Hebben en Houwen (bewonerspagina) ---------- */
.aanbodlayout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:22px;align-items:start}
.aanbodmain{min-width:0}
/* De filters gebruiken de gewone kaart-structuur (.kaart/.kaartkop/.kaartlijf),
   zodat "Zoeken" en "Categorie" exact dezelfde kop krijgen als elke andere kaart. */
.aanbodfilters{position:sticky;top:14px;display:flex;flex-direction:column;gap:14px}
.aanbodfilters .filterzoek{display:flex;flex-direction:column;gap:10px}
.aanbodfilters .filterzoek .veld{margin:0}
.filterlijst{list-style:none;margin:0 -5px;padding:0;display:flex;flex-direction:column;gap:1px}
.filterlink{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:var(--r-knop);text-decoration:none;color:var(--ink);font-weight:600;font-size:calc(14.5px * var(--fs));transition:background .13s ease,color .13s ease}
.filterlink:hover{background:var(--surface-3)}
.filterlink.actief{background:var(--blauw);color:#fff}
.filterlink .n{font-family:Archivo,sans-serif;font-size:calc(11px * var(--fs));font-weight:800;background:var(--surface-2);color:var(--ink-muted);border-radius:999px;padding:1px 7px}
.filterlink.actief .n{background:rgba(255,255,255,.22);color:#fff}

.beschikbaarkop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 0}
.aanbodgrid{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:13px}
.aanbodkaart{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);overflow:hidden;transition:border-color .12s,box-shadow .12s,transform .12s}
.aanbodkaart:hover{border-color:var(--blauw);box-shadow:var(--schaduw-op,0 8px 22px rgba(23,33,46,.1));transform:translateY(-1px)}
.aanbodkaart .ak-in{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.ak-foto{position:relative;aspect-ratio:4/3;background:var(--surface-2) center/cover no-repeat;border-bottom:1px solid var(--line);display:grid;place-items:center;color:var(--line)}
.ak-foto.leeg{background:var(--surface-3)}
.aanbodkaart.gereserveerd .ak-foto{filter:grayscale(.4);opacity:.7}
.ak-body{display:flex;flex-direction:column;gap:5px;padding:12px 14px;min-width:0}
.ak-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.ak-top .cat{max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(10.5px * var(--fs));text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);background:var(--surface-2);padding:2px 8px;border-radius:var(--r-label);margin-left:auto}
.atitel{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:calc(15.5px * var(--fs));line-height:1.3;margin:1px 0 0}
.aanbodkaart:hover .atitel{text-decoration:underline;text-underline-offset:2px}
.ak-voet{color:var(--ink-muted);font-size:calc(12.5px * var(--fs));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ak-actie{padding:0 12px 12px}
.ak-actie .knop{width:100%}
.ak-badge{position:absolute;top:9px;left:9px;background:var(--geel);color:var(--op-geel);font-family:Archivo,sans-serif;font-size:calc(10px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:var(--r-label)}
.ak-meer{position:absolute;bottom:8px;right:8px;background:rgba(23,33,46,.72);color:#fff;font-size:calc(10.5px * var(--fs));font-weight:700;padding:2px 8px;border-radius:var(--r-label)}
.ma-thumb{flex:none;width:38px;height:38px;border-radius:8px;background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line)}
.bewerkfotos{display:flex;flex-wrap:wrap;gap:8px}
.bewerkfoto{position:relative;width:66px;height:66px;border-radius:9px;background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line);cursor:pointer;overflow:hidden}
.bewerkfoto input{position:absolute;opacity:0;width:0;height:0}
.bewerkfoto .bfweg{position:absolute;top:4px;right:4px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(23,33,46,.6);color:#fff}
.bewerkfoto:has(input:checked){outline:2px solid var(--rood);outline-offset:-2px}
.bewerkfoto:has(input:checked)::after{content:"";position:absolute;inset:0;background:rgba(212,42,42,.35)}
.bewerkfoto:has(input:checked) .bfweg{background:var(--rood)}

/* Detailweergave prijsregel */
.prijsregel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.prijsregel.groot{margin-bottom:12px}
.prijsregel .cat{font-size:calc(11px * var(--fs));text-transform:uppercase;letter-spacing:.04em;color:var(--ink-muted);background:var(--surface-2);padding:2px 8px;border-radius:var(--r-label)}

/* Mijn aanbod */
.mijnkop{display:flex;align-items:center;gap:9px;margin-top:18px}
.mijnkop .telbadge{font-family:Archivo,sans-serif;font-size:calc(12px * var(--fs));font-weight:800;background:var(--blauw);color:#fff;border-radius:999px;padding:1px 9px}
.mijnaanbod{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.mijnaanbod li{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-knop);padding:11px 14px}
.mijnaanbod a{text-decoration:none;color:var(--ink)}
.ma-wat{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.ma-wat a{min-width:0;overflow:hidden}
.ma-wat a b{overflow-wrap:anywhere}
.ma-prijs{color:var(--ink-muted);font-size:calc(13px * var(--fs));font-weight:600}
.ma-acties{display:flex;gap:6px;flex-wrap:wrap}
.ma-acties form{margin:0}
.mini.gevaar{color:var(--rood);border-color:var(--rood-wash)}
.mini.gevaar:hover{border-color:var(--rood)}
.brol.status-published{background:var(--groen-wash);color:var(--groen)}
.brol.status-reserved{background:var(--geel-wash);color:var(--geel-tekst)}
.brol.status-sold{background:var(--surface-2);color:var(--ink-muted)}
.brol.status-hidden{background:var(--surface-2);color:var(--ink-muted)}

@media(max-width:820px){
  .aanbodlayout{grid-template-columns:minmax(0,1fr)}
  .aanbodfilters{position:static}
  .filterlijst{flex-direction:row;flex-wrap:wrap}
  .filterlink{background:var(--surface-3)}
}

@media(max-width:820px){
  .beheerlayout{grid-template-columns:minmax(0,1fr)}
  .beheernav{position:static;flex-direction:row;overflow-x:auto;gap:4px;margin-bottom:14px;padding-bottom:4px}
  .beheernav a{white-space:nowrap}
  .wijkkeuze{grid-template-columns:1fr}
}

/* ---------- wijken: gids met bewoners ---------- */
.wijkenlayout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;align-items:start}
/* Eigen achtergrond zodat de zijbalk meteen als keuzelijst leest. */
.wijkzijbalk{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:6px;display:flex;flex-direction:column;gap:2px;position:sticky;top:84px}
.wijkzijbalk a{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid transparent;border-radius:var(--r-knop);text-decoration:none;color:var(--ink);transition:background .13s ease}
.wijkzijbalk a:hover{background:var(--surface-3)}
.wijkzijbalk a.actief{background:var(--surface-2);border-color:var(--line);font-weight:700}
.wijkzijbalk .wz-naam{flex:1;display:flex;flex-direction:column;line-height:1.2;min-width:0;font-size:calc(14.5px * var(--fs))}
.wz-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-mijn{font-size:calc(10px * var(--fs));font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--blauw)}
.wz-pc{flex:0 0 auto;font-family:Archivo,sans-serif;font-weight:700;font-size:calc(12px * var(--fs));color:var(--ink-muted)}
.wijkinhoud{min-width:0}
.ledenlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ledenlijst.kolom2{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.ledenlijst li{display:flex;align-items:center;gap:10px;font-size:calc(14.5px * var(--fs))}
.ledenlijst .t{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledenlijst .stempel{flex:0 0 auto}
.chatmini{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;color:var(--blauw)}
.chatmini:hover{background:var(--blauw-wash);border-color:var(--blauw)}

/* ---------- foto's bij een bericht ---------- */
.fotos{display:grid;gap:4px;margin:10px 0 0;border-radius:var(--r-knop);overflow:hidden}
.fotos.aantal-2{grid-template-columns:1fr 1fr}
.fotos.aantal-3{grid-template-columns:1fr 1fr 1fr}
.foto{position:relative;border:0;padding:0;margin:0;cursor:zoom-in;background-size:cover;background-position:center;background-color:var(--surface-2);aspect-ratio:4/3;width:100%}
.fotos.aantal-1 .foto{aspect-ratio:16/10}
.fotomeer{position:absolute;inset:0;display:grid;place-items:center;background:rgba(9,14,22,.52);color:#fff;font-family:Archivo,sans-serif;font-weight:800;font-size:calc(26px * var(--fs))}

/* Foto's kiezen in het plaatsformulier */
.fotoknop{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--blauw);font-weight:700;font-size:calc(14px * var(--fs));border:1.5px dashed var(--line);border-radius:var(--r-knop);padding:9px 13px;margin-bottom:4px;width:fit-content}
.fotoknop:hover{border-color:var(--blauw);background:var(--blauw-wash)}
.fotovoor{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.fotovoor .vt{position:relative;width:70px;height:70px;border-radius:8px;background-size:cover;background-position:center;background-color:var(--surface-2);border:1px solid var(--line-2)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(9,14,22,.88);display:flex;align-items:center;justify-content:center;padding:24px}
.lightbox img{max-width:94vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox .lbdicht,.lightbox .lbnav{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:999px;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
.lightbox .lbdicht{top:16px;right:16px;width:44px;height:44px}
.lightbox .lbnav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:26px}
.lightbox .lbvorige{left:14px}
.lightbox .lbvolgende{right:14px}
.lightbox .lbnav:hover,.lightbox .lbdicht:hover{background:rgba(255,255,255,.28)}
.lightbox .lbteller{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:calc(13px * var(--fs));background:rgba(0,0,0,.4);border-radius:999px;padding:4px 12px}
@media(max-width:820px){
  .wijkenlayout{grid-template-columns:minmax(0,1fr)}
  .wijkzijbalk{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .wijkzijbalk a{white-space:nowrap;flex:0 0 auto}
  .wijkzijbalk a.actief{box-shadow:none}
  .wijkzijbalk .wz-naam{flex-direction:row;gap:6px;align-items:center}
  .ledenlijst.kolom2{grid-template-columns:1fr}
}

/* ---------- toegankelijkheid: minder beweging ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .tegel:hover,.briefje:hover,.aanbodkaart:hover{transform:none}
}

/* ---------- gekozen sfeerachtergrond na inloggen ---------- */
body.heeft-achtergrond{background:transparent}
.appachtergrond{position:fixed;inset:0;z-index:-1;background-position:center;background-size:cover}
.appachtergrond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(247,244,236,.85) 0%, rgba(247,244,236,.92) 100%)}
.appachtergrond-credit{position:fixed;left:10px;bottom:8px;z-index:3;font-size:calc(10px * var(--fs));color:var(--ink-muted);background:rgba(255,255,255,.72);padding:2px 9px;border-radius:999px;text-decoration:none}
.appachtergrond-credit:hover{text-decoration:underline;background:rgba(255,255,255,.9)}

/* achtergrondkiezer in beheer */
.achtergrondkiezer{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin:10px 0 14px}
.agopt{display:block;cursor:pointer}
.agopt input{position:absolute;opacity:0;width:0;height:0}
.agthumb{display:block;height:74px;border-radius:var(--r-knop);background:var(--surface-2) center/cover no-repeat;border:2px solid var(--line);transition:border-color .13s ease,box-shadow .13s ease}
.agthumb.geen{display:grid;place-items:center;color:var(--ink-muted);font-weight:700;font-size:calc(13px * var(--fs));background:var(--surface-3)}
.agopt.gekozen .agthumb,.agopt:has(input:checked) .agthumb{border-color:var(--blauw);box-shadow:0 0 0 3px var(--blauw-wash)}
.agnaam{display:block;margin-top:4px;font-size:calc(10.5px * var(--fs));color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- voettekst (overal) ---------- */
.sitevoet{border-top:1px solid var(--line);background:var(--surface)}
.sitevoet-in{max-width:1260px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
.sitevoet-merk{font-size:calc(13px * var(--fs));color:var(--ink-muted);font-weight:600}
.sitevoet-links{display:flex;gap:18px;flex-wrap:wrap}
.sitevoet-links a{font-size:calc(13px * var(--fs));color:var(--ink-muted);text-decoration:none;font-weight:600;transition:color .13s ease}
.sitevoet-links a:hover{color:var(--blauw);text-decoration:underline;text-underline-offset:2px}

/* ---------- openbare paginalayout + leesblok ---------- */
.paginatop{background:var(--surface);border-bottom:1px solid var(--line)}
.paginatop-in{max-width:1260px;margin:0 auto;padding:14px 20px}
.paginatop .merk img{display:block;height:44px;width:auto}
.paginawrap{padding:26px 20px 48px}
.leesblok{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:28px 30px}
.leesblok h1{font-size:calc(27px * var(--fs));margin:0 0 6px}
.leesblok h2{font-family:Archivo,sans-serif;font-size:calc(18px * var(--fs));font-weight:800;margin:26px 0 8px}
.leesblok h3{font-size:calc(15.5px * var(--fs));font-weight:700;margin:16px 0 4px}
.leesblok p{margin:0 0 12px;line-height:1.6;font-size:calc(15px * var(--fs))}
.leesblok ul{margin:0 0 14px;padding-left:20px;line-height:1.6;font-size:calc(15px * var(--fs))}
.leesblok li{margin:0 0 5px}
.leesblok a{color:var(--blauw);font-weight:600}
.leesblok .regeltekst{background:var(--surface-3);border:1px solid var(--line);border-radius:10px;padding:12px 15px;line-height:1.6}
@media(max-width:600px){ .leesblok{padding:20px 18px} }

/* ---------- akkoord-vinkjes bij aanmelden ---------- */
.akkoordblok{display:flex;flex-direction:column;gap:9px;margin:4px 0 16px}
.vinkje.akkoord{display:flex;align-items:flex-start;gap:9px;font-size:calc(13.5px * var(--fs));color:var(--ink);line-height:1.4}
.vinkje.akkoord input{margin-top:2px;flex:none}
.vinkje.akkoord a{color:var(--blauw);font-weight:700}