/* Origineel uit Riks camperreis-web (letterlijk overgenomen). */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#eef2f1;--ink:#17272b;--mut:#4f6469;--card:#fff;--line:#c9d5d3;--acc:#1f5fbf;--wn:#b4452f;--ok:#1f7a4d}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#10191b;--ink:#e6eeee;--mut:#9db2b5;--card:#17252a;--line:#2a3c40;--acc:#7fb0ff;--wn:#ff8c75;--ok:#5fd09a}}
:root[data-theme=dark]{--bg:#10191b;--ink:#e6eeee;--mut:#9db2b5;--card:#17252a;--line:#2a3c40;--acc:#7fb0ff;--wn:#ff8c75;--ok:#5fd09a}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0 auto;background:var(--bg);color:var(--ink);font:17px/1.5 system-ui,sans-serif;max-width:680px;padding:16px}
h1{font-size:1.5rem;margin:.2em 0}h2{font-size:1.15rem;margin:.3em 0}p{margin:.35em 0}.sub{color:var(--mut)}
.d{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:10px 0}
.d.fest{border-left:4px solid var(--ok)}
.h{display:flex;gap:10px;align-items:center;color:var(--mut);font-size:.95rem}.n{font-weight:700;color:var(--ink)}.km{margin-left:auto;font-weight:700;color:var(--acc)}.km.warn{color:var(--wn)}
.tol{color:var(--wn)}
.b{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn{background:var(--acc);color:var(--bg);padding:11px 14px;border-radius:7px;font-weight:700;text-decoration:none}.btn.alt{background:transparent;color:var(--acc);border:2px solid var(--acc)}
.top{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:8px;padding:12px 14px;margin:12px 0}
.g{font-size:.9rem;color:var(--mut)}
button.btn{border:0;font:inherit;font-weight:700;cursor:pointer;text-align:left}button.sy{background:transparent;color:var(--acc);border:2px solid var(--acc)}details.sg{margin-top:12px}details.sg summary{cursor:pointer;font-weight:700;color:var(--acc);padding:6px 0}details.sg ul{padding-left:1.2em;margin:.3em 0}details.sg li{margin:.35em 0}


body{max-width:680px;margin:0 auto;padding:0 0 40px}
#store{display:none}
.ah{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;background:var(--acc);color:var(--bg);padding:8px 10px}
.ah button{background:transparent;border:0;color:inherit;font-size:1.8rem;line-height:1;padding:6px 10px;cursor:pointer}
.tt{display:flex;flex-direction:column;line-height:1.15;min-width:0}.tt b{font-size:1.1rem}.tt span{font-size:.8rem;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg{margin-left:auto;display:flex;padding-left:.6rem;flex-shrink:0}
.stk{display:inline-flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);font-size:1.3rem;margin-left:-.6rem;transform:rotate(var(--r,0deg));flex-shrink:0}
.stk.big{width:3.7rem;height:3.7rem;font-size:2.1rem;margin:0 -.15rem}
.stk.mid{width:3rem;height:3rem;font-size:1.7rem;margin:0}
#ov{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}
#dr{position:fixed;top:0;left:0;bottom:0;width:min(86vw,350px);background:var(--card);color:var(--ink);z-index:50;transform:translateX(-105%);transition:transform .22s;overflow:auto;box-shadow:2px 0 14px rgba(0,0,0,.45);padding:14px;box-sizing:border-box;padding-top:calc(14px + env(safe-area-inset-top,0px))}
#dr.on{transform:none}
.dh{display:flex;align-items:center;justify-content:space-between;font-size:1.15rem;margin-bottom:6px}
.dh button{background:transparent;border:0;color:var(--ink);font-size:1.5rem;cursor:pointer;padding:4px 8px}
.ri{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:transparent;color:var(--ink);border:2px solid var(--line);border-radius:12px;padding:10px;margin:8px 0;font:inherit;cursor:pointer}
.ri.act{border-color:var(--acc);background:rgba(31,95,191,.12)}
.ri div{display:flex;flex-direction:column;line-height:1.25;min-width:0}.ri div b{font-size:1rem}.ri div span{font-size:.85rem;color:var(--mut)}
.vw{padding:14px}
.hero{text-align:center;padding:10px 0 6px}.hero .row{display:flex;justify-content:center;margin:6px 0 10px}
.hero h1{margin:.2em 0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:700;font-size:.9rem}
.tile{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px;margin:8px 0;font:inherit;cursor:pointer}
.tile .dn{font-weight:700;color:var(--acc);min-width:3.4rem}.tile .dr{flex:1;min-width:0}.tile .km{margin-left:auto;font-weight:700;color:var(--acc);white-space:nowrap}.tile .km.warn{color:var(--wn)}.tile::after{content:'\203A';font-size:1.5rem;color:var(--mut)}
.tile.fest{border-left:4px solid var(--ok)}
.tile{flex-wrap:wrap;gap:2px 10px}.tile .dn{flex:1 1 auto}.tile .dr{flex:1 1 100%;order:3}.tile .km{order:2}.tile::after{display:none}
.sec{font-weight:700;margin:16px 0 4px}
#sh{position:fixed;inset:0;z-index:60;background:var(--bg);color:var(--ink);overflow:auto;transform:translateY(105%);transition:transform .25s;visibility:hidden}
#sh.on{transform:none;visibility:visible}
.sb{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:6px;background:var(--acc);color:var(--bg);padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
.sb button{background:transparent;border:0;color:inherit;font-size:1.6rem;cursor:pointer;padding:4px 10px;line-height:1}
.sb button[disabled]{opacity:.3}
.logo{width:2.8rem;height:2.8rem;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);flex-shrink:0}.hl{display:block;width:100%;max-width:640px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;border:4px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.4);margin:0 auto 12px}
.stk img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.sb .stk{width:3.3rem;height:3.3rem}
#st{flex:1;text-align:center;font-weight:700}
#sc{max-width:680px;margin:0 auto;padding:12px}

/* ---- Aanvullingen TravelCommunityGo ---- */
a.ri{box-sizing:border-box;text-decoration:none}
.logo-leeg{display:inline-flex;align-items:center;justify-content:center;background:#fff;font-size:1.5rem}
.logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
span.logo{overflow:hidden}
.reis{display:flex;gap:12px;align-items:center;background:var(--card);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:10px;padding:10px;margin:8px 0;text-decoration:none}
.reis img{width:96px;height:54px;object-fit:cover;border-radius:6px;flex-shrink:0}
.reis div{display:flex;flex-direction:column;line-height:1.25;min-width:0}.reis div span{font-size:.85rem;color:var(--mut)}
#balken{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
.balk{background:var(--ink);color:var(--bg);padding:10px 14px;font-size:.95rem;text-align:center}
.balk[hidden]{display:none}
.balk-update{background:var(--ok);color:#fff}
.balk-update button{margin-left:8px;background:#fff;color:var(--ok);border:0;border-radius:6px;padding:6px 12px;font:inherit;font-weight:700;cursor:pointer}
#melding{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:80;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:8px;max-width:calc(100vw - 32px);box-sizing:border-box;font-size:.95rem}
#melding[hidden]{display:none}
.versie{margin-top:18px}
body.balk-aan{padding-bottom:130px}
/* Snelkoppelingen: rondjes met label eronder */
.snel{gap:0;align-items:flex-start;flex-wrap:wrap;row-gap:6px}
.snel-i{position:relative;display:flex;flex-direction:column;align-items:center;width:3.45rem}
.snel .stk.big{margin:0}
.snel-i a.stk{text-decoration:none;color:inherit}
.snel-l{font-size:.7rem;line-height:1.1;color:var(--mut);margin-top:3px;max-width:3.4rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snel-x{position:absolute;top:-4px;right:-2px;width:1.6rem;height:1.6rem;border-radius:50%;border:2px solid #fff;background:var(--wn);color:#fff;font-size:.8rem;line-height:1;cursor:pointer;z-index:2}
.snel-acties{margin:4px 0 8px;font-size:.9rem}
.snel-knop{background:none;border:0;color:var(--acc);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:6px 4px}
.snel-kies{text-align:left;margin:8px 0}
.snel-plus{cursor:pointer;color:var(--ink);font:inherit;font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:4px}
.snel-plus img{width:1.3rem;height:1.3rem;border-radius:50%;object-fit:cover}
.nog-niet{border-left:4px solid var(--wn)}
/* Formulieren (accounts, reis beheren) */
.formulier h2{margin-bottom:8px}
.veld{display:block;margin:10px 0;border:0;padding:0}
.veld>span,.veld legend{display:block;font-weight:700;font-size:.92rem;margin-bottom:4px}
.veld input[type=text],.veld input[type=email],.veld input[type=password],.veld input[type=date],.veld textarea{box-sizing:border-box;width:100%;font:inherit;padding:10px 12px;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--acc)}
.keuze{display:block;margin:8px 0;padding:8px 10px;border:2px solid var(--line);border-radius:8px;cursor:pointer}
.keuze input{margin-right:6px}
.keuze.bevestig{border-style:dashed}
.formfout{color:var(--wn);font-weight:700}
.formfout[hidden]{display:none}
.rij{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.reis-leeg{width:96px;height:54px;border-radius:6px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0}
/* Inloggen met Google */
.btn.google{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#1f1f1f;border:1px solid #747775;border-radius:20px;padding:10px 18px;font-weight:600}
.g-logo{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);color:#fff;font-weight:800;font-size:.8rem}
/* Staande versie van het hoofdbeeld op telefoons */
@media (max-width:600px) and (orientation:portrait){.hero picture .hl{aspect-ratio:4/5}}
/* Foto's in een dagblad of bij een reis */
.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin:12px 0}
.fotos a{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--line)}
.fotos img{width:100%;height:100%;object-fit:cover;display:block}
.ps-reis{display:block}
progress{width:100%;height:14px}
/* Boegbeeld (Rik) op het startscherm en zijn profiel */
.boegbeeld{display:flex;gap:14px;align-items:center;border-left:4px solid var(--ok)}
.boegbeeld .bb-foto{width:86px;height:86px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);flex-shrink:0}
.boegbeeld div{display:flex;flex-direction:column;min-width:0}.boegbeeld b{font-size:1.2rem}.boegbeeld p{margin:.3em 0}
.bb-label{display:inline-block;margin:6px auto}
@media (max-width:420px){.boegbeeld{flex-direction:column;text-align:center}.boegbeeld div{align-items:center}}
.intro-kop{font-size:1.1rem;font-weight:600;margin:.4em 0}
.intro-item{display:flex;gap:12px;align-items:flex-start}.intro-item .stk{flex-shrink:0}.intro-item p{margin:.2em 0 0}
.intro-belofte{border-left:4px solid var(--ok)}.intro-belofte ul{margin:.4em 0;padding-left:1.2em}.intro-belofte li{margin:.2em 0}
.intro-knoppen{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;margin:18px 0}
/* Community (fase 5) */
.sterren{color:#e0a100;letter-spacing:1px;font-size:1.15rem}
.geef-sterren{display:flex;align-items:center;gap:2px;flex-wrap:wrap}.ster{background:none;border:0;font-size:1.9rem;line-height:1;color:var(--line);padding:4px 3px;cursor:pointer;min-width:40px;min-height:44px}.ster.aan{color:#e0a100}
.reactie{border-top:1px solid var(--line);padding:8px 0}.reactie:first-of-type{border-top:0}.reactie p{margin:.2em 0}.reactie.verborgen{opacity:.65}
.reactie-knoppen{display:flex;gap:6px;flex-wrap:wrap}.melden-rij{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.tellers{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:6px 0}
.feed-reactie{display:block;color:inherit;text-decoration:none}.feed-tekst{display:block;margin-top:4px}
a.d.rij{color:inherit;text-decoration:none}
.rapport-kaart blockquote{margin:6px 0;padding:6px 10px;border-left:3px solid var(--line);white-space:pre-wrap;word-break:break-word}.rapport-acties{display:flex;gap:8px;flex-wrap:wrap}
.rapport-form select,.zoek input{width:100%}
/* Rondje met een nieuwe melding: vooraan, twee keer zo groot, knippert langzaam tot je hem opent */
.snel-i.nieuw{width:6.9rem}
.snel .snel-i.nieuw .stk.big{width:7.4rem;height:7.4rem;font-size:4.2rem;animation:knipper 2.4s ease-in-out infinite;border-color:var(--acc)}
.snel-i.nieuw .snel-l{max-width:6.8rem;font-weight:700;color:var(--ink)}
.snel-tel{position:absolute;top:0;right:2px;min-width:1.6rem;height:1.6rem;padding:0 5px;border-radius:999px;background:var(--wn);color:#fff;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;border:2px solid #fff;z-index:2}
@keyframes knipper{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(31,95,191,.55)}50%{opacity:.45;box-shadow:0 0 0 10px rgba(31,95,191,0)}}
@media (prefers-reduced-motion:reduce){.snel .snel-i.nieuw .stk.big{animation:none;box-shadow:0 0 0 4px var(--acc)}}
/* Meldingen en chat */
a.melding{display:flex;gap:12px;align-items:flex-start}.melding.nieuw,.gesprek.nieuw{border-left:4px solid var(--acc)}
.melding-tekst{display:flex;flex-direction:column;gap:2px}.melding-voorproef{font-style:italic}
.tel{display:inline-block;min-width:1.4rem;padding:0 6px;border-radius:999px;background:var(--wn);color:#fff;font-weight:700;font-size:.8rem;text-align:center}
.chat-lijst{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto;padding:4px 2px;margin:8px 0}
.bel{align-self:flex-start;max-width:82%;background:var(--card);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px}
.bel.mijn{align-self:flex-end;background:var(--acc);color:var(--bg);border-color:var(--acc);border-radius:14px 14px 4px 14px}.bel.mijn .g{color:inherit;opacity:.8}
.bel p{margin:0;white-space:pre-wrap;word-break:break-word}.bel .g{font-size:.75rem}
.chat-form{display:flex;gap:8px;align-items:flex-end}.chat-form .veld{flex:1;margin:0}.chat-form textarea{width:100%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Profielfoto en rondjes op elk scherm */
.stk img[data-avatar]:not([hidden])+span{display:none}
.hero.snel-boven{padding:4px 0 0;margin:0 0 6px}.snel-boven .snel{justify-content:center}
.foto-knoppen{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:4px 0}.foto-kies{cursor:pointer}.foto-uitleg{font-size:.85rem}
/* Header-logo (banner): alleen in de webversie */
.banner{display:none}
/* Kolommen: op telefoon onder elkaar (zij-eerst: de zijkolom bovenaan) */
.kolommen{display:flex;flex-direction:column}.kolommen.zij-eerst .kol-zij{order:-1}.kol-hoofd,.kol-zij{min-width:0}
.breed:empty{display:none}

/* ---------- Webversie: breed scherm vanaf 1024 px ---------- */
@media (min-width:1024px){
  body{max-width:1480px;display:grid;grid-template-columns:280px minmax(0,1fr);column-gap:28px;padding:0 28px 48px;box-sizing:border-box}
  .banner{display:block;grid-column:1/-1;grid-row:1}
  .banner img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
  /* Kopstuk (keuze 7, TravelCampGo-stijl): logo, groen-oranje streep, donkere knoppenbalk met ☰ en de rondjes */
  .ah{position:relative;top:auto;grid-column:1/-1;grid-row:2;margin:0;padding:2px 18px 4px;background:#0e1a26;color:#fff;border-radius:0 0 14px 14px;
      border-top:4px solid transparent;border-image:linear-gradient(90deg,#5bbf2a,#f5a316) 1;align-items:center;gap:6px;z-index:30}
  .ah #hl,.ah .tt{display:none}
  .kopbalk{flex:1;min-width:0}
  /* Rij in het midden van de balk; de oplichtende knop op dezelfde middellijn als de rest. Rechts evenveel ruimte als ☰ links. */
  .kopbalk{padding-right:48px}
  .kopbalk .snel{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;padding-top:12px;margin:0}
  /* Compacte knoppenbalk: iets kleinere knoppen; een nieuwe melding blijft 1,5 keer zo groot */
  .kopbalk .snel .stk.big{width:3.7rem;height:3.7rem;font-size:2rem}
  .kopbalk .snel-i{width:3.9rem;margin-left:-1.3rem}.kopbalk .snel-i:first-child{margin-left:0}
  .kopbalk .snel-i.nieuw{width:6.4rem}
  .kopbalk .snel .snel-i.nieuw .stk.big{width:5.55rem;height:5.55rem;font-size:3rem}
  .kopbalk .snel-l{max-width:2.75rem;font-size:.6rem;min-height:2.2em}
  .kopbalk .snel-plusknop{margin-left:.4rem}
  .kopbalk .snel-i{justify-content:flex-start}
  .kopbalk .snel-l{color:#c4d0d8}
  .kopbalk .snel-i.nieuw .snel-l{color:#fff}
  .kopbalk .snel-acties{text-align:center;margin:0 0 2px;font-size:.8rem}
  .kopbalk .snel-knop{color:#8fe05a;font-size:.78rem;padding:2px 4px}
  .kopbalk .snel .stk.plus{background:transparent;border-color:#5bbf2a;color:#5bbf2a}
  .kopbalk .snel .stk.plus:hover,.kopbalk .snel .stk.plus.open{background:#5bbf2a;color:#0e1a26}
  .kopbalk .snel-kies{background:var(--card);color:var(--ink);border-radius:12px;padding:10px 16px;margin:8px auto 10px;max-width:900px}
  .kopbalk .snel-kies .snel-knop{color:var(--acc)}
  .kopbalk .snel-tel{background:#f5a316}
  .snel-boven:empty,.hero.snel-boven:empty{display:none}
  .banner img{border-radius:14px 14px 0 0;box-shadow:none}
  .banner{margin:18px 0 0}
  #balken{grid-column:1/-1;grid-row:3}
  #dx{display:none}
  /* Hamburger klapt de zijbalk in en uit */
  body.zij-dicht #dr{display:none}
  body.zij-dicht #mn{grid-column:1/-1}
  #ov{display:none!important}
  #dr{grid-column:1;grid-row:4;position:sticky;top:16px;bottom:auto;left:auto;align-self:start;width:auto;max-height:calc(100vh - 32px);transform:none;transition:none;
      box-shadow:none;border:1px solid var(--line);border-radius:14px;margin-top:20px;z-index:1;padding:12px}
  #dr .dh{display:none}
  #mn{grid-column:2;grid-row:4;min-width:0;max-width:820px;padding:20px 0}
  #mn:has(.breed){max-width:none}
  .kolommen{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
  .kolommen.zij-eerst .kol-zij{order:0}
  .kol-zij{position:sticky;top:16px}
  .kol-zij .boegbeeld{flex-direction:column;text-align:center}.kol-zij .boegbeeld div{align-items:center}
  .kol-zij .boegbeeld .bb-foto{width:140px;height:140px}
  .reis-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:0 16px}
  .route-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
  .hl{max-width:none}
  .hero.intro .hl{max-width:900px}
  .intro-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .snel{justify-content:center}
  /* Dagblad als paneel rechts, naast de lijst met dagen */
  #sh{left:auto;width:min(620px,44vw);box-shadow:-6px 0 22px rgba(0,0,0,.28);transform:translateX(105%)}
  #sh.on{transform:none}
  body.dag-open #mn{margin-right:calc(min(620px,44vw) - 28px)}
  #mn button[data-d].act{outline:3px solid var(--acc);outline-offset:-3px}
  #melding{bottom:28px}
}
@media (min-width:1600px){
  body{grid-template-columns:300px minmax(0,1fr)}
  .kolommen{grid-template-columns:minmax(0,1fr) 400px}
}
/* Ontworpen knoppen (img/knoppen): alleen in de webversie; op de telefoon het plaatje (emoji) */
.knop-ik,.stk .knop-ik{display:none}
@media (min-width:1024px){
  .knop-ik,.stk .knop-ik{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
  .knop-em{display:none}
  .stk:has(.knop-ik){background:transparent;border-color:transparent;box-shadow:0 3px 8px rgba(0,0,0,.22)}
  .snel-plus .knop-ik{width:1.5rem;height:1.5rem}
}
/* Plusknop: alleen in de webversie (op de telefoon blijft "Aanpassen") */
.snel-plusknop{display:none}
@media (min-width:1024px){
  /* Knoppen liggen iets over elkaar; de linker bovenop */
  .snel{justify-content:center;align-items:flex-end;padding-top:18px}
  .snel-i{width:4.5rem;margin-left:-1.55rem;transition:width .5s}
  .snel-i:first-child{margin-left:0}
  .snel .stk.big{width:4.4rem;height:4.4rem;font-size:2.4rem;transition:width .5s,height .5s}
  /* Onderschrift op twee smalle regels, zodat het past ondanks de overlap */
  .snel-l{max-width:3.05rem;font-size:.64rem;line-height:1.12;white-space:normal;hyphens:manual;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:clip;min-height:2.3em}
  /* Nieuwe melding: 1,5 keer zo groot en gloeien (geen knipperen in de webversie) */
  .snel-i.nieuw{width:7.8rem}
  .snel .snel-i.nieuw .stk.big{width:6.6rem;height:6.6rem;font-size:3.6rem;animation:gloei 2.2s ease-in-out infinite;border-color:transparent}
  .snel-i.nieuw .snel-l{max-width:6.8rem}
  .snel-tel{top:-14px;left:50%;right:auto;transform:translateX(-50%);min-width:2rem;height:2rem;font-size:1rem;box-shadow:0 2px 6px rgba(0,0,0,.3)}
  /* Plusknop rechts */
  .snel-plusknop{display:flex;margin-left:.5rem}
  .snel .stk.plus{background:var(--card);border:3px dashed var(--acc);color:var(--acc);font-size:2.4rem;font-weight:700;line-height:1;cursor:pointer;box-shadow:none;transform:none}
  .snel .stk.plus:hover,.snel .stk.plus.open{background:var(--acc);color:var(--bg);border-style:solid}
  .plus-paneel{max-width:640px;margin:10px auto}
  .plus-paneel .formulier h2{font-size:1rem}
  .plus-paneel select{width:100%;font:inherit;padding:8px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
}
@keyframes gloei{0%,100%{box-shadow:0 0 0 0 rgba(255,190,60,.0),0 3px 10px rgba(0,0,0,.25)}50%{box-shadow:0 0 22px 9px rgba(255,190,60,.75),0 3px 10px rgba(0,0,0,.25)}}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.snel .snel-i.nieuw .stk.big{animation:none;box-shadow:0 0 14px 6px rgba(255,190,60,.7)}.snel-i,.snel .stk.big{transition:none}}
.dr-sec{font-weight:700;font-size:.85rem;color:var(--mut);margin:12px 4px 4px;text-transform:uppercase;letter-spacing:.05em}
/* Kleuren van de webversie: groen en oranje, zoals het kopstuk (keuze 7). De telefoon houdt zijn kleuren. */
@media (min-width:1024px){:root{--acc:#2a7a18;--ok:#2a7a18}}
@media (min-width:1024px) and (prefers-color-scheme:dark){:root:not([data-theme=light]){--acc:#7fd65a;--ok:#7fd65a}}
@media (min-width:1024px){:root[data-theme=dark]{--acc:#7fd65a;--ok:#7fd65a}}

/* Reisplanner (fase A) */
.planner .chips .keuze{display:inline-block;margin:0}
.planner .veld input[type=number],.planner .veld select{box-sizing:border-box;width:100%;font:inherit;padding:10px 12px;border:2px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.planner .veld input[type=range]{width:100%;accent-color:var(--acc)}
.pl-plaats>label>span{display:block;font-weight:700;font-size:.92rem;margin-bottom:4px}
.pl-rij{display:flex;gap:6px}.pl-rij input{flex:1;min-width:0}.pl-rij .btn{padding:8px 12px}
.pl-lijst{display:flex;flex-direction:column}
.pl-optie{display:block;width:100%;text-align:left;font:inherit;background:var(--card);color:var(--ink);border:1px solid var(--line);border-top:0;padding:8px 12px;cursor:pointer}
.pl-optie:first-child{border-top:1px solid var(--line);border-radius:8px 8px 0 0}.pl-optie:last-child{border-radius:0 0 8px 8px}.pl-optie:only-child{border-radius:8px}
.pl-optie:hover,.pl-optie:focus{background:var(--bg)}
.pl-dag details{margin-top:10px}.pl-dag summary{cursor:pointer;font-weight:700;color:var(--acc);padding:4px 0}
.pl-alt{list-style:none;padding:0;margin:.3em 0}.pl-alt li{border-top:1px solid var(--line);padding:8px 0}
.bron{margin:16px 4px}
.pl-sec{margin:12px 0 4px}
.pl-zien{list-style:none;padding:0;margin:.2em 0}.pl-zien li{margin:.35em 0}
.pl-ik{display:inline-block;width:1.6em}
.pl-met{font-size:.78rem;padding:1px 8px}
details.pl-omgeving{margin-top:10px}details.pl-omgeving summary{cursor:pointer;font-weight:700;color:var(--acc);padding:4px 0}
.chip.act{background:var(--acc);color:var(--bg);border-color:var(--acc)}
/* De rondjes stapelen onderling (z-index per rondje), maar nooit boven het menu of de kopbalk. */
.snel{isolation:isolate}

/* Profiel: losse vensters naast elkaar (Polarsteps, Volgend, Moderatie, Geblokkeerd) */
.profiel-tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:14px 0;align-items:start}
.profiel-tegels .tegels-los{display:contents}
.profiel-tegel{display:flex;flex-direction:column;gap:6px;margin:0;color:var(--ink);text-decoration:none}
a.profiel-tegel:hover{border-color:var(--acc)}
.profiel-tegel>b{font-size:1.05rem}
.profiel-tegel>.btn{align-self:flex-start;margin-top:6px}
.profiel-tegel .rij{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0}
.polarsteps-tegel.eerste{grid-column:1/-1;border:2px solid var(--acc)}
.stappen{margin:.3em 0;padding-left:1.3em}.stappen li{margin:.35em 0}
/* Zijbalk: het venster dat open staat gloeit, net als een rondje bovenin met iets nieuws */
#drl a.ri.open{border-color:var(--acc);animation:gloei 2.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){#drl a.ri.open{animation:none;box-shadow:0 0 12px 4px rgba(255,190,60,.6)}}