/* ============================================================
   Beco Bouwgroep — juridische pagina's

   Privacybeleid, cookiebeleid en algemene voorwaarden delen één
   opmaak: een kop met de kern in twee zinnen, een inhoudsopgave
   die meeschuift, en daarnaast de tekst in één kolom van
   leesbare breedte.

   Waarom een inhoudsopgave en genummerde artikels: niemand leest
   zo'n pagina van voor naar achter. Mensen zoeken één ding op,
   en dan moet je daar in twee klikken staan. Het helpt ook de
   zoekmachines: elk artikel is een blok dat op zichzelf te
   citeren is.
   ============================================================ */

.jur{padding-block:clamp(126px,15vh,190px) var(--blok)}

/* Het kruimelpad hoort bij de pagina, niet tegen het label van
   de sectie eronder geplakt.                                 */
.jur .kruimels{margin-bottom:clamp(22px,3vw,34px)}

/* ── De kop ──────────────────────────────────────────────── */
.jur-kop{max-width:62ch;margin-bottom:clamp(38px,5vw,64px)}
.jur-kop .mini{margin-bottom:clamp(14px,1.8vw,22px)}
.jur-kop h1{font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:.98;
  letter-spacing:-.042em;max-width:16ch;text-wrap:balance}
.jur-kop .kleurlijn{height:10px;width:min(300px,70%);margin-top:clamp(20px,2.6vw,30px)}

/* De kern van de pagina in twee zinnen, vóór alle artikels. Dit
   is de alinea die een zoekmachine of een AI-antwoord letterlijk
   overneemt, dus hij moet op zichzelf kloppen.                */
.jur-kern{margin-top:clamp(24px,3vw,34px);padding:22px 26px;
  background:#fff;border:1px solid var(--lijn);
  border-left:4px solid var(--goud);
  border-radius:0 var(--rond-k) var(--rond-k) 0;
  font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.6;color:var(--grijs-900)}
.jur-datum{margin-top:18px;font-size:14px;color:var(--grijs-400)}

/* ── Inhoudsopgave naast de tekst ────────────────────────── */
/* De minmax(0,...) op beide kolommen is geen sierletter. Een
   rasterkolom groeit standaard mee met de kleinste breedte die
   haar inhoud nog aankan, en in de tekstkolom staat een tabel van
   520 pixels breed. Zonder die nul duwt die tabel de kolom open
   tot 520 pixels, ook op een scherm van 390, en scrolt de hele
   pagina horizontaal mee. Dat de tabel zelf in een eigen
   scrolvak zit, helpt daar niets tegen: het raster kijkt naar de
   inhoud, niet naar het scrolvak.                              */
.jur-binnen{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);
  gap:clamp(30px,5vw,86px);align-items:start}
/* En hetzelfde voor de rastervakjes zelf: min-width:auto laat een
   vakje breder worden dan zijn kolom.                          */
.jur-wegwijs,.jur-tekst{min-width:0}
@media(max-width:940px){.jur-binnen{grid-template-columns:minmax(0,1fr);gap:32px}}

.jur-wegwijs{position:sticky;top:104px}
@media(max-width:940px){
  .jur-wegwijs{position:static;padding-bottom:26px;border-bottom:1px solid var(--lijn)}
}
.jur-wegwijs h2{font-family:var(--tekst);font-size:11.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--indigo);
  margin-bottom:16px}
.jur-wegwijs ol{display:flex;flex-direction:column;gap:1px;counter-reset:artikel}
.jur-wegwijs a{display:flex;gap:10px;padding:7px 10px;border-radius:8px;
  font-size:14.5px;line-height:1.4;color:var(--tekst-kleur);
  transition:color .2s var(--ease),background .2s var(--ease)}
.jur-wegwijs a::before{counter-increment:artikel;content:counter(artikel);
  flex:none;width:1.6em;font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--grijs-400)}
.jur-wegwijs a:hover{color:var(--indigo);background:var(--grijs-100)}
.jur-wegwijs a:hover::before{color:var(--indigo)}

/* ── De artikels ─────────────────────────────────────────── */
.jur-tekst{max-width:70ch;counter-reset:blok}
.jur-tekst > section{padding-top:clamp(34px,4.4vw,54px);scroll-margin-top:104px}
.jur-tekst > section + section{border-top:1px solid var(--lijn)}
.jur-tekst > section:first-child{padding-top:0}

.jur-tekst h2{display:flex;gap:14px;font-size:clamp(1.3rem,2.2vw,1.75rem);
  line-height:1.14;letter-spacing:-.03em;margin-bottom:16px;text-wrap:balance}
.jur-tekst h2::before{counter-increment:blok;content:counter(blok);
  flex:none;font-size:.62em;line-height:1.7;font-variant-numeric:tabular-nums;
  color:var(--grijs-400)}
.jur-tekst h3{font-size:clamp(1rem,1.4vw,1.12rem);letter-spacing:-.02em;
  margin:26px 0 10px;color:var(--indigo-900)}
.jur-tekst p{margin-bottom:14px;line-height:1.7}
.jur-tekst p:last-child{margin-bottom:0}
.jur-tekst a:not(.knop):not(.knop-leeg){color:var(--indigo);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--indigo) 35%,transparent);
  transition:text-decoration-color .2s var(--ease)}
.jur-tekst a:not(.knop):not(.knop-leeg):hover{text-decoration-color:var(--indigo)}

/* Opsommingen krijgen een bolletje in de merkkleur, want de
   basisreset haalt alle lijstmarkeringen weg.                */
.jur-tekst ul{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.jur-tekst ul li{position:relative;padding-left:22px;line-height:1.65}
.jur-tekst ul li::before{content:"";position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:2px;background:var(--indigo);opacity:.45}
.jur-tekst ol{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;
  counter-reset:punt}
.jur-tekst ol li{position:relative;padding-left:26px;line-height:1.65}
.jur-tekst ol li::before{counter-increment:punt;content:counter(punt) ".";
  position:absolute;left:0;top:0;font-weight:600;color:var(--indigo);
  font-variant-numeric:tabular-nums}

/* ── Het gegevensblok en de tabel ────────────────────────── */
.jur-gegevens{margin:18px 0;padding:20px 24px;background:var(--grijs-100);
  border-radius:var(--rond-k);font-style:normal;line-height:1.85}
.jur-gegevens b{color:var(--indigo-900)}

/* Een tabel is het duidelijkst voor "welke cookie, van wie, en
   waarvoor". Op een telefoon scrolt hij binnen zijn eigen vak,
   zodat de pagina zelf niet zijwaarts gaat.                   */
.jur-tabel{margin:18px 0;overflow-x:auto;border:1px solid var(--lijn);
  border-radius:var(--rond-k)}
.jur-tabel table{width:100%;border-collapse:collapse;font-size:14.5px;
  min-width:520px}
.jur-tabel th,.jur-tabel td{padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--lijn);line-height:1.5}
.jur-tabel thead th{font-family:var(--disp);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--indigo);background:var(--grijs-100);
  white-space:nowrap}
.jur-tabel tbody th{font-weight:600;color:var(--indigo-900)}
.jur-tabel tr:last-child th,.jur-tabel tr:last-child td{border-bottom:0}

/* ── De afsluiting: één vraag, één knop ──────────────────── */
.jur-slot{margin-top:clamp(44px,6vw,72px);padding:clamp(26px,3.4vw,40px);
  background:var(--indigo);border-radius:var(--hoek) 0 var(--hoek) 0;
  color:#C7C8E4}
/* Dit blok staat binnen .jur-tekst, dus het zou anders het
   volgende artikelnummer meepikken. Het is geen artikel.      */
.jur-slot h2{display:block;font-size:clamp(1.3rem,2.2vw,1.8rem);color:#fff;
  letter-spacing:-.03em;margin-bottom:10px}
.jur-slot h2::before{content:none;counter-increment:none}
.jur-slot p{color:#C7C8E4;max-width:52ch}
.jur-slot .knop{margin-top:22px;background:var(--goud);color:var(--indigo-900)}
.jur-slot .knop:hover{background:var(--goud-700)}
/* Een lege knop erft donkere tekst, en dit vlak is indigo. Zonder
   deze regel staat er donkerblauw op donkerblauw: gemeten 1,5 op 1,
   waar 4,5 het minimum is. Licht op donker dus, met een rand die
   zichtbaar blijft.                                            */
.jur-slot .knop-leeg{margin-top:22px;background:transparent;color:#fff;
  border-color:rgba(255,255,255,.45)}
.jur-slot .knop-leeg:hover{background:rgba(255,255,255,.1);
  border-color:#fff;color:#fff}
.jur-slot .knop-leeg:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ══ DE BEDANKPAGINA ═══════════════════════════════════════
   Sober, want wie hier komt heeft net iets gedaan en hoeft niet
   overtuigd te worden. Twee dingen die hij nu kan gebruiken: een
   nummer als het niet kan wachten, en iets om te bekijken als het
   dat wel kan.                                               */

.bed-daden{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px); margin:clamp(28px,3.6vw,44px) 0 0}
@media(max-width:720px){ .bed-daden{grid-template-columns:1fr} }
.bed-kaart{padding:clamp(22px,2.6vw,30px); background:#fff;
  border:1px solid var(--lijn); border-radius:var(--rond-m) 0 var(--rond-m) 0}
.bed-kaart .mini{display:inline-flex; margin-bottom:12px}
.bed-kaart b{display:block; font-family:var(--disp); font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.25rem); letter-spacing:-.028em;
  line-height:1.2; color:var(--indigo-900)}
.bed-kaart p{margin:12px 0 0; font-size:15px; line-height:1.65;
  color:var(--grijs-600)}
.bed-kaart p:last-child{margin-top:18px}