/* Lichtgenoot komt eraan (voorkant van lichtgenoot.nl, 9 nov 2026; rustiger 9 nov; één privacylink, onder het aanmelden; 10 nov: de tekst onderaan staat op de computer in het eerste scherm). De hele website staat op /web/. */
@font-face{font-family:"Lichtgenoot Serif";src:url(/lettertypen/lichtgenoot-serif.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lichtgenoot Serif";src:url(/lettertypen/lichtgenoot-serif-cursief.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lichtgenoot Sans";src:url(/lettertypen/lichtgenoot-sans.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lichtgenoot Sans";src:url(/lettertypen/lichtgenoot-sans-vet.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
:root{--serif:"Lichtgenoot Serif",Georgia,serif;--sans:"Lichtgenoot Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;--night:#0b1433;--night2:#101b45;--amber:#ffb36b;--gold:#ffd696;--moon:#f4eee6}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--night)}
body{margin:0;color:var(--moon);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;background:var(--night);display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
a{color:var(--gold);text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.bk{position:relative;flex:1 0 auto;display:flex;align-items:center;isolation:isolate;overflow:hidden}
.bk-beeld{position:absolute;inset:0;z-index:-2;background:var(--night) url(../afbeeldingen/gezin-nacht-heuvelpad.jpg) 68% 55%/cover no-repeat}
.bk::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(11,20,51,.94) 0%,rgba(11,20,51,.86) 32%,rgba(11,20,51,.42) 54%,rgba(11,20,51,0) 72%),linear-gradient(0deg,var(--night) 0%,rgba(11,20,51,0) 20%)}
.bk-in{position:relative;width:min(35rem,88vw);margin:0 0 0 clamp(24px,7vw,120px);padding:clamp(40px,7vh,88px) 0}
.lg{font-family:var(--serif);font-weight:400;font-size:clamp(46px,5.4vw,76px);letter-spacing:.006em;line-height:1;white-space:nowrap;margin:0}
.lg .o{position:relative;display:inline-block}
.lg .o i{position:absolute;left:50%;top:58%;width:1.15em;height:1.15em;margin:-.575em 0 0 -.575em;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,150,.95),rgba(255,179,107,.45) 40%,rgba(255,179,107,0) 100%);pointer-events:none}
.lg .o b{position:relative;font-weight:inherit}
.tag{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.8vw,24px);color:rgba(244,238,230,.84);margin:14px 0 clamp(34px,6vh,56px)}
.komt{display:flex;align-items:center;gap:14px;margin:0 0 14px;font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.licht{position:relative;flex:none;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff6e6 0,#ffd696 45%,#ffb36b 100%);box-shadow:0 0 12px 4px rgba(255,179,107,.5)}
.licht::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(255,214,150,.55);animation:adem 4.8s ease-in-out infinite}
@keyframes adem{0%,100%{transform:scale(.8);opacity:.3}50%{transform:scale(1.15);opacity:.9}}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(29px,3vw,42px);line-height:1.18;margin:0 0 20px;text-wrap:balance}
h1 em{display:block;font-style:italic;color:var(--gold)}
.x{font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:rgba(244,238,230,.86);margin:0 0 28px;max-width:33rem;text-wrap:pretty}
.aanmeld{position:relative;margin:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rij{display:flex;flex-wrap:wrap;gap:10px}
.rij input{flex:1 1 210px;min-width:0;height:52px;padding:0 18px;border-radius:999px;border:1px solid rgba(244,238,230,.4);background:#fbf7f1;color:#1c2140;font:inherit;font-size:17px}
.rij input::placeholder{color:#7a7f96}
.rij input:focus{outline:3px solid var(--amber);outline-offset:2px}
.rij input[aria-invalid=true]{border-color:#ff9b7a}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--amber);color:#2b1606;font:inherit;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 10px 30px rgba(255,179,107,.35);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,179,107,.5)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.btn[disabled]{opacity:.8;cursor:default;transform:none}
.err{margin:10px 0 0;color:#ffb59c;font-size:15px}
.small{margin:12px 0 0;font-size:14px;line-height:1.5;color:rgba(244,238,230,.74)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.jr-done:focus{outline:none}
.done-t{font-family:var(--serif);font-size:30px;line-height:1.2;margin:0 0 6px}
.done-x{margin:0;color:rgba(244,238,230,.88);line-height:1.6}
.voet{flex:none;padding:26px 24px 34px;text-align:center;font-size:15px;line-height:1.6;color:rgba(244,238,230,.72);background:var(--night)}
.voet p{margin:0 0 10px}
.voet .opdracht{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--moon);margin:0 0 10px}
.voet .copy{margin-top:14px;font-size:13px;color:rgba(244,238,230,.5)}
.pvs{max-width:40rem;margin:6px auto 0;scroll-margin-top:16px;text-align:left;border:1px solid transparent;border-radius:16px;padding:0 18px}
.pvs:not([open]):not(:target){display:none}
.pvs summary{display:block;width:max-content;margin:0 auto;cursor:pointer;padding:8px 0;color:rgba(244,238,230,.72);text-decoration:underline;text-underline-offset:3px;list-style:none}
.pvs summary::-webkit-details-marker{display:none}
.pvs[open]{border-color:rgba(244,238,230,.16);background:rgba(16,27,69,.4)}
.pvs[open] summary{width:auto;margin:0;padding:14px 0;font-weight:700;color:var(--moon);text-decoration:none}
.pvs-in{padding:0 0 10px;font-size:15px;line-height:1.6}
.pvs-in p{margin:0 0 10px}
@media (max-width:760px),(max-aspect-ratio:4/5){
 .bk{display:block;flex:none}
 .bk-beeld{position:relative;inset:auto;z-index:-1;height:min(44vh,370px);height:min(44svh,370px);background-position:86% 62%}
 .bk-beeld::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(180deg,rgba(11,20,51,0),var(--night))}
 .bk::before{display:none}
 .bk-in{position:static;width:auto;max-width:36rem;margin:-26px auto 0;padding:0 20px 18px}
 .voet{padding-top:22px}
 .lg{position:absolute;top:26px;left:max(20px,calc((100% - 36rem) / 2 + 20px))}
 .tag{position:absolute;top:80px;left:max(20px,calc((100% - 36rem) / 2 + 20px));margin:0}
 .komt{margin-bottom:10px}
 h1{margin-bottom:14px}
 .x{margin-bottom:18px}
 .rij .btn{width:100%}
}
@media (min-width:761px) and (min-aspect-ratio:801/1000) and (max-height:800px){.bk-in{padding:26px 0}.tag{margin-bottom:26px}}
@media (prefers-reduced-motion:reduce){.licht::after{animation:none;opacity:.6}.btn{transition:none}.btn:hover{transform:none}}