/* ==========================================================================
   DONKER THEMA (27-10-2026). Jawad koos optie A: de hele site in de stijl van
   het diensten-deck. Marine canvas met korrel en gloed, vlakken als glas
   (zoals .dd-dia), goud alleen als accent, koppen in de serif in wit.
   Eén laag over styles.css, site-refresh, presentatie, site-access, site-luxe
   en btw-actueel; aan en uit met DONKER in _bron/build_valorem.py.
   Werkt eerst via de tokens: --kop (tekst die op licht navy was) wordt wit,
   --paper* worden marine vlakken, --text en --text-soft licht. Daarna alleen
   de onderdelen met vaste (hard gecodeerde) lichte kleuren.
   ========================================================================== */
:root{
  color-scheme:dark;
  --kop:#fff; --kop-rgb:255,255,255;
  --paper:#0b1b36; --paper-2:#0e2145; --paper-3:#13294d;
  --text:#e6ebf2;
  --text-soft:#b9c2ce;            /* grijze tekst iets lichter dan in de proef: 9,9:1 op het canvas */
  --line:rgba(255,255,255,.12); --lijn-warm:rgba(255,255,255,.12);
  --gold-ink:#dbb968;             /* goud voor tekst op donker (het lichte goud uit het logo) */
  --gold-tint:rgba(193,154,74,.14);
  --glas:linear-gradient(140deg, rgba(255,255,255,.085), rgba(255,255,255,.015) 55%, rgba(193,154,74,.05));
  --glas-rand:rgba(255,255,255,.1);
  --glas-licht:inset 0 1px 0 rgba(255,255,255,.08);
  --canvas:#07172f;               /* middernacht: het canvas */
  --atlantisch:#0f2c57;           /* de platen (.section--alt): rijker, blauwer */
  --inkt:#040c1b;                 /* de footer: het diepste */
  --shadow-sm:0 1px 2px rgba(0,0,0,.25), 0 10px 30px -12px rgba(0,0,0,.5);
  --shadow-md:0 2px 6px rgba(0,0,0,.25), 0 22px 50px -18px rgba(0,0,0,.6);
  --shadow-lg:0 4px 12px rgba(0,0,0,.3), 0 34px 80px -28px rgba(0,0,0,.7);
}

/* --- canvas: marine met korrel en twee gloeden, zoals het deck ----------- */
html{background:var(--canvas)}
body{background:var(--canvas) var(--korrel); color:var(--text)}
body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(620px 480px at 82% 6%, rgba(193,154,74,.13), transparent 64%),
             radial-gradient(820px 640px at 8% 100%, rgba(23,51,92,.85), transparent 70%)}
::selection{background:rgba(193,154,74,.35); color:#fff}
h1,h2,h3,h4{color:var(--kop)}

/* --- kop (28-10, Jawad: "overal mooi doorzichtig, geen harde balk" en daarna "nee, doorzichtig, niet glas").
   Geen vervaging en geen onderrand: een zachte donkere overloop die bovenin dekt (achter logo en menu) en naar
   onderen helemaal uitloopt, zodat de pagina er scherp onderdoor schuift. Logo en menu krijgen een zachte
   donkere gloed achter de letters (text-shadow), zodat ze ook boven het lichte champagnepakket leesbaar blijven.
   Bovenaan over de hero blijft de kop helemaal leeg. */
.site-header,
.site-header--transparent,
.site-header--transparent.is-solid,
.site-header--transparent.over-dark.is-gescrold{
  background:linear-gradient(180deg, rgba(7,23,47,.88) 0%, rgba(7,23,47,.72) 50%, rgba(7,23,47,.42) 80%, rgba(7,23,47,0) 100%);
  -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0; background-repeat:no-repeat}
.site-header--transparent.over-dark{background:transparent; border-bottom-color:transparent}
.site-header .brand-name,.site-header .brand-sub,.site-header .nav-links > a:not(.nav-cta){
  text-shadow:0 1px 14px rgba(4,12,27,.9), 0 0 3px rgba(4,12,27,.75)}
.site-header .brand-sub{color:#efd9a1;
  text-shadow:0 0 18px rgba(4,12,27,.85), 0 0 10px rgba(4,12,27,.95), 0 0 4px rgba(4,12,27,.95), 0 1px 2px rgba(4,12,27,.9)}
.brand-sub{color:#e6cd8f}        /* iets lichter goud: blijft leesbaar als er iets lichts onder de kop schuift */
.nav-links a{color:rgba(255,255,255,.86)}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.07)}
.nav-cta{background:var(--gold)!important; color:#231703!important}
.nav-cta:hover{background:var(--gold-soft)!important}
.nav-toggle{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18)}
.nav-toggle span{background:#fff}
@media (max-width:1220px){
  .nav-links{background:rgba(11,27,54,.97); border-bottom-color:rgba(255,255,255,.1)}
  .site-header--transparent.over-dark .nav-links.open > a{color:rgba(255,255,255,.74)}
}

/* --- ritme (ronde 2, 27-10; Jawad: "teveel dezelfde kleur en donker, speel ermee").
   Drie tinten nacht: het canvas is middernacht; de secties die de HTML al als
   afwisselend markeert (.section--alt) worden PLATEN in Atlantisch blauw, met een
   gouden haarlijn boven en onder en een gegraveerde rozet (rozet-goud.svg) half
   over de rand, zoals de guilloche op een certificaat. De footer is inkt. ----- */
.section--alt{position:relative; isolation:isolate; overflow:clip;
  background:
    radial-gradient(900px 520px at 100% 0%, rgba(70,124,200,.2), transparent 62%),
    radial-gradient(700px 420px at 0% 100%, rgba(193,154,74,.08), transparent 60%),
    linear-gradient(180deg, #0c2550 0%, var(--atlantisch) 50%, #0c2550 100%);
  border-block:1px solid transparent; border-image:var(--goud-lijn) 1}
/* twee platen achter elkaar (tarieven, app): de tweede weer middernacht, anders wordt het één blauw blok */
.section--alt + .section--alt{background:radial-gradient(800px 480px at 0% 0%, rgba(193,154,74,.07), transparent 60%), var(--canvas)}
.section--alt::before{display:block; content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-210px; right:-230px; bottom:auto; left:auto; width:640px; height:640px;
  background:url(rozet-goud.svg) center/contain no-repeat; opacity:.2}
.section--alt:nth-of-type(even)::before{top:auto; right:auto; bottom:-250px; left:-260px}
.section--alt::after{display:none}
@media (max-width:720px){
  .section--alt::before{width:420px; height:420px; top:-150px; right:-200px}
  .section--alt:nth-of-type(even)::before{top:auto; right:auto; bottom:-170px; left:-210px}
}
/* de kop van een subpagina iets blauwer, zodat hij als plaat boven het canvas staat */
.page-hero{background:radial-gradient(130% 96% at 74% -26%, #1a3a6e 0%, #0c2347 50%, #07172f 100%)}
.section--line{border-top-color:rgba(255,255,255,.1)}
.strip{background:rgba(255,255,255,.035); border-block:1px solid rgba(255,255,255,.07)}

/* --- vlakken als glas, zoals de dia's van het deck ------------------------ */
/* .step en .faq details niet: die zijn sinds de luxe-ronde kaal, met alleen een (gouden) haarlijn; dat blijft zo */
.card,.price-card,.price-foot,.panel,.lead-blok,.lead-form,.losse-voet,.app-feat-item,
.pakket-kaart,.btw-facts,.dienst-resultaat,.kennis-uitgelicht,.contact-card,.contact-formkaart{
  background:var(--glas); border:1px solid var(--glas-rand); box-shadow:var(--glas-licht)}
.card:hover,.price-card:hover,.card.tilt:hover{border-color:rgba(193,154,74,.45); box-shadow:var(--glas-licht), var(--shadow-md)}
/* één licht accent: het uitgelichte pakket als champagne (goudblad, geen crème). De tokens draaien binnen de
   kaart terug naar donkere tekst, dus alles wat --kop, --text en --text-soft gebruikt, klopt vanzelf. */
.price-card--featured,.pakket-kaart.is-compleet{
  --kop:var(--ink); --kop-rgb:7,23,47; --text:#1d2b39; --text-soft:#4d4430; --gold-ink:#6f5622; --line:rgba(7,23,47,.14);
  background:linear-gradient(155deg, #f7eed6 0%, #ecdcb2 48%, #d8bb7c 100%); color:#1d2b39;
  border-color:rgba(255,236,190,.8);
  box-shadow:0 34px 80px -34px rgba(219,185,104,.55), inset 0 1px 0 rgba(255,255,255,.7)}
.pakket-kaart.is-compleet :is(h3,h4),.price-card--featured h3,.is-compleet .pakket-prijs strong,.price-card--featured .price-amount{color:var(--ink)}
.pakket-kaart.is-compleet .pakket-kaart-kop p,.is-compleet .pakket-prijs span,.price-card--featured .price-note,
.price-card--featured .price-period,.price-card--featured .price-tagline{color:#4d4430}
.pakket-kaart.is-compleet .pakket-inhoud li,.price-card--featured .price-list li{color:#1d2b39}
.is-compleet .pakket-inhoud li::before,.price-card--featured .price-list svg{color:#7a5a17}
.is-compleet .pakket-prijs{border-color:rgba(7,23,47,.16)}
.pakket-kaart.is-compleet .btn-primary,.price-card--featured .btn-primary{background:var(--ink); color:#fff}
.pakket-kaart.is-compleet .btn-primary:hover,.price-card--featured .btn-primary:hover{background:#16305a; color:#fff}

/* het aanvraagblok onder artikelen en landingspagina's (± 180 pagina's) en de feitenbalk boven een artikel:
   ook platen, zodat een lange leespagina begint en eindigt met kleur */
.lead-blok{position:relative; isolation:isolate; overflow:clip; border-color:rgba(193,154,74,.3);
  background:radial-gradient(700px 420px at 100% 0%, rgba(70,124,200,.22), transparent 60%),
             linear-gradient(160deg, #123366 0%, var(--atlantisch) 55%, #0b2348 100%)}
.lead-blok::before{content:""; position:absolute; z-index:-1; pointer-events:none; width:520px; height:520px;
  left:-210px; bottom:-240px; background:url(rozet-goud.svg) center/contain no-repeat; opacity:.22}
.btw-facts{border-color:rgba(193,154,74,.3); box-shadow:var(--glas-licht);
  background:radial-gradient(600px 300px at 100% 0%, rgba(70,124,200,.2), transparent 60%),
             linear-gradient(160deg, #123366 0%, var(--atlantisch) 60%, #0b2348 100%)}
.btw-fact{background:none}
.btw-fact strong{color:#ecdcb2}
/* lange teksten: een korte gouden lijn boven elk hoofdstuk, zodat de leesbaan geleed is */
.legal h2{position:relative; padding-top:20px}
.legal h2::before{content:""; position:absolute; left:0; top:0; width:36px; height:1px; background:var(--gold)}
/* kennisregister: om en om een thema op een plaatje, zodat de lange lijst ritme krijgt */
.kennis-thema:nth-of-type(even){border-bottom-color:transparent; border-radius:var(--radius-lg); padding-inline:clamp(18px,3vw,36px);
  background:linear-gradient(90deg, rgba(15,44,87,.75), rgba(15,44,87,.2))}
.kennis-thema-kop p{color:var(--gold-soft)}

/* ==========================================================================
   SLOTBAND (28-10). Eerste versie met draaiende rozet en een groot patroon
   erachter vond Jawad te druk ("lelijk, veel subtieler en rustiger").
   Nu: een open band zonder rand of patroon, alleen een zachte blauwe gloed die
   nergens een kant heeft. Bovenaan een kleine navy munt met de V op een dunne
   gouden lijn die naar beide kanten uitloopt, zoals een scheiding in een brief.
   Daaronder de vraag, één regel, één witte knop en "Alle diensten" als rustige
   gouden link. Werkt op elke variant van .cta zonder andere HTML.
   ========================================================================== */
.section:has(> .container > .cta){position:relative; padding:80px 0 92px;
  background:radial-gradient(70% 52% at 50% 62%, rgba(21,56,108,.38), rgba(21,56,108,0) 100%)}
.cta{background:none; border:0; border-radius:0; box-shadow:none; overflow:visible;
  padding:84px 0 0; text-align:center}
.cta::after,.cta-merk{display:none}
/* de lijn ... */
.cta::before{content:""; position:absolute; inset:auto; left:50%; top:26px; width:min(320px,70%); height:1px;
  transform:translateX(-50%); opacity:1; z-index:1; animation:none;
  background:linear-gradient(90deg, rgba(219,185,104,0), rgba(219,185,104,.55) 50%, rgba(219,185,104,0))}
/* ... met de munt erop */
.cta > .btn-row{position:static}
.cta > .btn-row::before{content:""; position:absolute; z-index:2; left:50%; top:0; width:52px; height:52px; margin-left:-26px;
  border-radius:50%; border:1px solid rgba(227,198,132,.6);
  background:url(mark-valorem-glyph-64.png) center 54% / 26px no-repeat,
             radial-gradient(circle at 38% 30%, #15356a 0%, #0b1f42 64%, #081936 100%);
  box-shadow:0 0 0 6px var(--canvas)}
.cta h2{margin:0 auto 10px; max-width:22ch; font-size:clamp(1.65rem,3.4vw,2.4rem); line-height:1.15; color:#fff}
.cta p{margin:0 auto; max-width:46ch; color:var(--text-soft); font-size:1rem}
.cta .btn-row{justify-content:center; align-items:center; gap:10px 28px; margin-top:28px}
.cta .btn-primary{padding:14px 26px; border-radius:12px}
.cta .btn-ghost-light{padding:14px 4px; border:0; background:none; color:var(--gold-soft)}
.cta .btn-ghost-light::after{display:block; left:4px; right:4px; bottom:12px; opacity:.4}
.cta .btn-ghost-light:hover{color:#fff}
@media (max-width:640px){
  .section:has(> .container > .cta){padding:64px 0 80px}
  .cta{padding:80px 0 0}
  .cta .btn-row{flex-direction:column; gap:6px}
  .cta .btn-primary{align-self:stretch; justify-content:center}
}
.card-icon{background:rgba(193,154,74,.12); color:var(--gold); border-color:rgba(193,154,74,.3)}
.card:hover .card-icon{background:rgba(193,154,74,.2)}
.ticks svg,.price-list svg{color:var(--gold)}
.site-footer{background:var(--inkt) var(--korrel); border-top:1px solid transparent; border-image:var(--goud-lijn) 1}

/* --- het deck zelf: loopt nu naadloos over in het canvas ------------------ */
.dd-sectie{background:transparent}
.dd-gloed{-webkit-mask-image:linear-gradient(180deg, transparent, #000 220px, #000 calc(100% - 200px), transparent);
          mask-image:linear-gradient(180deg, transparent, #000 220px, #000 calc(100% - 200px), transparent)}
/* tellers en groepskoppen iets lichter (contrast) */
.dd-teller{color:rgba(255,255,255,.62)}
.dd-groep-kop{color:rgba(255,255,255,.6)}
.dd-dia .eyebrow{color:var(--gold-soft)}

/* --- app-schermen: het bijschrift van de schermen ernaast gedimd, maar leesbaar (was .4) */
.app-slider.is-slider .app-scherm figcaption{opacity:.76}

/* --- portaaldemo op /app: de lijst links staat op het canvas -------------- */
.pd-benefits li{color:var(--text)}
.pd-benefits svg{color:var(--gold)}

/* --- knoppen: de primaire knop wit zoals in de hero, goud blijft accent ---- */
.btn-primary{background:#fff; color:var(--ink); box-shadow:none}
.btn-primary:hover{background:#f2e6cd; color:var(--ink)}
/* tweede knop: geen grijs glas meer maar een gouden haarlijn; wit vlak = hoofdactie, goudlijn = vervolgstap */
.btn-ink{background:transparent; color:#fff; border:1px solid rgba(219,185,104,.55)}
.btn-ink:hover{background:rgba(193,154,74,.12); border-color:var(--gold-soft)}
.pill{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.14)}
.pill:hover{border-color:var(--gold); background:rgba(193,154,74,.12)}

/* --- formulieren --------------------------------------------------------- */
.field input,.field select,.field textarea,.calc-select select{
  background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.18)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.5)}
.field input:focus,.field select:focus,.field textarea:focus{background:rgba(255,255,255,.09)}
select option{background:#0b1b36; color:#fff}
input[type=radio],input[type=checkbox],.calc-optie input{accent-color:var(--gold)}
/* contact: de keuze vraag / kennismaking als glazen schakelaar met gouden rand */
.contact-keuzes{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1)}
.contact-keuzes input:checked + span{background:rgba(193,154,74,.16); color:#fff; box-shadow:inset 0 0 0 1px rgba(193,154,74,.55)}
.contact-voorkeur,.contact-formkaart .form-success.show,.form-success{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}

/* --- registers en lijsten ------------------------------------------------- */
.inv-lijst a:hover .inv-tekst strong{color:var(--gold-soft)}
.inv-lijst a:hover .inv-pijl{background:var(--gold); border-color:var(--gold); color:#231703}
.inv-tekst em{color:var(--gold-soft); border-bottom-color:rgba(219,185,104,.4)}
.faq details{border-bottom-color:rgba(255,255,255,.12)}
.faq summary:hover{color:var(--gold-soft)}
.faq details[open] summary::after{background:var(--gold); border-color:var(--gold); color:#231703}
.app-scherm-keuzes button[aria-pressed=true],.app-scherm-keuzes button:hover{background:rgba(255,255,255,.06)}
.dd-lijn-nr{background:var(--paper-2); box-shadow:0 0 0 8px var(--canvas); color:var(--gold)}

/* --- nummering zoals het deck: 01 / 04 ------------------------------------ */
/* het totaal zonder extra HTML: :has() telt het laatste kind */
.steps,.inv-lijst{counter-reset:kaart}
.steps > .step,.inv-lijst > li{counter-increment:kaart}
.steps:has(> .step:nth-child(2):last-child),.inv-lijst:has(> li:nth-child(2):last-child){--n:"02"}
.steps:has(> .step:nth-child(3):last-child),.inv-lijst:has(> li:nth-child(3):last-child){--n:"03"}
.steps:has(> .step:nth-child(4):last-child),.inv-lijst:has(> li:nth-child(4):last-child){--n:"04"}
.steps:has(> .step:nth-child(5):last-child),.inv-lijst:has(> li:nth-child(5):last-child){--n:"05"}
.steps:has(> .step:nth-child(6):last-child),.inv-lijst:has(> li:nth-child(6):last-child){--n:"06"}
.steps:has(> .step:nth-child(7):last-child),.inv-lijst:has(> li:nth-child(7):last-child){--n:"07"}
.steps:has(> .step:nth-child(8):last-child),.inv-lijst:has(> li:nth-child(8):last-child){--n:"08"}
/* stappen: groot contourcijfer in goud, daarnaast klein "/ 03" */
.steps > .step{display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-content:start; padding-top:22px}
.steps > .step > *{grid-column:1 / -1}
.steps > .step::before{content:counter(kaart, decimal-leading-zero); grid-row:1; grid-column:1;
  position:static; width:auto; height:auto; margin:0 0 14px; border-radius:0; background:none;
  font-family:var(--serif); font-size:2.6rem; line-height:1; color:transparent;
  -webkit-text-stroke:1px var(--gold); font-variant-numeric:tabular-nums}
.steps > .step::after{content:"/ " var(--n); grid-row:1; grid-column:2; align-self:end; margin:0 0 17px;
  font-family:var(--serif); font-size:var(--fs-sm); letter-spacing:.06em; color:rgba(255,255,255,.5)}
/* register: kleine teller boven de titel */
.inv-lijst > li > a::before{content:counter(kaart, decimal-leading-zero) "  /  " var(--n); grid-column:1 / -1;
  margin:0 0 10px; font-family:var(--serif); font-size:var(--fs-sm); letter-spacing:.14em; color:var(--gold);
  white-space:pre; font-variant-numeric:tabular-nums}

/* ==========================================================================
   HERO (ronde 3, 27-10; Jawad: "Hero lichtelijk bewegend, mooier en strakker").
   Minder lagen: het raster en de losse ringen zijn weg. Eén zegel: de
   gegraveerde rozet met de V erin, rechts (op de telefoon rechtsonder, achter de
   kwalificatie). De rozet draait heel langzaam (één keer per vier minuten),
   net genoeg om te leven; bij "minder beweging" staat hij stil.
   ========================================================================== */
.hero{--zegel:min(470px, 37vw)}
/* de derde gloed (goud, middenonder) gaf naast het zegel een bruine vlek */
.hero-aurora i:nth-child(3){display:none}
.hero::after{
  /* midden van het zegel op 78% van de breedte, iets onder het midden (de kop ligt over de hero) */
  inset:auto; right:calc(22% - var(--zegel) / 2); top:calc(50% + 34px - var(--zegel) / 2);
  width:var(--zegel); height:var(--zegel); opacity:.42;
  background:url(rozet-goud.svg) center/contain no-repeat; background-size:contain;
  -webkit-mask-image:none; mask-image:none; z-index:0}
.hero-merk{right:calc(22% - var(--zegel) * .21); bottom:auto; top:calc(50% + 34px - var(--zegel) * .21);
  width:calc(var(--zegel) * .42);
  background:linear-gradient(152deg, rgba(248,232,190,.92) 0%, rgba(226,196,124,.78) 46%, rgba(193,154,74,.5) 100%)}
@media (prefers-reduced-motion:no-preference){
  .hero::after{animation:zegel-draai 240s linear infinite; will-change:transform}
}
@keyframes zegel-draai{to{transform:rotate(360deg)}}
@media (max-width:960px){
  .hero{--zegel:420px}
  .hero::after{right:-150px; top:auto; bottom:-96px; opacity:.3}
  .hero-merk{right:calc(-150px + var(--zegel) * .29); top:auto; bottom:calc(-96px + var(--zegel) * .29);
    background:linear-gradient(152deg, rgba(242,219,166,.42) 0%, rgba(219,185,104,.26) 46%, rgba(193,154,74,.1) 100%)}
}
/* de knop naar de tarieven als echte knop: wit vlak, zoals elke hoofdactie op de site */
.hero .hero-btns .btn-ghost-light{background:#fff; color:var(--ink); border-radius:12px; padding:15px 26px}
.hero .hero-btns .btn-ghost-light::after{display:none}
.hero .hero-btns .btn-ghost-light:hover{background:#f2e6cd; color:var(--ink)}

/* subpagina's: dezelfde rozet als stille gravure rechtsboven, in plaats van de ringen */
.page-hero::after{opacity:.22; -webkit-mask-image:none; mask-image:none;
  background:url(rozet-goud.svg) no-repeat right -170px top -230px / 560px}
@media (max-width:720px){.page-hero::after{background-size:380px; background-position:right -190px top -150px}}

/* Over: de plek van de adviseur als zegel, net als de hero (rozet achter de V, Atlantisch vlak) */
.adviseur-zegel{border:1px solid rgba(193,154,74,.35);
  background:radial-gradient(80% 70% at 30% 0%, rgba(70,124,200,.28), transparent 60%), linear-gradient(160deg, #123366, #0b2348)}
.adviseur-zegel::after{content:""; position:absolute; inset:7%; pointer-events:none; opacity:.34;
  background:url(rozet-goud.svg) center/contain no-repeat}
.adviseur-zegel > span,.adviseur-zegel > small{position:relative; z-index:1}
.adviseur-zegel > span{color:#e8cb86; text-shadow:0 0 34px rgba(219,185,104,.4)}
/* de disclaimer in de footer: op het diepere inkt was .38 te zwak (3,6:1) */
.footer-disclaimer{color:rgba(255,255,255,.6)}

/* stipjes onder de veegrijen (app-schermen, pakketten): de lege stip was navy op navy, nu zichtbaar */
.slider-stippen button::before{background:rgba(255,255,255,.3)}
.slider-stippen button.is-actief::before{background:var(--gold)}

/* de voetregel onder de losse diensten (prijsnoot + knoppen): in de basis een kale rij; als glasvlak heeft
   hij binnenruimte en ronde hoeken nodig (28-10, Jawad: "wat is met deze lay-out aan de hand") */
.losse-voet{padding:22px 26px; border-radius:var(--radius); gap:18px 26px}
@media (max-width:640px){.losse-voet{padding:20px 18px 22px}}
.losse-voet .btn-row{margin-top:0}

/* ==========================================================================
   PAKKETKAARTEN NAAST HET CHAMPAGNEPAKKET (28-10; Jawad: "deze twee pakketten
   vind ik nog lelijk en saai"). Geen vlak glas meer maar elk een eigen plaat:
   - standaard (B.V.; in het Engels ook Sole trader): Atlantisch blauw, gegraveerde
     rozet als watermerk rechtsonder;
   - Buitenlandse onderneming: dieper nachtblauw met een gouden gloed linksonder
     en een gegraveerde wereldbol als watermerk.
   Gouden haarlijn bovenaan, de prijs in goud, een knop met gouden rand.
   Het zegel en het label staan in presentatie.css (ook licht). Het watermerk is
   een achtergrondlaag (rozet-/wereld-goud-zacht.svg, dekking in het bestand), zodat
   de kaart geen overflow:hidden nodig heeft en het zegel over de rand kan hangen.
   ========================================================================== */
.pakket-trio .pakket-kaart :is(h3,h4){font-size:1.55rem; letter-spacing:-.01em}

/* de plaat */
.pakket-kaart:not(.is-compleet){border:1px solid rgba(219,185,104,.26);
  background:
    linear-gradient(90deg, rgba(219,185,104,0), rgba(227,198,132,.85) 50%, rgba(219,185,104,0)) top center / 78% 1px no-repeat,
    url(rozet-goud-zacht.svg) right -120px bottom -120px / 330px 330px no-repeat,
    radial-gradient(120% 70% at 100% 0%, rgba(70,124,200,.34), transparent 60%),
    linear-gradient(165deg, #15386c 0%, #0f2c57 48%, #0a2047 100%);
  box-shadow:0 34px 70px -42px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08)}
.pakket-kaart:not(.is-compleet):has([data-pakket="Buitenland"]){
  background:
    linear-gradient(90deg, rgba(219,185,104,0), rgba(227,198,132,.85) 50%, rgba(219,185,104,0)) top center / 78% 1px no-repeat,
    url(wereld-goud-zacht.svg) right -120px bottom -120px / 330px 330px no-repeat,
    radial-gradient(110% 75% at 0% 100%, rgba(193,154,74,.2), transparent 60%),
    radial-gradient(90% 60% at 100% 0%, rgba(70,124,200,.22), transparent 60%),
    linear-gradient(165deg, #10294f 0%, #0b2046 50%, #081a3a 100%)}

/* prijs in goud, scheidslijn goud */
.pakket-kaart:not(.is-compleet) .pakket-prijs strong{color:#e6c97f;
  background:linear-gradient(180deg, #f4dea4 0%, #d4ad5c 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.pakket-kaart:not(.is-compleet) .pakket-prijs{border-color:rgba(219,185,104,.24)}
.pakket-kaart:not(.is-compleet) .pakket-kern{color:var(--text)}

/* knop: geen onderstreept linkje maar een knop met gouden rand */
.pakket-kaart:not(.is-compleet) > .btn-ghost{border:1px solid rgba(219,185,104,.62); border-radius:12px;
  padding:13px 18px; background:rgba(4,12,27,.28); color:#fff}
.pakket-kaart:not(.is-compleet) > .btn-ghost::after{display:none}
.pakket-kaart:not(.is-compleet) > .btn-ghost:hover{background:rgba(193,154,74,.16); border-color:var(--gold-soft); color:#fff}
@media (max-width:720px){
  .pakket-trio .pakket-kaart :is(h3,h4){font-size:1.5rem}
  .pakket-kaart:not(.is-compleet){background-size:78% 1px, 280px 280px, auto, auto; background-position:top center, right -110px bottom -100px, 0 0, 0 0}
  .pakket-kaart:not(.is-compleet):has([data-pakket="Buitenland"]){background-size:78% 1px, 280px 280px, auto, auto, auto;
    background-position:top center, right -110px bottom -100px, 0 0, 0 0, 0 0}
}
@media (max-width:380px){.pakket-trio .pakket-kaart :is(h3,h4){font-size:1.38rem}}
/* het label "Meest gekozen" op de prijskaarten van de stadspagina's in dezelfde vorm als op de pakketkaarten */
.price-card--featured .price-badge{background:var(--ink); color:#efd9a1; border:1px solid rgba(219,185,104,.7);
  text-transform:none; letter-spacing:.01em; font-weight:600; box-shadow:0 8px 18px -8px rgba(4,12,27,.7)}
/* de pijl in de knoppen van de slotband niet laten krimpen (op de telefoon werd hij een stipje) */
.cta .btn svg{flex:none; width:16px; height:16px}

/* ==========================================================================
   FOOTER (28-10; Jawad: "staat nu nog lelijk"). Rustig en strak:
   menukoppen kleiner, disclaimer klein en zacht, en onderaan op de telefoon
   eerst het e-mailadres en het nummer (wit, eigen regel), dan privacy en
   voorwaarden, dan kort het copyright. Op desktop één regel: copyright links,
   contact in het midden, privacy en voorwaarden rechts.
   ========================================================================== */
.site-footer{padding:56px 0 30px}
.footer-col :is(h2,h4){font-size:.72rem; letter-spacing:.16em; color:rgba(255,255,255,.85)}
.footer-col a{font-size:.95rem; color:rgba(255,255,255,.66)}
.footer-disclaimer{margin-top:30px; font-size:.78rem; line-height:1.6; color:rgba(255,255,255,.55); max-width:72ch}
.footer-bottom{margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); align-items:center;
  font-size:.82rem; color:rgba(255,255,255,.58)}
.footer-contact{gap:6px 24px}
.footer-contact a{color:#fff; font-weight:500}
.footer-legal{gap:22px}
.footer-legal a{color:rgba(255,255,255,.62)}
@media (max-width:640px){
  .site-footer{padding:36px 0 112px}
  .footer-col > summary{min-height:54px}
  .footer-col > summary :is(h2,h4){font-size:.74rem; letter-spacing:.16em}
  .footer-disclaimer{margin-top:24px}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:16px; margin-top:24px; padding-top:24px}
  .footer-contact{order:-1; flex-direction:column; gap:10px}
  .footer-contact a{font-size:1.05rem}
  .footer-legal{order:1; font-size:.86rem}
  .footer-copy{order:2; font-size:.8rem}
  .footer-rechten{display:none}
}

/* contact onderaan: een navy munt met gouden rand en een gouden lijnpictogram (zelfde taal als het zegel),
   ernaast een klein label en het adres of nummer (28-10, Jawad: "mooie pictogram erbij passend bij de rest") */
.footer-contact{display:flex; flex-wrap:wrap; gap:14px 34px}
.footer-contact-rij{display:inline-flex; align-items:center; gap:13px; text-decoration:none; color:#fff}
.footer-munt{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(227,198,132,.55); color:var(--gold-soft);
  background:radial-gradient(circle at 38% 30%, #15356a 0%, #0b1f42 64%, #081936 100%);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.7); transition:border-color .25s, box-shadow .25s}
.footer-munt svg{width:18px; height:18px}
.footer-contact-rij > span:last-child{display:flex; flex-direction:column; line-height:1.25}
.footer-contact-rij small{font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(219,185,104,.85); margin-bottom:3px}
.footer-contact-rij > span:last-child > span{font-weight:500; color:#fff}
.footer-contact-rij:hover .footer-munt{border-color:var(--gold-soft); box-shadow:0 0 0 4px rgba(193,154,74,.14)}
.footer-contact-rij:hover > span:last-child > span{color:var(--gold-soft)}
@media (max-width:640px){
  .footer-contact{gap:16px}
  .footer-contact-rij > span:last-child > span{font-size:1rem}
  .footer-munt{width:44px; height:44px}
}
/* desktop dezelfde volgorde als mobiel: eerst het contact op een eigen regel, daarna copyright en de twee links op
   één rustige regel; alles links uitgelijnd, zodat de zwevende belknoppen rechtsonder niets afdekken */
@media (min-width:641px){
  .footer-bottom{justify-content:flex-start; gap:14px 28px}
  .footer-contact{order:-1; flex-basis:100%; margin-bottom:8px}
  .footer-legal{order:1}
  .footer-copy{order:0}
}