:root {
  --papier: #f6f5f1; --bg: var(--papier); --surface: #fff; --vlak: #fff; --vlak-2: var(--papier);
  --orange: #86bc97;   /* de knopkleur uit camknop.css van CIRQO */
  --teal-green: #83bd9b; --sky-blue: #72c3db; --text-secondary: #6e6e73;   /* cirqo-nl-tokens.css */
  --ink: #16191A; --tekst-2: #555C5F; --tekst-3: #858B8E; --lijn: #E5E8E7; --lijn-2: #EEF0EF;
  --teal: #1E7A6C; --teal-2: #186559; --groen-ok: #1F7A4D;
  --schaduw-1: 0 1px 2px rgba(16,24,22,.06), 0 2px 8px rgba(16,24,22,.05);
  --schaduw-2: 0 1px 3px rgba(16,24,22,.08), 0 12px 32px rgba(16,24,22,.10);
  --r: 20px; --r-2: 18px; --r-3: 12px;
  --kop-font: "Outfit", "Geist", -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --font: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --paneel-b: 400px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.45; }
button { font-family: inherit; color: inherit; }
a { color: var(--teal); }
#kaart { position: fixed; inset: 0; background: var(--bg); }
.maplibregl-ctrl-attrib { font-size: 10.5px; background: rgba(255,255,255,.85) !important; color: var(--tekst-3); border-radius: 8px !important; }
.maplibregl-ctrl-bottom-right { right: 8px; }
.maplibregl-ctrl-top-right { top: 16px; right: 16px; }
.maplibregl-ctrl-group { border-radius: var(--r-3) !important; box-shadow: var(--schaduw-1) !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 34px; height: 34px; }
.num { font-variant-numeric: tabular-nums; }

/* kop */
.kop { position: fixed; z-index: 5; top: 16px; left: calc(var(--paneel-b) + 32px); pointer-events: none; }
.merk { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; background: var(--geel);   /* geel: de witte rand van de sticker moet zichtbaar zijn (logo 28-9) */
  border-radius: var(--r-2); padding: 10px 14px 9px 14px; box-shadow: var(--schaduw-1); }
.merk i { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(30,122,108,.14); }
.merk b { font-weight: 600; letter-spacing: -0.02em; font-size: 15px; }
.merk-logo { display: block; height: 58px; width: auto; overflow: visible; }   /* slimwegdoen (2-10): iets groter, de rondjes maken de doos kleiner */

/* paneel */
.paneel { position: fixed; z-index: 6; top: 16px; left: 16px; bottom: 16px; width: var(--paneel-b); background: var(--bg); transition: width 420ms var(--ease); border-radius: var(--r); box-shadow: var(--schaduw-2); display: flex; flex-direction: column; overflow: hidden; }
.greep { display: none; }
.paneel-inhoud { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 24px 24px 32px; }
.paneel-inhoud::-webkit-scrollbar { width: 8px; } .paneel-inhoud::-webkit-scrollbar-thumb { background: #e2e5e4; border-radius: 8px; }
h1, h2, h3 { margin: 0; font-family: var(--kop-font); font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: 26px; line-height: 1.15; }
h2 { font-size: 22px; line-height: 1.2; }
h3 { font-size: 15px; letter-spacing: -0.01em; }
.lead { color: var(--tekst-2); font-size: 15px; line-height: 1.5; margin: 8px 0 0; }
.klein { font-size: 13px; color: var(--tekst-3); line-height: 1.45; }
.oog { font-size: 13px; color: var(--tekst-3); margin-bottom: 4px; }
.terug { border: 0; background: none; padding: 4px 0; font-size: 14px; font-weight: 500; color: var(--tekst-2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 14px; }
.terug:hover { color: var(--ink); }
.terug svg { width: 16px; height: 16px; }
.sectie { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--lijn); }
.sectie-kop { font-size: 13px; font-weight: 600; color: var(--tekst-3); margin: 0 0 10px; letter-spacing: 0; }

/* velden */
.veld { position: relative; margin-top: 18px; }
.veld label { display: block; font-size: 13px; font-weight: 500; color: var(--tekst-2); margin: 0 0 6px; }
.invoer { display: flex; align-items: center; gap: 8px; height: 48px; border-radius: var(--r-3); background: #fff; padding: 0 6px 0 14px; border: 1px solid #e6e4dc; transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease); }
.invoer:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(30,122,108,.14); }
.invoer svg { width: 17px; height: 17px; color: var(--tekst-3); flex: 0 0 17px; }
.invoer input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 15.5px var(--font); color: var(--ink); }
.invoer input::placeholder { color: #9aa0a2; }
.invoer .wis { border: 0; background: none; width: 30px; height: 30px; border-radius: 8px; color: var(--tekst-3); cursor: pointer; display: none; font-size: 13px; }
.invoer .wis:hover { background: var(--vlak); }
.invoer.gevuld .wis { display: block; }
.suggesties { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border-radius: var(--r-2); box-shadow: var(--schaduw-2); border: 1px solid var(--lijn); padding: 4px; list-style: none; margin: 0; display: none; max-height: 320px; overflow-y: auto; }
.suggesties.open { display: block; }
.suggesties li { padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 14.5px; display: flex; justify-content: space-between; gap: 10px; }
.suggesties li small { color: var(--tekst-3); font-size: 12.5px; }
.suggesties li.actief, .suggesties li:hover { background: var(--vlak); }
.adres-rij { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.adres-rij .invoer { padding-left: 14px; }
.adres-uit { margin: 6px 0 0; font-size: 13px; color: var(--tekst-2); min-height: 0; }
.adres-uit:empty { display: none; }
.adres-uit.fout { color: #A33B2B; }
.locatie-knop { border: 0; background: none; color: var(--teal); font-weight: 500; font-size: 14px; padding: 8px 0 0; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 0; background: #fff; border-radius: 999px; padding: 8px 13px 8px 11px; font-size: 14px; font-weight: 500; color: var(--ink); cursor: pointer; box-shadow: 0 1px 2px rgba(60,50,30,.06); transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease); }
.chip:hover { box-shadow: 0 1px 2px rgba(60,50,30,.06), 0 0 0 1.5px var(--orange); }
.chip svg { width: 17px; height: 17px; color: var(--teal); flex: 0 0 17px; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.beste.cirqo { background: #fff; }
/* 9-10: ontruiming aanvragen, bij het advies voor een hele inboedel */
.ontr-cta { display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px; align-items: center; gap: 14px; margin: 16px 0 6px; padding: 14px 16px 14px 14px;
  border-radius: 20px; background: var(--geel, #ffdc4f); color: var(--ink); text-decoration: none; }
.ontr-cta b { display: block; font: 700 17px var(--kop-font, inherit); letter-spacing: -0.01em; }
.ontr-cta small { display: block; margin-top: 2px; font-size: 13.5px; opacity: .75; }
.ontr-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blauw, #14163a); color: #fff; }
.ontr-ic svg { width: 22px; height: 22px; } .ontr-pijl { width: 22px; height: 22px; }
.ontr-cta:active { transform: scale(.985); }
.cirqo-logo { height: 18px; width: auto; vertical-align: -4px; }
.partner-stil { margin: 18px 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--tekst-3); }
.partner-stil a { color: inherit; }
.beste-lbl .via { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--tekst-2); }
.beste.cirqo .beste-lbl { color: var(--ink); font-size: 14px; gap: 8px; }
.partner { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 12.5px; color: var(--tekst-3); text-decoration: none; line-height: 1.45; }
.partner .cirqo-logo { height: 22px; flex: 0 0 auto; }
.partner:hover span { color: var(--tekst-2); }
.zoek-rij { display: grid; grid-template-columns: 1fr; }
.zoek-rij > .invoer, .adres-rij > .invoer { min-width: 0; }

/* ---- cameraknop van CIRQO (cirqo-koppeling/huisstijl/camknop.css, ongewijzigd) ---- */
/* Cameraknop met gloed en plusje: de hoofdactie op /spullen-aanbieden en op
   het beginscherm van de app. Eén ritme van 4,2 s: de knop ademt, klikt (de
   lens knijpt, een glans flitst, het plusje veert), twee golven, dan rust.
   Achter de knop drijft een zachte gloed. Alleen transform en opacity.
   Kleur: de huisstijlkleur van de pagina (--orange). Voorvoegsel ck- zodat
   niets botst met bestaande klassen. */
.ck{--ck:var(--orange,#86bc97);--ck-golf:cubic-bezier(.45,0,.55,1);
    position:relative;display:grid;place-items:center;width:136px;height:136px;pointer-events:none}
.ck-gloed{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;z-index:-1;opacity:.78}   /* achter kop en knoppen; iets ingetogen (Joran 24-9) */
.ck-blob{position:absolute;inset:0;border-radius:50%;filter:blur(20px);will-change:transform}
.ck-b1{background:radial-gradient(circle at 42% 40%,color-mix(in srgb,var(--ck) 55%,transparent) 0%,transparent 62%);
       animation:ck-drijf1 9s ease-in-out infinite alternate}
.ck-b2{background:radial-gradient(circle at 60% 62%,color-mix(in srgb,var(--ck) 38%,#fff) 0%,transparent 58%);
       animation:ck-drijf2 11.5s ease-in-out infinite alternate}
@keyframes ck-drijf1{0%{transform:translate(-16px,8px) scale(1) rotate(0deg)}100%{transform:translate(14px,-12px) scale(1.14) rotate(40deg)}}
@keyframes ck-drijf2{0%{transform:translate(14px,10px) scale(1.08) rotate(0deg)}100%{transform:translate(-12px,-8px) scale(.94) rotate(-50deg)}}

.ck-knop{position:relative;display:flex;align-items:center;justify-content:center;width:136px;height:136px;border-radius:50%;
         background:var(--ck);color:#fff;will-change:transform;animation:ck-klik 4.2s var(--ck-golf) infinite;
         box-shadow:0 20px 38px -16px color-mix(in srgb,var(--ck) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.ck-knop::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
                 background:radial-gradient(circle at 50% 55%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 62%);animation:ck-glim 4.2s linear infinite}
.ck-cam{position:relative;z-index:1;width:58px;height:58px}
.ck-lens{transform-box:fill-box;transform-origin:center;animation:ck-sluiter 4.2s var(--ck-golf) infinite}
.ck-plus{position:absolute;left:calc(50% + 22px);top:calc(50% - 34px);z-index:2;width:17px;height:17px;opacity:.95;
         animation:ck-plusje 4.2s var(--ck-golf) infinite}
.ck-plus svg{display:block;width:100%;height:100%}
.ck-golf{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--ck) 70%,#fff);opacity:0;
         will-change:transform,opacity;animation:ck-golf 4.2s cubic-bezier(.2,.7,.2,1) infinite}
.ck-golf.ck-twee{animation-delay:.3s}
@keyframes ck-klik{0%,100%{transform:scale(1)}16%{transform:scale(1.035)}22%{transform:scale(.94)}30%{transform:scale(1.02)}37%{transform:scale(1)}}
@keyframes ck-sluiter{0%,18%,31%,100%{transform:scale(1)}22.5%{transform:scale(.52)}}
@keyframes ck-glim{0%,21%{opacity:0}23%{opacity:.6}33%,100%{opacity:0}}
@keyframes ck-plusje{0%,24%,40%,100%{transform:scale(1)}30%{transform:scale(1.18)}}
@keyframes ck-golf{0%,23%{opacity:0;transform:scale(1)}28%{opacity:.5}72%,100%{opacity:0;transform:scale(1.5)}}

@media (prefers-reduced-motion:reduce){
  .ck *,.ck *::before{animation:none!important}
}


/* hero: eerst CIRQO, dan zelf zoeken */
.hero { text-align: center; padding: 18px 4px 6px; isolation: isolate; }
.hero h1 { font-size: 30px; line-height: 1.12; }
.hero .lead { font-size: 16.5px; margin: 12px auto 0; max-width: 34ch; text-wrap: pretty; }
/* Drie stappen met icoon (3-10, Joran: minder tekst, visueler). Eén raster: icoonkolom 40px + 14px, de tekst, de
   vinkjes en de filmlink lijnen daarop uit; een stippellijn verbindt de stappen tot één route. */
.start-stappen { --ss-ic: 40px; --ss-gat: 14px; list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 14px; text-align: left; }   /* 12-10: rijen even hoog, iconen op gelijke afstand */
.start-stappen li { position: relative; display: grid; grid-template-columns: var(--ss-ic) 1fr; column-gap: var(--ss-gat); align-items: start;   /* 12-10: iconen bovenaan, dan klopt de stippellijn ook als een tekst twee regels is */
  font-size: 14.5px; line-height: 1.35; color: var(--tekst-2); }
.start-stappen li:not(:last-child)::after { content: ""; position: absolute; left: calc(var(--ss-ic) / 2 - 1px); top: calc(var(--ss-ic) + 3px);
  height: calc(100% - var(--ss-ic) + 8px); border-left: 2px dotted rgba(20,22,58,.22); }
.start-stappen b { display: block; margin-bottom: 1px; font-size: 16px; line-height: 1.3; color: var(--ink); }
.ss-ic { display: grid; place-items: center; width: var(--ss-ic); height: var(--ss-ic); border-radius: 50%; background: var(--surface); color: var(--blauw);
  box-shadow: 0 1px 2px rgba(20,22,58,.10), 0 0 0 1px rgba(20,22,58,.05); }
.ss-ic svg { width: 20px; height: 20px; }
.start-labels { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 16px 0 0; padding-left: 54px; font-size: 13.5px; line-height: 1.4; color: var(--tekst-2); }
.start-labels span { display: inline-flex; align-items: center; gap: 6px; }
.start-labels svg { width: 14px; height: 14px; flex: none; color: var(--blauw); }
.start-labels + .film-link, .paneel.breed .hero .start-labels + .film-link { margin: 14px 0 0; padding: 0; gap: 8px; }
.start-labels + .film-link svg { width: 40px; height: 26px; margin-right: 6px; }   /* het afspeelicoon midden in de icoonkolom, tekst op de tekstlijn */
.start-stappen li:not(:last-child)::after { border-left-color: rgba(20,22,58,.28); }
@media (max-width: 560px) { .start-labels { padding-left: 0; gap: 6px 14px; } }
.paneel.breed .hero .start-stappen { max-width: 48ch; }
.paneel.breed .hero .hd { margin-top: 28px; }
.lead-tel { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--tekst-2); text-wrap: pretty; }   /* het aantal, klein (1-10) */
.hero .lead-tel { margin: 8px auto 0; max-width: 40ch; }
/* de kern (vindbaarheid 2-10): seo.py zet hem in #inhoud voor wie geen JavaScript draait (AI-assistenten, crawlers);
   JavaScript vervangt hem meteen door het startscherm met dezelfde kop, lead en noot */
.kern { padding: 4px 0 8px; }
.kern h1 { color: var(--ink); }
.kern h2 { font-size: 15px; margin: 20px 0 6px; }
.kern p { margin: 10px 0 0; line-height: 1.5; }
.kern .lead, .kern .lead-tel { margin-top: 8px; }
.kern a { color: var(--blauw); }
.ck-link { display: inline-grid; place-items: center; margin: 34px auto 0; text-decoration: none; -webkit-tap-highlight-color: transparent; border-radius: 50%; }
.ck-link .ck { transition: transform 160ms ease; }
.ck-link:active .ck { transform: scale(.95); }
.ck-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 8px; }
.ck-label { display: block; margin-top: 18px; font-family: var(--kop-font); font-size: 20px; font-weight: 600; color: var(--ink); text-decoration: none; }
.hero .via-regel { margin-top: 8px; }
.zelf-link { display: inline-block; margin-top: 26px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--teal); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(30,122,108,.35); }
.hero-buhne-plek { display: none; }
@media (min-width: 1180px) {
  .paneel.breed .hero { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: center; text-align: left; padding: 8px 0 8px 14px; min-height: 560px; }
  .paneel.breed .hero .lead { margin-left: 0; }
  .paneel.breed .hero .lead-tel { margin-left: 0; font-size: 14px; max-width: 54ch; }   /* even breed als de lead (42ch op 18px) */
  .paneel.breed .hero .ck-knop-plek { display: none; }
  .paneel.breed .hero .via-regel { justify-content: flex-start; }
  .paneel.breed .hero-buhne-plek { display: block; text-decoration: none; color: inherit; }
  .paneel.breed .hero .ck-label-knop { display: inline-flex; margin-top: 26px; }
}
/* ---- hero-compositie van cirqo.nl (cirqo-koppeling/huisstijl/cirqo-nl-hero.css) ---- */
.hero-buhne { position: relative; width: 360px; max-width: calc(100vw - 24px); display: flex; justify-content: center; padding: 40px 0 30px; }
.hero-vlak { position: absolute; z-index: 0; left: 50%; top: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%;
  background: linear-gradient(140deg, var(--teal-green) 0%, var(--sky-blue) 100%); opacity: .26; pointer-events: none; }
.hero-vlak::after { content: ''; position: absolute; inset: -30px; border-radius: 50%; border: 1.5px solid var(--sky-blue); opacity: .35; }
.phone-frame.met-rand { width: 240px; max-width: 240px; aspect-ratio: auto; z-index: 1; overflow: visible; filter: none; background: #101012;
  border-radius: 43px; padding: 9px; box-shadow: 0 30px 70px rgba(28,50,90,.24), inset 0 0 0 1.5px #2c2c2e; }
.phone-frame.met-rand::before { content: ''; position: absolute; left: -2.5px; top: 22%; width: 3px; height: 34px; border-radius: 2px; background: #2c2c2e; box-shadow: 0 46px 0 #2c2c2e; }
.phone-frame.met-rand::after { content: ''; position: absolute; right: -2.5px; top: 29%; width: 3px; height: 60px; border-radius: 2px; background: #2c2c2e; }
.phone-frame.met-rand .scherm { position: relative; border-radius: 34px; overflow: hidden; background: #fff; }
.phone-frame.met-rand .ckw { height: auto; }
.phone-frame.met-rand img { width: 100%; height: auto; margin: 0; }
.phone-frame.met-rand .eiland { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 26%; height: 19px; border-radius: 14px; background: #0b0b0c; z-index: 5; }
.hero-kaart { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 15px; padding: 8px 13px 8px 8px;
  font-size: 12.5px; line-height: 1.25; color: var(--ink); text-align: left; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(28,50,90,.06), 0 18px 40px -14px rgba(28,50,90,.38); animation: heroZweef 6s ease-in-out infinite alternate; }
.hero-kaart b { display: block; font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }
.hero-kaart small { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.hero-kaart.k-foto { left: -14px; top: 15%; }
.hero-kaart.k-foto img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; display: block; }
.hero-kaart .bol { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #86bc97; color: #fff; }
.hero-kaart.k-melding { right: 6px; bottom: 3%; animation-delay: -2s; }
.hero-kaart .ikoon { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(140deg, var(--teal-green), var(--sky-blue)); color: #fff; display: flex; align-items: center; justify-content: center; }
@keyframes heroZweef { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .hero-kaart { animation: none; } }

.phone-frame.met-rand { transform: rotate(-2deg); transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1); }
.hero-buhne-plek:hover .phone-frame.met-rand { transform: rotate(0deg) translateY(-4px); }
.ck-label-knop { display: none; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; background: var(--orange); color: #fff; box-shadow: 0 14px 30px -14px var(--orange); font-family: var(--kop-font); font-size: 17px; font-weight: 600; text-decoration: none; }
.ck-label-knop svg { width: 20px; height: 20px; }
.inkomen > * { animation: inkomen 300ms var(--ease) both; }   /* 15-10 (Joran: 'razendsnel') */
.inkomen > *:nth-child(2) { animation-delay: 30ms; } .inkomen > *:nth-child(3) { animation-delay: 60ms; } .inkomen > *:nth-child(4) { animation-delay: 90ms; }
@keyframes inkomen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero h1 { font-size: 28px; line-height: 1.15; letter-spacing: -0.035em; }
.knop-hoofd.groot { height: 56px; font-size: 17px; font-weight: 600; margin-top: 20px; border-radius: var(--r-2); }
.knop-hoofd.groot svg { width: 20px; height: 20px; }
.via-regel { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; line-height: 18px; color: var(--tekst-3); }
.via-regel .cirqo-logo { height: 18px; vertical-align: 0; display: block; }
.hero-sub { text-align: center; margin: 6px 0 0; }
.hero .knop-hoofd.licht { margin-top: 14px; }
ol.zo { list-style: none; counter-reset: zo; margin: 0; padding: 0; }
ol.zo li { counter-increment: zo; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding: 8px 0; }
ol.zo li { grid-template-columns: 44px 1fr; }
ol.zo li::before { content: none; }
ol.zo .zo-ic { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(60,50,30,.06); }
ol.zo .zo-ic svg { width: 19px; height: 19px; color: var(--teal); }
ol.zo b { font-family: var(--kop-font); font-size: 16px; font-weight: 600; }
ol.zo span { font-size: 13.5px; color: var(--tekst-2); }
.beste.cirqo.groot { padding: 20px; isolation: isolate; overflow: hidden; }
.cq-kop { display: grid; grid-template-columns: 1fr 96px; gap: 8px; align-items: center; }
.cq-tekst { margin: 2px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--tekst-2); }
.cq-ck { display: grid; place-items: center; width: 96px; height: 96px; text-decoration: none; }
.cq-ck .ck { transform: scale(.58); }
.cq-kop { column-gap: 14px; }
.knop-hoofd.groot { border-radius: 999px; background: var(--orange); box-shadow: 0 14px 30px -14px var(--orange); }
.knop-hoofd.groot:hover { background: var(--orange); filter: brightness(.96); }

/* segmentknop voor de staat */
.prio-rij { margin: 14px 0 6px; }
.prio-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.prio-chips button { border: 1px solid var(--lijn); background: #fff; border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--tekst-2); cursor: pointer; }
.prio-chips button:hover { color: var(--ink); border-color: #d6cfbe; }
.prio-chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.staat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 16px; padding: 3px; background: var(--vlak); border-radius: var(--r-3); }
.staat button { border: 0; background: transparent; border-radius: 8px; padding: 8px 6px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--tekst-2); line-height: 1.25; transition: background-color 140ms var(--ease), color 140ms var(--ease); }
.staat button:hover { color: var(--ink); }
.staat button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,22,.10), 0 1px 1px rgba(16,24,22,.04); }
.staat-vraag { font-size: 13px; color: var(--tekst-3); margin: 18px 0 0; }
/* de staat als drie grote keuzes met uitleg, ook op desktop (28-9: daar liepen titel en uitleg door elkaar); de telefoon heeft eigen maten */
.staat.groot { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; padding: 0; background: none; }
.staat.groot button { display: block; padding: 12px 16px; border-radius: 12px; text-align: left; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--lijn); }
.staat.groot button:hover { box-shadow: inset 0 0 0 1.5px var(--blauw); }
.staat.groot button b { display: block; font-size: 15.5px; font-weight: 600; }
.staat.groot button small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--tekst-2); font-weight: 400; }
.staat.groot button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blauw); }

/* stip per trede */
/* embleem van een stap: het icoon onderscheidt, de kleur is een accent (26-9) */
.ic-trede { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--k); color: #fff; }   /* 8-10 (Joran): vol in de logokleur met een wit icoon, zoals de spullen in het logo; 7-10 was getint, afgerond vierkant */
.ic-trede svg { width: 13px; height: 13px; display: block; }
.ic-trede { background-image: none; box-shadow: none; }   /* 7-10 */
.ic-trede.half { background: #fff; color: var(--k); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k) 45%, #fff); }   /* past deels: wit met gekleurde rand */
.ic-trede.hol { background: #fff; color: color-mix(in srgb, var(--k) 60%, #fff); box-shadow: inset 0 0 0 1.2px #d6d8de; }   /* past niet: lichtgrijze rand, vager icoon */
.oog { display: flex; align-items: center; gap: 7px; }
.oog .ic-trede, .beste-lbl .ic-trede, .pk-soort .ic-trede { width: 18px; height: 18px; flex-basis: 18px; }
.oog .ic-trede svg, .beste-lbl .ic-trede svg, .pk-soort .ic-trede svg { width: 11px; height: 11px; }
/* filter boven de kaart: welke stappen wil je zien */
.filtermelding { position: fixed; z-index: 5; top: 146px; left: calc(var(--paneel-b) + 32px); max-width: 420px; margin: 0; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: var(--schaduw-2); font-size: 14px; line-height: 1.4; color: var(--ink); }
.filtermelding button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--blauw); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fchip.leeg { opacity: .45; }
.filterbalk { position: fixed; z-index: 5; top: 102px;   /* onder het logo (58 px, 2-10) */ left: calc(var(--paneel-b) + 32px); right: 64px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.fchip { pointer-events: auto; display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 0; border-radius: 999px; padding: 5px 12px 5px 5px; font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1; color: var(--tekst); box-shadow: var(--schaduw-1); cursor: pointer; transition: opacity 160ms var(--ease), transform 120ms var(--ease); }
.fchip[aria-pressed="false"] { opacity: .55; }
.fchip[aria-pressed="false"] .ic-trede { background: #fff; color: #8a8f8d; box-shadow: inset 0 0 0 1.6px #c9ceca; }
.fchip:active { transform: scale(.97); }
.fchip:focus-visible { outline: 2px solid var(--tekst); outline-offset: 2px; }
.fchip.alles { padding: 5px 12px; font-weight: 600; }
/* 7-10: label bij de filterknoppen, en de gekozen knop met een kruisje (Gijsbert) */
.f-label { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 32px; margin: 0; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.88); font-size: 13px; font-weight: 500; color: var(--tekst-2, #44464f); white-space: nowrap; }
.f-label b { color: var(--ink); font-weight: 600; }
.f-alles { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--blauw); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fchip.kies { box-shadow: inset 0 0 0 1.6px var(--ink), var(--schaduw-1); }
.f-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: -2px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; }
/* beweging (26-9, wens Joran): kort, ease-out, alleen transform en opacity; uit bij 'minder beweging' (zie onderaan) */
.ic-trede { transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
.fchip.net .ic-trede { animation: ic-aan 240ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes ic-aan { from { transform: scale(.6); } to { transform: scale(1); } }
.legenda-bg.open { animation: vervaag-in 200ms ease-out; }
.legenda-bg.open .legenda { animation: venster-in 220ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes vervaag-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes venster-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
/* het advies: het icoon van de stap doet één keer iets dat bij de stap hoort */
.uitkomst-kop .oog .ic-trede svg { transform-origin: 50% 50%; animation-duration: 520ms; animation-delay: 160ms; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
.uitkomst-kop .oog .ic-trede[data-t="1"] svg { animation-name: ic-zwaai; transform-origin: 80% 20%; }
.uitkomst-kop .oog .ic-trede[data-t="2"] svg { animation-name: ic-klop; }
.uitkomst-kop .oog .ic-trede[data-t="3"] svg { animation-name: ic-sleutel; }
.uitkomst-kop .oog .ic-trede[data-t="4"] svg { animation-name: ic-tandwiel; }
.uitkomst-kop .oog .ic-trede[data-t="5"] svg { animation-name: ic-rond; animation-duration: 640ms; }
.uitkomst-kop .oog .ic-trede[data-t="6"] svg { animation-name: ic-zak; }
@keyframes ic-zwaai { 0% { transform: rotate(-22deg); } 60% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
@keyframes ic-klop { 0% { transform: scale(.7); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes ic-sleutel { 0% { transform: rotate(-40deg); } 60% { transform: rotate(8deg); } 100% { transform: rotate(0); } }
@keyframes ic-tandwiel { from { transform: rotate(-120deg); } to { transform: rotate(0); } }
@keyframes ic-rond { from { transform: rotate(-240deg); } to { transform: rotate(0); } }
@keyframes ic-zak { 0% { transform: translateY(-5px); opacity: 0; } 70% { transform: translateY(1px); opacity: 1; } 100% { transform: none; } }

/* overzicht per trede (buurt/start) */
.treden { list-style: none; margin: 0; padding: 0; }
.treden button { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid var(--lijn-2); background: none; padding: 11px 2px; cursor: pointer; text-align: left; }
.treden li:last-child button { border-bottom: 0; }
.treden button:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c9cfcd; }
.treden b { display: block; font-size: 14.5px; font-weight: 500; }
.treden small { display: block; font-size: 13px; color: var(--tekst-3); margin-top: 1px; }
.treden .num { font-size: 13.5px; color: var(--tekst-2); }
/* 'Rond <plaats>' als kaarten (1-10, wens Joran: de regels gingen op in het geheel) */
.sectie ul.treden { display: grid; gap: 8px; }
.sectie ul.treden li button, .sectie ul.treden li:last-child button { grid-template-columns: 36px minmax(0, 1fr) auto 10px; gap: 14px; padding: 13px 16px 13px 14px;
  background: var(--surface, #fff); border: 1px solid var(--lijn); border-radius: 14px; text-align: left; cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; }
.sectie ul.treden li button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--tekst-3); border-bottom: 2px solid var(--tekst-3); transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .sectie ul.treden li button:hover { border-color: #d9d3c4; box-shadow: 0 6px 18px -12px rgba(20,22,58,.35); } .sectie ul.treden li button:hover b { text-decoration: none; } }
.sectie ul.treden .ic-trede { width: 36px; height: 36px; flex-basis: 36px; }
.sectie ul.treden .ic-trede svg { width: 19px; height: 19px; }
.sectie ul.treden b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.sectie ul.treden small { margin-top: 2px; color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sectie ul.treden .num { min-width: 30px; padding: 4px 10px; border-radius: 999px; background: var(--papier); color: var(--ink); font-weight: 600; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }

/* uitkomst */
.uitkomst-kop h2 { font-size: 25px; line-height: 1.18; }
.uitkomst-kop .oog { color: var(--k); font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.beste { margin: 18px 0 0; padding: 18px; border-radius: var(--r-2); background: #fff; border: 0; box-shadow: 0 1px 2px rgba(60,50,30,.05), 0 10px 28px -12px rgba(60,50,30,.18); }
.beste + .beste { margin-top: 10px; box-shadow: none; }
.beste-lbl { font-size: 12.5px; font-weight: 600; color: var(--tekst-3); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.beste-kop { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.beeld { width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--lijn); display: grid; place-items: center; overflow: hidden; }
.beeld img { max-width: 34px; max-height: 34px; object-fit: contain; }
.beeld .ic-trede { width: 26px; height: 26px; flex-basis: 26px; }
.beeld .ic-trede svg { width: 15px; height: 15px; }
.beste-kop b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.meta { display: block; font-size: 13px; color: var(--tekst-3); margin-top: 2px; line-height: 1.4; }
.feiten { display: block; font-size: 13px; color: var(--tekst-2); margin-top: 4px; line-height: 1.45; }
.feiten .ok { color: var(--groen-ok); font-weight: 500; }
.feiten .vraag { color: #8A5A1E; }
.feiten .let { color: #A33B2B; }
.neemt { display: block; font-size: 13px; color: var(--tekst-2); margin-top: 6px; line-height: 1.45; }
.acties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.knop { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--lijn); background: #fff; border-radius: 9px; font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; color: var(--ink); transition: background-color 120ms var(--ease), border-color 120ms var(--ease); }
.knop:hover { background: var(--vlak); border-color: #d6dbd9; }
.knop svg { width: 16px; height: 16px; color: var(--tekst-2); }
.knop.hoofd { background: var(--teal); border-color: var(--teal); color: #fff; }
.knop.hoofd svg { color: #fff; }
.knop.hoofd:hover { background: var(--teal-2); }
.knop-hoofd { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 12px; border: 0; border-radius: var(--r-3); background: var(--teal); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color 140ms var(--ease); }
.knop-hoofd:hover { background: var(--teal-2); }
.knop-hoofd.licht { background: var(--vlak); color: var(--ink); }
.knop-hoofd.twee { flex-direction: column; gap: 1px; height: auto; padding: 10px 14px; }
.knop-hoofd.twee .klein { color: var(--tekst-3); } .knop-hoofd.licht:hover { background: var(--vlak-2); }
.knop-hoofd svg { width: 17px; height: 17px; }

.vergelijk { margin: 20px 0 0; padding: 14px 16px; border-radius: var(--r-2); background: var(--vlak); }
.vergelijk-balk { position: relative; height: 22px; margin: 2px 4px 10px; }
.vergelijk-balk .as { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: #D9DEDC; border-radius: 2px; }
.vergelijk-balk .pt { position: absolute; top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 2px var(--vlak); }
.vergelijk-balk .huis { position: absolute; left: -4px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #fff; }
.vergelijk-balk .ms { position: absolute; top: 3px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 2px; background: #77706A; }
.vergelijk p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tekst-2); }
.vergelijk p b { color: var(--ink); font-weight: 600; }

.trede-blok { margin-top: 8px; padding: 0 16px; background: #fff; border: 1px solid var(--lijn); border-radius: 16px; }   /* losse witte blokken (1-10, wens Joran) */
.trede-blok:first-of-type { margin-top: 22px; }
.trede-blok:not(.dicht) { padding-bottom: 6px; }
.trede-blok:not(.dicht) .trede-kop { border-bottom: 1px solid var(--lijn-2); }
.trede-kop { display: grid; grid-template-columns: 22px 1fr auto 14px; gap: 10px; align-items: center; width: 100%; border: 0; background: none; padding: 14px 0; cursor: pointer; text-align: left; }
.trede-kop b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.trede-kop small { display: block; font-size: 12.5px; color: var(--tekst-3); font-weight: 400; margin-top: 1px; }
.trede-kop .num { font-size: 13px; color: var(--tekst-2); }
.trede-kop .pijl { width: 14px; height: 14px; color: var(--tekst-3); transition: transform 180ms var(--ease); }
.trede-blok.dicht .pijl { transform: rotate(-90deg); }
.trede-blok.dicht .partijen, .trede-blok.dicht .trede-extra, .trede-blok.dicht .meer { display: none; }
.trede-blok.uit > * { opacity: .45; }
.trede-extra { font-size: 13px; color: var(--tekst-2); line-height: 1.5; margin: 10px 0 2px; }
.partijen { list-style: none; margin: 0; padding: 0; }
.partij { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--lijn-2); cursor: pointer; }
.partij:last-child { border-bottom: 0; }
.partij .beeld { width: 32px; height: 32px; border-radius: 8px; }
.partij .beeld img { max-width: 24px; max-height: 24px; }
.partij .beeld .ic-trede { width: 24px; height: 24px; flex-basis: 24px; }
.partij b { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.partij:hover b, .partij.hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c9cfcd; }
.partij .afst { font-size: 13px; color: var(--tekst-2); white-space: nowrap; padding-top: 1px; }
.meer { border: 0; background: none; color: var(--teal); font-weight: 500; font-size: 13.5px; padding: 10px 0 0; cursor: pointer; }
.tip { margin-top: 20px; padding: 14px 16px; border-radius: var(--r-2); background: var(--vlak); font-size: 14px; line-height: 1.5; color: var(--tekst-2); }
.tip h3 { font-size: 14px; margin-bottom: 4px; color: var(--ink); }
.tip ul { margin: 6px 0 0; padding-left: 18px; }
.tip li { margin: 3px 0; }
.tip.let-op { background: #FBF6EE; }
.vraag-tip .staat { grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
.tip.let-op summary { cursor: pointer; font-weight: 600; color: #7A4E17; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
.tip.let-op summary::-webkit-details-marker { display: none; }
.tip.let-op summary::after { content: "+"; font-weight: 500; }
.tip.let-op[open] summary::after { content: "–"; }
.tip.let-op { padding: 12px 16px; margin-top: 12px; }
.voetnoot { margin-top: 20px; font-size: 12.5px; color: var(--tekst-3); line-height: 1.5; }
.voet-blok { background: #fff; border-radius: 18px; padding: 2px 18px 16px; margin-top: 22px; box-shadow: inset 0 0 0 1px var(--lijn), 0 1px 2px rgba(20,22,58,.04); }   /* 7-10 (Joran): slotblok startscherm op wit */
.voet-blok .voet { border-top-color: rgba(20,22,58,.08); }
.voetnoot a, .voetnoot button { color: var(--tekst-2); }
.voetnoot button { border: 0; background: none; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
/* voet onderaan het startpaneel (30-9, wens Joran): contact en WWIZ B.V. */
.voet { margin: 26px 0 4px; padding-top: 14px; border-top: 1px solid var(--lijn); font-size: 12.5px; line-height: 1.6; color: var(--tekst-3); }
.voet a { color: var(--tekst-2); text-underline-offset: 2px; }
.voet button { border: 0; background: none; padding: 0; font: inherit; color: var(--tekst-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }   /* 5-10: 'Laat het ons weten' in het venster */
/* startroute (1-10): foto, dan adres, dan advies */
.foto-lead { margin: 14px 0 10px; font-size: 15.5px; line-height: 1.5; color: var(--tekst-2); } .foto-lead b { color: var(--ink); }
.tekstknop { border: 0; background: none; padding: 0; font: inherit; color: var(--blauw, #14163a); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* ideeën en wensen (30-9, wens Joran: om het platform te verbeteren) */
.wens-regel { margin: 26px 0 0; font-size: 14px; color: var(--tekst-2); }
.wens-regel button, .menu-klein button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--blauw, #14163a); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.menu-klein button { font-weight: 500; color: var(--tekst-3); }
.wens-regel + .voet { margin-top: 12px; }
.wens-dlg { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px -20px rgba(20,22,58,.45); }
.wens-dlg::backdrop { background: rgba(20,22,58,.35); }
.menu-item[hidden] { display: none; }
/* 15-10 (Joran): 'Download de app' in het menu opent een pop-up met beide winkels */
.app-dlg { width: min(360px, calc(100vw - 32px)); padding: 26px 22px 20px; border: 0; border-radius: 26px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 30px 70px -20px rgba(20,22,58,.45); }
.app-dlg::backdrop { background: rgba(20,22,58,.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.app-dlg[open] { animation: appIn .32s cubic-bezier(.3,1.3,.5,1); } @keyframes appIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.app-dlg .app-ic { display: block; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 15px; box-shadow: 0 6px 16px -6px rgba(20,22,58,.35); }
.app-dlg h2 { margin: 0; font: 700 21px/1.2 var(--kop-font); letter-spacing: -0.015em; }
.app-dlg p { margin: 6px 0 18px; color: var(--tekst-2, #4c4e66); font-size: 15px; }
.app-dlg .app-knoppen { display: grid; gap: 10px; justify-items: center; }
.app-dlg .app-knoppen a { display: block; line-height: 0; border-radius: 10px; }
.app-dlg:focus { outline: none; } .app-dlg a:focus:not(:focus-visible) { outline: none; }
.app-dlg .app-knoppen img { height: 52px; width: auto; }
.app-dlg .app-dicht { margin-top: 14px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--tekst-2, #4c4e66); cursor: pointer; padding: 8px 14px; }
/* 16-10 (Joran): 'Help me even' opent hier een eigen venster, gelijk aan dat in de aanbiedflow; pas de keuze bepaalt waarheen */
.hulp-dlg{width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:20px;border:0;border-radius:24px;background:#fff;color:var(--ink);box-shadow:0 30px 70px -20px rgba(20,22,58,.45)}
.hulp-dlg::backdrop{background:rgba(20,22,58,.35)}.hulp-dlg:focus{outline:none}.hulp-dlg :focus:not(:focus-visible){outline:none}
.hulp-dlg[open]{animation:appIn .3s cubic-bezier(.3,1.3,.5,1)}
.hulp-kop{display:flex;align-items:center;justify-content:space-between;gap:12px}.hulp-kop h2{margin:0;font:700 21px/1.2 var(--kop-font);letter-spacing:-.015em}
.hulp-dicht{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:#f2f2f7;display:grid;place-items:center;cursor:pointer;color:var(--tekst-2,#4c4e66)}.hulp-dicht svg{width:14px;height:14px}
.hulp-keuzes{display:grid;gap:8px;margin:16px 0 0}
.hulp-keus{display:grid;gap:2px;text-align:left;padding:14px 16px;border:0;border-radius:16px;background:#f2f2f7;font:inherit;color:var(--ink);cursor:pointer;text-decoration:none}
.hulp-keus b{font-size:16px;font-weight:600}.hulp-keus small{font-size:13.5px;color:var(--tekst-2,#4c4e66)}.hulp-keus:active{transform:scale(.98)}
.hulp-onder{display:grid;gap:10px;justify-items:center;margin:18px 0 2px;padding-top:16px;border-top:1px solid #ececf0}
.hulp-deel{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:600;cursor:pointer}.hulp-deel svg{width:18px;height:18px}
.hulp-bel{border:0;background:none;font:inherit;font-size:14.5px;color:var(--tekst-2,#4c4e66);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wens-dlg h2 { margin: 0; font: 700 21px/1.2 var(--kop-font); letter-spacing: -0.015em; }
.wens-uitleg { margin: 8px 0 18px; font-size: 15px; line-height: 1.5; color: var(--tekst-2); }
.wens-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; } .wens-label span { font-weight: 400; color: var(--tekst-3); }
.wens-dlg textarea, .wens-dlg input[type=email] { width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 12px; border: 1px solid var(--lijn); border-radius: 12px; font: inherit; font-size: 15.5px; color: var(--ink); background: #fff; resize: vertical; }
.wens-dlg textarea:focus, .wens-dlg input[type=email]:focus { outline: 2px solid var(--blauw, #14163a); outline-offset: 1px; border-color: transparent; }
/* 9-10 (Joran: feedbackknop): drie gezichtjes boven het tekstvak */
.wens-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.wens-s { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border: 1.5px solid var(--lijn); border-radius: 14px; background: #fff; color: var(--ink); font: 600 13.5px var(--font); cursor: pointer; }
.wens-s svg { width: 32px; height: 32px; }
.wens-s[aria-pressed="true"] { border-color: var(--k); background: color-mix(in srgb, var(--k) 10%, #fff); color: var(--k); }
.wens-val { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wens-status { min-height: 1.2em; margin: 0 0 12px; font-size: 14px; color: var(--tekst-2); } .wens-status.fout { color: #b3261e; }
.wens-knoppen { display: flex; align-items: center; gap: 16px; } .wens-knoppen .knop-hoofd { width: auto; margin: 0; padding: 0 22px; }
.wens-annuleer { border: 0; background: none; padding: 0; font: inherit; font-size: 15px; color: var(--tekst-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* gemeentevenster (30-9): alleen het logo, geen hoofdmenu, geen 'Spullen aanbieden' in de kop (de foto-knop staat in het paneel) */
html.venster .hoofdnav { display: none; }
/* gemeentevenster: lijst met plekken als startscherm, met 'Aanbieden' direct in de rij (30-9) */
.pl-venster-intro { margin: 4px 0 14px; color: var(--tekst-2); font-size: 15px; line-height: 1.5; }
.pl-venster-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; }
.pl-venster-acties .knop-hoofd { width: auto; margin: 0; padding: 0 20px; }
.pl-venster-acties button { border: 0; background: none; padding: 0; font: inherit; font-size: 14.5px; color: var(--tekst-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html.venster .pl-opties { flex-wrap: wrap; justify-content: flex-start; gap: 0 20px; }
html.venster .pl-opties .pl-aantal { flex-basis: 100%; margin-top: 2px; }
.pl-lijst li.kan-aanbieden { position: relative; }
.pl-lijst li.kan-aanbieden .pl-rij { padding-right: 116px; }
.pl-aanbied { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--blauw); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pl-aanbied:hover { filter: brightness(.95); }
.pl-aanbied:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* partijkaart */
.pk-kop { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.pk-kop .beeld { width: 56px; height: 56px; border-radius: 12px; }
.pk-kop .beeld img { max-width: 44px; max-height: 44px; }
.pk-soort { font-size: 13px; color: var(--tekst-3); margin-top: 3px; display: flex; gap: 6px; align-items: center; }
.pk-haak { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--tekst-2); }
.pk-feiten { margin: 18px 0 0; border-top: 1px solid var(--lijn); }
.pk-feit { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lijn-2); font-size: 14px; line-height: 1.5; }
.pk-feit svg { width: 17px; height: 17px; margin-top: 2px; color: var(--tekst-3); }
.pk-feit b { font-weight: 500; }
.pk-feit small { display: block; color: var(--tekst-2); font-size: 13px; margin-top: 2px; }
.pk-tijden { display: grid; grid-template-columns: 28px 1fr; gap: 1px 8px; font-size: 13px; margin-top: 6px; color: var(--tekst-2); }
.pk-tijden .vandaag { color: var(--ink); font-weight: 600; }

/* lijstje */
.lijstje-pil { position: fixed; z-index: 5; top: 16px; right: 64px; border: 0; background: #fff; color: var(--ink); border-radius: var(--r-3); height: 36px; padding: 0 12px 0 10px; display: none; align-items: center; gap: 8px; font-weight: 500; font-size: 13.5px; cursor: pointer; box-shadow: var(--schaduw-1); }
.lijstje-pil.zichtbaar { display: inline-flex; }
.lijstje-pil .n { background: var(--teal); color: #fff; border-radius: 6px; min-width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; font-weight: 600; padding: 0 5px; }

/* huis */
.huis-mk { width: 0; height: 0; position: relative; }
.huis-mk .kern { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.3); }
.huis-mk .halo { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; background: rgba(22,25,26,.08); }
.tooltip { position: fixed; z-index: 20; pointer-events: none; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; padding: 7px 10px; border-radius: 8px; max-width: 260px; box-shadow: var(--schaduw-2); opacity: 0; transition: opacity 100ms; }
.tooltip.zichtbaar { opacity: 1; }
.tooltip small { display: block; font-weight: 400; color: var(--tekst-3); }

/* uitleg */
.legenda-bg { position: fixed; inset: 0; z-index: 30; background: rgba(16,24,22,.28); display: none; align-items: center; justify-content: center; padding: 16px; }
.legenda-bg.open { display: flex; }
.legenda { background: #fff; border-radius: var(--r); box-shadow: var(--schaduw-2); max-width: 460px; width: 100%; max-height: calc(100% - 32px); overflow-y: auto; padding: 24px; }
.legenda table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.legenda td { padding: 9px 4px; border-bottom: 1px solid var(--lijn-2); vertical-align: middle; line-height: 1.4; }
.legenda td:first-child { width: 26px; }
.menu-klein { display: flex; gap: 18px; margin: 18px 6px 4px; font-size: 13.5px; }
/* 7-10: officiele storeknoppen (Apple en Google schrijven hoogte en vorm voor); niet in de app zelf en niet in het gemeentevenster */
.app-winkels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 0; font-size: 13px; color: var(--tekst-3); }
#menu .app-winkels { margin: 18px 6px 0; }
.app-winkels span { flex-basis: 100%; }
.app-winkels a { display: block; line-height: 0; border-radius: 8px; }
.app-winkels a:focus-visible { outline: 2px solid var(--blauw, #14163a); outline-offset: 2px; }
.app-winkels img { height: 40px; width: auto; }
.in-app .app-winkels, .venster .app-winkels { display: none; }
.menu-klein a { color: var(--tekst-3); text-decoration: underline; text-underline-offset: 3px; }
.legenda.met-film { max-width: 720px; }
.legenda .film { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; margin-top: 14px; border-radius: 12px; background: var(--papier); }
.film-tekst { margin: 14px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.5; color: var(--tekst-2); }
.film-tekst li + li { margin-top: 4px; }
.film-tekst b { color: var(--ink); }
/* Startscherm (30-9): de uitleg staat onder de hoofdactie, als rustige tweede actie */
.film-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 0 4px; border: 0; background: none;
  font: 600 15px var(--font); color: var(--ink); cursor: pointer; }
.film-link svg { width: 22px; height: 22px; flex: none; color: var(--blauw); }
.film-link span { font-weight: 500; color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.film-link:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .film-link:hover { text-decoration: underline; text-underline-offset: 4px; } }
.paneel.breed .hero .film-link { margin-top: 14px; margin-left: -4px; }
.m-alle-link { display: block; margin: 14px auto 0; min-height: 40px; padding: 0 6px; border: 0; background: none; font: 600 14.5px var(--font); color: var(--blauw); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* 'Of vertel wat je hebt': typen en kiezen in één blok; typen opent de chathulp met het antwoord */
.m-vraag { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 12px; }
#zelf > h2 { margin-bottom: 12px; }   /* "Of beschrijf wat je hebt" niet tegen het zoekveld aan (1-10) */
.m-vraag .invoer { height: 50px; background: #fff; border-color: var(--m-rand, rgba(20,22,58,.12)); }   /* één rand, gelijk met de knop (1-10) */
.m-vraag .invoer svg { width: 18px; height: 18px; color: var(--blauw); flex: none; }
.m-vraag input { font-size: 16px; }
.m-vraag button { width: 50px; height: 50px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; }
.m-vraag button svg { width: 20px; height: 20px; }
/* Alle plekken (lijst) */
.pl-zoek { margin-top: 14px; } .pl-zoek .invoer { height: 48px; } .pl-zoek .invoer svg { width: 18px; height: 18px; color: var(--blauw); flex: none; }
.pl-zoek input { font-size: 16px; } .pl-zoek input::-webkit-search-cancel-button { cursor: pointer; }
.pl-kopregel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -10px; }
.pl-kopregel h1 { margin: 0; }
.pl-kopregel .terug { margin: 0; flex: none; }
.pl-tussen { height: 10px; }
.pl-opties { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 2px 8px; font-size: 14px; }
/* 15-10: soort plek, een rij chips om te vegen */
.pl-soorten { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 12px calc(-1 * var(--m-zij, 18px)) 0; padding: 2px var(--m-zij, 18px); scroll-padding: 0 var(--m-zij, 18px); }
.pl-soorten::-webkit-scrollbar { display: none; }
.pl-soorten button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--lijn); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.pl-soorten button span { font-size: 12.5px; color: var(--t3, #7d7f93); font-variant-numeric: tabular-nums; }
.pl-soorten button[aria-pressed=true] { background: var(--ink); color: #fff; box-shadow: none; }
.pl-soorten button[aria-pressed=true] span { color: rgba(255,255,255,.7); }
.pl-schakel { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; color: var(--ink); font-weight: 500; }
.pl-schakel input { width: 18px; height: 18px; accent-color: var(--blauw); }
.pl-aantal { color: var(--tekst-3); font-variant-numeric: tabular-nums; text-align: right; }
.pl-noot { margin: 0 2px 8px; font-size: 13px; color: var(--tekst-2); } .pl-noot button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--blauw); text-decoration: underline; cursor: pointer; }
.pl-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pl-rij { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--lijn); background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.pl-rij .ic-trede { width: 26px; height: 26px; flex-basis: 26px; }
.pk-lijstje { display: inline-flex; align-items: center; gap: 6px; margin: 12px auto 0; padding: 6px 4px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--tekst-2); cursor: pointer; }
.pk-lijstje svg { width: 16px; height: 16px; flex: none; }
.pl-t b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.pl-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--tekst-2); } .pl-t em { font-style: normal; color: var(--groen-ok, #0E7C4A); font-weight: 600; }
.pl-km { font-size: 13px; color: var(--tekst-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .pl-rij:hover { background: var(--papier); } }
/* lijst als kaarten met beeld en labels (30-9, wens Joran: minder eenvormig) */
.pl-lijst { gap: 8px; }
.pl-lijst li { position: relative; background: var(--surface, #fff); border: 1px solid var(--lijn); border-radius: 14px; transition: border-color 120ms ease, box-shadow 120ms ease; }
@media (hover: hover) and (pointer: fine) { .pl-lijst li:hover { border-color: #d9d3c4; box-shadow: 0 6px 18px -12px rgba(20,22,58,.35); } .pl-lijst li .pl-rij:hover { background: none; } }
.pl-lijst .pl-rij { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; padding: 12px 14px; border-bottom: 0; border-radius: 14px; }
.pl-lijst .beeld { width: 48px; height: 48px; border-radius: 12px; }
.pl-lijst .beeld.tint { border-color: transparent; background: var(--tint); }
.pl-lijst .beeld.tint .ic-trede { width: 30px; height: 30px; flex-basis: 30px; }
.pl-lijst .pl-t b { font-size: 15.5px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.pl-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; background: var(--papier); color: var(--tekst-2); }
.pl-chip.trede { background: var(--tint); color: var(--k); }
.pl-chip.ophaal { background: var(--blauw-zacht, #e8ebff); color: var(--blauw, #14163a); }
.pl-chip.open { background: #e3f4ea; color: #0E7C4A; }
.pl-kop { margin: 18px 2px 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-3); }
.pl-kop:first-child { margin-top: 4px; }
.pl-lijst li.kan-aanbieden .pl-rij { padding-right: 14px; padding-bottom: 8px; }
.pl-lijst .pl-aanbied { position: static; transform: none; margin: 0 14px 14px 76px; height: 36px; padding: 0 16px; }   /* onder de tekst, in lijn met de naam */
.pl-leeg { margin: 16px 2px; color: var(--tekst-2); font-size: 14.5px; }
/* Vraag het (chathulp zonder AI, proef 29-9) */
.chat { position: fixed; z-index: 35; right: 16px; bottom: 16px; width: 380px; max-width: calc(100vw - 32px); max-height: min(70vh, 620px); display: flex; flex-direction: column;
  background: #fff; border-radius: 18px; box-shadow: var(--schaduw-2), 0 0 0 1px rgba(20,22,58,.08); overflow: hidden; }
.chat[hidden] { display: none; }
.chat-kop { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 14px 14px 12px 16px; border-bottom: 1px solid var(--lijn); }
.chat-kop b { font: 700 16px var(--kop-font); color: var(--ink); }
.chat-kop span { grid-row: 2; font-size: 12.5px; color: var(--tekst-3); }
.chat-kop button { grid-row: 1 / span 2; grid-column: 2; align-self: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--papier); font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; }
.chat-lijst { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 10px; align-content: start; }
.chat-b { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.chat-b.hij { background: var(--papier); border-bottom-left-radius: 6px; justify-self: start; }
.chat-b.ik { background: var(--blauw); color: #fff; border-bottom-right-radius: 6px; justify-self: end; }
.chat-knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat-knoppen button, .chat-knoppen a { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,22,58,.16);
  font: 600 13.5px var(--font); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.chat-vorm { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--lijn); }
.chat-vorm input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--papier); font: 15px var(--font); color: var(--ink); }
.chat-vorm button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--blauw); color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-vorm button svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .chat { left: 8px; right: 8px; width: auto; max-width: none; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); max-height: 78vh; } }

.laden { position: fixed; inset: 0; z-index: 40; background: var(--bg); transition: opacity 300ms var(--ease); }
.laden.weg { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  :root { --paneel-b: 0px; }
  .kop { top: max(12px, env(safe-area-inset-top)); left: 12px; }
  .paneel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 94vh; height: 94dvh; border-radius: 16px 16px 0 0; transform: translateY(calc(100% - var(--sheet-h, 190px))); transition: transform 340ms var(--ease-sheet); will-change: transform; box-shadow: 0 -2px 24px rgba(16,24,22,.12); }
  .paneel.slepen { transition: none; }
  .greep { display: block; flex: 0 0 22px; cursor: grab; touch-action: none; position: relative; }
  .greep::after { content: ""; position: absolute; left: 50%; top: 8px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #D5DAD8; }
  .paneel-inhoud { padding: 4px 18px calc(28px + env(safe-area-inset-bottom)); }
  h1 { font-size: 23px; }
  .maplibregl-ctrl-top-right { top: max(12px, env(safe-area-inset-top)); right: 0; }
  .maplibregl-ctrl-bottom-right { right: 0; bottom: var(--sheet-h, 190px); }
  .lijstje-pil { top: max(12px, env(safe-area-inset-top)); right: 60px; }
  .filtermelding { top: calc(max(12px, env(safe-area-inset-top)) + 118px); left: 12px; right: 12px; max-width: none; font-size: 13.5px; }
  .filterbalk { top: calc(max(12px, env(safe-area-inset-top)) + 66px); left: 0; right: 0; flex-wrap: nowrap; overflow-x: auto; padding: 2px 12px 6px; scrollbar-width: none; pointer-events: auto; }
  .filterbalk::-webkit-scrollbar { display: none; }
  .fchip { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .uitkomst-kop .oog .ic-trede svg, .fchip.net .ic-trede, .legenda-bg.open, .legenda-bg.open .legenda { animation: none !important; }
}

/* ---- desktop-hero (breed paneel): actiekaart met knop en QR, daaronder drie stappen. Mobiel blijft de gloedknop.
   Typografie: Outfit alleen voor de kop, verder Geist op één schaal: 18 (inleiding, kaarttitel) / 16 (knop) / 15 (stappen) / 13 (toelichting). ---- */
.hd { display: none; }
@media (min-width: 1180px) {
  .paneel.breed .hero { display: block; min-height: 0; text-align: left; padding: 36px 12px 4px 14px; }
  .paneel.breed .hero h1 { font-size: 42px; line-height: 1.08; letter-spacing: -0.03em; max-width: 24ch; text-wrap: balance; }   /* 2-10: even breed als de lead (42ch op 18px) */
  .paneel.breed .hero .lead { font-size: 18px; line-height: 1.5; max-width: 42ch; margin: 14px 0 0; color: var(--tekst-2); }
  .paneel.breed .hero-buhne-plek, .paneel.breed .hero .ck-label-knop, .paneel.breed .hero > div > .via-regel, .paneel.breed .hero > div > .zelf-link { display: none; }
  .paneel.breed .hd { display: block; margin-top: 30px; }
  .paneel.breed .zo-sectie { display: none; }
}
.hd { font-family: var(--font); }
.hd-kaart { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 28px; background: var(--surface); border-radius: var(--r); padding: 22px 28px 20px 22px; box-shadow: var(--schaduw-2); }
.hd-qr { position: relative; display: grid; justify-items: center; row-gap: 8px; font-size: 12px; color: var(--tekst-3); }
.hd-qr img { display: block; width: 128px; height: 128px; padding: 10px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--lijn); }
.hd-titel { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.hd-uitleg { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--tekst-2); max-width: 38ch; text-wrap: pretty; }
.hd-upload, .hd-knop { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 999px; transition: background-color 150ms ease, transform 160ms var(--ease); }
.hd-upload { height: 44px; padding: 0 18px 0 15px; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--lijn); }
.hd-upload svg { width: 18px; height: 18px; color: var(--teal); }
.hd-upload:hover { background: var(--papier); }
.hd-knop { display: none; height: 52px; padding: 0 26px 0 22px; background: var(--teal); color: #fff; box-shadow: 0 14px 28px -14px var(--teal); }
.hd-knop svg { width: 20px; height: 20px; }
.hd-knop:hover { background: var(--teal-2); }
.hd-upload:active, .hd-knop:active { transform: scale(.97); }
.hd-upload:focus-visible, .hd-knop:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.hd-via { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 13px; line-height: 18px; color: var(--tekst-3); }
.hd-via .cirqo-logo { height: 16px; display: block; }
.hd-tablet { display: none; }
/* aanraakscherm (tablet liggend): geen QR, wel de gewone fotoknop */
@media (pointer: coarse) {
  .hd-kaart { grid-template-columns: 1fr; }
  .hd-qr, .hd-upload, .hd-desk { display: none; }
  .hd-tablet { display: inline; }
  .hd-knop { display: inline-flex; }
}
.hd-stappen { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; counter-reset: hd; }
.hd-stappen li { counter-increment: hd; position: relative; display: grid; row-gap: 2px; align-content: start; font-size: 13px; line-height: 18px; color: var(--tekst-2); }
.hd-stappen li + li::before { content: ""; position: absolute; left: -19px; top: 29px; width: 7px; height: 7px; border-top: 1.5px solid var(--tekst-3); border-right: 1.5px solid var(--tekst-3); transform: rotate(45deg); }
.hd-tegel { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 12px 0 10px; margin-bottom: 12px; background: var(--surface); border-radius: 16px; box-shadow: var(--schaduw-1); }
.hd-tegel > img, .hd-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.hd-tegel > img { object-fit: cover; display: block; }
.hd-ic { display: grid; place-items: center; background: var(--papier); color: var(--teal); }
.hd-ic svg { width: 20px; height: 20px; }
.hd-tegel > span { display: grid; row-gap: 1px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--tekst-2); }
.hd-tegel strong { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--groen-ok); }
.hd-ok svg { width: 12px; height: 12px; flex: none; }
.hd-stappen b { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.hd-stappen b::before { content: counter(hd); color: var(--tekst-3); font-variant-numeric: tabular-nums; }
.hd-stappen li > span:last-child { padding-left: 17px; }
.beste.cirqo.alternatief .knop-hoofd.licht { box-shadow: inset 0 0 0 1.5px var(--lijn); }
.beste.cirqo.alternatief .cq-tekst { margin-top: 6px; }

/* Kop op mobiel (30-9, wens Joran): logo en Menu als één rij van gelijke hoogte, Menu met contrast op de kaart,
   en een zachte waas achter kop en filterknoppen zodat ze niet verdrinken in de kaart */
@media (max-width: 760px) {
  header.kop { align-items: center; }
  header.kop .merk { padding: 5px 11px 5px 10px; min-height: 56px; box-sizing: border-box; }
  header.kop .merk-logo { height: 46px; }
  header.kop .menu-knop { height: 56px; padding: 0 18px 0 15px; background: #fff; color: var(--ink); font-size: 15px;   /* 7-10 (Joran): neutraal i.p.v. donkerblauw, zoals op desktop */
    box-shadow: 0 0 0 1px rgba(20,22,58,.08), 0 6px 16px rgba(20,22,58,.10); }
  header.kop .menu-knop svg { width: 20px; height: 20px; }
  header.kop .mijn-knop { width: 56px; height: 56px; padding: 0; justify-content: center; box-shadow: 0 0 0 1px rgba(20,22,58,.08), 0 6px 16px rgba(20,22,58,.10); }
  header.kop .mijn-knop .mk-tekst { display: none; }
  .filterbalk { top: calc(max(12px, env(safe-area-inset-top)) + 66px); }
  .kop-waas { position: fixed; z-index: 4; left: 0; right: 0; top: 0; height: calc(max(12px, env(safe-area-inset-top)) + 128px); pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 94%, transparent) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 55%, color-mix(in srgb, var(--bg) 0%, transparent) 100%); }
}
@media (min-width: 761px) { .kop-waas { display: none; } }

/* Filterknoppen op mobiel (30-9, wens Joran): twee rijen van drie in plaats van een schuifrij; zo zie je ze alle zes, in de volgorde van de ladder */
@media (max-width: 760px) {
  .filterbalk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; flex-wrap: wrap; padding: 0 12px; }
  .filterbalk .fchip { min-width: 0; height: 36px; padding: 4px 8px 4px 4px; gap: 5px; font-size: clamp(12px, 3.45vw, 13.5px); }
  .filterbalk .fchip .ic-trede { width: 26px; height: 26px; flex: 0 0 26px; }
  .filterbalk .fchip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .filterbalk .fchip.alles { grid-column: 1 / -1; justify-self: start; height: 30px; padding: 0 12px; font-size: 12.5px; }
  .filterbalk .f-label { grid-column: 1 / -1; justify-self: start; height: auto; padding: 0 4px; background: none; font-size: 12.5px; white-space: normal; flex-wrap: wrap; row-gap: 2px; }
  .filterbalk .fchip.kies .f-x { display: none; }   /* op mobiel past het kruisje niet in een derde; 'Alles tonen' staat in het label */
  .kop-waas { height: calc(max(12px, env(safe-area-inset-top)) + 190px); }
  /* 7-10 (Gijsbert, grotere letters op de telefoon): past een naam niet, dan drie rijen van twee (krap), en past het dan nog niet, zonder icoon (krap2). Nooit afkappen. */
  .filterbalk.krap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filterbalk.krap2 .fchip .ic-trede { display: none; }
  .filterbalk.krap2 .fchip { padding: 4px 10px; justify-content: center; }
  body:has(.filterbalk.krap) .kop-waas { height: calc(max(12px, env(safe-area-inset-top)) + 234px); }
}
.merk { text-decoration: none; }