/* ============================================================
   Vandaag Duurzaam — glanslaag
   ------------------------------------------------------------
   Deze laag komt bovenop de bestaande stijl in elke pagina.
   Alleen licht, diepte en glans. Geen enkele wijziging in
   layout, kleurmerk, lettertype of tekstgrootte.

   Plaatsen: dit bestand naast index.html in de hoofdmap.
   In elke pagina staat vlak voor </head>:
     <link rel="stylesheet" href="vd-glans.css">

   Werkt het niet zoals je wilt? Haal die ene regel weg en de
   site staat weer precies zoals hij was.
   ============================================================ */

:root{
  /* lichtrand bovenop een vlak, alsof er licht op valt */
  --gl-rand:inset 0 1px 0 rgba(255,255,255,.92);
  /* twee lagen schaduw: een scherpe dichtbij, een zachte ver weg */
  --gl-zacht:0 1px 2px rgba(43,36,23,.05),0 10px 26px rgba(43,36,23,.07);
  --gl-diep:0 2px 5px rgba(43,36,23,.06),0 22px 54px rgba(43,36,23,.13);
  --gl-zweef:0 3px 8px rgba(43,36,23,.07),0 34px 80px rgba(43,36,23,.17);
  /* warm papier: wit bovenin, room onderin */
  --gl-vlak:linear-gradient(180deg,#ffffff 0%,#fffdf7 60%,#fffaee 100%);
}

/* --- algemene afwerking ------------------------------------ */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--geel);color:var(--inkt)}

/* --- hero: zonlicht over het vlak -------------------------- */
header.hero{
  background:
    radial-gradient(86% 118% at 84% -16%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 58%),
    radial-gradient(74% 112% at 4% 108%,rgba(226,101,20,.50) 0%,rgba(226,101,20,0) 62%),
    linear-gradient(158deg,#ffdf46 0%,var(--geel) 20%,#f9a92a 62%,var(--oranje) 100%);
}
header.hero::before{
  content:"";position:absolute;top:-45%;left:-12%;width:66%;height:190%;
  background:linear-gradient(104deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.26) 50%,rgba(255,255,255,0) 64%);
  transform:rotate(9deg);pointer-events:none;z-index:0;
}
header.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  background:linear-gradient(180deg,rgba(255,251,235,0) 0%,rgba(255,251,235,.20) 100%);
  pointer-events:none;z-index:0;
}
.hero-inner,.hero-grid{position:relative;z-index:1}
.hero h1{text-shadow:0 1px 0 rgba(255,255,255,.20),0 10px 28px rgba(122,58,4,.16)}
.hero .eyebrow{
  background:rgba(255,255,255,.26);
  border:1px solid rgba(255,255,255,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px rgba(139,66,8,.14);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
.prodkop a{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 12px rgba(139,66,8,.12);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.prodkop a:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px rgba(139,66,8,.18)}
.prodkop a.hier{box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(139,66,8,.20)}

/* --- balk bovenaan: helder glas ---------------------------- */
nav{
  background:linear-gradient(180deg,rgba(255,253,244,.97) 0%,rgba(255,253,244,.88) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  border-bottom-color:rgba(240,230,200,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 28px rgba(43,36,23,.05);
}
nav .submenu{
  background:linear-gradient(180deg,#fff 0%,var(--room) 100%);
  box-shadow:inset 0 1px 0 #fff,0 22px 52px rgba(43,36,23,.18);
}
nav .submenu .nr{
  background:radial-gradient(circle at 34% 26%,#ffec8f 0%,var(--geel) 58%,#efb800 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
nav .actief{box-shadow:0 3px 0 -1px rgba(255,211,15,.35)}

/* --- knoppen: licht van boven, glans op de rand ------------ */
.knop{
  background:linear-gradient(180deg,#4fc87c 0%,var(--groen) 52%,#2f9a55 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 1px 2px rgba(43,36,23,.10),0 8px 20px rgba(59,174,100,.30);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.knop:hover{
  transform:translateY(-2px);filter:brightness(1.04) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 2px 4px rgba(43,36,23,.10),0 16px 34px rgba(59,174,100,.40);
}
.knop:active{transform:translateY(0);box-shadow:inset 0 2px 5px rgba(0,0,0,.18),0 3px 8px rgba(59,174,100,.24)}
.knop-wit{
  background:linear-gradient(180deg,#fff 0%,#fffaec 100%);color:var(--inkt);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(43,36,23,.10),0 10px 24px rgba(43,36,23,.16);
}
.knop-wit:hover{
  filter:none;
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(43,36,23,.10),0 16px 34px rgba(43,36,23,.22);
}
.btwknop{
  background:linear-gradient(180deg,#413824 0%,var(--inkt) 55%,#1e1910 100%);
  border:1px solid rgba(255,255,255,.10);
}
.btwknop .stip{
  background:radial-gradient(circle at 34% 26%,#fff3a8,var(--geel) 60%,#efb800);
  box-shadow:0 0 10px rgba(255,211,15,.85);
}
.btwknop .nw{background:linear-gradient(180deg,#ffe259,var(--geel) 60%,#f2c400)}

/* --- kaarten en vlakken: papier met lichtrand -------------- */
.kaart,
.review,
.merkkaart,
.nood-kast,
.feit div,
.bw-uitslag,
.erebalk,
.btwblok,
.samenwerk,
.samenwerk .logovak,
.fotoband figure,
.fotoraster figure,
.duofoto figure,
.breedfoto,
.spectabel,
.erebedrag div,
.btwrij div,
.nood-cijfer{
  background-image:var(--gl-vlak);
  box-shadow:var(--gl-rand),var(--gl-zacht);
}
.kaart:hover,
.review:hover,
.merkkaart:hover{
  box-shadow:var(--gl-rand),0 2px 6px rgba(43,36,23,.06),0 20px 44px rgba(240,129,41,.20);
}
.kaart.uitgelicht{
  box-shadow:var(--gl-rand),0 0 0 3px rgba(59,174,100,.28),0 20px 46px rgba(59,174,100,.22);
}
.kaart.uitgelicht:hover{
  box-shadow:var(--gl-rand),0 0 0 3px rgba(59,174,100,.36),0 26px 56px rgba(59,174,100,.28);
}
.erebalk,
.btwblok,
.samenwerk{box-shadow:var(--gl-rand),var(--gl-diep)}
.spectabel{overflow:hidden}
.spectabel th{background-image:linear-gradient(180deg,#fffdf5,#fff8e8)}

/* --- zwevende panelen: hoger boven de pagina --------------- */
.wijzer,
.formkaart,
.huiskaart{
  background-image:linear-gradient(180deg,#fff 0%,var(--room) 55%,#fff8e8 100%);
  box-shadow:var(--gl-rand),var(--gl-zweef);
}
.huiskaart{border:1px solid rgba(255,255,255,.6)}
.bw-uitslag{box-shadow:var(--gl-rand),var(--gl-diep)}

/* --- donker kader: gelakt, met licht in de hoeken ---------- */
.donker{
  background-image:
    radial-gradient(118% 118% at 10% -12%,rgba(255,211,15,.15) 0%,rgba(255,211,15,0) 46%),
    radial-gradient(92% 92% at 102% 112%,rgba(59,174,100,.18) 0%,rgba(59,174,100,0) 56%),
    linear-gradient(158deg,#3b3222 0%,var(--inkt) 50%,#1f1a11 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 72px rgba(43,36,23,.26);
}
.donker li::before{
  background:radial-gradient(circle at 32% 28%,#93e3af 0%,var(--groen) 62%,#2c9351 100%);
  box-shadow:0 0 0 4px rgba(59,174,100,.16);
}
.donker b{text-shadow:0 0 22px rgba(255,211,15,.28)}

/* --- ronde accenten: bolletjes met glans ------------------- */
.stapbol{
  background:radial-gradient(circle at 32% 26%,#ffec8f 0%,var(--geel) 55%,#efb800 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 18px rgba(226,168,0,.32);
}
.bevestiging .vink{
  background:radial-gradient(circle at 32% 26%,#79dc9d 0%,var(--groen) 58%,#2c9351 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 28px rgba(59,174,100,.35);
}
.cat-kop .bol{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 6px rgba(43,36,23,.20)}
.icoon{filter:drop-shadow(0 4px 10px rgba(43,36,23,.10))}

/* --- labels, tags en keuzeknoppen -------------------------- */
.tag,
.tijd{
  background-image:linear-gradient(180deg,#fffdf6 0%,var(--room-diep) 100%);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(43,36,23,.05);
}
.tag.groen{background-image:linear-gradient(180deg,#eef9f2 0%,#e0f2e7 100%)}
.optie{
  background-image:linear-gradient(180deg,#fff 0%,#fffaf0 100%);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(43,36,23,.05);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.optie:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(43,36,23,.10)}
.optie.gekozen{
  background-image:linear-gradient(180deg,#ffe870 0%,var(--geel) 55%,#f3c500 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 18px rgba(226,168,0,.34);
}
.nieuwlabel{
  background-image:linear-gradient(180deg,#4fc87c,var(--groen) 60%,#2f9a55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px rgba(59,174,100,.30);
}

/* --- foto's: dieper in de pagina --------------------------- */
.fotoband figure,
.fotoraster figure,
.breedfoto{box-shadow:var(--gl-rand),0 2px 6px rgba(43,36,23,.06),0 18px 40px rgba(43,36,23,.11)}
.winkelfoto img{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 30px 68px rgba(43,36,23,.24)}
.nood-scene{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 20px 46px rgba(43,36,23,.16)}
.huisvideo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 14px 34px rgba(43,36,23,.12)}

/* --- formulier en bediening -------------------------------- */
.veld input[type=text],
.veld input[type=email],
.veld input[type=tel],
.veld textarea,
.veld select{
  background-image:linear-gradient(180deg,#fffdf8 0%,#fff 40%);
  box-shadow:inset 0 2px 4px rgba(43,36,23,.05);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.veld input:focus,
.veld textarea:focus,
.veld select:focus{box-shadow:inset 0 2px 4px rgba(43,36,23,.04),0 0 0 4px rgba(255,211,15,.28)}
input[type=range]{box-shadow:inset 0 1px 3px rgba(43,36,23,.22)}
input[type=range]::-webkit-slider-thumb{box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(43,36,23,.24)}
.schakel{
  background-image:linear-gradient(180deg,#57cb84 0%,var(--groen) 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.14),0 3px 10px rgba(59,174,100,.28);
}
.schakel.uit{
  background-image:linear-gradient(180deg,#d9503f 0%,#c0392b 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.16),0 3px 10px rgba(192,57,43,.26);
}
.schakel::after{box-shadow:inset 0 -1px 0 rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.28)}
.nood-status.actief{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(59,174,100,.18)}

/* --- rustige achtergrondlaag in de diepe secties ----------- */
.sectie-diep{
  background-image:radial-gradient(72% 100% at 50% 0%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.advies{
  background-image:linear-gradient(180deg,#fffdf5 0%,var(--room-diep) 100%);
  box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(43,36,23,.06);
}
.openheid,
.opbrengstvoet{
  background-image:linear-gradient(180deg,#fffdf5 0%,var(--room-diep) 100%);
  box-shadow:inset 0 1px 0 #fff;
}

/* --- chatvenster en WhatsApp-knop -------------------------- */
/* body ervoor, want die stijlen worden later in de pagina geladen */
body #ck-knop{
  background:linear-gradient(180deg,#4fc87c 0%,var(--groen) 55%,#2f9a55 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 10px 28px rgba(59,174,100,.40);
}
body #ck-knop:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px rgba(59,174,100,.50)}
body #ck-paneel{box-shadow:inset 0 1px 0 #fff,0 32px 80px rgba(43,36,23,.30)}
body #ck-kop{
  background:linear-gradient(135deg,#ffdf46 0%,var(--geel) 32%,var(--oranje) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}
body #ck-stuur{
  background:linear-gradient(180deg,#4fc87c 0%,var(--groen) 55%,#2f9a55 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 4px 12px rgba(59,174,100,.32);
}
body .ck-mens{background:linear-gradient(180deg,#4fc87c 0%,var(--groen) 100%)}
body .vd-wa-knop{
  background:linear-gradient(180deg,#3ade7c 0%,#25d366 55%,#17b850 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px rgba(23,150,70,.32);
}
body .vd-wa-knop:hover,
body .vd-wa-knop:focus-visible{
  background:linear-gradient(180deg,#32d073 0%,#1fb457 55%,#149a44 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 32px rgba(23,150,70,.42);
}

/* --- kleine correctie ---------------------------------------
   Op smalle telefoons was de pagina iets breder dan het scherm,
   waardoor je opzij kon schuiven. Dat kwam door het noodstroom-
   blok. Deze twee regels halen dat weg. ---------------------- */
@media(max-width:900px){
  .nood-grid>*,.nood-kast{min-width:0}
  .nd-hint{white-space:normal}
}
@media(max-width:420px){
  .nood-kast{padding:20px 16px}
  .nood-rij{flex-wrap:wrap}
  .nood-cijfers{grid-template-columns:1fr 1fr}
  .merken{grid-template-columns:1fr}
  .merkkaart{min-width:0}
}

/* --- minder beweging: alle overgangen uit ------------------ */
@media(prefers-reduced-motion:reduce){
  .knop,.optie,.prodkop a,.veld input,.veld textarea,.veld select{transition:none}
  .knop:hover,.optie:hover,.prodkop a:hover{transform:none}
}