/* =====================================================================
   SITE — subpagina-layout (dienst- & lokale pagina's), premium dark
   Laadt ná style.css + content.css. Zet de dark tokens op :root zodat
   header, main én footer ze overal kunnen gebruiken.
   ===================================================================== */
:root{
  --bg:#12141b; --panel:#191d26; --deep:#0c0e13; --card:#1c212c;
  --gold:#d9a441; --line:rgba(255,255,255,.09);
  --ink:#edeff4; --muted:#9aa2b0; --red:#D5000B; --red-d:#A80008;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(88px + var(--banner-h));background:#faf7f0}
html:has(body[data-theme="night"]){background:#0c0e13}
body{color:var(--ink);min-height:100vh;background:#faf7f0}
body[data-theme="night"]{background:#0c0e13!important}

/* header — LICHT als standaard (dag), donker als je naar nacht wisselt */
.site-hdr{background:rgba(255,252,246,.92)!important;backdrop-filter:blur(12px);border-bottom:1px solid rgba(38,30,18,.10)}
.site-hdr .hdr-brand img{filter:none}
body[data-theme="night"] .site-hdr{background:rgba(12,16,24,.9)!important;border-bottom:1px solid rgba(255,255,255,.09)}
body[data-theme="night"] .site-hdr .hdr-brand img{filter:brightness(0) invert(1)}

.content{position:relative;z-index:1;background:var(--bg);color:var(--ink);display:block}

/* breadcrumb */
.crumbs{max-width:1180px;margin:0 auto;padding:calc(96px + var(--banner-h)) clamp(20px,4vw,44px) 0;font-family:'Fraunces',Georgia,serif;font-size:.92rem;color:var(--muted)}
.crumbs a{color:var(--gold)}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.45;margin:0 9px}

/* article hero */
.phero{max-width:1180px;margin:0 auto;padding:22px clamp(20px,4vw,44px) 12px;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,56px);align-items:center}
.phero .tag{display:inline-block;font-family:'Fraunces',serif;font-style:italic;font-size:.98rem;color:var(--gold);margin-bottom:10px}
.phero h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;color:var(--ink);letter-spacing:-.01em;margin-bottom:16px}
.phero .sub{color:var(--muted);font-size:1.12rem;margin-bottom:24px;max-width:52ch}
.phero-cta{display:flex;flex-wrap:wrap;gap:12px}
.phero-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:0 24px 50px rgba(0,0,0,.55)}
.phero-badges{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;color:var(--muted);font-size:.92rem}
.phero-badges b{color:var(--gold);font-family:'Fraunces',serif}

/* body: prose + sticky aside */
.pwrap{max-width:1180px;margin:0 auto;padding:clamp(34px,5vw,64px) clamp(20px,4vw,44px);display:grid;grid-template-columns:1fr 330px;gap:clamp(30px,4vw,56px);align-items:start}
.prose{max-width:760px}
.prose h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink);margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:'Fraunces',serif;font-size:1.28rem;color:var(--ink);margin:26px 0 8px}
.prose p{color:var(--muted);margin-bottom:14px;line-height:1.7}
.prose ul{list-style:none;display:grid;gap:10px;margin:0 0 18px}
.prose ul li{position:relative;padding-left:28px;color:var(--ink)}
.prose ul li::before{content:"\2713";position:absolute;left:0;top:2px;color:var(--gold);font-weight:800}
.prose strong{color:var(--ink)}
.prose a{color:var(--gold)}
.prose img{width:100%;border-radius:16px;border:1px solid var(--line);margin:18px 0}
.prose .figrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prose .figrow img{margin:0}

.aside{position:sticky;top:calc(92px + var(--banner-h));display:grid;gap:16px}
.card-box{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.card-box h3{font-family:'Fraunces',serif;font-size:1.25rem;color:var(--ink);margin-bottom:8px}
.card-box p{color:var(--muted);font-size:.94rem;margin-bottom:14px}
.card-box .btn{width:100%;justify-content:center}
.card-box .btn+.btn{margin-top:10px}
.linklist{list-style:none;display:grid;gap:2px}
.linklist a{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--ink);font-size:.95rem;padding:11px 0;border-bottom:1px solid var(--line)}
.linklist a:last-child{border-bottom:0}
.linklist a:hover{color:var(--gold)}
.linklist a::after{content:"\2192";color:var(--gold)}

/* FAQ reuse .faq from content.css; related strip */
.relstrip{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px) 50px}
.relstrip h2{font-family:'Fraunces',serif;font-weight:500;font-size:1.5rem;color:var(--ink);margin-bottom:16px}
.reltags{display:flex;flex-wrap:wrap;gap:8px}
.reltags a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.9rem;color:var(--ink);font-weight:500}
.reltags a:hover{border-color:var(--gold);color:var(--gold)}

/* CTA band on subpages */
.pcta{background:var(--deep);border-top:1px solid var(--line)}
.pcta-in{max-width:1180px;margin:0 auto;padding:clamp(50px,7vw,80px) clamp(20px,4vw,44px);text-align:center}
.pcta-in h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.9rem,4vw,2.8rem);color:var(--ink);margin-bottom:12px}
.pcta-in p{color:var(--muted);font-size:1.06rem;margin-bottom:26px}
.pcta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media(max-width:900px){
  .phero{grid-template-columns:1fr;gap:24px}
  .phero-img{order:-1;max-width:520px}
  .pwrap{grid-template-columns:1fr}
  .aside{position:static;grid-template-columns:1fr 1fr}
  .prose{max-width:none}
}
@media(max-width:560px){.aside{grid-template-columns:1fr}.prose .figrow{grid-template-columns:1fr}}

/* ---- sub-diensten grid (kaarten op een dienst-hub) ---- */
.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.subcard{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 22px 20px;transition:.2s}
.subcard:hover{border-color:var(--gold);transform:translateY(-3px)}
.subcard h3{font-family:'Fraunces',serif;font-size:1.2rem;color:var(--ink);margin:0}
.subcard p{color:var(--muted);font-size:.92rem;margin:0;flex:1}
.subcard-go{color:var(--gold);font-size:.9rem;font-weight:500;margin-top:4px}
@media(max-width:860px){.subgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.subgrid{grid-template-columns:1fr}}
.linklist a strong{font-weight:600}