/* Liquid glass: het thema van de hele site.
   Achter alles ligt een vast, zacht verlicht vlak (body::before) zodat het glas overal zichtbaar is.
   Kaarten (.bg-card en de eigen kaarten) worden wit glas; grijze en lichtgroene vlakken worden doorschijnend.
   Groene secties (#infoavond, #start) blijven groen met lichtvlekken en groen glas.
   Oorspronkelijk: doorschijnend glas met vervaging, een lichtrand en een zachte glans.
   Gebruikt op: kop bovenaan (.glas-kop), vaste knop op gsm (.glas-balk), hero (.glas-hero),
   infoavond-kaart (.ia-kaart.glas). De chatknop staat in chat.js.
   Zonder backdrop-filter (oude browsers) valt het terug op een bijna effen vlak. */
.glas{position:relative;isolation:isolate;
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 55%,rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -1px 1px rgba(255,255,255,.18),0 18px 40px -18px rgba(15,23,42,.45)}
.glas::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 60% at 15% 0%,rgba(255,255,255,.35),transparent 55%)}

/* Kop: zwevende glasbalk */
.glas-kop{padding:8px 8px 0;background:transparent;border:0}
.glas-kop-in{border-radius:9999px;padding-left:1.25rem;padding-right:.5rem;background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(255,255,255,.58));border-color:rgba(255,255,255,.8);box-shadow:inset 0 1px 1px #fff,0 8px 28px -12px rgba(15,23,42,.35)}

/* Gsm: zwevende glasbalk rond de knop */
.glas-balk{padding:0 10px calc(10px + env(safe-area-inset-bottom));background:transparent;border:0}
.glas-balk-in{border-radius:1.4rem;background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.45))}
.glas-balk-in a{border-radius:1rem}

/* Hero: glaskaart over de foto */
.glas-hero{max-width:40rem;border-radius:1.75rem;padding:1.5rem}
@media(min-width:640px){.glas-hero{padding:2rem 2.25rem}}
.glas-hero h1,.glas-hero p{text-shadow:0 1px 12px rgba(15,23,42,.35)}

/* Infoavond: glaskaart op groen, met zachte lichtvlekken erachter zodat het glas leeft */
.ia{position:relative;overflow:hidden;
  background:radial-gradient(40rem 22rem at 85% 15%,rgba(155,195,28,.55),transparent 60%),
             radial-gradient(30rem 20rem at 70% 95%,rgba(255,255,255,.22),transparent 60%),
             radial-gradient(36rem 26rem at 5% 100%,rgba(15,80,10,.55),transparent 60%),#2a871d}
.ia-kaart.glas{color:#fff;background:linear-gradient(150deg,rgba(255,255,255,.24),rgba(255,255,255,.07) 60%,rgba(255,255,255,.12));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -1px 1px rgba(255,255,255,.2),0 30px 60px -24px rgba(5,30,2,.6)}
.ia-kaart.glas .ia-uur,.ia-kaart.glas .ia-priv,.ia-kaart.glas.ia-ok p{color:rgba(255,255,255,.82)}
.ia-kaart.glas .epc-veld label{color:#fff}
.ia-kaart.glas .epc-veld input{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.6);color:#0f172a}
.ia-kaart.glas .ia-teller{border-color:rgba(255,255,255,.6)}
.ia-kaart.glas .ia-teller button{background:rgba(255,255,255,.75)}
.ia-kaart.glas .ia-teller input{background:rgba(255,255,255,.92)}
.ia-kaart.glas .ia-ticket span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.ia-kaart.glas .ia-ticket small{color:rgba(255,255,255,.85)}
.ia-kaart.glas .ia-ticket input:checked+span{background:#fff;border-color:#fff;color:#1f6a15}
.ia-kaart.glas .ia-ticket input:checked+span small{color:#1f6a15}
.ia-kaart.glas .ia-ticket input:focus-visible+span{outline-color:#fff}
.ia-kaart.glas .ia-knop{background:#1d6414;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 24px -10px rgba(5,30,2,.7)}
.ia-kaart.glas .ia-knop:focus-visible{outline-color:#fff}
.ia-kaart.glas.ia-ok .ia-ok-dag{color:#fff}
.ia-kaart.glas.ia-ok a{color:#fff}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glas{background:rgba(255,255,255,.9)}
  .glas-hero{background:rgba(15,23,42,.6)}
  .ia-kaart.glas{background:rgba(20,90,12,.92)}
}
@media(prefers-reduced-transparency:reduce){
  .glas-kop-in,.glas-balk-in{background:#fff}
  .glas-hero{background:rgba(15,23,42,.7)}
  .ia-kaart.glas{background:#1f6a15}
}

/* De kop zweeft over de hero (alleen op de startpagina): geen witte strook erboven */
.glas-kop-over{margin-bottom:-72px}
.glas-hero-ruimte{padding-top:calc(72px + 1.75rem)}


/* ---------- Thema voor de hele site ---------- */
html{background:#edf5e9}
body{background:transparent}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70vmax 55vmax at 85% 20%,rgba(155,195,28,.5),transparent 60%),
    radial-gradient(60vmax 50vmax at 5% 65%,rgba(42,135,29,.32),transparent 60%),
    radial-gradient(50vmax 40vmax at 55% 105%,rgba(242,213,0,.28),transparent 60%),
    radial-gradient(40vmax 30vmax at 35% 25%,rgba(255,255,255,.9),transparent 65%),
    linear-gradient(180deg,#f1f7ee,#e3efdd)}
body>.min-h-screen,body>main.min-h-screen{background:transparent}

/* Lichte vlakken worden doorschijnend: het verlichte vlak schijnt erdoor */
section.bg-secondary\/50{background:transparent}
section.bg-secondary{background:rgba(255,255,255,.38);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-color:rgba(255,255,255,.7)}

/* Kaarten: wit glas */
.bg-card,.epc-ref,.epc-case,.epc-plan-stap,.epc-stem{
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.4))!important;
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border-color:rgba(255,255,255,.85)!important;
  box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.35),0 14px 34px -18px rgba(20,70,10,.35)}
/* Binnen een glaskaart: halfwit, zonder extra vervaging */
.epc-keuze,.epc-terug{background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.9)}
.epc-ref-beeld,.epc-case-foto{background:rgba(237,245,233,.7)}

/* Afsluitende oproep (#start): groen met lichtvlekken */
#start{position:relative;overflow:hidden;
  background:radial-gradient(40rem 20rem at 85% 0%,rgba(155,195,28,.55),transparent 60%),
             radial-gradient(32rem 22rem at 10% 100%,rgba(15,80,10,.55),transparent 60%),#2a871d}

/* Voettekst: glasstrook */
footer{background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.75)}

/* Knoppen: groen glas (witte tekst op groen) */
a.bg-primary.rounded-xl,button.bg-primary,.epc-verder,.ia-knop{
  background:linear-gradient(150deg,#3aa82b,#23781a)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -2px 4px rgba(0,0,0,.15),0 10px 24px -10px rgba(30,105,20,.7)!important;
  border:1px solid rgba(255,255,255,.25)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bg-card,.epc-ref,.epc-case,.epc-plan-stap,.epc-stem{background:#fff!important}
}
@media(prefers-reduced-transparency:reduce){
  .bg-card,.epc-ref,.epc-case,.epc-plan-stap,.epc-stem{background:#fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  body::before{display:none}
}

/* Tipvak in de werkwijze (lichtgroen vlak binnen een sectie) */
div.bg-secondary{background:linear-gradient(150deg,rgba(225,240,218,.75),rgba(225,240,218,.45));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.85)}

/* Hero: de EPC-check begint in de hero (eerste vraag = huidig label) */
.hero-check{margin-top:1.5rem}
.hero-check-vraag{font-weight:700;font-size:1.0625rem;margin-bottom:.7rem}
.hero-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
@media(min-width:640px){.hero-labels{grid-template-columns:repeat(6,minmax(0,1fr))}}
.hero-label{display:flex;align-items:center;justify-content:center;min-height:3.4rem;border-radius:1rem;cursor:pointer;
  background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.72));border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 1px #fff,0 8px 18px -10px rgba(15,23,42,.5);transition:transform .12s ease,box-shadow .12s ease}
.hero-label:hover{transform:translateY(-2px);box-shadow:inset 0 1px 1px #fff,0 12px 24px -10px rgba(15,23,42,.55)}
.hero-label:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hero-label-breed{grid-column:1/-1;min-height:3rem;color:#0f172a;font-weight:600;font-size:1rem}
.hero-check-hint{margin-top:.6rem;font-size:.8125rem;color:rgba(255,255,255,.85)}
.hero-check-hint a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.hero-punten{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.875rem;color:rgba(255,255,255,.92)}
.hero-punten li{display:flex;align-items:center;gap:.35rem}
.hero-punten svg{width:1.05rem;height:1.05rem;color:#9bdc8a}
@media(prefers-reduced-motion:reduce){.hero-label{transition:none}.hero-label:hover{transform:none}}
#offerte{scroll-margin-top:84px}
/* Hero-foto: huis staat rechts; op gsm het huis in beeld houden */
.hero-foto{object-position:74% 50%}
@media(min-width:1024px){.hero-foto{object-position:right 55%}}
/* Zonnige foto: lichte lucht achter de kaart, dus de kaart iets donkerder voor leesbare witte tekst */
.glas-hero{background:linear-gradient(150deg,rgba(15,23,42,.30),rgba(15,23,42,.16) 55%,rgba(15,23,42,.26))}
.hero-foto{will-change:transform}

/* Witte waas over de hero-foto (op vraag van Pieter). De kaart wordt dan wit glas met donkere tekst. */
.hero-wit{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.14) 50%,rgba(255,255,255,.24))}
.glas-hero{background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.38) 55%,rgba(255,255,255,.5));color:#0f172a;border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 1px #fff,0 24px 50px -24px rgba(15,23,42,.35)}
.glas-hero h1,.glas-hero p{text-shadow:none}
.glas-hero p.text-white\/90,.glas-hero .hero-punten,.glas-hero .hero-check-hint{color:#334155}
.glas-hero .hero-check-hint a{color:#1f6a15}
.glas-hero .hero-punten svg{color:#2a871d}
.glas-hero .hero-label{border-color:rgba(15,23,42,.08)}
.glas-hero .bg-primary,.glas-hero .bg-primary\/95{color:#fff}