/* =========================================================
   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;
}
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}
.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{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:var(--surface);border-radius:var(--r-kaart);box-shadow:var(--schaduw);
  padding:18px 20px;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;
  background:linear-gradient(to bottom,
    var(--rood) 0 33.34%, var(--geel) 33.34% 66.67%, var(--blauw) 66.67% 100%);
}
.welkom .binnen{padding-left:10px}
.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}
.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)}
.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);border:2px dashed var(--line);border-radius:var(--r-kaart);padding:32px 20px;text-align:center;color:var(--ink-muted)}
.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}

/* ---------- 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}
.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,.briefje > .draad{padding:0}
.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.letop{background:var(--rood);color:var(--op-rood)}
.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:11px}
.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)}
.rform .knop{height:36px;font-size:calc(13.5px * var(--fs))}
.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)}
.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;
}
.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}
.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}
.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 .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}

/* 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 b{display:block;font-size:calc(15.5px * var(--fs));font-weight:700}
.gesprekkop .overwat{font-size:calc(12.5px * var(--fs));color:var(--blauw);font-weight:600}
.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}

/* ---------- 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:14px;align-items:start;margin-top:14px}
  .kaart+.kaart{margin-top:0}
  .zwevers,.beheerpaneel{right:14px}
  .tegels{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .hoofdnav,.iconknop.verberg-sm,.wie{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(5,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}
}

@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}